/* AlertContent.com
   Direction: "The well-kept board" (tasteskill v2, seed 350655795). Palette and type kept from the brand brief.
   One grid, one 6px radius, filled tiles with 8px gaps, no rules or shadows outside real tables, fields and interface fragments. */

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

:root {
  --bg: #F6F8FB;
  --paper: #FFFFFF;
  --tile: #EEF2F6;
  --tile-2: #D9E0E8;
  --ink: #111827;
  --muted: #5B6575;
  --night: #0B1220;
  --night-2: #182235;
  --night-ink: #F6F8FB;
  --night-muted: rgba(246, 248, 251, 0.74);
  --accent: #F4B740;
  --accent-ink: #0B1220;
  --alert: #E45858;
  --info: #4F7CFF;
  --ok: #2E9D78;

  --font: "Geist", "Helvetica Neue", Arial, sans-serif;
  --s-small: 0.875rem;
  --s-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --s-lead: clamp(1.25rem, 0.95rem + 0.95vw, 1.75rem);
  --s-head: clamp(2rem, 1rem + 2.9vw, 3.625rem);
  --s-display: clamp(2.75rem, 1rem + 6.8vw, 8.5rem);

  --m: 16px;
  --gap: 8px;
  --r: 6px;
  --sec: clamp(72px, 4rem + 4vw, 128px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--s-body);
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; hyphens: none; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }
[hidden] { display: none !important; }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 50; background: var(--night); color: var(--night-ink); padding: 12px 16px; border-radius: var(--r); }
.skip:focus { top: 12px; }

