/* zippr homepage, the long scroll. The live site's one visual system (tokens, type scale, kicker, title card,
   card, buttons), cut to one idea per screen and at most one action per screen. In the new layout and type
   (Bricolage Grotesque headlines over Atkinson Hyperlegible text, both free, OFL), in zippr's own cool paper colours;
   the layout is at the foot of stage.css. Dot stays blue. No inline styles, no backdrop-filter, no blend modes.
   The page reads fully without motion: every scene below starts from its finished picture, and the motion
   (home-b.js) only runs where the visitor allows it. */

@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap;}

:root{
  --ground:#8AB6F0;
  --sheet:#FFFFFF;
  --ink:#111827;
  --muted:#4B5566;
  --ink-rgb:17,24,39;
  --accent:#2A50D6;
  --focus:#2242AF;
  --link:#2A50D6;
  --pill-bg:#111827;
  --pill-ink:#FFFFFF;
  --pill-hover:#273244;
  --cta:#8AB0FF;
  --cta-hover:#A8C4FF;
  --on-ink-muted:#C4CBD6;
  --code:#2A50D6;
  --ai-bg:#EDE8FF;
  --ai-ink:#5530C2;
  /* every other colour on the page, so a palette is only this list */
  --ai-line:#C8BAF6;        /* the AI chip's outline */
  --accent-text:#2A50D6;    /* the accent as text: step numbers */
  --on-accent:#FFFFFF;      /* text on the accent */
  --ink-surface:#111827;    /* the ink surfaces: the ask card, the sent message, a picked job, the job's name */
  --on-ink:#FFFFFF;         /* text on an ink surface */
  --on-ink-rgb:255,255,255;
  --on-code:#FFFFFF;        /* text and ticks on the code colour */
  --cta-ink:#0B1220;        /* text on the call-to-action button */
  --field-bg:#FFFFFF;       /* the email field */
  --field-ink:#111827;
  --placeholder:#5F6B7D;
  --screen:#111827;         /* behind a film until its first frame */
  --film-paper:#F1ECE3;     /* behind the get-it-done film (its own paper colour) */
  --shadow-rgb:17,24,39;    /* every shadow */
  --zipper:#111827;         /* the zipper's teeth */
  --zipper-pull:#2F5BEA;    /* the zipper's pull */
  --free-bg:#E7EBF2;        /* the pop-up's free badge */
  --known-bg:#E3EAF7;
  --known-ink:#24457F;
  /* the stage's room: one wall colour per scene, and the light on the wall */
  --wall-base:#8AB6F0;
  --wall-split:#8AB6F0;
  --wall-runs:#8AB6F0;
  --wall-film:#8AB6F0;
  --wall-crew:#8AB6F0;
  --wall-rest:#8AB6F0;
  --room-glow-rgb:255,255,255;
  --room-glow-a:.7;

  --line:#DCE0E7;
  --line-strong:#6C727D;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --step--1:15px;
  --step-0:clamp(17px,calc(16.63px + 0.095vw),18px);
  --step-1:clamp(19.5px,calc(18.8px + 0.2vw),21.6px);
  --step-2:clamp(22.5px,calc(21.2px + 0.33vw),26px);
  --step-3:clamp(26px,calc(23.9px + 0.5vw),31px);

  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:72rem;
  --radius:25px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 0 0 1px var(--line),0 24px 50px -36px rgba(var(--shadow-rgb),.4);

  /* the new layout's colour roles: the page is his blue, the panels and card his pale ones */
  --card:#E3EAF7;           /* the hero card, the ask's panel, the arch, the circle: --known-bg */
  --card-line:#DCE0E7;     /* their edge: --line */
  --word:#A8C4FF;           /* the hero's backdrop word: --cta-hover */
  --two-tone:#2A50D6;       /* a headline's second line: --accent-text */
  --tile-1:#BFD5F4;         /* the bento's tiles: the card mixed into the page, 60% card */
  --tile-2:#FFFFFF;         /* --sheet */
  --tile-3:#E3EAF7;         /* --known-bg */
  --tile-4:#B2CDF3;         /* 45% card */
  --tile-5:#A5C6F2;         /* 30% card */
  --tile-line:#DCE0E7;     /* --line */
  --glow-rgb:255,255,255;   /* --room-glow-rgb */
  --btn:#2F5BEA;            /* the buttons: --accent */
  --btn-hover:#284DC7;      /* the buttons, darker */
  /* the page is blue: text straight on it, or on the bento's blue tiles, takes the closest shade of the muted, accent
     and AI colours that reads at 4.5:1 there; the white and pale panels keep the colours themselves */
  --muted-on-page:#3E4654;
  --accent-on-page:#203CA0;
  --ai-ink-on-page:#4B2AAC;
  --muted-own:var(--muted);
  --accent-own:var(--accent-text);
  --link-own:var(--link);
  --ai-ink-own:var(--ai-ink);
}
body{--muted:var(--muted-on-page);--accent-text:var(--accent-on-page);--link:var(--accent-on-page);--ai-ink:var(--ai-ink-on-page);}
.scr-hero,.sheet,.st-tile,.run,.ask-panel,.opt{--muted:var(--muted-own);--accent-text:var(--accent-own);--link:var(--link-own);
  --ai-ink:var(--ai-ink-own);}
