/* Lissenin's typeface and plain black, not DW's (DW Akademie, 2026-10-05: the planner is
     first a MethodKit product, so no DW Blue and no DW Pangea; Ola: the lissenin.com typeface,
     black for the mark and for what was DW Blue). Figtree is the file lissenin.com serves; the
     greys are the site's neutrals, so no blue tint is left. The pink stays: it is the cards'. */
  @font-face{font-family:"Figtree"; font-style:normal; font-weight:400 900; font-display:swap; src:url("fonts/figtree-latin.woff2") format("woff2")}
  /* the headlines in Bouba Round Black (Bold until Ola's "Make font bolder"), the cards' face, with ss02 (its alternate A) on (Ola, 2026-10-05) */
  @font-face{font-family:"Bouba Round"; font-style:normal; font-weight:900; font-display:swap; src:url("fonts/bouba-round-black-latin.woff2") format("woff2")}
  :root{
    --ink:#1B1F23; --pink:#CD3A67; --pale:#E4E6E2; --paler:#F4F5F3;
    --muted:#4C535A; --line:#B4B9B1; --green:#2FAE63; --amber:#F5B301; --red:#E0433F;
    --f:"Figtree","Helvetica Neue",Arial,sans-serif;
    --fh:"Bouba Round","Figtree","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{
    font-family:var(--f); background:#fff; color:var(--ink);
    display:flex; flex-direction:column; align-items:center;
    min-height:100vh; min-height:100dvh; min-height:100svh; overflow:hidden;
  }

  /* session chrome, hidden on the intro and done screens */
  header{
    width:100%; max-width:560px; display:flex; align-items:center; justify-content:space-between;
    padding:20px 26px 0; font-size:11.5px; color:var(--muted); letter-spacing:.04em; gap:12px;
  }
  header .kit{font-weight:400}
  header .prog b{color:var(--ink); font-weight:700}
  .dots{width:100%; max-width:560px; display:flex; gap:5px; padding:10px 26px 0}
  .dots i{flex:1; height:4px; border-radius:2px; background:var(--pale); transition:background .2s ease}
  .dots i.cov{background:var(--pink)}
  .dots i.cur{background:var(--ink)}
  body.intro header, body.intro .dots, body.done header, body.done .dots{display:none}

  .stage{
    position:relative; width:100%; max-width:560px; flex:1; min-height:0;
    display:flex; align-items:center; justify-content:center; padding:8px 26px;
    flex-direction:column; gap:12px;
  }
  .deck{position:relative; flex:0 0 auto; width:min(88vw,380px,46vh); height:min(88vw,380px,46vh)}
  .card{position:absolute; inset:0; background:transparent; overflow:visible;
    will-change:transform; touch-action:pan-y; cursor:grab}
  .card:active{cursor:grabbing}
  .card img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; user-select:none}
  .card.fly{transition:transform .45s ease, opacity .45s ease}
  .stamp{
    position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) rotate(-7deg) scale(.8);
    padding:11px 22px; border-radius:10px; font-family:var(--f);
    font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:#fff;
    opacity:0; pointer-events:none; white-space:nowrap;
    box-shadow:0 6px 22px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.22);
  }
  .stamp.done{background:var(--green)}
  .stamp.later{background:var(--amber)}
  /* the phase pill is kept in the DOM (app.js writes to it) but not shown:
     the card art earns that space on a phone */
  .section-pill{display:none}

  .qs{width:100%; max-width:420px; margin:0; padding:0; list-style:none;
    display:flex; flex-direction:column; gap:9px}
  /* the question bold and centred under the card (Ola's canvas, 2026-10-06) */
  .qs li{position:relative; padding-left:18px; font-size:15px; line-height:1.45; font-weight:700; color:var(--ink); align-self:center}
  .qs li::before{content:''; position:absolute; left:0; top:8px; width:7px; height:7px;
    border-radius:50%; background:var(--pink)}

  /* the voice line: a voice graph of five bars that follow the sound (Ola, 2026-10-01: "a
     voice graph instead" of the green circle with the mic). Green and following the
     microphone while the guide listens, pink and following its voice while it speaks, amber
     and flat while it connects or the network is down. app.js sets --lv1 to --lv5 (0 to 1)
     on #voice; a bar is 6 px at rest and up to 40 px. Nothing moves when nobody talks, which
     keeps the point of the still circle (Andriy on Be Understood, 2026-09-18: no perpetual
     pulse while someone is talking). The colour fades over 0.3 s between states. */
  .voice{--lv1:0; --lv2:0; --lv3:0; --lv4:0; --lv5:0; display:flex; align-items:center; gap:12px; min-height:52px}
  .orb{
    --c:var(--pale); width:52px; height:52px; flex:0 0 auto; border-radius:0; background:none;
    display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .orb svg{display:none}
  .orb i{display:block; width:6px; border-radius:3px; background:var(--c); transition:background .3s ease}
  .orb i:nth-of-type(1){height:calc(6px + var(--lv1) * 34px)}
  .orb i:nth-of-type(2){height:calc(6px + var(--lv2) * 34px)}
  .orb i:nth-of-type(3){height:calc(6px + var(--lv3) * 34px)}
  .orb i:nth-of-type(4){height:calc(6px + var(--lv4) * 34px)}
  .orb i:nth-of-type(5){height:calc(6px + var(--lv5) * 34px)}
  .voice.listening .orb{--c:var(--green)}
  .voice.speaking  .orb{--c:var(--pink)}
  .voice.connecting .orb{--c:var(--amber)}
  /* no sound to follow while connecting or offline: the bars stand at a fixed height, so the
     amber is as visible as the circle was */
  .voice.connecting .orb i{height:18px}
  /* reduced motion: the bars stand still in the state's colour; the label says the rest */
  @media (prefers-reduced-motion:reduce){ .voice .orb i{height:14px} }
  .voice .vlabel{font-size:13.5px; font-weight:400; color:var(--muted)}
  .hint{color:var(--muted); font-size:12px; text-align:center; margin:0}
  .hint:empty{display:none}
  @media (max-height:700px){ .hint{display:none} }
  /* plan so far: one line per covered card, collapsed so it does not compete with the talk
     (Simon D., 2026-09-14: "a glimpse at the outcome somewhere within the process") */
  .notes{width:100%; max-width:560px; padding:6px 26px 0; font-size:12.5px; color:var(--muted)}
  .notes summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px}
  .notes summary::-webkit-details-marker{display:none}
  .notes summary::before{content:''; width:0; height:0; border-left:5px solid var(--muted); border-top:3.5px solid transparent;
    border-bottom:3.5px solid transparent; transition:transform .15s ease}
  .notes[open] summary::before{transform:rotate(90deg)}
  .notes summary b{color:var(--ink)}
  .notes ol{margin:6px 0 0; padding:0 0 0 18px; color:var(--ink); line-height:1.45; max-height:22vh; overflow:auto}
  .notes ol li{margin:0 0 3px}
  .notes ol li b{font-weight:700}
  body.intro .notes, body.done .notes, body:not(.live) .notes{display:none}
  .notes:not(.has){display:none}

  .controls{
    width:100%; max-width:560px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:8px; padding:6px 26px calc(26px + env(safe-area-inset-bottom));
  }
  .ghost{
    font-family:var(--f); font-weight:700; font-size:13.5px; border:0; border-radius:10px;
    padding:14px 6px; cursor:pointer; background:var(--paler); color:var(--ink);
    border:1.5px solid var(--pale); flex:1; min-width:0; white-space:nowrap;
  }
  #pauseBtn{flex:0 0 auto; padding:14px 16px}
  #nextBtn{background:var(--ink); color:#fff; border-color:var(--ink)}
  .ghost:active{transform:scale(.98)}
  /* end is a quiet text line under the three buttons, never a button */
  .quiet{flex:0 0 100%; display:flex; justify-content:center; align-items:center; gap:10px; padding-top:4px; color:var(--muted); font-size:12.5px}
  .textctl{
    font-family:var(--f); background:none; border:0; padding:0; color:var(--muted); cursor:pointer;
    font-weight:400; font-size:12.5px; text-decoration:underline; text-underline-offset:3px;
  }
  body:not(.live) .controls, body:not(.live) .voice, body:not(.live) .hint,
  body:not(.live) .section-pill, body:not(.live) .deck, body:not(.live) .qs{visibility:hidden}
  body.intro .controls{display:none}
  body.done .stage > .section-pill, body.done .deck, body.done .voice,
  body.done .hint, body.done .qs, body.done .controls{display:none}

  /* ---------- intro ---------- */
  #intro{
    position:absolute; inset:0; background:#fff; display:none; z-index:300;
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  body.intro #intro{display:block}
  #intro .wrap{
    width:100%; max-width:520px; min-height:100%; margin:0 auto;
    padding:30px 26px calc(34px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  }
  .toprow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 4px}
  @media (max-width:520px){
    /* a phone: the status bar is already above the page, so 30px more read as the page
       starting too far down in Safari (Ola, 2026-09-29) */
    #intro .wrap{padding-top:12px}
  }
  /* the marks (DW Akademie, 2026-10-05: MethodKit first, DW Akademie after; Ola: both on top):
     the MethodKit logo, a thin rule, the DW Akademie logo in black */
  .brand{display:flex; align-items:center; gap:14px}
  .brand a{display:block}
  .brand .mk{width:113px; height:auto; display:block}
  .brand i{width:1px; height:24px; background:var(--line); display:block}
  .brand .dw{width:96px; height:auto; display:block}
  /* all caps, as the cards' headlines (Ola, 2026-10-05); caps want no negative tracking */
  #intro h1{font-family:var(--fh); font-feature-settings:"ss02" 1; text-transform:uppercase; font-size:52px; font-weight:900; line-height:.92; letter-spacing:0; margin:41px 0 16px; color:var(--ink)}
  #intro h1 em{font-style:normal; color:var(--pink); white-space:nowrap}
  #intro .meta{font-size:13.5px; color:var(--muted); line-height:1.6;
    border-top:1px solid var(--pale); padding-top:14px; margin:0 0 24px}
  .who{display:flex; flex-direction:column; gap:10px}
  /* a visible label above every field: 14 px, bold, the ink, 4 px above its field (Ola,
     2026-10-01, the form design standard, rule 1); "(optional)" in the regular weight */
  .who label{display:block; font-size:14px; font-weight:700; line-height:1.2; color:var(--ink); margin:0 0 4px}
  .who label .opt{font-weight:400}
  .who input{
    width:100%; font:inherit; font-size:16px; padding:14px 16px; border:1.5px solid var(--line);
    border-radius:10px; background:#fff; color:var(--ink); outline:none;
  }
  .who input::placeholder{color:#8B918A}
  .who input:focus{border-color:var(--pink)}
  .langrow{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); padding:6px 12px 2px; border-top:1px solid var(--pale); margin-top:4px}
  .langrow select{flex:1; font:inherit; font-size:14px; padding:8px 10px; border:1.5px solid var(--pale); border-radius:8px;
    background:#fff; color:var(--ink); outline:none; min-width:0}
  .langrow select:focus{border-color:var(--pink)}
  .langrow[hidden]{display:none}
  #cogMenu{min-width:260px}
  /* START is the middle of three blocks in the intro (form above, small print below), so the
     page's free space splits equally above and below it; a bit larger since 2026-10-01 (Ola:
     "a bit larger and in between the fields below and above"): 148 → 168 px, 132 → 144 on a
     screen under 880 px tall, 104 → 120 under 700 px, unchanged under 650 px. The blocks' gap is
     the only margin. The two thresholds sit 60 and 50 px above the old ones (820 and 600) because
     the bigger button made the heights just under them scroll, by up to 26 px (sweep of every
     height from 540 to 1100 px at 393 wide, 2026-10-01). */
  #startBtn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    width:var(--startMin);   /* a browser without container query units keeps the old size */
    width:clamp(var(--startMin), calc((var(--startMin) + min(100cqh, 100cqw) - 20px) / 2), 220px); height:auto; aspect-ratio:1;
    flex:0 0 auto; border-radius:50%; border:0; cursor:pointer;
    background:var(--pink); color:#fff; margin:0 auto;
    font-family:var(--f); font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 12px 30px rgba(205,58,103,.4); animation:recPulse 2s ease-out infinite;
    transition:transform .1s ease;
  }
  #startBtn:active{transform:scale(.96)}
  @supports not (aspect-ratio:1){ #startBtn{width:var(--startMin); height:var(--startMin)} }   /* before Safari 15: the old fixed circle, not an oval */
  /* START takes the intro's free space (Ola, 2026-10-08, on a 390 x 664 phone: "I like the
     button to be bigger instead of big margins below and above"): its block (.startrow) grows
     into what the form and the small print leave, and START takes half of it (Ola, on the
     before and after: "I want the button in between the two"): halfway between its size for the
     screen's height and as big as the block allows with 10 px around it (the pulse ring has always reached past its block, into the gaps), never smaller than its size for the screen's height
     (--startMin, the old fixed sizes) and never over 220 px. The block is a size container
     (.startbox) so the button can read its height; the Turnstile box sits outside it, and the
     floor is the box's, not the block's, so a challenge that shows under START pushes the
     page down as before instead of drawing START over the form and the checkbox. */
  #intro{--startMin:168px}
  #intro .startrow{flex:1 1 0; display:flex; flex-direction:column}
  #intro .startbox{flex:1 1 0; min-height:var(--startMin); container-type:size; display:flex; align-items:center; justify-content:center}
  #startBtn .mic{width:46px; height:46px; display:block}
  /* typed mode chosen in the cog: same START, mic struck through */
  #startBtn .strike{display:none}
  body.typed-start #startBtn .strike{display:block}
  body.typed-start #startBtn{animation:none}
  #startBtn:disabled{opacity:.6; animation:none; cursor:default}
  /* While the talk connects (Ola, 2026-10-08: "Connecting → 3. Voice bars is good"), START
     keeps its full colour, the mic becomes four bars that rise and fall, and the label reads
     STARTING (Ola, the same evening: "CONNECTING → STARTING might be better"); before, it turned pale and still said START, which read as broken. Keyed to
     body.starting (begin() in app.js), not :disabled, which also marks a page whose form
     failed to load. A typed talk keeps its struck-through mic: bars would promise a voice.
     The mode is the talk's own (body.starting-text), since a Resume takes the saved talk's,
     whatever the intro's typed-start says. */
  body.starting #startBtn:disabled{opacity:1}
  body.starting #startBtn .lbl{display:none}
  body.starting #startBtn .lbl-busy{display:inline; font-size:13px}
  body.starting.starting-text #startBtn .strike{display:block}
  body.starting:not(.starting-text) #startBtn .mic{display:none}
  body.starting:not(.starting-text) #startBtn .bars{display:flex}
  #startBtn .bars{align-items:center; justify-content:center; gap:5px; height:46px}
  #startBtn .bars i{display:block; width:6px; height:10px; border-radius:3px; background:#fff; animation:startBars .9s ease-in-out infinite}
  #startBtn .bars i:nth-child(2){animation-delay:.15s}
  #startBtn .bars i:nth-child(3){animation-delay:.3s}
  #startBtn .bars i:nth-child(4){animation-delay:.45s}
  @keyframes startBars{0%,100%{height:10px} 50%{height:38px}}
  @media (prefers-reduced-motion:reduce){ #startBtn .bars i{animation:none; height:24px} }
  @keyframes recPulse{0%{box-shadow:0 12px 30px rgba(205,58,103,.4), 0 0 0 0 rgba(205,58,103,.35)}
    100%{box-shadow:0 12px 30px rgba(205,58,103,.4), 0 0 0 30px rgba(205,58,103,0)}}
  /* the data notice, the privacy policy and the about page sit together under START */
  #intro .privacy{color:var(--muted); font-size:12px; line-height:1.55; margin:0;
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 14px}
  #intro .privacy details{flex:0 1 auto; min-width:0}
  #intro .privacy details[open]{flex:1 1 100%; text-align:left}
  #intro .privacy summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; color:var(--muted)}
  #intro .privacy summary::-webkit-details-marker{display:none}
  #intro .privacy summary::before{content:''; width:0; height:0; border-left:5px solid var(--muted); border-top:3.5px solid transparent;
    border-bottom:3.5px solid transparent; transition:transform .15s ease}
  #intro .privacy details[open] summary::before{transform:rotate(90deg)}
  #intro .privacy details p{margin:8px 0 2px}
  #intro .privacy > a{color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px}
  /* the cog: everything that is not the main path (typed mode) lives here */
  .cog{position:relative; z-index:2; margin-right:-4px}
  #cogBtn{width:40px; height:40px; border:0; background:none; color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
  #cogBtn svg{width:25px; height:25px; display:block}
  #cogBtn:hover, #cogBtn[aria-expanded="true"]{color:var(--pink)}
  #cogMenu{position:absolute; right:0; top:46px; min-width:230px; background:#fff; border:1.5px solid var(--pale); border-radius:12px;
    padding:8px; box-shadow:0 10px 30px rgba(27,31,35,.14); display:flex; flex-direction:column; gap:4px}
  #cogMenu[hidden]{display:none}
  #cogMenu button{font-family:var(--f); font-weight:700; font-size:14px; text-align:left; border:0; border-radius:8px;
    padding:10px 12px; background:var(--paler); color:var(--ink); cursor:pointer}
  #cogMenu button:hover{background:var(--pale)}
  .cogNote{font-size:11.5px; color:var(--muted); padding:0 12px 4px}
  #intro .micnote{color:var(--muted); font-size:12px; text-align:center; margin:0}
  .sitefoot{display:flex; flex-direction:column; align-items:center; gap:9px; margin:16px 0 0}
  /* the funder, then the credit (Ola, 2026-10-05: the BMZ logo at the bottom, smaller than
     the first try's 124 px, and "Built on Lissenin" again) */
  .sitefoot .bmz{width:121px; height:auto; display:block}   /* 100 → 121 px (Ola's canvas, 2026-10-06) */
  .sitefoot .builton{margin:0; font-size:12px; color:var(--muted)}
  .sitefoot .builton a{color:var(--pink); font-weight:700; text-decoration:none}
  /* the foot as one row (Ola, 2026-10-05): the BMZ logo at the left edge,
     Privacy, About the Planner and Built on Lissenin stacked at the right. The engine's markup
     keeps the links inside .privacy, so .privacy steps out of the box (display:contents) and
     its parts take their places in the foot's grid; its text styles still reach them. */
  .sitefoot{display:grid; grid-template-columns:auto auto; justify-content:space-between; align-items:center; min-height:86px;
    column-gap:16px; row-gap:6px; width:100%}
  #intro .privacy{display:contents}
  /* no data notice on the start screen: the privacy page has it, linked right here (Ola, 2026-10-05:
     "How your data is handled can be taken away. Thats already in privacy") */
  #intro .privacy details{display:none}
  .sitefoot .bmz{grid-column:1; grid-row:1 / span 3; align-self:center}
  #intro .privacy > a, .sitefoot .builton{grid-column:2; justify-self:end; text-align:right; font-size:12px; line-height:1.55}
  #intro .privacy > a[href="privacy"]{grid-row:1}
  #intro .privacy > a[href="about"]{grid-row:2}
  .sitefoot .builton{grid-row:3}
  #tsBox{margin:6px auto 0; display:flex; justify-content:center}
  #tsBox:empty{display:none}
  #introErr{color:var(--red); font-size:13px; font-weight:700; text-align:left; margin:10px 0 0; min-height:18px; white-space:pre-line}
  #introErr:empty{min-height:0; margin:0}

  .resume{background:var(--paler); border:1.5px solid var(--pale); border-radius:10px; padding:11px 13px;
    margin:0 0 12px; font-size:13px; line-height:1.45; display:none}
  .resume.on{display:block}
  .resume b{display:block; margin-bottom:6px}
  .resume .row{display:flex; gap:8px; margin-top:8px}
  .resume button{font-family:var(--f); font-weight:700; font-size:12.5px; border:0; border-radius:10px; padding:9px 13px; cursor:pointer}
  .resume .go{background:var(--ink); color:#fff}
  .resume .over{background:#fff; color:var(--ink); border:1.5px solid var(--pale)}

  /* ---------- done ---------- */
  #done{
    position:absolute; inset:0; background:#fff; display:none; z-index:250;
    flex-direction:column; justify-content:center; padding:30px 26px; overflow:auto;
  }
  body.done #done{display:flex}
  /* the nine dots fill in one by one, then the headline and the line under it rise in
     (Andriy on Be Understood, 2026-09-18: "last screen is empty, show something") */
  #endDots{display:flex; gap:8px; margin:0 0 22px; flex:0 0 auto}
  #endDots i{width:16px; height:16px; border-radius:50%; background:var(--pale); display:block; transform:scale(.6); opacity:.6}
  #endDots i.on{animation:dotIn .45s cubic-bezier(.2,.9,.3,1.3) both}
  @keyframes dotIn{0%{background:var(--pale); transform:scale(.6); opacity:.6}60%{transform:scale(1.25)}100%{background:var(--pink); transform:scale(1); opacity:1}}
  /* caps, as the start screen's heading (Ola, 2026-10-06: "Thanks and Title should be allcaps") */
  #done h2{font-family:var(--fh); font-feature-settings:"ss02" 1; text-transform:uppercase; font-size:37px; font-weight:900; line-height:1.03; letter-spacing:0; margin:15px 0 14px; color:var(--ink); animation:riseIn .6s ease-out 1.1s both}
  #done p{color:var(--muted); font-size:14.5px; line-height:1.6; max-width:420px; margin:0 0 20px}
  #doneText{animation:riseIn .6s ease-out 1.4s both}
  #doneStatus{color:var(--ink); font-weight:700; min-height:1.6em}
  #doneStatus:empty{display:none}
  /* the name and email, asked here once the talk is done (2026-10-05): the start screen's
     fields and labels (.who), START's pink on the button, since it is the one thing left to do */
  #addressForm{width:100%; max-width:460px; margin:0 0 20px; text-align:left}
  #done #addressForm .primary{margin-top:6px; align-self:flex-start; background:var(--pink)}   /* over #done .primary's ink */
  #addressForm .primary:disabled{opacity:.6; cursor:default}
  #addrErr{color:var(--red); font-size:13px; font-weight:700; margin:0}
  #addrErr:empty{display:none}
  #done.err #doneStatus{color:var(--red)}
  @keyframes riseIn{0%{opacity:0; transform:translateY(14px)}100%{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){ #endDots i.on, #done h2, #doneText{animation:none} #endDots i.on{background:var(--pink); transform:none; opacity:1} }
  #doneNotes{text-align:left; width:100%; max-width:460px; margin:0 0 18px; padding:0 0 0 18px; font-size:13.5px; line-height:1.5; color:var(--ink)}
  #doneNotes:empty{display:none}
  #done .primary{font-family:var(--f); font-weight:700; font-size:14px; border:0; border-radius:10px;
    padding:14px 22px; cursor:pointer; background:var(--ink); color:#fff; align-self:flex-start}
  #planPreview{
    text-align:left; width:100%; max-width:460px; background:var(--paler); border:1px solid var(--pale);
    border-radius:10px; padding:16px 18px; margin:0 0 18px; max-height:40vh; overflow:auto;
    font-family:var(--f); font-size:13.5px; line-height:1.6; color:var(--ink); display:none;
  }
  #planPreview.on{display:block}
  /* the plan's title on the done screen: the headline face in caps, over the mail's inline style (Ola, 2026-10-06) */
  #planPreview h1{font-family:var(--fh) !important; font-feature-settings:"ss02" 1; font-weight:900 !important; text-transform:uppercase; letter-spacing:0}
  #copyBtn{font-family:var(--f); font-weight:700; font-size:13.5px; border:1.5px solid var(--pale); border-radius:10px;
    padding:12px 18px; cursor:pointer; background:var(--paler); color:var(--ink); align-self:flex-start; display:none; margin:0 0 18px}
  #copyBtn.on{display:inline-block}
  #copyBtn:active{transform:scale(.98)}

  #banner{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:500;
    background:var(--ink); color:#fff; font-size:13.5px; font-weight:400;
    border-radius:10px; padding:12px 16px; display:none; align-items:center; gap:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.28); max-width:calc(100vw - 32px);
  }
  #banner.on{display:flex}
  #banner button{font-family:var(--f); font-weight:700; font-size:13px; border:0; border-radius:8px;
    padding:8px 12px; cursor:pointer; background:#fff; color:var(--ink); flex:0 0 auto}

  @media (min-width:768px) and (min-height:640px){
    .stage{max-width:720px}
    .deck{width:min(480px,50vh); height:min(480px,50vh)}
    .qs{max-width:520px}
    .qs li{font-size:16px}
  }
  @media (min-width:1100px) and (min-height:820px){
    .deck{width:min(560px,52vh); height:min(560px,52vh)}
  }
  @media (max-height:880px){
    #intro h1{font-size:43px; margin:41px 0 10px}   /* Ola's canvas, 2026-10-06: 42 → 43 px, line height 1.02 → .92, 14 → 41 px above */
    #intro .meta{margin-bottom:14px}
    /* 144, not 150: an iPhone with Safari's bars folded away is 745 px tall, and 150 with a
       22 px gap made that page scroll by 23 px. The field labels of 2026-10-01 cost 62 px
       more, so the gaps here are 12 px and the footer margin 6 (were 16 and 10); the
       heights from 701 to about 800 px scroll even so, by up to 46 px at 745, since only a
       smaller START would give that much back */
    #intro .wrap{gap:12px}
    .who{gap:8px}
    .sitefoot{margin-top:6px}
    #intro{--startMin:144px}
    #done h2{font-size:30px}   /* Ola's canvas, 2026-10-06: 36 → 30 px (44 → 37 on a tall screen), 15 px above */
  }
  /* a returning user has already read the pitch: on a short screen give that
     space back so Resume and START both stay above the fold */
  @media (max-height:780px){
    .resume.on ~ h1, .resume.on ~ .meta{display:none}
    .resume.on ~ .toprow{margin-bottom:2px}
  }
  @media (max-height:700px){
    /* the gaps, margins and the bottom padding are 36 px tighter since the field labels of
       2026-10-01 (62 px), so a 700 px screen still shows the whole start screen; the labels
       themselves keep their size */
    .sitefoot{gap:5px; margin-top:4px}
    #intro h1{font-size:30px; margin:20px 0 16px}   /* 34 → 30 px since the caps of 2026-10-05: three lines; 8/6 → 20/16 px around it (Ola, 2026-10-08: "bigger margins above and below"), back to 8/6 under 650 px */
    #intro .meta{font-size:13px; padding-top:8px; margin-bottom:10px}
    #intro .wrap{gap:10px; padding-top:12px; padding-bottom:calc(28px + env(safe-area-inset-bottom))}
    .who{gap:6px}
    .who input{padding:12px 15px; font-size:15.5px}
    #intro{--startMin:120px}
    #intro .privacy{font-size:11.5px}
  }
  /* the smallest phones (an iPhone SE with Safari's bars is 375 x 553, and the heights up to
     650 px are as tight): 120 px made the intro scroll by up to 22 px, so START keeps its old
     size there */
  @media (max-height:650px){
    #intro{--startMin:104px}
    #intro h1{margin:8px 0 6px}   /* START must stay on an iPhone SE's 553 px */
    body.starting #startBtn .lbl-busy{font-size:12px}   /* STARTING clear of the rim at 104 px */
    .sitefoot{margin-top:2px}   /* the third block costs 6 px of gap here; the small print gives them back */
  }

  /* ---------- typed mode: the same session over text, no microphone ---------- */
  #chat, #typeRow{display:none}
  body.text.live #chat{display:flex}
  body.text.live #typeRow{display:flex}
  body.text .voice, body.text .hint{display:none}
  body.preview.live .hint:not(:empty){display:block; margin:2px 0 4px}   /* the preview's only instructions */
  body.text .deck{width:min(56vw,220px,26vh); height:min(56vw,220px,26vh)}
  body.text .qs{gap:6px} body.text .qs li{font-size:13.5px}
  #chat{
    width:100%; max-width:420px; flex:1 1 auto; min-height:96px; max-height:32vh; overflow:auto;
    flex-direction:column; gap:8px; padding:2px 0; -webkit-overflow-scrolling:touch;
  }
  #chat .msg{max-width:88%; padding:9px 12px; border-radius:12px; font-size:14px; line-height:1.45; white-space:pre-wrap}
  #chat .msg.ai{align-self:flex-start; background:var(--paler); color:var(--ink); border-bottom-left-radius:4px}
  #chat .msg.user{align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:4px}
  #chat .msg.typing{color:var(--muted); font-style:normal}
  #typeRow{width:100%; max-width:420px; gap:8px; align-items:stretch}
  #typeInput{flex:1; font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
    background:#fff; color:var(--ink); outline:none; min-width:0}
  #typeInput:focus{border-color:var(--pink)}
  #typeSend{font-family:var(--f); font-weight:700; font-size:13.5px; border:0; border-radius:10px; padding:0 16px;
    cursor:pointer; background:var(--pink); color:#fff}
  #typeSend:disabled{opacity:.5; cursor:default}

