/* The landing page only (marketing.css carries the shared tokens, fonts, nav, buttons, footer). One demo athlete runs
   through every card: FTP 261 W, 76.8 kg, a 20 km/h gust limit, Monday 21 September (landing.html). */
/* padding-block, not the padding shorthand: both classes always sit on the same element as .wrap
   (padding: 0 40px), and a shorthand here — even "96px 0" — would win the horizontal padding too and zero it
   out, running every heading and paragraph on the page edge-to-edge. */
/* The page spaces its blocks itself (gaps and the mt- utilities, which win over this); the browser's own paragraph and
   list margins would double it. The modals and the privacy notice keep theirs. */
main p, main h2, main h3, main ul, main ol, main figure { margin-top: 0; margin-bottom: 0; }
.section { padding-block: 96px; }
.section-tight { padding-block: 72px; }
.section-rule { border-top: 1px solid rgba(246,243,239,.12); }
.accent { color: var(--volt); }

/* A section opens with its eyebrow and headline on the left and one paragraph on the right, then its cards. */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: end;
                margin-bottom: 48px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

.card { background: var(--cell); border-radius: 20px; padding: 22px; min-width: 0; }
.card-band { background: var(--volt); color: var(--espresso); border-radius: 14px; padding: 16px 18px; }
.card-band .eyebrow { color: var(--espresso); margin: 0 0 6px; }
.band-title { font-size: 34px; line-height: 1; }
.quote { font-size: 19px; line-height: 27px; font-weight: 600; color: var(--crema); }

/* ---------- hero: the brand's line on the left, the app over the photo on the right ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: center; }
.hero-visual { position: relative; padding: 0 0 40px 72px; }
/* The hero is the race at speed, a shutter drag in hard black and white (the Owner's choice, 2026-09-30, after the
   2026 trend review; the golden-hour cliff in colour of 2026-09-25 read as stock). Volt is the only colour on the page
   again. */
.hero-frame { border-radius: 24px; overflow: hidden; }
.hero-photo { width: 100%; height: 600px; object-fit: cover; object-position: 72% center; display: block;
              filter: grayscale(1) contrast(1.35) brightness(.95); }

/* The phone: the app's Dashboard as index.html draws it (system font, black ground, the Verdict band, the session's
   steps, last night's tiles), shrunk into a frame. Decorative detail: the figure's label says what it shows. */
.phone { position: absolute; left: 0; bottom: 0; margin: 0; width: 256px; padding: 7px; border-radius: 44px;
         background: var(--cell); border: 1px solid rgba(246,243,239,.18); box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.phone-screen { border-radius: 37px; background: var(--black); padding: 30px 12px 16px; display: flex; flex-direction: column;
                gap: 8px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--crema); }
