/* ============================================================
   EMAIL TICKETING PAGE — /features/free-email-ticketing-system
   Scope  : body.et-page, all selectors prefixed .et-
   Follows the shared design system (Instrument Sans + Mulish,
   brand blue #0302B0 / teal #01A9E0). Self-contained; does not
   affect other pages. Tab section mirrors the product page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --et-blue:       #0302B0;
  --et-teal:       #01A9E0;
  --et-navy:       #0D1B3E;
  --et-strong:     #212738;
  --et-text:       #232321;
  --et-text-mid:   #454455;
  --et-text-light: #6B7280;
  --et-ff-head:    'Mulish', 'Segoe UI', system-ui, sans-serif;
  --et-ff-body:    'Instrument Sans', 'Mulish', 'Segoe UI', sans-serif;
  --et-max-w:      1200px;
  --et-gutter:     24px;
  --et-sec-py:     88px;
  --et-ease:       cubic-bezier(.16,1,.3,1);
  --et-grad-primary: linear-gradient(95deg, #0302B0 1.34%, #01A9E0 97.22%);
  --et-grad-icon:    linear-gradient(135deg, #9EE5DB 0%, #7CC7F0 100%);
}

.et-page .et-hero *, .et-page .et-why *, .et-page .et-benefits *,
.et-page .et-combine *, .et-page .et-integrate *, .et-page .et-cta * { box-sizing: border-box; }

.et-container {
  max-width: var(--et-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--et-gutter);
  padding-right: var(--et-gutter);
}

/* ── shared header type ───────────────────────────────── */
.et-eyebrow {
  display: block;
  font-family: var(--et-ff-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--et-blue);
  margin: 0 0 14px;
}
.et-section-title {
  font-family: var(--et-ff-head);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--et-strong);
  margin: 0 0 20px;
}
.et-section-body {
  font-family: var(--et-ff-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--et-text);
  margin: 0;
}
.et-section-body b, .et-section-body strong { font-weight: 700; color: var(--et-strong); }

