/*
 * The Teknapp marketing site. Colours, fonts, radii and the product's own
 * sizes come from /css/tokens.css (generated from @teknapp/design-tokens, the
 * copy the apps import): everything here reads them as var(--tk-…).
 *
 * Direction «Quadro» (design/handoff/README.md): navy frames the work,
 * content sits on white with hairlines and no depth, numbers are set in a
 * monospace. The website uses the brand green more than the app does, as an
 * accent: a fill behind navy text (the main buttons) and text or marks on
 * navy. Never a large fill but the call-to-action band, never text on a light
 * ground (1.34:1 on white); on a light band only a graphic nobody has to read,
 * such as the underline under a highlighted word (README "The design").
 *
 * The app replicas (.app-*, .ph-*, .pdf-*) are drawn at the product's own
 * density — 13px body, 28px controls, 32px rows — so they read as the app.
 *
 * No inline styles anywhere (the CSP forbids them): a layout variant is a
 * class.
 */

/* ── Fonts, self-hosted (no request leaves the site) ─────────────────────── */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-400-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: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-ext-400-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: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-500-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: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-ext-500-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: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-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: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-ext-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-ext-500-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; }

/* ── The website's own values ────────────────────────────────────────────── */
:root {
  --wrap: 1200px;
  --gutter: 24px;
  --band-y: 104px;
  --text: var(--tk-text-primary);
  --muted: var(--tk-text-secondary);
  --line: var(--tk-border-container);
  --line-soft: var(--tk-border-row);
  --navy: var(--tk-navy);
  --green: var(--tk-green);
  --on-navy-muted: var(--tk-on-navy-muted);
  --sans: var(--tk-font-sans);
  --mono: var(--tk-font-mono);
  --r-sm: var(--tk-radius-sm);
  --r-md: var(--tk-radius-md);
  --r-lg: 12px;
  /* The marketing type scale: the app's own is 13px body, far too small to sell with. */
  --fs-display: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: #FFFFFF;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--tk-focus-light); border-radius: var(--r-sm); }
.on-navy :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { box-shadow: var(--tk-focus-on-navy); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

.container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; background: var(--green); color: var(--navy); font-weight: 600; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  font-size: 0.9375rem; font-weight: 500; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--tk-motion), border-color var(--tk-motion), color var(--tk-motion);
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
/* Green behind navy text: 10.83:1. */
.btn-green { background: var(--green); color: var(--navy); }
.btn-green:hover { background: #5CFFB1; }
.btn-navy { background: var(--navy); color: #FFFFFF; }
.btn-navy:hover { background: var(--tk-navy-raised); }
.btn-navy:active { background: var(--tk-navy-deep); }
.btn-outline { background: #FFFFFF; color: var(--text); border-color: var(--tk-border-control); }
.btn-outline:hover { background: var(--tk-slate-50); }
.btn-ghost-light { background: transparent; color: #FFFFFF; border-color: rgba(193, 209, 243, 0.45); }
.btn-ghost-light:hover { background: var(--tk-navy-raised); border-color: var(--on-navy-muted); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.link-button { padding: 0; background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid rgba(193, 209, 243, 0.16); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: block; flex: none; }
.brand img { width: 108px; height: auto; }
.header-nav { flex: 1; }
.header-nav ul { display: flex; gap: 4px; list-style: none; }
.header-nav a, .menu-panel li a {
  display: block; padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--on-navy-muted); font-size: 0.9375rem; text-decoration: none;
  transition: background-color var(--tk-motion), color var(--tk-motion);
}
.header-nav a:hover, .menu-panel li a:hover { background: var(--tk-navy-raised); color: #FFFFFF; }
.header-actions { display: flex; gap: 10px; }
.header-menu { display: none; margin-left: auto; }
.header-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); cursor: pointer; }
.header-menu > summary::-webkit-details-marker { display: none; }
.header-menu > summary:hover { background: var(--tk-navy-raised); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; background: #FFFFFF; border-radius: 1px; transition: transform var(--tk-motion), opacity var(--tk-motion); }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.header-menu[open] .menu-icon { background: transparent; }
.header-menu[open] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.header-menu[open] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
.header-menu:not([open]) .menu-panel { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 12px var(--gutter) 20px; background: var(--navy); border-bottom: 1px solid rgba(193, 209, 243, 0.16); display: grid; gap: 10px; }
.menu-panel ul { list-style: none; display: grid; gap: 2px; margin-bottom: 6px; }
.menu-panel li a { font-size: 1.0625rem; padding: 12px; }
.menu-panel .btn { width: 100%; }

@media (max-width: 1080px) { .header-nav a { padding: 8px 9px; font-size: 0.875rem; } .header-row { gap: 18px; } }
@media (max-width: 940px) {
  .header-nav, .header-actions { display: none; }
  .header-menu { display: block; }
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
.band { padding: var(--band-y) 0; }
.band-tint { background: var(--tk-slate-50); }
.band-navy { background: var(--navy); color: #FFFFFF; }
.band-navy a:not(.btn) { color: #FFFFFF; }
.band-rule { border-top: 1px solid var(--line); }
@media (max-width: 767px) { :root { --band-y: 72px; --gutter: 18px; } }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--tk-navy-5);
  margin-bottom: 18px;
}
.kicker::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.band-navy .kicker, .hero .kicker { color: var(--green); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: 18px; font-size: var(--fs-lead); color: var(--muted); }
.band-navy .section-head p { color: var(--on-navy-muted); }
em.hl { font-style: normal; color: var(--navy); background: linear-gradient(transparent 62%, rgba(0, 255, 135, 0.55) 62%); }
.band-navy em.hl, .hero em.hl, .og em.hl { color: var(--green); background: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--navy); color: #FFFFFF; padding: 88px 0 0; }
.hero::before {
  /* The app's grid of hairlines, faint, behind the hero. */
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(193, 209, 243, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(193, 209, 243, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.hero-copy { max-width: 880px; }
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; }
.hero-lead { margin-top: 24px; max-width: 720px; font-size: var(--fs-lead); color: var(--on-navy-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; list-style: none; font-size: var(--fs-small); color: var(--on-navy-muted); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points svg { width: 16px; height: 16px; color: var(--green); }
.hero-stage { position: relative; margin-top: 8px; }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

/* ── How it works: the chain (customer → report), as a bento ─────────────────
 * Steps 01–03 are one cell: each step a row, its level of the record
 * (MockRecord) beside it, and the three levels one tree on a slate panel, the
 * lines between them navy 3. A rail joins the three numbers, and each title's
 * rule runs to a dot on the panel, level with its node. Under 900px each step
 * sits over its level, and the rail runs on through the nodes, each hanging
 * from it, further in at each level: the chain is the one line.
 * Steps 04 and 05 are cells of their own with the app's screens, the report's
 * on navy. Every row's metrics meet at 21px: the number's and the title's
 * middle (42px lines), the node's head (1px border + 40px).
 */
.bento {
  --bento-pad: 40px; --bento-row: 28px; --link-gap: 56px; --num-col: 48px; --line-c: var(--tk-navy-3);
  list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px;
}
.bento-step { position: relative; display: grid; grid-template-columns: var(--num-col) minmax(0, 1fr); column-gap: 20px; align-content: start; }
.bento-num { grid-row: 1 / span 2; font-family: var(--mono); font-size: 2.5rem; line-height: 42px; font-weight: 500; letter-spacing: -0.03em; color: var(--navy); }
.bento-step h3 { display: flex; align-items: center; gap: 16px; min-height: 42px; font-size: 1.375rem; }
.bento-step p { margin-top: 4px; color: var(--muted); }

/* 01–03: one cell made of three rows. */
.bento-link {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--link-gap);
  padding: var(--bento-row) var(--bento-pad) 0; background: #FFFFFF; border: 1px solid var(--line); border-block: 0;
}
.bento-link:first-child { padding-top: var(--bento-pad); border-top: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; }
.bento-link:nth-child(3) { padding-bottom: var(--bento-pad); border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); }
/* The rail between the numbers: under 01 and 02, over 02 and 03. */
.bento-link .bento-step::before, .bento-link .bento-step::after { content: ''; position: absolute; left: calc(var(--num-col) / 2); width: 1px; background: var(--line-c); }
.bento-link .bento-step::after { top: 48px; bottom: 0; }
.bento-link .bento-step::before { top: calc(-1 * var(--bento-row)); height: calc(var(--bento-row) - 6px); }
.bento-link:first-child .bento-step::before, .bento-link:nth-child(3) .bento-step::after { content: none; }
/* Each title's rule, to its dot on the panel. */
.bento-link h3::after { content: ''; flex: 1; min-width: 24px; height: 1px; margin-right: calc(-1 * var(--link-gap)); background: var(--line-c); }

/* The record: one slate panel across the three rows, a tree of white nodes. */
.record { --above: var(--bento-row); position: relative; display: flex; flex-direction: column; margin-top: calc(-1 * var(--above)); padding: var(--above) 24px 0; background: var(--tk-slate-50); }
.record-1 { --above: 16px; --indent: 0px; border-radius: var(--r-md) var(--r-md) 0 0; }
.record-2 { --indent: 32px; }
.record-3 { --indent: 64px; padding-bottom: 16px; border-radius: 0 0 var(--r-md) var(--r-md); }
.record::before { content: ''; position: absolute; left: -4px; top: calc(var(--above) + 16px); width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }
.record-node { position: relative; margin-left: var(--indent); padding: 0 14px 12px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-sm); }
.record-type { display: flex; align-items: center; gap: 8px; min-height: 40px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--tk-navy-5); }
.record-type svg { width: 16px; height: 16px; flex: none; }
.record-name { display: block; margin-top: -6px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.record-fields { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 0; }
.record-fields dt { font-size: 0.75rem; line-height: 1.3; font-weight: 500; color: var(--tk-text-label); }
.record-fields dd { margin: 0; font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
/* The tree: a stem down from a node, an elbow into the next one. */
.record-stem { flex: 1; min-height: 0; margin-left: calc(var(--indent) + 16px); border-left: 1px solid var(--line-c); }
.record-3 .record-stem { display: none; }
.record-2 .record-node::before, .record-3 .record-node::before {
  content: ''; position: absolute; left: -17px; top: calc(-1 * var(--above)); width: 16px; height: calc(var(--above) + 20px);
  border-left: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); border-bottom-left-radius: var(--r-md);
}

/* 04 and 05: a cell each, the app's screen running off its edge. */
.bento-cell { display: flex; flex-direction: column; margin-top: 16px; padding: 36px 36px 0; border: 1px solid var(--line); border-radius: var(--r-md); background: #FFFFFF; overflow: hidden; }
.bento-request { grid-column: span 5; }
.bento-report { grid-column: span 7; background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.bento-report .bento-num { color: var(--green); }
.bento-report .bento-step p { color: var(--on-navy-muted); }
.bento-shot { position: relative; flex: 1; min-height: 360px; margin-top: 28px; overflow: hidden; }
.bento-request .bento-shot { margin-right: -36px; }
.request-shot { position: absolute; top: 0; left: 0; width: max(540px, 100%); padding: 16px; background: var(--tk-slate-50); border: 1px solid var(--line); border-width: 1px 0 0 1px; border-top-left-radius: var(--r-md); font-size: 13px; line-height: 20px; color: var(--text); }
.request-shot .app-title-row { justify-content: flex-start; gap: 14px; }
.request-shot .app-title-row h4 .mono { font-weight: 500; }
.app-input.disabled { background: var(--tk-slate-50); color: var(--muted); }
.app-alert.warning { background: var(--tk-warning-tint); color: var(--text); }
.app-alert strong { display: block; color: var(--tk-warning-tint-text); font-weight: 600; }
.bento-report .bento-shot { display: grid; justify-items: center; }
.bento-report .pdf { position: absolute; top: 0; width: 400px; max-width: 100%; }
.toast { position: absolute; left: 0; bottom: 32px; z-index: 1; display: flex; align-items: flex-start; gap: 10px; max-width: 330px; padding: 12px 16px 12px 14px; border-radius: var(--r-md); background: var(--tk-navy-deep); box-shadow: var(--tk-shadow-toast), 0 0 0 1px var(--tk-navy-6); color: var(--on-navy-muted); font-size: 12px; line-height: 17px; }
.toast svg { width: 18px; height: 18px; flex: none; color: var(--green); }
.toast strong { display: block; color: #FFFFFF; font-size: 13px; line-height: 18px; font-weight: 600; }

@media (max-width: 1023px) {
  .bento-request, .bento-report { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .bento { --bento-pad: 22px; --bento-row: 24px; --num-col: 44px; }
  .bento-num { font-size: 2.125rem; }
  .bento-step { column-gap: 14px; }
  .bento-step h3 { font-size: 1.25rem; }
  .bento-step p { font-size: var(--fs-small); }
  .bento-link { grid-template-columns: minmax(0, 1fr); }
  .bento-link h3::after, .record::before, .record-stem { display: none; }
  /* The rail runs on, past each step and its node, down to the last node. */
  .bento-link .bento-step::after { bottom: -16px; }
  .bento-link:nth-child(3) .bento-step::after { content: ''; bottom: 0; }
  .record { --above: 0px; margin: 16px 0 0 var(--num-col); padding: 0; background: none; border-radius: 0; }
  .record-1 { --indent: 0px; } .record-2 { --indent: 14px; } .record-3 { --indent: 28px; padding-bottom: 0; }
  .record::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--num-col) / -2); width: 1px; background: var(--line-c); }
  .record-3::after { content: none; }
  /* Each node hangs from the rail; the last one closes it. */
  .record .record-node::before, .record-2 .record-node::before, .record-3 .record-node::before {
    content: ''; position: absolute; top: 0; left: calc(-1 * (var(--num-col) / 2 + var(--indent)) - 1px); width: calc(var(--num-col) / 2 + var(--indent)); height: 20px;
    border: 0; border-bottom: 1px solid var(--line-c); border-radius: 0;
  }
  .record-3 .record-node::before { top: -16px; height: 36px; border-left: 1px solid var(--line-c); border-bottom-left-radius: var(--r-md); }
  .bento-num { position: relative; z-index: 1; }
  .bento-cell { padding: 24px 22px 0; }
  .bento-shot { margin-top: 22px; }
  .bento-request .bento-shot { margin-right: -22px; }
}
@media (max-width: 560px) {
  .request-shot { width: 100%; }
  .toast { right: 12px; }
}

/* ── Spotlights: copy beside a replica («App per tecnici») ───────────────── */
.spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.spot.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.spot.flip .spot-copy { order: 2; }
.spot-copy > p { margin-top: 16px; color: var(--muted); }
.band-navy .spot-copy > p { color: var(--on-navy-muted); }
.ticks { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
.ticks li { position: relative; padding-left: 30px; font-size: var(--fs-small); line-height: 1.55; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 3px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300FF87' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ticks strong { font-weight: 600; }
.band-navy .ticks li::before { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2463' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.spot-visual { position: relative; }
@media (max-width: 1023px) {
  .spot, .spot.flip { grid-template-columns: 1fr; gap: 36px; }
  .spot.flip .spot-copy { order: 0; }
}

/* ── «Funzionalità»: four cards, two by two ──────────────────────────────────
 * All four alike: on top a window onto the app — the replica at the size it
 * has anywhere else, from the top left, cropped by the window's bottom and
 * right edges, never scaled — then the title, the text, a rule and the
 * points, each marked by a small green square: a graphic nobody has to read,
 * the one green a light band allows (DECISIONS 2026-10-22). The rows stretch,
 * so the two cards of a row are as tall as each other.
 */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tk-space-12); }
.feature { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--tk-radius-md); overflow: hidden; }
.feature-media { position: relative; flex: none; height: 380px; overflow: hidden; background: var(--tk-slate-50); border-bottom: 1px solid var(--line); }
/* The width the replicas had beside their copy: the app's window at 640px. */
.feature-shot { position: absolute; top: var(--tk-space-11); left: var(--tk-space-11); width: 640px; }
.feature-shot .pdf { margin: 0; }
.feature-body { flex: 1; padding: var(--tk-space-11); }
.feature-body h3 { font-size: var(--fs-h3); line-height: 1.3; }
.feature-body > p { margin-top: var(--tk-space-6); color: var(--muted); }
.feature-points { list-style: none; display: grid; gap: var(--tk-space-6); margin-top: var(--tk-space-10); padding-top: var(--tk-space-10); border-top: 1px solid var(--line); }
.feature-points li { position: relative; padding-left: var(--tk-space-9); font-size: var(--fs-small); line-height: 1.55; color: var(--muted); overflow-wrap: break-word; }
/* The square sits in the middle of the first line: half of 1.55em, less its half. */
.feature-points li::before { content: ''; position: absolute; left: 0; top: calc(0.775em - 3.5px); width: 7px; height: 7px; border-radius: 2px; background: var(--green); }
.feature-points strong { font-weight: 600; }
@media (max-width: 767px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature-media { height: 280px; }
}

/* ── «Su misura» ─────────────────────────────────────────────────────────────
 * The comparison and the brand each sit in a slate panel on the white band;
 * between them the points, a list in two columns with a hairline under each
 * row. Under 768px everything is one column.
 */
.custom-panel { padding: var(--tk-space-12); background: var(--tk-slate-50); border-radius: var(--tk-radius-md); }
.custom-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tk-space-4) var(--tk-space-10); margin-bottom: var(--tk-space-10); }
.custom-panel-head .showcase-title { margin-bottom: 0; }
/* The legend: the green rule the sheets' changed rows carry, and what it means. */
.custom-legend { display: inline-flex; align-items: center; gap: var(--tk-space-4); font-size: var(--fs-small); color: var(--muted); }
.custom-legend::before { content: ''; flex: none; width: var(--tk-space-2); height: var(--tk-space-8); background: var(--green); }
.custom-label { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--tk-space-5); }

/* The two sheets: one grid, each sheet its rows as a subgrid, so a row is as
   tall as its taller side on both, the sheets are the same height, and the
   added fields' block is the last row of each. The sheets keep the app's
   card (white, a hairline) and the app's fields, untouched. */
.custom-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tk-space-10); }
.compare-label-a { grid-area: 1 / 1; }
.compare-label-b { grid-area: 1 / 2; }
.compare-sheet { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 6; }
.compare-a { grid-column: 1; }
.compare-b { grid-column: 2; }
.compare-row { position: relative; padding: var(--tk-space-6) var(--tk-space-7) 0; }
.compare-sheet > .app-card-head + .compare-row { padding-top: var(--tk-space-7); }
.compare-row .app-note { margin-top: var(--tk-space-2); }
.compare-added { position: relative; display: grid; align-content: start; gap: var(--tk-space-6); margin-top: var(--tk-space-7); padding: var(--tk-space-6) var(--tk-space-7) var(--tk-space-7); border-top: 1px solid var(--line-soft); }
.compare-added .custom-label { margin-bottom: 0; }
/* A tenant's fields, stacked as the form stacks them (CustomFieldsSection: gap sm). */
.compare-added-fields { display: grid; gap: var(--tk-space-4); }
.compare-added.none { align-content: center; justify-items: center; text-align: center; }
/* A row that differs between the two: a green rule in the gutter, beside the
   field and as tall as it, never on it. */
.compare-sheet .diff::before { content: ''; position: absolute; left: calc((var(--tk-space-7) - var(--tk-space-2)) / 2); top: var(--tk-space-6); bottom: 0; width: var(--tk-space-2); background: var(--green); }
.compare-sheet .compare-added.diff::before { bottom: var(--tk-space-7); }

/* The points: two columns, a hairline above the first row and under each
   row, drawn by the row's first item across both (the rows stretch). */
.custom-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tk-space-12); margin: var(--tk-space-12) 0; border-top: 1px solid var(--line); }
.custom-item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: var(--tk-space-8); align-content: start; padding: var(--tk-space-10) 0; }
.custom-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.custom-item:nth-child(odd)::after { right: calc(-100% - var(--tk-space-12)); }
.custom-item:nth-child(even)::after { content: none; }
.custom-chip { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--tk-radius-sm); background: var(--navy); color: var(--green); }
.custom-chip svg { width: var(--tk-space-9); height: var(--tk-space-9); }
.custom-item h3 { font-size: var(--fs-h3); line-height: 1.3; }
.custom-item p { margin-top: var(--tk-space-3); font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }

