/* ==========================================================================
   PulseIQ — design-system normalisation.
   Loaded last, after type.css.

   Two jobs:
     1. Style the semantic elements introduced by the accessibility pass, so
        <h1>/<h2>/<p>/<section> look exactly as the <div>s they replaced.
        Nothing should shift visually.
     2. Replace the ad-hoc scales the audit measured — 52 spacing values,
        12 radii, 7 breakpoints — with tokens.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- spacing
     A 4/8 scale. The audit found 52 distinct inline px values including 3, 5,
     7, 9, 13, 22 and 26 — no system at all. These eight cover every real use. */
  /* Density follows the same idea as text size: one multiplier, set from
     Appearance, rather than a number I picked without seeing the screen. */
  --s-1: calc(4px  * var(--sp-scale));
  --s-2: calc(8px  * var(--sp-scale));
  --s-3: calc(12px * var(--sp-scale));
  --s-4: calc(16px * var(--sp-scale));
  --s-5: calc(24px * var(--sp-scale));
  --s-6: calc(32px * var(--sp-scale));
  --s-7: calc(48px * var(--sp-scale));
  --s-8: calc(64px * var(--sp-scale));

  /* Measured rather than imposed: the inline styles used 6, 10 and 14px 142
     times between them, against 133 uses of the 4/8/12/16 steps. The real
     scale here has always been 2px-based, so these name the half-steps that
     were already load-bearing instead of pretending they were mistakes.
     Everything now resolves to a token; nothing moved on screen. */
  --s-0:  calc(2px  * var(--sp-scale));
  --s-1h: calc(6px  * var(--sp-scale));
  --s-2h: calc(10px * var(--sp-scale));
  --s-3h: calc(14px * var(--sp-scale));
  --s-4h: calc(20px * var(--sp-scale));

  /* ---------------------------------------------------------------- radius
     Was 12 distinct values (1, 2, 4, 5, 6, 8, 13px, 50%, 100px…). Four. */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------- elevation
     Two levels. Raised = a card sitting on the page. Overlay = something
     floating above it. Anything needing a third level is probably wrong. */
  --e-raised:  0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent),
               0 1px 3px -1px color-mix(in srgb, var(--ink) 14%, transparent);
  --e-overlay: 0 4px 12px -2px color-mix(in srgb, var(--ink) 18%, transparent),
               0 16px 40px -12px color-mix(in srgb, var(--ink) 28%, transparent);

  /* ---------------------------------------------------------------- layering
     Named, so a new overlay cannot be given z-index: 9999 and win by accident. */
  --z-sticky:  10;
  --z-rail:    20;
  --z-overlay: 100;
  --z-toast:   200;
}

/* ==========================================================================
   Semantic elements introduced by the accessibility pass.
   These replaced <div>s, so they must reset the browser's default margins and
   inherit the styling the <div> versions had.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }

/* .page-title / .card-title are now <h1>/<h2>; type.css already sizes them.
   Only the browser's default block margins need clearing. */
h1.page-title, h2.card-title, h2.modal-title { margin: 0; }

p.page-sub, p.card-sub, p.stat-meta, p.field-hint, p.field-error, p.empty-title { margin: 0; }

section.card { display: block; }

.empty-title {
  font-weight: 600;
  color: var(--ink-2);
  font-size: var(--t-md);
}

/* Visible only to screen readers — table captions, skip links. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: first tab stop, jumps past the sidebar to the content. */
.skip-link {
  position: absolute; left: var(--s-2); top: -60px; z-index: var(--z-toast);
  padding: var(--s-2) var(--s-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

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

/* Required marker. The asterisk is decorative — aria-required carries the
   meaning, so it is hidden from AT rather than announced as "star". */
.req { color: var(--coral); margin-left: var(--s-0); }

.field-hint  { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-1); }
.field-error { font-size: var(--t-xs); color: var(--coral); margin-top: var(--s-1); font-weight: 550; }

/* An invalid field is marked by border AND text, never colour alone. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 5%, var(--surface-2));
}

/* ------------------------------------------------------------ sortable th
   The sort control is a real <button>, not a click handler on the <th>, so it
   is reachable by keyboard and announces its state. It has to look exactly
   like the header text it replaced. */
.th-sort {
  all: unset;
  display: inline-flex; align-items: center; gap: var(--s-1h);
  cursor: pointer; width: 100%;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.th-sort:hover { color: var(--ink-2); }
.th-sort:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: var(--r-xs); }
.th-arrow { opacity: .45; font-size: var(--t-xs); }
th[aria-sort="ascending"] .th-arrow,
th[aria-sort="descending"] .th-arrow { opacity: 1; color: var(--indigo); }
th.num .th-sort { justify-content: flex-end; }

/* --------------------------------------------------------------- contrast
   Measured with a contrast probe rather than judged by eye.

   In light theme the primary button is near-black text on the dimmed signal
   green, which came to 3.68:1 — under the 4.5 minimum. Dark text works on the
   brighter green of the dark theme, so only the light case changes. */
:root[data-theme="light"] .btn-primary { color: #FFFFFF; }

/* The green status badge sets --signal on a 12% tint of itself. On a light
   ground that measured 3.39:1 — the one contrast failure left after the
   palette change. The badge gets a darker green; charts and rules keep the
   brighter one, where contrast is not the constraint. */
:root[data-theme="light"] .badge.green { color: #07724E; }

/* ----------------------------------------------------------------- cards
   A card was a slightly lighter rectangle with a hairline that did not quite
   land. Given a real edge and a top highlight it reads as a surface sitting
   on the page rather than a patch of slightly different colour. */
.card, section.card {
  border: 1px solid var(--line-soft);
  background: var(--surface);
  position: relative;
}
.card::before, section.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--ink) 8%, transparent) 18%,
    color-mix(in srgb, var(--ink) 8%, transparent) 82%, transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
  pointer-events: none;
}

/* Section headings were the same weight as the body around them. */
.card-title { letter-spacing: -.01em; }
.card-sub   { color: var(--ink-3); margin-top: var(--s-1); }

/* Uppercase micro-labels need the tracking to stay legible once enlarged. */
.stat-label { letter-spacing: .07em; color: var(--ink-3); }


/* ==========================================================================
   Command Centre
   ========================================================================== */

/* ------------------------------------------------------- notifications */
.bell-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--coral); color: #FFFFFF;
  font-size: 12px; font-weight: 700; line-height: 16px; text-align: center;
}
.ntf-row {
  display: flex; gap: var(--s-2h); align-items: flex-start; width: 100%;
  padding: var(--s-2) var(--s-2h); border: none; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.ntf-row:hover { background: var(--surface-2); }
.ntf-row.unread { background: var(--indigo-ghost); }
.ntf-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none;
  background: var(--line); }
.ntf-dot.indigo { background: var(--indigo); }
.ntf-dot.signal { background: var(--signal); }

/* --------------------------------------------------- portfolio (pfl-) */
.pfl-band { display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-5); align-items: start; }
@media (max-width: 1000px) { .pfl-band { grid-template-columns: 1fr; } }
.pfl-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3h); }
.pfl-tl { width: 100%; height: auto; }
.pfl-tl .pfl-row { cursor: pointer; }
.pfl-tl .pfl-row:hover rect:first-of-type { stroke: var(--indigo); stroke-width: 1.5; }

/* The captain chip: every project card wears its lead — photo when they have
   one, hue-matched initials when they don't — so ownership reads at a
   glance across the whole portfolio. */
.proj-lead { display: flex; align-items: center; gap: var(--s-1h); margin: 2px 0 var(--s-1); }
.proj-lead-ava { width: 26px; height: 26px; font-size: var(--t-xs); object-fit: cover;
  border: 1.5px solid hsl(var(--pc-h, 210) 60% 42%); }