/* ── shared buttons (identical to home CTA buttons) ───── */
.et-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--et-ff-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 28px;
  border-radius: 55px;
  border: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .22s var(--et-ease), opacity .22s var(--et-ease), transform .18s var(--et-ease);
}
.et-btn:hover { transform: translateY(-2px); text-decoration: none; }
.et-btn--primary { color: #fff; border: 1.5px solid #01A9E0; background: var(--et-grad-primary); background-clip: padding-box; }
.et-btn--primary:hover { color: #fff; box-shadow: 0 6px 24px rgba(3,2,176,.35); opacity: .92; }
.et-btn--white { background: #fff; border: 1px solid #19182D; color: #19182D; }
.et-btn--white:hover { box-shadow: 0 6px 20px rgba(13,27,62,.12); }
.et-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.85); color: #fff; }
.et-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.10); }
.et-btn__gtext {
  background: linear-gradient(180deg, #19182D 0%, #0302B0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.et-btn__arrow { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; }
.et-btn--primary .et-btn__arrow { color: #fff; }
.et-btn--white .et-btn__arrow  { color: #19182D; }
.et-btn--ghost .et-btn__arrow  { color: #fff; }

/* ============================================================
   SECTION 1 — HERO (split: text + mockup card)
   ============================================================ */
.et-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5FB 100%);
  padding-top: var(--et-sec-py);
  padding-bottom: var(--et-sec-py);
}
.et-hero__inner { display: flex; align-items: center; gap: 56px; }
.et-hero__content { flex: 1 1 48%; min-width: 0; }
.et-hero__title {
  font-family: var(--et-ff-head);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--et-strong);
  margin: 0 0 22px;
}
.et-hero__title .et-text-cyan { color: var(--et-teal); }
.et-hero__body {
  font-family: var(--et-ff-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--et-text-mid);
  margin: 0;
  max-width: 560px;
}
.et-hero__body b { font-weight: 700; color: var(--et-strong); }
.et-hero__visual { flex: 1 1 52%; min-width: 0; display: flex; justify-content: flex-end; }
/* Glossy gradient stage (code) — the white card inside is a swappable image */
.et-hero__stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1092 / 908;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 14% 12%, rgba(150,160,255,.50) 0%, transparent 55%),
    radial-gradient(65% 70% at 96% 42%, rgba(80,205,205,.55) 0%, transparent 60%),
    radial-gradient(70% 60% at 52% 102%, rgba(120,225,175,.55) 0%, transparent 60%),
    linear-gradient(135deg, #ECEFFF 0%, #F5F8FF 38%, #EAF7F1 68%, #DBF2E5 100%);
}
.et-hero__card {
  position: absolute;
  left: 6.78%;
  top: 22.69%;
  width: 88.1%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(16,40,70,.16);
  display: block;
}

/* mockup card */
.et-mock {
  width: 100%;
  max-width: 580px;
  background: rgba(255,255,255,.55);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 30px 60px rgba(16,40,70,.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.et-mock__head {
  height: 96px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #E9EDFF 0%, #F1F5FF 45%, #7ED9C2 100%);
}
.et-mock__body {
  background: #fff;
  border-radius: 0 0 20px 20px;
  margin-top: -46px;
  padding: 22px 26px 30px;
  box-shadow: 0 10px 30px rgba(16,40,70,.10);
  position: relative;
}
.et-mock__pills { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.et-mock__seg { display: inline-flex; background: #EEF0F4; border-radius: 999px; padding: 4px; }
.et-mock__seg span { font: 600 13px/1 var(--et-ff-body); color: #6B7280; padding: 7px 14px; border-radius: 999px; }
.et-mock__seg span.is-on { background: #fff; color: #101820; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.et-mock__tag { font: 600 13px/1 var(--et-ff-body); color: #101820; background: #EEF0F4; border-radius: 999px; padding: 8px 14px; }
.et-mock__copy { width: 34px; height: 34px; border-radius: 8px; background: #EEF0F4; display: inline-flex; align-items: center; justify-content: center; color: #6B7280; }
.et-mock__row { margin-bottom: 18px; }
.et-mock__cols { display: flex; gap: 60px; }
.et-mock__label { font: 400 13px/1.2 var(--et-ff-body); color: #8A94A6; margin: 0 0 6px; }
.et-mock__val { font: 600 16px/1.3 var(--et-ff-body); color: #101820; margin: 0; }
.et-mock__addr { font: 400 14px/1.4 var(--et-ff-body); color: #4A5568; margin: 4px 0 0; }
.et-mock__mark { position: absolute; right: 20px; bottom: 30px; opacity: .5; }

/* ============================================================
   SECTION 2 — WHY CHOOSE (tabbed, mirrors product page)
   ============================================================ */
.et-why {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
  padding-top: var(--et-sec-py);
  padding-bottom: var(--et-sec-py);
}
.et-why__header { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.et-tabs { display: flex; gap: 40px; align-items: stretch; }
.et-tab-list { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid #E5E7EB; list-style: none; margin: 0; padding: 0; }
.et-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid #E5E7EB;
  background: transparent;
  font-family: var(--et-ff-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--et-strong);
  text-align: left;
  width: 100%;
  transition: color .2s ease, background .2s ease;
}
.et-tab:last-child { border-bottom: none; }
.et-tab:hover { color: var(--et-blue); }
.et-tab.et-active {
  color: var(--et-blue);
  font-weight: 700;
  background: #EEF0FB;
}
.et-tab.et-active::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 3px; background: var(--et-blue);
}
.et-tab__icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--et-strong); display: flex; align-items: center; justify-content: center; }
.et-tab__icon svg { width: 26px; height: 26px; }
.et-tab.et-active .et-tab__icon { color: var(--et-blue); }
.et-tab__label { line-height: 1.3; }

.et-tab-content { flex: 1; min-width: 0; }
.et-tab-panel {
  display: none;
  background: #fff;
  border: 1px solid #E7EAF2;
  border-radius: 20px;
  padding: 44px;
  box-shadow: 0 4px 16px rgba(3,2,176,.06);
  animation: et-fade .25s ease;
}
.et-tab-panel.et-active { display: block; }
@keyframes et-fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
.et-tab-panel__icon {
  width: 84px; height: 84px; border-radius: 18px;
  background: var(--et-grad-icon);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.et-tab-panel__icon svg { width: 48px; height: 48px; }
.et-tab-panel__title { font-family: var(--et-ff-head); font-size: 30px; font-weight: 700; color: var(--et-strong); margin: 0 0 14px; }
.et-tab-panel__body { font-family: var(--et-ff-body); font-size: 19px; line-height: 1.65; color: var(--et-text-mid); margin: 0; }

/* ============================================================
   SECTION 3 — BENEFITS (4-column icon list + blur blobs)
   ============================================================ */
.et-benefits {
  position: relative;
  overflow: hidden;
  background: #FBFCFE;
  padding-top: var(--et-sec-py);
  padding-bottom: var(--et-sec-py);
}
.et-benefits::before, .et-benefits::after {
  content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(70,200,180,.28) 0%, rgba(120,200,240,.14) 45%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.et-benefits::before { top: 120px; left: -160px; }
.et-benefits::after  { bottom: -120px; right: -140px; }
.et-benefits__header, .et-benefits__grid { position: relative; z-index: 1; }
.et-benefits__header { text-align: center; margin: 0 auto 60px; }
.et-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.et-benefit__icon { width: 30px; height: 30px; color: var(--et-blue); margin-bottom: 18px; }
.et-benefit__icon svg { width: 30px; height: 30px; display: block; }
.et-benefit__title { font-family: var(--et-ff-head); font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--et-strong); margin: 0 0 12px; }
.et-benefit__body { font-family: var(--et-ff-body); font-size: 16px; line-height: 1.6; color: var(--et-text-mid); margin: 0; }

/* ============================================================
   SECTION 4 — COMBINE (4 gradient cards, gear icon)
   ============================================================ */
.et-combine {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
  padding-top: var(--et-sec-py);
  padding-bottom: var(--et-sec-py);
}
.et-combine__header { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.et-combine__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.et-ccard {
  display: flex;
  padding: 52.16px 32px 52.15px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(90, 208, 255, 0.70) 0%, rgba(1, 169, 224, 0.70) 100%);
  text-align: center;
}
.et-ccard--1 { background: linear-gradient(135deg, rgba(90, 208, 255, 0.70) 0%, rgba(1, 169, 224, 0.70) 100%); }
.et-ccard--2 { background: linear-gradient(135deg, #F3F5FF 0%, #CDF4D3 100%); }
.et-ccard--3 { background: linear-gradient(180deg, #D3F8E2 0%, #67CDF6 100%); }
.et-ccard--4 { background: linear-gradient(135deg, rgba(205, 244, 211, 0.70) 0%, rgba(1, 169, 224, 0.70) 100%); }
.et-ccard__icon { margin: 0; color: var(--et-blue); }
.et-ccard__icon svg { width: 46px; height: 46px; }
.et-ccard__text { font-family: var(--et-ff-head); font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--et-strong); margin: 0; }

/* ============================================================
   SECTION 5 — INTEGRATION BANNER (blue, logos + button)
   ============================================================ */
.et-integrate {
  background: linear-gradient(120deg, #2B34C4 0%, #3A46D6 55%, #5766E0 100%);
  padding-top: 84px;
  padding-bottom: 84px;
  text-align: center;
}
.et-integrate__logos { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 40px; }
.et-logo-card {
  width: 82px; height: 82px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(16,24,60,.22);
}
.et-integrate__title { font-family: var(--et-ff-head); font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 auto 20px; max-width: 900px; }
.et-integrate__body { font-family: var(--et-ff-body); font-size: 24px; line-height: 1.5; color: #F8F9FF; margin: 0 auto 36px; max-width: 980px; }

/* ============================================================
   SECTION 6 — CTA BANNER (matches home / product CTA)
   ============================================================ */
.et-cta {
  background: linear-gradient(120deg, #BFEAF5 0%, #D2EFF9 45%, #E6F5FC 100%);
  padding-top: 96px;
  padding-bottom: 96px;
}
.et-cta__inner { max-width: var(--et-max-w); margin: 0 auto; padding-left: var(--et-gutter); padding-right: var(--et-gutter); text-align: left; }
.et-cta__eyebrow { display: block; font-family: var(--et-ff-head); font-size: 22px; font-weight: 700; color: var(--et-blue); margin-bottom: 14px; }
.et-cta__title  { font-family: var(--et-ff-head); font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--et-strong); max-width: 560px; margin: 0 0 20px; }
.et-cta__body   { font-family: var(--et-ff-body); font-size: 24px; font-weight: 400; line-height: 1.6; color: var(--et-text); max-width: 640px; margin: 0 0 36px; }
.et-cta__buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .et-hero__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .et-hero__visual { justify-content: flex-start; width: 100%; }
  .et-tabs { flex-direction: column; }
  .et-tab-list { width: 100%; border-right: none; border-bottom: 1px solid #E5E7EB; }
  .et-tab.et-active::after { display: none; }
  .et-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .et-combine__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .et-section-title, .et-hero__title, .et-cta__title, .et-integrate__title { font-size: 34px; }
  .et-section-body, .et-hero__body, .et-cta__body, .et-integrate__body { font-size: 19px; }
  .et-eyebrow, .et-cta__eyebrow { font-size: 18px; }
  .et-tab { font-size: 18px; }
  .et-benefits__grid, .et-combine__grid { grid-template-columns: 1fr; }
  .et-cta__buttons { flex-direction: column; align-items: stretch; }
  .et-cta__buttons .et-btn { width: 100%; }
}