/* Hallmark · shape: Workbench (/), Feature Stack (/wattson), Narrative Workflow (/automation), Split Studio (/api), Long Document (/about-us, /privacy, job pages), Index-First (/news, /career, /plugins) · genre: modern-minimal · theme: brand · redesign: full · job: book
 * paper: oklch(99.4% 0.002 237) · accent: oklch(53% 0.2 277) · display: Funnel Display · body: Geist · hero: per route, Stage (/), Stage (/wattson), Settled (/automation), Settled (/api), Settled (/about-us), Banner (/career), Banner (/plugins), Banner (/privacy), Banner (/news), Banner (/platform-engineer), Banner (/senior-product-designer), Banner (/solution-consultant), Banner (/support-specialist-part-time), Banner (/support-specialist-part-time-2) · nav: edge-aligned bar, menu centred · footer: columns, the wordmark over the tagline · signature: the webclient replica in the hero, where Wattson answers a question, then opens the customer's invoices; periwinkle appears only where Wattson is
 * axes: light/geometric-sans/chromatic-periwinkle · posture: restrained, navy field on two bands · modes: light+dark · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the chrome stays an edge-aligned bar because the site has five real destinations and a booking action; varied the sections instead (index of cases, rows of modules, a navy API band) */
/* Hallmark · hero-review: fix · 4 findings · 3 resolved 1 unresolved (the headline is the owner's copy) · finish-review: subagent · 8 findings · 4 resolved (dock clipping, Wattson hero dead space, compare race, value chain and close steps as one chain) 1 partial (bento ground) 3 answered (the film's crop is its own camera move; the headings are the owner's copy; the cases and news lists stay lists) · gap: none */
/* Hallmark · waive 84 · the UtilityCloud app needs a tenant backend and shows real customer data · the hero's app and Wattson panel, the code and the board panels are built 1:1 from the webclient's tokens and RenderBlock with sample data; the real Wattson film plays under them */
/* Hallmark · dismissed 25 · the short measures are one-sentence ledes, captions and the footer display line */
/* Hallmark · dismissed 41 · .band only changes the paper; text keeps --color-ink, which flips with the mode */
/* Hallmark · waive 39b · the four Wattson question chips carry a category and a question on two lines · each chip jumps the film to the moment Wattson answers that question, so the label cannot shorten */
/* Hallmark · dismissed 49 · the Wattson chips wrap by design; each is a whole question, not a button label */
/* Hallmark · dismissed 3 · .cols3 holds text columns with tick lists, no icon tiles over headings */
/* Hallmark · dismissed 59 · the homepage keeps the owner's nine content sections plus the logo band and the close */
/* Hallmark · waive 79 · Banner heroes on /news, /plugins, /privacy and the job pages hand straight to their index or document · the job ad or the list starts under the head, so the fold is never empty of content */
/* Hallmark · waive 59 · the Banner heroes part from their index by a hairline, not a section gap · on /news, /plugins and /privacy the list is the page and starts right under the head */
/* Hallmark · waive 78 · Index-First and Long Document shapes on /news, /plugins and /privacy head their groups with years, categories and policy sections · eleven categories and eight years read as annotation, not as section heads */
/* Hallmark · waive 77 · the join band on /about-us, the partner band on /plugins and the open-application band on /career are one line and one action each · each appears once on its page beside the shared booking close */
/* Hallmark · waive 71 · integration names sit beside their descriptions in a row grid on /plugins · the space under each name is the description's height, not a gap */
/* Hallmark · waive 24b · the webclient replicas in app.css keep the app's own Tailwind steps (6, 10, 14, 20px) · the Wattson panel, customer page and answer blocks match uc-frontend 1:1, so their spacing is the product's, not the site's */
/* Hallmark · waive 37 · Inter appears only inside the product replicas (.app, .wa, .bento__ui) · it is the webclient's own face, shown 1:1; the site itself stays Funnel Display and Geist */
/* Hallmark · waive 44c · the homepage head sits above a working UtilityCloud demo that spans the container · the demo is the hero's visual, so it centres under the head, not beside it */
/* Hallmark · dismissed F4 · .on-field .btn is the same primary inverted on the navy field, never a second primary on one screen */
/* Hallmark · waive 47c · every built panel sits in a data-slot figure marked data-kind=product · the Wattson chat, deviation board and code panels are samples the owner swaps for real captures */
/* Hallmark · waive 38iii · the owner asked for "AI" in the home headline and "Wattson" in the /wattson headline in the brand primary; one word per page hero, plus "AI" in the footer line; .sign colours only the sign or unit of a case figure, not a word · the primary is the brand's highlight and AI is the edge the headline names */
/* fonts: self-hosted (SIL OFL), latin covers æøå äö é; latin-ext only downloads when a page needs it */
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/funnel-display-latin-600-normal.woff2") format("woff2"); 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: "Funnel Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/funnel-display-latin-ext-600-normal.woff2") format("woff2"); 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"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/geist-latin-wght-normal.woff2") format("woff2"); 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"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); 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"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); 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 Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2"); 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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-latin-wght-normal.woff2") format("woff2"); 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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); 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; }