.ch-say{--muted:var(--muted-on-page);--ai-ink:var(--ai-ink-on-page);}   /* zippr's replies sit on the page blue */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* a sideways swipe never turns into the browser's back or forward (browsers that honour it: Chrome, Edge, Firefox) */
html{-webkit-text-size-adjust:100%;overscroll-behavior-x:none;}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;}
a{color:inherit;}
button{font:inherit;color:inherit;}
img{display:block;max-width:100%;height:auto;}
ol,ul{list-style:none;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.shell{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.06;text-wrap:balance;}
h1 span,h2 span{display:block;color:var(--muted);}
html:not(.js) .needs-js{display:none;}

/* ---------- the parts every screen shares ---------- */
/* the label that keeps the future and today apart: a filled chip, so it is read before the headline */
.kicker{display:inline-flex;align-items:center;gap:.55rem;min-height:34px;padding:0 .9rem 0 .75rem;border-radius:999px;
  background:var(--ai-bg);box-shadow:inset 0 0 0 1px var(--ai-line);font-size:var(--step--1);font-weight:700;letter-spacing:.02em;
  color:var(--ai-ink);margin-bottom:clamp(.8rem,2vh,1.2rem);}
.kicker::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.title{font-size:clamp(2.6rem,calc(1.6rem + 5vw),6.2rem);letter-spacing:-.035em;line-height:1;}
.title span{margin-top:.08em;}
.say{margin-top:clamp(.6rem,1.6vh,1rem);max-width:30ch;font-size:var(--step-2);line-height:1.4;color:var(--muted);text-wrap:pretty;}
.card{background:var(--sheet);border-radius:22px;padding:clamp(1.25rem,3vw,2.2rem);box-shadow:var(--shadow);}

/* a screen: one idea, as tall as its content, with comfortable padding (no forced window height) */
.scr{position:relative;padding-block:clamp(2.25rem,5.5vh,4rem);}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,4.5vw,4.5rem);}
.split .title{font-size:clamp(2.5rem,calc(1.5rem + 3.6vw),4.9rem);}
.split .say{max-width:26ch;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:clamp(1.1rem,2.6vh,1.6rem);}.scr{padding-block:clamp(1.75rem,4.5vh,2.5rem);}}

