/* Homepage stylesheet bundle. The server inlines these same-origin imports (static-assets.ts), so the homepage waits
   on one hashed, immutable stylesheet instead of seven. The order is the cascade order: shared library, site chrome,
   page composition, the scripted example run, then the mascot's seasonal decoration. */
/* Sybqa Proof v3 (QC tag). The only source for visual values shared by product surfaces. */
:root {
  color-scheme: light;
  --color-canvas: #f3efe6;
  --color-surface: #fffdf8;
  --color-ink: #151515;
  --color-muted: #57534b;
  --color-border: #d9d2c3;
  --color-border-strong: #857e6e;
  --color-action: #b5390b;
  --color-action-hover: #8a2a06;
  --color-on-action: #ffffff;
  --color-pencil: #ff4d1a;
  --color-highlight: #ffe14d;
  --color-stamp: #a11812;
  --color-signal: #ff4d1a;
  --color-on-signal: #151515;
  --color-tag: #ead39b;
  --color-tag-edge: #c9ae6c;
  --color-success: #1d6b3a;
  --color-success-surface: #e9f4ec;
  --color-success-border: #b9d6c2;
  --color-warning: #7f5300;
  --color-warning-surface: #fdf1d8;
  --color-danger: #b3261e;
  --color-danger-surface: #fbe9e7;
  --color-review: #5236b8;
  --color-review-surface: #efebfb;
  --color-field: #fffdf8;
  --color-code: #ebe5d8;
  --color-placeholder: #6b665c;
  --color-header: #f3efe6;
  --color-media: #151515;
  --color-mark-reverse: #ff4d1a;
  --color-night: #151515;
  --color-night-raised: #232220;
  --color-night-line: #3b3934;
  --color-on-night: #f3efe6;
  --color-on-night-muted: #b8b1a3;
  --color-action-reverse: #ff7a4d;
  --color-backdrop: #12121266;
  --color-sheet-edge: #e6dfd0;

  --font-body: Outfit, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-wordmark: var(--font-body);
  --font-wordmark-editorial: var(--font-body);
  --font-note: var(--font-body);
  --font-code: "Geist Mono", "Geist Mono Fallback", "Cascadia Code", Consolas, monospace;
  --font-poster: var(--font-body);
  --stretch-display: normal;
  --text-caption: 0.6875rem;
  --text-small: 0.8125rem;
  --text-body: 0.9375rem;
  --text-reading: 1.0625rem;
  --text-control: 1rem;
  --text-section: 1.1875rem;
  --text-note: 1.375rem;
  --text-title: clamp(2rem, 3.7vw, 3.75rem);
  --leading-body: 1.55;
  --leading-note: 1.45;
  --weight-medium: 500;
  --weight-label: 600;
  --weight-heading: 650;
  --weight-display: 700;
  --tracking-display: -.025em;

  --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-20: 80px;
  --radius-control: 6px;
  --radius-button: 8px;
  --radius-panel: 8px;
  --radius-soft: 10px;
  --radius-sheet: 4px;
  --border-width: 1px;
  --rule-width: 2px;
  --control-height: 44px;
  --control-height-primary: 48px;
  --account-dialog-max-width: 72rem;
  --focus-width: 3px;
  --focus-offset: 3px;
  --motion-fast: 160ms;
  --motion-normal: 200ms;
  --ease-standard: ease;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --opacity-disabled: .55;
  /* Proof v3 has no hard or soft drop shadows. These names stay as aliases of none so older rules keep working;
     frame a surface with an ink border and .ds-crop crop marks instead. */
  --shadow-tab: none;
  --shadow-note: none;
  --shadow-dialog: none;
  --shadow-sheet: none;
  --bar-h: 64px;
  --ease-glide: cubic-bezier(.2, .8, .2, 1);
  --ease-stamp: cubic-bezier(.3, 1.4, .5, 1);
  --cursor-glide: 420ms;
  --tape-height: 28px;
  --mat-grid: 24px;
  --radius-tag: 3px 8px 8px 3px;
  --stage-ratio: 1.6;
  --eyelet-size: 14px;
  --z-sticky: 10;
  --z-overlay: 20;
  --z-tour: 30;
  --z-consent: 40;
  --content-width: 1360px;
  --reading-width: 70ch;

  /* Specimen palette: the made-up "Fernly" customer site shown in the homepage example run. It is a stand-in for
     somebody else's site (purple gradient, glass card, pale button). Never use it for Sybqa UI; only hero-stage.css
     may reference --specimen-* (scripts/check-design-system.ts). The pill and button colors stay opaque so measured
     contrast reads them: white on pill 7.1:1, button text on button 1.5:1. */
  --specimen-sky-a: #6d28d9; --specimen-sky-b: #4338ca; --specimen-sky-c: #0e7490;
  --specimen-glow-a: #a78bfa; --specimen-glow-b: #22d3ee;
  --specimen-text: #ffffff; --specimen-muted: #ffffffd1;
  --specimen-glass: #ffffff1f; --specimen-glass-edge: #ffffff40; --specimen-field: #ffffff26;
  --specimen-pill: #6d28d9; --specimen-cta: #c4b5fd; --specimen-cta-text: #e0e7ff;
  --specimen-error: #fecdd3; --specimen-error-edge: #fb7185; --specimen-toast: #0f172acc;
  --font-specimen: "Segoe UI", system-ui, sans-serif;

  /* Compatibility aliases for existing page layouts. New code uses semantic names. */
  --paper: var(--color-canvas); --sheet: var(--color-surface);
  --ink: var(--color-ink); --muted: var(--color-muted);
  --line: var(--color-border); --line-strong: var(--color-border-strong);
  --accent: var(--color-action); --accent-hover: var(--color-action-hover);
  --lavender: var(--color-highlight); --warning: var(--color-warning);
  --danger: var(--color-danger); --green: var(--color-success);
  --sans: var(--font-body); --hand: var(--font-note); --mono: var(--font-code);
}

/* Release Notes: warm Proof palette with shared brand typography, 2026-10-21.
   Apply to a surface root; compatibility aliases must resolve in this scope too. */
/* portable:omit-start: no report uses these */
.theme-release-notes {
  --color-canvas: #f3efe6;
  --color-surface: #fffdf8;
  --color-ink: #151515;
  --color-muted: #57534b;
  --color-border: #d9d2c3;
  --color-border-strong: #857e6e;
  --color-action: #b5390b;
  --color-action-hover: #8a2a06;
  --color-on-action: #ffffff;
  --color-signal: #ff4d1a;
  --color-on-signal: #151515;
  --color-pencil: #ff4d1a;
  --color-highlight: #ffe14d;
  --color-tag: #ead39b;
  --color-tag-edge: #c9ae6c;
  --color-field: #fffdf8;
  --color-code: #ebe5d8;
  --color-placeholder: #6b665c;
  --color-header: #f3efe6;
  --color-night: #151515;
  --color-night-raised: #232220;
  --color-night-line: #3b3934;
  --color-on-night: #f3efe6;
  --color-on-night-muted: #b8b1a3;
  --color-action-reverse: #ff7a4d;
  --color-mark-reverse: #ff4d1a;
  --color-frame-signal: #ff4d1a;
  --font-editorial: var(--font-body);
  --weight-editorial: 650;
  --font-wordmark: var(--font-body);
  --paper: var(--color-canvas); --sheet: var(--color-surface);
  --ink: var(--color-ink); --muted: var(--color-muted);
  --line: var(--color-border); --line-strong: var(--color-border-strong);
  --accent: var(--color-action); --accent-hover: var(--color-action-hover);
  --lavender: var(--color-highlight);
}
/* portable:omit-end */

/* Cosmetic seasons never modify evidence, warning, error, or action roles. */
html[data-season="halloween"], html[data-season="halloween"] .theme-release-notes { --color-canvas: #f5eee3; --color-surface: #fffbf4; --color-tag: #ead6b2; --season-decoration: #5236b8; }
html[data-season="thanksgiving"], html[data-season="thanksgiving"] .theme-release-notes { --color-canvas: #f5f0e1; --color-surface: #fffdf5; --color-tag: #e3d6ad; --season-decoration: #7f5300; }
html[data-season="christmas"], html[data-season="christmas"] .theme-release-notes { --color-canvas: #edf3ed; --color-surface: #fbfff9; --color-tag: #d6e5d2; --season-decoration: #1d6b3a; }

/* Public pages package (2026-11-04): marketing display scale. The hero h1 stays at least 1.3x a section h2 at
   every width from 320px (40px over 30px on phones, 84px over 64px on wide screens), so phones keep a hierarchy. */
:root {
  --text-display-1: clamp(2.5rem, 1.75rem + 3.5vw, 5.25rem);
  --text-display-2: clamp(1.875rem, 1.2rem + 2.8vw, 4rem);
}

/* Shared native controls. Existing class names are supported component aliases. */
@font-face{font-family:Outfit;src:url('/assets/outfit.woff2?v=d7340c446921') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/assets/geist-mono.woff2?v=684ad5b531f8') format('woff2');font-weight:100 900;font-display:swap}
/* Monospace fallback retains the existing measured technical-text metrics. */
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New"),local("CourierNewPSMT");font-weight:100 900;size-adjust:100%;ascent-override:100.5%;descent-override:29.5%;line-gap-override:0%}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--color-canvas);color:var(--ink);font:var(--text-body)/var(--leading-body) var(--font-body);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
input,textarea,select{font-size:var(--text-control)}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;outline-offset:var(--focus-offset)}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed;opacity:var(--opacity-disabled)}
button,a{touch-action:manipulation}
:focus-visible{outline:var(--focus-width) solid var(--accent)}
/* Headings receive focus only from script (view changes, tours) so screen readers start there; they are not controls, so no ring. */
:is(h1,h2,h3)[tabindex="-1"]:focus{outline:none}
a{color:var(--accent);text-underline-offset:.18em}
h1,h2,h3,h4,p{margin-top:0}
h1,h2{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:.98}
input,textarea,select{width:100%;min-width:0;min-height:var(--control-height);padding:10px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-control);color:var(--ink);background:var(--color-field)}
input::placeholder,textarea::placeholder{color:var(--color-placeholder);opacity:1}
textarea{resize:vertical}
label{display:block;font-weight:var(--weight-label);margin-bottom:7px}
/* Notes share the brand family. .handwritten is retained as a compatibility alias. */
/* portable:omit-start: no report uses these */
.handwritten,.ds-note{font-family:var(--font-note);font-style:normal;font-weight:400;line-height:var(--leading-note);letter-spacing:-.01em}
/* portable:omit-end */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* portable:omit-start: no report uses these */
.skip-link{position:fixed;top:8px;left:-9999px;z-index:20;padding:12px;background:var(--sheet)}
.skip-link:focus{left:8px}
.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.icon.small{width:14px;height:14px}
/* portable:omit-end */
/* Approved custom wordmark. Native images preserve its exact lettering and accessible alt text.
   Portable reports keep their real-text brand without requesting an external image. */
.brand{display:inline-flex;align-items:center;flex-shrink:0;min-height:var(--control-height);color:var(--color-ink);font:700 1.75rem/1 var(--font-wordmark);letter-spacing:-.04em;text-decoration:none;text-transform:lowercase}
.brand:hover{color:var(--color-ink)}
.brand-wordmark{display:block;width:3.7em;height:auto;aspect-ratio:2079/756;flex-shrink:0}
.brand-qa{color:var(--color-action)}
/* portable:omit-start: no report uses these */
.nav-tab{position:relative;background:none;border:0;min-width:0;min-height:var(--control-height);padding:8px 14px;font:var(--weight-label) var(--text-body)/1 var(--font-body);color:var(--color-muted)}
.nav-tab:hover{color:var(--color-ink)}
.nav-tab.active{color:var(--color-ink)}
.nav-tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:var(--rule-width);background:var(--color-action)}
/* portable:omit-end */
.secondary-button,.context-button,.viewport-switch button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-height);padding:9px 18px;border:1.5px solid var(--color-ink);border-radius:var(--radius-button);background:var(--color-surface);color:var(--ink);font-weight:var(--weight-label);text-decoration:none;transition:background-color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)}
:is(.secondary-button,.icon-button,.context-button):hover,.viewport-switch button:hover{background:var(--color-canvas)}
@media (prefers-reduced-motion:no-preference){:is(.secondary-button,.icon-button,.context-button):active:not(:disabled,:focus-visible),.viewport-switch button:active:not(:disabled,:focus-visible){transform:scale(.97)}}
.primary-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--control-height);padding:8px 26px 8px 44px;border:2px solid var(--color-ink);border-radius:4px var(--radius-button) var(--radius-button) 4px;color:var(--color-on-signal);background:var(--color-signal);font-weight:700;text-decoration:none;transform-origin:22px 50%;transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-standard)}
.primary-button::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid var(--color-ink);border-radius:50%;background:var(--color-canvas)}
/* portable:omit-start: no report uses these */
.primary-button .icon{filter:none}
/* portable:omit-end */
/* The tag swings from its eyelet only under a real pointer; a tap must not leave it tilted. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.primary-button:hover:not(:disabled,:focus-visible){transform:rotate(-2.5deg)}}
@media (prefers-reduced-motion:no-preference){.primary-button:active:not(:disabled,:focus-visible){transform:rotate(0) translateY(1px) scale(.98)}}
.text-button{padding:10px 4px;background:none;border:0;min-width:var(--control-height);min-height:var(--control-height);color:var(--color-ink);font-family:var(--font-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.text-button:hover{color:var(--color-action)}
.summary-label,.eyebrow{font:var(--weight-label) var(--text-caption)/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* portable:omit-start: no report uses these */
.summary-value{margin-top:7px;font-size:var(--text-small);overflow-wrap:anywhere}
.card{min-width:0;padding:24px 0}
.card-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:16px}
.card h3,.activity-panel h3{font-size:var(--text-section);margin-bottom:16px}
.card-heading h3{margin:0}
.card-count,.read-only-tag{font:var(--text-caption)/1.5 var(--mono);color:var(--accent)}
/* portable:omit-end */
.field-help{font-size:var(--text-small);color:var(--muted);margin:7px 0 24px}
/* portable:omit-start: no report uses these */
.optional{font-weight:400;font-size:var(--text-small);color:var(--muted);margin-left:8px}
.run-check-status{color:var(--green)}
.run-check-status.FAIL{color:var(--danger)}
.run-check-status.BLOCKED{color:var(--color-warning)}
.run-check-status.NEEDS_REVIEW{color:var(--color-review)}
.app-error{color:var(--danger);background:var(--color-danger-surface);border-left:3px solid var(--danger);padding:14px 18px;margin:0 0 20px;overflow-wrap:anywhere}
/* portable:omit-end */
dialog{--crop-inset:6px;width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:var(--space-6);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-sheet);color:var(--ink);background:var(--color-surface)}
dialog::backdrop{background:var(--color-backdrop)}
/* portable:omit-start: no report uses these */
.dialog-heading,.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:16px}
.dialog-heading h2,.dialog-head h2{font-size:2rem;margin-bottom:25px}
.dialog-heading .eyebrow,.dialog-head .eyebrow{margin:0 0 8px}
.icon-button{padding:10px;min-width:var(--control-height)}
.dialog-footer{display:flex;flex-wrap:wrap;justify-content:end;padding-top:8px}
/* portable:omit-end */
@media(max-width:600px){dialog{padding:var(--space-4);max-height:calc(100dvh - var(--space-6))}}
/* A dialog with a .dialog-body scroller keeps its crop marks fixed while the body scrolls. */
/* portable:omit-start: no report uses these */
dialog[open]:has(> .dialog-body){display:flex;flex-direction:column;overflow:visible}
dialog:has(> .dialog-body) > :is(.dialog-head,.dialog-heading,.dialog-footer){flex-shrink:0}
.dialog-body{overflow:auto;min-height:0}
.confidence { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-review); border-radius: var(--radius-soft); color: var(--color-review); background: var(--color-review-surface); font-size: var(--text-small); line-height: 1.5; overflow-wrap: anywhere; }
.confidence summary { cursor: pointer; font-weight: var(--weight-label); min-height: var(--control-height); padding-block: var(--space-2); }
.confidence summary:focus-visible { outline: var(--focus-width) solid var(--color-action); outline-offset: var(--focus-offset); }
.confidence p { margin: 8px 0 0; }
/* portable:omit-end */