.t-display { font-size: var(--s-display); line-height: 0.9; letter-spacing: -0.045em; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-head { font-size: var(--s-head); line-height: 1; letter-spacing: -0.035em; font-weight: 600; }
.t-lead { font-size: var(--s-lead); line-height: 1.25; letter-spacing: -0.012em; font-weight: 400; }

.sec { padding-inline: var(--m); margin-top: var(--sec); }

/* ---------- buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: var(--s-body); line-height: 1.1; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--night); color: var(--night-ink); }
.btn--ink:hover { background: color-mix(in srgb, var(--night) 80%, #fff); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: var(--s-small); }
.btn--lg { min-height: 56px; padding: 0 28px; }
.btn--block { width: 100%; }

.link { text-decoration: underline; transition: text-decoration-thickness var(--t-hover) ease; }
.link:hover { text-decoration-thickness: 0.14em; }
.link--light { color: var(--night-ink); }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.link-btn:hover { color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 12px; font-size: var(--s-lead); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; line-height: 1; }
.brand-mark { width: 1em; height: 1em; flex: none; display: block; }
.brand-mark rect { fill: currentColor; }
.brand-mark .hit { fill: var(--accent); }

.count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: var(--r); background: var(--night); color: var(--night-ink);
  font-size: var(--s-small); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.count--light { background: var(--night-ink); color: var(--night); }

/* ---------- header bar (inner pages) ---------- */

.bar { display: flex; align-items: center; gap: 24px; padding: 18px var(--m); }
.bar-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.bar-nav a:not(.btn) { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.bar-nav a:not(.btn):hover { text-decoration: underline; }
.bar-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.14em; }

/* ---------- hero: the stream as a sheet, one text cell, the rule beside it ---------- */

.hero { padding: 0 var(--m); overflow: clip; background: var(--bg); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 26% auto minmax(0, 1fr);
  column-gap: 12px;
  height: max(100svh, 780px);
}
.sheet { display: contents; }
.col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.c1 { grid-column: 1; grid-row: 1 / -1; margin-top: -96px; }
.c6 { grid-column: 6; grid-row: 1 / -1; margin-top: -40px; }
.c2t, .c3t, .c4t, .c5t { grid-row: 1; justify-content: flex-end; padding-bottom: 12px; }
.c2b, .c3b, .c4b, .c5b { grid-row: 3; padding-top: 12px; }
.c2t, .c2b { grid-column: 2; }
.c3t, .c3b { grid-column: 3; }
.c4t, .c4b { grid-column: 4; }
.c5t, .c5b { grid-column: 5; }
.c3b { padding-top: 12px; }
.c4b { padding-top: 12px; }

.panel {
  grid-column: 2 / 5; grid-row: 2;
  background: var(--night); color: var(--night-ink);
  border-radius: var(--r);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 460px;
}
.brand--panel { color: var(--night-ink); }
.panel { container-type: inline-size; }
.panel-title { font-size: var(--s-head); line-height: 0.98; letter-spacing: -0.042em; margin-top: 40px; }
@container (max-width: 640px) { .panel-title { font-size: 8.8cqi; } }
.panel-text { margin-top: 24px; max-width: 46ch; }
.panel-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.panel-note { margin-top: 16px; font-size: var(--s-small); color: var(--night-muted); }
.panel-nav { margin-top: auto; padding-top: 24px; display: flex; gap: 28px; flex-wrap: wrap; }
.panel-nav a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.panel-nav a:hover { text-decoration: underline; }

/* the rule card and the stream frames are interface fragments */
.rule {
  grid-column: 5; grid-row: 2; align-self: stretch;
  background: var(--paper); border-radius: 4px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
[data-ui] .rule-name { font-size: 15px; }
[data-ui] .rule-list { font-size: 13px; color: var(--muted); margin-top: -8px; }
[data-ui] .rule-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
[data-ui] .rule-op { width: 100%; font-size: 13px; color: var(--muted); }
[data-ui] .chip {
  min-height: 34px; padding: 0 10px; border-radius: 4px;
  border: 1px solid var(--night); background: var(--night); color: var(--night-ink);
  font: 600 14px/1 var(--font); cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
[data-ui] .chip:active { transform: scale(0.95); }
[data-ui] .chip[data-group="not"] { background: color-mix(in srgb, var(--alert) 18%, var(--paper)); border-color: var(--alert); color: var(--ink); }
[data-ui] .chip[aria-pressed="false"] { background: var(--paper); border-color: var(--tile-2); color: var(--muted); text-decoration: line-through; }
[data-ui] .chip:hover { border-color: var(--info); }
[data-ui] .rule-count { margin-top: auto; font-size: 14px; color: var(--muted); }
[data-ui] .rule-count b { font-size: 30px; line-height: 1; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
[data-ui] .rule-code { display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--ink); background: var(--tile); border-radius: 4px; padding: 8px 10px; word-break: break-word; }
[data-ui] .rule-note { font-size: 12px; line-height: 1.4; color: var(--muted); }

[data-ui] .frame {
  background: var(--paper); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; flex: none;
  transition: opacity 420ms var(--ease-out);
}
[data-ui] .frame-title { font-size: 15px; line-height: 1.3; font-weight: 600; padding: 14px 14px 6px; letter-spacing: -0.01em; }
[data-ui] .frame-text { font-size: 13px; line-height: 1.45; color: var(--muted); padding: 0 14px 14px; }
[data-ui] .frame-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px; margin-top: auto;
  font-size: 12.5px; white-space: nowrap; overflow: hidden;
  background: var(--tile-2); color: var(--ink);
  transition: background-color 420ms var(--ease-out), color 420ms var(--ease-out);
}
[data-ui] .frame-strip span:first-child { overflow: hidden; text-overflow: ellipsis; }
[data-ui] .frame:nth-child(4n+1) .frame-strip { background: var(--night); color: var(--night-ink); }
[data-ui] .frame:nth-child(4n+2) .frame-strip { background: var(--tile-2); }
[data-ui] .frame:nth-child(4n+3) .frame-strip { background: var(--muted); color: var(--paper); }
[data-ui] .frame:nth-child(4n+4) .frame-strip { background: var(--tile); }
[data-ui] .frame.is-miss { opacity: 0.4; }
[data-ui] .frame.is-hit .frame-strip { background: var(--accent); color: var(--accent-ink); }
[data-ui] mark { background: color-mix(in srgb, var(--accent) 55%, var(--paper)); color: var(--ink); border-radius: 2px; padding: 0 2px; }

/* ---------- intro: lead line over four columns, then the stream itself ---------- */

.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.intro > h2, .intro-lead, .intro-cols, .press { grid-column: 1 / -1; }
.intro-lead { margin-top: 28px; max-width: 54ch; }
.intro-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.intro-cols b { font-weight: 600; }
.press { margin-top: 56px; }
.press-frame { border-radius: var(--r); overflow: hidden; background: var(--night); aspect-ratio: 16 / 6.4; }
.press-video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
figcaption { font-size: var(--s-small); line-height: 1.45; color: var(--muted); margin-top: 12px; max-width: 64ch; }

/* ---------- how it works: one card, four fields ---------- */

.how { margin-top: var(--sec); }
.how-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field {
  min-height: max(84svh, 660px); padding: 28px;
  display: grid; grid-template-rows: auto 1fr auto; align-items: start;
}
.field-1 { background: var(--tile-2); color: var(--ink); }
.field-2 { background: var(--night); color: var(--night-ink); }
.field-3 { background: var(--accent); color: var(--accent-ink); }
.field-4 { background: var(--ok); color: var(--night); }
.field-h { grid-row: 1; font-size: var(--s-lead); line-height: 1.1; letter-spacing: -0.02em; }
.field > .acard { grid-row: 2; align-self: center; justify-self: center; }
.field-clause { grid-row: 3; font-size: var(--s-lead); line-height: 1.15; letter-spacing: -0.015em; max-width: 13ch; }

[data-ui].acard {
  width: 260px; background: var(--paper); color: var(--ink);
  border-radius: 6px; padding: 14px;
  transition: transform 150ms var(--ease-out);
}
.field:hover [data-ui].acard { transform: translateY(-6px); }
[data-ui] .acard-pills { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
[data-ui] .ui-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--tile); color: var(--ink); font-size: 12px; font-weight: 600; }
[data-ui] .ui-pill--high { background: var(--alert); color: var(--night); }
[data-ui] .ui-pill--ok { background: var(--ok); color: var(--night); }
[data-ui] .acard-title { font-size: 15px; line-height: 1.3; font-weight: 600; margin-top: 10px; }
[data-ui] .acard-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 4px; }
[data-ui] .acard-text { font-size: 13px; line-height: 1.45; margin-top: 8px; }
[data-ui] .acard-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--tile); padding-top: 6px; margin-top: 6px; }
[data-ui] .acard-row b { color: var(--ink); }

/* ---------- inbox: rows as a board ---------- */

.inbox { margin-top: var(--sec); background: var(--night); color: var(--night-ink); padding: 104px var(--m) 72px; }
.inbox-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: 40px; }
.inbox-head h2 { grid-column: 1 / 7; }
.inbox-text { grid-column: 8 / 13; max-width: 52ch; }
.inbox-note { margin-top: 20px; font-size: var(--s-small); color: var(--night-muted); }

[data-ui].board { color: var(--night-ink); }
[data-ui] .board-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
[data-ui] .board-count { font-size: 15px; color: var(--night-muted); font-variant-numeric: tabular-nums; }
[data-ui] .board-filters { display: flex; gap: 6px; flex-wrap: wrap; }
[data-ui] .board-filters button {
  min-height: 40px; padding: 0 14px; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--night-ink); border: 1px solid rgba(246, 248, 251, 0.3);
  font-size: 15px; font-weight: 600;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