.proj-lead-name { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.proj-lead-tag { font-size: var(--t-xs); font-weight: 700; color: var(--indigo);
  background: var(--indigo-ghost); border-radius: 3px; padding: 1px 6px;
  text-transform: uppercase; letter-spacing: .04em; }

/* Mission cards: each project wears its own hue as a top strip and a faint
   wash, so the grid reads as a set of identities rather than clones. */
.proj-card.mission { position: relative; overflow: hidden; }
.proj-card.mission::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg,
    hsl(var(--pc-h) 70% 52%), hsl(calc(var(--pc-h) + 45) 75% 58%));
}
.proj-card.mission::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 160px at 100% 0%,
    hsl(var(--pc-h) 70% 52% / .07), transparent 60%);
}
.proj-card.mission.slip::before {
  background: linear-gradient(90deg, var(--coral), var(--amber));
}

/* ------------------------------------------------------ my profile (pf-) */
.pf-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr);
           gap: var(--s-4); align-items: start; }
@media (max-width: 980px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-card { display: flex; flex-direction: column; gap: var(--s-4); }
.pf-photo-wrap { display: flex; gap: var(--s-4); align-items: center; }
.pf-photo {
  width: 112px; height: 112px; border-radius: 28px; object-fit: cover; flex: none;
  border: 2px solid var(--line-soft);
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--indigo) 45%, transparent);
}
.pf-photo-empty {
  display: grid; place-items: center;
  font-family: var(--display); font-size: 34px; font-weight: 700;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: var(--accent-contrast);
}

/* ------------------------------------------------- project detail (pd-) */
.pd-hero { display: flex; flex-direction: column; gap: var(--s-3); }
.pd-lead { display: inline-flex; align-items: center; gap: var(--s-1h);
           font-size: var(--t-xs); color: var(--ink-2); font-weight: 550; }

.pd-hero-band {
  display: grid; grid-template-columns: auto repeat(4, 1fr);
  gap: var(--s-4); align-items: center;
  padding: var(--s-3h) var(--s-4);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background:
    radial-gradient(560px 200px at 92% -40%, var(--indigo-ghost), transparent 60%),
    var(--surface);
}
.pd-ringbox { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.pd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-stat-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
                 color: var(--ink-3); font-weight: 640; }
.pd-stat-value { font-family: var(--display); font-size: calc(30px * var(--ui-scale));
                 font-weight: 700; color: var(--ink); line-height: 1.05;
                 font-variant-numeric: tabular-nums; }
.pd-stat-value.green { color: var(--signal); }
.pd-stat-value.coral { color: var(--coral); }
.pd-stat-value.amber { color: var(--amber); }
.pd-stat-of { font-size: var(--t-md); color: var(--ink-3); font-weight: 600; }
.pd-stat-sub { font-size: var(--t-xs); color: var(--ink-3); }

/* The window bar: how far the calendar has run vs what the work has earned. */
.pd-window { position: relative; height: 10px; border-radius: 99px;
             background: var(--surface-3); overflow: visible; }
.pd-window-earned { position: absolute; inset: 0 auto 0 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  transition: width .8s var(--ease); }
.pd-window-earned.slip { background: linear-gradient(90deg, var(--coral), var(--amber)); }
.pd-window-today { position: absolute; top: -3px; bottom: -3px; width: 2.5px;
  background: var(--indigo); border-radius: 2px;
  box-shadow: 0 0 0 3px var(--indigo-ghost); }

.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px;
           gap: var(--s-4); align-items: start; }
@media (max-width: 1080px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-side { display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: 0; }
.pd-sheet { max-height: calc(100vh - 420px); min-height: 320px; overflow-y: auto; }
.pd-group td { padding-top: var(--s-3); }

/* A live left-edge pulse marks rows in motion; each row carries its own
   earned bar so progress reads without finding the number column. */
.pd-row.hot > td:first-child { box-shadow: inset 2.5px 0 0 var(--amber); }
.rowbar { height: 3px; border-radius: 99px; background: var(--surface-3);
          margin-top: 5px; max-width: 340px; overflow: hidden; }
.rowbar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--indigo), var(--violet));
  transition: width .7s var(--ease); }
.rowbar i.ok { background: var(--signal); }

.pd-ava { width: 28px; height: 28px; font-size: var(--t-xs); position: relative; }
.pd-ava.live::after { content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--signal);
  border: 2px solid var(--surface); animation: pd-pulse 2.2s ease-out infinite; }
@keyframes pd-pulse { 0% { box-shadow: 0 0 0 0 var(--signal-ghost); }
  70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .pd-ava.live::after { animation: none; } }

.pd-doc { display: flex; gap: var(--s-2h); align-items: flex-start; }
.pd-doc-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--r-sm); background: var(--indigo-ghost); color: var(--indigo); }

.pd-feed { display: flex; flex-direction: column; gap: var(--s-2h);
           max-height: 40vh; overflow-y: auto; position: relative; }
.pd-feed-row { display: flex; gap: var(--s-2h); align-items: flex-start; }
.pd-feed-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none;
  background: var(--line); }
.pd-feed-dot.green { background: var(--signal); }
.pd-feed-dot.amber { background: var(--amber); }
.pd-feed-dot.coral { background: var(--coral); }

@media (max-width: 900px) {
  .pd-hero-band { grid-template-columns: repeat(2, 1fr); }
  .pd-ringbox { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- viz tiles */
.viz-tile { display: flex; align-items: flex-start; gap: var(--s-3); }
.viz-tile-ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}
.viz-tile-ico.tone-signal { background: var(--signal-ghost); color: var(--signal); }
.viz-tile-ico.tone-indigo { background: var(--indigo-ghost); color: var(--indigo); }
.viz-tile-ico.tone-amber  { background: var(--amber-ghost);  color: var(--amber); }
.viz-tile-ico.tone-coral  { background: var(--coral-ghost);  color: var(--coral); }

.attn-tile {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.attn-tile.coral  { background: var(--coral-ghost);  color: var(--coral); }
.attn-tile.amber  { background: var(--amber-ghost);  color: var(--amber); }
.attn-tile.indigo { background: var(--indigo-ghost); color: var(--indigo); }

/* ---------------------------------------------------------- attention queue
   A list of decisions, so each row is a button rather than a card with a
   button inside it — the whole row is the target, which is what makes it fast
   to work down on a large screen. */
.attn-list { display: flex; flex-direction: column; gap: var(--s-1h); }

.attn-row {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-3) var(--s-3h);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.attn-row:hover {
  transform: translateX(3px);
  border-color: var(--line);
  background: var(--surface-3);
}
.attn-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.attn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3); flex: 0 0 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-3) 14%, transparent);
}
.attn-dot.coral  { background: var(--coral);  box-shadow: 0 0 0 4px var(--coral-ghost); }
.attn-dot.amber  { background: var(--amber);  box-shadow: 0 0 0 4px var(--amber-ghost); }
.attn-dot.indigo { background: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-ghost); }

/* Only the blocking rows pulse. If everything moved, nothing would read as
   more urgent than anything else. */
.attn-dot.coral { animation: attn-pulse 2var(--t-base) ease-in-out infinite; }
@keyframes attn-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--coral-ghost); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--coral) 6%, transparent); }
}