/* Shared states and composed patterns; native elements retain their semantics. */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
input:disabled, textarea:disabled, select:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--color-canvas); }
/* portable:omit-start: no report uses these */
.ds-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); width: 100%; }
/* portable:omit-end */
.primary-button, .secondary-button, .ds-field input { box-shadow: none; }
/* portable:omit-start: no report uses these */
.ds-field label { margin: 0; }
.ds-field-help { color: var(--color-muted); font-size: var(--text-small); margin: 0; }
.ds-field-error { color: var(--color-danger); font-size: var(--text-small); margin: 0; }
/* portable:omit-end */
.ds-status, .badge, .tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3); border: 1.5px solid currentColor; border-radius: var(--radius-button); font: 700 var(--text-caption)/var(--leading-body) var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); background: var(--color-surface); }
.ds-status[data-tone="success"], .badge.PASS, .badge.pass, .tag.recheck_passed { color: var(--color-success); background: var(--color-success-surface); }
.ds-status[data-tone="danger"], .badge.FAIL, .badge.fail, .tag.defect { color: var(--color-danger); background: var(--color-danger-surface); }
.ds-status[data-tone="warning"], .badge.BLOCKED, .badge.review, .tag.blocked { color: var(--color-warning); background: var(--color-warning-surface); }
.ds-status[data-tone="review"], .badge.NEEDS_REVIEW, .tag.review { color: var(--color-review); background: var(--color-review-surface); }
/* portable:omit-start: no report uses these */
.run-check-status.NOT_RUN { color: var(--color-muted); }
/* portable:omit-end */
.ds-disclosure { padding: var(--space-4) 0; border-block: var(--border-width) solid var(--color-border); }
.ds-disclosure + .ds-disclosure { border-top: 0; }
.ds-disclosure summary { cursor: pointer; min-height: var(--control-height); padding-block: var(--space-2); font-weight: var(--weight-label); }
.ds-disclosure p { margin: var(--space-2) 0 0; color: var(--color-muted); }
/* Marketing heading: the shared brand family with a softer display weight. */
/* portable:omit-start: no report uses these */
.ds-editorial-heading { font-family: var(--font-editorial, var(--font-note)); font-weight: var(--weight-editorial, 650); font-stretch: normal; line-height: 1.02; letter-spacing: -.035em; }
/* Numbered question list: 01, 02… before each summary and a plus that turns into a close mark when open. */
.ds-disclosure-list--numbered { counter-reset: ds-disclosure; }
.ds-disclosure-list--numbered > .ds-disclosure { counter-increment: ds-disclosure; }
.ds-disclosure-list--numbered > .ds-disclosure > summary { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); list-style: none; }
.ds-disclosure-list--numbered > .ds-disclosure > summary::-webkit-details-marker { display: none; }
.ds-disclosure-list--numbered > .ds-disclosure > summary::before { content: counter(ds-disclosure, decimal-leading-zero); color: var(--color-muted); font: var(--text-small)/1 var(--font-code); }
.ds-disclosure-list--numbered > .ds-disclosure > summary::after { content: "+"; width: 1.5rem; color: var(--color-ink); font-size: 1.375rem; font-weight: 400; line-height: 1; text-align: center; }
.ds-disclosure-list--numbered > .ds-disclosure[open] > summary::after { rotate: 45deg; }
.ds-disclosure-list--numbered > .ds-disclosure > :not(summary) { padding-left: calc(2.75rem + var(--space-2)); padding-right: var(--space-8); }
@media (prefers-reduced-motion: no-preference) { .ds-disclosure-list--numbered > .ds-disclosure > summary::after { transition: rotate var(--motion-fast) var(--ease-out); } }
/* portable:omit-end */
.ds-table-region { overflow-x: auto; max-width: 100%; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.ds-table--wide { min-width: 768px; }
.ds-table :is(th, td) { text-align: left; padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); overflow-wrap: anywhere; }
.ds-table--wide :is(th, td) { overflow-wrap: break-word; }
/* Only the column-header row carries the ink rule; row headers (tbody th) keep the body-row hairline. */
.ds-table th { font-weight: var(--weight-label); }
.ds-table thead th { border-bottom: var(--rule-width) solid var(--color-ink); }
/* portable:omit-start: no report uses these */
.ds-empty-message { padding: var(--space-6) 0; color: var(--color-muted); }
/* portable:omit-end */
.ds-notice { border-left: var(--focus-width) solid var(--color-action); padding: var(--space-4) var(--space-5); background: var(--color-surface); }
/* portable:omit-start: no report uses these */
.ds-paper { background: var(--color-surface); border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-sheet); padding: var(--space-6); }
.ds-marker { background: linear-gradient(transparent 58%, var(--color-highlight) 58%, var(--color-highlight) 92%, transparent 92%); color: inherit; }
.ds-rule { border: 0; border-top: var(--rule-width) solid var(--color-ink); margin: 0; }
/* portable:omit-end */
.ds-stamp { display: inline-block; padding: var(--space-1) var(--space-3); border: 3px solid var(--color-stamp); border-radius: var(--radius-control); color: var(--color-stamp); font: 800 var(--text-small)/1.15 var(--font-body); letter-spacing: .12em; text-align: center; text-transform: uppercase; transform: rotate(-10deg); }
.ds-stamp[data-tone="success"] { color: var(--color-success); border-color: var(--color-success); }
.ds-stamp[data-tone="review"] { color: var(--color-review); border-color: var(--color-review); }
.ds-stamp[data-tone="muted"] { color: var(--color-muted); border-color: var(--color-muted); }
.ds-stamp small { display: block; font: 600 .5625rem/1.3 var(--font-code); letter-spacing: .04em; }
/* Night surfaces: reverse variants for marketing bands on --color-night. */
/* portable:omit-start: no report uses these */
.brand--reverse { color: var(--color-on-night); }
.brand--reverse:hover { color: var(--color-on-night); }
.brand--reverse .brand-wordmark { background: var(--color-canvas); border-radius: var(--radius-sheet); }
/* portable:omit-end */
.secondary-button--reverse { background: transparent; border-color: var(--color-on-night); color: var(--color-on-night); }
.secondary-button--reverse:hover { background: var(--color-night-raised); }
.primary-button--signal { background: var(--color-highlight); color: var(--color-ink); }
/* portable:omit-start: no report uses these */
.primary-button--ink { background: var(--color-ink); color: var(--color-on-night); }
.primary-button--ink:hover:not(:disabled) { background: var(--color-action-hover); }
/* portable:omit-end */
.primary-button--signal:hover:not(:disabled) { background: var(--color-on-night); }
/* portable:omit-start: no report uses these */
.text-button--reverse { color: var(--color-on-night); }
.text-button--reverse:hover { color: var(--color-action-reverse); }
/* portable:omit-end */
.brand--reverse:focus-visible, .text-button--reverse:focus-visible, .secondary-button--reverse:focus-visible { outline-color: var(--color-action-reverse); }
/* portable:omit-start: no report uses these */
.poster-heading { font: var(--weight-display) clamp(1.875rem, 8.6vw, 6rem)/.92 var(--font-poster); font-stretch: var(--stretch-display); letter-spacing: -.035em; }
/* portable:omit-end */
/* Crop marks: the evidence frame from the logo, used instead of drop shadows. --crop-inset moves them
   (default 14px outside the box, leave 16px free around it). .ds-crop--inset draws them inside and does not
   set position, so it also suits fixed elements such as dialogs. */
.ds-crop { position: relative; }
/* portable:omit-start: no report uses these */
.ds-crop--inset { --crop-inset: 8px; }
/* portable:omit-end */
:is(.ds-crop, .ds-crop--inset, dialog)::after { --crop: var(--color-ink); content: ""; position: absolute; inset: var(--crop-inset, -14px); pointer-events: none;
  background:
    linear-gradient(var(--crop), var(--crop)) left top / 10px 2px, linear-gradient(var(--crop), var(--crop)) left top / 2px 10px,
    linear-gradient(var(--crop), var(--crop)) right top / 10px 2px, linear-gradient(var(--crop), var(--crop)) right top / 2px 10px,
    linear-gradient(var(--crop), var(--crop)) left bottom / 10px 2px, linear-gradient(var(--crop), var(--crop)) left bottom / 2px 10px,
    linear-gradient(var(--crop), var(--crop)) right bottom / 10px 2px, linear-gradient(var(--crop), var(--crop)) right bottom / 2px 10px;
  background-repeat: no-repeat; }
:is(.ds-crop, .ds-crop--inset, dialog)[data-tone="signal"]::after { --crop: var(--color-frame-signal, var(--color-signal)); }
@media (max-width: 480px) { .ds-crop:not(.ds-crop--inset) { --crop-inset: -8px; } }
/* portable:omit-start: no report uses these */
.ds-stack { display: grid; gap: var(--space-4); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* portable:omit-end */
button[aria-busy="true"] { cursor: progress; }
/* ---------- Proof v3 primitives: homepage motifs hoisted for every surface ---------- */
/* portable:omit-start: no report uses these */
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: var(--border-width) solid var(--color-border); }
/* portable:omit-end */
.ds-stamp[data-tone="warning"] { color: var(--color-warning); border-color: var(--color-warning); }
.ds-stamp--sm { padding: 2px var(--space-2); border-width: 2px; font-size: var(--text-caption); letter-spacing: .08em; transform: rotate(-6deg); }
/* portable:omit-start: no report uses these */
.ds-stamp--lg { padding: var(--space-2) var(--space-4); font-size: 1.125rem; transform: rotate(-8deg); }
/* portable:omit-end */
.ds-stamp--xl { padding: var(--space-2) var(--space-5); border-width: 5px; font-size: clamp(1.25rem, 3vw, 2.25rem); }
/* portable:omit-start: no report uses these */
.ds-stamp--flat { transform: none; }

/* Step tape: a tape measure. A <div class="ds-tape"> is a progress strip (--p 0..1 drives .ds-tape-fill, .ds-tape-read rides
   its edge); an <ol class="ds-tape"> is a stepped timeline of <li><button>, each li may hold its own .ds-tape-fill and a
   stamped .ds-tape-mark. Ink on signal is 5.5:1. data-slim is a decorative 14px strip. */
.ds-tape { --p: 0; position: relative; display: block; min-height: var(--tape-height); margin: 0; padding: 0; overflow: hidden; container-type: inline-size; border: var(--rule-width) solid var(--color-ink); background: var(--color-surface); list-style: none; }
.ds-tape::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--color-ink) 0 1px, transparent 1px 12px) left bottom / 100% 5px no-repeat, repeating-linear-gradient(90deg, var(--color-ink) 0 2px, transparent 2px 60px) left bottom / 100% 9px no-repeat; }
.ds-tape-fill { position: absolute; inset: 0; background: var(--color-signal); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform var(--motion-normal) var(--ease-standard); }
.ds-tape-read { position: relative; z-index: 2; display: block; width: fit-content; padding: 0 var(--space-2); font: 700 var(--text-small)/calc(var(--tape-height) - 2 * var(--rule-width) - 9px) var(--font-code); color: var(--color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; translate: max(0px, calc(var(--p, 0) * 100cqw - 100%)); }
.ds-tape[data-slim] { min-height: 14px; }
.ds-tape[hidden] { display: none; }
.ds-tape:is(ol, ul) { display: flex; min-height: var(--control-height); }
.ds-tape:is(ol, ul) > li { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.ds-tape:is(ol, ul) > li + li { border-left: var(--rule-width) solid var(--color-ink); }
.ds-tape:is(ol, ul) > li > :is(button, a) { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--control-height); padding: 0 var(--space-2); border: 0; background: none; color: var(--color-ink); font: 700 var(--text-small)/1.2 var(--font-code); text-decoration: none; white-space: nowrap; }
.ds-tape:is(ol, ul) > li[aria-current="step"], .ds-tape:is(ol, ul) > li:has(> [aria-current="step"]) { background: var(--color-highlight); }
.ds-tape-mark { position: absolute; z-index: 3; top: 3px; right: 4px; padding: 0 3px; border: 1.5px solid currentColor; border-radius: 2px; background: var(--color-surface); color: var(--color-stamp); font: 800 .5625rem/1.3 var(--font-code); text-transform: uppercase; rotate: -6deg; }
.ds-tape-mark[data-tone="success"] { color: var(--color-success); }
.ds-tape-mark[data-tone="review"] { color: var(--color-review); }
.ds-tape-mark[data-tone="muted"] { color: var(--color-muted); }
/* portable:omit-end */

/* Inspection form: a manila sheet with an eyelet and a mono form head. .ds-tag-card--form is the same sheet. */
.ds-form, .ds-tag-card { position: relative; min-width: 0; background: var(--color-tag); border: 1.5px solid var(--color-ink); color: var(--color-ink); }
.ds-form::before, .ds-tag-card::before { content: ""; position: absolute; left: var(--eyelet-x, var(--space-4)); top: var(--eyelet-y, var(--space-5)); width: var(--eyelet-d, var(--eyelet-size)); height: var(--eyelet-d, var(--eyelet-size)); border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
/* portable:omit-start: no report uses these */
.ds-form, .ds-tag-card--form { --eyelet-x: var(--space-6); --eyelet-y: var(--space-8); --eyelet-d: var(--space-5); padding: var(--space-8) var(--space-8) var(--space-6) var(--space-16); border-width: var(--rule-width); border-radius: 0; }
.ds-form-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--rule-width) solid var(--color-ink); font: var(--weight-display) var(--text-body)/1 var(--font-display); font-stretch: var(--stretch-display); text-transform: uppercase; }
.ds-form-head > :last-child { font: var(--text-small) var(--font-code); text-transform: none; }
/* portable:omit-end */

/* Tag card: a manila card on a string. data-string draws the dotted string above; --swing hangs it from its eyelet on hover;
   --split is the report layout (manila reading tag beside a paper body). */
