/* =========================================================
   SCHEDULE-MEETING.CSS — Schedule a Meeting page only. Hero now shares
   the same dark two-column mesh + particles + floating-dashboard
   template as contact.css/book-consultation.css (own color mix, see
   .hero.hero-sched below) so the transparent nav bar reads correctly
   and the page matches the rest of the site at first paint. Everything
   below the hero remains a deliberately distinct, Calendly/Stripe-
   inspired booking flow — still built from the exact same design
   tokens as everywhere else (--ink/--teal/--navy-brand, Fraunces/
   Inter/mono, --radius-lg, --shadow-*). Owns: a glass meeting-type
   card grid, a 3-step progress tracker, a real interactive month
   calendar + time slot list, a plain top-label detail form (not
   floating-label), a horizontal connected-card process row, and a
   single centered CTA card (not the split-row .cta-band used elsewhere).
   ========================================================= */

/* ---------- Hero: dark mesh gradient (same technique as hero-contact/
   hero-res/hero-ind/hero-pm/hero-careers, own color mix) ---------- */
.hero.hero-sched{ background-image:none; background-color: var(--ink); }
.hero.hero-sched::before{
  background:
    radial-gradient(55% 60% at 88% 12%, rgba(10,154,144,.32), transparent 60%),
    radial-gradient(50% 55% at 10% 90%, rgba(13,48,90,.46), transparent 65%),
    repeating-linear-gradient(115deg, rgba(247,245,240,.03) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, rgba(14,21,38,.97), rgba(14,21,38,.92) 55%, rgba(14,21,38,1));
}

/* Cycling highlight word (Meet / Discuss / Grow) — light gradient text
   for the dark ground, matching .grad-text's palette */
.cycle-highlight{ position:relative; display:inline-block; min-width: 3.6ch; height:1.12em; vertical-align:bottom; text-align:left; }
.cycle-highlight span{
  position:absolute; left:0; top:0; white-space:nowrap;
  background: linear-gradient(90deg, var(--teal-soft), var(--teal), #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.cycle-highlight span.active{ opacity:1; transform: translateY(0); }

/* ---------- Section 1: meeting-type glass card grid ---------- */
.meet-type-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width: 960px){ .meet-type-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .meet-type-grid{ grid-template-columns: 1fr; } }

.meet-type-card{
  position:relative; text-align:left; border-radius: var(--radius-lg); padding:28px 26px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-card); cursor:pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.meet-type-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(10,154,144,.16), transparent 60%);
  transition: opacity .4s var(--ease);
}
.meet-type-card:hover, .meet-type-card:focus-visible{ transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: rgba(10,154,144,.4); }
.meet-type-card:hover::before{ opacity:1; }
.meet-type-card.selected{ border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(10,154,144,.18), var(--shadow-lift); }

.mtc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.meet-type-card .icon{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.2rem;
  transition: transform .45s var(--ease), background .3s, color .3s;
}
.meet-type-card:hover .icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.mtc-duration{
  flex-shrink:0; font-family: var(--f-mono); font-size:.68rem; letter-spacing:.04em; color: var(--teal-deep);
  background: rgba(10,154,144,.1); border:1px solid rgba(10,154,144,.25); border-radius:999px; padding:4px 11px;
  white-space:nowrap;
}
.meet-type-card h3{ font-size:1.05rem; margin:0 0 6px; }
.meet-type-card p{ font-size:.87rem; color: var(--slate-soft); margin:0 0 20px; }
.mtc-choose{
  display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; font-weight:600; color: var(--teal-deep);
}
.mtc-choose i{ transition: transform .3s var(--ease); }
.meet-type-card:hover .mtc-choose i{ transform: translateX(5px); }
.meet-type-card.selected .mtc-choose{ color: var(--ink); }
.meet-type-card.selected .mtc-choose::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color: var(--teal-deep); }

/* ---------- 3-step tracker (minimal — not the wizard-progress dots
   used in apply-now.html) ---------- */
