/* METHOD-D2 (15 Oct) · page D2 = page D design + a real lesson preview, outcomes and the value stack. Base: page D. Budget: 3 screens, ≤70 words, 2 type sizes, red only on the button.
   No borders, no badges, no cards, no tables. Ink + paper. Bricolage (display) + Inter (everything else). */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(/assets/method-min/bricolage.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/assets/method-min/inter.woff2) format("woff2")}
:root{--ink:#14171F;--paper:#F4F6FA;--mute:#A3ACBA;--red:#FE2C55;
--big:clamp(38px,5.2vw,72px);--body:17px;
--display:"Bricolage Grotesque",system-ui,sans-serif;--ui:Inter,system-ui,sans-serif;--ease:cubic-bezier(.16,1,.3,1);
--sb:env(safe-area-inset-bottom)}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--body)/1.5 var(--ui);-webkit-font-smoothing:antialiased;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.big{margin:0;font:800 var(--big)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.mute{color:var(--mute)}
@media(min-width:385px){.nb{white-space:nowrap}}
.btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:360px;height:60px;border-radius:999px;background:var(--red);color:#fff;font:600 var(--body)/1 var(--ui);transition:transform .2s var(--ease),opacity .2s}
.btn:active{transform:scale(.97)}
.link{display:inline-flex;align-items:center;min-height:44px;color:rgba(244,246,250,.72)}
@media(hover:hover){.btn:hover{opacity:.92}.link:hover{color:var(--paper)}}
:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:12px}

/* screen 1 */
.s1{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.s1 .clip{position:absolute;inset:0}
.s1 video,.s1 .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.s1:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,23,31,.5) 0,rgba(20,23,31,0) 14%,rgba(20,23,31,0) 46%,rgba(20,23,31,.8) 68%,var(--ink) 100%);pointer-events:none}
.s1 .in{position:relative;z-index:1;width:100%;padding:0 24px calc(12px + var(--sb))}
.s1 .act{margin-top:24px}
.mark{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 16px);left:24px;font:700 var(--body)/1 var(--display);letter-spacing:-.01em;min-height:44px;display:flex;align-items:center}
.s1 .link{margin-top:6px}

/* screens 2 + 3 */
.scr{display:flex;align-items:center;padding:96px 24px 24px;text-align:center}
.scr .in{display:flex;flex-direction:column;align-items:center}
.s4{padding-top:8px;padding-bottom:96px}
.scr .in{width:100%;max-width:760px;margin:0 auto}
.lname{margin:4px 0 24px!important}
.flags{display:flex;gap:2px;margin:36px 0 0;flex-wrap:nowrap}
.flags button{position:relative;width:48px;height:48px;font-size:26px;line-height:48px;text-align:center}
.flags button{transition:transform .25s var(--ease)}
.flags button[aria-pressed=true]{transform:scale(1.3)}
.s4 p{margin:16px 0 0;text-wrap:pretty}
.s4 .link{margin-top:10px}
.foot{padding:0 24px calc(28px + var(--sb));max-width:808px;margin:0 auto;color:var(--mute);text-align:center}
.foot a{display:inline-flex;min-height:44px;align-items:center}