.ds-tag-card { padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12); border-radius: var(--radius-tag); transform-origin: calc(var(--eyelet-x, var(--space-4)) + var(--eyelet-size) / 2) calc(var(--eyelet-y, var(--space-5)) + var(--eyelet-size) / 2); }
.ds-tag-card[data-string] { margin-top: var(--space-6); }
.ds-tag-card[data-string]::after { content: ""; position: absolute; left: calc(var(--eyelet-x, var(--space-4)) + var(--eyelet-size) / 2 - 1px); bottom: 100%; height: var(--space-6); border-left: 2px dotted var(--color-ink); }
.ds-tag-card h3 { margin: 0 0 var(--space-2); }
:is(.ds-tag-card, .ds-tag-card-tag) .ds-stamp { background: var(--color-surface); }
/* portable:omit-start: no report uses these */
.ds-tag-card--split { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); padding: 0; background: var(--color-surface); }
.ds-tag-card-tag { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12); background: var(--color-tag); border-right: 2px dashed var(--color-tag-edge); border-radius: var(--radius-tag); }
/* portable:omit-end */
.ds-tag-card-body { min-width: 0; padding: var(--space-5); }
/* portable:omit-start: no report uses these */
.ds-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6); }
.ds-plan-grid > .ds-tag-card { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ds-plan-grid :is(h2, h3), .ds-plan-grid p { margin: 0; }
.ds-plan-grid .ds-plan-action { margin-top: auto; align-self: start; }
.ds-tag-card-reading { font: 700 clamp(1.5rem, 3vw, 2.125rem)/1.1 var(--font-code); overflow-wrap: anywhere; }
/* portable:omit-end */
.ds-tag-rail { display: grid; gap: var(--space-8); margin: 0; padding: 0 0 0 var(--space-6); list-style: none; border-left: 2px dotted var(--color-ink); }
.ds-tag-rail > li { position: relative; }
.ds-tag-rail > li::before { content: ""; position: absolute; left: calc(-1 * var(--space-6)); top: 2.1rem; width: var(--space-6); border-top: 2px dotted var(--color-ink); }
/* Measurement pill: a reading in mono, the same look as the homepage "CLS 0.31" label. */
.ds-measure { display: inline-flex; align-items: center; padding: 1px var(--space-2); border-radius: var(--radius-sheet); background: var(--color-ink); color: var(--color-canvas); font: 500 var(--text-small)/1.5 var(--font-code); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Fold: an archive tab. <section class="ds-fold"><details><summary><span class="ds-fold-tab">..</span><span class="ds-fold-meta">..</span></summary><div class="ds-fold-body">. */
:is(.ds-fold > summary, .ds-fold > details > summary) { display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--space-2) var(--space-4); min-height: var(--control-height); padding-block: calc((var(--control-height) - 1.2 * var(--text-body)) / 2); border-bottom: var(--rule-width) solid var(--color-ink); cursor: pointer; list-style: none; }
:is(.ds-fold > summary, .ds-fold > details > summary)::-webkit-details-marker { display: none; }
:is(.ds-fold > summary, .ds-fold > details > summary)::after { content: "+"; flex: none; margin-left: var(--space-2); font: 700 var(--text-body)/1 var(--font-code); }
:is(.ds-fold[open] > summary, .ds-fold > details[open] > summary)::after { content: "\2212"; }
/* One row of tab, meta and +, aligned on the first baseline: a long tab wraps inside itself, so + stays at the end of the first line. Metas are short counts. */
.ds-fold-tab { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font: var(--weight-display) var(--text-body)/1.2 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: -.01em; }
.ds-fold-meta { flex: none; margin-left: auto; white-space: nowrap; color: var(--color-muted); font: var(--text-small)/1.3 var(--font-code); }
.ds-fold-body { padding-block: var(--space-4); }

/* Certificate parts (report cover): verdict sheet, circled number, scoreboard, hand-off band, copy status. */
.ds-cert-sheet { position: relative; padding: var(--space-8); background: var(--color-surface); border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-sheet); }
.ds-cert-eyebrow { margin: 0 0 var(--space-3); font: 600 var(--text-caption)/1.4 var(--font-code); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-cert-verdict { max-width: 16ch; margin: 0 0 var(--space-4); font: var(--weight-display) var(--text-title)/.98 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.ds-cert-meta { font: var(--text-small)/1.5 var(--font-code); color: var(--color-muted); }
.ds-cert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* The stamp keeps its own column, so a long verdict or a wide label ("Acceptance incomplete") never runs under it. */
.ds-cert-sheet:has(> .ds-stamp--xl) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); align-items: start; }
.ds-cert-sheet:has(> .ds-stamp--xl) > :not(.ds-stamp--xl) { grid-column: 1; }
/* portable:omit-start: no report uses these */
.ds-cert-sheet:has(> .ds-stamp--xl) > .ds-tape { grid-column: 1 / -1; }
/* portable:omit-end */
/* Long verdicts ("Acceptance incomplete", "Selected checks passed") wrap inside the stamp instead of squeezing the headline column. */
.ds-cert-sheet > .ds-stamp--xl { grid-column: 2; grid-row: 1 / span 3; justify-self: end; max-width: calc(8.5em + 2 * var(--space-5) + 10px); margin: var(--space-2) 0 0; white-space: normal; overflow-wrap: normal; transform-origin: 100% 0; }
/* Report summaries: the full ink-framed sheet with a decorative verdict stamp (the eyebrow status is the verdict). */
.ds-cert-sheet--summary .ds-cert-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-cert-sheet--summary .ds-cert-verdict { max-width: 20ch; font-size: clamp(2.25rem, 5vw, 4rem); }
/* Report finding: a manila tag heading with its eyelet over a white sheet. */
.ds-tag-card.ds-tag-card--report { padding: 0; background: var(--color-surface); border-radius: 0; }
.ds-tag-card-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-12); background: var(--color-tag); border-bottom: 2px dashed var(--color-tag-edge); }
.ds-tag-card--report .ds-tag-card-heading h3 { margin: var(--space-1) 0 0; font: var(--weight-display) clamp(1.125rem, 2vw, 1.5rem)/1.15 var(--font-display); font-stretch: var(--stretch-display); }
.ds-tag-card-heading > .ds-stamp { flex: none; }
/* portable:omit-start: no report uses these */
.ds-circled { position: relative; display: inline-block; padding-inline: .12em; }
.ds-circled > svg { position: absolute; left: -.2em; top: -.12em; width: calc(100% + .4em); height: calc(100% + .24em); overflow: visible; fill: none; stroke: var(--color-signal); stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.ds-circled path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* portable:omit-end */
.ds-scoreboard { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-block: var(--rule-width) solid var(--color-ink); }
.ds-scoreboard-cell { flex: 1 1 0; min-width: 0; }
.ds-scoreboard-cell + .ds-scoreboard-cell { border-left: var(--border-width) solid var(--color-ink); }
.ds-scoreboard-cell--hero { flex-grow: 2; }
.ds-scoreboard-cell > a { display: grid; align-content: start; gap: var(--space-2); min-height: var(--control-height); height: 100%; padding: var(--space-4); color: var(--color-ink); text-decoration: none; }
.ds-scoreboard-cell > a:hover { background: var(--color-highlight); }
.ds-scoreboard-num { font: 700 clamp(1.75rem, 4vw, 3rem)/1 var(--font-code); font-variant-numeric: tabular-nums; }
.ds-scoreboard-cell--hero .ds-scoreboard-num { font-size: clamp(2.5rem, 7vw, 5.5rem); }
/* portable:omit-start: no report uses these */
.ds-scoreboard-caption { color: var(--color-muted); font-size: var(--text-small); }
/* portable:omit-end */
.ds-scoreboard-dropped { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-small); }
.ds-scoreboard.ds-scoreboard--compact { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Compact cells: a display numeral over a status bar; empty cells (data-count="0") recede. */
.ds-scoreboard--compact .ds-scoreboard-cell > :is(a, div) { display: grid; justify-items: start; align-content: start; gap: var(--space-2); padding: var(--space-4); min-height: var(--control-height); height: 100%; border-top: 6px solid var(--tone, var(--color-border)); }
.ds-scoreboard--compact .ds-scoreboard-num { font: var(--weight-display) clamp(2rem, 4vw, 3rem)/1 var(--font-display); font-stretch: var(--stretch-display); }
[data-status=FAIL] { --tone: var(--color-danger); }
[data-status=BLOCKED] { --tone: var(--color-warning); }
[data-status=NEEDS_REVIEW] { --tone: var(--color-review); }
[data-status=NOT_RUN] { --tone: var(--color-muted); }
[data-status=PASS] { --tone: var(--color-success); }
[data-count="0"] { --tone: var(--color-border); color: var(--color-muted); }
[data-count="0"] > * { color: inherit; }
.ds-scoreboard--compact .ds-status { white-space: normal; }
@media (max-width: 600px) {
  .ds-scoreboard.ds-scoreboard--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-scoreboard--compact .ds-scoreboard-cell:nth-child(n + 3) { border-top: var(--border-width) solid var(--color-ink); }
  .ds-scoreboard--compact .ds-scoreboard-cell:nth-child(odd) { border-left: 0; }
  .ds-scoreboard--compact .ds-scoreboard-cell:last-child { grid-column: 1 / -1; }
}
.ds-handoff { padding: var(--space-8); background: var(--color-night); color: var(--color-on-night); border: var(--rule-width) solid var(--color-ink); }
.ds-handoff :focus-visible { outline-color: var(--color-action-reverse); }
.ds-handoff a:not([class]) { color: var(--color-action-reverse); }
.ds-copy-status { min-height: 1.5em; color: var(--color-muted); font-size: var(--text-small); }
button[data-copied="true"] { background: var(--color-success-surface); border-color: var(--color-success); }

/* Feature tour popover: a manila tag hung from its target by a dotted string; the target gets a dashed orange box.
   The tag itself never scrolls, so the string (::after, outside the box) is drawn and adds no scrollbar; when the
   tag reaches its max-height the body row shrinks (never below three lines) and scrolls instead. Both tours render progress, title, body,
   actions in that order. Three lines are 3 x --leading-body (1.55) in em, not 3lh: browsers without lh would drop the whole row template. */
.ds-tour { position: fixed; z-index: var(--z-tour); width: min(380px, calc(100vw - var(--space-6))); max-height: calc(100dvh - var(--space-6)); overflow: visible; display: grid; grid-template-rows: auto auto minmax(4.65em, 1fr) auto; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12); background: var(--color-tag); color: var(--color-ink); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); }
.ds-tour > .ds-tour-body { overflow-y: auto; overscroll-behavior: contain; }
.ds-tour::before { content: ""; position: absolute; left: var(--space-4); top: var(--space-5); width: var(--eyelet-size); height: var(--eyelet-size); border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
.ds-tour[data-placement="below"]::after { content: ""; position: absolute; left: calc(var(--space-4) + var(--eyelet-size) / 2 - 1px); bottom: 100%; height: var(--space-3); border-left: 2px dotted var(--color-ink); }
.ds-tour[data-placement="above"]::after { content: ""; position: absolute; left: calc(var(--space-4) + var(--eyelet-size) / 2 - 1px); top: 100%; height: var(--space-3); border-left: 2px dotted var(--color-ink); }
.ds-tour:focus-visible { outline: var(--focus-width) solid var(--color-action); outline-offset: 2px; }
.ds-tour-progress { margin: 0; font: var(--weight-label) var(--text-caption)/var(--leading-body) var(--font-code); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
/* Two classes, so a host's heading rule (.ds-report h2 is 0,1,1) cannot add its margins or size to the step title (R5-BR-02). */
.ds-tour .ds-tour-title { margin: 0; font-size: var(--text-section); }
.ds-tour-body { margin: 0; color: var(--color-muted); }
.ds-tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.ds-tour-actions .text-button { margin-right: auto; }
.ds-tour-target, .is-tour-target { outline: var(--focus-width) dashed var(--color-signal); outline-offset: var(--focus-offset); }
@media (max-width: 599px) { .ds-tour { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; } .ds-tour[data-placement]::after { display: none; } }

/* Paused: one data-paused attribute freezes every CSS animation inside it (the WCAG 2.2.2 pause control). */
[data-paused], [data-paused] *, [data-paused] *::before, [data-paused] *::after { animation-play-state: paused; }

/* Motion. The base state of every animated element is its FINAL state; entrances run only when motion is allowed,
   from a state class or data attribute, with explicit from and to keyframes. Transform, translate, rotate, scale and opacity only
   (the circle draw is the documented exception). */
@keyframes ds-stamp-slam-cert { from { scale: 1.35; opacity: 0; } 60% { scale: .96; opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes ds-stamp-slam { from { scale: 2.4; opacity: 0; } 60% { scale: .94; opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes ds-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* portable:omit-start: no report uses these */
  .ds-stamp.is-in { animation: ds-stamp-slam .35s var(--ease-stamp) both; }
  /* portable:omit-end */
  .ds-cert-sheet > .ds-stamp--xl { animation: ds-stamp-slam-cert .35s var(--ease-stamp) both; }
  /* portable:omit-start: no report uses these */
  .ds-circled path { animation: ds-draw .6s ease-out .5s both; }
  .ds-tag-card--swing { transition: rotate var(--motion-fast) var(--ease-out); }
  /* portable:omit-end */
}
/* portable:omit-start: no report uses these */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .ds-tag-card--swing:hover { rotate: -1.5deg; }
}
/* portable:omit-end */
@media (max-width: 760px) {
  /* portable:omit-start: no report uses these */
  .ds-tag-card--split { grid-template-columns: minmax(0, 1fr); }
  .ds-tag-card-tag { border-right: 0; border-bottom: 2px dashed var(--color-tag-edge); }
  /* portable:omit-end */
  /* The flex scoreboard wraps two to a row here. The compact grid keeps five columns and its own dividers until
     600px (above), so these rules must not reach it (2026-11-04). */
  .ds-scoreboard:not(.ds-scoreboard--compact) > .ds-scoreboard-cell { flex-basis: 50%; }
  .ds-scoreboard:not(.ds-scoreboard--compact) > .ds-scoreboard-cell--hero { flex-basis: 100%; }
  .ds-scoreboard:not(.ds-scoreboard--compact) > .ds-scoreboard-cell:nth-child(n + 3) { border-top: var(--border-width) solid var(--color-ink); }
  .ds-scoreboard:not(.ds-scoreboard--compact) > .ds-scoreboard-cell:nth-child(odd) { border-left: 0; }
  .ds-cert-sheet, .ds-cert-sheet:has(> .ds-stamp--xl) { display: block; padding: var(--space-5); }
  /* In flow the stamp turns about its top-left corner, so its right end rises by width × sin(6deg); the top margin reserves that rise. */
  .ds-cert-sheet > .ds-stamp--xl { position: static; display: inline-block; max-width: 100%; margin-top: calc(var(--space-3) + min(10.5%, 2em)); transform: rotate(-6deg); transform-origin: 0 0; }
}
/* In flow on narrow sheets the stamp scales from its left edge, so the slam's overshoot would push past the viewport. Press in instead: it never grows past its final size. */
@keyframes ds-stamp-press { from { scale: .9; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .ds-cert-sheet > .ds-stamp--xl { animation-name: ds-stamp-press; }
}
/* portable:omit-start: no report uses these */
@media (max-width: 700px) {
  .ds-form, .ds-tag-card--form { padding: var(--space-6) var(--space-4) var(--space-4); }
  .ds-form::before, .ds-tag-card--form::before { display: none; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* portable:omit-end */
@media (forced-colors: active) {
  .ds-stamp, .ds-tag-card, .ds-form, .ds-measure, .ds-tape { border-color: CanvasText; }
  /* portable:omit-start: no report uses these */
  .ds-tape-fill { background: Highlight; }
  /* portable:omit-end */
}
@media print {
  .ds-measure { border: 1.5px solid var(--color-ink); background: none; color: var(--color-ink); }
  .ds-tour { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* No transitions at all: a .01ms transition on `all` still paints one stale frame when styles change. */
  *, *::before, *::after { animation-duration: .01ms !important; transition-property: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}

/* Recorded evidence video shared by the homepage and reports. */
/* portable:omit-start: no report uses these */
.ds-recording { display: block; width: 100%; max-height: 26rem; margin-block: var(--space-3); background: var(--color-media); }

/* Feedback remains a quiet utility action with a decorative message outline. */
.ds-feedback-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); max-width: 100%; padding: 9px 18px; border: 1.5px solid var(--color-ink); border-radius: var(--radius-button); background: var(--color-surface); color: var(--color-ink); font: var(--weight-label) var(--text-body)/1.2 var(--font-body); text-align: center; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.ds-feedback-trigger:not(.ds-compact-action)::before { content: ""; flex: 0 0 auto; width: var(--space-4); height: var(--space-3); border: var(--rule-width) solid currentColor; border-radius: var(--radius-control) var(--radius-control) var(--radius-control) 0; }
.ds-feedback-trigger:active:not(:disabled) { background: var(--color-tag); }
@media (hover: hover) and (pointer: fine) { .ds-feedback-trigger:hover:not(:disabled) { background: var(--color-tag); border-color: var(--color-action); } }
/* Responsive action: keep the accessible name while showing a compact icon on phones. */
.ds-compact-action .ds-compact-action-icon { display: block; }
@media (max-width: 700px) {
  .ds-compact-action { justify-content: center; width: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); padding: 0; gap: 0; flex-shrink: 0; }
  .ds-compact-action-label { display: none; }
  .ds-compact-action-icon { display: block; }
}
/* portable:omit-end */


/* portable:omit-start: the public-page and console components below never appear in an evidence report, so reportStyles() leaves them out of portable exports to keep the report style budget. */
/* ---- Public pages package (2026-11-04): plan sheet, quiet form head and checkbox ---- */
/* Plan sheet: .ds-plan-grid--sheet joins the plans into one bordered sheet split into .ds-plan cells, used by the
   homepage and /pricing so the same plans look the same. Each cell's 1px outer shadow fills the 1px gap around it (the
   sheet's border and overflow clip the outer edge), so the rule sits between cells however they wrap and a short last
   row leaves blank sheet, not a rule-coloured block. Cells stack below about 41rem. .ds-plan-action keeps every
   cell's action on one line. */
.ds-plan-grid--sheet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--border-width); overflow: hidden; background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-soft); }
.ds-plan { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-8); background: var(--color-surface); box-shadow: 0 0 0 var(--border-width) var(--color-border-strong); }
.ds-plan--free { background: var(--color-canvas); }
.ds-plan ul { margin: 0; }
.ds-plan-kind { color: var(--color-muted); font: 700 var(--text-caption)/1.2 var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.ds-plan-grid .ds-plan-name { font: var(--weight-heading) clamp(1.5rem, 2.6vw, 2.25rem)/1.05 var(--font-display); letter-spacing: -.03em; }
.ds-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.ds-plan-amount { font: var(--weight-heading) clamp(2.25rem, 1.5rem + 3vw, 3.75rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.ds-plan-per { color: var(--color-muted); font: var(--text-small) var(--font-code); }
.ds-plan-list { display: grid; gap: var(--space-2); padding-left: 1.2rem; }
@media (max-width: 700px) { .ds-plan { padding: var(--space-6); } }
/* Forced colours drop shadows: an outline keeps the cells divided. */
@media (forced-colors: active) { .ds-plan { outline: var(--border-width) solid CanvasText; } }
/* Quiet form head: the two-part form head on a hairline, for evidence on open sheets rather than manila forms. */
.ds-form-head--quiet { gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-muted); font: var(--text-small)/1.4 var(--font-body); text-transform: none; }
/* Checkbox and its visible label as one 44px target; the box sits on the label's first line. */
.ds-check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--control-height); margin: 0; font-weight: var(--weight-label); cursor: pointer; }
.ds-check > input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--color-ink); }
/* Clerk adapter (clerkAppearance, login and signup 2026-11-04). The site-wide field rule must not reshape Clerk's own
   controls (verification code, checkbox): inside the root they fall back to Clerk's layered styles. Text fields
   (.ds-auth-input) are left out of that revert, so they keep the shared field rules and their invalid, disabled and
   readonly states. :where() keeps the revert at 0,2,0, so the checkbox sizing below still wins. A legal-consent
   checkbox is sized like .ds-check. Two text fields sit inside Clerk's own layout: a password field keeps room for
   its 44px show-password button, and the number input inside Clerk's bordered phone box falls back to Clerk's
   borderless look, so the phone field reads as one box. */
.ds-auth-root { width: 100%; }
.ds-auth-root :where(input, textarea, select):not(.ds-auth-input) { width: revert-layer; min-width: revert-layer; min-height: revert-layer; padding: revert-layer; border: revert-layer; border-radius: revert-layer; color: revert-layer; background: revert-layer; }
.ds-auth-root .ds-auth-check { flex: none; width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--color-ink); }
.ds-auth-root .ds-auth-input:has(+ .cl-formFieldInputShowPasswordButton) { padding-inline-end: calc(var(--control-height) + var(--space-2)); }
.ds-auth-root .cl-phoneInputBox .ds-auth-input { width: revert-layer; min-width: revert-layer; min-height: revert-layer; padding: revert-layer; border: revert-layer; border-radius: revert-layer; background: revert-layer; }
/* Confirm dialog (console package, 2026-11-04): confirmDialog() in components.js. A native modal dialog;
   Cancel comes first and holds focus. The danger tone marks destructive or irreversible actions. */
