/* Shield — design system.
 *
 * Direction: bold and commercial. High contrast, colour-blocked bands, large
 * confident type, oversized numerals on the prices. Built to sell, and to be
 * read quickly on a phone.
 *
 * Things it deliberately does NOT do, because they read as decoration standing
 * in for design: gradient meshes, glassmorphism, blurred blobs, drop shadows
 * used as depth theatre, emoji as icons, purple-to-pink anything.
 *
 * Instead the hierarchy comes from scale, weight and flat colour. Surfaces are
 * either paper or ink or accent — never a wash in between. Radii are small and
 * consistent (4px / 8px) because big soft corners make a commercial page look
 * like a consumer app.
 *
 * Inter is loaded from Google Fonts with a tuned system fallback, so the page
 * is still correct offline — the fallback stack is metric-close enough that
 * nothing reflows badly.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Two surfaces and one accent. That is the whole palette. */
  --ink: #0b0b0c;
  --ink-2: #1c1c1f;
  --paper: #ffffff;
  --tint: #f3f3f0;          /* warm off-white for alternating bands */

  /* Accent does two different jobs and they need different values. As INK it
   * has to be legible on paper; as a FILL it has to be dark enough for white
   * text sitting on top of it. One token cannot satisfy both once the theme
   * flips, which is how the primary button ended up with near-black text. */
  --accent: #1a3dff;          /* accent as ink: text, icons, rules, focus ring */
  --accent-solid: #1a3dff;    /* accent as fill: buttons, bands, badges */
  --accent-solid-hover: #0f2ddb;
  --accent-ink: #ffffff;      /* text on --accent-solid; white in both themes */
  --accent-wash: #eef1ff;

  /* --on-ink is white in BOTH themes, so anything sitting on a surface that is
   * dark either way (ink bands, the accent band, the featured plan) takes its
   * text from here and never from --paper, which flips. */

  --text: #0b0b0c;
  --text-2: #55555c;
  --text-3: #86868f;
  --on-ink: #fafafa;
  --on-ink-2: #a8a8b0;

  --line: rgba(11, 11, 12, .12);
  --line-strong: rgba(11, 11, 12, .26);
  --line-on-ink: rgba(255, 255, 255, .16);

  --ok: #00754a;
  --ok-wash: #e8f6ef;
  --warn: #9a4a00;
  --warn-wash: #fdf3e7;
  --bad: #be1d1d;
  --bad-wash: #fdeeee;

  --r: 4px;
  --r-lg: 8px;

  --maxw: 1200px;
  --gutter: 20px;

  --display: 800 1em/1 var(--font), system-ui;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #000000;
    --ink-2: #121214;
    --paper: #0b0b0c;
    --tint: #121214;

    /* Lighter than the fill so links stay readable on near-black paper. */
    --accent: #7d94ff;
    /* Darker than the ink so white text clears 4.5:1 on the fill. */
    --accent-solid: #2f4cff;
    --accent-solid-hover: #4260ff;
    --accent-ink: #ffffff;
    --accent-wash: #14183a;

    --text: #fafafa;
    --text-2: #aaaab2;
    --text-3: #7c7c85;
    --on-ink: #fafafa;
    --on-ink-2: #a8a8b0;

    --line: rgba(255, 255, 255, .14);
    --line-strong: rgba(255, 255, 255, .3);
    --line-on-ink: rgba(255, 255, 255, .16);

    --ok: #4ad295;
    --ok-wash: #0a2a1d;
    --warn: #f0b050;
    --warn-wash: #2c1f08;
    --bad: #ff7b6e;
    --bad-wash: #2d1210;
  }
}

:root[data-theme="dark"] {
  --ink: #000000; --ink-2: #121214; --paper: #0b0b0c; --tint: #121214;
  --accent: #7d94ff; --accent-solid: #2f4cff; --accent-solid-hover: #4260ff;
  --accent-ink: #ffffff; --accent-wash: #14183a;
  --text: #fafafa; --text-2: #aaaab2; --text-3: #7c7c85;
  --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.3);
  --ok: #4ad295; --ok-wash: #0a2a1d; --warn: #f0b050; --warn-wash: #2c1f08;
  --bad: #ff7b6e; --bad-wash: #2d1210;
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Every price, seat count and total is tabular so columns of figures line up
 * and a changing number does not make the row jiggle. */
.num, .price-big, table td.num, input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }

.d1 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); letter-spacing: -.05em; }
.d2 { font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -.042em; }
.d3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.032em; }
h3  { font-size: 1.1875rem; letter-spacing: -.022em; }