/* the text-only screens: the statement is the picture; on a wide screen the sentence sits beside it */
.scr-card .title-xl{font-size:clamp(2.8rem,calc(1.6rem + 4.4vw),5.6rem);max-width:13ch;}
.scr-card .say{max-width:34ch;}
@media (min-width:861px){.scr-card .shell{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:clamp(2rem,4.5vw,4.5rem);}
  .scr-card .say{margin-top:0;padding-bottom:.35em;}}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.15rem;border-radius:999px;border:0;
  background:var(--pill-bg);color:var(--pill-ink);font-size:var(--step--1);font-weight:600;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:transform .2s var(--ease),background .2s;}
.pill:hover{background:var(--pill-hover);}
.pill:active{transform:scale(.97);}
.pill-big{min-height:54px;padding:0 1.6rem;font-size:var(--step-0);}
.act{margin-top:clamp(1rem,2.4vh,1.5rem);}
.more{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0;border:0;background:transparent;text-align:left;
  font-weight:600;font-size:var(--step-0);color:var(--link);text-decoration:none;cursor:pointer;}
.more::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);}
.more:hover{text-decoration:underline;text-underline-offset:4px;}
.founder{color:var(--link);font-weight:600;text-underline-offset:3px;}

/* ---------- header: zippr's mark and its name ---------- */
.top{position:relative;z-index:5;padding-block:clamp(.6rem,1.4vw,1.1rem);}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:700;
  font-size:var(--step-1);letter-spacing:-.03em;text-decoration:none;}
/* the app's mark, the black rounded square with the white Z, sized with the name */
.wordmark .zmark{display:block;flex:none;width:.86em;height:.86em;margin-right:.26em;}

/* ---------- a small fold: a line that opens to show more (the install page's "Check your download", the homepage's work items) */
.dl-sum summary,.pv-fold summary{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;list-style:none;font-weight:600;}
.dl-sum summary::-webkit-details-marker,.pv-fold summary::-webkit-details-marker{display:none;}
.dl-sum summary::after,.pv-fold summary::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease);}
.dl-sum[open] summary::after,.pv-fold[open] summary::after{transform:rotate(-135deg) translateY(-2px);}

/* ---------- 1 · work gets done for you ---------- */
.scr-hero{padding-block:clamp(.5rem,2.5vh,2rem) clamp(2.25rem,5.5vh,4rem);}
.scr-hero .title{font-size:clamp(2.5rem,calc(1.45rem + 3.4vw),4.6rem);line-height:1.02;max-width:12ch;}
.scr-hero .title span{margin-top:.1em;}
.stamp-stage{position:relative;width:100%;}
.speaker{display:flex;align-items:flex-end;gap:.9rem;}
.dot-pair{position:relative;flex:none;width:clamp(76px,8vw,124px);aspect-ratio:200/208;}
.dot{position:absolute;left:0;bottom:0;width:100%;height:auto;transition:opacity .25s;}
.dot-glad{width:118%;left:-9%;opacity:0;}
.is-happy .dot-calm{opacity:0;}
.is-happy .dot-glad{opacity:1;}
.bubble{position:relative;flex:1;margin-bottom:clamp(.9rem,3vw,1.6rem);padding:.95rem 1.1rem;border-radius:18px;background:var(--sheet);
  box-shadow:var(--shadow);font-size:var(--step-1);line-height:1.4;color:var(--ink);text-wrap:pretty;}
.bubble::before{content:"";position:absolute;left:-9px;bottom:18px;width:20px;height:20px;background:var(--sheet);
  transform:rotate(45deg);border-radius:3px;}
.asks{display:grid;gap:.55rem;margin-top:1rem;}
.ask{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:54px;padding:.55rem .75rem .55rem 1.05rem;
  border-radius:14px;background:var(--sheet);box-shadow:var(--shadow);
  font-family:var(--display);font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;line-height:1.25;}
.ask:nth-child(odd){transform:rotate(-.5deg);}
.ask:nth-child(even){transform:rotate(.4deg);}
.done{flex:none;display:inline-block;padding:.12rem .55rem;border:2.5px solid var(--ai-ink);border-radius:8px;color:var(--ai-ink);
  font-family:var(--body);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-8deg);}
