/* ============================================================
   КОД ОТНОШЕНИЙ — landing styles
   ============================================================ */

/* ---- Theme tokens ---------------------------------------- */
:root{
  /* paper / ink */
  --paper:        oklch(0.976 0.006 85);
  --paper-2:      oklch(0.955 0.010 235);
  --paper-card:   oklch(0.992 0.004 85);
  --ink:          oklch(0.31 0.026 252);
  --ink-soft:     oklch(0.49 0.022 252);
  --ink-faint:    oklch(0.62 0.018 252);

  /* blues (matched to the portrait) */
  --blue:         oklch(0.71 0.052 238);
  --blue-deep:    oklch(0.52 0.060 250);
  --blue-night:   oklch(0.36 0.045 252);
  --blue-pale:    oklch(0.905 0.024 232);
  --blue-mist:    oklch(0.945 0.014 232);

  /* sky — the colour the photo's sky dissolves into (tweakable) */
  --sky:          #6a8fb5;
  --sky-deep:     #527499;

  /* warm accent (overridden by [data-accent]) */
  --accent:       oklch(0.79 0.050 28);
  --accent-soft:  color-mix(in oklch, var(--accent) 22%, var(--paper));

  /* lines */
  --line:         oklch(0.86 0.012 250);
  --line-strong:  oklch(0.78 0.018 250);

  /* fonts (overridden by [data-type]) */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --disp-weight:  600;
  --disp-track:   -0.012em;
  --disp-trans:   none;
  --disp-italic-fallback: italic;

  --maxw: 1180px;
  --sheet: 1240px;          /* fixed "sheet" width — page stops growing past this */
  --side: oklch(0.928 0.006 240); /* light margin colour beside the sheet */
  --ease: cubic-bezier(.22,.7,.25,1);
}

/* Typography directions ------------------------------------- */
[data-type="a"]{
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --disp-weight:  600;  --disp-track: -0.012em; --disp-trans: none;
}
[data-type="b"]{
  --font-display: "Forum", "Times New Roman", serif;
  --font-body:    "Golos Text", system-ui, sans-serif;
  --disp-weight:  400;  --disp-track: 0.04em;  --disp-trans: none;
}
[data-type="c"]{
  --font-display: "Lora", Georgia, serif;
  --font-body:    "Nunito Sans", system-ui, sans-serif;
  --disp-weight:  500;  --disp-track: -0.004em; --disp-trans: none;
}

/* Warm accent options --------------------------------------- */
[data-accent="blush"]    { --accent: oklch(0.79 0.050 28); }
[data-accent="champagne"]{ --accent: oklch(0.82 0.044 82); }
[data-accent="blue"]     { --accent: oklch(0.62 0.060 245); }

/* ---- Reset ------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--side); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  /* the whole page is a fixed-width sheet, centred, with light space at the
     sides on wider screens — it no longer stretches to the viewport */
  max-width:var(--sheet);
  margin-inline:auto;
  position:relative;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.72;
  letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* the "inserted sheet" edge — only when the screen is wider than the sheet */
@media (min-width:1241px){
  body{ box-shadow:0 0 0 1px oklch(0.88 0.006 240 / .55), 0 40px 90px -55px oklch(0.5 0.03 250 / .4); }
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:var(--disp-weight); }
p{ margin:0; text-wrap:pretty; }

/* ---- Shared layout --------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(22px,5vw,64px); }
.section{ position:relative; padding-block:clamp(72px,11vw,148px); }
.narrow{ max-width:760px; margin-inline:auto; }

.display{
  font-family:var(--font-display);
  font-weight:var(--disp-weight);
  letter-spacing:var(--disp-track);
  text-transform:var(--disp-trans);
  line-height:1.04;
}
.serif{ font-family:var(--font-display); }

/* kicker / eyebrow */
.kicker{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-body);
  font-size:clamp(11px,0.85vw,12.5px);
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--blue-deep);
}
.kicker::before{
  content:""; width:clamp(22px,3vw,40px); height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-deep));
  opacity:.6;
}
.kicker.center{ }
.kicker.solo::before{ display:none; }
/* centred section kickers get a symmetric hairline on both sides */
.s-head.center .kicker::after{
  content:""; width:clamp(22px,3vw,40px); height:1px;
  background:linear-gradient(90deg,var(--blue-deep),transparent);
  opacity:.6;
}

