/* GuardMyContract brand tokens. Source of truth: docs/brand/brand-tokens.json (kept in sync by
   test/unit-brand.test.ts). Use these variables; do not add hard-coded colours, radii or font sizes. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --color-primary: #2f6fe4;
  --color-primary-hover: #2860cc;
  --color-primary-pressed: #2250b0;
  --color-primary-50: #14294a;
  --color-primary-100: #1e3d6e;
  --color-on-primary: #ffffff;
  --color-link: #74a8ff;
  --color-navy: #060d1a;
  --color-navy-2: #142238;
  --color-text: #e9f1fc;
  --color-text-2: #aebcd4;
  --color-text-muted: #8294b3;
  --color-bg: #0a1222;
  --color-bg-soft: #0e182b;
  --color-surface: #121e34;
  --color-border: #1f3050;
  --color-border-strong: #30456b;
  --color-border-input: #62779c;
  --color-success: #4fd1a0;
  --color-success-bg: #0f2a22;
  --color-warning: #f3b04d;
  --color-warning-strong: #f7c97a;
  --color-warning-bg: #2a2110;
  --color-warning-bg-subtle: #1f1a10;
  --color-warning-border: #5a431a;
  --color-warning-accent: #f3b04d;
  --color-danger: #c93a31;
  --color-danger-hover: #a92d26;
  --color-danger-text: #ff8a84;
  --color-danger-bg: #2d1618;
  --color-danger-border: #6b2a2d;
  --color-info: #74a8ff;
  --color-info-bg: #14294a;
  --color-person: #b3a8ff;
  --color-person-bg: #1f1c3d;
  --color-calc: #5fd0dc;
  --color-calc-bg: #0f2a30;
  --color-neutral: #8fa0bd;
  --color-neutral-bg: #1a2840;
  --color-neutral-accent: #62779c;
  --color-due-soon: #ff9f6b;
  --color-due-soon-bg: #33200f;
  --color-due-soon-accent: #ff8a4c;
  --color-due-later: #f0c14b;
  --color-due-later-bg: #2b2610;
  --color-due-later-accent: #d9a62e;
  --color-sidebar-text: #aebcd4;
  --color-sidebar-label: #8294b3;
  --color-sidebar-indicator: #74a8ff;
  --color-sidebar-active-bg: rgba(52, 121, 237, .2);
  --color-sidebar-hover-bg: rgba(140, 168, 214, .08);
  --color-sidebar-line: rgba(140, 168, 214, .13);
  --color-overlay: rgba(3, 8, 18, .66);
  --color-focus: #74a8ff;
  --color-paper: #e8edf6;
  --color-paper-ink: #36445f;
  --color-paper-strong: #1a2540;
  --color-paper-line: #c4cddd;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-email: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 26px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-strong: 650;
  --weight-bold: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-22: 88px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 28px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 56px -20px rgba(0, 0, 0, .7);
  --border-width: 1px;
  --border-accent: 4px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-touch: 44px;
  --size-icon-sm: 16px;
  --size-icon-md: 18px;
  --size-icon-lg: 20px;
  --size-tile: 40px;
  --layout-app-max: 1440px;
  --layout-public-max: 1160px;
  --layout-reading: 720px;
  --layout-form: 440px;
  --layout-settings: 880px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 600ms;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--color-bg); }
/* Focus: one visible ring for every interactive element (keyboard focus). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* Dark surfaces (navy sidebar, top bar, hero, security band): the brand blue ring is under 3:1 on navy, so the ring
   uses the lighter sidebar blue there. Setting the variable here keeps the rule above the single source of the ring. */
.sidebar, .topbar, .pub-hero, .pub-sec[aria-labelledby="security-title"] { --color-focus: var(--color-sidebar-indicator); }
/* Dates, amounts and counters line up in columns. */
.ac-date, .ac-days, .cp-date-value, .tl-day, .dl-days, .kpi-value, .mon-figure .big, .value-big, .value-cur, .pv-when, .notif-when, .pager-page { font-variant-numeric: tabular-nums; }
body { margin: 0; font: var(--text-base)/var(--leading-normal) var(--font-sans); color: var(--color-text); background: var(--color-bg); }
a { color: var(--color-link); }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); margin: 0 0 .75rem; letter-spacing: -.02em; }
h2 { font-size: var(--text-xl); margin: 0 0 .75rem; }
/* Headings break into even lines; body text avoids a single word on the last line. */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
main { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.25rem; background: var(--color-navy); color: var(--color-on-primary); }
.topbar .brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-on-primary); font-weight: 700; text-decoration: none; }
/* Logo tile: the mark is white on the brand blue at 72% of the tile (docs/brand/logo.md). */
.brand-tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary); flex: none; }
.logo-mark { display: block; width: 72%; height: 72%; flex: none; }
.topbar .who { display: flex; gap: 1rem; align-items: center; font-size: var(--text-md); }
.topbar .org { font-weight: 600; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; color: var(--color-sidebar-text); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: 1rem; }
.narrow { max-width: 440px; margin: 3rem auto; }
label { display: block; margin-bottom: .8rem; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input:not([type]) { display: block; width: 100%; min-height: var(--size-control-md); margin-top: .25rem; padding: .55rem .65rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-xs); font: inherit; }
button.primary { background: var(--color-primary); color: var(--color-on-primary); border: 0; border-radius: var(--radius-xs); padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.hint, .muted { color: var(--color-text-muted); }
.small { font-size: var(--text-md); }
.error { color: var(--color-danger-text); background: var(--color-danger-bg); padding: .5rem .75rem; border-radius: var(--radius-xs); }
.notice { margin-bottom: 1rem; }
.notice p { margin: .25rem 0; padding: .5rem .75rem; background: var(--color-primary-50); border-radius: var(--radius-xs); }
.notice p.error { background: var(--color-danger-bg); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; }
.kpi.attention { border-color: var(--color-warning-accent); background: var(--color-warning-bg-subtle); }
.kpi-label { color: var(--color-text-muted); font-size: var(--text-md); }
.kpi-value { font-size: 1.6rem; font-weight: 700; margin: .2rem 0; }
.kpi-note { font-size: var(--text-sm); color: var(--color-text-muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
thead th { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.nowrap { white-space: nowrap; }
ul.actions { list-style: none; padding: 0; margin: 0; }
ul.actions > li { padding: .5rem 0; border-bottom: 1px solid var(--color-border); }
ul.actions ul { margin: .2rem 0 0; padding-left: 1.1rem; font-size: var(--text-md); color: var(--color-text-muted); }
ul.actions li.urgent { color: var(--color-danger-text); font-weight: 600; }
ul.actions li.action > div + div { margin-top: .15rem; }
ul.actions li.action .badge { margin-right: .35rem; }
ul.actions strong.urgent { color: var(--color-danger-text); }
.badge { display: inline-block; font-size: var(--text-xs); font-weight: 600; padding: .1rem .45rem; border-radius: var(--radius-full); vertical-align: middle; white-space: nowrap; }
.badge.ok { color: var(--color-success); background: var(--color-success-bg); }
.badge.warn { color: var(--color-warning); background: var(--color-warning-bg); }
.badge.muted { color: var(--color-text-muted); background: var(--color-neutral-bg); }
.badge.user { color: var(--color-person); background: var(--color-person-bg); }
.badge.ai { color: var(--color-neutral); background: var(--color-neutral-bg); }
.badge.calc { color: var(--color-calc); background: var(--color-calc-bg); }
.warn-text { color: var(--color-warning); }
.disclaimer { font-size: var(--text-sm); color: var(--color-text-muted); }
.upload { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.reanalyse { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; }
.crumbs { margin: 0 0 .5rem; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } }
.detail-doc { position: sticky; top: 1rem; }
.banner { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.banner.info { background: var(--color-primary-50); }
.banner.warn { background: var(--color-warning-bg); color: var(--color-warning); }
.banner.error { background: var(--color-danger-bg); color: var(--color-danger-text); }
.calcs { display: grid; gap: .75rem; }
.calc { border: 1px solid var(--color-border); border-left: 4px solid var(--color-calc); border-radius: var(--radius-sm); padding: .65rem .85rem; }
.calc.calc-unverified { border-left-color: var(--color-warning-accent); }
.calc-title { font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; }
.calc-value { font-size: var(--text-xl); margin: .15rem 0; }
.calc-formula { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-calc); }
.calc-inputs { font-size: var(--text-sm); color: var(--color-text-muted); }
table.fields th[scope=row] { width: 26%; font-weight: 600; }
table.fields tr.status-needs_review { background: var(--color-warning-bg-subtle); }
blockquote { margin: .35rem 0 0; padding: .3rem .6rem; border-left: 3px solid var(--color-success); background: var(--color-bg-soft); font-size: var(--text-md); color: var(--color-text-2); }
blockquote.unverified { border-left-color: var(--color-warning-accent); background: var(--color-warning-bg-subtle); }
button.cite { font: inherit; font-size: var(--text-sm); padding: .1rem .5rem; border: 1px solid var(--color-border-strong); background: var(--color-surface); border-radius: var(--radius-xs); cursor: pointer; }
button.cite.active, button.cite:hover { border-color: var(--color-primary); color: var(--color-link); }
.viewer { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.viewer-bar { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: .4rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-soft); }
.viewer-bar button { font: inherit; font-size: var(--text-xl); width: 2rem; border: 1px solid var(--color-border-strong); background: var(--color-surface); border-radius: var(--radius-xs); cursor: pointer; }
.viewer-page { position: relative; max-height: calc(100vh - 7rem); overflow: auto; }
.viewer-page canvas { display: block; }
.highlights { position: absolute; inset: 0; pointer-events: none; }
.hl { position: absolute; background: rgba(255, 200, 0, .35); outline: 2px solid rgba(230, 160, 0, .8); border-radius: 2px; }
.hl-note { position: absolute; top: .5rem; left: .5rem; right: .5rem; background: var(--color-warning-bg); color: var(--color-warning); padding: .4rem .6rem; border-radius: var(--radius-xs); font-size: var(--text-md); }

/* ---------------------------------------------------------------------------
   App shell + dashboard (pages rendered with layout({ sidebar }))
   Blue = brand/interactive, navy = structure. Red/amber only for real urgency or status.
   --------------------------------------------------------------------------- */
body.shell { background: var(--color-bg); color: var(--color-text); }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
main.app-main { max-width: 1440px; width: 100%; margin: 0; padding: 1.75rem 2.25rem 3rem; }
/* Main column: page content, then the footer at the bottom (not fixed; pushed down on short pages). */
.app-col { display: flex; flex-direction: column; min-width: 0; }
.app-col > main.app-main { flex: 1 0 auto; }
.app-footer { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem 2rem; max-width: 1440px; width: 100%; padding: 1.1rem 2.25rem 1.3rem; border-top: 1px solid var(--color-border); background: var(--color-bg-soft); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.af-brand, .af-meta { display: flex; flex-direction: column; gap: .1rem; }
.af-brand strong { color: var(--color-text); font-size: var(--text-md); font-weight: 650; }
.af-meta { align-items: flex-end; text-align: right; }
.af-links { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.af-links a { color: var(--color-text-muted); text-decoration: none; }
.af-links a + a::before { content: "·"; margin: 0 .55rem; color: var(--color-border-strong); }
.af-links a:hover, .af-links a:focus-visible { color: var(--color-link); }
@media (max-width: 640px) {
  .app-footer { flex-direction: column; padding: 1rem 1rem 1.2rem; }
  .af-meta { align-items: flex-start; text-align: left; }
  .af-links { justify-content: flex-start; }
}
svg.i { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Sidebar */
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.75rem; padding: 1.25rem .9rem; background: var(--color-navy); color: var(--color-sidebar-text); }
.sb-brand { display: flex; align-items: center; gap: .65rem; padding: .25rem .5rem; color: var(--color-on-primary); font-weight: 700; font-size: var(--text-lg); letter-spacing: -.01em; text-decoration: none; }
.sb-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); }
.sb-nav { display: flex; flex-direction: column; gap: .2rem; }
.sb-item { display: flex; align-items: center; gap: .7rem; padding: .58rem .75rem; border-radius: var(--radius-md); color: var(--color-sidebar-text); font-size: var(--text-base); font-weight: 500; text-decoration: none; }
.sb-item:hover { background: var(--color-sidebar-hover-bg); color: var(--color-on-primary); }
.sb-item.active { background: var(--color-sidebar-active-bg); color: var(--color-on-primary); box-shadow: inset 3px 0 0 var(--color-sidebar-indicator); }
.sb-item.disabled { opacity: .5; cursor: default; }
.sb-item.disabled:hover { background: none; color: var(--color-sidebar-text); }
.sb-soon { margin-left: auto; padding: .05rem .45rem; border-radius: var(--radius-full); background: var(--color-sidebar-line); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; padding: .9rem .75rem 0; border-top: 1px solid var(--color-sidebar-line); font-size: var(--text-sm); }
.sb-foot-label { font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-sidebar-label); }
.sb-org { color: var(--color-on-primary); font-weight: 600; }

/* Header */
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.dash-head h1 { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: -.02em; color: var(--color-text); }
.dash-head .sub { margin: .25rem 0 0; color: var(--color-text-muted); }
.head-actions { display: flex; align-items: center; gap: .6rem; }
/* Pages with a long subtitle: let the title block shrink so the header actions stay top-right
   instead of wrapping below the subtitle (and stay right-aligned if they do wrap on narrow screens). */
.dash-head.pin-actions > div:first-child { flex: 1 1 320px; min-width: 0; }
.dash-head.pin-actions > .head-actions { flex: none; margin-left: auto; }
.btn { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--size-control-md); padding: .58rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: var(--text-md); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 1px 2px rgba(29, 91, 216, .25); }
.btn.primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn.primary:active:not(.is-disabled) { background: var(--color-primary-pressed); }
.btn.ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn.ghost:hover { border-color: var(--color-border-strong); background: var(--color-bg-soft); }
.btn { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
@media (hover: hover) { .btn.primary:hover:not(.is-disabled):not([disabled]) { transform: translateY(-1px); } }
.btn.primary:active:not(.is-disabled) { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn.primary:hover { transform: none; } }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.sm { min-height: var(--size-control-sm); padding: .35rem .75rem; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.icon-btn { position: relative; display: grid; place-items: center; width: var(--size-control-md); height: var(--size-control-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.icon-btn:hover { border-color: var(--color-border-strong); }
.icon-btn .count { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--color-bg); border-radius: var(--radius-full); background: var(--color-navy-2); color: var(--color-on-primary); font-size: var(--text-2xs); font-weight: 700; }
.icon-btn .count.urgent { background: var(--color-danger); }
.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: .55rem; padding: .25rem .55rem .25rem .25rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary svg.i { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-text-muted); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-primary-50); color: var(--color-link); font-weight: 700; }
.um-name { display: flex; flex-direction: column; font-size: var(--text-md); font-weight: 600; line-height: 1.2; }
.um-name small { color: var(--color-text-muted); font-weight: 500; font-size: var(--text-xs); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 230px; padding: .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.menu-head { display: flex; flex-direction: column; padding: .5rem .65rem .6rem; margin-bottom: .3rem; border-bottom: 1px solid var(--color-border); font-size: var(--text-md); }
.menu-head span { color: var(--color-text-muted); font-size: var(--text-sm); }
.menu-item { width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-md); text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--color-bg-soft); }
a.menu-item { display: block; text-decoration: none; }
/* Shared header actions: Notifications | + Add contract | Account. The notifications panel opens
   directly under the bell (absolutely positioned, so it never moves the controls). On narrow
   screens it is anchored to the whole action row instead so it cannot run off the left edge. */
.head-actions { position: relative; }
.notif-menu { position: relative; }
@media (max-width: 600px) {
  .notif-menu { position: static; }
}
.notif-menu summary { list-style: none; cursor: pointer; }
.notif-menu summary::-webkit-details-marker { display: none; }
.notif-menu[open] summary { border-color: var(--color-primary-100); background: var(--color-primary-50); color: var(--color-link); }
.notif-panel { width: min(360px, calc(100vw - 2rem)); padding: .4rem; }
.notif-list { display: flex; flex-direction: column; gap: .15rem; max-height: min(420px, 60vh); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.notif-row { display: flex; align-items: center; gap: .35rem; }
.notif-row[hidden] { display: none; }
.notif-row .notif-item { flex: 1; min-width: 0; }
.notif-read { flex: none; margin: 0; }
.notif-read-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
.notif-read-btn svg.i { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.notif-read-btn:hover, .notif-read-btn:focus-visible { border-color: var(--color-border); background: var(--color-success-bg); color: var(--color-success); }
.notif-read-btn:disabled { opacity: .5; cursor: default; }
.notif-item { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .65rem .55rem .8rem; border-radius: var(--radius-sm); border-left: 3px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.notif-item:hover, .notif-item:focus-visible { background: var(--color-bg-soft); }
.notif-item.p-urgent { border-left-color: var(--color-danger); }
.notif-item.p-high { border-left-color: var(--color-warning-accent); }
.notif-item.p-normal { border-left-color: var(--color-primary); }
.notif-kind { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.notif-kind.g-missed { color: var(--color-danger-text); }
.notif-title { overflow: hidden; font-size: var(--text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.notif-when { font-size: var(--text-sm); color: var(--color-text-muted); }
.notif-all { display: block; margin-top: .3rem; padding: .55rem .65rem; border-top: 1px solid var(--color-border); color: var(--color-link); font-size: var(--text-md); font-weight: 600; text-decoration: none; }
.notif-all:hover { text-decoration: underline; }
.notif-empty { margin: 0; padding: .9rem .65rem 1rem; color: var(--color-text-muted); font-size: var(--text-md); }
.hd-upload { margin: 0; }
.hd-upload label.btn { margin: 0; }
.hd-upload input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hd-upload.is-busy label.btn { opacity: .75; pointer-events: none; }
/* Pagination (Contracts page). */
.pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--color-border); }
.pager-nav { display: flex; align-items: center; gap: .6rem; }
.pager-page { font-size: var(--text-md); font-weight: 600; color: var(--color-text); }
.btn.is-disabled { opacity: .45; cursor: default; }
body.shell .notice p { background: var(--color-primary-50); border-radius: var(--radius-md); }
/* Email verification notice (every app page until verified). Amber = "check this" (docs/brand/status.md). */
.verify-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-warning-border); border-left: var(--border-accent) solid var(--color-warning-accent); border-radius: var(--radius-lg); background: var(--color-warning-bg); }
.verify-banner p { flex: 1 1 360px; margin: 0; color: var(--color-text-2); font-size: var(--text-md); }
.verify-banner strong { color: var(--color-text); }
.verify-banner form { margin: 0; flex: none; }

/* Status widgets */
.status-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.25rem; }
.stat-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 1.3rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.stat-card:hover { border-color: var(--color-primary-100); box-shadow: var(--shadow-lg); }
.stat-card:focus-visible { border-color: var(--color-focus); box-shadow: var(--shadow-lg); } /* ring: the global :focus-visible outline */
.stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--color-primary-50); color: var(--color-link); flex: none; transition: background-color .15s; }
.stat-card:not(.is-urgent):not(.is-warn):hover .stat-icon, .stat-card:not(.is-urgent):not(.is-warn):focus-visible .stat-icon { background: var(--color-primary-100); }
@media (prefers-reduced-motion: reduce) { .stat-card, .stat-icon { transition: none; } }
.stat-card.is-urgent .stat-icon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.stat-card.is-warn .stat-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.stat-card .kpi-value { margin: .15rem 0 0; font-size: 1.85rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--color-text); }
.stat-card .kpi-value .of { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-muted); }
.stat-card .kpi-label { color: var(--color-text); font-size: var(--text-md); font-weight: 500; }
.stat-note { margin-top: .15rem; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Panels */
.panel { margin-bottom: 1.25rem; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2 { margin: 0; font-size: var(--text-xl); letter-spacing: -.01em; color: var(--color-text); }
.panel-head p { margin: .2rem 0 0; }
.widget-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-bg-soft); color: var(--color-text-muted); flex: none; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
.dash-side { display: flex; flex-direction: column; }

/* Action Center: the focal point */
.panel.ac { padding: 1.5rem 1.6rem; border-color: var(--color-primary-100); box-shadow: var(--shadow-lg); }
.panel.ac .panel-head h2 { font-size: var(--text-2xl); }
.ac-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-soft); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.chip b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-xs); }
.chip.g-missed { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text); }
/* Action Center filter: the category chips are radio buttons; CSS shows only the chosen category
   (instant, no reload, no JavaScript). "All" is checked by default. */