/* ---------- tokens.css ---------- */
:root {
  color-scheme: light dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-figure: clamp(3.5rem, 6vw + 1rem, 6.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-enter: 800ms; --dur-settle: 1400ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 165);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* UtilityCloud navy #002a3f is hue 237; every neutral leans toward it */
  --color-paper: oklch(99.4% 0.002 237); --color-paper-2: oklch(96.8% 0.006 237); --color-paper-3: oklch(93.6% 0.010 237);
  --color-ink: oklch(18.3% 0.027 238); --color-ink-2: oklch(41.5% 0.025 237); --color-muted: oklch(54% 0.022 237);
  --color-rule: oklch(91.5% 0.010 237); --color-rule-strong: oklch(84% 0.014 237);
  --color-brand: oklch(27% 0.059 236.5); --color-brand-2: oklch(39% 0.08 236.5); --color-brand-ink: oklch(99.4% 0.002 237);
  /* navy field: the API band and the close */
  --color-field: oklch(27% 0.059 236.5); --color-field-2: oklch(32% 0.058 236.5); --color-field-ink: oklch(97% 0.006 237); --color-field-ink-2: oklch(82% 0.025 237); --color-field-rule: oklch(38% 0.05 237);
  /* Wattson periwinkle (#6f78f2) marks the AI and nothing else; the text-safe step is deeper */
  --color-accent: oklch(51% 0.211 273.1); --color-accent-ink: oklch(99% 0.005 273); --color-accent-soft: oklch(95.5% 0.012 273); --color-accent-fill: oklch(51% 0.211 273.1); --color-accent-on-field: oklch(78% 0.12 274); --color-signal: oklch(62.6% 0.18 276.7);
  --color-focus: oklch(51% 0.211 273.1);
  /* the product's own interface is always dark, in both modes */
  --color-panel: oklch(19.6% 0.029 251.5); --color-panel-2: oklch(23.5% 0.03 251); --color-panel-3: oklch(28% 0.03 251); --color-panel-rule: oklch(32% 0.03 251);
  --color-panel-ink: oklch(94% 0.01 251); --color-panel-ink-2: oklch(74% 0.025 251); --color-panel-accent: oklch(72% 0.15 278); --color-panel-accent-fill: oklch(50% 0.21 277); --color-panel-on-accent: oklch(99% 0.004 277);
  --color-panel-ok: oklch(76% 0.13 165); --color-panel-warn: oklch(78% 0.13 60);
  --logo-filter: grayscale(1) contrast(1.15); --logo-blend: multiply; --logo-opacity: 0.66; --logo-filter-on: grayscale(0) contrast(1);

  --font-display: "Funnel Display", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-outlier: var(--font-mono);
  --display-weight: 600;
  --radius-card: 14px; --radius-inner: 8px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: 0 1px 2px oklch(20% 0.02 237 / 0.06);
  --tracking-display: -0.025em;
  --nav-height: 72px;
}

[data-mode="light"] { color-scheme: light; }

[data-mode="dark"] {
  color-scheme: dark;
  --color-paper: oklch(15.5% 0.016 245); --color-paper-2: oklch(18.5% 0.018 245); --color-paper-3: oklch(21.5% 0.02 245);
  --color-ink: oklch(95% 0.008 237); --color-ink-2: oklch(80% 0.02 237); --color-muted: oklch(66% 0.02 237);
  --color-rule: oklch(27% 0.02 242); --color-rule-strong: oklch(34% 0.022 242);
  --color-brand: oklch(95% 0.008 237); --color-brand-2: oklch(83% 0.016 237); --color-brand-ink: oklch(18.3% 0.027 238);
  --color-field: oklch(21% 0.04 240); --color-field-2: oklch(25% 0.042 240); --color-field-ink: oklch(95% 0.008 237); --color-field-ink-2: oklch(80% 0.02 237); --color-field-rule: oklch(32% 0.04 240);
  --color-accent: oklch(66% 0.165 274); --color-accent-ink: oklch(99% 0.005 273); --color-accent-soft: oklch(28% 0.02 273); --color-accent-fill: oklch(55% 0.2 274); --color-accent-on-field: oklch(78% 0.12 274); --color-signal: oklch(72% 0.15 278);
  --color-focus: oklch(66% 0.165 274);
  --color-panel: oklch(19.6% 0.029 251.5); --color-panel-2: oklch(23.5% 0.03 251);
  --logo-filter: grayscale(1) invert(1) contrast(1.1); --logo-blend: screen; --logo-opacity: 0.72; --logo-filter-on: grayscale(0) invert(0) contrast(1);
  --shadow-card: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --color-paper: oklch(15.5% 0.016 245); --color-paper-2: oklch(18.5% 0.018 245); --color-paper-3: oklch(21.5% 0.02 245);
    --color-ink: oklch(95% 0.008 237); --color-ink-2: oklch(80% 0.02 237); --color-muted: oklch(66% 0.02 237);
    --color-rule: oklch(27% 0.02 242); --color-rule-strong: oklch(34% 0.022 242);
    --color-brand: oklch(95% 0.008 237); --color-brand-2: oklch(83% 0.016 237); --color-brand-ink: oklch(18.3% 0.027 238);
    --color-field: oklch(21% 0.04 240); --color-field-2: oklch(25% 0.042 240); --color-field-ink: oklch(95% 0.008 237); --color-field-ink-2: oklch(80% 0.02 237); --color-field-rule: oklch(32% 0.04 240);
    --color-accent: oklch(66% 0.165 274); --color-accent-ink: oklch(99% 0.005 273); --color-accent-soft: oklch(28% 0.02 273); --color-accent-fill: oklch(55% 0.2 274); --color-accent-on-field: oklch(78% 0.12 274); --color-signal: oklch(72% 0.15 278);
    --color-focus: oklch(66% 0.165 274);
    --logo-filter: grayscale(1) invert(1) contrast(1.1); --logo-blend: screen; --logo-opacity: 0.72; --logo-filter-on: grayscale(0) invert(0) contrast(1);
    --shadow-card: none;
  }
}

/* ---------- base.css ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* product replica styles (.app, .wa, .ui panels) live in app.css, loaded only on the pages that show them */