.lead { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--text-2); font-weight: 420; }
.small { font-size: .9375rem; }
.tiny { font-size: .8125rem; line-height: 1.45; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.balance { text-wrap: balance; }

/* Small caps label — used instead of an icon to mark a section. */
.kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.on-ink .kicker { color: var(--on-ink-2); }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
               Consolas, monospace;
  font-size: .875em;
  font-variant-ligatures: none;
}
code {
  background: var(--tint); border: 1px solid var(--line);
  padding: .08em .35em; border-radius: var(--r);
}
.on-ink code { background: rgba(255,255,255,.1); border-color: var(--line-on-ink); }

/* ----------------------------------------------------------------- layout */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 740px; }

.band { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.band.tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.band.tinted { background: var(--tint); }
.band.inked, .on-ink { background: var(--ink); color: var(--on-ink); }
.band.inked .muted, .on-ink .muted { color: var(--on-ink-2); }
.band.inked .lead, .on-ink .lead { color: var(--on-ink-2); }
.band.accented { background: var(--accent-solid); color: var(--accent-ink); }
.band.accented .lead { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); }

.stack { display: grid; gap: 1rem; align-content: start; }
.stack-xs { display: grid; gap: .4rem; align-content: start; }
.stack-sm { display: grid; gap: .65rem; align-content: start; }
.stack-lg { display: grid; gap: 2.25rem; align-content: start; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.grid { display: grid; gap: 1.5rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* Asymmetric split: content left, supporting panel right. Collapses early
 * because two narrow columns are worse than one wide one. */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr .85fr; } }

/* ----------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-head .bar {
  display: flex; align-items: center; gap: 2rem;
  height: 68px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}
.logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.035em; }
.logo svg { width: 24px; height: 24px; color: var(--accent); }
.site-nav { display: flex; gap: 1.75rem; margin-left: auto; align-items: center; }
.site-nav a { font-size: .9375rem; font-weight: 500; color: var(--text-2); }
.site-nav a:hover { color: var(--text); }
@media (max-width: 860px) { .site-nav .hide-sm { display: none; } .site-head .bar { gap: 1rem; } }

/* ---------------------------------------------------------------- buttons */

/* The primary button is a solid accent block with white text, in both themes.
 * Weight is 700 rather than 650: white on saturated blue optically thins, and
 * the label is the one piece of type on the page that must not look frail. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem;
  font: inherit; font-size: .9375rem; font-weight: 700; letter-spacing: -.005em;
  border: 1.5px solid var(--accent-solid);
  border-radius: var(--r);
  background: var(--accent-solid); color: var(--accent-ink);
  cursor: pointer; white-space: nowrap;
  /* Light text on a dark fill renders chunky on Windows without this. */
  -webkit-font-smoothing: antialiased;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.btn:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 17px; height: 17px; }

.btn.lg { padding: 1.05rem 1.8rem; font-size: 1.0625rem; }
.btn.sm { padding: .55rem 1rem; font-size: .875rem; }
.btn.block { width: 100%; }

.btn.outline { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.outline:hover { background: var(--text); color: var(--paper); border-color: var(--text); }

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

/* The primary button's label is WHITE everywhere -- that is the rule, and the
 * fill moves to keep it legible. On paper and on an ink band the fill is accent
 * blue (inherited from .btn above, which is why there is no rule for .on-ink).
 * On the accent band itself the fill flips to ink, because blue on blue has no
 * edge. What it must never be is a white block with dark text. */
.band.accented .btn {
  background: var(--ink); border-color: var(--ink); color: var(--on-ink);
}
.band.accented .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.on-ink .btn.outline, .band.accented .btn.outline {
  background: transparent; color: currentColor; border-color: var(--line-on-ink);
}
.on-ink .btn.outline:hover, .band.accented .btn.outline:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4);
}

