/* ============================================================================
   Liza Zimin — site.css · v2 (2026-09-09)
   Design system: design-system/liza-zimin/MASTER.md
   Hand-written. No framework. Editorial / flat colour-blocking / Graphite-Lime-Ivory.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  --graphite:#17191B;
  --graphite-90:#2A2D30;
  --lime:#CDF568;
  --lime-ink:#3A4A12;
  --ivory:#F5F3EC;
  --ivory-dim:#ECE9DE;
  --white:#FFFFFF;
  --ink-70:#4A4D50;
  --ink-45:#63666A;
  --danger:#B4231C;

  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --t-display:clamp(2.6rem,6vw,5rem);
  --t-h1:clamp(2rem,4vw,3.25rem);
  --t-h2:clamp(1.5rem,2.6vw,2.25rem);
  --t-h3:1.25rem;
  --t-lead:clamp(1.05rem,1.4vw,1.3rem);
  --t-body:1.0625rem;
  --t-sm:0.9375rem;
  --t-eyebrow:0.8125rem;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --section:clamp(3.25rem,7vw,5.5rem);   /* uniform vertical rhythm between every section */
  --opener-gap:clamp(1.75rem,3.5vw,2.75rem);

  --r-sm:6px; --r-md:14px; --r-lg:28px;

  --wrap:1200px;
  --gutter:clamp(1.25rem,4vw,4rem);
  --measure:62ch;

  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:180ms;
  --shadow-float:0 12px 40px -12px rgba(23,25,27,.28);
}

/* ---- 2. Reset / base -------------------------------------------------- */
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
[id]{scroll-margin-top:88px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  background:var(--ivory);
  color:var(--graphite);
  font-size:var(--t-body);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:3px solid var(--graphite);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}

h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--graphite);color:var(--white);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* ---- 3. Layout ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.section{padding-block:var(--section)}
.section--tint{background:var(--white)}
.section--dark{background:var(--graphite);color:var(--white)}
.section--lime{background:var(--lime);color:var(--lime-ink)}
.measure{max-width:var(--measure)}
.center{text-align:center;margin-inline:auto}

/* section opener: eyebrow + rule + heading */
.eyebrow{
  display:block;font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:12px;
}
.section--dark .eyebrow,.section--lime .eyebrow{color:inherit;opacity:.7}
.rule{width:40px;height:2px;background:currentColor;border:0;margin-bottom:clamp(1rem,2vw,1.5rem);opacity:.9}
.opener{margin-bottom:var(--opener-gap)}
.opener .lead{margin-top:14px;color:var(--ink-70);max-width:52ch}
.section--dark .opener .lead{color:rgba(255,255,255,.75)}

.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2)}
.display{font-size:var(--t-display);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.lead{font-size:var(--t-lead);font-weight:400;line-height:1.55}
.accent-underline{
  background:linear-gradient(transparent 60%,var(--lime) 60%,var(--lime) 96%,transparent 96%);
  padding-inline:.08em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---- 4. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:999px;
  font-weight:600;font-size:1rem;line-height:1;border:1.5px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 150ms cubic-bezier(.215,.61,.355,1);
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--graphite);color:var(--white)}
.btn--primary:focus-visible{background:var(--lime);color:var(--lime-ink)}
.btn--secondary{background:transparent;color:var(--graphite);border-color:var(--graphite)}
.btn--secondary:focus-visible{background:var(--graphite);color:var(--white)}
.btn--on-dark{background:var(--lime);color:var(--lime-ink)}
.btn--on-dark:focus-visible{background:var(--white);color:var(--graphite)}
.btn--sm{min-height:44px;padding:0 20px;font-size:var(--t-sm)}
.btn--block{width:100%}
.section--dark .btn--secondary{color:var(--white);border-color:rgba(255,255,255,.5)}
/* hover only where a real pointer can hover — on touch a tapped button would stay "hovered" */
@media(hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--lime);color:var(--lime-ink)}
  .btn--secondary:hover{background:var(--graphite);color:var(--white)}
  .btn--on-dark:hover{background:var(--white);color:var(--graphite)}
  .section--dark .btn--secondary:hover{background:var(--white);color:var(--graphite)}
}

/* prose links */
.link{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:text-decoration-color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease);
}
@media(hover:hover) and (pointer:fine){.link:hover{text-decoration-thickness:2px;text-decoration-color:var(--lime)}}

