/* ==========================================================================
   RITESSH BHHATIA — v2, light theme
   Long-form cohort-style landing page. Same brand marks as v1, carried onto a
   light ground. Single theme, deliberately; every colour from a token.
   ========================================================================== */

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ground — warm off-whites, tinted toward the brand magenta */
  --paper:   #FDF9F8;
  --white:   #FFFFFF;
  --blush:   #FBF2F5;
  --blush-2: #F6E7EC;
  --ink-band:#1E1418;          /* the one dark band, for the enrolment block */

  --line:   #EFE2E6;
  --line-2: #E3D2D8;

  /* Type */
  --ink:   #1E1418;            /* warm near-black */
  --muted: #6B5A61;            /* 6.2:1 on paper */
  --faint: #9A8A91;            /* decorative / meta only */

  /* Brand. On a light ground amber can only be a FILL — #FCB414 on white is
     ~1.7:1, so it never carries text. Magenta-deep does the accent-text work. */
  --amber:        #FCB414;
  --amber-deep:   #FAA719;
  --magenta:      #B84580;
  --magenta-deep: #A1366E;     /* 5.7:1 on paper */
  --magenta-soft: #F7DDE9;

  --ok: #2F7D57;

  --font: "Jakarta", "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  --t-hero: clamp(2.1rem, 4.4vw, 3.6rem);
  --t-d1:   clamp(1.7rem, 3.1vw, 2.6rem);
  --t-d2:   clamp(1.3rem, 2vw, 1.7rem);
  --t-d3:   1.0625rem;
  --t-body: 1rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-label:.6875rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s6:1.5rem; --s8:2rem;  --s12:3rem;  --s16:4rem;
  --s24:6rem;  --s32:8rem;

  --page: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --r: 16px; --r-lg: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast:160ms; --mid:340ms; --slow:760ms;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg { max-width:100%; height:auto; display:block; }
