/* ============================================================================
   PROTOKOL — website design system

   WHITE GROUND, DARK RHYTHM. :root holds the LIGHT context — the default band
   is light, and that is where the app's own (light) screenshots live —
   while .band--dark flips the tokens for the bands that carry weight.
   Website 2.0 (brief §29) uses that flip as a deliberate rhythm: the page
   opens on a dark hero and alternates — dark hero → light product → dark
   interactive demo → light benefits → dark comparison → light pricing → dark
   close. The header and footer are always onyx and frame the page. Light is
   still the majority ground (tools/test/site.test.mjs counts it), because the
   earlier dark-first site proved that all-dark costs more than it looks:
   the product's own UI needs a light band to sit on.

   Tokens are lifted from the app itself (www/index.html) so the site and the
   product read as one ecosystem:
     ink #0e1116 / bg #f7f7f5 / muted #6b7280            (LIGHT_BASE)
     bg #111318 / ink #f1f2f4 / muted #9298a1            (DARK_BASE)
     gold #E9B44C + #c68a2e, --gold-text #8a5e1c         (Elite / brand accent)
     safir #1d49d6 + #4a74f5, rose #c14e73 + #e089a6     (THEMES)
   Fonts match the app: Sora (display + numerals), Inter (body + interface).
   ========================================================================== */

:root{
  /* --- canvas: the site is onyx-first, the app's own ink used as the ground -- */
  --onyx:#0e1116;
  --onyx-2:#171a20;
  --onyx-3:#1f232b;
  --hair-d:rgba(241,242,244,.10);
  --hair-d-soft:rgba(241,242,244,.06);

  /* --- light bands (where the real app UI is shown in its native palette) --- */
  --bone:#f7f7f5;
  --white:#ffffff;
  --surface-2:#f1f1ee;
  --hair-l:#ececea;

  /* --- type colors ------------------------------------------------------- */
  --on-dark:#f1f2f4;        /* ~15:1 on onyx  */
  --on-dark-2:#c6cad1;      /* ~10:1          */
  --on-dark-mute:#9298a1;   /* ~5.9:1  AA     */
  --on-light:#0e1116;
  --on-light-2:#3c434d;
  --on-light-mute:#6b7280;  /* ~4.8:1  AA     */

  /* --- brand accents -----------------------------------------------------
     Two golds, because one cannot serve both bands. The saturated one is for
     dark ground and for button fills; light backgrounds need a much darker
     value to clear WCAG AA, and no amount of saturation changes that —
     #FFC94D on #f7f7f5 is 1.43:1.
       --gold      #FFC94D on onyx    12.35:1   (was #E9B44C, 9.99:1)
       --gold-text #8E5A00 on bone     5.42:1   (was #8a5e1c, 5.29:1)
     Both moved *up* in contrast while getting more saturated, so this is a
     straight win rather than a trade. */
  --gold:#FFC94D;
  --gold-deep:#F0A500;
  --gold-text:#8E5A00;      /* the ONLY gold allowed as text on a light band */
  --gold-glow:240,165,0;    /* rgb triplet for the button/accent glow        */
  --sapphire:#4a74f5;
  --sapphire-deep:#1d49d6;
  --rose:#e089a6;
  --rose-deep:#c14e73;
  --pro:#178a5e;            /* TIER_ACCENT.pro   */
  --pro-2:#22c08a;
  --elite:#c68a2e;          /* TIER_ACCENT.elite */
  --elite-2:#E9B44C;

  /* --- shape + motion ---------------------------------------------------- */
  --r:24px; --r-sm:16px; --r-xs:12px; --r-pill:999px;
  --ease:cubic-bezier(.32,.72,.24,1);
  --dur:.26s;
  --shell:1180px;
  --gut:clamp(20px,5vw,40px);

  /* --- current band context (the default is LIGHT; .band--dark flips it) --- */
  --fg:var(--on-light);
  --fg-2:var(--on-light-2);
  --fg-mute:var(--on-light-mute);
  --hair:var(--hair-l);
  --gold-fg:var(--gold-text);
  /* Pro green as TEXT has to flip with the band, the same reason the app keeps
     a separate --gold-text: TIER_ACCENT.pro (#178a5e) reads only ~3.6:1 on its
     own tinted dark chip, so the dark band uses the lighter stop (~6.7:1) and
     the light band a darkened one (~4.8:1). */
  --pro-fg:#116b49;
  --band-bg:var(--bone);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--white);
  color:var(--on-light);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-fg);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--onyx)}

/* ============================ layout ===================================== */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);width:100%}
.shell--narrow{max-width:760px}
.shell--mid{max-width:940px}

.band{
  background:var(--band-bg);
  color:var(--fg);
  padding-block:clamp(72px,10vw,140px);
  position:relative;
}
/* The one dark context left. Used for the closing CTA and the footer, where a
   dark ground is the point rather than the default. */
.band--dark{
  --fg:var(--on-dark);
  --fg-2:var(--on-dark-2);
  --fg-mute:var(--on-dark-mute);
  --hair:var(--hair-d);
  --gold-fg:var(--gold);
  --pro-fg:var(--pro-2);
  --band-bg:var(--onyx);
}
/* ===== one ground, not two ===================================================
   The page alternated #ffffff and #f7f7f5. Measured, that is 1.073:1 — too
   close to read as two grounds and too far to read as one, so the eye kept
   deciding whether it was looking at a boundary. Three near-identical light
   values were stacked, in fact: the white band, the bone band, and cards on a
   3% ink wash.

   Widening the gap was the obvious fix and it fails: #f0efec puts muted text at
   4.20:1, under AA, and drops the hairline to 1.03:1 — which erases the chip
   outlines. Two grounds cannot be told apart and stay accessible at the same
   time, not with this palette.

   So: one ground. The rhythm the alternation carried moves to a hairline at the
   joins, and the cards lift off the ground instead of tinting into it. No new
   colour is introduced — bone and white were both already here, which is why
   every text pair is unchanged and still clears AA.

   Flush bands are deliberate continuations of the band above, so they get no
   rule; a line there would split a section that is meant to read as one. */
