/* TimeMaker page v4 · FOLLOW THE EMAILS · the whole page.
   Soft white page, one green light, twelve email cards. Three states of the same markup:
   plain  (no script, reduced motion, or v4.js never arrived): a calm page that reads top to bottom
   story  (the inline head script set it): one held stage, the scroll plays the film
   live   (v4.js is running): every moving thing is placed by v4.js with transform and opacity only */
:root{
  --page:#FAFAFA; --ink:#101828; --head:#1E2939; --text:#4A5565; --text-2:#6A7282; --hair:rgba(16,24,40,.08);
  --leaf:#7DBE22; --leaf-deep:#34801A; --leaf-top:#4A9925; --leaf-wash:#F0F7E5; --leaf-soft:#E5F0D2; --leaf-light:#DBEBC6; --leaf-mist:#CDE1A6; --leaf-lime:#B8D338;
  --late:#E2352B; --today:#2FB5C8; --coming:#3D62DA; --late-ink:#CF261B; --today-ink:#0B7483; --coming-ink:#2C4FC4;
  /* TimeMaker's own interface, sampled off the app, cleaned up */
  --tm-slate-1:#6B7F9A; --tm-slate-2:#53667F; --tm-slate-3:#46586F; --tm-rail:#6C7F9B; --tm-line:#E7EAEF; --tm-head:#F7F8FA; --tm-subject:#F1FBE4; --tm-arrow:#F29A3E; --tm-frame:rgba(38,52,74,.16);
  --ff:Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh-card:0 1px 2px rgba(16,24,40,.06),0 10px 28px -8px rgba(16,24,40,.16);
  --sh-lift:0 2px 4px rgba(16,24,40,.06),0 22px 44px -12px rgba(16,24,40,.24);
  --sh-win:0 1px 2px rgba(16,24,40,.05),0 24px 60px -18px rgba(16,24,40,.20),0 70px 120px -50px rgba(16,24,40,.16);
  /* geometry: v4.js measures and overwrites these; the values here draw the same ring before it runs */
  --H:100vh; --cy:calc(var(--H) / 2);
  --R:min(40vh,360px,calc(50vw - 72px)); --Rb:var(--R);
  --cw:calc(var(--R) * .34); --ch:calc(var(--R) * .226);
  --u:calc(var(--R) * .2);            /* the headline's size; the other words hang off it */
  --u-line:.34em; --u-btn:.265em;
  --up:calc(var(--R) * .168);         /* the pain lines */
  --uh:56px;                          /* "Stay organized." */
  --strong:#1E2939; --soft:#364153;   /* the bold words · the small print that must still read easily */
  --rowh:40px; --who-w:82px; --due-w:112px; --cg:12px; --rp:14px;
  --ww:520px; --wl:72px; --wt:120px;
  --ut:clamp(34px,5vw,72px);          /* the four promises */
  --uf:clamp(27px,3.6vw,52px);        /* "See it work in one minute." */
  --uv:clamp(18px,1.9vw,29px);        /* the people's words */
  --us:clamp(33px,4.5vw,64px);        /* "Start in three steps." */
  --bw:680px; --bl:60%; --bt:120px; --bdh:auto; --bxw:163px; --bxh:46px; --colh:24px;
  --fw:min(100%,1040px); --fh:auto; --vw:min(100%,640px); --vh:auto; --sw:auto;
}
@supports (height:100svh){ :root{--H:100svh;--R:min(40svh,360px,calc(50vw - 72px))} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--page);scroll-behavior:auto;overflow-x:clip}
body{margin:0;background:var(--page);color:var(--text);font:400 17px/1.5 var(--ff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block}
h1,h2,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--leaf-mist);color:var(--ink)}
:focus-visible{outline:3px solid var(--today);outline-offset:3px;border-radius:8px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- the button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:3.3em;padding:0 1.7em 0 1.45em;border-radius:999px;
  font:600 1em/1 var(--ff);letter-spacing:-.005em;color:#fff;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--leaf-top),var(--leaf-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 -1px 0 rgba(0,0,0,.10) inset,0 1px 2px rgba(20,60,10,.22),0 14px 28px -12px rgba(40,110,20,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 -1px 0 rgba(0,0,0,.10) inset,0 1px 2px rgba(20,60,10,.22),0 20px 34px -12px rgba(40,110,20,.6)}
.btn:active{transform:translateY(0);filter:brightness(.98)}

/* ---------- the words ---------- */
.hero-words{font-size:var(--u);display:flex;flex-direction:column;align-items:center;text-align:center;width:max-content;max-width:calc(100vw - 24px)}
.hw-logo{height:.62em;margin-bottom:.44em}
.hw-logo .lg{position:relative;display:block;height:100%}
.hw-logo img{height:100%;width:auto}
/* the caret that types the logo: a full-width box with a thin line on its left edge, moved by transform only */
.caret{position:absolute;left:0;top:-12%;width:100%;height:124%;opacity:0;pointer-events:none}
.caret::before{content:"";position:absolute;left:0;top:0;bottom:0;width:max(2px,.06em);border-radius:2px;background:var(--leaf-deep)}
.hw-head{font:500 1em/1.05 var(--ff);letter-spacing:-.025em;color:var(--head)}
.hw-head span{display:block;white-space:nowrap}
.hw-line{margin-top:1.02em;font-size:var(--u-line);line-height:1.38;max-width:16.5em;color:var(--soft);letter-spacing:-.008em;text-wrap:balance}
.hw-line b{font-weight:700;color:var(--strong)}
.hw-btn{margin-top:1.5em;font-size:var(--u-btn)}

.pain-words{font-size:var(--up);text-align:center;width:var(--bw-em,8em)}
.pain-lines{position:relative;height:var(--bh-em,2.1em)}
.pain-lines li{position:absolute;left:0;right:0;top:0;font:400 1em/1.1 var(--ff);letter-spacing:-.026em;color:var(--text-2);text-wrap:balance}      /* calm, not bold: the ring is the loud thing here */
.pain-lines em{font-style:normal;color:var(--head)}
.pain-lines li>span{display:block}

.how-words{font-size:var(--uh);width:var(--bw-em,7.6em);text-align:center}
.how-h{font:700 1em/1.04 var(--ff);letter-spacing:-.032em;color:var(--head);text-wrap:balance}
.how-c{margin-top:.5em;font:400 .44em/1.3 var(--ff);letter-spacing:-.012em;color:var(--soft);text-wrap:balance}
.how-c b,.how-steps b{font-weight:700;color:var(--strong)}
.how-steps{position:relative;margin-top:1.05em;height:var(--hs,2.8em);font-size:.36em;line-height:1.4;color:var(--text)}
.how-steps li{position:absolute;left:0;right:0;top:0;text-wrap:balance}

/* ---------- the light ---------- */
.glow{position:absolute;inset:0;pointer-events:none}
.glow i{position:absolute;left:50%;top:var(--cy);display:block;border-radius:50%}
.g-wash{width:calc(var(--R) * 3.6);height:calc(var(--Rb) * 3.6);margin:calc(var(--Rb) * -1.8) 0 0 calc(var(--R) * -1.8);
  background:radial-gradient(closest-side,rgba(214,232,190,.58) 0%,rgba(217,234,195,.52) 12%,rgba(223,237,204,.42) 25%,rgba(230,241,215,.30) 40%,rgba(237,245,226,.18) 56%,rgba(244,248,237,.08) 74%,rgba(250,250,250,0) 100%)}
.g-arc{width:calc(var(--R) * 3.2);height:calc(var(--Rb) * 3.2);margin:calc(var(--Rb) * -1.6) 0 0 calc(var(--R) * -1.6);
  background:radial-gradient(closest-side,rgba(184,211,56,0) 44%,rgba(184,211,56,.06) 50%,rgba(180,210,58,.17) 55%,rgba(172,206,60,.30) 60%,rgba(172,206,60,.36) 62.5%,rgba(184,214,90,.30) 65%,rgba(198,221,130,.18) 70%,rgba(205,225,166,.08) 76%,rgba(205,225,166,0) 84%);
  -webkit-mask-image:conic-gradient(from 120deg at 50% 50%,transparent 0deg,rgba(0,0,0,.35) 30deg,#000 72deg,#000 104deg,rgba(0,0,0,.35) 150deg,transparent 190deg,transparent 360deg);
          mask-image:conic-gradient(from 120deg at 50% 50%,transparent 0deg,rgba(0,0,0,.35) 30deg,#000 72deg,#000 104deg,rgba(0,0,0,.35) 150deg,transparent 190deg,transparent 360deg)}
.g-win{width:calc(var(--ww) * 2.9);height:calc(var(--ww) * 2.9);margin:calc(var(--ww) * -1.45) 0 0 calc(var(--ww) * -1.45);opacity:0;
  background:radial-gradient(closest-side,rgba(198,221,150,.62) 0%,rgba(201,223,156,.58) 20%,rgba(208,227,172,.46) 34%,rgba(218,234,194,.31) 48%,rgba(229,240,213,.18) 63%,rgba(240,246,231,.08) 80%,rgba(250,250,250,0) 100%)}

/* ---------- TimeMaker's window ---------- */
.tmw{width:var(--ww);background:#fff;border-radius:11px;overflow:hidden;box-shadow:0 0 0 1px var(--tm-frame),var(--sh-win);font-family:var(--ff);color:var(--ink);text-align:left}
.tmw-bar{position:relative;display:flex;align-items:center;gap:9px;height:40px;padding:0 15px 0 10px;color:#fff;background:linear-gradient(180deg,var(--tm-slate-1),var(--tm-slate-2));border-bottom:1px solid var(--tm-slate-3)}
.tmw-bar::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.18)}
.tmw-ic{width:22px;height:22px;display:grid;place-items:center;flex:none}
.tmw-ic svg{width:20px;height:20px;fill:#F3E6D6}
.tmw-v{font:700 15px/1 var(--ff);letter-spacing:-.005em;white-space:nowrap}
.tmw-f{font:400 13px/1 var(--ff);color:rgba(255,255,255,.82);white-space:nowrap;padding-left:9px;border-left:1px solid rgba(255,255,255,.28)}
.tmw-d{margin-left:auto;padding-left:10px;font:400 12px/1 var(--ff);color:rgba(255,255,255,.86);white-space:nowrap}
.tmw-main{display:grid;grid-template-columns:44px minmax(0,1fr)}
.tmw-rail{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 0;background:linear-gradient(180deg,#73869F,var(--tm-rail));border-right:1px solid #5A6C88}
.tmw-rail i{width:31px;height:31px;border-radius:7px;display:grid;place-items:center;color:rgba(255,255,255,.74)}
.tmw-rail i.on{background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.tmw-rail svg{width:17px;height:17px}
.tmw-list{position:relative;min-width:0;--sx:calc(var(--rp) + 16px + var(--cg) * 1.5 + var(--who-w));--ex:calc(var(--rp) + var(--due-w) + var(--cg) / 2);
  background:linear-gradient(90deg,transparent var(--sx),var(--tm-subject) var(--sx),var(--tm-subject) calc(100% - var(--ex)),transparent calc(100% - var(--ex)))}
.tmw-cols,.row,.rowf{display:grid;grid-template-columns:16px var(--who-w) minmax(0,1fr) var(--due-w);align-items:center;column-gap:var(--cg);padding:0 var(--rp)}
.tmw-cols{height:28px;background:var(--tm-head);border-bottom:1px solid var(--tm-line);font:700 11px/1 var(--ff);color:#4A5263}
.tmw-cols span:last-child{text-align:right}
.row,.rowf{height:var(--rowh);font-size:13px;--t:var(--ink);--d:var(--ink)}
.row{background:linear-gradient(var(--tm-line),var(--tm-line)) 0 100%/100% 1px no-repeat}
.late{--t:var(--late-ink);--d:var(--late-ink)} .today{--d:var(--today-ink)} .coming{--d:var(--coming-ink)}
.ck{width:14px;height:14px;border-radius:50%;border:1.5px solid #C9CED8}
.who{font:700 12.5px/1.2 var(--ff);color:var(--t);white-space:nowrap;overflow:hidden}
.row b,.rowf b{font:700 13px/1.2 var(--ff);color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;font:700 12px/1 var(--ff);color:var(--d);white-space:nowrap}
.due svg{width:13px;height:9px;flex:none;color:var(--tm-arrow)}
.due span{display:block;text-align:right;font-variant-numeric:tabular-nums}
.tmw-st{display:flex;align-items:center;height:30px;padding:0 14px;background:#F3F4F6;border-top:1px solid #E1E4E9;font:400 12px/1 var(--ff);color:#4A5263}
.tmw-st b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- the email cards ---------- */
.cards{position:absolute;left:0;top:0;width:100%;height:var(--H);z-index:20;pointer-events:none;overflow:visible}
.card{position:absolute;left:50%;top:var(--cy);width:0;height:0;font-size:calc(var(--cw) / 12);
  transform:rotate(calc((var(--i) + .5) * 30deg)) translate3d(0,calc(var(--R) * -1),0) rotate(180deg)}
.cs{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch)}
.hit{position:absolute;inset:-3px;border-radius:14px;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lift{position:absolute;inset:0;perspective:760px}
.flip{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair),var(--sh-card);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.card.up .face{box-shadow:0 0 0 1px var(--hair),var(--sh-lift)}
/* the email: wordless, the reader's own mess. No day colours and no green here. */
.mail .dot{position:absolute;left:1.05em;top:1.05em;width:1.9em;height:1.9em;border-radius:50%;background:var(--tint)}
.mail b{position:absolute;display:block;height:.62em;border-radius:.31em;background:#D3D8E0}
.mail .l1{left:3.6em;top:1.22em;width:calc((100% - 4.8em) * var(--a) / 100%);background:#C3C9D3}
.mail .l2{left:3.6em;top:2.28em;width:calc((100% - 4.8em) * var(--b) / 100%)}
.mail .l3{left:1.05em;top:4.35em;width:calc((100% - 2.1em) * var(--c) / 100%);background:#E8EBF0}
.mail .l4{left:1.05em;top:5.6em;width:calc((100% - 2.1em) * var(--d) / 100%);background:#E8EBF0}
.mail .un{position:absolute;right:.95em;top:1.2em;width:.66em;height:.66em;border-radius:50%;background:#1E2939;opacity:.7}
.mail.new .l1{background:#AEB5C2}
.mail .clip{position:absolute;right:.8em;top:.95em;width:1.15em;height:1.15em;color:#9AA2B0}
/* the task it becomes, the way TimeMaker shows one: who, what, due */
.task{transform:rotateY(180deg);padding:.95em 1em .9em;display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);font-family:var(--ff);text-align:left}
.task .tw{display:flex;align-items:center;gap:.5em;font:700 1.02em/1 var(--ff);color:var(--head)}
.task .tw i{width:1.75em;height:1.75em;border-radius:50%;display:grid;place-items:center;background:var(--tm-slate-2);color:#fff;font:700 .9em/1 var(--ff);font-style:normal}
.task .ts{margin-top:.62em;font:700 1.14em/1.16 var(--ff);letter-spacing:-.01em;color:var(--ink)}
.task .td{margin-top:auto;display:inline-flex;align-items:center;height:1.75em;padding:0 .7em;border-radius:99px;font:700 .92em/1 var(--ff);white-space:nowrap}
.task.late .td{background:rgba(226,53,43,.10);color:var(--late-ink)}
.task.today .td{background:rgba(47,181,200,.15);color:var(--today-ink)}
.task.coming .td{background:rgba(61,98,218,.10);color:var(--coming-ink)}
/* the row it becomes inside the window */
.rowf{position:absolute;left:0;top:0;visibility:hidden;border-radius:3px;font-family:var(--ff);text-align:left;
  background:linear-gradient(90deg,#fff calc(var(--rp) + 16px + var(--cg) * 1.5 + var(--who-w)),var(--tm-subject) calc(var(--rp) + 16px + var(--cg) * 1.5 + var(--who-w)),var(--tm-subject) calc(100% - var(--rp) - var(--due-w) - var(--cg) / 2),#fff calc(100% - var(--rp) - var(--due-w) - var(--cg) / 2));
  box-shadow:inset 0 -1px 0 var(--tm-line);-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* ---------- the small Download button and the draft bar ---------- */
.dock{position:fixed;right:28px;top:22px;z-index:40;font-size:14px;height:40px;padding:0 18px 0 15px;opacity:0;visibility:hidden;pointer-events:none}
.draft{position:fixed;left:50%;bottom:8px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;height:26px;padding:0 3px;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 0 0 1px rgba(16,24,40,.08),0 6px 18px -8px rgba(16,24,40,.22);font:400 11.5px/1 Arial,Helvetica,sans-serif;color:var(--text-2);white-space:nowrap}
.draft[hidden]{display:none}
.draft button{height:20px;padding:0 10px;border:0;border-radius:999px;background:transparent;font:400 11.5px/1 Arial,Helvetica,sans-serif;color:var(--text);cursor:pointer;transition:background .2s,color .2s}
.draft button:hover{background:#EEF1F4}
html.no-bar .draft{display:none}

/* =====================================================================================
   PLAIN: the page as a calm read. Each section shows its rest pose as a still.
   ===================================================================================== */
.story{position:relative}
.stage{position:relative}
html:not(.story) .hero{position:relative;min-height:var(--H);display:grid;place-items:center;padding:0 12px}
html:not(.story) .pain{padding:16vh 24px 12vh;display:grid;place-items:center}
html:not(.story) .pain-words{width:auto}
html:not(.story) .pain-lines{height:auto;display:grid;gap:.3em}
html:not(.story) .pain-lines li{position:static}
html:not(.story) .how{padding:12vh 24px 18vh;display:grid;grid-template-columns:minmax(0,var(--ww)) minmax(0,420px);gap:clamp(40px,7vw,110px);justify-content:center;align-items:center}
html:not(.story) .how-words{order:2}
html:not(.story) .how-steps{height:auto;display:grid;gap:.5em;margin-top:1.2em}
html:not(.story) .how-steps li{position:static}
html:not(.story) .tmw{order:1}
html:not(.story) .g-win{display:none}
html:not(.story) .glow{overflow-x:clip}          /* the light is wider than a phone: it may not widen the page */
html:not(.story) .dock{display:none}
@media (max-width:900px){
  html:not(.story) .how{grid-template-columns:minmax(0,560px);gap:40px}
  html:not(.story) .how-words{order:1;margin:0 auto}
  html:not(.story) .tmw{order:2;width:auto}
}

/* =====================================================================================
   STORY: one held stage. The hero holds the screen while the scroll plays the film.
   The scroll wheel is never taken over: this is position sticky inside a tall section.
   ===================================================================================== */
html.story .story{height:740vh}
html.story .stage{position:sticky;top:0;height:var(--H);overflow:clip}
html.story .hero,html.story .pain,html.story .how,html.story .team,html.story .film-sec,html.story .voices,html.story .start{position:absolute;inset:0;display:block;padding:0;min-height:0;pointer-events:none}
html.story .blk{position:absolute;left:50%;top:var(--cy);transform:translate(-50%,-50%);pointer-events:none}      /* words never take a click: a block that waits unseen would lie on a button */
html.story .hw-btn{pointer-events:auto}
html.story .tmw{position:absolute;left:var(--wl);top:var(--wt)}
html.story .row>*{visibility:hidden}
html.story .cards{position:fixed;height:var(--H)}
/* before v4.js runs only the first screen shows */
html.story:not(.live) .pain,html.story:not(.live) .how,html.story:not(.live) .team,html.story:not(.live) .film-sec,html.story:not(.live) .voices,html.story:not(.live) .start{visibility:hidden}
html.story:not(.live) .g-win{opacity:0}

/* LIVE: v4.js owns the places */
html.live .blk{left:0;top:0;will-change:transform}
html.live .glow i{left:0;top:0}
html.live .card{left:0;top:0;will-change:transform}
html.live .tmw{will-change:transform,opacity}
html.live .hw,html.live .pain-lines li,html.live .how-h,html.live .how-steps li{will-change:transform,opacity}
html.live .board,html.live .filmbox{will-change:transform}
html.live .x8{display:none}

/* ---------- the opening: the words arrive as the middle clears (runs even if v4.js never does) ---------- */
@keyframes wordIn{from{opacity:0;transform:translate3d(0,20px,0);filter:blur(10px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes cardsIn{from{opacity:0}to{opacity:1}}
@keyframes lightIn{from{opacity:.18}to{opacity:1}}
/* the logo is TYPED on: a clip that opens letter by letter (each letter wiped in quickly, then a beat), and a soft caret that leads it.
   The stops are the letters' own edges, measured off the wordmark: T i m e M a k e r */
@keyframes typeLogo{
  0%,7%{clip-path:inset(-14% 100% -14% 0)}
  12%,17%{clip-path:inset(-14% 86.9% -14% 0)}
  19%,27%{clip-path:inset(-14% 84.1% -14% 0)}
  33%,37%{clip-path:inset(-14% 68.4% -14% 0)}
  42%,47%{clip-path:inset(-14% 58.1% -14% 0)}
  53%,57%{clip-path:inset(-14% 40.6% -14% 0)}
  62%,67%{clip-path:inset(-14% 30.4% -14% 0)}
  72%,77%{clip-path:inset(-14% 21.2% -14% 0)}
  82%,87%{clip-path:inset(-14% 11.5% -14% 0)}
  92%,100%{clip-path:inset(-14% -2% -14% 0)}
}
@keyframes typeCaret{
  0%{opacity:0;transform:translate3d(0,0,0)}
  4%,7%{opacity:.85;transform:translate3d(0,0,0)}
  12%,17%{opacity:.85;transform:translate3d(13.1%,0,0)}
  19%,27%{opacity:.85;transform:translate3d(15.9%,0,0)}
  33%,37%{opacity:.85;transform:translate3d(31.6%,0,0)}
  42%,47%{opacity:.85;transform:translate3d(41.9%,0,0)}
  53%,57%{opacity:.85;transform:translate3d(59.4%,0,0)}
  62%,67%{opacity:.85;transform:translate3d(69.6%,0,0)}
  72%,77%{opacity:.85;transform:translate3d(78.8%,0,0)}
  82%,87%{opacity:.85;transform:translate3d(88.5%,0,0)}
  91%,95%{opacity:.85;transform:translate3d(100.6%,0,0)}
  100%{opacity:0;transform:translate3d(100.6%,0,0)}
}
html.opening .lg img{animation:typeLogo var(--t-type,2.6s) linear both;animation-delay:var(--d-type,.2s)}
html.opening .caret{animation:typeCaret var(--t-type,2.6s) linear both;animation-delay:var(--d-type,.2s)}
html.opening .hw-head{animation:wordIn var(--t-word,.95s) var(--ease) both;animation-delay:var(--d-head,3.47s)}
html.opening .hw-line{animation:wordIn var(--t-word,.95s) var(--ease) both;animation-delay:var(--d-line,3.69s)}
html.opening .hw-btn{animation:wordIn var(--t-word,.95s) var(--ease) both;animation-delay:var(--d-btn,3.89s)}
html.opening .glow{animation:lightIn 1.8s ease-out both;animation-delay:var(--d-light,2.75s)}
html.opening:not(.live) .cards{animation:cardsIn .8s ease-out both;animation-delay:2.4s}
html.opening.cut .hw,html.opening.cut .glow,html.opening.cut .lg img,html.opening.cut .caret{animation:none}
html.measuring .hw{animation:none!important}
html.ot .hw,html.ot .glow,html.ot .lg img,html.ot .caret{animation-play-state:paused!important}

/* ---------- phones: eight emails, a tall ring ---------- */
@media (max-width:599px){
  :root{--cy:calc(var(--H) / 2 + 10px);--R:calc(50vw - 31px);--Rb:min(calc((50vw - 31px) * 1.62),calc(var(--H) / 2 - 72px));--cw:66px;--ch:44px;--u:33px;--u-line:.5em;--u-btn:.44em;--up:34px;--uh:30px;
    --rowh:30px;--who-w:54px;--due-w:84px;--cg:8px;--rp:10px;--ww:calc(100vw - 24px);--wl:12px}
  .x12{display:none}
  .hw-line{max-width:13em;margin-top:.95em}
  .hw-btn{margin-top:1.25em}
  .hw-logo{height:.72em;margin-bottom:.5em}
  .hw-btn .btn{height:3.2em;padding:0 1.15em}
  .hw-btn .btn svg{display:none}
  .pain-words{width:var(--bw-em,7.4em)}
  .how-words{width:var(--bw-em,9em)}
  .how-c{font-size:.6em}
  .how-steps{font-size:.58em;margin-top:.7em}
  .tmw-main{grid-template-columns:minmax(0,1fr)}
  .tmw-rail{display:none}
  .tmw-bar{height:32px;gap:7px;padding:0 10px 0 8px}
  .tmw-ic{width:18px;height:18px}.tmw-ic svg{width:17px;height:17px}
  .tmw-v{font-size:13.5px}.tmw-f{font-size:12px;padding-left:7px}.tmw-d{font-size:11px}
  .tmw-cols{height:22px;font-size:10px}
  .tmw-cols,.row,.rowf{grid-template-columns:12px var(--who-w) minmax(0,1fr) var(--due-w)}
  .tmw-list{--sx:calc(var(--rp) + 12px + var(--cg) * 1.5 + var(--who-w))}
  .rowf{background:linear-gradient(90deg,#fff calc(var(--rp) + 12px + var(--cg) * 1.5 + var(--who-w)),var(--tm-subject) calc(var(--rp) + 12px + var(--cg) * 1.5 + var(--who-w)),var(--tm-subject) calc(100% - var(--rp) - var(--due-w) - var(--cg) / 2),#fff calc(100% - var(--rp) - var(--due-w) - var(--cg) / 2))}
  .row,.rowf{font-size:12px}
  .ck{width:12px;height:12px}
  .who{font-size:11px}
  .row b,.rowf b{font-size:12px}
  .due{font-size:11px;gap:3px}
  .due svg{width:11px;height:8px}
  .tmw-st{height:24px;font-size:11px}
  .dock{right:12px;top:12px;font-size:12.5px;height:34px;padding:0 13px 0 11px}
  .g-arc{opacity:.58}                               /* on a small screen the arc is nearer the words: it is kept lighter */
  .card{transform:translate3d(calc(var(--fx) * var(--R)),calc(var(--fy) * var(--Rb)),0) rotate(var(--fr))}
  .card:nth-child(1){--fx:.31;--fy:-.965;--fr:-170deg} .card:nth-child(2){--fx:.93;--fy:-.56;--fr:-112deg}
  .card:nth-child(3){--fx:.93;--fy:.56;--fr:-68deg}    .card:nth-child(4){--fx:.31;--fy:.965;--fr:-10deg}
  .card:nth-child(5){--fx:-.31;--fy:.965;--fr:10deg}   .card:nth-child(6){--fx:-.93;--fy:.56;--fr:68deg}
  .card:nth-child(7){--fx:-.93;--fy:-.56;--fr:112deg}  .card:nth-child(8){--fx:-.31;--fy:-.965;--fr:170deg}
}
@media (max-width:599px) and (max-height:700px){ :root{--u:28px;--up:30px} }

/* a screen too narrow for the list and the ring side by side, wider than a phone: the small print a size up */
@media (min-width:600px) and (max-width:1099px){ .how-c{font-size:.52em} .how-steps{font-size:.56em;margin-top:.8em} }

/* no script at all: nothing waits for an animation */
html.no-js .hw{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){ .hw,.glow,.cards,.lg img,.caret{animation:none!important} .btn{transition:none} }


/* =====================================================================================
   AFTER THE ROWS: the day laid out · the board · the film · the people's words · the stack
   ===================================================================================== */

/* ---------- 3, second half: a stripe of the day's colour on every row, and the one tick ---------- */
.late{--dc:var(--late)} .today{--dc:var(--today)} .coming{--dc:var(--coming)}
.row,.rowf{--stripe-on:var(--stripe,0)}
.row::before,.rowf::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:0 3px 3px 0;background:var(--dc);opacity:var(--stripe-on)}
.row{position:relative}
.ck{display:grid;place-items:center;transition:background .25s,border-color .25s}
.ck svg{width:9px;height:9px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s var(--ease)}
.is-done .ck{background:var(--leaf);border-color:var(--leaf)}
.is-done .ck svg{opacity:1;transform:none}
.is-done .who,.is-done b,.is-done .bw{color:#8C95A4}
.is-done .due,.is-done .bt{color:#2E7D1F}
.t-done,.due span.t-done{display:none}
.is-done .t-due,.is-done .due span.t-due{display:none}
.is-done .t-done{display:inline}
.is-done .due span.t-done{display:block}
.task.is-done .td,.is-done .task .td{background:rgba(125,190,34,.16);color:#2E7D1F}
.card.fly{z-index:3}
.card.fly .rowf{box-shadow:inset 0 -1px 0 var(--tm-line),0 10px 24px -10px rgba(16,24,40,.22)}

.how-key{font-size:max(.3em,14px);line-height:1.45;color:var(--soft)}
.how-key p{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em 1.1em}
.how-key .key-k{flex:0 0 100%;font-weight:700;color:var(--strong);text-align:center;margin-bottom:.1em}
.how-key span{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.how-key span::before{content:"";width:.66em;height:.66em;border-radius:50%;background:var(--dc);flex:none}
html.story .how-key{position:absolute;left:50%;top:100%;width:0;margin-top:1em}
html.story .how-key p{position:absolute;left:0;top:0;width:max-content;max-width:var(--kw,calc(100vw - 32px));transform:translateX(-50%)}

/* ---------- 4: the promises, and TimeMaker's board ---------- */
.team-words{font-size:var(--ut);text-align:center;width:var(--bw-em,8.4em);max-width:calc(100vw - 24px)}
.team-h{font:700 max(.4em,16px)/1.2 var(--ff);letter-spacing:-.012em;color:var(--text)}
.team-lines{position:relative;margin-top:.36em;height:var(--bh-em,4.4em)}
.team-lines li{position:absolute;left:0;right:0;top:0;color:var(--head)}
.team-lines li>span{display:block}
.team-lines b{display:block;font:700 1em/1.03 var(--ff);letter-spacing:-.032em;text-wrap:balance}
.team-lines small{display:block;margin:1.05em auto 0;max-width:17em;font:400 max(.34em,15px)/1.36 var(--ff);letter-spacing:-.008em;color:var(--soft);text-wrap:balance}

.board{width:var(--bw)}
.bd{position:relative;height:var(--bdh);background:#fff}
.bd-l{position:absolute;left:var(--bpx,16px);top:var(--bpy,14px);right:var(--bpx,16px);bottom:var(--bpy,14px);opacity:0;visibility:hidden}
.bh,.bg{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--colh);padding:0 9px 0 11px;border-radius:5px;font:700 12px/1 var(--ff);white-space:nowrap;overflow:hidden}
.bh{color:var(--d,var(--ink));box-shadow:inset 3px 0 0 var(--dc)}
.bh.late{--d:var(--late-ink);background:#FCEBEA} .bh.today{--d:var(--today-ink);background:#E3F5F8} .bh.coming{--d:var(--coming-ink);background:#ECF0FC}
.bh em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;opacity:.8}
.bg{justify-content:flex-start;background:#EEF1F6;color:#33415C}
.bg svg{width:14px;height:14px;flex:none;color:var(--tm-slate-2)}
.bp{position:absolute;display:flex;align-items:center;gap:7px;height:var(--bxh);font:700 12.5px/1 var(--ff);color:var(--head);white-space:nowrap}
.bp i,.bw i{flex:none;border-radius:50%;display:grid;place-items:center;background:var(--tm-slate-2);color:#fff;font-style:normal;font-weight:700;line-height:1}
.bp i{width:22px;height:22px;font-size:11px}
.bd-note{position:absolute;left:0;top:0;z-index:2;width:max-content;max-width:220px;padding:9px 12px 10px;border-radius:10px;background:#FFFBE6;box-shadow:0 0 0 1px rgba(200,170,60,.34),0 14px 30px -12px rgba(16,24,40,.30);font:400 12.5px/1.35 var(--ff);color:#4A4320;opacity:0;visibility:hidden}
.bd-note b{display:block;font:700 12px/1.2 var(--ff);color:#3A3414;margin-bottom:2px}
.bd-note::before{content:"";position:absolute;left:18px;top:-5px;width:10px;height:10px;background:#FFFBE6;transform:rotate(45deg);box-shadow:-1px -1px 0 rgba(200,170,60,.34)}

/* a task on the board: who, when, what. TimeMaker's task box, cleaned up */
.boxf,.box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;row-gap:4px;column-gap:8px;padding:0 10px 0 13px;width:var(--bxw);height:var(--bxh);border-radius:7px;background:#fff;
  box-shadow:0 0 0 1px var(--hair),0 1px 2px rgba(16,24,40,.05),0 8px 16px -10px rgba(16,24,40,.20);font-family:var(--ff);text-align:left;--t:var(--ink);--d:var(--ink)}
.boxf.late,.box.late{--t:var(--late-ink);--d:var(--late-ink)} .boxf.today,.box.today{--d:var(--today-ink)} .boxf.coming,.box.coming{--d:var(--coming-ink)}
.boxf{position:absolute;left:calc(var(--bxw) / -2);top:calc(var(--bxh) / -2);visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.box{position:relative}
.boxf::before,.box::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--dc)}
.bw{display:flex;align-items:center;gap:5px;min-width:0;font:700 11px/1 var(--ff);color:#5A6478;white-space:nowrap}
.bw i{width:15px;height:15px;font-size:9px}
.bt{font:700 11px/1 var(--ff);color:var(--d);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.boxf b,.box b{grid-column:1 / -1;font:700 13px/1.15 var(--ff);color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-done .boxf b,.box.is-done b,.box.is-done .bw{color:#8C95A4}
.box.is-done .bt{color:#2E7D1F}
.bd-still{display:none}

/* ---------- 5: the film ---------- */
.film-words{font-size:var(--uf);text-align:center;width:max-content;max-width:calc(100vw - 24px)}
.film-h{font:400 1em/1.06 var(--ff);letter-spacing:-.025em;color:var(--head);text-wrap:balance}
.film-h b,.start-h b{font-weight:700;letter-spacing:-.032em}
.filmbox{position:relative;width:var(--fw)}
.film-frame{position:relative;border-radius:16px;overflow:hidden;background:#EDEFEA;box-shadow:0 0 0 1px rgba(16,24,40,.10),var(--sh-win)}
.ff-wide{aspect-ratio:16 / 9} .ff-up{aspect-ratio:9 / 16;display:none}
.film-frame img,.film-frame video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
html.upright .ff-wide{display:none} html.upright .ff-up{display:block}
.film-play{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.6em;height:3.4em;padding:0 1.7em 0 1.35em;border:0;border-radius:999px;
  background:rgba(255,255,255,.97);color:var(--head);font:600 15px/1 var(--ff);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  box-shadow:0 0 0 1px rgba(16,24,40,.08),0 18px 40px -14px rgba(16,24,40,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.film-play[hidden]{display:none}
.film-play svg{width:1.25em;height:1.25em;flex:none;fill:var(--leaf-deep)}
.film-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.filmbox.playing .film-play{display:none}
/* while it plays: our own Pause, top right, always there to press */
.film-pause{position:absolute;right:12px;top:12px;z-index:2;display:none;align-items:center;gap:.5em;height:2.7em;padding:0 1.1em 0 .9em;border:0;border-radius:999px;
  background:rgba(255,255,255,.95);color:var(--head);font:600 13px/1 var(--ff);white-space:nowrap;cursor:pointer;box-shadow:0 0 0 1px rgba(16,24,40,.08),0 10px 24px -10px rgba(16,24,40,.4)}
.film-pause svg{width:1.15em;height:1.15em;flex:none;fill:var(--leaf-deep)}
.filmbox.playing .film-pause{display:inline-flex}
.film-pause[hidden],html:not(.story) .film-pause{display:none}

/* ---------- 6: the people's words, laid out as comments ---------- */
.voice-words{font-size:var(--uv);width:var(--vw);max-width:calc(100vw - 24px)}
.voice-h{font:700 max(.7em,16px)/1.2 var(--ff);letter-spacing:-.01em;color:var(--text);text-align:center}
.voice-list{position:relative;margin-top:1.1em;height:var(--vh)}
.voice{position:absolute;left:0;right:0;top:0;margin:0;padding:1.15em 1.3em 1.3em;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--hair),var(--sh-card);text-align:left}
.voice figcaption{display:flex;align-items:center;gap:.65em;margin-bottom:.85em}
.voice img{width:2.35em;height:2.35em;border-radius:50%;object-fit:cover;flex:none;background:#E9ECF1}
.voice img.amit{object-position:50% 36%}
.voice figcaption b{display:block;font:700 max(.7em,15px)/1.2 var(--ff);color:var(--head)}
.voice figcaption small{display:block;margin-top:.28em;font:400 max(.58em,13.5px)/1.3 var(--ff);color:var(--text)}
.voice blockquote{margin:0}
.voice p{font:400 1em/1.38 var(--ff);letter-spacing:-.012em;color:var(--head);text-wrap:pretty}

/* ---------- 7: three steps, the button, the stack ---------- */
.start-words{font-size:var(--us);width:var(--sw);max-width:calc(100vw - 24px);text-align:left}
.start-h{font:400 1em/1.05 var(--ff);letter-spacing:-.025em;color:var(--head)}
.start-steps{margin-top:.8em;display:grid;gap:.62em;font-size:max(.33em,16px);line-height:1.38;color:var(--soft)}
.start-steps b{font-weight:700;color:var(--strong)}
.start-steps li{display:grid;grid-template-columns:1.95em minmax(0,1fr);gap:.75em;align-items:center}
.start-steps i{width:1.95em;height:1.95em;border-radius:50%;display:grid;place-items:center;background:var(--leaf-soft);color:var(--leaf-deep);font:700 .86em/1 var(--ff);font-style:normal}
.start-btn{margin-top:1.1em;font-size:max(.3em,16px)}
.start-fine{margin-top:.95em;font:400 14px/1.4 var(--ff);color:var(--text)}
.pile{position:absolute;left:0;top:0;width:0;height:0}
.pile i{display:none}
.sorted{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.5em;height:28px;padding:0 12px 0 7px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--hair),var(--sh-card);font:700 12.5px/1 var(--ff);color:var(--leaf-deep);white-space:nowrap}
.sorted svg{width:16px;height:16px;padding:3px;border-radius:50%;background:var(--leaf);flex:none}
.foot-line{font:400 13.5px/1.4 var(--ff);color:var(--text);text-align:center}
html.story .foot-line{position:absolute;left:0;right:0;bottom:calc(var(--foot,44px) + 8px)}
.g-hor{width:170vw;height:calc(var(--H) * .92);margin:calc(var(--H) * -.46) 0 0 -85vw;opacity:0;
  background:radial-gradient(closest-side,rgba(198,221,150,.66) 0%,rgba(202,224,158,.60) 14%,rgba(209,228,172,.49) 28%,rgba(219,234,192,.35) 43%,rgba(230,240,212,.21) 58%,rgba(241,246,232,.09) 76%,rgba(250,250,250,0) 100%)}
.g-line{width:76vw;height:2px;margin:-1px 0 0 -38vw;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(184,211,56,0),rgba(184,211,56,.55) 22%,rgba(168,202,48,.9) 50%,rgba(184,211,56,.55) 78%,rgba(184,211,56,0))}
html:not(.story) .g-hor,html:not(.story) .g-line{display:none}

/* ---------- the story: where the later pieces stand (v4.js moves them) ---------- */
html.story .board{position:absolute;left:var(--bl);top:var(--bt);visibility:hidden}
html.story .bd-note{position:fixed;left:0;top:0;z-index:25;pointer-events:none}
html.story .filmbox{position:fixed;left:0;top:0;z-index:30;height:var(--fh);visibility:hidden;pointer-events:auto}
html.story .film-frame{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;
  /* the film's own shadow is green underneath: the light comes out at its lower edge */
  box-shadow:0 0 0 1px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.05),0 22px 50px -20px rgba(16,24,40,.16),0 44px 80px -22px rgba(118,178,40,.5),0 80px 130px -40px rgba(125,190,34,.36)}
html.story .team-words,html.story .film-words,html.story .voice-words,html.story .start-words{pointer-events:none}
html.story .start-words a,html.story .voice{pointer-events:auto}
html.story .voice{transform-origin:0 0;will-change:transform,opacity}
html.upright .start-words{text-align:center}
html.upright .start-steps{text-align:left;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}

/* ---------- the plain page: the later sections as stills ---------- */
html:not(.story) .rowf,html:not(.story) .boxf{display:none}          /* a card's other shapes belong to the story: here they would only widen the page */
html:not(.story) .row,html:not(.story) .rowf{--stripe-on:1}
html:not(.story) .how-key{margin-top:1.4em}
html:not(.story) .how-steps li:nth-child(3){display:block}
html:not(.story) .team{padding:14vh 24px 12vh;display:grid;justify-items:center;gap:clamp(36px,6vh,64px)}
html:not(.story) .team-words{width:min(100%,12em)}
html:not(.story) .team-lines{height:auto;margin-top:.6em;display:grid;gap:.7em}
html:not(.story) .team-lines li{position:static}
html:not(.story) .board{width:min(100%,var(--bw))}
html:not(.story) .bd{height:auto;padding:14px 16px 16px}
html:not(.story) .bd-l,html:not(.story) .bd-note{display:none}
html:not(.story) .bd-still{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.bcol{display:grid;gap:8px;min-width:0}
.bcol .bh{position:relative}
.bcol .box{width:auto}
html:not(.story) .film-sec{padding:12vh 24px;display:grid;justify-items:center;gap:clamp(24px,4vh,40px)}
html:not(.story) .film-play{display:none}
html:not(.story) .voices{padding:12vh 24px;display:grid;justify-items:center}
html:not(.story) .voice-list{height:auto;display:grid;gap:18px}
html:not(.story) .voice{position:relative}
html:not(.story) .start{position:relative;padding:14vh 24px 12vh;display:grid;justify-items:center;gap:44px;background:linear-gradient(180deg,rgba(240,247,229,0),var(--leaf-wash) 55%,var(--leaf-soft))}
html:not(.story) .start-words{text-align:center}
html:not(.story) .start-steps{text-align:left;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
html:not(.story) .pile{position:relative;width:calc(var(--cw) + 16px);height:calc(var(--ch) + 40px)}
html:not(.story) .pile i{display:block;position:absolute;left:8px;width:var(--cw);height:var(--ch);border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--hair),var(--sh-card)}
html:not(.story) .pile i:nth-child(1){top:36px} html:not(.story) .pile i:nth-child(2){top:27px;left:6px} html:not(.story) .pile i:nth-child(3){top:18px;left:9px} html:not(.story) .pile i:nth-child(4){top:9px;left:7px}
html:not(.story) .sorted{left:auto;right:-46px;top:-6px}
@media (max-aspect-ratio:1 / 1){
  html:not(.story) .ff-wide{display:none}
  html:not(.story) .ff-up{display:block}
  html:not(.story) .filmbox{width:min(100%,420px)}
}

/* ---------- the download step ---------- */
.btn-block{width:100%}
button.btn{border:0;cursor:pointer}
.dl{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.dl[hidden]{display:none}
.dl-scrim{position:absolute;inset:0;background:rgba(16,24,40,.46);opacity:0;transition:opacity .35s}
.dl.open .dl-scrim{opacity:1}
.dl-card{position:relative;width:min(460px,100%);max-height:calc(var(--H) - 40px);overflow:auto;background:#fff;border-radius:22px;padding:34px 34px 28px;font-family:var(--ff);color:var(--ink);
  box-shadow:0 2px 6px rgba(16,24,40,.12),0 40px 100px -30px rgba(16,24,40,.55);transform:translateY(18px) scale(.98);opacity:0;transition:transform .5s var(--ease),opacity .35s}
.dl-card::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,var(--leaf-wash),rgba(240,247,229,0));pointer-events:none;border-radius:22px 22px 0 0}
.dl.open .dl-card{transform:none;opacity:1}
.dl-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(16,24,40,.05);cursor:pointer;display:grid;place-items:center;z-index:2;transition:background .2s,transform .3s var(--ease)}
.dl-x:hover{background:rgba(16,24,40,.1);transform:rotate(90deg)}
.dl-x svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.dl-step{position:relative;display:none}
.dl-card[data-state="form"] .dl-form,.dl-card[data-state="win"] .dl-win,.dl-card[data-state="other"] .dl-other{display:block;animation:stepIn .55s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}}
.dl-logo{height:17px;width:auto;margin-bottom:22px}
.dl h2{font:500 31px/1.06 var(--ff);letter-spacing:-.025em;color:var(--head);margin-bottom:10px}
.dl-sub{font:400 15.5px/1.55 var(--ff);color:var(--text);margin-bottom:24px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font:700 13px/1 var(--ff);color:var(--ink);margin-bottom:8px}
.fld input{width:100%;height:52px;padding:0 16px;border-radius:11px;border:1.5px solid #D5D9E0;background:#FCFCFD;font:400 16px/1 var(--ff);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.fld input::placeholder{color:#A3AAB6}
.fld input:hover{border-color:#BFC5CF}
.fld input:focus{outline:0;border-color:var(--leaf);box-shadow:0 0 0 4px rgba(125,190,34,.2);background:#fff}
.fld .err{display:none;margin-top:7px;font:400 13px/1.3 var(--ff);font-style:normal;color:var(--late-ink)}
.fld.bad input{border-color:var(--late);box-shadow:0 0 0 4px rgba(226,53,43,.12)}
.fld.bad .err{display:block}
.dl form .btn{margin-top:8px;font-size:16px}
.dl-fine{margin-top:14px;font:400 12.5px/1.5 var(--ff);color:var(--text-2);text-align:center}
.dl-fine a{color:#2E6F14;font-weight:700}
.dl-ok{width:52px;height:52px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;margin-bottom:20px;box-shadow:0 0 0 8px rgba(125,190,34,.18);animation:okPop .7s var(--ease)}
.dl-ok svg{width:26px;height:26px}
@keyframes okPop{from{transform:scale(.4);opacity:0}}
.next{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.next li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:12px;background:var(--leaf-wash);border:1px solid #DCEBC4;font:400 14.5px/1.5 var(--ff);color:var(--text)}
.next i{width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;font:700 14px/1 var(--ff);font-style:normal;color:var(--leaf-deep)}
.next b{color:var(--ink)}
.btn-copy{margin-top:18px;font-size:16px;border:0;cursor:pointer}
.btn-copy.copied{background:linear-gradient(180deg,#5AA82E,#3F8A1E)}
html.dl-lock,html.dl-lock body{overflow:hidden}
@media (max-width:599px){ .dl-card{padding:28px 22px 22px;border-radius:20px} .dl h2{font-size:27px} }

/* ---------- phones: the later pieces ---------- */
@media (max-width:599px){
  :root{--bxh:48px;--colh:20px;--bpx:10px;--bpy:10px}
  .team-words{width:var(--bw-em,9em)}
  .team-lines small{margin-top:.8em}
  .boxf,.box{padding:0 7px 0 10px;row-gap:3px;column-gap:4px}
  .boxf b,.box b{font-size:11.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12}
  .bw,.bt{font-size:10px}
  .bw i{width:13px;height:13px;font-size:8px}
  .bh,.bg{font-size:10.5px;padding:0 6px 0 8px}
  .bp{font-size:11px;gap:4px}
  .bp i{width:17px;height:17px;font-size:9px}
  .bd-note{max-width:170px;font-size:11.5px;padding:7px 10px 8px}
  .film-frame{border-radius:14px}
  .film-play{font-size:14px}
  .voice{padding:1em 1.05em 1.1em;border-radius:16px}
  .box.x12{display:none}
  html.no-js .bd-still .bh em,html.no-js .tmw-st>span{visibility:hidden}     /* with no script nobody can count the eight that are shown */
  html:not(.story) .team{padding-left:12px;padding-right:12px}          /* the board as wide as in the story: a name and its due date need the room */
  html:not(.story) .bd{padding:10px}
  html:not(.story) .bd-still{gap:6px}
}