.link-arrow { font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.on-ink .link-arrow { color: var(--on-ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.on-ink :where(a, button):focus-visible, .band.accented :where(a, button):focus-visible {
  outline-color: var(--paper);
}

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero .d1 { max-width: 17ch; }
.hero .lead { max-width: 52ch; margin-top: 1.35rem; }

/* The flag above the headline. A hard-edged block, not a soft pill. */
.flagline {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--on-ink);
  padding: .4rem .7rem; border-radius: var(--r);
  font-size: .8125rem; font-weight: 600; letter-spacing: -.005em;
  margin-bottom: 1.5rem;
}
.flagline .hot {
  background: var(--accent-solid); color: var(--accent-ink);
  padding: .1rem .4rem; border-radius: 2px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}

/* ---------------------------------------------------- the "one place" art */

/* Hand-drawn SVG, not an illustration library: it shows the actual topology —
 * one identity service per customer in front of the shared services. The art
 * is the argument, so it has to be accurate. */
.topology { width: 100%; height: auto; }
.topology .node { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }
/* Solid, not the ink value: .label-on sets white type inside these nodes. */
.topology .node-accent { fill: var(--accent-solid); stroke: var(--accent-solid); }
.topology .label { font: 600 11px/1 Inter, system-ui; fill: var(--text-2); letter-spacing: .01em; }
.topology .label-on { font: 700 11.5px/1 Inter, system-ui; fill: var(--accent-ink); }
.topology .wire { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.topology .wire-live { stroke: var(--accent); stroke-width: 2; fill: none; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
}
.card.pad-lg { padding: clamp(1.6rem, 3vw, 2.5rem); }
.on-ink .card { background: var(--ink-2); border-color: var(--line-on-ink); }

/* A feature cell with a rule on top instead of a box — lighter, more editorial,
 * and stops a grid of eight products looking like a wall of boxes. */
.cell { border-top: 2px solid var(--text); padding-top: 1.1rem; display: grid; gap: .55rem; align-content: start; }
.cell.preview { border-top-color: var(--line-strong); }
.cell .ic { width: 22px; height: 22px; color: var(--accent); margin-bottom: .2rem; }
.on-ink .cell { border-top-color: var(--on-ink); }

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-3);
  background: var(--tint);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  font-size: .9375rem;
  color: var(--text-2);
}
.note strong { color: var(--text); }
.note.info { background: var(--accent-wash); border-left-color: var(--accent); }
.note.ok   { background: var(--ok-wash);   border-left-color: var(--ok); }
.note.warn { background: var(--warn-wash); border-left-color: var(--warn); }
.note.bad  { background: var(--bad-wash);  border-left-color: var(--bad); }

/* ---------------------------------------------------------------- badges */

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .45rem; border-radius: 2px;
  font-size: .75rem; font-weight: 650; letter-spacing: .005em;
  border: 1px solid transparent; white-space: nowrap;
}
.tag.ok   { background: var(--ok-wash);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.tag.warn { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.tag.bad  { background: var(--bad-wash);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.tag.accent { background: var(--accent-solid); color: var(--accent-ink); }
.tag.plain { background: var(--tint); color: var(--text-2); border-color: var(--line); }
.tag.ghost { background: transparent; color: var(--text-3); border-color: var(--line-strong); }
.on-ink .tag.plain { background: rgba(255,255,255,.1); color: var(--on-ink-2); border-color: var(--line-on-ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* --------------------------------------------------------------- pricing */

.switch {
  display: inline-flex; border: 1.5px solid var(--text); border-radius: var(--r); overflow: hidden;
}
.switch button {
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: .9375rem; font-weight: 650;
  padding: .6rem 1.1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
}
.switch button + button { border-left: 1.5px solid var(--text); }
.switch button[aria-pressed="true"] { background: var(--text); color: var(--paper); }
.switch button[aria-pressed="true"] .tag { background: var(--accent-solid); color: var(--accent-ink); border-color: transparent; }

.seatpick { display: grid; gap: .7rem; min-width: 280px; }
.seatpick .head { display: flex; align-items: center; gap: .6rem; }
.seatpick .big { font: 800 2rem/1 Inter, system-ui; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: var(--line-strong); border-radius: 2px;
  margin: .6rem 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--accent); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--accent); cursor: grab;
}

.plans { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }

.plan {
  position: relative;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: 1.4rem; align-content: start;
  background: var(--paper);
}
/* The featured plan is a solid ink block. Colour blocking does the work that a
 * shadow and a glow would otherwise be asked to do. */
/* The accent edge is not ornament: in the dark theme the ink block and the
 * paper behind it are both near-black, so without it the featured plan has no
 * outline at all. It also pairs with the ribbon in the light theme. */
.plan.lead {
  background: var(--ink); color: var(--on-ink); border-color: var(--accent-solid);
}
.plan.lead .muted, .plan.lead .dim { color: var(--on-ink-2); }
.plan.lead .totals { border-top-color: var(--line-on-ink); }
.plan.lead .ticks li { color: var(--on-ink-2); }
.plan.lead .ticks li::before { color: var(--on-ink); }
.plan.lead .btn { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-ink); }
.plan.lead .btn:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }

.plan .ribbon {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent-solid); color: var(--accent-ink);
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 0 var(--r-lg) 0 var(--r);
}