/* D2: start button shows it acts; lesson preview; outcomes; value stack */
.btn svg{width:18px;height:18px;margin:0 8px 0 -4px}
.mid{margin:0;font:700 clamp(26px,3vw,36px)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.kick{margin:0 0 16px}
.lesson{position:relative;width:min(300px,72vw);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#0d0f15;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lesson video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sound{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:rgba(20,23,31,.82);color:var(--paper);font-weight:600;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s var(--ease)}
.sound svg{width:20px;height:20px}
.sound.on{opacity:0;pointer-events:none}
.s2 .mid{margin-top:56px}
.vid,.txt{display:flex;flex-direction:column;align-items:center}
.txt{align-items:center}
.out{list-style:none;counter-reset:o;margin:24px 0 0;padding:0;max-width:30em;text-align:left;display:grid;gap:16px}
.out li{counter-increment:o;display:grid;grid-template-columns:32px 1fr;align-items:baseline}
.out li:before{content:counter(o);font:700 var(--body)/1 var(--display);color:var(--red)}
.stack{list-style:none;margin:32px 0 0;padding:0;max-width:30em;text-align:left;display:grid;gap:28px}
.stack li{display:grid;grid-template-columns:40px 1fr;align-items:start}
.stack li[hidden]{display:none}
.stack svg{width:24px;height:24px;margin-top:2px;color:var(--paper)}
.stack b{display:block;font-weight:600}
.stack span.mute{display:block;margin-top:2px}
.q{margin:48px 0 0;max-width:24em;text-wrap:balance;font:600 20px/1.4 var(--ui)}
.q .mute{display:block;margin-top:10px;font:400 var(--body)/1.5 var(--ui)}

/* calm reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
@media(max-width:380px){.flags button{width:42px}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn,.flags button{transition:none}}

/* desktop: words left, the clip right, still one screen */
@media(min-width:960px){
  .s1{align-items:center;height:100svh;min-height:640px}
  .s1:after{display:none}
  .s1 .clip{left:auto;width:62%}
  .s1 .clip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0,rgba(20,23,31,.75) 18%,rgba(20,23,31,.25) 45%,rgba(20,23,31,0) 70%),linear-gradient(180deg,rgba(20,23,31,.45) 0,rgba(20,23,31,0) 30%,rgba(20,23,31,0) 75%,rgba(20,23,31,.6) 100%)}
  .mark{left:max(64px,calc((100vw - 1240px)/2 + 64px));top:24px}
  .s1 .in{height:auto;display:block;padding:0 64px 0 max(64px,calc((100vw - 1240px)/2 + 64px));max-width:calc(760px + max(64px,calc((100vw - 1240px)/2 + 64px)))}
  .s1 .act{margin-top:40px}
  .s1 video,.s1 .poster{object-position:50% 34%}
  .scr{padding:120px 64px 24px}
  .s4{padding-top:24px;padding-bottom:120px}
  .scr .in{max-width:900px}
  .foot{text-align:center}
  .flags button{width:56px;height:56px;font-size:30px;line-height:56px}
  .s2 .in{flex-direction:row;align-items:center;justify-content:center;gap:96px;text-align:left;max-width:1000px}
  .s2 .vid{display:flex;flex-direction:column;align-items:center}
  .s2 .lesson{width:320px}
  .s2 .mid{margin-top:0}
  .s2 .txt{align-items:flex-start}
}
/* D2 walk fixes (390): arrow spacing, no orphans */
.s1 .link span{margin-left:6px}
.out li,.stack span.mute,.s4 p,.kick{text-wrap:balance}
.kick{max-width:20em}
/* selected flag grows without touching its neighbours (tap-probe: no overlapping buttons) */
.flags{gap:5px}.flags button[aria-pressed=true]{transform:scale(1.15)}
@media(max-width:380px){.flags{gap:3px}.flags button{width:40px}}
/* grader round 1 fixes: say what you get on screen 1; red stays on buttons only; calmer sky; visible picked flag */
.s1 .sub{margin:14px 0 0;max-width:24em;color:rgba(244,246,250,.86);text-wrap:balance}
.out li:before{color:rgba(244,246,250,.5)}
.s1:after{background:linear-gradient(180deg,rgba(20,23,31,.78) 0,rgba(20,23,31,.25) 22%,rgba(20,23,31,0) 40%,rgba(20,23,31,.8) 64%,var(--ink) 100%)}
.flags button[aria-pressed=true]:after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--paper)}
/* grader round 2: say it is him in the clip */
.s1 .cap{margin:0 0 12px;font-size:15px;color:rgba(244,246,250,.75)}
.kick{color:rgba(244,246,250,.72)}