/* section heading */
.s-head{ display:flex; flex-direction:column; gap:clamp(16px,2.2vw,26px); }
.s-head h2{
  font-family:var(--font-display);
  font-weight:var(--disp-weight);
  letter-spacing:var(--disp-track);
  text-transform:var(--disp-trans);
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.06;
}
.s-head.center{ align-items:center; text-align:center; }
/* two-line course heading — one typeface, each clause on its own line */
.s-head h2 .l1,
.s-head h2 .l2{ display:block; white-space:nowrap; }
.s-head.center h2{ font-size:clamp(25px,5vw,56px); line-height:1.16; }

/* hairline divider */
.rule{ height:1px; background:var(--line); border:0; width:100%; }

/* buttons --------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-body); font-weight:600;
  font-size:clamp(14px,1.05vw,15.5px); letter-spacing:0.01em;
  padding:1.05em 2em; border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  cursor:pointer; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;
  will-change:transform; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px color-mix(in oklch,var(--ink) 60%,transparent); }
.btn .ar{ transition:transform .4s var(--ease); }
.btn:hover .ar{ transform:translateX(3px); }
.btn.primary{ --bg:var(--blue-deep); --fg:oklch(0.985 0.004 235); border-color:var(--blue-deep); }
.btn.primary:hover{ box-shadow:0 16px 38px -14px var(--blue-deep); }
.btn.ghost{
  --bg:transparent; --fg:var(--ink);
  border:1px solid var(--line-strong);
}
.btn.ghost:hover{ border-color:var(--ink); background:transparent; }
.btn.on-dark{ --bg:oklch(0.97 0.01 235); --fg:var(--blue-night); border-color:transparent; }
.btn.ghost.on-dark{ --bg:transparent; --fg:oklch(0.96 0.01 235); border-color:color-mix(in oklch,white 35%,transparent); }
.btn.ghost.on-dark:hover{ border-color:oklch(0.96 0.01 235); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--sheet); z-index:100;
  display:flex; align-items:center;
  transition:background .5s var(--ease), backdrop-filter .5s, box-shadow .5s, padding .5s var(--ease);
  padding-block:clamp(16px,2vw,26px);
}
.site-head.scrolled{
  background:color-mix(in oklch, var(--paper) 80%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
  padding-block:clamp(10px,1.3vw,16px);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{
  font-family:var(--font-display);
  font-weight:var(--disp-weight);
  font-size:clamp(15px,1.4vw,18px);
  letter-spacing:0.22em; text-transform:uppercase;
  white-space:nowrap;
}
.brand small{ display:block; font-family:var(--font-body); font-weight:600; font-size:9.5px; letter-spacing:0.34em; color:var(--blue-deep); margin-top:2px; }
.nav{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); }
.nav a.lk{
  font-size:13px; letter-spacing:0.06em; color:var(--ink-soft);
  position:relative; padding-block:4px; white-space:nowrap;
}
.nav a.lk::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--ink); transition:width .4s var(--ease); }
.nav a.lk:hover{ color:var(--ink); }
.nav a.lk:hover::after{ width:100%; }
.nav .btn{ padding:.7em 1.4em; }
@media (max-width:840px){ .nav .lk{ display:none; } }

/* header sits on the blue sky until scrolled — light treatment */
.site-head:not(.scrolled) .brand{ color:#fff; }
.site-head:not(.scrolled) .brand small{ color:rgba(255,255,255,.78); }
.site-head:not(.scrolled) .nav a.lk{ color:rgba(255,255,255,.86); }
.site-head:not(.scrolled) .nav a.lk:hover{ color:#fff; }
.site-head:not(.scrolled) .nav a.lk::after{ background:#fff; }
.site-head:not(.scrolled) .nav .btn.primary{ --bg:#fff; --fg:var(--blue-night); border-color:#fff; }
.site-head:not(.scrolled) .nav .btn.primary:hover{ box-shadow:0 14px 34px -16px rgba(20,40,66,.6); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:0;
  overflow:hidden;
  background:var(--sky);
}
/* photo IS the hero, from the very top of the page */
.hero-photo{
  position:relative; z-index:0;
  width:100%;
}
.hero-photo img{
  display:block;
  width:100%; height:auto;
  /* no dissolve — the photo ends with a clean edge so the handshake / ring
     stay crisp (no white fog over her hands) */
}
.hero-photo-feather{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* only a soft scrim at the very top so header + title stay legible */
    linear-gradient(180deg, rgba(40,64,92,.28) 0%, transparent 26%);
}
/* text overlaid on the open sky in the upper part of the photo */
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; justify-content:center;
  pointer-events:none;
}
.hero-overlay .wrap{ width:100%; }
.hero-overlay a,
.hero-overlay button{ pointer-events:auto; }
.hero .wrap{ position:relative; z-index:2; }
.hero-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(18px,2.2vw,28px);
  padding-top:clamp(104px,12.5vw,168px);
}
/* light treatment for hero copy sitting on the blue sky */
.hero .kicker{ color:rgba(255,255,255,.94); }
.hero .kicker::before{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.94)); }

