/* zippr homepage, the long scroll: each screen's picture. Every screen carries its own copy of its scene (stage.js):
   beside its words on a wide screen, above or below them on a phone. Nothing is pinned and nothing splits the page.
   Without motion (or without script) every scene shows its finished picture. The scenes' pieces are drawn here; the
   page's new layout is at the foot of this file. */

:root{
  --st-stamp:#2A50D6;
  --st-pad:clamp(14px,5cqw,36px);
  --st-ease:cubic-bezier(.22,1,.36,1);
  --st-pop:cubic-bezier(.3,1.45,.5,1);
}

/* ---------- the stage in the markup is only where each screen's picture is copied from: never shown ---------- */
.st-col{display:none;}
.t1-words{min-width:0;}

/* each screen's words: one idea, centred beside the stage */
.t1 .screen,.t1 .scr{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:66svh;
  padding-block:clamp(2rem,6vh,4rem);}
.t1 .screen > *,.t1 .scr > *{max-width:100%;}
.t1-words > section:first-of-type{min-height:calc(100svh - var(--top-h,64px));justify-content:center;padding-top:.5rem;}
.t1-words > section:last-of-type{min-height:84svh;}
.t1 .title{max-width:13ch;}
.t1 .say{max-width:30ch;}

/* the sentence Dot says on the first screen: a speech bubble whose tail points across at Dot on the stage */
.t1 .speech{position:relative;margin-top:clamp(1rem,2.4vh,1.6rem);max-width:28ch;padding:1rem 1.2rem;border-radius:20px;
  background:var(--sheet);box-shadow:var(--shadow,0 1px 0 var(--line),0 24px 50px -34px rgba(var(--ink-rgb),.45));
  font-size:var(--step-1);line-height:1.42;color:var(--ink);text-wrap:pretty;}
.t1 .speech::after{content:"";position:absolute;top:calc(50% - 10px);right:-9px;bottom:auto;left:auto;width:20px;height:20px;
  background:var(--sheet);transform:rotate(45deg);border-radius:0 5px 0 0;}
@media (min-width:861px){.t1 .speech{font-size:var(--step-2);}}

/* ---------- the stage: a small room with Dot in it ---------- */
.st{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:28px;container:st / size;
  --wall:var(--wall-base);--floor:17cqh;--dw:clamp(62px,18cqw,124px);
  background-color:var(--wall);transition:background-color .9s var(--st-ease);
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.06),0 30px 60px -44px rgba(var(--shadow-rgb),.55);}
.st-room{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 52% 40%,rgba(var(--room-glow-rgb),var(--room-glow-a)),rgba(var(--room-glow-rgb),0) 72%),
    linear-gradient(180deg,rgba(255,255,255,0) calc(100% - var(--floor)),rgba(var(--ink-rgb),.055) calc(100% - var(--floor)));}
.st-room::before{content:"";position:absolute;left:0;right:0;bottom:var(--floor);height:1.5px;background:rgba(var(--ink-rgb),.1);}
.st[data-on="split"],.st[data-on="yours"],.st[data-on="pick"]{--wall:var(--wall-split);}
.st[data-on="runs"]{--wall:var(--wall-runs);}
.st[data-on="film29"],.st[data-on="film35"],.st[data-on="strip"]{--wall:var(--wall-film);}
.st[data-on="crew"]{--wall:var(--wall-crew);}
.st[data-on="calm"],.st[data-on="rest"]{--wall:var(--wall-rest);}

/* a scene: its pieces sit inside the room; only the scene on show is visible */
.st-layer{position:absolute;inset:var(--st-pad);display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .38s ease-out,visibility 0s linear .4s;}
.st[data-on="stamps"] .l-asks,.st[data-on="rest"] .l-asks,.st[data-on="split"] .l-tiles,.st[data-on="crew"] .l-tiles,
.st[data-on="runs"] .l-runs,.st[data-on="film29"] .l-film,.st[data-on="film35"] .l-film,
.st[data-on="yours"] .l-yours,.st[data-on="pick"] .l-yours,.st[data-on="strip"] .l-strip{
  opacity:1;visibility:visible;transition:opacity .5s ease-out .1s,visibility 0s;}

/* ---------- Dot, and the three agents who join on the build screen ---------- */
.st-dot,.st-mate{position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  transition:translate .8s var(--st-ease),width .8s var(--st-ease),scale .2s ease-out,rotate .2s ease-out,opacity .5s;}
.st-dot{width:var(--dw);aspect-ratio:200/208;translate:var(--dx) var(--dy);}
.st-dot img{position:absolute;left:0;bottom:0;width:100%;height:auto;transition:opacity .25s;}
.st-dot .d-glad{width:118%;left:-9%;opacity:0;}
.st-dot .d-hope{width:92%;left:4%;opacity:0;}
.st-dot[data-pose="glad"] .d-hero,.st-dot[data-pose="hope"] .d-hero{opacity:0;}
.st-dot[data-pose="glad"] .d-glad,.st-dot[data-pose="hope"] .d-hope{opacity:1;}
.st-dot.is-pressing{scale:.93 1.05;rotate:-7deg;transition-duration:.8s,.8s,.12s,.12s,.5s;}
/* the shadow under Dot, when Dot stands on the floor */
.st-dot::after,.st-mate::after{content:"";position:absolute;left:14%;right:14%;bottom:-5%;height:9%;border-radius:50%;
  background:rgba(var(--shadow-rgb),.16);opacity:var(--ground-shadow,0);transition:opacity .4s;z-index:-1;}

.st-mate{width:calc(var(--dw) * .7);aspect-ratio:200/208;opacity:0;translate:var(--mx,50cqw) calc(100cqh + 12px);}
.st-mate img{position:absolute;left:0;bottom:0;width:100%;height:auto;}
.st-mate i{position:absolute;right:-4%;top:6%;display:grid;place-items:center;width:clamp(18px,24%,26px);aspect-ratio:1;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font:700 clamp(11px,3cqw,14px)/1 var(--body);font-style:normal;box-shadow:0 0 0 2px var(--wall);}

/* where Dot stands in each scene (the room is a size container: cqw/cqh are the room's own width and height).
   Two lines on the floor give depth: --ft, where the back row stands, and --fb, where the front row stands. */
.st{--ft:calc(100cqh - var(--floor));--fb:calc(100cqh - var(--front,6cqh));
  --film-h:.86;--film-w:calc((100cqh - 2 * var(--st-pad)) * var(--film-h) * 9 / 16);
  --cx:calc(var(--st-pad) + (100cqw - 2 * var(--st-pad) - var(--film-w)) / 2);
  --dx:calc(100cqw - var(--st-pad) - var(--dw));--dy:calc(50cqh - var(--dw) * .55);}
.st[data-on="split"],.st[data-on="yours"],.st[data-on="pick"],.st[data-on="runs"]{--dw:clamp(54px,14cqw,96px);
  --dx:calc(100cqw - var(--st-pad) - var(--dw));--dy:calc(var(--st-pad) - 4px);}
