/* AVA content — pitch and business plan, in two views
   .pitch-site / .plan-site : web pages — ONE system (STEP-16): nine text roles, one spacing scale, one card
   .pitch-book / .plan-book : the same HTML as fixed pages (1920×1080 slide, A4 sheet), also used for the PDF */

:root {
  /* Latte & Cobalt (STEP-120, 15 Oct): every colour comes from these tokens; the same block opens
     styles.css, content.css, demo.css, access.css, waiting-list.css and the tracker's stylesheet. No hex values in the rules. */
  --milk: #F1F3F6;          /* paper */
  --creme: #E3E7EC;         /* mist: section band, one per section */
  --field: #E9EDF1;         /* embedded field */
  --field-hover: #E3E8ED;
  --field-focus: #EEF1F4;
  --capp: #D9E0E8;          /* hover and selected (light blue-grey) */
  --step-1: #E9EDF1; --step-2: #D9E0E8; --step-3: #C8D1DB; --step-4: #B7C2CE;   /* steps, light → deep; text on them is ink */
  --hair: #CDD4DC;          /* hairline; also the embedded field's top edge */
  --edge-side: #DDE3E9; --edge-low: #F5F7F9;   /* the embedded field's side and bottom edges */
  --ink: #122033;           /* ink: deep navy (gray matter, STEP-152) */
  --soft: #3D4A5A;          /* slate, secondary text */
  --muted: #566271;         /* gray matter, muted text (5.6:1 on paper) */
  --cobalt: #1A5FD6;        /* the one accent: electric blue (STEP-152) */
  --cobalt-hover: #164FB4;
  --night: #233243;         /* the dark slides: slate (STEP-154, lighter than STEP-152's night) */
  --night-raised: #2B3B4E;
  --night-line: #3A4C61;
  --on-night: #E8ECF1;      /* text on night */
  --on-night-soft: #9AA6B4;
  --cobalt-night: #88BDE8;  /* accent on night (STEP-122: was #9DB6E3, which leaned violet; hue 207, 8.4:1 on night) */
  --on-night-body: #C9D1DA;  /* body text on night (STEP-122) */
  --cobalt-hand: #5B9BF0;    /* cobalt lifted one step for the handwriting on night (STEP-122; 4.3:1, used at 24 px and up) */
  --night-field: #1B2735; --night-field-hover: #1F2C3B;   /* the embedded field and icon wells on night (STEP-122) */
  --night-field-edges: #16212D #2A394B #45586E #2A394B;
  --night-field-shadow: inset 0 3px 7px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 2px rgba(var(--milk-rgb), .05), 0 1px 0 rgba(var(--milk-rgb), .08);
  --floor-shadow: rgba(0, 0, 0, .75);   /* the contact shadow under the 3D watch on its stage (STEP-122/123) */
  --watch-screen: #0B1118;  /* the watch screen (not --screen: that is the reader's height, set by app.js) */
  --alert: #B23A2A;         /* meaning only: the Alert state, errors */
  --alert-bg: #F6E3DE;
  --white: #FFFFFF;
  /* one pastel per part of the day (STEP-126): the Demo's moment tiles and the icon line drawn on each (3:1 or more on its tile) */
  --morning-tile: #DCE8F4; --morning-icon: #3E6A9E;
  --afternoon-tile: #E3E9DA; --afternoon-icon: #55663A;
  --evening-tile: #E4E2F0; --evening-icon: #5C55A0;
  --night-tile: var(--night); --night-icon: var(--cobalt-night);
  /* the same colours as r, g, b, for rgba(var(--ink-rgb), .1) */
  --ink-rgb: 18, 32, 51;
  --milk-rgb: 241, 243, 246;
  --night-rgb: 35, 50, 67;
  --watch-screen-rgb: 11, 17, 24;
  --white-rgb: 255, 255, 255;
  /* the embedded field and chip (the sample) */
  --field-edges: var(--hair) var(--edge-side) var(--edge-low) var(--edge-side);
  --field-shadow: inset 0 3px 6px rgba(var(--ink-rgb), .10), inset 0 1px 1px rgba(var(--ink-rgb), .08), inset 0 -2px 3px rgba(var(--white-rgb), .7), 0 1px 0 rgba(var(--white-rgb), .9);
  --field-shadow-hover: inset 0 3px 7px rgba(var(--ink-rgb), .13), inset 0 1px 1px rgba(var(--ink-rgb), .09), inset 0 -2px 3px rgba(var(--white-rgb), .7), 0 1px 0 rgba(var(--white-rgb), .9);
  --chip-shadow: inset 0 2px 4px rgba(var(--ink-rgb), .08), inset 0 -1px 2px rgba(var(--white-rgb), .7), 0 1px 0 rgba(var(--white-rgb), .9);
  --flat: .2s ease;         /* every hover: a flat colour change */
  /* older names, kept so every rule still resolves */
  --paper: var(--milk); --tint: var(--creme); --card: var(--milk); --bone: var(--on-night); --softnight: var(--on-night-soft);
  --ember: var(--cobalt); --pale: var(--step-4);
  --shadow: rgba(var(--ink-rgb), .10);
  /* fonts */
  --title: "Mona Sans", "Instrument Sans", Arial, sans-serif;
  --wide: 106%;   /* titles a touch narrower so they sit with the text (STEP-17; STEP-16 had 112.5 %) */
  --sans: "Instrument Sans", Arial, sans-serif;
  --mono: "Geist Mono", "Courier New", monospace;
  /* the nine roles (site view) — laptop → phone */
  --display: clamp(34px, 1.6rem + 2.2vw, 60px);
  --h1: clamp(27px, 1.25rem + 1.2vw, 42px);
  --h2: clamp(21px, 1.1rem + .5vw, 27px);      /* plan only: the level between a chapter title and H3 */
  --lead: clamp(18px, 1rem + .3vw, 21px);
  --h3: clamp(18px, 1rem + .25vw, 21px);
  --text: 18px;
  --small: 16px;
  --label: 12.5px;
  --index: clamp(36px, 1.5rem + 1.6vw, 52px);
  --figure: clamp(40px, 1.75rem + 2.2vw, 64px);
  --figure-card: clamp(30px, 1.1rem + 1.5vw, 42px);
  /* spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
  --gutter: 64px;
  --head-gap: 40px;
  --slide-pad: 48px;
}
/* short screens (a 1920×1080 laptop at 150 %, with a bookmarks bar: 1280 × 600): titles and figures follow the height, text keeps its size */
@media (max-height: 719px) {
  :root {
    --slide-pad: 32px;
    --display: clamp(32px, min(1.6rem + 2.2vw, 7.6vh), 60px);
    --h1: clamp(26px, min(1.25rem + 1.2vw, 5.6vh), 42px);
    --index: clamp(32px, min(1.5rem + 1.6vw, 6.5vh), 52px);
    --figure: clamp(36px, min(1.75rem + 2.2vw, 8vh), 64px);
    --figure-card: clamp(28px, min(1.1rem + 1.5vw, 6.2vh), 42px);
  }
}
@media (max-width: 1024px) { :root { --gutter: 40px; } }
@media (max-width: 720px) { :root { --gutter: 20px; --head-gap: 28px; } }

.pitch-site, .pitch-book, .plan-site, .plan-book { color: var(--ink); font-family: var(--sans); }
.pitch-site *, .pitch-book *, .plan-site *, .plan-book * { box-sizing: border-box; margin: 0; padding: 0; }
.pitch-site table, .pitch-book table { border-collapse: collapse; width: 100%; }
.pitch-site img, .pitch-book img { display: block; }

/* book view and PDF: the deck's layout, titles in Mona Sans */
.pitch-book :is(h1, h2, h3, .display), .plan-book :is(h1, h2, h3, .closing) { font-family: var(--title); font-weight: 600; }
.pitch-book :is(h1, h2), .pitch-book .display { font-weight: 600; }
.pitch-book h1.fw-400, .pitch-book h2.fw-400 { font-weight: 500; }
.plan-book h1 { font-stretch: 112.5%; letter-spacing: -.01em; } /* the book keeps the STEP-16 width */
.plan-book .cover-text h2 { font-weight: 500; }

/* ========================================================== PITCH · BOOK (the 1920×1080 slide) */
.pitch-book .slide {
  position: relative; overflow: hidden;
  width: 1920px; height: 1080px;
  background: var(--milk);
  padding: 128px 128px 160px;
  display: flex; flex-direction: column; gap: 40px;
}
.pitch-book .slide.sgap-24 { gap: 24px; } .pitch-book .slide.sgap-32 { gap: 32px; }
.pitch-book .slide.sgap-48 { gap: 48px; } .pitch-book .slide.sgap-56 { gap: 56px; }
/* STEP-135/136: four book pages a little tighter, so the last line stays 32 px above the wave (STEP-56): the app, the marketing
   plan, the team and the ask (its frame sentence, STEP-135 §0) */
.pitch-book .slide[data-id="app"] { gap: 12px; }
.pitch-book .slide[data-id="marketing"] { gap: 12px; }
.pitch-book .slide[data-id="team"] { gap: 12px; }
.pitch-book .slide[data-id="ask"] { gap: 20px; }
.pitch-book [data-id="ask"] .frame { font-size: 22px; }
.pitch-book .slide[data-id="competition"] { gap: 20px; }
.pitch-book [data-id="competition"] .moat { font-size: 22px; }
.pitch-book .slide.center { justify-content: center; }
.pitch-book .slide.tight { padding: 112px 128px 150px; }
.pitch-book .slide.dark { background: var(--night); color: var(--on-night); padding: 0; }
.pitch-book .wave { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
.pitch-book .foot { position: absolute; left: 128px; right: 128px; bottom: 64px; display: flex; justify-content: space-between; }
.pitch-book .foot p { font: 24px/1.2 "Geist Mono", "Courier New", monospace; letter-spacing: 2px; color: var(--muted); }
.pitch-book .dark .foot p { color: var(--on-night-soft); }
.pitch-book .film-still { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; }
/* photo fade: the film still darkens towards its foot, so the caption reads */
.pitch-book .film-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--night-rgb), .10) 0%, rgba(var(--night-rgb), .18) 55%, rgba(var(--night-rgb), .72) 100%); }
.pitch-book .film-play { position: absolute; inset: 0; }
.pitch-book .map-box { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.pitch-book .map-svg { width: 1920px; height: 1080px; }
.pitch-book .map-side { position: absolute; left: 1330px; top: 360px; }
.pitch-book .ask-logo { position: absolute; right: 128px; top: 112px; width: 260px; height: 107px; object-fit: contain; }
.pitch-book .dot { display: block; width: 24px; height: 24px; border-radius: 12px; flex: none; }
.pitch-book .dot-full { background: var(--ink); }
.pitch-book .dot-empty { border: 3px solid var(--ink); }
.pitch-book .dot-soon { border: 3px dashed var(--ink); opacity: .5; } /* a product not on sale yet, drawn faint */
.pitch-book .dot-half { border: 3px solid var(--ink); background: var(--ink); background-clip: content-box; padding-right: 9px; } /* STEP-51: partly remembers — the left half filled */
.pitch-book .arrow { font-size: 40px; color: var(--muted); }
.pitch-book th, .pitch-book td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top; text-align: left; }
.pitch-book tr.bg-tint th, .pitch-book tr.bg-tint td { padding-left: 12px; }

/* @generated by the STEP-10 converter: the deck values of every class in content/pitch.html (book view and PDF only) */
.pitch-book .ai-base{align-items:baseline}
.pitch-book .ai-center{align-items:center}
.pitch-book .ai-start{align-items:flex-start}
.pitch-book .ai-stretch{align-items:stretch}
.pitch-book .bb{border-bottom:1px solid var(--hair)}
.pitch-book .bd{border:1px solid var(--hair)}
.pitch-book .bd-ink1{border:1px solid var(--ink)}
.pitch-book .bd-ink2{border:2px solid var(--ink)}
.pitch-book .bd-ink3{border:3px solid var(--ink)}
.pitch-book .bg-card{background:var(--milk)}
.pitch-book .bg-faint{background:rgba(var(--ink-rgb),0.03)}
.pitch-book .bg-tint{background:var(--creme)}
.pitch-book .bt{border-top:1px solid var(--hair)}
.pitch-book .bt-ink{border-top:2px solid var(--ink)}
.pitch-book .bt-light{border-top:1px solid rgba(var(--milk-rgb),0.2)}
.pitch-book .c-bone{color:var(--on-night)}
.pitch-book .c-ember{color:var(--cobalt)}
.pitch-book .c-ink{color:var(--ink)}
.pitch-book .c-muted{color:var(--muted)}
.pitch-book .c-soft{color:var(--soft)}
.pitch-book .caps{text-transform:uppercase}
.pitch-book .col{display:flex;flex-direction:column}
.pitch-book .display{font-family:"Mona Sans","Instrument Sans",Arial,sans-serif}
.pitch-book .fit-contain{object-fit:contain}
.pitch-book .fit-cover{object-fit:cover}
.pitch-book .fs-120{font-size:120px}
.pitch-book .fs-128{font-size:128px}
.pitch-book .fs-200{font-size:200px}
.pitch-book .fs-20{font-size:20px}
.pitch-book .fs-22{font-size:22px}
.pitch-book .fs-23{font-size:23px}
.pitch-book .fs-24{font-size:24px}
.pitch-book .fs-26{font-size:26px}
.pitch-book .fs-28{font-size:28px}
.pitch-book .fs-32{font-size:32px}
.pitch-book .fs-34{font-size:34px}
.pitch-book .fs-36{font-size:36px}
.pitch-book .fs-40{font-size:40px}
.pitch-book .fs-44{font-size:44px}
.pitch-book .fs-52{font-size:52px}
.pitch-book .fs-56{font-size:56px}
.pitch-book .fs-64{font-size:64px}
.pitch-book .fs-72{font-size:72px}
.pitch-book .fs-80{font-size:80px}
.pitch-book .fw-400{font-weight:400}
.pitch-book .fw-500{font-weight:500}
.pitch-book .fw-600{font-weight:600}
.pitch-book .gap-0{gap:0}
.pitch-book .gap-10{gap:10px}
.pitch-book .gap-12{gap:12px}
.pitch-book .gap-14{gap:14px}
.pitch-book .gap-16{gap:16px}
.pitch-book .gap-20{gap:20px}
.pitch-book .gap-24{gap:24px}
.pitch-book .gap-28{gap:28px}
.pitch-book .gap-32{gap:32px}
.pitch-book .gap-36{gap:36px}
.pitch-book .gap-4{gap:4px}
.pitch-book .gap-40{gap:40px}
.pitch-book .gap-48{gap:48px}
.pitch-book .gap-6{gap:6px}
.pitch-book .gap-64{gap:64px}
.pitch-book .gap-8{gap:8px}
.pitch-book .gap-80{gap:80px}
.pitch-book .gap-96{gap:96px}
.pitch-book .grid-2{display:grid;grid-template-columns:repeat(2,1fr)}
.pitch-book .grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.pitch-book .grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.pitch-book .grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} /* STEP-162: Everything AVA does */
.pitch-book .grow{flex:1;min-width:0}
.pitch-book .h-107{height:107px}
.pitch-book .h-1080{height:1080px}
.pitch-book .h-264{height:264px}
.pitch-book .h-300{height:300px}
.pitch-book .h-440{height:440px}
.pitch-book .h-520{height:520px}
.pitch-book .hand{font-family:var(--sans);font-style:italic} /* STEP-175: no script font; the line in the body font, italic */
.pitch-book .jc-center{justify-content:center}
.pitch-book .lh-1{line-height:1}
.pitch-book .lh-102{line-height:1.02}
.pitch-book .lh-105{line-height:1.05}
.pitch-book .lh-11{line-height:1.1}
.pitch-book .lh-115{line-height:1.15}
.pitch-book .lh-12{line-height:1.2}
.pitch-book .lh-13{line-height:1.3}
.pitch-book .lh-135{line-height:1.35}
.pitch-book .lh-138{line-height:1.38}
.pitch-book .lh-14{line-height:1.4}
.pitch-book .lh-15{line-height:1.5}
.pitch-book .ls-2{letter-spacing:2px}
.pitch-book .ls-3{letter-spacing:3px}
.pitch-book .ls-5{letter-spacing:5px}
.pitch-book .ls-6{letter-spacing:6px}
.pitch-book .ls-m05{letter-spacing:-0.5px}
.pitch-book .ls-m1{letter-spacing:-1px}
.pitch-book .ls-m15{letter-spacing:-1.5px}
.pitch-book .ls-m3{letter-spacing:-3px}
.pitch-book .ls-m4{letter-spacing:-4px}
.pitch-book .ls-m8{letter-spacing:-8px}
.pitch-book .mono{font-family:"Geist Mono","Courier New",monospace}
.pitch-book .nowrap{white-space:nowrap}
.pitch-book .pad-14{padding:14px}
.pitch-book .pad-14_22{padding:14px 22px}
.pitch-book .pad-18_0_0_0{padding:18px 0 0 0}
.pitch-book .pad-18_20{padding:18px 20px}
.pitch-book .pad-20_0{padding:20px 0}
.pitch-book .pad-20_28{padding:20px 28px}
.pitch-book .pad-22_0{padding:22px 0}
.pitch-book .pad-22_0_0_0{padding:22px 0 0 0}
.pitch-book .pad-24_0_0_0{padding:24px 0 0 0}
.pitch-book .pad-24_0_28_0{padding:24px 0 28px 0}
.pitch-book .pad-28{padding:28px}
.pitch-book .pad-28_0_0_0{padding:28px 0 0 0}
.pitch-book .pad-32_0_0_0{padding:32px 0 0 0}
.pitch-book .pad-32_28{padding:32px 28px}
.pitch-book .pad-44{padding:44px}
.pitch-book .pt-14{padding-top:14px}
.pitch-book .r-12{border-radius:12px}
.pitch-book .r-14{border-radius:14px}
.pitch-book .r-44{border-radius:44px}
.pitch-book .r-8{border-radius:8px}
.pitch-book .r-pill{border-radius:50%}
.pitch-book .row{display:flex}
.pitch-book .shadow{box-shadow:none}
.pitch-book .strike{text-decoration:line-through}
.pitch-book .ta-c{text-align:center}
.pitch-book .ta-l{text-align:left}
.pitch-book .ta-r{text-align:right}
.pitch-book .tilt{transform:rotate(-1deg);transform-origin:left}
.pitch-book .tnum{font-variant-numeric:tabular-nums}
.pitch-book .w-1100{width:1100px}
.pitch-book .w-1300{width:1300px}
.pitch-book .w-1400{width:1400px}
.pitch-book .w-1500{width:1500px}
.pitch-book .w-1600{width:1600px}
.pitch-book .w-1920{width:1920px}
.pitch-book .w-200{width:200px}
.pitch-book .w-24{width:24px}
.pitch-book .w-260{width:260px}
.pitch-book .w-380{width:380px}
.pitch-book .w-462{width:462px}
.pitch-book .w-48{width:48px}
.pitch-book .w-600{width:600px}
.pitch-book .w-640{width:640px}
.pitch-book .w-72{width:72px}
.pitch-book .w-760{width:760px}
.pitch-book .w-800{width:800px}
.pitch-book .w-900{width:900px}
.pitch-book .w-920{width:920px}
.pitch-book .w-960{width:960px}
.pitch-book .wrap{flex-wrap:wrap}
/* @end generated */

/* ========================================================== SITE VIEW — the nine roles (STEP-16)
   Display · H1 · Lead · H3 · Text · Small · Label · Index · Figure — every piece of text is one of them */