.ph-title { font-size: 21px; line-height: 23px; font-weight: 800; font-stretch: condensed; text-transform: uppercase; padding: 0 2px; }
.ph-sub { margin-top: -6px; padding: 0 2px; font-size: 10px; color: var(--oat); }
.ph-card { background: var(--cell); border-radius: 16px; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.ph-band { background: var(--volt); color: var(--espresso); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.ph-band-top { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: .5px;
               text-transform: uppercase; }
.ph-ready { background: var(--espresso); color: var(--volt); padding: 2px 7px; border-radius: 10px; font-weight: 800; }
.ph-verdict { font-size: 20px; line-height: 21px; font-weight: 800; font-stretch: condensed; text-transform: uppercase; }
.ph-reason { font-size: 10px; line-height: 14px; font-weight: 600; }
.ph-session { padding: 4px 4px 0; font-size: 13px; font-weight: 700; }
.ph-meta { margin-top: -4px; padding: 0 4px; font-size: 10px; color: var(--oat); }
.ph-bars { height: 28px; padding: 0 4px; }
.ph-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ph-tile { background: var(--fill); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.ph-lab { font-size: 8px; font-weight: 700; color: var(--oat); text-transform: uppercase; }
.ph-val { font-size: 13px; font-weight: 700; }

/* A session's steps, drawn as the app draws them: one baseline, each bar as wide as the step is long and as high as
   it is hard. Easy grey-brown, tempo a deep moss (3.2:1 against volt, so the two differ in lightness, not hue alone),
   hard volt. Widths and heights are classes because the page's policy refuses inline styles. */
.steps-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.steps-bars.big { gap: 3px; }
.sb { display: block; min-width: 2px; }
.sb.easy { background: var(--easy); } .sb.tempo { background: var(--tempo); } .sb.hard { background: var(--volt); }
.sb.w3 { flex: 3 1 0; } .sb.w4 { flex: 4 1 0; } .sb.w5 { flex: 5 1 0; } .sb.w8 { flex: 8 1 0; }
.sb.w10 { flex: 10 1 0; } .sb.w12 { flex: 12 1 0; } .sb.w15 { flex: 15 1 0; } .sb.w20 { flex: 20 1 0; } .sb.w55 { flex: 55 1 0; }
.sb.h30 { height: 30%; } .sb.h35 { height: 35%; } .sb.h40 { height: 40%; } .sb.h45 { height: 45%; } .sb.h75 { height: 75%; }
.sb.h88 { height: 88%; } .sb.h90 { height: 90%; } .sb.h100 { height: 100%; }
.step-list { list-style: none; margin-left: 0; margin-right: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
             font-size: 15px; line-height: 21px; color: var(--stone); }
.step-list .strong { color: var(--crema); font-weight: 600; }

.works-strip { padding: 28px 0; border-top: 1px solid rgba(246,243,239,.12); border-bottom: 1px solid rgba(246,243,239,.12);
               font-size: 16px; line-height: 24px; color: var(--stone); text-align: center; display: flex; flex-direction: column;
               align-items: center; gap: 18px; }
.works-lead strong { color: var(--crema); font-weight: 700; }
/* The sources in one colour, crema at the strength of the body copy: every logo is turned white by the filter, whatever
   colour its file is, and a name without a file yet is set in bold capitals at the same height. */
.brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
          gap: 20px 44px; }
.brands li { display: flex; align-items: center; height: 32px; opacity: .78; }
.brand-logo { display: block; height: 24px; width: auto; filter: brightness(0) invert(1); }
.brand-logo.garmin { height: 27px; }
.brand-logo.coros { height: 30px; }
.brand-logo.zepp { height: 20px; }
.brand-name { font-family: var(--font-sans); font-size: 21px; font-weight: 800; letter-spacing: .06em; color: var(--white); }
.brand-name.mixed { letter-spacing: 0; }
@media (max-width: 600px) {
  .brands { gap: 16px 28px; }
  .brand-logo { height: 20px; }
  .brand-logo.garmin { height: 22px; } .brand-logo.coros { height: 25px; } .brand-logo.zepp { height: 16px; }
  .brand-name { font-size: 18px; }
}

/* ---------- 01: the week's calendar, busy times and the rides placed after them ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cal-d { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--oat); }
.cal-col { width: 100%; height: 140px; background: var(--fill); border-radius: 6px; padding: 3px; display: flex; flex-direction: column;
           gap: 3px; }
.cal-busy { display: block; background: var(--busy); border-radius: 3px; }
.cal-gap { display: block; height: 8px; }
.cal-ride { display: block; border-radius: 3px; }
.cal-ride.easy { background: var(--easy); } .cal-ride.tempo { background: var(--tempo); } .cal-ride.hard { background: var(--volt); }
.cal-busy.b40 { height: 40%; } .cal-busy.b50 { height: 50%; } .cal-busy.b60 { height: 60%; } .cal-busy.b70 { height: 70%; }
.cal-ride.r20 { height: 20%; } .cal-ride.r25 { height: 25%; } .cal-ride.r30 { height: 30%; }

.limits { display: flex; flex-direction: column; gap: 6px; }
.limit { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.limit-name { font-weight: 700; }
.limit-val { color: var(--oat); }
.meter { height: 6px; border-radius: 3px; background: var(--fill); display: flex; overflow: hidden; }
.meter.over { background: var(--danger); }
.meter .fill { display: block; border-radius: 3px; background: var(--moss); }
.meter.over .fill { background: var(--danger); }
.meter .fill.volt { background: var(--volt); }
.meter .fill.w20 { width: 20%; } .meter .fill.w36 { width: 36%; } .meter .fill.w100 { width: 100%; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--fill); border-radius: 12px; padding: 12px; min-width: 0; }
.tile .lab { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
             color: var(--oat); overflow-wrap: anywhere; }
.tile .val { font-size: 22px; font-weight: 800; margin-top: 2px; }
.tile .val.sm { font-size: 18px; }
.tile .delta { margin-top: 2px; font-size: 12px; line-height: 16px; }
.delta.watch { color: var(--watch); }

.data-num { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: .9; color: var(--volt); }
.data-num.plain { color: var(--crema); }
.data-unit { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--oat); margin-left: 8px; }

/* ---------- 02: on the race photo, black and white so volt stays the only colour ---------- */
/* The photo sits on ::before, not on the section itself, so filter: grayscale desaturates the image alone. */
.photo-break { position: relative; }
.photo-break::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center 70%;
                        background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("images/foggy-road.jpg");
                        filter: grayscale(1) contrast(1.5) brightness(1.5); }
.photo-break::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.photo-break::after { background-image: var(--grain); background-size: 160px 160px; opacity: .5; mix-blend-mode: overlay; }
.photo-break-inner { position: relative; z-index: 1; }
.on-photo { color: var(--on-photo); }

.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 21px; }
.bubble.me { align-self: flex-end; background: var(--fill-strong); color: var(--crema); border-bottom-right-radius: 4px; }
.bubble.coach { align-self: flex-start; background: var(--fill); color: var(--crema); border-bottom-left-radius: 4px;
                display: flex; gap: 8px; align-items: flex-start; }