[data-ui] .board-filters button:hover { border-color: var(--night-ink); }
[data-ui] .board-filters button[aria-pressed="true"] { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
[data-ui] .board-rows { display: flex; flex-direction: column; gap: 4px; overflow: clip; }
[data-ui] .brow-head {
  display: grid; grid-template-columns: 14px minmax(0, 6fr) minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 120px;
  align-items: center; gap: 20px; width: 100%; height: 72px; padding: 0 20px;
  background: var(--night-2); color: var(--night-ink); border: 0; border-radius: 4px;
  text-align: left; cursor: pointer; font-size: 17px;
  transition: background-color var(--t-hover) ease;
}
[data-ui] li:not(.brow--edge) > .brow-head:hover { background: color-mix(in srgb, var(--night-2) 82%, #fff); }
[data-ui] .brow-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(246, 248, 251, 0.45); }
[data-ui] .brow[data-read="false"] .brow-dot { background: var(--accent); border-color: var(--accent); }
[data-ui] .brow-title { font-size: 26px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .brow[data-read="false"] .brow-title { font-weight: 600; }
[data-ui] .brow-src, [data-ui] .brow-list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--night-muted); }
[data-ui] .brow-time { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-ui] .st { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 4px; font-size: 15px; font-weight: 600; }
[data-ui] .st-high { background: var(--alert); color: var(--night); }
[data-ui] .st-standard { background: var(--tile-2); color: var(--night); }
[data-ui] .st-low { background: transparent; color: var(--night-ink); box-shadow: inset 0 0 0 1px rgba(246, 248, 251, 0.35); }
[data-ui] .brow.is-open .brow-head { background: var(--accent); color: var(--accent-ink); border-radius: 4px 4px 0 0; }
[data-ui] .brow.is-open .brow-src, [data-ui] .brow.is-open .brow-list { color: var(--accent-ink); }
[data-ui] .brow.is-open .brow-dot { border-color: var(--accent-ink); }
[data-ui] .brow.is-open[data-read="false"] .brow-dot { background: var(--accent-ink); }
[data-ui] .brow-detail { background: var(--accent); color: var(--accent-ink); padding: 0 20px 22px 54px; border-radius: 0 0 4px 4px; }
[data-ui] .brow-text { font-size: 17px; line-height: 1.5; max-width: 72ch; }
[data-ui] .brow-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 15px; margin-top: 10px; }
[data-ui] .brow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
[data-ui] .brow-actions button {
  min-height: 38px; padding: 0 14px; border-radius: 4px; cursor: pointer;
  background: var(--night); color: var(--night-ink); border: 0; font-size: 14px; font-weight: 600;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
[data-ui] .brow-actions button:active { transform: scale(0.96); }
[data-ui] .brow-actions button[aria-pressed="true"] { background: var(--paper); color: var(--night); }
[data-ui] .brow--edge { opacity: 0.5; }
[data-ui] .brow--edge .brow-head { cursor: default; }
[data-ui] .board-rows > .brow--edge:first-child { margin-top: -36px; }
[data-ui] .board-rows > .brow--edge:last-child { margin-bottom: -36px; }

/* ---------- workspace: close-ups on a board ---------- */

.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 104px; gap: var(--gap); }
.tile { position: relative; overflow: hidden; border-radius: var(--r); padding: 20px; container-type: inline-size; }
.t-h { grid-column: 1 / 7; grid-row: 1 / 3; background: var(--tile); }
.t-watch { grid-column: 1 / 7; grid-row: 3 / 7; background: var(--paper); }
.t-team { grid-column: 1 / 7; grid-row: 7 / 9; background: var(--night); color: var(--night-ink); }
.t-src { grid-column: 7 / 10; grid-row: 1 / 5; background: var(--night); color: var(--night-ink); }
.t-saved { grid-column: 10 / 13; grid-row: 1 / 5; background: var(--tile-2); }
.t-tag { grid-column: 7 / 10; grid-row: 5 / 7; background: var(--accent); color: var(--accent-ink); }
.t-note { grid-column: 10 / 13; grid-row: 5 / 7; background: var(--paper); }
.t-report { grid-column: 7 / 13; grid-row: 7 / 9; background: var(--tile); }

.work-note { margin-top: 24px; max-width: 60ch; }
.cap { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 2px; max-width: 40ch; }
.cap b { font-weight: 600; }
.cap span { font-size: var(--s-small); line-height: 1.4; }
.t-src .cap span, .t-team .cap span { color: var(--night-muted); }
.t-watch .cap span, .t-note .cap span, .t-saved .cap span, .t-report .cap span { color: var(--muted); }

