/* =====================================================================
   Cadeus v3 — component layer, the Hermeslines look (V3_PLAN.md).

   The reference is the public site (staging.hermeslines.com): Outfit,
   near-black surfaces, hairline borders, 5px controls and 10px cards,
   the green gradient for the one primary action, eyebrow labels, striped
   tables. Material 3 contributes only structure: the typescale names, the
   component set and the hover/focus/press state layers.

   The component set mirrors m3.css one-for-one with a `v3-` prefix (same
   modifiers: .tonal, .outlined, .text, .filled, .dense, .is-selected…), so a
   page converts by renaming classes — see V3_PLAN.md section 2.3. Colour
   comes ONLY from tokens.css (--hl-*).
   ===================================================================== */

/* Outfit (SIL Open Font License 1.1), self-hosted — see fonts/README.md.
   One variable file per subset covers every weight 400–700. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Outfit-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Outfit-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --v3-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --v3-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --v3-weight-heading: 500;

  /* Type sizes, read off the public site (fluid between phone and desktop). */
  --v3-text-display-lg: clamp(2.99rem, 2.99rem + ((1vw - .2rem) * 6.036), 6.31rem);
  --v3-text-display: clamp(2.49rem, 2.49rem + ((1vw - .2rem) * 4.073), 4.73rem);
  --v3-text-h1: clamp(2.07rem, 2.07rem + ((1vw - .2rem) * 2.691), 3.55rem);
  --v3-text-h2: clamp(1.73rem, 1.73rem + ((1vw - .2rem) * 1.691), 2.66rem);
  --v3-text-h3: clamp(1.44rem, 1.44rem + ((1vw - .2rem) * 1.018), 2rem);
  --v3-text-h4: clamp(1.2rem, 1.2rem + ((1vw - .2rem) * .4), 1.44rem);
  --v3-text-body: clamp(1rem, 1rem + ((1vw - .2rem) * .236), 1.13rem);
  --v3-text-fixed: 1rem;
  --v3-text-small: .875rem;
  --v3-text-eyebrow: .84rem;
  --v3-text-caption: .75rem;

  /* Shape: the site uses exactly two radii, plus pills. */
  --v3-radius-btn: 5px;
  --v3-radius-card: 10px;
  --v3-radius-sheet: 20px;
  --v3-radius-full: 1000px;

  /* Spacing — the site's named steps, and a 4px grid for dense portal UI. */
  --v3-gutter: 20px;
  --v3-tight: .44rem; --v3-snug: .67rem; --v3-base: 1rem; --v3-relaxed: 1.5rem;
  --v3-loose: 2.25rem; --v3-spacious: 3.38rem; --v3-vast: 5.06rem; --v3-card-pad: 48px;
  --v3-s1: 4px; --v3-s2: 8px; --v3-s3: 12px; --v3-s4: 16px; --v3-s5: 20px;
  --v3-s6: 24px; --v3-s8: 32px; --v3-s10: 40px; --v3-s12: 48px;

  /* Motion — the site uses the M3 durations and easings. */
  --v3-ease: cubic-bezier(.2, 0, 0, 1);
  --v3-ease-out: cubic-bezier(.05, .7, .1, 1);
  --v3-fast: .15s; --v3-med: .3s;

  /* State layers (M3: hover 8%, focus 10%, pressed 16%) */
  --v3-state-hover: .08; --v3-state-focus: .10; --v3-state-press: .16;

  /* M3 names that page scripts still write into inline styles (a script's
     only permitted change is the m3- -> v3- prefix), resolved to v3 values. */
  --md-sys-shape-none: 0; --md-sys-shape-xs: var(--v3-radius-btn); --md-sys-shape-sm: var(--v3-radius-btn);
  --md-sys-shape-md: var(--v3-radius-card); --md-sys-shape-lg: var(--v3-radius-card);
  --md-sys-shape-lg-inc: var(--v3-radius-card); --md-sys-shape-xl: var(--v3-radius-sheet);
  --md-sys-shape-xl-inc: var(--v3-radius-sheet); --md-sys-shape-xxl: var(--v3-radius-sheet);
  --md-sys-shape-full: var(--v3-radius-full);
  --md-sys-elevation-1: var(--hl-shadow-natural); --md-sys-elevation-2: var(--hl-shadow-natural);
  --md-sys-elevation-3: var(--hl-shadow-float); --md-sys-elevation-4: var(--hl-shadow-float);
  --md-sys-elevation-5: var(--hl-shadow-float);
  --md-state-hover: var(--v3-state-hover); --md-state-focus: var(--v3-state-focus); --md-state-press: var(--v3-state-press);
  --md-ref-typeface: var(--v3-font); --md-ref-typeface-mono: var(--v3-font-mono);

  --v3-header-h: 59px;
  --v3-content-max: 1440px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v3 {
  margin: 0; min-height: 100vh;
  font-family: var(--v3-font); font-size: var(--v3-text-fixed); line-height: 1.6; font-weight: 400;
  background: var(--hl-bg); color: var(--hl-ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.v3 :where(a) { color: var(--hl-brand-text); text-underline-offset: 3px; }
.v3 [hidden] { display: none !important; }
.v3 :focus-visible { outline: 2px solid var(--hl-brand); outline-offset: 2px; }
.v3 code, .v3 .v3-mono { font-family: var(--v3-font-mono); font-size: .9em; }
/* Fieldsets default to min-width: min-content, which lets one wide field
   push a whole form (and the page) past a phone's width. */
.v3 fieldset { min-width: 0; }
.v3 hr { border: 0; border-top: 1px solid var(--hl-hairline); margin: var(--v3-s4) 0; }
.v3 h1, .v3 h2, .v3 h3, .v3 h4 { margin: 0; font-weight: var(--v3-weight-heading); text-wrap: balance; }
.v3 p { text-wrap: pretty; }
.v3 ::selection { background: color-mix(in srgb, var(--hl-brand) 40%, transparent); }
.v3-muted { color: var(--hl-ink-muted); }
.v3-secondary { color: var(--hl-ink-secondary); }
.v3-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Typescale (M3 names, Hermeslines sizes) ---------- */
.v3-display-large   { font-size: var(--v3-text-display-lg); line-height: 1.02; font-weight: 500; letter-spacing: -.01em; }
.v3-display-medium  { font-size: var(--v3-text-display); line-height: 1.05; font-weight: 500; letter-spacing: -.005em; }
.v3-display-small   { font-size: var(--v3-text-h1); line-height: 1.1; font-weight: 500; }
.v3-headline-large  { font-size: var(--v3-text-h1); line-height: 1.1; font-weight: 500; }
.v3-headline-medium { font-size: var(--v3-text-h2); line-height: 1.15; font-weight: 500; }
.v3-headline-small  { font-size: var(--v3-text-h3); line-height: 1.2; font-weight: 500; }
.v3-title-large     { font-size: var(--v3-text-h4); line-height: 1.3; font-weight: 500; }
.v3-title-medium    { font-size: var(--v3-text-body); line-height: 1.45; font-weight: 500; }
.v3-title-small     { font-size: var(--v3-text-fixed); line-height: 1.45; font-weight: 500; }
.v3-body-large      { font-size: var(--v3-text-body); line-height: 1.6; font-weight: 400; }
.v3-body-medium     { font-size: var(--v3-text-fixed); line-height: 1.55; font-weight: 400; }
.v3-body-small      { font-size: var(--v3-text-small); line-height: 1.45; font-weight: 400; }
.v3-label-large     { font-size: var(--v3-text-fixed); line-height: 1.25; font-weight: 500; }
.v3-label-medium    { font-size: var(--v3-text-small); line-height: 1.3; font-weight: 500; }
.v3-label-small     { font-size: var(--v3-text-caption); line-height: 1.35; font-weight: 500; letter-spacing: .02em; }
/* The site's section label: small caps-style, wide tracking. */
.v3-eyebrow { font-size: var(--v3-text-eyebrow); line-height: 1.4; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--hl-ink); }
.v3-eyebrow.muted { color: var(--hl-ink-muted); }

/* ---------- Icons: Material Symbols, drawn light to sit with Outfit ---------- */
.v3-icon {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  user-select: none; flex: none;
}
.v3-icon.is-filled { font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; }
.v3-icon.sm { font-size: 18px; }

/* ---------- State layer helper ---------- */
.v3-state { position: relative; overflow: hidden; isolation: isolate; }
.v3-state::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor;
  opacity: 0; transition: opacity var(--v3-fast) linear; pointer-events: none; z-index: -1; }
