/* =========================================================================== v2.css — the captain's 2026-08-11 landing architecture, in the locked design system, after the 2026-08-11 persona craft pass. Seeded from the approved C2 build (website-full-page-build/mockup/site/) and its self-contained engine in common/. Token discipline is unchanged from that build: NO colour, radius, or face appears in this file that is not a var() off common/sharkbyte.css, which is itself transcribed from constants/{Colors,Terminal,DesignTokens}.ts and utils/heatScale.ts. WHAT THE CRAFT PASS CHANGED, and why — the audience is the Analytical Realist: a skeptic who reads precision as trustworthiness and decoration as a tell. 1 ONE RACK. Every instrument on the page — the film, the two diagnostic panels, the MARKETS board — wears the SAME recessed nameplate strip (.np) at the same height, on the same plate (.instr), with the same seam. Four near-duplicate nameplate implementations became one, so the page reads as one machine instead of four drawings. 2 THE PIXEL PAIR IS SEMANTIC. It appears only where SharkByte's own model speaks (THE APP and MARKETS). The villain's panels carry none. 3 ONE RECESS. The villain sits in an inset WELL — a cut in the faceplate — instead of a full-bleed ground stripe that is invisible on the cave. Every other section is on the page ground, so the depth change means something. 4 THE MEASURE IS SET, not left to the viewport. The headline breaks at the captain's own punctuation; every body column is capped in ch. 5 THE BOARD IS AN INSTRUMENT, not a web table. It sits at instrument width with a ruled column key beside it, its numerals right-aligned and tabular, and the GAP wash filling the GAP COLUMN as a flat band — the shipped rowTinted idiom, never a bubbly chip. answer does not fade in. ONE typographic ruling is recorded in the report: the captain's CTA labels ("Start Your 7-Day Free Trial") are sentence copy, not console chrome, so they are set in the BODY face. Contract §7.15 bars Departure Mono from anything that is not short uppercase chrome, and a title-case sentence is not that. =========================================================================== */ /* ------------------------------------------------------------- the page -- */ :root { /* the page's one vertical step, so every section hands off on the same cadence instead of on four hand-tuned numbers */ --sy: 100px; --hair: 1px; /* ROUND 2c — the nav's colour. Not a new hue: the model's own voice, which is sage on the cave and the PRINTED ink-green on paper. The swap is not decorative — sage is a 3.9:1 ink on cream and fails as small text, while the printed green clears 5.9:1 (Terminal.ts / TerminalLight). */ --nav-accent: var(--sage); /* ONE chrome size for the whole page at desktop (contract §7.15 sets the console face's floor at 12px, and everything under it was reading as a thin little eyebrow at 1440). Hierarchy is carried by INK and TRACKING from here on, never by shrinking the type. */ --chrome: 12px; } :root[data-finish='light'] { --nav-accent: var(--intel); } body { overflow-x: hidden; /* Paper carries the blueprint grid (contract §7.14); the cave stays untextured. --ground-grid is `none` on dark. */ background-image: var(--ground-grid); } .col { width: min(1200px, 100% - 96px); margin: 0 auto; } .grow { flex: 1; } /* One honest focus ring, in the model's voice, for every door on the page. */ a:focus-visible, button:focus-visible { outline: 1px solid var(--sage); outline-offset: 3px; border-radius: var(--r-chip); } .skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--plate); color: var(--text); padding: 12px 18px; font-family: var(--console); font-size: 12px; letter-spacing: .17em; border: 1px solid var(--seam); } .skip:focus { left: 12px; top: 12px; } /* the stepping pixel pair — the app's only ornament (DESIGN.md law 3). On this page it is SEMANTIC: it marks the instruments where SharkByte's own model speaks, and never appears on the villain's. */ .pix { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; } .pix i { width: 7px; height: 7px; background: var(--sage); display: block; } .pix i.sm { width: 4px; height: 4px; opacity: .6; } .wordmark { height: 16px; width: 103px; display: block; } /* =========================== THE ONE RACK ================================ Every instrument on the page is a PLATE with a recessed NAMEPLATE strip. One height, one type pair, one seam — so the film, the diagnostic panels and the board read as parts of one machine rather than as three pictures. (contract §8, the Module's two-tone hardware unit) ========================================================================= */ .instr { background: var(--plate); border: var(--hair) solid var(--seam); border-radius: var(--r-module); overflow: hidden; } .np { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: var(--nameplate); border-bottom: var(--hair) solid var(--seam); } .np .t { font-family: var(--console); font-size: var(--chrome); letter-spacing: .15em; color: var(--dim); white-space: nowrap; } .np .q { font-family: var(--console); font-size: var(--chrome); letter-spacing: .1em; color: var(--faint); white-space: nowrap; } /* ---------------------------------- nav ---------------------------------- */ .nav { border-bottom: var(--hair) solid var(--divider); } .nav-in { height: 64px; display: flex; align-items: center; gap: 26px; } .brand { display: block; line-height: 0; } .nav-link { text-decoration: none; color: var(--dim); font-size: var(--chrome); letter-spacing: .14em; } .nav-link:hover { color: var(--text); } /* the nav's conversion door: an OUTLINE chip in the accent, never a second filled mint slab — the hero's and the close's slabs stay the page's one loud object */ .nav-cta { text-decoration: none; color: var(--nav-accent); border: var(--hair) solid var(--nav-accent); background: transparent; font-size: var(--chrome); letter-spacing: .14em; padding: 9px 15px; border-radius: var(--r-chip); } .nav-cta:hover { color: var(--cta-ink); background: var(--nav-accent); } /* ================================ SHARED ================================= */ h1 { margin: 0; font-family: var(--body); font-weight: 500; font-size: 50px; line-height: 58px; letter-spacing: -.023em; color: var(--text); /* MEASURED, not guessed: at this size the three candidate lines set 574 / 630 / 462px, so a 660px column is the one measure that breaks the headline at the captain's own punctuation — the instruction to stop on its own line, the instruction to act on the two below it. */ max-width: 660px; } /* the headline is ONE string; the first sentence is set one ink step down so the eye lands on the instruction the page is actually making */ .h1-a { color: var(--dim); } .h1-b { color: var(--text); } h2 { margin: 0; font-family: var(--body); font-weight: 500; font-size: 34px; line-height: 42px; letter-spacing: -.017em; color: var(--text); } .lede { margin: 22px 0 0; font-size: 17px; line-height: 28px; color: var(--dim); max-width: 52ch; } /* THE CONVERSION. The brand moment carries BrandColors.navy in BOTH finishes (DesignTokens BrandTile), so the slab inverts rather than fading: mint ground / navy ink on the cave, navy ground / mint ink on paper. The label is body-face because the captain wrote a sentence, not a chrome string. */ .cta { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: var(--cta-bg); color: var(--cta-ink); font-family: var(--body); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: .002em; padding: 18px 26px; border-radius: var(--r-chip); } .cta i { font-style: normal; font-size: 15px; } .cta:hover { filter: brightness(1.07); } :root[data-finish='light'] .cta:hover { filter: brightness(1.35); } /* The secondary text CTA. The bracket is the captain's; the two words inside it are the neutral pair of store links. */ .cta2 { margin: 18px 0 0; font-size: 15px; line-height: 22px; color: var(--dim); } .cta2 a { color: var(--text); text-underline-offset: 3px; } .cta2 a:hover { color: var(--sage); } /* ========================= SECTION 1 · THE HERO ========================== Sized so the whole fold — nav, copy, rack, air — closes inside 900px at 1440. The rack (film + leader + read-out) is taller than the old plate alone, so the padding gives back what the read-out takes: 64 nav + 64 + 699 plate + 10 leader + 46 read-out + 30 air = 913, and the read-out's last row sits at ~891 — inside the fold. (Measured at 1440×900.) ========================================================================= */ .hero { position: relative; padding: 64px 0 30px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 88px; align-items: center; position: relative; z-index: 1; /* the rack and copy stand on the ground */ } .hero-cta { margin-top: 40px; } /* --- THE PIXEL-FIELD GROUND -------------------------------------------- The product's own 5×5 alphabet, seeded-dithered at the page's left edge (the shipped PixelScatter idiom — a dither in an edge zone, never a gradient) and lagging the scroll behind the copy. The cave stays untextured; this is the model's voice printing at the fold's edge. */ .hero-pix { position: absolute; left: 0; bottom: 48px; width: 340px; height: 210px; z-index: 0; pointer-events: none; } .hero-pix svg { display: block; width: 100%; height: auto; } /* --- THE RACK ------------------------------------------------------------ The film plate, the leader and the read-out move as one instrument, so the parallax lag (v2.js) never pulls them apart. */ .hero-rack { justify-self: end; width: 372px; max-width: 100%; display: flex; flex-direction: column; align-items: center; } /* --- THE FILM ------------------------------------------------------------ The real app film at phone proportion (1080×1920), auto-looping muted, inside the page's one plate idiom under the page's one nameplate strip. No glow, no bezel, no shadow — the seam does the separation. */ .hero-film { width: 100%; background: var(--deep); position: relative; } /* The hero's film plate carries no nameplate — the film is the card, and the read-out below names it. Hiding the .np also removes its seam, so the film runs edge-to-edge under the plate's top border. */ .hero-film .np { display: none; } /* The v4 asset is the app stage alone: no baked transport strip, no baked caption band. The video is 1080×1920 and displays at its natural aspect ratio inside the plate. */ .hf-video { display: block; width: 100%; height: auto; } /* THE LEADER — one hairline from the plate's seam to the read-out, capped as a dimension is capped on a drawing. */ .hero-lead { position: relative; flex: none; width: var(--hair); height: 10px; background: var(--faint); opacity: .55; } .hero-lead::before, .hero-lead::after { content: ''; position: absolute; left: 50%; width: 7px; height: var(--hair); background: var(--faint); transform: translateX(-50%); } .hero-lead::before { top: 0; } .hero-lead::after { bottom: 0; } /* THE READ-OUT — the number the film isolates, printed under the footage it came off as a recessed strip (the page's nameplate ground), with the disagreement wash drawn beneath it by the same call that washes §3's band. */ .hero-gap { position: relative; width: 100%; overflow: hidden; display: flex; align-items: baseline; gap: 14px; padding: 10px 14px 12px; border-top: var(--hair) solid var(--seam); background: var(--nameplate); } .hg-k { flex: 1; color: var(--dim); font-size: var(--chrome); letter-spacing: .12em; } .hg-num { font-size: 30px; line-height: 34px; color: var(--text); letter-spacing: -.01em; white-space: nowrap; } .hg-band { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(0); transform-origin: left; } /* THE CLICK PATH IS A MEASUREMENT (overdrive): the hero CTA's arrow slides and a hairline draws from it, in the slab's own ink. The arrow is the door; the line is the route to the number. The close section's slab is untouched. */ .hero .cta { position: relative; } .hero .cta i { transition: transform .25s cubic-bezier(.3,.7,.3,1); } .hero .cta:hover i { transform: translateX(5px); } /* absolute, so the hairline costs zero layout at rest and draws with transform only — no width animation, no invisible air in the slab */ .hero .cta::after { content: ''; position: absolute; right: 26px; top: 50%; margin-top: -.5px; width: 44px; height: var(--hair); background: var(--cta-ink); opacity: .3; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.3,.7,.3,1); } .hero .cta:hover::after, .hero .cta:focus-visible::after { transform: scaleX(1); } /* --- 2026-08-15 · THE BRIDGE CUT (promoted from hero-concept.html) ------- The four-beat display stack: dim setup (their number), bright turn (ours), the pixel payoff (the bet). The class beats the base h1 element rules on specificity, so the retired string's measure (max-width 660px) must be explicitly released. Sized so the longest beat ("The gap is the bet.", with the wide pixel stamp) holds the 740px copy column. */ .vh1 { margin: 0; max-width: none; font-family: var(--body); font-weight: 500; font-size: clamp(46px, 6vw, 76px); line-height: 1.06; letter-spacing: -.026em; color: var(--text); } .vh1-l { display: block; } /* the setup stands one ink step down — the eye should land on the move */ .vh1-scope { color: var(--dim); } /* THE STAMP: the pixel console face, UPPERCASE (captain ruling 2026-08-15 — lowercase read small, and caps are on-contract §7.15), in the page's own voice law --nav-accent: sage on the cave, printed ink-green on paper. */ .vh1-gap { white-space: nowrap; font-family: var(--console); font-size: .78em; letter-spacing: .04em; text-transform: uppercase; color: var(--nav-accent); } /* THE PRICE, MEASURED — the undercut stated as the page's own schema; the figures print in the data face, never dressed up */ .price-line { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--dim); } .price-line .data { color: var(--text); font-size: .92em; } /* the copy block's one entrance: a quiet rise, staggered, expo-out — armed by v2.js only for visitors who accept motion */ .js.motion .hero-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.16,.84,.3,1), transform .8s cubic-bezier(.16,.84,.3,1); } .js.motion .hero-copy.in > * { opacity: 1; transform: none; } .js.motion .hero-copy.in > *:nth-child(2) { transition-delay: .08s; } .js.motion .hero-copy.in > *:nth-child(3) { transition-delay: .16s; } @media (max-width: 1180px) { .vh1 { font-size: clamp(44px, 6.4vw, 72px); } } @media (max-width: 760px) { .vh1 { font-size: clamp(40px, 10vw, 56px); } } /* ======================= SECTION 2 · THE PROBLEM ========================= THE WELL — the page's ONE recess. The villain occupies a cut in the faceplate: depth ground, one seam, module radius, with the two diagnostic plates standing up out of it. It reads as depth on the cave (where a full-bleed --deep stripe is nearly invisible against --bg) and as a recessed well on paper, from the same two tokens. ========================================================================= */ .problem { border-top: var(--hair) solid var(--divider); padding: var(--sy) 0; } .well { background: var(--deep); border: var(--hair) solid var(--seam); border-radius: var(--r-module); padding: 56px 56px 60px; } .problem-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: center; } .problem-copy h2 { max-width: 17ch; } .problem-copy p { margin: 22px 0 0; font-size: 17px; line-height: 28px; color: var(--dim); max-width: 46ch; } /* ROUND 2c — THE CALIBRATION PAIR. One instrument, one header, two plots of the same picture: what the model SAID against what actually HAPPENED, before and after calibration. The hairline between them is the only separation they need; each half's note sits under the half it describes. */ .fit { margin: 0; } /* THE HEADER (round 2b). The nameplate is chrome, and chrome is not where this reader looks first — so the panel says what the drawing IS in the body face, at the top, before the picture. It is the loudest text in the instrument; the notes under the plots sit one ink step back. */ .fit-head { margin: 0; padding: 18px 18px 6px; font-size: 16px; line-height: 24px; color: var(--text); } .fit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fit-cell { display: flex; flex-direction: column; padding: 10px 18px 20px; min-width: 0; } .fit-cell + .fit-cell { border-left: var(--hair) solid var(--divider); } .fit-plot svg { display: block; width: 100%; height: auto; } /* the plot's parts, styled from the tokens rather than from the script */ .fit-plot .gr line { stroke: var(--gridline); stroke-width: 1; vector-effect: non-scaling-stroke; } .fit-plot .ax line { stroke: var(--divider); stroke-width: 1; vector-effect: non-scaling-stroke; } /* the reference: where what it said and what happened are the same number */ .fit-plot .diag { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; } .fit-plot .miss line { stroke: var(--dim); stroke-width: 1; vector-effect: non-scaling-stroke; } .fit-plot .mk rect { fill: var(--text); } .fit-plot .lb { font-family: var(--body); font-size: 12px; fill: var(--faint); } .fit-note { margin: 12px 0 0; font-size: 14px; line-height: 21px; color: var(--dim); } /* THE AVERAGE MISS, as a length on one shared scale — never a printed figure. The worst case fills the track; the other is measured against it. */ /* pinned to the bottom of the cell so the two bars sit on ONE line and the comparison is read as a comparison */ .fit-avg { margin-top: auto; padding-top: 16px; } .fit-avg .k { display: block; margin-bottom: 6px; font-size: 13px; line-height: 18px; color: var(--faint); } .fit-avg .bar { display: block; height: 6px; max-width: 100%; background: var(--dim); border-radius: 1px; min-width: 2px; } /* ======================= SECTION 3 · THE SOLUTION ======================== ROUND 2 — A BENCH OF TWO INSTRUMENTS. Round 1 narrowed the board to 884 and ruled the key beside it, but the ROWS were still a phone ledger: SIDE held one team code in 354px while every number crowded the right edge. Desktop width is not more room for the same row — it is room for MORE INSTRUMENT. · the five columns now SHARE the width (the lead column is capped, the value columns widen), and the board's type steps up one, so the rows fill their height as well as their width; · GAP is the largest numeral on the board, because GAP is the section; · beside it stands the ISOLATED read-out — the one washed row, pulled out at display size — with the key ruled under it. The read-out is aligned by MEASUREMENT (v2.js) onto the row it came from, and one hairline leader crosses the gutter between them. ========================================================================= */ .solution { border-top: var(--hair) solid var(--divider); padding: var(--sy) 0; } .solution-head { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 80px; align-items: start; margin-bottom: 44px; } .solution-head h2 { max-width: 420px; } .solution-head p { margin: 0; font-size: 17px; line-height: 28px; color: var(--dim); max-width: 54ch; } .solution-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 52px; align-items: start; } /* THE LEADER. One hairline from the washed row to the read-out, capped at the board the way a dimension is capped on a drawing — the same vocabulary the villain's misses and the ANALYZE icon use. Its y is measured in v2.js. */ .lead-rule { position: absolute; display: none; height: var(--hair); background: var(--faint); opacity: .5; } .lead-rule::before { content: ''; position: absolute; left: 0; top: -3px; width: var(--hair); height: 7px; background: var(--faint); } /* The merged ledger the app prints: the columns spelled ONCE, a thin market-name divider per market, one row per side, a book-only price pill on the right. GAP prints ONCE per market as a FLAT WASHED BAND filling its column — the shipped rowTinted idiom, never a bubbly chip (CLAUDE.md, "Matchup details — tabs"). */ /* THE COLUMNS SHARE THE WIDTH. The lead column is CAPPED at the widest thing it ever holds ("BUF +1.5" sets 96px at this step), and the four value columns take the rest in equal shares — so widening the instrument widens the DATA, which is the opposite of what a stretched phone ledger does. */ .bd-cols, .bd-row { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1.14fr); gap: 0 22px; } .bd-cols { padding: 18px 24px 11px; border-bottom: var(--hair) solid var(--divider); font-family: var(--console); font-size: var(--chrome); letter-spacing: .1em; color: var(--faint); text-align: right; } .bd-cols .lead { text-align: left; } /* OPTICAL ALIGNMENT, measured: the GAP value sits 10px inside its washed band and the price sits 10px inside its pill plus a 1px border, so the two headers are inset by exactly that much. Every column header now sits over the last glyph of its own column, not over the column's box. */ .bd-cols span:nth-child(4) { padding-right: 10px; } .bd-cols span:nth-child(5) { padding-right: 11px; } .bd-div { display: flex; align-items: center; gap: 12px; padding: 22px 24px 9px; border-top: var(--hair) solid var(--divider); } .bd-div:first-of-type { border-top: none; } .bd-div span { font-family: var(--console); font-size: var(--chrome); letter-spacing: .15em; color: var(--dim); } .bd-div::after { content: ''; flex: 1; height: var(--hair); background: var(--gridline); } .bd-row { align-items: stretch; min-height: 56px; padding: 0 24px; } .bd-row > * { display: flex; align-items: center; min-width: 0; } .bd-side { gap: 10px; font-family: var(--body); font-size: 18px; color: var(--text); white-space: nowrap; } .bd-side b { font-weight: 500; } .bd-side i { font-style: normal; font-family: var(--mono); font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums; } .bd-v { justify-content: flex-end; white-space: nowrap; font-family: var(--mono); font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; } /* the wash is a flat band the width of its column, top to bottom of the row. GAP is set one step ABOVE its neighbours: on a page whose §3 headline is "We isolate the gap", the gap should be the loudest numeral on the board. */ .bd-gap { justify-content: flex-end; padding: 0 10px; white-space: nowrap; font-family: var(--mono); font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; } .bd-pricec { justify-content: flex-end; } .bd-price { width: 100%; text-align: right; padding: 7px 10px; white-space: nowrap; font-family: var(--mono); font-size: 16px; line-height: 22px; color: var(--text); font-variant-numeric: tabular-nums; border: var(--hair) solid var(--divider); border-radius: var(--r-chip); } .bd-row:last-child { margin-bottom: 14px; } /* --- THE READ-OUT -------------------------------------------------------- The one washed row, pulled off the board and drawn at display size: one plate, one recessed nameplate, one number in a full-bleed heat-washed band (the shipped rowTinted idiom), then the three reads that produced it. The wash colour is computed in v2.js by heatScale.disagreementWash against WIN_PCT_STOPS — the same call, on the same number, as the board's band. */ .readout { min-width: 0; } .isolate { background: var(--plate); } .iso-band { display: flex; align-items: center; padding: 18px 22px 20px; min-height: 108px; } .iso-number { font-size: 80px; line-height: 84px; color: var(--text); letter-spacing: -.01em; white-space: nowrap; } .iso-unit { padding: 14px 22px 0; font-family: var(--console); font-size: var(--chrome); letter-spacing: .1em; color: var(--faint); } .iso-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; border-top: var(--hair) solid var(--divider); padding: 16px 22px 18px; } .iso-read .k { display: block; font-family: var(--console); font-size: var(--chrome); letter-spacing: .1em; color: var(--faint); } .iso-read .v { display: block; margin-top: 7px; font-size: 21px; line-height: 25px; color: var(--text); } /* the column key — the page's only teaching copy, set as chrome on a ruled list, the way a legend is drawn beside an instrument. In round 2 it sits UNDER the read-out, so the rail reads top to bottom as: the number, what made it, what the words mean. */ .key { margin: 30px 0 0; padding: 0; } .key-row { display: block; padding: 13px 0 15px; border-top: var(--hair) solid var(--divider); } .key-row:first-child { border-top: none; padding-top: 0; } .key dt { font-family: var(--console); font-size: var(--chrome); letter-spacing: .15em; color: var(--dim); } .key dd { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--faint); } /* THE WASH LADDER. The board colours one row and leaves two bare, and a skeptic reads that as an inconsistency until something says otherwise. The ladder is the product's own published stops (WIN_PCT_STOPS 3 / 6 / 10), washed by the same function that washes the board, with the silence under the first stop stated in plain English. */ .ladder { display: flex; gap: 6px; margin-top: 13px; } .ladder span { flex: 1; min-width: 0; padding: 7px 0 6px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } .ladder-note { margin: 9px 0 0; font-size: 13px; line-height: 19px; color: var(--faint); } /* ====================== SECTION 4 · HOW IT WORKS ========================= A rack of three: each step opens on its own hairline rule, so the row reads as one instrument panel with three positions rather than three floating illustrations. ========================================================================= */ .works { border-top: var(--hair) solid var(--divider); padding: var(--sy) 0; } .works-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .work { border-top: var(--hair) solid var(--divider); padding-top: 18px; } .work-n { font-family: var(--console); font-size: var(--chrome); letter-spacing: .15em; color: var(--faint); } .work-icon { margin-top: 26px; } .work-icon svg { display: block; } .work h3 { margin: 28px 0 0; font-family: var(--console); font-weight: 400; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); } .work p { margin: 13px 0 0; font-size: 16px; line-height: 26px; color: var(--dim); max-width: 34ch; } /* ================== SECTION 4c · ASKED, ANSWERED (2026-08-15) ============ The objections, in the one instrument idiom: hairline rows on the plate, the question in the body face's medium, the answer one ink step down. Never cards. */ .faq { border-top: var(--hair) solid var(--divider); padding: var(--sy) 0; } .faq h2 { margin-bottom: 36px; } .faq-row { padding: 22px 24px; } .faq-row + .faq-row, .cov-row + .cov-row { border-top: var(--hair) solid var(--divider); } .faq-row h3, .cov-row h3 { margin: 0; font-family: var(--body); font-weight: 500; font-size: 17px; line-height: 26px; color: var(--text); } .faq-row p, .cov-row p { margin: 6px 0 0; font-size: 15px; line-height: 24px; color: var(--dim); max-width: 76ch; } /* WHAT'S COVERED (2026-08-15) — the solution section's scope strip: same row idiom as the FAQ, standing under the bench it extends */ .coverage { margin-top: 56px; } .cov-row { padding: 20px 24px; } /* ======================= SECTION 5 · THE CLOSE =========================== */ .close { border-top: var(--hair) solid var(--divider); padding: 116px 0 124px; } .close-in { text-align: center; } .close h2 { font-size: 42px; line-height: 50px; max-width: 26ch; margin: 0 auto; } .close-sub { margin: 20px auto 0; font-size: 17px; line-height: 28px; color: var(--dim); max-width: 52ch; } .close .cta { margin-top: 36px; } /* ================================ FOOTER ================================= */ .foot { border-top: var(--hair) solid var(--seam); background: var(--deep); padding: 58px 0 0; } /* the captain's footer line, carried as the page's last sentence */ .foot-line { margin: 0 0 52px; text-align: center; font-family: var(--body); font-weight: 400; font-size: 20px; line-height: 30px; color: var(--text); } .foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 60px; align-items: start; padding-top: 46px; border-top: var(--hair) solid var(--divider); } .foot-mark { height: 23px; width: 148px; } .foot-shark { margin-top: 22px; opacity: .8; } .foot-shark svg { display: block; } .foot-store { display: flex; flex-direction: column; gap: 12px; } /* House-chrome doors at the two badges' own proportions. Apple's and Google's supplied artwork replaces these 1:1 at build. */ .store { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; text-decoration: none; min-width: 186px; height: 54px; padding: 0 18px; border: var(--hair) solid var(--seam); border-radius: 8px; background: var(--plate); color: var(--text); } .store:hover { border-color: var(--sage-dim); } .store-k { font-size: var(--chrome); letter-spacing: .08em; color: var(--faint); } .store-v { font-family: var(--body); font-weight: 500; font-size: 19px; line-height: 22px; color: var(--text); } .foot-cols { display: flex; gap: 56px; } .foot-col { display: flex; flex-direction: column; gap: 11px; } .foot-col h4 { margin: 0 0 7px; font-size: var(--chrome); letter-spacing: .15em; color: var(--faint); font-weight: 400; } .foot-col a { text-decoration: none; color: var(--dim); font-size: 14px; } .foot-col a:hover { color: var(--text); } .foot-fine { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 54px; padding: 18px 0 26px; border-top: var(--hair) solid var(--divider); } .foot-fine .chrome { font-size: var(--chrome); letter-spacing: .08em; color: var(--faint); } /* the one glyph the console face does not carry */ .rb { font-family: var(--body); letter-spacing: 0; } /* ========================================================================= BREAKPOINTS — one column rule, four steps. Everything on this page is real DOM, so every surface REFLOWS rather than scaling a screenshot. ========================================================================= */ @media (max-width: 1360px) { :root { --sy: 88px; } .col { width: min(1200px, 100% - 64px); } .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 60px; } .hero-rack { width: 320px; } h1 { font-size: 46px; line-height: 54px; max-width: 660px; } .problem-grid, .solution-head { gap: 56px; } .well { padding: 48px 44px 52px; } .solution-body { gap: 44px; } .iso-number { font-size: 70px; line-height: 74px; } } @media (max-width: 1180px) { h1 { font-size: 42px; line-height: 50px; max-width: 620px; } .hero { padding: 60px 0 72px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; } .hero-rack { justify-self: start; } .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .problem-copy h2 { max-width: 26ch; } .fit { max-width: 660px; } .solution-head { grid-template-columns: minmax(0, 1fr); gap: 20px; } .solution-head h2 { max-width: 24ch; } /* THE BENCH STAYS TWO-UP. A full-width board is the round-1 mistake in a different costume: the columns would spread and the rows would go airy again. Only the proportions tighten — the board keeps its density and the read-out keeps its leader all the way down to the phone. */ .solution-body { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; } .works-grid { gap: 36px; } .foot-in { gap: 44px; } .foot-cols { gap: 40px; } } /* One step down for the whole bench, so a 620px board carries a 620px board's type instead of a desktop board's type in a smaller frame. */ @media (max-width: 1080px) { .solution-body { gap: 34px; } .bd-cols, .bd-row { grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 0 16px; } .bd-cols { padding: 16px 18px 10px; } .bd-div { padding: 19px 18px 8px; } .bd-row { min-height: 48px; padding: 0 18px; } .bd-side { font-size: 16px; } .bd-side i { font-size: 14px; } .bd-v { font-size: 16px; } .bd-gap { font-size: 19px; padding: 0 9px; } .bd-price { font-size: 15px; padding: 6px 9px; } .iso-band { padding: 16px 18px 18px; min-height: 96px; } .iso-number { font-size: 60px; line-height: 64px; } .iso-unit { padding: 12px 18px 0; } .iso-foot { padding: 14px 18px 16px; gap: 12px; } .iso-read .v { font-size: 19px; } } @media (max-width: 980px) { h2 { font-size: 30px; line-height: 38px; } .close h2 { font-size: 34px; line-height: 42px; } .works-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .work { padding-top: 16px; padding-bottom: 22px; } .work-icon { margin-top: 20px; } .work h3 { margin-top: 22px; } .work p { max-width: 52ch; } .foot-in { grid-template-columns: minmax(0, 1fr); gap: 40px; } } @media (max-width: 760px) { :root { --sy: 60px; } .col { width: calc(100% - 32px); } .hero { padding: 40px 0 52px; } h1 { font-size: 32px; line-height: 39px; letter-spacing: -.018em; max-width: none; } .lede { font-size: 16px; line-height: 26px; } .hero-cta { margin-top: 30px; } .hero-rack { width: 100%; max-width: 420px; } /* the pixel ground shrinks with the column; the CTA's hairline route is a desktop detail, so the phone keeps the slab clean */ .hero-pix { width: 200px; height: 130px; bottom: 20px; } .hero .cta::after { display: none; } .cta { display: flex; justify-content: space-between; font-size: 15px; padding: 17px 20px; } .cta2 { font-size: 14px; } /* THE PHONE KEEPS ITS DENSER CHROME STEP. The captain's note was about desktop, and at 390 a 12px tracked label eats the width it is labelling. .nav-cta { padding: 8px 12px; letter-spacing: .1em; } .np { height: 34px; padding: 0 12px; gap: 8px; } .np .t { font-size: var(--chrome); letter-spacing: .12em; } .np .q { font-size: 10px; letter-spacing: .08em; } /* the read-out keeps its structure and drops one type step; the number stays the loudest object on the screen, which is the whole point of it */ .iso-band { padding: 14px 14px 16px; min-height: 92px; } .iso-number { font-size: 56px; line-height: 60px; } .iso-unit { padding: 11px 14px 0; } .iso-foot { padding: 14px 14px 16px; gap: 12px; margin-top: 16px; } .iso-read .v { font-size: 19px; } h2 { font-size: 26px; line-height: 33px; } .problem-copy p, .solution-head p { font-size: 16px; line-height: 26px; } .well { padding: 28px 20px 30px; } /* at phone width the two plots stack, and each gets the WHOLE width — so the drawing is bigger on a phone than it is in either desktop cell */ .fit-head { padding: 16px 14px 2px; font-size: 15px; line-height: 22px; } .fit-pair { grid-template-columns: minmax(0, 1fr); } .fit-cell { padding: 10px 14px 18px; } .fit-cell + .fit-cell { border-left: none; border-top: var(--hair) solid var(--divider); padding-top: 16px; } .fit-note { font-size: 13px; line-height: 20px; } .solution-head { margin-bottom: 26px; } .bd-cols, .bd-row { grid-template-columns: minmax(0, 1fr) 44px 44px 60px 62px; gap: 0 8px; } .bd-cols { padding: 13px 12px 8px; font-size: 9px; letter-spacing: .06em; } .bd-div { padding: 15px 12px 6px; } .bd-div span { font-size: 10px; letter-spacing: .12em; } .bd-row { padding: 0 12px; min-height: 40px; } .bd-side { font-size: 14px; gap: 6px; } .bd-side i { font-size: 12px; } .bd-v { font-size: 13px; } .bd-gap { font-size: 15px; padding: 0 5px; } .bd-price { font-size: 12px; padding: 5px 6px; } /* the bench finally lies down: no gutter left to cross, so no leader */ .solution-body { grid-template-columns: minmax(0, 1fr); gap: 26px; } .readout { grid-template-columns: minmax(0, 1fr); gap: 26px; } .ladder-note { letter-spacing: .06em; } .key dd { font-size: 13px; } .ladder-note { font-size: 12px; line-height: 18px; } .close { padding: 66px 0 72px; } .close h2 { font-size: 28px; line-height: 35px; } .close-sub { font-size: 16px; line-height: 26px; } .foot { padding-top: 44px; } .foot-line { font-size: 18px; line-height: 28px; margin-bottom: 40px; } .foot-store { width: 100%; } .store { width: 100%; min-width: 0; } .foot-cols { flex-wrap: wrap; gap: 32px 44px; } .foot-fine { margin-top: 40px; gap: 8px; } .foot-fine .grow { display: none; } } /* Below the phone target the board is the binding constraint: one more type step keeps all five columns on screen instead of scrolling a five-column ledger sideways. */ @media (max-width: 360px) { .bd-cols, .bd-row { grid-template-columns: minmax(0, 1fr) 36px 36px 52px 54px; gap: 0 6px; } .bd-cols { padding: 12px 10px 7px; } .bd-div { padding: 14px 10px 6px; } .bd-row { padding: 0 10px; } .bd-side { font-size: 12px; gap: 4px; } .bd-side i { font-size: 10px; } .bd-v { font-size: 11px; } .bd-gap { font-size: 13px; padding: 0 4px; } .bd-price { font-size: 10px; padding: 4px 5px; } } @media (max-width: 400px) { .iso-number { font-size: 50px; line-height: 54px; } /* below the phone target the lead column runs out first — "Under 8.5" is the widest thing it holds, so the line token tightens before the name does */ .bd-side { gap: 5px; } .bd-side i { font-size: 11px; } .foot-cols { gap: 26px 30px; } } /* ====================== LEGAL PAGES (2026-08-20) ======================== terms-of-service.html / privacy-policy.html — the legal text brought over from the old landing VERBATIM (captain ruling: no rewrites), re-dressed in the page's own chrome: one instrument plate, hairline section rows, prose in the page's type scale. No pixel pair on the nameplate — the stepping pair marks where the MODEL speaks; this is the company. */ .legal { margin: 96px 0 0; } .legal .np .t { letter-spacing: .16em; } .legal h1 { margin: 56px 0 0; font-family: var(--body); font-weight: 500; font-size: 42px; line-height: 50px; letter-spacing: -.02em; color: var(--text); } .legal-lede { margin: 18px 0 0; font-size: 17px; line-height: 28px; color: var(--text); max-width: 72ch; } .legal-body { margin-top: 8px; max-width: 760px; } .legal-sec { border-top: var(--hair) solid var(--divider); padding: 30px 0 6px; } .legal-sec h2 { margin: 0 0 14px; font-family: var(--body); font-weight: 500; font-size: 19px; line-height: 27px; color: var(--text); } .legal-sec p { margin: 0 0 14px; font-size: 16px; line-height: 26px; color: var(--dim); } .legal-sec a, .legal-lede a { color: var(--sage); text-underline-offset: 3px; } .legal-contact { border-top: var(--hair) solid var(--divider); padding: 30px 0 6px; } .legal-contact p { margin: 0; font-size: 16px; line-height: 26px; color: var(--dim); } .legal-contact a { color: var(--sage); text-underline-offset: 3px; } /* the old pages' footer content, kept verbatim, re-set in the page's chrome */ .legal-note { border-top: var(--hair) solid var(--seam); margin: 0; padding: 34px 0 8px; font-size: 13px; line-height: 22px; color: var(--faint); max-width: 84ch; } .legal-note .trademark { display: block; margin: 0 0 16px; font-family: var(--console); font-size: var(--chrome); letter-spacing: .1em; color: var(--dim); } .legal-note .badge { margin: 16px 0 0; display: inline-block; opacity: .85; } @media (max-width: 760px) { .legal { margin-top: 56px; } .legal h1 { font-size: 30px; line-height: 38px; } } /* =========================== THE OVERDRIVE'S OFF SWITCH ================= Reduced motion keeps the law the page has always kept: the film's first frame held, nothing else moves. The read-out already prints its final value statically (the count-up is JS-gated), so the parallax and the CTA's sliding arrow are the only things that need to go quiet. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .hero .cta i, .hero .cta::after { transition: none; } .hero .cta:hover i, .hero .cta:hover::after, .hero .cta:focus-visible::after { transform: none; } .hero-rack, .hero-pix { transform: none !important; } }