/* The brand closes the section: its words on the left, the tenant's window
   and its icon whole on the right, the wrapper's padding room for the icon's
   shadow. */
.custom-brand { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tk-space-12); align-items: center; }
.custom-brand h3 { font-size: var(--fs-h3); line-height: 1.3; }
.custom-brand p { margin-top: var(--tk-space-6); color: var(--muted); }
.custom-brand-shot { padding: 0 var(--tk-space-8) var(--tk-space-8) 0; }

@media (max-width: 767px) {
  .custom-panel { padding: var(--tk-space-9) var(--tk-space-8); }
  .custom-compare { grid-template-columns: minmax(0, 1fr); }
  .compare-label-a, .compare-label-b, .compare-a, .compare-b { grid-area: auto; }
  .compare-sheet { grid-template-rows: none; grid-row: auto; }
  .compare-label-b { margin-top: var(--tk-space-10); }
  .custom-list { grid-template-columns: minmax(0, 1fr); }
  .custom-item:nth-child(odd)::after { right: 0; }
  .custom-item:nth-child(even)::after { content: ''; }
  .custom-brand { grid-template-columns: minmax(0, 1fr); }
}

/* ── Module list ─────────────────────────────────────────────────────────── */
/* Six modules: three columns (two full rows), two under 1024px (three rows),
   one under 561px. */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #FFFFFF; }