.st[data-on="film29"],.st[data-on="film35"]{--dw:clamp(56px,16cqw,104px);--dx:calc(var(--cx) - var(--dw) * .5);--dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
.st[data-on="film35"]{--dx:calc(var(--cx) - var(--dw) * .88);}
.st[data-on="calm"],.st[data-on="rest"]{--dw:clamp(84px,29cqw,200px);--dx:calc(50cqw - var(--dw) / 2);--dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
.st[data-on="calm"]{--dx:calc(50cqw - var(--dw) * .72);}
.st[data-on="strip"]{--dw:clamp(48px,11cqw,76px);--dx:calc(var(--st-pad) - 2px);--dy:calc(var(--st-pad) - 6px);}
.st[data-on="crew"]{--dw:clamp(52px,13cqw,88px);--dx:var(--st-pad);--dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
.st-dot.is-stamping{transition-duration:.42s,.8s,.12s,.12s,.5s;}

/* the agents arrive on the build screen and stay for the calm at the end */
.st[data-on="film35"] .st-mate,.st[data-on="calm"] .st-mate,.st[data-on="crew"] .st-mate{opacity:1;--ground-shadow:1;
  transition:translate .75s var(--st-pop),width .8s var(--st-ease),opacity .3s;}
.st[data-on="film35"] .m2{transition-delay:.25s;}
.st[data-on="film35"] .m3{transition-delay:.45s;}
.st[data-on="film35"] .m4{transition-delay:.65s;}
.st-mate.m4{z-index:4;}
.st[data-on="film35"] .st-mate{--mw:calc(var(--dw) * .72);width:var(--mw);}
.st[data-on="film35"] .m2{translate:calc(var(--cx) - var(--mw) * 1.45) calc(var(--ft) - var(--mw));}
.st[data-on="film35"] .m3{translate:calc(var(--cx) + var(--mw) * .55) calc(var(--ft) - var(--mw));}
.st[data-on="film35"] .m4{translate:calc(var(--cx) + var(--dw) * .18) calc(var(--fb) - var(--mw));}
.st[data-on="calm"] .st-mate{--mw:calc(var(--dw) * .64);width:var(--mw);}
.st[data-on="calm"] .m2{translate:calc(50cqw - var(--dw) * 1.55) calc(var(--ft) - var(--mw));}
.st[data-on="calm"] .m3{translate:calc(50cqw + var(--dw) * 1.05) calc(var(--ft) - var(--mw));}
.st[data-on="calm"] .m4{translate:calc(50cqw + var(--dw) * .3) calc(var(--fb) - var(--mw));}

@container st (min-height:520px){
  .st-layer{bottom:calc(var(--floor) + 10px);}
  .l-film{bottom:var(--st-pad);}
  .st[data-on="split"] .st-dot,.st[data-on="yours"] .st-dot,.st[data-on="pick"] .st-dot,.st[data-on="runs"] .st-dot{
    --dx:calc(100cqw - var(--st-pad) - var(--dw) * 1.15);--dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
  .st[data-on="split"] .st-job,.st[data-on="yours"] .st-job{max-width:100%;}
  .st .l-runs{justify-content:center;padding-top:0;}
}

/* ---------- 1 · one long message, in one chat: it splits into its tasks, each one known, then it's done ---------- */
.st[data-on="stamps"]{--dw:clamp(52px,15cqw,100px);--dx:calc(100cqw - var(--st-pad) - var(--dw) * 1.05);--dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
.l-asks{justify-content:center;}
.st-chat{display:flex;flex-direction:column;gap:clamp(7px,1.8cqh,14px);width:100%;max-width:34rem;}
.st-msg{--mx:clamp(.75rem,3cqw,1.15rem);--my:clamp(.55rem,2cqw,.85rem);position:relative;align-self:flex-start;max-width:100%;
  padding:var(--my) var(--mx);border-radius:18px 18px 18px 6px;background:var(--ink-surface);color:var(--on-ink);
  font-family:var(--display);font-size:clamp(14.5px,3.9cqw,21px);font-weight:600;letter-spacing:-.01em;line-height:1.32;
  box-shadow:0 18px 36px -24px rgba(var(--shadow-rgb),.7);}
.st-msg-text{transition:color .2s;}
.st-msg-typed{position:absolute;left:var(--mx);right:var(--mx);top:var(--my);pointer-events:none;}
.st-msg.is-typing .st-msg-typed::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:currentColor;}
.st-stamp{position:absolute;right:clamp(10px,3cqw,18px);top:calc(-1 * clamp(18px,4.6cqw,24px));padding:.2rem .45rem .16rem;
  border:2px solid var(--st-stamp);border-radius:7px;background:var(--sheet);color:var(--st-stamp);
  font:800 clamp(11px,2.9cqw,14px)/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-8deg);
  box-shadow:0 6px 14px -8px rgba(var(--shadow-rgb),.5);transition:opacity .16s ease-out,transform .28s var(--st-pop);}
.st-split{display:grid;gap:clamp(4px,1.1cqh,8px);list-style:none;}
.st-task{display:flex;align-items:center;gap:clamp(.4rem,1.6cqw,.65rem);min-height:clamp(34px,8cqh,52px);
  padding:.3rem clamp(.4rem,1.6cqw,.6rem) .3rem clamp(.5rem,2cqw,.8rem);border-radius:12px;background:var(--sheet);
  box-shadow:0 1px 0 var(--line),0 12px 24px -20px rgba(var(--shadow-rgb),.5);transition:opacity .3s,transform .55s var(--st-ease);}
.st-tick{position:relative;flex:none;width:clamp(18px,4.2cqw,24px);aspect-ratio:1;border-radius:50%;
  background:var(--code) no-repeat center/58% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3L11 1' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  transition:background-color .2s,box-shadow .2s;}
.st-task-name{flex:1;min-width:0;font-family:var(--display);font-size:clamp(14px,3.8cqw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.st-known{flex:none;padding:.14rem .5rem;border-radius:999px;background:var(--known-bg);color:var(--known-ink);
  font-size:clamp(11px,2.7cqw,13.5px);font-weight:700;line-height:1.35;white-space:nowrap;transition:opacity .2s ease-out,scale .32s var(--st-pop);}
.st-line{margin-top:clamp(2px,.8cqh,6px);font-family:var(--display);font-size:clamp(15px,4cqw,21px);font-weight:600;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);transition:opacity .4s ease-out;}
/* the second screen of the long page: the same message, done, above Dot */
.st[data-on="rest"] .l-asks{justify-content:flex-start;padding-top:max(16px,5cqh);}
.st[data-on="rest"] .st-chat{max-width:min(84cqw,30rem);margin-inline:auto;}
.st[data-on="rest"] .st-split,.st[data-on="rest"] .st-line{display:none;}

/* ---------- 2 · one job, split into its tasks ---------- */
.l-tiles{justify-content:center;gap:clamp(8px,2.4cqh,16px);}
.st-job{align-self:flex-start;max-width:calc(100% - var(--dw) - 2cqw);padding:.6rem .95rem;border-radius:14px;background:var(--ink-surface);color:var(--on-ink);
  font-family:var(--display);font-size:clamp(16px,4.4cqw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.2;
  box-shadow:0 18px 36px -24px rgba(var(--shadow-rgb),.7);transform-origin:0 0;}
.st-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(5px,1.5cqh,10px);}
.st-tile{display:flex;align-items:center;justify-content:space-between;gap:.3rem;min-height:clamp(32px,9.6cqh,58px);
  padding:.25rem .4rem .25rem clamp(.55rem,2.2cqw,1rem);border-radius:11px;background:var(--sheet);
  box-shadow:0 1px 0 var(--line),0 12px 24px -20px rgba(var(--shadow-rgb),.5);
  transition:opacity .3s,transform .55s var(--st-ease);}
.st-tile-name{min-width:0;font-family:var(--display);font-size:clamp(14.5px,3.9cqw,21px);font-weight:600;letter-spacing:-.01em;line-height:1.15;}
.st-tile .tn{margin-right:.35rem;font-size:clamp(11px,2.8cqw,13px);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.st-tile .tag{flex:none;padding:.12rem .45rem;border-radius:999px;font-size:clamp(11px,2.9cqw,14px);font-weight:700;line-height:1.35;white-space:nowrap;
  grid-column:auto;justify-self:auto;transition:opacity .2s ease-out,scale .32s var(--st-pop);}
.st-tile .tag-ai{background:var(--ai-bg);color:var(--ai-ink);box-shadow:inset 0 0 0 1px var(--ai-line);}
.st-tile .tag-made{background:var(--code);color:var(--on-code);box-shadow:none;}
/* the long page's "why build it in the open": the four agents at work on the same job */
.st[data-on="crew"] .l-tiles{justify-content:flex-start;padding-bottom:calc(var(--floor) - var(--st-pad) + var(--dw) * .6);}
.st[data-on="crew"] .st-job{margin-left:0;}
.st[data-on="crew"] .st-tile.is-worked{box-shadow:inset 0 0 0 2px var(--accent),0 12px 24px -20px rgba(var(--shadow-rgb),.5);}
.st[data-on="crew"] .m2{translate:calc(var(--st-pad) + var(--dw) * 1.1) calc(var(--fb) - var(--mw));}
.st[data-on="crew"] .m3{translate:calc(var(--st-pad) + var(--dw) * 2) calc(var(--fb) - var(--mw));}
.st[data-on="crew"] .m4{translate:calc(var(--st-pad) + var(--dw) * 2.9) calc(var(--fb) - var(--mw));}
.st[data-on="crew"] .st-mate{--mw:calc(var(--dw) * .82);width:var(--mw);}

/* ---------- 3 · one task, run twice ---------- */
.l-runs{justify-content:flex-end;padding-top:calc(var(--dw) * .9);}
.st-runcard{padding:clamp(.8rem,3.4cqw,1.6rem);border-radius:20px;background:var(--sheet);box-shadow:0 1px 0 var(--line),0 24px 50px -34px rgba(var(--shadow-rgb),.45);transform-origin:0 0;}
.st-run-task,.l-runs .run-name{font-family:var(--display);font-size:clamp(16px,4.5cqw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0;}
.st-run-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,3cqw,1.2rem);margin-top:clamp(.4rem,1.6cqh,.9rem);}
.st-run{padding-top:clamp(.4rem,1.4cqh,.8rem);border-top:1px solid var(--line);}
.st-run-label{display:flex;align-items:center;gap:.5rem;font-size:clamp(13.5px,3.6cqw,16px);font-weight:700;color:var(--ink);}
.st-run .clock{flex:none;width:clamp(30px,9cqw,56px);height:clamp(30px,9cqw,56px);}
.st-steps{display:grid;gap:0;margin-top:clamp(.25rem,1cqh,.55rem);}
.st-steps li{display:flex;align-items:center;gap:.45rem;min-height:clamp(26px,7.4cqh,44px);font-size:clamp(14px,3.8cqw,17.5px);font-weight:500;line-height:1.2;}
.st-steps .tick{width:clamp(16px,4.4cqw,22px);height:clamp(16px,4.4cqw,22px);}
.st-steps .tick::after{left:calc(50% - 3px);top:calc(50% - 6px);}

/* ---------- 4, 5 · the films play on the stage ---------- */
.l-film{display:block;}
.st-screen{position:absolute;right:0;bottom:0;height:calc(var(--film-h) * 100%);aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--screen);
  box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(var(--shadow-rgb),.65);transform-origin:50% 60%;transition:transform .7s var(--st-ease);}
.st:not([data-on="film29"]):not([data-on="film35"]) .st-screen{transform:scale(.94) translateY(12px);}
.st-film{position:absolute;inset:0;justify-self:stretch;align-self:stretch;opacity:0;transition:opacity .5s ease-out;}
.st-film .film-media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;
  background-color:var(--screen);background-size:cover;background-position:center;}
.st-film video{display:block;width:100%;height:100%;object-fit:cover;}
.st[data-on="film29"] .st-film[data-film="film29"],.st[data-on="film35"] .st-film[data-film="film35"]{opacity:1;}
/* under reduced motion a film waits for a tap: its play mark shows until then */
.st-film.is-still .film-media{cursor:pointer;}
.st-film.is-still .film-media::after{content:"";position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  background:rgba(22,33,58,.74) no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1l8 5-8 5z' fill='white'/%3E%3C/svg%3E");}


/* ================= the long page: its extra scenes and its words ================= */
/* its words: the title-card sizes of the base, fitted to the half column */
.t1-b .title{font-size:clamp(2.5rem,calc(1.5rem + 3.6vw),4.9rem);max-width:13ch;}
.t1-b .scr-hero .title{font-size:clamp(2.5rem,calc(1.45rem + 3.4vw),4.6rem);line-height:1.02;max-width:12ch;}
.t1-b .scr-card .say{max-width:30ch;margin-top:clamp(.6rem,1.6vh,1rem);padding-bottom:0;}
.t1-b .job-steps{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
.t1-b .sheet{width:100%;}
.t1-b .strip-note{margin-top:clamp(.8rem,2vh,1.2rem);font-size:var(--step--1);font-weight:600;color:var(--muted);}
.t1-b .ask-card{display:block;}
.t1-b .ask-card .signup{margin-top:clamp(1.2rem,3vh,1.8rem);}

/* the one link to the founder, in the build screen's sentence */
.founder-inline{color:var(--link);font-weight:600;text-underline-offset:3px;}

/* 4, 5 · the film (in place of the numbered boxes): tall in a tall stage and on a phone, wide in a wide stage.
   It plays muted when on screen, with a button for sound; Dot is in the film, so the stage's Dot steps out */
.l-yours{display:block;}
@container st (min-height:520px){.l-yours{bottom:var(--st-pad);}}
.st-screen2{position:absolute;inset:0;margin:auto;height:100%;max-width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  background:var(--film-paper);box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(var(--shadow-rgb),.55);}
.st-screen2:has(.is-wide){height:auto;width:100%;aspect-ratio:16/9;}
.st-film-own .film-media{background-color:var(--film-paper);}
.st[data-on="yours"] .st-film-own,.st[data-on="pick"] .st-film-own{opacity:1;}
.st[data-on="yours"] .st-dot,.st[data-on="pick"] .st-dot{opacity:0;}
.st-snd{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:0 .95rem 0 .75rem;border:0;border-radius:999px;cursor:pointer;background:rgba(12,19,34,.8);color:#fff;font:600 15px/1 var(--body);}
.st-snd:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.st-snd-icon{position:relative;width:18px;height:14px;flex:none;}
.st-snd-icon::before{content:"";position:absolute;left:0;top:4px;width:5px;height:6px;background:currentColor;border-radius:1px;}
.st-snd-icon::after{content:"";position:absolute;left:3px;top:0;border-style:solid;border-width:7px 7px 7px 0;
  border-color:transparent currentColor transparent transparent;}
.st-snd[aria-pressed="false"] .st-snd-icon{background:linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%) 10px 2px/9px 10px no-repeat;}
.st-snd[aria-pressed="true"] .st-snd-icon{background:radial-gradient(circle at 0 50%,transparent 5px,currentColor 5px,currentColor 6.5px,transparent 6.5px) 11px 1px/8px 12px no-repeat;}

/* 6 · the long page's two run cards, side by side on the stage */
.l-runs .st-runs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2.4cqw,16px);}
.l-runs .st-runs .run{grid-area:auto;opacity:1;translate:none;padding:clamp(.7rem,3cqw,1.4rem);border-radius:18px;}
.l-runs .st-runs .run-next{opacity:1;translate:none;}
.l-runs .run-head{gap:.5rem;}
.l-runs .chip{min-height:26px;padding:0 .6rem;font-size:clamp(12px,3.2cqw,13.5px);}
.l-runs .st-runs .clock{width:clamp(30px,8cqw,46px);height:clamp(30px,8cqw,46px);}
.l-runs .run-name{margin-top:clamp(.35rem,1.2cqh,.7rem);font-size:clamp(15px,4.2cqw,22px);}
.l-runs .rsteps{margin-top:clamp(.25rem,1cqh,.6rem);}
.l-runs .rsteps li{gap:.5rem;min-height:clamp(28px,7.5cqh,42px);font-size:clamp(14px,3.8cqw,17px);line-height:1.2;}
.l-runs .rsteps .tick{width:clamp(18px,4.6cqw,22px);height:clamp(18px,4.6cqw,22px);}
.l-runs .rsteps .tick::after{left:calc(50% - 3px);top:calc(50% - 7px);}

/* 9 · the films and websites we made: a grid that scrolls with the page, never a sideways row (people's sideways
   swipes on a row sent the browser back and forth). The four films in one row, the four websites under them; each
   card opens its breakdown, and "Open as a page" is its second way in. On a wide screen the grid fits the stage (the
   card size is set by the stage's width or height, whichever is tighter); on a phone it is the screen's picture,
   two across, under the words (below). Dot steps out of this scene. */
.l-strip{justify-content:center;}
.st[data-on="strip"] .st-dot{opacity:0;}
.l-strip .strip{animation:none;}
.reel{--gap:clamp(8px,2.2cqw,14px);--lab:104px;
  --cw:min(calc((100cqw - 2 * var(--st-pad) - 3 * var(--gap)) / 4),calc((100cqh - 2 * var(--st-pad) - 2 * var(--lab) - var(--gap)) / 2.403));
  display:grid;grid-template-columns:repeat(4,var(--cw));justify-content:center;align-items:start;gap:var(--gap);
  width:auto;padding:0;list-style:none;}
.reel-item{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
/* each card's second way in: its task on the making-of page, as a page of its own */
.as-page{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;font-size:clamp(12.5px,2.7cqw,14.5px);font-weight:600;color:var(--link);
  line-height:1.2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.as-page::after{content:"";flex:none;width:6px;height:6px;margin-top:1px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.as-page:hover{text-decoration-thickness:2px;}
.reel .film-open{display:flex;flex-direction:column;gap:.45rem;width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;border-radius:14px;}
.reel .film-media{position:relative;display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background-color:var(--screen);
  background-size:cover;background-position:center;box-shadow:0 1px 0 var(--line),0 20px 40px -26px rgba(var(--shadow-rgb),.6);transition:transform .25s var(--st-ease);}
.reel .film-media video{display:block;width:100%;height:100%;object-fit:cover;}
.reel .site-shot{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--sheet);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1),0 20px 40px -26px rgba(var(--shadow-rgb),.6);transition:transform .25s var(--st-ease);}
.reel .site-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;}
.reel .film-open:hover .film-media,.reel .film-open:hover .site-shot{transform:translateY(-3px);}
.reel-label{display:block;width:100%;min-height:2.5em;font-family:var(--display);font-size:clamp(13px,2.9cqw,15.5px);font-weight:600;
  line-height:1.25;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere;}
.reel-label b{display:block;margin-bottom:.1rem;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ai-ink);}
.reel-sound{margin:0;font-size:var(--step-0);line-height:1.45;color:var(--ink);}
.reel-lead .st-snd{position:static;align-self:flex-start;justify-self:start;}
@container st (min-height:520px){.l-strip{bottom:var(--st-pad);}}

/* each screen's two copies of its picture: the phone's shows on a phone, the wide one on a wider screen */
.st-flow{display:none;}

/* ---------- phones: one ordinary column. Each screen shows its picture, then its words; nothing is pinned ---------- */
@media (max-width:768px){
  .t1{padding-inline:0;}
  .t1-words{grid-column:1;grid-row:1;padding-inline:var(--gutter);position:relative;}
  .t1 .screen,.t1 .scr{min-height:0;padding-block:1.4rem 2rem;}
  .t1-words > section:first-of-type{min-height:0;padding-top:.4rem;}
  .t1-words > section:last-of-type{min-height:0;padding-bottom:2.6rem;}
  .t1 .speech{max-width:none;}
  .t1 .speech::after{display:none;}
  /* the picture: the same room, sized to its scene, above the words */
  .st.st-flow{display:block;flex:none;width:100%;height:var(--sh,280px);margin:0 0 1.2rem;border-radius:22px;
    --st-pad:14px;--front:14px;--floor:20cqh;--film-h:.86;}
  /* each screen's picture height, set on the screen so its room can be kept before the script puts the picture in */
  .t1-words > section[data-scene="stamps"]{--sh:388px;}
  .t1-words > section[data-scene="rest"]{--sh:268px;}
  .t1-words > section[data-scene="split"]{--sh:300px;}
  .t1-words > section[data-scene="yours"]{--sh:min(600px,76svh);}
  .t1-words > section[data-scene="pick"]{--sh:0px;}
  .t1-words > section[data-scene="runs"]{--sh:292px;}
  .t1-words > section[data-scene="film29"],.t1-words > section[data-scene="film35"]{--sh:min(470px,64svh);}
  .t1-words > section[data-scene="crew"]{--sh:330px;}
  .t1-words > section[data-scene="calm"]{--sh:220px;}
  /* until then, the room is kept, so the words don't jump down when the picture arrives */
  .js .t1-words > section:not(.has-pic){padding-top:calc(var(--sh,0px) + 2.6rem);}
  .js .t1-words > section:first-of-type:not(.has-pic){padding-top:calc(var(--sh,0px) + 1.6rem);}
  .js .t1-words > section[data-scene="pick"]:not(.has-pic){padding-top:1.4rem;}
  .st-flow[data-on="stamps"] .st-line{padding-right:calc(var(--dw) * 1.15);}
  .st.st-flow.st-none{display:none;}
  /* 9 · the films and websites: the screen's picture, like every other screen's, then its words; two across and as
     tall as it needs. Its room (the grid's height at this width) is kept until the script puts it in */
  .t1-words > section[data-scene="strip"]{--sh:calc((100vw - 2 * var(--gutter) - 40px) / 2 * 4.806 + 482px);}
  .st.st-flow[data-on="strip"]{height:auto;container-type:inline-size;}
  .st-flow[data-on="strip"] .st-room{display:none;}
  .st-flow[data-on="strip"] .l-strip{position:relative;inset:auto;padding:var(--st-pad);}
  .st-flow[data-on="strip"] .reel{--cw:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;}
  .st-flow[data-on="strip"] .reel-label{font-size:15px;}
  .st-flow[data-on="strip"] .as-page{font-size:14.5px;}
}

/* ---------- motion: the scenes' starting states, only when the visitor allows motion (html.motion) ---------- */
.motion .l-asks .st-msg:not(.is-typed) .st-msg-text{color:transparent;}
.motion .l-asks .st-msg:not(.is-stamped) .st-stamp{opacity:0;transform:rotate(-8deg) scale(1.9);}
.motion .l-asks .st-task:not(.is-out){opacity:0;transform:translate(var(--cx,0),var(--cy,0)) scale(.35);}
.motion .l-asks .st-task:not(.is-known) .st-known{opacity:0;scale:.5;}
.motion .l-asks .st-task:not(.is-done) .st-tick{background:transparent;box-shadow:inset 0 0 0 1.6px var(--line-strong);}
.motion .l-asks .st-chat:not(.is-lined) .st-line{opacity:0;}
.motion .l-tiles .st-tile:not(.is-out){opacity:0;transform:translate(var(--cx,0),var(--cy,0)) scale(.35);}
.motion .l-tiles .st-tile:not(.is-tagged) .tag{opacity:0;scale:.5;}
.motion .l-runs .st-steps li:not(.is-ticked) .tick{background:transparent;box-shadow:inset 0 0 0 1.6px var(--line-strong);transform:scale(.9);}
.motion .l-runs .st-steps li:not(.is-ticked) .tick::after{opacity:0;}
.motion .l-runs .st-steps li{transition:color .2s;}
.motion .l-runs .st-steps li:not(.is-ticked){color:var(--muted);}
.motion .l-runs .st-run:not(.is-going) .arc{stroke-dashoffset:50.27;}
.motion .l-runs .st-run:not(.is-going) .hand{transform:rotate(0deg);}
.motion .l-runs .run-1.is-going .arc,.motion .l-runs .run-1.is-going .hand{transition:stroke-dashoffset 3.6s linear,transform 3.6s linear;}
.motion .l-runs .run-2.is-going .arc,.motion .l-runs .run-2.is-going .hand{transition:stroke-dashoffset .4s linear,transform .4s linear;}

@media (prefers-reduced-motion:reduce){
  .st,.st-layer,.st-dot,.st-mate,.st-dot img,.st-screen,.st-film,.st-msg-text,.st-stamp,.st-task,.st-known,.st-tick,.st-line,.st-tile{transition:none !important;}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* each screen's words rise in as they arrive */
    .t1-words > section:not(:first-of-type) > :not(.st-flow){animation:t1-rise linear both;animation-timeline:view();animation-range:entry 0% entry 90px;}
    @keyframes t1-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
  }
}

/* ---------- the hero, "a real chat": the visitor's message is sent; zippr answers twice, first with the tasks done
   before (ticked at once), then with the new ones, handed to agents (working, then done). Without motion the whole
   exchange shows, finished. ---------- */
.v-chat .st-chat{gap:clamp(8px,1.9cqh,14px);}
.v-chat .st-msg{align-self:flex-end;max-width:90%;border-radius:18px 18px 6px 18px;}
.v-chat .st-stamp{display:none;}
.v-chat .ch-slot{position:relative;align-self:flex-start;max-width:86%;}
.v-chat .ch-say,.v-chat .ch-dots{border-radius:18px 18px 18px 6px;background:var(--sheet);
  box-shadow:0 1px 0 var(--line),0 14px 28px -22px rgba(var(--shadow-rgb),.55);}
.v-chat .ch-say{padding:clamp(.55rem,2cqw,.85rem) clamp(.75rem,3cqw,1.15rem);transition:opacity .3s ease-out,translate .45s var(--st-ease);}
.v-chat .ch-who{margin-bottom:.15rem;font:700 clamp(12px,2.9cqw,13.5px)/1.2 var(--body);letter-spacing:.02em;color:var(--ai-ink);}
.v-chat .ch-text{font-family:var(--display);font-size:clamp(14.5px,3.9cqw,21px);font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink);text-wrap:balance;}
.v-chat .ch-list{display:grid;gap:clamp(3px,.8cqh,7px);margin-top:clamp(.4rem,1.5cqh,.75rem);list-style:none;}
.v-chat .ch-list li{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:clamp(14px,3.6cqw,18px);font-weight:500;
  line-height:1.25;color:var(--ink);transition:color .2s;}