/* ---------- base additions ---------- */
body { font-size: var(--text-md); line-height: 1.6; }

h1, h2, h3 { color: var(--color-ink); }

h1 { line-height: 1.02; }

h2 { line-height: 1.06; }
.hl, .sign { color: var(--color-accent); }
.on-field .hl, .on-field .sign { color: var(--color-accent-on-field); }
/* Custom tooltip instead of title=, which would show the browser's own tooltip on top of it */
/* Dashes are drawn as a background because text-decoration offers no control over dash length */
.abbr { position: relative; text-decoration: none; background: repeating-linear-gradient(to right, var(--color-accent) 0 5px, transparent 5px 8px) 0 100% / 100% 1px no-repeat; cursor: help; border-radius: 2px; }
.abbr:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.abbr__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: 16rem; padding: 6px 10px; border-radius: var(--radius-inner); background: var(--color-ink); box-shadow: var(--shadow-card); color: var(--color-paper); font-size: var(--text-xs); font-weight: 500; line-height: 1.4; white-space: normal; pointer-events: none; opacity: 0; translate: -50% 4px; transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.abbr__tip::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--color-ink); }
.abbr:is(:hover, :focus) .abbr__tip { opacity: 1; translate: -50% 0; }
.abbr.is-dismissed .abbr__tip { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .abbr__tip { transition: none; } }

.lead { color: var(--color-ink-2); }

small, figcaption { font-size: var(--text-sm); }

code, pre, kbd { font-family: var(--font-mono); }

strong, b { font-weight: 600; }

ul, ol { margin: 0; padding: 0; }

.prose ul, .prose ol { padding-left: 1.25em; }

.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); border-radius: var(--radius-inner); background: var(--color-ink); color: var(--color-paper); text-decoration: none; }

.skip:focus-visible { top: var(--space-md); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-brand); border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-brand-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }

.btn:hover { background: var(--color-brand-2); border-color: var(--color-brand-2); }

.btn:active { transform: translateY(1px); }

.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.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-rule-strong); }

.btn--quiet:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }

.btn--s { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.on-field .btn { background: var(--color-field-ink); border-color: var(--color-field-ink); color: var(--color-field); }

.on-field .btn:hover { background: var(--color-field-ink-2); border-color: var(--color-field-ink-2); }

.on-field .btn--quiet { background: transparent; color: var(--color-field-ink); border-color: var(--color-field-rule); }

.on-field .btn--quiet:hover { background: var(--color-field-2); border-color: var(--color-field-ink-2); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }

.link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }

.link { padding-block: var(--space-xs); margin-block: calc(-1 * var(--space-xs)); }

.link:hover { text-decoration-color: currentColor; }

.link .icon { width: 1em; height: 1em; transition: translate var(--dur-short) var(--ease-out); }

.link:hover .icon { translate: 3px 0; }

.link--back:hover .icon { translate: -3px 0; }

.link--down:hover .icon { translate: 0 2px; }

.link--out:hover .icon { translate: 2px -2px; }

.link:active { color: var(--color-ink-2); }

.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.link--wattson { color: var(--color-accent); text-decoration-color: color-mix(in oklab, var(--color-accent) 40%, transparent); }

.on-field .link { color: var(--color-field-ink); text-decoration-color: var(--color-field-rule); }

.on-field .link:hover { text-decoration-color: currentColor; }

.link .icon { width: 1em; height: 1em; transition: translate var(--dur-short) var(--ease-out); }

.link:hover .icon { translate: 3px 0; }

.link--back:hover .icon { translate: -3px 0; }

.link--down:hover .icon { translate: 0 2px; }

.link--out:hover .icon { translate: 2px -2px; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

button:active { transform: translateY(1px); }

button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- chrome: nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }

.nav__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-lg); min-height: var(--nav-height); }

.wordmark { display: inline-flex; align-items: center; color: var(--color-brand); text-decoration: none; justify-self: start; }

.wordmark svg { width: 150px; height: auto; }

.menu { display: flex; align-items: center; gap: var(--space-xs); list-style: none; }

.menu > li > a, .menu__btn { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 0.9375rem/1 var(--font-body); text-decoration: none; cursor: pointer; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }

.menu > li > a:hover, .menu__btn:hover, .has-menu.open .menu__btn { color: var(--color-ink); background: var(--color-paper-3); }

.menu > li > a[aria-current="page"], .menu__btn[data-current] { color: var(--color-ink); }

.menu > li > a[aria-current="page"], .menu__btn[data-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.5em; text-decoration-color: var(--color-ink); }

.menu__btn svg { width: 12px; height: 12px; transition: transform var(--dur-short) var(--ease-out); }

.has-menu.open .menu__btn svg { transform: rotate(180deg); }

.has-menu { position: relative; }

.submenu { position: absolute; top: calc(100% + var(--space-xs)); left: 50%; z-index: var(--z-dropdown); display: none; min-width: 320px; padding: var(--space-xs); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper); translate: -50% 0; list-style: none; }

.submenu::before { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)) 0 auto; height: var(--space-xs); }

.has-menu:hover .submenu, .has-menu:focus-within .submenu, .has-menu.open .submenu { display: grid; gap: var(--space-3xs); }

.js .has-menu:hover:not(.open):not(:focus-within) .submenu { display: grid; }

.submenu a { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }

.submenu a:hover, .submenu a:focus-visible { background: var(--color-paper-3); }

.submenu a[aria-current="page"] { background: var(--color-paper-2); }

.submenu b { font-weight: 500; color: var(--color-ink); }

.submenu span { font-size: var(--text-sm); color: var(--color-ink-2); }