:is(.pitch-site, .plan-site) .t-display { font: 600 var(--display)/1.04 var(--title); font-stretch: var(--wide); letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; color: var(--ink); }
:is(.pitch-site, .plan-site) .t-h1 { font: 600 var(--h1)/1.1 var(--title); font-stretch: var(--wide); letter-spacing: -.02em; max-width: 44ch; text-wrap: balance; color: var(--ink); }
:is(.pitch-site, .plan-site) .t-lead { font: 400 var(--lead)/1.5 var(--sans); color: var(--soft); max-width: 40rem; text-wrap: pretty; }
:is(.pitch-site, .plan-site) .t-h3 { font: 600 var(--h3)/1.3 var(--title); font-stretch: 100%; letter-spacing: -.01em; text-wrap: pretty; color: var(--ink); }
:is(.pitch-site, .plan-site) .t-text { font: 400 var(--text)/1.6 var(--sans); max-width: 44rem; text-wrap: pretty; }
:is(.pitch-site, .plan-site) .t-small { font: 400 var(--small)/1.5 var(--sans); color: var(--soft); text-wrap: pretty; }
:is(.pitch-site, .plan-site) .t-label { font: 500 var(--label)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); text-wrap: balance; }
:is(.pitch-site, .plan-site) .t-label.muted { color: var(--muted); }
:is(.pitch-site, .plan-site) .t-index { font: 500 var(--index)/1 var(--title); letter-spacing: -.02em; color: var(--muted); }   /* cinnamon: the lightest token that passes 3:1 on milk (STEP-120) */
:is(.pitch-site, .plan-site) .t-figure { font: 600 var(--figure)/1 var(--title); font-stretch: var(--wide); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
:is(.pitch-site, .plan-site) .card .t-figure { font-size: var(--figure-card); font-stretch: 100%; }
:is(.pitch-site, .plan-site) b { font-weight: 600; color: var(--ink); }
.pitch-site .c-soft { color: var(--soft); }
.pitch-site .t-text.c-soft { color: var(--soft); }

/* one card: a hairline, no fill; its hover a flat cappuccino (STEP-120). The selected card: cappuccino with the 2 px cobalt rule on top */
:is(.pitch-site, .plan-site) .card { background: transparent; border: 1px solid var(--hair); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: background-color var(--flat); }
:is(.pitch-site, .plan-site) .card.on { background: var(--capp); border-color: var(--capp); box-shadow: inset 0 2px 0 var(--cobalt); }
@media (hover: hover) {
  :is(.pitch-site, .plan-site) .card:hover { background: var(--capp); }
}
/* rule list: a hair line on top, 16 px above the content, no background, no hover */
.pitch-site .ruled { border-top: 1px solid var(--hair); padding: 16px 0 0; }

/* ---------------------------------------------------------- PITCH · SITE: one slide = at least one screen (STEP-18)
   A slide is one screen tall when its content fits; on a short screen it grows — never cut, never overlapped.
   Two flexible spacers centre the content between the top and the source line, which stays in the flow. */
.pitch-site .slide {
  position: relative;
  min-height: var(--screen, 100dvh);
  padding: var(--slide-pad) max(var(--gutter), calc((100% - 1200px) / 2));
  display: flex; flex-direction: column; justify-content: flex-start;
  --sgap: 32px; gap: var(--sgap);
  scroll-snap-align: start;
  border-bottom: 1px solid var(--hair);
}
.pitch-site .slide::before { content: ""; flex: 1 0 0; margin-bottom: calc(-1 * var(--sgap)); }            /* free space above the content */
.pitch-site .slide::after { content: ""; flex: 1 0 0; margin-top: calc(-1 * var(--sgap)); order: 98; }     /* free space below it */
.pitch-site .slide > .foot { order: 99; margin-top: calc(24px - var(--sgap)); }                                /* the source line: 24 px under the content, at the bottom when there is room */
.pitch-site .slide > .col:first-of-type { margin-bottom: 8px; } /* head → content: 40 */
.pitch-site .wave, .pitch-site .grow:empty, .pitch-site .foot .num, .pitch-site .foot .brand-line { display: none; }
/* real source lines stay: Small, muted, the last line of the slide */
.pitch-site .foot { position: static; }
.pitch-site .foot .src { font: 400 13px/1.4 var(--sans); color: var(--muted); text-transform: none; }
.pitch-site .foot:not(:has(.src:not(.brand-line))) { display: none; }

/* layout: columns, rows and grids on the spacing scale */
.pitch-site .col { display: flex; flex-direction: column; gap: 12px; }
.pitch-site .row { display: flex; gap: 32px; align-items: flex-start; }
.pitch-site .row > * { flex: 1 1 0; min-width: 0; }
.pitch-site :is(.grid-2, .grid-3, .grid-4) { display: grid; gap: 32px; }
.pitch-site .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pitch-site .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pitch-site .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pitch-site .grid-5 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* STEP-162 */
.feat-when { font-size: .85em; letter-spacing: .02em; }
/* STEP-175 §2: "Everything AVA does", 3 + 2 cards on mist: paper, 16 px radius, a 3 px cobalt line down the left, 28 px padding.
   One feature a line, its "When" a pill on the right: Live cobalt, Pilot ring-blue outline, Launch slate outline */
:is(.pitch-site, .pitch-book) :is(#features, [data-id="features"]) { background: var(--creme); }
.fcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.fcard { grid-column: span 2; background: var(--milk); border-radius: 16px; box-shadow: inset 3px 0 0 var(--cobalt); padding: 24px 28px 22px; }
.fcard.wide { grid-column: span 3; }
.fcard .t-h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.15; }
.fcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fcard.wide ul { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.fcard li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; padding: 7px 0; border-top: 1px solid var(--hair); }
.fcard li .t-small { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); }
.fcard .pill { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.fcard .pill.live { background: var(--cobalt); color: #fff; }
.fcard .pill.pilot { border: 1.5px solid #6FA9DB; color: #24639E; }
.fcard .pill.launch { border: 1.5px solid #8A97A7; color: var(--soft); }
.fcard .sub { grid-column: 1 / -1; font-size: 13px; line-height: 1.3; color: var(--soft); }
@media (max-width: 1100px) { .pitch-site .fcards { grid-template-columns: 1fr 1fr; } .pitch-site :is(.fcard, .fcard.wide) { grid-column: span 1; } .pitch-site .fcard.wide ul { grid-template-columns: 1fr; } } /* website only: the PDF page is narrow, the slide is not */
@media (max-width: 640px) { .pitch-site .fcards { grid-template-columns: 1fr; } }
.pitch-book [data-id="features"] { padding-top: 96px; }
/* STEP-194: the Technology page (the watch hears and speaks) carries the longer card texts: tighter type on this page only */
.pitch-book [data-id="howitworks"] { padding-top: 88px; }
.pitch-book [data-id="howitworks"] .t-h1 { font-size: 60px; }
.pitch-book [data-id="howitworks"] .t-text { font-size: 22px; }
.pitch-book [data-id="howitworks"] .card { padding: 22px; gap: 8px; }
.pitch-book [data-id="howitworks"] .card .t-label { font-size: 17px; }
.pitch-book [data-id="howitworks"] .card .t-h3 { font-size: 28px; }
.pitch-book [data-id="howitworks"] .card .t-small { font-size: 21px; line-height: 1.32; }
.pitch-book [data-id="howitworks"] .with-icon { font-size: 21px; }
.pitch-book [data-id="features"] .t-h1 { font-size: 52px; }
.pitch-book [data-id="features"] .t-lead { font-size: 22px; }
.pitch-book [data-id="features"] .fcards { gap: 16px; }
.pitch-book [data-id="features"] .fcard { padding: 16px 26px 14px; }
.pitch-book [data-id="features"] .fcard .t-h3 { font-size: 24px; margin-bottom: 4px; }
.pitch-book [data-id="features"] .fcard li { padding: 4px 0; }
.pitch-book [data-id="features"] .fcard li .t-small { font-size: 18px; }
.pitch-book [data-id="features"] .fcard .pill { font-size: 12px; padding: 5px 10px; }
.pitch-book [data-id="features"] .fcard .sub { font-size: 14px; }
.pitch-book [data-id="features"] > p.t-small { font-size: 17px; }
.pitch-site :is(.row, .grid-2, .grid-3, .grid-4):has(> .card) { gap: 20px; align-items: flex-start; }
.pitch-site :is(.row, .grid-2, .grid-3, .grid-4):not(:has(> :not(.card):not(:has(> .arrow)))) { align-items: stretch; } /* only cards (and arrows): level */
.pitch-site .ruled.row { gap: 24px; align-items: baseline; }
.pitch-site .ruled.row > .t-index, .pitch-site .ruled.row > .t-label { flex: 0 0 auto; }
.pitch-site .ruled.row > .t-index { width: 1.6em; align-self: flex-start; }
.pitch-site .ruled.row > .t-h3 { flex: 0 0 34%; }
.pitch-site .ruled.row > .t-label { width: 7.5em; }
.pitch-site .ruled.row > .t-label.nowrap { width: auto; }
.pitch-site .col > .ruled { flex: none; }
.pitch-site .ai-center { align-items: center; }
.pitch-site img.fit-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.pitch-site .arrow { color: var(--muted); font-size: 22px; }
.pitch-site .row > div:has(> .arrow) { flex: 0 0 auto; align-self: center; }
.pitch-site .step { flex: none; border: 1px solid var(--ink); border-radius: 999px; padding: 4px 14px; text-decoration: line-through; }
.pitch-site .wrap { flex-wrap: wrap; }
.pitch-site .wrap > * { flex: 0 0 auto; }

/* tables: Small, real tables; on a phone they scroll sideways in their own box */
.pitch-site .table-scroll { flex: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pitch-site table { font: 400 var(--small)/1.5 var(--sans); }
.pitch-site th, .pitch-site td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; text-align: left; }
.pitch-site th { font-weight: 600; color: var(--soft); }
.pitch-site th.c-ember { color: var(--cobalt); } /* AVA's own column */
.pitch-site td.c-soft { color: var(--soft); }
.pitch-site .ta-r { text-align: right; }
.pitch-site tr.bg-tint th { background: var(--creme); padding-left: 12px; }
/* rows: hairlines, and a flat cappuccino under the mouse (STEP-120) */
:is(.pitch-site, .plan-site) tr:has(td) :is(th, td) { transition: background-color var(--flat); }
@media (hover: hover) { :is(.pitch-site, .plan-site) tr:has(td):hover :is(th, td) { background: var(--capp); } }

/* the phone screen on slide 7 is an illustration, not a card */
.pitch-site .mock { flex: 0 0 340px; background: var(--milk); border: 2px solid var(--ink); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.pitch-site .mock .row { gap: 8px; }
.pitch-site .mock .row > div { border: 1px solid var(--hair); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.pitch-site .mock .row .t-figure { font-size: 26px; font-stretch: 100%; }
.pitch-site .mock .bg-tint { background: var(--creme); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
/* STEP-58: slide 08 shows two screens of the AVA app (today, settings), a message field and settings rows */
.pitch-site #app .phones { flex: 0 0 auto; gap: 16px; align-items: stretch; }
.pitch-site #app .phones .mock { flex: 0 0 272px; padding: 20px; gap: 10px; }
.pitch-site .mock .set { border-top: 1px solid var(--hair); padding: 8px 0 0; display: flex; flex-direction: column; gap: 2px; }
.pitch-site .mock .set .t-label { font-size: 11px; letter-spacing: .12em; }
.pitch-site .mock .msg { border: 1.5px solid var(--ink); border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; }
.pitch-site .mock .msg p { flex: 1 1 auto; }
.pitch-site .mock .msg span { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--cobalt); color: var(--milk); display: flex; align-items: center; justify-content: center; }
.pitch-site .mock .msg svg { width: 16px; height: 16px; }
.pitch-site .mock .bg-tint .t-label { color: var(--cobalt); }
.pitch-book .mock .set { border-top: 1px solid var(--hair); padding: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pitch-book .mock .set .t-label { font: 500 20px/1.3 "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pitch-book .mock .set .t-small { font-size: 22px; line-height: 1.3; }
.pitch-book .mock .msg { border: 1.5px solid var(--ink); border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 22px; }
.pitch-book .mock .msg p { flex: 1 1 auto; }
.pitch-book .mock .msg span { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--cobalt); color: var(--milk); display: flex; align-items: center; justify-content: center; }
:is(.pitch-site, .pitch-book) :is(#app, [data-id="app"]) h2 { text-wrap: balance; }

/* slide 1: the cover */
.pitch-site #cover .fit-contain { width: clamp(150px, 13vw, 240px); height: auto; aspect-ratio: 800 / 330; }
.pitch-site #cover .t-display { max-width: 20ch; }
.pitch-site #cover div.w-640 { align-items: flex-start; gap: 8px; }
.pitch-site #cover .hand { font: italic 400 clamp(20px, 1rem + .6vw, 26px)/1.4 var(--sans); color: var(--cobalt); max-width: 52ch; }
.pitch-site #cover .col.gap-12 { gap: 12px; }
/* slide 2: the film — the picture fills the screen, a click plays */
.pitch-site .slide.dark { padding: 0; background: var(--night); color: var(--on-night); cursor: pointer; }
.pitch-site .film-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* photo fade: the film still darkens towards its foot */
.pitch-site .film-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--night-rgb), .10) 0%, rgba(var(--night-rgb), .18) 55%, rgba(var(--night-rgb), .72) 100%); }
.pitch-site .film-play { position: relative; flex: 1; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.pitch-site .film-play .t-label { color: var(--on-night); font-size: 14px; }
.pitch-site .play-icon { width: clamp(96px, 10vw, 160px); height: auto; }
.pitch-site .dark .foot { left: var(--gutter); right: var(--gutter); }
.pitch-site .dark .foot .src { color: var(--on-night-soft); }
/* slide 5: the picture beside the three points */
.pitch-site #whatitis > .row > img { flex: 0 0 38%; aspect-ratio: 4 / 3.2; }
/* slide 20: the title on one line; the Series A line is a rule-list line, not a card (the four tranches are the cards) */
/* slide 3: the night */
.pitch-site #night .t-display { max-width: 16ch; }
/* STEP-38: the question in the accent (its arrow came off in STEP-43); STEP-120: cobalt-night on the night slide, cobalt in the book */
.pitch-site #night .ask { color: var(--cobalt); } /* STEP-154: the slide is light now */
.pitch-book [data-id="night"] .ask { color: var(--cobalt); } /* the book's pages carry data-id, not id */
/* slide 14: the competition table fits 1280 wide; narrower than that it scrolls in its box (STEP-120: the fade on its right edge came off) */
.pitch-site #competition table { font-size: 15px; }
.pitch-site #competition :is(th, td) { padding: 8px 12px 8px 0; }
.pitch-site #competition th:first-child { width: 11% !important; }
.pitch-site .dot { display: block; width: 16px; height: 16px; border-radius: 8px; flex: none; }
.pitch-site .dot-full { background: var(--ink); }
.pitch-site .dot-empty { border: 3px solid var(--ink); }
/* slide 20: the ask */
.pitch-site .ask-logo { position: absolute; right: max(var(--gutter), calc((100% - 1200px) / 2)); top: var(--slide-pad); width: 96px; height: auto; }

/* the market map chart, shared by both documents: only the chart window of the 1920×1080 drawing */
.pitch-site .map-box, .plan-site .map-box, .plan-book .map-box { position: relative; aspect-ratio: 1160 / 670; overflow: hidden; }
.pitch-site .map-svg, .plan-site .map-svg, .plan-book .map-svg { display: block; width: 165.5%; height: auto; aspect-ratio: 1920 / 1080; margin: -24.1% 0 -11.2% -8.6%; }

@media (max-width: 720px) {
  .pitch-site .slide { min-height: 0; padding: 40px var(--gutter) 40px; --sgap: 28px; }
  .pitch-site .slide::before, .pitch-site .slide::after { display: none; }
  .pitch-site .slide.dark { min-height: 70vh; }
  .pitch-site .slide > .col:first-of-type { margin-bottom: 0; }
  .pitch-site .row:not(.ruled), .pitch-site .ruled.row:has(> .t-h3) { flex-direction: column; gap: 20px; }
  .pitch-site .row:not(.ruled) > *, .pitch-site .ruled.row:has(> .t-h3) > * { flex: none; width: 100%; }
  .pitch-site .row > div:has(> .arrow) { width: auto; }
  .pitch-site .ruled.row:not(:has(> .t-index)) { flex-direction: column; gap: 8px; }
  .pitch-site .ruled.row:not(:has(> .t-index)) > * { flex: none; width: 100%; }
  .pitch-site .row.wrap, .pitch-site .map-side .row { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  .pitch-site .row.wrap > *, .pitch-site .map-side .row > * { width: auto; }
  .pitch-site .map-side .row > p { flex: 1 1 0; }
  .pitch-site .ruled.row:has(> .t-h3) { gap: 8px; }
  .pitch-site .ruled.row > .t-label { width: auto; }
  .pitch-site :is(.grid-2, .grid-3, .grid-4) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pitch-site :is(.row, .grid-2, .grid-3, .grid-4):has(> .card) { gap: 16px; }
  .pitch-site .card { padding: 20px; }
  .pitch-site .mock { flex: none; width: 100%; max-width: 360px; }
  .pitch-site .mock .row { flex-direction: row; }
  .pitch-site .mock .row > div { flex: 1 1 0; }
  .pitch-site .row > div:has(> .arrow) { align-self: center; }
  .pitch-site .arrow { display: block; transform: rotate(90deg); }
  .pitch-site .ask-logo { display: none; }
  .pitch-site .table-scroll table { min-width: 720px; }
  .pitch-site .map-box, .plan-site .map-box { aspect-ratio: auto; overflow-x: auto; overflow-y: hidden; height: 460px; }
  .pitch-site .map-box > svg, .plan-site .map-box > svg { width: 1300px; height: 731px; max-width: none; aspect-ratio: auto; margin: -190px -447px 0 -68px; }
}

/* ---------------------------------------------------------- PLAN · SITE: reads like an article */
.plan-site { font: 400 var(--text)/1.65 var(--sans); padding-bottom: 64px; }
.plan-site :is(.chapter > .part, .plan-cover) { max-width: 960px; margin-inline: auto; }
.plan-site .part > * { max-width: 680px; margin-inline: 0 auto; }               /* the text column: left edges line up with the wide blocks */
.plan-site .part > :is(.table-scroll, .cols, .summary-grid, .flow, .map-box, .plan-photo, .card, .toc) { max-width: 960px; } /* wide blocks */
.plan-site .chapter { padding: 64px 0 16px; border-top: 1px solid var(--hair); scroll-margin-top: 24px; }
.plan-site .part + .part { margin-top: 48px; }
.plan-site p { margin-block: 0 16px; text-wrap: pretty; }
.plan-site .eyebrow { font: 500 var(--label)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); margin-block: 0 12px; }
.plan-site .eyebrow.mt { margin-top: 48px; }
.plan-site h1 { font: 600 var(--h1)/1.1 var(--title); font-stretch: var(--wide); letter-spacing: -.02em; text-wrap: balance; margin-block: 0 16px; }
.plan-site .part > h1 + :not(.lede) { margin-top: 24px; }
.plan-site h2 { font: 600 var(--h2)/1.2 var(--title); font-stretch: 100%; letter-spacing: -.01em; text-wrap: balance; margin-block: 48px 12px; }
.plan-site h3 { font: 600 var(--h3)/1.3 var(--title); font-stretch: 100%; letter-spacing: -.01em; text-wrap: pretty; margin-block: 32px 8px; }
.plan-site h1 + h3, .plan-site .eyebrow + h2 { margin-top: 24px; }
.plan-site p.lede { font: 400 var(--lead)/1.5 var(--sans); color: var(--soft); margin-bottom: var(--head-gap); }
.plan-site .soft { color: var(--soft); }
.plan-site .mono { font-family: var(--mono); }
.plan-site .nowrap { white-space: nowrap; }
.plan-site .rule { border-top: 1px solid var(--hair); margin-block: 32px; }
.plan-site ul { margin: 0 0 16px; padding-left: 1.2em; }
.plan-site li { margin: 0 0 8px; }
.plan-site li::marker { color: var(--muted); }
.plan-site mark { background: var(--capp); color: var(--cobalt); padding: 0 .3em; border-radius: 4px; }
.plan-site a { color: var(--cobalt); }
/* columns only when each is at least 340 px wide, otherwise one column */
.plan-site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 48px; }
.plan-site .cols > * { min-width: 0; }
.plan-site .cols > * > :first-child { margin-top: 0; }
/* figures and their captions */
.plan-site .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 32px; margin-block: 32px 48px; }
.plan-site .stat { border-top: 1px solid var(--hair); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.plan-site .stat p { margin: 0; }
.plan-site .big { font: 600 var(--figure)/1 var(--title); font-stretch: var(--wide); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; margin: 0 0 12px; }
.plan-site .card .big { font-size: var(--figure-card); font-stretch: 100%; }
.plan-site .stat .cap { font: 400 var(--small)/1.5 var(--sans); color: var(--soft); }
/* cards: the one card style */
.plan-site .card { margin-block: 24px 32px; }
.plan-site .card.dark { background: var(--creme); border-color: var(--creme); }
.plan-site .card > :last-child, .plan-site .flow .box > :last-child { margin-bottom: 0; }
.plan-site .card .eyebrow { color: var(--muted); }
.plan-site .card p { font-size: var(--small); line-height: 1.5; margin: 0; }
.plan-site .closing { font: 600 var(--h3)/1.4 var(--title) !important; color: var(--ink); }
.plan-site .flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 24px 40px; }
.plan-site .flow .box { background: transparent; border: 1px solid var(--hair); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: background-color var(--flat); }
.plan-site .flow .box.dark { background: var(--creme); border-color: var(--creme); }
.plan-site .flow .box .eyebrow { color: var(--muted); margin: 0; }
.plan-site .flow .box h3 { margin: 0; }
.plan-site .flow .box p { font: 400 var(--small)/1.5 var(--sans); color: var(--soft); margin: 0; }
.plan-site .flow .arrow { display: none; }
@media (hover: hover) {
  .plan-site .flow .box:hover { background: var(--capp); }
  .plan-site .card.dark:hover { background: var(--capp); }   /* the creme card hovers like the creme flow box */
}
/* numbered blocks: a rule list with the index in cinnamon */
.plan-site .numbered { display: flex; gap: 24px; border-top: 1px solid var(--hair); padding: 16px 0; }
.plan-site .numbered:last-child { border-bottom: 1px solid var(--hair); }
.plan-site .numbered p { margin: 0; }
.plan-site .numbered .n { flex: none; width: 1.6em; }
.plan-site .index-pale, .plan-site .numbered .n.index-pale { font: 500 var(--index)/1 var(--title); letter-spacing: -.02em; color: var(--muted); }
.plan-site .numbered .n.index-pale { font-size: clamp(30px, 1.2rem + 1vw, 40px); }
.plan-site .cols .index-pale { margin: 32px 0 8px; }
.plan-site .cols .index-pale + h3 { margin-top: 0; }
.plan-site .dialogue p { margin: 0 0 8px; }
.plan-site .dialogue .t { font: 500 var(--label)/1.4 var(--mono); letter-spacing: .12em; color: var(--muted); margin: 24px 0 8px; }
.plan-site .dialogue .who { font-weight: 600; }
.plan-site .footnote { font: 400 var(--small)/1.5 var(--sans); color: var(--soft); }
/* STEP-136: "The plan in 60 seconds", the eight question cards at the top (two columns, one on a phone); "In short" under each
   chapter's title; the way back to the cards at the end of each chapter (website only) */
.plan-site .part > .grid60 { max-width: 960px; }
.plan-site .grid60 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 32px 24px; }
.plan-site .c60 { border: 1px solid var(--hair); border-radius: 14px; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; transition: background-color var(--flat); }
.plan-site .c60 p { margin: 0; }
.plan-site .c60 .q { font: 600 var(--h3)/1.3 var(--title); letter-spacing: -.01em; color: var(--ink); }
.plan-site .c60 .a { font: 400 var(--small)/1.5 var(--sans); color: var(--soft); }
.plan-site .c60 .go { margin-top: auto; padding-top: 4px; font-size: 14px; display: flex; gap: 16px; }
.plan-site .c60 .go a { text-decoration: none; }
@media (hover: hover) { .plan-site .c60:hover { background: var(--capp); } }
@media (max-width: 600px) { .plan-site .grid60 { grid-template-columns: minmax(0, 1fr); } }
.plan-site .never { color: var(--soft); }
.plan-site .never a { font-weight: 600; }
.plan-site p.in-short { margin-block: 0 24px; }
.plan-site p.in-short b { display: block; font-weight: 600; }
.plan-site .back60 { margin: 40px 0 0; font: 500 var(--small)/1.4 var(--sans); }
.plan-site .back60 a { text-decoration: none; }
/* contents */
.plan-site .toc { columns: 2 18rem; column-gap: 48px; margin-bottom: 16px; }
.plan-site .toc p { margin: 0 0 8px; break-inside: avoid; }
.plan-site .toc a { color: var(--ink); text-decoration: none; transition: color var(--flat); }
.plan-site .toc a:hover { color: var(--cobalt); }
.plan-site .toc .mono { color: var(--muted); margin-right: 12px; font-size: 14px; }
.plan-site .plan-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 14px; margin-block: 8px 32px; }
.plan-site .map-box { margin-block: 16px 32px; }
/* tables: Small; wide ones scroll sideways inside their own box */
.plan-site .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 16px 32px; }
.plan-site table { width: 100%; border-collapse: collapse; font: 400 var(--small)/1.5 var(--sans); }
.plan-site th, .plan-site td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--hair); }
.plan-site th { font-weight: 600; color: var(--soft); border-bottom: 1.5px solid var(--ink); }
.plan-site th.ava { color: var(--cobalt); }
.plan-site td.n, .plan-site th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-site td.neg { color: var(--cobalt); }
.plan-site tr.hi td { background: var(--capp); box-shadow: inset 0 2px 0 var(--cobalt); } /* the highlighted row: cappuccino with the cobalt rule on top */
.plan-site tr.total td { border-top: 1.5px solid var(--ink); font-weight: 600; }
/* the cover, as the top of the page */
.plan-site .plan-cover { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px 0 64px; }
.plan-site .cover-top .eyebrow { margin: 0; }
.plan-site .cover-mark img { width: clamp(180px, 20vw, 280px); height: auto; display: block; margin-top: 24px; }
.plan-site .cover-mark .sub { font: 500 var(--label)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); margin-top: 8px; }
.plan-site .cover-text h2 { font: 600 var(--display)/1.04 var(--title); font-stretch: var(--wide); letter-spacing: -.025em; text-wrap: balance; margin: 32px 0 16px; }
.plan-site .hand { font: italic 400 clamp(19px, 1rem + .5vw, 24px)/1.45 var(--sans); color: var(--cobalt); margin-bottom: 16px; }
.plan-site .cover-text .desc { font: 400 var(--lead)/1.5 var(--sans); color: var(--soft); }
.plan-site .cover-text .meta { font: 400 var(--small)/1.6 var(--sans); color: var(--soft); }
.plan-site .cover-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 72vh; object-fit: cover; object-position: center 35%; border-radius: 14px; grid-row: 1 / span 2; grid-column: 2; }
@media (max-width: 720px) {
  .plan-site .plan-cover { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0 48px; }
  .plan-site .cover-photo { grid-row: auto; grid-column: auto; aspect-ratio: 16 / 10; }
  .plan-site .chapter { padding-top: 48px; }
  .plan-site .table-scroll table { min-width: 720px; }
  .plan-site .card, .plan-site .flow .box { padding: 20px; }
  .plan-site .flow { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================== PLAN · BOOK and PDF (A4 sheets, the original print layout) */
.plan-book .sheet {
  width: 210mm; height: 297mm; overflow: hidden; position: relative;
  background: var(--milk); padding: 18mm 18mm 19mm;
  font-size: 11pt; line-height: 1.45;
}
/* the original print ran about 7% denser than these pt sizes on screen: scale the sheet text to match it (transform, not zoom: zoom prints images wrong) */
.plan-book .sheet-body { height: calc(100% / .93); width: calc(100% / .93); overflow: hidden; transform: scale(.93); transform-origin: 0 0; }
.plan-book .sheet-foot { position: absolute; left: 18mm; right: 18mm; bottom: 9mm; display: flex; justify-content: space-between; font: 7pt "Geist Mono", monospace; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.plan-book h1 { font-size: 29pt; line-height: 1.08; margin: 4mm 0 6mm; }
.plan-book h2 { font-size: 16pt; line-height: 1.15; margin: 8mm 0 3mm; }
.plan-book h3 { font-size: 12.5pt; line-height: 1.2; margin: 5mm 0 2mm; }
.plan-book p { margin: 0 0 3.2mm; }
.plan-book p.lede { font-size: 14pt; line-height: 1.4; max-width: 155mm; margin-bottom: 6mm; }
.plan-book p.lede.why { font-size: 11.5pt; margin-bottom: 4mm; } /* STEP-49: the team chapter keeps its advisers on the same sheet */
.plan-book .eyebrow { font: 8.5pt "Geist Mono", monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 2mm; }
.plan-book .eyebrow.mt { margin-top: 6mm; }
.plan-book .soft { color: var(--soft); }
.plan-book .mono { font-family: "Geist Mono", monospace; }
.plan-book .nowrap { white-space: nowrap; }
.plan-book .cols { display: flex; gap: 10mm; }
.plan-book .cols > * { flex: 1; min-width: 0; }
.plan-book .cols.stack-book { flex-direction: column; gap: 6mm; } /* STEP-49: the cheques table has six columns: full width on the A4 sheet */
.plan-book .rule { border-top: 1px solid var(--hair); margin: 4mm 0; }
.plan-book ul { margin: 0 0 3mm; padding-left: 4.5mm; }
.plan-book li { margin: 0 0 1.4mm; }
.plan-book li::marker { color: var(--cobalt); }
.plan-book table { width: 100%; border-collapse: collapse; font-size: 9.8pt; line-height: 1.32; margin: 3mm 0 5mm; }
.plan-book th, .plan-book td { text-align: left; vertical-align: top; padding: 2mm 2.2mm 2mm 0; border-bottom: 1px solid var(--hair); }
.plan-book th { font-weight: 600; color: var(--soft); font-size: 8.8pt; border-bottom: 1.5px solid var(--ink); }
.plan-book th.ava, .plan-book td.neg { color: var(--cobalt); }
.plan-book td.n, .plan-book th.n { text-align: right; font-family: "Geist Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-book tr.hi td { background: var(--capp); box-shadow: inset 0 2px 0 var(--cobalt); }
.plan-book tr.total td { border-top: 1.5px solid var(--ink); font-weight: 600; }
.plan-book table.compact { font-size: 9pt; }
.plan-book table.cal { font-size: 8.4pt; line-height: 1.28; }
.plan-book table.cal :is(td, th) { padding-top: 1.3mm; padding-bottom: 1.3mm; } /* STEP-49: the year's calendar stays on one sheet */
.plan-book .card { border: 1px solid var(--hair); border-radius: 3mm; padding: 5mm; margin-top: 4mm; }
.plan-book .card.dark { background: var(--creme); }
.plan-book .card > :last-child { margin-bottom: 0; }
.plan-book .closing { font: 14pt/1.3 "Mona Sans", "Instrument Sans", Arial, sans-serif; margin: 0; }
.plan-book .big { font: 40pt/1 "Geist Mono", monospace; letter-spacing: -.03em; color: var(--cobalt); margin: 0 0 1.5mm; }
.plan-book .big.ink { color: var(--ink); }
.plan-book .stat { border-top: 1px solid var(--hair); padding-top: 3mm; }
.plan-book .stat p { margin: 0; }
.plan-book .stat .cap { font-size: 10pt; color: var(--soft); }
.plan-book .numbered { display: flex; gap: 4mm; border-top: 1px solid var(--hair); padding: 2.6mm 0; }
.plan-book .numbered .n { font: 8.5pt "Geist Mono", monospace; color: var(--cobalt); width: 7mm; flex: none; padding-top: 1mm; }
.plan-book .numbered p { margin: 0; }
.plan-book .numbered:last-child { border-bottom: 1px solid var(--hair); }
.plan-book mark { background: var(--capp); color: var(--cobalt); padding: 0 .3em; border-radius: 1mm; }
.plan-book .dialogue p { margin: 0 0 2mm; }
.plan-book .dialogue .t { font: 8pt "Geist Mono", monospace; letter-spacing: .16em; color: var(--cobalt); margin: 3mm 0 1.5mm; }
.plan-book .dialogue .who { color: var(--cobalt); font-weight: 600; }
.plan-book .flow { display: flex; align-items: stretch; margin: 3mm 0 4mm; }
.plan-book .flow .box { flex: 1; border: 1px solid var(--hair); border-radius: 2.5mm; padding: 4mm; font-size: 9.6pt; }
.plan-book .flow .box.dark { background: var(--creme); }
.plan-book .flow .box h3 { margin: 1mm 0 2mm; font-size: 11.5pt; }
.plan-book .flow .box p { margin: 0; }
.plan-book .flow .arrow { width: 7mm; flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12pt; }
.plan-book .footnote { font: 8.2pt/1.45 "Geist Mono", monospace; color: var(--soft); }
.plan-book .tight { font-size: 10.2pt; line-height: 1.4; }
.plan-book .tight table { font-size: 9.2pt; margin: 2mm 0 3mm; }
.plan-book .tight h1 { font-size: 26pt; margin-bottom: 4mm; }
.plan-book .tight h3 { margin-top: 3mm; }
.plan-book .tight p { margin-bottom: 2.4mm; }
.plan-book .roomy { font-size: 12.4pt; line-height: 1.5; }
.plan-book .roomy .numbered { padding: 4mm 0; }
.plan-book .summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; margin: 5mm 0 8mm; }
.plan-book .grid60 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; margin: 5mm 0 5mm; }
.plan-book .c60 { border: 1px solid var(--hair); border-radius: 2.5mm; padding: 4mm 5mm; display: flex; flex-direction: column; gap: 1.5mm; }
.plan-book .c60 p { margin: 0; }
.plan-book .c60 .q { font: 600 12.5pt/1.25 "Mona Sans", "Instrument Sans", Arial, sans-serif; }
.plan-book .c60 .a { font-size: 10pt; line-height: 1.4; color: var(--soft); }
.plan-book .c60 .go { margin-top: auto; font: 8.5pt "Geist Mono", monospace; display: flex; gap: 4mm; }
.plan-book .c60 .go a, .plan-book .never a { color: var(--cobalt); text-decoration: none; }
.plan-book .never { color: var(--soft); font-size: 10pt; }
.plan-book .never a { font-weight: 600; }
.plan-book p.in-short { margin: 0 0 4mm; }
.plan-book p.in-short b { display: block; font-weight: 600; }
.plan-book .toc { columns: 2; column-gap: 10mm; font-size: 9.6pt; }
.plan-book .toc p { margin: 0 0 1mm; break-inside: avoid; }
.plan-book .toc a { color: inherit; text-decoration: none; }
.plan-book .toc .mono { color: var(--cobalt); margin-right: 2mm; }
.plan-book .plan-photo { display: block; width: 174mm; height: 78mm; object-fit: cover; border-radius: 3mm; margin: 0 0 5mm; }
.plan-book .map-box { width: 174mm; margin: 2mm 0 6mm; }
/* the cover sheet */
.plan-book .sheet.cover-sheet { padding: 0; }
.plan-book .plan-cover { height: 297mm; display: flex; flex-direction: column; }
.plan-book .cover-top { padding: 22mm 20mm 0; }
.plan-book .cover-top .eyebrow { color: var(--soft); }
.plan-book .cover-mark { width: 100mm; margin: 5mm 0 0 -2mm; text-align: center; }
.plan-book .cover-mark img { display: block; width: 100mm; height: auto; margin: 0 0 2mm; }
.plan-book .cover-mark .sub { font: 10pt "Geist Mono", monospace; letter-spacing: .32em; text-transform: uppercase; color: var(--cobalt); }
.plan-book .cover-text { padding: 0 20mm 10mm; margin-top: auto; }
.plan-book .cover-text h2 { font-size: 22pt; font-weight: 400; margin: 0 0 3mm; }
.plan-book .hand { font: italic 400 14pt/1.35 var(--sans); color: var(--cobalt); margin: 0 0 5mm; }
.plan-book .cover-text .desc { color: var(--soft); font-size: 11.5pt; max-width: 120mm; }
.plan-book .cover-text .meta { font: 8.5pt/1.6 "Geist Mono", monospace; color: var(--soft); }
.plan-book .cover-photo { display: block; width: 210mm; height: 117mm; object-fit: cover; object-position: center 40%; }


/* index numbers in the book view and the PDF: cinnamon, the lightest token that passes 3:1 on milk (STEP-120) */
.pitch-book .index-pale, .plan-book .index-pale { font-family: var(--title); font-weight: 500; color: var(--muted); line-height: .85; letter-spacing: -.02em; }
.pitch-book .row:has(> .index-pale) { align-items: flex-start; }
.pitch-book .index-pale { font-size: 76px; }
.pitch-book .row > .index-pale { flex: none; width: 84px; margin-top: -4px; font-size: 60px; }
.plan-book .index-pale { font-size: 22pt; margin: 2.5mm 0 0; }
.plan-book .index-pale + h3 { margin-top: .5mm; }
.plan-book .numbered .n.index-pale { font: 400 19pt/.8 "Mona Sans", "Instrument Sans", Arial, sans-serif; color: var(--muted); width: 11mm; padding-top: 0; }
.plan-book .numbered:has(.index-pale) { padding: 2mm 0; }
.slide:not(#cover):not([data-id="cover"]) > div.grow:empty { display: none; }
.plan-book .sheet-body.dense { height: calc(100% / .86); width: calc(100% / .86); transform: scale(.86); }
.pitch-site .row > .dot, .pitch-site .map-side .row > .dot { flex: none; width: 16px; }
/* book footer: the page number never wraps; long source lines fit on one line */
.pitch-book .foot { gap: 32px; }
.pitch-book .foot .num { flex: none; white-space: nowrap; }
.pitch-book .foot .src { font-size: 21px; letter-spacing: 1.5px; }
/* book slide 5: the three rows a little tighter, so the last line stays above the wave */
.pitch-book [data-id="whatitis"] .row.pad-22_0 { padding: 16px 0; }
.pitch-book [data-id="whatitis"] .pad-28_0_0_0 { padding-top: 20px; }


/* ========================================================== STEP-17 · design on top (site view) */
/* reading: text always ink, lines of at most 60 characters; small text darker; grey only for labels and sources */
/* STEP-120: the website's accent is cobalt, cobalt-night on the night slides; the one quote mark is cappuccino (STEP-21 had lavender here, STEP-17 rust) */
.pitch-site, .plan-site { --icon: var(--cobalt); --quote: var(--capp); }
.pitch-book, .plan-book { --icon: var(--cobalt); }
.pitch-book .hand, .plan-book .hand { color: var(--cobalt); }
/* STEP-46 fix (6 Oct), STEP-120, STEP-125: the AVA corner of the drawn map (book view and the plan) in solid cobalt, like the Only AVA box on
   the website's slide 11, so all three match; its dot and the name AVA in milk. The drawing carries the same colours inline. */
.map-svg .map-ava-box { fill: var(--cobalt); fill-opacity: 1; stroke: var(--cobalt); }
.map-svg .map-ava { fill: var(--milk); }
.pitch-book [data-id="competition"] table :is(th, td):nth-child(2) { background: var(--capp); }
.pitch-book [data-id="competition"] table tr:first-child :is(th, td):nth-child(2) { box-shadow: inset 0 2px 0 var(--cobalt); }
.pitch-book [data-id="cover"] .t-text { text-wrap: balance; } /* "peace of mind" stays together */
:is(.pitch-site, .plan-site) .t-text, .pitch-site .t-text.c-soft { color: var(--ink); max-width: 60ch; }
.plan-site .part > :is(p, ul):not(.lede) { max-width: min(680px, 60ch); }
/* "Aa": bigger reading text everywhere on the site */
body.big-text :is(.pitch-site, .plan-site) { --text: 20px; --small: 18px; --lead: 22px; }
body.big-text .plan-site { font-size: 20px; }
/* the section label carries the slide number: "05 · What it is" */
.pitch-site { counter-reset: slide; }
.pitch-site .slide { counter-increment: slide; }
/* STEP-156: the light slides a touch darker than the page, on mist, so the sections stand apart; their cards stay on paper, so they
   still lift off it. After a dark slide, a 48 px soft seam from slate to mist instead of a hard cut. The same in the Book (and so
   the PDF) */
.pitch-site .slide:not(.ink):not(.dark) { background: var(--creme); }
.pitch-site .slide.ink + .slide:not(.ink):not(.dark), .pitch-site .slide.dark + .slide:not(.ink):not(.dark) { background: linear-gradient(var(--night), var(--creme) 48px); }
.pitch-site .slide:not(.ink):not(.dark) .card:not(.on):not(:hover) { background: var(--milk); }
.pitch-book .slide:not(.ink):not(.dark) { background: var(--creme); }
.pitch-book .slide:not(.ink):not(.dark) .card:not(.on) { background: var(--milk); }
.pitch-site .slide > .col:first-of-type > .t-label:first-child::before { content: counter(slide, decimal-leading-zero) " · "; }
/* website / book: each shows only its own pieces */
.pitch-site .book-only, .pitch-book .site-only { display: none !important; }
.pitch-book .foot .src { text-transform: uppercase; } /* the book keeps its capitals */

/* ---------------------------------------------------------- ink slides: 1 (home), 3, 12, 20 */
.pitch-site .slide.ink { background: var(--night); color: var(--on-night); border-bottom-color: var(--night-line); }
.pitch-site .ink :is(.t-display, .t-h1, .t-h3, .t-text, b) { color: var(--on-night); }
.pitch-site .ink .t-small { color: var(--on-night-soft); }
.pitch-site .ink .t-label { color: var(--cobalt-night); }
.pitch-site .ink .t-label.muted { color: var(--on-night-soft); }
.pitch-site .ink .foot .src { color: var(--on-night-soft); }
.pitch-site .ink .ruled { border-top-color: var(--night-line); }
/* cards on night: the night hairline, no fill; the hover and the selected card raise to night-raised, the selected one with the cobalt-night rule on top */
.pitch-site .ink .card { background: transparent; border-color: var(--night-line); }
.pitch-site .ink .card.on { background: var(--night-raised); border-color: var(--night-raised); box-shadow: inset 0 2px 0 var(--cobalt-night); }
.pitch-site .ink .card .t-figure { color: var(--on-night); }
@media (hover: hover) {
  .pitch-site .ink .card:hover { background: var(--night-raised); }
}

/* ---------------------------------------------------------- slide 1 · the home page (A · Evening) */
.pitch-site #cover { --sgap: 12px; padding: 32px 64px 56px; justify-content: center; overflow: hidden; }
.pitch-site #cover::before, .pitch-site #cover::after { display: none; }
.pitch-site #cover { z-index: 0; } /* its own layer: the photo and shade sit behind the text, the bottom line anchors to the slide */
.pitch-site #cover > :not(.hero-photo):not(.hero-shade) { width: min(620px, 100%); }
.pitch-site :is(.hero-photo, .hero-shade) { z-index: -1; }
.pitch-site .hero-photo { position: absolute; top: 0; right: 0; width: 66%; height: 100%; object-fit: cover; object-position: 58% 42%; }
/* photo fade: the home photo into the night ground, where the text sits (overridden by the STEP-19 rule below) */
.pitch-site .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, var(--night) 40%, rgba(var(--night-rgb), .86) 51%, rgba(var(--night-rgb), .3) 66%, rgba(var(--night-rgb), 0) 80%), linear-gradient(0deg, rgba(var(--night-rgb), .7) 0%, rgba(var(--night-rgb), 0) 22%); }
.pitch-site #cover div.w-640 { align-items: flex-start; gap: 12px; }
.pitch-site .hero-logo { height: clamp(52px, 11.5vh, 68px); width: auto; display: block; margin-bottom: 4px; }
.pitch-site #cover .t-label { color: var(--cobalt-night); }
.pitch-site #cover .t-display { font-size: clamp(34px, min(2.2rem + 1.4vw, 7.4vh), 56px); width: min(640px, 50vw); max-width: none; color: var(--on-night); } /* STEP-42: the tagline on three lines */
.pitch-site #cover .col.gap-12 { gap: 12px; }
.pitch-site #cover .hand { font: italic 400 22px/1.4 var(--sans); color: var(--cobalt-night); max-width: none; transform: none; }
.pitch-site #cover .t-text { font-size: 17px; line-height: 1.5; color: var(--on-night-soft); max-width: 56ch; text-wrap: balance; }
.pitch-site .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* the buttons on night (STEP-120): the primary a cobalt pill with milk text, the secondary a milk-at-20 % line; both hover flat */
.pitch-site .btn { font: 600 15px/1 var(--sans); padding: 14px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color var(--flat), border-color var(--flat); }
.pitch-site .btn svg { width: 12px; height: 12px; }
.pitch-site .btn-bone { background: var(--cobalt); color: var(--milk); }
.pitch-site .btn-ghost { background: transparent; border-color: rgba(var(--milk-rgb), .2); color: var(--on-night); }
.pitch-site .btn:focus-visible { outline: 2px solid var(--cobalt-night); outline-offset: 3px; }
@media (hover: hover) { .pitch-site .btn-bone:hover { background: var(--cobalt-hover); } .pitch-site .btn-ghost:hover { background: var(--night-raised); border-color: rgba(var(--milk-rgb), .35); } }
/* STEP-98: "See it in the demo" at the right end of a product slide's label line: it takes no height, so no slide grows. A secondary button: hairline, hover cappuccino.
   STEP-121: the same shape for slide 17's link to the waiting-list page (.to-page, an <a> that opens it in a new tab) */
.pitch-site .slide > .col:first-of-type { position: relative; }
.pitch-site :is(.to-demo, .to-page) { position: absolute; top: -6px; right: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--flat); }
.pitch-site :is(.to-demo, .to-page) svg { width: 10px; height: 10px; color: var(--cobalt); }
@media (hover: hover) { .pitch-site :is(.to-demo, .to-page):hover { background: var(--capp); } }
.pitch-site :is(.to-demo, .to-page):focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
@media (max-width: 720px) { .pitch-site :is(.to-demo, .to-page) { position: static; align-self: flex-start; order: 9; } }
.pitch-site .closing-btns { margin-top: 20px; }
/* the bottom line: round and date left, the founders right */
.pitch-site #cover > .t-label:first-of-type, .pitch-site #cover .hero-names { position: absolute !important; bottom: 18px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-soft) !important; width: auto !important; }
.pitch-site #cover > .t-label:first-of-type { left: 64px; }
.pitch-site #cover .hero-names { right: 64px; }
.pitch-site #cover > .foot { display: none; }