.tool{position:absolute;left:0;top:0;width:36px;height:40px;fill:var(--ink);pointer-events:none;opacity:0;}
.tool-pad{fill:var(--ai-ink);}

/* ---------- 3 · every job is a set of tasks ---------- */
.split-stage{width:100%;}
.jobcard{position:relative;padding:clamp(1.1rem,2.6vw,1.8rem);border-radius:22px;background:var(--sheet);box-shadow:var(--shadow);}
.jobcard-name{font-size:var(--step-3);letter-spacing:-.02em;line-height:1.15;}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:1rem;}
.tile{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.55rem;row-gap:.3rem;
  padding:.6rem .7rem;border-radius:12px;border:1px solid var(--line-strong);background:var(--ground);}
.tn{grid-row:1;font-size:13px;font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;min-width:1.4ch;}
.tname{grid-row:1;font-family:var(--display);font-size:var(--step-0);font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.tag{grid-column:1 / -1;justify-self:start;padding:.12rem .55rem;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.4;white-space:nowrap;}
.tag-ai{background:var(--ai-bg);color:var(--ai-ink);box-shadow:inset 0 0 0 1px var(--ai-line);}
.tag-made{background:var(--code);color:var(--on-code);}
@media (min-width:1100px){.tile{grid-template-columns:auto 1fr auto;min-height:52px;}.tag{grid-column:auto;grid-row:1;}}

/* ---------- 4 · your work breaks down the same way ---------- */
.scr-jobs .title{max-width:14ch;}
.jobs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1rem,2.4vh,1.6rem);}
@media (min-width:861px){.jobs-split{align-items:start;}.jobs-split .sheet{margin-top:0;}
  .jobs-split .job-steps{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}}
.job{min-height:44px;padding:.5rem 1.05rem;border-radius:999px;border:1px solid var(--line-strong);background:transparent;
  font-size:var(--step--1);font-weight:600;line-height:1.3;text-align:left;cursor:pointer;transition:background .2s,border-color .2s;}
.job:hover{border-color:var(--ink);background:var(--sheet);}
.job[aria-pressed="true"]{background:var(--ink-surface);border-color:var(--ink-surface);color:var(--on-ink);}
.sheet{margin-top:1rem;}
.sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;}
.sheet-task{font-size:var(--step-3);letter-spacing:-.02em;line-height:1.15;}
.sheet-count{font-size:var(--step--1);font-weight:600;color:var(--muted);}
.job-steps{display:grid;grid-template-columns:1fr;gap:0 2rem;margin-top:.6rem;}
@media (min-width:761px){.job-steps{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,7),auto);}}
.job-step{display:flex;align-items:center;gap:.75rem;min-height:38px;padding:.15rem 0;border-bottom:1px solid var(--line);}
.job-step .n{flex:none;width:2ch;font-size:var(--step--1);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.job-step .name{flex:1;font-weight:500;line-height:1.35;}

/* ---------- 6 · the first time teaches ---------- */
.runs{display:grid;gap:1rem;width:100%;}
.run{padding:clamp(1.1rem,2.6vw,1.6rem);border-radius:22px;background:var(--sheet);box-shadow:var(--shadow);}
.run-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 .75rem;border-radius:999px;background:var(--ai-bg);color:var(--ai-ink);
  font-size:13.5px;font-weight:700;box-shadow:inset 0 0 0 1px var(--ai-line);}
.chip-next{background:var(--code);color:var(--on-code);box-shadow:none;}
.clock{flex:none;width:46px;height:46px;}
.clock .face{fill:var(--ground);stroke:var(--ink);stroke-width:2;}
.clock .trail{fill:none;stroke:var(--accent);stroke-width:18;stroke-dasharray:var(--elapsed,83) 100;opacity:.28;
  transform:rotate(-90deg);transform-origin:20px 20px;}
