/* Hallmark · shape: Feature Stack · genre: modern-minimal · theme: Furrow (deal 1/3, seed preview-corkdoor-simple-record-02fe·5240327e·2026-10-30·r0) · job: join · draw: 26fcfa (the board runs behind the whole first screen by request)
 * hero: Corridor · nav: masthead · footer: statement · imagery: a full-bleed sand board animation built from notes and type behind the hero, one screen tall, a loop bar instead of buttons, the product built in four slots below, no photographs · signature: loose notes pinned around the edges of a full-bleed sand board that run down the window edges and settle into three piles, one per door, under the headline and buttons
 * axes: light/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the board and the headline share the first screen; the sand is a light fine grain and the notes run down the edges and settle below the text, never over the buttons, so the centred headline still wins on size */
/* Hallmark · waive 80 · the board is a diagram of how loose receipts and dates sort into one pile for each door, named by its aria-label · the owner asked for a board animation in the hero */
/* Hallmark · waive 47c · the board and its notes are a built sample of the sorting, set in type and geometry with no faked bevels · the board is the name's own idea */
/* Hallmark · answered F4 · the second hero action is a transparent key with a ruled border, outlined and not filled, so one filled primary stands on the screen */
/* Hallmark · answered F24 · the notebook card is the theme's own surface, a 1px ink ring with one lift shadow, and it is the only lifted surface in each capture */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 80px; --pane-top: var(--space-2xl); }
/* Safari can treat a clipped html or body as the scroller for sticky, so the tab bar never holds. Nothing on the page is wider than the screen, and the hero clips its own notes. */
html, body { overflow-x: visible; }

/* Controls, all eight states */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-sheet) 32%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--color-ink) 10%, transparent); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-sheet)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-muted); box-shadow: none; }
.btn--quiet:hover { background: var(--color-paper-2); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Nav: a masthead, the wordmark centred over a rule */
.nav { border-bottom: var(--rule-hair) solid var(--color-ink); }
.nav .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--nav-h); }
.wordmark { grid-column: 2; font: 600 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.nav__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-lg); }
.nav__action { font-weight: 500; white-space: nowrap; }
.nav__action:hover { text-decoration-thickness: 2px; }

/* Hero: a corridor on a full-bleed sand board, one screen tall, the notes run down the window edges and settle in three piles under the text */
.hero { position: relative; isolation: isolate; height: calc(100svh - var(--nav-h)); min-height: 0; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: clamp(var(--space-md), 3.5svh, var(--space-xl)); padding: var(--space-lg) var(--gutter) var(--space-xl); overflow: clip; border-bottom: var(--rule-hair) solid var(--color-ink);
  background:
    url("./assets/sand-grain.png") 0 0 / 256px 256px,
    url("./assets/sand-glint.png") 0 0 / 224px 224px,
    url("./assets/sand-tone.png") 0 0 / 640px 640px,
    var(--color-sand);
  box-shadow: inset 0 var(--space-md) var(--space-lg) calc(-1 * var(--space-sm)) color-mix(in oklab, var(--color-ink) 14%, transparent); }