button,input,select,textarea { font:inherit; color:inherit; }
::selection { background: var(--magenta); color:#fff; }
:focus-visible { outline:2px solid var(--magenta-deep); outline-offset:3px; border-radius:4px; }
[id] { scroll-margin-top: 92px; }

h1,h2,h3,h4 { margin:0; font-weight:800; line-height:1.1; letter-spacing:-.025em; text-wrap:balance; }
.t-hero { font-size:var(--t-hero); line-height:1.05; letter-spacing:-.035em; }
.t-d1 { font-size:var(--t-d1); }
.t-d2 { font-size:var(--t-d2); }
.t-d3 { font-size:var(--t-d3); letter-spacing:-.012em; }

p { margin:0 0 var(--s4); max-width:62ch; }
p:last-child { margin-bottom:0; }
a { color:inherit; text-decoration:none; }

.lede { font-size:clamp(1rem,1.2vw,1.125rem); color:var(--muted); }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.mag { color: var(--magenta-deep); }
.mark { background: linear-gradient(180deg, transparent 58%, var(--amber) 58%); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.sec { padding-block: clamp(var(--s16), 7vw, var(--s32)); }
.sec--tight { padding-block: clamp(var(--s12), 5vw, var(--s24)); }
.sec--blush { background: var(--blush); }
.sec--white { background: var(--white); }

.head { max-width:60ch; margin-bottom: clamp(var(--s8), 4vw, var(--s16)); }
.head--c { margin-inline:auto; text-align:center; }

.grid { display:grid; gap:var(--s6); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .grid--2,.grid--3,.grid--4 { grid-template-columns:1fr; } }

.row { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.row--between { justify-content:space-between; }

/* --------------------------------------------------------------------------
   4. PILLS + EYEBROW
   -------------------------------------------------------------------------- */
.pill {
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:6px var(--s3); font-size:var(--t-label); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; border-radius:999px;
  border:1px solid var(--line-2); background: var(--white); color: var(--magenta-deep);
}
.pill--solid { background: var(--magenta-soft); border-color: transparent; }
.pill__dot { width:6px; height:6px; border-radius:999px; background: currentColor; }

.eyebrow {
  /* It is a <p>, so the global 62ch measure would cap it and leave a centred
     eyebrow sitting left of its own heading. */
  max-width: none;
  font-size:var(--t-label); font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color: var(--magenta-deep); margin:0 0 var(--s3);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s4) var(--s8); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; border-radius:999px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.btn svg { width:15px; height:15px; }
/* amber as a fill with near-black on it — 10.3:1 */
.btn--primary { background: var(--amber); color:#1A1206; box-shadow:0 8px 22px -12px rgba(250,167,25,.9); }
.btn--primary:hover,.btn--primary:focus-visible { background:#FFC63D; transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(250,167,25,.95); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover,.btn--dark:focus-visible { background:#33232A; transform:translateY(-1px); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--white); }
.btn--ghost:hover,.btn--ghost:focus-visible { border-color: var(--magenta-deep); color: var(--magenta-deep); }
.btn--onDark { background: var(--white); color: var(--ink); }
.btn--onDark:hover,.btn--onDark:focus-visible { background: var(--blush-2); transform:translateY(-1px); }
.btn--block { display:flex; width:100%; padding-inline:var(--s4); }
.btn--lg { padding:var(--s6) var(--s12); font-size:var(--t-sm); }
@media (max-width:460px){ .btn--lg { padding:var(--s4) var(--s3); font-size:var(--t-xs); letter-spacing:.04em; } }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.announce {
  background: var(--ink); color: var(--paper);
  font-size:var(--t-xs); text-align:center;
  padding: var(--s2) var(--gutter);   /* room to breathe when it wraps on phones */
  line-height:1.5;
}
.announce b { color: var(--amber); }

.header {
  position:sticky; top:0; z-index:60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom:1px solid var(--line);
}
.header__in { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); padding-block:var(--s3); }
.brand { display:flex; align-items:center; gap:var(--s3); }
.brand__logo { width:36px; height:36px; flex:none; }
.brand__logo--sm { width:28px; height:28px; }
.brand__name { font-weight:800; font-size:.9375rem; letter-spacing:.01em; text-transform:uppercase; }
.nav { display:flex; align-items:center; gap:var(--s8); }
.nav__link { font-size:var(--t-sm); color:var(--muted); transition:color var(--fast) var(--ease); }
.nav__link:hover { color:var(--ink); }
.burger { display:none; background:transparent; border:0; color:var(--ink); cursor:pointer; padding:var(--s2); }
.burger svg { width:22px; height:22px; }
@media (max-width:900px){ .nav{display:none;} .burger{display:inline-flex;} }

.drawer { position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none; }
.drawer[data-open="true"] { visibility:visible; pointer-events:auto; }
.drawer__scrim { position:absolute; inset:0; background:rgba(30,20,24,.42); opacity:0; transition:opacity var(--mid) var(--ease); }
.drawer[data-open="true"] .drawer__scrim { opacity:1; }
.drawer__panel {
  position:absolute; top:0; right:0; bottom:0; width:min(360px,100%);
  background:var(--paper); border-left:1px solid var(--line); padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s6);
  transform:translateX(100%); transition:transform var(--mid) var(--ease-out); overflow-y:auto;
}
.drawer[data-open="true"] .drawer__panel { transform:none; }
.drawer__nav { display:flex; flex-direction:column; }
.drawer__nav a { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; padding-block:var(--s4); border-bottom:1px solid var(--line); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { position:relative; overflow:hidden; padding-block: clamp(var(--s8),4vw,var(--s16)) clamp(var(--s12),6vw,var(--s24)); }
.hero::before {
  content:""; position:absolute; inset:-30% -20% auto -20%; height:80%; pointer-events:none;
  background:
    radial-gradient(38% 46% at 20% 26%, color-mix(in srgb, var(--magenta) 15%, transparent), transparent 70%),
    radial-gradient(34% 42% at 82% 14%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 72%);
  filter: blur(30px);
}
.hero__grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--s8),4vw,var(--s16)); align-items:center; }
@media (max-width:940px){ .hero__grid { grid-template-columns:1fr; } }
.hero__date { font-size:var(--t-sm); font-weight:800; color:var(--magenta-deep); margin:var(--s4) 0 var(--s3); }
.hero__title { margin-bottom:var(--s4); }
.hero__lede { margin-bottom:var(--s6); max-width:50ch; }
.hero__chips { display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s6); }
.hero__cta { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.hero__seats { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--muted); }
.hero__seats::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--amber-deep); }