.zoom { position: absolute; transition: transform 900ms var(--ease-expo); }
.tile:hover .zoom { transform: translate(-6px, 4px); }
[data-ui].zoom-watch { font-size: 46px; top: 32px; left: 28%; width: 13em; background: var(--paper); border: 1px solid var(--tile-2); border-radius: 0.2em; padding: 0.35em 0.5em; }
[data-ui] .ui-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; padding: 0.32em 0.1em; font-size: 0.7em; border-bottom: 1px solid var(--tile); }
[data-ui] .ui-row--head { font-size: 0.82em; }
[data-ui] .ui-row--add { color: var(--muted); border-bottom: 0; }
[data-ui] .ui-x { color: var(--muted); }
[data-ui].zoom-watch .ui-pill { font-size: 0.5em; height: 1.8em; padding: 0 0.6em; }
[data-ui].zoom-src { font-size: 14cqi; top: 24px; left: 20px; width: 12em; display: flex; flex-direction: column; gap: 0.25em; }
[data-ui] .ui-chip { display: inline-flex; align-items: center; gap: 0.35em; width: max-content; font-size: 0.5em; font-weight: 600; padding: 0.4em 0.7em; border-radius: 0.2em; background: var(--night-2); color: var(--night-ink); }
[data-ui] .ui-dot { width: 0.5em; height: 0.5em; border-radius: 50%; }
[data-ui] .ui-dot--ok { background: var(--ok); }
[data-ui] .ui-dot--high { background: var(--alert); }
[data-ui].zoom-saved { font-size: 36px; top: 24px; left: 20px; width: 13em; background: var(--paper); border-radius: 0.2em; padding: 0.6em; }
[data-ui] .ui-saved-name { font-size: 0.8em; font-weight: 600; }
[data-ui].zoom-saved code { display: block; margin-top: 0.4em; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.5em; color: var(--muted); }
[data-ui] .ui-btn { display: inline-flex; align-items: center; margin-top: 0.6em; font-size: 0.55em; font-weight: 600; padding: 0.45em 0.8em; border-radius: 0.2em; background: var(--night); color: var(--night-ink); }
[data-ui].zoom-tag { font-size: 64px; top: 10px; left: 18px; }
[data-ui] .ui-tag { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.7em; font-weight: 600; padding: 0.1em 0.45em; border-radius: 0.12em; background: var(--paper); color: var(--ink); }
[data-ui].zoom-note { font-size: 58px; top: 18px; left: 20px; width: 12em; }
[data-ui] .ui-toggle-row { display: flex; align-items: center; gap: 0.3em; font-size: 0.5em; font-weight: 600; }
[data-ui] .ui-toggle { width: 2.2em; height: 1.25em; border-radius: 1em; background: var(--ok); position: relative; flex: none; }
[data-ui] .ui-toggle::after { content: ""; position: absolute; right: 0.15em; top: 0.15em; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--paper); }
[data-ui].zoom-report { font-size: 32px; top: 18px; right: 20px; width: 15em; display: flex; align-items: flex-end; gap: 0.6em; }
[data-ui] .ui-bars { display: flex; align-items: flex-end; gap: 0.12em; height: 3.6em; flex: 1; }
[data-ui] .ui-bar { flex: 1; height: calc(var(--v) * 1.25%); background: var(--night); border-radius: 0.06em 0.06em 0 0; }
[data-ui] .ui-bar.is-high { background: var(--accent); }
[data-ui].zoom-report .ui-btn { margin: 0; white-space: nowrap; }
[data-ui].zoom-team { font-size: 64px; top: 22px; right: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; }
[data-ui] .ui-faces { display: flex; }
[data-ui] .ui-faces span { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-size: 0.42em; font-weight: 600; margin-left: -0.2em; box-shadow: 0 0 0 0.12em var(--night); }
[data-ui] .ui-faces span:nth-child(1) { background: var(--accent); color: var(--night); }
[data-ui] .ui-faces span:nth-child(2) { background: var(--tile-2); color: var(--night); }
[data-ui] .ui-faces span:nth-child(3) { background: var(--ok); color: var(--night); }
[data-ui] .ui-assign { font-size: 0.34em; color: var(--night-ink); margin-top: 0.3em; }

/* ---------- use cases: the word, filled bars, the reading room ---------- */

.uses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.uses-list { grid-column: 1 / 7; container-type: inline-size; }
.uses-word { font-size: 17.5cqw; line-height: 0.8; letter-spacing: -0.045em; text-transform: uppercase; white-space: nowrap; margin-left: -0.04em; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.bar-item, .faq-item { background: var(--tile); border-radius: var(--r); transition: background-color var(--t-hover) ease; }
.bar-item > summary, .faq-item > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 60px; padding: 12px 20px; cursor: pointer; list-style: none; font-weight: 600;
}
.bar-item > summary::-webkit-details-marker, .faq-item > summary::-webkit-details-marker { display: none; }
.bar-item:not([open]) > summary:hover { background: var(--tile-2); border-radius: var(--r); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.plus::after { transform: rotate(90deg); }
details[open] > summary .plus::after { transform: rotate(0deg); }
.bar-panel { padding: 0 20px 22px; }
.bar-item:not([open]) > .bar-panel, .faq-item:not([open]) > p { display: none; }
.bar-panel p { max-width: 60ch; }
.bar-panel dl { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.bar-panel dl div { display: flex; justify-content: space-between; gap: 16px; }
.bar-panel dt { color: var(--muted); }
.bar-panel dd { font-weight: 600; text-align: right; }
.uses-note { margin-top: 20px; color: var(--muted); max-width: 52ch; }
.uses-pic { grid-column: 7 / 13; display: flex; flex-direction: column; }
.uses-pic img { flex: 1; width: 100%; min-height: 560px; object-fit: cover; object-position: 50% 60%; border-radius: var(--r); filter: grayscale(1) contrast(1.18) brightness(0.94); background: var(--tile-2); }

/* ---------- about: wide photo, colour tile, facts ---------- */

.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.about > h2 { grid-column: 1 / -1; }
.about-lead { grid-column: 1 / 8; margin-top: 24px; }
.about-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 64px; align-items: start; }
.about-pic { grid-column: 1 / 9; position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--tile-2); }
.about-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: grayscale(1) contrast(1.06); }
.about-paper { position: absolute; top: 0; right: 0; width: 340px; margin: 0; padding: 20px; background: var(--paper); color: var(--ink); font-size: var(--s-body); line-height: 1.5; border-radius: 0 0 0 var(--r); max-width: none; }
.about-side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 24px; }
.about-map { background: var(--night); color: var(--night-ink); border-radius: var(--r); padding: 24px; aspect-ratio: 4 / 2.7; display: grid; grid-template-rows: 1fr auto; gap: 12px; }
.about-map svg { width: 100%; height: 100%; min-height: 0; }
.about-map path { fill: var(--tile-2); }
.about-map circle { fill: var(--accent); }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; font-size: var(--s-small); line-height: 1.45; }
.about-facts dt { color: var(--muted); }
.about-facts dd { margin-top: 2px; }

/* ---------- licences: plan names, one live figure ---------- */