.bubble.coach .mark { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

/* ---------- 03: the voice, each pair labelled rather than told apart by a tint ---------- */
.compare { display: flex; flex-direction: column; gap: 12px; }
.compare-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare-cell { border-radius: 16px; padding: 18px 20px; font-size: 17px; line-height: 25px; }
.compare-cell.no { border: 1px solid rgba(246,243,239,.16); color: var(--oat); }
.compare-cell.yes { background: var(--cell); color: var(--crema); font-weight: 600; }

/* ---------- 04: three steps ---------- */
.how { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.how li { display: flex; flex-direction: column; gap: 12px; }
.how-n { font-family: var(--font-display); font-size: 72px; font-weight: 900; line-height: .9; color: var(--volt); }
.how-t { margin: 0; font-size: 21px; line-height: 27px; font-weight: 700; }

/* ---------- the last word, on espresso like the sign-in screen ---------- */
.cta-panel { background: var(--espresso); border-radius: 32px; padding: 80px 64px; text-align: center; display: flex;
             flex-direction: column; align-items: center; }
.cta-panel .body-lg { color: var(--on-photo); }
.cta-panel .eyebrow { color: var(--on-photo); }

/* "Save me a spot": a button, and in its place once someone has joined, the line that says so. */
.waitlist { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-panel .waitlist { justify-content: center; }
.waitlist-note { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--oat); }
.waitlist-error { margin-top: 10px; font-size: 13px; color: var(--danger); }
/* Crema on a moss tint: moss text on it measured 4.4:1 on espresso, under the 4.5 a 16 px line needs. */
.waitlist-confirm { margin: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 22px;
                     border-radius: 26px; background: rgba(169,188,42,.22); color: var(--crema); font-weight: 700; }
.waitlist-confirm:focus { outline: none; }
.waitlist-confirm:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* ---------- the 2026 layer (docs/brand.md, Landing page): grain, the coach's pen, the index, the page on paper ----------
   The landing page goes further than the app: the app keeps its numbers on solid cards and none of this. The marks are
   drawn, never a handwriting font: one volt stroke on dark, espresso on crema, since volt never sits on a light
   ground. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --pen-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 8, 130 19, 190 11 S 270 14, 296 8' fill='none' stroke='%23E6FF00' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M120 8 C 50 4, 6 30, 10 64 C 14 104, 110 116, 164 100 C 200 88, 198 30, 150 14 C 126 6, 96 6, 74 14' fill='none' stroke='%23442C2C' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M4 17 C 8 20, 11 24, 14 28 C 20 18, 28 9, 37 3' fill='none' stroke='%23442C2C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M7 4 C 16 13, 24 21, 34 29 M33 4 C 24 12, 15 21, 6 29' fill='none' stroke='%23B3261E' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain);
                background-size: 160px 160px; opacity: .45; mix-blend-mode: overlay; }
/* The coach's pen under a line of the headline; cloned per line when German wraps it. */
.pen { background-image: var(--pen-line); background-repeat: no-repeat; background-size: 100% .2em; background-position: 0 100%;
       padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 03: the library, an index on crema. Its own colours: easy grey-brown, tempo mocha, hard espresso (volt stays off
   crema). Every text pair measured on crema: roast 15:1, mocha 7.6:1. */
.catalog { background: var(--crema); color: var(--roast); }
.catalog .eyebrow, .catalog .body-lg { color: var(--mocha); }
.catalog .display { color: var(--espresso); }
.figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.fig { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fig-n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--mocha);
         white-space: nowrap; }
/* Under the details, so every FIG.'s bars start at the same height, one line under its number. Volt on espresso. */
.fig-tag { align-self: flex-start; background: var(--espresso); color: var(--volt); padding: 3px 8px; font-family: var(--font-mono);
           font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fig-bars { height: 150px; border-bottom: 2px solid var(--roast); }
.catalog .sb.easy { background: var(--easy-on-light); } .catalog .sb.tempo { background: var(--mocha); } .catalog .sb.hard { background: var(--espresso); }
.fig-name { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: .95; text-transform: uppercase;
            color: var(--espresso); }
.fig-meta { font-family: var(--font-mono); font-size: 13px; line-height: 19px; color: var(--mocha); }
.fig.marked .fig-bars { position: relative; }
.fig.marked .fig-bars::after { content: ""; position: absolute; left: -14px; right: -14px; top: -16px; bottom: -14px;
                                background: var(--pen-ring) no-repeat center / 100% 100%; pointer-events: none; }

/* 04, below the pairs: the Sunday review, printed, taped down and ticked by hand. */
.week-row { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 64px; }
.paper-wrap { position: relative; transform: rotate(-1.5deg); padding-top: 14px; }
.paper-wrap::before, .paper-wrap::after { content: ""; position: absolute; top: 0; z-index: 1; width: 120px; height: 34px;
                                          background: rgba(201,181,178,.72); }
.paper-wrap::before { left: 40px; transform: rotate(-6deg); }
.paper-wrap::after { right: 40px; transform: rotate(5deg); }
.paper { background: var(--crema); color: var(--roast); padding: 36px 36px 52px; box-shadow: 0 24px 50px rgba(0,0,0,.5);
         clip-path: polygon(0 0, 100% 0, 100% 95%, 93% 98%, 85% 95.5%, 76% 99%, 67% 96%, 57% 99.2%, 47% 96.2%, 37% 99%, 27% 95.8%,
                            17% 98.8%, 8% 96%, 0 98.5%); }
.paper-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: var(--font-mono); font-size: 12px;
              font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mocha); }