.ds-confirm { width: min(520px, calc(100vw - 32px)); }
.ds-confirm .dialog-head h2 { margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.ds-confirm-lead { margin: 0 0 var(--space-3); font-weight: var(--weight-label); overflow-wrap: anywhere; }
.ds-confirm-body p { margin: 0; overflow-wrap: anywhere; }
.ds-confirm .dialog-footer { gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-4); }
.ds-confirm[data-tone="danger"]::after { --crop: var(--color-danger); }
.primary-button--danger { background: var(--color-danger); color: var(--color-on-action); }
.primary-button--danger:hover:not(:disabled) { background: var(--color-stamp); }
@media (max-width: 420px) { .ds-confirm .dialog-footer > * { flex: 1 1 100%; } }
/* Copy code (public pages package, 2026-11-04): bindCopyCode() in components.js puts a Copy button and a polite status
   above a <pre>. The status keeps its place while empty so screen readers hear "Copied". Long lines scroll inside the
   block, never the page. */
.ds-code-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-2); }
.ds-code-copy-status { color: var(--color-muted); font-size: var(--text-small); overflow-wrap: anywhere; }
.ds-code-copy + pre { max-width: 100%; margin: 0; padding: var(--space-4); overflow-x: auto; white-space: pre; border: var(--border-width) solid var(--color-ink); background: var(--color-code); color: var(--color-ink); font: var(--text-small)/var(--leading-body) var(--font-code); }
/* portable:omit-end */

/* Sybqa Proof v3 inspection bench: primitives for the live session, the console and app chrome.
   Load after components.css (tokens first). Reports do not embed this file. Everything here is flat: ink borders and
   crop marks, never a drop shadow. */
/* QC tag: a manila inspection tag with an eyelet. Children: -kind (who says it), -claim, -value (a measurement),
   -verdict (Fail / Review / Dropped), -note. Text stays ink, stamp red, review violet or muted on manila
   (green text on manila is under 4.5:1: show a pass as a .ds-stamp instead). */
.ds-qc-tag { position: relative; display: grid; gap: .2em; width: max-content; max-width: 100%; margin: 0; padding: .7em 1em .7em 2.2em; background: var(--color-tag); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); color: var(--color-ink); font-size: var(--text-small); line-height: 1.25; transform-origin: .7em 50%; }
.ds-qc-tag::before { content: ""; position: absolute; left: .7em; top: 50%; width: .8em; height: .8em; margin-top: -.4em; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
.ds-qc-tag-kind { font: 700 var(--text-caption)/1.2 var(--font-code); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-qc-tag-claim { margin: 0; font-weight: var(--weight-label); overflow-wrap: anywhere; }
.ds-qc-tag-claim--ai { font: italic 1.0625em/1.25 var(--font-note); }
.ds-qc-tag-value, .ds-qc-tag-note { font-family: var(--font-code); overflow-wrap: anywhere; }
.ds-qc-tag-verdict { font: var(--weight-display) 1.7em/1 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; text-transform: uppercase; }
.ds-qc-tag[data-verdict="fail"] .ds-qc-tag-verdict { color: var(--color-stamp); }
.ds-qc-tag[data-verdict="review"] .ds-qc-tag-verdict { color: var(--color-review); }
.ds-qc-tag[data-verdict="dropped"] .ds-qc-tag-verdict { color: var(--color-muted); }
.ds-qc-tag[data-verdict="dropped"] .ds-qc-tag-claim { text-decoration: line-through; }
.ds-qc-tag[data-state="measuring"] .ds-qc-tag-value::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-signal); }
.ds-qc-tag--compact { padding: .4em .8em .4em 2.2em; }
.ds-qc-tag--compact .ds-qc-tag-kind { display: none; }
.ds-qc-tag--float { position: absolute; left: 0; top: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)); }
.ds-qc-tag > .ds-stamp { justify-self: start; background: var(--color-surface); }
.ds-qc-tag--overhang > .ds-stamp { position: absolute; right: -10px; bottom: -12px; margin: 0; }
/* Dotted string from a target to an eyelet, and the hand-drawn orange ring around a finding. */
.ds-string { position: absolute; left: 0; top: 0; width: 0; height: var(--len, 0px); border-left: 2px dotted var(--color-ink); transform-origin: 0 0; rotate: var(--ang, 0deg); pointer-events: none; }
.ds-ring { position: absolute; left: 0; top: 0; width: var(--rw, auto); height: var(--rh, auto); translate: var(--rx, 0px) var(--ry, 0px); overflow: visible; fill: none; stroke: var(--color-signal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ds-ring * { vector-effect: non-scaling-stroke; }

/* Inspection box: a dashed safety-orange outline with an optional manila label. Offsets are lengths in --bx --by --bw --bh
   (data-units="frac" reads 0..1 fractions of the nearest size container instead). data-glide animates the size. */
.ds-inspect { position: absolute; left: 0; top: 0; box-sizing: border-box; width: var(--bw, auto); height: var(--bh, auto); translate: var(--bx, 0px) var(--by, 0px); border: var(--rule-width) dashed var(--color-signal); pointer-events: none; transition: translate var(--cursor-glide) var(--ease-glide), opacity var(--motion-normal) var(--ease-standard); }
.ds-inspect[data-units="frac"] { translate: calc(var(--bx, 0) * 100cqw) calc(var(--by, 0) * 100cqh); width: calc(var(--bw, 0) * 100cqw + 12px); height: calc(var(--bh, 0) * 100cqh + 12px); margin: -6px 0 0 -6px; }
.ds-inspect[data-glide] { transition: translate var(--cursor-glide) var(--ease-glide), width var(--cursor-glide) var(--ease-glide), height var(--cursor-glide) var(--ease-glide), opacity var(--motion-normal) var(--ease-standard); }
.ds-inspect[data-dim] { opacity: .45; }
:is(.ds-inspect-tag, .ds-inspect-label) { position: absolute; left: -2px; bottom: calc(100% + var(--space-3)); display: grid; gap: 2px; margin: 0; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-6); background: var(--color-tag); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); color: var(--color-ink); font: var(--text-caption)/1.3 var(--font-code); white-space: nowrap; }
:is(.ds-inspect-tag, .ds-inspect-label)::before { content: ""; position: absolute; left: var(--space-2); top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
:is(.ds-inspect-tag, .ds-inspect-label) b { font: var(--weight-display) var(--text-small)/1.1 var(--font-display); font-stretch: var(--stretch-display); }
.ds-inspect[data-below] > :is(.ds-inspect-tag, .ds-inspect-label) { bottom: auto; top: calc(100% + var(--space-3)); }
.ds-inspect[data-right] > :is(.ds-inspect-tag, .ds-inspect-label) { left: auto; right: -2px; }

/* Browser window chrome: ink frame, a bar (dots, back/forward, address, note), and a viewport that keeps its aspect ratio.
   Pair with .ds-crop (data-tone="signal" while live). Overlay children (.ds-cursor, .ds-inspect, .ds-qc-tag--float)
   sit in a position:absolute .ds-window-layer inside the viewport or screen. */
.ds-window { position: relative; min-width: 0; border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-panel); background: var(--color-surface); }
.ds-window-bar { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-3); border-bottom: var(--rule-width) solid var(--color-ink); font-size: var(--text-small); }
.ds-window-dots { display: inline-flex; flex: none; gap: var(--space-2); }
.ds-window-dots > * { width: 10px; height: 10px; border: 1.5px solid var(--color-ink); border-radius: 50%; }
.ds-window-nav { display: inline-flex; flex: none; gap: var(--space-1); font: 700 var(--text-small)/1 var(--font-code); }
.ds-window-nav > * { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-surface); }
.ds-window-nav > :disabled, .ds-window-nav > [aria-disabled="true"] { opacity: var(--opacity-disabled); }
.ds-window-url { flex: 1 1 auto; min-width: 0; overflow: hidden; font: 700 var(--text-small)/1.2 var(--font-code); text-overflow: ellipsis; white-space: nowrap; }
.ds-window-note { flex: none; margin-left: auto; color: var(--color-muted); font: italic var(--text-body)/1 var(--font-note); }
.ds-window-load { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-signal); transform-origin: 0 50%; scale: 0 1; }
.ds-window-viewport { position: relative; display: grid; place-items: center; container-type: size; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--color-code);
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: var(--mat-grid) var(--mat-grid); }
.ds-window-screen { position: relative; container-type: size; aspect-ratio: var(--ar-w, 16) / var(--ar-h, 10); width: min(100cqw, calc(100cqh * var(--ar-w, 16) / var(--ar-h, 10))); background: var(--color-surface); }
.ds-window-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ds-window-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* AI QA cursor: safety-orange pointer, click ring, mono action label. Position with --cx --cy (lengths; data-units="frac"
   uses 0..1 fractions of the size container). Moves with translate only. data-click="a|b" alternates two identical
   animations so a click restarts without forcing layout; data-sync="stale" docks it faded; data-flip puts the label left. */
.ds-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; translate: var(--cx, 0px) var(--cy, 0px); pointer-events: none; transition: translate var(--cursor-glide) var(--ease-glide), opacity var(--motion-normal) var(--ease-standard); }
.ds-cursor[data-units="frac"] { translate: calc(var(--cx, 0) * 100cqw) calc(var(--cy, 0) * 100cqh); }
.ds-cursor[data-sync="stale"] { --cx: .94; --cy: .92; opacity: .35; }
.ds-cursor > svg { position: absolute; left: 0; top: 0; width: 20px; height: 23px; overflow: visible; fill: var(--color-signal); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; }
.ds-cursor-ring { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 2px solid var(--color-signal); border-radius: 50%; opacity: 0; }
.ds-cursor-label, .ds-cursor-tag { position: absolute; left: 16px; top: 20px; padding: 1px var(--space-2); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); background: var(--color-signal); color: var(--color-on-signal); font: 700 var(--text-caption)/1.5 var(--font-code); letter-spacing: .04em; white-space: nowrap; }
.ds-cursor[data-flip] :is(.ds-cursor-label, .ds-cursor-tag) { left: auto; right: 16px; }

/* Run log: fixed-height mono rows (time VERB text) so changing text never shifts layout. */
.ds-runlog { margin: 0; padding: 0; list-style: none; font: var(--text-caption)/1.6 var(--font-code); }
.ds-runlog > li { display: grid; grid-template-columns: 3rem 5.5rem minmax(0, 1fr); gap: var(--space-2); height: 1.6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ds-runlog > li > b { font-weight: 700; }
.ds-runlog > li > :first-child { color: var(--color-muted); }

/* Checklist: ink rules and orange-tick boxes (the homepage "what it checks" list). data-done="true" draws the tick. */
.ds-checklist { --box: 2.5rem; margin: 0; padding: 0; list-style: none; border-top: var(--rule-width) solid var(--color-ink); }
.ds-checklist--sm { --box: 1.5rem; }
.ds-checklist > li { position: relative; display: grid; grid-template-columns: var(--box) minmax(0, 1fr); gap: var(--space-4); align-items: center; min-height: calc(var(--box) + var(--space-6)); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-ink); }
/* The box is an absolutely positioned grid child: it keeps column 1 and centres on the whole row however many lines column 2 holds. */
.ds-checklist > li::before { content: ""; position: absolute; grid-column: 1; align-self: center; width: var(--box); height: var(--box); border: var(--rule-width) solid var(--color-ink); background: var(--color-surface); }
.ds-checklist > li > * { grid-column: 2; }
.ds-checklist > li[data-done="true"]::after { content: ""; position: absolute; left: calc(var(--box) * .22); top: calc(50% - var(--box) * .6); width: calc(var(--box) * .36); height: calc(var(--box) * .76); border: solid var(--color-signal); border-width: 0 calc(var(--box) * .16) calc(var(--box) * .16) 0; rotate: 40deg; }