.clock .hand{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;transform:rotate(var(--turn,300deg));transform-origin:20px 20px;}
.clock .pin{fill:var(--ink);}
.run-next .clock{--elapsed:3;--turn:12deg;}
.run-name{margin-top:.7rem;font-size:var(--step-2);letter-spacing:-.02em;line-height:1.15;}
.rsteps{margin-top:.6rem;}
.rsteps li{display:flex;align-items:center;gap:.7rem;min-height:40px;border-bottom:1px solid var(--line);font-weight:500;line-height:1.3;}
.rsteps li:last-child{border-bottom:0;}
.tick{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--code);}
.tick::after{content:"";position:absolute;left:7.5px;top:4px;width:6px;height:11px;border-right:2.5px solid var(--on-code);border-bottom:2.5px solid var(--on-code);transform:rotate(45deg);}

/* ---------- films (7, 8, 9) ---------- */
.film{position:relative;flex:none;--fh:clamp(240px,36svh,320px);}
.film-media{position:relative;display:block;height:var(--fh);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--screen);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 1px 0 var(--line),0 24px 44px -28px rgba(var(--shadow-rgb),.55);transition:transform .25s var(--ease);}
.film-media video{display:block;width:100%;height:100%;object-fit:cover;}
.film-media video.is-waiting{opacity:0;}
.film-solo{justify-self:center;--fh:clamp(320px,56svh,480px);}
@media (min-width:861px){.film-solo{--fh:min(76svh,680px);}}
.film-open{display:block;padding:0;border:0;background:transparent;cursor:pointer;border-radius:14px;}
.film-open:hover .film-media{transform:translateY(-3px);}

.films{position:relative;}
.films-stage{display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,2.6vh,1.6rem);padding-block:clamp(3.5rem,9vh,6rem);}
.films .title{max-width:14ch;font-size:clamp(2.5rem,calc(1.5rem + 3.6vw),4.9rem);}
.films .say{margin-top:.6rem;}
.strip-wrap{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;}
.strip-wrap::-webkit-scrollbar{display:none;}
.strip{display:flex;gap:clamp(.75rem,1.4vw,1rem);width:max-content;padding-inline:var(--gutter);}
.strip-note{font-size:var(--step--1);font-weight:600;color:var(--muted);}
@media (min-width:981px){.strip .film{--fh:clamp(260px,40svh,380px);}}

/* ---------- 11 · the ask: the one ink surface ---------- */
.ask-card{padding:clamp(1.6rem,5vw,4rem);border-radius:28px;background:var(--ink-surface);color:var(--on-ink);}
.ask-card .title{font-size:clamp(2.5rem,calc(1.5rem + 3.6vw),4.9rem);max-width:12ch;}
.ask-card .say{max-width:34ch;color:var(--on-ink-muted);}
.signup{max-width:34rem;margin-top:clamp(1.2rem,3vh,1.8rem);}
@media (min-width:861px){.ask-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:clamp(2rem,4vw,4rem);}
  .ask-card .signup{margin-top:0;max-width:none;}}
.field{display:flex;gap:.5rem;padding:5px;border-radius:14px;background:var(--field-bg);}
.field input{flex:1;min-width:0;min-height:50px;padding:0 .9rem;border:0;border-radius:10px;background:transparent;
  font:inherit;font-size:var(--step-0);color:var(--field-ink);}
.field input::placeholder{color:var(--placeholder);}
.field input:focus{outline:none;}
.field:focus-within{box-shadow:0 0 0 3px var(--cta);}
.field button{flex:none;min-height:50px;padding:0 1.2rem;border:0;border-radius:10px;background:var(--cta);color:var(--cta-ink);
  font-size:var(--step--1);font-weight:700;cursor:pointer;transition:background .2s;}
.field button:hover{background:var(--cta-hover);}
.field button:disabled{opacity:.7;cursor:default;}
.zp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* with no script the field is not offered (its noscript line says why): the browser's own send would reload this page
   with the address in it and keep nothing (early.js marks a scripted page before its first paint) */