.attn-body { display: flex; flex-direction: column; gap: var(--s-0); flex: 1; min-width: 0; }
.attn-title { font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.attn-sub { font-size: var(--t-xs); color: var(--ink-3); }
.attn-go { color: var(--ink-3); display: flex; transition: transform var(--t-fast) var(--ease); }
.attn-row:hover .attn-go { transform: translateX(3px); color: var(--ink-2); }

/* -------------------------------------------------------------- capacity */
.cap-list { display: flex; flex-direction: column; gap: var(--s-1); }

.cap-row {
  all: unset;
  box-sizing: border-box;
  display: grid; align-items: center; gap: var(--s-3);
  grid-template-columns: 30px minmax(140px, 1fr) minmax(120px, 2fr) 52px 72px;
  width: 100%; padding: var(--s-2) var(--s-2h);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast);
}
.cap-row:hover { background: var(--surface-2); }
.cap-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }

.cap-name { display: flex; flex-direction: column; min-width: 0; }
.cap-who  { font-size: var(--t-sm); font-weight: 550; color: var(--ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-role { font-size: var(--t-xs); color: var(--ink-3);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cap-track {
  height: 8px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden; position: relative;
}
.cap-fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  transition: width var(--t-slow) var(--ease);
}
.cap-fill.high { background: linear-gradient(90deg, var(--amber), #FFD27A); }
.cap-fill.over { background: linear-gradient(90deg, var(--coral), #FF9C8E); }

.cap-pct { font-size: var(--t-sm); font-weight: 600; text-align: right;
           font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cap-pct.over { color: var(--coral); }
.cap-tasks { text-align: right; }

/* -------------------------------------------------------------- projects */
/* Thumbnail cards: identity, the pace ring, a status spectrum, the people. */
.proj-grid {
  display: grid; gap: var(--s-3h);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.proj-card {
  display: flex; flex-direction: column; gap: var(--s-2h);
  padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base), border-color var(--t-fast);
}
.proj-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--ink) 22%, transparent);
}
.proj-card:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.proj-card.slip { border-left: 3px solid var(--coral); }
.proj-card-name {
  font-family: var(--display); font-weight: 650; font-size: var(--t-md);
  letter-spacing: -.014em; line-height: 1.25; margin: 0;
}
.proj-card-viz { display: flex; align-items: center; gap: var(--s-3h); }
.proj-ring { width: 76px; height: 76px; flex: none; }
.proj-card-facts { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.proj-spectrum {
  display: flex; gap: 2px; height: 8px;
  border-radius: var(--r-pill); overflow: hidden;
}
.proj-spectrum i { display: block; min-width: 4px; border-radius: 2px; }
.proj-card-team { display: flex; align-items: center; padding-left: 4px; }
.proj-ava {
  width: 28px; height: 28px; font-size: var(--t-xs); border-radius: 50%;
  margin-left: -6px; border: 2px solid var(--surface); position: relative;
}

.proj-card {
  all: unset;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3h); cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.proj-card:hover { transform: translateY(-2px); border-color: var(--indigo); }
.proj-card:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.proj-name { font-weight: 600; color: var(--ink); font-size: var(--t-sm); }

@media (max-width: 900px) {
  .cap-row { grid-template-columns: 30px 1fr 44px; }
  .cap-track, .cap-tasks { display: none; }
}

/* People who have asked not to see motion get none of it. */
@media (prefers-reduced-motion: reduce) {
  .attn-dot.coral { animation: none; }
  .attn-row, .attn-go, .proj-card, .cap-fill { transition: none; }
}


/* ==========================================================================
   Command palette
   ========================================================================== */
.pal-back {
  position: fixed; inset: 0; z-index: var(--z-toast);
  background: color-mix(in srgb, #000 52%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 11vh var(--s-4) var(--s-4);
  animation: pal-back-in var(--t-fast) ease-out;
}
@keyframes pal-back-in { from { opacity: 0; } to { opacity: 1; } }

.pal {
  width: min(680px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-overlay);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 68vh;
  animation: pal-in var(--t-fast) var(--ease);
}
@keyframes pal-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.pal-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3h) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.pal-search { color: var(--ink-3); display: flex; }
.pal-head input {
  all: unset;
  flex: 1; font-size: var(--t-lg); color: var(--ink);
  font-family: var(--sans);
}
.pal-head input::placeholder { color: var(--ink-3); }

.pal-list {
  list-style: none; margin: 0; padding: var(--s-2);
  overflow-y: auto; flex: 1;
}
.pal-group {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 640;
  padding: var(--s-3) var(--s-2) var(--s-1);
  margin: 0;
}
.pal-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2h) var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
}
/* Highlight follows the keyboard, so hover must not fight it for the eye. */
.pal-row:hover { background: var(--surface-2); }
.pal-row.on {
  background: var(--indigo-ghost);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--indigo);
}
.pal-icon { display: flex; color: var(--ink-3); width: 22px; justify-content: center; }
.pal-row.on .pal-icon { color: var(--indigo); }
.pal-label { flex: 1; font-size: var(--t-sm); font-weight: 550;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-hint { font-size: var(--t-xs); color: var(--ink-3);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.pal-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--ink-3);
             font-size: var(--t-sm); margin: 0; }

.pal-foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2h) var(--s-4);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--t-xs); color: var(--ink-3);
}
.pal-foot kbd, .pal-head kbd {
  font-family: var(--mono); font-size: var(--t-xs);
  padding: var(--s-0) var(--s-1h); margin-right: var(--s-1);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--surface-3); color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .pal, .pal-back { animation: none; }
}


/* ------------------------------------------------------------- appearance */
.seg-choice {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.seg-opt {
  all: unset;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--s-0);
  padding: var(--s-2h) var(--s-3);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--surface-2); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease);
}
.seg-opt:hover { border-color: var(--line); transform: translateY(-1px); }
.seg-opt:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.seg-opt.on {
  border-color: var(--indigo);
  background: var(--indigo-ghost);
  box-shadow: inset 0 0 0 1px var(--indigo);
}
.seg-label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.seg-note  { font-size: var(--t-xs); color: var(--ink-3); }

.appearance-sample { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) { .seg-opt { transition: none; } }


/* ------------------------------------------------------- typographic tone
   Inter needs tuning to look deliberate rather than merely present.

   Optical sizing and contextual alternates are what stop it reading like a
   default. The negative tracking on headings is the single biggest difference
   between "a web page" and "a product": Inter is drawn slightly wide for UI
   use, and enterprise tools tighten it. Body copy is left alone — tracking
   body text hurts reading speed. */