.hero h1{
  font-family:var(--font-display);
  font-weight:var(--disp-weight);
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:clamp(44px,9.5vw,128px);
  line-height:0.98;
  color:#fff;
  text-shadow:0 1px 30px rgba(40,64,92,.28);
}
.hero h1 .ln{ display:block; }
.hero h1 .amp{ color:var(--blue-deep); }
.hero-sub{
  max-width:none;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px,2.5vw,30px);
  line-height:1.4;
  color:rgba(255,255,255,.9);
  letter-spacing:0;
  text-shadow:0 1px 18px rgba(40,64,92,.22);
}
.hero-sub b{ color:#fff; font-style:normal; font-weight:600; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }

/* ---- HERO on phones: the photo shows full-width at its natural ratio
   (no side-cropping); the title sits on the open sky up top and her
   head dissolves into the page below ---- */
@media (max-width:860px){
  .hero-photo{ height:auto; }
  .hero-photo img{
    width:100%; height:auto; display:block; object-fit:fill;
    /* no bottom dissolve on mobile — keep the handshake / ring crisp */
    -webkit-mask-image:none;
    mask-image:none;
  }
  .hero-photo-feather{
    /* only the top scrim for title legibility; no white fog at the bottom */
    background:
      linear-gradient(180deg, rgba(34,55,82,.40) 0%, rgba(34,55,82,.18) 30%, rgba(34,55,82,.04) 46%, transparent 58%);
  }
  /* content flows from the top over the open sky; buttons stay above her head */
  .hero-overlay .wrap{ height:auto; }
  .hero-inner{
    height:auto;
    padding-top:clamp(90px,20vw,128px);
    gap:clamp(13px,3.2vw,18px);
  }
  .hero h1{ font-size:clamp(36px,12vw,58px); }
  .hero-sub{ font-size:clamp(14.5px,4vw,17px); line-height:1.34; }
  .hero-cta{
    width:100%; flex-direction:column; gap:10px;
    margin-top:clamp(6px,2vw,12px);
  }
  .hero-cta .btn{ width:100%; max-width:340px; padding-block:.95em; }
}

/* ============================================================
   ABOUT THE COURSE
   ============================================================ */
.about{ background:var(--paper); margin-top:0; position:relative; z-index:3; }
.about{ padding-top:clamp(40px,5vw,72px); }
.lead{
  font-family:var(--font-display);
  font-weight:var(--disp-weight);
  font-size:clamp(24px,3.4vw,40px);
  line-height:1.26;
  letter-spacing:var(--disp-track);
  text-wrap:balance;
}
.lead .hl{ color:var(--blue-deep); }
.body-copy{ font-size:clamp(16.5px,1.25vw,19px); color:var(--ink-soft); }
.body-copy + .body-copy{ margin-top:1.3em; }
.body-copy b{ color:var(--ink); font-weight:600; }

.pullquote{
  position:relative;
  margin-block:clamp(40px,6vw,72px);
  padding-left:clamp(22px,3vw,40px);
  border-left:2px solid var(--blue);
}
.pullquote p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px,3vw,34px);
  line-height:1.34;
  color:var(--ink);
  text-wrap:balance;
}
.pullquote p b{ font-style:normal; font-weight:600; color:var(--blue-deep); }