.shot {
  /* matches the trimmed artwork's 0.769 so the glow keeps its full spread */
  position:relative; aspect-ratio:1000/1301; border-radius:var(--r-lg); overflow:hidden;
  background: var(--blush); border:1px solid var(--line);
  box-shadow: 0 40px 80px -50px rgba(30,20,24,.45);
}
.shot img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.shot__tag {
  position:absolute; left:var(--s4); bottom:var(--s4); z-index:2;
  background: var(--white); border:1px solid var(--line);
  border-radius:999px; padding:var(--s2) var(--s4);
  font-size:var(--t-xs); font-weight:700; box-shadow:0 10px 24px -14px rgba(30,20,24,.4);
}

/* --------------------------------------------------------------------------
   8. TRUST MARQUEE
   -------------------------------------------------------------------------- */
.trust { border-block:1px solid var(--line); background:var(--white); padding-block:var(--s8); overflow:hidden; }
.trust__label { text-align:center; font-size:var(--t-label); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin:0 0 var(--s6); max-width:none; }
.marquee { position:relative; overflow:hidden; }
.marquee::before,.marquee::after { content:""; position:absolute; top:0; bottom:0; width:clamp(40px,10vw,140px); z-index:2; pointer-events:none; }
.marquee::before { left:0; background:linear-gradient(90deg,var(--white),transparent); }
.marquee::after { right:0; background:linear-gradient(270deg,var(--white),transparent); }
.marquee__track { display:flex; width:max-content; gap:clamp(var(--s12),6vw,var(--s24)); animation:slide 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }
.marquee__item { display:flex; align-items:center; gap:var(--s3); font-size:clamp(1rem,1.7vw,1.375rem); font-weight:800; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
/* Brand marks keep their own colours, so they are normalised by HEIGHT with
   width:auto — the set mixes square icons with wide wordmarks (Wharton is
   nearly 4:1) and a fixed square box would squash them. */
.logo { display:block; flex:none; }
          /* wordmarks read heavier at equal height */
.logo--card { margin-bottom:var(--s4); }

/* --------------------------------------------------------------------------
   9. STATS
   -------------------------------------------------------------------------- */
.stat { text-align:center; padding:var(--s6) var(--s4); }
.stat__v { font-size:clamp(1.75rem,3.4vw,2.75rem); font-weight:800; letter-spacing:-.04em; color:var(--magenta-deep); line-height:1; }
.stat__k { font-size:var(--t-sm); color:var(--muted); margin-top:var(--s2); }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card {
  padding:clamp(var(--s6),2.2vw,var(--s8)); border-radius:var(--r);
  border:1px solid var(--line); background:var(--white);
  transition:border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease);
}
.card:hover { border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 20px 40px -30px rgba(30,20,24,.4); }
.card__ico {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:var(--s6);
  background: var(--magenta-soft); color: var(--magenta-deep);
}
.card__ico svg { width:18px; height:18px; }
.card__n { font-size:var(--t-label); font-weight:800; letter-spacing:.14em; color:var(--faint); margin-bottom:var(--s2); }
.card__t { font-size:var(--t-d3); font-weight:800; margin-bottom:var(--s3); }
.card__d { font-size:var(--t-sm); color:var(--muted); margin:0; }

/* module rows for the curriculum */
.module { display:grid; grid-template-columns:auto 1fr auto; gap:var(--s6); align-items:center; padding:var(--s6) 0; border-bottom:1px solid var(--line); }
@media (max-width:720px){ .module { grid-template-columns:auto 1fr; } .module__out { grid-column:2; } }
.module__n { font-size:1.125rem; font-weight:800; color:var(--magenta-deep); width:2.5rem; }
.module__t { font-size:var(--t-d3); font-weight:800; }
.module__d { font-size:var(--t-sm); color:var(--muted); margin:var(--s1) 0 0; }
.module__out { font-size:var(--t-xs); font-weight:700; color:var(--ink); background:var(--blush-2); border-radius:999px; padding:var(--s2) var(--s4); white-space:nowrap; }