.hero__col { position: relative; z-index: var(--z-raised); display: grid; justify-items: center; gap: clamp(var(--space-sm), 3svh, var(--space-xl)); max-width: 56rem; text-align: center; }
.hero h1 { max-width: none; font-size: clamp(2.5rem, min(9svh, 8vw), 6.5rem); line-height: 1; }
.hero .lead { max-width: 28ch; color: var(--color-ink); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

/* The board: three piles in a row under the text. Notes start along the window edges and are aimed at their spots by script. */
.board { --cw: clamp(7.5rem, 17vw, 15rem); display: grid; grid-template-columns: repeat(3, minmax(0, var(--cw))); gap: var(--space-sm) var(--space-md); justify-content: center; align-items: start; width: 100%; pointer-events: none; }
.col { display: contents; }
.group--u1 { order: 1; }
.group--u2 { order: 2; }
.group--u3 { order: 3; }
.group { display: grid; gap: clamp(var(--space-3xs), 0.9svh, var(--space-xs)); align-content: start; }
.group__head { padding: clamp(var(--space-3xs), 0.8svh, var(--space-xs)) var(--space-md); border-radius: 2px; background: var(--color-sheet); color: var(--color-ink); border-bottom: 3px solid var(--color-ink); font: 600 clamp(0.875rem, 1.9svh, 1rem)/1.2 var(--font-display); letter-spacing: var(--tracking-display); box-shadow: 0 1px 1px color-mix(in oklab, var(--color-ink) 22%, transparent), 0 8px 12px -6px color-mix(in oklab, var(--color-ink) 40%, transparent); animation: head-in 4.4s var(--ease-out) both; }
.note { --sx: 0px; --sy: 0px; --sr: 0deg; position: relative; display: grid; gap: var(--space-3xs); padding: clamp(var(--space-2xs), 1.1svh, var(--space-sm)) var(--space-md); border-radius: 2px; background: var(--color-sheet); color: var(--color-ink); box-shadow: 0 1px 1px color-mix(in oklab, var(--color-ink) 22%, transparent), 0 8px 12px -6px color-mix(in oklab, var(--color-ink) 40%, transparent); animation: note-y 4.4s both, note-x 4.4s both, note-r 4.4s both; animation-delay: calc(var(--i, 0) * 100ms); }
.note--sticky { background: var(--color-accent-soft); }
.note--form { background: var(--color-paper-2); }
.note::before { content: ""; position: absolute; top: clamp(var(--space-3xs), 0.9svh, var(--space-xs)); left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--color-accent) 45%, var(--color-sheet)) 0, var(--color-accent) 38%, color-mix(in oklab, var(--color-accent) 62%, var(--color-ink)) 100%); box-shadow: 2px 4px 3px -1px color-mix(in oklab, var(--color-ink) 50%, transparent), 0 0 0 1px color-mix(in oklab, var(--color-accent) 55%, var(--color-ink)); }
.note__kind { padding-top: clamp(var(--space-sm), 2svh, var(--space-md)); font-size: clamp(0.8125rem, 1.7svh, 1rem); font-weight: 500; line-height: 1.2; }
.note__val { font-family: var(--font-outlier); font-size: clamp(0.75rem, 1.5svh, 0.875rem); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
/* the run: drop in, hold at the start spot, then one curved glide into the pile. Down and across ease differently, so the path bends instead of turning a corner. */
@keyframes note-y {
  0% { opacity: 0; transform: translateY(calc(var(--sy) - 50%)); animation-timing-function: var(--ease-out); }
  10% { opacity: 1; transform: translateY(var(--sy)); animation-timing-function: linear; }
  30% { opacity: 1; transform: translateY(var(--sy)); animation-timing-function: cubic-bezier(0.12, 0.72, 0.25, 1); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes note-x {
  0%, 30% { translate: var(--sx) 0; animation-timing-function: cubic-bezier(0.72, 0, 0.28, 1); }
  100% { translate: 0px 0; }
}
@keyframes note-r {
  0%, 30% { rotate: var(--sr); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  100% { rotate: var(--fr, 0deg); }
}
@keyframes head-in {
  0%, 66% { opacity: 0; transform: translateY(calc(-1 * var(--space-xs))); }
  88%, 100% { opacity: 1; transform: none; }
}
.board.measuring .note, .board.measuring .group__head, .board.measuring .loopbar::after { animation: none; }

/* The loop bar: it fills once the notes have settled, and the board restarts when it is full */
.loopbar { position: absolute; left: 50%; bottom: var(--space-sm); translate: -50% 0; z-index: var(--z-raised); width: clamp(8rem, 24vw, 16rem); height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--color-ink) 16%, transparent); overflow: hidden; }
.loopbar::after { content: ""; position: absolute; inset: 0; background: var(--color-ink); transform-origin: left; transform: scaleX(0); animation: loop-fill 12s linear 5.3s both; }
@keyframes loop-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .note, .group__head { animation: none; opacity: 1; transform: none; }
  .note { rotate: var(--fr, 0deg); }
  .loopbar { display: none; }
}
@media (max-height: 760px), (max-width: 60rem) {
  .note__val { display: none; }
  .hero { padding-block: var(--space-md) var(--space-lg); }
  .hero h1 { font-size: clamp(2.25rem, min(8svh, 8vw), 5rem); }
  .hero .lead { font-size: var(--text-md); }
  .hero__col { gap: var(--space-sm); }
  .loopbar { bottom: var(--space-xs); }
}
@media (max-width: 40rem) {
  .tabs ul { gap: var(--space-2xs); }
  .tabs a { padding: 0 var(--space-3xs); font-size: var(--text-sm); white-space: nowrap; }
}
@media (max-width: 38rem) {
  .actions { flex-wrap: nowrap; }
  .actions .btn { padding: 0 var(--space-md); }
  .board { gap: var(--space-xs); }
  .group__head { padding: var(--space-3xs) var(--space-xs); font-size: var(--text-sm); }
  .note { padding: var(--space-2xs) var(--space-xs); }
  .note::before { top: var(--space-3xs); width: 10px; height: 10px; }
  .note__kind { padding-top: var(--space-sm); font-size: var(--text-xs); }
}

/* Section scaffolding */
.section { padding-block: var(--section-gap-s); }
.section--tight { padding-block: var(--space-2xl); }
.section--tight h2 { font-size: var(--text-3xl); }
.head { display: grid; gap: var(--space-md); max-width: 44rem; }
.head .lead { color: var(--color-muted); }

/* Where the records live now: ruled rows */
.rows { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; min-height: 64px; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { grid-column: 1 / span 5; font-size: var(--text-lg); }
.rows p { grid-column: 6 / span 7; font-size: var(--text-md); color: var(--color-muted); max-width: 40ch; }

/* The feature stack: a head, then a bar of five tabs held at the top while the captures scroll past, each with its blurb */
.stack { display: block; padding-block: var(--space-2xl) var(--section-gap-s); }
.stack__head { display: grid; gap: var(--space-md); max-width: 44rem; }
.stack__head .lead { color: var(--color-muted); }
.tabs { position: -webkit-sticky; position: sticky; top: 0; z-index: var(--z-sticky); margin-block: var(--space-xl); padding-block: var(--space-sm); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-ink); }
.tabs ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-muted); font-weight: 500; text-align: center; text-decoration: none; }
.tabs a:hover { color: var(--color-ink); border-color: var(--color-muted); }
.tabs a[aria-current="true"] { background: var(--color-accent-soft); color: var(--color-ink); border-color: var(--color-ink); }
.stack--tour { padding-bottom: 0; }
.caps { display: grid; gap: var(--space-3xl); margin: 0; padding: 0; list-style: none; }
.cap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; margin: 0; }
.cap__text { grid-column: 1 / span 4; display: grid; gap: var(--space-sm); }
.cap__text p { color: var(--color-muted); text-wrap: wrap; max-width: none; }