/* ---------------------------------------------------------- slide 5: the picture with the price under it, the list beside */
.pitch-site #whatitis > .row { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; }
.pitch-site .s5-left { display: flex; flex-direction: column; gap: 14px; }
.pitch-site .s5-photo { width: 100%; height: 236px; object-fit: cover; object-position: 46% 48%; border-radius: 14px; display: block; } /* STEP-164: the new wrist photo, the watch and the finger in frame */
.pitch-site .s5-price { color: var(--ink); }
.pitch-site #whatitis .ruled.row { padding: 12px 0; }



@media (max-width: 720px) {
  .pitch-site #cover { padding: 40px var(--gutter) 40px; min-height: 0; }
  .pitch-site #cover > .t-label:first-of-type, .pitch-site #cover .hero-names { position: static !important; }
  .pitch-site .hero-photo { width: 100%; opacity: .35; }
  .pitch-site #cover .t-display { font-size: 30px; width: auto; }
  .pitch-site #whatitis > .row { display: flex; flex-direction: column; }
}
@media (max-width: 380px) { .pitch-site #cover .t-display { font-size: 27px; } } /* STEP-61: "A friend and a compass" stays one line on a 360 px phone */

/* STEP-20 — the wrist photo: the watch and her whole hand stay in the frame */
:is(.pitch-site, .pitch-book, .plan-site, .plan-book) img.wrist { object-position: 46% 48%; }
:is(.pitch-site, .pitch-book) img[src*="roses-hands"] { object-position: 55% 50%; } /* STEP-195 §1: the close crop, framed on the hands: its dial is 56 % across, 52 % down */

/* ========================================================== STEP-19 · real design on the website (the book and the PDFs stay as they are) */
/* 1 · the home: the new photo covers the whole screen; the shade only where the text sits, so her face, the cup and the watch stay clear */
.pitch-site #cover .hero-photo { width: 100%; object-position: 72% 40%; }
/* photo fade: the home photo into the night ground, left and bottom */
.pitch-site #cover .hero-shade { background: linear-gradient(90deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), .8) 30%, rgba(var(--night-rgb), .4) 44%, rgba(var(--night-rgb), 0) 56%), linear-gradient(0deg, rgba(var(--night-rgb), .75) 0%, rgba(var(--night-rgb), 0) 20%); }
.pitch-site #cover > :not(.hero-photo):not(.hero-shade) { width: min(540px, 44vw); }

/* 2 · one colour in steps: a sequence goes from light to deep, fill only */
/* the boxes of a sequence: see STEP-25 at the end of this file */

/* 3 · the key sentence of a slide, as a quote */
.pitch-site .quote { position: relative; padding-left: 56px; max-width: calc(46ch + 56px); font: 500 clamp(20px, 1rem + .5vw, 24px)/1.4 var(--title); font-stretch: 100%; letter-spacing: -.005em; color: var(--ink); }
.pitch-site .quote::before { content: "\201C"; position: absolute; left: -4px; top: -.1em; font: 600 88px/1 var(--title); color: var(--quote); }
.pitch-site .quote b { font-weight: inherit; }
.pitch-site .ink .quote { color: var(--on-night); }
.pitch-site .ink .quote::before { color: var(--night-line); }

/* 4 · icons: Lucide, stroke 1.5, 28 px, cobalt (cobalt-night on night) */
.pitch-site .icon { display: block; flex: none; width: 28px; height: 28px; color: var(--icon); }
.pitch-site .ink .icon { color: var(--cobalt-night); }
.pitch-site .with-icon { display: flex; gap: 12px; align-items: flex-start; }
.pitch-site .with-icon > .icon { margin-top: -1px; }
.pitch-site .with-icon > span::first-letter { text-transform: uppercase; }

/* 5 · the closing slide (website only) */
.pitch-site #closing { z-index: 0; overflow: hidden; padding-left: 64px; padding-right: 64px; border-bottom: 0; }
.pitch-site #closing .closing-photo { width: 100%; object-position: 50% 52%; }
/* photo fade: the closing photo into the night ground, where the text sits */
.pitch-site #closing .closing-shade { background: linear-gradient(90deg, rgba(var(--night-rgb), .86) 0%, rgba(var(--night-rgb), .66) 22%, rgba(var(--night-rgb), .2) 36%, rgba(var(--night-rgb), 0) 46%); }
.pitch-site .closing-text { width: min(420px, 31vw); gap: 16px; }
.pitch-site #closing .t-display { font-size: clamp(34px, min(1.4rem + 1.9vw, 7.4vh), 60px); color: var(--on-night); }
.pitch-site #closing .t-lead { color: var(--on-night); }
.pitch-site .closing-logo { height: 34px; width: auto; align-self: flex-start; display: block; margin-top: 12px; }
/* STEP-41 / STEP-43: slide 02's question comes back above the answer, in handwriting (cobalt-night, as on the home page) */
.pitch-site #closing .echo { font: 500 13px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt-night); margin-bottom: 4px; } /* STEP-175 §3: a mono eyebrow */

@media (max-width: 720px) {
  .pitch-site #cover > :not(.hero-photo):not(.hero-shade) { width: 100%; }
  .pitch-site .quote { padding-left: 44px; }
  .pitch-site .quote::before { font-size: 68px; }
  .pitch-site #closing { justify-content: flex-end; padding: 48px var(--gutter); min-height: 0; }
  .pitch-site #closing .closing-photo { object-position: 75% 30%; }
  .pitch-site #closing .closing-shade { background: linear-gradient(0deg, rgba(var(--night-rgb), .92) 0%, rgba(var(--night-rgb), .7) 38%, rgba(var(--night-rgb), 0) 62%); } /* photo fade, from below */
  .pitch-site .closing-text { width: 100%; padding-top: 320px; }
}

/* the business plan's cover takes the new photo on the website; the book keeps its own */
.plan-site .book-only, .plan-book .site-only { display: none !important; }
.plan-site .cover-photo { object-position: 85% 35%; }
.pitch-site :is(.row, .grid-4):has(> .card.tone) { align-items: stretch; } /* the boxes of a sequence stand level */

/* ========================================================== STEP-21 · slides that explain themselves (website only) */
.pitch-site #map > .col .t-label:first-child::before { content: counter(slide, decimal-leading-zero) " · "; }
.pitch-site .slide > .col:first-of-type > .t-lead { margin-top: 4px; max-width: 62ch; }
.pitch-site .slide > .t-lead { max-width: 62ch; }

/* slide 14 · the three things, and the marks */
.pitch-site .crit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pitch-site .crit li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--hair); padding-top: 14px; }
.pitch-site .crit .crit-n { color: var(--cobalt); margin-right: 10px; }
.pitch-site #competition table.comp { width: 100%; border-collapse: collapse; font: 400 var(--small)/1.4 var(--sans); color: var(--ink); }
.pitch-site #competition table.comp :is(th, td) { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.pitch-site #competition table.comp tr:first-child th { font: 600 var(--small)/1.3 var(--sans); padding-top: 4px; }
.pitch-site #competition table.comp th[scope="row"] { font-weight: 500; color: var(--soft); width: 18%; padding-left: 0; }
/* the AVA column: cappuccino, the 2 px cobalt rule on top of its head, AVA's name in cobalt (STEP-120) */
.pitch-site #competition table.comp :is(th, td):nth-child(2) { background: var(--capp); }
.pitch-site #competition table.comp th.ava { color: var(--cobalt); box-shadow: inset 0 2px 0 var(--cobalt); }
.pitch-site #competition table.comp .crit-row th { color: var(--ink); }
.pitch-site #competition table.comp .mark { display: block; }
.pitch-site #competition table.comp .mark-icon { width: 28px; height: 28px; display: block; }
.pitch-site #competition table.comp .mark.yes { color: var(--cobalt); }
.pitch-site #competition table.comp .mark.part { color: var(--soft); }
.pitch-site #competition table.comp .mark.no { color: var(--muted); }
.pitch-site #competition table.comp td .t-small { font-size: 14px; line-height: 1.35; color: var(--soft); margin-top: 4px; }