/* --------------------------------------------------------------------------
   11. CHECKS
   -------------------------------------------------------------------------- */
.checks { list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); }
.checks li { display:grid; grid-template-columns:22px 1fr; gap:var(--s3); align-items:start; font-size:var(--t-sm); color:var(--muted); }
.checks .tick { width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background:var(--magenta-soft); color:var(--magenta-deep); }
.checks .tick svg { width:11px; height:11px; }

/* --------------------------------------------------------------------------
   12. COACH
   -------------------------------------------------------------------------- */
.coach { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(var(--s8),4vw,var(--s16)); align-items:center; }
@media (max-width:940px){ .coach { grid-template-columns:1fr; } }
.coach__shot { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--white); aspect-ratio:4/4.8; }
.coach__shot img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.creds { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s8); }
@media (max-width:560px){ .creds { grid-template-columns:1fr; } }
.cred { padding:var(--s4) var(--s6); border-radius:var(--r); background:var(--blush); }
.cred__k { font-size:var(--t-label); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.cred__v { font-size:var(--t-sm); font-weight:700; margin-top:2px; }

/* --------------------------------------------------------------------------
   13. PLACEHOLDER
   -------------------------------------------------------------------------- */
.placeholder {
  border:1px dashed var(--line-2); border-radius:var(--r); padding:clamp(var(--s6),3vw,var(--s12));
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(184,69,128,.03) 10px 20px);
}
.placeholder__tag {
  display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-label); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--magenta-deep);
  background:var(--magenta-soft); border-radius:999px; padding:4px var(--s3); margin-bottom:var(--s4);
}
.placeholder p { color:var(--muted); font-size:var(--t-sm); }

/* --------------------------------------------------------------------------
   14. TESTIMONIALS — scroll-snap carousel
   -------------------------------------------------------------------------- */
.carousel { position:relative; }

/* Native scroll does the work; the arrows only nudge it. overflow-x:auto makes
   overflow-y computed, so the block padding is what keeps the cards' hover lift
   and shadow from being clipped. */
.tmns {
  display:flex; gap:var(--s6);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-block:var(--s2) var(--s4);
  scrollbar-width:none; -ms-overflow-style:none;
}
.tmns::-webkit-scrollbar { display:none; }
.tmns:focus-visible { outline:2px solid var(--magenta-deep); outline-offset:4px; border-radius:var(--r-lg); }

.tmn {
  flex:0 0 clamp(272px, 80vw, 386px); margin:0;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(var(--s6),2.4vw,var(--s8));
  transition:border-color var(--fast) var(--ease), transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease-out);
}
.tmn:hover { border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 20px 40px -30px rgba(30,20,24,.4); }
.tmn__mark { width:24px; height:24px; flex:none; color:var(--magenta); opacity:.32; margin-bottom:var(--s3); }
.tmn__q { margin:0 0 var(--s6); max-width:none; font-size:var(--t-sm); color:var(--muted); }
.tmn__by { display:flex; align-items:center; gap:var(--s3); margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line); }
.tmn__pic {
  width:46px; height:46px; flex:none; border-radius:999px;
  object-fit:cover; object-position:center top;
  background:var(--blush-2); border:1px solid var(--line-2);
}
.tmn__pic--initials {
  display:grid; place-items:center;
  font-size:var(--t-sm); font-weight:800; letter-spacing:.02em;
  color:var(--magenta-deep); background:var(--magenta-soft); border-color:transparent;
}
.tmn__n { font-size:var(--t-sm); font-weight:800; letter-spacing:-.012em; }
.tmn__r { margin:1px 0 0; max-width:none; font-size:var(--t-xs); color:var(--faint); line-height:1.35; }

