@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin.woff2) format("woff2");font-weight:100 700;font-display:swap}:root{--ds-paper:#f6f7f2;--ds-surface:#ffffff;--ds-surface-2:#fafbf7;--ds-sunk:#eeefea;--ds-line:#dfe1da;--ds-line-2:#ecede7;--ds-ink:#202020;--ds-ink-2:#3a3c37;--ds-muted:#62655c;--ds-on-ink:#f6f7f2;--ds-focus:#202020;--ds-remi:#c0532e;--ds-remi-tint:#fae9e1;--ds-timo:#1f6b46;--ds-timo-tint:#e1ece2;--ds-miso:#24579a;--ds-miso-tint:#e2eaf4;--ds-otto:#6447b5;--ds-otto-tint:#ece7f8;--ds-radius-md:10px;--ds-radius-xl:16px;--ds-radius-pill:999px;--ds-font-display:"Fraunces", Georgia, "Times New Roman", serif;--ds-font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif}@media (prefers-color-scheme: dark){:root{--ds-paper:#111214;--ds-surface:#1b1c1f;--ds-surface-2:#202125;--ds-sunk:#26272b;--ds-line:#34363a;--ds-line-2:#2a2b2f;--ds-ink:#f2f3ef;--ds-ink-2:#d6d8d1;--ds-muted:#b1b4ab;--ds-on-ink:#111214;--ds-focus:#f2f3ef;--ds-remi:#ffb487;--ds-remi-tint:#3d2216;--ds-timo:#8fe3b4;--ds-timo-tint:#16301f;--ds-miso:#8ab4ff;--ds-miso-tint:#152238;--ds-otto:#cfc0fa;--ds-otto-tint:#2a2440}}
/* hippodrome.to: 390 wide first. The paper and ink are the app's own tokens; the product colour appears only as a scene's tint and the index's current rule. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ds-paper);color:var(--ds-ink);font-family:var(--ds-font-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,.button:focus-visible{outline:2px solid var(--ds-focus,currentColor);outline-offset:3px;border-radius:4px}
.bar{display:flex;align-items:center;gap:12px;padding:16px 20px}
.stage-on .bar{position:fixed;top:0;left:0;right:0;z-index:5}
/* Over the plain sections the bar is solid paper from the top edge to its hairline, so a line scrolling under it is hidden; over the stage it stays clear (site.js sets bar-solid). */
.stage-on.bar-solid .bar{background:var(--ds-paper);border-bottom:1px solid var(--ds-line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.name{font-size:14px;font-weight:600;letter-spacing:.32em}
.beta{border:1.5px solid currentColor;border-radius:var(--ds-radius-pill,999px);padding:1px 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.signin{margin-left:auto;font-weight:600;text-underline-offset:4px}
.first{padding:20px 20px 8px;max-width:760px}
/* With the stage on the bar is fixed and out of the flow, so the headline starts below it: 16 + the bar's own height + a breath (Lane 4, 9 Nov: at 390 "Run the" sat behind the logo). */
.stage-on .first{padding-top:88px}
h1{margin:0 0 16px;font-family:var(--ds-font-display);font-size:clamp(38px,11vw,72px);line-height:1.04;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.subline{margin:0 0 24px;color:var(--ds-ink-2);max-width:34ch}
.button{display:inline-block;background:var(--ds-ink);color:var(--ds-on-ink,var(--ds-paper));padding:14px 22px;border-radius:12px;font-weight:600;text-decoration:none}
.times{display:none}
.story{list-style:none;margin:0;padding:0}
.scene{--tint:transparent;padding:36px 20px 44px;background:color-mix(in srgb,var(--ds-paper) 92%,var(--tint))}
.scene[data-tint="timo"]{--tint:var(--ds-timo)}
.scene[data-tint="miso"]{--tint:var(--ds-miso)}
.scene[data-tint="otto"]{--tint:var(--ds-otto)}
.stamp{margin:0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-muted)}
.where{margin:2px 0 16px;color:var(--ds-muted);font-size:15px}
.phone{margin:0 0 24px;width:min(100%,300px);aspect-ratio:9/19;border:1px solid var(--ds-line);border-radius:30px;background:var(--ds-surface);overflow:hidden}
.phone-screen{display:block;width:100%;height:100%}
.phone img{display:block;width:100%;height:100%;object-fit:cover}
.line{margin:0 0 12px;font-family:var(--ds-font-display);font-size:clamp(26px,7vw,40px);line-height:1.12;font-weight:600;text-wrap:balance}
.caption{margin:0;max-width:34ch;color:var(--ds-ink-2)}
@media (min-width:900px){
  .bar{padding:24px 32px}
  .first{padding:64px 32px 48px 160px}
  .stage-on .first{padding-top:64px}
  .times{display:block;position:fixed;left:32px;top:50%;transform:translateY(-50%);z-index:2}
  .times ol{list-style:none;margin:0;padding:0}
  /* The current time is marked by weight and ink, not by a line at the rail's edge (Art's 7 Nov rule: no left-edge stripes; Lane 4, 8 Nov: 600 in ink, the others muted 500, no line and no dot). */
  .times a{display:block;padding:4px 0;color:var(--ds-muted);text-decoration:none;font-size:14px;font-weight:500}
  .times a[aria-current]{color:var(--ds-ink);font-weight:600}
  .scene{padding:96px 32px 96px 160px;display:grid;grid-template-columns:minmax(0,34rem) 340px;column-gap:80px;grid-template-areas:"stamp phone" "where phone" "line phone" "caption phone";grid-template-rows:auto auto auto 1fr;align-content:start}
  .stamp{grid-area:stamp}.where{grid-area:where}.line{grid-area:line}.caption{grid-area:caption}
  .phone{grid-area:phone;margin:0;align-self:start}
}

/* ------------------------------------------------------------------ after the story (S3, Lane 4's after-story.md): plain paper, one 640 px column, a hairline between sections, no cards, no icons.
   No colour on a product's row: Art's 7 Nov rule is no left-edge stripes or edge shadows for emphasis, and it holds for the site too (the 3 px rule that was here is gone). */
.after{padding:56px 16px;border-top:1px solid var(--ds-line);max-width:672px}
.after-h{margin:0 0 24px;font-family:var(--ds-font-display);font-size:28px;line-height:1.15;font-weight:600;text-wrap:balance}
.things,.plain{list-style:none;margin:0;padding:0}
.thing{display:grid;gap:4px;padding:12px 0}
.thing+.thing{margin-top:12px}
.thing h3{margin:0;font-size:17px;font-weight:600}
.thing p{margin:0;color:var(--ds-ink-2)}
.thing .price{color:var(--ds-ink);font-weight:500}
.price-line{display:block}
.terms{margin:24px 0 0;color:var(--ds-ink)}
.action{margin:24px 0 0}
.plain li{padding:8px 0}
.plain li+li{border-top:1px solid var(--ds-line-2)}
.next{margin:0;font-family:var(--ds-font-display);font-size:20px;line-height:1.3}
.foot{border-top:1px solid var(--ds-line);padding:32px 16px 48px;color:var(--ds-ink-2);font-size:15px}
.foot p{margin:0 0 8px}
.foot-links a{text-underline-offset:4px}
.foot-beta{margin-top:20px!important;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media (min-width:900px){
  .after{padding:96px 32px 96px 160px;max-width:none;display:block}
  .after>*{max-width:640px}
  .after-h{font-size:40px}
  .thing{grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:baseline}
  .thing .price{text-align:right;max-width:28ch}
  .foot{padding:40px 32px 64px 160px}
}

/* The pinned stage hangs 100vh below its track (the last scene's slot), so the plain paper after the story sits over it and the page settles. */
.stage-on .after,.stage-on .foot{position:relative;z-index:2;background:var(--ds-paper)}
.stage-on .foot{max-width:none}

/* ------------------------------------------------------------------ the stage (S2a, S2b): one pinned phone that changes as the day goes. It exists only where JavaScript runs
   (html.stage-on); without it the scenes above are the page, a plain list. The current scene's marker, fill and tone are generated rules (build.mjs: stageRules). */
.stage{display:none}
.track{position:relative}
.stage-on .stage{display:block;position:sticky;top:0;height:100vh;height:100dvh;margin-bottom:-100vh;margin-bottom:-100dvh;overflow:hidden;z-index:1;background:color-mix(in srgb,var(--ds-paper) 92%,var(--tone,transparent))}
.stage-on .story .scene{min-height:100vh;min-height:100dvh;padding:0;background:none}
/* The accessible list is the real content: with the stage on, its visible copy is the stage's, so the list keeps only what a screen reader needs. */
.stage-on .story .scene>*{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage-on .times{display:none}
.day{position:relative;padding:56px 32px 0}
.nows{position:relative;height:64px}
.nows .now{--w:320px;display:none;position:absolute;bottom:6px;left:clamp(calc(var(--w) / 2), var(--x, 0%), calc(100% - var(--w) / 2));transform:translateX(-50%);width:var(--w);justify-content:center;align-items:baseline;gap:8px;flex-wrap:wrap;text-align:center}
.now b{font-family:var(--ds-font-display);font-size:clamp(32px,6vw,44px);font-weight:600;line-height:1}
.now small{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ds-muted)}
.now span{flex-basis:100%;color:var(--ds-muted);font-size:14px;white-space:nowrap}
.tl{position:relative;height:44px;margin-top:0}
.tl-line,.tl-done{position:absolute;left:0;top:10px;height:2px}
.tl-line{width:100%;background:var(--ds-line)}
.tl-done{width:0}
.tick{position:absolute;top:5px;width:2px;height:12px;margin-left:-1px;opacity:.5}
.tl-cur{position:absolute;top:2px;width:18px;height:18px;margin-left:-9px;border-radius:50%;border:3px solid var(--ds-paper);box-shadow:0 0 0 1.5px var(--ds-ink)}
.mark-h{position:absolute;top:26px;transform:translateX(-50%);font-size:12px;color:var(--ds-muted);white-space:nowrap}
.mark-h[data-edge="start"]{transform:none}
.mark-h[data-edge="end"]{transform:translateX(-100%)}
.panels{position:relative}
.panel{display:none;grid-template-columns:1fr var(--phone) 1fr;grid-template-areas:"left phone right";align-items:start;gap:0 var(--gap,40px);padding:0 32px}
.panel .left{grid-area:left;text-align:right;align-self:center;padding-top:80px}
.panel .phone{grid-area:phone;position:relative;margin:8px 0 0;width:var(--phone)}
.panel .right{grid-area:right;position:relative;height:100%}
.panel .line{margin:0 0 12px;font-family:var(--ds-font-display);font-size:clamp(26px,3vw,40px);line-height:1.12;font-weight:600;text-wrap:balance}
.panel .lead{margin:0;color:var(--ds-ink-2);max-width:26ch;margin-left:auto}
.panel .co{position:absolute;left:0;top:calc(var(--y,.4) * var(--phone-h));margin:0;max-width:24ch;font-size:15px;line-height:1.4}
/* The leader: a hairline from the callout back across the gap onto the phone, ending in a dot at its y. */
.panel .co::before{content:"";position:absolute;right:100%;top:.72em;width:var(--gap,40px);height:1px;background:color-mix(in srgb,var(--ds-ink) 60%,transparent)}
.panel .co::after{content:"";position:absolute;right:calc(100% + var(--gap,40px) - 3px);top:calc(.72em - 2.5px);width:6px;height:6px;border-radius:50%;background:var(--ds-ink)}
.panel .co{margin-left:var(--gap,40px);padding-left:0}
.panel .co b{font-weight:600}
.panel .co span{color:var(--ds-ink-2)}
.more{display:none}
.stage{--phone:min(clamp(300px,23vw,360px),calc((100dvh - 190px) * 1206 / 2622));--phone-h:calc(var(--phone) * 2622 / 1206)}
@media (prefers-reduced-motion:no-preference){
  .stage .tl-done,.stage .tl-cur{transition:left 320ms ease,width 320ms ease,background-color 320ms ease}
  .stage .panel{animation:panel-in 240ms ease both}
  @keyframes panel-in{from{opacity:0}to{opacity:1}}
}
/* Phones (S2b, Art's a, Ma-*): a slim bar with the time and the day line, the capture almost the whole height inside the gutters, and the words in a short bottom sheet that opens on More. */
@media (max-width:899px){
  .stage-on .stage{--phone:calc(100vw - 32px);--phone-h:calc(var(--phone) * 2622 / 1206)}
  .stage-on .panels{position:static}
  .stage-on .day{padding:64px 16px 0}
  /* One slim bar: the time at the left and the day line at its right on one row, who and where under the time, no hour labels. */
  .stage{--now-display:contents}
  .day{display:flex;flex-wrap:wrap;align-items:center}
  .nows{display:contents}
  .now b{font-size:30px;order:0}
  .now small{order:0;margin:0 12px 0 6px}
  .tl{order:1;flex:1 1 60px;min-width:60px;height:30px;margin-top:0}
  .now span{order:2;flex-basis:100%;margin-top:2px;text-align:left}
  .mark-h{display:none}
  .panel{display:none;grid-template-columns:1fr;grid-template-areas:"phone" "left" "right";gap:0;padding:0 16px;justify-items:center}
  .panel .phone{margin:12px auto 0}
  .panel .left{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:18px 20px 52px;background:var(--ds-paper);border-radius:22px 22px 0 0;box-shadow:0 -1px 0 var(--ds-line)}
  .panel .left{z-index:2}
  .panel .line{font-size:22px;margin:0 0 6px}
  .panel .lead{max-width:none;margin:0;font-size:16px}
  .more{display:block;position:absolute;z-index:3;left:20px;bottom:18px;border:0;background:none;padding:0;color:var(--ds-muted);font:inherit;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .stage-on .more{pointer-events:auto}
  .panel .right{position:absolute;left:0;right:0;bottom:0;display:none;padding:18px 20px 22px;background:var(--ds-paper);height:auto;border-radius:22px 22px 0 0}
  .panel .co{position:static;max-width:none;margin:0 0 12px}
  .stage[data-sheet="open"] .panel .right{display:block}
  .stage[data-sheet="open"] .panel .left{display:none}
}

.stage[data-current="0"] .tl-cur{left:3.472%;background:var(--ds-timo)}.stage[data-current="0"] .tl-done{width:3.472%;background:var(--ds-timo)}.stage[data-current="0"] .now[data-i="0"]{display:var(--now-display,flex);--x:3.472%}.stage[data-current="0"] .panel[data-i="0"]{display:grid}.stage[data-current="0"]{--tone:var(--ds-timo)}
.stage[data-current="1"] .tl-cur{left:10.417%;background:var(--ds-miso)}.stage[data-current="1"] .tl-done{width:10.417%;background:var(--ds-miso)}.stage[data-current="1"] .now[data-i="1"]{display:var(--now-display,flex);--x:10.417%}.stage[data-current="1"] .panel[data-i="1"]{display:grid}.stage[data-current="1"]{--tone:var(--ds-miso)}
.stage[data-current="2"] .tl-cur{left:27.083%;background:var(--ds-timo)}.stage[data-current="2"] .tl-done{width:27.083%;background:var(--ds-timo)}.stage[data-current="2"] .now[data-i="2"]{display:var(--now-display,flex);--x:27.083%}.stage[data-current="2"] .panel[data-i="2"]{display:grid}.stage[data-current="2"]{--tone:var(--ds-timo)}
.stage[data-current="3"] .tl-cur{left:33.333%;background:var(--ds-miso)}.stage[data-current="3"] .tl-done{width:33.333%;background:var(--ds-miso)}.stage[data-current="3"] .now[data-i="3"]{display:var(--now-display,flex);--x:33.333%}.stage[data-current="3"] .panel[data-i="3"]{display:grid}.stage[data-current="3"]{--tone:var(--ds-miso)}
.stage[data-current="4"] .tl-cur{left:38.542%;background:var(--ds-ink)}.stage[data-current="4"] .tl-done{width:38.542%;background:var(--ds-ink)}.stage[data-current="4"] .now[data-i="4"]{display:var(--now-display,flex);--x:38.542%}.stage[data-current="4"] .panel[data-i="4"]{display:grid}.stage[data-current="4"]{--tone:var(--ds-ink)}
.stage[data-current="5"] .tl-cur{left:44.444%;background:var(--ds-otto)}.stage[data-current="5"] .tl-done{width:44.444%;background:var(--ds-otto)}.stage[data-current="5"] .now[data-i="5"]{display:var(--now-display,flex);--x:44.444%}.stage[data-current="5"] .panel[data-i="5"]{display:grid}.stage[data-current="5"]{--tone:var(--ds-otto)}
.stage[data-current="6"] .tl-cur{left:56.250%;background:var(--ds-timo)}.stage[data-current="6"] .tl-done{width:56.250%;background:var(--ds-timo)}.stage[data-current="6"] .now[data-i="6"]{display:var(--now-display,flex);--x:56.250%}.stage[data-current="6"] .panel[data-i="6"]{display:grid}.stage[data-current="6"]{--tone:var(--ds-timo)}
.stage[data-current="7"] .tl-cur{left:65.625%;background:var(--ds-ink)}.stage[data-current="7"] .tl-done{width:65.625%;background:var(--ds-ink)}.stage[data-current="7"] .now[data-i="7"]{display:var(--now-display,flex);--x:65.625%}.stage[data-current="7"] .panel[data-i="7"]{display:grid}.stage[data-current="7"]{--tone:var(--ds-ink)}
.stage[data-current="8"] .tl-cur{left:97.917%;background:var(--ds-ink)}.stage[data-current="8"] .tl-done{width:97.917%;background:var(--ds-ink)}.stage[data-current="8"] .now[data-i="8"]{display:var(--now-display,flex);--x:97.917%}.stage[data-current="8"] .panel[data-i="8"]{display:grid}.stage[data-current="8"]{--tone:var(--ds-ink)}