.plans {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-rows: auto repeat(7, auto) minmax(0, 1fr);
  --first: 2; align-items: start;
}
.plans--noh { grid-template-rows: repeat(7, auto) minmax(0, 1fr); --first: 1; }
.plans-h { grid-column: 1 / -1; grid-row: 1; margin-bottom: 48px; }
.plan { display: contents; }
.plan-name {
  grid-column: 1 / 7; grid-row: var(--row); justify-self: start;
  position: relative; padding: 0.02em 0 0.06em 0.55em; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--s-head); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; color: var(--muted);
  transition: color var(--t-hover) ease;
}
.plan-name:hover { color: var(--ink); }
.plan.is-sel .plan-name { color: var(--ink); }
.plan.is-sel .plan-name::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--accent); }
.plan-stage { grid-column: 8 / 13; grid-row: var(--first) / span 8; display: none; }
.plan.is-sel .plan-stage { display: block; animation: stage-in 220ms ease both; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
.plan-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.plan-period { font-size: var(--s-body); color: var(--muted); }
.plan-text { margin-top: 24px; max-width: 46ch; }
.plan-feats { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.plan-feats li { padding-left: 22px; position: relative; }
.plan-feats li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 2px; background: var(--ok); }
.plan-stage .btn { margin-top: 28px; }
.pricing-note { margin-top: 48px; max-width: 60ch; }
html:not(.js) .plans { display: block; }
html:not(.js) .plan { display: block; margin-bottom: 40px; }
html:not(.js) .plan-stage { display: block; margin-top: 16px; }

/* ---------- questions: sticky heading, filled tiles ---------- */

.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.faq-h { grid-column: 1 / 5; position: sticky; top: 96px; }
.faq-list { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 8px; }
.faq-item > summary { min-height: 72px; padding: 14px 24px; }
.faq-item:not([open]) > summary:hover { background: var(--tile-2); border-radius: var(--r); }
.faq-item[open] { background: var(--accent); color: var(--accent-ink); }
.faq-item > p { padding: 0 24px 24px; max-width: 56ch; }

/* ---------- the action tile ---------- */

.cta { margin-top: var(--sec); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); min-height: 380px; }
.cta-flank { border-radius: var(--r); overflow: hidden; }
.cta-flank--pic { grid-column: 1 / 3; border-radius: 0 var(--r) var(--r) 0; background: var(--tile-2); }
.cta-flank--pic img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; filter: grayscale(1) contrast(1.06); }
.cta-flank--field { grid-column: 11 / 13; background: var(--night); border-radius: var(--r) 0 0 var(--r); }
.cta-main { grid-column: 3 / 11; background: var(--accent); color: var(--accent-ink); border-radius: var(--r); padding: 48px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; align-self: center; }
.cta-copy p { max-width: 40ch; }
.cta-figure { display: flex; flex-direction: column; gap: 12px; }
.cta-figure span:last-child { max-width: 26ch; }

/* ---------- footer: the mark, built from the volume chart ---------- */

.foot { margin-top: var(--gap); background: var(--tile); padding: 40px var(--m) 28px; }
.foot-mark { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 240px; }
.mark-block { flex: 1; height: var(--h); background: var(--night); border-radius: 4px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.mark-block svg { width: 100%; height: 100%; }
.mark-block text { fill: var(--tile); font-family: var(--font); font-size: 116px; font-weight: 600; letter-spacing: -0.04em; }
.mark-block.is-high { background: var(--accent); }
.mark-block.is-high text { fill: var(--night); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; margin-top: 56px; }
.foot-col { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; }
.foot-contact { grid-column: 9 / 13; gap: 10px; }
.foot-h { font-size: var(--s-body); margin-bottom: 8px; }
.foot-col a { text-decoration: none; padding: 5px 0; }
.foot-col a:hover { text-decoration: underline; }
.foot-notes { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; color: var(--muted); }
.foot-notes p:first-child { grid-column: 1 / 7; }
.foot-notes .credits { grid-column: 7 / 13; }
.foot-notes p { max-width: 60ch; }
.foot-notes a { color: inherit; }
.foot-last { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--s-small); }

/* ---------- inner pages ---------- */