/* ---- 5. Header ------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ivory) 92%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--ivory-dim);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px}
.brand{display:flex;align-items:center}
.brand svg{height:clamp(28px,3.4vw,36px);width:auto}
.nav{display:none;gap:32px;font-size:var(--t-sm);font-weight:500}
.nav a{color:var(--ink-70);padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--graphite);transition:right var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--graphite)}
  .nav a:hover::after{right:0}
}
.header-cta{display:none}
/* phones: logo only — no hamburger, no drawer (the sticky CTA carries the action) */
@media(max-width:899px){.site-header .wrap{min-height:60px}}
@media(min-width:900px){
  .nav{display:flex}
  .header-cta{display:inline-flex}
}
/* lock the page behind the open drawer */
body.nav-open{overflow:hidden}

/* ---- 6. Hero ------------------------------------------------------- */
.hero{padding-block:clamp(2rem,5vw,4rem) var(--section)}
.hero .wrap{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.12fr .88fr}}
.hero .display{margin-bottom:clamp(1.1rem,2.4vw,1.6rem)}
.hero .lead{color:var(--ink-70);max-width:40ch;margin-bottom:clamp(1.5rem,2.6vw,2rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(1.25rem,2.4vw,1.75rem)}
.ticks{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--t-sm);color:var(--ink-45)}
.ticks li{display:flex;align-items:center;gap:8px;list-style:none}
.ticks svg{width:16px;height:16px;color:var(--graphite);flex:none}
/* phones: one primary action in thumb reach, no photo (Liza is in the video poster right below),
   tighter padding so heading + lead + CTA + price line fit the first screen */
@media(max-width:899px){
  .hero{padding-top:var(--sp-5)}
  .hero .display{margin-bottom:var(--sp-4)}
  .hero .lead{margin-bottom:var(--sp-5)}
  .hero-actions{margin-bottom:var(--sp-4)}
  .hero-secondary,.hero .device{display:none}
}
@media(max-width:599px){.hero-actions .btn--primary{width:100%}}

/* the lime device */
.device{
  position:relative;border-radius:var(--r-lg);background:var(--lime);
  aspect-ratio:16/11;max-height:46vh;max-height:46svh;display:grid;place-items:center;overflow:hidden;
}
@media(max-width:600px){
  .device{aspect-ratio:4/5;max-height:64vh;max-height:64svh}
  .device__figure{object-fit:cover;object-position:top center}
}
@media(min-width:960px){.device{aspect-ratio:auto;max-height:none;min-height:min(62vh,520px);min-height:min(62svh,520px)}}
.device__mark{width:38%;max-width:220px}
.device::after{
  content:"";position:absolute;right:-16%;bottom:-28%;width:56%;aspect-ratio:1;
  border-radius:50%;background:rgba(23,25,27,.06);
}
.device picture{position:absolute;inset:0;display:block}
.device__figure{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 24px 48px rgba(23,25,27,.16))}

/* ---- 7. Cards / grids --------------------------------------------------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:360px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--white);border:1px solid var(--ivory-dim);border-radius:var(--r-md);
  padding:var(--sp-6);
}
.section--tint .card{background:var(--ivory)}
.card h3{font-size:var(--t-h3);font-weight:600;margin-bottom:8px}
.card p{color:var(--ink-70);font-size:var(--t-sm);line-height:1.55}
.card__ico{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1.5px solid var(--graphite);margin-bottom:20px;
}
.card__ico svg{width:22px;height:22px;stroke-width:1.75}
.card--fact{text-align:left}
.card--fact .k{font-weight:700;font-size:1.0625rem;margin-bottom:4px}
/* phones: compact cards — problem cards get the icon inline with the title, facts sit 2×2 */
@media(max-width:899px){
  .grid{gap:var(--sp-3)}
  .grid--3 .card{display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-3);align-items:center;padding:var(--sp-5) 20px}
  .grid--3 .card__ico{width:36px;height:36px;margin-bottom:0}
  .grid--3 .card__ico svg{width:20px;height:20px}
  .grid--3 .card h3{margin-bottom:0}
  .grid--3 .card p{grid-column:1/-1;margin-top:var(--sp-2)}
  .card--fact{padding:var(--sp-4)}
  .card--fact .k{font-size:1rem;line-height:1.3;margin-bottom:6px}
  .card--fact p{overflow-wrap:break-word}
}