.ac-filter { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; margin: 0 0 1.1rem; padding: 0; border: 0; }
.ac-filter .chip { margin: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ac-filter .chip:hover { border-color: var(--color-border-strong); }
.ac-filter .chip:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.ac-filter .chip.g-all:has(input:checked) { background: var(--color-primary-50); color: var(--color-link); }
.ac-filter .chip:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ac-filter .chip:has(input:disabled) { opacity: .5; cursor: default; }
.ac-filter .chip:has(input:disabled):hover { border-color: var(--color-border); }
.ac:has(.ac-filter input[value="missed"]:checked) .ac-item:not(.g-missed),
.ac:has(.ac-filter input[value="deadline"]:checked) .ac-item:not(.g-deadline),
.ac:has(.ac-filter input[value="renewal"]:checked) .ac-item:not(.g-renewal),
.ac:has(.ac-filter input[value="review"]:checked) .ac-item:not(.g-review),
.ac:has(.ac-filter input[value="cannot_monitor"]:checked) .ac-item:not(.g-cannot_monitor) { display: none; }
.ac-list { display: flex; flex-direction: column; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.ac-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.ac-item:hover { background: var(--color-bg-soft); }
.ac-item.p-urgent { border-left-color: var(--color-danger); }
.ac-item.p-high { border-left-color: var(--color-warning-accent); }
.ac-item.p-normal { border-left-color: var(--color-primary); }
.ac-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-lg); background: var(--color-primary-50); color: var(--color-link); }
.p-urgent .ac-icon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.p-high .ac-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.p-low .ac-icon { background: var(--color-bg-soft); color: var(--color-text-muted); }
.ac-body { min-width: 0; }
.ac-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.ac-meta .badge { letter-spacing: 0; text-transform: none; }
.ac-title { margin: .15rem 0 .1rem; font-size: var(--text-lg); font-weight: 650; color: var(--color-text); }
.ac-title.urgent { color: var(--color-danger-text); }
.ac-contract { font-size: var(--text-md); }
.ac-contract a { color: var(--color-link); font-weight: 600; text-decoration: none; }
.ac-contract a:hover { text-decoration: underline; }
.ac-detail { margin: .35rem 0 0; font-size: var(--text-md); line-height: 1.5; color: var(--color-text-2); }
.ac-when { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; min-width: 112px; text-align: right; }
.ac-date { font-size: var(--text-base); font-weight: 650; white-space: nowrap; }
.ac-days { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.ac-when .btn { margin-top: .25rem; }
.ac-empty { padding: 2.25rem 1rem; text-align: center; }
.ac-empty p { margin: .25rem 0; }
.ac-empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: .5rem; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); }

/* Monitoring + value widgets */
.mon-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.mon-figure .big { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
progress.meter { display: block; width: 100%; height: 8px; margin: .7rem 0 1rem; border: 0; border-radius: var(--radius-full); background: var(--color-neutral-bg); overflow: hidden; appearance: none; -webkit-appearance: none; }
progress.meter::-webkit-progress-bar { background: var(--color-neutral-bg); border-radius: var(--radius-full); }
progress.meter::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-full); }
progress.meter::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-full); }
.mon-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-md); }
.mon-list li { display: flex; align-items: center; gap: .6rem; }
.mon-list b { margin-left: auto; font-weight: 650; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); flex: none; }
.dot.ok { background: var(--color-primary); }
.dot.warn { background: var(--color-warning-accent); }
.dot.err { background: var(--color-danger); }
.widget-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--color-border); }
.widget-foot .kpi-label { color: var(--color-text-muted); font-size: var(--text-sm); }
.widget-foot .kpi-value { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.value-big { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; }
/* One line per currency: amounts in different currencies are never added together. */
.value-big { display: flex; flex-direction: column; gap: .1rem; line-height: 1.2; }
.value-cur { white-space: nowrap; }
.value-note { margin: .35rem 0 0; }
.top-title { margin: 1rem 0 .45rem; padding-top: .85rem; border-top: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.top-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-md); }
/* [title, truncated with an ellipsis ........] [amount, right-aligned, one line] */
.top-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .75rem; }
.top-list a { min-width: 0; overflow: hidden; color: var(--color-text); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.top-list a:hover { color: var(--color-link); }
.top-list span { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Timeline */
.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.legend .ev-deadline { color: var(--color-text-2); }
.legend .ev-renewal { color: var(--color-link); }
.legend .ev-end { color: var(--color-neutral-accent); }
.tl { display: grid; grid-auto-columns: minmax(150px, 1fr); grid-auto-flow: column; margin: 0; padding: 6px 0 0; list-style: none; overflow-x: auto; }
.tl-month { position: relative; padding: 1rem .75rem 0 0; border-top: 2px solid var(--color-border); }
.tl-month::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border: 2px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); }
.tl-month.now::before { border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-50); }
.tl-label { margin-bottom: .6rem; font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text); }
.now .tl-label { color: var(--color-link); }
.tl-events { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.tl-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .5rem; align-items: start; padding: .5rem .6rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); font-size: var(--text-sm); }
.tl-ev.ev-deadline { border-left-color: var(--color-navy-2); }
.tl-ev.ev-soon { border-left-color: var(--color-warning-accent); }
.tl-ev.ev-urgent { border-left-color: var(--color-danger); }
.tl-ev.ev-renewal { border-left-color: var(--color-primary); }
.tl-day { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; text-align: center; color: var(--color-text); }
.tl-text { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.tl-kind { font-weight: 650; color: var(--color-text); }
.ev-urgent .tl-kind { color: var(--color-danger-text); }
.tl-text a { overflow: hidden; color: var(--color-text-2); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.tl-text a:hover { color: var(--color-link); }
.tl-text .badge { align-self: flex-start; }
.tl-empty { padding: .4rem 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Upload + contracts table inside the shell */
body.shell .upload input[type=file] { padding: .45rem; border: 1px dashed var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); font: inherit; font-size: var(--text-md); }
.table-wrap { position: relative; overflow-x: auto; } /* position: the cp-sr (visually hidden) text inside the table is absolutely positioned and must be clipped by this scroller, not leak into the page width */
table.contracts th, table.contracts td { padding: .7rem .6rem; border-bottom-color: var(--color-border); vertical-align: middle; }
table.contracts thead th { font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-text-muted); }
table.contracts tbody tr:hover { background: var(--color-bg-soft); }
table.contracts tbody tr:last-child td { border-bottom: 0; }
table.contracts a { color: var(--color-link); font-weight: 600; text-decoration: none; }
body.shell .disclaimer { margin-top: .5rem; }

/* Deadlines page. Red = overdue, orange = within 30 days, yellow = within 90 days, neutral = cannot monitor. */
.status-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card.is-yellow .stat-icon { background: var(--color-due-later-bg); color: var(--color-due-later); }
.pill { display: inline-block; padding: .18rem .6rem; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
.pill.s-overdue { background: var(--color-danger-bg); color: var(--color-danger-text); }
.pill.s-within_30 { background: var(--color-due-soon-bg); color: var(--color-due-soon); }
.pill.s-within_90 { background: var(--color-due-later-bg); color: var(--color-due-later); }
.pill.s-later { background: var(--color-primary-50); color: var(--color-link); }
.pill.s-cannot_monitor { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.dl-section .panel-head h2 { display: flex; align-items: center; gap: .55rem; }
.dl-section .panel-head .chip { padding: .05rem .55rem; font-size: var(--text-sm); }
#overdue .panel-head h2 .chip { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text); }
.dl-table tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.dl-table tr.row-within_30 td:first-child { box-shadow: inset 3px 0 0 var(--color-due-soon-accent); }
.dl-table tr.row-within_90 td:first-child { box-shadow: inset 3px 0 0 var(--color-due-later-accent); }
.dl-table td:first-child { padding-left: .85rem; }
.dl-footnote { margin: .75rem 0 0; }
.dl-note { margin-top: .15rem; font-size: var(--text-sm); color: var(--color-text-muted); white-space: normal; }
.dl-days { font-weight: 600; }
.row-overdue .dl-days { color: var(--color-danger-text); }
.row-within_30 .dl-days { color: var(--color-due-soon); }
.dl-reason { font-size: var(--text-md); color: var(--color-text-2); min-width: 260px; }
.dl-open { text-align: right; white-space: nowrap; }
.dl-empty { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); }
.dl-empty p { margin: .1rem 0 0; }
.dl-empty-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); color: var(--color-link); flex: none; border: 1px solid var(--color-border); }
table.dl-table { min-width: 720px; }