html:not(.js) #join .field{display:none;}
.status{min-height:1.5em;margin-top:.7rem;font-size:var(--step--1);font-weight:500;color:var(--on-ink);}
.status:empty{min-height:0;margin:0;}
.status:focus{outline:none;}
.is-done .field{opacity:.75;}
@media (max-width:420px){.field{flex-direction:column;}.field button{width:100%;}}

/* ---------- footer: the founder line and one optional tap ---------- */
.foot{border-top:1px solid var(--line);padding-block:1.6rem 2.4rem;}
.foot-line{font-size:var(--step--1);color:var(--muted);}
.foot-links{white-space:nowrap;}
.foot-made{margin-top:.2rem;font-size:var(--step--1);}
.foot-made a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-weight:600;text-underline-offset:3px;}
.fold{margin-top:1rem;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);}
.fold summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding-block:.6rem;
  cursor:pointer;list-style:none;font-family:var(--display);font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;}
.fold summary::-webkit-details-marker{display:none;}
.fold summary::after{content:"";flex:none;width:10px;height:10px;margin-right:.4rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);}
.fold[open] summary::after{transform:rotate(-135deg);}
.fold summary:hover{color:var(--link);}
.fold-body{padding-bottom:1.4rem;}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.5rem;padding-top:.4rem;}
.answer h3{font-size:var(--step-1);letter-spacing:-.01em;}
.answer p{margin-top:.35rem;color:var(--muted);max-width:46ch;}
.answer-wide{grid-column:1 / -1;}
.answer-last{grid-column:1 / -1;}
.opt{margin-top:.5rem;padding:1rem 1.1rem;border-radius:16px;background:var(--sheet);box-shadow:0 1px 0 var(--line);}
.answer .opt-job{margin-top:0;font-family:var(--display);font-weight:600;color:var(--ink);}
.opt-bar{display:flex;gap:3px;height:12px;margin-top:.6rem;}
.opt-bar i{flex:1;border-radius:3px;background:var(--ai-bg);box-shadow:inset 0 0 0 1px var(--ai-line);}
.opt-bar i.code{background:var(--code);box-shadow:none;}
.answer .opt-say{margin-top:.8rem;max-width:62ch;color:var(--ink);}
.answer .opt-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem;font-size:var(--step--1);color:var(--muted);}
.way{display:inline-block;flex:none;margin-right:.35rem;padding:.1rem .5rem;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;}
.way-code{background:var(--code);color:var(--on-code);}
.way-ai{background:var(--ai-bg);color:var(--ai-ink);}
.opt-steps{display:grid;grid-template-columns:1fr;gap:0 2rem;margin-top:.8rem;}
@media (min-width:761px){.opt-steps{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,7),auto);}}
.opt-steps li{display:flex;align-items:center;gap:.6rem;min-height:36px;border-bottom:1px solid var(--line);font-size:var(--step--1);}
.opt-steps .n{flex:none;width:2ch;font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.opt-steps .name{flex:1;line-height:1.3;}
.opt-steps .way{margin-right:0;}
@media (max-width:760px){.answers{grid-template-columns:1fr;}}

/* =====================================================================================================
   Motion. Only when the visitor allows motion. The scenes' starting states apply only once home-b.js has
   marked a scene .is-anim, so without script the finished picture stays. Anywhere else the page above is the
   page: static and complete.
   ===================================================================================================== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}

  /* 1 · the asks drop onto the stack; Dot's stamp marks each one done */
  .is-anim .ask{opacity:0;translate:0 -18px;transition:opacity .35s var(--ease),translate .45s var(--ease);}
  .is-anim .ask.in{opacity:1;translate:0 0;}
  .is-anim .done{opacity:0;scale:1.7;transition:opacity .12s,scale .22s cubic-bezier(.3,1.6,.5,1);}
  .is-anim .ask.stamped .done{opacity:1;scale:1;}
  .is-anim .ask.thud{animation:thud .22s ease-out;}
  @keyframes thud{50%{translate:0 2px;}}
  .is-anim .tool{opacity:1;transition:transform .42s var(--ease),opacity .3s;}
  .is-anim .tool.press{animation:press .24s ease-in-out;}
  @keyframes press{50%{scale:1 .82;translate:0 5px;}}
  .is-anim .tool.away{opacity:0;}
  .dot-pair.hop{animation:hop .36s var(--ease);}
  @keyframes hop{40%{translate:0 -9px;}}

  /* 3 · the job splits into its tasks, then each task gets its tag */
  .is-anim .tile{opacity:0;transform:translate(var(--cx,0),var(--cy,0)) scale(.35);
    transition:opacity .3s,transform .55s var(--ease);}
  .is-anim .tile.out{opacity:1;transform:none;}
  .is-anim .tag{opacity:0;scale:.4;transition:opacity .2s,scale .3s cubic-bezier(.3,1.6,.5,1);}
  .is-anim .tile.tagged .tag{opacity:1;scale:1;}

  /* 6 · one task card, run twice: slowly with the steps one by one, then all at once */
  /* with script, the two runs share one place (so the screen never changes height); without, both show */
  .js .runs{grid-template-columns:1fr;}
  .js .runs .run{grid-area:1 / 1;transition:opacity .45s var(--ease),translate .45s var(--ease);}
  .js .runs .run-next{opacity:0;translate:0 10px;}
  .js .runs.is-second .run-first{opacity:0;translate:0 -10px;}
  .js .runs.is-second .run-next{opacity:1;translate:0 0;}
  .runs.is-anim .rsteps li{opacity:0;translate:-6px 0;transition:opacity .35s,translate .35s var(--ease);}
  .runs.is-anim .rsteps li.in{opacity:1;translate:0 0;}
  .runs.is-anim .run-next .rsteps li{opacity:1;translate:0 0;}
  .runs.is-anim .tick{background:transparent;box-shadow:inset 0 0 0 2px var(--line-strong);transition:background .2s,box-shadow .2s;}
  .runs.is-anim .tick::after{opacity:0;transition:opacity .15s;}
  .runs.is-anim li.ok .tick{background:var(--code);box-shadow:none;}
  .runs.is-anim li.ok .tick::after{opacity:1;}
  .runs.is-anim .clock .hand{--turn:0deg;}
  .runs.is-anim .clock .trail{--elapsed:0;}
  .runs.is-anim .run-first.go .clock .hand{--turn:300deg;transition:transform 4.8s linear;}
  .runs.is-anim .run-first.go .clock .trail{--elapsed:83;transition:stroke-dasharray 4.8s linear;}
  .runs.is-anim .run-next.go .clock .hand{--turn:12deg;transition:transform .3s linear;}
  .runs.is-anim .run-next.go .clock .trail{--elapsed:3;transition:stroke-dasharray .3s linear;}

  .job-steps.is-new .job-step{animation:step-in .45s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms);}
  @keyframes step-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

  @supports (animation-timeline:view()){
    /* titles below the fold rise in once */
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 140px;}
    @keyframes rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

    /* the films' screen holds still and the row of films slides past */
    .films-track{height:250vh;view-timeline:--films block;}
    .films-stage{position:sticky;top:0;height:100svh;overflow:clip;padding-block:clamp(1rem,4vh,2.5rem);}
    .strip-wrap{overflow:visible;}
    .strip{animation:slide linear both;animation-timeline:--films;animation-range:contain 4% contain 96%;}
    @keyframes slide{from{transform:translateX(0);}to{transform:translateX(calc(100vw - 100%));}}
  }
}

/* the footer's one quiet link to the free check-up page (the homepage's ask stays the waitlist) */
.foot-try{margin-top:.6rem;font-size:var(--step--1);}
.foot-try a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-weight:600;text-underline-offset:3px;}