.v-chat .ch-list .st-tick{width:clamp(17px,3.9cqw,21px);}
/* zippr typing: shown only in the moment before each answer */
.v-chat .ch-dots{position:absolute;left:0;top:0;display:flex;gap:5px;padding:.85rem 1rem;opacity:0;visibility:hidden;}
.v-chat .ch-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);}
.v-chat .ch-slot.is-thinking .ch-dots{opacity:1;visibility:visible;}
.v-chat .ch-slot.is-thinking .ch-dots i{animation:ch-dot .9s ease-in-out infinite;}
.v-chat .ch-slot.is-thinking .ch-dots i:nth-child(2){animation-delay:.15s;}
.v-chat .ch-slot.is-thinking .ch-dots i:nth-child(3){animation-delay:.3s;}
@keyframes ch-dot{0%,60%,100%{opacity:.35;translate:0 0;}30%{opacity:1;translate:0 -3px;}}
/* the second screen shows the message as it is on the live page: done */
.st[data-on="rest"] .v-chat .ch-slot{display:none;}
.st[data-on="rest"] .v-chat .st-stamp{display:block;}
@media (max-width:768px){.t1-words > section[data-scene="stamps"]{--sh:470px;}}

.motion .v-chat .ch-slot:not(.is-in) .ch-say{opacity:0;translate:0 10px;}
.motion .v-chat .ch-list li:not(.is-done){color:var(--muted);}
.motion .v-chat .ch-list li:not(.is-done) .st-tick{background:transparent;box-shadow:inset 0 0 0 1.6px var(--line-strong);}
/* a new task while its agent works on it: a turning ring, only until it's done */
.motion .v-chat .ch-list li.is-working .st-tick{box-shadow:none;border:2px solid rgba(var(--ink-rgb),.16);border-top-color:var(--code);
  animation:ch-spin .8s linear infinite;}