/* Renewals page (reuses the Deadlines section/table styles). Red = very soon, then orange / yellow / blue / neutral. */
.pill.s-very_soon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.dl-table tr.row-very_soon td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.row-very_soon .dl-days { color: var(--color-danger-text); }
table.rn-table { min-width: 860px; }
.rn-explain { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid var(--color-primary-100); border-radius: var(--radius-lg); background: var(--color-primary-50); }
.rn-explain p { margin: 0; font-size: var(--text-md); color: var(--color-text-2); }
.rn-explain a { color: var(--color-link); font-weight: 600; }
.rn-explain-icon { display: grid; place-items: center; color: var(--color-link); flex: none; margin-top: .1rem; }

/* Reviews page (reuses the Deadlines section/table styles). Orange = missing information, yellow = check, blue = processing. */
.rv-lead { margin: .35rem 0 0; font-size: var(--text-lg); font-weight: 650; color: var(--color-text); }
.pill.s-rv-missing { background: var(--color-due-soon-bg); color: var(--color-due-soon); }
.pill.s-rv-check { background: var(--color-due-later-bg); color: var(--color-due-later); }
.pill.s-rv-processing { background: var(--color-primary-50); color: var(--color-link); }
.dl-table tr.row-rv-missing td:first-child { box-shadow: inset 3px 0 0 var(--color-due-soon-accent); }
.dl-table tr.row-rv-check td:first-child { box-shadow: inset 3px 0 0 var(--color-due-later-accent); }
.rv-what { font-size: var(--text-md); color: var(--color-text-2); min-width: 240px; }
table.rv-table { min-width: 640px; }

/* Contracts page (reuses the Deadlines section/table styles). Green = monitored, amber = needs attention,
   red = urgent action or document not analysed, blue = analysing, neutral = ended / not monitored. */
.pill.s-ct-monitored { background: var(--color-success-bg); color: var(--color-success); }
.pill.s-ct-attention { background: var(--color-warning-bg); color: var(--color-warning); }
.pill.s-ct-urgent, .pill.s-ct-failed { background: var(--color-danger-bg); color: var(--color-danger-text); }
.pill.s-ct-analysing { background: var(--color-primary-50); color: var(--color-link); }
.pill.s-ct-ended, .pill.s-ct-not_monitored { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.dl-table tr.row-ct-urgent td:first-child, .dl-table tr.row-ct-failed td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.dl-table tr.row-ct-attention td:first-child { box-shadow: inset 3px 0 0 var(--color-warning-accent); }
table.ct-table { min-width: 820px; }

/* Contract page ("contract cockpit"): details on the left, the original contract on the right.
   Amber only for details that need attention; red only for urgent or passed deadlines. */
.cp-crumbs { margin: 0 0 .6rem; font-size: var(--text-md); }
.cp-crumbs a { color: var(--color-text-muted); font-weight: 600; text-decoration: none; }
.cp-crumbs a:hover { color: var(--color-link); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.cp-main { min-width: 0; }
.cp-doc { position: sticky; top: 1rem; min-width: 0; }
.cp-doc-panel { padding: 1.1rem 1.1rem 1.2rem; }
.cp-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.cp-doc-head h2 { margin: 0; font-size: var(--text-xl); letter-spacing: -.01em; color: var(--color-text); }
.cp-doc-head p { margin: .15rem 0 0; overflow-wrap: anywhere; }
.cp-doc-head .btn { flex: none; }
.cp-doc .btn svg.i { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.cp-doc .viewer { border-color: var(--color-border); border-radius: var(--radius-lg); }
.cp-doc .viewer-page { max-height: calc(100vh - 10rem); }
/* Key dates: full width above the two columns, one roomy card per date. */
.cp-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-bottom: 1.5rem; }
.cp-date { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.4rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.cp-date-head { display: flex; align-items: center; gap: .6rem; }
.cp-date-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-primary-50); color: var(--color-link); flex: none; }
.cp-date-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.cp-date-value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--color-text); white-space: nowrap; }
.cp-date-note { padding-top: .55rem; border-top: 1px solid var(--color-border); font-size: var(--text-md); font-weight: 500; color: var(--color-text-2); }
.cp-date.is-urgent .cp-date-icon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.cp-date.is-urgent .cp-date-note { color: var(--color-danger-text); }
.cp-date.is-warn .cp-date-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.cp-attention { display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 1.25rem; padding: .95rem 1.1rem; border: 1px solid var(--color-warning-border); border-radius: var(--radius-lg); background: var(--color-warning-bg); }
.cp-attention-icon { display: grid; place-items: center; color: var(--color-warning); flex: none; margin-top: .1rem; }
.cp-attention strong { color: var(--color-text); }
.cp-attention p { margin: .15rem 0 0; font-size: var(--text-md); color: var(--color-text-2); }
.cp-attention a { color: var(--color-warning); font-weight: 600; }
.cp-section .panel-head { margin-bottom: .35rem; }
.cp-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--color-border); scroll-margin-top: 1rem; }
.panel-head + .cp-row { border-top: 0; }
.cp-row:target { margin: 0 -.75rem; padding: .85rem .75rem; border-radius: var(--radius-md); background: var(--color-primary-50); }
.cp-label { padding-top: .1rem; font-size: var(--text-md); font-weight: 600; color: var(--color-text-muted); }
.st-check .cp-label, .st-missing .cp-label { color: var(--color-text); }
.cp-body { min-width: 0; }
.cp-value { font-size: var(--text-lg); font-weight: 650; color: var(--color-text); overflow-wrap: anywhere; }
.cp-unit { margin-left: .2rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.cp-unit.is-passed { color: var(--color-danger-text); }
.cp-empty { font-weight: 500; color: var(--color-text-muted); }
.cp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .3rem; }
.cp-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.cp-tag svg.i { width: 14px; height: 14px; }
.cp-tag.ok { color: var(--color-success); }
.cp-tag.user { color: var(--color-person); }
.cp-tag.calc { color: var(--color-link); }
.cp-tag.warn { padding: .12rem .55rem; border-radius: var(--radius-full); background: var(--color-warning-bg); color: var(--color-warning); }
.cp-meta button.cite { padding: .05rem .5rem; font-size: var(--text-sm); color: var(--color-link); }
.cp-hint { margin: .3rem 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.cp-how { margin-top: .35rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.cp-how summary { color: var(--color-link); font-weight: 600; cursor: pointer; }
.cp-how p { margin: .3rem 0 0; font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.cp-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.cp-actions form { margin: 0; }
.cp-row .btn svg.i { width: 15px; height: 15px; }
.cp-row label.btn { margin: 0; font-weight: 600; }
/* Edit a whole section: a small edit button in the section header switches view -> editor (no JavaScript). */
.cp-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cp-secform { margin: 0; }
.cp-section .panel-head { align-items: flex-start; }
.cp-sec-edit { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; flex: none; }
.cp-sec-edit:hover { border-color: var(--color-primary-100); color: var(--color-link); }
.cp-sec-edit svg.i { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.cp-sec-toggle:focus-visible ~ .panel-head .cp-sec-edit { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cp-sec-toggle:checked ~ .panel-head .cp-sec-edit { visibility: hidden; }
.cp-view > .cp-row:first-child, .cp-editor > .cp-row:first-child { border-top: 0; }
.cp-editor { display: none; }
.cp-sec-toggle:checked ~ .cp-view { display: none; }
.cp-sec-toggle:checked ~ .cp-editor { display: block; }
.cp-editor-row { align-items: start; }
.cp-editor-row .cp-label { padding-top: .45rem; color: var(--color-text); }
.cp-editor-row .cp-body { display: flex; flex-direction: column; gap: .5rem; max-width: 420px; }
.cp-editor .cp-edit-actions { padding: 1rem 0 .4rem; border-top: 1px solid var(--color-border); }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Delete contract: the question only appears in a dialog after clicking the button. */
.btn.danger { background: var(--color-danger); color: var(--color-on-primary); box-shadow: 0 1px 2px rgba(180, 35, 24, .25); }
.btn.danger:hover { background: var(--color-danger-hover); }
.cp-danger { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.5rem 0 1rem; padding: 1rem 1.2rem; border: 1px solid var(--color-danger-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.cp-danger strong { color: var(--color-text); }
.cp-danger p { margin: .15rem 0 0; font-size: var(--text-md); color: var(--color-text-muted); }
.cp-danger .btn { flex: none; }
.cp-dialog { width: min(440px, calc(100vw - 2rem)); padding: 1.5rem 1.6rem; border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.cp-dialog::backdrop { background: var(--color-overlay); }
.cp-dialog p { margin: 0 0 1.25rem; font-size: var(--text-base); line-height: 1.55; color: var(--color-text); }
.cp-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin: 0; }
.cp-edit-actions { display: flex; gap: .5rem; }
.fi-row { display: flex; gap: .5rem; }
.fi-row > * { flex: 1; min-width: 0; }
.fi-row > .fi-short { flex: 0 0 5.5rem; }
.fi-in { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.fi-in span { display: block; margin-bottom: .2rem; }
.fi-in input, .fi-in select { display: block; width: 100%; min-height: var(--size-control-md); margin: 0; padding: .5rem .6rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-base); font-weight: 400; }
.fi-in input:focus, .fi-in select:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.cp-todo { margin-top: .35rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.cp-todo h3 { margin: 0 0 .6rem; font-size: var(--text-base); color: var(--color-text); }
.cp-todo ul { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cp-todo li { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); font-size: var(--text-md); color: var(--color-text-2); }
.cp-todo li strong { font-size: var(--text-base); color: var(--color-text); }
.cp-todo li.p-urgent { border-left-color: var(--color-danger); }
.cp-todo li.p-high { border-left-color: var(--color-warning-accent); }
body.shell .reanalyse { margin-bottom: 1.25rem; }
/* Settings: read-only rows (same as the contract page) and not-yet-available controls. */
.st-stack { max-width: 880px; }
.st-soon { margin-left: .35rem; }
.st-desc { margin: 0 0 .7rem; font-size: var(--text-md); color: var(--color-text-2); }
.st-switch { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--color-text); }
.st-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.st-track { position: relative; width: 38px; height: 22px; border-radius: var(--radius-full); background: var(--color-border-strong); flex: none; }
.st-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 2px rgba(12, 26, 54, .2); }
.st-switch input:checked + .st-track { background: var(--color-primary); }
.st-switch input:checked + .st-track::after { left: 19px; }
.st-switch.is-disabled > :not(.st-soon) { opacity: .55; }
.st-switch.is-disabled { cursor: not-allowed; }
.st-options { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; }
.st-options .chip { margin: 0; }
.st-options .chip:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.st-option input { margin: 0; }
.st-switches { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.st-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.st-line .st-soon { margin-left: 0; }
.st-hint { font-size: var(--text-md); color: var(--color-text-2); }
/* Account: each editable row is its own form; the Edit button switches view -> editor (no JavaScript). */
.st-form { margin: 0; }
.panel-head + .st-form .cp-row { border-top: 0; }
.st-view { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.st-view label.btn { margin: 0; font-weight: 600; }
.st-editor { display: none; flex-direction: column; gap: .65rem; max-width: 420px; }
.st-toggle:checked ~ .cp-row .st-view { display: none; }
.st-toggle:checked ~ .cp-row .st-editor { display: flex; }
.st-toggle:focus-visible ~ .cp-row .st-view label.btn { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.st-editor .cp-hint { margin: 0; }
.st-msg { margin: 0 0 .6rem; font-size: var(--text-md); }
.st-ok { padding: .5rem .75rem; border-radius: var(--radius-md); background: var(--color-success-bg); color: var(--color-success); }
p.error.st-msg { border-radius: var(--radius-md); }
.st-warn { padding: .5rem .75rem; border-radius: var(--radius-md); background: var(--color-warning-bg); color: var(--color-text); }
.st-warn .btn { margin-left: .4rem; }
.st-fieldset { margin: 0 0 .6rem; padding: 0; border: 0; }
.st-switch:has(input:focus-visible) .st-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Danger zone */
.panel.st-danger { border-color: var(--color-danger-border); }
.st-danger .panel-head h2 { color: var(--color-danger-text); }
.st-danger-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding: .9rem 0; border-top: 1px solid var(--color-border); }
.panel-head + .st-danger-row { border-top: 0; }
.st-danger-row strong { color: var(--color-text); font-size: var(--text-base); }
.st-danger-row p { margin: .15rem 0 0; font-size: var(--text-md); color: var(--color-text-muted); }
@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-doc { position: static; }
}
@media (max-width: 900px) {
  .cp-row { grid-template-columns: 1fr; gap: .2rem; }
  .cp-doc-head { flex-wrap: wrap; }
}

@media (max-width: 1180px) {
  .status-row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .dash-side .panel { margin-bottom: 0; }
  .dash-grid { margin-bottom: 1.25rem; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); } /* minmax(0, ...): the scrolling nav must not widen the page past the screen */
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; }
  .sb-nav { flex-direction: row; flex-wrap: nowrap; gap: .25rem; width: 100%; overflow-x: auto; }
  .sb-item { white-space: nowrap; padding: .45rem .65rem; }
  .sb-item.active { box-shadow: inset 0 -2px 0 var(--color-sidebar-indicator); }
  .sb-foot { display: none; }
  main.app-main { padding: 1.25rem 1rem 2.5rem; }
  .status-row, .status-row.four, .dash-side { grid-template-columns: 1fr; }
  .head-actions { flex-wrap: wrap; }
  .head-actions .btn.ghost span, .um-name { display: none; }
  .ac-item { grid-template-columns: 36px minmax(0, 1fr); gap: .75rem; }
  .ac-icon { width: 36px; height: 36px; }
  .ac-when { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem; min-width: 0; text-align: left; }
  .ac-when .btn { margin: 0 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   Public website (body.pub): Home, Features, Pricing, Security, Log in, Sign up.
   Same tokens as the app shell; everything is scoped to body.pub.
   --------------------------------------------------------------------------- */
body.pub { background: var(--color-surface); color: var(--color-text); font-size: var(--text-lg); line-height: 1.6; }
body.pub main.pub-main { max-width: none; margin: 0; padding: 0; }
.pub h1, .pub h2, .pub h3 { color: var(--color-text); letter-spacing: -.02em; line-height: 1.2; }
.pub a { color: var(--color-link); }
.pub .btn { text-decoration: none; }
.pub .btn.primary, .pub .btn.primary:visited { color: var(--color-on-primary); }
.pub .btn.ghost { color: var(--color-text); }
.pub-btn-lg { min-height: var(--size-control-lg); padding: .78rem 1.35rem; font-size: var(--text-lg); border-radius: var(--radius-lg); }
.pub-btn-block { width: 100%; justify-content: center; padding: .72rem 1rem; font-size: var(--text-lg); }
.pub-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pub svg.i { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* Header */
.pub-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, .96); }
.pub-bar { display: flex; align-items: center; gap: 2rem; height: 68px; }
.pub .pub-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--color-text); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.01em; text-decoration: none; }
.pub-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); flex: none; }
.pub-nav { display: flex; gap: .25rem; }
.pub-nav a, .pub-menu-panel nav a { padding: .45rem .75rem; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-base); font-weight: 500; text-decoration: none; }
.pub-nav a:hover, .pub-menu-panel nav a:hover { background: var(--color-bg-soft); color: var(--color-text); }
.pub-nav a.is-active, .pub-menu-panel nav a.is-active { color: var(--color-link); background: var(--color-primary-50); }
.pub-ctas { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.pub .pub-login { padding: .5rem .8rem; border-radius: var(--radius-sm); color: var(--color-text); font-weight: 600; font-size: var(--text-base); text-decoration: none; }
.pub .pub-login:hover, .pub .pub-login.is-active { background: var(--color-bg-soft); }
.pub-menu { display: none; position: relative; margin-left: auto; }
.pub-menu summary { list-style: none; cursor: pointer; }
.pub-menu summary::-webkit-details-marker { display: none; }
.pub-menu[open] summary { border-color: var(--color-primary-100); background: var(--color-primary-50); color: var(--color-link); }
.pub-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.pub-menu-panel nav { display: flex; flex-direction: column; gap: .15rem; }
.pub-menu-panel nav a { padding: .65rem .75rem; font-size: var(--text-lg); }
.pub-menu-ctas { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; padding-top: .75rem; border-top: 1px solid var(--color-border); }
.pub-menu-ctas a { justify-content: center; text-align: center; }

/* Type */
.pub-eyebrow { display: inline-block; margin-bottom: .75rem; color: var(--color-link); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pub-lead { margin: 0; color: var(--color-text-2); font-size: var(--text-xl); line-height: 1.65; }
.pub-sec { padding: 88px 0; }
.pub-soft { background: linear-gradient(180deg, var(--color-primary-50) 0, var(--color-bg) 240px); }
.pub-sec-head { max-width: 680px; margin-bottom: 2.75rem; }
.pub-sec-head h2 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.pub-sec-head p { margin: 0; color: var(--color-text-2); font-size: var(--text-xl); }
.pub-hero h1, .pub-sec-head h2, .pub-page-head h1 { text-wrap: balance; }
.pub-lead, .pub-sec-head p { text-wrap: pretty; }
.pub-more { margin: 2rem 0 0; }
.pub-more a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }
.pub-more a:hover { text-decoration: underline; }
.pub-more svg.i { width: var(--size-icon-md); height: var(--size-icon-md); }
@media (prefers-reduced-motion: no-preference) {
  .pub-more svg.i { transition: transform .2s ease-out; }
  .pub-more a:hover svg.i, .pub-more a:focus-visible svg.i { transform: translateX(3px); }
}

/* Hero */
.pub-hero { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 104px; border-bottom: 1px solid var(--color-navy-2); color: var(--color-sidebar-text);
  background: linear-gradient(165deg, var(--color-navy) 0%, var(--color-navy-2) 48%, var(--color-primary-pressed) 100%); }
/* Layer 1: blue and cyan light blooms (static). */
.pub-hero::before { content: ""; position: absolute; inset: -14% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40rem 30rem at 82% 22%, color-mix(in srgb, var(--color-primary) 85%, transparent) 0%, transparent 70%),
    radial-gradient(26rem 20rem at 70% 78%, color-mix(in srgb, var(--color-calc) 70%, transparent) 0%, transparent 72%),
    radial-gradient(32rem 22rem at 4% 0%, color-mix(in srgb, var(--color-sidebar-indicator) 45%, transparent) 0%, transparent 70%); }
/* Layer 2: a faint grid that fades out towards the edges, for depth. */
.pub-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--color-sidebar-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-sidebar-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 70% 40%, var(--color-text) 0%, transparent 75%); mask-image: radial-gradient(70% 90% at 70% 40%, var(--color-text) 0%, transparent 75%); }
.pub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 4rem; }
.pub-hero .pub-eyebrow { padding: .3rem .85rem; border: 1px solid var(--color-sidebar-indicator); border-radius: var(--radius-full); background: var(--color-sidebar-active-bg); color: var(--color-on-primary); margin-bottom: 1.1rem; }
.pub-hero h1 { margin: 0 0 1.25rem; color: var(--color-on-primary); font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -.035em; line-height: 1.08; }
.pub-hero .pub-lead { color: var(--color-sidebar-text); }
.pub-hero .btn.primary { box-shadow: 0 0 0 1px var(--color-sidebar-indicator), var(--shadow-md); }
.pub-hero .btn.ghost { background: transparent; border-color: var(--color-sidebar-label); color: var(--color-on-primary); }
.pub-hero .btn.ghost:hover { background: var(--color-sidebar-hover-bg); border-color: var(--color-sidebar-text); }
.pub-hero-copy > * { animation: pub-hero-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.pub-hero-copy > :nth-child(2) { animation-delay: .08s; }
.pub-hero-copy > :nth-child(3) { animation-delay: .16s; }
.pub-hero-copy > :nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .pub-hero-copy > * { animation: none; } }
.pub-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* The hero demo: a recording of the app in a framed card (the glow plays once, then rests). Poster and video share the frame; the caption sits under it. */
.pub-hero-demo { position: relative; margin: 0; overflow: hidden; color: var(--color-text); border: 1px solid var(--color-primary-100); border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-sidebar-indicator) 55%, transparent), 0 0 64px -8px color-mix(in srgb, var(--color-sidebar-indicator) 55%, transparent), 0 36px 80px -28px color-mix(in srgb, var(--color-navy) 85%, transparent), var(--shadow-lg);
  animation: pub-hero-in 1s cubic-bezier(.2, .7, .2, 1) .1s both, pub-hero-glow 2.6s ease-in-out .7s 1 both; }