/* Proof lines: "The AI said" / "The browser measured" / stamp. Stacks below 440px of its own width. */
.ds-proof { display: grid; gap: var(--space-2); container-type: inline-size; }
.ds-proof-row { display: grid; gap: var(--space-1); }
.ds-proof-label { font: 700 var(--text-caption)/1.4 var(--font-code); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-proof-said { font: italic 1.0625rem/1.3 var(--font-note); }
.ds-proof-measured { font-family: var(--font-code); overflow-wrap: anywhere; }
.ds-proof[data-outcome="dropped"] .ds-proof-said { text-decoration: line-through; }
@container (min-width: 440px) { .ds-proof-row { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: baseline; } }

/* Small labels and state markers. */
.ds-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 1px var(--space-2); border: 1.5px solid var(--color-ink); border-radius: var(--radius-sheet); background: var(--color-surface); color: var(--color-ink); font: 500 var(--text-caption)/1.6 var(--font-code); white-space: nowrap; }
.ds-chip[data-tone="success"] { color: var(--color-success); }
.ds-chip[data-tone="danger"] { color: var(--color-danger); }
.ds-chip[data-tone="review"] { color: var(--color-review); }
.ds-chip[data-tone="warning"] { color: var(--color-warning); }
.ds-live-dot { display: inline-block; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-signal); }
/* Counters: a visible noun above a mono number. */
/* Four cells, then two, then one: never three plus an orphan. --tally-min is the narrowest cell that keeps "Worth a look" on one line; rem-based, so enlarged text reflows to fewer columns. */
.ds-tally { --tally-min: 7.5rem; --tally-gap: var(--space-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(max((100% - 3 * var(--tally-gap)) / 4, clamp(0px, (4 * var(--tally-min) + 3 * var(--tally-gap) - 100%) * 1000, (100% - var(--tally-gap)) / 2), clamp(0px, (2 * var(--tally-min) + var(--tally-gap) - 100%) * 1000, 100%)), 1fr)); gap: var(--tally-gap); margin: 0; }
.ds-tally > div { min-width: 0; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-ink); background: var(--color-surface); }
.ds-tally dt { overflow-wrap: break-word; font: 700 var(--text-caption)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-tally dd { margin: 0; font: 700 1.5rem/1.2 var(--font-code); font-variant-numeric: tabular-nums; }
.ds-tally [data-tone="danger"] dd { color: var(--color-danger); }
.ds-tally [data-tone="review"] dd { color: var(--color-review); }
.ds-tally [data-tone="success"] dd { color: var(--color-success); }
/* Two-way toggle (aria-pressed) and the stamp legend. */
/* Equal columns on one row: a narrow screen wraps the labels inside their segment, never the segments onto a ragged second row. */
.ds-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; border: 1.5px solid var(--color-ink); border-radius: var(--radius-button); overflow: hidden; }
.ds-seg > button { min-height: var(--control-height); padding: var(--space-1) var(--space-4); border: 0; background: var(--color-surface); font-weight: var(--weight-label); line-height: 1.2; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
@media (max-width: 480px) { .ds-seg > button { padding-inline: var(--space-2); } }
.ds-seg > button + button { border-left: 1.5px solid var(--color-ink); }
.ds-seg > button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-canvas); }
/* The group clips its corners (overflow: hidden), so a focused segment draws its ring inside its own edge. */
.ds-seg > button:focus-visible { position: relative; z-index: 1; outline-offset: calc(-1 * var(--focus-width)); }
.ds-legend { padding: var(--space-3) 0; border-block: var(--border-width) solid var(--color-border); }
.ds-legend > summary { cursor: pointer; min-height: var(--control-height); padding-block: var(--space-2); font-weight: var(--weight-label); }
.ds-legend dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; margin: 0; }
.ds-legend dd { margin: 0; color: var(--color-muted); }
/* Ledger: manila head over mono rows (time, kind chip, text, stamp). */
.ds-ledger { display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border: var(--rule-width) solid var(--color-ink); }
.ds-ledger-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10); background: var(--color-tag); border-bottom: var(--rule-width) solid var(--color-ink); }
/* The eyelet hangs on the title's first line, so it stays on the title row when the head wraps. */
.ds-ledger-head > :is(h2, h3) { position: relative; }
.ds-ledger-head > :is(h2, h3)::before { content: ""; position: absolute; left: calc(var(--space-4) - var(--space-10)); top: calc(.5em - 6px); top: calc(.5lh - 6px); width: 12px; height: 12px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
.ds-ledger-head :is(h2, h3) { margin: 0; font-size: var(--text-section); }
.ds-ledger-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; }
.ds-ledger-row { display: grid; grid-template-columns: 4.5rem 4.75rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--control-height); padding: var(--space-1) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); content-visibility: auto; contain-intrinsic-size: auto 44px; font-size: var(--text-small); }
.ds-ledger-row[data-kind="empty"] > * { grid-column: 1 / -1; }
.ds-ledger-row[data-kind="empty"] { grid-template-columns: minmax(0, 1fr); content-visibility: visible; color: var(--color-muted); }
.ds-ledger-time { font: var(--text-caption)/1.4 var(--font-code); color: var(--color-muted); }
/* Night console strip for raw logs, with a reverse focus ring. */
.ds-console { background: var(--color-night); color: var(--color-on-night); border: var(--rule-width) solid var(--color-ink); }
.ds-console :focus-visible { outline-color: var(--color-action-reverse); }
.ds-console > summary { cursor: pointer; min-height: var(--control-height); padding: var(--space-2) var(--space-4); font: 600 var(--text-small)/1.4 var(--font-code); }
.ds-console ol { margin: 0; padding: 0 var(--space-4) var(--space-4); list-style: none; font: var(--text-caption)/1.6 var(--font-code); color: var(--color-on-night-muted); }

/* Choice group: native radios or checkboxes drawn as inspection tags (rating, topic). */
.ds-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.ds-choices > legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-label); }
.ds-choice { position: relative; display: inline-flex; margin: 0; }
.ds-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ds-choice > span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height); min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); background: var(--color-surface); font-weight: var(--weight-label); }
.ds-choice > input:checked + span { background: var(--color-ink); color: var(--color-canvas); }
.ds-choice > input:focus-visible + span { outline: var(--focus-width) solid var(--color-action); outline-offset: var(--focus-offset); }
/* Rating scale: equal columns that never wrap one value alone, with visible end labels under the first and last. */
.ds-choices--scale { display: grid; grid-template-columns: repeat(var(--choices, 5), minmax(0, 1fr)); }
.ds-choices--scale > .ds-choice, .ds-choices--scale > .ds-choice > span { width: 100%; min-width: 0; }
.ds-choices--scale > .ds-choice > span { padding-inline: var(--space-1); }
.ds-choices-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-small); }

/* Consent banner: a fixed bottom bar. It overlays the page, so showing or hiding it never moves content. Keep controls
   native buttons with equal visual weight for accept and decline. */
.ds-consent { position: fixed; left: 0; right: 0; bottom: 0; max-height: 50svh; overflow-y: auto; z-index: var(--z-consent); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); padding: var(--space-4) max(var(--space-6), calc((100% - var(--content-width)) / 2)); background: var(--color-surface); color: var(--color-ink); border-top: var(--rule-width) solid var(--color-ink); }
.ds-consent-body { flex: 1 1 24rem; min-width: 0; }
.ds-consent-title { margin: 0 0 var(--space-1); font: var(--weight-display) var(--text-body)/1.2 var(--font-display); font-stretch: var(--stretch-display); }
.ds-consent-text { margin: 0; max-width: 70ch; color: var(--color-muted); font-size: var(--text-small); }
.ds-consent-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--space-3); }
.ds-consent-actions > * { flex: 1 1 auto; }
html:has(.ds-consent:not([hidden])) { scroll-padding-bottom: var(--consent-h, 9rem); }

/* Feedback dialog: head, a short form, and status text. Use with <dialog class="ds-feedback"> and bindDialog. */
.ds-feedback { width: min(520px, calc(100vw - 32px)); padding: 0; }
.ds-feedback-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-3); border-bottom: var(--rule-width) solid var(--color-ink); background: var(--color-tag); }
.ds-feedback-head h2 { margin: 0; font-size: 1.5rem; }
.ds-feedback-head .eyebrow { margin: 0 0 var(--space-1); }
.ds-feedback-form { display: grid; gap: var(--space-5); padding: var(--space-6); }
.ds-feedback-footer { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--rule-width) solid var(--color-ink); }
.ds-feedback-count { margin: 0; color: var(--color-muted); font: var(--text-caption)/1.4 var(--font-code); text-align: right; }
.ds-feedback-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ds-feedback-status { min-height: 1.5em; margin: 0; font-size: var(--text-small); }


/* Motion. The base state of every animated element is its FINAL state; entrances run only when motion is allowed,
   from a state class or data attribute, with explicit from and to keyframes. Transform, translate, rotate, scale and
   opacity only (the load sweep is the documented exception). Reduced motion is also handled by the global override
   in components.css. */
@keyframes ds-tag-drop { from { translate: 0 -12px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes ds-ring-pop { from { scale: .6; opacity: 0; } 70% { scale: 1.05; opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes ds-string-out { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes ds-tick-in { from { scale: 0; } 70% { scale: 1.15; } to { scale: 1; } }
@keyframes ds-ripple-a { from { scale: .5; opacity: .9; } to { scale: 1.8; opacity: 0; } }
@keyframes ds-ripple-b { from { scale: .5; opacity: .9; } to { scale: 1.8; opacity: 0; } }
@keyframes ds-travel-a { from { translate: var(--px, 0px) var(--py, 0px); } to { translate: var(--cx, 0px) var(--cy, 0px); } }
@keyframes ds-travel-b { from { translate: var(--px, 0px) var(--py, 0px); } to { translate: var(--cx, 0px) var(--cy, 0px); } }
@keyframes ds-load { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes ds-pulse { 50% { opacity: .25; } }
@keyframes ds-ledger-in { from { translate: 0 -6px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ds-qc-tag.is-in { animation: ds-tag-drop .4s var(--ease-stamp) both; }
  .ds-ring.is-in { animation: ds-ring-pop .3s var(--ease-stamp) both; }
  .ds-string.is-in { animation: ds-string-out .25s ease-out both; }
  .ds-checklist > li[data-done="true"]::after { animation: ds-tick-in .28s ease-out both; }
  .ds-cursor[data-click="a"] .ds-cursor-ring { animation: ds-ripple-a .4s ease-out both; }
  .ds-cursor[data-click="b"] .ds-cursor-ring { animation: ds-ripple-b .4s ease-out both; }
  .ds-cursor[data-travel="a"] { animation: ds-travel-a var(--cursor-glide) var(--ease-glide) both; }
  .ds-cursor[data-travel="b"] { animation: ds-travel-b var(--cursor-glide) var(--ease-glide) both; }
  .ds-window-bar[data-loading="a"] .ds-window-load, .ds-window-bar[data-loading="b"] .ds-window-load { animation: ds-load .8s ease-out both; }
  .ds-live-dot { animation: ds-pulse 1.1s ease-in-out infinite; }
  .ds-ledger-row.is-new { animation: ds-ledger-in .16s ease-out both; }
}
@media (max-width: 700px) {
  .ds-ledger-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .ds-ledger-row > .ds-chip { display: none; }
  .ds-consent { padding: var(--space-4); }
  .ds-consent-actions { width: 100%; }
  .ds-consent-actions > * { flex: 1 1 7rem; }
  .ds-feedback-actions > * { flex: 1 1 8rem; }
}
@media (forced-colors: active) {
  .ds-cursor > svg { fill: Highlight; stroke: CanvasText; }
  .ds-inspect { border-color: Highlight; }
  .ds-ring { stroke: Highlight; }
  .ds-qc-tag, .ds-chip, .ds-consent { border-color: CanvasText; }
  /* Forced colours drop author backgrounds and box shadows: the pressed segment and the checked choice take the
     system highlight, and wrapped segments draw real borders in place of their shadow dividers. */
  .ds-seg > button[aria-pressed="true"], .ds-choice > input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .ds-seg--wrap > button, .ds-seg--wrap > button + button { border: 1px solid CanvasText; }
}
@media print {
  .ds-consent { display: none; }
}

@media (max-width: 700px) {
  .ds-feedback-trigger.ds-compact-action { padding: 0; }
  .ds-feedback-trigger.ds-compact-action::before { display: none; }
}

/* Public header navigation: plain links, text actions and the phone menu. Reports never load these. */
.ds-nav-menu { position: relative; }
/* The menu toggle matches the Sign in secondary button beside it. */
.ds-nav-menu > summary { display: flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 9px var(--space-4); border: 1.5px solid var(--color-ink); border-radius: var(--radius-button); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-body); font-weight: var(--weight-label); line-height: 1; white-space: nowrap; cursor: pointer; list-style: none; transition: background-color var(--motion-fast) var(--ease-standard); }
.ds-nav-menu > summary:hover, .ds-nav-menu[open] > summary { background: var(--color-canvas); }
@media (max-width: 359px) { .ds-nav-menu > summary { padding-inline: var(--space-3); } }
.ds-nav-menu > summary::-webkit-details-marker { display: none; }
.ds-nav-menu > summary::after { content: '+'; margin-left: var(--space-2); }
.ds-nav-menu[open] > summary::after { content: '−'; }
.ds-nav-menu-links { position: absolute; z-index: var(--z-overlay); top: calc(100% + var(--space-2)); right: 0; display: grid; min-width: 14rem; padding: var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-panel); background: var(--color-surface); }
.ds-nav-menu-links :is(a, button):not(.primary-button, .secondary-button) { display: flex; align-items: center; min-height: var(--control-height); padding-inline: var(--space-3); color: var(--color-ink); font-size: var(--text-small); font-weight: var(--weight-label); text-decoration: none; }
.ds-nav-menu-links :is(a, button):not(.primary-button, .secondary-button):hover { background: var(--color-canvas); }
.ds-nav-menu-links .primary-button { margin-top: var(--space-2); }
.ds-nav-menu-links .text-button { min-width: 0; text-decoration: none; }
/* Public header links and text actions (Send feedback, Back to home) share one style; Sign in keeps its button variant. */
.ds-nav-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height); padding: 0; border: 0; background: none; color: var(--color-ink); font: var(--weight-label) var(--text-body)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-nav-link:hover, .ds-nav-link[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-signal); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* The one dialog close control (dialogClose()): a visible Close button that keeps its width beside long headings. */
.dialog-close { flex-shrink: 0; white-space: nowrap; }

/* A list of example stamps: wraps, with room for each stamp's rotation. */
.ds-stamp-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin: var(--space-3) 0 0; padding: var(--space-1) var(--space-2); list-style: none; }

/* Segmented control variants (console package, 2026-11-04). --reverse sits on night surfaces such as .ds-console;
   --wrap lets a long group (the run console's event filters) fill its row and wrap into equal cells. */
.ds-seg--reverse { border-color: var(--color-on-night); }
.ds-seg--reverse > button { background: transparent; color: var(--color-on-night); }
.ds-seg--reverse > button + button { border-left-color: var(--color-on-night); }
.ds-seg--reverse > button[aria-pressed="true"] { background: var(--color-on-night); color: var(--color-night); }
@media (hover: hover) and (pointer: fine) { .ds-seg--reverse > button:hover:not([aria-pressed="true"]) { background: var(--color-night-raised); } }
.ds-seg--wrap { --seg-line: var(--color-ink); display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); width: 100%; }
.ds-seg--wrap.ds-seg--reverse { --seg-line: var(--color-on-night); }
/* Wrapped cells draw their dividers on the left and top; the group's own border and clipping finish the edges. */
.ds-seg--wrap > button, .ds-seg--wrap > button + button { border-left: 0; box-shadow: -1.5px 0 0 var(--seg-line), 0 -1.5px 0 var(--seg-line); }

/* Public site chrome: one header, navigation and night footer for the homepage, guides, comparisons, pricing,
   legal pages and the 404 page. Load after tokens.css, components.css and bench.css. Page CSS owns only the content
   between header and footer. Markup lives in src/web/public-pages.ts (HEADER, FOOTER); static pages copy it verbatim. */
html { scroll-padding-top: 96px; }

.guide-header, .guide-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); width: 100%; }