@keyframes ch-spin{to{rotate:1turn;}}
@media (prefers-reduced-motion:reduce){.v-chat .ch-say,.v-chat .ch-list li{transition:none !important;}.v-chat .ch-dots{display:none;}}
/* on a phone the sent message takes the full width, so it wraps the same way before and after the web font arrives
   (at 90% it lost a line when the font swapped in, and the chat jumped: layout shift 0.045 on Slow 4G) */
@media (max-width:768px){.v-chat .st-msg{max-width:100%;}}

/* phones: a little more room in the two screens that read as too much at once. The first screen's chat: its turns
   sit further apart, inside the room the picture already has, so nothing under it moves. The job picker: the
   sentence, the four jobs and the picked job's steps read as three things, not one block. Every other screen, and
   anything wider than a phone, is unchanged. */
@media (max-width:768px){
  .v-chat .st-chat{gap:14px;}
  .scr-jobs .jobs,.scr-jobs .sheet{margin-top:2rem;}
}

/* ================= phones: one thing at a time =================
   At every scroll position of a phone (390x844) the page holds one thing to look at, at most one moving element, one
   headline, at most 30 other words and at most one action. The first screen's chat runs down the page, one turn to a
   screenful, and ends on the job's five tasks, all done. Below it each screen is the live page's own (its picture, then
   its words), set on the page's ground, and spaced so that a screen's words and its neighbours' words and pictures are
   never read at once. Everything here is inside max-width:768px, so a wider screen is unchanged but for the router. */
.ph-only{display:none;}
@media (max-width:768px){
  .ph-cut{display:none;}
  .scr-hero .speech.ph-only{display:block;}
  /* the room the chat keeps before the script puts it in */
  .t1-words > section[data-scene="stamps"]{--sh:2600px;}
  .t1-words > section[data-scene="stamps"] > .st-flow{margin:1.4rem 0 0;}
  .js .t1-words > section[data-scene="stamps"]:not(.has-pic){padding-top:.4rem;padding-bottom:calc(var(--sh,0px) + 1.4rem + 2rem);}

  /* 1 · the label, the headline and the narrator's line; then the chat, one turn to a screenful, as it continues down
     the page: the visitor's long message, Dot answering, zippr's two replies (the tasks done before, ticked at once;
     the new ones, worked on by agents, then ticked), and the line under them. Each turn is set large and each task is
     a card with a picture of its work, so every turn fills its own screenful and no two turns are read at once */
  .scr-hero .speech{margin-top:1rem;padding:0;border-radius:0;background:none;box-shadow:none;font-size:var(--step-1);line-height:1.42;}
  .t1-words .st.st-flow.ph-talk{height:auto;margin:var(--talk-top,16.5rem) 0 0;background:none;box-shadow:none;border-radius:0;overflow:visible;
    container-type:inline-size;--dw:150px;--dx:calc(50cqw - 75px);--dy:0px;--ground-shadow:1;}
  .ph-talk .st-room{display:none;}
  .ph-talk .l-asks{position:relative;inset:auto;display:block;}
  .ph-talk .st-chat{max-width:none;gap:0;}
  .ph-talk .st-msg{--mx:1.15rem;--my:.95rem;max-width:72%;border-radius:22px 22px 8px 22px;
    font-size:1.875rem;line-height:1.2;letter-spacing:-.02em;}
  .ph-seat{position:relative;height:172px;margin:var(--talk-a,6rem) 0 var(--talk-b,6rem);}
  .ph-talk .ch-slot{align-self:stretch;max-width:none;}
  .ph-talk .ch-slot + .ch-slot{margin-top:var(--talk-c,16rem);}
  .ph-talk .ch-say{padding:1rem 1rem 1.1rem;border-radius:22px 22px 22px 8px;}
  .ph-talk .ch-who{margin:0 0 .3rem .15rem;font-size:15px;}
  .ph-talk .ch-text{padding-inline:.15rem;font-size:1.875rem;line-height:1.2;letter-spacing:-.02em;text-wrap:pretty;}
  .ph-talk .ch-list{gap:10px;margin-top:1.1rem;}
  /* a task card: the picture of its work and its tick on top, its name at the foot */
  .ph-talk .ch-list li{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;gap:0 14px;
    min-height:var(--tile-h,178px);padding:16px;border-radius:18px;background:var(--ground);
    font-size:var(--step-2);font-weight:600;letter-spacing:-.015em;line-height:1.2;}
  .ph-talk .ch-list .ph-pic{grid-area:1 / 1;}
  .ph-talk .ch-list .st-tick{grid-area:1 / 3;width:30px;}
  .ph-talk .ch-list .ph-tn{grid-area:2 / 1 / 3 / 4;align-self:end;min-width:0;}
  .ph-pic{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:20px;background:var(--sheet);color:var(--code);
    box-shadow:0 1px 0 var(--line);}
  .ph-pic svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .ph-talk .ch-slot + .ch-slot .ph-pic{color:var(--ai-ink);}

  /* the end of the chat: the job's five tasks in one row, all ticked, with the "Done" stamp the message gets on a
     wider screen; then the chat's last line. The row fills the stretch under the second reply, where no words can go
     until that reply has left the screen. The row and the line are there from the start; the stamp lands as the row
     comes in */
  .ph-done{position:relative;display:flex;gap:8px;margin-top:var(--done-top,5rem);padding:14px;border-radius:22px;
    background:var(--sheet);box-shadow:0 1px 0 var(--line),0 14px 28px -22px rgba(var(--shadow-rgb),.55);}
  .ph-done-pic{position:relative;flex:1;display:grid;place-items:center;height:58px;border-radius:14px;background:var(--ground);color:var(--code);}
  .ph-done-pic.is-new{color:var(--ai-ink);}
  .ph-done-pic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .ph-done-pic .st-tick{position:absolute;right:-5px;top:-6px;width:22px;box-shadow:0 0 0 2.5px var(--sheet);}
  .ph-done-stamp{position:absolute;right:16px;bottom:-15px;padding:.2rem .5rem .16rem;border:2px solid var(--st-stamp);border-radius:7px;
    background:var(--sheet);color:var(--st-stamp);font:800 15px/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;
    transform:rotate(-8deg);box-shadow:0 6px 14px -8px rgba(var(--shadow-rgb),.5);transition:opacity .16s ease-out,transform .28s var(--st-pop);}
  .motion .ph-chat .st-chat:not(.is-stamped) .ph-done-stamp{opacity:0;transform:rotate(-8deg) scale(1.9);}
  /* the chat's last line, at the title size */
  .st-flow.ph-talk .st-line{margin-top:var(--line-top,12rem);padding:0 .15rem;font-size:var(--step-2);line-height:1.35;letter-spacing:-.01em;}

  /* ---------- below the chat: the live page's screens ---------- */
  /* each screen's space above it (--pt), its picture's height (--sh) and the gap between its picture and its words
     (--pg); before the script puts the picture in, the same room is kept, so nothing jumps. Most screens show their
     picture, then their words; the build-in-the-open screen and the ask show their words first */
  .t1-words > section:not([data-scene="stamps"]){padding-top:var(--pt,1.4rem);}
  .js .t1-words > section:not([data-scene="stamps"]):not([data-scene="crew"]):not([data-scene="calm"]):not([data-scene="strip"]):not(.has-pic){
    padding-top:calc(var(--pt,1.4rem) + var(--sh,0px) + var(--pg,1.2rem));}
  .js .t1-words > section:is([data-scene="crew"],[data-scene="calm"]):not(.has-pic){padding-bottom:calc(var(--sh,0px) + var(--pg,1.2rem) + 2rem);}
  .t1-words > section:not([data-scene="stamps"]) > .st.st-flow{margin:0 0 var(--pg,1.2rem);}
  .t1-words > section:is([data-scene="crew"],[data-scene="calm"]) > .st.st-flow{margin:var(--pg,1.2rem) 0 0;}
  /* every picture stands on the page's ground: no room, wall or floor drawn round it */
  .t1-words > section:not([data-scene="stamps"]) .st.st-flow{background:none;box-shadow:none;border-radius:0;overflow:visible;--st-pad:0px;}
  .t1-words > section:not([data-scene="stamps"]) .st-flow .st-room{display:none;}

  /* 2 · no picture of its own: the chat's end, just above it, is its picture */
  .t1-words > section[data-scene="rest"]{--pt:var(--rest-top,8.75rem);--sh:0px;--pg:0px;}

  /* 3 and 10 · the launch video's ten tasks, as one grid: the names only, each on its own tile */
  .t1-words > section[data-scene="split"]{--pt:var(--split-top,12rem);--sh:420px;--pg:2rem;}
  .st-flow .ph-grid{justify-content:flex-start;gap:0;}
  .st-flow .ph-grid .st-job,.st-flow .ph-grid .st-tile .tn,.st-flow .ph-grid .st-tile .tag{display:none;}
  .st-flow .ph-grid .st-tiles{gap:10px;}
  .st-flow .ph-grid .st-tile{min-height:76px;padding:0 1.15rem;border-radius:16px;}
  .st-flow .ph-grid .st-tile-name{font-size:var(--step-1);}
  /* 10 · the same tasks, worked through one at a time by the four agents, who stand in a row under them */
  .t1-words > section[data-scene="crew"]{--pt:var(--crew-top,6rem);--sh:530px;--pg:3rem;}
  .st.st-flow[data-on="crew"]{--dw:78px;--mw:64px;}
  .st-flow[data-on="crew"] .st-dot{--dx:calc(50cqw - 152px);--dy:calc(100cqh - var(--dw) - 4px);}
  .st-flow[data-on="crew"] .st-mate{width:var(--mw);}
  .st-flow[data-on="crew"] .m2{translate:calc(50cqw - 62px) calc(100cqh - var(--mw) - 4px);}
  .st-flow[data-on="crew"] .m3{translate:calc(50cqw + 12px) calc(100cqh - var(--mw) - 4px);}
  .st-flow[data-on="crew"] .m4{translate:calc(50cqw + 86px) calc(100cqh - var(--mw) - 4px);}
  .st-flow .st-mate i{width:24px;font-size:14px;box-shadow:0 0 0 2px var(--ground);}
  .st-flow[data-on="crew"] .l-tiles{padding:0;}

  /* 4 · the film, on its poster until it is tapped, then the words and the one tap that opens the job picker */
  .t1-words > section[data-scene="yours"]{--pt:var(--yours-top,7rem);--sh:min(520px,62svh);--pg:2rem;}
  .ph-pick{display:inline-flex;}
  .scr-jobs:not(.is-open) .jobs,.scr-jobs:not(.is-open) .sheet{display:none;}
  .scr-jobs.is-open .ph-pick{display:none;}

  /* 5 · the same ten tasks, sorted by the way zippr picked to run each one: ready-made, then AI */
  .t1-words > section[data-scene="pick"]{--pt:var(--pick-top,10rem);--sh:350px;--pg:3rem;}
  .st-flow .l-ways{justify-content:flex-start;gap:14px;}
  .st-flow[data-on="pick"] .l-ways{opacity:1;visibility:visible;}
  .ph-way{padding:1.05rem 1.1rem 1.15rem;border-radius:20px;background:var(--sheet);
    box-shadow:0 1px 0 var(--line),0 24px 50px -34px rgba(var(--shadow-rgb),.45);}
  .ph-way .tag{display:inline-block;padding:.22rem .75rem;border-radius:999px;font-size:15px;font-weight:700;line-height:1.35;}
  .ph-way-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:.8rem;}
  .ph-way-list li{padding:.5rem .8rem;border-radius:12px;background:var(--ground);font:600 var(--step-0)/1.25 var(--display);letter-spacing:-.01em;}
  .ph-way.is-ai .ph-way-list li{background:var(--ai-bg);color:var(--ai-ink);}

  /* 6 · one task, run twice: the two cards, one above the other, with their clocks; the steps as ticks (their names
     stay on wider screens), which appear without sliding, so the first card's clock is the one thing that moves */
  .t1-words > section[data-scene="runs"]{--pt:var(--runs-top,14rem);--sh:400px;--pg:2rem;}
  .st-flow[data-on="runs"] .l-runs{justify-content:flex-start;padding:0;}
  .st-flow[data-on="runs"] .l-runs .st-runs{grid-template-columns:1fr;gap:16px;}
  .st-flow[data-on="runs"] .l-runs .run{padding:1.25rem 1.3rem 1.35rem;}
  .st-flow[data-on="runs"] .l-runs .chip{min-height:30px;padding:0 .8rem;font-size:15px;}
  .st-flow[data-on="runs"] .l-runs .clock{width:50px;height:50px;}
  .st-flow[data-on="runs"] .l-runs .run-name{margin-top:.6rem;font-size:var(--step-2);}
  .st-flow[data-on="runs"] .l-runs .rsteps{display:flex;gap:10px;margin-top:.9rem;}
  .st-flow[data-on="runs"] .l-runs .rsteps li{min-height:0;border:0;font-size:0;line-height:0;}
  .st-flow[data-on="runs"] .l-runs .rsteps .tick{width:28px;height:28px;}
  .st-flow[data-on="runs"] .rsteps li,.st-flow[data-on="runs"] .tick,.st-flow[data-on="runs"] .tick::after{transition:none !important;}

  /* 7 and 8 · the two films, each standing alone and centred */
  .t1-words > section[data-scene="film29"]{--pt:var(--film29-top,7rem);--sh:min(500px,60svh);--pg:2rem;}
  .t1-words > section[data-scene="film35"]{--pt:var(--film35-top,7rem);--sh:min(500px,60svh);--pg:2rem;}
  .st-flow:is([data-on="film29"],[data-on="film35"]) .l-film{inset:0;}
  .st-flow:is([data-on="film29"],[data-on="film35"]) .st-screen{inset:0;margin:auto;height:100%;transform:none;}
  .st-flow[data-on="yours"] .l-yours{inset:0;}

  /* 9 · the films we made: one per screenful, each in the making-of page's form (its style, one line, "Copy prompt" and
     the quiet "How it was made"); the first is the screen's picture, the other three follow its words, and the router
     comes after them. The websites stay on wider screens */
  .films-words .strip-note{display:none;}
  .films-words .say.ph-only{display:block;}
  .t1-words{--ph-slot:860px;}
  .t1-words > section[data-scene="strip"]{--pt:var(--strip-top,1.4rem);--sh:var(--ph-slot);--pg:0px;}
  .js .t1-words > section[data-scene="strip"]:not(.has-pic){padding-top:calc(var(--pt) + var(--ph-slot));}
  .js .t1-words > section[data-scene="strip"]:not(.has-pic) .films-words + .route-ph{margin-top:calc(4 * var(--ph-slot) + 3.75rem);}
  .st.st-flow.ph-cards{height:auto;margin:0;container-type:inline-size;}
  .st-flow.ph-cards .l-strip{position:relative;inset:auto;padding:0;}
  .st-flow.ph-cards .reel{display:block;}
  .ph-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--ph-slot);}
  .st-flow.ph-cards:not(.ph-rest) .ph-card{justify-content:flex-end;padding-bottom:2rem;}
  .st.st-flow.ph-cards.ph-rest{margin-top:3.75rem;}
  .st-flow.ph-cards.ph-rest .ph-card:last-child{padding-top:34px;}
  .ph-card .film-media{width:auto;height:min(470px,56svh);aspect-ratio:9/16;}
  .ph-name{margin-top:.9rem;text-align:center;font:600 var(--step-2)/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);}
  .ph-line{max-width:30ch;margin-top:.35rem;text-align:center;font-size:var(--step-0);line-height:1.45;color:var(--ink);}
  .ph-acts{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:.9rem;}
  .ph-copy{min-height:48px;font-size:var(--step-0);}
  /* the quiet link beside the button: the one second action the form allows */
  .ph-how{display:inline-flex;font-size:var(--step-0);}

  /* the router, after the films: how we made each part, and why, as two doors, one to a screenful (the films first,
     then the websites). Each: the one line of why, its door with Dot beside it, then its one button */
  .route-ph{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:800px;padding-bottom:2rem;text-align:center;}
  .route-ph + .route-ph{min-height:860px;}
  .route-pic{position:relative;width:100%;max-width:340px;height:460px;margin-top:1.5rem;border-radius:28px;background:var(--sheet);
    box-shadow:0 1px 0 var(--line),0 24px 50px -34px rgba(var(--shadow-rgb),.45);}
  .route-pic::after{content:"";position:absolute;left:22px;right:22px;bottom:62px;height:1.5px;background:rgba(var(--ink-rgb),.1);}
  .route-door{position:absolute;left:calc(50% - 150px);top:40px;display:grid;place-items:center;width:140px;height:280px;
    border-radius:70px 70px 12px 12px;background:var(--known-bg);color:var(--code);box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.06);}
  .route-door.is-site{background:var(--ai-bg);color:var(--ai-ink);}
  .route-door::after{content:"";position:absolute;right:15px;top:150px;width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.45;}
  .route-door svg{width:64px;height:64px;margin-top:-18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
  .route-dot{position:absolute;left:calc(50% + 70px);bottom:56px;width:128px;height:auto;translate:-50% 0;}
  .route-ph .route-line{max-width:24ch;margin-top:0;font-size:var(--step-1);line-height:1.45;color:var(--ink);text-wrap:balance;}
  .route-ph .route-acts{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.4rem;}
  .route-wide{display:none;}

  /* 11 · the ask: its words and the form on the page, then Dot and the other agents under them (the ink card stays on
     wider screens), so the ask's one action and the foot's are a screen apart */
  .t1-words > section[data-scene="calm"]{--pt:var(--calm-top,6rem);--sh:220px;--pg:10rem;}
  .t1-b .ask-card{padding:0;border-radius:0;background:none;color:var(--ink);}
  .ask-card .say{color:var(--muted);}
  .ask-card .field{box-shadow:inset 0 0 0 1.5px var(--line-strong);}
  .ask-card .status{color:var(--ink);}

  /* the foot: the founder line and one tap, "How it works"; the making-of page and the check-up are inside it */
  .answer-last.ph-only{display:block;}
  .foot-made,.foot-try{display:none;}
  .foot{padding-top:var(--foot-top,13rem);}
  .foot .fold{margin-top:var(--fold-top,11rem);}
}