.band + .band:not(.band--flush):not(.band--dark){border-top:1px solid var(--hair-l)}
.band--dark + .band{border-top:0}
.band--tight{padding-block:clamp(52px,7vw,90px)}
.band--flush{padding-block-start:0}

/* ============================ type ======================================= */
.display{font-family:'Sora',-apple-system,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.03}
.num{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

h1,h2,h3,h4{margin:0;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(40px,7.2vw,78px)}
h2{font-size:clamp(30px,4.6vw,54px);letter-spacing:-.03em}
h3{font-size:clamp(21px,2.4vw,28px);letter-spacing:-.022em;line-height:1.18}
h4{font-size:17px;letter-spacing:-.012em;line-height:1.3}
p{margin:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-fg);
}
.eyebrow::before{content:'';width:20px;height:1px;background:currentColor;opacity:.55;flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--mute{color:var(--fg-mute)}

.lead{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--fg-2);max-width:60ch}
.body{font-size:16.5px;line-height:1.68;color:var(--fg-2)}
.small{font-size:14px;line-height:1.6;color:var(--fg-mute)}
.tiny{font-size:12.5px;line-height:1.55;color:var(--fg-mute)}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}
.center{text-align:center}
.center .lead,.center .measure,.center .measure-sm{margin-inline:auto}

.stack>*+*{margin-top:var(--s,20px)}
.stack--sm{--s:12px}
.stack--lg{--s:32px}
.stack--xl{--s:48px}

/* A faint bloom behind accent words like "action." — only on dark ground,
   where a glow reads as light. On a light band the same shadow only muddies
   the letterforms, so the default is now no shadow and the dark band opts in. */
.gold{color:var(--gold-fg)}
.band--dark .gold{text-shadow:0 0 26px rgba(255,201,77,.30)}
.hl{
  background:linear-gradient(transparent 62%, color-mix(in srgb,var(--gold) 55%,transparent) 62%);
  padding-inline:2px;
}
.band--dark .hl{background:linear-gradient(transparent 62%, color-mix(in srgb,var(--gold) 26%,transparent) 62%)}

/* ============================ header ===================================== */
/* Onyx, always. Website 2.0 opens on a dark hero (§29) and a light glass bar
   sitting on onyx read as a seam; on the light subpages the same dark bar
   reads as the brand's frame instead. The header carries the dark token
   context the same way .ftr does, so everything inside resolves correctly. */
.hdr{
  --fg:var(--on-dark);
  --fg-2:var(--on-dark-2);
  --fg-mute:var(--on-dark-mute);
  --hair:var(--hair-d);
  --gold-fg:var(--gold);
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--onyx) 86%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--hair-d-soft);
  color:var(--on-dark);
}
.hdr__in{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:inline-flex;align-items:center;gap:9px;flex:none}
.brand svg{width:26px;height:26px;flex:none}
/* the mark's own onyx tile disappears on the onyx bar; a hairline keeps it a tile */
.hdr .brand svg rect{stroke:rgba(241,242,244,.18);stroke-width:14}
.brand span{
  font-family:'Sora',sans-serif;font-weight:800;font-size:16.5px;
  letter-spacing:.05em;color:var(--fg);
}
.hdr__nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.hdr__nav a{font-size:14.5px;color:var(--on-dark-mute);transition:color .18s var(--ease)}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{color:var(--on-dark)}
.hdr__end{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.hdr__nav+.hdr__end{margin-left:0}

.lang{display:flex;align-items:center;gap:2px;font-size:12.5px;font-weight:700;letter-spacing:.06em}
.lang a{
  color:var(--on-dark-mute);padding:5px 8px;border-radius:8px;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.lang a:hover{color:var(--on-dark);background:rgba(241,242,244,.07)}
/* bright gold is fine here: the bar is onyx, where --gold is 12.35:1 */
.lang a[aria-current="true"]{color:var(--gold)}
.lang__sep{color:var(--on-dark-mute);opacity:.45}

.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--hair-d);
  align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:17px;height:1.6px;background:var(--on-dark);position:relative;transition:transform .22s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:1.6px;background:var(--on-dark);transition:transform .22s var(--ease),opacity .18s}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
[data-menu-open] .burger span{background:transparent}
[data-menu-open] .burger span::before{transform:translateY(5.5px) rotate(45deg)}
[data-menu-open] .burger span::after{transform:translateY(-5.5px) rotate(-45deg)}

.hdr__sheet{display:none}
@media (max-width:940px){
  .hdr__nav{display:none}
  .burger{display:flex}
  .hdr__sheet{
    display:block;overflow:hidden;max-height:0;
    transition:max-height .34s var(--ease);
    border-top:1px solid transparent;
  }
  [data-menu-open] .hdr__sheet{max-height:70vh;border-top-color:var(--hair-d);overflow-y:auto}
  .hdr__sheet ul{list-style:none;margin:0;padding:8px 0 20px}
  .hdr__sheet a{display:block;padding:13px 2px;font-size:17px;font-weight:600;border-bottom:1px solid var(--hair-d-soft);color:var(--on-dark)}
  .hdr__sheet a:last-child{border-bottom:0}
  .hdr__sheet-lang{display:flex;gap:10px;padding-top:14px}
  .hdr__sheet-lang a{border-bottom:0;font-size:14px;color:var(--on-dark-mute);padding:8px 2px}
}
/* §5: the mobile header is PROTOKOL · CTA · menu — the CTA stays, the language
   pair moves into the sheet where it has room. */
@media (max-width:520px){
  .hdr__end .lang{display:none}
  .hdr__in{gap:12px}
}