.submenu a[aria-current="page"] b { color: var(--color-accent); }

.nav__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); }

.nav__toggle { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }

.nav__toggle:hover { background: var(--color-paper-3); }

.nav__toggle svg { width: 20px; height: 20px; }

.nav__mode { display: inline-grid; border-color: transparent; color: var(--color-ink-2); }

.nav__mode:hover { color: var(--color-ink); }

.nav__mode:active { background: var(--color-rule); }

html:not(.js) .nav__mode { display: none; }

.mnav { display: none; }

@media (max-width: 60rem) {
  .nav__bar { grid-template-columns: 1fr auto; }

  .nav__bar > .menu { display: none; }

  .nav__toggle { display: inline-grid; }

  .wordmark svg { width: 132px; }

  .mnav.open { display: block; position: fixed; inset: var(--nav-height) 0 0; z-index: var(--z-modal); overflow: auto; padding: var(--space-md) var(--gutter) var(--space-2xl); background: var(--color-paper); border-top: 1px solid var(--color-rule); }

  .mnav p { margin: var(--space-lg) 0 var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }

  .mnav ul { list-style: none; }

  .mnav a { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); font-size: var(--text-lg); font-weight: 500; text-decoration: none; }

  .mnav a small { display: block; margin-top: var(--space-3xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; }

  .mnav a[aria-current="page"] { color: var(--color-accent); }

  .mnav .btn { display: flex; margin-top: var(--space-xl); border-bottom: 1px solid var(--color-brand); color: var(--color-brand-ink); }

}
@media (max-width: 30rem) { .nav__end .btn { display: none; } }
.nav:has(.mnav.open) .nav__end .btn { visibility: hidden; }

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap); }

.section.band + .section.band, .section:not(.band, .field) + .section:not(.band, .field) { padding-top: calc(var(--section-gap) / 2); }

.section--s { padding-block: var(--section-gap-s); }

.section--flush-top { padding-top: 0; }

.band { background: var(--color-paper-2); }

.field { background: var(--color-field); color: var(--color-field-ink); }

.field h2, .field h3 { color: var(--color-field-ink); }

.field .lead, .field p { color: var(--color-field-ink-2); }

.head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }

.head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }

.head--split > h2 { grid-column: 1 / span 6; }

.head--split > :not(h2) { grid-column: 8 / -1; }

.head--split > .lead { max-width: 44ch; }

.head--top { align-items: start; }

.head__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); }

@media (max-width: 60rem) {
  .head--split > h2, .head--split > :not(h2) { grid-column: 1 / -1; }

  .head { margin-bottom: var(--space-xl); }

}

/* ---------- media frames ---------- */
.frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--ph, var(--color-paper-3)); }
/* Lazy photos sit on their own average colour (--ph, set per frame) and fade in once decoded; cached ones show at once (site.js). */
.ph-fade .frame[style*="--ph"] > img { opacity: 0; transition: opacity 450ms var(--ease-out); }
.ph-fade .frame[style*="--ph"] > img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ph-fade .frame[style*="--ph"] > img { transition: none; } }

.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

.frame--4x3 { aspect-ratio: 4 / 3; }

.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the product's own interface (always dark) ---------- */
.ui { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-panel); color: var(--color-panel-ink); font-size: var(--text-sm); line-height: 1.5; outline: 1px solid var(--color-panel-rule); outline-offset: -1px; }

.ui__head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-panel-rule); }

.ui__head b { font-weight: 500; color: var(--color-panel-ink); }

.ui__head span { color: var(--color-panel-ink-2); }

.ui__head .ui__meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-panel-ink-2); }

.ui__body { display: grid; gap: var(--space-md); padding: var(--space-lg); }

.ui-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

.ui-table th { padding: var(--space-xs) 0; text-align: left; font-family: var(--font-body); font-weight: 400; color: var(--color-panel-ink-2); border-bottom: 1px solid var(--color-panel-rule); }

.ui-table td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-panel-rule); color: var(--color-panel-ink); }

.ui-table tr:last-child td { border-bottom: 0; }

.ui-table .r { text-align: right; }

.ui-table .warn { color: var(--color-panel-warn); }

.ui-pill { display: inline-flex; align-items: center; white-space: nowrap; min-height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-panel-rule); border-radius: var(--radius-pill); color: var(--color-panel-ink); font-size: var(--text-xs); }

.ui-ok { color: var(--color-panel-ok); }

/* ---------- code ---------- */
.code { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }

.code__tabs { display: flex; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm) 0; border-bottom: 1px solid var(--color-panel-rule); }

.code__tabs button { min-height: 44px; padding: 0 var(--space-md); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-panel-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }

.code__tabs button:hover { color: var(--color-panel-ink); }

.code__tabs button[aria-selected="true"] { color: var(--color-panel-ink); border-bottom-color: var(--color-panel-accent); }

.code__tabs button:focus-visible { outline: 2px solid var(--color-panel-accent); outline-offset: -4px; }

.code pre { margin: 0; padding: var(--space-lg); overflow-x: auto; font-size: var(--text-sm); line-height: 1.75; color: var(--color-panel-ink); tab-size: 2; }

.code pre:focus-visible { outline: 2px solid var(--color-panel-accent); outline-offset: -4px; }

.code .c { color: var(--color-panel-ink-2); }

.code .s { color: var(--color-panel-ok); }

.code .k { color: var(--color-panel-accent); }

.code__foot { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-panel-rule); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-panel-ink-2); }

.code__foot .ui-ok { font-weight: 500; }

/* ---------- close (the booking band) ---------- */
.close { padding-block: var(--section-gap-s); }