/* the router on a wider screen: under "Why build it in the open?", the one line of why, then the films first (the
   button) and the websites second (the quiet link) */
.route-wide{margin-top:clamp(1.4rem,3.2vh,2.2rem);}
.route-wide .route-line{max-width:34ch;font-size:var(--step-1);line-height:1.45;color:var(--ink);text-wrap:pretty;}
.route-wide .route-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;margin-top:1.1rem;}

/* =====================================================================================================
   The new layout (design only: no outside image, illustration, logo, icon or word). The same words,
   screens, pictures, films and links as the live page, set in the new layout:
   - a sculpted header: the wordmark in a tab that hangs from a pale bar (wider screens; the bar stays put);
   - the hero as a rounded tinted card inset from the window, a giant faded word behind its picture, the headline at
     its foot, a small badge;
   - each idea after it as a story chapter: the words on the left, its picture standing on the page on the right,
     the headline's second line in the accent;
   - "Today" as the offer beat, its film inside an arch;
   - the films and websites as a bento of rounded tiles;
   - "Why build it in the open?" with its picture on a big tinted circle;
   - the ask as a panel card: its picture lit soft at the top, the form under a hairline;
   - "How it works" as an FAQ row with a plus, and a quiet footer.
   Type: Bricolage Grotesque 700 for headlines (tight, -0.045em), Atkinson Hyperlegible for everything read. Motion:
   the fade-up as each block arrives (never on the first screen); no idle motion. A phone keeps its one
   ordinary column: each screen's picture, then its words; nothing is pinned.
   ===================================================================================================== */
:root{--hx:clamp(1.25rem,6vw,5.4rem);--top-h:82px;}
::selection{background:var(--ink);color:var(--ground);}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.04em;}
.title{font-weight:700;letter-spacing:-.045em;line-height:1.04;}
h1 span,h2 span{color:var(--two-tone);}
.t1 .title{max-width:15ch;}
/* the chapter label: small caps in the accent with a dot, no chip */
.kicker{min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;gap:.6rem;
  font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);}
.kicker::before{width:8px;height:8px;background:var(--accent);}