.page .page-head { margin-top: 56px; }
.u-title { font-size: var(--s-lead); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.page-head--util { margin-top: 40px !important; }
.page-head--util .trail { margin: 10px 0 0; }
.page-head--util ~ .sec { margin-top: 28px; }
.page-lead { margin-top: 24px; max-width: 52ch; }
.trail { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 20px; color: var(--muted); }
.trail li + li::before { content: "→"; margin: 0 10px; color: var(--muted); }
.trail [aria-current] { color: var(--ink); font-weight: 600; }
.trail a { text-decoration: none; }
.trail a:hover { text-decoration: underline; }

.pricing--page { margin-top: 72px; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.incl-tile { background: var(--tile); border-radius: var(--r); padding: 32px; }
.incl-tile--accent { background: var(--accent); color: var(--accent-ink); }
.incl-h { font-size: var(--s-lead); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 12px; }
.incl-tile p { max-width: 58ch; }

.compare h2 { margin-bottom: 32px; }
.table-wrap { overflow-x: auto; background: var(--paper); border-radius: var(--r); }
.ladder { width: 100%; min-width: 980px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ladder th, .ladder td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--tile); }
.ladder thead th { font-weight: 600; vertical-align: bottom; }
.ladder thead th span { display: block; font-weight: 400; color: var(--muted); }
.ladder tbody th { font-weight: 600; }
.ladder tbody tr:nth-child(even) { background: var(--bg); }
.ladder th:first-child { position: sticky; left: 0; background: inherit; min-width: 190px; }
.ladder thead th:first-child { background: var(--paper); }
.ladder tbody tr:nth-child(odd) th:first-child { background: var(--paper); }
.ladder-buy td { padding-top: 18px; padding-bottom: 18px; }

.buy-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.buy-steps h3 { font-size: var(--s-lead); line-height: 1.15; letter-spacing: -0.015em; margin-top: 20px; }
[data-ui].step-ui { min-height: 230px; background: var(--paper); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
[data-ui] .su-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 4px; color: var(--muted); }
[data-ui] .su-row--sel { background: var(--night); color: var(--night-ink); font-weight: 600; }
[data-ui] .su-row--total { color: var(--ink); font-weight: 600; border-top: 1px solid var(--tile); border-radius: 0; padding-top: 12px; margin-top: auto; }
[data-ui] .su-btn { margin-top: auto; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-align: center; padding: 10px; border-radius: 4px; }
[data-ui] .su-check { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 4px; background: var(--tile); }
[data-ui] .su-box { width: 18px; height: 18px; border: 2px solid var(--muted); border-radius: 3px; background: var(--paper); flex: none; }
[data-ui] .su-label { font-size: 13px; font-weight: 600; }
[data-ui] .su-select { border: 1px solid var(--info); border-radius: 4px; padding: 10px 12px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
[data-ui] .su-opt { padding: 8px 12px; border-radius: 4px; background: var(--tile); }
[data-ui] .su-opt:first-of-type { background: var(--night); color: var(--night-ink); }
[data-ui] .su-note { font-size: 13px; color: var(--muted); margin-top: auto; }
[data-ui] .su-box--on { background: var(--night); border-color: var(--night); }
.buy-steps p { margin-top: 10px; }

.empty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.empty-copy { grid-column: 1 / 7; background: var(--paper); border-radius: var(--r); padding: 40px; }
.empty-h { font-weight: 600; }
.empty-copy p { margin: 12px 0 28px; max-width: 46ch; }
.empty-plans { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 6px; }
.empty-plans li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; background: var(--tile); border-radius: var(--r); padding: 10px 12px 10px 20px; min-height: 60px; }
.empty-name { font-weight: 600; }
.empty-price { font-variant-numeric: tabular-nums; }
.notice { background: var(--accent); color: var(--accent-ink); border-radius: var(--r); padding: 20px 24px; }

.cart-grid, .co-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.cart-main, .co-main { grid-column: 1 / 9; display: flex; flex-direction: column; gap: var(--gap); }
.cart-plan { background: var(--paper); border-radius: var(--r); padding: 28px; }
.cart-plan-top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.cart-name { font-weight: 600; margin: 0 0 8px; }
.cart-terms { margin-top: 8px; color: var(--muted); font-size: var(--s-small); }
.cart-price { font-size: var(--s-lead); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-top: 28px; }
.cart-controls .field-label { width: 100%; margin-bottom: -6px; }
.cart-controls select { flex: 1 1 280px; }
.cart-support { display: flex; gap: 16px; align-items: flex-start; background: var(--tile); border-radius: var(--r); padding: 24px 28px; cursor: pointer; transition: background-color var(--t-hover) ease; }
.cart-support:hover { background: var(--tile-2); }
.cart-support.is-on { background: var(--accent); }
.cart-support input, .check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--night); cursor: pointer; }
.cart-support > span { display: flex; flex-direction: column; gap: 4px; }
.cart-support-h { font-weight: 600; }