input[hidden]{display:none!important}

  /* ---------- the intro across devices (responsive pass, 2026-09-29) ---------- */
  /* On a phone START sits low, where the thumb is. A tablet or desktop screen is tall enough
     to show everything at once, and there the same space-between left a hole between the
     form and START: keep them together in the middle instead. */
  @media (min-width:700px) and (min-height:860px){
    #intro .wrap{justify-content:center; gap:30px; padding-top:40px}   /* 44 → 30 px for the partner row (2026-10-05) */
    #intro h1{font-size:60px}
    #intro .meta{font-size:15.5px}
  }
  /* Touch: the small print links are 15 to 19 px tall. Grow what a finger can hit, not what
     the eye sees; the negative margin keeps the layout where it was. */
  @media (pointer:coarse){
    #intro .privacy summary, #intro .privacy > a, .sitefoot .builton a{padding:8px 4px; margin:-8px -4px}
  }
  /* A phone on its side: too short for the card, the talk and the buttons, and a two-column
     version read worse than asking (Ola, 2026-09-29). Only a touch screen under 500 px tall
     sees it, so a short desktop window never does. It covers the page but stops nothing: a
     spoken talk carries on, and turning the phone back shows it again. */
  #turnPhone{display:none}
  @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
    #turnPhone{position:fixed; inset:0; z-index:1000; background:#fff; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:10px; padding:24px; text-align:center}
    #turnPhone svg{width:92px; height:92px; margin-bottom:6px}
    #turnPhone .phone{transform-origin:48px 48px; animation:turnUpright 2.6s cubic-bezier(.16,1,.3,1) infinite}
    #turnPhone h2{font-family:var(--fh); font-feature-settings:"ss02" 1; margin:0; font-size:26px; font-weight:900; letter-spacing:-.015em; color:var(--ink)}
    #turnPhone p{margin:0; font-size:15px; color:var(--muted)}
    #turnPhone .live{display:none}
    body.live #turnPhone .live{display:block}
  }
  @keyframes turnUpright{0%,18%{transform:rotate(-90deg)} 55%,100%{transform:rotate(0)}}
  @media (prefers-reduced-motion:reduce){ #turnPhone .phone{animation:none} }