.close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }

.close h2 { grid-column: 1 / span 7; font-size: var(--text-display-s); max-width: 16ch; }

.close__side { grid-column: 9 / -1; display: grid; gap: var(--space-lg); }

.close__side p { color: var(--color-field-ink-2); max-width: 38ch; }

.close__contact { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }

.close__contact a { color: var(--color-field-ink); text-decoration-color: var(--color-field-rule); }

.close__contact a:hover { text-decoration-color: currentColor; }

@media (max-width: 60rem) { .close h2, .close__side { grid-column: 1 / -1; } }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-rule); }

.foot__mast { display: block; width: min(100%, 14rem); margin-bottom: var(--space-sm); color: var(--color-brand); text-decoration: none; }

.foot__mast svg { width: 100%; height: auto; }

.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }

.foot__lede { grid-column: 1 / span 4; display: grid; align-content: start; gap: var(--space-sm); }

.foot__lede p { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 16ch; }

.foot__col { grid-column: span 2; }

.foot__col--wide { grid-column: span 3; }

.foot__col:first-of-type { grid-column: 6 / span 2; }

.foot h2 { margin-bottom: var(--space-sm); font: 400 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }

.foot ul { list-style: none; display: grid; gap: var(--space-xs); }

.foot ul a { padding-block: var(--space-xs); color: var(--color-ink); text-decoration: none; }

.foot ul a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-ink-2); }

.foot__legal a { color: var(--color-ink-2); }

@media (max-width: 60rem) {
  .foot__lede { grid-column: 1 / -1; }

  .foot__col, .foot__col:first-of-type, .foot__col--wide { grid-column: span 6; }

}
@media (max-width: 40rem) { .foot__col--wide { grid-column: 1 / -1; } }

/* ---------- loops that can pause ---------- */
[data-loop]:not(.is-running), [data-loop]:not(.is-running) *, [data-loop]:not(.is-running) *::before, [data-loop]:not(.is-running) *::after { animation-play-state: paused !important; }

html:not(.js) [data-loop-toggle] { display: none; }

.loop-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }

.loop-toggle:hover { background: var(--color-paper-3); }

.loop-toggle svg { width: 14px; height: 14px; }

/* =========================================================
   HOME
   ========================================================= */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }

.hero h1 { font-size: clamp(2.5rem, 2.9vw + 1rem, 4.25rem); max-width: 15ch; }

.hero .lead { max-width: 34ch; }

.hero .actions { margin-top: var(--space-xs); }

.film { margin: 0; }

.logos { padding-block: var(--space-2xl); border-block: 1px solid var(--color-rule); }

.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent); }

.marquee__track { display: flex; width: max-content; animation: marquee 56s linear infinite; }

.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee ul { display: flex; align-items: center; gap: var(--space-3xl); padding-right: var(--space-3xl); list-style: none; }

.marquee li { display: flex; align-items: center; height: 56px; }

.marquee img { width: 140px; height: 44px; object-fit: contain; filter: var(--logo-filter); mix-blend-mode: var(--logo-blend); opacity: var(--logo-opacity); transition: filter .3s ease, opacity .3s ease; }
@media (hover: hover) { .marquee li:hover img { filter: var(--logo-filter-on); mix-blend-mode: normal; opacity: 1; } }

@keyframes marquee { to { transform: translateX(-50%); } }
.logos__h { max-width: none; margin-bottom: var(--space-lg); font: 500 var(--text-md)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }


@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; }

  .marquee__track { animation: none; width: auto; justify-content: center; }

  .marquee ul { flex-wrap: wrap; justify-content: center; gap: var(--space-md) var(--space-xl); max-width: 78rem; margin-inline: auto; padding-right: 0; }

  .marquee ul[aria-hidden="true"] { display: none; }

}

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }

.ticks { display: grid; gap: var(--space-sm); list-style: none; }

.ticks li { display: flex; gap: var(--space-sm); align-items: flex-start; }

.ticks .icon { margin-top: var(--space-2xs); color: var(--color-accent); }

.on-field .ticks .icon { color: var(--color-field-ink); }

@media (max-width: 60rem) {
  .split > * { grid-column: 1 / -1 !important; }

}

.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; counter-reset: stage; }

.stages li { counter-increment: stage; }

.stages a { display: grid; gap: var(--space-sm); height: 100%; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); color: inherit; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }

.stages a::before { content: counter(stage); font: 600 var(--text-figure)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }

.stages a:hover { border-top-color: var(--color-accent); }

.stages a:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.stages p { color: var(--color-ink-2); max-width: 32ch; }

@media (max-width: 60rem) { .stages { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); } }

.api-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }

.api-split__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }

.api-split__code { grid-column: 7 / -1; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin-top: var(--space-lg); padding-top: var(--space-xl); border-top: 1px solid var(--color-field-rule); list-style: none; }

.facts li { display: grid; gap: var(--space-xs); color: var(--color-field-ink); }

.facts .icon { color: var(--color-field-ink-2); }

@media (max-width: 60rem) { .api-split__text, .api-split__code { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .facts { grid-template-columns: minmax(0, 1fr); } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }

.trio article { display: grid; gap: var(--space-sm); align-content: start; }

.trio .frame { margin-bottom: var(--space-sm); }

.trio p { color: var(--color-ink-2); }

@media (max-width: 60rem) { .trio { column-gap: var(--space-md); } }
@media (max-width: 40rem) { .trio { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); } }

.rows { list-style: none; border-top: 1px solid var(--color-rule-strong); }

.rows > li, .rows > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }

.rows dt, .rows h3 { grid-column: 1 / span 5; font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); letter-spacing: var(--tracking-display); line-height: 1.2; color: var(--color-ink); }

.rows dd { grid-column: 7 / -1; margin: 0; color: var(--color-ink-2); }

.rows dd, .rows > li > p { font-size: var(--text-lg); }

@media (max-width: 60rem) { .rows dt, .rows h3, .rows dd { grid-column: 1 / -1; } .rows > li, .rows > div { row-gap: var(--space-xs); } }

.gains { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin-bottom: var(--space-3xl); padding-block: var(--space-xl); border-block: 1px solid var(--color-rule-strong); }

.gains > h3 { grid-column: 1 / span 4; max-width: 14ch; }

.gains__item { grid-column: span 4; display: grid; gap: var(--space-xs); align-content: start; padding-left: var(--space-lg); border-left: 1px solid var(--color-rule-strong); }

.gains__item b { margin-bottom: var(--space-sm); font: 600 var(--text-display-s)/0.95 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.gains__item h4 { margin: 0; font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }

.gains__item p { color: var(--color-ink-2); }

@media (max-width: 60rem) { .gains > h3, .gains__item { grid-column: 1 / -1; } .gains__item { padding-left: 0; border-left: 0; } }

.case-lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; margin-bottom: var(--space-2xl); }

.case-lead .frame { grid-column: 1 / span 6; }

.case-lead__text { grid-column: 8 / -1; display: grid; gap: var(--space-md); }

.case-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

.case-meta b { color: var(--color-ink); font-weight: 500; }

.case-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }

.case-fig b { font: 600 var(--text-figure)/0.95 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }

.case-fig > span { color: var(--color-ink-2); }

.quote { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-rule-strong); }

.quote p { font-size: var(--text-lg); color: var(--color-ink); text-indent: -0.42em; }

.quote footer { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }

@media (max-width: 60rem) { .case-lead .frame, .case-lead__text { grid-column: 1 / -1; } }

.index { list-style: none; border-top: 1px solid var(--color-rule-strong); }

.index a { display: grid; grid-template-columns: 9rem minmax(0, 3fr) minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: center; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule-strong); color: inherit; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }

.index a:hover { background: color-mix(in oklab, var(--color-paper-3) 60%, transparent); }

.index a:hover .index__title { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.index .frame { border-radius: var(--radius-inner); }

.index__who b { display: block; font-weight: 500; color: var(--color-ink); }

.index__who span { font-size: var(--text-sm); color: var(--color-ink-2); }

.index__fig b { display: block; font: 600 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }

.index__fig > span { font-size: var(--text-sm); color: var(--color-ink-2); }

.index__title { font: 600 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); }

@media (max-width: 60rem) {
  .index a { grid-template-columns: 7rem minmax(0, 1fr); row-gap: var(--space-xs); }

  .index .frame { grid-row: span 3; align-self: start; }

}

.news-rows { list-style: none; border-top: 1px solid var(--color-rule-strong); }

.news-rows a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-strong); color: inherit; text-decoration: none; }

.news-rows a:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.news-rows .frame { grid-column: 1 / span 3; border-radius: var(--radius-inner); }

.news-rows__text { grid-column: 4 / span 8; display: grid; gap: var(--space-xs); }

.news-rows__text small { color: var(--color-ink-2); }

.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.kind { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-ink); font: 500 var(--text-xs)/1 var(--font-body); white-space: nowrap; }

.news-rows__text p { color: var(--color-ink-2); }

@media (max-width: 60rem) { .news-rows .frame { grid-column: 1 / span 4; } .news-rows__text { grid-column: 5 / -1; } }
@media (max-width: 40rem) { .news-rows .frame, .news-rows__text { grid-column: 1 / -1; } }

/* =========================================================
   WATTSON
   ========================================================= */
.stage { background: var(--color-panel); color: var(--color-panel-ink); }

.stage h1, .stage h2, .stage h3 { color: var(--color-panel-ink); }

.stage .lead, .stage p { color: var(--color-panel-ink-2); }

.stage .btn { background: var(--color-panel-ink); border-color: var(--color-panel-ink); color: var(--color-panel); }

.stage .btn:hover { background: var(--color-panel-ink-2); border-color: var(--color-panel-ink-2); }

.stage .btn--quiet, .stage .loop-toggle { background: transparent; color: var(--color-panel-ink); border-color: var(--color-panel-rule); }

.stage .btn--quiet:hover, .stage .loop-toggle:hover { background: var(--color-panel-2); }

.stage :focus-visible { outline-color: var(--color-panel-accent); }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); list-style: none; }

.chip { display: grid; gap: var(--space-3xs); width: 100%; min-height: 64px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-panel-rule); border-radius: var(--radius-inner); background: var(--color-panel-2); color: var(--color-panel-ink); font: 500 var(--text-sm)/1.35 var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }

.chip small { font-size: var(--text-xs); font-weight: 400; color: var(--color-panel-accent); }

.chip:hover { border-color: var(--color-panel-ink-2); }

.chip[aria-pressed="true"] { border-color: var(--color-panel-accent); background: var(--color-panel-3); }

.chip:focus-visible { outline: 2px solid var(--color-panel-accent); outline-offset: 2px; }

@media (max-width: 40rem) { .film__controls { flex-direction: column; align-items: flex-start; } .film__controls .hint { min-height: 1lh; } }
@media (max-width: 30rem) { .chips { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 60rem) { .cols3 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); } }

.practice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }

.points { display: grid; gap: var(--space-lg); list-style: none; }

.points li { display: grid; gap: var(--space-xs); padding-left: var(--space-lg); border-left: 2px solid var(--color-rule-strong); }

