/* Course page V2 (live 2026-10-16): ported once from the approved lab by 04-WORKSHOP/labs/port-course-v2-live.py. From here on THIS file and the page are the source; the lab builders read the live page and are retired. */
  /* the site's own rhythm, read from its tokens, never re-invented here: every section pads --section-padding
     (120 desktop · 96 tablet · 72 phone, the uniformity law) and a heading sits 40px off what it introduces
     (the mastered .section-title rhythm) */
  .c2{--head-gap:40px;padding:var(--section-padding) 0;background:var(--cream);color:var(--navy)}
  /* every .c2-wrap IS a site .container (markup), so width and gutters come from the site at every size */
  .c2-lead{font-family:var(--font-serif);font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--text);max-width:34em;margin:0}
  .c2-head{text-align:center;margin:0 auto var(--head-gap);max-width:760px}
  .c2-head .c2-lead{margin:0 auto}
  .c2-head--left{text-align:left;margin-left:0}

  /* placeholder = the shot brief */
  .ph{position:relative;margin:0;aspect-ratio:var(--r);border-radius:var(--radius-gallery);overflow:hidden;
      background:radial-gradient(120% 90% at 30% 20%,#EFE6DB 0%,#E2D5C5 55%,#D5C4AE 100%)}
  .ph::before{content:"";position:absolute;inset:14px;border:1px solid rgba(196,162,101,.45);border-radius:6px;pointer-events:none}
  .ph__cap{position:absolute;left:30px;right:30px;bottom:28px;font:400 13px/1.5 var(--font-sans);color:var(--brown);text-wrap:pretty}
  .ph__kind{display:block;font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--oak);margin-bottom:6px}
  .ph__play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
            border:1px solid rgba(92,64,51,.45);background:rgba(245,240,235,.5);backdrop-filter:blur(6px)}
  .ph__play::after{content:"";position:absolute;left:35px;top:28px;border-left:20px solid var(--brown);border-top:14px solid transparent;border-bottom:14px solid transparent}

  /* 1 hero */
  .c2-hero-ph{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(120% 90% at 30% 25%,#4a4540 0%,#2c2926 60%,#1d1b19 100%)}  /* dark, so the hero's white type still reads */
    font:600 10px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(17,24,39,.45);backdrop-filter:blur(8px)}

  /* 2 teacher */
  /* padding-bottom 0: the closing line and the film read as one beat */
  .c2-teacher{background:var(--porcelain);overflow:clip;padding-bottom:0}
  /* the collage column bleeds to the screen's left edge; the words keep the page's right margin */
  .c2-teacher__grid{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(48px,4.5vw,88px);align-items:center;margin-left:calc(50% - 50vw)}
  /* collage = Oleg's 2026-10-06 mocks, sized off its height --h: Anna at work runs from the screen edge in under
     the raised portrait; her client's finished face sits where the working shot ends, overlapping the portrait's
     lower left and hanging below both. Every number below is a fraction of --h measured off his mocks. */
  .c2-collage{--h:min(66vh,700px);position:relative;height:var(--h);margin-bottom:calc(.06*var(--h))}
  .ph--img{background:none!important}.ph--img::before{display:none}
  .ph--img img,.ph--img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* the site's gallery corner (12px) and one soft lift; the edge photo keeps its screen-edge corners square */
  .c2-collage .ph{position:absolute!important;margin:0;border-radius:var(--radius-gallery);aspect-ratio:auto;
    box-shadow:0 2px 6px rgba(17,24,39,.06),0 28px 64px -30px rgba(17,24,39,.42)}
  /* the parallax engine only writes --py; with --py 0 (scene centred on screen) the layout is the mock exactly */
  [data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
  /* where the browser can, the scene's own pass across the screen drives the drift, so it moves in step with the
     finger (the script loop ran a frame behind the iPhone's scrolling: judder, Oleg 2026-10-16). Same curve as the
     script: +N as the scene enters, 0 centred, -N as it leaves; --pn = N (set once by the page), phones half. */
  @keyframes c2-drift{from{transform:translate3d(0,calc(var(--pn,0) * var(--pk,1) * 1px),0)}to{transform:translate3d(0,calc(var(--pn,0) * var(--pk,1) * -1px),0)}}
  @supports (animation-timeline:view()){
    [data-parallax-scene]{view-timeline:--c2-scene block}
    [data-parallax]{animation:c2-drift linear both;animation-duration:auto;animation-timeline:--c2-scene;animation-range:cover 0% cover 100%}
  }
  @media (max-width:767px){[data-parallax]{--pk:.5}}
  @media (prefers-reduced-motion:reduce){[data-parallax]{transform:none;will-change:auto;animation:none}}
  /* a parallax scene rides the shared .reveal rise + fade, minus its blur: a filter on the scene would flatten its
     moving photos (and the collage's blurred halo) into one surface that repaints on every frame of the drift */
  [data-parallax-scene].reveal,[data-parallax-scene].reveal.revealed{filter:none}
  /* pinned to the portrait, not the screen edge: the model's face lands just left of the portrait at any width */
  .c2-collage__work img{inset:auto;top:-6%;height:112%;width:auto;max-width:none;left:min(0px,calc(100% - 1.242*var(--h)))}
  /* ends tucked under the client face; held off the screen edge with full corners + the rim (Oleg 2026-10-06) */
  .c2-collage__work{--inset:clamp(16px,2.4vw,48px);z-index:1;left:var(--inset);top:9.5%;height:83.1%;width:calc(100% - .465*var(--h) - var(--inset))}
  .c2-collage__main{z-index:3;right:0;top:0;height:77.9%;width:calc(.622*var(--h))}
  /* the portrait lifts off the working shot (Oleg 2026-10-06, "they mash"): a deeper shadow + the halo below */
  .c2-collage__main.ph{box-shadow:-30px 20px 60px -16px rgba(17,24,39,.42),-10px 30px 50px -30px rgba(17,24,39,.3)}  /* thrown left only, never toward the text */
  /* the halo lives INSIDE the working shot: a blurred copy of the same photo, pixel-aligned over it (it inherits the
     same img rule), masked to a band that is fully blurred under the portrait's left edge and eases to sharp --f out
     (90px desktop, 40px phone). Clipped by the photo's own frame, so it never softens an edge; no backdrop-filter, so every browser draws it. */
  .c2-collage__halo{--f:90px;--edge:calc(100% - .157*var(--h));position:absolute;inset:0;z-index:1;pointer-events:none;
    -webkit-mask:linear-gradient(90deg,transparent calc(var(--edge) - var(--f)),rgba(0,0,0,.35) calc(var(--edge) - .65*var(--f)),#000 calc(var(--edge) - .3*var(--f)));
    mask:linear-gradient(90deg,transparent calc(var(--edge) - var(--f)),rgba(0,0,0,.35) calc(var(--edge) - .65*var(--f)),#000 calc(var(--edge) - .3*var(--f)))}
  .c2-collage__halo img{filter:blur(15px)}
  /* the house gilded rim (COMPONENTS.md §10, the .inc-card::before conic, value-copied): a 1px lit-metal edge
     on all three photos. No glint: not pressable. Above the photo and its halo, inside its frame. */
  .c2-collage .ph--img::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;
    background:conic-gradient(from -90deg,#C4A265 0%,#fff 2%,#D4B97A 6%,rgba(196,162,101,.35) 18%,rgba(138,124,94,.45) 30%,rgba(196,162,101,.3) 42%,#D4B97A 52%,rgba(154,138,104,.45) 62%,rgba(196,162,101,.35) 72%,#C4A265 80%,#fff 84%,#D4B97A 88%,#C4A265 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
  .c2-collage__art{z-index:4;left:calc(100% - .495*var(--h));top:55.5%;height:49.5%;width:calc(.377*var(--h))}  /* Oleg's red box, 2026-10-06 */
  .c2-beat{margin:0;padding:clamp(16px,2.6vh,26px) 0;border-top:1px solid var(--border);font:400 clamp(18px,1.4vw,20px)/1.6 var(--font-serif);color:var(--text)}
  /* prose never ends on one lonely word (Oleg 2026-10-16); pretty, since balance gives up on long paragraphs */
  :where(.c2) :where(p,li){text-wrap:pretty}
  .c2-inc li,.c2-cert__q,.c2-qas .faq__question{text-wrap:balance}
  .c2-beat:first-child{border-top:0;padding-top:0}.c2-beat:last-child{padding-bottom:0}
  .c2-beat__display{display:block;margin-bottom:18px;font:400 clamp(32px,min(3.3vw,5vh),50px)/1.08 'ratiomodern',var(--font-serif);color:var(--navy);letter-spacing:-.01em}
  .c2-beat--pull{font:italic 400 clamp(20px,1.6vw,24px)/1.45 var(--font-serif);color:var(--brown);border-top:0;padding:4px 0 4px 26px;margin:clamp(14px,2.2vh,22px) 0;border-left:1px solid var(--gold)}
  .c2-num{font-weight:500;color:var(--navy)}
  .c2-only{margin:clamp(24px,3vw,52px) 0 0;text-align:center;font-family:'ratiomodern',var(--font-serif);font-size:clamp(32px,min(3.3vw,5vh),50px);line-height:1.08;letter-spacing:-.01em;color:var(--navy)}
  .c2-br{display:none}
  .c2-only span{display:block;margin-top:22px;font:italic 400 clamp(18px,1.6vw,22px)/1.5 var(--font-serif);color:var(--brown)}

  /* 3 demo */
  /* the section head rides ON the film (Oleg 2026-10-06: two headlines back to back read as a wall): bottom-left,
     white over a soft floor of shade, so "You are the only student" runs straight into the footage */
  .c2-demo__cap{position:absolute;z-index:2;left:0;right:0;bottom:0;margin:0;padding:clamp(80px,12vh,160px) clamp(24px,5vw,72px) clamp(28px,5vh,56px);
    background:linear-gradient(to top,rgba(17,24,39,.55),rgba(17,24,39,0));pointer-events:none}
  .c2-demo__cap .label,.c2-demo__cap .section-title{text-align:left;margin:0;color:#fff}
  .c2-demo__cap .label{color:rgba(255,255,255,.82);margin-bottom:10px}
  .c2-demo__cap .section-title{font-size:clamp(34px,3.6vw,64px);line-height:1.1}  /* scaled to a full-screen film, not to a section head */
  .c2-demo{padding-top:var(--head-gap);background:var(--porcelain)}
  /* the film runs full screen: edge to edge, one screen tall, square corners (Oleg 2026-10-06 trial) */
  .c2-demo__video.ph{width:100vw;height:100svh;aspect-ratio:auto;margin:0 0 0 calc(50% - 50vw);border-radius:0;box-shadow:none}
  @media (max-width:767px){.c2-demo__video.ph{height:78svh}}
  /* 4 trio: the pile. Each card is sticky at the same spot (a few px lower per card, so the pile shows its edges);
     the next card scrolls up over the last, the covered one sinks back (a scroll-driven animation below; --t, written
     by the page's fallback script, where the browser lacks it). Native scroll does all the travel, so scrolling back
     un-piles them exactly. */
  .c2-trio{background:var(--porcelain)}
  .c2-stack{--h:min(76vh,800px,calc(100vh - 140px));--peek:14px;--m:14vh;list-style:none;padding:0;margin:0}  /* --m = the gap under each card */
  .c2-stack__card{--t:0;--top:max(96px,calc((100vh - var(--h)) / 2 + var(--i) * var(--peek)));position:sticky;top:var(--top);height:var(--h);
    margin-bottom:var(--m);border-radius:16px;overflow:hidden;background:var(--navy);transform-origin:50% 0;
    transform:scale(calc(1 - .05 * var(--t)));box-shadow:0 -1px 0 rgba(255,255,255,.04),0 24px 60px -30px rgba(17,24,39,.45)}
  .c2-stack__card .ph{position:absolute!important;inset:0;aspect-ratio:auto!important;border-radius:0;margin:0}
  /* the veil darkens a card as the next one covers it; the gradient seats the words on any photo */
  .c2-stack__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(14,22,34,0) 45%,rgba(14,22,34,.72) 100%),rgba(14,22,34,calc(.45 * var(--t)))}
  .c2-stack__words{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(28px,4vw,56px)}
  .c2-stack__n{display:flex;align-items:center;gap:14px;margin:0 0 14px;font:600 12px/1 var(--font-sans);letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.86)}
  .c2-stack__n::after{content:"";width:64px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(196,162,101,0))}
  /* the full card width, so a sentence one word too long stays on one line; a real two-liner balances (LAWS L28) */
  .c2-stack__text{margin:0;max-width:1180px;font:400 clamp(22px,2.4vw,36px)/1.3 var(--font-serif);color:#fff;text-wrap:balance}
  .c2-stack__text strong{font-weight:500}
  .c2-stack__card:nth-of-type(1) img{object-position:40% 40%}
  .c2-stack__card:nth-of-type(3) img{object-position:62% 56%}  /* face up off the words (Oleg 2026-10-16) */
  /* after the last card lands, the pile holds a moment before it leaves together */
  /* sticky cards cannot outrun their list, so the hold must cover the gap under the pinned pile plus the dwell */
  .c2-stack__hold{height:calc((100vh - var(--h)) / 2 + 2 * var(--peek) + 28vh)}
  /* where the browser has scroll-driven animations the sink is tied to the scroll itself (the script version ran a
     frame behind the iPhone's scrolling: a hard, cut-like step, Oleg 2026-10-16). The list's own pass across the
     screen is the clock; card i sinks from the moment card i+1's top reaches its bottom (list top at T_i + h - (i+1)(h+m)
     from the screen top) to the moment card i+1 lands on its stick line (list top at T_(i+1) - (i+1)(h+m)); both
     written as distances from the screen's real bottom edge, hence dvh. Scale rides the card, the darkening a
     ::before layer's opacity, so both stay on the compositor. The gate names the exact range syntax used (lengths with
     dvh), so a browser with view timelines but not that syntax runs the script instead; the page's gate mirrors it. */
  @supports (animation-timeline:view()) and (animation-range:cover calc(100dvh - 10px) cover calc(100dvh + 10px)){
    .c2-stack{view-timeline:--c2-pile block}
    .c2-stack__card{--topn:max(96px,calc((100vh - var(--h)) / 2 + (var(--i) + 1) * var(--peek)))}  /* the next card's stick line */
    .c2-stack__card:has(~ .c2-stack__card){animation:c2-sink linear both;animation-timeline:--c2-pile;
      animation-range:cover calc(100dvh - var(--top) - var(--h) + (var(--i) + 1) * (var(--h) + var(--m)))
                      cover calc(100dvh - var(--topn) + (var(--i) + 1) * (var(--h) + var(--m)))}
    .c2-stack__card:has(~ .c2-stack__card)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background:rgba(14,22,34,.45);opacity:0;animation:c2-veil linear both;animation-timeline:--c2-pile;animation-range:inherit}
  }
  @keyframes c2-sink{to{transform:scale(.95)}}
  @keyframes c2-veil{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.c2-stack__card,.c2-stack__card::before{transform:none;animation:none}}
  /* 5 structure */
  .c2-chapter{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5vw,88px);align-items:center;margin-top:clamp(56px,8vw,120px)}
  .c2-chapter--flip{grid-template-columns:1.1fr .9fr}.c2-chapter--flip .c2-chapter__media{order:2}
  .c2-chapter__n{font:400 clamp(110px,min(12vw,18vh),180px)/.8 'ratiomodern',var(--font-serif);color:var(--gold);margin:0}
  /* chapter head: the gold numeral with the chapter's name set beside it, one row */
  .c2-chapter__top{display:flex;align-items:flex-end;gap:clamp(20px,2vw,32px);margin:0 0 clamp(20px,2.6vh,30px)}
  .c2-chapter__what{font:600 11px/1 var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--brown);margin:0 0 12px}
  .c2-chapter__title{font:400 clamp(34px,min(3.2vw,5vh),50px)/1 'ratiomodern',var(--font-serif);color:var(--navy);margin:0 0 4px}
  .c2-chapter__lead{font:400 clamp(19px,1.5vw,22px)/1.55 var(--font-serif);color:var(--text);margin:0 0 18px;max-width:19em}
  /* 6 portfolio */
  /* overflow:clip, never hidden, on a band that holds a parallax scene: hidden makes the band a scroll container, and a
     view timeline attaches to the nearest one, so the drift would track a box that never scrolls (measured: stuck at 70%) */
  .c2-port{background:var(--porcelain);overflow:clip}
  /* photos take the wider half and sit close to the copy: no dead gutter between them */
  .c2-port__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(40px,5vw,80px);align-items:center}
  .c2-port__media{position:relative;padding:0 0 14% 0}
  .c2-port__main{width:88%}
  .c2-port__main .ph__cap{right:44%}
  .c2-port__detail{position:absolute!important;right:0;bottom:0;width:38%;box-shadow:0 30px 60px -28px rgba(17,24,39,.4)}
  .c2-port__detail .ph__cap{left:28px;right:24px;bottom:26px;font-size:11px}
  .c2-port__copy .label,.c2-port__copy .section-title{text-align:left}
  .c2-port__lead{font:400 clamp(19px,1.5vw,22px)/1.6 var(--font-serif);color:var(--text);margin:18px 0 14px}
  .c2-port__turn{font:italic 400 clamp(19px,1.5vw,22px)/1.5 var(--font-serif);color:var(--brown);margin:0 0 22px}
  .c2-skip{list-style:none;padding:0;margin:0}
  .c2-skip li{text-wrap:pretty;padding:12px 0 12px 26px;border-top:1px solid var(--border);font-size:14.5px;line-height:1.55;color:var(--text-light);position:relative}
  .c2-skip li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:1px;background:var(--gold)}
  /* topic rows (theory + the five looks) */
  .c2-topics{list-style:none;padding:0;margin:0}
  /* two fixed columns: names never wrap, notes start on one left edge */
  .c2-topics li{display:grid;grid-template-columns:minmax(190px,38%) 1fr;gap:24px;align-items:baseline;padding:15px 0;border-top:1px solid var(--border)}
  .c2-head + .c2-chapter{margin-top:0}
  .c2-head + .c2-chapter .ph{width:min(100%,calc((92svh - 282px) * 4 / 5));margin-left:auto}
  .c2-topic{font:400 21px/1.25 var(--font-serif);color:var(--navy);white-space:nowrap}
  .c2-topic__sub{font-size:13px;line-height:1.5;color:var(--text-light)}

  /* 7 offer */
  .c2-offer{background:var(--cream-dark)}
  .c2-offer__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:stretch}
  .c2-offer__media{display:flex}.c2-offer__media .ph{aspect-ratio:auto!important;flex:1;min-height:420px}
  /* the card IS the site's .pricing-tiers__card (white, gilded rim, hover glint, 3-layer shadow), scaled up for a half-screen spread.
     --cp = side padding; the money band's negative margins mirror it (the component's matched pair). */
  .c2-offer__card{display:flex}
  .c2-card{--cp:clamp(28px,min(3.6vw,5.4vh),56px);flex:1;padding:clamp(28px,min(3.4vw,4.4vh),52px) var(--cp);gap:0}
  .c2-card .pricing-tiers__zone{margin:0 0 14px}
  .c2-card__title{font-size:clamp(34px,min(3vw,4.6vh),44px)}
  .c2-card__title small{margin-top:12px}
  .c2-card .c2-card__band{margin:clamp(20px,3vh,28px) calc(var(--cp) * -1) clamp(18px,2.6vh,26px);padding:clamp(14px,2vh,20px) var(--cp);gap:16px}
  .c2-card .pricing-tiers__from-price{font-size:clamp(56px,min(5vw,8vh),80px)}
  /* the inclusions read as the card's ledger: sans rows on gold hairlines, a gold tick for each */
  .c2-inc{list-style:none;padding:0;margin:0 0 4px}
  .c2-inc li{position:relative;padding:clamp(8px,1.3vh,11px) 0 clamp(8px,1.3vh,11px) 30px;font:400 15.5px/1.45 var(--font-sans);color:var(--text)}
  .c2-inc li+li{border-top:1px solid rgba(196,162,101,.12)}
  .c2-inc li:first-child{padding-top:0}.c2-inc li:first-child::before{top:5px}
  .c2-inc li::before{content:"";position:absolute;left:3px;top:calc(clamp(8px,1.3vh,11px) + 5px);width:11px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
  /* certificate line: one quiet row; a click unfolds Anna's full note in place underneath (no hover, nothing floats over the card) */
  .c2-cert{position:relative;margin:clamp(14px,2vh,20px) 0 clamp(20px,2.8vh,28px);padding:clamp(12px,1.8vh,16px) 0 0;border-top:1px solid var(--border)}
  .c2-cert__q{display:inline-flex;align-items:center;gap:10px;padding:4px 0;border:0;background:none;cursor:pointer;
    font:italic 400 13.5px/1.4 var(--font-sans);color:var(--text-light);text-align:left;transition:color .3s var(--ease-smooth)}
  .c2-cert__q:hover{color:var(--navy)}
  .c2-cert__icon{position:relative;flex:none;width:9px;height:9px}
  .c2-cert__icon::before,.c2-cert__icon::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1px;background:var(--gold);transition:transform .35s var(--ease-fluid)}
  .c2-cert__icon::after{transform:rotate(90deg)}
  .c2-cert__a{margin:0;max-height:0;overflow:hidden;opacity:0;font:italic 400 13.5px/1.6 var(--font-sans);color:var(--text);
    transition:max-height .45s var(--ease-fluid),opacity .3s var(--ease-smooth),padding .45s var(--ease-fluid)}
  .c2-cert.is-open .c2-cert__a{max-height:12em;opacity:1;padding-top:8px}
  .c2-cert.is-open .c2-cert__q{color:var(--navy)}
  .c2-cert.is-open .c2-cert__icon::after{transform:rotate(0)}
  @media (prefers-reduced-motion:reduce){.c2-cert__a{transition:none}}
  .c2-card__cta{margin-top:auto}

  /* 8 faq */
  .c2-faq{background:var(--porcelain)}
  .c2-faq .c2-head--left .label,.c2-faq .c2-head--left .section-title{text-align:left}
  /* top-anchored: opening a question grows the box downward only; the photo is the taller column, so the section never changes height */
  .c2-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
  /* the site's FAQ group, a size up for a half-screen column */
  .c2-qas .faq__group-inner{padding-top:8px}
  .c2-qas .faq__item:first-child{border-top:0}
  .c2-qas .faq__item{margin:0 30px}
  .c2-qas .faq__question{font-size:19px;padding:17px 0}
  .c2-qas .faq__answer-inner p{font-size:15px;text-wrap:pretty}
  .c2-qas .faq__group-inner{padding-bottom:8px}

  /* header ink: below the video every band is light except the close and the footer.
     Oleg's Chrome kept the bar on white ink over cream (2026-10-06, not reproducible in the pane),
     so the lab pins navy ink whenever a light band sits under the bar. */
  body.c2-light-under .nav .nav__logo{color:var(--navy)!important}
  body.c2-light-under .nav .nav__link{color:var(--text-light)!important}
  body.c2-light-under .nav .nav__link:hover{color:var(--navy)!important}
  body.c2-light-under .nav [class*="i18n-switch"]{color:var(--navy)!important}
  body.c2-light-under .nav .nav__hamburger span{background:var(--navy)!important}

  /* tablet: topic names may wrap, notes go under them */
  @media (max-width:1199px){
    .c2-topic{white-space:normal}
    .c2-topics li{grid-template-columns:1fr;gap:4px}
  }
  /* tablet + phone */
  @media (max-width:767px){
    /* lock C: phones are center-anchored site-wide; lists keep their left edge */
    .c2-teacher__grid,.c2-offer__grid,.c2-faq__grid,.c2-port__grid{grid-template-columns:1fr}
    .c2-teacher__grid{margin-left:0}
    .c2-collage{--h:auto;height:auto;aspect-ratio:1610/1213;margin-bottom:5%}  /* 5% = the client face's hang below the box */
    .c2-collage__work{left:0;width:65%}.c2-collage__work img{inset:0;width:100%;height:100%;object-position:80% 50%}.c2-collage__main{left:53.1%;width:46.9%}.c2-collage__halo{--f:40px;--edge:81.7%}.c2-collage__art{left:62.7%;width:28.4%}
    .c2-offer__media{display:none}  /* phones: the price card and its button end the section, no photo after the CTA (Oleg 2026-10-16) */
    .c2-stack{--h:min(68vh,620px);--peek:10px;--m:10vh}
    .c2-stack__card{border-radius:14px}
    .c2-stack__words{padding:24px 22px 26px;text-align:left}
    .c2-stack__text{font-size:22px}
    .c2-stack__n{letter-spacing:1.2px}.c2-stack__n::after{display:none}  /* the longest label (RU) stays on one line */
    .c2-chapter{grid-template-columns:1fr;gap:28px}
    .c2-chapter--flip .c2-chapter__media{order:0}
    .c2-head + .c2-chapter .ph{width:auto;margin-left:0}
    .c2-chapter__copy,.c2-port__copy,.c2-beat,
    .c2-port__copy .label,.c2-port__copy .section-title,
    .c2-faq .c2-head--left .label,.c2-faq .c2-head--left .section-title,
    .c2-card__cta{text-align:center}
    .c2-cert{text-align:center}.c2-cert__q{text-align:center}
    .c2-chapter__top{justify-content:center;text-align:left}
    .c2-skip li,.c2-topics li,.c2-inc li{text-align:left}
    .c2-qas .faq__item{margin:0 22px}.c2-qas .faq__question{font-size:16px;padding:14px 0}
    .c2-topics li{grid-template-columns:1fr;gap:4px}
    .c2-beat--pull{border-left:0;padding:0;margin:8px 0 18px}
    /* phones read the short version of Anna's own words: same sentences, fewer of them (Oleg 2026-10-06, "a lot of text") */
    .c2-cut,.c2-teacher .c2-beat--pull{display:none}
    /* phones break it "You are / the only student." (Oleg 2026-10-06) and size it so the long line fills the width:
       "the only student." measures ~7.2x its font size */
    /* one phone rhythm, ~64px between every block: photos > words > "only student" > film (Oleg 2026-10-06) */
    .c2-teacher__grid{row-gap:58px}.c2-only{margin-top:64px}
    .c2-br{display:inline}
    .c2-teacher .c2-beat{font-size:17px}
  }