/* "Здесь не учат" list */
.notlist{
  margin-top:clamp(34px,5vw,56px);
  display:grid; gap:0;
  border-top:1px solid var(--line);
}
.notlist .row{
  display:flex; align-items:center; gap:18px;
  padding-block:clamp(15px,2vw,20px);
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
  font-size:clamp(16px,1.4vw,20px);
}
.notlist .row .x{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:grid; place-items:center; color:var(--ink-faint);
  font-size:13px; line-height:1;
}
.notlist .cap{
  margin-bottom:clamp(20px,3vw,30px);
  font-size:13px; letter-spacing:0.04em; color:var(--ink-faint);
}
.closer{
  margin-top:clamp(46px,7vw,82px);
  text-align:center;
}
.closer .display{
  font-size:clamp(26px,4vw,50px);
  line-height:1.16;
  text-wrap:balance;
}
.closer .display .hl{ color:var(--blue-deep); font-style:italic; font-weight:400; }
.closer .sub{ margin-top:1.2em; color:var(--ink-soft); font-size:clamp(16px,1.2vw,18.5px); max-width:600px; margin-inline:auto; }

/* ============================================================
   AUTHOR
   ============================================================ */
.author{ background:var(--paper-2); }
.author-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center;
}
@media (max-width:860px){ .author-grid{ grid-template-columns:1fr; gap:30px; } }
@media (max-width:860px){
  .author-photo{ max-width:250px; margin-inline:auto; }
}
.author-photo{ position:relative; }
.author-photo .frame{
  position:relative; aspect-ratio:0.82; border-radius:18px; overflow:hidden;
  box-shadow:0 40px 80px -44px var(--blue-night);
}
.author-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.author-photo .frame::after{ content:""; position:absolute; inset:0; box-shadow:0 0 0 1px color-mix(in oklch,var(--blue-deep) 18%,transparent) inset; border-radius:inherit; }
.author-photo .sig{
  position:absolute; left:50%; bottom:-26px; transform:translateX(-50%);
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px;
  padding:12px 26px; box-shadow:0 18px 42px -24px var(--blue-night);
  text-align:center; white-space:nowrap;
}
.author-photo .sig .nm{ font-family:var(--font-display); font-size:16px; font-weight:600; white-space:nowrap; }
.author-photo .sig .role{ font-size:11.5px; letter-spacing:0.06em; color:var(--blue-deep); text-transform:uppercase; margin-top:3px; }

.author-copy .body-copy{ margin-top:1.2em; }
.author-stats{
  display:flex; flex-wrap:nowrap; justify-content:space-between; gap:clamp(16px,2.4vw,36px);
  margin-top:clamp(28px,4vw,40px); padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);
}
.author-stats .st{ flex:0 0 auto; min-width:0; }
.author-stats .st b{ display:block; font-family:var(--font-display); font-size:clamp(26px,3vw,38px); font-weight:600; line-height:1; color:var(--blue-deep); }
.author-stats .st span{ font-size:12.5px; letter-spacing:0.04em; color:var(--ink-faint); margin-top:7px; display:block; max-width:150px; }
@media (max-width:560px){
  .author-stats{ gap:12px; flex-wrap:nowrap; }
  .author-stats .st{ flex:1 1 0; min-width:0; }
  .author-stats .st b{ font-size:clamp(17px,5vw,21px); }
  .author-stats .st span{ font-size:10.5px; margin-top:5px; max-width:none; }
}