.v3-state:hover::after { opacity: var(--v3-state-hover); }
.v3-state:focus-visible::after { opacity: var(--v3-state-focus); }
.v3-state:active::after { opacity: var(--v3-state-press); }

/* ---------- Buttons ----------
   default   the green gradient (one per view: the main action)
   .outlined 1px outline, the site's "Send Mail"
   .contrast 2px ink border that fills on hover, the site's CTA partner
   .text     the site's "Log in"
   .tonal    a quiet filled surface
   .elevated surface with the site's natural shadow */
.v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v3-s2);
  min-height: 44px; padding: 11px 16px; border-radius: var(--v3-radius-btn);
  border: 1px solid transparent; background: var(--hl-brand-gradient); color: var(--hl-on-brand);
  font: 400 var(--v3-text-fixed)/1 var(--v3-font); letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter var(--v3-fast) var(--v3-ease), background-color var(--v3-fast) var(--v3-ease),
              color var(--v3-fast) var(--v3-ease), border-color var(--v3-fast) var(--v3-ease);
}
.v3-btn:hover { filter: brightness(1.1); }
.v3-btn:active { filter: brightness(.95); }
.v3-btn .v3-icon { font-size: 18px; margin-left: -2px; }
.v3-btn.outlined { background: transparent; color: var(--hl-ink-secondary); border-color: var(--hl-outline); }
.v3-btn.contrast { background: transparent; color: var(--hl-ink); border: 2px solid var(--hl-ink); padding: 10px 15px; }
.v3-btn.contrast:hover { background: var(--hl-ink); color: var(--hl-bg); filter: none; }
.v3-btn.text { background: transparent; color: var(--hl-ink-muted); padding-left: 12px; padding-right: 12px; }
.v3-btn.tonal { background: var(--hl-surface-raised); color: var(--hl-ink); border-color: var(--hl-hairline); }
.v3-btn.elevated { background: var(--hl-surface); color: var(--hl-ink); border-color: var(--hl-hairline);
  box-shadow: var(--hl-shadow-natural); }
.v3-btn.outlined:hover, .v3-btn.text:hover, .v3-btn.tonal:hover, .v3-btn.elevated:hover {
  filter: none; background: var(--hl-surface-hover); color: var(--hl-ink); }
.v3-btn.danger { background: var(--hl-error); color: var(--hl-bg); }
.v3-btn.danger.outlined, .v3-btn.danger.text { background: transparent; color: var(--hl-error); }
.v3-btn.danger.outlined { border-color: var(--hl-error); }
.v3-btn.danger.outlined:hover, .v3-btn.danger.text:hover { background: var(--hl-error-soft); color: var(--hl-error); }
.v3-btn.wrap { white-space: normal; line-height: 1.3; text-align: center; }
.v3-btn.sm { min-height: 34px; padding: 6px 12px; font-size: var(--v3-text-small); }
.v3-btn.lg { min-height: 52px; padding: 14px 26px; font-size: var(--v3-text-body); }
.v3-btn.contrast.lg { padding: 12px 24px; }
.v3-btn:disabled, .v3-btn[aria-disabled="true"] {
  background: color-mix(in srgb, var(--hl-ink) 10%, transparent); color: color-mix(in srgb, var(--hl-ink) 40%, transparent);
  border-color: transparent; box-shadow: none; filter: none; cursor: not-allowed; pointer-events: none; }
.v3-btn.outlined:disabled, .v3-btn.text:disabled, .v3-btn.contrast:disabled { background: transparent;
  border-color: color-mix(in srgb, var(--hl-ink) 12%, transparent); }

/* Icon buttons (the site's header triggers) */
.v3-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v3-s1);
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: var(--v3-radius-btn);
  border: 1px solid transparent; background: transparent; color: var(--hl-ink-muted);
  cursor: pointer; text-decoration: none; transition: background-color var(--v3-fast) var(--v3-ease), color var(--v3-fast) var(--v3-ease); }
.v3-icon-btn:hover { background: var(--hl-surface); color: var(--hl-ink); }
.v3-icon-btn:active { background: var(--hl-surface-hover); }
.v3-icon-btn.filled { background: var(--hl-brand-gradient); color: var(--hl-on-brand); }
.v3-icon-btn.filled:hover { filter: brightness(1.1); }
.v3-icon-btn.tonal { background: var(--hl-surface-raised); color: var(--hl-ink); }
.v3-icon-btn.outlined { border-color: var(--hl-hairline); }
/* Keyboard hint keys, as in the site's "⌘ H" support trigger. */
.v3-kbd { display: inline-grid; place-items: center; min-width: 19px; height: 22px; padding: 0 4px;
  border: 1px solid var(--hl-hairline); border-radius: var(--v3-radius-btn);
  font: 500 var(--v3-text-caption)/1 var(--v3-font); color: var(--hl-ink-muted); }