/* ============================ buttons ==================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--r-pill);
  font-size:15px;font-weight:700;letter-spacing:-.005em;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
  will-change:transform;text-align:center;
}
.btn--gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1204;
  box-shadow:0 8px 24px rgba(var(--gold-glow),.40);
}
.btn--gold:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.06);
  box-shadow:0 12px 32px rgba(var(--gold-glow),.55);
}
.btn--ink{background:var(--on-light);color:var(--white)}
/* The ink button is dark-on-light by definition, so its lift belongs to the
   light band — which is now every band that has not opted out. */
.btn--ink:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(14,17,22,.55)}
.btn--ghost{border:1px solid var(--hair);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:14px}
.btn--wide{width:100%}
.btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transform:none!important}
}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .btnrow{justify-content:center}

/* --------------------------- store buttons (hero) -------------------------
   Both stores are live, so the pair renders equal: same size, same fill, real
   logos at the same scale. protokol.js adds [data-primary] to whichever store
   the visitor can install from, which changes the fill and nothing else — the
   other button keeps its full size and contrast so it never reads as disabled.
   With JS off the equal pair is the correct final state, not a fallback. */
.btnrow--stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:36px}
.center .btnrow--stores{justify-content:center}
.btn--store{
  background:var(--white);color:#0e1116;
  border:1px solid rgba(14,17,22,.08);
  padding:12px 22px 12px 18px;gap:11px;min-height:48px;
  border-radius:var(--r-pill);
}
.btn--store svg{width:22px;height:22px;flex:none}
.btn--store span{text-align:left}
.btn--store b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.15}
.btn--store i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:#3c434d}
.btn--store[data-primary]{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  border-color:transparent;
  box-shadow:0 8px 24px rgba(var(--gold-glow),.34);
}
/* the logos keep their own colours in both states — recolouring a store mark
   costs the recognition that is the only reason it is there */
.btn--store[data-primary] i{color:#4a3a12}
.btn--store:hover{transform:translateY(-2px)}

/* -------------------------- availability chip (hero) ----------------------
   Rides the note line that was already under the CTA rather than becoming a
   banner of its own. Two marks, one size, one colour: neither store outranks
   the other. No motion — the point is that this is now ordinary. */
.liveon{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 11px 4px 9px;border-radius:var(--r-pill);
  border:1px solid rgba(var(--gold-glow),.34);
  background:rgba(var(--gold-glow),.10);
  /* --gold-fg, not --gold. The chip's own wash is 10% gold over whatever band
     it sits in, so on white it is very nearly white — and bright gold on it
     measured 1.36:1. The band-aware value is 5.4:1 there and unchanged on the
     dark band. */
  color:var(--gold-fg);font-size:12px;font-weight:700;letter-spacing:.01em;
}
.liveon svg{width:13px;height:13px;flex:none}
.liveon>span{margin-left:1px}

@media (max-width:480px){
  /* one column, full width, comfortably past the 44px touch minimum */
  .btnrow--stores{flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .btnrow--stores .btn--store{width:100%;justify-content:flex-start;min-height:56px}
  .hero .btnrow .btn--ghost{width:100%}
  /* Put the chip on its own line deliberately instead of letting it depend on
     a few pixels of slack: Turkish already wraps here, while English clears the
     note line by about one pixel, which is luck rather than a layout. A
     zero-height full-basis item forces the break, so the pill still hugs its
     own text and centres — giving it flex-basis:100% would stretch the pill
     itself across the screen. */
  .hero__note::after{content:'';flex-basis:100%;height:0;order:0}
  .hero__note .liveon{order:1}
}

/* store badge — full-colour logos wherever the badge itself is the link */
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .badges,.cta .badges,.ftr .badges{justify-content:center}
.badge{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 20px 11px 17px;border-radius:14px;
  background:var(--white);color:#0e1116;
  border:1px solid rgba(14,17,22,.08);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
}
/* The store badge stays a white chip — recolouring it gold would hurt Play
   recognisability — but it picks up the same gold glow on hover so the CTAs
   feel like one family. */
.badge:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 32px rgba(var(--gold-glow),.34)}
.badge svg{width:24px;height:24px;flex:none}
/* The badge is a white chip that can sit inside contexts with their own link
   colour (.ftr a, .legal a …). Its contents pin their own colour so the chip
   never inherits a light-on-white combination. */
.badge b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.15;color:#0e1116}
.badge i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:#3c434d}
.ftr .badge,.ftr .badge:hover{color:#0e1116}

/* ============================ trust strip ================================ */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden;
}
.trust div{background:var(--band-bg);padding:22px 20px;text-align:center}
.trust b{
  display:block;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg);
}
.trust span{display:block;margin-top:5px;font-size:12.5px;color:var(--fg-mute)}
@media (max-width:760px){.trust{grid-template-columns:repeat(2,1fr)}}