.summary { grid-column: 9 / 13; position: sticky; top: 24px; background: var(--paper); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.summary-h { font-size: var(--s-body); }
.sum-rows { display: flex; flex-direction: column; gap: 10px; font-variant-numeric: tabular-nums; }
.sum-rows div { display: flex; justify-content: space-between; gap: 16px; }
.sum-rows dt { color: var(--muted); }
.sum-rows dd { font-weight: 600; white-space: nowrap; }
.sum-rows .sum-total { margin-top: 10px; padding-top: 14px; background: none; align-items: baseline; }
.sum-total dt { color: var(--ink); font-weight: 600; }
.sum-total dd { font-size: var(--s-lead); }
.summary-note { font-size: var(--s-small); color: var(--muted); }

.co-block { background: var(--paper); border-radius: var(--r); padding: 28px; border: 0; margin: 0; min-width: 0; }
.co-h { float: left; width: 100%; padding: 0; margin-bottom: 20px; font-weight: 600; }
.co-fields { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fld { min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.field-label { display: block; font-size: var(--s-small); font-weight: 600; margin-bottom: 6px; }
.input { /* taste-skill-ignore: real form fields keep their outline */ width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--tile-2); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: var(--s-body); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 40px; }
.input:focus-visible { outline: 3px solid var(--info); outline-offset: 1px; border-color: var(--info); }
.input[aria-invalid="true"] { border-color: var(--alert); border-width: 2px; }
.fld-note { margin-top: 8px; font-size: var(--s-small); color: var(--muted); }
.co-block > .fld-note { margin-top: 16px; }
.fld-err { margin-top: 6px; font-size: var(--s-small); display: flex; align-items: center; gap: 8px; }
.fld-err::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); flex: none; }
.co-cards { height: 28px; width: auto; margin: -4px 0 20px; clear: both; }
.co-agree { display: flex; flex-direction: column; gap: 16px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check--small { font-size: var(--s-small); }
.pay-result { background: var(--alert); color: var(--night); border-radius: var(--r); padding: 18px 20px; }
.pay-result p + p { margin-top: 4px; }
.pay-result--info { background: var(--tile); color: var(--ink); }

.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; margin-top: 40px; }
.legal-nav { grid-column: 1 / 4; position: sticky; top: 24px; background: var(--tile); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.legal-nav-h { font-size: var(--s-body); margin: 0 0 8px 12px; }
.legal-nav a { padding: 10px 12px; border-radius: 4px; text-decoration: none; transition: background-color var(--t-hover) ease; }
.legal-nav a:hover { background: var(--tile-2); }
.legal-nav a[aria-current="page"] { background: var(--paper); font-weight: 600; }
.legal-doc { grid-column: 4 / 11; background: var(--paper); border-radius: var(--r); padding: 56px; }
.legal-date { margin-top: 16px; color: var(--muted); }
.legal-doc section { margin-top: 36px; }
.legal-doc h2 { font-size: var(--s-lead); line-height: 1.2; letter-spacing: -0.015em; }
.legal-doc p { margin-top: 12px; max-width: 68ch; }
.legal-seller { margin-top: 32px !important; padding: 20px; background: var(--tile); border-radius: var(--r); }

.nf-text { margin-top: 12px; max-width: 60ch; }
.nf-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.nf-places a { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 20px; border-radius: var(--r); background: var(--paper); text-decoration: none; transition: background-color var(--t-hover) ease; }
.nf-places a:hover { background: var(--tile-2); }
.nf-places span { color: var(--muted); }
@media (max-width: 900px) { .nf-places { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .nf-places { grid-template-columns: 1fr; } }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rise-ready [data-rise] { opacity: 0.25; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease-expo), transform var(--t-reveal) var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
  .rise-ready [data-rise].is-in { opacity: 1; transform: none; }
  .rise-ready .field[data-rise] { transform: translateY(48px); }
  .rise-ready .field[data-rise].is-in { transform: none; }
  .rise-ready .uses-pic[data-rise] img, .rise-ready .about-pic[data-rise] img { transform: scale(1.12); transition: transform 1400ms var(--ease-expo); }
  .rise-ready .uses-pic[data-rise].is-in img { transform: none; }
  .rise-ready .about-pic[data-rise].is-in img { transform: scale(1.05); }

  /* the signature: the stream opens like a shutter while the frames settle */
  .js .hero .col { animation: shutter 900ms var(--ease-in-out) both; animation-delay: calc(var(--c, 0) * 30ms); }
  .js .hero .col .frame { animation: settle 1100ms var(--ease-expo) both; animation-delay: calc(var(--c, 0) * 30ms); }
  .js .rule { animation: rise 700ms var(--ease-expo) 380ms both; }
  .c1 { --c: 0; } .c2t, .c2b { --c: 1; } .c3t, .c3b { --c: 2; } .c4t, .c4b { --c: 3; } .c5t, .c5b { --c: 4; } .c6 { --c: 5; }
  [data-ui] .board-rows .brow { transition: opacity 500ms var(--ease-expo), transform 500ms var(--ease-expo); }
  .rise-ready [data-board]:not(.is-in) .brow { opacity: 0.25; transform: translateX(-24px); }
  [data-board].is-in .brow { transition-delay: calc(var(--i, 0) * 50ms); }
  [data-board].is-in .brow--edge { opacity: 0.5; }
}
@keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  .hero { padding-top: var(--m); }
  .hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; column-gap: 12px; row-gap: 12px; }
  .panel { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .panel-title { margin-top: 32px; max-width: 16ch; }
  .rule { grid-column: 1 / -1; grid-row: auto; }
  [data-ui] .rule-group { gap: 8px; }
  [data-ui] .rule-op { width: auto; min-width: 64px; }
  [data-ui] .chip { min-height: 44px; padding: 0 14px; }
  .c2t, .c2b, .c3t, .c3b, .c4t, .c4b, .c5t, .c5b { display: none; }
  .c1, .c6 { grid-row: auto; max-height: 760px; overflow: clip; }
  .c1 { grid-column: 1; margin-top: 60px; }
  .c6 { grid-column: 2; margin-top: 0; }

  .intro-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .how-fields { grid-template-columns: 1fr 1fr; }
  .field { min-height: 620px; }
  .inbox-head h2 { grid-column: 1 / -1; }
  .inbox-text { grid-column: 1 / -1; margin-top: 20px; }
  [data-ui] .brow-head { grid-template-columns: 14px minmax(0, 1fr) 96px 110px; }
  [data-ui] .brow-src, [data-ui] .brow-list { display: none; }
  [data-ui] .brow-title { font-size: 22px; }
  [data-ui] .brow-time { font-size: 20px; }
  .cta-main { grid-column: 2 / 12; grid-template-columns: 1fr; gap: 32px; }
  .cta-figure { display: none; }
}

/* ---------- small tablet and phone ---------- */