/* A capture sits on a stage: the notebook grid under one or two app screens */
.notebook { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: center; justify-content: center; min-height: 640px; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; container-type: inline-size; background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--color-paper-2); }
.cap [data-slot] { grid-column: 6 / span 7; }
@container (max-width: 62rem) { .shot { zoom: 0.85; } }
@container (max-width: 50rem) { .shot { zoom: 1; } }
.shot { flex: none; display: grid; gap: var(--space-sm); justify-items: center; margin: 0; }
@media (max-width: 40rem) {
  .cap__text { margin-bottom: var(--space-sm); }
  .shot { zoom: 0.66; }
  .notebook .shot figcaption { font-size: var(--text-sm); }
  .notebook { flex-wrap: nowrap; justify-content: flex-start; gap: var(--space-md); padding: var(--space-xs) var(--space-sm); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-sm); overscroll-behavior-x: contain; scrollbar-width: none; }
  .shot { scroll-snap-align: center; }
  .shot:only-child { margin-inline: auto; }
}
.shot figcaption { padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); text-align: center; }
.tour, .cap--wide .notebook { min-height: 0; }
.stack__head + .notebook { margin-top: var(--space-xl); }
.stack__note { font-size: var(--text-sm); color: var(--color-muted); }

/* The phone: a plain frame round the app screen */
.phone { position: relative; flex: none; width: 17.5rem; max-width: 100%; height: 41.5rem; border: 8px solid var(--color-ink); border-radius: 2.25rem; background: var(--color-paper-2); box-shadow: var(--shadow-lift); overflow: hidden; }
.app { display: flex; flex-direction: column; height: 100%; font-size: var(--text-sm); }
.app__head { padding: var(--space-lg) var(--space-md) var(--space-sm); }
.app__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.scope { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); box-shadow: 0 8px 8px -8px color-mix(in oklab, var(--color-ink) 25%, transparent); }
.scope__label { grid-column: 1; font-size: var(--text-xs); color: var(--color-muted); }
.scope__name { grid-column: 1; font: 600 var(--text-md)/1.2 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope .go { grid-column: 2; grid-row: 1 / span 2; rotate: 135deg; }
.scope .go--up { rotate: -45deg; }
.scope + .app__head { padding-top: var(--space-md); }
.scope + .app__body { padding-top: var(--space-md); }
.app__acts { display: flex; gap: var(--space-sm); }
.app__title { margin: 0; font: 600 var(--text-xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.link { font-size: var(--text-xs); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.app__body { flex: 1; min-height: 0; padding: 0 var(--space-md); overflow: hidden; display: grid; align-content: start; gap: var(--space-sm); }
.app__body--tight { gap: var(--space-xs); }
.app small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.app b { display: block; font-weight: 500; }
.app .chip { font-size: var(--text-xs); }
.app .label { margin: 0; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.seg span { padding: var(--space-2xs) var(--space-3xs); text-align: center; border-radius: calc(var(--radius-pill) - 2px); color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg .on { background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule); }
.chips { display: flex; gap: var(--space-xs); overflow: hidden; }
.chips span { padding: var(--space-3xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.chips .on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.feed, .line, .pros, .opts, .lines { margin: 0; padding: 0; list-style: none; }
.feed li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--space-xs); align-items: baseline; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.appbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.appbar span { padding: var(--space-sm) 0 var(--space-md); text-align: center; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.appbar .on { color: var(--color-ink); box-shadow: inset 0 2px 0 var(--color-accent); }
.appbar .plus { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: var(--space-xs) auto; padding: 0; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font: 500 1.5rem/1 var(--font-display); box-shadow: none; }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.app__btn { padding: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); text-align: center; font-weight: 500; }
.app__btn--line { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); }
.dock { display: grid; gap: var(--space-sm); padding: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.dock__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-xs); }

/* The receipt flow: the camera scanning, then the check screen */
.phone--cam { background: var(--color-ink-2); }
.cam { position: relative; display: grid; place-items: center; height: 100%; }
.cam__hint { position: absolute; top: var(--space-lg); margin: 0; font-size: var(--text-xs); color: var(--color-paper); }
.cam__frame { position: absolute; inset: 20% 9% 24%; border: 2px solid var(--color-accent); border-radius: var(--radius-pill); overflow: hidden; }
.cam__scan { position: absolute; inset: 0; border-bottom: 2px solid var(--color-accent); background: linear-gradient(to bottom, transparent 70%, color-mix(in oklab, var(--color-paper) 22%, transparent)); animation: scan 2.4s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.cam__paper { display: grid; gap: var(--space-2xs); width: 66%; padding: var(--space-md); background: var(--color-sheet); rotate: -3deg; font-family: var(--font-outlier); font-size: var(--text-xs); box-shadow: var(--shadow-lift); }
.cam__paper b { font-weight: 500; }
.cam__paper div { display: flex; justify-content: space-between; gap: var(--space-sm); }
.cam__paper .total { padding-top: var(--space-xs); border-top: 2px solid var(--color-ink); font-weight: 500; }
.cam__status { position: absolute; bottom: var(--space-xl); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); font-weight: 500; }
.field { display: grid; gap: var(--space-3xs); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.input { display: block; min-height: 2rem; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 500; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input--num { font-family: var(--font-outlier); text-align: right; font-weight: 400; }
.input--select { position: relative; padding-right: var(--space-lg); }
.input--select::after { content: ""; position: absolute; right: var(--space-sm); top: 50%; width: 6px; height: 6px; border: solid var(--color-ink); border-width: 0 2px 2px 0; translate: 0 -75%; rotate: 45deg; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 5.25rem; gap: var(--space-xs); align-items: center; }
.lrow--sum { font-weight: 500; font-size: var(--text-xs); grid-template-columns: minmax(0, 1fr) 5.25rem; padding-top: var(--space-2xs); border-top: 2px solid var(--color-ink); }
.lrow--sum > span:first-child { padding-left: var(--space-sm); }
.field .lrow + .lrow { margin-top: var(--space-2xs); }
.photo-btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.photo-btn i { width: 1.5rem; height: 1.5rem; border-radius: 3px; background: repeating-linear-gradient(var(--color-sheet) 0 3px, var(--color-rule) 3px 4px); box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); rotate: -4deg; }
.dock small { text-align: center; }

@media (prefers-reduced-motion: reduce) { .cam__scan { animation: none; transform: translateY(-35%); } } /* scan-still */

/* The timeline, the contractor list and the export options */
.line { position: relative; display: grid; gap: var(--space-md); padding-left: var(--space-lg); }
.line::before { content: ""; position: absolute; left: 5px; top: var(--space-xs); bottom: var(--space-xs); width: 2px; background: var(--color-rule); }
.line li { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); }
.line li::before { content: ""; position: absolute; left: calc(var(--space-lg) * -1); top: 0.35em; width: 12px; height: 12px; border-radius: 50%; background: var(--color-paper-2); border: 3px solid var(--color-ink); }
.card { display: grid; gap: var(--space-xs); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.switch { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); font-weight: 500; }
.switch i { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--color-green); }
.switch i::after { content: ""; position: absolute; top: 2px; right: 2px; width: calc(1.25rem - 4px); aspect-ratio: 1; border-radius: 50%; background: var(--color-paper-2); }
.pros li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.pros li > span:first-child { display: grid; gap: var(--space-2xs); justify-items: start; min-width: 0; }
.opts.opts--plain li > span:last-child { margin-left: 0; }
.rate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.rate span { padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); text-align: center; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.rate .on { border-color: var(--color-ink); background: var(--color-accent-soft); color: var(--color-ink); }
.dates2 { margin: 0; padding: 0; list-style: none; }
.dates2 li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.datebox { display: grid; justify-items: center; padding: var(--space-2xs) 0; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); line-height: 1.1; }
.datebox--soon { background: var(--color-accent-soft); }
.datebox b { font-size: var(--text-xs); }
.datebox span { font: 600 var(--text-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.cal { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.who { margin: 0; padding: 0; list-style: none; }
.who li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.nudge { margin: 0; padding: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); font-size: var(--text-xs); }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-md); border-top: 2px solid var(--color-ink); font-weight: 500; }
.opts li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.opts li > span:last-child { margin-left: auto; }
.opts i { position: relative; flex: none; width: 1.125rem; height: 1.125rem; border-radius: 4px; background: var(--color-ink); }
.opts .off { background: transparent; box-shadow: inset 0 0 0 2px var(--color-muted); }
.opts .off::after { display: none; }
.opts i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--color-paper); border-width: 0 2px 2px 0; rotate: 45deg; }

