/* METHOD-D6 (16 Oct) · loaded after d2.css (page D's system: ink, paper, Bricolage + Inter, red only on the main button).
   Adds: the hero benefit pack, D3 screen 2 as the layout for 3 real app demos (tabs), the full offer, the price block,
   the lesson-1 sheet, the language picker and the one-tap "what made you hesitate?" sheet. Flat colour only, no pink or purple. */
:root{--ink2:#1B1F29;--st:env(safe-area-inset-top)}
html.lock{overflow:hidden}

/* hero: dream outcome + benefit pack */
.s1 .big{max-width:11ch}
.s1 .sub{margin:12px 0 0}
.pack{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px;max-width:30em;color:rgba(244,246,250,.86);font-size:15px}
.pack li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.pack svg{width:18px;height:18px;flex:none;color:var(--paper)}
.s1 .act{margin-top:24px}
@media(max-height:760px) and (max-width:959px){.s1 .cap{display:none}.pack{margin-top:14px;gap:8px 14px}}

/* screen 2 = D3's page 2 layout, now three real demos */
.s2{padding-top:72px}
.tabs{display:flex;gap:6px;width:min(300px,72vw);margin:0 0 14px}
.tabs button{flex:1;min-height:44px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;font-size:13px;font-weight:600;color:var(--mute);text-align:left}
.tabs i{display:block;width:100%;height:3px;border-radius:2px;background:rgba(244,246,250,.18);overflow:hidden;position:relative}
.tabs i:after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.tabs [aria-selected=true]{color:var(--paper)}
.tabs [aria-selected=true] i:after{transform:scaleX(var(--p,0))}
.tabs .done i:after{transform:none}
.demo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo video[hidden]{display:none}
.demo .pos-b{object-position:50% 100%}
.demo .pos-t{object-position:50% 0}
.demo[data-on="1"] .sound,.demo[data-on="2"] .sound{opacity:0;pointer-events:none}
.s2 .txt{margin-top:32px}
.s2 .say{max-width:24em}
.s2 .say[hidden]{display:none}
.s2 .say .mid{margin-top:0}
.s2 .say p{margin:10px 0 0;text-wrap:balance}
.s2 .out{margin-top:28px}

/* screen 3: the full offer */
.s3{padding-top:96px}
.stack .th{display:block;width:34px;height:46px;object-fit:cover;object-position:50% 70%;border-radius:7px;margin-top:2px}
.stack .th-t{object-position:50% 45%}

/* price */
.s4{padding-top:96px}
.s4 .kick{margin:0;color:var(--mute);font-size:15px}
.amt{margin:8px 0 0!important;font:800 clamp(64px,8vw,96px)/1 var(--display);letter-spacing:-.04em}
.s4 .when{margin:12px 0 24px;max-width:30ch;color:var(--mute)}
.for{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 12px;padding:0 16px;border-radius:999px;background:rgba(244,246,250,.07);color:var(--mute);font-size:15px}
.for b{color:var(--paper);font-weight:600}
.s4 .safe{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:15px;color:var(--paper);text-align:left;max-width:34ch}
.s4 .safe svg{flex:none;width:20px;height:20px}

/* language picker + hesitate sheet (one bottom-sheet pattern) */
.pick{position:fixed;inset:0;z-index:30}
.pick[hidden]{display:none}
.pick-bg{position:absolute;inset:0;background:rgba(10,12,16,.6);opacity:0;transition:opacity .22s var(--ease)}
.pick-in{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;padding:22px 20px calc(20px + var(--sb));border-radius:22px 22px 0 0;background:var(--ink2);transform:translateY(100%);transition:transform .32s var(--ease)}
.pick.on .pick-bg{opacity:1}.pick.on .pick-in{transform:none}
.pick-x{position:absolute;right:8px;top:8px;width:44px;height:44px;font-size:18px;color:var(--mute)}
.pick-t{margin:0;font:800 24px/1.15 var(--display);letter-spacing:-.02em;padding-right:40px}
.pick-s{margin:6px 0 14px;font-size:15px}
.pick-l,.hes-l{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick-l button,.hes-l button{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:14px;background:rgba(244,246,250,.06);font-weight:500;text-align:left;font-size:15px}
.pick-l .f{font-size:22px}
.hes-l button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.hes-ok{margin:14px 0 0;color:var(--paper)}

/* lesson 1: in the page, same design (never the old /free page) */
.l1{position:fixed;inset:0;z-index:20;background:var(--ink);display:flex;flex-direction:column;opacity:0;transition:opacity .25s var(--ease)}
.l1[hidden]{display:none}
.l1.on{opacity:1}
.l1-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--st) + 6px) 8px 6px 20px;flex:none}
.l1-top p{margin:0;font:600 15px/1.3 var(--ui)}
.l1-top p span{color:var(--mute);font-weight:400}
.l1-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;color:var(--paper)}
.l1-v{position:relative;flex:1;min-height:0;display:flex;justify-content:center;padding:0 12px}
.l1-v video{height:100%;max-width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:18px;background:#000}
.l1-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:var(--ink)}
.l1-end[hidden]{display:none}
.l1-end .mid{max-width:14ch}
.l1-end p.mute{max-width:30ch;margin:4px 0 20px}
.l1-bot{flex:none;padding:12px 20px calc(14px + var(--sb));display:flex;flex-direction:column;align-items:center}
.l1-bot .btn{height:54px}
.l1.done .l1-bot{visibility:hidden}
@media(prefers-reduced-motion:reduce){.l1,.pick-in,.pick-bg{transition:none}}