/* ============================ hero ======================================= */
/* Website 2.0 opens dark (§29): the hero rides band--dark, so the bloom is a
   glow again — gold light on onyx — and it fades into the header's onyx so
   bar and hero read as one surface. */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,120px);
}
.hero::before{
  content:'';position:absolute;inset:-20% -10% auto;height:min(760px,90vh);
  background:
    radial-gradient(ellipse 58% 52% at 22% 0%, rgba(255,201,77,.14), transparent 62%),
    radial-gradient(ellipse 46% 44% at 88% 12%, rgba(74,116,245,.12), transparent 66%);
  pointer-events:none;
}
.hero__grid{
  position:relative;display:grid;gap:clamp(44px,6vw,72px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;
}
.hero h1{margin-block:22px 0}
.hero h1.display{font-size:clamp(46px,8vw,92px);line-height:.98}
.hero .lead{margin-top:24px;max-width:52ch}
.hero .btnrow{margin-top:36px}
.hero__note{margin-top:20px;font-size:13px;color:var(--fg-mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero__note b{color:var(--gold-fg);font-weight:700}
/* the capture is of a light UI; on onyx it needs its lift back */
.hero__media{position:relative}
.hero__media::before{
  content:'';position:absolute;inset:8% -6% -4%;
  background:radial-gradient(ellipse 60% 55% at 50% 55%, rgba(255,201,77,.10), transparent 70%);
  pointer-events:none;
}
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero .lead,.hero__note{margin-inline:auto;justify-content:center}
  .hero .btnrow{justify-content:center}
  .hero .eyebrow{justify-content:center}
  .hero__media{max-width:340px;margin-inline:auto}
}

/* ============================ product shots ==============================
   Real device captures, served as WebP through srcset. This replaced ~85 lines
   of CSS that rebuilt the app's UI in markup: an actual screenshot is lighter,
   always current, and cannot drift from the product. Every <img> carries
   width/height so nothing reflows while it loads. */
.shot{width:100%;max-width:var(--shot-w,420px);margin-inline:auto}
/* A device shot on a light page needs a real edge and a softer shadow; the
   same 80%-black drop that anchored it on onyx reads as a bruise on white.
   This was the .band--light case and is now the default — which is the point of
   the flip: the screenshots are of a mostly-light app, and they no longer have
   to be quarantined inside a band of their own to look right. */
.shot img{
  width:100%;height:auto;display:block;background:var(--white);
  border-radius:clamp(24px,7.4%,46px);
  border:1px solid rgba(14,17,22,.10);
  box-shadow:0 44px 90px -36px rgba(14,17,22,.42);
}
.band--dark .shot img{
  background:var(--onyx);
  border-color:rgba(241,242,244,.14);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.8);
}

/* ============================ knowledge → profession → action ============ */
.kpa{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:52px}
.kpa__c{
  border:1px solid transparent;border-radius:var(--r);padding:clamp(24px,3vw,34px);
  position:relative;background:var(--white);
  box-shadow:0 1px 2px rgba(14,17,22,.04), 0 12px 28px -14px rgba(14,17,22,.16);
}
.kpa__c b{
  display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-fg);
}
.kpa__c span{display:block;margin-top:12px;font-size:clamp(17px,1.9vw,20px);line-height:1.4;color:var(--fg)}
.kpa__c:not(:last-child)::after{
  content:'';position:absolute;right:-.55em;top:50%;z-index:2;
  width:11px;height:11px;border-right:2px solid var(--gold-fg);border-top:2px solid var(--gold-fg);
  transform:translateY(-50%) rotate(45deg);
}
@media (max-width:820px){
  .kpa{grid-template-columns:1fr}
  .kpa__c:not(:last-child)::after{right:50%;top:auto;bottom:-.72em;transform:translateX(50%) rotate(135deg)}
}
/* Field strip under the three columns. Both the count and the chips are
   generated from the app's own taxonomy at build time — see
   tools/site/professions.mjs — so they cannot fall behind the product. */
.kpa__note{margin-top:38px;text-align:center;font-size:15px;color:var(--fg-mute)}
.kpa__note b{color:var(--fg-2);font-weight:700}
.kpa__fields{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px}
.kpa__fields span{
  font-size:13.5px;font-weight:600;color:var(--fg-2);
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:7px 15px;
}
.kpa__fields span[data-more="1"]{border-style:dashed;color:var(--fg-mute)}

/* ============================ showcase =================================== */
.showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,68px);margin-top:clamp(44px,6vw,72px)}
@media (max-width:820px){.showcase{grid-template-columns:1fr;gap:56px}}
.showcase__item{--shot-w:360px;text-align:center}
.showcase__item h3{margin-top:30px}
.showcase__item p{margin-top:10px;color:var(--fg-mute);font-size:15.5px;line-height:1.6;max-width:44ch;margin-inline:auto}