.carousel__nav { display:flex; justify-content:center; gap:var(--s3); margin-top:var(--s6); }
.carousel__btn {
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--line-2); background:var(--white); color:var(--ink);
  cursor:pointer; transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease),
                             background var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.carousel__btn:hover:not(:disabled) { border-color:var(--magenta-deep); color:var(--magenta-deep); }
.carousel__btn:disabled { opacity:.34; cursor:default; }
.carousel__ico { width:17px; height:17px; }
.carousel__ico--back { transform:scaleX(-1); }
/* every card already visible — the arrows would have nothing to do */
.carousel.is-static .carousel__nav { display:none; }

/* --------------------------------------------------------------------------
   15. ENROL — the dark band
   -------------------------------------------------------------------------- */
.enrol { background: var(--ink-band); color: var(--paper); }
.enrol .lede,.enrol .muted { color:#C9BAC0; }
.enrol .eyebrow { color: var(--amber); }
.enrol h2,.enrol h3 { color:#fff; }
.enrol__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--s8),4vw,var(--s16)); align-items:start; }
@media (max-width:940px){ .enrol__grid { grid-template-columns:1fr; } }
.enrol .checks .tick { background:rgba(255,255,255,.12); color:var(--amber); }
.enrol .checks li { color:#C9BAC0; }
.price { display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s4); }
.price__v { font-size:clamp(2.25rem,5vw,3.25rem); font-weight:800; letter-spacing:-.04em; color:#fff; }
.price__k { font-size:var(--t-sm); color:#C9BAC0; }

.form { display:grid; gap:var(--s4); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); padding:clamp(var(--s6),3vw,var(--s8)); }
.field { display:grid; gap:6px; }
.field__label { font-size:var(--t-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#C9BAC0; }
.input {
  width:100%; padding:var(--s3) var(--s4); background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.2); border-radius:12px; color:#fff;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder { color:rgba(255,255,255,.42); }
.input:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(252,180,20,.25); }
.input[aria-invalid="true"] { border-color:#FFB3B3; }
.field__err { font-size:.6875rem; color:#FFC9C9; min-height:1em; }
.form__note { font-size:var(--t-xs); color:#A9979E; }
.form__ok { display:none; border:1px solid rgba(255,255,255,.28); border-radius:var(--r); padding:var(--s8); background:rgba(255,255,255,.06); }
.form__ok.is-live { display:block; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.acc { border-top:1px solid var(--line); }
.acc__item { border-bottom:1px solid var(--line); }
.acc__btn {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  padding:var(--s6) 0; background:transparent; border:0; cursor:pointer; text-align:left;
  font-size:var(--t-d3); font-weight:800; color:var(--ink); transition:color var(--fast) var(--ease);
}
.acc__btn:hover { color:var(--magenta-deep); }
.acc__mark { position:relative; width:12px; height:12px; flex:none; }
.acc__mark::before,.acc__mark::after { content:""; position:absolute; background:var(--magenta-deep); transition:transform var(--mid) var(--ease-out); }
.acc__mark::before { left:0; top:5.5px; width:12px; height:1.5px; }
.acc__mark::after { left:5.5px; top:0; width:1.5px; height:12px; }
.acc__btn[aria-expanded="true"] .acc__mark::after { transform:scaleY(0); }
.acc__panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--mid) var(--ease-out); }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows:1fr; }
.acc__inner { overflow:hidden; }
.acc__inner > * { padding-bottom:var(--s6); }
.acc__panel p { color:var(--muted); font-size:var(--t-sm); }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer { border-top:1px solid var(--line); background:var(--white); }
.footer__in { display:flex; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; padding-block:var(--s8); align-items:center; }
.footer__in a { font-size:var(--t-xs); color:var(--muted); }
.footer__in a:hover { color:var(--ink); }
.footer__legal { font-size:var(--t-xs); color:var(--faint); }

/* --------------------------------------------------------------------------
   18. REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
[data-reveal].is-in { opacity:1; transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal] { opacity:1; transform:none; }
  .marquee__track { animation:none; }
}