.points p { color: var(--color-ink-2); }

@media (max-width: 60rem) { .practice__text, .practice__visual { grid-column: 1 / -1; } .practice__text { position: static; } }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.compare [data-play] { --pace: 420ms; }

.compare > div { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); }

.compare ol { list-style: none; counter-reset: step; }

.compare li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }

.compare li::before { content: counter(step); font-variant-numeric: tabular-nums; color: var(--color-muted); }

.compare li:last-child { border-bottom: 0; }

.compare__result { padding-top: var(--space-md); border-top: 1px solid var(--color-rule-strong); color: var(--color-ink-2); }

.compare .is-wattson { background: var(--color-panel); color: var(--color-panel-ink); box-shadow: inset 0 0 0 1px var(--color-panel-rule); }

.compare .is-wattson h3 { color: var(--color-panel-ink); }

.compare .is-wattson li { border-bottom-color: var(--color-panel-rule); }

.compare .is-wattson li::before { color: var(--color-panel-accent); }

.compare .is-wattson .compare__result { border-top-color: var(--color-panel-rule); color: var(--color-panel-ok); }

@media (max-width: 60rem) { .compare { grid-template-columns: minmax(0, 1fr); } }

.diagram { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; align-items: center; }

.diagram ul { display: grid; gap: var(--space-sm); list-style: none; }

.diagram li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-inner); background: var(--color-paper); }

.diagram li b { font-weight: 500; color: var(--color-ink); }

.diagram li span { font-size: var(--text-sm); color: var(--color-ink-2); text-align: right; }

.diagram ul:first-child li::after, .diagram ul:last-child li::before { content: ""; position: absolute; top: 50%; width: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }

.diagram ul:first-child li::after { left: 100%; }

.diagram ul:last-child li::before { right: 100%; }

.diagram__core { display: grid; place-items: center; width: 10rem; aspect-ratio: 1; margin-inline: var(--space-xl); border-radius: var(--radius-card); background: var(--color-panel-accent-fill); color: var(--color-panel-on-accent); font-weight: 500; }

.diagram__core svg { width: 44px; height: auto; }

.diagram__core > span { display: grid; place-items: center; gap: var(--space-xs); }

.platform-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }

.platform-note p { max-width: 60ch; color: var(--color-ink-2); }

.platform-note b { color: var(--color-ink); font-weight: 600; }

@media (max-width: 60rem) {
  .diagram { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }

  .diagram__core { order: -1; width: 100%; aspect-ratio: auto; margin: 0; padding: var(--space-lg); }

  .diagram__core > span { grid-auto-flow: column; }

  .diagram li::after, .diagram li::before { display: none; }

}

.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }

.faq > h2 { grid-column: 1 / span 4; }

.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--color-rule-strong); }

.faq details { border-bottom: 1px solid var(--color-rule-strong); }

.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); cursor: pointer; list-style: none; transition: color var(--dur-short) var(--ease-out); }

.faq summary::-webkit-details-marker { display: none; }

.faq summary .icon { transition: transform var(--dur-short) var(--ease-out); }

.faq details[open] summary .icon { transform: rotate(180deg); }

.faq summary:hover { color: var(--color-ink-2); }

.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

@media (max-width: 60rem) { .faq > h2, .faq__list { grid-column: 1 / -1; } }

.steps-close__h { margin-top: var(--space-3xl); margin-bottom: var(--space-lg); font-size: var(--text-title); }

/* A chain: numbered steps hang off one line that draws itself when the row is first seen. */
.chain { --chain-ink: var(--color-ink); --chain-ink-2: var(--color-ink-2); --chain-node: 0.875rem; display: grid; gap: var(--space-lg); }
.chain__steps { position: relative; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(var(--chain-n, 4), minmax(0, 1fr)); gap: var(--gap-columns); padding-top: var(--space-xl); }
.chain__steps::before { content: ""; position: absolute; top: calc(var(--chain-node) / 2 - 1px); inset-inline: 0; height: 2px; background: var(--chain-ink); transform-origin: left center; }
.js .chain[data-play] .chain__steps::before { transform: scaleX(0); }
.js .chain[data-play].is-playing .chain__steps::before { transform: none; transition: transform 1.1s var(--ease-out); }
.chain__steps > li { counter-increment: s; position: relative; display: grid; gap: var(--space-xs); align-content: start; }
.chain__steps > li::before { content: ""; position: absolute; top: calc(-1 * var(--space-xl)); left: 0; width: var(--chain-node); height: var(--chain-node); border-radius: 50%; background: var(--chain-ink); }
.chain__steps h3, .chain__steps b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.2; color: var(--chain-ink); }
.chain__steps p { color: var(--chain-ink-2); }
.chain--num { --chain-node: 2rem; --chain-n: 3; }
.chain--num .chain__steps > li::before { content: counter(s); display: grid; place-items: center; font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-field); }
.chain--num .chain__steps { padding-top: calc(var(--chain-node) + var(--space-md)); }
.chain--num .chain__steps > li::before { top: calc(-1 * (var(--chain-node) + var(--space-md))); }
.on-field .chain { --chain-ink: var(--color-field-ink); --chain-ink-2: var(--color-field-ink-2); }
.on-field .chain__steps b { font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); }
@media (max-width: 60rem) {
  .chain__steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); padding-top: 0; padding-left: calc(var(--chain-node) + var(--space-md)); }
  .chain--num .chain__steps { padding-top: 0; }
  .chain__steps::before { top: 0; bottom: 0; left: calc(var(--chain-node) / 2 - 1px); right: auto; width: 2px; height: auto; transform-origin: center top; }
  .js .chain[data-play] .chain__steps::before { transform: scaleY(0); }
  .chain__steps > li::before, .chain--num .chain__steps > li::before { top: 0.15em; left: calc(-1 * (var(--chain-node) + var(--space-md))); }
}
@media (prefers-reduced-motion: reduce) { .js .chain[data-play] .chain__steps::before { transform: none; } }