/* Shared header: solid warm paper, a hairline rule and the same native controls as the page body. */
.guide-header { position: sticky; top: 0; z-index: var(--z-sticky, 10); min-height: 80px; padding: 0 max(var(--space-8), calc((100% - var(--content-width)) / 2)); background: var(--color-header); border-bottom: var(--border-width) solid var(--color-border); }
.guide-brand { font-size: 2rem; }
.guide-mobile-nav { display: none; }
.guide-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
:where(.guide-nav a, .guide-nav button) { min-height: var(--control-height); display: inline-flex; align-items: center; color: var(--color-ink); font: var(--weight-label) var(--text-body)/1 var(--font-body); text-decoration: none; }
:where(.guide-nav a:not(.primary-button, .secondary-button, .text-button)):hover, .guide-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-signal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.guide-header::after { content: ""; position: absolute; left: 0; bottom: calc(-1 * var(--rule-width)); width: 100%; height: 3px; background: var(--color-signal); transform-origin: 0 50%; scale: 0 1; }
@keyframes guide-read-progress { to { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .guide-header::after { animation: guide-read-progress linear both; animation-timeline: scroll(root); }
  }
}

/* Footer: night band with reverse controls. */
/* The gutter uses vw, not %, so the footer padding and the landscape bleed below resolve to the same length. */
.guide-footer { --footer-gutter: max(var(--space-8), calc((100vw - var(--content-width)) / 2)); margin-top: var(--space-16); padding: var(--space-10) var(--footer-gutter) 0; background: var(--color-night); color: var(--color-on-night-muted); font-size: var(--text-small); }
.guide-footer :where(a, button):not(.brand, .primary-button, .secondary-button, .text-button) { min-height: var(--control-height); display: inline-flex; align-items: center; color: var(--color-on-night); font-size: inherit; }
.guide-footer :where(a, button):not(.brand, .primary-button, .secondary-button, .text-button):hover { color: var(--color-action-reverse); }
.guide-footer a:focus-visible, .guide-footer button:focus-visible { outline-color: var(--color-action-reverse); }
.guide-footer .brand { font-size: 1.75rem; }
.guide-footer .guide-nav { margin-left: auto; gap: var(--space-2) var(--space-6); }
:where(.guide-footer .guide-nav a, .guide-footer .guide-nav button) { font-weight: 400; }
.guide-footer .ds-nav-link { color: var(--color-on-night); font-size: inherit; font-weight: 400; }
.guide-footer .ds-nav-link:hover { color: var(--color-action-reverse); text-decoration: none; }
.guide-footer-note { width: 100%; margin: 0; }

/* Full-bleed illustrated colophon; decorative, with controls in normal flow. */
.footer-landscape { grid-column: 1 / -1; flex: none; width: calc(100% + 2 * var(--footer-gutter)); margin-inline: calc(-1 * var(--footer-gutter)); margin-top: var(--space-6); background: var(--color-canvas); border-top: var(--rule-width) solid var(--color-action-reverse); }
.footer-landscape img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .footer-landscape { overflow: hidden; }
  .footer-landscape img { width: 180%; max-width: none; margin-left: -40%; }
}

/* Narrowest full header (1025px to 1099px): tighter link spacing, so logo, links, action and Sign in keep one row
   with room to spare. At the 24px gap the row needs 1020px on Windows and 1031px on Linux Chromium, whose glyph
   advances round to whole pixels; at 16px it needs at most 976px. The 1024px block below sets its own gap. */
@media (max-width: 1099px) {
  .guide-nav--responsive { column-gap: var(--space-4); }
}

/* Compact native navigation: collapse before the links run out of room, so the header never wraps under the logo.
   Phones and tablets keep the one primary action beside the menu; Sign in moves into the menu (2026-11-04). */
@media (max-width: 1024px) {
  .guide-header:has(.guide-nav--responsive) { flex-wrap: nowrap; }
  .guide-nav--responsive { flex: none; flex-wrap: nowrap; gap: var(--space-2); }
  .guide-nav--responsive > :not(.guide-mobile-nav, .primary-button) { display: none; }
  .guide-mobile-nav { display: block; }
  .guide-mobile-nav .ds-nav-menu-links > .primary-button { display: none; }
  /* The account action sits apart from the page links. */
  .guide-menu-sign-in { margin-top: var(--space-1); border-top: var(--border-width) solid var(--color-border); }
}
@media (max-width: 800px) {
  .guide-header:has(.guide-nav--responsive) { min-height: 72px; padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .guide-header .guide-brand { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .guide-header { position: relative; min-height: 64px; padding: var(--space-2) var(--space-5); }
  /* Compact header action: same control and 44px height, tighter padding and the eyelet moved in. */
  .guide-nav--responsive > .primary-button { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8); font-size: var(--text-small); white-space: nowrap; }
  .guide-nav--responsive > .primary-button::before { left: var(--space-3); }
  .guide-footer { --footer-gutter: var(--space-5); }
  .guide-footer .guide-nav { margin-left: 0; row-gap: 0; }
  /* Footer text links: 36px rows (above the 24px WCAG minimum, spaced by the column gap) instead of 44px boxes that read as wide blank bands. */
  .guide-footer .guide-nav :where(a):not(.brand, .primary-button, .secondary-button, .text-button) { min-height: 2.25rem; }
  .guide-nav { gap: var(--space-1) var(--space-4); }
}
/* Narrow phones: logo, action and menu share the row, so the gutters, logo and toggle tighten a little. */
@media (max-width: 420px) {
  .guide-header:has(.guide-nav--responsive) { padding-inline: var(--space-4); }
  .guide-header .guide-brand { font-size: 1.25rem; }
  .guide-header .ds-nav-menu > summary { padding-inline: var(--space-3); }
}
@media (max-width: 359px) {
  .guide-header .guide-brand { font-size: var(--text-section); }
  /* Too narrow for logo, action and menu on one row: the action moves to the end of the menu, after Sign in. */
  .guide-nav--responsive > .primary-button { display: none; }
  .guide-mobile-nav .ds-nav-menu-links > .primary-button { display: inline-flex; }
}

/* Homepage composition: a framed column with paper panels. Header and footer chrome come from ui/site.css;
   visual values and controls live in ui/. Outfit for display, controls and reading. */
html { scroll-behavior: smooth; }
/* Shared typography follows the same brand family across marketing and product. */
.landing { position: relative; background: var(--color-surface); --text-caption: .75rem; }
main { background: var(--color-surface); overflow-x: clip; }
main > section { width: min(1280px, calc(100% - 2 * var(--space-16))); margin-inline: auto; }

/* Hero: a centred paper panel with thin arcs; the example run rises out of its lower edge. */
main > .hero { width: auto; margin: var(--space-3) var(--space-3) 0; }
.hero { --hero-gutter: var(--space-8); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; }
/* The paper panel sits behind the copy in the same grid cell. */
.hero-arcs { position: relative; z-index: -1; grid-area: 1 / 1; overflow: hidden; background: var(--color-canvas); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-soft); }
.hero-arcs i { position: absolute; left: 50%; top: 125%; aspect-ratio: 1; border: var(--border-width) solid var(--color-border); border-radius: 50%; translate: -50% -50%; }
.hero-arcs i:nth-child(1) { width: 2600px; }
.hero-arcs i:nth-child(2) { width: 1900px; }
.hero-copy { grid-area: 1 / 1; display: grid; justify-items: center; width: min(940px, 100% - 2 * var(--hero-gutter)); margin-inline: auto; padding-block: var(--space-6); }
.hero .sybqa-mascot { width: var(--space-12); height: var(--space-12); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); padding: var(--space-1) var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: 999px; color: var(--color-ink); font-size: var(--text-small); font-weight: var(--weight-label); }
.hero-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal); }
.hero h1 { margin: 0 0 var(--space-6); font-size: var(--text-display-1); text-wrap: balance; }
.hero-lede { max-width: 50ch; margin: 0; color: var(--color-muted); font-size: 1.1875rem; line-height: 1.6; text-wrap: pretty; }
/* Free first-run form: a shared .ds-form with a native disclosure, checkbox and alert from the library. */
.hero-copy .free-run { width: min(34rem, 100%); margin-top: var(--space-8); text-align: left; }
.free-run { --eyelet-x: var(--space-4); --eyelet-y: var(--space-6); --eyelet-d: var(--space-4); display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12); }
.free-run .ds-form-head { margin: 0; }
.free-run .ds-disclosure { padding-block: var(--space-1); }
.free-goal .ds-field { padding-block: var(--space-2); }
.free-run .primary-button { justify-self: start; }
.free-run .app-error { margin: 0; }
.free-run .app-error a { color: inherit; }
.free-run[data-state="sending"] .primary-button { opacity: var(--opacity-disabled); cursor: progress; }
.free-run-note { margin: 0; color: var(--color-muted); font-size: var(--text-small); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
.hero-actions > :is(.primary-button, .secondary-button) { min-height: calc(var(--control-height-primary) + var(--space-1)); }
.hero-fine { flex-basis: 100%; margin: 0; text-align: center; }
.hero-actions[data-free] :is([data-account-required], [data-signup-cta]) { display: none; }
/* The scripted example run, below the process section. */
.hero-showcase { width: min(900px, 100%); margin-inline: auto; text-align: left; }

/* The headline stays readable while the recorded example supplies the proof below. */
.hero h1 .nowrap { white-space: nowrap; }

/* Sections share one column framed by hairlines; a full-width rule separates each one. */
.block { position: relative; padding: var(--space-20) var(--space-16); border-inline: var(--border-width) solid var(--color-border); }
.block::before { content: ""; position: absolute; top: 0; left: calc((100% - 100vw) / 2); width: 100vw; border-top: var(--border-width) solid var(--color-border); }
.hero + .block { margin-top: var(--space-20); }
#watch { padding-top: var(--space-8); }
.block-head { max-width: 780px; margin: 0 auto var(--space-12); text-align: center; }
.block-head .ds-editorial-heading { margin: 0 0 var(--space-6); font-size: var(--text-display-2); text-wrap: balance; }
.block-head .ds-editorial-heading span { color: var(--color-action); }
.block-head .block-intro { margin-inline: auto; }
.block-intro { max-width: 60ch; margin: 0; color: var(--color-muted); font-size: 1.0625rem; text-wrap: pretty; }
.section-kicker { margin: 0 0 var(--space-4); color: var(--color-action); font: var(--weight-label) var(--text-small)/1.4 var(--font-body); font-stretch: normal; letter-spacing: 0; }
/* One weight for bold words in running text. */
main :is(p, li, dd) :is(b, strong) { font-weight: var(--weight-label); }
.plans-more { margin: var(--space-8) 0 0; text-align: center; color: var(--color-muted); font-size: var(--text-small); }
.guide-links { max-width: 90ch; margin-inline: auto; line-height: 2; }

/* Guide links under the process steps. */
.intro-more { margin: var(--space-6) 0 0; color: var(--color-muted); font-size: var(--text-small); text-align: center; }
.intro-more a { color: var(--color-ink); }

.process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: var(--border-width) solid var(--color-border); }
.process-steps li { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-8) var(--space-6) 0; }
.process-steps li + li { border-left: var(--border-width) solid var(--color-border); }
.process-steps li > span { color: var(--color-action); font: var(--text-small) var(--font-code); }
.process-steps h3, .feature-grid h3 { margin: 0 0 var(--space-3); font: var(--weight-editorial) 1.5rem/1.2 var(--font-editorial); letter-spacing: -.02em; }
.process-steps p, .feature-grid p { margin: 0; color: var(--color-muted); font-size: 1rem; }

/* Recorded fixture evidence: a finding with before/after screenshots. Crops are CSS only; pixels stay original. */
.evidence-card { --crop-inset: -14px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); max-width: 1120px; margin-inline: auto; background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); }
.evidence-head { grid-column: 1 / -1; position: relative; padding: var(--space-6) var(--space-8); background: var(--color-canvas); border-bottom: var(--border-width) solid var(--color-border-strong); }
.evidence-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.evidence-title h3 { margin: 0; font: var(--weight-editorial) clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--font-editorial); letter-spacing: -.02em; }
.evidence-summary { max-width: 62ch; margin: var(--space-3) 0 0; font-size: 1.0625rem; }
.evidence-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-8); border-right: var(--border-width) solid var(--color-border-strong); }
.evidence-shots figure { min-width: 0; margin: 0; }
.evidence-shots figcaption { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin-bottom: var(--space-2); color: var(--color-muted); font: var(--text-small)/1.3 var(--font-code); }
.evidence-shots figcaption b { color: var(--color-ink); font-weight: 700; text-transform: uppercase; }
.evidence-shots a { display: block; border: var(--border-width) solid var(--color-border-strong); background: var(--color-canvas); }
.evidence-shots img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 470; object-fit: cover; object-position: top; }
.evidence-shots a:hover { outline: var(--rule-width) solid var(--color-signal); outline-offset: 2px; }
.evidence-details { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-8); }
.evidence-details > .ds-disclosure { margin: 0; }
.report-steps ol { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; counter-reset: report-step; }
.report-steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; counter-increment: report-step; }
.report-steps li::before { content: counter(report-step); grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: var(--rule-width) solid var(--color-ink); background: var(--color-highlight); font: 700 var(--text-small)/1 var(--font-code); }
.report-steps strong { font-weight: var(--weight-label); }
.report-steps span { color: var(--color-muted); font-size: var(--text-small); }
.report-recording .ds-recording { width: 100%; margin-top: var(--space-3); }
/* Evidence facts: label above value, two columns (one on small phones). */
.evidence-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: var(--border-width) solid var(--color-ink); }
.evidence-facts > div { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.evidence-facts dt { font: var(--weight-label) var(--text-caption)/1.5 var(--font-code); letter-spacing: .08em; text-transform: uppercase; }
.evidence-facts dd { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-small); }
.evidence-details > .text-button { justify-self: start; }

.inspection-form { max-width: 1120px; margin-inline: auto; padding: var(--space-6); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); }
.proof-table, .compare-table { font-size: var(--text-body); }
.proof-table th, .compare-table thead th { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .08em; }
.proof-table td { vertical-align: middle; }
.compare-table :is(th, td) { vertical-align: top; }
.compare-table td { color: var(--color-muted); }
.compare-table thead th:first-child { white-space: nowrap; }
/* Row headings wrap between words only ("Before running", not "runnin g"). */
.compare-table tbody th { min-width: 7.5rem; overflow-wrap: normal; }
.table-hint { display: none; }
/* Marker on the column heading only; a fully yellow column outweighed the rest of the page. Only the evidence-limits
   table carries it: on the Lovable comparison the second column is the competitor's (R5-BR-08, 2026-11-04). */
.evidence-limits .compare-table thead th:nth-child(2) { background: var(--color-highlight); }
/* Result legend above the evidence disclosures (legend box from hero-stage.css). */
.hero-legend { margin: 0 0 var(--space-8); }
.hero-legend h3 { margin: 0 0 var(--space-3); font: var(--weight-label) var(--text-body)/1.5 var(--font-body); }
.evidence-examples, .evidence-limits { margin-top: var(--space-4); }
.evidence-examples .inspection-form { margin-top: var(--space-5); }

/* Features: hairline columns, no cards. */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--border-width) solid var(--color-border); }
.feature-grid article { padding: var(--space-8) var(--space-6); }
.feature-grid article:not(:nth-child(3n + 1)) { border-left: var(--border-width) solid var(--color-border); }
.feature-grid article:nth-child(n + 4) { border-top: var(--border-width) solid var(--color-border); }
.feature-num { color: var(--color-action); font: var(--text-small) var(--font-code); }
.feature-grid h3 { margin-top: var(--space-3); }