.pub-demo-video { display: block; width: 100%; height: auto; aspect-ratio: 1032 / 720; background: var(--color-bg-soft); }
.pub-hero-demo figcaption { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 1rem .8rem; border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5; }
.pub-hero-demo figcaption strong { color: var(--color-text); }
@keyframes pub-hero-in { from { opacity: 0; transform: translateY(32px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes pub-hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pub-hero-glow { 0%, 100% { outline: 0 solid transparent; } 50% { outline: 6px solid var(--color-sidebar-active-bg); outline-offset: 0; } }
@media (prefers-reduced-motion: reduce) { .pub-hero-demo { animation: none; } }

/* Icons, cards, grids */
.pub-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-lg); background: var(--color-primary-50); color: var(--color-link); box-shadow: inset 0 0 0 1px var(--color-primary-100); flex: none; }
.pub-ic.warn { background: var(--color-warning-bg); color: var(--color-warning); box-shadow: inset 0 0 0 1px var(--color-warning-border); }
.pub-card { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.pub-card h3 { margin: 1rem 0 .4rem; font-size: var(--text-xl); }
.pub-card p { margin: 0; color: var(--color-text-2); font-size: var(--text-base); }
.pub-soft .pub-card { border-color: var(--color-border-strong); }
.pub-card, .pub-flow li, .pub-plan { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-soft) 100%); }
.pub-ic { background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%); }
.pub-ic.warn { background: linear-gradient(135deg, var(--color-warning-bg-subtle) 0%, var(--color-warning-bg) 100%); }
.pub-grid2, .pub-grid3, .pub-grid4 { display: grid; gap: 1.25rem; }
.pub-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Problem */
.pub-risks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.pub-risks li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-soft) 100%); box-shadow: var(--shadow-md); }
.pub-risks strong { display: block; margin-bottom: .3rem; font-size: var(--text-lg); letter-spacing: -.01em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pub-risks li { transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
  .pub-risks li:hover { transform: translateY(-3px); border-color: var(--color-primary-100); box-shadow: var(--shadow-lg); }
}
@media (max-width: 1020px) { .pub-risks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pub-risks { grid-template-columns: 1fr; } }
.pub-risks p { margin: 0; color: var(--color-text-2); font-size: var(--text-base); }

/* Solution flow */
.pub-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.pub-flow li { position: relative; padding: 1.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.pub-flow li strong { display: block; margin: 1rem 0 .35rem; font-size: var(--text-lg); }
.pub-flow li p { margin: 0; color: var(--color-text-2); font-size: var(--text-base); }
.pub-principle { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; padding: 1.25rem 1.4rem; border: 1px solid var(--color-primary-100); border-radius: var(--radius-xl); background: var(--color-surface); }
.pub-principle p { margin: 0; color: var(--color-text-2); }
.pub-principle strong { color: var(--color-text); }

/* How it works */
.pub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.pub-step-n { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-full); background: var(--color-primary-50); box-shadow: inset 0 0 0 1px var(--color-primary-100); color: var(--color-link); font-size: var(--text-base); font-weight: 800; letter-spacing: .02em; }
.pub-steps .pub-card h3 { margin-top: .9rem; font-size: var(--text-2xl); }

/* Product preview: a static picture of the dashboard (sample data) */
.pv-window { overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-2xl); background: var(--color-bg); box-shadow: 0 2px 4px rgba(15, 27, 51, .04), 0 24px 60px rgba(15, 27, 51, .12);
  box-shadow: var(--shadow-sm), 0 44px 90px -28px color-mix(in srgb, var(--color-primary) 45%, transparent), 0 24px 56px -20px color-mix(in srgb, var(--color-navy) 35%, transparent); }