/* ---------- buttons and links: an accent pill with an arrow; quiet links underlined, with an arrow ---------- */
.pill{background:var(--btn);color:var(--on-accent);font-weight:700;border-radius:40px;}
.pill:hover{background:var(--btn-hover);}
.pill-big{min-height:56px;padding:0 1.6rem;gap:1rem;font-size:var(--step-0);}
.pill-big.act::after,.route-acts .pill::after,.end-actions .pill::after{content:"";flex:none;width:20px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:translate .2s var(--ease);}
.pill-big.act:hover::after,.route-acts .pill:hover::after{translate:3px 0;}
.more{min-height:44px;padding:0 0 .3rem;border-bottom:1px solid currentColor;color:var(--link);font-weight:600;}
.more::after{width:16px;height:11px;border:0;transform:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.more:hover{text-decoration:none;border-bottom-width:2px;}
.founder,.founder-inline{color:var(--link);}

/* ---------- the pictures' pieces, in the new finish: light objects with a hairline edge and a soft shadow ---------- */
.st{box-shadow:none;}
.st-room{background:radial-gradient(56% 46% at 52% 46%,rgba(var(--room-glow-rgb),var(--room-glow-a)),rgba(var(--room-glow-rgb),0) 72%);}
.st-room::before{display:none;}
.v-chat .ch-say,.v-chat .ch-dots,.st-tile,.st-task,.run,.st-runcard,.ph-way,.ph-done,.route-pic,.sheet.card{
  box-shadow:0 0 0 1px var(--tile-line),0 22px 44px -32px rgba(var(--shadow-rgb),.45);}
.st-msg,.st-job{box-shadow:0 22px 40px -26px rgba(var(--shadow-rgb),.6);}
.st-screen,.st-screen2,.film-media{box-shadow:0 0 0 1px var(--tile-line),0 30px 60px -36px rgba(var(--shadow-rgb),.6);}
.st-stamp,.ph-done-stamp{background:var(--sheet);}
.st-mate i{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 2px var(--ground);}
/* Dot and the agents stand in a pool of soft light, so their blue never sinks into the blue page (Dot's body is
   about 2:1 on the page, about 3.2:1 on the light) */
.st-dot::before,.st-mate::before{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:14%;bottom:6%;border-radius:50%;
  background:rgba(var(--glow-rgb),.5);box-shadow:0 0 26px 20px rgba(var(--glow-rgb),.42);pointer-events:none;}
/* (the glow is a shadow, so it never widens the page) */
.st-snd{background:rgba(var(--ink-rgb),.84);}
.st-film.is-still .film-media::after{background-color:rgba(var(--ink-rgb),.78);}
.chip{background:var(--ai-bg);color:var(--ai-ink);box-shadow:inset 0 0 0 1px var(--ai-line);}
.chip-next{background:var(--code);color:var(--on-code);box-shadow:none;}
.clock .face{fill:var(--sheet);}
.st[data-on="crew"] .st-tile.is-worked{box-shadow:inset 0 0 0 2px var(--accent),0 22px 44px -32px rgba(var(--shadow-rgb),.45);}
.reel-label b{color:var(--muted);}

/* ---------- the job picker: outlined chips, and the steps as hairline rows ---------- */
.job{border-color:var(--tile-line);background:var(--sheet);font-weight:600;}
.job:hover{border-color:var(--ink);}
.job[aria-pressed="true"]{background:var(--ink-surface);border-color:var(--ink-surface);color:var(--on-ink);}
.sheet.card{background:var(--sheet);border-radius:25px;}
.job-step{border-bottom-color:var(--line);}

/* ---------- each copy of a picture shows at its own width ---------- */
@media (max-width:768px){
  .scr-words{display:contents;}
  .st.st-flow.fl-wide{display:none;}
  .hero-word{display:none;}
  .ask-panel{display:contents;}
  .ask-panel > .pic{display:none;}
}

/* ================================== wider screens: the page ================================== */
@media (min-width:769px){
  /* the sculpted header: a pale bar that stays put, the wordmark in a tab hanging from its middle */
  .top{position:sticky;top:0;z-index:40;height:var(--top-h);margin:0 24px;padding:0;background:var(--ground);}
  .top .shell{display:flex;justify-content:center;align-items:flex-start;height:100%;max-width:none;padding:0;}
  .top .wordmark{height:calc(var(--top-h) + 4px);padding:0 42px 6px;border-radius:0 0 40px 40px;background:var(--ground);
    font-size:40px;line-height:1;font-weight:700;letter-spacing:-.05em;}
  section[id],.scr{scroll-margin-top:calc(var(--top-h) + 1rem);}

  .t1{display:block;width:100%;max-width:none;margin:0;padding:0;}
  .t1 .t1-words > section.scr{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;
    column-gap:clamp(2rem,5vw,5rem);width:100%;max-width:90rem;min-height:0;margin-inline:auto;
    padding:clamp(3rem,7.5vh,4.75rem) var(--hx);}
  .t1 .t1-words > section.scr:nth-of-type(2){padding-top:clamp(5rem,12vh,7rem);}
  .scr-words{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
  .scr-words > *{max-width:100%;}
  .t1 .say{max-width:31ch;margin-top:clamp(1rem,2.4vh,1.4rem);font-size:var(--step-1);line-height:1.55;color:var(--ink);}
  .t1 .title{font-size:clamp(2.75rem,calc(1.2rem + 3.9vw),4.6rem);}

  /* each screen's picture, standing on the page: the scene as the stage draws it, lit soft, as tall as its scene */
  .st.st-flow.fl-wide{display:block;width:100%;height:min(70svh,38rem);border-radius:32px;background-color:transparent;}
  .t1-words > section[data-scene="rest"] > .st.fl-wide{height:min(60svh,32rem);}
  .t1-words > section[data-scene="split"] > .st.fl-wide{height:min(64svh,35rem);}
  .t1-words > section[data-scene="pick"] > .st.fl-wide{height:min(46svh,25rem);}
  .t1-words > section[data-scene="runs"] > .st.fl-wide{height:min(58svh,31rem);}
  .t1-words > section[data-scene="film29"] > .st.fl-wide{height:min(80svh,44rem);}

  /* 1 · the hero card */
  .t1 .t1-words > section.scr-hero{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(0,50fr) minmax(0,50fr);
    align-items:end;width:auto;max-width:none;min-height:calc(100svh - var(--top-h) - 24px);margin:0 24px;
    padding:clamp(2rem,5vh,3.5rem) clamp(1rem,2vw,2rem) clamp(2.2rem,5.5vh,3.1rem) clamp(1.5rem,5vw,4.45rem);
    border-radius:36px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
  .hero-word{position:absolute;z-index:-1;left:0;right:0;top:clamp(0rem,.5vh,.5rem);text-align:center;pointer-events:none;
    font:700 clamp(10rem,22vw,21rem)/.9 var(--display);letter-spacing:-.07em;color:var(--word);white-space:nowrap;user-select:none;}
  .scr-hero .scr-words{padding-bottom:.25rem;}
  /* the "Coming soon" badge: the hero's, and the same badge on the build-in-the-open screen */
  .scr-hero .kicker,.scr-words .kicker-soon{margin:0 0 clamp(1.1rem,2.6vh,1.6rem);padding:.5rem .9rem;border-radius:30px;
    background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--ink);}
  .scr-hero .kicker::before,.scr-words .kicker-soon::before{width:7px;height:7px;background:var(--accent);}
  .t1 .scr-hero .title{max-width:17ch;font-size:clamp(2.75rem,calc(.9rem + 3.6vw),4.25rem);line-height:1.03;}
  .t1 .scr-hero .speech{max-width:30ch;margin-top:clamp(1rem,2.4vh,1.5rem);padding:0;border-radius:0;background:none;box-shadow:none;
    font-size:var(--step-1);line-height:1.5;color:var(--ink);}
  .t1 .scr-hero .speech::after{display:none;}
  /* the hero's composition: the backdrop word clear across the card's top left, the words under it at the bottom left,
     and the conversation in its own place on the right, on a plain chat panel, with Dot standing beside it */
  .hero-word{left:clamp(1.5rem,5vw,4.45rem);right:auto;top:clamp(.25rem,1.5vh,1rem);text-align:left;
    font-size:clamp(8rem,min(19vw,31vh),20rem);}
  .scr-hero > .st.fl-wide{position:absolute;top:0;bottom:0;right:0;left:50%;z-index:0;width:auto;height:auto;border-radius:0;background:transparent;}
  .scr-hero > .st.fl-wide .st-room{display:none;}
  .scr-hero > .scr-words{position:relative;z-index:1;}
  /* the check-up's hero: its picture holds the card's right half */
  .cu-page .scr-hero > .st.fl-wide{left:48%;}


  /* 4 · the job picker beside its film */
  .scr-jobs .jobs{gap:8px;}
  .scr-jobs .sheet{width:100%;margin-top:1.4rem;padding:1.4rem 1.6rem 1.2rem;}
  .scr-jobs .sheet-task{font-size:var(--step-2);letter-spacing:-.03em;}
  .scr-jobs .job-step{min-height:40px;}
  .t1-words > section[data-scene="yours"] > .st.fl-wide{height:min(84svh,46rem);}

  /* 5 · the tasks sorted by the way zippr runs each: two tinted tiles */
  .fl-wide .l-ways{opacity:1;visibility:visible;justify-content:center;gap:14px;}
  .fl-wide .ph-way{padding:1.4rem 1.5rem 1.5rem;border-radius:25px;background:var(--tile-5);}
  .fl-wide .ph-way.is-ai{background:var(--ai-bg);}
  .fl-wide .ph-way .tag{display:inline-block;padding:.24rem .8rem;border-radius:999px;font-size:15px;font-weight:700;line-height:1.35;}
  .fl-wide .ph-way-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:.9rem;}
  .fl-wide .ph-way-list li{padding:.55rem .9rem;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--tile-line);
    font:700 var(--step-0)/1.25 var(--display);letter-spacing:-.02em;}
  .fl-wide .ph-way.is-ai .ph-way-list li{background:var(--sheet);color:var(--ai-ink);}

  /* 8 · "Today": the offer beat; its film in a tinted arch, the agents at its foot */
  .t1-words > section[data-scene="film35"]{grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:clamp(2.5rem,5vw,4.5rem);}
  .t1-words > section[data-scene="film35"] .kicker{margin-bottom:1.1rem;}
  .t1-words > section[data-scene="film35"] > .st.fl-wide{height:min(80svh,46rem);background:var(--card);
    border-radius:50% 50% 32px 32px / 30% 30% 32px 32px;box-shadow:inset 0 0 0 1px var(--card-line);}
  .t1-words > section[data-scene="film35"] > .st.fl-wide .st-room{display:none;}
  .fl-wide[data-on="film35"] .st-screen{right:auto;left:calc(var(--cx) - var(--st-pad));}

  /* 9 · the films and websites: the heading beside its note, then a bento of rounded tiles */
  .t1 .t1-words > section.scr-films{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,5vh,3rem);}
  .scr-films .films-words{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);align-items:end;column-gap:3rem;width:100%;}
  .scr-films .films-words .title{grid-row:1 / 3;max-width:14ch;}
  .scr-films .films-words .say{grid-column:2;margin:0;font-size:var(--step-0);color:var(--muted);}
  .t1-b .scr-films .strip-note{grid-column:2;margin-top:.6rem;font-size:15px;color:var(--muted);}
  .scr-films > .st.fl-wide{height:auto;overflow:visible;border-radius:0;container-type:inline-size;}
  .scr-films > .st.fl-wide .st-room,.scr-films > .st.fl-wide .st-dot,.scr-films > .st.fl-wide .st-crew{display:none;}
  .fl-wide .l-strip{position:relative;inset:auto;}
  .fl-wide .reel{--cw:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:14px;width:100%;}
  .fl-wide .reel-item{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:22px 22px 14px;border-radius:25px;
    background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--tile-line);}
  /* the lead film (with sound), two websites; four films; two websites */
  .fl-wide .reel > .reel-lead{grid-area:1 / 1 / 3 / 3;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;column-gap:1.75rem;row-gap:.75rem;align-items:start;background:var(--tile-2);}
  .fl-wide .reel-lead .film-media{grid-row:1 / 5;}
  .fl-wide .reel-lead .as-page{align-self:end;justify-self:start;}
  .fl-wide .reel > :nth-child(2){grid-area:3 / 1 / 5 / 2;background:var(--tile-1);}
  .fl-wide .reel > :nth-child(3){grid-area:3 / 2 / 5 / 3;background:var(--tile-2);}
  .fl-wide .reel > :nth-child(4){grid-area:3 / 3 / 5 / 4;background:var(--tile-3);}
  .fl-wide .reel > :nth-child(5){grid-area:3 / 4 / 5 / 5;background:var(--tile-4);}
  .fl-wide .reel > :nth-child(6){grid-area:1 / 3 / 2 / 5;background:var(--tile-3);}
  .fl-wide .reel > :nth-child(7){grid-area:2 / 3 / 3 / 5;background:var(--tile-5);}
  .fl-wide .reel > :nth-child(8){grid-area:5 / 1 / 6 / 3;background:var(--tile-4);}
  .fl-wide .reel > :nth-child(9){grid-area:5 / 3 / 6 / 5;background:var(--tile-1);}
  .fl-wide .reel .film-open{gap:.85rem;}
  .fl-wide .reel .film-media{border-radius:16px;}
  .fl-wide .reel-label{min-height:0;font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.03em;line-height:1.15;}
  .fl-wide .reel-label b{margin-bottom:.3rem;font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--muted);}
  .fl-wide .as-page{font-size:15px;color:var(--link);}
  /* a website tile: its name on the left, its page on the right */
  .fl-wide .reel-site .film-open{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;column-gap:1.4rem;}
  .fl-wide .reel-site .site-shot{grid-column:2;grid-row:1;border-radius:14px;}
  .fl-wide .reel-site .reel-label{grid-column:1;grid-row:1;}
  .fl-wide .reel-site .as-page{position:absolute;left:22px;bottom:16px;}

  /* 10 · why in the open: its picture on a big tinted circle */
  .t1-words > section[data-scene="crew"] > .st.fl-wide{overflow:visible;}
  .t1-words > section[data-scene="crew"] > .st.fl-wide::before{content:"";position:absolute;left:50%;top:50%;width:min(100%,92cqh);aspect-ratio:1;
    border-radius:50%;background:var(--card);translate:-50% -50%;}
  .t1-words > section[data-scene="crew"] > .st.fl-wide .st-room{display:none;}
  .route-wide{margin-top:clamp(1.6rem,3.6vh,2.4rem);padding-top:clamp(1.2rem,2.8vh,1.6rem);border-top:1px solid var(--line);}
  .route-wide .route-line{color:var(--muted);}
  .route-wide .route-acts{gap:.8rem 1.8rem;}

  /* 11 · the ask: its words, and a panel card: the picture lit soft on top, the form under a hairline */
  .t1-b .ask-card{display:contents;color:var(--ink);background:none;}
  .ask-panel .st.fl-wide{--dw:clamp(84px,21cqw,150px);}
  .t1-words > section.scr-ask{grid-template-columns:minmax(0,52fr) minmax(0,46fr);align-items:center;padding-block:clamp(5rem,13vh,8rem);}
  .t1-b .ask-card .title{max-width:12ch;}
  .t1-b .ask-card .say{color:var(--ink);}
  .ask-panel{overflow:hidden;border-radius:32px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
  .ask-panel > .pic{position:relative;height:clamp(15rem,34vh,17.5rem);
    background:radial-gradient(60% 66% at 50% 62%,rgba(var(--glow-rgb),.55),rgba(var(--glow-rgb),0) 70%);}
  .ask-panel > .pic > .st.fl-wide{height:100%;border-radius:0;background:transparent;}
  .ask-panel > .pic > .st.fl-wide .st-room{display:none;}
  .t1-b .ask-card .signup{margin:0;max-width:none;padding:1.6rem 2rem 2rem;border-top:1px solid var(--line);}
  .ask-panel .field{flex-direction:column;gap:10px;padding:0;background:none;}
  .ask-panel .field:focus-within{box-shadow:none;}
  .ask-panel .field input{min-height:52px;padding:0 1rem;border-radius:12px;background:var(--field-bg);box-shadow:inset 0 0 0 1px var(--line-strong);}
  .ask-panel .field input:focus{box-shadow:inset 0 0 0 2px var(--accent);}
  .ask-panel .field button{min-height:52px;border-radius:12px;background:var(--btn);color:var(--on-accent);font-size:var(--step-0);font-weight:700;}
  .ask-panel .field button:hover{background:var(--btn-hover);}
  .ask-panel .status{color:var(--ink);}

  /* the foot: "How it works" as an FAQ row with a plus, then a quiet footer line */
  .foot{border-top:0;padding-block:clamp(1rem,4vh,2.5rem) 2.6rem;}
  .foot .shell{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:2.2rem;max-width:90rem;padding-inline:var(--hx);}
  .foot .fold{grid-column:1 / -1;grid-row:1;margin:0 0 2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .foot-line{grid-column:1;grid-row:2;}
  .foot-made{grid-column:2;grid-row:2;margin:0;}
  .foot-try{grid-column:3;grid-row:2;margin:0;}
}

/* the hero's conversation, at every width: the live chat (the visitor's request, then zippr's two replies) on a plain
   chat panel, with Dot beside it. The whole exchange is there at first paint; only the ticks play, task by task */
.scr-hero > .st.fl-wide .l-asks{inset:var(--st-pad);justify-content:center;align-items:center;}
.scr-hero > .st.fl-wide .st-chat{position:relative;flex:none;width:min(31rem,84cqw);max-width:none;margin:0 auto;padding:22px 20px 20px;gap:12px;
  border-radius:28px;background:var(--sheet);box-shadow:0 0 0 1px var(--line),0 40px 80px -48px rgba(var(--shadow-rgb),.5);}
.scr-hero > .st.fl-wide .st-msg{--mx:.95rem;--my:.75rem;align-self:flex-end;max-width:90%;font-size:16px;line-height:1.38;}
.scr-hero > .st.fl-wide .ch-slot{max-width:94%;}
.scr-hero > .st.fl-wide .ch-say{padding:.7rem .9rem .8rem;background:var(--ground);box-shadow:none;}
.scr-hero > .st.fl-wide .ch-who{font-size:14px;}
.scr-hero > .st.fl-wide .ch-text{font-size:16px;line-height:1.32;}
.scr-hero > .st.fl-wide .ch-list li{font-size:15px;}
.scr-hero > .st.fl-wide .ch-list .st-tick{width:19px;}
.scr-hero > .st.fl-wide .st-line{padding:2px .25rem 0;font-size:15.5px;line-height:1.38;}
.scr-hero > .st.fl-wide .st-msg-typed,.scr-hero > .st.fl-wide .ch-dots{display:none;}
.motion .scr-hero > .st.fl-wide .l-asks .st-msg .st-msg-text{color:inherit;}
.motion .scr-hero > .st.fl-wide .v-chat .ch-slot .ch-say{opacity:1;translate:none;}
.motion .scr-hero > .st.fl-wide .l-asks .st-chat .st-line{opacity:1;}
.scr-hero > .st.fl-wide .st-stamp{top:-20px;font-size:14px;}
/* the links and quiet labels on the tinted tiles: the page's link and quiet ink (every run 4.5:1 or more) */
.scr-hero .title span{color:var(--two-tone);}
.fl-wide .as-page,.ph-card .ph-how{color:var(--link);}
.fl-wide .reel-label b{color:var(--muted);}

/* the FAQ row, at every width: the question in Bricolage, a plus that turns to a minus */
.fold summary{min-height:72px;font-family:var(--display);font-size:clamp(22px,calc(18px + .6vw),28px);font-weight:500;letter-spacing:-.03em;}
.fold summary::after{width:20px;height:20px;margin-right:.2rem;border:0;transform:none;
  background:linear-gradient(var(--accent-text),var(--accent-text)) center/20px 2px no-repeat,
             linear-gradient(var(--accent-text),var(--accent-text)) center/2px 20px no-repeat;transition:background-size .25s var(--ease);}
.fold[open] summary::after{transform:none;background-size:20px 2px,2px 0;}
.fold summary:hover{color:var(--accent-text);}
.answer h3{font-size:clamp(20px,calc(17px + .4vw),23px);font-weight:600;letter-spacing:-.025em;}
.answer p{color:var(--muted);}
.opt{border-radius:20px;background:var(--sheet);box-shadow:0 0 0 1px var(--tile-line);}
.foot-made a,.foot-try a{color:var(--link);}

/* the hero badge and the arch shapes keep their meaning under reduced motion; the fade-up runs only where the
   visitor allows motion, and never on the first screen */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:769px){
    .fl-wide .reel-item,.t1-words > section:not(:first-of-type) > .st.fl-wide{animation:t1-rise linear both;animation-timeline:view();animation-range:entry 0% entry 120px;}
  }
}