/* ============================ steps ====================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px);margin-top:52px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps div{border-top:2px solid var(--gold-fg);padding-top:20px}
.steps b{
  display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.14em;color:var(--fg-mute);
}
.steps strong{display:block;margin-top:10px;font-family:'Sora',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--fg)}
.steps span{display:block;margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--fg-mute)}

/* ============================ generic cards ============================== */
.grid{display:grid;gap:clamp(16px,2.2vw,24px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* On one ground a card has to separate itself. A border would do it at
   1.10:1 against bone, which is the same problem one level down; light does it
   without touching a contrast ratio at all. The shadow is deliberately soft
   enough to read as paper rather than as a drop shadow. */
.card{
  border:1px solid transparent;border-radius:var(--r);padding:clamp(22px,2.6vw,30px);
  background:var(--white);
  box-shadow:0 1px 2px rgba(14,17,22,.04), 0 12px 28px -14px rgba(14,17,22,.16);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card--flat{background:transparent;box-shadow:none;border-color:var(--hair-l)}

/* The dark band keeps what it had: a white card on onyx would be a hole, and a
   shadow on black is invisible. Scoped rather than left to inherit, because the
   rules above now assume a light ground. */
.band--dark .card,.band--dark .kpa__c,.ftr .card{
  background:color-mix(in srgb,var(--fg) 3%,transparent);
  border-color:var(--hair);
  box-shadow:none;
}
.card--solid{background:var(--white);box-shadow:0 10px 34px rgba(14,17,22,.07);border-color:transparent}
.card h3{margin-bottom:10px}
.card p{color:var(--fg-mute);font-size:15px;line-height:1.62}
.card__ix{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);margin-bottom:18px;color:var(--gold-fg);
}
.card__ix svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card__n{
  font-family:'Sora',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;
  color:var(--gold-fg);margin-bottom:14px;display:block;
}

/* ============================ problem ==================================== */
.problem__list{
  display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:34px;
}
.problem__list span{
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:9px 18px;
  font-size:15px;font-weight:600;color:var(--fg-2);
}
.problem__turn{
  margin-top:44px;padding-top:34px;border-top:1px solid var(--hair);
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(26px,3.6vw,42px);
}
.problem__turn em{font-style:normal;color:var(--gold-fg)}

/* ============================ the loop =================================== */
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:52px;position:relative}
.loop__step{
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:22px 18px;
  text-align:center;position:relative;background:var(--band-bg);
}
.loop__step b{
  display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:13.5px;
  letter-spacing:.11em;text-transform:uppercase;
}
.loop__step span{display:block;margin-top:8px;font-size:13px;color:var(--fg-mute);line-height:1.5}
.loop__step[data-core="1"]{border-color:var(--gold-fg);background:color-mix(in srgb,var(--gold) 9%,transparent)}
.loop__step[data-core="1"] b{color:var(--gold-fg)}
@media (max-width:900px){.loop{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.loop{grid-template-columns:1fr}}

/* ============================ editorial product sections ================= */
.feat{
  display:grid;gap:clamp(36px,5vw,80px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.feat+.feat{margin-top:clamp(72px,9vw,130px)}
.feat--flip .feat__media{order:-1}
.feat__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.feat__tabs span{
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:8px;border:1px solid var(--hair);color:var(--fg-mute);
}
.feat__tabs span[data-on="1"]{border-color:var(--gold-fg);color:var(--gold-fg)}
.feat ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.feat li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--fg-2);line-height:1.55}
.feat li::before{
  content:'';flex:none;width:7px;height:7px;border-radius:50%;margin-top:9px;
  background:var(--gold-fg);
}
@media (max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat--flip .feat__media{order:0}
}

/* ============================ book → action ============================== */
.flow{display:grid;gap:0;margin-top:56px;counter-reset:f}
.flow__row{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(18px,3vw,36px);
  padding:26px 0;border-top:1px solid var(--hair);align-items:start;
}
.flow__row:last-child{border-bottom:1px solid var(--hair)}
.flow__n{
  font-family:'Sora',sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;
  color:var(--fg-mute);padding-top:6px;
}
.flow__row[data-key="1"] .flow__n{color:var(--gold-fg)}
.flow__row h3{font-size:clamp(19px,2.1vw,25px)}
.flow__row p{margin-top:8px;color:var(--fg-mute);font-size:15.5px;line-height:1.62;max-width:60ch}
.flow__out{
  margin-top:14px;border:1px dashed var(--hair);border-radius:var(--r-sm);
  padding:16px 18px;background:color-mix(in srgb,var(--fg) 3%,transparent);
}
.flow__out b{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-fg);margin-bottom:6px}
.flow__out p{margin:0;color:var(--fg);font-size:15.5px;font-weight:600;line-height:1.5}
@media (max-width:620px){.flow__row{grid-template-columns:1fr;gap:8px}.flow__n{padding-top:0}}

/* ============================ differentiation ============================ */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);margin-top:52px}
.vs__col{border:1px solid var(--hair);border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.vs__col--us{border-color:var(--gold-fg);background:color-mix(in srgb,var(--gold) 7%,transparent)}
.vs__col h3{font-size:19px;letter-spacing:-.015em}
.vs__col ol{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.vs__col li{
  padding:13px 0;border-bottom:1px solid var(--hair);font-size:15.5px;color:var(--fg-2);
  display:flex;align-items:center;gap:11px;
}
.vs__col li:last-child{border-bottom:0}
.vs__col--us li{font-weight:600;color:var(--fg)}
.vs__k{
  font-family:'Sora',sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;
  color:var(--fg-mute);flex:none;width:22px;
}
.vs__col--us .vs__k{color:var(--gold-fg)}
@media (max-width:760px){.vs{grid-template-columns:1fr}}

/* ============================ pricing ==================================== */
.switches{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:38px}
.seg{
  display:inline-flex;padding:4px;border-radius:var(--r-pill);border:1px solid var(--hair);
  background:color-mix(in srgb,var(--fg) 3%,transparent);gap:2px;
}
.seg button{
  padding:9px 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:700;
  /* --fg-2, not --fg-mute: the segment sits on its own 3% wash, and muted grey
     over that wash measures 4.23:1 at 13.5px bold — under AA (Lighthouse
     caught it). The pressed state still owns the emphasis via its full fill. */
  color:var(--fg-2);transition:background .22s var(--ease),color .22s var(--ease);
  display:inline-flex;align-items:center;gap:7px;
}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--band-bg)}
.seg .save{
  font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:3px 7px;border-radius:6px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1204;
}
.seg button[aria-pressed="true"] .save{background:var(--band-bg);color:var(--gold-fg)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px);margin-top:40px;align-items:start}
@media (max-width:940px){.tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.tier{
  border:1px solid var(--hair);border-radius:var(--r);padding:clamp(24px,2.8vw,32px);
  display:flex;flex-direction:column;height:100%;position:relative;
}
.tier--pro{border-color:color-mix(in srgb,var(--pro-fg) 55%,transparent)}
.tier--elite{
  border-color:var(--gold-fg);
  background:color-mix(in srgb,var(--gold) 7%,transparent);
  /* The 7% gold wash (#f8f4e9 over bone) is warmer and lighter than the bands
     contrast.mjs measures, and the shared muted grey lands at 4.39:1 on it —
     under AA. A slightly darker mute (#656c7a, ~4.7:1 here) only inside this
     card keeps every note/sub line readable without touching the global token. */
  --fg-mute:#656c7a;
}
.tier__tag{
  position:absolute;top:-11px;left:clamp(24px,2.8vw,32px);
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:7px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1204;
}
.tier h3{font-size:22px}
.tier__note{margin-top:6px;font-size:13.5px;color:var(--fg-mute);min-height:2.8em}
.tier__price{margin-top:22px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tier__price b{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,44px);letter-spacing:-.035em;line-height:1}
.tier__price i{font-style:normal;font-size:14px;color:var(--fg-mute);font-weight:600}
.tier__sub{margin-top:8px;font-size:13px;color:var(--fg-mute);min-height:1.5em}
.tier__trial{
  margin-top:10px;font-size:12.5px;font-weight:700;color:var(--gold-fg);
  display:flex;align-items:center;gap:7px;
}
.tier__trial::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tier .btn{margin-top:22px}
.tier ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.tier li svg{width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--gold-fg);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tier li[data-off="1"]{color:var(--fg-mute)}
.tier li[data-off="1"] svg{stroke:var(--fg-mute);opacity:.55}

/* full entitlement table — mirrors the app's Plan comparison exactly */
.cmp{margin-top:48px;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp caption{
  padding:20px clamp(18px,2.4vw,26px);text-align:left;font-weight:700;font-size:15px;
  border-bottom:1px solid var(--hair);color:var(--fg);
}
.cmp th,.cmp td{padding:14px clamp(12px,1.6vw,20px);text-align:center;border-bottom:1px solid var(--hair)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
/* No text-transform on tier names. Under lang="tr" the browser applies Turkish
   casing, which turns the product tier "Elite" into "ELİTE" (dotted capital I)
   — a Turkish-looking word instead of the tier the app actually names. The
   labels are authored in their final case instead. */
.cmp thead th{
  font-family:'Sora',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  color:var(--fg-mute);
}
.cmp thead th[data-t="pro"]{color:var(--pro-fg)}
.cmp thead th[data-t="elite"]{color:var(--gold-fg)}
.cmp tbody th{text-align:left;font-weight:600;color:var(--fg);font-size:14.5px}
.cmp td{color:var(--fg-2);font-weight:600}
.cmp td[data-t="elite"]{color:var(--gold-fg)}
.cmp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:620px){.cmp table{min-width:520px}}

.pricing__foot{margin-top:26px;font-size:13px;color:var(--fg-mute);text-align:center;max-width:68ch;margin-inline:auto}

/* ============================ premium features =========================== */
.pf{display:grid;gap:clamp(16px,2.2vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.pf{grid-template-columns:1fr}}
.pf__item{border:1px solid var(--hair);border-radius:var(--r);padding:clamp(24px,3vw,34px);position:relative;overflow:hidden}
.pf__badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.07em;padding:5px 10px;border-radius:7px;margin-bottom:16px;
}
.pf__badge[data-t="pro"]{background:color-mix(in srgb,var(--pro) 18%,transparent);color:var(--pro-fg)}
.pf__badge[data-t="elite"]{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold-fg)}
.pf__badge[data-t="free"]{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg-mute)}
.pf__item p{margin-top:10px;color:var(--fg-mute);font-size:15px;line-height:1.62}
.pf__meta{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:8px;
}
.pf__meta span{
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;
  border:1px solid var(--hair);color:var(--fg-mute);
}