.paper-title { margin-top: 14px; font-family: var(--font-display); font-size: 52px; font-weight: 800; line-height: .92;
               text-transform: uppercase; color: var(--espresso); }
.paper-list { list-style: none; margin: 20px 0 0; padding: 0; font-size: 17px; line-height: 24px; }
.paper-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 12px 0;
                 border-top: 1.5px solid var(--roast); }
.paper-list li:last-child { border-bottom: 1.5px solid var(--roast); }
.pd { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-transform: uppercase; }
.crossed { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--mocha); }
.tick { width: 40px; height: 32px; background-repeat: no-repeat; background-size: contain; }
.tick.done { background-image: var(--pen-tick); }
.tick.missed { background-image: var(--pen-cross); }
.paper-foot { margin-top: 16px; font-size: 15px; line-height: 21px; color: var(--mocha); }

@media (max-width: 900px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .week-row { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; }
}
@media (max-width: 600px) {
  .fig-bars { height: 110px; }
  .fig-name { font-size: 26px; }
  .paper { padding: 28px 22px 44px; }
  .paper-title { font-size: 42px; }
}

@media (max-width: 900px) {
  .hero, .section-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-visual { padding: 0 0 32px 28px; max-width: 520px; }
  .hero-photo { height: 460px; }
  .phone { width: 220px; }
  .cards3, .how { grid-template-columns: minmax(0, 1fr); }
  .how { gap: 24px; margin-top: 28px; }
  .how li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .how-n { grid-row: span 2; font-size: 52px; }
  .section { padding-block: 64px; }
  .section-tight { padding-block: 48px; }
  .section-head { margin-bottom: 32px; }
  .cta-panel { padding: 56px 24px; border-radius: 24px; }
}
@media (max-width: 600px) {
  /* The pairs stay side by side under their two heads, so each line keeps its label; only the type gets smaller. */
  .compare-row { gap: 8px; }
  .compare-cell { padding: 12px 14px; font-size: 15px; line-height: 21px; }
  .section { padding-block: 48px; }
  .hero-visual { padding-left: 0; }
  .hero-photo { height: 420px; }
  .phone { left: 12px; width: 200px; }
  .band-title { font-size: 28px; }
}

