@font-face{
  font-family:Archivo;font-style:normal;font-weight:400 800;font-stretch:62% 125%;
  font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Archivo;font-style:normal;font-weight:400 800;font-stretch:62% 125%;
  font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   DAYLIGHT

   The page is white and mostly empty, and the product is the only thing drawn
   on it. Three rules hold it together.

   SPACE IS THE ARGUMENT. A tool that claims to give people their attention
   back cannot be sold on a crowded page. Every section states one thing, at a
   size you cannot miss, with air around it. Where the old page explained, this
   one shows and stops talking.

   THE DEMONSTRATION IS THE PAGE. The middle of the document is a single
   sticky stage driven by scroll position: the clock advances, the prompt
   arrives, one tap fills in the quarter-hour that already went by, and then
   the whole day assembles. Nobody has to be told what retroactive fill means
   because they watch it happen at their own pace, forwards or backwards.

   GLASS NEEDS SOMETHING TO BEND. Apple's material takes its colour from what
   is behind it, so on a flat white ground it is invisible. Every glass surface
   here sits over a soft wash of colour placed deliberately underneath it. Take
   the washes away and the controls become grey boxes.

   Colour is one accent and nothing else: amber, which is time that has been
   accounted for. It appears at three lightnesses, chosen by whether words sit
   on it rather than by taste — the brand orange is only 3.1:1 against white, so
   it draws shapes and never carries small text. Two support tints exist solely
   so a day can hold more than one project. There is no second brand colour.
   ========================================================================== */

:root{
  --bg:#fff;
  --bg-soft:#f5f5f7;
  --bg-deep:#0f1012;

  --ink:#1d1d1f;
  --ink-2:#55555b;          /* 7.0:1 on white — body secondary */
  --ink-3:#6e6e75;          /* 5.2:1 on white — smallest text still passes */
  --line:#e4e4ea;
  --line-soft:#efeff3;

  /* Three ambers, split by job rather than by taste. Bright is for shapes, where
     no contrast minimum applies; solid is for a surface with white words on it;
     deep is for amber words on white. White on the bright one is 3.1:1. */
  --amber:#ff5b1a;          /* shapes only: the dial arc, the day, the plan track */
  --amber-solid:#c94008;    /* white on it = 5.0:1 — filled controls */
  --amber-deep:#bf3d06;     /* on white = 5.4:1 — amber words */
  --amber-wash:#fff3ec;

  --slate:#5b7c99;          /* second project in the day — a shape */
  --slate-deep:#4f6b85;     /* on white = 5.6:1 — the same colour as words */
  --teal:#2f6f63;           /* third project in the day */

  --r-capsule:999px;
  --r-panel:22px;
  --r-inner:14px;

  --shell:min(1080px,100%);
  --gutter:clamp(20px,5vw,40px);
  --section:clamp(5.5rem,12vh,9rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}

.shell{width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section)}

/* --- type scale ------------------------------------------------------- */
.display{
  font-size:clamp(2.25rem,6.9vw,5.1rem);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.03;
}
.h2{
  font-size:clamp(1.95rem,4.6vw,3.25rem);
  font-weight:680;
  letter-spacing:-.026em;
  line-height:1.1;
}
.h3{font-size:1.22rem;font-weight:620;letter-spacing:-.012em;line-height:1.3}
.lede{
  font-size:clamp(1.1rem,1.9vw,1.42rem);
  line-height:1.5;
  color:var(--ink-2);
  font-weight:400;
  letter-spacing:-.004em;
}
.measure{max-width:34ch}
.measure-wide{max-width:52ch}
.small{font-size:.925rem;line-height:1.55;color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}

/* --- glass ------------------------------------------------------------
   One material, three sizes. The rim is a fixed pixel thickness and never a
   percentage: as a share of the box a tall panel gets a white band where a
   button gets a lip.                                                      */
.glass{
  position:relative;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
  backdrop-filter:blur(22px) saturate(185%);
  border:.5px solid rgba(0,0,0,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(20,20,30,.05),
    0 12px 32px -12px rgba(20,20,40,.16);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.94)}
}