.sched-tracker{ display:flex; align-items:center; justify-content:center; gap:10px; margin: 56px 0 6px; flex-wrap:wrap; }
.sched-tracker .st-step{ display:flex; align-items:center; gap:10px; opacity:.4; transition: opacity .35s; }
.sched-tracker .st-step.active, .sched-tracker .st-step.done{ opacity:1; }
.sched-tracker .st-num{
  width:26px; height:26px; border-radius:50%; background: var(--paper-dim); color: var(--slate-soft);
  display:grid; place-items:center; font-family: var(--f-mono); font-size:.72rem; flex-shrink:0; transition: all .3s var(--ease);
}
.sched-tracker .st-step.active .st-num{ background: var(--teal-deep); color:#fff; box-shadow: 0 0 0 5px rgba(10,154,144,.14); }
.sched-tracker .st-step.done .st-num{ background: var(--teal); color:#fff; }
.sched-tracker .st-label{ font-size:.82rem; font-weight:600; color: var(--ink); white-space:nowrap; }
.sched-tracker .st-line{ width:40px; height:1px; background: var(--rule); }
@media (max-width: 560px){ .sched-tracker .st-label{ display:none; } .sched-tracker .st-line{ width:20px; } }

/* ---------- Section 2: scheduler (calendar + time slots) — the whole
   section stays out of the DOM flow (native [hidden]) until a meeting
   type is chosen, then its children fade/rise in via .sched-reveal ---------- */
.sched-reveal{ opacity:0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.sched-reveal.in{ opacity:1; transform:none; }

/* align-items:stretch (not start) so .slots-card matches the
   calendar's natural height — the booking summary at its base then
   uses margin-top:auto to anchor itself to the bottom of that space
   instead of leaving a visible gap under a short card. */
.sched-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:30px; margin-top:30px; align-items:stretch; }
@media (max-width: 860px){ .sched-grid{ grid-template-columns:1fr; } }

.cal-card, .slots-card{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg); padding:26px;
  box-shadow: var(--shadow-card); display:flex; flex-direction:column;
}
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal-head h4{ font-family: var(--f-display); font-size:1.05rem; margin:0; color: var(--ink); }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); background: var(--white);
  display:grid; place-items:center; cursor:pointer; color: var(--ink); transition: border-color .25s, color .25s, transform .2s;
}
.cal-nav button:hover:not(:disabled){ border-color: var(--teal-deep); color: var(--teal-deep); transform: scale(1.06); }
.cal-nav button:disabled{ opacity:.3; cursor:not-allowed; }