/* "Install the app": a modal (data-install-modal in landing.html), not a separate page, so it works the same from a
   phone, a tablet or a desktop browser — the three device tabs below, not a page laid out for a phone. */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
                  -webkit-backdrop-filter: blur(4px); }
/* No fixed max-height: a hardcoded cap left the modal scrolling internally even on a full-height desktop window,
   well short of the viewport, because its four-step content is taller than an arbitrary number. It grows to fit
   its content up to the viewport's own room (calc, not a cap); overflow-y stays as the fallback for a viewport
   too short to hold it at all (a small phone), where some scroll is unavoidable. */
.modal { position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%);
         width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto;
         background: var(--black); border: 1px solid rgba(246,243,239,.12); border-radius: 24px; padding: 28px 32px;
         box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 22px; border: none;
               background: var(--cell); color: var(--crema); display: flex; align-items: center; justify-content: center; }
.modal-close:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.icon-x { width: 18px; height: 18px; }
.h-headline-sm { font-size: 40px; line-height: 1; }
#install .h-headline-sm, #signup .h-headline-sm { padding-right: 48px; }       /* clear of the close button */
.link-button { border: none; background: none; padding: 12px 0; margin: -12px 0; font: inherit; line-height: 20px; color: var(--crema);
               text-decoration: underline; cursor: pointer; }
.link-button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 4px; }

.seg { display: flex; background: var(--cell); border-radius: 26px; padding: 4px; gap: 4px; margin-top: 20px; }
.seg button { border: none; background: transparent; color: var(--oat); font-family: var(--font-sans); font-weight: 600;
              font-size: 15px; height: 44px; padding: 0 20px; border-radius: 22px; white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--volt); color: var(--espresso); }