.pv-bar { display: flex; gap: 6px; padding: .7rem .9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.pv-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.pv-app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 420px; }
.pv-side { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .7rem; background: var(--color-navy); color: var(--color-sidebar-text); font-size: var(--text-sm); }
.pv-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: 0 .3rem; color: var(--color-on-primary); font-weight: 700; font-size: var(--text-md); }
.pv-brand .pub-logo { width: 26px; height: 26px; border-radius: var(--radius-sm); }
.pv-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: var(--radius-sm); }
.pv-item.active { background: var(--color-sidebar-active-bg); color: var(--color-on-primary); box-shadow: inset 3px 0 0 var(--color-sidebar-indicator); }
.pub .pv-item svg.i { width: 15px; height: 15px; }
.pv-main { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.4rem; min-width: 0; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pv-head strong { display: block; font-size: var(--text-2xl); letter-spacing: -.02em; }
.pv-head > div > span { color: var(--color-text-muted); font-size: var(--text-sm); }
.pv-add { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.pub .pv-add svg.i { width: 14px; height: 14px; }
.pv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.pv-stat { display: flex; flex-direction: column; padding: .8rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.pv-stat span { color: var(--color-text-muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pv-stat strong { font-size: 1.5rem; line-height: 1.2; }
.pv-stat small { color: var(--color-text); font-size: var(--text-sm); }
.pv-stat.is-warn { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.pv-panel { padding: .9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.pv-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; font-size: var(--text-base); }
.pv-panel-head span { color: var(--color-text-muted); font-size: var(--text-sm); }
.pv-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.pv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-when { color: var(--color-text-muted); white-space: nowrap; }
.pub-caption { margin: .9rem 0 0; color: var(--color-text-muted); font-size: var(--text-md); text-align: center; }

/* Pricing */
.pub-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pub-plan { display: flex; flex-direction: column; padding: 1.9rem 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.pub-plan h3 { margin: 0; font-size: var(--text-2xl); }
.pub-plan-fit { margin: .4rem 0 1.25rem; color: var(--color-text-2); font-size: var(--text-base); min-height: 3.2em; }
.pub-price { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 1rem; }
.pub-price strong { font-size: 2.6rem; letter-spacing: -.03em; line-height: 1; }
.pub-price span { color: var(--color-text-muted); }
.pub-price { flex-wrap: wrap; }
.pub-vat { display: inline-block; padding: .1rem .5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text-2); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.pub-price-annual { display: block; margin: 0 0 1rem; color: var(--color-text-2); font-size: var(--text-base); }
.pub-price-annual strong { color: var(--color-text); font-size: var(--text-xl); }
.pub-save { display: table; margin-top: .5rem; padding: .1rem .5rem; border-radius: var(--radius-full); background: var(--color-success-bg); color: var(--color-success); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.pub-hero-note { margin: 1rem 0 0; color: var(--color-sidebar-text); font-size: var(--text-base); }
.pub-hero-note a { color: var(--color-sidebar-indicator); }
.pub-prose { max-width: 760px; }
.pub-prose h2 { margin: 2.2rem 0 .6rem; font-size: var(--text-3xl); letter-spacing: -.01em; }
.pub-prose h2:first-child { margin-top: 0; }
.pub-prose p { margin: 0 0 1.1rem; color: var(--color-text-2); font-size: var(--text-xl); line-height: 1.7; text-wrap: pretty; }
.pub-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; }
.pub-teaser .pub-sec-head { margin-bottom: 0; }
.pub-teaser-body p { margin: 0 0 1rem; color: var(--color-text-2); font-size: var(--text-lg); line-height: 1.7; }
.pub-teaser-body .pub-more { margin-top: 1.25rem; }
.pub-final-inner .btn + .btn { margin-left: .75rem; }
@media (max-width: 900px) { .pub-teaser { grid-template-columns: 1fr; gap: 1rem; } .pub-final-inner .btn + .btn { margin: .75rem 0 0; } }
.pub-plan-limit { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .7rem .85rem; border-radius: var(--radius-md); background: var(--color-primary-50); color: var(--color-text); font-weight: 650; }
.pub-plan-limit svg.i { color: var(--color-link); }
.pub-plan .pub-checks { margin-bottom: 1.5rem; }
.pub-plan .btn { justify-content: center; margin-top: auto; }
.pub-checks { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pub-checks li { display: flex; gap: .6rem; align-items: flex-start; color: var(--color-text-2); font-size: var(--text-base); }
.pub .pub-checks svg.i { width: var(--size-icon-md); height: var(--size-icon-md); margin-top: .2rem; color: var(--color-success); }
.pub-note { display: flex; gap: .6rem; align-items: flex-start; max-width: 760px; margin: 1.75rem 0 0; color: var(--color-text-muted); font-size: var(--text-base); }
.pub .pub-note svg.i { width: var(--size-icon-md); height: var(--size-icon-md); margin-top: .2rem; }
.pub-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.pub-table { min-width: 560px; }
.pub-table th, .pub-table td { padding: .9rem 1.2rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.pub-table tbody tr:last-child th, .pub-table tbody tr:last-child td { border-bottom: 0; }
.pub-table thead th { color: var(--color-text); font-size: var(--text-base); text-transform: none; letter-spacing: 0; }
.pub-table tbody th { font-weight: 600; }
.pub-table td, .pub-table thead th:not(:first-child) { text-align: center; }
.pub-yes { display: inline-grid; place-items: center; color: var(--color-success); }

/* Features page */
.pub-page-head { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 64px; border-bottom: 1px solid var(--color-navy-2); color: var(--color-sidebar-text);
  background: linear-gradient(165deg, var(--color-navy) 0%, var(--color-navy-2) 55%, var(--color-primary-pressed) 130%); }
.pub-page-head::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34rem 20rem at 90% 0%, color-mix(in srgb, var(--color-primary) 80%, transparent) 0%, transparent 70%),
    radial-gradient(22rem 14rem at 72% 115%, color-mix(in srgb, var(--color-calc) 60%, transparent) 0%, transparent 72%),
    radial-gradient(24rem 16rem at 0% 0%, color-mix(in srgb, var(--color-sidebar-indicator) 35%, transparent) 0%, transparent 70%); }
.pub-page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--color-sidebar-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-sidebar-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 100% at 80% 20%, var(--color-text) 0%, transparent 75%); mask-image: radial-gradient(60% 100% at 80% 20%, var(--color-text) 0%, transparent 75%); }
.pub-page-head h1 { max-width: 820px; margin: 0 0 1rem; color: var(--color-on-primary); font-size: clamp(2.1rem, 4.5vw, 3.1rem); letter-spacing: -.03em; line-height: 1.1; }
.pub-page-head .pub-lead { max-width: 720px; color: var(--color-sidebar-text); }
.pub-page-head .pub-eyebrow { padding: .3rem .85rem; border: 1px solid var(--color-sidebar-indicator); border-radius: var(--radius-full); background: var(--color-sidebar-active-bg); color: var(--color-on-primary); margin-bottom: 1.1rem; }
.pub-page-head a { color: var(--color-sidebar-indicator); }
.pub-page-head .pub-legal-meta dt { color: var(--color-on-primary); }
.pub-page-head .pub-legal-meta dd { color: var(--color-sidebar-text); }
.pub-page-head .pub-wrap > * { animation: pub-hero-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.pub-page-head .pub-wrap > :nth-child(2) { animation-delay: .08s; }
.pub-page-head .pub-wrap > :nth-child(3) { animation-delay: .16s; }
.pub-page-head .pub-wrap > :nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .pub-page-head .pub-wrap > * { animation: none; } }

/* Legal pages (Privacy Policy, Terms of Service): readable text column with a table of contents. */
.pub-legal-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.6rem 0 0; font-size: var(--text-base); }
.pub-legal-meta div { display: flex; gap: .45rem; }
.pub-legal-meta dt { color: var(--color-text); font-weight: 600; }
.pub-legal-meta dd { margin: 0; color: var(--color-text-muted); }
.pub-legal-sec { padding: 64px 0 88px; }
.pub-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.pub-legal-toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; font-size: var(--text-md); }
.pub .pub-legal-toc h2 { margin: 0 0 .7rem; color: var(--color-text-muted); font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; }
.pub-legal-toc ol { display: grid; gap: .4rem; margin: 0; padding-left: 1.3rem; color: var(--color-text-muted); }
.pub .pub-legal-toc a { color: var(--color-text-muted); text-decoration: none; }
.pub .pub-legal-toc a:hover { color: var(--color-link); }
.pub-legal-body { max-width: 760px; min-width: 0; }
.pub-legal-body > section { scroll-margin-top: 88px; margin-bottom: 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--color-border); }
.pub-legal-body > section:last-child { margin-bottom: 0; border-bottom: 0; }
.pub .pub-legal-body h2 { margin: 0 0 1rem; font-size: 1.4rem; }
.pub .pub-legal-body h3 { margin: 1.5rem 0 .45rem; font-size: var(--text-xl); }
.pub-legal-body p, .pub-legal-body li { color: var(--color-text-2); line-height: 1.7; }
.pub-legal-body p { margin: 0 0 .9rem; }
.pub-legal-body ul { margin: 0 0 .9rem; padding-left: 1.3rem; }
.pub-legal-body li { margin-bottom: .4rem; }
.pub-legal-body code { padding: .05rem .3rem; border-radius: var(--radius-xs); background: var(--color-bg-soft); font-size: .88em; }
.pub-legal-body .pub-table-wrap { margin: 1rem 0 1.2rem; }
.pub-legal-body .pub-table { width: 100%; min-width: 560px; font-size: var(--text-md); }
.pub-legal-body .pub-table th, .pub-legal-body .pub-table td, .pub-legal-body .pub-table thead th:not(:first-child) { padding: .75rem 1rem; text-align: left; vertical-align: top; line-height: 1.55; }
.pub-todo { padding: .05rem .3rem; border-radius: var(--radius-xs); background: var(--color-warning-bg); color: var(--color-warning-strong); font-weight: 600; }
.pub-legal-review { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--color-warning-border); border-left: 4px solid var(--color-warning-accent); border-radius: var(--radius-md); background: var(--color-warning-bg); color: var(--color-warning-strong); font-size: var(--text-base); }
.pub-legal-review strong { display: block; margin-bottom: .2rem; font-size: var(--text-sm); letter-spacing: .08em; }
@media (max-width: 900px) {
  .pub-legal { grid-template-columns: 1fr; gap: 2rem; }
  .pub-legal-toc { position: static; max-height: none; padding: 1rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); }
}
.pub-features { display: flex; flex-direction: column; gap: 1.25rem; }
.pub-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; padding: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.pub-feature-head { display: flex; align-items: center; gap: .9rem; }
.pub-feature-head h2 { margin: 0; font-size: 1.35rem; }
.pub-feature-lead { margin: 0 0 1rem; color: var(--color-text); font-size: var(--text-xl); font-weight: 600; }
.pub-sec-topic .pub-feature-head { margin-bottom: 1.1rem; }
.pub-sec-topic .pub-feature-head h2 { font-size: var(--text-2xl); }

/* Final CTA */
.pub-final { padding: 88px 0; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(36rem 20rem at 85% 0%, color-mix(in srgb, var(--color-primary) 70%, transparent) 0%, transparent 70%), radial-gradient(30rem 18rem at 0% 100%, color-mix(in srgb, var(--color-calc) 55%, transparent) 0%, transparent 72%), linear-gradient(165deg, var(--color-navy) 0%, var(--color-navy-2) 100%); color: var(--color-sidebar-text); text-align: center; }
.pub-final-inner { max-width: 720px; }
.pub .pub-final h2 { margin: 0 0 .9rem; color: var(--color-on-primary); font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.pub-final p { margin: 0 0 2rem; font-size: var(--text-xl); }

/* Footer */
.pub-foot { border-top: 1px solid var(--color-border); background: var(--color-bg-soft); color: var(--color-text-muted); font-size: var(--text-base); }
.pub-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2rem; padding-top: 56px; padding-bottom: 40px; }
.pub-foot-brand p { max-width: 280px; margin: .8rem 0 0; }
.pub .pub-foot h2 { margin: 0 0 .8rem; font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }
.pub-foot nav, .pub-foot-grid > div:not(.pub-foot-brand) { display: flex; flex-direction: column; gap: .5rem; }
.pub-foot nav a { color: var(--color-text-muted); text-decoration: none; }
.pub-foot nav a:hover { color: var(--color-link); }
.pub-foot-base { padding-top: 1.2rem; padding-bottom: 1.6rem; border-top: 1px solid var(--color-border); font-size: var(--text-md); }

/* Log in / Sign up */
.pub-auth { padding: 72px 16px 88px; background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-bg) 100%); }
.pub-auth-card { max-width: 440px; margin: 0 auto; padding: 2.2rem 2.2rem 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.pub-auth-card h1 { margin: 0 0 .4rem; font-size: 1.75rem; }
.pub-auth-intro { margin: 0 0 1.5rem; color: var(--color-text-2); }
.pub-auth-card .error { margin: 0 0 1.25rem; border-radius: var(--radius-md); }
.pub-form label { margin-bottom: 1rem; color: var(--color-text); font-size: var(--text-base); font-weight: 600; }
.pub-form input:not([type=hidden]) { margin-top: .35rem; padding: .7rem .8rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); font-size: var(--text-lg); font-weight: 400; }
.pub-form input:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.pub-form .hint { margin: -.4rem 0 1.25rem; font-size: var(--text-md); }
.pub-form .btn { margin-top: .4rem; }
.pub-form .pub-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; line-height: 1.45; }
.pub-form .pub-check input[type=checkbox] { flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; padding: 0; }
.pub-form .pub-privacy-note { margin: 0 0 1.25rem; }
.pub-auth-foot { max-width: 440px; margin: 1.25rem auto 0; color: var(--color-text-muted); text-align: center; font-size: var(--text-base); }
.pub-auth-foot a { font-weight: 600; }
/* Support */
.pub-support { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pub-support-form { padding: 2rem; }
.pub-support-form .error { margin: 0 0 1.25rem; border-radius: var(--radius-md); }
.pub-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.pub-form textarea { display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); font: inherit; font-size: var(--text-lg); font-weight: 400; line-height: 1.5; resize: vertical; min-height: 9rem; }
.pub-form textarea:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.pub-form [aria-invalid="true"] { border-color: var(--color-danger); }
.pub-field-error { display: block; margin-top: .3rem; color: var(--color-danger-text); font-size: var(--text-md); font-weight: 500; }
.pub-support-form .hint { margin: 0 0 1.25rem; }
.pub-support-side { display: flex; flex-direction: column; gap: 1.25rem; }
.pub-sent h2 { margin: 1rem 0 .4rem; font-size: 1.35rem; }
.pub-sent p { margin: 0; color: var(--color-text-2); }
.pub-sent .pub-sent-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; }
.pub-sent-links a { font-weight: 600; }
@media (max-width: 860px) {
  .pub-support { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pub-form-row { grid-template-columns: 1fr; }
  .pub-support-form { padding: 1.4rem; }
}
.pub-link { padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-weight: 600; cursor: pointer; }
.pub-link:hover { text-decoration: underline; }

/* ===== Public site: shared premium surfaces (all public pages; the hero and page heads set the tone) ===== */
/* Header: solid white at every scroll position (no translucency or backdrop blur) */
.pub-head { background: var(--color-surface); }
.pub-hero + .pub-sec { background: radial-gradient(56rem 12rem at 50% 0%, var(--color-primary-100) 0%, transparent 72%), var(--color-surface); }
.pub-foot { background: linear-gradient(180deg, var(--color-primary-50) 0, var(--color-bg-soft) 140px); }
/* Product section: a blue light behind the preview window */
#product { background: radial-gradient(60rem 24rem at 50% 78%, var(--color-primary-100) 0%, transparent 70%), var(--color-surface); }
/* Homepage security band: the one dark content section; cards become glass */
.pub-sec[aria-labelledby="security-title"] { position: relative; isolation: isolate; overflow: clip; color: var(--color-sidebar-text);
  background: var(--color-navy);
  background: radial-gradient(40rem 22rem at 90% 0%, color-mix(in srgb, var(--color-primary) 60%, transparent) 0%, transparent 70%), radial-gradient(30rem 20rem at 0% 100%, color-mix(in srgb, var(--color-calc) 45%, transparent) 0%, transparent 72%), linear-gradient(165deg, var(--color-navy) 0%, var(--color-navy-2) 100%); }
.pub-sec[aria-labelledby="security-title"] .pub-eyebrow { color: var(--color-sidebar-indicator); }
.pub-sec[aria-labelledby="security-title"] .pub-sec-head h2 { color: var(--color-on-primary); }
.pub-sec[aria-labelledby="security-title"] .pub-sec-head p { color: var(--color-sidebar-text); }
.pub-sec[aria-labelledby="security-title"] .pub-card { border-color: var(--color-sidebar-label); background: var(--color-navy-2); box-shadow: var(--shadow-lg); }
.pub-sec[aria-labelledby="security-title"] .pub-card { border-color: color-mix(in srgb, var(--color-on-primary) 18%, transparent); background: color-mix(in srgb, var(--color-on-primary) 7%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pub-sec[aria-labelledby="security-title"] .pub-card h3 { color: var(--color-on-primary); }
.pub-sec[aria-labelledby="security-title"] .pub-card p { color: var(--color-sidebar-text); }
.pub-sec[aria-labelledby="security-title"] .pub-ic { background: var(--color-sidebar-active-bg); color: var(--color-on-primary); box-shadow: inset 0 0 0 1px var(--color-sidebar-indicator); }
.pub-sec[aria-labelledby="security-title"] .pub-more a { color: var(--color-on-primary); }
/* Features and Security topics: a blue accent edge and layered surface */
.pub-feature, .pub-sec-topic, .pub-plan { position: relative; overflow: hidden; }
.pub-feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-sidebar-indicator) 100%); }
.pub-sec-topic::before, .pub-plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-sidebar-indicator) 100%); }
.pub-feature { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-soft) 100%); box-shadow: var(--shadow-lg); }
.pub-feature .pub-ic { width: 48px; height: 48px; }
.pub-feature-lead { letter-spacing: -.01em; }
.pub-features > .pub-feature:nth-child(even) { background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-surface) 100%); }
/* Pricing */
.pub-plan { box-shadow: var(--shadow-lg); padding-top: calc(1.9rem + 4px); }
.pub-price strong { color: var(--color-text); }
.pub-table thead th { background: var(--color-primary-50); }
.pub-table tbody tr:nth-child(even) { background: var(--color-bg-soft); }
.pub-yes { width: 1.7rem; height: 1.7rem; border-radius: var(--radius-full); background: var(--color-success-bg); }
/* Support form: dimensional card, clear field states (the controls are never animated or hidden) */
.pub-support-form { border-top: 3px solid var(--color-primary); box-shadow: var(--shadow-lg); }
.pub-form input:not([type=hidden]), .pub-form textarea { background: var(--color-surface); transition: border-color .15s, box-shadow .15s; }
.pub-form input:not([type=hidden]):hover, .pub-form textarea:hover { border-color: var(--color-text-muted); }
.pub-form input:not([type=hidden]):focus, .pub-form textarea:focus { box-shadow: 0 0 0 4px var(--color-primary-100); }
.pub-support-side .pub-card { animation: pub-hero-rise .8s cubic-bezier(.2, .7, .2, 1) .3s both; }
.pub-support-side .pub-card + .pub-card { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .pub-support-side .pub-card { animation: none; } .pub-form input, .pub-form textarea { transition: none; } }