body {
  font-optical-sizing: auto;
  /* `calt` is safe on every face here. The cv-prefixed alternates are Inter's
     own and are simply ignored by Aptos, Segoe and Helvetica — so they cost
     nothing when Aptos wins and still tune Inter when it is the one used. */
  font-feature-settings: "calt" 1, "cv05" 1, "cv11" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Negative tracking is a correction for Inter, which is drawn wide for UI use.
   Aptos Display is already compact, so the same value over-tightens it. The
   @supports test picks the face actually in use rather than guessing. */
h1, h2, h3, .page-title, .card-title, .modal-title, .stat-value, .brand-name {
  letter-spacing: -0.012em;
}
.page-title { letter-spacing: -0.02em; }
.stat-value { letter-spacing: -0.022em; font-feature-settings: "tnum" 1, "lnum" 1; }

@supports not (font-family: "Aptos Display") {
  h1, h2, h3, .page-title, .card-title, .modal-title, .stat-value, .brand-name {
    letter-spacing: -0.018em;
  }
  .page-title { letter-spacing: -0.028em; }
  .stat-value { letter-spacing: -0.03em; }
}

/* Uppercase micro-labels need the opposite treatment — caps set tight are
   unreadable at small sizes. */
.stat-label, .nav-divider, .pal-group, th, .kcol-title, .sec-title {
  letter-spacing: 0.06em;
}

/* Numerals must not reflow as they tick. */
.num, td.num, .cap-pct, .big-clock, .kcol-count, .gauge-value .num {
  font-variant-numeric: tabular-nums lining-nums;
}


/* ---------------------------------------------------------- display voice
   What separates a page title from large body text is not its size. It is
   the tracking, the weight, and the fact that it is allowed to be the only
   loud thing on the screen.

   Three changes, all cheap:
     - a real jump from card title to page title, so a screen announces itself
     - tighter tracking at display sizes, where wide letterfit reads as slack
     - subtitles pushed down in contrast, so the pair reads as one unit

   The `cv` alternates matter more here than in body copy: at 32px, Inter's
   default double-storey `g` and straight `l` are the giveaways that it is
   Inter. The alternates bring it closer to the grotesque in the reference.
   Aptos ignores them, which is the desired behaviour when Aptos is present. */

.page-title {
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  font-feature-settings: "calt" 1, "cv05" 1, "cv08" 1, "cv11" 1;
}

.page-sub {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-top: calc(var(--s-1) * -1);
  max-width: 68ch;              /* a measure, so subtitles do not run the width */
}

/* Card titles step down clearly rather than competing with the page title. */
.card-title {
  font-weight: 640;
  letter-spacing: -0.014em;
  line-height: 1.25;
}

/* Figures are the other display voice. Tabular, tight, and unmistakably the
   largest thing in their card. */
.stat-value {
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* The label above a figure is a caption, not a heading — it should recede. */
.stat-label {
  font-weight: 620;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

/* The topbar carries the page title, so it needs room for one at 32px. */
.topbar { align-items: center; }


/* -------------------------------------------------------------- live chip */
.live-chip {
  display: inline-flex; align-items: center; gap: var(--s-1h);
  padding: var(--s-1) var(--s-2h);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--t-xs); color: var(--ink-2);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  animation: live-beat 2.2s ease-in-out infinite;
}
@keyframes live-beat {
  0%, 100% { box-shadow: 0 0 0 0 var(--signal-ghost); }
  50%      { box-shadow: 0 0 0 5px var(--signal-ghost); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }


/* ==========================================================================
   Landing page v2 — full-bleed, product-mock imagery, slider, scroll reveal.

   The first screenshot showed the failure plainly: content pinned to the
   left 1240px with a dead band beside it. #app is a flex row, so the page
   was sized by its content. flex:1 makes it own the viewport.
   ========================================================================== */
.lp {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: clip;
  background:
    radial-gradient(1200px 600px at 8% -10%, var(--indigo-ghost), transparent 60%),
    radial-gradient(1000px 520px at 100% 8%, var(--signal-ghost), transparent 55%),
    radial-gradient(color-mix(in srgb, var(--ink-3) 22%, transparent) 1px, transparent 1px),
    var(--ground);
  background-size: auto, auto, 26px 26px, auto;
}

/* ------------------------------------------------------------- SBL brand
   The corporate letters are colour-on-transparent, so on dark surfaces they
   sit on a small white plate — the mark keeps its own colours everywhere. */
.lp-brand-mark { display: block; }
.si-logo-plate, .brand-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: var(--r-sm);
}
.si-logo-plate { padding: var(--s-2h) var(--s-3); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.brand-plate { padding: 4px 6px; flex: none; }

/* --------------------------------------------------------------------- nav
   Sticky glass bar: the page scrolls under it, which is most of what makes a
   marketing page feel like a product rather than a document. */
.lp-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) clamp(var(--s-4), 4vw, var(--s-8));
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
}
.lp-brand { display: flex; align-items: center; gap: var(--s-2h); }
.lp-brand-name {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
}
/* The base sheet's generic `nav { flex: 1 }` (written for the app sidebar)
   stretches this element across the whole bar, which silently defeated the
   auto margin and left the links crowding the logo. Justify the content
   instead: the CTA rides the right edge, the dock centres itself. */
.lp-nav-links {
  margin-left: auto; display: flex; align-items: center;
  justify-content: flex-end; gap: var(--s-4);
  padding: 0; overflow: visible;
}

/* The dock: links float in a glass capsule dead-centre of the bar — brand
   left, Sign in right, and the capsule balanced between them rather than
   crowding the logo. One pill slides beneath the active or hovered link. */
.lp-dock {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px;
  padding: var(--s-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(10px);
}
.lp-dock a {
  position: relative; z-index: 1;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t-xs); font-weight: 600;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.lp-dock a:hover, .lp-dock a[aria-current] { color: var(--ink); }
/* Titles are solid ink with tight tracking — weight does the talking.
   Gradient text reads consumer; enterprise restraint reads intent. */
.page-title, .modal-title { color: var(--ink); letter-spacing: -0.022em; }

.lp-dock-pill {
  position: absolute; top: var(--s-1); bottom: var(--s-1);
  left: 4px; width: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--indigo) 18%, var(--surface-3));
  transition: left .28s var(--ease), width .28s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .lp-dock-pill { transition: none; } }
@media (max-width: 1160px) { .lp-dock { display: none; } }

.lp-nav-links a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 550;
  transition: color var(--t-fast);
}
.lp-nav-links a:hover { color: var(--ink); }
.lp-nav-cta {
  padding: var(--s-2) var(--s-3h);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
}
.lp-nav-cta:hover { border-color: var(--indigo); }

/* ------------------------------------------------------------------ hero */
.lp-hero {
  position: relative;
  max-width: 1360px; margin: 0 auto;
  padding: clamp(var(--s-6), 6vh, 72px) clamp(var(--s-4), 4vw, var(--s-6)) var(--s-8);
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 560px);
  align-items: center;
}
/* The cinematic treatment: a real photograph under a deep shade, light ink
   locally — the same two-tone trick as the rail and the sign-in panel. */
.lp-hero--cinema {
  --ink:   #F0F3F8;
  --ink-2: #C6CDD8;
  --ink-3: #97A2B0;
  --line:      rgba(255, 255, 255, .22);
  --line-soft: rgba(255, 255, 255, .12);
  --surface:   rgba(255, 255, 255, .06);
  overflow: clip;
  max-width: none;
  padding-left: 0; padding-right: 0;
  color: var(--ink);
}
.lp-hero--cinema > .lp-hero-copy,
.lp-hero--cinema > .lp-hero-visual {
  position: relative; z-index: 2;
}
.lp-hero--cinema {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 560px);
  gap: var(--s-7);
  padding: clamp(var(--s-7), 8vh, 96px) clamp(var(--s-5), 6vw, 96px);
}
.lp-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  animation: si-drift 30s ease-in-out infinite alternate;
}
.lp-hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(900px 500px at 82% 20%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 60%),
    linear-gradient(105deg, rgba(9, 12, 16, .95) 30%, rgba(9, 12, 16, .82) 60%, rgba(9, 12, 16, .66));
}
.lp-hero--cinema .lp-headline { color: #F4F7FA; }
.lp-hero--cinema .lp-lede { color: #C6CDD8; }
.lp-hero--cinema .lp-fact { border-left-color: color-mix(in srgb, var(--signal) 60%, transparent); }
.lp-hero--cinema .lp-fact-label { color: #E8EDF2; }
.lp-hero--cinema .lp-trust span { background: rgba(255, 255, 255, .06); color: #C6CDD8; }
.lp-hero--cinema .lp-cta-ghost { color: #E8EDF2; border-color: rgba(255, 255, 255, .3); }
.lp-hero--cinema .lp-collage-photo { box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .8); }
/* The mock is a screenshot of the product: it must stay bright against the
   dark hero, so it pins the light palette rather than inheriting the local
   cinema tokens. */
.lp-hero--cinema .mk-window {
  --surface:   #FFFFFF;
  --surface-2: #F6F7F9;
  --surface-3: #E9ECF1;
  --line:      #C9D0DA;
  --line-soft: #E0E5EC;
  --ink:       #14171C;
  --ink-2:     #3C4552;
  --ink-3:     #536070;
  color: var(--ink);
}

.lp-new-badge {
  display: inline-flex; align-items: center; gap: var(--s-1h);
  padding: var(--s-1h) var(--s-3); margin-bottom: var(--s-3h);
  border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  color: var(--signal); font-size: var(--t-xs); font-weight: 620;
}

/* The spotlight: a soft radial glow that follows the pointer. Painted on a
   ::before so it costs one composite layer and zero DOM. */
.lp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 40%),
    color-mix(in srgb, var(--signal) 9%, transparent), transparent 70%);
}

.lp-eyebrow {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 640; color: var(--indigo); margin: 0 0 var(--s-3);
}
.lp-headline {
  font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.06; letter-spacing: -0.03em; font-weight: 700;
  color: var(--ink); margin: 0 0 var(--s-4); text-wrap: balance;
}
.lp-headline-dim {
  background: linear-gradient(95deg, var(--signal), var(--indigo));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--indigo);
}
.lp-lede {
  font-size: clamp(var(--t-md), 1.25vw, var(--t-lg));
  line-height: 1.6; color: var(--ink-2);
  max-width: 54ch; margin: 0 0 var(--s-5);
}
.lp-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-6); }
.lp-cta { text-decoration: none; padding: var(--s-2h) var(--s-4h); font-size: var(--t-sm); }
.lp-cta-ghost {
  text-decoration: none; padding: var(--s-2h) var(--s-4h); font-size: var(--t-sm);
  background: transparent;
}