/* The number is the loudest thing on the page, on purpose. */
.price-big {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.price-big .fig { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; }
.price-big .unit { font-size: .9375rem; font-weight: 500; color: var(--text-2); }
.plan.lead .price-big .unit { color: var(--on-ink-2); }
.price-big .strike { font-size: 1.125rem; color: var(--text-3); text-decoration: line-through; font-weight: 500; }

.totals { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .45rem; }
.totals .ln { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.totals .ln.big { font-size: 1.125rem; font-weight: 700; color: inherit; letter-spacing: -.02em; }
.totals .ln.save { color: var(--ok); font-weight: 600; }
.plan.lead .totals .ln.save { color: #7ee2b0; }

ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
ul.ticks li {
  display: grid; grid-template-columns: 16px 1fr; gap: .65rem;
  font-size: .9375rem; color: var(--text-2); align-items: start;
}
ul.ticks li::before { content: "✓"; color: var(--accent); font-weight: 800; line-height: 1.45; }
ul.ticks li.off { color: var(--text-3); }
ul.ticks li.off::before { content: "—"; color: var(--text-3); font-weight: 500; }

/* ---------------------------------------------------------------- steps */

ol.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 0; }
ol.steps li {
  counter-increment: st;
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
ol.steps li:last-child { border-bottom: 1px solid var(--line); }
ol.steps li::before {
  content: counter(st, decimal-leading-zero);
  font: 800 1.5rem/1 Inter, system-ui;
  letter-spacing: -.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.on-ink ol.steps li { border-color: var(--line-on-ink); }

/* progress rail in the console */
.rail { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.rail li {
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text-3); background: var(--paper);
  padding: .4rem .75rem; border: 1px solid var(--line);
}
.rail li:first-child { border-radius: var(--r) 0 0 var(--r); }
.rail li:last-child { border-radius: 0 var(--r) var(--r) 0; }
.rail li + li { border-left: 0; }
.rail li.done { color: var(--ok); background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.rail li.at { color: var(--accent-ink); background: var(--accent-solid); border-color: var(--accent-solid); }

/* ---------------------------------------------------------------- forms */

.field { display: grid; gap: .35rem; font-size: .875rem; font-weight: 650; color: var(--text); }
.field .hint { font-weight: 420; color: var(--text-3); font-size: .8125rem; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], select, textarea {
  font: inherit; font-size: .9375rem; font-weight: 450;
  padding: .65rem .75rem; width: 100%;
  color: var(--text); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--r);
}
input:hover, select:hover { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder { color: var(--text-3); }

fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
legend { font: 800 1.25rem/1.1 Inter, system-ui; letter-spacing: -.03em; padding: 0 0 .15rem; }

.check { display: grid; grid-template-columns: 19px 1fr; gap: .7rem; align-items: start; font-size: .9375rem; font-weight: 420; cursor: pointer; }
.check input { margin: .25rem 0 0; width: 19px; height: 19px; accent-color: var(--accent); cursor: pointer; }
.check strong { font-weight: 650; }

/* A selectable product tile — the whole block is the hit area. */
.pick {
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; display: grid; gap: .5rem;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.pick:hover { border-color: var(--line-strong); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.pick:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------- tables */

table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: .6875rem; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.copy { cursor: copy; }
.copy:hover { background: var(--accent-wash); }

/* ------------------------------------------------------------- details */

details.q { border-top: 1px solid var(--line); padding: 1.15rem 0; }
details.q:last-of-type { border-bottom: 1px solid var(--line); }
details.q summary {
  cursor: pointer; list-style: none; font-weight: 650; font-size: 1.0625rem;
  letter-spacing: -.018em;
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
details.q[open] summary::after { transform: rotate(225deg) translateY(-2px); }
details.q .body { margin-top: .8rem; color: var(--text-2); max-width: 68ch; }

/* -------------------------------------------------------------- footer */

.site-foot { background: var(--ink); color: var(--on-ink); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.site-foot a { color: var(--on-ink-2); font-size: .9375rem; }
.site-foot a:hover { color: var(--on-ink); }
.site-foot .rule { height: 1px; background: var(--line-on-ink); border: 0; margin: 2rem 0 1.25rem; }

/* ------------------------------------------------------------ utilities */

.rule { height: 1px; background: var(--line); border: 0; }
[hidden] { display: none !important; }

.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: sp .65s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* Marquee-free "logos" strip: plain set text, because fake customer logos on a
 * product with one customer would be a lie. */
.statline { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.statline > div { flex: 1 1 180px; padding: 1.25rem 1.4rem; border-right: 1px solid var(--line); }
.statline > div:last-child { border-right: 0; }
.statline .fig { font: 800 1.75rem/1 Inter, system-ui; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.on-ink .statline { border-color: var(--line-on-ink); }
.on-ink .statline > div { border-right-color: var(--line-on-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: 3s !important; }
}

@media print {
  .site-head, .site-foot, .btn { display: none; }
  body { font-size: 11pt; }
}