/* The wide capture: the text sits above and three screens run across */
.cap--wide { display: block; }
.cap--wide .cap__text { max-width: 44rem; margin-bottom: var(--space-lg); }

/* Home, the add sheet and More */
.todo, .units, .menu, .tiles { margin: 0; padding: 0; list-style: none; }
.todo li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); }
.todo li + li { margin-top: var(--space-xs); }
.units li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--color-ink) 55%, transparent); }
.addsheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-md); border-radius: 1.25rem 1.25rem 0 0; background: var(--color-paper-2); box-shadow: var(--shadow-lift); }
.addsheet::before { content: ""; justify-self: center; width: 2.25rem; height: 4px; border-radius: 2px; background: var(--color-rule); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.tile { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.tile--on { border-color: var(--color-ink); background: var(--color-accent-soft); }
.menu li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 2.25rem; border-bottom: var(--rule-hair) solid var(--color-rule); }
.go { width: 6px; height: 6px; border: solid var(--color-muted); border-width: 2px 2px 0 0; rotate: 45deg; }
.tog { position: relative; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--color-green); }
.tog::after { content: ""; position: absolute; top: 2px; right: 2px; width: calc(1.25rem - 4px); aspect-ratio: 1; border-radius: 50%; background: var(--color-paper-2); }
.tog--off { background: var(--color-rule); }
.tog--off::after { right: auto; left: 2px; }