.module { padding: 22px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.module:nth-child(3n) { border-right: 0; }
.module h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin-bottom: 6px; }
.module h3 svg { width: 18px; height: 18px; color: var(--tk-navy-5); flex: none; }
.module p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 1023px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .module:nth-child(3n) { border-right: 1px solid var(--line-soft); } .module:nth-child(2n) { border-right: 0; } }
@media (max-width: 560px) { .modules { grid-template-columns: 1fr; } .module { border-right: 0 !important; } }

/* ── Security band ───────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(193, 209, 243, 0.18); border: 1px solid rgba(193, 209, 243, 0.18); border-radius: var(--r-md); overflow: hidden; }
.fact { padding: 30px 28px; background: var(--navy); }
.fact-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--green); color: var(--navy); margin-bottom: 18px; }
.fact-icon svg { width: 18px; height: 18px; }
.fact h3 { font-size: 1.125rem; margin-bottom: 8px; }
.fact p { font-size: var(--fs-small); color: var(--on-navy-muted); line-height: 1.6; }
@media (max-width: 1023px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 4px; cursor: pointer; font-size: 1.0625rem; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-3px) rotate(45deg); transition: transform var(--tk-motion); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq .answer { padding: 0 4px 24px; color: var(--muted); max-width: 760px; }
.faq .answer p + p { margin-top: 10px; }

/* ── Call to action ──────────────────────────────────────────────────────── */
/* The one band the green fills (DECISIONS 2026-10-22): everything on it navy,
   10.83:1; the main button navy with its white label, the other a navy
   outline; the focus ring the light surfaces' navy one. */