@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 92px; gap: 6px; }
  .tile { grid-column: auto !important; grid-row: auto !important; }
  .t-h { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .t-watch, .t-report, .t-team { grid-column: 1 / -1 !important; grid-row: span 3 !important; }
  .t-src, .t-saved, .t-tag, .t-note { grid-row: span 3 !important; }
  [data-ui].zoom-watch { font-size: 28px; top: 20px; left: 30%; }
  [data-ui].zoom-saved { font-size: 28px; }
  [data-ui].zoom-note { font-size: 44px; }
  .faq-h { grid-column: 1 / 5; }
  .faq-list { grid-column: 5 / 13; }
  .uses { grid-template-columns: 1fr; gap: 32px; }
  .uses-list, .uses-pic { grid-column: 1 / -1; }
  .uses-pic img { min-height: 0; aspect-ratio: 4 / 3; }
  .about-lead { grid-column: 1 / -1; }
  .about-pic, .about-side { grid-column: 1 / -1; }
  .about-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .about-map { aspect-ratio: 1 / 1; }
  .about-tiles { margin-top: 40px; }
  .cart-main, .co-main, .summary { grid-column: 1 / -1; }
  .empty-copy, .empty-plans { grid-column: 1 / -1; }
  .summary { position: static; }
  .legal-nav, .legal-doc { grid-column: 1 / -1; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .legal-nav-h { width: 100%; }
  .legal-doc { padding: 32px 24px; }
  .buy-steps { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .table-wrap { overflow: visible; background: none; }
  .ladder, .ladder tbody, .ladder tr, .ladder th, .ladder td { display: block; min-width: 0; }
  .ladder thead { display: none; }
  .ladder tbody { display: flex; flex-direction: column; gap: 8px; }
  .ladder tbody tr, .ladder tbody tr:nth-child(even) { background: var(--paper); border-radius: var(--r); padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .ladder th:first-child, .ladder tbody tr:nth-child(odd) th:first-child { position: static; background: none; grid-column: 1 / -1; padding: 0 0 6px; min-width: 0; }
  .ladder td { border: 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; }
  .ladder td::before { content: attr(data-label); color: var(--muted); }
  .ladder-buy td { padding: 4px 0; align-items: center; }
  .foot-col { grid-column: span 6; }
  .foot-contact { grid-column: 1 / -1; }
  .foot-notes p:first-child, .foot-notes .credits { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hide-phone { display: none !important; }
  .bar { padding: 12px var(--m); }
  .bar-nav { gap: 20px; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .panel { padding: 22px 20px 16px; }
  .panel-title { margin-top: 24px; }
  .panel-actions { gap: 16px; }
  .panel-actions .btn { width: 100%; }
  .panel-nav { padding-top: 12px; gap: 24px; }
  .c1, .c6 { max-height: 680px; }
  .c1 { margin-top: 60px; }

  .intro-cols { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .press-frame { aspect-ratio: 4 / 3; }
  .how-fields { grid-template-columns: 1fr; }
  .field { min-height: 64svh; padding: 24px 20px; grid-template-rows: auto auto 1fr; gap: 24px; }
  .field-clause { grid-row: 2; }
  .field-h { grid-row: 1; }
  .field > .acard { grid-row: 3; justify-self: start; align-self: start; }
  .field-1 .field-h { margin-bottom: -8px; }
  .inbox { padding: 72px var(--m) 56px; }
  [data-ui] .brow-head { grid-template-columns: 12px minmax(0, 1fr) 92px; height: auto; min-height: 64px; gap: 12px; padding: 12px 14px; }
  [data-ui] .brow-time { display: none; }
  [data-ui] .brow-title { font-size: 18px; line-height: 1.3; white-space: normal; }
  [data-ui] .brow-detail { padding: 0 14px 18px 38px; }
  [data-ui] .brow-facts { flex-direction: column; font-size: 16px; }
  [data-ui] .board-rows > .brow--edge:first-child { margin-top: -32px; }
  [data-ui] .board-rows > .brow--edge:last-child { margin-bottom: -32px; }
  .tiles { grid-auto-rows: 88px; }
  .t-h { grid-row: span 1 !important; }
  .t-watch { grid-row: span 4 !important; }
  .t-report, .t-team { grid-row: span 3 !important; }
  .t-src, .t-saved { grid-row: span 4 !important; }
  .t-tag, .t-note { grid-row: span 3 !important; }
  [data-ui].zoom-src { font-size: 18cqi; }
  .cta-main { grid-template-columns: 1fr; gap: 28px; }
  .cap { left: 14px; right: 14px; bottom: 14px; }
  [data-ui].zoom-watch { font-size: 26px; left: 18%; }
  [data-ui].zoom-saved { font-size: 22px; }
  [data-ui].zoom-tag { font-size: 44px; }
  [data-ui].zoom-note { font-size: 34px; }
  [data-ui].zoom-report { font-size: 30px; left: 16px; right: auto; }
  [data-ui].zoom-team { font-size: 52px; }
  .about-paper { position: static; width: auto; padding: 16px 0 0; background: none; border-radius: 0; }
  .about-pic { aspect-ratio: auto; overflow: visible; background: none; }
  .about-pic img { aspect-ratio: 4 / 3; border-radius: var(--r); transform: none; }
  .rise-ready .about-pic[data-rise].is-in img { transform: none; }
  .about-side { grid-template-columns: 1fr; }
  .about-map { aspect-ratio: 3 / 2; }
  .plans, .plans--noh { display: block; }
  .plans-h { margin-bottom: 28px; }
  .plan { display: block; }
  .plan-name { padding-left: 0.5em; }
  .plan-stage { padding: 8px 0 32px; }
  .plan-stage .btn { width: 100%; }
  .faq-h { grid-column: 1 / -1; position: static; margin-bottom: 28px; }
  .faq-list { grid-column: 1 / -1; }
  .faq-item > summary { min-height: 64px; padding: 12px 20px; }
  .faq-item > p { padding: 0 20px 20px; }
  .cta { grid-template-columns: 1fr 1fr; min-height: 0; padding-inline: 0; }
  .cta-main { grid-column: 1 / -1; grid-row: 1; padding: 32px 24px; min-height: 300px; border-radius: 0; }
  .cta-main .btn { width: 100%; }
  .cta-flank--pic { grid-column: 1; grid-row: 2; height: 120px; border-radius: 0 var(--r) var(--r) 0; }
  .cta-flank--field { grid-column: 2; grid-row: 2; height: 120px; }
  .foot-mark { flex-wrap: wrap; height: auto; min-height: 0; row-gap: 4px; }
  .mark-block { flex: 0 0 calc((100% - 20px) / 6); height: calc(var(--h) * 0.13svh); min-height: 64px; }
  .foot-last { flex-wrap: wrap; }
  .incl { grid-template-columns: 1fr; }
  .incl-tile { padding: 24px 20px; }
  .buy-steps { grid-template-columns: 1fr; }
  .ladder tbody tr, .ladder tbody tr:nth-child(even) { grid-template-columns: 1fr; }
  .cart-plan, .co-block, .summary, .empty-copy { padding: 24px 20px; }
  .empty-plans li { grid-template-columns: 1fr auto; padding: 10px 12px 10px 16px; }
  .empty-plans .btn { grid-column: 1 / -1; }
  .cart-plan-top { flex-direction: column; gap: 12px; }
  .co-fields { grid-template-columns: 1fr; }
}