/* Scroll reveals (progressive enhancement, CSS-only). Without animation-timeline support, or with reduced
   motion, none of these rules apply and everything is simply visible. Public marketing pages only: the home page and the
   Features, Pricing and Security pages; never the support form or the legal pages. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) :is(.pub-sec-head, .pub-principle, .pub-steps .pub-card, .pub-grid3 .pub-card, .pub-grid4 .pub-card, .pub-grid2 .pub-card, .pub-feature, .pub-table-wrap, .pub-plan, .pub-final-inner) {
      animation: pub-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) .pv-window { animation-name: pub-reveal-tilt; transform-origin: 50% 100%; }
    /* Home page section headings: blur-fade instead of the plain rise. The range runs from the moment the heading
       appears at the bottom edge until it is about 40% of the way through its pass over the viewport (roughly
       mid-screen), so the blur is seen while the heading is actually on screen. */
    .pub-main:has(.pub-hero) .pub-sec > .pub-wrap > .pub-sec-head { animation-name: pub-reveal-blur; animation-range: entry 0% cover 25%; }
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) :is(.pub-steps, .pub-grid3, .pub-grid4, .pub-grid2, .pub-plans) > :nth-child(2) { animation-range: entry 8% entry 63%; }
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) :is(.pub-steps, .pub-grid3, .pub-grid4, .pub-plans) > :nth-child(3) { animation-range: entry 16% entry 71%; }
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) .pub-grid4 > :nth-child(4) { animation-range: entry 24% entry 79%; }
    /* Problem: six cards rise in sequence (columns offset within each row; the second row enters later by position).
       translate/scale are animated, not transform, so the hover lift still works afterwards. */
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) .pub-risks > li { animation: pub-reveal-card linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) .pub-risks > :nth-child(3n + 2) { animation-range: entry 8% entry 68%; }
    .pub-main:has(.pub-hero, .pub-page-head):not(:has(.pub-support, .pub-legal-body)) .pub-risks > :nth-child(3n) { animation-range: entry 16% entry 76%; }
  }
}
@keyframes pub-reveal { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pub-reveal-tilt { from { opacity: 0; transform: perspective(1400px) rotateX(9deg) translateY(48px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pub-reveal-blur { from { opacity: .85; transform: none; filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pub-reveal-card { from { opacity: 0; translate: 0 36px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* Responsive */
@media (max-width: 1020px) {
  .pub-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pub-hero-demo { max-width: 520px; }
  .pub-grid4, .pub-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-grid3, .pub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-feature { grid-template-columns: 1fr; gap: 1.25rem; }
  .pub-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-foot-brand { grid-column: 1 / -1; }
  .pv-app { grid-template-columns: 1fr; }
  .pv-side { display: none; }
}
@media (max-width: 860px) {
  .pub-nav, .pub-ctas { display: none; }
  .pub-menu { display: block; }
  .pub-sec { padding: 64px 0; }
  .pub-hero { padding: 56px 0 64px; }
  .pv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pub-wrap { padding: 0 16px; }
  .pub-grid2, .pub-grid3, .pub-grid4, .pub-flow, .pub-steps, .pub-plans { grid-template-columns: 1fr; }
  .pub-actions .btn { flex: 1 1 100%; justify-content: center; }
  .pub-feature, .pub-card, .pub-plan { padding: 1.4rem; }
  .pub-auth { padding: 40px 16px 56px; }
  .pub-auth-card { padding: 1.6rem 1.35rem; }
  .pv-main { padding: 1rem; }
  .pv-head .pv-add { display: none; }
  .pv-row { grid-template-columns: 1fr; gap: .15rem; }
  .pv-when { white-space: normal; }
  .pub-foot-grid { grid-template-columns: 1fr; padding-top: 40px; }
}
@media (max-width: 1020px) and (min-width: 641px) {
  .pub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Registration wizard preview (GET /preview/register, development only; src/web/pages/register-preview.ts).
   Uses the public-site tokens and the .pub-form field styles; no inline styles anywhere (strict CSP). */
.rp-page { padding-top: 40px; }
.rp { max-width: 760px; margin: 0 auto; }
.rp-banner { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid var(--color-warning-border); border-left: var(--border-accent) solid var(--color-warning-accent); border-radius: var(--radius-md); background: var(--color-warning-bg-subtle); color: var(--color-warning-strong); font-size: var(--text-md); }
.rp-banner svg.i { flex: none; margin-top: .15rem; }
.rp-card { max-width: none; }
.rp-progress { display: flex; gap: .5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.rp-progress-item { flex: 1 1 0; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; min-width: 0; padding-top: .7rem; border-top: 3px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.rp-progress-item.is-current { border-top-color: var(--color-primary); color: var(--color-text); }
.rp-progress-item.is-done { border-top-color: var(--color-success); color: var(--color-text-2); }
.rp-progress-dot { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-full); background: var(--color-neutral-bg); color: var(--color-text-2); font-size: var(--text-sm); }
.rp-progress-item.is-current .rp-progress-dot { background: var(--color-primary); color: var(--color-on-primary); }
.rp-progress-item.is-done .rp-progress-dot { background: var(--color-success-bg); color: var(--color-success); }
.rp-step-head .pub-auth-intro { margin-bottom: 1.25rem; }
.rp-step-title { margin: 0 0 .4rem; font-size: 1.5rem; }
.rp-step-title:focus { outline: none; }
.rp-enhanced .rp-step { display: none; }
.rp-enhanced .rp-step.is-current { display: block; }
.rp-step + .rp-step { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.rp-enhanced .rp-step + .rp-step { margin-top: 0; padding-top: 0; border-top: 0; }
.rp-field { margin-bottom: 1rem; }
.rp-field label { display: block; margin-bottom: 0; color: var(--color-text); font-size: var(--text-base); font-weight: 600; }
.rp-field input:not([type=checkbox]):not([type=radio]), .rp-field select { display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-lg); font-weight: 400; }
.rp-field input:focus, .rp-field select:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.rp-field [aria-invalid="true"] { border-color: var(--color-danger); }
.rp-optional { color: var(--color-text-muted); font-weight: 400; }
.rp-hint { margin: .3rem 0 0; font-size: var(--text-md); }
.rp-check { margin: .25rem 0 .5rem; }
.rp-match { margin: -.4rem 0 1rem; font-size: var(--text-md); font-weight: 600; }
.rp-match.is-ok { color: var(--color-success); }
.rp-match.is-bad { color: var(--color-danger-text); }
.rp-interval { display: inline-flex; gap: .25rem; margin: 0 0 1.25rem; padding: .25rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-soft); }
.rp-interval-opt { display: inline-flex; gap: .5rem; align-items: center; padding: .45rem 1rem; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; }
.rp-interval-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rp-interval-opt:has(input:checked) { background: var(--color-primary); color: var(--color-on-primary); }
.rp-interval-opt:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.rp-badge { padding: .1rem .5rem; border-radius: var(--radius-full); background: var(--color-success-bg); color: var(--color-success); font-size: var(--text-xs); font-weight: 700; }
.rp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rp-plan { display: block; cursor: pointer; }
.rp-plan input { position: absolute; opacity: 0; pointer-events: none; }
.rp-plan-body { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.1rem 1rem; border: 2px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); transition: border-color .15s, box-shadow .15s; }
.rp-plan:hover .rp-plan-body { border-color: var(--color-border-strong); }
.rp-plan.is-selected .rp-plan-body { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-100); }
.rp-plan:has(input:focus-visible) .rp-plan-body { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.rp-plan-name { color: var(--color-text); font-size: var(--text-xl); font-weight: 700; }
.rp-plan-limit { display: flex; gap: .4rem; align-items: center; color: var(--color-text-2); font-weight: 600; }
.rp-price { color: var(--color-text-muted); }
.rp-price strong { color: var(--color-text); font-size: 1.6rem; }
.rp-saving { display: flex; gap: .35rem; align-items: center; color: var(--color-success); font-size: var(--text-md); font-weight: 600; }
.rp-saving-month { color: var(--color-text-muted); font-weight: 500; }
.rp-plan-feature { display: flex; gap: .4rem; align-items: center; margin-top: 0; padding-top: .4rem; color: var(--color-text-2); font-size: var(--text-md); }
.rp[data-interval="year"] .rp-price-month, .rp[data-interval="month"] .rp-price-year { display: none; }
.rp-summary { margin: 1.25rem 0 0; padding: .75rem 1rem; border-radius: var(--radius-md); background: var(--color-primary-50); color: var(--color-text); font-weight: 600; }
.rp-discount { margin: 1.75rem 0 0; padding: 1.25rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-soft); }
.rp-discount h3 { margin: 0 0 .75rem; font-size: var(--text-xl); }
.rp-discount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem; align-items: start; }
.rp-discount-row .rp-field { margin-bottom: 0; }
.rp-discount-row .btn { margin-top: .35rem; min-height: calc(1.5em + 1.4rem + 2px); }
.rp-code-form .rp-code-label { display: block; margin: 0; }
.rp-code-form input[name="code"] { display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; letter-spacing: .04em; }
.rp-code-form input[name="code"]:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.rp-discount .hint { margin: 0 0 .9rem; }
.rp-notice { margin: .85rem 0 0; padding: .7rem .9rem; border: 1px solid var(--color-warning-border); border-left: var(--border-accent) solid var(--color-warning-accent); border-radius: var(--radius-md); background: var(--color-warning-bg-subtle); color: var(--color-warning-strong); font-size: var(--text-md); font-weight: 600; }
.rp-notice[hidden] { display: none; }
.rp-actions { display: flex; gap: .75rem; justify-content: space-between; margin-top: 1.75rem; }
.rp-actions .btn { min-width: 8rem; justify-content: center; }
.rp-actions #rp-next { margin-left: auto; }
@media (max-width: 720px) {
  .rp-page { padding-top: 24px; }
  .rp-plans { grid-template-columns: 1fr; }
  .rp-progress-label { display: none; }
  .rp-progress-item.is-current .rp-progress-label { display: inline; }
  .rp-progress-item { flex: 0 0 auto; }
  .rp-progress-item.is-current { flex: 1 1 auto; }
  .rp-card.pub-auth-card { padding: 1.5rem 1.25rem; }
  .rp-discount-row { grid-template-columns: 1fr; }
  .rp-discount-row .btn { margin-top: .75rem; width: 100%; justify-content: center; }
  .rp-actions .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .rp-plan-body { transition: none; } }

/* Activation page (GET /activate; src/web/pages/activate.ts). */
.act-card { max-width: 960px; }
.rp-embedded { max-width: none; }
.act-canceled { margin: 0 0 1rem; }
.act-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 .5rem; }
.act-plan { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.act-plan h3 { margin: 0; font-size: var(--text-xl); }
.act-limit { margin: 0 0 .5rem; color: var(--color-text-2); font-weight: 600; }
.act-btn { justify-content: center; text-align: center; flex-wrap: wrap; }
.act-save { font-weight: 500; }
.act-code-box { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.act-code-box h2 { margin: 0 0 .5rem; font-size: var(--text-xl); }
.act-code { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.act-code label { display: grid; gap: .25rem; font-weight: 600; }
.act-code input { min-width: 18rem; font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 720px) { .act-plans { grid-template-columns: 1fr; } }

/* Homepage only (scoped to .pub-home so Features, Pricing, Security, Our story and the other public pages keep their spacing):
   shorter and tighter; the hero keeps its two columns (copy left, Action Center sample right) and stacks only below 1020px. */
.pub-home .pub-hero { padding: 72px 0 72px; }
.pub-home .pub-sec { padding: 56px 0; }
.pub-home .pub-sec-head { margin-bottom: 1.75rem; }
.pub-home .pub-card { padding: 1.25rem 1.35rem; }
.pub-home .pub-card h3 { margin: .75rem 0 .3rem; }
.pub-home .pub-steps .pub-card h3 { margin-top: .7rem; }
.pub-home .pub-principle { margin-top: 1.25rem; }
.pub-home .pub-more { margin-top: 1.25rem; }
.pub-home .pub-final { padding: 64px 0; }
.pub-home .pub-final p { margin-bottom: 1.5rem; }
/* Short FAQ: native <details>, no script, no animation */
.pub-faq { display: grid; gap: .6rem; max-width: 820px; }
.pub-faq details { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.pub-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1.2rem; cursor: pointer; font-weight: 600; font-size: var(--text-lg); list-style: none; }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after { content: "+"; flex: none; color: var(--color-link); font-size: 1.25rem; line-height: 1; }
.pub-faq details[open] summary::after { content: "\2212"; }
.pub-faq summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-lg); }
.pub-faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--color-text-2); }
@media (max-width: 640px) {
  .pub-home .pub-hero { padding: 48px 0 40px; }
  .pub-home .pub-sec { padding: 44px 0; }
}
/* Pricing cards (home page and /pricing): "Excl. VAT" as small, understated text instead of a bubble (the information stays next to both prices) */
.pub-price .pub-vat, .pub-price-annual .pub-vat { padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: .01em; }
/* Support page: the contact line under the intro */
.pub-page-head .pub-support-contact { max-width: 46rem; margin: 1rem 0 0; color: var(--color-sidebar-text); font-size: var(--text-base); }
.pub-page-head .pub-support-contact a { color: var(--color-on-primary); font-weight: 600; text-decoration: underline; }
/* Pricing cards (home page and /pricing): the cards share their row tracks (subgrid), so the name, description, price, annual price with its saving, contract limit,
   feature line and button sit at exactly the same height in all three cards, whatever a text wraps to. Browsers without subgrid keep the flex layout above. */
@supports (grid-template-rows: subgrid) {
  .pub-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .pub-plan .btn { align-self: end; margin-top: 0; }
}

/* Contract summary (Business plan and above) */
.sm-group { margin-top: 1rem; }
.sm-group h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 0 0 .4rem; }
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.sm-list li { display: grid; gap: .35rem; justify-items: start; }
.sm-statement { margin: 0; font-weight: 600; }
.sm-quote { margin: 0; padding: .25rem .75rem; border-left: 3px solid var(--color-border-strong); color: var(--color-text-muted); font-size: var(--text-sm); }
.sm-request { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }

/* Clause and risk analysis (Professional plan) */
.rk-limits { margin: .5rem 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-text); font-size: var(--text-sm); }
.rk-limits p { margin: 0 0 .35rem; }
.rk-limits ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.sm-list li.rk-review_closely { padding-left: .75rem; border-left: 3px solid var(--color-warning); }
.sm-list li.rk-worth_checking { padding-left: .75rem; border-left: 3px solid var(--color-border-strong); }

/* Reports (Professional plan) */
.rp-value { display: grid; gap: .25rem; font-size: var(--text-xl); font-weight: 700; }
.rp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.rp-two h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 0 0 .5rem; }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
@media (max-width: 760px) { .rp-two { grid-template-columns: 1fr; } }

/* Plans that build on each other: feature lists and the "included from" tag */
.rp-plan-feature + .rp-plan-feature { margin-top: 0; }
.pub-plan-features { align-content: start; }
.pub-plan-tag { display: inline-block; margin: .5rem 0 .25rem; padding: .1rem .55rem; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-link); font-size: var(--text-sm); font-weight: 650; }
.pub-no { color: var(--color-text-muted); }
.act-features { margin: .25rem 0 .75rem; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: var(--text-sm); color: var(--color-text-2); }