/* steps */
.steps{counter-reset:step;display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:64px}
/* on phones the number sits to the LEFT of the text, not above it — much more compact */
@media(max-width:759px){.step{padding-top:0;padding-left:64px;min-height:48px}}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;width:48px;height:48px;border-radius:999px;
  background:var(--graphite);color:var(--white);font-weight:700;font-size:1.125rem;
  display:grid;place-items:center;
}
.step h3{font-size:1.0625rem;font-weight:600;margin-bottom:6px}
.step p{color:var(--ink-70);font-size:var(--t-sm)}

/* ---- 8. Pricing ---------------------------------------------------- */
.price-card{
  max-width:520px;margin-inline:auto;background:var(--graphite);color:var(--white);
  border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);
}
.price-card .chip{
  display:inline-block;font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(205,245,104,.5);border-radius:999px;padding:6px 14px;margin-bottom:24px;
}
.price-card .amount{font-size:clamp(2.75rem,6vw,3.75rem);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em;row-gap:.35rem}
.price-card .amount span{font-size:1.125rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:0;white-space:nowrap}
.price-card .pay-note{color:var(--lime);font-weight:700;font-size:.9375rem;letter-spacing:.01em;margin-top:8px}
.price-card .sub{color:rgba(255,255,255,.7);font-size:var(--t-sm);margin-top:10px;margin-bottom:28px}
.price-list{list-style:none;display:grid;gap:14px;margin-bottom:28px}
.price-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm)}
.price-list svg{width:20px;height:20px;color:var(--lime);flex:none;margin-top:1px;stroke-width:2}
.price-card .fineprint{font-size:var(--t-sm);color:rgba(255,255,255,.75);margin-top:16px;text-align:center}

/* ---- 9. About ---------------------------------------------------- */
.about .wrap{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.about .wrap{grid-template-columns:.85fr 1.15fr}}
.portrait{
  border-radius:var(--r-lg);background:var(--lime);aspect-ratio:16/11;max-height:38vh;max-height:38svh;
  display:grid;place-items:center;overflow:hidden;
}
@media(min-width:900px){.portrait{aspect-ratio:1;max-height:none}}
.portrait picture{display:contents}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.portrait .device__mark{width:40%}
.about h2{margin-bottom:16px}
.about .name{font-weight:700;font-size:1.125rem;margin:0 0 12px}
.about h2{margin-bottom:12px}
.about p{color:var(--ink-70);margin-bottom:16px;max-width:52ch}
.about .meta{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600}
.about .meta svg{width:18px;height:18px}