.switcher { position: relative; z-index: 1; margin: 0; padding: var(--space-2xs) var(--space-md); list-style: none; background: var(--color-paper-2); box-shadow: var(--shadow-lift); }
.switcher li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.switcher .on { border-radius: var(--radius-pill); border-bottom-color: transparent; background: var(--color-accent-soft); }
.switcher .acts { justify-content: flex-start; gap: var(--space-lg); padding-top: var(--space-md); border-bottom: 0; }
.switcher .units-left { justify-content: space-between; padding-top: 0; border-bottom: 0; }
.tick { position: relative; width: 1rem; height: 1rem; }
.tick::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--color-ink); border-width: 0 2px 2px 0; rotate: 45deg; }
.dim { opacity: 0.3; padding-top: var(--space-md); }
.toast { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: var(--space-sm) var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.toast small { color: color-mix(in oklab, var(--color-paper) 70%, var(--color-ink)); }
.toast .link { color: var(--color-paper); }
.feed .feed__new { margin-inline: calc(var(--space-xs) * -1); padding-inline: var(--space-xs); border-radius: var(--radius-pill); border-bottom-color: transparent; background: var(--color-accent-soft); }

.chip { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.chip--ok { background: var(--color-green-soft); color: var(--color-green); }
.chip--soon, .chip--miss { background: var(--color-accent-soft); color: var(--color-ink); }
.chip--edit { background: var(--color-yellow-soft); color: var(--color-yellow-ink); }
.chip--plain { background: var(--color-paper-3); color: var(--color-ink); }

/* The price: the offer, ruled lines on the field */
.price { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--section-gap-s); }
.price .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.price h2 { grid-column: 1 / span 6; font-size: clamp(3.5rem, 2rem + 6vw, 7rem); line-height: 0.98; font-variant-numeric: tabular-nums; }
.price__side { grid-column: 7 / span 6; display: grid; gap: var(--space-xl); }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.tier { padding: var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--radius-card); }
.tier__price { margin: 0; font: 600 clamp(3rem, 2rem + 4vw, 5rem)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.tier__price span { font-size: 0.4em; font-weight: 500; letter-spacing: 0; }
.tier__what { margin: var(--space-sm) 0 0; font-size: var(--text-lg); font-weight: 500; }
.price__rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.price__rows li { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-ink); font-size: var(--text-lg); font-weight: 500; }