/* ---- Home hero: still poster with a play button and two stickers; the video is loaded only when it is played (hero-video.js) ---- */
.pub-demo-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--color-bg-soft); color: inherit; cursor: pointer; font: inherit; }
.pub-demo-poster { display: block; width: 100%; height: auto; aspect-ratio: 1032 / 720; }
.pub-play-btn { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--color-primary) 28%, transparent), var(--shadow-lg);
  transition: transform .2s ease, box-shadow .2s ease; }
.pub-play-btn svg { margin-left: .2rem; }
.pub-demo-play:hover .pub-play-btn { transform: scale(1.06); box-shadow: 0 0 0 .8rem color-mix(in srgb, var(--color-primary) 30%, transparent), var(--shadow-lg); }
.pub-demo-play:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.pub-play-label { position: absolute; left: 50%; top: calc(50% + 3.6rem); transform: translateX(-50%); padding: .2rem .7rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-navy) 82%, transparent); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.pub-sticker { position: absolute; z-index: 1; padding: .35rem .85rem; border: 2px solid var(--color-surface); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 750; letter-spacing: .01em; line-height: 1.2; box-shadow: var(--shadow-md); pointer-events: none; }
.pub-sticker-a { top: 1.1rem; left: -.4rem; transform: rotate(-7deg); background: var(--color-navy); color: var(--color-on-primary); }
.pub-sticker-b { bottom: 1.4rem; right: -.4rem; transform: rotate(5deg); background: var(--color-surface); color: var(--color-link); border-color: var(--color-primary); }
.pub-hero-demo.is-playing .pub-demo-video { aspect-ratio: 1032 / 720; }
.pub-demo-noscript { margin: 0; padding: 0 1rem .8rem; font-size: var(--text-sm); }
@media (max-width: 520px) {
  .pub-play-btn { width: 4.25rem; height: 4.25rem; margin: -2.1rem 0 0 -2.1rem; }
  .pub-play-label { top: calc(50% + 2.9rem); }
  .pub-sticker { font-size: var(--text-xs); padding: .25rem .6rem; }
  .pub-sticker-a { left: -.2rem; } .pub-sticker-b { right: -.2rem; }
}

/* ---- Workflow strip under the hero: seven steps, static ---- */
.pub-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: strip; }
.pub-strip li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0 .25rem; text-align: center; }
.pub-strip li + li::before { content: ""; position: absolute; top: 1.7rem; right: calc(50% + 1.9rem); width: calc(100% - 3.8rem); height: 2px; background: linear-gradient(90deg, var(--color-border) 0 50%, var(--color-primary) 50% 100%) 0 0 / 200% 100%; }
.pub-strip-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-link); }
.pub-strip strong { font-size: var(--text-base); }
.pub-strip-text { color: var(--color-text-2); font-size: var(--text-sm); }
.pub-strip-plan { padding: .05rem .5rem; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-link); font-size: var(--text-xs); font-weight: 650; }
@media (max-width: 1000px) { .pub-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.5rem; } .pub-strip li::before { display: none; } }
@media (max-width: 560px) {
  .pub-strip { grid-template-columns: 1fr; gap: 0; }
  .pub-strip li { display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; align-items: center; padding: .6rem 0; text-align: left; }
  .pub-strip-ic { grid-row: span 3; }
  .pub-strip-plan { justify-self: start; }
  .pub-strip li + li::before { display: block; top: -.6rem; right: auto; left: 1.6rem; width: 2px; height: 1.2rem; background: var(--color-border); }
}

/* ---- Pricing: Yearly / Monthly toggle (radio buttons + CSS, works without JavaScript) ---- */
.pub-bi-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pub-bi-toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 1.75rem; padding: .3rem; gap: .25rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.pub-bi-toggle label { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.2rem; border-radius: var(--radius-full); color: var(--color-text-2); font-weight: 650; cursor: pointer; }
.pub-bi-badge { padding: .05rem .5rem; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-link); font-size: var(--text-xs); font-weight: 700; }
#bi-year:checked ~ .pub-bi-toggle label[for="bi-year"], #bi-month:checked ~ .pub-bi-toggle label[for="bi-month"] { background: var(--color-primary); color: var(--color-on-primary); }
#bi-year:checked ~ .pub-bi-toggle label[for="bi-year"] .pub-bi-badge { background: var(--color-on-primary); }
#bi-year:focus-visible ~ .pub-bi-toggle label[for="bi-year"], #bi-month:focus-visible ~ .pub-bi-toggle label[for="bi-month"] { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.pub-iv { display: none; }
#bi-year:checked ~ .pub-plans .pub-iv-year, #bi-month:checked ~ .pub-plans .pub-iv-month { display: contents; }
.pub-price-annual .pub-iv { display: none; }
#bi-year:checked ~ .pub-plans .pub-price-annual .pub-iv-year, #bi-month:checked ~ .pub-plans .pub-price-annual .pub-iv-month { display: block; }
.pub-price-annual .pub-save { display: block; margin-top: .15rem; }
@media (max-width: 520px) { .pub-bi-toggle label { padding: .5rem .8rem; } }
#bi-year:checked ~ .pub-plans a.pub-iv-year, #bi-month:checked ~ .pub-plans a.pub-iv-month { display: flex; }

/* ---- Pricing page: compact heading, then the toggle and the cards straight away ---- */
.pub-price-head { padding: 2.75rem 0 1.25rem; text-align: center; background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-surface) 100%); }
.pub-price-head h1 { margin: 0 0 .5rem; color: var(--color-text); font-size: clamp(1.9rem, 4.2vw, 2.6rem); letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.pub-price-head p { max-width: 34rem; margin: 0 auto; color: var(--color-text-2); font-size: var(--text-lg); }
.pub-sec.pub-price-sec { padding-top: 1.25rem; padding-bottom: 3.5rem; }
/* Monthly never shows a saving: the yearly badge and every saving line belong to the Yearly state only. */
#bi-month:checked ~ .pub-bi-toggle .pub-bi-badge { display: none; }
#bi-year:checked ~ .pub-note .pub-iv-year, #bi-month:checked ~ .pub-note .pub-iv-month { display: inline; }
/* The recommended plan: a quiet emphasis (frame, small flag, solid button), not a different card. */
.pub-plan.is-recommended { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-lg); }
.pub-plan-flag { position: absolute; top: .95rem; right: 1.1rem; padding: .15rem .65rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
@media (min-width: 1021px) { .pub-plan.is-recommended { transform: translateY(-6px); } }

/* ---- Home hero: a small workflow accent under the video (Upload, Review, Track, Act) on a static line (the travelling dot is hidden) ---- */
.pub-flow-accent { position: relative; padding: .8rem 1.25rem .95rem; border-top: 1px solid var(--color-border); }
.pub-flow-accent ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; text-align: center; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.pub-flow-accent li { position: relative; padding-top: 1.1rem; }
.pub-flow-accent li::before { content: ""; position: absolute; top: .2rem; left: 50%; width: .55rem; height: .55rem; margin-left: -.275rem; border-radius: 50%; background: var(--color-border-strong); }
.pub-flow-line { position: absolute; top: calc(.8rem + .475rem); left: calc(1.25rem + (100% - 2.5rem) * .125); width: calc((100% - 2.5rem) * .75); height: 2px; background: linear-gradient(90deg, var(--color-primary-100), var(--color-primary), var(--color-primary-100)); border-radius: 2px; opacity: .6; }
.pub-flow-dot { position: absolute; top: 50%; left: 0; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--color-primary) 22%, transparent); opacity: 0; }
@media (max-width: 520px) { .pub-flow-accent { padding: .7rem .75rem .85rem; } .pub-flow-accent ol { letter-spacing: .04em; } .pub-flow-line { left: calc(.75rem + (100% - 1.5rem) * .125); width: calc((100% - 1.5rem) * .75); top: calc(.7rem + .475rem); } }
/* The two plans that are not the recommended one get a quiet outlined button, so they read as buttons next to the solid one. */
.pub-plan .btn:not(.primary) { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-link); font-weight: 650; }
.pub-plan .btn:not(.primary):hover { border-color: var(--color-primary); background: var(--color-primary-50); }

/* ---------------------------------------------------------------------------
   Refinement layer: phone inputs and app micro-interactions.
   Durations are 120 to 160 ms, ease-out, colour/transform/opacity only. Every motion rule is inside
   prefers-reduced-motion: no-preference, so reduced motion gets the instant state change.
   --------------------------------------------------------------------------- */
