/* ============================================================================
   Liza Zimin — desktop skin «Графит» (direction Б «Dramatic graphite, cinematic») · 2026-09-17
   Big-screen sibling of mobile-graphite.css. Loaded AFTER site.css + mobile-graphite.css with
   media="(min-width: 900px)"; every rule also lives inside @media (min-width:900px).
   Phones/tablets (<900px) are untouched.

   Idea: graphite stage, lime used as LIGHT (CTA fills, one accented word, hairlines, soft glow),
   relieved by ivory/white reading sections. The final lime band stays the one big lime moment.

   Surfaces (top → bottom):
     header G (sticky, translucent) · hero G (cut-out, halo, ring, credit) ·
     videos «screening room» G · problem IVORY (white cards) · course facts G ·
     steps IVORY · price G (graphite slate, lime ₪320) · about Liza IVORY (lime portrait panel) ·
     credentials WHITE · socials G (compact band) · FAQ IVORY · final CTA LIME · footer G

   Contrast (WCAG AA / IS 5568): text on graphite ≥ rgba(255,255,255,.72) (≥ 9:1);
   lime only on graphite (≈ 14:1) or as a fill under graphite text; never lime text on ivory/white.
   Focus: 3px white ring on graphite surfaces, 3px graphite ring on light ones (site.css default).
   Motion: transform/opacity only, ease cubic-bezier(.23,1,.32,1); load choreography gated by
   html.dg-motion (set in <head> only ≥900px, not with reduced motion or ?static).
   ========================================================================== */