/* ============================================================
   PROGRAM
   ============================================================ */
.program{ background:var(--paper); }

/* program accordion */
.prog-acc{
  margin-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--line);
  max-width:920px; margin-inline:auto;
}
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{
  appearance:none; width:100%; cursor:pointer;
  display:flex; align-items:center; gap:clamp(16px,2.4vw,30px);
  padding-block:clamp(20px,2.4vw,28px);
  background:none; border:0; text-align:left; color:inherit; font:inherit;
}
.acc-head .no{
  font-family:var(--font-display); font-weight:var(--disp-weight);
  font-size:clamp(20px,2vw,28px); color:var(--blue);
  min-width:1.7em; letter-spacing:0; flex:none;
  font-variant-numeric:lining-nums;
  transition:color .35s var(--ease);
}
.acc-head .tt{
  flex:1; font-size:clamp(17px,1.5vw,21px); line-height:1.3; color:var(--ink);
  transition:color .35s var(--ease);
}
.acc-head .acc-ar{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--ink-soft);
  transition:transform .45s var(--ease), background .35s, color .35s, border-color .35s;
}
.acc-head .acc-ar svg{ width:18px; height:18px; }
.acc-head:hover .acc-ar{ border-color:var(--ink); color:var(--ink); }
.acc-head:hover .tt{ color:var(--blue-deep); }
.acc-item.open .acc-head .acc-ar{
  transform:rotate(180deg);
  background:var(--blue-deep); color:oklch(0.97 0.01 235); border-color:var(--blue-deep);
}
.acc-item.open .acc-head .no{ color:var(--blue-deep); }

.acc-panel{
  overflow:hidden; max-height:0;
  transition:max-height .55s var(--ease);
}
.acc-item.open .acc-panel{ max-height:340px; }
.acc-inner{ }
.acc-inner p{
  margin:0;
  padding:0 0 clamp(22px,2.6vw,30px) calc(1.7em + clamp(16px,2.4vw,30px));
  max-width:64ch; color:var(--ink-soft);
  font-size:clamp(15.5px,1.15vw,18px); line-height:1.62;
}
.acc-item.bonus .no{ color:var(--accent); }
.acc-item.bonus .tt{ color:var(--ink-soft); }
@media (max-width:560px){
  .acc-inner p{ padding-left:0; }
}

/* AI curator card */
.ai-card{
  margin-top:clamp(40px,5vw,64px);
  position:relative; overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(120% 140% at 88% -20%, color-mix(in oklch,var(--blue) 30%,transparent), transparent 60%),
    var(--blue-night);
  color:oklch(0.96 0.01 235);
  padding:clamp(26px,4.5vw,56px);
  display:flex; align-items:center; gap:clamp(20px,3vw,40px);
}
.ai-card .badge{
  width:clamp(58px,8vw,92px); height:clamp(58px,8vw,92px); border-radius:20px;
  display:grid; place-items:center; flex:none;
  background:color-mix(in oklch,white 14%,transparent);
  border:1px solid color-mix(in oklch,white 22%,transparent);
}
.ai-card .badge svg{ width:46%; height:46%; }
.ai-card .ai-body{ flex:1; min-width:0; }
.ai-card .ttl{
  font-family:var(--font-display); font-weight:var(--disp-weight);
  font-size:clamp(19px,2.4vw,30px); line-height:1.16;
}
.ai-card .ttl .pill{
  display:inline-block; vertical-align:middle; margin-left:.4em;
  font-family:var(--font-body); font-size:clamp(11px,1.1vw,12px); font-weight:600; letter-spacing:0.04em;
  padding:.35em 1em; border-radius:999px; white-space:nowrap;
  background:color-mix(in oklch,white 16%,transparent);
  border:1px solid color-mix(in oklch,white 22%,transparent);
}
.ai-card .desc{ margin-top:.7em; color:oklch(0.9 0.012 235); font-size:clamp(14.5px,1.2vw,17px); line-height:1.62; max-width:64ch; }
@media (max-width:560px){
  .ai-card{ gap:16px; align-items:flex-start; }
  .ai-card .ttl{ font-size:clamp(17px,5vw,21px); }
}