/* Phones: a control under 16px makes iOS zoom the page on focus. The check boxes, radios and file pickers keep their own size. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]), select, textarea { font-size: var(--text-lg); }
}
/* Keyboard focus gets the same quiet background as hover, so the state is not carried by the ring alone. */
.sb-item:focus-visible { background: var(--color-sidebar-hover-bg); color: var(--color-on-primary); }
.icon-btn:focus-visible { border-color: var(--color-border-strong); }
.menu-item:focus-visible { background: var(--color-bg-soft); }
.ac-item:focus-within { background: var(--color-bg-soft); }
@media (prefers-reduced-motion: no-preference) {
  .sb-item, .icon-btn, .menu-item, .ac-item, .user-menu summary, .notif-item, .notif-read-btn, button.cite {
    transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out;
  }
  /* Press feedback: a 2% shrink for the length of the press. The doubled class outranks the primary button's hover lift. */
  .btn.btn:active:not(.is-disabled):not([disabled]) { transform: scale(.98); }
  .icon-btn:active { transform: scale(.97); }
  .icon-btn { transition-property: background-color, border-color, color, box-shadow, transform; }
  /* Dropdowns (notifications, account) ease in from their top-right corner when opened. Closing is instant. */
  details[open] > .menu { transform-origin: top right; animation: menu-in 140ms cubic-bezier(.23, 1, .32, 1); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   Forms and dialog (refinement layer 2).
   The register wizard, the discount-code field and the app edit fields (.fi-in) get the same hover, focus glow,
   disabled and placeholder states the log-in, sign-up and support forms (.pub-form) already have. Scoped to those
   four families; the base input rule and every other control are untouched. Nothing here animates an error or a message.
   --------------------------------------------------------------------------- */
/* Log in: the "Forgot your password?" link sat directly under the button (a negative top margin meant for hints under a field). */
.pub-form .btn + .hint { margin: 1rem 0 0; text-align: center; }
.rp-field input:not([type=checkbox]):not([type=radio]):not(:focus):not([aria-invalid="true"]):hover, .rp-field select:not(:focus):not([aria-invalid="true"]):hover,
.rp-code-form input[name="code"]:not(:focus):hover, .fi-in input:not(:focus):hover, .fi-in select:not(:focus):hover { border-color: var(--color-text-muted); }
.rp-field input:not([type=checkbox]):not([type=radio]):focus, .rp-field select:focus, .rp-code-form input[name="code"]:focus, .fi-in input:focus, .fi-in select:focus { box-shadow: 0 0 0 4px var(--color-primary-100); }
/* On the older .pub-form fields, hover used to win over the focus and error borders. */
.pub-form input:not([type=hidden]):focus:hover, .pub-form textarea:focus:hover { border-color: var(--color-focus); }
.pub-form input[aria-invalid="true"]:not([type=hidden]):hover, .pub-form textarea[aria-invalid="true"]:hover { border-color: var(--color-danger); }
.pub-form input:disabled, .pub-form textarea:disabled, .rp-field input:disabled, .rp-field select:disabled, .rp-code-form input:disabled, .fi-in input:disabled, .fi-in select:disabled {
  background: var(--color-bg-soft); color: var(--color-text-muted); cursor: not-allowed; }
.pub-form ::placeholder, .rp-field ::placeholder, .rp-code-form ::placeholder, .fi-in ::placeholder { color: var(--color-text-muted); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rp-field input:not([type=checkbox]):not([type=radio]), .rp-field select, .rp-code-form input[name="code"], .fi-in input, .fi-in select { transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
  /* Delete-contract dialog: it fades and settles in, and its backdrop fades in. Closing is instant. */
  .cp-dialog[open] { animation: dialog-in 170ms cubic-bezier(.23, 1, .32, 1); }
  .cp-dialog[open]::backdrop { animation: dialog-fade 170ms ease-out; }
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }

/* Final polish. Tables: a row also highlights while a link inside it has keyboard focus (same colour as hover).
   Phones: with min-height: 100vh and two auto rows, a short page stretched the navy top bar to fill the screen;
   the extra height now goes to the content row. */
table.contracts tbody tr:focus-within { background: var(--color-bg-soft); }
@media (max-width: 900px) { .app { grid-template-rows: auto 1fr; } }
/* Settings: the reminder-language select was the one unstyled native control; it now matches the other fields (.fi-in). Scoped by id. */
#reminder-language { min-width: 14rem; max-width: 100%; min-height: var(--size-control-md); padding: .5rem .6rem; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: var(--text-base); }
#reminder-language:hover:not(:focus) { border-color: var(--color-text-muted); }
#reminder-language:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); box-shadow: 0 0 0 4px var(--color-primary-100); }
@media (max-width: 640px) { #reminder-language { font-size: var(--text-lg); } }
@media (prefers-reduced-motion: no-preference) { #reminder-language { transition: border-color 150ms ease-out, box-shadow 150ms ease-out; } }

/* ===========================================================================
   Midnight Blue: the approved redesign (refinement layer, last in the file on purpose).
   Tokens above carry the palette; this layer carries the look: ruled page heads, one amber "notice line", hairline surfaces, quiet depth,
   and motion that has a reason. Every animation is inside prefers-reduced-motion: no-preference. No hard-coded colours (brand-tokens.json).
   =========================================================================== */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss03"; }
h1, h2 { letter-spacing: -.03em; }
.mono { font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }

/* Buttons: a soft top light and a blue glow; hover and press feedback */
.btn.primary { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%), var(--color-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(116, 168, 255, .32), 0 6px 18px -8px rgba(52, 121, 237, .8); }
.btn.primary:hover:not(.is-disabled):not([disabled]) { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%), var(--color-primary-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(150, 190, 255, .5), 0 10px 26px -8px rgba(52, 121, 237, .9); }
.btn.primary:active:not(.is-disabled) { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 62%), var(--color-primary-pressed); }
.btn.ghost { background: rgba(20, 34, 56, .5); border-color: var(--color-border-strong); }
.btn.ghost:hover { background: var(--color-navy-2); border-color: var(--color-border-input); }
.btn.danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -10px var(--color-danger); }

/* ---------- Public website ---------- */
body.pub { background: var(--color-bg); }
.pub-head { background: color-mix(in srgb, var(--color-bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); }
.pub-logo, .brand-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(116, 168, 255, .35); }
.pub-nav a, .pub-nav a.is-active { position: relative; background: none; transition: color var(--dur-fast) var(--ease-out); }
.pub-nav a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 2px; height: 1px; background: var(--color-link); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.pub-nav a:hover, .pub-nav a:focus-visible, .pub-nav a.is-active { background: none; color: var(--color-text); }
.pub-nav a:hover::after, .pub-nav a:focus-visible::after, .pub-nav a.is-active::after { transform: scaleX(1); }
.pub .pub-login:hover, .pub .pub-login.is-active { background: rgba(140, 168, 214, .08); }
.pub-menu-panel { background: var(--color-surface); box-shadow: var(--shadow-lg); transform-origin: top right; }

/* Eyebrows: a short rule and mono lettering instead of a pill */
.pub-eyebrow, .pub-hero .pub-eyebrow, .pub-page-head .pub-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-link); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.pub-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }

/* Ruled page heads: hairline columns like a contract, one soft light, no blobs */
.pub-hero, .pub-page-head, .pub-price-head { background: radial-gradient(900px 420px at 8% -20%, rgba(52, 121, 237, .16), transparent 62%), linear-gradient(180deg, var(--color-navy), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.pub-hero::before, .pub-page-head::before { inset: 0; background: repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px calc(100% / 12)); -webkit-mask-image: linear-gradient(180deg, black, transparent 85%); mask-image: linear-gradient(180deg, black, transparent 85%); opacity: .55; animation: none; will-change: auto; transform: none; }
.pub-hero::after, .pub-page-head::after { display: none; }
.pub-hero h1 { font-size: clamp(2.5rem, 4.9vw, 4.25rem); letter-spacing: -.045em; line-height: 1.03; }
.pub-page-head h1 { letter-spacing: -.04em; line-height: 1.05; }
.pub-price-head { padding-top: 3.25rem; }
.pub-page-head a { color: var(--color-link); }
.pub-page-head .pub-support-contact { padding: .9rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: rgba(20, 34, 56, .5); }
.pub-page-head .pub-support-contact a { color: var(--color-text); }

/* Sections and surfaces: flat, hairline, quietly lit */
.pub-soft, .pub-hero + .pub-sec, #product { background: linear-gradient(180deg, var(--color-navy), var(--color-bg)); }
.pub-sec-head h2 { letter-spacing: -.04em; line-height: 1.07; }
.pub-card, .pub-flow li, .pub-plan, .pub-risks li { background: rgba(18, 30, 52, .72); box-shadow: none; }
.pub-card { transition: border-color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .pub-card:hover { border-color: var(--color-border-strong); } }
.pub-ic { background: var(--color-primary-50); box-shadow: inset 0 0 0 1px rgba(116, 168, 255, .2); color: var(--color-link); }
.pub-ic.warn { background: var(--color-warning-bg); box-shadow: inset 0 0 0 1px var(--color-warning-border); color: var(--color-warning); }
.pub-principle { position: relative; border: 1px solid var(--color-border-strong); background: rgba(18, 30, 52, .72); }
.pub-principle::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-warning-accent); box-shadow: 0 0 16px color-mix(in srgb, var(--color-warning-accent) 45%, transparent); }
.pub-note { border: 1px solid var(--color-border); background: rgba(6, 13, 26, .4); }

/* Features and security: editorial rows instead of boxed cards */
.pub-feature { padding: 2rem 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: none; box-shadow: none; }
.pub-feature::before { display: none; }
.pub-features > .pub-feature:nth-child(even) { background: none; }
.pub-sec-topic::before, .pub-plan::before { background: linear-gradient(90deg, var(--color-primary), var(--color-sidebar-indicator)); height: 3px; }

/* Pricing: the recommended plan is quietly lit */
.pub-plan { box-shadow: none; }
.pub-plan.is-recommended { border-color: color-mix(in srgb, var(--color-link) 55%, transparent); background: linear-gradient(180deg, rgba(27, 45, 74, .85), rgba(14, 24, 43, .8)); box-shadow: 0 0 0 1px rgba(116, 168, 255, .18), 0 40px 80px -50px rgba(52, 121, 237, .6); }
.pub-table tbody tr:nth-child(even) { background: rgba(140, 168, 214, .04); }

/* FAQ: a ruled list with a plus that turns */
.pub-faq details { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: none; }
.pub-faq summary { padding: 1.2rem .25rem; font-size: var(--text-xl); letter-spacing: -.02em; transition: color var(--dur-fast) var(--ease-out); }
.pub-faq summary:hover { color: var(--color-link); }
.pub-faq details p { padding: 0 3rem 1.3rem .25rem; }
@media (prefers-reduced-motion: no-preference) { .pub-faq details[open] p { animation: mb-fade-up 320ms var(--ease-out); } }
@keyframes mb-fade-up { from { opacity: 0; transform: translateY(8px); } }

/* Closing call to action and footer */
.pub-final { background: radial-gradient(800px 380px at 50% 125%, rgba(52, 121, 237, .26), transparent 70%), var(--color-navy); border-top: 1px solid var(--color-border); }
.pub-foot { background: var(--color-navy); border-top: 1px solid var(--color-border); }
.pub-foot nav a { transition: color var(--dur-fast) var(--ease-out); }

/* Authentication: a split with the notice line on the left, a lit card on the right */
.pub-auth { display: grid; grid-template-columns: minmax(0, 1fr); background: radial-gradient(900px 420px at 10% -10%, rgba(52, 121, 237, .14), transparent 62%), var(--color-bg); }
.pub-auth-card { box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(116, 168, 255, .2); background: linear-gradient(180deg, var(--color-surface), var(--color-bg-soft)); border-color: var(--color-border-strong); }
.pub-auth-intro { color: var(--color-text-2); }
.pub-auth-aside { display: none; }
@media (min-width: 981px) {
  .pub-auth:has(.pub-auth-aside) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-inline: max(24px, calc((100vw - 1160px) / 2)); }
  .pub-auth:has(.pub-auth-aside) .pub-auth-aside { display: grid; align-content: center; gap: 1rem; padding: 2rem 0; }
  .pub-auth:has(.pub-auth-aside) .pub-auth-main { width: 100%; max-width: 480px; justify-self: center; }
}
.pub-auth-aside .aa-rl { position: relative; height: 90px; margin-bottom: 1rem; }
.aa-line { position: absolute; left: 0; right: 0; top: 45px; height: 2px; background: linear-gradient(90deg, var(--color-link), var(--color-primary) 45%, var(--color-border-strong) 46%); transform-origin: left; }
.aa-pin { position: absolute; top: 39px; width: 14px; height: 14px; border: 2px solid var(--color-link); border-radius: 50%; background: var(--color-bg); }
.aa-pin.p1 { left: 0; background: var(--color-link); } .aa-pin.p2 { left: 28%; } .aa-pin.p3 { left: calc(100% - 14px); border-color: var(--color-text-2); }
.aa-notice { position: absolute; left: 46%; top: 4px; width: 2px; height: 82px; background: linear-gradient(180deg, transparent, var(--color-warning-accent) 20%, var(--color-warning-accent) 80%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--color-warning-accent) 50%, transparent); transform-origin: top; }
.aa-k { margin: 0; color: var(--color-link); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.aa-t { max-width: 14em; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
@keyframes mb-grow-x { from { transform: scaleX(0); } } @keyframes mb-draw-y { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: no-preference) { .aa-line { animation: mb-grow-x 1100ms var(--ease-in-out) 200ms backwards; } .aa-notice { animation: mb-draw-y 700ms var(--ease-in-out) 900ms backwards; } .aa-pin { animation: mb-fade-up 500ms var(--ease-out) 500ms backwards; } }

/* Legal documents: calm and readable, no animation */
.pub-legal-body { font-size: 1.0625rem; }
.pub-legal-toc a { transition: color var(--dur-fast) var(--ease-out); }
.pub-todo { padding: .05rem .4rem; border-radius: var(--radius-xs); background: var(--color-warning-bg); box-shadow: inset 0 0 0 1px var(--color-warning-border); color: var(--color-warning); }

/* ---------- Application ---------- */
.sidebar { background: linear-gradient(180deg, var(--color-navy-2) -40%, var(--color-navy) 38%); border-right: 1px solid var(--color-sidebar-line); }
.sb-item { position: relative; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sb-item.active { background: linear-gradient(90deg, rgba(52, 121, 237, .24), rgba(52, 121, 237, .08)); box-shadow: inset 0 0 0 1px rgba(116, 168, 255, .2), inset 3px 0 0 var(--color-sidebar-indicator); }
.panel, .stat-card, .kpi, .card, .viewer { background: linear-gradient(180deg, rgba(20, 34, 56, .72), rgba(14, 24, 43, .72)); }
.panel.ac { border-color: rgba(116, 168, 255, .22); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 80px -50px rgba(52, 121, 237, .35); }
.stat-card:hover, .stat-card:focus-visible { border-color: rgba(116, 168, 255, .4); }
.dash-head h1 { letter-spacing: -.035em; }
.ac-item { background: rgba(6, 13, 26, .42); }
.ac-item:hover, .ac-item:focus-within { background: rgba(20, 34, 56, .62); }
.tl-ev { background: rgba(6, 13, 26, .42); }
.menu, .cp-dialog { background: var(--color-surface); border-color: var(--color-border-strong); }
.verify-banner { box-shadow: none; }

/* The dashboard arrives in sequence: header, status cards, then the panels. Pages without those blocks are unaffected. */
@keyframes mb-panel-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) {
  .app-main > .dash-head, .app-main > .status-row > *, .app-main > .dash-grid > *, .app-main > .tl-panel, .app-main > .panel, .app-main > .kpis > *, .app-main > .card { animation: mb-panel-in 560ms var(--ease-out) backwards; }
  .app-main > .status-row > :nth-child(1) { animation-delay: 60ms; } .app-main > .status-row > :nth-child(2) { animation-delay: 130ms; } .app-main > .status-row > :nth-child(3) { animation-delay: 200ms; } .app-main > .status-row > :nth-child(4) { animation-delay: 270ms; }
  .app-main > .dash-grid > :nth-child(1) { animation-delay: 220ms; } .app-main > .dash-grid > :nth-child(2) { animation-delay: 300ms; }
  .app-main > .panel, .app-main > .card { animation-delay: 140ms; }
  .tl-month { animation: mb-panel-in 520ms var(--ease-out) backwards; } .tl-month:nth-child(2) { animation-delay: 360ms; } .tl-month:nth-child(3) { animation-delay: 420ms; } .tl-month:nth-child(4) { animation-delay: 480ms; } .tl-month:nth-child(5) { animation-delay: 540ms; } .tl-month:nth-child(6) { animation-delay: 600ms; } .tl-month:nth-child(7) { animation-delay: 660ms; }
  progress.meter { animation: mb-grow-x 1000ms var(--ease-in-out) 400ms backwards; transform-origin: left; }
}
/* The security band is calm: no glow, a quiet lift from the page colour */
.pub-sec[aria-labelledby="security-title"] { background: linear-gradient(180deg, var(--color-navy), var(--color-bg)); }
.pub-sec[aria-labelledby="security-title"]::before, .pub-sec[aria-labelledby="security-title"]::after { display: none; }
@media (prefers-reduced-motion: no-preference) { .pub-menu[open] .pub-menu-panel { animation: mb-fade-up 200ms var(--ease-out); } }
/* Launch state: the "sign-ups are not open yet" notice above the plans */
.pub-launch-note { display: flex; gap: .7rem; margin: 0 0 1.75rem; padding: .9rem 1.1rem; border: 1px solid var(--color-warning-border); border-left: var(--border-accent) solid var(--color-warning-accent); border-radius: var(--radius-lg); background: var(--color-warning-bg-subtle); color: var(--color-text-2); }
.pub-launch-note strong { color: var(--color-text); }
.pub-launch-note a { color: var(--color-link); }