.seg button:focus-visible { outline: 2px solid var(--crema); outline-offset: -4px; }
/* All three device tabs stay in one row, even in the modal's compact width — each an equal share rather than
   wrapping. */
.seg-3 button { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 0 8px; }

.steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 14px; background: var(--cell); color: var(--oat);
       font-family: var(--font-mono); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.steptext { font-size: 15px; line-height: 21px; padding-top: 2px; }
.note { margin-top: 14px; background: var(--roast); border-radius: 16px; padding: 10px 14px; font-size: 13px;
        line-height: 18px; color: var(--oat); }

/* "Save me a spot": the signup modal (data-signup-modal in landing.html), the only form on the page. Its fields are
   dark pills made rectangular for a form, 16px text because iOS Safari zooms into any field smaller than that. */
.signup-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.more .signup-form { margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: none; min-width: 0; }
.field label, .field legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--crema); }
.field legend { margin-bottom: 6px; }
.field .opt { margin-left: 6px; font-weight: 400; color: var(--ash); }
.field input, .field select, .field textarea {
  width: 100%; height: 48px; border-radius: 14px; border: 1px solid rgba(246,243,239,.3); background: rgba(255,255,255,.04);
  color: var(--crema); font-family: var(--font-sans); font-size: 16px; padding: 0 16px; -webkit-appearance: none; appearance: none; }
.field textarea { height: 88px; padding: 12px 16px; line-height: 22px; resize: vertical; }
/* Ash, not mocha: mocha is a light-mode colour, 2.6:1 here; ash is 6:1 and still reads as a hint beside typed crema. */
.field input::placeholder, .field textarea::placeholder { color: var(--ash); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--volt); outline-offset: 1px; border-color: transparent; }
.field select { padding-right: 40px; background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9B5B2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.field select option { background: var(--cell); color: var(--crema); }
/* -webkit-appearance: none alone is not enough on iOS: Safari's autofill repaints the field with a light background
   and black text, ignoring color and background; only -webkit-text-fill-color and a huge inset shadow push it back. */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--crema); -webkit-box-shadow: 0 0 0 1000px var(--cell) inset; box-shadow: 0 0 0 1000px var(--cell) inset;
  caret-color: var(--crema); transition: background-color 9999s ease-in-out 0s; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 10px 16px; border-radius: 22px; border: 1px solid rgba(246,243,239,.3); background: var(--cell);
        color: var(--oat); font-size: 15px; font-weight: 600; }
.chip:hover { color: var(--crema); }
.chip:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--espresso); }
.more summary { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--oat);
                cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.more summary:focus { outline: none; }
.more summary:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 4px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; width: 16px; }
.more[open] summary::before { content: "\2212"; }
.signup-form > .btn { margin-top: 8px; }
.signup-form .waitlist-error { margin: 0; }
.signup-privacy { margin: 0; font-size: 12px; line-height: 17px; color: var(--ash); }
.consent { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--stone);
           cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--volt); cursor: pointer; }
.consent a { color: var(--crema); text-decoration: underline; }
/* The honeypot: off the screen, not display:none, which some bots check for. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The privacy notice (privacy.html): one readable column of plain prose. */
.legal { max-width: 760px; }
.legal h2 { margin: 36px 0 8px; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--crema); }
.legal h2.legal-part { margin-top: 56px; padding-top: 24px; border-top: 1px solid currentColor; font-size: 26px; line-height: 32px; }
.legal p, .legal li { margin: 0 0 12px; font-size: 16px; line-height: 25px; color: var(--stone); }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal a { color: var(--crema); text-decoration: underline; }
.legal .legal-foot { margin-top: 36px; font-size: 14px; line-height: 21px; color: var(--ash); }

@media (max-width: 480px) {
  .modal { padding: 20px; border-radius: 20px; }
  .h-headline-sm { font-size: 32px; }
  .seg-3 button { font-size: 12px; padding: 0 4px; }
}