/* Pricing: the shared plan sheet (.ds-plan-grid--sheet), as on /pricing. Numbers are filled from /api/public/plans by landing.js; the HTML holds the same defaults. */
.plans { max-width: 1040px; margin-inline: auto; }

/* Questions: heading on the left, numbered list on the right. */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6) var(--space-12); align-items: start; }
#faq .faq-layout > h2 { margin: 0; font-size: var(--text-display-2); text-wrap: balance; }
#faq .faq-layout > h2 span { color: var(--color-action); }
/* The closing action sits under the questions, at full control size (not the small .plans-more text). */
.faq-cta { grid-column: 2; margin: var(--space-4) 0 0; }
.faq-list summary { font-size: 1.0625rem; }

/* Closing: a second paper panel, centred like the hero. */
main > .closing { width: auto; margin: var(--space-20) var(--space-3) var(--space-16); }
.closing { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-20) var(--space-8); background: var(--color-canvas); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-soft); text-align: center; }
.closing-mark { width: 160px; height: auto; }
.closing-kicker { margin: 0 0 var(--space-3); color: var(--color-action); font: var(--weight-label) var(--text-small)/1.4 var(--font-body); }
.closing h2 { margin: 0; font-size: var(--text-display-2); text-wrap: balance; }
.closing h2 span { color: var(--color-action); }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5) var(--space-8); }

/* Footer on night: brand and tagline beside the links, product updates below. */
.landing-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-10) var(--space-12); align-items: start; margin-top: 0; padding-top: var(--space-16); }
.footer-tagline { margin: var(--space-8) 0 0; color: var(--color-on-night); font-size: clamp(2rem, 3.6vw, 3.25rem); }
.footer-tagline span { color: var(--color-action-reverse); }
.landing-footer .guide-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: start; gap: 0 var(--space-6); margin-left: 0; }
.landing-footer .subscribe, .landing-footer .guide-footer-note { grid-column: 1 / -1; }
.landing-footer .guide-footer-note { padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-night-line); }

/* Product updates (footer, on night) */
.subscribe { flex: 1 1 100%; display: grid; gap: var(--space-3); max-width: 40rem; padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-night-line); }
.subscribe-help, .subscribe-status { margin: 0; font-size: var(--text-small); }
/* An inline link in running text, not a 44px footer row: the footer link sizing would open a gap between lines. */
.landing-footer .subscribe-help a { display: inline; min-height: 0; color: var(--color-on-night); }
.subscribe-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.subscribe .ds-field { flex: 1 1 16rem; width: auto; }
.subscribe .ds-field label { color: var(--color-on-night); font-weight: var(--weight-label); }
.subscribe-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.subscribe-status { min-height: 1.5em; color: var(--color-on-night); }
.subscribe-status[data-state="error"] { color: var(--color-action-reverse); }
.subscribe h2 { margin: 0; color: var(--color-on-night); font: var(--weight-editorial) 1.375rem/1.2 var(--font-display); }

/* Live self-check: landing.js measures this page and stamps the results. */
.self-check { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-overlay); display: flex; flex-direction: column; width: min(440px, calc(100vw - 2 * var(--space-4))); height: min(610px, calc(100dvh - 110px)); padding: var(--space-5); background: var(--color-surface); border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-panel); }
.self-check-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.self-check-kicker { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--weight-label) var(--text-caption)/1 var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.self-check-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-signal); }
.self-check[data-state="running"] .self-check-dot { animation: pulse 1s ease-in-out infinite; }
.self-check[data-state="done"] .self-check-dot { background: var(--color-success); }
@keyframes pulse { 50% { opacity: .25; } }
.self-check[hidden] { display: none; }
.self-check h2 { margin: var(--space-3) 0 var(--space-1); font-size: 1.25rem; line-height: 1.05; }
.self-check-intro { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-small); }
.self-check-list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; scroll-behavior: smooth; border-top: var(--rule-width) solid var(--color-ink); }
.self-check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 35px; padding-block: 2px; border-bottom: var(--border-width) solid var(--color-border); }
.self-check-name { grid-column: 1 / -1; overflow-wrap: anywhere; font-size: var(--text-small); font-weight: var(--weight-label); }
.self-check-name small { color: var(--color-review); font: 500 var(--text-caption) var(--font-code); }
.self-check-value { grid-column: 1; max-width: none; overflow-wrap: anywhere; color: var(--color-muted); font: var(--text-caption)/1.3 var(--font-code); white-space: normal; }
.self-check-row[data-state="running"] .self-check-value::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border-radius: 50%; background: var(--color-signal); animation: pulse .6s ease-in-out infinite; }
.self-check-row .ds-stamp { grid-column: 2; justify-self: center; padding: 2px var(--space-2); border-width: 2px; font-size: var(--text-caption); transform: rotate(-6deg); animation: stamp-in .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.self-check-summary { min-height: 2.8em; margin: var(--space-3) 0 0; font-weight: var(--weight-label); line-height: 1.4; }
.self-check-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.self-check-actions.is-pending { visibility: hidden; }
.self-check-row[data-state="queued"] { color: var(--color-muted); }
.self-check-head, .self-check-intro, .self-check-summary, .self-check-actions { flex-shrink: 0; }
.inspect-layer { position: absolute; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; }
.inspect-box { position: absolute; top: 0; left: 0; opacity: 0; border: var(--rule-width) dashed var(--color-signal); transition: transform var(--motion-normal) var(--ease-out), opacity var(--motion-normal) var(--ease-out); }
.inspect-layer.is-visible .inspect-box { opacity: 1; }
.inspect-tag { position: absolute; left: -2px; bottom: calc(100% + var(--space-3)); display: grid; gap: 2px; margin: 0; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-6); background: var(--color-tag); border: 1.5px solid var(--color-ink); border-radius: 3px 8px 8px 3px; font: var(--text-caption)/1.3 var(--font-code); white-space: nowrap; }
.inspect-tag::before { content: ""; position: absolute; left: var(--space-2); top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
.inspect-tag b { font: var(--weight-display) var(--text-small)/1.1 var(--font-display); font-stretch: var(--stretch-display); }

@media (max-width: 1100px) {
  main > section { width: calc(100% - 2 * var(--space-8)); }
  .block { padding-inline: var(--space-8); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid article:not(:nth-child(3n + 1)) { border-left: 0; }
  .feature-grid article:nth-child(even) { border-left: var(--border-width) solid var(--color-border); }
  .feature-grid article:nth-child(n + 3) { border-top: var(--border-width) solid var(--color-border); }
  .evidence-card { grid-template-columns: minmax(0, 1fr); }
  .evidence-shots { border-right: 0; border-bottom: var(--border-width) solid var(--color-border-strong); }
}
@media (max-width: 800px) {
  main > section { width: calc(100% - 2 * var(--space-6)); }
  main > .hero { margin-inline: var(--space-2); }
  .hero { --hero-gutter: var(--space-6); }
  .hero-copy { padding-block: var(--space-6) var(--space-8); }
  /* The orange arc peaks just above the example window, clear of the pricing line above it. */
  .hero-eyebrow { margin-bottom: var(--space-4); font-size: var(--text-caption); }
  .hero h1 { margin-bottom: var(--space-4); }
  /* Drop the desktop line break so balanced wrapping never leaves "site." alone. */
  .hero h1 br { display: none; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { margin-top: var(--space-5); gap: var(--space-2) var(--space-3); }
  .hero + .block { margin-top: var(--space-12); }
  .block { padding: var(--space-12) var(--space-5); }
  .block-head { margin-bottom: var(--space-8); text-align: left; }
  .faq-layout, .landing-footer { grid-template-columns: minmax(0, 1fr); }
  .faq-cta { grid-column: 1; }
  .intro-more, .plans-more { text-align: left; }
  .process-steps, .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .process-steps li, .feature-grid article { padding: var(--space-6) 0 0; }
  .process-steps li + li, .feature-grid article + article { margin-top: var(--space-6); border-left: 0; border-top: var(--border-width) solid var(--color-border); }
  .feature-grid article:nth-child(even) { border-left: 0; }
  .evidence-head { padding: var(--space-5) var(--space-4); }
  .evidence-shots, .evidence-details { padding: var(--space-4); gap: var(--space-3); }
  main > .closing { margin: var(--space-12) var(--space-2) var(--space-10); }
  .closing { padding: var(--space-12) var(--space-5); }
  .landing-footer .guide-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-table, .compare-table { min-width: 560px; }
  .table-hint { display: block; margin: 0 0 var(--space-2); color: var(--color-muted); font-size: var(--text-caption); }
}
@media (max-width: 700px) { .free-run { padding: var(--space-5) var(--space-4); } }
/* Short laptop and tablet-landscape screens (1024 × 768, 1280 × 720, 1366 × 768): while the free check form is
   shown, tighten the hero so its submit button is inside the first screen. The decorative mascot steps aside. */
@media (min-width: 641px) and (max-height: 860px) {
  .hero-copy:has(> .free-run:not([hidden])) { padding-block: var(--space-3); }
  .hero-copy:has(> .free-run:not([hidden])) > .sybqa-mascot { display: none; }
  .hero-copy:has(> .free-run:not([hidden])) > .hero-eyebrow { margin-bottom: var(--space-2); }
  .hero-copy:has(> .free-run:not([hidden])) > h1 { margin-bottom: var(--space-2); font-size: var(--text-display-2); }
  .hero-copy:has(> .free-run:not([hidden])) > .hero-lede { font-size: 1rem; }
  .hero-copy > .free-run { margin-top: var(--space-4); gap: var(--space-3); padding-block: var(--space-4); }
}
@media (max-width: 480px) {
  .hero { --hero-gutter: var(--space-4); }
  .block { padding-inline: 0; border-inline: 0; }
  .evidence-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inspect-box { transition: none; }
  .self-check-dot, .self-check-row .ds-stamp, .self-check-row .self-check-value::after { animation: none; }
}

/* Homepage example run ("Theatre"): a scripted inspection of the made-up site Fernly, shown in a browser window.
   Page-specific. Shared pieces (window, QC tag, string, ring, inspect box, cursor, tape, run log, stamp) come from
   ui/bench.css and ui/components.css. Only this file may reference --specimen-* (the made-up customer palette).
   Pattern: every state has a static end state on a state class (.is-in entered live, .is-set entered by instant replay);
   entrance motion exists only for live mode with motion allowed. Transform, translate, rotate, scale and opacity only. */

.hero-legend { min-width: 0; padding: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sheet); }
.legend-stamps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.legend-stamps > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); padding-inline: var(--space-1); }
.legend-stamps .ds-stamp { justify-self: start; }
.legend-stamps > li[data-active] { background: var(--color-highlight); }

/* ---- Stage frame ---- */
.stage { margin: 0; min-width: 0; }
.stage-window { background: var(--color-surface); }
.ds-window-url { flex: 1 1 0; height: 26px; padding-inline: 10px; display: flex; align-items: center; background: var(--color-canvas); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-control); font-weight: 500; }
.ds-window-nav > b { border-color: transparent; background: none; font: 700 18px/1 var(--font-body); }
.ds-window-nav > b[data-hover] { border-color: var(--color-ink); background: var(--color-canvas); }
.ds-window-nav > b[data-dim] { opacity: 1; color: var(--color-border-strong); }
.ds-window-note { flex: none; white-space: nowrap; }
.ds-window-note .note-short { display: none; }
.ds-window-load { opacity: 0; }
.ds-window-bar { height: 40px; }
.stage-view { position: relative; height: clamp(21rem, 52svh, 34rem); overflow: hidden; container-type: size; contain: layout paint style; background: var(--color-surface); border-radius: 0 0 6px 6px; }
.stage-cursor-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 6; overflow: hidden; border-radius: inherit; pointer-events: none; }
.stage-layer, .stage-scrim { position: absolute; inset: 0; pointer-events: none; }
.stage-scrim { background: var(--color-canvas); opacity: 0; }
.stage[data-state="done"] .stage-scrim { opacity: .5; }

/* ---- Fernly: a made-up customer site, authored at 1:1 and adapted by container query ---- */
.fl { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; visibility: hidden; opacity: 0; color: var(--specimen-text); font: 15px/1.5 var(--font-specimen);
  background: radial-gradient(circle at 20% 10%, var(--specimen-glow-a), transparent 50%), radial-gradient(circle at 90% 80%, var(--specimen-glow-b), transparent 45%), linear-gradient(135deg, var(--specimen-sky-a), var(--specimen-sky-b) 60%, var(--specimen-sky-c)); }