/* FAB / extended FAB */
.v3-fab { display: inline-flex; align-items: center; gap: var(--v3-s3); min-height: 52px; min-width: 52px;
  padding: 0 var(--v3-s5); border-radius: var(--v3-radius-card); border: 0;
  background: var(--hl-brand-gradient); color: var(--hl-on-brand); box-shadow: var(--hl-shadow-natural);
  font: 400 var(--v3-text-fixed)/1 var(--v3-font); cursor: pointer; text-decoration: none; }
.v3-fab:hover { filter: brightness(1.1); }
.v3-fab.extended { padding: 0 var(--v3-s6) 0 var(--v3-s5); }

/* Segmented (the site's lb / kg toggle) */
.v3-segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hl-hairline);
  border-radius: var(--v3-radius-btn); background: var(--hl-surface); flex-wrap: wrap; }
.v3-segmented > * {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; min-width: 44px;
  padding: 0 12px; border: 0; border-radius: var(--v3-radius-btn); background: transparent;
  color: var(--hl-ink-muted); font: 400 var(--v3-text-small)/1 var(--v3-font); cursor: pointer; text-decoration: none;
  transition: background-color .2s var(--v3-ease), color .2s var(--v3-ease); }
.v3-segmented > *:hover { color: var(--hl-ink); background: var(--hl-surface-hover); }
.v3-segmented > .is-selected, .v3-segmented > [aria-pressed="true"], .v3-segmented > [aria-selected="true"] {
  background: var(--hl-brand); color: var(--hl-on-brand); }

/* ---------- Cards ----------
   default   surface + hairline (the site's table and FAQ panels)
   .filled   raised surface, no border
   .outlined transparent, hairline
   .feature  ink border + natural shadow (the site's price cards)
   .brand    the gradient card */
.v3-card { background: var(--hl-surface); color: var(--hl-ink); border: 1px solid var(--hl-hairline);
  border-radius: var(--v3-radius-card); padding: var(--v3-s6); min-width: 0; }
.v3-card.filled { background: var(--hl-surface-raised); border-color: transparent; }
.v3-card.outlined { background: transparent; }
.v3-card.feature { background: transparent; border-color: var(--hl-ink); box-shadow: var(--hl-shadow-natural); }
.v3-card.brand { background: var(--hl-brand-gradient); color: var(--hl-on-brand); border-color: transparent;
  box-shadow: var(--hl-shadow-natural); }
.v3-card.roomy { padding: clamp(24px, 4vw, var(--v3-card-pad)); }
.v3-card.flush { padding: 0; overflow: hidden; }
.v3-card-head { display: flex; align-items: center; gap: var(--v3-s3); margin-bottom: var(--v3-s4); }
.v3-card-head .v3-card-title { font-size: var(--v3-text-body); line-height: 1.4; font-weight: 500; margin: 0; }
.v3-card-head .v3-spacer { flex: 1; }
.v3-card-actions { display: flex; justify-content: flex-end; gap: var(--v3-s2); margin-top: var(--v3-s5); flex-wrap: wrap; }
a.v3-card { display: block; text-decoration: none; color: var(--hl-ink);
  transition: background-color .2s var(--v3-ease), border-color .2s var(--v3-ease); }
a.v3-card:hover { background: var(--hl-surface-hover); }
a.v3-card.outlined:hover { border-color: var(--hl-outline); background: transparent; }

/* Stat tile */
.v3-stat { background: var(--hl-surface); border: 1px solid var(--hl-hairline); border-radius: var(--v3-radius-card);
  padding: var(--v3-s5); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-stat .v3-stat-label { font-size: var(--v3-text-eyebrow); line-height: 1.4; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--hl-ink-muted); }
.v3-stat .v3-stat-value { font-size: var(--v3-text-h3); line-height: 1.15; font-weight: 500; color: var(--hl-ink);
  font-variant-numeric: tabular-nums; }
.v3-stat .v3-stat-sub { font-size: var(--v3-text-small); line-height: 1.4; color: var(--hl-ink-muted); }
.v3-stat .v3-stat-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  color: var(--hl-brand-text); font-size: var(--v3-text-small); text-decoration: none; }
.v3-stat .v3-stat-link:hover { text-decoration: underline; }
.v3-stat .v3-stat-link .v3-icon { font-size: 16px; }

/* ---------- Lists ---------- */
.v3-list { list-style: none; margin: 0; padding: var(--v3-s1) 0; }
.v3-list-item { display: flex; align-items: center; gap: var(--v3-s4); min-height: 56px;
  padding: var(--v3-s3) var(--v3-s4); color: var(--hl-ink); text-decoration: none; position: relative;
  transition: background-color .2s var(--v3-ease); }
a.v3-list-item:hover, button.v3-list-item:hover { background: var(--hl-surface-hover); }
button.v3-list-item { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.v3-list-item + .v3-list-item.divided, .v3-list.divided > .v3-list-item + .v3-list-item { border-top: 1px solid var(--hl-hairline); }
.v3-list-item.is-selected, .v3-list-item[aria-current="true"] { background: var(--hl-surface-hover);
  box-shadow: inset 3px 0 0 var(--hl-brand); }
.v3-list-item .v3-li-lead { color: var(--hl-ink-muted); display: flex; }
.v3-list-item .v3-li-body { flex: 1; min-width: 0; }
/* Block-level, so a script that builds a row from <span>s still stacks them. */
.v3-list-item .v3-li-headline, .v3-list-item .v3-li-support, .v3-list-item .v3-li-overline { display: block; }
.v3-list-item .v3-li-headline { font-size: var(--v3-text-fixed); line-height: 1.45; }
.v3-list-item .v3-li-support { font-size: var(--v3-text-small); line-height: 1.45; color: var(--hl-ink-muted); }
.v3-list-item .v3-li-overline { font-size: var(--v3-text-caption); line-height: 1.4; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--hl-ink-muted); }
.v3-list-item .v3-li-trail { color: var(--hl-ink-muted); font-size: var(--v3-text-small); line-height: 1.4;
  display: flex; align-items: center; gap: var(--v3-s2); }

/* ---------- Data table (the site's pricing tables) ---------- */
.v3-table-wrap { overflow-x: auto; border-radius: var(--v3-radius-card); border: 1px solid var(--hl-hairline);
  background: var(--hl-surface); }