/* --- controls ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.82rem 1.45rem;
  border-radius:var(--r-capsule);
  font-size:1.02rem;font-weight:560;letter-spacing:-.01em;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,background-color .22s;
}
.btn-primary{
  background:var(--ink);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 24px -12px rgba(0,0,0,.5);
}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-glass{color:var(--ink);border-radius:var(--r-capsule)}
.btn-glass:hover{
  background:rgba(255,255,255,.86);
  transform:translateY(-1px);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  backdrop-filter:blur(26px) saturate(200%);
}
.btn-glass:active{transform:translateY(0) scale(.985)}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px;border-radius:6px}

/* --- nav --------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;
  padding-block:.55rem;
  border-bottom:.5px solid transparent;
  transition:background-color .3s,border-color .3s,backdrop-filter .3s;
}
.nav.lifted{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(0,0,0,.07);
}
.nav .shell{display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.58rem;text-decoration:none;font-weight:620;letter-spacing:-.018em}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.nav-links a{text-decoration:none;font-size:.95rem;color:var(--ink-2);transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:.5rem 1.05rem;font-size:.93rem}
@media (max-width:640px){ .nav-links a:not(.nav-cta){display:none} }

/* --- hero -------------------------------------------------------------- */
.hero{
  position:relative;
  padding-top:clamp(6.4rem,13.5vh,9rem);
  padding-bottom:clamp(3rem,7vh,5rem);
  text-align:center;
  overflow:hidden;
}
/* The washes the glass reads. Two soft sources, warm above and cool below, so
   the material has a direction to take colour from instead of a flat field. */
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.hero::before{
  width:min(1200px,150vw);aspect-ratio:1;left:50%;top:-58%;transform:translateX(-50%);
  background:radial-gradient(circle closest-side,
    rgba(255,122,61,.20) 0%, rgba(255,122,61,.12) 32%, rgba(255,122,61,.05) 58%,
    rgba(255,122,61,.018) 76%, transparent 100%);
}
.hero::after{
  width:min(900px,120vw);aspect-ratio:1.2;right:-18%;top:24%;
  background:radial-gradient(circle closest-side,
    rgba(91,124,153,.16) 0%, rgba(91,124,153,.07) 42%, rgba(91,124,153,.02) 72%, transparent 100%);
}
.hero .display{margin-inline:auto;max-width:21ch}
.hero .lede{margin:1.45rem auto 0;max-width:40ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem}
.hero-note{margin-top:1.5rem;font-size:.9rem;color:var(--ink-3)}
.hero-note b{font-weight:560;color:var(--ink-2)}

/* --- the prompt panel, which is the product ----------------------------
   Hung off a suggestion of the menu bar rather than floating in the middle of
   the page, because where the app lives is half of what it is. The bar carries
   no other app's mark: the menus are unlabelled shapes, which is honest about
   being a diagram and avoids dressing the page in somebody else's trademarks. */
.macwrap{width:min(820px,100%);margin:clamp(2.2rem,5vh,3.4rem) auto 0;position:relative;
         padding-bottom:clamp(0px,7vw,68px)}