.lp-facts { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.lp-fact {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: var(--s-3h);
  border-left: 2px solid color-mix(in srgb, var(--signal) 45%, var(--line));
}
.lp-fact-figure {
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.lp-fact-label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.lp-fact-sub { font-size: var(--t-xs); color: var(--ink-3); }

.lp-trust {
  display: flex; gap: var(--s-2h); flex-wrap: wrap; margin-top: var(--s-5);
}
.lp-trust span {
  display: inline-flex; align-items: center; gap: var(--s-1h);
  font-size: var(--t-xs); font-weight: 550; color: var(--ink-2);
  padding: var(--s-1h) var(--s-3);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
}
.lp-trust svg { color: var(--signal); }

/* The hero visual: a real photograph behind the floating product mock — the
   place work happens, and the screen that accounts for it. */
.lp-hero-visual { position: relative; }
.lp-collage {
  position: relative;
  transition: transform var(--t-slow) var(--ease);
  transform-style: preserve-3d;
}
.lp-collage-photo {
  position: absolute; top: -9%; right: -7%;
  width: 74%; height: 82%;
  object-fit: cover; border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(8, 10, 14, .5);
  transform: rotate(2.5deg);
}
.lp-collage .mk-window { margin-top: var(--s-6); width: 88%; }
.lp-visual-glow {
  position: absolute; inset: -8% -6%;
  background: radial-gradient(closest-side, var(--signal-ghost), transparent 70%);
  z-index: 0; pointer-events: none;
}
.lp-hero-visual .mk-window {
  position: relative; z-index: 1;
  animation: mk-float 7s ease-in-out infinite;
}
@keyframes mk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* -------------------------------------------------------- product mocks */
.mk-window {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-overlay);
  overflow: hidden;
}
.mk-bar {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s-2h) var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.mk-bar .mk-dot:nth-child(1) { background: var(--coral); opacity: .8; }
.mk-bar .mk-dot:nth-child(2) { background: var(--amber); opacity: .8; }
.mk-bar .mk-dot:nth-child(3) { background: var(--signal); opacity: .8; }
.mk-url {
  margin-left: var(--s-2); font-family: var(--mono); font-size: var(--t-xs);
  color: var(--ink-3); background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); padding: 1px var(--s-2h);
}
.mk-body { padding: var(--s-3h); display: flex; flex-direction: column; gap: var(--s-2); }