@media(min-width:960px){
  .s1 .big{max-width:12ch}
  .s2 .txt{margin-top:0;max-width:440px}
  .s2 .say,.s2 .out{text-align:left}
  .tabs{width:320px}
  .s3 .in,.s4 .in{max-width:640px}
}
/* v2: two app demos; whole headline lines; lesson thumb without the mascot */
.s1 .big{max-width:none}
.s1 .cap{color:rgba(244,246,250,.82);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.stack .th-l{object-position:50% 30%}
/* grader r1 fixes: hero pack as plain words (no icon chips), one icon style in the offer, one sentence instead of a fake 1-2-3, 2-column offer on desktop */
.pack{display:block;margin-top:14px;max-width:26em;color:rgba(244,246,250,.78);font-size:15px;line-height:1.6}
.pack li{display:inline;white-space:normal}
.pack li+li:before{content:"·";margin:0 8px;color:rgba(244,246,250,.45)}
.stack svg{width:22px;height:22px}
.stack b{font-size:17px}
.s2 .one{margin:24px 0 0;max-width:24em;text-wrap:balance}
@media(min-width:960px){
  .s2 .one{text-align:left}
  .s3 .in{max-width:1000px}
  .s3 .stack{grid-template-columns:1fr 1fr;column-gap:56px;max-width:none}
  .s2 .in{gap:112px}
  .s2 .lesson{width:340px}.tabs{width:340px}
}
/* the pack's separator ends a line, never starts one */
.pack li{white-space:nowrap}
.pack li+li:before{content:none}
.pack li:not(:last-child):after{content:"·";margin:0 6px 0 8px;color:rgba(244,246,250,.45)}
/* the Music recording is the song screen only (no music video, no top bar): sit it in the middle of the phone */
.demo{background:#121318}
.demo .pos-t{object-fit:contain;object-position:50% 50%}
/* grader r2 fixes */
/* hero pack: paper-coloured lines that say what each thing is */
.pack{display:grid;gap:6px;margin-top:16px;color:var(--paper);font-size:16px;line-height:1.35}
.pack li{display:flex;align-items:baseline;gap:10px;white-space:normal}
.pack li:not(:last-child):after{content:none}
.pack li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:rgba(244,246,250,.55);transform:translateY(-2px)}
/* the Music demo is a real song card: the frame takes its shape, the space around it stays fixed so nothing jumps */
.dstage{height:calc(min(300px,72vw)*16/9);display:flex;align-items:center;justify-content:center}
.demo{transition:height .45s var(--ease)}
.demo[data-on="1"]{aspect-ratio:540/510;border-radius:22px}
.demo .pos-t{object-fit:cover;object-position:50% 50%}
/* proof right above the price */
.s4 .q{margin:0 0 40px;font-size:19px}
@media(min-width:960px){
  .dstage{height:calc(340px*16/9)}
  .s1 video,.s1 .poster{object-position:60% 25%}
  .s3 .in{max-width:640px}
  .s3 .stack{grid-template-columns:1fr;max-width:640px}
  .s3 .stack b{font-size:18px}.s3 .stack span.mute{font-size:16px}
  .pack{font-size:17px}
}
.pack li+li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:rgba(244,246,250,.55);transform:translateY(-2px);margin:0}
.s1 .cap{font-size:14px}
/* grader r3: proof you can read at the price; the language step comes after the button and says so */
.s4 .proof{margin:0 0 16px;font:700 clamp(22px,2.4vw,28px)/1.2 var(--display);letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.s4 .for{margin:12px 0 0;background:none;padding:0 8px}