.macbar{
  display:flex;align-items:center;gap:.55rem;
  height:34px;padding:0 .9rem;border-radius:11px;
}
.mb-item{height:6px;border-radius:99px;background:rgba(0,0,0,.10)}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.mb-mark{
  display:grid;place-items:center;width:23px;height:23px;border-radius:7px;
  background:rgba(255,91,26,.14);
}
.mb-time{font-size:.75rem;font-weight:520;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* --- the machine ---------------------------------------------------------
   Competitors put the software inside a laptop and it is the single most
   convincing thing on their pages, because a screenshot floating on white is a
   picture of an interface while a screenshot inside a machine is a picture of
   somebody's afternoon. The frame is drawn in CSS rather than fetched as a
   device mockup: no third-party asset, and it stays sharp at any size.

   What is inside is a real screenshot of the real app with real data in it —
   a running timer, 82% of the day accounted for, and the three-quarters of an
   hour at lunch left honestly unaccounted. */
.mac{position:relative;width:100%}
.mac-screen{
  position:relative;padding:11px 11px 13px;border-radius:17px;
  background:linear-gradient(#4a4a50,#2a2a2e 38%,#202024);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 26px 50px -24px rgba(20,20,40,.5),
    0 4px 12px -6px rgba(20,20,40,.3);
}
.mac-view{
  position:relative;border-radius:7px;overflow:hidden;background:#faf7f1;
  display:flex;flex-direction:column;
}
.mac-notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:3;
  width:13%;max-width:98px;height:12px;background:#202024;
  border-radius:0 0 7px 7px;
}
.mac-shot{display:block;width:100%;height:auto}
/* the lid's foot: a thin lighter band, then the desk shadow */
.mac-base{
  height:9px;margin-inline:-3.5%;border-radius:0 0 11px 11px;
  background:linear-gradient(#313136,#1b1b1f);
  box-shadow:0 12px 26px -12px rgba(20,20,40,.45);
}
.mac-base::after{
  content:"";display:block;width:14%;height:3px;margin:0 auto;
  border-radius:0 0 4px 4px;background:rgba(0,0,0,.34);
}

/* the menu bar belongs to the screen, so inside the frame it loses its capsule */
.mac-view .macbar{
  height:24px;padding:0 10px;border-radius:0;gap:.45rem;flex:none;
  background:rgba(252,250,246,.86);border:0;box-shadow:none;
  border-bottom:.5px solid rgba(0,0,0,.08);
}
.mac-view .mb-item{height:5px;background:rgba(0,0,0,.16)}
.mac-view .mb-mark{width:17px;height:17px;border-radius:5px}
.mac-view .mb-time{font-size:.62rem}

.prompt{
  width:min(420px,100%);
  border-radius:24px;
  padding:1.4rem 1.45rem 1.3rem;
  text-align:left;
  position:absolute;right:-4%;bottom:-13%;z-index:4;
}
@media (max-width:760px){
  .prompt{position:static;margin:1.1rem auto 0;width:min(420px,100%)}
}
.prompt-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem}
.prompt-since{
  margin-left:auto;font-size:.8rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.prompt-q{font-size:1.32rem;font-weight:620;letter-spacing:-.018em;margin-top:.5rem}
.prompt-sub{font-size:.875rem;color:var(--ink-3);margin-top:.28rem}
.chips{display:flex;flex-wrap:wrap;gap:.44rem;margin-top:1.05rem}
.chip{
  padding:.45rem .82rem;border-radius:var(--r-capsule);
  background:rgba(255,255,255,.7);border:.5px solid rgba(0,0,0,.08);
  font-size:.9rem;font-weight:500;color:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.chip.on{
  background:var(--amber-solid);border-color:transparent;color:#fff;
  /* Neutral elevation, not a tinted halo. The fill already says "chosen"; a
     coloured glow under it adds nothing and is the standing AI-slop tell. */
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 5px 12px -5px rgba(0,0,0,.28);
  transform:scale(1.03);
}

/* --- the scrolling stage ---------------------------------------------- */
.stage-wrap{position:relative;padding:0}
.stage{
  position:sticky;top:0;
  min-height:100svh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle 620px at 78% 22%, rgba(255,122,61,.13), transparent 70%),
    radial-gradient(circle 520px at 14% 78%, rgba(91,124,153,.12), transparent 70%);
}
.stage-inner{width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* The caption and the clock share the top line: the words and the time they are
   describing, side by side, so the eye does not have to travel to pair them. */
.stage-top{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  margin-bottom:clamp(1.8rem,4.5vh,3rem);
}
.stage-caption{position:relative;min-height:6.6em}
.cap{
  position:absolute;inset:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.cap.on{opacity:1;transform:none}
.cap .h2{margin-bottom:.55rem;max-width:19ch}

.stage-clock{display:flex;flex-direction:column;align-items:center;gap:.55rem;flex:none}
.clock-time{
  font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
@media (max-width:720px){
  .stage-top{grid-template-columns:1fr;gap:1.4rem}
  .stage-clock{flex-direction:row;align-items:center;gap:.9rem;justify-content:flex-start}
}

/* the dial */
.dial{width:clamp(104px,13vw,150px);height:auto;flex:none}
.dial .hand{transform-origin:16px 16px;transition:transform .1s linear}
.dial .swept{transition:stroke-dashoffset .12s linear}

/* the day — the thing being built, and so the largest object on the stage */
.day{width:100%;position:relative}
.day-scale{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink-3);
           font-variant-numeric:tabular-nums;margin-bottom:.55rem}
.day-bar{
  display:grid;grid-template-columns:repeat(32,1fr);gap:3px;
  height:clamp(88px,16vh,142px);
  padding:6px;border-radius:var(--r-inner);
  background:rgba(255,255,255,.55);border:.5px solid rgba(0,0,0,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.slot{
  border-radius:3px;background:#e7e7ee;
  transform:scaleY(.38);transform-origin:bottom;
  transition:background-color .35s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.slot.filled{transform:scaleY(1)}
.slot.p1.filled{background:var(--amber)}
.slot.p2.filled{background:var(--slate)}
.slot.p3.filled{background:var(--teal)}
.slot.gap.filled{background:var(--line);transform:scaleY(.42)}
.day-foot{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1rem;font-size:.85rem;color:var(--ink-3)}
.day-foot b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* The prompt arrives over the day rather than beneath it — it is a thing that
   appears on top of your work, which is exactly where the real one appears. */
.stage-prompt{
  position:absolute;right:0;top:calc(100% - clamp(20px,4vh,44px));z-index:3;
  width:min(390px,100%);border-radius:20px;padding:1rem 1.15rem;
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.stage-prompt.on{opacity:1;transform:none}
@media (max-width:720px){
  .stage-prompt{position:static;width:100%;margin-top:1.2rem}
}

/* --- the lead-in -------------------------------------------------------
   The stage pins silently, so without this the reader met a screen of white
   and a clock that had not started moving yet, with nothing saying a
   demonstration was about to run. This is the signpost, in normal flow, and it
   is deliberately shallow: it fills the gap rather than adding to it. */
.lead-in{padding-block:clamp(3.5rem,8vh,5.5rem) clamp(1.5rem,4vh,2.5rem);text-align:center}
.lead-in .h2{margin-inline:auto}
.lead-in .lede{margin:1rem auto 0;max-width:44ch}
.play-cue{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.7rem;
  padding:.5rem 1.05rem;border-radius:var(--r-capsule);
  background:var(--amber-wash);color:var(--amber-deep);
  font-size:.9rem;font-weight:560;letter-spacing:-.006em;
}
.play-cue svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,62%,100%{transform:translateY(0)}78%{transform:translateY(3px)}}

/* --- the transport rail ------------------------------------------------
   Pinned to the foot of the stage, where a scrubber belongs. Six segments
   because there are six beats: it answers "how long is this" without a word,
   and it is the one thing on the stage that never leaves. */
.stage-rail{
  position:absolute;left:50%;bottom:clamp(1.1rem,3.2vh,2.1rem);transform:translateX(-50%);
  width:min(360px,calc(100% - 2 * var(--gutter)));
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.rail-segs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%}
.rail-segs i{
  display:block;height:3px;border-radius:99px;background:var(--line);
  transition:background-color .35s ease;
}
.rail-segs i.past{background:var(--amber);opacity:.38}
.rail-segs i.now{background:var(--amber)}
.rail-label{
  font-size:.8rem;color:var(--ink-3);display:flex;align-items:center;gap:.45rem;
  font-variant-numeric:tabular-nums;
}

/* --- product tiles -----------------------------------------------------
   One screenshot each, sitting on a tint that belongs to the section rather
   than to the shot. The tint is what stops a row of screenshots reading as a
   row of grey rectangles — the competitor pages that do this well all do it. */
.tiles{display:grid;gap:clamp(1.4rem,3vw,2.2rem);margin-top:2.8rem}
@media (min-width:820px){ .tiles{grid-template-columns:1fr 1fr} }
.tile-panel{
  border-radius:var(--r-panel);padding:clamp(1.1rem,2.6vw,1.9rem);
  display:flex;align-items:center;justify-content:center;
}
.tile-panel.warm{background:linear-gradient(160deg,#ffeadf,#fff6f1)}
.tile-panel.cool{background:linear-gradient(160deg,#e4ecf4,#f2f6fa)}
/* The two shots are different shapes — one is a wide detail, one a whole
   window — so the panels are given one shape and the image is centred inside
   it. Left to themselves the panels ended up different heights and the two
   headings beneath them no longer sat on the same line. */
.tile-panel{aspect-ratio:16/10}
.tile-panel img{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:9px;
  box-shadow:0 1px 2px rgba(20,20,40,.10),0 16px 30px -18px rgba(20,20,40,.45);
}
.tile h3{margin-top:1.15rem;font-size:1.18rem;font-weight:640;letter-spacing:-.014em}
.tile p{margin-top:.45rem;color:var(--ink-2);font-size:.97rem;max-width:46ch}

/* --- what it costs over time -------------------------------------------
   The competitors all quote a monthly figure because a subscription sounds
   small that way. The same arithmetic run forwards is the argument against
   them, so it is run forwards here.

   The first version of this listed £54 three times down the column, once per
   period, and read as three payments — the exact opposite of the point. The
   single payment is now a single cell spanning all three rows, because that is
   what it is. */
.cost{
  margin-top:2rem;display:grid;
  grid-template-columns:4.8rem 1fr 1fr 1fr;
  column-gap:.7rem;align-items:stretch;
}
.cost > .h{
  font-size:.78rem;color:var(--ink-3);padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.cost > .when{
  font-size:.85rem;color:var(--ink-3);padding-block:.95rem;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.cost > .v{
  font-size:.97rem;color:var(--ink-2);padding-block:.95rem;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.cost > .once{
  grid-column:2;grid-row:2 / span 3;
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  margin:.4rem .5rem .4rem 0;padding:.6rem .9rem;
  border-radius:12px;background:var(--amber-wash);
  border:1px solid rgba(191,61,6,.22);
}
.cost > .once b{
  font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.cost > .once span{font-size:.78rem;color:var(--amber-deep);line-height:1.35}
.cost-foot{margin-top:1.2rem;font-size:.9rem;color:var(--ink-3);max-width:58ch}
.cost-foot b{font-weight:620;color:var(--ink)}
@media (max-width:560px){
  .cost{grid-template-columns:3.5rem 1fr 1fr 1fr;column-gap:.4rem}
  .cost > .v{font-size:.85rem}
  .cost > .h{font-size:.7rem}
  .cost > .when{font-size:.76rem}
  .cost > .once b{font-size:1.2rem}
  .cost > .once span{font-size:.7rem}
  .cost > .once{padding:.5rem .55rem;margin-right:.3rem}
}

/* --- ordinary sections -------------------------------------------------- */
.soft{background:var(--bg-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:860px){ .two{grid-template-columns:1fr;gap:2.6rem} }

.claims{display:grid;gap:1.6rem;margin-top:2.6rem}
@media (min-width:720px){ .claims{grid-template-columns:repeat(3,1fr);gap:2.2rem} }
.claim .h3{margin-bottom:.4rem}
.claim p{color:var(--ink-2);font-size:1rem}
.claim-mark{
  width:30px;height:30px;margin-bottom:.9rem;border-radius:9px;
  background:var(--amber-wash);display:grid;place-items:center;color:var(--amber-deep);
}

/* comparison */
.cmp{margin-top:2.8rem;border-top:1px solid var(--line)}
.cmp-row{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;
  padding-block:1.05rem;border-bottom:1px solid var(--line);align-items:center;
}
.cmp-row.head{font-size:.82rem;color:var(--ink-3);padding-block:.7rem}
.cmp-row.mine{background:linear-gradient(90deg,var(--amber-wash),rgba(255,243,236,0));
              margin-inline:calc(var(--gutter) * -.5);padding-inline:calc(var(--gutter) * .5);
              border-radius:10px}
.cmp-row.mine .cmp-name{font-weight:640}
.cmp-name{font-weight:520}
.cmp-val{font-size:.95rem;color:var(--ink-2)}
.cmp-row.mine .cmp-val{color:var(--ink)}
/* Narrow enough and the three columns stop being columns. The header row goes
   with them, so each value carries its own label — two bare "No"s under nothing
   is not a comparison. */
@media (max-width:620px){
  .cmp-row{grid-template-columns:1fr;gap:.15rem}
  .cmp-row.head{display:none}
  .cmp-val::before{content:attr(data-l) " — ";color:var(--ink-3)}
}

/* plan against actual */
.plan{margin-top:2.4rem;display:grid;gap:.5rem}
.plan-line{
  display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;align-items:center;
  padding:1rem 1.15rem;border-radius:var(--r-inner);background:var(--bg);
  border:.5px solid var(--line);
}
.plan-name{font-weight:540}
.plan-nums{display:flex;align-items:center;gap:.75rem;font-size:.92rem;
           font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.plan-nums b{font-weight:620;color:var(--ink)}
.delta{font-weight:620}
.delta.over{color:var(--amber-deep)}
.delta.under{color:var(--slate-deep)}
.plan-track{grid-column:1/-1;height:7px;border-radius:99px;background:var(--line-soft);
            overflow:hidden;display:flex}
.plan-track i{display:block;height:100%;border-radius:99px}
.plan-track i.a{background:var(--amber)}
.plan-track i.b{background:var(--line)}
/* nowrap keeps "planned 12h · actual 6h 30m · −5h 30m" on one line, which at a
   phone's width ran straight off the edge and took the difference with it —
   the one number in the row that matters. Below this it wraps instead. */
@media (max-width:560px){
  .plan-line{grid-template-columns:1fr;gap:.45rem}
  .plan-nums{white-space:normal;flex-wrap:wrap;gap:.25rem .6rem;font-size:.88rem}
}

/* price */
.price-card{
  margin-top:2.6rem;border-radius:var(--r-panel);padding:clamp(1.8rem,4vw,2.7rem);
  display:grid;gap:1.9rem;
}
@media (min-width:760px){ .price-card{grid-template-columns:auto 1fr;gap:3rem;align-items:center} }
.price-big{font-size:clamp(3.2rem,8vw,4.6rem);font-weight:700;letter-spacing:-.038em;line-height:1}
.price-sub{color:var(--ink-3);font-size:.92rem;margin-top:.25rem}
.price-list{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.price-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem;color:var(--ink-2)}
.price-list svg{flex:none;margin-top:.34rem;color:var(--amber-deep)}

/* the founder note */
.note{max-width:56ch}
.note p + p{margin-top:1.05rem}
.note p{color:var(--ink-2);font-size:1.06rem}

/* list */
.list-band{text-align:center}
.list-band .lede{margin:1.1rem auto 0;max-width:38ch}

/* faq */
.faq{margin-top:2.2rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding-block:1.15rem;cursor:pointer;font-weight:560;font-size:1.04rem;
  list-style:none;display:flex;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq p{padding-bottom:1.25rem;color:var(--ink-2);max-width:62ch}

/* footer */
/* The registered-company block is here because Apple verifies an Organisation
   applicant against public evidence and expects the company's own site to
   identify it. It is also simply what a UK limited company selling to the
   public should state. Same facts, same order, as the sister product's site. */
footer{padding-block:3.2rem;border-top:1px solid var(--line);color:var(--ink-3);font-size:.88rem}
footer .shell{display:grid;gap:.9rem}
footer a{color:var(--ink-2)}
.foot-row{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:baseline}
.foot-row .foot-mail{margin-left:auto}
@media (max-width:560px){ .foot-row .foot-mail{margin-left:0} }
.foot-legal{max-width:70ch;line-height:1.55;font-size:.82rem}

/* --- reduced motion ----------------------------------------------------
   The stage is a scroll-driven animation, so for anyone who has asked for
   less of that it stops being one: the sticky pin is released, the tall
   scroll track collapses, and every phase is simply shown, in order, as
   ordinary blocks of a page. Nothing is withheld.                        */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .stage{position:static;height:auto;min-height:0;padding-block:var(--section)}
  .stage-wrap{height:auto!important}
  /* The captions become six stacked blocks, so a clock centred beside that
     column ends up floating alongside the fourth one. Put it above them. */
  .stage-top{grid-template-columns:1fr;gap:2rem}
  .stage-clock{flex-direction:row;align-items:center;gap:.9rem;justify-content:flex-start;order:-1}
  .stage-caption{min-height:0;display:grid;gap:2.2rem}
  .cap{position:static;opacity:1;transform:none}
  .stage-prompt{opacity:1;transform:none}
  .stage-rail{display:none}
  .play-cue svg{animation:none}
}