/* ================================== phones: the new mobile design ==================================
   The phone follows the new mobile layout, not the earlier phone rules built
   around the zip. At 390: a sticky pale header (the wordmark left), the hero as a tinted card inset 12 px
   with the backdrop word at its top, story chapters whose picture panel stays under the header while their words pass
   (37svh), sections on a 24 px gutter, a bento of rounded tiles, the ask as a panel card, the FAQ row, a quiet foot.
   Body 18 px, headlines 40 px set tight; every word as on the live phone page. */
@media (max-width:768px){
  :root{--hdr:70px;}
  .top{position:sticky;top:0;z-index:40;height:var(--hdr);padding:0;background:var(--ground);}
  .top .shell{display:flex;align-items:center;height:100%;padding-inline:22px;}
  .top .wordmark{font-size:34px;font-weight:700;letter-spacing:-.045em;line-height:1;}
  section[id],.scr{scroll-margin-top:calc(var(--hdr) + 10px);}
  .t1-words{padding-inline:24px;--ph-slot:262px;}
  .t1 .title,.t1-b .title{font-size:40px;line-height:1.05;letter-spacing:-.045em;}
  .t1 .say,.t1-b .say{max-width:34ch;margin-top:14px;font-size:18px;line-height:1.55;color:var(--ink);}
  .kicker{font-size:14px;}

  /* every screen on the new rhythm: 40 px above, its picture, 22 px, its words, 56 px below */
  .t1 .t1-words > section.scr{--pt:40px;--pg:22px;padding-bottom:56px;}
  .t1-words > section:not([data-scene="stamps"]) > .st.st-flow{margin:0 0 var(--pg);}

  /* 1 · the hero card: the backdrop word at its top, the label, the headline and the agent's line, then its chat */
  .t1 .t1-words > section.scr-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
    margin:4px -12px 0;padding:118px 20px 0;border-radius:30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);--chat-h:690px;}
  .js .t1 .t1-words > section.scr-hero:not(.has-pic){padding-top:118px;padding-bottom:calc(var(--chat-h) + 22px);}
  .t1-words > section.scr-hero > .hero-word{display:block;position:absolute;z-index:-1;top:12px;left:0;right:0;text-align:center;pointer-events:none;
    font:700 109px/1 var(--display);letter-spacing:-.07em;color:var(--word);white-space:nowrap;user-select:none;}
  .t1-words > section.scr-hero > .scr-words{display:block;margin:0;padding:0;background:none;box-shadow:none;}
  .scr-hero .kicker,.scr-words .kicker-soon{margin:0 0 16px;padding:.45rem .8rem;border-radius:30px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--line);
    font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink);}
  .scr-hero .kicker::before,.scr-words .kicker-soon::before{width:7px;height:7px;background:var(--accent);}
  .t1 .scr-hero .title{max-width:11ch;}
  .t1 .scr-hero .speech{margin-top:14px;max-width:30ch;font-size:18px;line-height:1.55;}
  .t1-words > section.scr-hero > .st.st-flow:not(.fl-wide){display:none;}
  /* the check-up's hero card: the same room for the backdrop word; its picture (the same request, three times) is shorter.
     Its picture's room is kept below its words: [data-scene] lifts this over the room-above rule ("below the chat"), so the words don't jump up */
  .t1.cu-page .t1-words > section.scr-hero,.js .t1.cu-page .t1-words > section.scr-hero[data-scene]:not(.has-pic){padding-top:118px;--chat-h:300px;}
  .t1-words > section.scr-hero > .st.st-flow.fl-wide{display:block;align-self:stretch;width:auto;height:var(--chat-h);margin:22px -20px 0;
    border-radius:0;background:transparent;overflow:hidden;}
  .scr-hero > .st.fl-wide .st-room{display:none;}
  .scr-hero > .st.fl-wide .l-asks{justify-content:flex-start;}
  .scr-hero > .st.fl-wide .st-chat{width:auto;align-self:stretch;margin:0;}
  /* the message gets its "Done" stamp once its tasks are done, as the live phone's chat ends */
  .scr-hero > .st.fl-wide .v-chat .st-stamp{display:block;}

  /* 2-7 · the chapters: each picture is a pale panel that stays under the header while its words pass; screen 2's picture is the chat above it, as on the live phone */
  .t1 .t1-words > section:is([data-scene="split"],[data-scene="yours"],[data-scene="pick"],[data-scene="runs"],[data-scene="film29"]){
    --sh:clamp(285px,37svh,390px);}
  .t1-words > section:is([data-scene="split"],[data-scene="yours"],[data-scene="pick"],[data-scene="runs"],[data-scene="film29"]) > .st.st-flow:not(.fl-wide){
    position:sticky;top:var(--hdr);z-index:3;align-self:stretch;margin-inline:-24px;width:auto;background:var(--ground);
    box-shadow:0 1px 0 var(--line);--st-pad:12px;}
  .t1 .t1-words > section[data-scene="rest"]{--pt:56px;--sh:0px;--pg:0px;}
  /* 3 · the launch video's ten tasks, its names on cream tiles */
  .st-flow .ph-grid{justify-content:center;padding-inline:12px;}
  /* the ten names flow in rows, never in two columns: nothing splits the phone's width */
  .st-flow .ph-grid .st-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
  .st-flow .ph-grid .st-tile{flex:none;min-height:44px;padding:0 1rem;border-radius:14px;}
  .st-flow .ph-grid .st-tile-name{font-size:17px;font-weight:700;letter-spacing:-.02em;}
  /* 4 · the film on its poster, centred in the panel */
  .st-flow[data-on="yours"] .l-yours{inset:12px 0;}
  /* 5 · the tasks sorted: two tiles */
  .st-flow .l-ways{justify-content:center;gap:10px;padding-inline:12px;}
  .st-flow[data-on="pick"] .ph-way{padding:.8rem .9rem .9rem;border-radius:20px;background:var(--tile-5);}
  .st-flow[data-on="pick"] .ph-way.is-ai{background:var(--ai-bg);}
  .st-flow[data-on="pick"] .ph-way-list{gap:6px;margin-top:.55rem;}
  .st-flow[data-on="pick"] .ph-way-list li{padding:.35rem .65rem;border-radius:12px;background:var(--sheet);font-size:16px;font-weight:700;}
  .st-flow[data-on="pick"] .ph-way.is-ai .ph-way-list li{background:var(--sheet);}
  /* 6 · the two run cards, one above the other (no split screen on a phone) */
  .st-flow[data-on="runs"] .l-runs{justify-content:center;padding:0 12px;}
  .st-flow[data-on="runs"] .l-runs .st-runs{grid-template-columns:minmax(0,1fr);gap:10px;}
  .st-flow[data-on="runs"] .l-runs .run{padding:1rem .95rem 1.05rem;border-radius:20px;}
  .st-flow[data-on="runs"] .l-runs .chip{min-height:28px;padding:0 .6rem;font-size:14px;white-space:nowrap;}
  .st-flow[data-on="runs"] .l-runs .run-head{gap:.35rem;}
  .st-flow[data-on="runs"] .l-runs .clock{width:40px;height:40px;}
  .st-flow[data-on="runs"] .l-runs .run-name{margin-top:.55rem;font-size:17px;line-height:1.25;}
  .st-flow[data-on="runs"] .l-runs .rsteps{gap:6px;margin-top:.7rem;}
  .st-flow[data-on="runs"] .l-runs .rsteps .tick{width:24px;height:24px;}
  /* 7 · the film in the panel */
  .st-flow[data-on="film29"] .l-film{inset:12px 0;}

  /* 8 · "Today": the offer beat; its words, then its film inside a tinted arch */
  .t1 .t1-words > section[data-scene="film35"]{display:flex;flex-direction:column;align-items:flex-start;--sh:440px;}
  .t1-words > section[data-scene="film35"] > .st.st-flow:not(.fl-wide){order:2;align-self:stretch;width:auto;margin:24px 0 0;height:440px;background:var(--card);
    border-radius:50% 50% 24px 24px / 30% 30% 24px 24px;box-shadow:inset 0 0 0 1px var(--card-line);overflow:hidden;}
  .js .t1 .t1-words > section[data-scene="film35"]:not(.has-pic){padding-top:var(--pt);padding-bottom:calc(440px + 80px);}
  .st-flow[data-on="film35"] .l-film{inset:84px 0 22px;}
  .t1-words > section[data-scene="film35"] .kicker{margin-bottom:12px;}

  /* 9 · the films we made: the heading, then a bento of film tiles, then the two ways to how we made them */
  .t1 .t1-words > section[data-scene="strip"]{display:flex;flex-direction:column;--pt:40px;}
  .js .t1 .t1-words > section[data-scene="strip"]:not(.has-pic){padding-top:calc(var(--pt) + var(--ph-slot));}
  .scr-films .films-words{order:1;}
  .t1-words > section[data-scene="strip"] > .st.st-flow.ph-cards{order:2;align-self:stretch;width:auto;margin:24px 0 0;}
  .scr-films .st.st-flow.ph-cards.ph-rest{order:3;align-self:stretch;width:auto;margin:10px 0 0;}
  .scr-films .route-ph{order:4;}
  .st-flow.ph-cards .reel,.st-flow[data-on="strip"].ph-cards .reel{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
  .ph-card{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;align-items:start;justify-content:stretch;
    min-height:0;padding:16px;border-radius:20px;background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--tile-line);text-align:left;}
  .st-flow.ph-cards:not(.ph-rest) .ph-card{justify-content:stretch;padding-bottom:16px;background:var(--tile-1);}
  .st-flow.ph-cards.ph-rest .ph-card:last-child{padding-top:16px;}
  .st-flow.ph-cards.ph-rest .ph-card:nth-child(1){background:var(--tile-5);}
  .st-flow.ph-cards.ph-rest .ph-card:nth-child(2){background:var(--tile-3);}
  .st-flow.ph-cards.ph-rest .ph-card:nth-child(3){background:var(--tile-4);}
  .ph-card .film-media{grid-row:1 / 4;grid-column:1;width:128px;height:auto;aspect-ratio:9/16;border-radius:14px;}
  .ph-name{grid-column:2;margin-top:2px;text-align:left;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15;}
  .ph-line{grid-column:2;max-width:none;margin-top:6px;text-align:left;font-size:16px;line-height:1.5;}
  .ph-acts{grid-column:2;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;margin-top:12px;}
  .ph-copy{min-height:44px;padding:0 1.05rem;font-size:16px;}
  .ph-how{font-size:16px;}
  .route-ph{align-self:stretch;min-height:0;margin-top:10px;padding:20px 20px 22px;border-radius:20px;background:var(--tile-5);
    box-shadow:inset 0 0 0 1px var(--tile-line);justify-content:flex-start;}
  .route-ph + .route-ph{min-height:0;background:var(--tile-3);}
  .route-ph .route-line{max-width:28ch;font-size:18px;}
  .route-pic{height:196px;max-width:300px;margin-top:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--tile-line);}
  .route-pic::after{left:16px;right:16px;bottom:30px;}
  .route-door{left:calc(50% - 104px);top:18px;width:84px;height:150px;border-radius:42px 42px 10px 10px;background:var(--card);}
  .route-door::after{right:10px;top:84px;width:7px;height:7px;}
  .route-door svg{width:40px;height:40px;margin-top:-10px;}
  .route-dot{left:calc(50% + 46px);bottom:26px;width:88px;}
  .route-ph .route-acts{margin-top:16px;}

  /* 10 · why in the open: its words, then its picture on a big tinted circle */
  .t1 .t1-words > section[data-scene="crew"]{--sh:420px;}
  .js .t1 .t1-words > section[data-scene="crew"]:not(.has-pic){padding-bottom:calc(420px + 22px + 56px);}
  .t1-words > section[data-scene="crew"] > .st.st-flow:not(.fl-wide){align-self:stretch;width:auto;margin:22px 0 0;}
  .t1-words > section[data-scene="crew"] > .st.st-flow:not(.fl-wide)::before{content:"";position:absolute;left:50%;top:46%;width:min(100%,342px);aspect-ratio:1;
    border-radius:50%;background:var(--card);translate:-50% -50%;}
  .st-flow[data-on="crew"] .ph-grid{padding:20px 22px 0;justify-content:flex-start;}

  /* 11 · the ask: its words, then a panel card: the agents lit soft on top, the form under a hairline */
  .t1 .t1-words > section#waitlist{--sh:0px;--pg:0px;}
  .js .t1 .t1-words > section#waitlist:not(.has-pic){padding-bottom:56px;}
  .t1-words > section#waitlist > .st.st-flow:not(.fl-wide){display:none;}
  .t1-b .ask-card{align-self:stretch;}
  .ask-panel{display:block;margin-top:24px;overflow:hidden;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
  .ask-panel > .pic{display:block;position:relative;height:230px;
    background:radial-gradient(60% 66% at 50% 62%,rgba(var(--glow-rgb),.55),rgba(var(--glow-rgb),0) 70%);}
  .ask-panel > .pic > .st.st-flow.fl-wide{display:block;width:100%;height:100%;margin:0;border-radius:0;background:transparent;}
  .ask-panel > .pic > .st.fl-wide .st-room{display:none;}
  .t1-b .ask-card .signup{margin:0;padding:22px;border-top:1px solid var(--line);}
  .ask-panel .field{flex-direction:column;gap:10px;padding:0;background:none;box-shadow:none;}
  .ask-panel .field input{min-height:52px;padding:0 1rem;border-radius:12px;background:var(--field-bg);box-shadow:inset 0 0 0 1px var(--line-strong);}
  .ask-panel .field button{width:100%;min-height:52px;border-radius:12px;background:var(--btn);color:var(--on-accent);font-size:17px;font-weight:700;}
  .ask-panel .field button:hover{background:var(--btn-hover);}
  .ask-panel .status{color:var(--ink);}

  /* the foot: the FAQ row, then the founder line */
  .foot{display:block;padding:8px 0 30px;border-top:0;}
  .foot .shell{display:flex;flex-direction:column;padding-inline:24px;}
  .foot .fold{order:-1;margin:0 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .fold summary{min-height:64px;font-size:20px;}

  /* the pieces in the new finish */
  .ph-pic{background:var(--sheet);box-shadow:0 0 0 1px var(--tile-line);}
  .ph-name{color:var(--ink);}
}

/* ================= nothing overlaps, is cut off or runs past its box, at any width =================
   Each rule below answers a finding of the layout check: a picture taller than its panel, a chat
   taller than its card, a label wider than its tile. Sizes only; no word changes. */
@media (min-width:769px){
  /* a short window: the hero card is never shorter than its chat */
  .t1 .t1-words > section.scr-hero{min-height:max(calc(100svh - var(--top-h) - 24px),41rem);}
  /* the two sorted tiles always fit their picture */
  .t1-words > section[data-scene="pick"] > .st.fl-wide{height:26.5rem;}
  /* a narrow wide screen: a task's name keeps its whole width, and its tag moves under it when the tile is too narrow */
  .fl-wide .st-tile{flex-wrap:wrap;row-gap:.2rem;}
  .fl-wide .st-tile-name{min-width:auto;}
}
@media (max-width:768px){
  /* the chapter pictures reach both edges of the screen under the header (they stopped 48 px short of the right) */
  .t1-words > section:is([data-scene="split"],[data-scene="yours"],[data-scene="pick"],[data-scene="runs"],[data-scene="film29"]) > .st.st-flow:not(.fl-wide){
    max-width:none;}
  /* the hero's picture reaches both inner edges of its card (it stopped 40 px short of the right) */
  .t1-words > section.scr-hero > .st.st-flow.fl-wide{max-width:none;}
  /* a short phone: each picture panel is at least as tall as its picture */
  .t1 .t1-words > section[data-scene="runs"]{--sh:max(clamp(285px,37svh,390px),318px);}
  .t1 .t1-words > section[data-scene="pick"]{--sh:max(clamp(285px,37svh,390px),306px);}
  /* a narrow phone: the hero's chat panel grows with its chat */
  .t1 .t1-words > section.scr-hero{--chat-h:max(690px,calc(690px + (400px - 100vw) * 1.6));}
  /* a long button label wraps inside its tile */
  .route-ph .pill{max-width:100%;white-space:normal;text-align:left;line-height:1.25;padding-block:.7rem;}
}
@media (max-width:359px){
  .t1 .t1-words > section[data-scene="split"]{--sh:max(clamp(285px,37svh,390px),334px);}
  .t1 .t1-words > section[data-scene="pick"]{--sh:max(clamp(285px,37svh,390px),380px);}
  /* the narrowest phones: a film tile shows its film above its words, so its button is never squeezed */
  .ph-card{grid-template-columns:minmax(0,1fr);}
  .ph-card .film-media{grid-row:auto;grid-column:1;margin-bottom:12px;}
  .ph-name,.ph-line,.ph-acts{grid-column:1;}
}