/* theme swatches */
.themes{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.theme{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:var(--r-pill);padding:8px 16px 8px 8px}
.theme i{width:26px;height:26px;border-radius:50%;flex:none;display:block}
.theme b{font-size:13.5px;font-weight:700}
.theme span{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--fg-mute)}

/* ============================ vision ===================================== */
.vision{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,18px);margin-top:44px}
@media (max-width:860px){.vision{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vision{grid-template-columns:1fr}}
.vision div{
  border:1px dashed var(--hair);border-radius:var(--r-sm);padding:22px;
}
.vision b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.015em}
.vision span{display:block;margin-top:7px;font-size:13.5px;color:var(--fg-mute);line-height:1.55}
.vision__flag{
  display:inline-block;margin-top:14px;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-mute);border:1px solid var(--hair);padding:4px 9px;border-radius:6px;
}

/* ============================ answers (GEO) ============================== */
.answers{display:grid;gap:0;margin-top:44px}
.answer{padding:26px 0;border-top:1px solid var(--hair)}
.answer:last-child{border-bottom:1px solid var(--hair)}
.answer h3{font-size:clamp(18px,2vw,22px)}
.answer p{margin-top:10px;color:var(--fg-2);font-size:16px;line-height:1.68;max-width:74ch}

/* ============================ FAQ ======================================== */
.faq{margin-top:44px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(16.5px,1.8vw,19px);
  letter-spacing:-.018em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--fg-mute);border-bottom:2px solid var(--fg-mute);
  transform:translateY(-70%) rotate(45deg);transition:transform .24s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details[open] summary{color:var(--gold-fg)}
.faq__a{padding:0 44px 24px 0;color:var(--fg-2);font-size:16px;line-height:1.7;max-width:74ch}

/* ============================ CTA ======================================== */
.cta{
  position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(80px,11vw,150px);
}
.cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(233,180,76,.18), transparent 68%);
  pointer-events:none;
}
/* The CTA and the footer are the only dark surfaces left, and they stack. The
   join between them would otherwise be a hairline across an otherwise
   continuous black, which reads as a rendering fault rather than a divider. */
.cta + .ftr{border-top-color:transparent}
.cta__in{position:relative}
.cta h2{max-width:16ch;margin-inline:auto}

/* ============================ footer ===================================== */
/* The footer paints its own dark ground, so it has to carry the dark token
   context too — otherwise everything inside it resolves against the light
   default. That is not theoretical: the flip left the brand wordmark as ink on
   onyx, 1:1, invisible, and invisible in the one way a screenshot does not make
   obvious. Sharing the tokens with .band--dark rather than restating them means
   the next component added here inherits the right values without anybody
   remembering to think about it. */
.ftr{
  --fg:var(--on-dark);
  --fg-2:var(--on-dark-2);
  --fg-mute:var(--on-dark-mute);
  --hair:var(--hair-d);
  --gold-fg:var(--gold);
  --pro-fg:var(--pro-2);
  border-top:1px solid var(--hair-d-soft);padding-block:56px 40px;background:var(--onyx);color:var(--fg);
}
/* Minimal layout (§17): brand, one wrapped link row, the badges, one legal
   line. Centred — the footer is a sign-off, not a sitemap. */