.v3-table { width: 100%; border-collapse: collapse; font-size: var(--v3-text-fixed); line-height: 1.45; }
.v3-table th { text-align: left; font-size: var(--v3-text-eyebrow); line-height: 1.4; font-weight: 700;
  color: var(--hl-ink-muted); background: var(--hl-surface); padding: 12px 16px;
  border-bottom: 1px solid var(--hl-hairline); white-space: nowrap; }
.v3-table td { padding: 12px 16px; border-bottom: 1px solid var(--hl-hairline); color: var(--hl-ink-secondary);
  vertical-align: middle; transition: background-color .2s var(--v3-ease); }
.v3-table tbody tr:nth-child(even) td { background: var(--hl-surface-stripe); }
.v3-table tbody tr:last-child td { border-bottom: 0; }
.v3-table tbody tr:hover td { background: var(--hl-surface-hover); }
.v3-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.v3-table tr.is-selected td { background: var(--hl-brand-soft); }
@media (min-width: 640px) { .v3-table th, .v3-table td { padding: 16px 20px; } }

/* ---------- Chips (the site's service pills) ---------- */
.v3-chip { display: inline-flex; align-items: center; gap: var(--v3-s2); min-height: 34px; padding: 0 14px;
  border-radius: var(--v3-radius-full); border: 1px solid var(--hl-hairline); background: var(--hl-surface);
  color: var(--hl-ink-secondary); font: 400 var(--v3-text-small)/1 var(--v3-font); cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background-color .2s var(--v3-ease), color .2s var(--v3-ease); }
.v3-chip:hover { background: var(--hl-surface-hover); color: var(--hl-ink); }
.v3-chip .v3-icon { font-size: 18px; margin-left: -4px; }
.v3-chip.is-selected, .v3-chip[aria-pressed="true"], .v3-chip[aria-selected="true"] {
  background: var(--hl-brand); color: var(--hl-on-brand); border-color: transparent; }
.v3-chip-set { display: flex; gap: var(--v3-s2); flex-wrap: wrap; align-items: center; }

/* Status tag — small, non-interactive. */
.v3-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px;
  border-radius: var(--v3-radius-btn); font-size: var(--v3-text-caption); line-height: 1.3; font-weight: 500;
  letter-spacing: .02em; white-space: nowrap; background: var(--hl-surface-hover); color: var(--hl-ink-secondary); }
.v3-tag.primary, .v3-tag.success { background: var(--hl-brand-soft); color: var(--hl-brand-text); }
.v3-tag.secondary { background: var(--hl-accent-soft); color: var(--hl-ink); }
.v3-tag.error { background: var(--hl-error-soft); color: var(--hl-error); }

/* Badge (a count on an icon or nav item) */
.v3-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--v3-radius-full); background: var(--hl-brand); color: var(--hl-on-brand);
  font-size: 11px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.v3-badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

/* ---------- Text fields (the site's contact form: label above) ---------- */
.v3-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-field > label, .v3-field > .v3-field-label { order: -1; font-size: var(--v3-text-fixed); line-height: 1.5;
  color: var(--hl-ink-muted); }
.v3-field input, .v3-field select, .v3-field textarea, .v3-input {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--v3-radius-btn);
  border: 1px solid var(--hl-hairline); background: var(--hl-surface); color: var(--hl-ink);
  font: 400 var(--v3-text-fixed)/1.5 var(--v3-font); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--v3-ease), box-shadow .2s var(--v3-ease); }