.cal-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; margin-bottom:6px; }
.cal-weekdays span{ text-align:center; font-family: var(--f-mono); font-size:.68rem; color: var(--slate-soft); text-transform:uppercase; letter-spacing:.04em; }
.cal-days{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; }
.cal-day{
  position:relative; aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:none;
  font-family: var(--f-body); font-size:.86rem; color: var(--ink); cursor:pointer;
  display:grid; place-items:center; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cal-day.pad{ visibility:hidden; cursor:default; }
.cal-day.disabled{ color: var(--rule); cursor:not-allowed; }
.cal-day.available:hover{ background: rgba(10,154,144,.1); border-color: rgba(10,154,144,.3); }
.cal-day.today::after{ content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background: var(--teal); }
.cal-day.selected{ background: var(--teal-deep); color:#fff; font-weight:600; }
.cal-day.selected::after{ background:#fff; }

/* ---------- Slots card: compact header with icon + helper line ---------- */
.slots-card-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.slots-card-head .sch-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
  background: rgba(10,154,144,.12); color: var(--teal-deep); font-size:1.05rem;
}
.slots-card-head h4{ font-family: var(--f-display); font-size:1.05rem; margin:0 0 4px; color: var(--ink); }
.slots-card-sub{ font-size:.8rem; color: var(--slate-soft); margin:0; line-height:1.5; }

/* Static info banner — "slots are in your local time, we handle IST" —
   always visible above the slot list regardless of selection state. */
.sched-tz-banner{
  display:flex; align-items:flex-start; gap:10px; background: rgba(10,154,144,.07);
  border:1px solid rgba(10,154,144,.22); border-radius:12px; padding:12px 14px; margin-bottom:20px;
}
.sched-tz-banner i{ color: var(--teal-deep); font-size:.9rem; margin-top:2px; flex-shrink:0; }
.sched-tz-banner span{ font-size:.8rem; line-height:1.5; color: var(--slate); }

/* ---------- Time slots: premium 2-up grid of glass chips ---------- */
.slot-list{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (max-width: 420px){ .slot-list{ grid-template-columns: 1fr; } }
.slot-btn{
  position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:17px 14px; border-radius:14px; border:1.5px solid var(--rule);
  background: rgba(255,255,255,.7); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: var(--ink); font-family: var(--f-mono); font-size:.92rem; font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition: border-color .25s, background .3s, transform .25s var(--ease), box-shadow .3s var(--ease);
}
.slot-btn .slot-time-icon{ color: var(--teal-deep); font-size:.85rem; opacity:.7; transition: color .25s, opacity .25s; }
.slot-btn:hover{ border-color: var(--teal); background: rgba(10,154,144,.08); transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(7,107,100,.4); }
.slot-btn.selected{
  background: linear-gradient(135deg, var(--teal-deep), var(--teal)); border-color: transparent; color:#fff;
  box-shadow: 0 16px 32px -14px rgba(7,107,100,.55); transform: translateY(-2px);
}
.slot-btn.selected .slot-time-icon{ color:#fff; opacity:1; }
.slot-btn .slot-check{ position:absolute; top:9px; right:11px; font-size:.66rem; opacity:0; transition: opacity .2s; }
.slot-btn.selected .slot-check{ opacity:.9; }
.slots-empty{ font-size:.85rem; color: var(--slate-soft); text-align:center; padding:30px 10px; }

/* ---------- Booking summary: anchored to the bottom of the card via
   margin-top:auto (see .cal-card,.slots-card { display:flex column }
   + .sched-grid { align-items:stretch } above), so it fills whatever
   extra height the calendar column establishes instead of leaving it
   blank. ---------- */
.sched-booking-summary{ margin-top:auto; padding-top:20px; border-top:1px dashed var(--rule); }
.sbs-head{ display:flex; align-items:center; gap:8px; font-family: var(--f-display); font-size:.92rem; color: var(--ink); margin-bottom:12px; }
.sbs-head i{ color: var(--teal-deep); font-size:.85rem; }
.sbs-empty{ font-size:.82rem; color: var(--slate-soft); text-align:center; padding:18px 12px; background: var(--paper-dim); border-radius:12px; margin:0; }
.sbs-grid{ margin:0; display:flex; flex-direction:column; background: var(--paper-dim); border:1px solid var(--rule); border-radius:12px; padding:4px 16px; }
.sbs-grid[hidden]{ display:none !important; }
.sbs-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule); }
.sbs-row:last-child{ border-bottom:0; }
.sbs-row dt{ font-size:.78rem; color: var(--slate-soft); flex-shrink:0; }
.sbs-row dd{ margin:0; font-family: var(--f-mono); font-size:.85rem; font-weight:600; color: var(--ink); text-align:right; flex:1; min-width:0; word-break:break-word; }
.sbs-row-highlight dd{ color: var(--teal-deep); }

.sched-continue{ display:flex; justify-content:center; margin-top:30px; }
.sched-continue[hidden]{ display:none !important; }

/* ---------- Country / time-zone selector (searchable combobox) ---------- */
.sched-country-field{ max-width:640px; margin: 0 0 26px; }
.sched-country-field .country-select-wrap{ max-width:420px; }
.sched-country-field > label{ display:block; font-size:.83rem; font-weight:600; color: var(--ink); margin-bottom:8px; }
.sched-country-field > label .req{ color: var(--teal-deep); margin-left:2px; }
.country-select-wrap{ position:relative; }
.country-search-input{
  width:100%; padding:12px 40px 12px 16px; border-radius:12px; border:1px solid var(--rule); background: var(--white);
  font-family: var(--f-body); font-size:.9rem; color: var(--ink); transition: border-color .25s, box-shadow .25s;
}
.country-search-input:focus{ outline:none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,154,144,.15); }
.country-select-caret{ position:absolute; right:16px; top:50%; transform: translateY(-50%); color: var(--slate-soft); font-size:.78rem; pointer-events:none; }
.country-select-wrap.has-error .country-search-input{ border-color:#C0392B; }
/* .country-dropdown / .country-option / .tz-detect-note / .tz-toggle-btn
   are shared across every form with a country field — defined once in
   main.css (see "Shared: country select + time zone widgets") since
   main.css loads on every page, not just this one. */

/* ---------- Smart mismatch banner: shown only when a manually
   selected country differs from the auto-detected one ---------- */
.sched-mismatch-banner{
  display:flex; gap:14px; background: rgba(13,48,90,.05); border:1px solid rgba(13,48,90,.16);
  border-radius:14px; padding:16px 18px; margin-top:14px; animation: msgIn .4s var(--ease) both;
}
.sched-mismatch-banner[hidden]{ display:none !important; }
.smb-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0; display:grid; place-items:center;
  background: rgba(13,48,90,.1); color: var(--navy-brand); font-size:1rem;
}
.smb-body h5{ font-family: var(--f-display); font-size:.95rem; margin:0 0 7px; color: var(--ink); }
.smb-body p{ font-size:.83rem; color: var(--slate); line-height:1.6; margin:0 0 8px; }
.smb-body p strong{ color: var(--ink); }
.smb-body p.smb-hint{ color: var(--slate-soft); margin-bottom:16px; }
.smb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.smb-btn{
  padding:9px 17px; border-radius:999px; font-size:.8rem; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition: transform .2s var(--ease), background .25s, border-color .25s, color .25s;
}
.smb-btn:hover{ transform: translateY(-1px); }
.smb-btn-primary{ background: var(--teal-deep); color:#fff; }
.smb-btn-primary:hover{ background: var(--navy-brand); }
.smb-btn-ghost{ background: var(--white); border-color: var(--rule); color: var(--ink); }
.smb-btn-ghost:hover{ border-color: var(--teal-deep); color: var(--teal-deep); }
@media (max-width: 560px){ .sched-mismatch-banner{ flex-direction:column; } }


/* .dual-time-display (Your Time vs Tax Easy Hub Time) is shared across
   every appointment-style form — defined once in main.css (see
   "Shared: country select + time zone widgets") since it's also used
   by Book Consultation, which doesn't load this stylesheet. */

/* Dual-time recap injected into the Step-3 summary strip */
.sched-summary-tz{ display:block; margin-top:8px; font-size:.8rem; color: var(--slate-soft); }
.sched-summary-tz strong{ color: var(--ink); }

/* ---------- Section 3: plain top-label detail form (deliberately
   NOT the floating-label .fl-field used on contact/book-consultation) ---------- */
.sched-form-card{ max-width:720px; margin: 30px auto 0; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg); padding:36px 34px; box-shadow: var(--shadow-card); }
@media (max-width: 640px){ .sched-form-card{ padding:26px 22px; } }
.sched-summary{
  display:flex; align-items:center; gap:14px; background: var(--paper-dim); border-radius:12px; padding:14px 18px; margin-bottom:28px;
  font-size:.85rem; color: var(--ink);
}
.sched-summary i{ color: var(--teal-deep); }
.sched-summary strong{ font-weight:600; }
.sched-field{ margin-bottom:20px; }
.sched-field label{ display:block; font-size:.83rem; font-weight:600; color: var(--ink); margin-bottom:8px; }
.sched-field label .req{ color: var(--teal-deep); margin-left:2px; }
.sched-field label .optional{ font-weight:400; color: var(--slate-soft); font-size:.78rem; }
.sched-field input, .sched-field textarea{
  width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--rule); background: var(--paper-dim);
  font-family: var(--f-body); font-size:.9rem; color: var(--ink); transition: border-color .25s, box-shadow .25s, background .25s;
}
.sched-field textarea{ resize:vertical; min-height:88px; }
.sched-field input:focus, .sched-field textarea:focus{ outline:none; border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 3px rgba(10,154,144,.15); }
.sched-field-error{ display:none; color:#C0392B; font-size:.78rem; margin-top:7px; }
.sched-field.has-error input, .sched-field.has-error textarea{ border-color:#C0392B; }
.sched-field.has-error .sched-field-error{ display:block; }
.sched-row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 560px){ .sched-row2{ grid-template-columns:1fr; } }

/* Meeting-platform pill radios (this page doesn't load contact.css/
   book-consultation.css, so the pattern is defined fresh here) */
.pill-radio-group{ display:flex; gap:10px; flex-wrap:wrap; }
.pill-radio{ position:relative; }
.pill-radio input{ position:absolute; opacity:0; width:1px; height:1px; }
.pill-radio label{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--rule); cursor:pointer; font-size:.85rem; font-weight:500; color: var(--ink);
  margin:0; transition: all .25s;
}
.pill-radio input:checked + label{ background: var(--teal-deep); border-color: var(--teal-deep); color:#fff; }
.pill-radio input:focus-visible + label{ box-shadow: 0 0 0 3px rgba(10,154,144,.25); }
.pill-radio-group-wrap.has-error .pill-radio label{ border-color:#C0392B; }
.pill-radio-group-wrap .sched-field-error{ display:none; margin-top:8px; }
.pill-radio-group-wrap.has-error .sched-field-error{ display:block; }

.sched-status{ font-size:.83rem; margin-top:16px; text-align:center; }

/* ---------- Confirmation panel (meeting-confirmation + email-preview UI) ---------- */
.sched-success{ text-align:center; padding:10px 4px; }
.sched-success-icon{
  width:84px; height:84px; border-radius:50%; background: linear-gradient(135deg, var(--navy-brand), var(--teal));
  display:grid; place-items:center; margin:0 auto 22px; color:#fff; font-size:2rem; animation: schedSuccessPop .5s var(--ease);
}
@keyframes schedSuccessPop{ from{ transform: scale(0); opacity:0; } to{ transform: scale(1); opacity:1; } }
.sched-success h3{ margin:0 0 8px; }
.sched-success > p{ color: var(--slate-soft); max-width:420px; margin:0 auto 26px; }
/* .confirm-time-display / .ctd-* (Country / Your Time / IST tiles on a
   booking confirmation) moved to main.css — also used by Book
   Consultation's success panel. */
.email-preview{
  max-width:420px; margin:0 auto; text-align:left; border:1px solid var(--rule); border-radius:14px; overflow:hidden; box-shadow: var(--shadow-card);
}
.email-preview-head{ background: var(--paper-dim); padding:12px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--rule); }
.email-preview-head i{ color: var(--teal-deep); }
.email-preview-head span{ font-size:.8rem; color: var(--slate-soft); }
.email-preview-body{ padding:18px 20px; }
.email-preview-body strong{ display:block; font-family: var(--f-display); font-size:1rem; color: var(--ink); margin-bottom:10px; }
.email-preview-body dl{ margin:0; }
.email-preview-body dt{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color: var(--slate-soft); margin-top:10px; }
.email-preview-body dt:first-child{ margin-top:0; }
.email-preview-body dd{ margin:2px 0 0; font-size:.88rem; color: var(--ink); }

/* ---------- Section 4: horizontal connected-card process (explicitly
   NOT the vertical .timeline-v rail used in book-consultation.html) ---------- */
/* 7 DOM children alternate card/connector/card/connector/card/connector/card,
   so the template needs 7 tracks (4 card + 3 connector), not 4 equal columns
   — otherwise the connectors consume card-width tracks and the row wraps. */
.process-connect{ display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap:0; margin-top:48px; align-items:stretch; }
@media (max-width: 860px){ .process-connect{ grid-template-columns:1fr; gap:18px; } }
.pc-card{
  position:relative; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding:28px 20px; text-align:center; margin: 0 -1px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); z-index:1; }