.mk-row-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.mk-stat {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-2h);
  display: flex; flex-direction: column; font-size: var(--t-xs); color: var(--ink-3);
  animation: mk-in var(--t-slow) var(--ease) var(--d, 0ms) backwards;
}
.mk-num {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 700;
  color: var(--ink); line-height: 1.1;
}
.mk-attn {
  display: flex; align-items: center; gap: var(--s-2h);
  padding: var(--s-2) var(--s-2h);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--ink-2); font-weight: 550;
  animation: mk-in var(--t-slow) var(--ease) var(--d, 0ms) backwards;
}
.mk-pip { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.mk-pip.coral { background: var(--coral); animation: attn-pulse 2.4s ease-in-out infinite; }
.mk-pip.amber { background: var(--amber); }
.mk-pip.indigo { background: var(--indigo); }
.mk-badge {
  margin-left: auto; font-variant-numeric: tabular-nums;
  background: var(--surface-3); border-radius: var(--r-pill);
  padding: 0 var(--s-2); font-size: var(--t-xs);
}
.mk-badge.coral { background: var(--coral-ghost); color: var(--coral); }
.mk-cap {
  display: flex; align-items: center; gap: var(--s-2h);
  font-size: var(--t-xs); color: var(--ink-3);
  animation: mk-in var(--t-slow) var(--ease) var(--d, 0ms) backwards;
}
.mk-name { width: 52px; }
.mk-track {
  flex: 1; height: 7px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.mk-fill {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--signal);
  animation: mk-grow 1s var(--ease) calc(var(--d, 0ms) + 200ms) forwards;
}
.mk-fill.high { background: var(--amber); }
.mk-fill.over { background: var(--coral); }
@keyframes mk-grow { to { width: var(--w, 60%); } }
@keyframes mk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mk-title { font-size: var(--t-sm); font-weight: 640; color: var(--ink);
  display: flex; align-items: center; gap: var(--s-2); }
.mk-burn { width: 100%; height: 100px; }
.mk-earned { stroke-dasharray: 400; stroke-dashoffset: 400; animation: lp-draw2 1.6s var(--ease) .3s forwards; }
@keyframes lp-draw2 { to { stroke-dashoffset: 0; } }
.mk-legend { display: flex; gap: var(--s-3); font-size: var(--t-xs); flex-wrap: wrap; }
.mk-gap { display: flex; height: 13px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.mk-gap-task { background: var(--signal); width: 0; animation: mk-grow 1.1s var(--ease) .2s forwards; }
.mk-gap-bucket { background: var(--indigo); width: 0; animation: mk-grow 1.1s var(--ease) .5s forwards; }
.mk-gap-open { flex: 1; background: repeating-linear-gradient(45deg, var(--amber-ghost), var(--amber-ghost) 5px,
  color-mix(in srgb, var(--amber) 35%, transparent) 5px, color-mix(in srgb, var(--amber) 35%, transparent) 10px); }
.mk-cta {
  align-self: flex-start; font-size: var(--t-xs); font-weight: 600;
  color: var(--ink); background: var(--surface-3);
  border-radius: var(--r-sm); padding: var(--s-1h) var(--s-2h);
}
.mk-ava {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  display: grid; place-items: center;
  background: var(--indigo-ghost); color: var(--indigo);
  font-size: var(--t-xs); font-weight: 700;
}
.mk-who { display: flex; flex-direction: column; line-height: 1.3; }
.mk-sub { color: var(--ink-3); font-weight: 400; }
.mk-quote {
  font-size: var(--t-xs); color: var(--ink-2); font-style: italic;
  border-left: 2px solid var(--amber); padding-left: var(--s-2h);
}

/* ---------------------------------------------------------------- slider */
.lp-slider { outline: none; }
.lp-slider:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: var(--r-md); }
.lp-slides { position: relative; min-height: 340px; }
.lp-slide {
  position: absolute; inset: 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(300px, 520px) minmax(0, 1fr);
  align-items: center;
  opacity: 0; transform: translateX(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  pointer-events: none;
}
.lp-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.lp-slide-copy h3 {
  font-family: var(--display); font-size: clamp(20px, 2vw, 27px);
  font-weight: 680; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--s-2);
}
.lp-slide-copy p { font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 46ch; }

.lp-slider-nav {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  margin-top: var(--s-4);
}
.lp-dots { display: flex; gap: var(--s-2); }
.lp-dot {
  all: unset; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-3); cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lp-dot:hover { transform: scale(1.3); }
.lp-dot.on { background: var(--indigo); }
.lp-dot:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---------------------------------------------------------- stats band */
.lp-stats { padding: var(--s-6) 0; border-bottom: 1px solid var(--line-soft); }
.lp-stats-row {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.lp-stat { display: flex; flex-direction: column; gap: 2px; }
.lp-stat-v {
  font-family: var(--display); font-size: clamp(30px, 3vw, 44px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(95deg, var(--signal), var(--indigo));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--signal);
}
.lp-stat-l { font-size: var(--t-sm); font-weight: 640; color: var(--ink); }
.lp-stat-s { font-size: var(--t-xs); color: var(--ink-3); }

/* ------------------------------------------------------------- marquee */
.lp-marquee {
  overflow: hidden; border-block: 1px solid var(--line-soft);
  padding: var(--s-2h) 0; background: var(--surface);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee-track {
  display: inline-flex; align-items: center; gap: var(--s-4);
  white-space: nowrap; width: max-content;
  animation: lp-marquee 36s linear infinite;
}
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee-track span {
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  color: var(--ink-2); letter-spacing: -.01em;
}
.lp-marquee-track i { color: var(--signal); font-style: normal; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------- splitter demo */
.lp-demo {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  align-items: start;
}
.lp-demo-in { display: flex; flex-direction: column; gap: var(--s-2h); }
.lp-demo-in textarea {
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.7;
  background: var(--surface); resize: vertical;
}
.lp-demo-out {
  min-height: 260px;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2h);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.lp-demo-hint {
  margin: auto; display: flex; align-items: center; gap: var(--s-2);
  color: var(--ink-3); font-size: var(--t-sm);
}
.lp-demo-task {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-md); padding: var(--s-3);
  animation: mk-in var(--t-slow) var(--ease) var(--d, 0ms) backwards;
}
.lp-demo-task-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm);
}
.lp-demo-task-head .badge { margin-left: auto; }
.lp-demo-sub {
  font-size: var(--t-xs); color: var(--ink-2); padding-left: var(--s-3);
  margin-top: var(--s-1);
  animation: mk-in var(--t-base) var(--ease) var(--d, 0ms) backwards;
}
.lp-demo-sub span { color: var(--signal); }

/* -------------------------------------------------------- consent demo */
.lp-consent-demo {
  margin-top: var(--s-4h); padding: var(--s-3h);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
}
.lp-consent-title { margin: 0 0 var(--s-2h); font-size: var(--t-sm); color: #C6CDD8; }
.lp-consent-demo .segmented { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.lp-consent-demo .segmented button { color: #9AA5B3; }
.lp-consent-demo .segmented button.on { background: var(--signal-ghost); color: var(--signal); }
.lp-consent-payload {
  margin: var(--s-2h) 0 0; border: none;
  background: rgba(0, 0, 0, .35); color: #C7CED8;
  min-height: 96px; white-space: pre-wrap;
}
.lp-consent-payload.flash { animation: consent-flash .45s var(--ease); }
@keyframes consent-flash {
  from { background: color-mix(in srgb, var(--signal) 22%, rgba(0,0,0,.35)); }
  to   { background: rgba(0, 0, 0, .35); }
}

/* ---------------------------------------------------------- how it works */
.lp-steps { display: flex; flex-direction: column; gap: var(--s-6); }
.lp-step {
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  align-items: center;
}
.lp-step:nth-child(even) .lp-step-media { order: 2; }
.lp-step-media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 55px -26px color-mix(in srgb, var(--ink) 40%, transparent);
}
.lp-step-media img {
  width: 100%; height: clamp(220px, 26vw, 320px); object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.lp-step:hover .lp-step-media img { transform: scale(1.045); }
.lp-step-n {
  position: absolute; left: var(--s-3); bottom: var(--s-2h);
  font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5vw, 64px);
  line-height: 1; color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.lp-step-copy h3 {
  font-family: var(--display); font-size: clamp(20px, 2vw, 27px);
  font-weight: 660; letter-spacing: -.018em; margin: 0 0 var(--s-2); color: var(--ink);
}
.lp-step-copy p { font-size: var(--t-md); line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 52ch; }

/* ------------------------------------------------------------ role strip */
.lp-roles {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.lp-role {
  padding: var(--s-3h) var(--s-4);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  border-top: 3px solid var(--indigo);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base);
}
.lp-role:nth-child(odd) { border-top-color: var(--signal); }
.lp-role:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lp-role-name {
  display: block; font-family: var(--display); font-weight: 680;
  font-size: var(--t-md); letter-spacing: -.012em; margin-bottom: var(--s-1);
}
.lp-role p { margin: 0; font-size: var(--t-xs); line-height: 1.55; color: var(--ink-2); }

/* ------------------------------------------------------------------- faq */
.lp-faq-inner { max-width: 860px; }
.lp-faq-item {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: var(--s-2h);
  padding: 0 var(--s-4);
  transition: border-color var(--t-fast);
}
.lp-faq-item[open] { border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
.lp-faq-item summary {
  display: flex; align-items: center; gap: var(--s-3);
  cursor: pointer; list-style: none;
  padding: var(--s-3h) 0;
  font-weight: 620; font-size: var(--t-md); color: var(--ink);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-x {
  margin-left: auto; color: var(--signal); font-size: 20px; font-weight: 400;
  transition: transform var(--t-base) var(--ease);
}
.lp-faq-item[open] .lp-faq-x { transform: rotate(45deg); }
.lp-faq-item > p {
  margin: 0; padding: 0 0 var(--s-3h);
  font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); max-width: 72ch;
}

/* ---------------------------------------------------------- photo slider */
.lp-pslides {
  position: relative;
  height: clamp(320px, 40vw, 480px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 20px 50px -24px color-mix(in srgb, var(--ink) 35%, transparent);
}
.lp-pslide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity .65s var(--ease);
  pointer-events: none;
}
.lp-pslide.on { opacity: 1; pointer-events: auto; }
.lp-pslide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Ken Burns: the active photo drifts for the slide's whole stay. Restarted
   by the .on toggle, GPU-only, and switched off with reduced motion. */
.lp-pslide.on img { animation: lp-kb 9s var(--ease) forwards; }
@keyframes lp-kb {
  from { transform: scale(1.02); }
  to   { transform: scale(1.1) translate(-1.4%, -1%); }
}
.lp-pcap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-6) var(--s-5) var(--s-4h);
  background: linear-gradient(transparent, rgba(8, 10, 14, .82) 62%);
  color: #F2F5F9;
}
.lp-pcap strong {
  font-family: var(--display); font-weight: 640; font-size: var(--t-lg);
  letter-spacing: -.014em;
}
.lp-pcap span { font-size: var(--t-sm); color: #C7CED8; max-width: 68ch; line-height: 1.5; }

/* ----------------------------------------------------------------- sections
   Sections are full-bleed bands; .lp-section-inner holds the content width.
   Alternating band treatments give the page a rhythm the flat version never
   had: light, tinted, light, dark, dark-gradient, light footer. */
.lp-section { padding: var(--s-8) 0; }
.lp-section-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 clamp(var(--s-4), 4vw, var(--s-6));
}
.lp-band {
  background: color-mix(in srgb, var(--surface-2) 62%, var(--ground));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.lp-kicker {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 660; color: var(--indigo); margin: 0 0 var(--s-2);
}
.lp-section-title {
  font-family: var(--display); font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700; letter-spacing: -0.026em; color: var(--ink);
  margin: 0 0 var(--s-6); text-wrap: balance;
}
.lp-pillars {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lp-pillars--six { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-pillar {
  position: relative;
  padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  overflow: hidden;
}
.lp-pillar::before {
  /* hairline accent along the top, brightens on hover */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--signal), var(--indigo));
  opacity: .35; transition: opacity var(--t-base);
}
.lp-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--ink) 22%, transparent);
}
.lp-pillar:hover::before { opacity: 1; }
.lp-pillar-icon {
  display: inline-flex; padding: var(--s-3);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--indigo-ghost), var(--signal-ghost));
  border: 1px solid var(--line-soft);
  color: var(--indigo);
  margin-bottom: var(--s-3h);
}
.lp-pillar-title {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 640;
  letter-spacing: -0.014em; margin: 0 0 var(--s-2); color: var(--ink);
}
.lp-pillar-body { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin: 0; }

/* The dark band. Deliberately the same in both themes — it is the page's
   moment of contrast, and the white product mock sitting on it reads like a
   photograph. Fixed inks here, so the mock's own tokens stay untouched. */
.lp-privacy {
  background:
    radial-gradient(900px 480px at 85% 10%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 60%),
    radial-gradient(700px 420px at 8% 90%, color-mix(in srgb, var(--indigo) 12%, transparent), transparent 60%),
    #10141B;
  padding: 96px 0;
}
.lp-privacy-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  align-items: center;
}
.lp-kicker-dark { color: color-mix(in srgb, var(--signal) 75%, white); }
.lp-title-dark { color: #eef4f1; }
.lp-privacy-lede { font-size: var(--t-md); color: #b9c6c1; max-width: 62ch; margin: 0 0 var(--s-4); line-height: 1.6; }
.lp-privacy-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.lp-privacy-list li {
  font-size: var(--t-sm); color: #b9c6c1; line-height: 1.55;
  padding-left: var(--s-4); position: relative;
}
.lp-privacy-list li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent);
}
.lp-privacy-list strong { color: #eef4f1; font-weight: 640; }
.lp-privacy-side { display: flex; flex-direction: column; gap: var(--s-4); }
.lp-privacy-side .mk-window { box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.lp-privacy-note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3h) var(--s-4);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
}
.lp-privacy-note svg { color: var(--signal); flex: 0 0 auto; margin-top: 2px; }
.lp-privacy-note p { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: #b9c6c1; }

/* The closing call to action continues the dark region, then hands off to
   the light footer. */
.lp-cta-band {
  background: linear-gradient(120deg, #10141B, #161B24 55%, #18202B);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: var(--s-7) 0;
}
.lp-cta-band-inner {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
}
.lp-cta-band-inner > div { flex: 1 1 380px; }
.lp-cta-band .lp-section-title { margin-bottom: var(--s-1h); }
.lp-cta-band-sub { margin: 0; font-size: var(--t-md); color: #b9c6c1; }

/* ---------------------------------------------------------------- footer */
.lp-foot { background: var(--ground); border-top: 1px solid var(--line-soft); }
.lp-foot-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(120px, 1fr));
  padding-top: var(--s-7); padding-bottom: var(--s-6);
}
.lp-foot-brand p {
  margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--ink-3);
  line-height: 1.6; max-width: 34ch;
}
.lp-foot-col { display: flex; flex-direction: column; gap: var(--s-2h); }
.lp-foot-col h4 {
  margin: 0 0 var(--s-1);
  font-size: var(--t-xs); font-weight: 660; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3);
}
.lp-foot-col a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t-sm);
  transition: color var(--t-fast);
}
.lp-foot-col a:hover { color: var(--ink); }
.lp-foot-base {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4); padding-bottom: var(--s-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs); color: var(--ink-3);
}

/* --------------------------------------------------------- scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease) var(--rd, 0ms), transform .55s var(--ease) var(--rd, 0ms);
}

/* ==========================================================================
   Sign-in page — split screen, animated, nothing else on it.
   ========================================================================== */
.si {
  flex: 1; min-width: 0; min-height: 100vh;
  display: grid; grid-template-columns: minmax(360px, 44%) 1fr;
}
.si-brand {
  /* A photograph under a deep shade. Local ink overrides keep every label
     light regardless of theme — same trick as the app's dark rail. */
  --ink:   #F0F3F8;
  --ink-2: #C6CDD8;
  --ink-3: #9AA5B3;
  position: relative;
  overflow: hidden;
  background: #10141B;
  color: var(--ink);
  border-right: 1px solid rgba(255, 255, 255, .06);
  display: grid; place-items: center; padding: var(--s-6);
}
.si-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: si-drift 26s ease-in-out infinite alternate;
}
@keyframes si-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.6%, -1.2%); }
}
.si-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 500px at 85% 90%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(10, 13, 18, .92), rgba(10, 16, 20, .78));
}
.si-brand > .si-back, .si-brand > .si-brand-center { position: relative; z-index: 1; }
.si-back {
  position: absolute; top: var(--s-4); left: var(--s-4);
  color: var(--ink-2); text-decoration: none; font-size: var(--t-sm);
  padding: var(--s-1h) var(--s-3); border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.si-back:hover { color: var(--ink); border-color: var(--line); }
.si-brand-center { text-align: center; max-width: 420px; animation: si-in .6s var(--ease) backwards; }
.si-brand-name {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); margin-top: var(--s-3);
}
.si-brand-sub { font-size: var(--t-sm); color: var(--ink-3); }
.si-pulse { width: 100%; height: 72px; margin: var(--s-5) 0 var(--s-4); }
.si-pulse-line {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: lp-draw2 2s var(--ease) .4s forwards, si-breathe 5s ease-in-out 2.6s infinite;
}
@keyframes si-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.si-cycle { position: relative; min-height: 3.4em; }
.si-claim {
  position: absolute; inset: 0;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; margin: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.si-claim.on { opacity: 1; transform: none; }

.si-panel { display: grid; place-items: center; padding: var(--s-6); background: var(--ground); }
.si-card { width: min(420px, 100%); }
.si-title {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 700;
  letter-spacing: -0.024em; color: var(--ink); margin: 0;
}
.si-sub { font-size: var(--t-sm); color: var(--ink-3); margin: var(--s-1) 0 var(--s-5); }
.si-submit { margin-top: var(--s-1); }
.si-note {
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5;
  margin: var(--s-4) 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 38px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); padding: var(--s-1h); border-radius: var(--r-xs);
  transition: color var(--t-fast);
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle[aria-pressed="true"] { color: var(--indigo); }

/* Fields rise in sequence — the one entrance animation the page needs. */
.si-field { animation: si-in .5s var(--ease) var(--rd, 0ms) backwards; }
@keyframes si-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .lp-hero { grid-template-columns: 1fr; gap: var(--s-6); }
  .lp-hero-visual { max-width: 560px; }
  .lp-collage-photo { display: none; }
  .lp-collage .mk-window { margin-top: 0; width: 100%; }
  .lp-slide { position: relative; grid-template-columns: 1fr; gap: var(--s-4); }
  .lp-slides { min-height: 0; display: grid; }
  .lp-slide { display: none; }
  .lp-slide.on { display: grid; }
}
@media (max-width: 1100px) {
  .lp-hero--cinema { grid-template-columns: 1fr; }
  .lp-step, .lp-step:nth-child(even) { grid-template-columns: 1fr; }
  .lp-step:nth-child(even) .lp-step-media { order: 0; }
  .lp-demo { grid-template-columns: 1fr; }
  .lp-privacy-grid { grid-template-columns: 1fr; }
  .lp-privacy-side { max-width: 520px; }
}
@media (max-width: 900px) {
  .si { grid-template-columns: 1fr; }
  .si-brand { display: none; }
  /* moved to the 1160px block below — the centred capsule needs room */
  .lp-hero { padding: var(--s-6) var(--s-4) var(--s-7); }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-bg { animation: none; }
  .lp-step:hover .lp-step-media img { transform: none; }
  .lp-marquee-track { animation: none; }
  .lp-demo-task, .lp-demo-sub { animation: none; }
  .lp-consent-payload.flash { animation: none; }
  .lp-hero::before { display: none; }
  .lp-pslide.on img { animation: none; }
  .si-photo { animation: none; }
  .lp-collage { transition: none; }
  .lp-hero-visual .mk-window { animation: none; }
  .mk-stat, .mk-attn, .mk-cap { animation: none; opacity: 1; }
  .mk-fill { animation: none; width: var(--w, 60%); }
  .mk-gap-task, .mk-gap-bucket { animation: none; }
  .mk-gap-task { width: 62%; } .mk-gap-bucket { width: 16%; }
  .mk-earned, .si-pulse-line { animation: none; stroke-dashoffset: 0; }
  .reveal { opacity: 1; transform: none; }
  .lp-slide { transition: none; }
  .si-field, .si-brand-center { animation: none; }
}