.v3-field input::placeholder, .v3-field textarea::placeholder, .v3-input::placeholder { color: var(--hl-ink-muted); opacity: 1; }
.v3-field textarea, textarea.v3-input { min-height: 120px; resize: vertical; }
.v3-field select, select.v3-input { padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--hl-ink-muted) 50%),
                    linear-gradient(135deg, var(--hl-ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.v3-field input:hover, .v3-field select:hover, .v3-field textarea:hover, .v3-input:hover { border-color: var(--hl-outline); }
.v3-field input:focus, .v3-field select:focus, .v3-field textarea:focus, .v3-input:focus {
  border-color: var(--hl-brand); box-shadow: 0 0 0 1px var(--hl-brand); }
.v3-field:focus-within > label { color: var(--hl-ink); }
.v3-field.dense input, .v3-field.dense select, .v3-input.dense { min-height: 40px; padding: 8px 12px; font-size: var(--v3-text-small); }
.v3-field.dense > label { font-size: var(--v3-text-small); }
.v3-field .v3-field-support { font-size: var(--v3-text-small); line-height: 1.4; color: var(--hl-ink-muted); }
.v3-field.has-error input, .v3-field.has-error select, .v3-field.has-error textarea { border-color: var(--hl-error); }
.v3-field.has-error > label, .v3-field.has-error .v3-field-support { color: var(--hl-error); }
.v3-field input:disabled, .v3-field select:disabled, .v3-field textarea:disabled, .v3-input:disabled {
  color: color-mix(in srgb, var(--hl-ink) 40%, transparent); background: transparent; cursor: not-allowed; }
/* Checkboxes/radios inside a field keep native rendering, not the text-input box */
.v3-field input[type="checkbox"], .v3-field input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; border: 0; box-shadow: none;
  appearance: auto; -webkit-appearance: auto; accent-color: var(--hl-brand); cursor: pointer; }
.v3-form-grid { display: grid; gap: var(--v3-s5) var(--v3-s4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.v3-form-grid .span-all { grid-column: 1 / -1; }

/* Read-only value in the field pattern */
.v3-field-value { min-height: 52px; padding: 12px 16px; border-radius: var(--v3-radius-btn);
  border: 1px solid var(--hl-hairline); background: transparent; color: var(--hl-ink-secondary);
  font: 400 var(--v3-text-fixed)/1.5 var(--v3-font); word-break: break-word; }
.v3-field-value.block { white-space: pre-wrap; }

/* Search bar */
.v3-search { display: flex; align-items: center; gap: var(--v3-s2); min-height: 48px; padding: 0 var(--v3-s4);
  border-radius: var(--v3-radius-btn); border: 1px solid var(--hl-hairline); background: var(--hl-surface);
  color: var(--hl-ink-muted); max-width: 720px; transition: border-color .2s var(--v3-ease), box-shadow .2s var(--v3-ease); }
.v3-search:focus-within { border-color: var(--hl-brand); box-shadow: 0 0 0 1px var(--hl-brand); }
.v3-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--hl-ink);
  font: 400 var(--v3-text-fixed)/1.5 var(--v3-font); }
.v3-search input::placeholder { color: var(--hl-ink-muted); }
.v3-search.dense { min-height: 40px; }

/* File upload drop area */
.v3-upload-drop { text-align: center; border: 1px dashed var(--hl-outline); border-radius: var(--v3-radius-card);
  padding: var(--v3-s5); background: var(--hl-surface); }
.v3-upload-label { display: flex; align-items: center; justify-content: center; gap: var(--v3-s3);
  min-height: 52px; cursor: pointer; color: var(--hl-ink); }
.v3-upload-label .v3-icon { color: var(--hl-brand-text); font-size: 28px; }
.v3-upload-drop input[type="file"] { display: block; width: 100%; margin-top: var(--v3-s3); color: var(--hl-ink-muted);
  font: 400 var(--v3-text-small)/1.4 var(--v3-font); }
.v3-upload-drop input[type="file"]::file-selector-button { margin-right: var(--v3-s3); min-height: 34px; padding: 0 12px;
  border: 1px solid var(--hl-outline); border-radius: var(--v3-radius-btn); background: transparent; cursor: pointer;
  color: var(--hl-ink-secondary); font: 400 var(--v3-text-small)/1 var(--v3-font); }

/* Checkbox / radio / switch */
.v3 input[type="checkbox"], .v3 input[type="radio"] { accent-color: var(--hl-brand); width: 18px; height: 18px; }
.v3-check { display: inline-flex; align-items: center; gap: var(--v3-s3); cursor: pointer; min-height: 40px; }
.v3-switch { appearance: none; -webkit-appearance: none; position: relative; width: 48px; height: 28px; margin: 0; flex: none;
  border-radius: var(--v3-radius-full); border: 1px solid var(--hl-hairline); background: var(--hl-surface-hover);
  cursor: pointer; transition: background-color .2s var(--v3-ease), border-color .2s var(--v3-ease); }
.v3-switch::before { content: ""; position: absolute; top: 50%; left: 4px; width: 18px; height: 18px;
  transform: translateY(-50%); border-radius: 50%; background: var(--hl-ink-muted);
  transition: left .2s var(--v3-ease), background-color .2s var(--v3-ease); }
.v3-switch:checked { background: var(--hl-brand); border-color: transparent; }
.v3-switch:checked::before { left: 25px; background: var(--hl-on-brand); }

/* ---------- Tabs ---------- */
.v3-tabs { display: flex; gap: var(--v3-s1); border-bottom: 1px solid var(--hl-hairline); overflow-x: auto; scrollbar-width: none; }
.v3-tabs > * { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px;
  padding: 0 var(--v3-s3); border: 0; background: transparent; color: var(--hl-ink-muted);
  font: 400 var(--v3-text-fixed)/1 var(--v3-font); cursor: pointer; text-decoration: none; position: relative;
  transition: color .2s var(--v3-ease); }
.v3-tabs > *:hover { color: var(--hl-ink); }
.v3-tabs > .is-active, .v3-tabs > [aria-selected="true"] { color: var(--hl-ink); }
.v3-tabs > .is-active::after, .v3-tabs > [aria-selected="true"]::after { content: ""; position: absolute;
  left: var(--v3-s3); right: var(--v3-s3); bottom: -1px; height: 2px; background: var(--hl-brand); }
.v3-tabs .v3-badge { margin-left: 2px; }

/* ---------- Dialog ---------- */
.v3-scrim { position: fixed; inset: 0; background: var(--hl-scrim); display: flex; align-items: center; justify-content: center;
  padding: var(--v3-gutter); z-index: 1000; }
.v3-scrim[hidden] { display: none; }
.v3-dialog { background: var(--hl-surface); color: var(--hl-ink); border: 1px solid var(--hl-hairline);
  border-radius: var(--v3-radius-card); box-shadow: var(--hl-shadow-float); padding: var(--v3-s8);
  width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.v3-dialog.wide { width: min(880px, 100%); }
dialog.v3-dialog { border: 1px solid var(--hl-hairline); }
dialog.v3-dialog::backdrop { background: var(--hl-scrim); }
.v3-dialog-title { font-size: var(--v3-text-h3); line-height: 1.2; font-weight: 500; margin: 0 0 var(--v3-s4); }
.v3-dialog-body { color: var(--hl-ink-muted); }
.v3-dialog-error { color: var(--hl-error); font-size: var(--v3-text-small); line-height: 1.4; margin: var(--v3-s2) 0; }
.v3-dialog-error:empty { display: none; }
.v3-dialog-actions { display: flex; justify-content: flex-end; gap: var(--v3-s2); margin-top: var(--v3-s6); flex-wrap: wrap; }
@media (max-width: 599px) { .v3-dialog { padding: var(--v3-s5); } }

/* ---------- Snackbar (the site's cookie card) / banners ---------- */
.v3-snackbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--v3-s3); min-height: 52px; max-width: min(640px, calc(100vw - 40px));
  padding: 14px 16px; border-radius: var(--v3-radius-card); border: 1px solid var(--hl-hairline);
  background: var(--hl-surface); color: var(--hl-ink); box-shadow: var(--hl-shadow-float); z-index: 1100;
  font-size: var(--v3-text-small); line-height: 1.45; }
.v3-snackbar .v3-btn.text { color: var(--hl-brand-text); }
.v3-banner { display: flex; gap: var(--v3-s3); align-items: flex-start; padding: var(--v3-s4) var(--v3-s5);
  border-radius: var(--v3-radius-card); border: 1px solid var(--hl-hairline); background: var(--hl-surface); color: var(--hl-ink); }
.v3-banner .v3-icon { color: var(--hl-ink-muted); }
.v3-banner.info { background: var(--hl-surface-raised); }
.v3-banner.success { background: var(--hl-brand-soft); border-color: color-mix(in srgb, var(--hl-brand) 30%, transparent); }
.v3-banner.success .v3-icon { color: var(--hl-brand-text); }
.v3-banner.warning { background: var(--hl-accent-soft); border-color: color-mix(in srgb, var(--hl-accent) 35%, transparent); }
.v3-banner.warning .v3-icon { color: var(--hl-accent); }
.v3-banner.error { background: var(--hl-error-soft); border-color: color-mix(in srgb, var(--hl-error) 35%, transparent); }
.v3-banner.error .v3-icon { color: var(--hl-error); }

/* Progress */
.v3-progress { height: 4px; border-radius: 2px; background: var(--hl-surface-hover); overflow: hidden; }
.v3-progress > span { display: block; height: 100%; border-radius: 2px; background: var(--hl-brand-gradient); }
.v3-progress.indeterminate > span { width: 40%; animation: v3-indet 1.4s var(--v3-ease) infinite; }
@keyframes v3-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.v3-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--hl-surface-hover);
  border-top-color: var(--hl-brand); animation: v3-spin .8s linear infinite; }
@keyframes v3-spin { to { transform: rotate(360deg); } }

/* Empty state */
.v3-empty { text-align: center; padding: var(--v3-s12) var(--v3-s6); color: var(--hl-ink-muted); }
.v3-empty .v3-icon { font-size: 40px; color: var(--hl-outline); display: block; margin: 0 auto var(--v3-s3); }
.v3-empty .v3-empty-title { font-size: var(--v3-text-body); line-height: 1.4; font-weight: 500; color: var(--hl-ink); }

/* Inline status message inside a results area. */
.v3-msg, .v3-inv-msg { text-align: center; padding: var(--v3-s10) var(--v3-s4); color: var(--hl-ink-muted); }
.v3-msg.error, .v3-inv-msg.error { color: var(--hl-error); }

/* Menu */
.v3-menu { position: absolute; min-width: 200px; padding: var(--v3-s1); border-radius: var(--v3-radius-card);
  border: 1px solid var(--hl-hairline); background: var(--hl-surface-raised); box-shadow: var(--hl-shadow-float); z-index: 900; }
.v3-menu > a, .v3-menu > button, .v3-menu > form > button { display: flex; align-items: center; gap: var(--v3-s3); width: 100%;
  min-height: 42px; padding: 0 var(--v3-s3); border: 0; border-radius: var(--v3-radius-btn); background: transparent;
  color: var(--hl-ink-secondary); font: 400 var(--v3-text-fixed)/1.3 var(--v3-font); text-decoration: none; cursor: pointer; text-align: left; }
.v3-menu > a:hover, .v3-menu > button:hover, .v3-menu > form > button:hover { background: var(--hl-surface-hover); color: var(--hl-ink); }
.v3-menu > form { margin: 0; }
.v3-menu hr { margin: var(--v3-s1) 0; }

/* Artwork placeholder (V3_PLAN.md section 2.4): holds its shape until the art
   lands; drop an <img>/<video> inside and the label steps aside. */
.v3-art { position: relative; margin: 0; aspect-ratio: var(--v3-art-ratio, 4 / 3); width: 100%;
  border-radius: var(--v3-radius-card); overflow: hidden; background: var(--hl-surface);
  border: 1px dashed var(--hl-outline); display: grid; place-items: center; }
.v3-art > img, .v3-art > video, .v3-art > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3-art__label { font-size: var(--v3-text-eyebrow); line-height: 1.4; font-weight: 500; text-transform: uppercase;
  letter-spacing: .12em; color: var(--hl-ink-muted); padding: var(--v3-s3); text-align: center; }
.v3-art:has(> img, > video, > picture) { border-style: solid; border-color: transparent; }
.v3-art:has(> img, > video, > picture) > .v3-art__label { display: none; }
.v3-art.bleed { border-radius: 0; border: 0; }

/* =====================================================================
   The shell — the public site's sticky header, adapted to the portal:
   brand, the destinations as a nav row, and the site's right-hand
   cluster (chat trigger · divider · theme · account). Below 1024px the
   nav folds into a panel opened from the menu button.
   ===================================================================== */
.v3-header { position: sticky; top: 0; z-index: 700; background: var(--hl-bg);
  border-bottom: 1px solid var(--hl-hairline); transition: background-color var(--v3-med) var(--v3-ease); }
.v3-header-inner { display: flex; align-items: center; gap: var(--v3-s4); min-height: var(--v3-header-h);
  padding: 9px var(--v3-gutter); max-width: 1880px; margin: 0 auto; }
.v3-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--hl-ink); text-decoration: none; }
.v3-brand-mark { width: 30px; height: 30px; border-radius: var(--v3-radius-btn); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hl-brand-gradient); color: var(--hl-on-brand); }
.v3-brand-name { font-size: 1.15rem; line-height: 1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.v3-nav { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.v3-nav-group { display: flex; align-items: center; gap: 2px; }
.v3-nav-group + .v3-nav-group { margin-left: var(--v3-s2); padding-left: var(--v3-s3); border-left: 1px solid var(--hl-hairline); }
.v3-nav-section { display: none; }
.v3-nav-item { display: inline-flex; align-items: center; gap: var(--v3-s2); min-height: 36px; padding: 0 8px;
  border-radius: var(--v3-radius-btn); color: var(--hl-ink-muted); text-decoration: none; white-space: nowrap;
  font: 400 var(--v3-text-fixed)/1 var(--v3-font); position: relative;
  transition: background-color var(--v3-fast) var(--v3-ease), color var(--v3-fast) var(--v3-ease); }
.v3-nav-item .v3-icon { display: none; font-size: 20px; }
.v3-nav-item:hover { background: var(--hl-surface); color: var(--hl-ink); }
.v3-nav-item.is-active { color: var(--hl-ink); }
.v3-nav-item.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -12px; height: 2px;
  background: var(--hl-brand); }

.v3-header-page { display: none; min-width: 0; padding-left: var(--v3-s3); border-left: 1px solid var(--hl-hairline);
  color: var(--hl-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-header-actions { display: flex; align-items: center; gap: var(--v3-s2); flex: none; margin-left: auto; }
.v3-assistant-link { min-height: 36px; padding: 0 10px; }
.v3-assistant-link.is-active { color: var(--hl-ink); background: var(--hl-surface); }
.v3-header-divider { width: 1px; height: 20px; background: var(--hl-hairline); flex: none; }
.v3-menu-btn { display: none; }

.v3-account { position: relative; }
.v3-account-btn { display: inline-flex; align-items: center; gap: var(--v3-s2); min-height: 36px; padding: 0 8px 0 3px;
  border: 1px solid var(--hl-hairline); border-radius: var(--v3-radius-btn); background: transparent;
  color: var(--hl-ink-secondary); font: 400 var(--v3-text-small)/1 var(--v3-font); cursor: pointer; max-width: 200px; }
.v3-account-btn:hover { background: var(--hl-surface); color: var(--hl-ink); }
.v3-account-btn .v3-acct-short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-avatar { width: 28px; height: 28px; border-radius: 4px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--hl-surface-hover); color: var(--hl-ink); font-weight: 500; font-size: .9rem; }
.v3-account .v3-menu { right: 0; top: calc(100% + 8px); min-width: 260px; }
.v3-account-head { display: flex; align-items: center; gap: var(--v3-s3); padding: var(--v3-s3); border-radius: var(--v3-radius-btn);
  color: var(--hl-ink); text-decoration: none; }
a.v3-account-head:hover { background: var(--hl-surface-hover); }
.v3-acct-name { display: block; font-size: var(--v3-text-fixed); line-height: 1.3; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-acct-email { display: block; font-size: var(--v3-text-small); line-height: 1.3; color: var(--hl-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v3-content { padding: var(--v3-s8) var(--v3-gutter) var(--v3-vast); width: 100%; max-width: var(--v3-content-max); margin: 0 auto; }
.v3-page-head { display: flex; align-items: flex-end; gap: var(--v3-s4); flex-wrap: wrap; margin: 0 0 var(--v3-s8); }
.v3-page-head .v3-page-title { font-size: var(--v3-text-h2); line-height: 1.12; font-weight: 500; margin: 0; }
.v3-page-head .v3-page-sub { color: var(--hl-ink-muted); font-size: var(--v3-text-body); line-height: 1.55; margin-top: var(--v3-s2);
  max-width: 68ch; }
.v3-page-head .v3-eyebrow { display: block; margin-bottom: var(--v3-s3); }
.v3-page-head .v3-page-actions { margin-left: auto; display: flex; gap: var(--v3-s2); flex-wrap: wrap; }
.v3-section { margin-bottom: var(--v3-spacious); }
.v3-section-head { display: flex; align-items: center; gap: var(--v3-s3); margin-bottom: var(--v3-s4); }
.v3-section-head .v3-section-title { font-size: var(--v3-text-h4); line-height: 1.3; font-weight: 500; margin: 0; }
.v3-section-head .v3-spacer { flex: 1; }
.v3-grid { display: grid; gap: var(--v3-s4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.v3-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.v3-grid.stats { grid-template-columns: repeat(auto-fit, minmax(min(150px, 40%), 1fr)); }
.v3-row { display: flex; gap: var(--v3-s3); align-items: center; flex-wrap: wrap; }
.v3-stack { display: flex; flex-direction: column; gap: var(--v3-s4); }
.v3-spacer { flex: 1; }

/* The staff preview bar: the site's accent, as a thin strip above the header. */
.v3-preview-bar { display: flex; align-items: center; gap: var(--v3-s3); flex-wrap: wrap;
  padding: 6px var(--v3-gutter); background: var(--hl-accent); color: var(--hl-on-brand);
  font-size: var(--v3-text-small); line-height: 1.4; }
.v3-preview-bar .v3-spacer { flex: 1; }
.v3-preview-bar .v3-tag { background: color-mix(in srgb, var(--hl-on-brand) 14%, transparent); color: var(--hl-on-brand); }
.v3-preview-bar .v3-tag.error { background: var(--hl-on-brand); color: var(--hl-accent); }
.v3-preview-bar .v3-btn { background: transparent; color: var(--hl-on-brand); border: 1px solid currentColor;
  min-height: 30px; padding: 4px 10px; font-size: var(--v3-text-small); }
.v3-preview-bar .v3-btn:hover { background: color-mix(in srgb, var(--hl-on-brand) 12%, transparent); filter: none; }

/* Between the fold and wide screens the right-hand cluster goes icon-only
   so the ten destinations keep one row. Search and Feedback first (they
   carry the widest labels), then Ask Hermes and the account name. */
@media (min-width: 1440px) and (max-width: 1899px) {
  .v3-header-actions .ss-trigger-label, .v3-header-actions .ss-trigger kbd,
  .v3-header-actions .fb-trigger-label { display: none; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .v3-assistant-label, .v3-account-btn .v3-acct-short { display: none; }
}

/* A page shown inside another (Cadeus Chat in The Desk's pane): body only. */
.v3-embed .v3-content { padding: var(--v3-s4); max-width: none; }
body:has(.v3-embed) #ui-test-bar { display: none; }

/* The temporary staff test bar scrolls away on v3 pages instead of
   stacking on top of the sticky header. */
.v3 #ui-test-bar { position: relative; }

/* Narrow windows: the nav row becomes a panel under the header. */
@media (max-width: 1439px) {
  .v3-menu-btn { display: inline-flex; margin-left: -6px; }
  .v3-header-page { display: block; flex: 1; }
  .v3-nav { display: none; position: fixed; left: 0; right: 0; top: var(--v3-nav-top, var(--v3-header-h)); bottom: 0;
    flex-direction: column; align-items: stretch; gap: var(--v3-s1); overflow-y: auto;
    padding: var(--v3-s4) var(--v3-gutter) var(--v3-s10); background: var(--hl-bg); border-top: 1px solid var(--hl-hairline); z-index: 690; }
  .v3-shell.nav-open .v3-nav { display: flex; }
  .v3-nav-group { flex-direction: column; align-items: stretch; gap: 2px; }
  .v3-nav-group + .v3-nav-group { margin: var(--v3-s4) 0 0; padding: var(--v3-s4) 0 0; border-left: 0; border-top: 1px solid var(--hl-hairline); }
  .v3-nav-section { display: block; padding: var(--v3-s2) 10px; font-size: var(--v3-text-eyebrow); font-weight: 500;
    text-transform: uppercase; letter-spacing: .12em; color: var(--hl-ink-muted); }
  .v3-nav-item { min-height: 48px; font-size: var(--v3-text-body); }
  .v3-nav-item .v3-icon { display: inline-block; }
  .v3-nav-item.is-active { background: var(--hl-surface); }
  .v3-nav-item.is-active::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .v3-shell.nav-open { overflow: hidden; }
}
@media (max-width: 599px) {
  .v3-content { padding-top: var(--v3-s6); }
  .v3-page-head { margin-bottom: var(--v3-s6); }
  .v3-page-head .v3-page-actions { margin-left: 0; width: 100%; }
  .v3-account-btn .v3-acct-short, .v3-header-actions .v3-kbd, .v3-assistant-label, .v3-header-divider { display: none; }
  .v3-header-inner { gap: var(--v3-s2); }
  .v3-shell .v3-brand-name { display: none; }
  .v3-account-btn { padding-right: 3px; }
}

/* =====================================================================
   Public pages — the site's marketing patterns (landing, sign-in).
   ===================================================================== */

/* Hero: full-bleed artwork, headline set at the bottom-left, the lede and
   actions at the bottom-right (the site's concept hero). */
.v3-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: min(calc(100svh - var(--v3-header-h)), 900px); isolation: isolate; }
.v3-hero > .v3-art { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; z-index: -2; }
.v3-hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hl-photo-scrim) 10%, transparent) 0%,
                                      color-mix(in srgb, var(--hl-photo-scrim) 35%, transparent) 45%,
                                      color-mix(in srgb, var(--hl-photo-scrim) 88%, transparent) 100%); }
.v3-hero-inner { width: 100%; max-width: 1880px; margin: 0 auto; padding: var(--v3-vast) var(--v3-gutter) var(--v3-loose);
  display: grid; gap: var(--v3-relaxed) var(--v3-loose); align-items: end; color: var(--hl-photo-ink); }
.v3-hero .v3-eyebrow { color: var(--hl-photo-ink); display: block; margin-bottom: var(--v3-base); }
.v3-hero-title { margin: 0; color: var(--hl-photo-ink); max-width: 14ch; }
.v3-hero-title em { font-style: normal; background: var(--hl-brand-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.v3-hero-lede { margin: 0 0 var(--v3-relaxed); color: var(--hl-photo-ink); max-width: 46ch; }
.v3-hero-credit { grid-column: 1 / -1; margin: 0; color: var(--hl-photo-ink-muted); font-size: var(--v3-text-caption); line-height: 1.4; }
.v3-hero .v3-btn.contrast { color: var(--hl-photo-ink); border-color: var(--hl-photo-ink); }
.v3-hero .v3-btn.contrast:hover { background: var(--hl-photo-ink); color: var(--hl-photo-scrim); }
@media (min-width: 900px) { .v3-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* Marquee: a slow, endless row of pills (the site's service band). The list
   is rendered twice so the loop is seamless; the copy is aria-hidden. */
.v3-marquee { overflow: hidden; padding: var(--v3-relaxed) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v3-marquee-track { display: flex; gap: var(--v3-s3); width: max-content; animation: v3-marquee 40s linear infinite; }
.v3-marquee:hover .v3-marquee-track { animation-play-state: paused; }
.v3-marquee .v3-chip { cursor: default; }
@keyframes v3-marquee { to { transform: translateX(calc(-50% - var(--v3-s3) / 2)); } }

/* Section intro: eyebrow, heading, lede. */
.v3-intro { max-width: 760px; margin: 0 0 var(--v3-spacious); }
.v3-intro.center { margin-left: auto; margin-right: auto; text-align: center; }
.v3-intro .v3-eyebrow { display: block; margin-bottom: var(--v3-base); }
.v3-intro h2 { margin: 0; }
.v3-intro p { margin: var(--v3-base) 0 0; color: var(--hl-ink-muted); }

/* Feature row: copy beside artwork, alternating sides (the site's
   COST / FLEXIBILITY / … sections). */
.v3-feature { display: grid; gap: var(--v3-loose); align-items: center; padding: var(--v3-spacious) 0; }
.v3-feature + .v3-feature { border-top: 1px solid var(--hl-hairline); }
.v3-feature-copy { max-width: 560px; }
.v3-feature-copy .v3-eyebrow { display: block; margin-bottom: var(--v3-base); font-variant-numeric: tabular-nums; }
.v3-feature-copy h3 { margin: 0; }
.v3-feature-copy p { margin: var(--v3-base) 0 0; color: var(--hl-ink-muted); }
@media (min-width: 900px) {
  .v3-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--v3-vast); }
  .v3-feature:nth-of-type(even) .v3-feature-copy { order: 2; }
}

/* Quote band: full-bleed artwork with a line set over it. */
.v3-quote-band { position: relative; overflow: hidden; isolation: isolate; min-height: 420px; display: flex; align-items: flex-end; }
.v3-quote-band > .v3-art { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; z-index: -2; }
.v3-quote-band .v3-hero-scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--hl-photo-scrim) 82%, transparent) 0%,
  color-mix(in srgb, var(--hl-photo-scrim) 30%, transparent) 100%); }
.v3-quote-inner { width: 100%; max-width: 1880px; margin: 0 auto; padding: var(--v3-vast) var(--v3-gutter) var(--v3-loose);
  color: var(--hl-photo-ink); }
.v3-quote-text { margin: 0; max-width: 24ch; color: var(--hl-photo-ink); }
.v3-quote-attr { margin: var(--v3-relaxed) 0 0; color: var(--hl-photo-ink); }
.v3-quote-band .v3-hero-credit { margin-top: var(--v3-loose); }

/* Site footer: the site's surface card, links in muted ink. */
.v3-site-footer { padding: var(--v3-vast) var(--v3-gutter) 0; }
.v3-site-footer-card { max-width: 80rem; margin: 0 auto; background: var(--hl-surface);
  border-radius: var(--v3-radius-sheet) var(--v3-radius-sheet) 0 0; padding: var(--v3-s6) var(--v3-s6) var(--v3-loose);
  display: flex; flex-wrap: wrap; gap: var(--v3-loose); justify-content: space-between; align-items: flex-start; }
.v3-site-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v3-snug); }
.v3-site-footer-links a { color: var(--hl-ink-muted); text-decoration: none; transition: color var(--v3-fast) var(--v3-ease); }
.v3-site-footer-links a:hover { color: var(--hl-ink); }
@media (min-width: 1024px) { .v3-site-footer-card { padding: var(--v3-card-pad) var(--v3-card-pad) var(--v3-loose); } }

.v3-wrap { max-width: 1880px; margin: 0 auto; padding: 0 var(--v3-gutter); }

/* Sign-in pages: a form column beside the artwork (artwork hidden on
   phones), under a plain version of the site header. */
.v3-auth { min-height: 100vh; display: flex; flex-direction: column; }
.v3-auth-main { flex: 1; display: grid; }
.v3-auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--v3-spacious) var(--v3-gutter); }
.v3-auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--v3-relaxed); }
.v3-auth-card h1 { margin: 0; }
.v3-auth-card .v3-eyebrow { display: block; margin-bottom: var(--v3-snug); }
.v3-auth-lede { margin: 0; color: var(--hl-ink-muted); }
.v3-auth-lede strong { color: var(--hl-ink); font-weight: 500; }
.v3-auth-note { margin: 0; color: var(--hl-ink-muted); font-size: var(--v3-text-small); line-height: 1.6;
  padding-top: var(--v3-relaxed); border-top: 1px solid var(--hl-hairline); }
.v3-auth-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--v3-s2); flex-wrap: wrap; }
.v3-auth-art { display: none; }
@media (min-width: 960px) {
  .v3-auth-main.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v3-auth-art { display: grid; aspect-ratio: auto; height: 100%; min-height: 100%; }
}
/* A one-time-code field: large, spaced digits. */
.v3-field input.v3-code-input { text-align: center; font-size: var(--v3-text-h3); letter-spacing: .4em;
  padding-left: calc(16px + .4em); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after { transition: none !important; animation: none !important; }
}