/* Join: try the demo or create an account */
.join { padding-block: var(--section-gap); }
.join .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.join .head { grid-column: 1 / span 5; }
.join__actions { grid-column: 7 / span 6; justify-content: flex-start; }

/* Footer: a statement, the links beneath */
.foot { padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-paper); }
.foot .container { display: grid; gap: var(--space-xl); }
.foot__line { max-width: 14ch; font: 600 var(--text-display-s)/1.02 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot a { font-weight: 500; }
.foot a:focus-visible { outline-color: var(--color-focus); }
.foot small { font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 72%, var(--color-ink)); }

@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .nav .container { grid-template-columns: minmax(0, 1fr) auto; }
  .wordmark { grid-column: 1; font-size: var(--text-xl); }
  .nav__right { grid-column: 2; gap: var(--space-md); }
  .rows h3, .rows p { grid-column: 1 / -1; }
  .rows li { row-gap: var(--space-2xs); }
  .caps { gap: var(--space-2xl); }
  .cap { display: block; }
  .cap__text { margin-bottom: var(--space-md); }
  .cap [data-slot] { min-height: 0; padding: var(--space-lg) var(--space-md); }
  .price .container, .join .container { display: block; }
  .price__side { margin-top: var(--space-xl); }
  .join__actions { margin-top: var(--space-xl); }
}

/* The price band on a phone: the whole band fits one screen */
@media (max-width: 40rem) {
  .price { padding-block: var(--space-xl); }
  .price h2 { font-size: 2.25rem; }
  .price h2 br { display: none; }
  .price__side { gap: var(--space-md); margin-top: var(--space-md); }
  .tiers { gap: var(--space-sm); }
  .tier { padding: var(--space-sm) var(--space-md); }
  .tier__price { font-size: 2.25rem; }
  .tier__what { margin-top: var(--space-2xs); font-size: var(--text-sm); }
  .price__rows li { padding: var(--space-xs) 0; font-size: var(--text-sm); }
}

/* Extras: ideas for later, a band of two shortcut cards and a ruled list */
.extras { padding-block: var(--space-3xl); background: var(--color-paper-3); }
.extras .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.extras__head { grid-column: 1 / span 4; display: grid; gap: var(--space-md); align-content: start; }
.extras__head .lead { color: var(--color-muted); }
.extras__main { grid-column: 6 / span 7; display: grid; gap: var(--space-xl); }
.extras__shortcuts { display: grid; gap: var(--space-sm); }
.extras__shortcuts p { color: var(--color-muted); text-wrap: wrap; max-width: 52ch; }
.shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.shortcut { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-accent-soft); }
.shortcut__title { margin: 0; font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.shortcut ol { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.shortcut li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-sheet); font-size: var(--text-sm); font-weight: 500; }
.shortcut__n { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); }
.extras__list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.extras__list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gap-columns); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-ink); }
.extras__list b { font-weight: 500; }
.extras__list span { color: var(--color-muted); }
@media (max-width: 60rem) {
  .extras .container { display: block; }
  .extras__main { margin-top: var(--space-lg); }
}
@media (max-width: 40rem) {
  .extras { padding-block: var(--space-2xl); }
  .shortcuts { grid-template-columns: minmax(0, 1fr); }
  .extras__list li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }
}

/* Real screenshots inside the phone frame */
.phone--shot { background: var(--color-paper-2); }
.phone--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }