/* Otis website (2026-10)
   A bright paper page in the family's design language (warm paper and ink, hairlines instead of
   boxes, Geist for structure) with rounded black stages, the Otis frame's colour, carrying fine
   violet arcs (the curve of the light in the brand image): the hero, one behind each demo, and the
   close. The product sits on the stages like a photograph. Headlines are
   big and heavy, their second half in the brand's violet-to-indigo; the Newsreader italic voice is
   kept for the stages' headlines. Indigo for actions, violet for Otis. */

/* ---------- Fonts (self-hosted, OFL) ---------- */

@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-Variable-LatinExt.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Geist Mono';
	src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('../fonts/Newsreader-Variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('../fonts/Newsreader-Variable-Italic.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

/* ---------- Tokens: the product's, value for value ---------- */

:root {
	--paper: #fcfbf9;
	--canvas: #f3f1ec;
	--subtle: #f6f4f0;
	--muted-bg: #efece6;
	--surface: #ffffff;
	--hover: #f4f2ed;
	--chrome: #111113;

	--ink: #1c1b18;
	--ink-2: #57534b;
	--ink-3: #6f6a62;
	--faint: #8f8a80;

	--line: #e4e0d8;
	--line-subtle: #ece9e3;
	--line-strong: #ddd9d0;

	/* One job each: indigo for actions and the selected thing, violet for Otis, orange for what
	   needs a person, green for done. */
	--indigo: #4146e5;
	--indigo-hover: #3438c7;
	--indigo-light: #ebebf8;
	--indigo-glow: rgba(65, 70, 229, 0.18);
	--violet: #7c3aed;
	--violet-light: #f1eafd;
	--brand-gradient: linear-gradient(180deg, #7c3aed 0%, #4146e5 100%);
	--signal: #f07b2e;
	--signal-ink: #b04e12;
	--signal-light: #fbece1;
	--ok: #4c9a5b;
	--ok-ink: #3b6e47;
	--ok-light: #eaf2ec;

	/* On a stage */
	--on-dark: #f0f0f2;
	--on-dark-2: rgba(240, 240, 242, 0.68);
	--on-dark-3: rgba(240, 240, 242, 0.46);
	--dark-line: rgba(255, 255, 255, 0.1);
	--lavender: #c4b5fd;

	--sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--voice: 'Newsreader', 'Iowan Old Style', Georgia, serif;

	--radius: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--stage-radius: 28px;
	--stage-pad: clamp(20px, min(3vw, 4.6vh), 40px);
	--shadow-sm: 0 1px 2px rgba(40, 34, 24, 0.06);
	--shadow-on-stage: 0 50px 100px -30px rgba(0, 0, 0, 0.6), 0 20px 40px -20px rgba(0, 0, 0, 0.45);

	--wrap: 1200px;
	--gutter: 24px;
	--inset: 12px;
	--header-h: 64px;
	--section-space: clamp(64px, 10vh, 112px);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-hover); }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--indigo-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.stage :focus-visible { outline-color: var(--lavender); }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 200; padding: 8px 14px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 14px; }
.skip-link:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */

.display {
	font-size: clamp(40px, min(5.6vw, 8.8vh), 76px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.045em;
	text-wrap: balance;
}
.h1 {
	font-size: clamp(38px, 5.2vw, 72px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.045em;
	text-wrap: balance;
}
/* Sized by the screen's width and its height, so a section fits on a laptop screen. */
.h2 {
	max-width: 14em;
	font-size: clamp(34px, min(4.2vw, 6.6vh), 58px);
	font-weight: 650;
	line-height: 1;
	letter-spacing: -0.045em;
	text-wrap: balance;
}
.h3 { font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -0.025em; }
/* On paper, a headline's second half in the brand's violet-to-indigo. */
.accent { background: linear-gradient(100deg, #7c3aed 0%, #5b47e8 55%, #4146e5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* On a stage, the voice: Newsreader italic, in a pale violet. */
.voice { font-family: var(--voice); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.glow { background: linear-gradient(100deg, #e9e3ff 0%, #c4b5fd 45%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); font-family: var(--mono); font-size: 13px; }
.eyebrow-num { color: var(--violet); }
.eyebrow-num::after { content: ' —'; color: var(--faint); }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { background: var(--subtle); color: var(--ink); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn-lg { height: 48px; padding: 0 22px; border-radius: 10px; font-size: 16px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }
.btn-ink { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-ink:hover { border-color: #000; background: #000; color: #fff; }
.btn-light { border-color: #fff; background: #fff; color: var(--chrome); }
.btn-light:hover { border-color: #e9e6ff; background: #e9e6ff; color: var(--chrome); }
.btn-on-dark { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--on-dark); }
.btn-on-dark:hover { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ---------- Header: on paper ---------- */

.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.site-header.is-scrolled {
	background: rgba(252, 251, 249, 0.86);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--line-subtle);
}
/* The logo on the left, the menu in the middle of the page, the button on the right. */
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: 100%; }
.brand { flex: none; justify-self: start; }
.header-cta { justify-self: end; }
.brand img { width: auto; height: 27px; }
.primary-nav { display: flex; gap: 2px; }
.primary-nav a { padding: 8px 12px; border-radius: var(--radius); color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: color 0.15s var(--ease), background-color 0.15s var(--ease); }
.primary-nav a:hover, .primary-nav a[aria-current="true"] { background: rgba(28, 27, 24, 0.06); color: var(--ink); }
.menu-button { display: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.menu-button svg { width: 20px; height: 20px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu-button[aria-expanded="true"] { background: rgba(28, 27, 24, 0.06); }
.mobile-menu { display: grid; gap: 2px; padding: 8px var(--gutter) 20px; background: var(--paper); box-shadow: 0 1px 0 var(--line-subtle), 0 24px 40px -16px rgba(28, 27, 24, 0.2); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) { padding: 12px 0; color: var(--ink); font-size: 17px; font-weight: 500; }
.mobile-menu .btn { height: 44px; margin-top: 10px; }

/* ---------- Stages: rounded black panels ---------- */

.stage { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--stage-radius); background: var(--chrome); color: var(--on-dark); }

/* The arcs: the curve of the light in the brand image, drawn as fine violet-to-indigo lines
   (concentric circles round the light's centre, brightest at the outer edge). Behind a demo they
   come from the right, around the card and clear of the tabs; the close takes them from the left;
   in the hero they fade out before the four parts along its foot. */
.arcs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.arcs circle { fill: none; stroke: url(#arc-gradient); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.closing .arcs { transform: scaleX(-1); }
.channel-demo .arcs { transform: scaleY(-1); }
.hero .arcs { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 80%); mask-image: linear-gradient(180deg, #000 50%, transparent 80%); }

/* A faint dot grid under the arcs, fading in towards their side. */
.stage::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.6px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
	mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
	pointer-events: none;
}
.closing::before {
	-webkit-mask-image: linear-gradient(260deg, transparent 30%, #000 100%);
	mask-image: linear-gradient(260deg, transparent 30%, #000 100%);
}

/* ---------- Hero ---------- */

.hero {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: min(calc(100svh - var(--header-h) - var(--inset)), 900px);
	margin: 0 var(--inset);
}
/* Spacing and type follow the screen's height too, so the hero (logos and pillars included) fits
   on the first screen of a laptop. */
.hero-inner { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: clamp(32px, 6.5vh, 120px) var(--gutter) clamp(28px, 4.5vh, 52px); }
.hero .display { max-width: 920px; color: #fff; }
.hero .lead { max-width: 620px; margin-top: clamp(16px, 2.8vh, 26px); color: var(--on-dark-2); font-size: clamp(16px, min(1.6vw, 2.5vh), 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 4vh, 36px); }

/* The four parts of Otis, along the foot of the hero. */
/* Four segments, each with its icon and number, a line along its top that lights up violet to
   indigo on hover, and an arrow down to its section. */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.pillars a { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; padding: clamp(14px, 2.2vh, 20px) 0 clamp(16px, 3vh, 28px); border-top: 1px solid rgba(255, 255, 255, 0.14); color: inherit; }
.pillars a::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #a78bfa, #6366f1); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.pillars a:hover::before, .pillars a:focus-visible::before { transform: scaleX(1); }
.pillars a:focus-visible { outline: none; }
.pillar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pillar-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--lavender); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.pillar-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .sparkles { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.pillar-num { color: var(--on-dark-3); font-family: var(--mono); font-size: 12px; transition: color 0.15s var(--ease); }
.pillar-name { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pillar-name > span { display: inline-flex; }
.pillar-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--on-dark-3); transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
.pillar-text { color: var(--on-dark-2); font-size: 14px; line-height: 1.5; }
.pillars a:hover .pillar-num, .pillars a:focus-visible .pillar-num { color: var(--lavender); }
.pillars a:hover .pillar-icon, .pillars a:focus-visible .pillar-icon { border-color: rgba(196, 181, 253, 0.35); background: rgba(167, 139, 250, 0.12); }
.pillars a:hover .pillar-arrow, .pillars a:focus-visible .pillar-arrow { color: #fff; transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .pillars a::before { transition: none; } }

/* The businesses selling with Otis, in white, under the buttons. */
.hero-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; margin-top: clamp(24px, 4.5vh, 48px); }
.hero-logos p { color: var(--on-dark-3); font-size: 13px; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; }
.logos img { width: auto; height: 28px; opacity: 0.85; filter: brightness(0) invert(1); transition: opacity 0.2s var(--ease); }
.logos img:hover { opacity: 1; }

/* ---------- Sections ---------- */

.section { padding-top: var(--section-space); }
/* Jumping to a section from the menu lands just above its heading, not at the space before it. */
.section { scroll-margin-top: calc(24px - var(--section-space)); }
/* The headline and its paragraph side by side, so the demo below fits on the same screen. */
.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: end;
	gap: 14px 56px;
	margin-bottom: clamp(24px, 4vh, 40px);
}
.section-head .eyebrow { grid-column: 1 / -1; }
.section-head .lead { max-width: 540px; font-size: 17px; line-height: 1.55; }

/* A sentence that closes a section. */
/* The problem: three causes, side by side over a hairline. */
.problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.problems li { display: grid; align-content: start; gap: 10px; }
.problems h3 { margin-top: 4px; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.problems p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
@media (max-width: 820px) { .problems { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* The deck's guardrails, under the governance text. */
.guardrails { color: var(--ink-3); font-family: var(--mono); font-size: 12px; line-height: 1.6; }

/* A note that closes a section: an icon tile and a sentence. */
.note { display: flex; align-items: flex-start; gap: 14px; max-width: 820px; margin-top: 36px; color: var(--ink-2); }
.note p { padding-top: 4px; text-wrap: pretty; }
.note strong { color: var(--ink); font-weight: 600; }

/* A small line icon on a white tile (the models, the notes, the channels). */
.note-icon, .model-icon, .cr-channel { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.note-icon svg, .model-icon svg, .cr-channel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Demos: tabs and a working card, on a stage ---------- */

.demo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.demo.stage { padding: var(--stage-pad); }
.demo-tabs { display: flex; flex-direction: column; gap: 2px; }
.demo-tabs [role="tab"] {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--on-dark-2);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.demo-tabs [role="tab"]:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.demo-tabs [role="tab"][aria-selected="true"] { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.1); color: #fff; }
.demo-tabs [role="tab"] svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--on-dark-3); }
.demo-tabs [role="tab"][aria-selected="true"] svg { color: var(--lavender); }
.tab-name { flex: 1; }
.tab-meta { color: var(--on-dark-2); font-family: var(--mono); font-size: 11.5px; font-weight: 400; }
[role="tab"][aria-selected="true"] .tab-meta { color: var(--lavender); }

[role="tabpanel"]:focus-visible { outline-offset: 4px; }
.is-entering { animation: panel-in 0.28s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-entering { animation: none; } }

/* The product on a stage: white, like a photograph. */
.offer-card, .chat, .feed, .check-card { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-on-stage); }

/* Otis's avatar: the sparkles on the brand gradient. */
.avatar { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--brand-gradient); fill: #fff; }

/* Presentational controls inside the demos (they look like the product's, but do nothing). */
.fake-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; }
.fake-btn-sm { height: 32px; padding: 0 12px; border-radius: var(--radius); font-size: 13.5px; }
.choice { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; }
.choice.is-on { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-glow); color: var(--indigo); }

/* 01 · One product, every way to have it: a working card. On the left the product (its colour and
   shared stock); on the right the offer, with options that change its price, and the record line
   that turns from the Offer into an Allocation once it's booked or bought. */
.offer-card { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); min-height: clamp(300px, 44vh, 360px); overflow: hidden; }
.offer-product { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px 26px 20px; border-right: 1px solid var(--line-subtle); background: linear-gradient(180deg, var(--subtle), var(--canvas)); }
.product-art { display: grid; flex: 1; place-items: center; }
.product-art svg { width: 100%; max-width: 230px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.product-art .wheel { stroke-width: 2.6; }
.product-art .frame { stroke: var(--frame, var(--ink)); transition: stroke 0.3s var(--ease); }
.product-art .battery { stroke: var(--violet); stroke-width: 9; }
.product-art .hub { fill: var(--ink); }
.product-name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.product-sub { color: var(--ink-3); font-size: 14px; }
.product-stock { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); color: var(--ink-3); font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.product-stock span { margin-right: 6px; color: var(--violet); }
.product-stock em { padding: 1px 2px; border-radius: 4px; font-style: normal; white-space: nowrap; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
/* The stock this offer draws on. */
.product-stock em.is-active { background: var(--violet-light); color: var(--ink); }

/* The bike's colours. */
.swatches { display: flex; gap: 9px; }
.swatch { position: relative; display: inline-flex; }
.swatch input { position: absolute; inset: -4px; z-index: 1; width: calc(100% + 8px); height: calc(100% + 8px); margin: 0; opacity: 0; cursor: pointer; }
.swatch i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: box-shadow 0.15s var(--ease); }
.swatch input:checked + i { box-shadow: 0 0 0 2px var(--subtle), 0 0 0 3.5px var(--ink); }
.swatch input:focus-visible + i { outline: 2px solid var(--indigo); outline-offset: 5px; }
.swatch-graphite { --swatch: #2a2925; }
.swatch-sage { --swatch: #6b8a76; }
.swatch-clay { --swatch: #b5603f; }

.offer-panels { display: grid; padding: 24px 28px 20px; }
.offer-panel { display: flex; flex-direction: column; align-items: stretch; }
.offer-panel[hidden] { display: none; }
.offer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.offer-price { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.offer-price small { color: var(--ink-3); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.offer-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ok-light); color: var(--ok-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.offer-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* Options: a label, then chips that are real radio buttons and checkboxes. */
.offer-options { display: grid; gap: 8px; margin-top: 16px; }
.opt { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.opt-label { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip input:disabled { cursor: not-allowed; }
.chip span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 11px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.12s var(--ease), color 0.12s var(--ease), box-shadow 0.12s var(--ease), background-color 0.12s var(--ease);
}
.chip:hover input:not(:disabled):not(:checked) + span { border-color: var(--faint); color: var(--ink); }
.chip input:checked + span { border-color: var(--indigo); color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-glow); }
.chip input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.chip input:disabled + span { background: var(--subtle); color: var(--faint); text-decoration: line-through; }
/* An add-on shows a tick once it's added. */
.chip input[type="checkbox"]:checked + span::before { content: ''; width: 8px; height: 4px; margin: -3px 1px 0 0; border-bottom: 1.6px solid currentColor; border-left: 1.6px solid currentColor; transform: rotate(-45deg); }

.offer-line { max-width: 36em; margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.offer-actions { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; }
.offer-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
.offer-cta:hover { background: #000; }
.offer-cta.is-done, .offer-cta.is-done:hover { background: var(--ok-light); color: var(--ok-ink); cursor: default; }
.offer-undo { padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.offer-undo:hover { color: var(--ink); }
/* The record line sits at the foot of the card, in the same place on every tab. */
.offer-record { align-self: stretch; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-strong); color: var(--ink-3); font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.offer-record [data-record-label] { margin-right: 6px; color: var(--violet); }
.offer-panel.is-done .offer-record { color: var(--ink-2); }
.offer-record.is-changed { animation: record-in 0.45s var(--ease); }
@keyframes record-in { from { background: var(--violet-light); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .offer-record.is-changed { animation: none; } }

.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--line); }
.models li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 22px 24px 24px 0; border-bottom: 1px solid var(--line-subtle); }
.model-icon { grid-row: span 2; }
.models li:not(:nth-child(4n + 1)) { padding-left: 24px; border-left: 1px solid var(--line-subtle); }
.models h3 { font-size: 17px; font-weight: 650; line-height: 32px; letter-spacing: -0.015em; }
.models p { margin-top: 2px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* 02 · Wherever your customers are */
.chat { display: grid; grid-template-rows: auto 1fr; min-height: clamp(300px, 44vh, 380px); overflow: hidden; }
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-subtle); background: var(--subtle); font-size: 14px; font-weight: 500; }
.chat-who { color: var(--ink-3); font-weight: 400; }
.messages { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.msg { max-width: 78%; font-size: 15px; line-height: 1.45; }
.msg.them { align-self: flex-end; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: #fff; }
.msg.otis { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; }
.msg.otis > span { padding: 10px 14px; border: 1px solid var(--line-subtle); border-radius: 18px 18px 18px 6px; background: var(--subtle); }
.msg-choices { display: flex; gap: 8px; margin-left: 36px; }
.msg-card { display: grid; gap: 4px; justify-items: start; width: min(320px, 86%); margin-left: 36px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 14px; }
.msg-card .card-title { color: var(--ink); font-size: 15px; font-weight: 600; }
.msg-card .fake-btn { margin-top: 8px; }
.messages > .msg-card:first-child { margin-left: 0; }
.chat-phone .transcript { gap: 18px; }
.chat-phone .transcript .msg { display: grid; gap: 2px; align-self: stretch; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); }
.chat-phone .transcript b { color: var(--ink-3); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.chat-phone .transcript .otis b { color: var(--violet); }
.wave { display: flex; align-items: center; gap: 3px; height: 18px; }
.wave i { width: 3px; height: 40%; border-radius: 2px; background: var(--violet); animation: wave 1.1s var(--ease) infinite alternate; }
.wave i:nth-child(2) { animation-delay: -0.2s; } .wave i:nth-child(3) { animation-delay: -0.5s; } .wave i:nth-child(4) { animation-delay: -0.1s; }
.wave i:nth-child(5) { animation-delay: -0.7s; } .wave i:nth-child(6) { animation-delay: -0.35s; } .wave i:nth-child(7) { animation-delay: -0.9s; }
@keyframes wave { to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; height: 60%; } }

.customer-record {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	margin-top: 28px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.cr-person { display: flex; align-items: center; gap: 12px; }
.cr-person p { display: grid; line-height: 1.35; }
.cr-person strong { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.cr-person p span { color: var(--ink-3); font-size: 13.5px; }
.cr-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-timeline li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 16px; border-left: 1px solid var(--line-subtle); }
.cr-channel { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; background: var(--subtle); color: var(--ink-2); }
.cr-timeline p { display: grid; min-width: 0; line-height: 1.35; }
.cr-timeline b { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cr-timeline p span { overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.initials { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #d9e8dc; color: var(--ok-ink); font-size: 13px; font-weight: 600; }

/* 03 · The work in between */
.work-demo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.work-tabs { flex-direction: row; flex-wrap: wrap; justify-self: start; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.work-tabs [role="tab"] { min-height: 38px; padding: 0 16px; border: 0; border-radius: 9px; }
.work-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); }
.work-panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.work-panel[hidden] { display: none; }
.work-intro { display: grid; gap: 10px; padding-top: 14px; }
.work-intro h3 { color: #fff; font-size: 26px; font-weight: 650; letter-spacing: -0.03em; }
.work-intro p { color: var(--on-dark-2); }
.feed { overflow: hidden; }
.feed li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.feed li + li { border-top: 1px solid var(--line-subtle); }
.feed p { flex: 1; font-size: 15px; line-height: 1.45; }
.feed-time { flex: none; min-width: 44px; color: var(--ink-3); font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.is-entering .feed li { animation: feed-in 0.4s var(--ease) both; }
.is-entering .feed li:nth-child(2) { animation-delay: 0.06s; }
.is-entering .feed li:nth-child(3) { animation-delay: 0.12s; }
.is-entering .feed li:nth-child(4) { animation-delay: 0.18s; }
@keyframes feed-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-entering .feed li { animation: none; } }

/* What happened to an action: done (green), told you (indigo), waiting for a person (orange). */
.state { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state.done { background: var(--ok-light); color: var(--ok-ink); }
.state.told { background: var(--indigo-light); color: var(--indigo); }
.state.wait { background: var(--signal-light); color: var(--signal-ink); }
.state.wait::before { background: var(--signal); }
.state.info { background: var(--muted-bg); color: var(--ink-2); }

/* 04 · One record underneath it all */
.model-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.model-parts li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
/* The arrow from one part to the next: a chevron in a small circle across the gap. */
.model-parts li + li::before { content: ''; position: absolute; top: 50%; left: -21px; z-index: 1; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); transform: translateY(-50%); }
.model-parts li + li::after { content: ''; position: absolute; top: 50%; left: -12px; z-index: 2; width: 6px; height: 6px; border-top: 1.5px solid var(--ink-2); border-right: 1.5px solid var(--ink-2); transform: translateY(-50%) rotate(45deg); }
.part-label { color: var(--violet); font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.model-parts h3 { font-size: 22px; font-weight: 650; letter-spacing: -0.025em; }
.part-text { padding-bottom: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.part-example { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--ink-3); font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.part-example span { margin-right: 6px; color: var(--violet); }

.table-wrap { margin-top: 40px; overflow-x: auto; }
.record-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.record-table caption { padding-bottom: 14px; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -0.015em; text-align: left; }
.record-table th, .record-table td { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.record-table thead th { padding-top: 0; padding-bottom: 10px; color: var(--ink-3); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.record-table thead th + th { color: var(--violet); }
.record-table tbody th { width: 22%; color: var(--ink); font-weight: 600; }
.record-table td { color: var(--ink-2); }
.record-table tbody tr:last-child > * { border-bottom: 0; }

.governance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.governance-text { display: grid; gap: 14px; }
.governance-text > .sub-eyebrow { color: var(--violet); font-family: var(--mono); font-size: 12.5px; }
.governance-text > p { color: var(--ink-2); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--line); }
.tiers li { display: grid; gap: 2px; padding: 14px 16px 0 0; font-size: 14.5px; }
.tiers li + li { padding-left: 16px; border-left: 1px solid var(--line-subtle); }
.tiers span { color: var(--ink-3); }
.check-stage { padding: clamp(24px, 3.4vw, 48px); }
.check-card { padding: 22px; }
.check-action { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-subtle); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.checks { display: grid; gap: 14px; padding: 18px 0; }
.checks li { display: flex; gap: 12px; }
.checks div { display: grid; font-size: 14.5px; line-height: 1.45; }
.checks b { font-weight: 600; }
.checks div span { color: var(--ink-2); }
.tick { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ok-light); }
.tick::after { content: ''; position: absolute; top: 6px; left: 7.5px; width: 6px; height: 9px; border-right: 2px solid var(--ok-ink); border-bottom: 2px solid var(--ok-ink); transform: rotate(40deg); }
.check-result { padding-top: 16px; border-top: 1px solid var(--line-subtle); }

/* ---------- The close: a last stage ---------- */

.closing { margin: var(--section-space) var(--inset) 0; }
.closing-inner { display: grid; justify-items: center; gap: 18px; padding-top: clamp(72px, 12vh, 128px); padding-bottom: clamp(72px, 12vh, 128px); text-align: center; }
.closing .h1 { max-width: 14em; color: #fff; }
.closing .lead { max-width: 560px; color: var(--on-dark-2); }
.closing .hero-actions { justify-content: center; margin-top: 18px; }

/* ---------- Footer, back on paper ---------- */

.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px 56px; align-items: center; padding-top: 40px; padding-bottom: 48px; }
.footer-brand { display: grid; gap: 10px; }
.footer-brand img { width: auto; height: 24px; }
.footer-brand p { color: var(--ink-2); font-size: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { color: var(--ink-2); font-size: 14px; }
.footer-nav a:hover { color: var(--ink); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-3); font-size: 13.5px; }
.footer-sep { color: var(--faint); }
/* The investor data room: a quiet link in the same grey as the line it sits in. */
.footer-quiet { color: var(--ink-3); text-decoration: none; }
.footer-quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveal on scroll (only when JavaScript runs) ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
	.section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.section-head .lead { max-width: 640px; }
	.demo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	/* The tabs become a row that scrolls sideways, edge to edge of the stage. */
	.offer-tabs, .channel-tabs { flex-direction: row; margin: 0 calc(var(--stage-pad) * -1); padding: 2px var(--stage-pad) 6px; overflow-x: auto; scrollbar-width: none; }
	.offer-tabs::-webkit-scrollbar, .channel-tabs::-webkit-scrollbar { display: none; }
	.offer-tabs [role="tab"], .channel-tabs [role="tab"] { flex: none; }
	.offer-tabs .tab-meta { display: none; }
	.work-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.work-intro { padding-top: 0; }
	.models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.models li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
	.models li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line-subtle); }
	.governance { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
	.header-inner { display: flex; }
	.primary-nav, .header-cta { display: none; }
	.menu-button { display: grid; }
	.pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.offer-card { grid-template-columns: minmax(0, 1fr); }
	.offer-product { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line-subtle); }
	.product-art { flex: 0 0 132px; }
	.model-parts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.model-parts li + li::before { top: -19px; left: 28px; transform: none; }
	.model-parts li + li::after { top: -9px; left: 38px; transform: rotate(135deg); }
	.customer-record { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.cr-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
	.cr-timeline li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 600px) {
	:root { --gutter: 16px; --inset: 8px; --header-h: 56px; --stage-radius: 22px; --stage-pad: 20px; }
	/* The arcs keep the image's proportions, in a corner at the top right of each stage, and fade
	   out before the words lower down. */
	.arcs { inset: 0 -14vw auto auto; width: 214vw; height: calc(214vw * 0.5625); opacity: 0.75; }
	.arcs, .hero .arcs { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 75%); mask-image: linear-gradient(180deg, #000 30%, transparent 75%); }
	.brand img { height: 24px; }
	.hero { min-height: auto; }
	.hero-inner { padding-top: 48px; padding-bottom: 48px; }
	.hero-actions .btn { flex: 1 1 auto; }
	/* One under another, the icon beside the words. */
	.pillars { grid-template-columns: minmax(0, 1fr); }
	.pillars a { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 0 18px; }
	.pillar-top { grid-row: span 2; align-self: start; margin: 0; }
	.pillar-num { display: none; }
	/* Two by two on a phone. */
	.logos { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 44px; }
	.logos img { height: 22px; }
	/* Stages run nearly to the screen's edges. */
	.demo.stage, .check-stage { margin: 0 calc(var(--inset) - var(--gutter)); }
	.offer-panels { padding: 24px 20px 20px; }
	.opt { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
	.product-name-row { flex-wrap: wrap; row-gap: 6px; }
	.offer-actions { flex-wrap: wrap; }
	.offer-price { font-size: 38px; }
	.offer-product { padding: 18px 20px; }
	.product-art { flex-basis: 96px; }
	.models li { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 20px 0; }
	.model-icon { grid-row: auto; margin-bottom: 10px; }
	.models h3 { line-height: 1.3; }
	.models li:nth-child(even) { padding-left: 16px; }
	.models p { font-size: 14px; }
	.messages { padding: 20px 16px 24px; }
	.msg { max-width: 88%; }
	.msg.otis { max-width: 94%; }
	.feed li { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
	.feed p { flex-basis: calc(100% - 40px); }
	.feed .feed-time { min-width: 0; margin-left: 38px; text-align: left; }
	.customer-record { padding: 16px; }
	.cr-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.cr-timeline li, .cr-timeline li:nth-child(odd) { padding: 10px 0; border-left: 0; border-top: 1px solid var(--line-subtle); }
	.tiers { grid-template-columns: minmax(0, 1fr); }
	.tiers li + li { padding-left: 0; border-left: 0; }
	.tiers li { padding: 12px 0; border-bottom: 1px solid var(--line-subtle); }
	.work-tabs { flex-wrap: nowrap; justify-self: stretch; overflow-x: auto; scrollbar-width: none; }
	.work-tabs [role="tab"] { flex: none; padding: 0 12px; }
}

@media (max-width: 359px) {
	.models { grid-template-columns: minmax(0, 1fr); }
	.models li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* Phone tables: each example becomes a card. */
@media (max-width: 760px) {
	.record-table { min-width: 0; }
	.record-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.record-table, .record-table caption, .record-table tbody, .record-table tr, .record-table th, .record-table td { display: block; }
	.record-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
	.record-table th, .record-table td { padding: 2px 0; border: 0; }
	.record-table tbody th { width: auto; margin-bottom: 4px; }
	.record-table td::before { content: attr(data-label); display: inline-block; min-width: 92px; color: var(--violet); font-family: var(--mono); font-size: 12px; }
}

/* Touch screens: targets a thumb can hit. */
@media (pointer: coarse) {
	.demo-tabs [role="tab"] { min-height: 46px; }
	.primary-nav a { padding: 10px 12px; }
}