/* slide 16 · three tiers that look different */
.pitch-site .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 10px; }
.pitch-site .tier { gap: 6px; position: relative; }
.pitch-site .tier .t-figure { font-size: var(--figure-card); line-height: 1; margin-top: 4px; }
.pitch-site .tier-main { box-shadow: inset 0 2px 0 var(--cobalt); } /* the selected tier: the cobalt rule on top (STEP-120) */
.pitch-site .tier .badge { position: absolute; top: -11px; right: 20px; background: var(--cobalt); color: var(--milk) !important; padding: 4px 10px; border-radius: 999px; font-size: 11px; z-index: 1; }
.pitch-site .minutes { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.pitch-site .minutes .meter { height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), .12); }
.pitch-site .minutes .meter span { display: block; height: 100%; border-radius: 3px; background: var(--cobalt); }
.pitch-site .checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 400 var(--small)/1.4 var(--sans); }
.pitch-site .checks li { display: flex; gap: 8px; align-items: flex-start; }
.pitch-site .checks .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--cobalt); }
.pitch-site .model-foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 40px; align-items: center; }
.pitch-site .keyfig { display: flex; flex-direction: column; gap: 2px; }
.pitch-site .keyfig .t-figure { font-size: var(--figure-card); line-height: 1.05; }
.pitch-site .keyfig .t-small { max-width: 22ch; }
.pitch-site .model-foot .quote { max-width: none; }
.pitch-site .model-note { color: var(--soft); max-width: 90ch; }

/* slide 17 · to the point: three cards, then the road */
.pitch-site .gtm-cards { gap: 20px; }
.pitch-site .gtm-cards .card { gap: 10px; }
.pitch-site .timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.pitch-site .timeline::before { content: ""; position: absolute; left: 6px; right: 12%; top: 6px; height: 2px; background: var(--step-4); }
.pitch-site .timeline li { position: relative; padding-top: 24px; display: flex; flex-direction: column; gap: 4px; }
.pitch-site .timeline li::before { content: ""; position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; box-sizing: content-box; border: 4px solid var(--milk); border-radius: 50%; background: var(--cobalt); } /* the milk ring parts the dot from the line */

@media (max-width: 720px) {
  .pitch-site .crit, .pitch-site .tiers, .pitch-site .model-foot, .pitch-site .timeline { grid-template-columns: minmax(0, 1fr); }
  .pitch-site .timeline::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .pitch-site .timeline li { padding: 0 0 0 28px; }
}