/* ---------------------------------------------------------------- focus */

/* A single, unmistakable focus ring. The default was a thin outline that
   disappeared against several surfaces. */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.nav-item:focus-visible { outline-offset: -2px; }

/* Keyboard users must be able to reach a table row that opens a detail view.
   Rows previously had onclick with no tabindex — mouse-only. */
tbody tr[data-open] { cursor: pointer; }
tbody tr[data-open]:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: -2px;
}

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

/* Loading state. Previously a button in flight looked identical to an idle one. */
.btn[aria-busy="true"] {
  pointer-events: none;
  opacity: .75;
}
.btn[aria-busy="true"]::after {
  content: ""; display: inline-block;
  width: 11px; height: 11px; margin-left: var(--s-2);
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin var(--t-slow) linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- radius
   Collapse the twelve measured values onto the four tokens. */
.card, section.card { border-radius: var(--r-md); }
.modal             { border-radius: var(--r-lg); }
.btn, input, select, textarea, .kcard, .stripe, .toast { border-radius: var(--r-sm); }
.badge, .segmented button { border-radius: var(--r-pill); }
.bar-track, .bar-fill { border-radius: var(--r-pill); }

.card  { box-shadow: var(--e-raised); }
.modal { box-shadow: var(--e-overlay); }

/* ---------------------------------------------------------------- layering */
th             { z-index: var(--z-sticky); }
.ai-rail       { z-index: var(--z-rail); }
.modal-back    { z-index: var(--z-overlay); }
.toasts        { z-index: var(--z-toast); }

/* ==========================================================================
   Responsive — four breakpoints replacing the seven the audit measured
   (380, 760, 900, 1080, 1180, 1240, 1480).

     sm  640   phone
     md  900   tablet / small laptop
     lg  1240  laptop
   ========================================================================== */

/* --- lg: the AI rail folds away before anything else --- */
@media (max-width: 1240px) {
  .ai-rail { position: absolute; right: 0; top: 0; bottom: 0; box-shadow: var(--e-overlay); }


  /* State lives on body.rail-hidden — the class the collapse button actually
     toggles and the one persisted to localStorage. The previous rule keyed off
     .rail-open, which no code ever set, so below 1240px the rail was stuck
     shut and the AI panel was unreachable on every tablet and small laptop. */
  body.rail-hidden .ai-rail {
    margin-right: calc(-1 * var(--rail-w));
    opacity: 0;
    pointer-events: none;
    /* pointer-events stops the mouse but not the Tab key — without this a
       keyboard user tabbed into a rail they could not see. */
    visibility: hidden;
  }
  .content-inner { max-width: none; }

  /* A 4-up grid has no room left once the rail overlays the content. */
  .grid.g4, .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- md: sidebar becomes an icon rail; the board becomes a list --- */
@media (max-width: 900px) {
  .sidebar { --sidebar-w: 62px; }
  .sidebar .brand > div,
  .nav-item > span,
  .user-chip > div:not(.avatar),
  .state-label, .state-time { display: none; }
  .nav-item { justify-content: center; padding: var(--s-3) 0; }
  .nav-divider { text-align: center; font-size: var(--t-xs); padding: var(--s-3) 0 var(--s-1); }
  .nav-sub { padding-left: 0; }

  /* The kanban was a fixed 5 × 190px = 950px minimum, so it scrolled
     horizontally on every tablet. Below md it stacks instead. */
  .kanban { grid-template-columns: 1fr; }
  .kcol { min-height: 0; }

  /* Columns marked .col-optional carry detail, not identity. Dropping them
     below md keeps the table readable rather than forcing a sideways scroll
     past the columns that actually identify the row. */
  th.col-optional, td.col-optional { display: none; }

  .content { padding: var(--s-4) var(--s-4) var(--s-6); }
  .grid.g4, .grid.g3, .grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { padding: 0 var(--s-4); }
}

/* --- sm: single column, and tables scroll inside themselves --- */
@media (max-width: 640px) {
  .grid.g4, .grid.g3, .grid.g2 { grid-template-columns: 1fr; }
  .content { padding: var(--s-3) var(--s-3) var(--s-5); }
  .card { padding: var(--s-4) var(--s-3); }

  /* Wide content must never make the page body scroll sideways. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  .modal { width: 100%; max-height: none; border-radius: 0; }
  .modal-back { padding: 0; }

  .big-clock { font-size: 34px; }
  .stat-value { font-size: 24px; }

  /* A row of actions should wrap, not overflow. */
  .card-head { flex-wrap: wrap; row-gap: var(--s-2); }
}

/* ==========================================================================
   Horizontal containment.

   .table-wrap has always had overflow-x:auto, but it never took effect: a
   flex item defaults to min-width:auto, so .content grew to its widest table
   (931px on People at a 768px viewport) and pushed the whole page sideways
   instead of letting the wrapper scroll. Zeroing the floor is what actually
   activates the scroller — at every width, not just below 640.
   ========================================================================== */
main, .work-area, .content, .content-inner { min-width: 0; }

/* The parked rail is pulled out of flow with a negative margin, so it renders
   its full width past the right edge and extends the scrollable area with it.
   That is true whether it is an overlay below 1240px or a static column above
   it — the clip was scoped to the overlay case only, which left every desktop
   page scrolling sideways as soon as someone collapsed the rail.

   `clip` rather than `hidden`: `hidden` would make main a scroll container and
   break the sticky table headers inside it. */
main { overflow-x: clip; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.card, .kcol, .grid > * { min-width: 0; }

/* The page body must never scroll horizontally at any width. */
body { overflow-x: hidden; }