/* ============================================================
   PRICE / CTA
   ============================================================ */
.price{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 12% 0%, var(--blue-deep) 0%, transparent 55%),
    var(--blue-night);
  color:oklch(0.96 0.012 235);
}
.price .wrap{ position:relative; z-index:1; }
.price-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px,5vw,80px); align-items:center; }
@media (max-width:860px){ .price-grid{ grid-template-columns:1fr; gap:40px; } }
.price .kicker{ color:oklch(0.86 0.04 232); }
.price .kicker::before{ background:linear-gradient(90deg,transparent,oklch(0.86 0.04 232)); }
.price h2{
  font-family:var(--font-display); font-weight:var(--disp-weight);
  font-size:clamp(30px,4.2vw,52px); line-height:1.08; margin-top:18px;
  letter-spacing:var(--disp-track); text-wrap:balance;
}
.price h2 em{ font-style:italic; color:oklch(0.84 0.05 232); }
.includes{ margin-top:clamp(28px,3.5vw,40px); display:grid; gap:14px; }
.includes .it{ display:flex; gap:14px; align-items:flex-start; color:oklch(0.9 0.012 235); font-size:clamp(15px,1.15vw,17px); }
.includes .it .ck{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:2px;
  background:color-mix(in oklch,white 14%,transparent); border:1px solid color-mix(in oklch,white 20%,transparent); }
.includes .it .ck svg{ width:12px; height:12px; }

.price-card{
  background:color-mix(in oklch,white 8%,transparent);
  border:1px solid color-mix(in oklch,white 16%,transparent);
  border-radius:24px; padding:clamp(28px,3.6vw,44px);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  text-align:center;
}
.price-card .lbl{ font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:oklch(0.82 0.03 232); }
.price-card .amount{
  font-family:var(--font-display); font-weight:var(--disp-weight);
  font-size:clamp(48px,7vw,82px); line-height:1; margin-top:14px; letter-spacing:-0.01em;
}
.price-card .amount .cur{ font-size:0.42em; color:oklch(0.84 0.04 232); margin-left:.15em; letter-spacing:0; }
.price-card .note{ margin-top:12px; color:oklch(0.82 0.02 235); font-size:13.5px; }
.price-card .btns{ display:flex; flex-direction:column; gap:12px; margin-top:clamp(24px,3vw,32px); }
.price-card .fine{ margin-top:18px; font-size:11.5px; color:oklch(0.74 0.02 235); letter-spacing:0.02em; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{ background:var(--paper-2); }
.rev-head{ display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vw,30px); text-align:center; }
.rev-arrows{ display:flex; gap:10px; }
.rev-arrows button{
  width:50px; height:50px; border-radius:50%; cursor:pointer;
  background:var(--paper-card); border:1px solid var(--line-strong); color:var(--ink);
  display:grid; place-items:center; transition:background .3s, color .3s, transform .3s var(--ease), border-color .3s;
}
.rev-arrows button:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.rev-arrows button:disabled{ opacity:.32; cursor:not-allowed; transform:none; background:transparent; color:var(--ink); border-color:var(--line); }
.rev-arrows button svg{ width:18px; height:18px; }