.stage-view[data-page="home"] .fl-home, .stage-view[data-page="login"] .fl-404 { visibility: visible; opacity: 1; }
.fl-404 { background: var(--color-surface); color: var(--color-ink); }
.fl-emoji { display: inline-block; width: 1.4em; font-style: normal; text-align: center; }
.fl-nav { display: flex; flex: none; justify-content: space-between; align-items: center; height: 52px; padding-inline: 28px; }
.fl-logo { font-size: 19px; }
.fl-logo b { font-weight: 800; }
.fl-links { display: flex; gap: 20px; font-size: 13px; }
.fl-links > span { padding: 2px 0; opacity: .88; }
.fl-links > span[data-hover] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.fl-404 .fl-links > span { opacity: 1; }
.fl-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; padding: 6px 28px 18px; }
.fl-pill { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border: 1px solid var(--specimen-glass-edge); border-radius: 999px; background: var(--specimen-pill); font-size: 11px; }
.fl-h1 { margin: 0 0 10px; font-size: clamp(26px, 4.7cqi, 40px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.fl-p { margin: 0; max-width: 34ch; color: var(--specimen-muted); font-size: 14px; }
.fl-stats { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; }
.fl-stats b { display: block; font-size: 19px; }
.fl-card { padding: 20px; border: 1px solid var(--specimen-glass-edge); border-radius: 20px; background: var(--specimen-glass); }
.fl-card-title { margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.fl-label { width: fit-content; margin: 8px 0 4px; font-size: 12px; opacity: .85; }
.fl-field { position: relative; display: flex; align-items: center; height: 38px; padding-inline: 12px; overflow: hidden; border: 1px solid var(--specimen-glass-edge); border-radius: 12px; background: var(--specimen-field); font-size: 13px; white-space: nowrap; }
.fl-ph { color: var(--specimen-muted); opacity: .7; }
.fl-field.has-value .fl-ph { display: none; }
.fl-value { border-right: 1.5px solid transparent; }
.fl-field[data-focus] { border-color: var(--specimen-text); }
.fl-field[data-focus] .fl-value { border-right-color: var(--specimen-text); }
.fl-field[data-invalid] { border-color: var(--specimen-error-edge); }
.fl-error { min-height: 20px; margin-top: 3px; color: var(--specimen-error); font-size: 12px; font-weight: 600; opacity: 0; }
.fl-error[data-on] { opacity: 1; }
.fl-btn { position: relative; display: grid; place-items: center; height: 42px; margin-top: 8px; border-radius: 12px; background: var(--specimen-cta); color: var(--specimen-cta-text); font-size: 14px; font-weight: 700; }
.fl-spin { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2.5px solid var(--specimen-cta-text); border-top-color: transparent; border-radius: 50%; opacity: 0; }
.fl-btn[data-busy] .fl-spin { opacity: 1; }
.fl-toast { position: absolute; left: 28px; bottom: 16px; padding: 10px 14px; border-radius: 14px; background: var(--specimen-toast); font-size: 12px; opacity: 0; }
.stage-view[data-toast] .fl-toast { opacity: 1; }
.fl-404-body { flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.fl-404-body b { font-size: clamp(44px, 12cqi, 84px); font-weight: 800; line-height: 1; }
.fl-404-body span { font-size: 14px; }
@container (max-width: 560px) {
  .fl-nav { height: 44px; padding-inline: 16px; }
  .fl-links > span:not(:last-child) { display: none; }
  .fl-hero { grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 0 16px 12px; }
  .fl-p, .fl-stats { display: none; }
  .fl-pill { margin-bottom: 6px; }
  .fl-h1 { margin: 0; font-size: 22px; }
  .fl-card { padding: 12px 14px; border-radius: 16px; }
  .fl-card-title { margin-bottom: 0; font-size: 15px; }
  .fl-label { margin: 4px 0 3px; font-size: 11px; }
  .fl-field { height: 34px; }
  .fl-error { min-height: 16px; margin-top: 1px; font-size: 11px; }
  .fl-btn { height: 38px; margin-top: 4px; }
  .fl-toast { display: none; }
}
@container (max-height: 430px) and (min-width: 561px) { .fl-p, .fl-stats { display: none; } }

/* ---- Overlays: tags, strings, rings, inspect box, cursor (end states; entrance motion is gated below) ---- */
.stage .ds-qc-tag { z-index: 3; width: clamp(9.5rem, 27cqi, 14rem); padding: 8px 12px 14px 30px; gap: 2px; font: 12px/1.3 var(--font-body); transform-origin: 14px 50%; visibility: hidden; opacity: 0; transition: opacity var(--motion-normal); }
.stage .ds-qc-tag.is-in, .stage .ds-qc-tag.is-set { visibility: visible; opacity: 1; }
.stage .ds-qc-tag::before { left: 9px; width: 10px; height: 10px; margin-top: -5px; }
.stage .ds-qc-tag-kind { font-size: 11px; }
.stage .ds-qc-tag-claim { font-size: 13px; line-height: 1.25; }
.stage .ds-qc-tag-claim--ai { font-size: 15px; line-height: 1.2; }
.stage .ds-qc-tag-value { display: grid; font-size: 11.5px; line-height: 1.3; }
.stage .ds-qc-tag-value > * { grid-area: 1 / 1; }
.stage .ds-qc-tag[data-state="measuring"] .ds-qc-tag-value::after, .stage .ds-qc-tag[data-state="done"] .ds-qc-tag-value::after { content: none; }
.stage .ds-qc-tag[data-state="measuring"] .v-done, .stage .ds-qc-tag[data-state="done"] .v-wait { visibility: hidden; }
.stage .ds-qc-tag[data-state="measuring"] .v-wait::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-signal); }
.stage .ds-qc-tag > .ds-stamp { position: absolute; right: -8px; bottom: -10px; margin: 0; padding: 2px 8px; border-width: 2.5px; font-size: 12px; rotate: -3deg; }
.stage-layer .ds-stamp:not(.is-in):not(.is-set) { opacity: 0; }
.stage .ds-qc-tag[data-verdict="dropped"] .ds-qc-tag-claim { text-decoration-thickness: 2px; }
.stage .ds-pass { position: absolute; left: 0; top: 0; z-index: 3; translate: var(--tx, 0px) var(--ty, 0px); background: var(--color-surface); border-width: 2.5px; font-size: 12px; }
.stage .ds-string { z-index: 2; translate: var(--sx, 0px) var(--sy, 0px); opacity: 0; }
.stage .ds-string.is-in, .stage .ds-string.is-set { opacity: 1; }
.stage .ds-ring { z-index: 2; stroke-width: 3.5; opacity: 0; }
.stage .ds-ring.is-in, .stage .ds-ring.is-set { opacity: 1; }
.stage .ds-inspect { z-index: 1; opacity: 0; transition: none; }
.stage .ds-inspect.is-in, .stage .ds-inspect.is-set { opacity: 1; }
.stage .ds-inspect-label { background: var(--color-ink); border-color: var(--color-ink); border-radius: 0; padding: 3px 7px; color: var(--color-on-night); font: 500 11px/1.2 var(--font-code); }
.stage .ds-inspect-label::before { content: none; }
.stage .ds-cursor { z-index: 5; opacity: 0; transition: opacity var(--motion-normal); }
.stage .ds-cursor.is-on { opacity: 1; }
.stage .ds-cursor > svg { display: block; width: 22px; height: 26px; }
.stage .ds-cursor-ring { left: -11px; top: -11px; width: 22px; height: 22px; }
.stage .ds-cursor-label { left: 16px; top: 22px; border-radius: 3px; }
.stage-say { display: flex; align-items: center; min-height: 3.2em; margin: var(--space-5) 0 0; font: 600 1.0625rem/1.35 var(--font-body); }
.stage-say::before { content: ""; flex: none; width: .65em; height: .65em; margin-right: .6em; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-signal); }
@media (min-width: 701px) { .stage-say { min-height: 1.6em; } }

/* ---- Panel: transport, scoreboard, run log ---- */
.stage-panel { margin-top: var(--space-3); background: var(--color-surface); border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-panel); }
.stage-controls { display: flex; align-items: stretch; gap: var(--space-3); padding: var(--space-2) var(--space-3); visibility: hidden; }
.stage[data-ready] .stage-controls { visibility: visible; }
.stage[data-mode="static"] .stage-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .stage-toggle { display: none; } }
.stage-toggle { min-width: 7.5rem; padding: 0 var(--space-4); gap: var(--space-2); }
.stage-toggle-icon { width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64% 100%); }
.stage-toggle[data-state="paused"] .stage-toggle-icon, .stage-toggle[data-state="done"] .stage-toggle-icon { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.stage .ds-tape { flex: 1 1 0; min-width: 0; }
.stage .ds-tape > li > button { gap: .4em; justify-content: flex-start; padding-inline: var(--space-2); font-size: var(--text-caption); text-transform: uppercase; overflow: hidden; }
.stage .ds-tape > li > button:focus-visible { outline-offset: -3px; }
.stage .ds-tape-fill { --p: 0; transition: none; }
.stage .ds-tape > li.is-set .ds-tape-fill, .stage .ds-tape > li.is-in .ds-tape-fill { --p: 1; }
.stage-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); padding: var(--space-2) var(--space-4); border-block: var(--border-width) solid var(--color-border); font: 500 var(--text-small)/1.4 var(--font-code); }
.stage-score b { font-weight: 800; }
.stage-score [data-score="danger"] b { color: var(--color-stamp); }
.stage-score [data-score="review"] b { color: var(--color-review); }
.stage-score [data-score="success"] b { color: var(--color-success); }
.stage-score [data-score="muted"] b { color: var(--color-muted); }
.stage-meta { display: inline-flex; gap: var(--space-3); margin-left: auto; white-space: nowrap; }
.stage-clock { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.stage-clock b { color: var(--color-ink); }
.stage-step { display: none; min-width: 9ch; text-align: right; }
.stage .ds-runlog { display: grid; grid-template-rows: repeat(3, 1fr); height: 84px; padding: var(--space-1) var(--space-4); font-size: var(--text-small); line-height: 1; }
.stage .ds-runlog > li { height: auto; align-items: center; }
.stage .ds-runlog > li:not(:last-child) { color: var(--color-muted); }
.stage .ds-runlog time { color: var(--color-action); }
.stage .ds-runlog b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.stage .ds-runlog b[data-tone="danger"] { color: var(--color-stamp); }
.stage .ds-runlog b[data-tone="review"] { color: var(--color-review); }
.stage .ds-runlog b[data-tone="success"] { color: var(--color-success); }
.stage .ds-runlog b[data-tone="muted"] { color: var(--color-muted); }
.stage .ds-runlog span { overflow: hidden; text-overflow: ellipsis; }
/* Phones: let the summary line wrap instead of truncating mid-word. */
@media (max-width: 559px) {
  .stage .ds-runlog { grid-template-rows: repeat(3, auto); height: auto; min-height: 84px; }
  .stage .ds-runlog > li { white-space: normal; }
  .stage .ds-runlog span { line-height: 1.25; }
}
.stage-transcript { margin-top: var(--space-4); }
.stage-transcript ol { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding-left: 0; list-style: none; color: var(--color-ink); }
.stage figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); margin-top: var(--space-3); color: var(--color-muted); font: italic var(--text-body)/1.4 var(--font-note); }
.stage-caption-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); font-style: normal; }
[data-done-cta] { visibility: hidden; }
.stage[data-state="done"] [data-done-cta] { visibility: visible; }
.stage[data-state="done"] [data-self-check] { background: var(--color-highlight); }

/* ---- Phones: compact tags, one chapter at a time, filed as a grid at the end ---- */
@container (max-width: 559px) {
  .stage .ds-qc-tag-kind { display: none; }
}
.stage[data-narrow] .ds-qc-tag { width: var(--cellw, 8rem); padding: 6px 8px 12px 24px; }
.stage[data-narrow] .ds-qc-tag::before { left: 6px; }
.stage[data-narrow] .ds-qc-tag-claim { font-size: 12px; }
.stage[data-narrow] .ds-qc-tag-claim--ai { font-size: 13px; }
.stage[data-narrow] .ds-qc-tag-value { font-size: 10.5px; }
.stage[data-narrow][data-mode] :is(.ds-qc-tag, .ds-string, .ds-pass).is-shelved { opacity: 0; animation: none; }
.stage[data-narrow][data-state="done"] .ds-qc-tag { opacity: 1; visibility: visible; transform: translate(var(--gx, 0px), var(--gy, 0px)) rotate(var(--rot, 0deg)); transition: transform .5s ease, opacity var(--motion-normal); }
.stage[data-narrow][data-state="done"] .ds-string { opacity: 0; }
.stage[data-narrow][data-state="done"] .ds-pass { translate: var(--gx, 0px) var(--gy, 0px); transition: translate .5s ease; }
@media (max-width: 700px) {
  .stage-view { height: clamp(24rem, 58svh, 30rem); }
  /* Room for the address: the dots and the forward arrow are decoration; Back stays because the run clicks it. */
  .stage-window .ds-window-bar { gap: var(--space-2); padding-inline: var(--space-2); }
  .stage-window .ds-window-dots, .stage-window .ds-window-nav > b:not([data-t]) { display: none; }
  .ds-window-url { padding-inline: 6px; }
  .ds-window-note .note-long { display: none; }
  .ds-window-note .note-short { display: inline; }
  .stage-controls { flex-wrap: wrap; }
  .stage-toggle { flex: 1 1 100%; }
  .stage .ds-tape { flex: 1 1 100%; }
  .stage .ds-tape > li > button span { display: none; }
  .stage .ds-tape > li > button { justify-content: center; }
  .stage-score { gap: var(--space-1) var(--space-3); font-size: var(--text-caption); }
  .stage-step { display: inline; color: var(--color-muted); }
  .stage-total { display: none; }
  /* Phone rows wrap to two lines (then an ellipsis) instead of cutting text mid-line; the box keeps a fixed height. */
  .stage .ds-runlog { grid-template-rows: repeat(3, 2.5em); height: auto; padding-block: var(--space-2); font-size: var(--text-caption); line-height: 1.25; }
  .stage .ds-runlog > li { grid-template-columns: 2.4rem 4.2rem minmax(0, 1fr); align-items: start; white-space: normal; }
  .stage .ds-runlog span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .stage figcaption { display: grid; }
}
@supports not (container-type: size) { .stage-view, .stage-panel { display: none; } }

/* ---- Motion: live mode only, motion allowed. Pause freezes it all through [data-paused] (components.css). ---- */
.ticker-track { animation-play-state: paused; }
html[data-hero-motion="on"] .ticker-track { animation-play-state: running; }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-mode="live"] .ds-qc-tag.is-in { animation: ds-tag-drop .5s var(--ease-stamp) both; }
  .stage[data-mode="live"] .ds-cursor[data-travel="a"] { animation: ds-travel-a var(--dur, 900ms) var(--ease-glide) both; }
  .stage[data-mode="live"] .ds-cursor[data-travel="b"] { animation: ds-travel-b var(--dur, 900ms) var(--ease-glide) both; }
  .stage[data-mode="live"] .ds-inspect.is-in { animation: stage-pop .18s ease-out both; }
  .stage[data-mode="live"] .ds-window-load[data-go="a"] { animation: stage-load-a .8s ease-out both; }
  .stage[data-mode="live"] .ds-window-load[data-go="b"] { animation: stage-load-b .8s ease-out both; }
  .stage[data-mode="live"] .say-text[data-fresh] { animation: stage-say .25s ease-out both; }
  .stage[data-mode="live"] .ds-runlog > li.is-new > * { animation: ds-ledger-in .16s ease-out both; }
  .stage[data-mode="live"] .ds-tape > li[data-run="a"] .ds-tape-fill { animation: stage-fill-a var(--dur, 1s) linear var(--skip, 0s) both; }
  .stage[data-mode="live"] .ds-tape > li[data-run="b"] .ds-tape-fill { animation: stage-fill-b var(--dur, 1s) linear var(--skip, 0s) both; }
  .stage[data-mode="live"] .fl-btn[data-busy] .fl-spin { animation: stage-spin .8s linear infinite; }
  .stage[data-mode="live"] .ds-qc-tag[data-state="measuring"] .v-wait::after { animation: ds-pulse .6s ease-in-out infinite; }
  .stage[data-mode="live"] .stage-view .fl, .stage[data-mode="live"] .stage-view .fl-toast, .stage[data-mode="live"] .fl-error, .stage[data-mode="live"] .stage-scrim { transition: opacity .15s; }
  .stage[data-state="done"] .fl-btn[data-busy] .fl-spin, .stage[data-state="done"] .ds-qc-tag .v-wait::after, .stage[data-state="done"] .fl-field .fl-value { animation: none; }
}
/* Reduced motion: the shared rule shortens every transition to .01ms but keeps transition-property: all, so a
   stylesheet arriving late or a resize re-file starts one-frame transitions. Captured or measured in that frame,
   the example showed black specimen text (failing the contrast check) and tags without their text. No transitions
   at all inside the example run. */
@media (prefers-reduced-motion: reduce) { .stage, .stage *, .stage *::before, .stage *::after, .hero-legend * { transition: none !important; } }
@keyframes stage-pop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes stage-load-a { from { scale: 0 1; opacity: 1; } 70% { scale: .85 1; opacity: 1; } to { scale: 1 1; opacity: 0; } }
@keyframes stage-load-b { from { scale: 0 1; opacity: 1; } 70% { scale: .85 1; opacity: 1; } to { scale: 1 1; opacity: 0; } }
@keyframes stage-say { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes stage-fill-a { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stage-fill-b { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stage-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* ---- Forced colors ---- */
@media (forced-colors: active) {
  .stage .ds-qc-tag, .stage .ds-stamp, .stage .ds-tape, .stage .ds-ring { border-color: CanvasText; }
  .stage .ds-qc-tag > .ds-stamp, .stage .ds-pass { border-width: 2px; }
  .stage .ds-tape-fill { background: Highlight; }
}

.sybqa-mascot { display: inline-block; position: relative; width: 88px; height: 88px; vertical-align: middle; }
.sybqa-mascot img { width: 100%; height: 100%; object-fit: contain; }
.sybqa-mascot-season { display: none; position: absolute; width: 18px; height: 18px; right: 0; bottom: 8px; background: var(--season-decoration); border: 2px solid var(--color-surface); }
[data-season="halloween"] .sybqa-mascot-season { display: block; border-radius: 50%; }
[data-season="thanksgiving"] .sybqa-mascot-season { display: block; border-radius: 0 70% 0 70%; }
[data-season="christmas"] .sybqa-mascot-season { display: block; clip-path: polygon(50% 0,100% 100%,0 100%); }
@media (forced-colors: active) { .sybqa-mascot-season { display: none; } }

.page-head .sybqa-mascot { width: 36px; height: 36px; }
.page-head .sybqa-mascot-season { width: 10px; height: 10px; bottom: 0; }


:root{--bundled-css:"/ui/tokens.css /ui/components.css /ui/bench.css /ui/site.css /landing.css /hero-stage.css /ui/seasonal-theme.css"}