/* ---- 9b. Credibility / affiliations -------------------------------- */
.creds .umbrella{color:var(--ink-70);max-width:58ch;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.orgs{
  display:grid;gap:1px;background:var(--ivory-dim);
  border:1px solid var(--ivory-dim);border-radius:var(--r-md);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:560px){.orgs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.orgs{grid-template-columns:repeat(4,1fr)}}
.org{
  background:var(--ivory);padding:var(--sp-5) var(--sp-4);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  min-height:128px;justify-content:center;
  transition:background var(--dur) var(--ease);
}
@media(min-width:560px){.org{padding:var(--sp-6) var(--sp-5);min-height:150px}}
.section--tint .org{background:var(--white)}
.org:focus-visible{background:var(--white)}
.section--tint .org:focus-visible{background:var(--ivory)}
@media(hover:hover) and (pointer:fine){
  .org:hover{background:var(--white)}
  .section--tint .org:hover{background:var(--ivory)}
  .org:hover .org__logo{filter:none;opacity:1}
  .org:hover .org__name{color:var(--graphite)}
}
/* phones: one swipeable strip instead of a 6-row grid; ~40% items so the next logo peeks */
@media(max-width:899px){
  .creds .umbrella{margin-bottom:var(--sp-5)}
  .orgs{
    display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .orgs::-webkit-scrollbar{display:none}
  .orgs:focus-visible{border-radius:var(--r-md);outline-offset:3px}
  .org{flex:0 0 40%;scroll-snap-align:start;min-height:112px;padding:var(--sp-4) var(--sp-3);gap:10px;justify-content:flex-start}
  .org__logo{height:32px;max-height:32px;max-width:96px}
  .research{margin-top:var(--sp-5)}
}
.org__logo{
  height:auto;width:auto;max-height:34px;max-width:112px;object-fit:contain;flex:none;
  filter:grayscale(1);opacity:.62;
  transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
@media(min-width:560px){.org__logo{max-height:38px;max-width:124px}}
.org:focus-visible .org__logo{filter:none;opacity:1}
/* text fallback when no logo file */
.org__logo--text{
  height:44px;width:44px;border-radius:var(--r-sm);background:var(--ivory-dim);
  display:grid;place-items:center;font-weight:700;font-size:.9375rem;color:var(--ink-45);
  filter:none;opacity:1;
}
.org__name{font-weight:500;font-size:.8125rem;line-height:1.35;color:var(--ink-45)}
.org:focus-visible .org__name{color:var(--graphite)}

.research{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);border-left:2px solid var(--graphite);
  padding:2px 0 2px var(--sp-5);max-width:58ch;
}
.research p{color:var(--ink-70);font-size:var(--t-sm);line-height:1.6}

/* ---- 10. Socials (replaces testimonials) --------------------------- */
.socials-block{text-align:center;max-width:640px;margin-inline:auto}
.socials-block p{color:var(--ink-70);font-size:var(--t-lead);line-height:1.55;margin-bottom:32px}
.socials{display:flex;gap:14px;justify-content:center}
.socials a,.socials .soon{
  width:56px;height:56px;border-radius:999px;display:grid;place-items:center;
  border:1.5px solid var(--graphite);color:var(--graphite);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.socials a:focus-visible{background:var(--graphite);color:var(--lime)}
@media(hover:hover) and (pointer:fine){.socials a:hover{background:var(--graphite);color:var(--lime);transform:translateY(-2px)}}
.socials .soon{opacity:.34}
.socials svg{width:24px;height:24px}

/* ---- 10b. Video sections + click-to-play vertical video card --------------
   Markup: section.vsec > .wrap > .vsec__text + figure.vcard > a.vcard__media[data-video]
   The link is a plain link to the mp4 without JS; JS swaps it for a
   div.vcard__media holding a <video> — same box, so nothing shifts. */
.vsec .wrap{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.vsec .wrap{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(3rem,6vw,5.5rem)}}
.vsec__text .lead{margin-top:14px;color:var(--ink-70);max-width:48ch}
.vsec__note{margin-top:14px;font-size:var(--t-sm);line-height:1.5;color:var(--ink-70);max-width:48ch}
/* same background as the section above: hairline instead of a second colour band */
.vsec--joined{border-top:1px solid var(--ivory-dim)}
/* directly under the hero (same ivory): the hero already supplies the gap */
.vsec--after-hero{padding-top:0}

.vcard{width:min(68vw,264px);margin-inline:auto}
@media(min-width:900px){.vcard{width:320px;margin:0}}
.vcard__media{
  position:relative;display:block;width:100%;aspect-ratio:9/16;
  border-radius:var(--r-lg);overflow:hidden;background:var(--graphite);color:var(--white);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform 160ms cubic-bezier(.215,.61,.355,1);
}
a.vcard__media:active{transform:scale(.98)}
/* global :focus-visible sets radius 2px — keep the card's own radius */
.vcard__media:focus-visible{outline:3px solid var(--graphite);outline-offset:3px;border-radius:var(--r-lg)}
.vcard__media img,.vcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.vcard__media video{background:var(--graphite)}
.vcard__play{
  position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:999px;background:rgba(23,25,27,.78);color:var(--lime);
  display:grid;place-items:center;
  transition:transform 160ms cubic-bezier(.215,.61,.355,1);
}
.vcard__play svg{width:24px;height:24px} /* path is drawn 2 units right of centre: optical centring */
.vcard__dur{
  position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;
  background:rgba(23,25,27,.85);color:var(--white);
  font-size:.8125rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;
}
@media(hover:hover) and (pointer:fine){
  a.vcard__media:hover .vcard__play{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  a.vcard__media:active,a.vcard__media:hover .vcard__play{transform:none}
}

/* ---- 11. FAQ / accordion ---------------------------------------------- */
.faq{max-width:780px;margin-inline:auto}
.qa{border-bottom:1px solid var(--ivory-dim)}
.qa:first-child{border-top:1px solid var(--ivory-dim)}
.qa h3{margin:0;font:inherit;font-weight:inherit;letter-spacing:0}
.qa button{
  width:100%;background:transparent;border:0;padding:24px 44px 24px 0;position:relative;
  text-align:left;font-weight:600;font-size:1.0625rem;color:var(--graphite);line-height:1.4;
}
.qa button::after{
  content:"";position:absolute;right:6px;top:28px;width:12px;height:12px;
  border-right:2px solid var(--graphite);border-bottom:2px solid var(--graphite);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease);
}
.qa button[aria-expanded="true"]::after{transform:rotate(225deg)}
.qa__panel{overflow:hidden;transition:height 260ms var(--ease)}
.js .qa__panel{height:0}
.qa__panel-inner{padding:0 44px 24px 0;color:var(--ink-70);font-size:var(--t-sm);line-height:1.6}
.faq-contact{max-width:780px;margin:24px auto 0;text-align:center;font-size:var(--t-sm);color:var(--ink-70)}
/* the phone number (and its closing dot) never breaks across lines on phones */
.faq-contact__phone{white-space:nowrap}

/* ---- 12. Footer ---------------------------------------------------- */
.site-footer{background:var(--graphite);color:rgba(255,255,255,.72);padding-block:clamp(3rem,6vw,4.5rem)}
.site-footer .wrap{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:760px){.site-footer .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer svg{height:30px;width:auto;margin-bottom:16px}
.site-footer h3{color:var(--white);font-size:var(--t-sm);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.site-footer li a,.site-footer .linklike{display:inline-flex;align-items:center;min-height:44px;padding-block:4px}
.site-footer ul{list-style:none;display:grid;gap:6px;font-size:var(--t-sm)}
@media(hover:hover) and (pointer:fine){.site-footer a:hover,.site-footer .linklike:hover,.footer-contact a:hover{color:var(--white)}}
.site-footer .linklike{background:none;border:0;padding:0;font:inherit;font-size:var(--t-sm);color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footer-contact{margin-top:14px;font-size:var(--t-sm)}
.site-footer a[href^="tel:"],.footer-contact a{white-space:nowrap} /* keep phone numbers on one line */
.footer-contact a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.site-footer .fine{grid-column:1/-1;border-top:1px solid var(--graphite-90);padding-top:20px;font-size:var(--t-sm);color:rgba(255,255,255,.7);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
/* phones: compact footer — tighter rhythm, document links in two columns (each link still a 44px target) */
@media(max-width:759px){
  .site-footer{padding-block:var(--sp-6)}
  .site-footer .wrap{gap:var(--sp-5)}
  .site-footer svg{height:26px;margin-bottom:var(--sp-3)}
  .site-footer h3{margin-bottom:var(--sp-2)}
  .site-footer ul{gap:0}
  .footer-contact{margin-top:var(--sp-3)}
  .site-footer .fine{padding-top:var(--sp-4)}
}
@media(min-width:360px) and (max-width:759px){
  .site-footer ul{grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-4)}
  .site-footer li a,.site-footer .linklike{line-height:1.3;text-align:left}
}

/* ---- 13. Sticky mobile CTA -------------------------------------------- */
.sticky-cta{
  position:fixed;width:auto;z-index:48;
  left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow-float);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sticky-cta.show{opacity:1;visibility:visible;transform:none}
.sticky-cta.show:active{transform:scale(.98)}
@media(min-width:900px){.sticky-cta{display:none}}
/* room for the sticky CTA so it never sits on top of page content / the footer */
/* 52px button + 12px offset + 12px breathing room, plus the home-indicator inset */
@media(max-width:899px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ---- 14. Motion ---------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* phones: smaller, quicker rise — long scrolls shouldn't feel like waiting */
@media(max-width:899px){.js .reveal{transform:translateY(8px);transition-duration:.3s}.js .reveal.in{transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1;transform:none;transition:none}
  .btn:active,.sticky-cta.show:active{transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* combined video section (.vall) is a desktop-only layout: phones keep the three .vsec sections */
@media (max-width:899px){.vall{display:none}}

/* ---- 15. Desktop only (≥900px) ----------------------------------------
   Everything below applies at ≥900px only; phone/tablet rendering (<900px) is untouched. */
@media (min-width:900px){

  /* -- 15a. Combined video section --------------------------------------
     Markup: section.vall > .wrap > .opener + .vall__grid > 3 × figure.vcard.vall__item
             > a.vcard__media[data-video] + figcaption.vall__cap
     The click-to-play JS swaps the <a> for div.vcard__media (same box); the width
     lives on the figure, so the swap doesn't move the caption. */
  .vsec{display:none}
  .vall{border-top:1px solid var(--ivory-dim)} /* same ivory as the hero: hairline instead of a colour band */
  .vall__grid{
    display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:start;
    column-gap:clamp(2rem,4vw,4rem);
  }
  /* Card width. Goal: on a typical laptop the whole 9:16 video box plus its title and
     text sit on one screen under the sticky header.
       box height = width × 16/9, so width = (viewport height − reserved) × 9/16
       reserved 280px = 72 header + 16 caption gap + ~145 caption + ~47 air (≈24 above/below)
         caption measured in Chrome at ~260px card width: card 1 ≈ 99px, card 2 ≈ 145px
         (h3 on 2 lines + 4 lines of text, the tallest h3 + text); card 3 ≈ 224px because
         of the extra note (≈113px), which may run below the fold on short screens.
       e.g. 760px-tall viewport → 270px wide / 480px tall; ≥813px tall → capped at 300px.
     27vw caps it by width too: 2 gutters (4vw each) + 2 gaps (4vw each) leave 84vw
     for three cards = 28vw, minus a scrollbar allowance → no overflow at 900px wide.
     The vh line is the fallback for browsers without svh. */
  .vall .vall__item{
    width:clamp(220px,min(calc((100vh - 280px) * 9 / 16),27vw),300px);
    width:clamp(220px,min(calc((100svh - 280px) * 9 / 16),27vw),300px);
    margin:0;
  }
  .vall__cap{margin-top:var(--sp-4);text-align:left}
  .vall__cap h3{font-size:var(--t-h3);font-weight:600;margin-bottom:8px}
  .vall__cap p{color:var(--ink-70);font-size:var(--t-sm);line-height:1.55;text-wrap:pretty}
  .vall__cap strong{color:var(--graphite);font-weight:600}
  .vall__cap .vall__note{margin-top:var(--sp-3);line-height:1.5}

  /* hover cue: lift the card, grow the play button (real pointers only, motion allowed).
     The lift is on .vcard__media (link AND the div that replaces it on click), so a
     hovered card doesn't drop 4px at the moment it turns into the player. */
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .vall .vcard__media{transition:transform 200ms var(--ease)}
    .vall .vcard__play{transition:transform 200ms var(--ease)}
    .vall .vcard__media:hover{transform:translateY(-4px)}
    .vall a.vcard__media:hover:active{transform:translateY(-4px) scale(.98)}
    .vall a.vcard__media:hover .vcard__play{transform:scale(1.06)}
  }

  /* staggered reveal (60ms steps) */
  .vall__item:nth-child(2){transition-delay:60ms}
  .vall__item:nth-child(3){transition-delay:120ms}
  .grid > .reveal:nth-child(2),.steps > .reveal:nth-child(2){transition-delay:60ms}
  .grid > .reveal:nth-child(3),.steps > .reveal:nth-child(3){transition-delay:120ms}
  .grid > .reveal:nth-child(4),.steps > .reveal:nth-child(4){transition-delay:180ms}
  @media (prefers-reduced-motion:reduce){
    .js .vall__item.reveal,.js .grid > .reveal,.js .steps > .reveal{transition-delay:0s}
  }

  /* -- 15b. FAQ: answers ran ~90 characters per line. Onest's "0" (1ch) is wider than an
     average Cyrillic letter: measured 68ch ≈ 82 chars/line, 55ch ≈ 68 chars/line.
     (+44px = the panel's existing right padding) */
  .qa__panel-inner{max-width:calc(55ch + 44px)}

  /* -- 15c. About: «Лиза Зимин» is the section h2 — same size as every other h2
     (line-height and tracking already come from the base h1,h2,h3 rule) */
  .about .name{font-size:var(--t-h2)}

  /* -- 15d. Credentials and socials share the ivory background: hairline between them */
  .creds + .section{border-top:1px solid var(--ivory-dim)}
}

/* «О курсе» fact cards: 4 columns get cramped below 1100px — 2×2 until there's room */
@media (min-width:900px) and (max-width:1099px){.grid--4{grid-template-columns:repeat(2,1fr)}}

/* ---- 15e. Keyboard focus on graphite surfaces (price card, footer), all widths:
   the global 3px graphite ring (§1 :focus-visible) disappears on graphite — use a white ring
   (MASTER §4: "3px white ring on dark"). */
.price-card :focus-visible,.site-footer :focus-visible{outline-color:var(--white)}
@media (max-width:899px){.d-only{display:none!important}}