.pitch-site .ink .t-lead { color: var(--on-night-soft); }
.pitch-site #gtm .gtm-cards, .pitch-site #marketing .gtm-cards { align-items: stretch; } /* STEP-36: the three boxes the same height (the id beats the row rule at line 295) */
@media (max-width: 720px) { .pitch-site #competition table.comp { min-width: 760px; } .pitch-site #competition table.comp th[scope="row"] { width: 120px; } }

/* ========================================================== STEP-25 → STEP-120 · the boxes of a sequence: one colour in four steps, light to deep, espresso text (website only)
   No border, no shadow, no grain. The hover is flat: one step deeper, the deepest stays. On a night slide (the ask) the four steps are milk washes */
.pitch-site .slide .card.tone { border: 0; background: var(--step-1); color: var(--ink); }
.pitch-site .slide .card.tone-2 { background: var(--step-2); }
.pitch-site .slide .card.tone-3 { background: var(--step-3); }
.pitch-site .slide .card.tone-4 { background: var(--step-4); }
.pitch-site .slide .card.tone :is(.t-h3, .t-figure, .t-text, b) { color: var(--ink); }
.pitch-site .slide .card.tone :is(.t-small, .checks, .t-label) { color: var(--soft); } /* mocha: 4.7:1 on the deepest step, where cinnamon and cobalt would fall under 4.5 */
.pitch-site .slide .card.tone .icon { color: var(--cobalt); }
.pitch-site .slide .card.tone > .t-small:last-child { border-top-color: rgba(var(--ink-rgb), .16); }
@media (hover: hover) {
  .pitch-site .slide .card.tone:hover { background: var(--step-2); }
  .pitch-site .slide .card.tone-2:hover { background: var(--step-3); }
  .pitch-site .slide .card.tone-3:hover, .pitch-site .slide .card.tone-4:hover { background: var(--step-4); }
}
/* on night: milk at 5, 8, 11 and 14 % (on-night-soft stays ≥ 4.5:1 on the deepest), labels and icons cobalt-night */
.pitch-site .ink .card.tone { background: rgba(var(--milk-rgb), .05); }
.pitch-site .ink .card.tone-2 { background: rgba(var(--milk-rgb), .08); }
.pitch-site .ink .card.tone-3 { background: rgba(var(--milk-rgb), .11); }
.pitch-site .ink .card.tone-4 { background: rgba(var(--milk-rgb), .14); }
.pitch-site .ink .card.tone :is(.t-h3, .t-figure, .t-text, b) { color: var(--on-night); }
.pitch-site .ink .card.tone :is(.t-small, .checks) { color: var(--on-night-soft); }
.pitch-site .ink .card.tone :is(.t-label, .icon) { color: var(--cobalt-night); }
.pitch-site .ink .card.tone > .t-small:last-child { border-top-color: rgba(var(--milk-rgb), .16); color: var(--on-night); }
.pitch-site .ink .card.tone > .t-small:last-child span { color: var(--cobalt-night); }
@media (hover: hover) {
  .pitch-site .ink .card.tone:hover { background: rgba(var(--milk-rgb), .08); }
  .pitch-site .ink .card.tone-2:hover { background: rgba(var(--milk-rgb), .11); }
  .pitch-site .ink .card.tone-3:hover, .pitch-site .ink .card.tone-4:hover { background: rgba(var(--milk-rgb), .14); }
}

/* ---------------------------------------------------------- STEP-43 */
/* slide 06: the AVA arrow between the four boxes (app.js draws it), flat on a computer, pointing down when the boxes stack */
.pitch-site #howitworks .row > div.drawn { position: relative; width: 52px; height: 30px; }
.pitch-site #howitworks .row > div.drawn > .arrow { display: none; }
/* the arrow draws itself from its tail: a clip that opens (STEP-120: a clip in place of the soft mask; the 4 px margin keeps the head's stroke whole) */
.pitch-site #howitworks .box-arrow { position: absolute; left: 0; top: 0; overflow: visible; clip-path: inset(-4px 100% -4px -4px); }
.pitch-site #howitworks .box-arrow.down { clip-path: inset(-4px -4px 100% -4px); }
.pitch-site #howitworks.on .box-arrow { clip-path: inset(-4px); transition: clip-path .7s cubic-bezier(.45, .05, .25, 1) calc(.3s + var(--i, 0) * .35s); }
.pitch-site #howitworks .box-arrow .body { fill: var(--cobalt); }
.pitch-site #howitworks .box-arrow .head { fill: none; stroke: var(--cobalt); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .pitch-site #howitworks .row > div.drawn { width: 30px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pitch-site #howitworks .box-arrow { clip-path: none; } }
/* the book view and the PDF: the same arrow, fully drawn, in place of the old grey one */
.pitch-book [data-id="howitworks"] .drawn > .arrow { display: none; }
.pitch-book [data-id="howitworks"] .box-arrow { width: 64px; height: auto; overflow: visible; }
.pitch-book [data-id="howitworks"] .box-arrow .body { fill: var(--icon); }
.pitch-book [data-id="howitworks"] .box-arrow .head { fill: none; stroke: var(--icon); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the AVA highlights (slide 13's column, slide 11's box) are set above: cappuccino or night-raised with the cobalt rule on top, and no hover of their own (STEP-120) */
/* slide 16: the timeline fills in (only once app.js has armed it; without the script it shows filled): the line draws, each dot turns from step-3 to cobalt */
.pitch-site .timeline.armed::before { transform-origin: 0 50%; transform: scaleX(0); }
.pitch-site .timeline.armed.on::before { transform: none; transition: transform 1.6s cubic-bezier(.45, .05, .25, 1) .2s; }
.pitch-site .timeline.armed li::before { background: var(--step-3); transition: background-color .3s ease; }
.pitch-site .timeline.armed.on li::before { background: var(--cobalt); }
.pitch-site .timeline.armed.on li:nth-child(1)::before { transition-delay: .2s; }
.pitch-site .timeline.armed.on li:nth-child(2)::before { transition-delay: .95s; }
.pitch-site .timeline.armed.on li:nth-child(3)::before { transition-delay: 1.7s; }
@media (max-width: 720px) { .pitch-site .timeline.armed::before { transform-origin: 50% 0; transform: scaleY(0); } .pitch-site .timeline.armed.on::before { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pitch-site .timeline.armed::before { transform: none; } .pitch-site .timeline.armed li::before { background: var(--cobalt); } }

/* ---------------------------------------------------------- STEP-48: the Overview's cover and closing in the book and the PDF
   The website's look (the photo, the night shade, light type), set at the book's own scale: 128 px gutters, as on every page */
.pitch-book :is([data-id="cover"], [data-id="closing"]) { z-index: 0; background: var(--night); color: var(--on-night); padding: 0 128px; justify-content: center; gap: 0; }
.pitch-book :is([data-id="cover"], [data-id="closing"]) .hero-photo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; z-index: -1; }
.pitch-book :is([data-id="cover"], [data-id="closing"]) .hero-shade { position: absolute; inset: 0; z-index: -1; }
.pitch-book [data-id="cover"] .hero-photo { object-position: 72% 40%; }
/* photo fade: the cover photo into the night ground, left and bottom */
.pitch-book [data-id="cover"] .hero-shade { background: linear-gradient(90deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), .8) 30%, rgba(var(--night-rgb), .4) 44%, rgba(var(--night-rgb), 0) 56%), linear-gradient(0deg, rgba(var(--night-rgb), .75) 0%, rgba(var(--night-rgb), 0) 20%); }
.pitch-book [data-id="cover"] .wave, .pitch-book [data-id="cover"] .grow { display: none; }
.pitch-book [data-id="cover"] div.w-640 { width: auto; align-items: flex-start; gap: 18px; }
.pitch-book [data-id="cover"] .hero-logo { height: 88px; width: auto; display: block; margin-bottom: 2px; }
.pitch-book [data-id="cover"] div.w-640 .t-label { font: 500 17px/1.4 "Geist Mono", monospace; letter-spacing: .14em; color: var(--cobalt-night); text-align: left; }
.pitch-book [data-id="cover"] .col.gap-12 { gap: 18px; margin-top: 30px; }
.pitch-book [data-id="cover"] .t-display { font: 600 72px/1.04 "Mona Sans", Arial, sans-serif; font-stretch: 106%; letter-spacing: -.025em; width: 830px; color: var(--on-night); text-wrap: balance; } /* three lines, as on the home page */
.pitch-book [data-id="cover"] .hand { font: italic 400 25px/1.35 var(--sans); color: var(--cobalt-night); width: 820px; transform: none; } /* the italic is wider than the old script: a little smaller, so it stays on two lines and clear of the photo */
.pitch-book [data-id="cover"] .t-text { font-size: 23px; line-height: 1.5; color: var(--on-night-soft); width: 620px; }
.pitch-book [data-id="cover"] > .t-label:first-of-type, .pitch-book [data-id="cover"] .hero-names { position: absolute; bottom: 56px; width: auto; font: 500 17px/1.4 "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-soft); }
.pitch-book [data-id="cover"] > .t-label:first-of-type { left: 128px; }
.pitch-book [data-id="cover"] .hero-names { right: 128px; }
.pitch-book [data-id="cover"] .hero-names { left: 128px; right: auto; bottom: 92px; } /* STEP-175: a line above the seed-round line, which it ran into */
.pitch-book [data-id="closing"] .hero-photo { object-position: 50% 52%; }
/* photo fade: the closing photo into the night ground, where the text sits */
.pitch-book [data-id="closing"] .hero-shade { background: linear-gradient(90deg, rgba(var(--night-rgb), .86) 0%, rgba(var(--night-rgb), .66) 22%, rgba(var(--night-rgb), .2) 36%, rgba(var(--night-rgb), 0) 46%); }
.pitch-book [data-id="closing"] .closing-text { width: 600px; gap: 22px; }
.pitch-book [data-id="closing"] .echo { font: 500 22px/1.3 "Geist Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt-night); margin-bottom: 8px; }
.pitch-book [data-id="closing"] .t-display { font: 600 78px/1.04 "Mona Sans", Arial, sans-serif; font-stretch: 106%; letter-spacing: -.025em; color: var(--on-night); }
.pitch-book [data-id="closing"] .t-lead { font-size: 28px; line-height: 1.5; color: var(--on-night); }
.pitch-book [data-id="closing"] .closing-logo { height: 44px; width: auto; align-self: flex-start; display: block; margin-top: 14px; }
/* the film page: on screen a click plays it; in the PDF the picture links to the film on the site */
body:not(.print) .print-only, body.print .screen-only { display: none; }
.print-link { position: absolute; inset: 0; z-index: 5; }

/* ========================================================== STEP-163: "The watch", its features on its own screen */
:is(.pitch-site, .pitch-book) :is(#watchface, [data-id="watchface"]) { background: radial-gradient(55% 60% at 50% 62%, #3A5068 0%, #22334A 38%, #152232 70%, #0D1621 100%); color: var(--on-night); }
.pitch-book :is(#watchface, [data-id="watchface"]) { padding: 92px 96px 140px; } /* STEP-166: the stage fills the content width, 1728 px */
.pitch-book :is(#watchface, [data-id="watchface"]) :is(.t-h1, b) { color: var(--on-night); }
.pitch-book :is(#watchface, [data-id="watchface"]) :is(.t-lead, .t-small) { color: var(--on-night-soft); }
.pitch-book :is(#watchface, [data-id="watchface"]) .t-label { color: var(--cobalt-night); }
.pitch-book :is(#watchface, [data-id="watchface"]) .foot p { color: var(--on-night-soft); }
.pitch-book :is(#watchface, [data-id="watchface"]) .wave { display: none; }
:is(#watchface, [data-id="watchface"]) .wf-stage { position: relative; margin: 0 auto; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-stage { width: 1600px; }
.pitch-site :is(#watchface, [data-id="watchface"]) .wf-stage { width: min(100%, calc((var(--screen, 100dvh) - 320px) * 2.88)); } /* the slide stays one screen tall */
:is(#watchface, [data-id="watchface"]) .wf-svg { position: relative; z-index: 3; display: block; width: 100%; height: auto; overflow: visible; }
:is(#watchface, [data-id="watchface"]) .wf-box { position: absolute; left: 29.17%; top: 0; width: 41.67%; aspect-ratio: 1; z-index: 2; } /* STEP-181 §9: 760 of the stage's 1824 × 760 */
/* STEP-189 §0: the book and the PDF: the photo of the real watch, its heart-rate screen painted on (assets/content/watch-photo-heart.webp,
   made from assets/landing/watch-end.webp and watch-slide.js paint()), the whole frame inside the box, so the straps stay clear of the note */
:is(#watchface, [data-id="watchface"]) .wf-box .watch-photo { left: 0; top: 0; width: 100%; }
:is(#watchface, [data-id="watchface"]) .wf-halo { position: absolute; left: 50%; top: 51%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(136, 189, 232, .22), rgba(136, 189, 232, .06) 60%, transparent); z-index: -1; }
.pitch-site :is(#watchface, [data-id="watchface"]) .wf-halo { animation: wf-breathe 5s ease-in-out infinite; }
@keyframes wf-breathe { 50% { opacity: .6; transform: translate(-50%, -50%) scale(1.06); } }
:is(#watchface, [data-id="watchface"]) .wf-floor { position: absolute; left: 50%; bottom: 0; width: 34%; height: 9%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); z-index: 1; filter: blur(6px); }
:is(#watchface, [data-id="watchface"]) .co { opacity: 0; transition: opacity .5s; }
:is(#watchface, [data-id="watchface"]) .co.on { opacity: .45; }
:is(#watchface, [data-id="watchface"]) .co.now, .pitch-book :is(#watchface, [data-id="watchface"]) .co.on, :is(#watchface, [data-id="watchface"]).wf-all .co.on { opacity: 1; }
:is(#watchface, [data-id="watchface"]) .co path { fill: none; stroke: #88BDE8; stroke-width: 1.3; }
:is(#watchface, [data-id="watchface"]) .co .dot { fill: #88BDE8; }
:is(#watchface, [data-id="watchface"]) .co .pulse { fill: none; stroke: #88BDE8; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.pitch-site :is(#watchface, [data-id="watchface"]) .co.now .pulse { animation: wf-ping 2.4s ease-out infinite; }
/* STEP-174 §8 (Ivana, 23 Oct 19:44: "still far too small"): the watch about 60 % of the slide's height. The lead line gives way to
   it. Web: the turning watch, one large call-out at a time beside it (watch-slide.js, .wf-call), all ten cycling, the footnote in its
   own row at the bottom. Book and PDF: the still watch at the same size, on the heart-rate screen, the ten labels in two columns beside it */
:is(.pitch-site, .pitch-book) :is(#watchface, [data-id="watchface"]) .t-lead { display: none; }
.wf-call { display: none; }
/* STEP-178 §4 (Ivana: "the labels stay"): the draft-5 layout again (STEP-163): five labels left and five right on level lines, each
   ending on the watch's rim with a dot. Once written a label stays: the current one bright, its screen on the watch; the earlier ones
   dimmed; after one round all ten lit while the watch keeps cycling (watch-slide.js: .co.on, .co.now, .wf-all). The stage is wider than
   the text column (up to 1728 px) so the watch stays large, and short enough that title, watch, labels and spec strip fit one screen */
@media (min-width: 721px) {
  .pitch-site :is(#watchface, [data-id="watchface"]) { --sw: min(calc(100vw - 96px), 1824px, calc((var(--screen, 100dvh) - 340px) * 2.4)); } /* STEP-181 §9: the 1824 × 760 stage, the watch's box 760 of it: the watch about 60 % of the screen */
  .pitch-site :is(#watchface, [data-id="watchface"]) .wf-stage { width: var(--sw); margin: 0 0 0 calc(50% - var(--sw) / 2); }

}
@media (min-width: 721px) and (max-height: 680px) { .pitch-site :is(#watchface, [data-id="watchface"]) { --sw: min(calc(100vw - 96px), 1824px, calc((var(--screen, 100dvh) - 380px) * 2.4)); } } /* 1280 × 600: one screen too */
}
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-stage { width: 648px; height: 648px; margin: 0; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-svg, .pitch-book :is(#watchface, [data-id="watchface"]) .wf-floor { display: none; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-box { left: 0; top: 0; width: 648px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-list { display: grid; position: absolute; left: 816px; right: 96px; top: 262px; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-list li { padding: 14px 18px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-list .t-small { margin: 0; font-size: 21px; line-height: 1.35; color: #AEB9C6; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-list b { font-size: 26px; color: var(--on-night); }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-foot { position: absolute; left: 96px; right: 96px; bottom: 172px; } /* clear of the wave line (STEP-56) */
/* STEP-175 §7: the spec strip, as on the home: the case and the water and dust rating are the pilot watch's requirements */
:is(#watchface, [data-id="watchface"]) .wf-spec { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: rgba(136, 189, 232, .16); border: 1px solid rgba(136, 189, 232, .16); border-radius: 14px; overflow: hidden; }
:is(#watchface, [data-id="watchface"]) .wf-spec > div { padding: 10px 14px 12px; background: #101C29; display: grid; align-content: start; gap: 4px; }
:is(#watchface, [data-id="watchface"]) .wf-spec dt { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #88BDE8; }
:is(#watchface, [data-id="watchface"]) .wf-spec dd { margin: 0; display: grid; gap: 2px; }
:is(#watchface, [data-id="watchface"]) .wf-spec b { font: 300 26px/1 var(--title); color: #E8ECF1; }
:is(#watchface, [data-id="watchface"]) .wf-spec span { font-size: 13px; line-height: 1.3; color: #AEB9C6; }
.pitch-site :is(#watchface, [data-id="watchface"]) { --wf: min(calc(var(--screen, 100dvh) * .56), 46vw); }
@media (max-width: 720px) { .pitch-site :is(#watchface, [data-id="watchface"]) .wf-spec { grid-template-columns: 1fr 1fr; } }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-spec { position: absolute; left: 816px; right: 96px; top: 716px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-spec > div { padding: 12px 14px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-spec dt { font-size: 13px; white-space: nowrap; letter-spacing: .08em; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-spec b { font-size: 26px; white-space: nowrap; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-spec span { font-size: 14px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-list { top: 236px; gap: 10px 24px; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-list li { padding: 10px 16px; }
@keyframes wf-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
:is(#watchface, [data-id="watchface"]) .wf-t { fill: var(--on-night); }
:is(#watchface, [data-id="watchface"]) .wf-s { fill: #AEB9C6; }
:is(#watchface, [data-id="watchface"]) .wf-list { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
:is(#watchface, [data-id="watchface"]) .wf-list li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(136, 189, 232, .2); border-radius: 12px; padding: 10px 14px; }
:is(#watchface, [data-id="watchface"]) .wf-foot { text-align: center; text-wrap: balance; }
.pitch-site :is(#watchface, [data-id="watchface"]) .wf-foot { margin-top: -16px; } /* STEP-186 §2: the two-line timing note sits 16 px under the spec line, so the slide stays one screen */
@media (max-width: 720px) {
  .pitch-site :is(#watchface, [data-id="watchface"]) .co { display: none; }
  .pitch-site :is(#watchface, [data-id="watchface"]) .wf-list { display: grid; }
  .pitch-site :is(#watchface, [data-id="watchface"]) .wf-stage { width: 100%; aspect-ratio: 1; }
  .pitch-site :is(#watchface, [data-id="watchface"]) .wf-svg { visibility: hidden; height: 0; }
  .pitch-site :is(#watchface, [data-id="watchface"]) .wf-box { left: 8%; top: 0; width: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .pitch-site :is(#watchface, [data-id="watchface"]) .wf-halo, .pitch-site :is(#watchface, [data-id="watchface"]) .co.now .pulse { animation: none; }
  :is(#watchface, [data-id="watchface"]) .co { transition: none; }
}


/* STEP-165 §5: text-only blocks use the full width from 1100 px: two balanced columns, a paragraph never split */
.plan-site .two-col { max-width: 960px; }
.plan-site .two-col > * { max-width: none; }
@media (min-width: 1100px) {
  .plan-site .two-col { columns: 2; column-gap: 48px; }
  .plan-site .two-col > p { break-inside: avoid; margin-top: 0; }
  .plan-site .two-col > p.footnote { break-inside: auto; }
}
/* STEP-165 §5: a two-column block no longer leaves one column empty: its text flows through both, balanced, in reading order
   (each column's paragraphs, headings and tables kept whole; a heading stays with what follows it) */
@media (min-width: 1100px) {
  .plan-site .cols { display: block; columns: 2; column-gap: 48px; }
  .plan-site .cols > div { display: contents; }
  .plan-site .cols > div > * { break-inside: avoid; }
  .plan-site .cols > div > :is(h3, .index-pale, .eyebrow) { break-after: avoid; }
  .plan-site .cols > div > :first-child { margin-top: 0; }
  .plan-site .cols > div + div > :first-child:is(h3, .index-pale) { margin-top: 32px; }
}
.plan-site .two-col { margin-top: 24px; }

/* ========================================================== STEP-165 §6: AVA at a glance (#glance, and the one-page A4 PDF) */
.glance-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; overflow: auto; background: var(--creme); }
.glance-wrap[hidden] { display: none; }
.glance { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter, 24px) 56px; color: var(--ink); font-family: var(--sans); }
.glance h1 { margin: 6px 0 0; font: 600 clamp(24px, 1rem + 1.4vw, 34px)/1.15 var(--title); font-stretch: var(--wide); letter-spacing: -.015em; max-width: 34ch; text-wrap: balance; }
.glance h2 { margin: 28px 0 10px; font: 600 20px/1.2 var(--title); font-stretch: 106%; }
.glance h3 { margin: 0 0 6px; font: 600 15px/1.25 var(--title); }
.glance p, .glance li { font-size: 15px; line-height: 1.45; color: var(--ink); }
.gl-head { display: flex; gap: 24px; align-items: center; }
.gl-logo { width: 96px; height: auto; flex: none; }
.gl-eyebrow { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.gl-note, .gl-src, .gl-foot { color: var(--soft) !important; font-size: 13px !important; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.gl-group { background: var(--milk); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; }
.gl-group table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gl-group th { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-align: left; padding: 0 0 6px; }
.gl-group td { padding: 5px 0; border-top: 1px solid var(--hair); vertical-align: top; color: var(--ink); }
.gl-group .m { width: 56px; text-align: center; color: var(--soft); }
.gl-group .when { width: 96px; text-align: right; color: var(--soft); font-size: 12.5px; }
.gl-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 40px; }
.gl-two ul { margin: 6px 0 8px; padding-left: 18px; }
.gl-two li { margin: 3px 0; }
.gl-price { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--hair); }
/* the one A4 page (dev/export-pdf.mjs, /book?print=glance) */
.glance-print .glance { width: 210mm; height: 297mm; max-width: none; padding: 12mm 13mm 10mm; overflow: hidden; background: var(--creme); }
.glance-print .glance h1 { font-size: 21px; }
.glance-print .glance h2 { font-size: 15px; margin: 12px 0 6px; }
.glance-print .glance h3 { font-size: 11.5px; }
.glance-print .glance p, .glance-print .glance li { font-size: 10.5px; line-height: 1.38; }
.glance-print .gl-logo { width: 64px; }
.glance-print .gl-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.glance-print .gl-group { padding: 7px 9px; border-radius: 8px; }
.glance-print .gl-group table { font-size: 9px; }
.glance-print .gl-group th { font-size: 7.5px; padding-bottom: 3px; }
.glance-print .gl-group td { padding: 2.5px 0; }
.glance-print .gl-group .m { width: 28px; }
.glance-print .gl-group .when { width: 54px; font-size: 8.5px; }
.glance-print .gl-two { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.glance-print .gl-note, .glance-print .gl-src, .glance-print .gl-foot { font-size: 9px !important; }
.glance-print .gl-price { margin-top: 10px; padding-top: 7px; }
/* STEP-165 §2: the guidance line and its source on the cover, kept small so the cover still fits one screen */
#cover .cover-src, [data-id="cover"] .cover-src { display: block; margin-top: 6px; opacity: .85; }
.pitch-site #cover .cover-src { font-size: 12px; }
@media (max-height: 800px) and (min-width: 721px) { .pitch-site #cover .hand { font-size: 18px; line-height: 1.35; } .pitch-site #cover .t-display { font-size: clamp(30px, 6.6vh, 50px); } .pitch-site #cover .cover-src { display: none; } } /* short laptops: the source line stays in the book, the PDF and the plan */
.pitch-book .fs-18 { font-size: 18px; }

.pitch-book .w-1700{width:1700px;max-width:100%}

/* ---------------------------------------------------------- STEP-167 §1: the Overview's two photo slides (#family, #evening)
   The photo full-bleed, a soft night gradient from its free side, one short white line there; on a phone the photo (45vh) and the
   line under it. In the book and the PDF the same, at the book's scale */
.pitch-site .pbreak { z-index: 0; overflow: hidden; justify-content: center; align-items: flex-start; }
.pitch-site .pbreak .hero-photo { width: 100%; object-position: var(--pos, 50% 50%); }
.pitch-site .pbreak .hero-shade { background: linear-gradient(90deg, rgba(var(--night-rgb), .62) 0%, rgba(var(--night-rgb), .4) 28%, rgba(var(--night-rgb), 0) 58%), linear-gradient(0deg, rgba(var(--night-rgb), .55) 0%, rgba(var(--night-rgb), 0) 18%); }
.pitch-site .pbreak.pb-r .hero-shade { background: linear-gradient(270deg, rgba(var(--night-rgb), .62) 0%, rgba(var(--night-rgb), .4) 28%, rgba(var(--night-rgb), 0) 58%), linear-gradient(0deg, rgba(var(--night-rgb), .55) 0%, rgba(var(--night-rgb), 0) 18%); }
.pitch-site .pbreak .pb-line { margin: 0; width: min(560px, 40vw); font: 600 clamp(32px, 1rem + 1.8vw, 52px)/1.1 var(--title); font-stretch: 106%; letter-spacing: -.015em; color: #fff; text-wrap: balance; text-shadow: 0 1px 24px rgba(0, 0, 0, .45); }
.pitch-site .pbreak.pb-r .pb-line { align-self: flex-end; text-align: right; }
/* STEP-183 §11 (Ivana, 22:36): on a phone the photo fills the slide's full height (cropped to keep the person: --ppos), the line over
   the soft dark fade at its foot, as on a laptop; no empty band. The giant word is left out on a phone (§1) */
@media (max-width: 720px) {
  .pitch-site .pbreak { padding: 0 0 28px; justify-content: flex-end; }
  .pitch-site .pbreak .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ppos, var(--pos, 50% 50%)); opacity: 1; z-index: -1; transform: none !important; }
  .pitch-site .pbreak .hero-shade, .pitch-site .pbreak.pb-r .hero-shade { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--night-rgb), .94) 0%, rgba(var(--night-rgb), .72) 30%, rgba(var(--night-rgb), 0) 58%); }
  .pitch-site .pbreak .pb-line, .pitch-site .pbreak.pb-r .pb-line { align-self: stretch; width: auto; padding: 0 var(--gutter); text-align: left; font-size: 28px; text-shadow: 0 1px 18px rgba(0, 0, 0, .4); }
  .pitch-site .pbreak > .foot { padding: 0 var(--gutter); }
}
.pitch-book .pbreak { z-index: 0; background: var(--night); color: var(--on-night); padding: 0 128px; justify-content: center; }
.pitch-book .pbreak .hero-photo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -1; }
.pitch-book .pbreak .hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--night-rgb), .62) 0%, rgba(var(--night-rgb), .4) 28%, rgba(var(--night-rgb), 0) 58%), linear-gradient(0deg, rgba(var(--night-rgb), .55) 0%, rgba(var(--night-rgb), 0) 18%); }
.pitch-book .pbreak.pb-r .hero-shade { background: linear-gradient(270deg, rgba(var(--night-rgb), .62) 0%, rgba(var(--night-rgb), .4) 28%, rgba(var(--night-rgb), 0) 58%), linear-gradient(0deg, rgba(var(--night-rgb), .55) 0%, rgba(var(--night-rgb), 0) 18%); }
.pitch-book .pbreak .pb-line { margin: 0; width: 760px; font: 600 72px/1.08 "Mona Sans", Arial, sans-serif; font-stretch: 106%; letter-spacing: -.02em; color: #fff; text-wrap: balance; text-shadow: 0 2px 32px rgba(0, 0, 0, .45); }
.pitch-book .pbreak.pb-r .pb-line { align-self: flex-end; text-align: right; }
.pitch-book .pbreak .foot .src, .pitch-book .pbreak .foot .num { color: var(--on-night-soft); }

/* STEP-167 §1: the plan's three part openers (before ch 08, 09 and 15): a wide photo at the top of the part; in the book and the PDF,
   a half-page photo at the top of the part's first sheet */
.plan-site .part > .opener { display: block; max-width: 960px; width: 100%; height: clamp(300px, 50vh, 520px); object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 14px; margin: 0 0 40px; }
@media (max-width: 599px) { .plan-site .part > .opener { height: 45vh; min-height: 240px; } }
.plan-book .opener { display: block; width: 174mm; height: 120mm; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 3mm; margin: 0 0 7mm; }

/* STEP-167 §2: the website's cover in the home's look: the neuron field faint behind it, the AVA head (black ground, screened onto
   the night) as its image instead of the photo, which the book and the PDF keep */
.pitch-site #cover .hero-photo { display: none; }
.pitch-site #cover .cover-field { position: absolute; inset: 0; z-index: -2; background: url("assets/landing/neuron-field.webp") center 30% / cover no-repeat; opacity: .16; pointer-events: none; }
.pitch-site #cover .cover-head { position: absolute; z-index: -1; right: 4%; top: 50%; transform: translateY(-50%); height: min(86%, 760px); width: auto; aspect-ratio: 1; mix-blend-mode: screen; opacity: .9; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.pitch-site #cover .hero-shade { background: linear-gradient(0deg, rgba(var(--night-rgb), .6) 0%, rgba(var(--night-rgb), 0) 20%); }
@media (max-width: 720px) { .pitch-site #cover .cover-head { display: none; } } /* on a phone the words fill the screen: the field alone */

/* ---------------------------------------------------------- STEP-175 §3: the photo slides 10, 22 and the closing 25, like the home's
   chapters: full height under the bar, the photo drifting slower than the page and a little with the pointer (pitch-photos.js), the
   chapter type much bigger (about 88 px at 1920: wide bold, the thin narrow italic on one word), a translucent giant word across the
   bottom, a soft dark fade under the text on the photo's calm side */
:is(.pitch-site, .pitch-book) :is(.pbreak, #closing, [data-id="closing"]) :is(.pb-line, .t-display) { font-weight: 780; font-stretch: 112%; letter-spacing: -.025em; }
:is(.pitch-site, .pitch-book) :is(.pbreak, #closing, [data-id="closing"]) :is(.pb-line, .t-display) i { font-style: italic; font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }
.pitch-site .pbreak .pb-line { width: min(980px, 56vw); font-size: clamp(40px, 4.6vw, 92px); line-height: 1.02; }
.pitch-site #closing .t-display { font-size: clamp(40px, 4.6vw, 92px); line-height: 1.02; }
.pitch-site #closing .t-lead { font-size: clamp(18px, 1.2vw, 22px); line-height: 1.5; }
.pitch-site :is(.pbreak, #closing) { min-height: var(--screen, 100dvh); }
.pitch-site :is(.pbreak, #closing) .photo-clip { position: absolute; inset: 0; overflow: hidden; z-index: -1; } /* pitch-photos.js wraps the photo: it drifts inside, the slide keeps its size */
.pitch-site :is(.pbreak, #closing) .photo-clip > .hero-photo { inset: 0; width: 100%; height: 100%; transform: scale(1.12); will-change: transform; } /* drawn larger, so the drift never shows an edge */
.pitch-book .photo-clip { display: contents; }
.pb-word { position: absolute; left: 4vw; right: 4vw; bottom: 3vh; z-index: 0; font: 840 clamp(64px, min(15vw, 26vh), 300px)/1.2 "Mona Sans", Arial, sans-serif; font-stretch: 118%; letter-spacing: -.045em; color: rgba(244, 241, 234, .14); white-space: nowrap; overflow: visible; pointer-events: none; } /* STEP-183 §1: never cut: a full line box (the descenders too), shrunk to the width by pitch-photos.js */
.pitch-site :is(.pbreak, #closing) > :not(.hero-photo):not(.photo-clip):not(.hero-shade):not(.pb-word) { position: relative; z-index: 1; }
.pitch-site .pbreak.pb-r .pb-word { text-align: right; }
.pitch-book :is(.pbreak, [data-id="closing"]) .pb-word { left: 96px; right: 96px; bottom: 120px; font-size: 240px; }
.pitch-book .pbreak .pb-line { width: 1100px; font-size: 92px; line-height: 1.02; }
.pitch-book [data-id="closing"] .t-display { font-size: 92px; line-height: 1.02; font-family: "Mona Sans", Arial, sans-serif; }
.pitch-book [data-id="closing"] .t-lead { font-size: 26px; }
@media (max-width: 720px) { .pitch-site .pb-word { display: none; } .pitch-site .pbreak .pb-line { width: auto; font-size: 30px; } .pitch-site #closing .t-display { font-size: 34px; } .pitch-site :is(.pbreak, #closing) .photo-clip { display: contents; } .pitch-site #closing .hero-photo { inset: auto; width: 100%; height: 45vh; transform: none; } }
/* ========================================================== STEP-175 §4 · slide 14, the market map on the whole slide (website, book and PDF)
   The title and its line in a left third; the 2 × 2 in the right two-thirds at full height: equal cells, thin mono labels on the axes,
   AVA's cell cobalt with the logo and Ella AI Care as a faint dot in it, the competitors as chips. The full Ella sentence is in the footnote. */
:is(.pitch-site, .pitch-book) :is(#map, [data-id="map"]) .t-h1 { font-weight: 700; font-stretch: 112%; }
:is(.pitch-site, .pitch-book) .slide :is(h1, h2) i { font-style: italic; font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }
:is(.pitch-site, .pitch-book) .quad { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 12px; }
:is(.pitch-site, .pitch-book) .quad .quad-axis { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 300 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
:is(.pitch-site, .pitch-book) .quad :is(.quad-y1, .quad-y2) { grid-column: 1; writing-mode: vertical-rl; writing-mode: sideways-lr; border-right: 1.5px solid var(--ink); padding-right: 10px; }
:is(.pitch-site, .pitch-book) .quad .quad-y1 { grid-row: 1; } :is(.pitch-site, .pitch-book) .quad .quad-y2 { grid-row: 2; }
:is(.pitch-site, .pitch-book) .quad :is(.quad-x1, .quad-x2) { grid-row: 3; border-top: 1.5px solid var(--ink); padding-top: 8px; align-items: flex-start; }
:is(.pitch-site, .pitch-book) .quad .quad-x1 { grid-column: 2; } :is(.pitch-site, .pitch-book) .quad .quad-x2 { grid-column: 3; }
:is(.pitch-site, .pitch-book) .quad .quad-cell { position: relative; min-width: 0; min-height: 0; overflow: visible; display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: 16px; background: var(--milk); box-shadow: inset 0 0 0 1px var(--hair); }
:is(.pitch-site, .pitch-book) .quad .q-tl { grid-area: 1 / 2; } :is(.pitch-site, .pitch-book) .quad .q-tr { grid-area: 1 / 3; } :is(.pitch-site, .pitch-book) .quad .q-bl { grid-area: 2 / 2; } :is(.pitch-site, .pitch-book) .quad .q-br { grid-area: 2 / 3; }
:is(.pitch-site, .pitch-book) .quad .quad-cell .t-h3 { margin: 0; font-size: 21px; line-height: 1.2; color: var(--ink); }
:is(.pitch-site, .pitch-book) .quad .q-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
:is(.pitch-site, .pitch-book) .quad .q-chips li { font: 500 14px/1.2 var(--sans); color: var(--ink); background: var(--creme); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 12px; }
:is(.pitch-site, .pitch-book) .quad .q-ava { background: var(--cobalt); box-shadow: none; justify-content: space-between; }
:is(.pitch-site, .pitch-book) .quad .q-ava .t-h3 { color: var(--milk); font-size: 26px; max-width: 16em; }
:is(.pitch-site, .pitch-book) .quad .q-logo { width: 112px; height: auto; display: block; }
:is(.pitch-site, .pitch-book) .quad .q-ella { margin: 0; display: flex; align-items: center; gap: 10px; font: 400 14px/1.2 var(--sans); color: rgba(241, 243, 246, .66); }
:is(.pitch-site, .pitch-book) .quad .q-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px dashed rgba(241, 243, 246, .55); }
:is(.pitch-site, .pitch-book) .map-note { margin: 0; font: italic 400 20px/1.4 var(--sans); color: var(--cobalt); }
:is(.pitch-site, .pitch-book) .map-note b { font-style: normal; font-weight: 600; color: var(--ink); }
/* website: a left third and the right two-thirds, the map as tall as the screen allows */
.pitch-site #map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "head quad" "foot foot"; column-gap: 56px; row-gap: 0; }
.pitch-site #map::before, .pitch-site #map::after { display: none; }
.pitch-site #map .map-head { grid-area: head; align-self: center; margin: 0; }
.pitch-site #map .map-head .t-h1 { font-size: clamp(36px, 3.4vw, 56px); }
.pitch-site #map .map-head .t-lead { font-size: 18px; }
.pitch-site #map .quad { grid-area: quad; min-height: clamp(520px, calc(var(--screen, 100dvh) - 2 * var(--slide-pad) - 64px), 860px); grid-template-rows: 1fr 1fr 30px; } /* STEP-185 §4: the cells grow to fit their chips, never cut; both rows as tall as the tallest cell */
.pitch-site #map .foot { grid-area: foot; margin-top: 24px; }
/* STEP-185 §4: the chips wrap tighter so the four cells hold them on one screen */
.pitch-site #map .quad .quad-cell { padding: 20px 22px; gap: 10px; }
.pitch-site #map .quad .q-chips { gap: 6px; }
.pitch-site #map .quad .q-chips li { padding: 5px 11px; line-height: 1.15; }
@media (max-width: 1080px) {
  .pitch-site #map { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "head" "quad" "foot"; }
  .pitch-site #map .map-head { margin-bottom: 32px; }
  .pitch-site #map .quad { height: auto; grid-template-rows: auto auto 30px; }
}
@media (max-width: 720px) {
  .pitch-site #map .quad { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pitch-site #map .quad-axis { display: none; }
  .pitch-site #map .quad .quad-cell { grid-area: auto; }
  .pitch-site #map .quad .q-tr { order: -1; }
}
/* book and PDF: the same slide on the 1920 × 1080 page */
.pitch-book [data-id="map"] .map-head { position: absolute; left: 128px; top: 128px; width: 500px; height: 760px; justify-content: center; }
.pitch-book [data-id="map"] .map-head .t-h1 { font-size: 64px; }
.pitch-book [data-id="map"] .map-head .t-lead { font-size: 24px; line-height: 1.4; }
.pitch-book [data-id="map"] .map-note { font-size: 24px; }
.pitch-book [data-id="map"] .quad { position: absolute; left: 700px; right: 128px; top: 112px; height: 790px; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 16px; }
.pitch-book [data-id="map"] .quad-axis { font-size: 16px; }
.pitch-book [data-id="map"] .quad-cell { padding: 26px 30px; gap: 14px; border-radius: 20px; }
.pitch-book [data-id="map"] .quad-cell .t-h3 { font-size: 28px; }
.pitch-book [data-id="map"] .q-ava .t-h3 { font-size: 36px; }
.pitch-book [data-id="map"] .q-chips { gap: 8px; }
.pitch-book [data-id="map"] .q-chips li { font-size: 18px; padding: 7px 14px; }
.pitch-book [data-id="map"] .q-logo { width: 150px; }
.pitch-book [data-id="map"] .q-ella { font-size: 20px; }
.pitch-book [data-id="map"] .q-dot { width: 20px; height: 20px; }
.pitch-book [data-id="map"] .foot .src { font-size: 16px; letter-spacing: 1px; line-height: 1.35; max-width: 1500px; }

/* ========================================================== STEP-175 §5–6 · slides 21 and 24, the plan and the ask: one journey through the palette
   One cobalt timeline, month 0 to 12, over four cards. On 21 each gate's ring sits at its card's right edge (months 3, 7, 10, 12); on 24 each
   tranche's ring at its card's left edge (start, months 3, 7, 10), so the tranche lines up with the gate on 21 that releases it. The cards
   darken as the pilot advances: paper with a cobalt edge, light blue, mid blue with white text, solid cobalt. */
:is(.pitch-site, .pitch-book) :is(#plan, [data-id="plan"], #ask, [data-id="ask"]) .t-h1 { font-weight: 700; font-stretch: 112%; }
:is(.pitch-site, .pitch-book) .journey { --g: 16px; display: flex; flex-direction: column; gap: 14px; }
:is(.pitch-site, .pitch-book) .tl { position: relative; height: 46px; margin: 0 10px; }
:is(.pitch-site, .pitch-book) .tl::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--cobalt); }
:is(.pitch-site, .pitch-book) .tl .tl-ring { position: absolute; top: 0; left: calc((100% + var(--g)) * var(--k) / 4 - var(--g) / 2 - 10px); width: 20px; height: 20px; box-sizing: border-box; border: 3px solid var(--cobalt); border-radius: 50%; background: var(--milk); }
:is(.pitch-site, .pitch-book) .tl .tl-ring[style*="--k:0"] { left: -10px; } :is(.pitch-site, .pitch-book) .tl .tl-ring[style*="--k:4"] { left: calc(100% - 10px); }
:is(.pitch-site, .pitch-book) .tl :is(.tl-ring b, .tl-end) { position: absolute; top: 26px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); white-space: nowrap; }
:is(.pitch-site, .pitch-book) .tl .tl-ring b { left: 50%; width: 120px; margin-left: -60px; text-align: center; }
:is(.pitch-site, .pitch-book) .tl .tl-ring[style*="--k:0"] b { left: 0; margin-left: 0; text-align: left; }
:is(.pitch-site, .pitch-book) .tl .tl-ring[style*="--k:4"] b { left: auto; right: 0; margin-left: 0; text-align: right; }
:is(.pitch-site, .pitch-book) .tl .tl-end { color: var(--soft); font-weight: 300; top: 29px; }
:is(.pitch-site, .pitch-book) .tl .tl-0 { left: -10px; } :is(.pitch-site, .pitch-book) .tl .tl-12 { right: -10px; }
:is(.pitch-site, .pitch-book) .tl .tl-end::before { content: ""; position: absolute; top: -21px; width: 2px; height: 12px; background: var(--cobalt); }
:is(.pitch-site, .pitch-book) .tl .tl-0::before { left: 10px; } :is(.pitch-site, .pitch-book) .tl .tl-12::before { right: 10px; }
:is(.pitch-site, .pitch-book) .gcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); align-items: stretch; }
:is(.pitch-site, .pitch-book) .gcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 22px; border-radius: 16px; min-width: 0; }
:is(.pitch-site, .pitch-book) .gcard > * { position: relative; margin: 0; }
:is(.pitch-site, .pitch-book) .gcard .gate-n { position: absolute; right: 14px; top: 10px; font: 800 132px/.8 var(--title); font-stretch: 112%; letter-spacing: -.04em; pointer-events: none; }
:is(.pitch-site, .pitch-book) .gcard-label { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
:is(.pitch-site, .pitch-book) .gcard .t-h3 { font-size: 21px; line-height: 1.2; }
:is(.pitch-site, .pitch-book) .gcard-text { font: 400 15px/1.45 var(--sans); }
:is(.pitch-site, .pitch-book) .gcard-amount { font: 700 clamp(30px, 2.6vw, 44px)/1 var(--title); font-stretch: 112%; letter-spacing: -.02em; margin-top: 4px !important; }
:is(.pitch-site, .pitch-book) .gcard-gate { font: 300 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px !important; }
:is(.pitch-site, .pitch-book) .gcard-delivers { margin: auto -24px -22px !important; padding: 14px 24px 16px; font: 500 15px/1.4 var(--sans); }
:is(.pitch-site, .pitch-book) .gcard-delivers span { font-weight: 700; }
/* the four shades: text colours chosen for 4.5:1 or more. STEP-181 §13 (Ivana, 24 Oct 13:59): clearly different in lightness on any
   screen, in greyscale too: 1 paper, 2 a light blue tint, 3 cobalt, 4 deep slate (its giant number in cobalt) */
:is(.pitch-site, .pitch-book) .gcard.g1 { background: var(--milk); color: var(--soft); } /* STEP-178 §5: no outline: the four cards one shape, only the colour changes */
:is(.pitch-site, .pitch-book) .gcard.g2 { background: #C5D9F1; color: #33465C; }
:is(.pitch-site, .pitch-book) .gcard.g3 { background: #1A5FD6; color: #fff; }
:is(.pitch-site, .pitch-book) .gcard.g4 { background: #0F1A26; color: #E3EAF2; }
:is(.pitch-site, .pitch-book) .gcard:is(.g1, .g2) :is(.t-h3, .gcard-amount) { color: var(--ink); }
:is(.pitch-site, .pitch-book) .gcard:is(.g1, .g2) .gcard-label { color: var(--cobalt); }
:is(.pitch-site, .pitch-book) .gcard:is(.g3, .g4) :is(.t-h3, .gcard-amount, .gcard-label) { color: #fff; }
:is(.pitch-site, .pitch-book) .gcard.g1 .gate-n { color: rgba(26, 95, 214, .07); } :is(.pitch-site, .pitch-book) .gcard.g2 .gate-n { color: rgba(26, 95, 214, .1); }
:is(.pitch-site, .pitch-book) .gcard.g3 .gate-n { color: rgba(255, 255, 255, .14); } :is(.pitch-site, .pitch-book) .gcard.g4 .gate-n { color: rgba(26, 95, 214, .55); }
:is(.pitch-site, .pitch-book) .gcard.g1 .gcard-gate { color: #5E7FAE; } :is(.pitch-site, .pitch-book) .gcard.g2 .gcard-gate { color: #3B5A85; }
:is(.pitch-site, .pitch-book) .gcard:is(.g3, .g4) .gcard-gate { color: rgba(255, 255, 255, .72); }
/* "Delivers →" in the next shade */
:is(.pitch-site, .pitch-book) .gcard.g1 .gcard-delivers { background: #C5D9F1; color: var(--ink); } :is(.pitch-site, .pitch-book) .gcard.g1 .gcard-delivers span { color: var(--cobalt); }
:is(.pitch-site, .pitch-book) .gcard.g2 .gcard-delivers { background: #1A5FD6; color: #fff; }
:is(.pitch-site, .pitch-book) .gcard.g3 .gcard-delivers { background: #0F1A26; color: #fff; } :is(.pitch-site, .pitch-book) .gcard.g3 .gcard-delivers span { color: #88BDE8; }
:is(.pitch-site, .pitch-book) .gcard.g4 .gcard-delivers { background: #1F3047; color: #fff; } :is(.pitch-site, .pitch-book) .gcard.g4 .gcard-delivers span { color: #88BDE8; }
/* "What would make us stop": a dark slate band */
:is(.pitch-site, .pitch-book) .stop-band { background: #122033; color: #E8ECF1; border-radius: 18px; padding: 24px 28px 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 6px 40px; }
:is(.pitch-site, .pitch-book) .stop-band > * { margin: 0; }
:is(.pitch-site, .pitch-book) .stop-head { grid-row: 1 / 3; font: 700 22px/1.15 var(--title); font-stretch: 112%; color: #fff; align-self: center; }
:is(.pitch-site, .pitch-book) .stop-lead { font: 400 15px/1.4 var(--sans); color: #C3CCD7; }
:is(.pitch-site, .pitch-book) .stop-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px !important; }
:is(.pitch-site, .pitch-book) .stop-list li { position: relative; padding-top: 14px; font: 400 15px/1.45 var(--sans); color: #E8ECF1; }
:is(.pitch-site, .pitch-book) .stop-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 1.5px; background: #88BDE8; }
:is(.pitch-site, .pitch-book) .stop-list li::after { content: ""; position: absolute; left: 40px; top: -4px; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid #88BDE8; border-radius: 50%; }
/* round two in a slate strip under the cards */
:is(.pitch-site, .pitch-book) .round-two { background: var(--night); color: var(--on-night); border-radius: 14px; padding: 16px 24px; display: flex; align-items: baseline; gap: 32px; }
:is(.pitch-site, .pitch-book) .round-two > * { margin: 0; }
:is(.pitch-site, .pitch-book) .round-two-label { flex: none; font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #88BDE8; }
:is(.pitch-site, .pitch-book) .round-two-text { font: 400 15px/1.45 var(--sans); }
:is(.pitch-site, .pitch-book) .round-two-text b { color: #fff; font-weight: 600; }
/* website */
.pitch-site #ask .ask-logo { display: none; }
.pitch-site :is(#plan, #ask) .t-h1 { font-size: clamp(34px, 3.6vw, 56px); max-width: 24ch; }
.pitch-site :is(#plan, #ask) .journey { margin-top: 8px; }
@media (max-width: 1080px) {
  .pitch-site .gcards { grid-template-columns: 1fr 1fr; }
  .pitch-site .tl { display: none; }
  .pitch-site .stop-band { grid-template-columns: minmax(0, 1fr); } .pitch-site .stop-head { grid-row: auto; }
  .pitch-site .stop-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .pitch-site .gcards { grid-template-columns: minmax(0, 1fr); }
  .pitch-site .round-two { flex-direction: column; gap: 8px; }
}
/* book and PDF: the 1920 × 1080 page */
.pitch-book .slide[data-id="plan"] { gap: 28px; }
.pitch-book [data-id="plan"] .t-h1 { font-size: 60px; width: auto; max-width: none; white-space: nowrap; }
.pitch-book .journey { --g: 24px; gap: 16px; }
.pitch-book .tl { height: 56px; }
.pitch-book .tl::before { top: 12px; height: 3px; }
.pitch-book .tl .tl-ring { width: 28px; height: 28px; border-width: 4px; left: calc((100% + var(--g)) * var(--k) / 4 - var(--g) / 2 - 14px); }
.pitch-book .tl .tl-ring[style*="--k:0"] { left: -14px; } .pitch-book .tl .tl-ring[style*="--k:4"] { left: calc(100% - 14px); }
.pitch-book .tl :is(.tl-ring b, .tl-end) { top: 36px; font-size: 18px; }
.pitch-book .tl .tl-ring b { width: 200px; margin-left: -100px; }
.pitch-book .tl .tl-ring[style*="--k:0"] b { left: -4px; margin-left: 0; }
.pitch-book .tl .tl-end { top: 40px; }
.pitch-book .tl .tl-end::before { top: -29px; height: 16px; width: 3px; }
.pitch-book .gcard { padding: 28px 30px 26px; gap: 10px; border-radius: 20px; }
.pitch-book .gcard .gate-n { font-size: 176px; top: 14px; right: 20px; }
.pitch-book .gcard-label { font-size: 18px; }
.pitch-book .gcard .t-h3 { font-size: 30px; }
.pitch-book .gcard-text { font-size: 21px; line-height: 1.38; }
.pitch-book .gcard-amount { font-size: 56px; }
.pitch-book .gcard-gate { font-size: 18px; }
.pitch-book .gcard-delivers { margin: auto -30px -26px !important; padding: 16px 30px 18px; font-size: 21px; }
.pitch-book .stop-band { border-radius: 22px; padding: 26px 36px 30px; gap: 6px 48px; }
.pitch-book .stop-head { font-size: 32px; }
.pitch-book .stop-lead { font-size: 21px; }
.pitch-book .stop-list li { font-size: 21px; }
.pitch-book .round-two { padding: 18px 30px; border-radius: 18px; }
.pitch-book .round-two-label { font-size: 18px; }
.pitch-book .round-two-text { font-size: 21px; }
.pitch-book [data-id="ask"] .gcard { padding: 22px 28px 22px; gap: 8px; }
.pitch-book [data-id="ask"] .gcard-amount { font-size: 50px; }
.pitch-book [data-id="ask"] .gcard .t-h3 { font-size: 27px; }
.pitch-book [data-id="ask"] .gcard-text { font-size: 19px; }
.pitch-book [data-id="ask"] .gcard-delivers { margin: auto -28px -22px !important; padding: 13px 28px 15px; font-size: 19px; }
.pitch-book [data-id="ask"] .round-two { padding: 14px 28px; }
.pitch-book [data-id="ask"] .round-two-text { font-size: 19px; }
.pitch-book [data-id="ask"] .journey { gap: 10px; }

/* ========================================================== STEP-178 §2: on slate or cobalt, text is white (85–100 %) or ring-blue,
   never dark blue or grey: 4.5:1 or more everywhere */
:is(.pitch-site, .pitch-book) .gcard:is(.g3, .g4) .gcard-text { color: #fff; }
:is(.pitch-site, .pitch-book) .gcard:is(.g3, .g4) .gcard-gate { color: #fff; }
:is(.pitch-site, .pitch-book) .round-two .round-two-text { color: rgba(255, 255, 255, .88); }
:is(.pitch-site, .pitch-book) .round-two .round-two-text b { color: #fff; }
:is(.pitch-site, .pitch-book) .quad .q-ella { color: rgba(241, 243, 246, .96); }
.pitch-book [data-id="cover"] :is(.cover-guide, .cover-src) { color: rgba(232, 236, 241, .86); opacity: 1; }

/* ========================================================== STEP-178 §3: slide 07 and /glance, calm: smaller cards with a thin cobalt
   line down the left only, no "when" pill on any line; the three true exceptions carry a small grey note under the line; one line under
   the cards tells the timing. The slide fits one screen */
.fcards { gap: 14px 28px; }
.fcard { background: none; box-shadow: none; border-radius: 0; border-left: 2px solid var(--cobalt); padding: 2px 0 2px 18px; }
.fcard .t-h3 { margin: 0 0 6px; font-size: 19px; }
.fcard li { grid-template-columns: 1fr; padding: 5px 0; border-top: 1px solid var(--hair); }
.fcard li .t-small { font-size: 15px; }
.fcard .sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.fcard.wide ul { column-gap: 24px; }
.pitch-site #features .f-when { margin: 4px 0 0; font: 500 17px/1.4 var(--sans); color: var(--ink); }
.pitch-site #features .t-small.fs-22 { font-size: 13px; max-width: 72ch; }
.pitch-book [data-id="features"] .fcard { padding: 4px 0 4px 22px; }
.pitch-book [data-id="features"] .fcard .t-h3 { font-size: 24px; margin-bottom: 4px; }
.pitch-book [data-id="features"] .fcard li { padding: 5px 0; }
.pitch-book [data-id="features"] .fcard li .t-small { font-size: 19px; }
.pitch-book [data-id="features"] .fcard .sub { font-size: 15px; }
.pitch-book [data-id="features"] .f-when { font: 500 22px/1.35 var(--sans); color: var(--ink); }
.gl-group { background: none; border: 0; border-left: 2px solid var(--cobalt); border-radius: 0; padding: 2px 0 2px 14px; }
.gl-sub { display: block; font-size: 12px; color: var(--muted); }
.gl-when { margin: 14px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.glance-print .gl-group { border-radius: 0; padding: 2px 0 2px 8px; }
.glance-print .gl-sub { font-size: 8px; }
.glance-print .gl-when { margin-top: 7px; font-size: 9.5px; }
@media (max-height: 820px) and (min-width: 721px) { /* a short laptop: slide 07 still on one screen */
  .pitch-site #features { --sgap: 18px; }
  .pitch-site #features .t-h1 { font-size: 34px; }
  .pitch-site .fcards { gap: 10px 24px; }
  .pitch-site .fcard .t-h3 { font-size: 16px; margin-bottom: 2px; }
  .pitch-site .fcard li { padding: 2px 0; }
  .pitch-site .fcard li .t-small { font-size: 13.5px; line-height: 1.25; }
  .pitch-site .fcard .sub { font-size: 11.5px; }
  .pitch-site #features .f-when { font-size: 15px; }
  .pitch-site #features .t-small.fs-22 { font-size: 12px; }
}

/* STEP-178 §6: the giant "Together" sits on the closing's bottom edge, half cut off; the title, the lines, the logo and the buttons
   finish above it (the slide keeps that room free). Rule everywhere: a giant word only in empty space, never behind text or buttons */
/* STEP-183 §1: "Together" whole, in the room under the buttons (never cut by the slide's edge) */
.pitch-site #closing { --pbw: clamp(64px, 7vw, 150px); padding-bottom: calc(var(--pbw) * 1.05 + 32px); }
.pitch-site #closing .pb-word { bottom: 3vh; right: 68%; font-size: var(--pbw); } /* STEP-183 §1: in the empty room left of the couple, never over them */
.pitch-book [data-id="closing"] .pb-word { bottom: 60px; right: 1100px; font-size: 150px; }

/* STEP-181 §8: slide 03's numbers (their count-up: app.js); STEP-185 §3: no pale twin behind them any more */
:is(.pitch-site, .pitch-book) #problem .stat, :is(.pitch-site, .pitch-book) [data-id="problem"] .stat { position: relative; overflow: hidden; isolation: isolate; }
/* STEP-185 §3 (Ivana, 25 Oct 07:43): the pale numbers behind 57M, 153M and 10M removed (cropped by their card, they added nothing) */

/* STEP-181 §9: slide 06's title on one line, about 48 px; the specs one line of text under the watch, no boxes */
:is(.pitch-site, .pitch-book) :is(#watchface, [data-id="watchface"]) .wf-title { font-size: 48px; }
.pitch-site :is(#watchface, [data-id="watchface"]) .wf-title { font-size: clamp(30px, 2.5vw, 48px); }
@media (min-width: 1100px) { .pitch-site :is(#watchface, [data-id="watchface"]) .wf-title { white-space: nowrap; max-width: none; } }
:is(#watchface, [data-id="watchface"]) .wf-specline { margin: 0; text-align: center; font: 500 15px/1.5 var(--mono); letter-spacing: .04em; color: #C9D3DE; }
.pitch-book :is(#watchface, [data-id="watchface"]) .wf-specline { position: absolute; left: 816px; right: 96px; top: 716px; text-align: left; font-size: 19px; }
/* STEP-181 §10: slide 07: the four groups in an equal 2 × 2 grid (about 60 %), the lake photo at full height (about 40 %) with the
   Wellness readings on a dark panel at its foot; one feature per line; on a phone the four stacked, then the photo */
:is(.pitch-site, .pitch-book) .f7 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; align-items: stretch; }
:is(.pitch-site, .pitch-book) .f7-grid { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 22px 32px; }
:is(.pitch-site, .pitch-book) .f7-g { border-left: 2px solid var(--cobalt); padding: 2px 0 2px 18px; }
:is(.pitch-site, .pitch-book) .f7 .t-h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.2; }
:is(.pitch-site, .pitch-book) .f7 ul { list-style: none; margin: 0; padding: 0; }
:is(.pitch-site, .pitch-book) .f7 li { padding: 4px 0; border-top: 1px solid var(--hair); }
:is(.pitch-site, .pitch-book) .f7 li .t-small { margin: 0; font-size: 15px; line-height: 1.3; color: var(--ink); }
:is(.pitch-site, .pitch-book) .f7 .sub { display: block; font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
:is(.pitch-site, .pitch-book) .f7-photo { position: relative; margin: 0; min-height: 380px; border-radius: 18px; overflow: hidden; background: #0F1A26; display: flex; flex-direction: column; }
:is(.pitch-site, .pitch-book) .f7-photo img { flex: 1 1 0; min-height: 150px; width: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
:is(.pitch-site, .pitch-book) .f7-panel { padding: 14px 22px 12px; background: #0F1A26; }
:is(.pitch-site, .pitch-book) .f7-panel .t-h3 { color: #fff; }
:is(.pitch-site, .pitch-book) .f7-panel li { border-top-color: rgba(136, 189, 232, .18); }
:is(.pitch-site, .pitch-book) .f7-panel li .t-small { color: #fff; }
:is(.pitch-site, .pitch-book) .f7-panel .sub { color: #AEB9C6; }
/* STEP-183 §7, STEP-184 §2: the seven readings as a compact two-column grid of icon and label, no note on any line, one note under them */
:is(.pitch-site, .pitch-book) .f7-panel .f7-wl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
:is(.pitch-site, .pitch-book) .f7-panel .f7-wl li { display: flex; align-items: center; gap: 10px; }
:is(.pitch-site, .pitch-book) .f7-panel .f7-wn { margin: 8px 0 0; font: 400 12.5px/1.35 var(--sans); color: #AEB9C6; }
.pitch-book [data-id="features"] .f7-panel .f7-wn { font-size: 15px; }
.pitch-book [data-id="features"] .f7-panel .wi { width: 22px; height: 22px; }
.pitch-book [data-id="features"] .f7 .t-h3 { font-size: 24px; }
.pitch-book [data-id="features"] .f7 li .t-small { font-size: 19px; }
.pitch-book [data-id="features"] .f7 .sub { font-size: 15px; }
@media (max-width: 720px) { .pitch-site .f7, .pitch-site .f7-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .pitch-site .f7-photo { min-height: 520px; } }

/* STEP-181 §10: /glance in slide 07's layout: the four groups 2 × 2 (about 60 %), the lake photo with the Wellness panel (about 40 %) */
.gl-f7 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: stretch; }
.gl-grid.gl-2x2 { grid-template-columns: 1fr 1fr; align-content: start; gap: 18px 24px; }
.gl-photo { margin: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #0F1A26; }
.gl-photo img { flex: 1 1 0; min-height: 140px; width: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.gl-group.gl-panel { border: 0; border-radius: 0; padding: 12px 16px; background: #0F1A26; color: #E8ECF1; }
.gl-panel h3 { color: #fff; }
.gl-panel th, .gl-panel .m { color: #AEB9C6; }
.gl-panel td { color: #fff; border-top-color: rgba(136, 189, 232, .18); }
.gl-panel .gl-sub { color: #AEB9C6; }
.gl-panel td .wi { margin-right: 8px; vertical-align: -4px; } /* STEP-183 §7: the readings' icons */
.gl-panel .gl-wn { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: #AEB9C6; } /* STEP-184 §2: one note under the group */
.glance-print .gl-panel .gl-wn { margin-top: 4px; font-size: 8px; } .glance-print .gl-panel td .wi { width: 11px; height: 11px; margin-right: 5px; vertical-align: -2px; }
@media (max-width: 760px) { .gl-f7, .gl-grid.gl-2x2 { grid-template-columns: 1fr; } .gl-photo img { min-height: 220px; } }
.glance-print .gl-f7 { gap: 10px; } .glance-print .gl-grid.gl-2x2 { gap: 7px 12px; } .glance-print .gl-photo img { min-height: 60px; }
/* STEP-181 §12, STEP-183 §6: the Overview's long middle (slides 11–21) in the home's typography: the title in the wide bold with its
   thin italic accent (the decorative giant words and numbers behind them are gone: they meant nothing) */
:is(.pitch-site, .pitch-book) .big-type { position: relative; isolation: isolate; overflow: hidden; }
:is(.pitch-site, .pitch-book) .big-type h2 { font-weight: 780; font-stretch: 112%; letter-spacing: -.02em; }
:is(.pitch-site, .pitch-book) .big-type h2 i { font-style: italic; font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }

/* STEP-181 §14: slide 24, the team, in the home's type */
:is(.pitch-site, .pitch-book) #team, .pitch-book [data-id="team"] { isolation: isolate; }
:is(.pitch-site, .pitch-book) .team-quote { margin: 0; font: 700 clamp(24px, 1.9vw, 36px)/1.2 var(--title); font-stretch: 112%; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
:is(.pitch-site, .pitch-book) .team-quote::before { content: "“"; margin-right: .08em; color: var(--cobalt); }
:is(.pitch-site, .pitch-book) .team-quote i { font-style: italic; font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }
:is(.pitch-site, .pitch-book) .person { position: relative; overflow: hidden; isolation: isolate; }
:is(.pitch-site, .pitch-book) .p-name { margin: 0; font: 780 clamp(30px, 2.3vw, 44px)/1.05 var(--title); font-stretch: 112%; letter-spacing: -.02em; }
:is(.pitch-site, .pitch-book) .p-name i { font-style: italic; font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }
:is(.pitch-site, .pitch-book) .p-lines { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; }
:is(.pitch-site, .pitch-book) .p-lines li { font-size: clamp(16px, 1.15vw, 21px); line-height: 1.35; color: var(--ink); }
.pitch-book .p-lines li { font-size: 22px; }
/* STEP-185 §2 (Ivana, 25 Oct 07:42): slide 01's head is a film (assets/content/head-turn.mp4/.webm, cover-brain.js) scrubbed by the
   pointer, in the head picture's box. Its first frame (head-turn-poster.jpg) is the picture from the first paint, so nothing swaps; the
   film fades over it once it can show a frame. Its black melts into the slide (screen) and its edge is feathered: fully visible in the
   middle 70 %, gone at the box's edge. Reduced motion, the book and the PDF: the still */
.pitch-site #cover :is(.cover-head, .cover-film) { -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.pitch-site #cover .cover-film { position: absolute; z-index: -1; right: 4%; top: 50%; transform: translateY(-50%); height: min(86%, 760px); width: auto; aspect-ratio: 1; object-fit: cover; mix-blend-mode: screen; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.pitch-site #cover.cover-playing .cover-film { opacity: .9; }
.pitch-site #cover.cover-playing .cover-head { opacity: 0; transition: opacity .5s ease .5s; }
.pitch-book .cover-film { display: none; }
@media (max-width: 720px) { .pitch-site #cover .cover-film { display: none; } }
.pitch-book [data-id="team"] .team-quote { font-size: 30px; } /* STEP-184 §1: Romain's longer line; 32 px clear of the wave */
.pitch-book [data-id="team"] .p-lines li { font-size: 19px; }
.pitch-book [data-id="team"] .p-name { font-size: 36px; }
/* STEP-183 §0: Overview 06 on the website, the home's chapter 06 component: the watch sized from the screen's height (its box about
   66 % of the visible slide, the watch 85 % of that), the ten features in two columns either side, real text at 18 px and up. (Before,
   the box and the SVG labels were both sized from the stage's width, so on a narrower screen they shrank together: 49 % and 13.6 px
   labels at 1440 × 900.) The book and the PDF keep the still watch and the two-column list */
.pitch-site :is(#watchface, [data-id="watchface"]) .pw6 { --b: min(calc(var(--screen, 100dvh) * .65), 38vw); display: grid; grid-template-columns: minmax(0, 1fr) var(--b) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 48px); align-items: center; width: min(100vw - 64px, 1760px); margin: -8px 0 0 calc(50% - min(100vw - 64px, 1760px) / 2); }
.pitch-site .pw6 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pitch-site .pw6-box { position: relative; width: var(--b); aspect-ratio: 1; }
.pitch-site .pw6 .f { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 10px 14px; border-radius: 14px; opacity: .6; transition: background-color .3s, opacity .3s; }
.pitch-site .pw6-l .f { grid-template-columns: 1fr 34px; text-align: right; }
.pitch-site .pw6-l .f .n { order: 2; }
.pitch-site .pw6-l .f :is(b, .d) { grid-column: 1; }
.pitch-site .pw6 .f .n { grid-row: span 2; font: 500 18px var(--mono); letter-spacing: .08em; color: #88BDE8; padding-top: 5px; }
.pitch-site .pw6 .f b { font: 650 clamp(19px, 1.35vw, 24px)/1.2 var(--title); font-stretch: 105%; color: var(--on-night); }
.pitch-site .pw6 .f .d { font-size: 18px; line-height: 1.3; color: #AEB9C6; }
.pitch-site .pw6 .f:hover, .pitch-site .pw6 .f:focus-visible { opacity: .9; background: rgba(136, 189, 232, .07); }
.pitch-site .pw6 .f.on { opacity: 1; background: rgba(26, 95, 214, .2); }
.pitch-site .pw6 .f:focus-visible { outline: 2px solid #88BDE8; outline-offset: 2px; }
@media (max-width: 900px) { .pitch-site :is(#watchface, [data-id="watchface"]) .pw6 { --b: min(66vw, 420px); grid-template-columns: 1fr; width: auto; margin: 0; } .pitch-site .pw6-box { justify-self: center; order: -1; margin: 6% 0 14%; } /* STEP-189 §0: room for the photo's straps */ .pitch-site .pw6-l .f { grid-template-columns: 34px 1fr; text-align: left; } .pitch-site .pw6-l .f .n { order: 0; } .pitch-site .pw6-l .f :is(b, .d) { grid-column: 2; } }
/* STEP-183 §5: slide 13's giant word "Calm voice" in the empty space left of him, never over his face, hand or the watch */
.pitch-site #morning .hero-photo { transform-origin: 50% 0; } /* STEP-183 §5: the drift's small zoom grows downward, never into his hair */
.pitch-site #morning .pb-word { right: 52%; }
.pitch-book [data-id="morning"] .pb-word { right: 1000px; }

/* STEP-183 §3 (Ivana, 24 Oct 18:44): slide 01 fits one screen with its buttons, from 1920 × 1080 down to a 1280 × 600 browser window:
   the logo, the type and the gaps follow the screen's height, the title capped; the guidance's sources drop out on shorter screens */
@media (min-width: 721px) {
  .pitch-site #cover { padding-top: clamp(28px, 3vh, 32px); padding-bottom: clamp(44px, 6vh, 56px); }
  .pitch-site #cover .hero-logo { height: clamp(40px, 6.4vh, 68px); }
  .pitch-site #cover div.w-640 { gap: clamp(4px, 1vh, 12px); }
  .pitch-site #cover .col.gap-12 { gap: clamp(6px, 1.2vh, 12px); }
  .pitch-site #cover .t-display { font-size: clamp(28px, min(2.2rem + 1.4vw, 6vh), 56px); }
  .pitch-site #cover .hand { font-size: clamp(15px, 2.2vh, 22px); line-height: 1.35; }
  .pitch-site #cover .t-text { font-size: clamp(14px, 1.7vh, 17px); line-height: 1.45; }
  .pitch-site #cover .hero-btns { margin-top: clamp(2px, .8vh, 8px); }
}
@media (min-width: 721px) and (max-height: 940px) { .pitch-site #cover .cover-src { display: none; } }

/* STEP-185 §2: the cover's head picture, its film and the neuron field keep their own boxes: the text column's width (above) had
   squeezed the picture into 540 × 695 (the film, cropping instead, sat elsewhere, so the two showed as two heads) */
.pitch-site #cover > :is(.cover-head, .cover-film) { width: auto !important; aspect-ratio: 1; object-fit: cover; }
.pitch-site #cover > .cover-field { width: auto !important; }

/* STEP-190 §3: the Overview's five chapters each open like a home chapter: the photo at full height, the chapter's number and name
   (a mono kicker in the ring blue), its one line in the chapter type, and the giant word (pitch-photos.js keeps it whole) */
.pitch-site .opener .pb-k { margin: 0 0 20px; font: 500 clamp(14px, .5rem + .55vw, 19px)/1.2 "Geist Mono", "Courier New", monospace; letter-spacing: .18em; text-transform: uppercase; color: #9CCBF0; text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.pitch-site .opener.pb-r .pb-k { align-self: flex-end; text-align: right; }
.pitch-book .opener .pb-k { margin: 0 0 32px; font: 500 28px/1.2 "Geist Mono", "Courier New", monospace; letter-spacing: .18em; text-transform: uppercase; color: #9CCBF0; }
.pitch-book .opener.pb-r .pb-k { align-self: flex-end; text-align: right; }
@media (max-width: 720px) { .pitch-site .opener .pb-k, .pitch-site .opener.pb-r .pb-k { align-self: stretch; padding: 0 var(--gutter); text-align: left; margin-bottom: 12px; } }
/* the wrist photo is 16:9 with its watch 45 % across: drawn 1.45 × from its left edge (as the home's chapter 08), the watch lands on the
   right, clear of the chapter's words on the left */
.pitch-site #ch-product .photo-clip > .hero-photo, .pitch-site #ch-product > .hero-photo { width: 160%; height: 160%; left: 0; top: -28%; object-position: 0% 50%; } /* STEP-193 §1: the new wrist photo has its watch 44.7 % across (was 46.7): a little more zoom keeps it clear of the title */
.pitch-book [data-id="ch-product"] .hero-photo { width: 3264px; height: 1836px; left: 0; top: -367px; object-position: 0% 50%; }
@media (min-width: 1600px) { .pitch-site #ch-product .photo-clip > .hero-photo, .pitch-site #ch-product > .hero-photo { width: 170%; height: 170%; top: -34%; } } /* wide screens set the title further right */
@media (max-width: 720px) { .pitch-site #ch-product .photo-clip > .hero-photo, .pitch-site #ch-product > .hero-photo { width: 100%; height: 100%; top: 0; object-position: 45% 50%; } }
/* STEP-190 §2: What it is carries one more line (the retired product slide's three points): in the book its rows sit a little closer, so
   the page keeps 32 px clear of the wave (STEP-56) */
.pitch-book [data-id="whatitis"] .row.pad-22_0 { padding: 11px 0; }
.pitch-book [data-id="whatitis"] .wi-more { margin-top: 4px; font-size: 21px; }

/* STEP-189 §4 (Ivana, 28 Oct 07:06): the app slide: the words on the left, the three points one at a time (each a scroll step, app.js);
   one phone on the right at about 80 % of the slide's height. The same rule for every device on the site: one, big, its screen changing */
:is(.pitch-site, .pitch-book) #app .app-grid, .pitch-book [data-id="app"] .app-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pitch-site #app .app-grid { column-gap: clamp(40px, 5vw, 120px); min-height: calc(var(--screen, 100dvh) * .86); }
.pitch-site #app .app-text { gap: 40px; }
.pitch-site #app .app-phone { width: calc(min(var(--screen, 100dvh) * .8, 1000px) * 578 / 1195); }
.pitch-site #app .app-pt { cursor: pointer; opacity: .42; transition: opacity .4s ease; }
.pitch-site #app .app-pt.on { opacity: 1; }
.pitch-site #app .app-pt:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
/* STEP-189 §5: on a laptop the app slide is two and a half screens of free scrolling; its content (.app-pin) stays pinned, one screen
   tall, while the three points light in turn (app.js setSteps). On a short screen, on a phone and in the book .app-pin is no box */
.app-pin { display: contents; }
@media (min-width: 721px) and (min-height: 768px) {
  .pitch-site #app { display: block; padding: 0; min-height: calc(var(--screen, 100dvh) * 2.5); overflow: clip; }
  .pitch-site #app::before, .pitch-site #app::after { display: none; }
  .pitch-site #app .app-pin { position: sticky; top: 0; height: var(--screen, 100dvh); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sgap); padding: var(--slide-pad) max(var(--gutter), calc((100% - 1200px) / 2)); }
  .pitch-site #app .app-pin::before { content: ""; flex: 1 0 0; margin-bottom: calc(-1 * var(--sgap)); }
  .pitch-site #app .app-pin::after { content: ""; flex: 1 0 0; margin-top: calc(-1 * var(--sgap)); order: 98; }
  .pitch-site #app .app-pin > .foot { order: 99; margin-top: calc(24px - var(--sgap)); }
  .pitch-site #app .app-pin .app-grid { min-height: calc(var(--screen, 100dvh) * .84); } /* 48 px clear at the foot on 1366 × 768 too */
}
.pitch-book [data-id="app"] .app-grid { column-gap: 96px; align-items: start; }
.pitch-book [data-id="app"] .app-text { gap: 40px; }
.pitch-book [data-id="app"] .app-phone { width: 360px; margin-top: -24px; }
/* a phone: the phone first and held at the top while the three points pass under it, the screen following the point in view */
@media (max-width: 720px) {
  .pitch-site #app { overflow: clip; } /* hidden made the slide its own scroller, so the phone could not stay at the top of the screen */
  .pitch-site #app .app-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 24px; }
  .pitch-site #app .app-phone { order: -1; justify-self: center; position: sticky; top: 8px; z-index: 2; width: min(66vw, calc(46svh * 578 / 1195)); }
  .pitch-site #app .app-grid, .pitch-site #app .app-phone { background-color: inherit; } /* STEP-203 §3: the band takes the slide's own background, whatever it is */
  .pitch-site #app .app-phone::before { content: ""; position: absolute; inset: -8px -100vw -16px; z-index: -1; background-color: inherit; } /* the points pass under it */
  .pitch-site #app .app-pt { opacity: .5; }
}

/* ---------------------------------------------------------- STEP-198 §2: chapter 03 · Technology
   The opener: the photo (STEP-199 §4), the chapter's number and name, the title and the line under it (no giant word: the line
   needs its room). The last slide:
   three ruled columns (built today, who builds it, the stack), each with its mono label */
.pitch-site #ch-tech .pb-line { width: min(820px, 44vw); } /* STEP-199 §4: the left third, over the sky, clear of her face */
.pitch-site #ch-tech .pb-sub { margin: 24px 0 0; max-width: min(620px, 40vw); text-shadow: 0 1px 18px rgba(0, 0, 0, .5); font-size: clamp(17px, .7rem + .6vw, 24px); line-height: 1.5; color: var(--on-night-soft); }
.pitch-book [data-id="ch-tech"] .pb-line { width: 860px; }
.pitch-book [data-id="ch-tech"] .pb-sub { margin: 36px 0 0; max-width: 760px; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); font: 400 30px/1.5 var(--sans); color: var(--on-night-soft); }
@media (max-width: 720px) { .pitch-site #ch-tech .pb-line { width: auto; } .pitch-site #ch-tech .pb-sub { max-width: none; margin-top: 14px; padding: 0 var(--gutter); font-size: 15px; color: var(--on-night-body); } }
.tb-cols > .tb-col { flex: 1 1 0; min-width: 0; }
.tb-col > .t-label { margin: 0 0 12px; }
.tb-col > .ruled:last-child { border-bottom: 1px solid var(--hair); }
@media (max-width: 720px) { .pitch-site .tb-cols { flex-direction: column; gap: 28px; } }
/* the book's page for "How a conversation works": the four steps a little tighter, so the page keeps 32 px above its wave line */
.pitch-book [data-id="conversation"] .card { padding: 24px; gap: 10px; }
.pitch-book [data-id="conversation"] .card .t-small { font-size: 22px; line-height: 1.32; }
/* STEP-202 §3: the last Technology slide also says why the big AI companies don't build AVA: the columns and the two closing
   paragraphs a size smaller, so the slide stays one screen (1366 × 768 and up) and the book's page keeps 32 px above its wave */
.pitch-site #techbuilt .tb-col .t-text, .pitch-site #techbuilt .tb-foot .t-text { font-size: clamp(13px, .45rem + .45vw, 18px); line-height: 1.42; }
.pitch-site #techbuilt .tb-col .ruled { padding: 8px 0; }
.pitch-site #techbuilt .tb-foot { gap: 48px; }
.pitch-book [data-id="techbuilt"] { padding-top: 88px; }
.pitch-book [data-id="techbuilt"] .t-h1 { font-size: 60px; }
.pitch-book [data-id="techbuilt"] .tb-col .t-text, .pitch-book [data-id="techbuilt"] .tb-foot .t-text { font-size: 20px; line-height: 1.35; }
.pitch-book [data-id="techbuilt"] .tb-col .ruled { padding: 10px 0; }
.pitch-book [data-id="techbuilt"] .tb-col .t-label { font-size: 18px; }
@media (min-height: 640px) { .pitch-site #techbuilt { gap: clamp(14px, 2.4vh, 32px); } } /* a short screen keeps the usual gap: the slide grows there */