@media (min-width: 900px) {

  /* ---- 0. Tokens ---------------------------------------------------------- */
  :root{
    --wrap:1320px;
    --section:clamp(6rem,10vw,9.5rem);
    --opener-gap:clamp(3rem,5vw,4.5rem);
    --dg-ease:cubic-bezier(.23,1,.32,1);
    --dg-on-dark:rgba(255,255,255,.78);     /* ≈ 11:1 on graphite */
    --dg-on-dark-2:rgba(255,255,255,.72);   /* ≈ 9.4:1 on graphite */
    --dg-hair:rgba(255,255,255,.09);
    --dg-hair-light:rgba(23,25,27,.12);
    --dg-lime-line:rgba(205,245,104,.4);
    --dg-slate:#1E2124;
  }
  .site-header .wrap,.section .wrap,.hero .wrap,.site-footer .wrap{max-width:var(--wrap)}

  /* ---- 1. Shared type ------------------------------------------------------ */
  .h2{font-size:clamp(2.5rem,4.1vw,3.75rem);font-weight:800;line-height:1.03;letter-spacing:-.035em}
  .rule{display:none}
  .eyebrow{
    display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;
    font-size:.8125rem;font-weight:600;letter-spacing:.16em;line-height:1.4;color:var(--ink-70);
  }
  .eyebrow::before{content:"";width:32px;height:2px;background:var(--graphite);flex:none}
  .opener .lead{margin-top:20px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.6}

  /* dark surfaces */
  .site-header,.hero,.vall,#about-course,#price,.creds + .section{background:var(--graphite);color:var(--white)}
  :is(.hero,.vall,#about-course,#price,.creds + .section) .eyebrow{color:var(--lime)}
  :is(.hero,.vall,#about-course,#price,.creds + .section) .eyebrow::before{background:var(--lime);height:1px}
  :is(.vall,#about-course,#price,.creds + .section) .opener .lead{color:var(--dg-on-dark)}
  :is(.vall,#about-course,#price,.creds + .section) strong{color:var(--white);font-weight:600}
  :is(.site-header,.hero,.vall,#about-course,#price,.creds + .section,.site-footer) :focus-visible{outline-color:var(--white)}

  /* split opener: eyebrow + heading on the left, lead on the right (bottom-aligned) */
  :is(.vall,.vsec--after-hero + .section--tint,#about-course,#price) .opener{
    max-width:none;margin-inline:0;text-align:left;
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto;
    column-gap:clamp(3rem,7vw,7rem);align-items:end;
  }
  :is(.vall,.vsec--after-hero + .section--tint,#about-course,#price) .opener .eyebrow{grid-column:1;grid-row:1;justify-self:start;align-self:end}
  :is(.vall,.vsec--after-hero + .section--tint,#about-course,#price) .opener .h2{grid-column:1;grid-row:2}
  :is(.vall,.vsec--after-hero + .section--tint,#about-course,#price) .opener .lead{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;max-width:36rem}
  /* left-aligned opener (no lead) */
  :is(#how,#faq,.creds,.creds + .section) .opener{text-align:left;margin-inline:0;max-width:none}

  /* ---- 2. Buttons on graphite --------------------------------------------- */
  :is(.site-header,.hero) .btn--primary{background:var(--lime);color:var(--graphite);font-weight:700}
  :is(.site-header,.hero) .btn--primary:focus-visible{background:var(--white);color:var(--graphite)}
  .hero .btn{min-height:58px;padding:0 32px;font-size:1.0625rem}
  .hero .btn--secondary{color:var(--white);border-color:rgba(255,255,255,.34)}
  .hero .btn--secondary:focus-visible{background:var(--white);color:var(--graphite)}
  @media (hover:hover) and (pointer:fine){
    :is(.site-header,.hero) .btn--primary:hover{background:var(--white);color:var(--graphite)}
    .hero .btn--secondary:hover{background:var(--white);color:var(--graphite);border-color:var(--white)}
  }

  /* ---- 3. Header ------------------------------------------------------------ */
  .site-header{
    background:var(--graphite);
    border-bottom:1px solid var(--dg-hair);
  }
  .site-header .wrap{min-height:76px;justify-content:flex-start;gap:40px}
  .brand svg{height:38px}
  .site-header .brand svg g{fill:var(--white)}
  .site-header .brand svg g:first-child{fill:var(--lime)}
  .nav{margin-left:auto;gap:36px}
  .nav a{color:var(--dg-on-dark);padding:10px 0;transition:color 200ms var(--dg-ease)}
  .nav a::after{right:0;bottom:4px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left center;transition:transform 260ms var(--dg-ease)}
  @media (hover:hover) and (pointer:fine){
    .nav a:hover{color:var(--white)}
    .nav a:hover::after{right:0;transform:scaleX(1)}
  }

  /* ---- 4. Hero ---------------------------------------------------------------- */
  .hero{
    position:relative;isolation:isolate;overflow:hidden;padding:0;
    background:
      radial-gradient(34% 56% at 78% 38%,rgba(205,245,104,.10),transparent 70%),
      radial-gradient(120% 80% at 50% 125%,rgba(42,45,48,.95),transparent 60%),
      var(--graphite);
  }
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4;
    background:linear-gradient(90deg,transparent,rgba(205,245,104,.4) 30%,rgba(205,245,104,.4) 70%,transparent);
  }
  .hero .wrap{
    grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0;align-items:stretch;
    min-height:clamp(620px,calc(100svh - 76px),960px);
  }
  .hero .wrap > div:first-child{
    grid-column:1 / span 7;grid-row:1;align-self:center;position:relative;z-index:3;
    padding-block:clamp(56px,8vh,96px) clamp(64px,10vh,112px);
  }
  .hero .eyebrow{margin-bottom:clamp(20px,3.4vh,32px)}
  .hero .display{
    font-size:clamp(4rem,min(7.6vw,12.4vh),7rem);line-height:.92;letter-spacing:-.045em;
    color:var(--white);margin-bottom:clamp(24px,4vh,40px);
  }
  /* .dg-split is set by the desktop script once the headline has been split into its
     visual lines (span.ln > span); the forced <br> is then redundant */
  .hero .display.dg-split br{display:none}
  .hero .display .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
  .hero .display .ln > span{display:block}
  /* «паники»: lime word with a drawn lime stroke (lime on graphite ≈ 14:1) */
  .hero .accent-underline{background:none;color:var(--lime);position:relative;display:inline-block;padding-inline:0}
  .hero .accent-underline::after{
    content:"";position:absolute;left:.02em;right:.02em;bottom:.03em;height:.055em;border-radius:1px;
    background:var(--lime);transform-origin:left center;
  }
  .hero .lead{max-width:34rem;color:var(--dg-on-dark);font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;margin-bottom:clamp(28px,4.4vh,44px)}
  .hero-actions{gap:14px;margin-bottom:clamp(22px,3.4vh,30px)}
  .ticks{gap:10px 28px;font-size:1rem;color:var(--dg-on-dark-2)}
  .ticks li{gap:10px}
  .ticks svg{width:18px;height:18px;color:var(--lime);stroke-width:2}

  /* Liza — lit from behind: soft lime halo + a fine ring, silhouette rim via drop-shadow */
  .hero .device{
    grid-column:7 / -1;grid-row:1;align-self:end;justify-self:end;
    position:relative;overflow:visible;border-radius:0;background:none;display:block;
    aspect-ratio:1318/1800;height:min(calc(100% - 28px),900px);min-height:0;max-height:none;width:auto;max-width:100%;
    pointer-events:none;z-index:1;
  }
  .hero .device::after{display:none}
  .device__halo{
    position:absolute;left:4%;right:-10%;top:-4%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 50% 44%,rgba(205,245,104,.15),rgba(205,245,104,.05) 42%,transparent 68%);
  }
  .device__ring{position:absolute;left:10%;right:-4%;top:2%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(205,245,104,.14)}
  .hero .device picture{position:absolute;inset:0;z-index:1}
  .hero .device__figure{
    object-fit:contain;object-position:center bottom;
    filter:drop-shadow(0 0 .5px rgba(205,245,104,.26)) drop-shadow(-6px -4px 22px rgba(205,245,104,.10));
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 99%);mask-image:linear-gradient(180deg,#000 74%,transparent 99%);
  }
  /* lower-third credit, like a film title card */
  .device__credit{
    position:absolute;z-index:2;right:0;bottom:clamp(40px,7vh,72px);
    display:grid;gap:4px;padding-left:18px;border-left:1px solid var(--dg-lime-line);text-align:left;
  }
  .device__credit b{font-weight:600;font-size:1rem;color:var(--white)}
  .device__credit span{font-size:.9375rem;line-height:1.45;color:var(--dg-on-dark-2)}

  /* ---- 5. Videos — the screening room ---------------------------------------- */
  .vall{
    position:relative;isolation:isolate;border-top:0;
    background:radial-gradient(50% 40% at 50% 0%,rgba(205,245,104,.07),transparent 72%),var(--graphite);
  }
  .vall{padding-top:clamp(5.5rem,8vw,7.5rem)}
  .vall .opener{margin-bottom:clamp(3.5rem,6vw,5rem)}
  .vall__grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;column-gap:clamp(24px,2.8vw,44px)}
  .vall .vall__item{width:auto;position:relative;isolation:isolate}
  .vall .vall__item:nth-child(2){margin-top:clamp(40px,6vh,72px)}
  /* the glow behind each poster — the "projection" */
  .vall .vall__item::before{
    content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:6%;aspect-ratio:3/4;border-radius:40px;
    background:radial-gradient(closest-side,rgba(205,245,104,.2),transparent);filter:blur(22px);opacity:.5;
    transition:opacity 300ms var(--dg-ease);pointer-events:none;
  }
  .vall .vcard__media{border-radius:18px;background:var(--graphite-90);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.6)}
  .vall a.vcard__media{aspect-ratio:3/4} /* the player that replaces it keeps the full 9:16 */
  .vall a.vcard__media img{object-position:50% 24%;transition:transform 300ms var(--dg-ease)}
  .vall a.vcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(23,25,27,.74));pointer-events:none}
  .vall .vcard__media:focus-visible{outline:3px solid var(--white);outline-offset:4px;border-radius:18px}
  .vall .vcard__play{
    z-index:2;left:22px;top:auto;bottom:22px;margin:0;width:60px;height:60px;
    background:var(--lime);color:var(--graphite);
  }
  .vall .vcard__play svg{width:22px;height:22px}
  .vall .vcard__dur{
    z-index:2;left:auto;right:22px;top:auto;bottom:39px;padding:0;background:none;
    font-size:.9375rem;letter-spacing:.02em;color:var(--white);
  }
  @media (hover:hover) and (pointer:fine){
    .vall .vall__item:hover::before{opacity:1}
    .vall a.vcard__media:hover img{transform:scale(1.035)}
    .vall a.vcard__media:hover .vcard__play{background:var(--white)}
  }
  /* caption system: index + hairline, title, text */
  .vall__cap{margin-top:0;padding:26px 4px 0}
  .vall__idx{
    display:flex;align-items:center;gap:14px;margin-bottom:16px;
    font-size:.8125rem;font-weight:600;letter-spacing:.14em;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums;
  }
  .vall__idx::after{content:"";flex:1;height:1px;background:var(--dg-hair)}
  .vall__cap h3{font-size:1.375rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-bottom:10px;color:var(--white)}
  .vall__cap p{color:var(--dg-on-dark);font-size:1.0625rem;line-height:1.6}
  .vall__cap strong{color:var(--white)}
  .vall__cap bdi{font-weight:600;color:var(--white)}
  .vall__cap .vall__note{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.16);font-size:1rem;color:var(--dg-on-dark-2)}

  /* ---- 6. «Знакомая ситуация» — ivory, white cards ------------------------------ */
  .vsec--after-hero + .section--tint{background:var(--ivory)}
  .vsec--after-hero + .section--tint .opener .lead{color:var(--ink-70)}
  .grid--3{gap:clamp(20px,2vw,28px)}
  .grid--3 .card{
    background:var(--white);border:0;border-radius:20px;padding:clamp(28px,2.8vw,40px);
    box-shadow:0 1px 0 var(--ivory-dim),0 24px 48px -36px rgba(23,25,27,.35);
  }
  .grid--3 .card__ico{width:52px;height:52px;border:0;border-radius:14px;background:var(--graphite);color:var(--lime);margin-bottom:28px}
  .grid--3 .card__ico svg{width:28px;height:28px;stroke-width:1.9}
  .grid--3 .card h3{font-size:1.375rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-bottom:12px}
  .grid--3 .card p{font-size:1rem;line-height:1.6}

  /* ---- 7. «О курсе» — graphite, editorial fact columns -------------------------- */
  #about-course{
    background:radial-gradient(40% 50% at 100% 100%,rgba(205,245,104,.06),transparent 70%),var(--graphite);
  }
  #about-course .h2{color:var(--white)}
  #about-course .grid--4{gap:0;border-top:1px solid var(--dg-hair)}
  #about-course .card--fact{
    background:transparent;border:0;border-radius:0;padding:36px 32px 8px 0;
  }
  #about-course .card--fact + .card--fact{border-left:1px solid var(--dg-hair);padding-left:32px}
  #about-course .card--fact::before{content:"";display:block;width:28px;height:2px;background:var(--lime);margin-bottom:28px}
  #about-course .card--fact .k{color:var(--lime);font-size:clamp(1.5rem,2vw,1.875rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-bottom:14px}
  #about-course .card--fact p:not(.k){color:var(--dg-on-dark);font-size:1rem;line-height:1.6}

  /* ---- 8. «Как начать» — ivory, numbered flow -------------------------------- */
  #how{background:var(--ivory)}
  #how .steps{gap:32px}
  .step{padding-top:92px}
  .step::before{
    width:56px;height:56px;background:var(--graphite);color:var(--lime);font-weight:800;font-size:1.25rem;
  }
  .step:not(:last-child)::after{
    content:"";position:absolute;top:28px;left:72px;right:-16px;height:1px;
    background:linear-gradient(90deg,rgba(23,25,27,.4),rgba(23,25,27,.08));
  }
  .step h3{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin-bottom:10px}
  .step p{font-size:1rem;line-height:1.6}

  /* ---- 9. Price — graphite section, slate card, lime ₪320 ---------------------- */
  #price{background:radial-gradient(46% 50% at 0% 0%,rgba(205,245,104,.06),transparent 70%),var(--graphite)}
  #price .h2{color:var(--white)}
  .price-card{
    max-width:none;position:relative;isolation:isolate;overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(3rem,6vw,6rem);align-items:start;
    border-radius:28px;padding:clamp(40px,4.6vw,68px);
    background:radial-gradient(60% 80% at 100% 0%,rgba(205,245,104,.11),transparent 70%),var(--dg-slate);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -48px rgba(0,0,0,.7);
  }
  .price-card > :not(.price-list){grid-column:1}
  .price-card .chip{justify-self:start;margin-bottom:28px;padding:7px 16px}
  .price-card .amount{font-size:clamp(4.5rem,7.4vw,7rem);color:var(--lime);letter-spacing:-.045em;column-gap:.22em}
  .price-card .amount span{font-size:1.25rem;color:var(--dg-on-dark)}
  .price-card .pay-note{color:var(--white);font-size:1.0625rem;font-weight:600;margin-top:18px}
  .price-card .sub{color:var(--dg-on-dark);font-size:1rem;margin-top:10px;margin-bottom:36px;max-width:30rem}
  .price-card .btn--on-dark{width:auto;justify-self:start;min-height:58px;padding:0 36px;font-size:1.0625rem;color:var(--graphite);font-weight:700}
  .price-card .btn--on-dark:focus-visible{background:var(--white);color:var(--graphite)}
  .price-card .fineprint{text-align:left;margin-top:18px;font-size:1rem;color:var(--dg-on-dark-2);max-width:30rem}
  .price-list{
    grid-column:2;grid-row:1 / span 6;align-self:stretch;align-content:center;
    margin:0;gap:20px;padding-left:clamp(2.5rem,5vw,4.5rem);border-left:1px solid var(--dg-hair);
  }
  .price-list li{font-size:1.0625rem;line-height:1.5;color:var(--dg-on-dark);gap:14px}
  .price-list svg{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--lime);color:var(--graphite);stroke-width:3;margin-top:0}

  /* ---- 10. About Liza — ivory, lime portrait panel ------------------------------ */
  section.about{background:var(--ivory)}
  section.about .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem)}
  section.about .portrait{border-radius:28px;max-width:540px;width:100%}
  section.about .name{font-size:clamp(2.5rem,4.1vw,3.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.03;margin-bottom:28px}
  section.about p{font-size:1.125rem;line-height:1.65;max-width:38rem;margin-bottom:20px}
  section.about a.meta{
    margin-top:12px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;
    box-shadow:inset 0 0 0 1.5px var(--graphite);color:var(--graphite);font-size:1rem;
    transition:background-color 200ms var(--dg-ease),color 200ms var(--dg-ease);
  }
  section.about a.meta:focus-visible{border-radius:999px}
  @media (hover:hover) and (pointer:fine){
    section.about a.meta:hover{background:var(--graphite);color:var(--white)}
  }

  /* ---- 11. Credentials — white ------------------------------------------------ */
  .creds{background:var(--white)}
  .creds .wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(3rem,7vw,7rem);align-items:end}
  .creds .opener{grid-column:1}
  .creds .umbrella{grid-column:2;margin:0 0 var(--opener-gap);max-width:36rem}
  .creds .orgs,.creds .research{grid-column:1 / -1}
  .orgs{border-radius:20px}
  .org{background:var(--white);min-height:168px;gap:16px}
  .org__logo{mix-blend-mode:multiply} /* several logo files have a white box: melt it into the cell */
  .org__name{font-size:.875rem;color:var(--ink-70)}
  @media (hover:hover) and (pointer:fine){
    .org:hover{background:var(--ivory)}
  }
  .research{max-width:46rem;margin-top:40px}
  .research p{font-size:1rem}

  /* ---- 12. Socials — compact graphite band ----------------------------------- */
  .creds + .section{border-top:0;padding-block:clamp(4.5rem,7vw,6.5rem)}
  .creds + .section .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,7vw,7rem);align-items:center}
  .creds + .section .opener{margin:0}
  .creds + .section .h2{color:var(--white)}
  .socials-block{max-width:none;margin:0;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(2rem,4vw,3.5rem)}
  .socials-block p{margin:0;color:var(--dg-on-dark);font-size:1.125rem;line-height:1.6;max-width:36rem}
  .socials{gap:16px}
  .socials a{width:64px;height:64px;border:0;color:var(--lime);box-shadow:inset 0 0 0 1.5px var(--dg-lime-line);
    transition:background-color 200ms var(--dg-ease),color 200ms var(--dg-ease),transform 200ms var(--dg-ease)}
  .socials a:focus-visible{background:var(--lime);color:var(--graphite);border-radius:999px}
  @media (hover:hover) and (pointer:fine){
    .socials a:hover{background:var(--lime);color:var(--graphite);transform:translateY(-2px)}
  }

  /* ---- 13. FAQ — ivory, sticky heading rail ------------------------------------ */
  #faq{background:var(--ivory)}
  #faq .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(3rem,7vw,7rem);align-items:start}
  #faq .opener{grid-column:1;grid-row:1 / span 2;position:sticky;top:124px;margin:0}
  #faq .faq{grid-column:2;grid-row:1;max-width:none;margin:0}
  #faq .faq-contact{grid-column:2;grid-row:2;max-width:none;margin:32px 0 0;text-align:left;font-size:1rem}
  .qa,.qa:first-child{border-color:var(--dg-hair-light)}
  .qa button{padding:28px 72px 28px 0;font-size:1.1875rem;font-weight:600;letter-spacing:-.008em;line-height:1.4}
  .qa button::before{
    content:"";position:absolute;right:0;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;
    background:var(--graphite);transition:background-color 200ms var(--dg-ease);
  }
  .qa button::after{right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-color:var(--lime);transition:transform 260ms var(--dg-ease)}
  .qa button[aria-expanded="true"]::before{background:var(--lime)}
  .qa button[aria-expanded="true"]::after{border-color:var(--graphite);transform:translateY(3px) rotate(225deg)}
  .qa__panel{transition-timing-function:var(--dg-ease)}
  .qa__panel-inner{font-size:1rem;line-height:1.65;padding-right:72px;max-width:calc(62ch + 72px)}

  /* ---- 14. Final CTA — the one big lime moment -------------------------------- */
  .section--lime{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(7rem,12vw,10.5rem)}
  .section--lime::after{display:none}
  .section--lime::before{
    content:"";position:absolute;z-index:-1;width:min(64vw,880px);aspect-ratio:1;right:-22%;top:-58%;border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(23,25,27,.14);
  }
  .section--lime .wrap{max-width:60rem}
  .section--lime .h2{font-size:clamp(3rem,5.4vw,5rem);color:var(--graphite);letter-spacing:-.04em;line-height:1}
  .section--lime .lead{font-size:1.25rem;color:var(--lime-ink);margin-top:28px!important;margin-bottom:44px!important}
  .section--lime .btn--primary{min-height:60px;padding:0 38px;font-size:1.0625rem}
  .section--lime .btn--primary:focus-visible{background:var(--white);color:var(--graphite)}
  @media (hover:hover) and (pointer:fine){
    .section--lime .btn--primary:hover{background:var(--white);color:var(--graphite)}
  }

  /* ---- 15. Footer ------------------------------------------------------------ */
  .site-footer{padding-block:clamp(4.5rem,7vw,6rem) 40px;color:var(--dg-on-dark-2)}
  .site-footer .wrap{grid-template-columns:1.5fr 1fr 1fr;column-gap:clamp(2rem,5vw,5rem)}
  .site-footer svg{height:36px;margin-bottom:22px}
  .site-footer svg g:first-child{fill:var(--lime)}
  .site-footer p{font-size:1rem}
  .site-footer h3{color:var(--lime);font-size:.8125rem;letter-spacing:.16em;margin-bottom:16px}
  .site-footer ul{font-size:1rem;gap:0}
  .site-footer .linklike{font-size:1rem}
  .site-footer .fine{margin-top:24px;border-top-color:var(--dg-hair);padding-top:28px;font-size:.9375rem}
  .footer-contact{font-size:1rem}

  /* ---- 16. Motion ------------------------------------------------------------- */
  /* scroll reveals (existing .reveal + desktop .d-rv): rise 16px + fade, once; delays come from site.css §15 */
  .js .reveal{transform:translateY(16px);transition-property:opacity,transform;transition-duration:700ms;transition-timing-function:var(--dg-ease)}
  .js .reveal.in{transform:none}
  .dg-motion .d-rv{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--dg-ease),transform 700ms var(--dg-ease)}
  .dg-motion .d-rv.in{opacity:1;transform:none}
  .dg-motion .vall .opener.reveal{transition-delay:0ms}
  /* ?static (screenshots) → everything in its final state */
  .dg-static .reveal{opacity:1!important;transform:none!important;transition:none!important}

  /* load: headline lines mask-reveal bottom-up 80ms apart, copy rises, photo rises, halo glows in */
  .dg-motion .hero .display .ln > span{animation:dg-line 900ms var(--dg-ease) calc(120ms + var(--i,0) * 80ms) both}
  .dg-motion .hero .accent-underline::after{animation:dg-draw 700ms var(--dg-ease) 950ms both}
  .dg-motion .hero .eyebrow,
  .dg-motion .hero .lead,
  .dg-motion .hero-actions,
  .dg-motion .hero .ticks{animation:dg-rise 800ms var(--dg-ease) both}
  .dg-motion .hero .eyebrow{animation-delay:40ms}
  .dg-motion .hero .lead{animation-delay:440ms}
  .dg-motion .hero-actions{animation-delay:520ms}
  .dg-motion .hero .ticks{animation-delay:600ms}
  .dg-motion .hero .device picture{animation:dg-rise-photo 1100ms var(--dg-ease) 180ms both}
  .dg-motion .device__halo,.dg-motion .device__ring{animation:dg-fade 2000ms var(--dg-ease) 450ms both}
  .dg-motion .device__credit{animation:dg-rise 800ms var(--dg-ease) 900ms both}
  @keyframes dg-line{from{transform:translateY(106%)}to{transform:translateY(0)}}
  @keyframes dg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes dg-rise-photo{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes dg-fade{from{opacity:0}to{opacity:1}}
  @keyframes dg-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  @media (prefers-reduced-motion: reduce){
    .dg-motion .hero *,.dg-motion .hero *::after{animation:none!important}
    .dg-motion .d-rv{opacity:1;transform:none;transition:none}
    .vall a.vcard__media img,.socials a{transition:none}
    @media (hover:hover) and (pointer:fine){
      .vall a.vcard__media:hover img,.socials a:hover{transform:none}
    }
  }
}

/* 900–1099px: fewer columns where 4/12-column layouts get cramped */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero .wrap > div:first-child{grid-column:1 / span 8}
  .hero .device{grid-column:7 / -1;height:min(calc(100% - 28px),760px)}
  .device__credit{display:none}
  #about-course .card--fact:nth-child(odd){border-left:0;padding-left:0}
  #about-course .card--fact:nth-child(n+3){border-top:1px solid var(--dg-hair);margin-top:8px}
  #how .steps{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .step:nth-child(2)::after{display:none}
  .price-card{grid-template-columns:1fr}
  .price-list{grid-column:1;grid-row:auto;padding-left:0;border-left:0;border-top:1px solid var(--dg-hair);padding-top:32px;margin-block:8px 36px}
  .socials-block{grid-template-columns:1fr;row-gap:28px}
  #faq .wrap{grid-template-columns:1fr}
  #faq .opener{position:static;grid-row:auto;margin-bottom:var(--opener-gap)}
  #faq .faq,#faq .faq-contact{grid-column:1;grid-row:auto}
}