.ftr__top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.ftr a{font-size:14.5px;color:var(--on-dark-2);transition:color .18s}
.ftr a:hover{color:var(--gold)}
.ftr__blurb{font-size:14px;color:var(--on-dark-mute);line-height:1.6;margin-top:16px;max-width:44ch}
.ftr__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  margin-top:28px;
}
.ftr__badges{margin-top:30px}
.ftr__bottom{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--hair-d-soft);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--on-dark-mute);
}
.ftr__bottom a{color:var(--on-dark-mute)}
.ftr__bottom a:hover{color:var(--gold)}
@media (max-width:520px){.ftr__bottom{justify-content:center;text-align:center}}

/* ============================ misc ======================================= */
.rule{height:1px;background:var(--hair);border:0;margin:0}
.kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--fg-mute);border:1px solid var(--hair);border-radius:var(--r-pill);padding:7px 15px;
}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--gold-fg);flex:none;font-style:normal}

.legal h2{font-size:clamp(20px,2.2vw,26px);margin-top:44px}
.legal h3{font-size:17px;margin-top:28px}
.legal p,.legal li{color:var(--fg-2);font-size:15.5px;line-height:1.72;margin-top:12px}
.legal ul,.legal ol{padding-left:22px;margin:0}
.legal a{color:var(--gold-fg);text-decoration:underline;text-underline-offset:3px}
.legal__date{font-size:13.5px;color:var(--fg-mute);margin-top:12px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--gold);color:#1a1204;padding:12px 20px;border-radius:10px;font-weight:700;
}
.skip:focus{left:20px}

/* ======================================================================== */
/* ====================== website 2.0 — home sections ===================== */
/* ======================================================================== */

/* display-scale section headings (h2.display carries the big statements) */
h2.display{font-size:clamp(34px,5.8vw,72px);line-height:1.0;letter-spacing:-.035em}
.lead{text-wrap:pretty}

/* ---- §7 big idea -------------------------------------------------------- */
.bigidea{padding-block:clamp(84px,12vw,170px)}
.bigidea__h{font-size:clamp(36px,6.4vw,84px)}
.bigidea__sub{margin-top:28px;max-width:54ch}

/* ---- §8 product flow ---------------------------------------------------- */
.pflow{padding-block-end:clamp(72px,10vw,140px)}
.pchain{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:clamp(10px,1.6vw,18px);
}
.pchain__n{
  border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:16px clamp(18px,2.4vw,28px);text-align:center;background:var(--white);
  box-shadow:0 1px 2px rgba(14,17,22,.04), 0 12px 28px -14px rgba(14,17,22,.14);
  display:flex;flex-direction:column;justify-content:center;gap:5px;
}
.pchain__n i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.pchain__n b{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(15px,1.7vw,19px);letter-spacing:-.015em}
.pchain__n[data-ai="1"]{border-color:var(--gold-fg);background:color-mix(in srgb,var(--gold) 8%,var(--white))}
.pchain__n[data-ai="1"] b{color:var(--gold-fg)}
.pchain__a{align-self:center;width:12px;height:12px;flex:none;
  border-right:2px solid var(--gold-fg);border-top:2px solid var(--gold-fg);
  transform:rotate(45deg);opacity:.75}
.pday{
  margin:clamp(36px,5vw,56px) auto 0;max-width:440px;
  border:1px solid var(--hair);border-radius:var(--r);
  background:var(--white);overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(14,17,22,.30);
}
.pday__head{
  padding:16px 22px;font-family:'Sora',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.16em;color:var(--gold-fg);border-bottom:1px solid var(--hair);
}
.pday__row{display:flex;align-items:center;gap:18px;padding:15px 22px;border-bottom:1px solid var(--hair-l)}
.pday__row:last-child{border-bottom:0}
.pday__row b{font-size:14px;color:var(--fg-mute);flex:none;width:52px}
.pday__row span{font-size:15.5px;font-weight:600;color:var(--fg)}
.pflow__note{margin-top:22px}
@media (max-width:680px){
  .pchain{flex-direction:column;align-items:stretch}
  .pchain__a{transform:rotate(135deg);margin-block:2px}
}

/* ---- §9 build my day ---------------------------------------------------- */
.bmd__title{margin-top:18px}
.bmd__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,72px);margin-top:clamp(44px,6vw,64px);align-items:start;
}
.bmd__q{border:0;margin:0;padding:0;min-inline-size:0}
.bmd__q+.bmd__q{margin-top:36px}
.bmd__q legend{
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(17px,2vw,21px);
  letter-spacing:-.02em;padding:0;margin-bottom:16px;color:var(--fg);
}
.bmd__opts{display:flex;flex-wrap:wrap;gap:10px}
.bmd__opt{
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:11px 20px;font-size:14.5px;font-weight:700;color:var(--fg-2);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.bmd__opt:hover{border-color:var(--fg-mute);transform:translateY(-1px)}
.bmd__opt[aria-pressed="true"]{
  border-color:transparent;color:#1a1204;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 6px 20px rgba(var(--gold-glow),.30);
}
.bmd__day{
  border:1px solid var(--hair);border-radius:var(--r);
  background:color-mix(in srgb,var(--fg) 4%,transparent);
  padding:clamp(20px,2.6vw,28px);position:sticky;top:92px;
}
.bmd__dayhead{
  font-family:'Sora',sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;
  color:var(--gold-fg);padding-bottom:14px;border-bottom:1px solid var(--hair);
}
.bmd__rows{margin-top:6px}
.bmd__row{display:flex;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair-d-soft)}
.bmd__row:last-child{border-bottom:0}
.bmd__row b{font-size:14px;color:var(--fg-mute);flex:none;width:52px}
.bmd__row span{font-size:15.5px;font-weight:600;color:var(--fg)}
.bmd .btn--wide{margin-top:22px}
.bmd__note{margin-top:14px;text-align:center}
@media (max-width:880px){
  .bmd__grid{grid-template-columns:1fr;gap:40px}
  .bmd__day{position:static;max-width:440px;margin-inline:auto;width:100%}
}