.rev-rail{
  margin-top:clamp(44px,5vw,64px);
  display:flex; gap:clamp(16px,2vw,26px); align-items:flex-start;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rev-rail::-webkit-scrollbar{ display:none; }
.rev-card{
  scroll-snap-align:start; flex:none;
  width:clamp(238px,26vw,300px);
  border-radius:18px; overflow:hidden;
  background:var(--paper-card);
  border:1px solid var(--line);
  box-shadow:0 30px 60px -40px var(--blue-night);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rev-card:hover{ transform:translateY(-4px); box-shadow:0 40px 70px -38px var(--blue-night); }
.rev-card img{ width:100%; height:auto; }
/* mobile: exactly one review fills the view (no lopsided sliver of the next),
   arrows advance one at a time */
@media (max-width:680px){
  .rev-rail{
    gap:clamp(20px,6vw,30px);
    padding-inline:0;
    scroll-padding-inline:0;
    overflow-y:hidden;
    transition:height .4s var(--ease);
  }
  .rev-card{ flex:0 0 100%; width:100%; scroll-snap-align:center; }
}
.rev-note{ display:flex; align-items:center; gap:10px; margin-top:clamp(26px,3vw,34px); color:var(--ink-faint); font-size:13.5px; }
.rev-note .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ background:var(--paper); text-align:center; }
.final .display{ font-size:clamp(30px,5vw,62px); line-height:1.08; text-wrap:balance; }
.final .display .hl{ color:var(--blue-deep); font-style:italic; font-weight:400; }
.final p.body-copy{ margin-top:clamp(20px,2.5vw,28px); max-width:560px; margin-inline:auto; }
.final .hero-cta{ margin-top:clamp(30px,4vw,40px); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--blue-night); color:oklch(0.86 0.012 235); padding-block:clamp(50px,7vw,72px); }
.foot-top{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.foot .brand{ color:oklch(0.97 0.01 235); }
.foot .brand small{ color:oklch(0.78 0.04 232); }
.foot-soc{ display:flex; gap:12px; flex-wrap:nowrap; }
.foot-soc a{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:13px; letter-spacing:0.02em; color:oklch(0.86 0.012 235);
  padding:.7em 1.2em; border-radius:999px;
  border:1px solid color-mix(in oklch,white 16%,transparent);
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.foot-soc a:hover{ background:color-mix(in oklch,white 10%,transparent); border-color:color-mix(in oklch,white 32%,transparent); transform:translateY(-2px); }
.foot-soc a svg{ width:15px; height:15px; }
.foot-rule{ height:1px; background:color-mix(in oklch,white 14%,transparent); margin-block:clamp(30px,4vw,44px); border:0; }
.foot-bot{ display:flex; justify-content:space-between; gap:18px 32px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:oklch(0.72 0.015 235); }
.foot-bot .lks{ display:flex; gap:24px; flex-wrap:wrap; }
.foot-bot a:hover{ color:oklch(0.95 0.01 235); }

/* ============================================================
   REVEAL ANIMATIONS — content is visible by default; entrance is
   layered on via the Web Animations API (fill:none) so it can never
   leave content stuck-hidden in frozen/print/capture contexts.
   ============================================================ */
.reveal{ will-change:opacity, transform; }

/* tweaks float spacing safety */
@media print{ .site-head,.scroll-hint{ display:none; } }

/* ---- compact spacing on phones: tighter sections, less empty space ---- */
@media (max-width:860px){
  /* photo ends with a clean edge — white section must not ride up over it */
  .about{ margin-top:0; padding-top:clamp(34px,8vw,52px); }
}
@media (max-width:680px){
  .section{ padding-block:clamp(46px,11vw,68px); }
  .final{ padding-block:clamp(44px,10vw,60px); }
  .final p.body-copy{ margin-top:16px; }
  .final .hero-cta{ margin-top:24px; }
  .foot{ padding-block:clamp(38px,9vw,52px); }
  .foot-rule{ margin-block:clamp(22px,6vw,32px); }
  .foot-top{ gap:24px; }
  .closer{ margin-top:clamp(36px,8vw,52px); }
  /* social row stays on one line, shrinks to fit instead of wrapping */
  .foot-soc{ gap:6px; }
  .foot-soc a{ padding:.55em .82em; font-size:11.5px; gap:6px; letter-spacing:0; }
  .foot-soc a svg{ width:13px; height:13px; }
  /* compact legal block — tight stack, no spread-out empty lines */
  .foot-bot{ flex-direction:column; align-items:flex-start; gap:3px; line-height:1.32; }
  .foot-bot .lks{ flex-direction:column; gap:3px; }
}