.pc-card .pc-num{ font-family: var(--f-mono); font-size:.7rem; color: var(--teal-deep); letter-spacing:.08em; margin-bottom:14px; }
.pc-card .icon{ width:48px; height:48px; border-radius:13px; margin:0 auto 16px; display:grid; place-items:center; background: var(--paper-dim); color: var(--teal-deep); font-size:1.15rem; }
.pc-card h3{ font-size:.96rem; margin:0; }
.pc-connector{ display:flex; align-items:center; justify-content:center; color: var(--teal-deep); font-size:1.1rem; position:relative; z-index:2; }
@media (max-width: 860px){ .pc-connector{ transform: rotate(90deg); margin: -6px 0; } }

/* ---------- Final CTA: single centered card (NOT the split-row .cta-band) ---------- */
.cta-centered{
  max-width: 720px; margin: 0 auto; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--ink), var(--navy-brand) 130%); color: var(--paper);
  border-radius: var(--radius-lg); padding: 64px 48px;
}
.cta-centered::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 90% at 50% 0%, rgba(10,154,144,.28), transparent 65%); pointer-events:none; }
.cta-centered h2{ position:relative; z-index:1; color: var(--paper); margin-bottom:.3em; }
.cta-centered p{ position:relative; z-index:1; color: rgba(247,245,240,.68); max-width:46ch; margin:0 auto 28px; }
.cta-centered .btn{ position:relative; z-index:1; }