/* ---- §10 four moves ----------------------------------------------------- */
.moves__rows{margin-top:clamp(52px,7vw,88px)}
.moves .feat__media{--shot-w:340px}
.move__k{
  display:inline-block;font-family:'Sora',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.16em;color:var(--gold-fg);margin-bottom:14px;
}

/* ---- §12 contrast ------------------------------------------------------- */
.contrast .vs{margin-top:clamp(44px,6vw,64px)}

/* ---- §13 built around you ----------------------------------------------- */
.persona__words{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  margin-top:30px;
}
.persona__words span{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(22px,3.4vw,38px);color:var(--fg-mute);
  transition:color .3s var(--ease);
}
.persona__words span:nth-child(1){color:var(--fg)}
.persona__words span:hover{color:var(--gold-fg)}

/* ---- §14 reviews (renders only when real reviews exist) ------------------ */
.review{margin:0}
.review blockquote{margin:0}
.review p{font-size:15.5px;line-height:1.6;color:var(--fg)}
.review figcaption{margin-top:16px;font-size:13.5px;color:var(--fg-mute)}
.review figcaption b{display:block;color:var(--fg-2)}

/* ---- §15 pricing on home ------------------------------------------------- */
.pricing-home .switches{margin-top:44px}

/* ======================================================================== */
/* ==================== phase 1.5 — SEO/GEO components ==================== */
/* ======================================================================== */

/* ---- breadcrumbs -------------------------------------------------------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;margin-bottom:26px;color:var(--fg-mute);
}
.crumbs a{color:var(--fg-mute);transition:color .18s var(--ease)}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current="page"]{color:var(--fg-2)}
.crumbs__sep{opacity:.45}

/* ---- landing opener ----------------------------------------------------- */
.landing{padding-block:clamp(44px,6vw,80px) clamp(56px,8vw,100px)}
.landing h1{font-size:clamp(34px,5.4vw,58px);margin-top:18px}
.landing .lead{margin-top:20px;max-width:52ch}
.landing__grid{
  display:grid;gap:clamp(40px,5vw,64px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
}
.landing__media{--shot-w:320px}
@media (max-width:900px){
  .landing__grid{grid-template-columns:1fr}
  .landing__media{max-width:300px;margin-inline:auto}
}

/* ---- journal hub -------------------------------------------------------- */
.jlist{display:grid;gap:clamp(16px,2.2vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.jlist{grid-template-columns:1fr}}
.jcard{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid transparent;border-radius:var(--r);padding:clamp(22px,2.6vw,30px);
  background:var(--white);
  box-shadow:0 1px 2px rgba(14,17,22,.04), 0 12px 28px -14px rgba(14,17,22,.16);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease);
}
.jcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(14,17,22,.24)}
.jcard h2{font-size:clamp(18px,2vw,22px);letter-spacing:-.022em;line-height:1.18}
.jcard p{color:var(--fg-mute);font-size:15px;line-height:1.6}
.jcard__meta{
  margin-top:auto;padding-top:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-fg);
}

/* ---- articles ----------------------------------------------------------- */
.article{padding-block:clamp(44px,6vw,72px) clamp(64px,9vw,110px)}
.article__head h1{font-size:clamp(32px,4.8vw,52px)}
.article__head .lead{margin-top:20px;color:var(--fg-2)}
.article__meta{
  margin-top:18px;padding-bottom:26px;border-bottom:1px solid var(--hair);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--fg-mute);
}
.article__body{margin-top:8px}
.article__body h2{
  font-size:clamp(22px,2.6vw,30px);margin-top:clamp(36px,5vw,52px);
}
.article__body p{
  margin-top:16px;color:var(--fg-2);font-size:16.5px;line-height:1.75;
}
.article__body ol,.article__body ul{
  margin:18px 0 0;padding-left:24px;display:grid;gap:14px;
}
.article__body li{color:var(--fg-2);font-size:16.5px;line-height:1.7}
.article__body li strong,.article__body p strong{color:var(--fg)}
.article__body li::marker{font-weight:800;color:var(--gold-fg)}
.article__body a{
  color:var(--gold-fg);text-decoration:underline;text-underline-offset:3px;
}

/* ============================ motion ===================================== */
/* Hero entrance: typography rises, the device follows a beat later (§6).
   Runs once on load; the global reduced-motion block below kills it. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__copy>*{animation:rise .8s var(--ease) both}
.hero__copy>*:nth-child(1){animation-delay:.04s}
.hero__copy>*:nth-child(2){animation-delay:.12s}
.hero__copy>*:nth-child(3){animation-delay:.22s}
.hero__copy>*:nth-child(4){animation-delay:.32s}
.hero__copy>*:nth-child(5){animation-delay:.42s}
.hero__media{animation:rise 1s var(--ease) .3s both}
/* protokol.js drives a slight upward drift of the device on scroll; the
   transform lives on the inner figure so it cannot fight the entrance. */
.hero__media .shot{will-change:transform}

/* product-flow chain: nodes cascade left to right once the row is in view */
.pchain .pchain__n,.pchain .pchain__a{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pchain.is-in .pchain__n,.pchain.is-in .pchain__a{opacity:1;transform:none}
.pchain.is-in>*:nth-child(2){transition-delay:.08s}
.pchain.is-in>*:nth-child(3){transition-delay:.16s}
.pchain.is-in>*:nth-child(4){transition-delay:.24s}
.pchain.is-in>*:nth-child(5){transition-delay:.32s}
.pchain.is-in>*:nth-child(6){transition-delay:.40s}
.pchain.is-in>*:nth-child(7){transition-delay:.48s}

/* build-my-day: a changed slot slides its new label in */
@keyframes slotIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.bmd__row span.is-new{animation:slotIn .4s var(--ease)}

/* ============================ reveal ===================================== */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}