.cta { background: var(--green); color: var(--navy); padding: 88px 0; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.cta h2 { font-size: var(--fs-h2); }
.cta h2 em { font-style: normal; }
.cta p { margin-top: 14px; font-size: var(--fs-lead); max-width: 640px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.cta .btn-outline:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.cta :focus-visible { box-shadow: var(--tk-focus-light); }
@media (max-width: 900px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .cta-actions .btn { width: 100%; white-space: normal; text-align: center; padding: 10px 18px; line-height: 1.3; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--tk-navy-deep); color: var(--on-navy-muted); padding: 64px 0 28px; font-size: var(--fs-small); }
.site-footer a, .site-footer .link-button { color: var(--on-navy-muted); text-decoration: none; }
.site-footer a:hover, .site-footer .link-button:hover { color: #FFFFFF; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-brand img { width: 128px; margin-bottom: 18px; }
.footer-brand p { max-width: 360px; line-height: 1.6; }
.footer-title { color: #FFFFFF; font-weight: 600; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-legal { margin-top: 48px; font-size: 0.8125rem; font-family: var(--mono); }
.footer-legal p { padding-top: 22px; border-top: 1px solid rgba(193, 209, 243, 0.16); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
.legal { background: #FFFFFF; }
.legal-article { max-width: 880px; padding-top: 72px; padding-bottom: 96px; }
.legal-head { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.legal-title { font-size: var(--fs-h2); }
.legal-updated { margin-top: 12px; font-family: var(--mono); font-size: 0.875rem; color: var(--muted); }
.legal-lead { margin-top: 22px; font-size: var(--fs-lead); }
.legal-lead p + p { margin-top: 12px; }
.legal-toc { margin: 32px 0 8px; padding: 22px 26px; background: var(--tk-slate-50); border: 1px solid var(--line); border-radius: var(--r-md); }
.legal-toc-title { font-weight: 600; margin-bottom: 10px; }
.legal-toc ol { list-style: none; columns: 2; column-gap: 32px; font-size: var(--fs-small); }
.legal-toc li { break-inside: avoid; padding: 3px 0; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-section { padding-top: 44px; }
.legal-section h2 { font-size: 1.5rem; margin-bottom: 16px; }
.legal-section h3 { font-size: 1.125rem; margin: 26px 0 10px; }
.legal-section p, .legal-section ul, .legal-section ol { margin-top: 12px; }
.legal-section ul, .legal-section ol { padding-left: 22px; display: grid; gap: 6px; }
.legal-section code { font-family: var(--mono); font-size: 0.9em; background: var(--tk-slate-50); padding: 1px 5px; border-radius: 3px; }
.legal-note { margin-top: 18px; padding: 16px 20px; border-left: 3px solid var(--navy); background: var(--tk-navy-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.legal-note p:first-child { margin-top: 0; }
.legal-draft { margin: 0 0 28px; padding: 14px 18px; background: var(--tk-warning-tint); color: var(--tk-warning-tint-text); border-radius: var(--r-sm); font-size: var(--fs-small); }
.legal-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: var(--fs-small); border: 1px solid var(--line); }
.legal-table caption { text-align: left; font-weight: 600; padding: 0 0 8px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.legal-table th { background: var(--tk-slate-50); font-weight: 500; color: var(--muted); }
@media (max-width: 640px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .legal-table td { border: 0; padding: 4px 12px; }
  .legal-table td::before { content: attr(data-label); display: block; font-size: 0.8125rem; color: var(--muted); }
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound { min-height: 60vh; display: grid; align-content: center; padding: 96px 0; }
.notfound h1 { font-size: var(--fs-h2); }
.notfound p { margin-top: 14px; color: var(--muted); }
.notfound .btn { margin-top: 28px; }

/* ── Motion: blocks rise in as they arrive (site.js marks them) ──────────── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: opacity 0.3s ease-out; } }

/* ══ App replicas ════════════════════════════════════════════════════════
 * Drawn from the product's own values: 13px body, 28px controls, 32px rows,
 * navy sidebar, dot + label statuses, Plex Mono for numbers. They are
 * illustrations: the data in them is made up.
 */
.app-window {
  position: relative; border-radius: 10px; background: #FFFFFF; overflow: hidden;
  border: 1px solid rgba(10, 36, 99, 0.12);
  box-shadow: 0 30px 80px -20px rgba(6, 21, 67, 0.45), 0 0 0 1px rgba(6, 21, 67, 0.04);
  font-size: 13px; line-height: 20px; color: var(--text);
}
.hero .app-window { border-color: rgba(193, 209, 243, 0.25); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.app-chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #E9ECF2; border-bottom: 1px solid var(--line); }
.app-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #C9CFDA; }
.app-chrome .url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 14px; padding: 0 12px; height: 18px; line-height: 18px; border-radius: 9px; background: #FFFFFF; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.app-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 420px; }
.app-side { background: var(--navy); padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.app-side .side-logo { width: 72px; margin: 2px 0 0 6px; }
.app-tenant { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; background: var(--tk-navy-raised); color: #FFFFFF; font-size: 12px; font-weight: 500; }
.app-tenant .plate { display: grid; place-items: center; width: 20px; height: 16px; border-radius: 2px; background: #FFFFFF; color: var(--navy); font-size: 9px; font-weight: 600; }
.app-nav { list-style: none; display: grid; gap: 2px; }
.app-nav li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 4px; color: var(--on-navy-muted); font-size: 13px; }
.app-nav li svg { width: 16px; height: 16px; stroke-width: 1.75; flex: none; }
.app-nav li.on { background: var(--tk-navy-raised); color: #FFFFFF; font-weight: 500; box-shadow: inset 3px 0 0 var(--green); }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.app-top .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--tk-slate-100); color: var(--tk-text-label); display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.app-content { padding: 14px; min-width: 0; }
.app-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.app-title-row h4 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 4px; background: var(--navy); color: #FFFFFF; font-size: 13px; font-weight: 500; white-space: nowrap; }
.app-btn svg { width: 14px; height: 14px; }
.app-btn.default { background: #FFFFFF; color: var(--text); border: 1px solid var(--tk-border-control); }
.app-btn.compact { height: 22px; padding: 0 8px; font-size: 12px; }
.app-table { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.app-toolbar { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); }
.app-search { flex: 1; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--tk-border-control); border-radius: 4px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.app-search svg { width: 14px; height: 14px; flex: none; }
.app-select { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--tk-border-control); border-radius: 4px; white-space: nowrap; }
.app-select svg { width: 14px; height: 14px; color: var(--muted); }
.app-row { display: grid; grid-template-columns: 56px 150px 92px minmax(0, 1fr) 64px; align-items: center; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.app-row > * { overflow: hidden; text-overflow: ellipsis; }
.app-row.head { height: 28px; background: var(--tk-slate-50); border-bottom-color: var(--line); color: var(--muted); font-size: 12px; font-weight: 500; }
.app-row.sel { background: var(--tk-navy-tint); box-shadow: inset 2px 0 0 var(--navy); }
.app-row:last-child { border-bottom: 0; }
.app-row .num, .app-row .date { font-family: var(--mono); font-size: 12px; }
.app-foot { display: flex; justify-content: space-between; align-items: center; height: 32px; padding: 0 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-open { color: var(--tk-status-open-text); } .st-open::before { background: var(--tk-status-open-dot); }
.st-closed { color: var(--tk-status-closed-text); } .st-closed::before { background: var(--tk-status-closed-dot); }
.st-lead { color: var(--tk-status-lead-text); } .st-lead::before { background: var(--tk-status-lead-dot); }
.st-awaiting { color: var(--tk-status-awaiting-quote-text); } .st-awaiting::before { background: var(--tk-status-awaiting-quote-dot); }
.st-quote { color: var(--tk-status-quote-sent-text); } .st-quote::before { background: var(--tk-status-quote-sent-dot); }
.st-lost { color: var(--tk-status-lost-text); } .st-lost::before { background: var(--tk-status-lost-dot); }
.tag { display: inline-block; padding: 0 4px; border: 1px solid var(--tk-border-tag); border-radius: 3px; font-size: 11px; line-height: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .app-row { grid-template-columns: 48px 130px 84px minmax(0, 1fr); }
  .app-row > :nth-child(5) { display: none; }
}
@media (max-width: 560px) {
  .app-row { grid-template-columns: 44px minmax(0, 1fr) 80px; }
  .app-row > :nth-child(4) { display: none; }
  .app-toolbar .app-select { display: none; }
}

/* A card the replicas use: a section of a form or a page. */
.app-card { border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; color: var(--text); font-size: 13px; line-height: 20px; }
.app-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; line-height: 20px; }
.app-card-body { padding: 14px; display: grid; gap: 12px; }
.app-field { display: grid; gap: 4px; }
.app-field label, .app-field .lbl { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tk-text-label); }
.app-field .req { color: var(--tk-danger-fg); }
.app-input { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 8px; border: 1px solid var(--tk-border-control); border-radius: 4px; background: #FFFFFF; white-space: nowrap; overflow: hidden; }
.app-input.mono { font-family: var(--mono); font-size: 12px; }
.app-input svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.app-input.focus { border-color: var(--navy); box-shadow: var(--tk-focus-light); }
.app-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.app-switch i { position: relative; width: 30px; height: 16px; border-radius: 8px; background: var(--navy); flex: none; }
.app-switch i::after { content: ''; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; }
.app-switch.off i { background: var(--tk-slate-300); }
.app-switch.off i::after { right: auto; left: 2px; }
.app-switch.disabled { color: var(--muted); }
.app-switch.disabled i { background: var(--tk-slate-300); }
.app-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px; background: var(--tk-slate-100); font-size: 12px; }
/* A checkbox as the app's theme draws Mantine's (apps/web theme/theme.ts):
   a 16px box with the xs radius in the control's border, navy with Mantine's
   own mark (60% of the box) when checked; the label at the caption size on
   Mantine's 20px label line, the theme's small spacing (8px) from the box. */
.app-checkbox { display: flex; align-items: center; gap: var(--tk-space-4); font-size: var(--tk-type-caption-size); line-height: var(--tk-type-body-line); color: var(--text); }
.app-checkbox i { display: grid; place-items: center; flex: none; width: var(--tk-space-8); height: var(--tk-space-8); border: 1px solid var(--tk-border-control); border-radius: var(--tk-radius-xs); }
.app-checkbox i.on { background: var(--navy); border-color: var(--navy); color: var(--tk-on-navy); }
.app-checkbox svg { width: 60%; height: auto; }
.app-note { font-size: 12px; line-height: 16px; color: var(--muted); }
.app-alert { display: flex; gap: 8px; padding: 10px 12px; border-radius: 4px; background: var(--tk-info-tint); color: var(--tk-info-tint-text); font-size: 12px; line-height: 18px; }

/* The calendar replica. */
.cal { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.cal-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cal-head strong { font-size: 15px; font-weight: 600; }
.cal-tabs { display: flex; gap: 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
.cal-tabs span.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--navy); padding-bottom: 6px; margin-bottom: -6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 6px 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--tk-slate-50); }
.cal-cell { min-height: 76px; padding: 6px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: grid; align-content: start; gap: 3px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell .d { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.cal-cell.out .d { color: var(--muted); }
.cal-cell.today { background: var(--tk-navy-tint); }
.cal-cell.today .d { display: inline-grid; place-items: center; width: 26px; height: 20px; border-radius: 3px; background: var(--green); color: var(--navy); font-weight: 600; }
.chipr { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 4px; border-radius: 3px; font-size: 11px; line-height: 18px; white-space: nowrap; overflow: hidden; color: var(--text); }
.chipr::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.chipr b { font-family: var(--mono); font-weight: 500; }
.chipr.open { background: var(--tk-status-open-tint); } .chipr.open::before { background: var(--tk-status-open-dot); }
.chipr.closed { background: var(--tk-status-closed-tint); } .chipr.closed::before { background: var(--tk-status-closed-dot); }
.chipr.awaiting { background: var(--tk-status-awaiting-quote-tint); } .chipr.awaiting::before { background: var(--tk-status-awaiting-quote-dot); }
.cal-more { font-size: 11px; color: var(--muted); }

/* The phone replica. */
.phone { position: relative; width: 300px; max-width: 100%; aspect-ratio: 300 / 620; padding: 12px; border-radius: 44px; background: #0B1530; box-shadow: 0 40px 90px -30px rgba(6, 21, 67, 0.6), inset 0 0 0 2px #26324F; }
.phone-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #FFFFFF; color: var(--text); display: flex; flex-direction: column; font-size: 15px; line-height: 22px; }
.phone-notch { position: absolute; top: 10px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 12px; background: #0B1530; z-index: 2; }
.ph-status { display: flex; justify-content: space-between; padding: 14px 24px 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.ph-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.ph-bar svg { width: 20px; height: 20px; color: var(--navy); flex: none; }
.ph-bar strong { font-size: 17px; font-weight: 600; line-height: 22px; }
.ph-bar small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.ph-body { flex: 1; overflow: hidden; padding: 12px 14px; display: grid; align-content: start; gap: 10px; }
.ph-offline { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--tk-warning-tint); color: var(--tk-warning-tint-text); font-size: 13px; line-height: 18px; }
.ph-offline svg { width: 16px; height: 16px; flex: none; }
.ph-section { font-size: 13px; font-weight: 600; color: var(--tk-text-label); margin-top: 2px; }
.ph-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--line-soft); font-size: 14px; line-height: 18px; }
.ph-check .opts { display: flex; gap: 4px; }
.ph-check .opts span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--tk-border-control); font-size: 12px; font-weight: 500; }
.ph-check .opts span.on { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.ph-reading { font-family: var(--mono); font-size: 14px; }
.ph-sign { height: 86px; border: 1px dashed var(--tk-border-control); border-radius: 6px; display: grid; place-items: center; color: var(--muted); font-size: 12px; position: relative; }
.ph-sign svg { position: absolute; inset: 10px 18px; width: calc(100% - 36px); height: calc(100% - 20px); color: var(--navy); }
.ph-actions { display: grid; gap: 8px; padding: 10px 14px 18px; border-top: 1px solid var(--line); }
.ph-btn { display: grid; place-items: center; height: 44px; border-radius: 4px; font-size: 15px; font-weight: 500; background: var(--navy); color: #FFFFFF; white-space: nowrap; }
.ph-btn.default { background: #FFFFFF; color: var(--text); border: 1px solid var(--tk-border-control); }
/* The phone's other screens (MockPhone's `screen`): Paper's components in the
   app's theme, contained cards and selections in slate 50, outlined ones in a
   hairline, every radius the small one. */
.ph-title { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px 8px 16px; }
.ph-title strong { font-size: 24px; line-height: 32px; font-weight: 600; }
.ph-title svg, .ph-box-title > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.ph-filters { display: grid; gap: 8px; padding: 0 12px 6px; }
.ph-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--tk-border-control); border-radius: var(--r-sm); color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; }
.ph-search svg { width: 16px; height: 16px; flex: none; }
.ph-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--tk-border-control); border-radius: var(--r-sm); overflow: hidden; font-size: 13px; font-weight: 500; text-align: center; }
.ph-seg span { padding: 6px 0; }
.ph-seg span + span { border-left: 1px solid var(--tk-border-control); }
.ph-seg .on, .ph-chip.on { background: var(--tk-slate-50); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--tk-border-control); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; }
.ph-chip svg { width: 14px; height: 14px; }
.ph-count { margin-left: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ph-cards { padding-top: 4px; gap: 8px; }
.ph-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--tk-slate-50); font-size: 14px; line-height: 20px; }
.ph-card-row { display: flex; justify-content: space-between; align-items: center; }
.ph-card-row strong { font-size: 16px; font-weight: 500; }
.ph-card .status, .ph-body > .ph-card-row .status { font-size: 12px; font-weight: 500; }
.ph-place { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.ph-place svg { width: 14px; height: 14px; flex: none; }
.ph-muted { color: var(--muted); font-size: 13px; line-height: 18px; }
.ph-small { font-size: 12px; line-height: 16px; }
.ph-sync { padding: 16px 20px; gap: 10px; }
.ph-h { font-size: 19px; line-height: 26px; font-weight: 600; }
.ph-progress { display: block; height: 8px; border-radius: 4px; background: var(--tk-slate-100); overflow: hidden; margin-top: 4px; }
.ph-progress i { display: block; width: 72%; height: 100%; background: var(--navy); }
.ph-pct { font-size: 15px; font-weight: 500; }
.ph-tables { list-style: none; display: grid; gap: 5px; margin-top: 4px; font-size: 13px; line-height: 18px; }
.ph-tables li { display: flex; justify-content: space-between; gap: 8px; }
.ph-tables li span:last-child { color: var(--muted); white-space: nowrap; }
.ph-tables li .done { color: var(--navy); font-weight: 600; }
.ph-text-btn { justify-self: start; padding: 4px 0; color: var(--navy); font-size: 14px; font-weight: 500; }
.ph-box { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #FFFFFF; }
.ph-box-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 20px; }
.ph-box-title small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.ph-sub { font-size: 13px; font-weight: 600; color: var(--tk-text-label); }
.ph-fields { display: flex; gap: 6px; }
.ph-field, .ph-input { display: grid; min-width: 0; padding: 4px 8px 5px; border: 1px solid var(--tk-border-control); border-radius: var(--r-sm); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-field.grow { flex: 1; }
.ph-field small, .ph-input small { font-size: 11px; line-height: 14px; color: var(--tk-text-label); }
.ph-box .ph-check { min-height: 40px; font-size: 13px; }
.ph-box .ph-check:last-child { border-bottom: 0; }
.ph-btn-icon { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ph-btn-icon svg { width: 16px; height: 16px; }
.ph-btn.tonal { background: var(--tk-slate-50); color: var(--text); }
.ph-body > .ph-btn { height: 40px; font-size: 14px; }
.ph-tonal { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: var(--r-sm); background: var(--tk-slate-50); font-size: 13px; font-weight: 500; }
.ph-tonal svg, .ph-file svg { width: 16px; height: 16px; flex: none; }
.ph-file { display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 18px; }
.ph-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-file small { display: block; font-size: 12px; color: var(--muted); }
.ph-file svg:last-child { color: var(--muted); }
.ph-box .ph-sign { height: 76px; }
.ph-number { font-size: 20px; }
.phone-email .phone-screen { position: relative; }
/* Lower than Paper centres it, so the buttons it came from show above it. */
.ph-scrim { position: absolute; inset: 0; z-index: 1; display: grid; align-items: end; padding: 0 14px 22px; background: var(--tk-overlay); }
.ph-dialog { display: grid; gap: 6px; padding: 18px 16px 12px; border-radius: var(--r-md); background: #FFFFFF; box-shadow: var(--tk-shadow-modal); }
.ph-dialog .ph-h { margin-bottom: 6px; font-size: 17px; line-height: 24px; }
.ph-input { white-space: normal; overflow-wrap: anywhere; }
.ph-help { margin: -2px 0 4px 8px; font-size: 11px; line-height: 14px; color: var(--muted); }
.ph-dialog-actions { display: flex; justify-content: flex-end; gap: 22px; padding: 8px 6px 0; color: var(--navy); font-size: 14px; font-weight: 500; }
.ph-context { gap: 10px; }
.ph-kv { display: grid; justify-items: start; gap: 2px; font-size: 14px; line-height: 20px; }
.ph-kv small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tk-text-label); }
.ph-link { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 500; }
.ph-link svg { width: 15px; height: 15px; flex: none; }
.ph-box-title .ph-link { font-size: 13px; }

/* The report replica: an A4 page. */
.pdf { position: relative; aspect-ratio: 210 / 297; width: 100%; max-width: 460px; margin: 0 auto; padding: 7% 7%; background: #FFFFFF; border-radius: 2px; box-shadow: 0 30px 70px -24px rgba(6, 21, 67, 0.45), 0 0 0 1px rgba(6, 21, 67, 0.06); font-size: 9px; line-height: 13px; color: #1D2433; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pdf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
.pdf-letterhead { display: flex; align-items: center; gap: 8px; }
.pdf-mark { width: 30px; height: 30px; border-radius: 6px; background: var(--tk-navy-tint-strong); display: grid; place-items: center; color: var(--navy); font-weight: 600; font-size: 10px; }
.pdf-letterhead strong { display: block; font-size: 10px; }
.pdf-title { text-align: right; }
.pdf-title strong { display: block; font-size: 12px; font-weight: 600; }
.pdf-title span { font-family: var(--mono); }
.pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.pdf-k { color: #6B7280; font-size: 8px; }
.pdf-v { font-weight: 500; }
.pdf-box { border: 1px solid #D5D9E1; border-radius: 3px; }
.pdf-box-title { padding: 3px 6px; background: #F1F3F8; font-weight: 600; font-size: 8.5px; border-bottom: 1px solid #D5D9E1; }
.pdf-rows { display: grid; }
.pdf-rows div { display: grid; grid-template-columns: minmax(0, 1fr) 34px; padding: 2.5px 6px; border-bottom: 1px solid #EEF0F4; }
.pdf-rows div:last-child { border-bottom: 0; }
.pdf-rows b { font-family: var(--mono); font-weight: 500; text-align: right; }
.pdf-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.pdf-sign div { border-top: 1px solid #9AA1AE; padding-top: 4px; font-size: 8px; color: #6B7280; position: relative; }
.pdf-sign svg { position: absolute; bottom: 14px; left: 4px; width: 80%; height: 28px; color: var(--navy); }
.pdf-foot { font-size: 7px; color: #8A92A0; text-align: center; }

/* The Inbox and History replicas: lists of notices. */
.feed { display: grid; }
.feed-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.feed-item:last-child { border-bottom: 0; }
.feed-item .ic { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; background: var(--tk-navy-tint); color: var(--navy); }
.feed-item .ic svg { width: 16px; height: 16px; }
.feed-item .when { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.feed-item .acts { display: flex; gap: 6px; margin-top: 8px; }
.feed-item.unread { background: var(--tk-slate-25); box-shadow: inset 2px 0 0 var(--navy); }

/* Floating callouts over a replica. */
.float { position: absolute; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 18px 40px -12px rgba(6, 21, 67, 0.4), 0 0 0 1px rgba(6, 21, 67, 0.06); font-size: 13px; line-height: 18px; color: var(--text); }
.float .ic { width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; background: var(--green); color: var(--navy); flex: none; }
.float .ic svg { width: 16px; height: 16px; }
.float small { display: block; color: var(--muted); font-size: 12px; }

/* The hero composition: the app with the phone in front of it. */
.hero-stage { display: grid; }
.hero-stage .app-window { grid-area: 1 / 1; margin-right: 120px; }
.hero-stage .phone { grid-area: 1 / 1; justify-self: end; align-self: end; width: 280px; margin-bottom: -240px; z-index: 2; }
.hero-stage { position: relative; }
.hero-stage .float.f1 { left: -28px; bottom: 36px; }
@media (max-width: 1280px) { .hero-stage .float.f1 { left: 16px; } }
@media (max-width: 900px) {
  .hero-stage .app-window { margin-right: 0; }
  .hero-stage .phone { display: none; }
  .hero-stage .float.f1 { display: none; }
}
.hero-tail { height: 240px; background: #FFFFFF; }
@media (max-width: 900px) { .hero-tail { height: 0; } }

/* ── The cookie banner (vanilla-cookieconsent), in Quadro ────────────────
 * Only the library's own custom properties, and its documented classes for
 * the radius: overriding more would break on a minor release.
 */
html #cc-main {
  --cc-font-family: var(--sans);
  --cc-bg: #FFFFFF;
  --cc-primary-color: var(--tk-text-primary);
  --cc-secondary-color: var(--tk-text-secondary);
  --cc-btn-primary-bg: var(--navy);
  --cc-btn-primary-color: #FFFFFF;
  --cc-btn-primary-border-color: var(--navy);
  --cc-btn-primary-hover-bg: var(--tk-navy-raised);
  --cc-btn-primary-hover-color: #FFFFFF;
  --cc-btn-primary-hover-border-color: var(--tk-navy-raised);
  /* Refusing must not read as the lesser choice: the same size, weight and
     shape as accepting, only the fill differs. */
  --cc-btn-secondary-bg: #FFFFFF;
  --cc-btn-secondary-color: var(--navy);
  --cc-btn-secondary-border-color: var(--navy);
  --cc-btn-secondary-hover-bg: var(--tk-navy-tint);
  --cc-btn-secondary-hover-color: var(--navy);
  --cc-btn-secondary-hover-border-color: var(--navy);
  --cc-separator-border-color: var(--tk-border-row);
  --cc-toggle-on-bg: var(--navy);
  --cc-toggle-off-bg: var(--tk-slate-500);
  --cc-toggle-on-knob-bg: #FFFFFF;
  --cc-toggle-off-knob-bg: #FFFFFF;
  --cc-toggle-readonly-bg: var(--tk-slate-300);
  --cc-toggle-readonly-knob-bg: #FFFFFF;
  --cc-cookie-category-block-bg: var(--tk-slate-50);
  --cc-cookie-category-block-border: var(--tk-border-container);
  --cc-cookie-category-block-hover-bg: var(--tk-slate-100);
  --cc-cookie-category-block-hover-border: var(--tk-border-container);
  --cc-section-category-border: var(--tk-border-row);
  --cc-overlay-bg: var(--tk-overlay);
  --cc-link-color: var(--navy);
  --cc-modal-border-radius: var(--r-md);
  --cc-btn-border-radius: var(--r-sm);
  --cc-modal-transition-duration: 0.15s;
}
html #cc-main .cm__title, html #cc-main .pm__title { font-weight: 600; }
html #cc-main .cm__btn, html #cc-main .pm__btn { font-weight: 500; }

/* The gear: always there, bottom left, to change the cookie choices. */
.cc-gear {
  position: fixed; left: 16px; bottom: 16px; z-index: 40;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(193, 209, 243, 0.35); border-radius: 50%;
  background: var(--navy); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 8px 24px rgba(6, 21, 67, 0.24);
}
.cc-gear:hover { background: var(--tk-navy-raised); }
.cc-gear:focus-visible { box-shadow: var(--tk-focus-on-navy); border-radius: 50%; }

/* The spots' stages: a replica with a notice floating over it. */
.contract-stage, .feed-stage { position: relative; }
.contract-stage .app-card { max-width: 520px; }
.contract-float { position: relative; margin: -28px 0 0 auto; max-width: 400px; }
.feed-stage { display: grid; gap: 16px; }
.feed-history { margin-left: 48px; }
.feed-q { margin-top: 6px; font-weight: 500; }
@media (max-width: 640px) { .feed-history { margin-left: 0; } .contract-float { margin-top: 12px; } }

/* ── Home: the phone band and the showcase title ─────────────────────────── */
.techs-title { font-size: var(--fs-h2); }
.techs-lead { margin-top: 18px; font-size: var(--fs-lead); color: var(--on-navy-muted); }
.techs-visual { display: grid; place-items: center; }
.techs-visual .phone { width: 300px; }

/* The phone's screens, one over the other: the one picked fades in over the
   last, which goes once it is covered. Without JavaScript the first shows. */
.techs-stage { display: grid; justify-items: center; }
.techs-screen { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0s 0.45s, visibility 0s 0.45s; }
.techs-screen.is-on { position: relative; z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.45s ease-out; }
@media (prefers-reduced-motion: reduce) { .techs-screen, .techs-screen.is-on { transition: none; } }

/* With the script (site.js `rotator`) the points are buttons: a rail on the
   left in navy 5, the one picked raised, with its green bar — a progress fill
   on navy — filling the rail in the 5.5s the screens take turns at, and whole
   where they do not turn (reduced motion). Without it, they stay ticks. */
.is-rotator .techs-list { gap: 2px; }
.is-rotator .techs-list li { padding-left: 0; }
.is-rotator .techs-list li::before { content: none; }
.techs-pick {
  position: relative; display: block; width: 100%; padding: 12px 16px 12px 20px;
  border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: transparent;
  color: var(--on-navy-muted); font-size: var(--fs-small); line-height: 1.55; text-align: left; cursor: pointer;
  transition: background-color var(--tk-motion), color var(--tk-motion);
}
.techs-pick strong { color: #FFFFFF; }
.techs-pick:hover, .techs-pick[aria-pressed="true"] { background: var(--tk-navy-raised); color: #FFFFFF; }
.techs-pick::before, .techs-pick::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.techs-pick::before { background: var(--tk-navy-5); }
.techs-pick::after { background: var(--green); transform: scaleY(0); transform-origin: top; }
.techs-pick[aria-pressed="true"]::after { transform: none; }
.is-auto .techs-pick[aria-pressed="true"]::after { transform: scaleY(0); animation: techs-progress 5.5s linear forwards; }
/* After the shorthand above, which would set it running again. */
.is-auto.is-paused .techs-pick[aria-pressed="true"]::after { animation-play-state: paused; }
@keyframes techs-progress { to { transform: scaleY(1); } }
.showcase-title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 20px; }

/* The brand's replica: the tenant's address, sidebar and phone icon. */
.brand-demo { position: relative; padding: 0 36px 26px 0; }
.brand-browser { min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #FFFFFF; font-size: 13px; line-height: 20px; }
.brand-side { background: var(--navy); padding: 12px 10px 16px; display: grid; gap: 8px; }
.brand-plate { width: 26px; height: 18px; background: #FFFFFF; color: #8A1C1C; font-weight: 700; }
.brand-line { height: 8px; border-radius: 4px; background: rgba(193, 209, 243, 0.3); width: 70%; }
.brand-line.short { width: 45%; }
.brand-icon { position: absolute; right: 0; bottom: 0; display: grid; justify-items: center; gap: 4px; }
.brand-icon span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 15px; background: #8A1C1C; color: #FFFFFF; font-weight: 600; font-size: 20px; box-shadow: 0 12px 28px -10px rgba(6, 21, 67, 0.5); }
.brand-icon small { font-size: 11px; color: var(--muted); }
/* Narrow screens: the report keeps its proportions only where its 9px type fits. */
@media (max-width: 560px) { .pdf { aspect-ratio: auto; min-height: 520px; } }

/* The link-preview composition (/og/, scripts/og-image.mjs): 1200×630. */
.og-body { margin: 0; width: 1200px; height: 630px; overflow: hidden; background: var(--navy); }
.og { position: relative; width: 1200px; height: 630px; padding: 64px 0 0 72px; color: #FFFFFF; overflow: hidden; }
.og::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(193, 209, 243, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(193, 209, 243, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.og-copy { position: relative; width: 560px; }
.og-copy img { width: 190px; margin-bottom: 44px; }
.og-title { font-size: 52px; line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; }
.og-lead { margin-top: 22px; font-size: 22px; line-height: 1.45; color: var(--on-navy-muted); }
.og-stage { position: absolute; left: 650px; top: 120px; width: 900px; }