.value { margin-top: var(--space-3xl); }
.head--split > .value__h { grid-column: 1 / span 6; font-size: var(--text-section); }
@media (max-width: 60rem) { .head--split > .value__h { grid-column: 1 / -1; } }

/* ---------- built panels that play their steps once, when they scroll into view ---------- */
.js [data-play] [data-step] { opacity: 0; transform: translateY(6px); }

.js [data-play].is-playing [data-step] { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--pace, 160ms)); }

@media (prefers-reduced-motion: reduce) { .js [data-play] [data-step] { opacity: 1; transform: none; } }
.code__send { display: none; align-items: center; gap: var(--space-xs); min-height: 32px; margin: 0 0 var(--space-xs) auto; padding: 0 var(--space-md); border: 1px solid var(--color-panel-rule); border-radius: var(--radius-pill); background: var(--color-panel-2); color: var(--color-panel-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }

.js .code__send { display: inline-flex; }

.code__send:hover { border-color: var(--color-panel-accent); }

.code__send:focus-visible { outline: 2px solid var(--color-panel-accent); outline-offset: 2px; }

.code__send[aria-busy="true"] { cursor: progress; }

.code__send .icon { width: 14px; height: 14px; }

.code__bar { display: flex; padding: var(--space-xs) var(--space-lg) 0; border-top: 1px solid var(--color-panel-rule); }

.code__bar .code__send { margin: 0 0 var(--space-xs) auto; }

.code__tabs { align-items: center; }

.code__resp { border-top: 1px solid var(--color-panel-rule); }

.code__resp.is-armed { display: none; }

.code__resp .code__foot { border-top: 0; padding-bottom: 0; }

.code__resp pre { color: var(--color-panel-ink-2); }

.code__resp.is-shown { animation: resp-in var(--dur-long) var(--ease-out); }

@keyframes resp-in { from { opacity: 0; } }

/* product panels other than code take the webclient's own surfaces (app.css), in both modes */
.ui:not(.code) { --color-panel: var(--app-card); --color-panel-2: var(--app-muted); --color-panel-3: var(--app-accent); --color-panel-rule: var(--app-border); --color-panel-ink: var(--app-fg); --color-panel-ink-2: var(--app-muted-fg); --color-panel-accent: var(--app-primary); --color-panel-accent-fill: var(--app-primary-solid); --color-panel-on-accent: var(--app-primary-fg); --color-panel-ok: var(--app-success); --color-panel-warn: var(--app-warning); font-family: var(--app-font); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; outline: 0; box-shadow: var(--app-elev-panel); }

@media (max-width: 40rem) { .code__tabs { flex-wrap: wrap; } .code__tabs [role="tab"] { padding-inline: var(--space-sm); } }
.code__tabs .code__send { min-height: 32px; border: 1px solid var(--color-panel-rule); border-bottom: 1px solid var(--color-panel-rule); }

/* Arrival: the first screen rises in once on load; blocks further down settle in the first time they are seen (site.js tags them).
   Blocks are never hidden ahead of time, so text stays visible to crawlers and screenshots that never scroll. */
.nav { transition: box-shadow var(--dur-short) var(--ease-out); }
.nav.is-scrolled { box-shadow: 0 var(--space-xs) var(--space-xl) calc(-1 * var(--space-sm)) color-mix(in oklab, var(--color-ink) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .js main > :first-child :is(h1, h1 + *, h1 + * + *, h1 + * + * + *, h1 + * + * + * + *, .demo__asks) { animation: rise var(--dur-enter) var(--ease-out) backwards; }
  .js main > :first-child h1 + * { animation-delay: 90ms; }
  .js main > :first-child h1 + * + * { animation-delay: 180ms; }
  .js main > :first-child h1 + * + * + * { animation-delay: 270ms; }
  .js main > :first-child h1 + * + * + * + * { animation-delay: 360ms; }
  .js main > :first-child figure:not(figure figure) { animation: rise-visual var(--dur-settle) var(--ease-out) 220ms backwards; }
  .js main > :first-child .demo__asks { animation-delay: 420ms; }
  .js [data-reveal].is-in { animation: rise var(--dur-enter) var(--ease-out) backwards; animation-delay: calc(var(--ri, 0) * 80ms); }
  .js [data-reveal].is-in :is(.frame img, img.frame), .js .frame[data-reveal].is-in img { animation: settle var(--dur-settle) var(--ease-out) backwards; animation-delay: calc(var(--ri, 0) * 80ms); }
}
@keyframes rise { from { opacity: 0; translate: 0 var(--space-lg); } }
@keyframes rise-visual { from { opacity: 0; translate: 0 var(--space-xl); scale: 0.985; } }
@keyframes settle { from { scale: 1.06; } }

.frame:has(> img) { aspect-ratio: auto; }
.frame > img { height: auto; }

/* footer: ISO/IEC 27001 certification badge under the tagline */
.iso-badge { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: start; margin-top: var(--space-sm); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-inner); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.iso-badge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--color-accent); }
.iso-badge span { display: grid; line-height: 1.2; }
.iso-badge b { font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: 0.01em; }
.iso-badge small { font-size: var(--text-xs); color: var(--color-ink-2); }
.iso-badge:hover { border-color: var(--color-accent); background: var(--color-paper-2); }
.iso-badge:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }