/* =====================================================================
   NBH CLIENT PORTAL, shared stylesheet
   Single source of truth for every portal page. Warm forced-light only.
   Extracted verbatim from the approved Home, then extended with a
   reusable component library built only from Home's own primitives.
   No new aesthetic is introduced anywhere in this file.
   ===================================================================== */

/* ============ LAY GROTESK, the brand voice ============ */
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* WARM FORCED-LIGHT. One continuous cream sheet. Never dark, anywhere. */
  --ground: #FAF9F6;                          /* cream page */
  --rail: oklch(97.2% 0.007 110);             /* sidebar, a hair deeper than page, still cream */
  --surface: #FFFFFE;                          /* near-white panels */
  --sunk: oklch(96% 0.008 120);               /* faint inset */
  --ink: #1A1A1A;                              /* warm near-black, primary type */
  --ink-2: oklch(40% 0.010 145);              /* secondary */
  --ink-3: oklch(55% 0.009 150);              /* tertiary / captions */
  --line: oklch(90% 0.008 120);               /* soft warm hairline */
  --line-2: oklch(85% 0.010 120);

  --green: #15BA88;                            /* TRUE accent, used sparingly */
  --green-ink: oklch(54% 0.115 167);          /* green that reads as text on cream */
  --green-field: oklch(74% 0.135 167);        /* the one big brand field */
  --green-on-field: #08140F;                  /* near-black type ON the green field */
  --green-deep: oklch(34% 0.06 165);          /* deep text on the green field */
  --warm: oklch(72% 0.13 70);                 /* amber, used only for "worth a nudge" signals */

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius: 14px; --radius-lg: 22px;
  --shadow: 0 1px 2px oklch(30% 0.02 140 / 0.04), 0 10px 28px oklch(30% 0.02 140 / 0.05);
  --font: "Lay Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font); background: var(--ground); color: var(--ink); font-size: 16px; line-height: 1.5; font-weight: 400; font-kerning: normal; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
::selection { background: oklch(90% 0.05 168); color: var(--ink); }
h1,h2,h3,h4 { font-weight: 700; }

/* ============ Shell ============ */
.shell { display: grid; grid-template-columns: 276px 1fr; min-height: 100vh; }

/* ============ Sidebar rail, cream, separated only by a hairline ============ */
.rail { background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--space-7) var(--space-4) var(--space-4); position: sticky; top: 0; height: 100vh; }
.brand { padding: 0 var(--space-3); margin-bottom: var(--space-8); }
.brand .logo { width: 42px; height: auto; display: block; }
.brand .sub { margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 13px; padding: 10px var(--space-3); border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; letter-spacing: -0.006em; transition: background 150ms ease, color 150ms ease; }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: 0.65; }
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.nav a.active svg { opacity: 1; color: var(--green-ink); }
.nav .badge { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--sunk); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; }
/* Optional small caption that groups nav items (e.g. "Engagement"). Subtle, cream-native. */
.nav-group { margin: var(--space-5) var(--space-3) var(--space-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.nav-group:first-child { margin-top: 0; }

.rail-spacer { flex: 1; min-height: var(--space-6); }

/* PM card with real headshot */
.pm { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--space-4); }
.pm-top { display: flex; align-items: center; gap: 12px; }
.pm .avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--line-2); }
.pm .who b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pm .who span { font-size: 12px; color: var(--ink-3); }
.pm .meta { margin: var(--space-4) 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.pm .meta svg { width: 14px; height: 14px; opacity: 0.55; flex: none; }
.pm .book { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--green); color: #08140F; border: 0; border-radius: 10px; padding: 11px; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.006em; cursor: pointer; transition: filter 140ms ease, transform 140ms ease; }
.pm .book:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pm .book:active { transform: translateY(0); }
.pm .book svg { width: 15px; height: 15px; }

/* ============ Main ============ */
.main { padding: var(--space-7) clamp(24px, 4vw, 72px) var(--space-8); max-width: 1180px; }

.topline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); font-size: 13px; color: var(--ink-3); }
.topline .sep { width: 3px; height: 3px; border-radius: 999px; background: var(--line-2); }
.topline .status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.tick { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px oklch(90% 0.05 168); flex: none; }

/* ============ Page header (masthead). Every page opens with this. ============ */
.masthead { margin-bottom: var(--space-8); }
.masthead .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 var(--space-4); }
.masthead h1 { margin: 0; font-size: clamp(2.4rem, 1rem + 4vw, 3.8rem); line-height: 0.97; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); }
.masthead h1 .light { font-weight: 500; color: var(--ink-2); letter-spacing: -0.03em; }
.masthead p { margin: var(--space-5) 0 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* ============ Section header (eyebrow + optional title) ============ */
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
section { margin-top: var(--space-8); }
/* Section-header block when a section needs a larger title under the eyebrow */
.section-header { margin-bottom: var(--space-6); }
.section-header .eyebrow { margin-bottom: var(--space-4); }
.section-header h2 { margin: 0; font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); line-height: 1.05; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); }
.section-header p.lede { margin: var(--space-3) 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* ============ THE GREEN FIELD: the one saturated brand moment on the cream page ============ */
.field { background: var(--green-field); color: var(--green-on-field); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.field .fk { font-size: 14px; font-weight: 600; color: var(--green-deep); margin: 0 0 var(--space-4); letter-spacing: 0.01em; }
.field .fv { font-size: clamp(3.6rem, 1.5rem + 7vw, 6.6rem); font-weight: 900; line-height: 0.82; letter-spacing: -0.05em; display: flex; align-items: flex-start; }
.field .fv .cur { font-size: 0.4em; font-weight: 700; margin-top: 0.16em; margin-right: 0.03em; opacity: 0.85; }
.field .fmeta { display: flex; align-items: center; gap: 10px; margin: var(--space-5) 0 0; }
.field .fmeta .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; background: var(--green-on-field); color: oklch(82% 0.10 168); padding: 5px 11px; border-radius: 999px; }
.field .fmeta .pill svg { width: 13px; height: 13px; }
.field .fmeta .since { font-size: 14px; color: var(--green-deep); max-width: 30ch; line-height: 1.4; }

.field .support { display: flex; flex-direction: column; }
/* Ledger / metric row. Lives inside the green field, but the .frow primitive is reusable. */
.frow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "val trend" "label label"; gap: 2px var(--space-4); padding: var(--space-4) 0; align-items: baseline; }
.frow + .frow { border-top: 1px solid oklch(34% 0.06 165 / 0.26); }
.frow:first-child { padding-top: 0; }
.frow .sv { grid-area: val; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.frow .sv .u { font-size: 0.46em; font-weight: 600; opacity: 0.62; margin-left: 6px; }
.frow .sv .cur { font-size: 0.5em; font-weight: 700; opacity: 0.72; vertical-align: 0.1em; }
.frow .sl { grid-area: label; font-size: 13.5px; font-weight: 500; color: var(--green-deep); margin-top: 5px; }
.frow .st { grid-area: trend; font-size: 12.5px; font-weight: 700; color: var(--green-deep); justify-self: end; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.frow .st svg { width: 12px; height: 12px; }
/* On a plain cream card (not the green field) the same ledger row reads in ink. */
.ledger .frow + .frow { border-top: 1px solid var(--line); }
.ledger .frow .sl { color: var(--ink-3); }
.ledger .frow .st { color: var(--ink-2); }
.ledger .frow .st.up { color: var(--green-ink); }

/* ============ Note / advisor letter / pull-quote ============ */
.letter { margin-top: var(--space-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(24px, 3vw, 40px); }
.letter .rule { width: 2px; background: var(--green); border-radius: 2px; grid-row: 1 / span 2; }
.letter .ltag { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 var(--space-4); }
.letter p { margin: 0; font-size: clamp(16.5px, 1rem + 0.4vw, 19px); line-height: 1.6; color: oklch(28% 0.012 150); max-width: 64ch; font-weight: 400; }
.letter p .em { font-weight: 600; color: var(--ink); }
.letter .sign { display: flex; align-items: center; gap: 12px; margin-top: var(--space-5); }
.letter .sign img { width: 38px; height: 38px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.letter .sign .sn b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.letter .sign .sn span { font-size: 12.5px; color: var(--ink-3); }

/* ============ Insight cards (We noticed in your HubSpot) ============ */
.noticed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.noticed-head .eyebrow { margin-bottom: var(--space-5); flex: 1; }
.src { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-bottom: var(--space-5); }
.src svg { width: 13px; height: 13px; color: var(--green-ink); }

.insights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.insight { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); display: flex; flex-direction: column; transition: border-color 180ms ease, transform 180ms ease; }
.insight:hover { border-color: var(--line-2); transform: translateY(-2px); }
.insight .tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-4); }
.insight .tag .d { width: 7px; height: 7px; border-radius: 999px; background: var(--green); }
.insight .tag.warm .d { background: var(--warm); }
.insight h3 { margin: 0 0 var(--space-3); font-size: 19px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.24; color: var(--ink); }
.insight h3 .big { font-weight: 900; }
.insight p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; max-width: 42ch; }
.insight .act { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--green-ink); text-decoration: none; }
.insight .act svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.insight .act:hover svg { transform: translateX(3px); }

/* ============ The work, narrated (timeline columns) ============ */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.col-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-2); }
.col-head .pip { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.col-head.shipped .pip { background: var(--green); }
.col-head.progress .pip { background: var(--ink); }
.col-head.next .pip { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.col-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.col-head .n { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 600; }

.witem { padding: var(--space-4) 0; }
.witem + .witem { border-top: 1px solid var(--line); }
.witem:first-of-type { padding-top: 0; }
.witem h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); }
.col.next .witem h4 { color: var(--ink-2); }
.witem .drives { font-size: 13px; color: var(--ink-2); line-height: 1.45; display: flex; gap: 7px; }
.witem .drives svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--green-ink); }
.col.next .witem .drives svg { color: var(--ink-3); }
.witem .when { font-size: 12px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0.01em; }

/* ============ Panels (the generic cream card with a header label) ============ */
.secondary { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: var(--space-4); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); display: flex; flex-direction: column; }
.panel .ph { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel .ph a { font-size: 11px; color: var(--green-ink); text-decoration: none; letter-spacing: 0; text-transform: none; font-weight: 600; }
/* A standalone card with no header label, for arbitrary content. Same surface language. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); }
.card.lg { border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); }

/* ============ List rows (agreements / documents) ============ */
.agreement,
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.agreement + .agreement,
.list-row + .list-row { border-top: 1px solid var(--line); }
.agreement .seal,
.list-row .seal { width: 34px; height: 34px; border-radius: 8px; flex: none; background: oklch(96% 0.022 168); display: grid; place-items: center; box-shadow: inset 0 0 0 1px oklch(88% 0.04 168); }
.agreement .seal svg,
.list-row .seal svg { width: 16px; height: 16px; color: var(--green-ink); }
/* Neutral seal variant for plain documents (no green wash) */
.list-row .seal.neutral { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.list-row .seal.neutral svg { color: var(--ink-3); }
.agreement .an,
.list-row .an { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.agreement .as,
.list-row .as { font-size: 12px; color: var(--ink-3); margin-top: 1px; display: inline-flex; align-items: center; gap: 5px; }
.agreement .as .ck,
.list-row .as .ck { width: 12px; height: 12px; color: var(--green-ink); }
.list-row .body { min-width: 0; flex: 1; }
.list-row .trail { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 10px; }
.list-row .trail .meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.list-row a.rowlink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green-ink); text-decoration: none; white-space: nowrap; }
.list-row a.rowlink svg { width: 14px; height: 14px; transition: transform 160ms ease; }
.list-row a.rowlink:hover svg { transform: translateX(2px); }

/* ============ Meeting / agenda ============ */
.meet .mdate { display: flex; align-items: baseline; gap: 8px; }
.meet .mday { font-size: 28px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.meet .mrest { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.magenda { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.magenda li { font-size: 13.5px; color: var(--ink-2); padding: 5px 0 5px 17px; position: relative; line-height: 1.42; }
.magenda li::before { content: ""; position: absolute; left: 1px; top: 11px; width: 5px; height: 5px; border-radius: 999px; background: var(--green); }

/* Agenda / timeline row, a fuller version for a dedicated Meetings page.
   Uses a leading date block plus a hairline list, never a coloured side stripe. */
.agenda-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5) 0; align-items: start; }
.agenda-row + .agenda-row { border-top: 1px solid var(--line); }
.agenda-row:first-child { padding-top: 0; }
.agenda-row .ad { text-align: center; min-width: 52px; }
.agenda-row .ad .adday { font-size: 26px; font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); display: block; }
.agenda-row .ad .admon { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 3px; }
.agenda-row .ab h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.agenda-row .ab .atime { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.agenda-row .ab .atime svg { width: 13px; height: 13px; opacity: 0.6; }
.agenda-row .ab p { margin: var(--space-3) 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; max-width: 60ch; }
.agenda-row.past .ad .adday, .agenda-row.past .ab h4 { color: var(--ink-2); }

/* ============ Learn, the single deliberate ink panel (NOT dark mode, one element) ============ */
.learn { background: var(--ink); border-color: transparent; color: var(--ground); box-shadow: var(--shadow); }
.learn .ph { color: oklch(70% 0.008 150); }
.learn h3 { margin: var(--space-2) 0 var(--space-3); font-size: 19px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.24; color: var(--ground); }
.learn p { margin: 0; font-size: 13.5px; line-height: 1.5; color: oklch(80% 0.006 150); }
.learn .go { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: oklch(80% 0.11 168); text-decoration: none; }
.learn .go svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.learn .go:hover svg { transform: translateX(3px); }
.learn .est { font-size: 11.5px; color: oklch(66% 0.008 150); margin-top: 6px; }

/* ============ Footer ============ */
footer.fine { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 12.5px; color: var(--ink-3); }
footer.fine a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
footer.fine a:hover { color: var(--green-ink); }

/* ============ Mock tag (Design mockup, illustrative data) ============ */
.mocktag { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: var(--ground); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; padding: 7px 13px; border-radius: 999px; box-shadow: 0 4px 18px oklch(0% 0 0 / 0.18); }
.mocktag .d { width: 6px; height: 6px; border-radius: 999px; background: var(--warm); }

/* =====================================================================
   EXTENDED COMPONENT LIBRARY
   Every class below is built only from Home's existing primitives
   (cream surface, hairline, green accent, ink type, tabular figures).
   No new aesthetic is introduced.
   ===================================================================== */

/* ---- Buttons ---- */
/* Primary (green), the same recipe as the PM card's Book a time button. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.006em; border-radius: 10px; padding: 11px 16px; cursor: pointer; text-decoration: none; transition: filter 140ms ease, transform 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease; border: 1px solid transparent; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-primary { background: var(--green); color: #08140F; border-color: var(--green); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
/* Ghost / secondary, transparent on cream with a hairline. No fill until hover. */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--sunk); border-color: var(--line-2); }
.btn-ghost:active { transform: translateY(1px); }
/* Quiet text link styled like the in-card "act" link. */
.btn-link { background: transparent; border: 0; padding: 0; color: var(--green-ink); font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.btn-link svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.btn-link:hover svg { transform: translateX(3px); }

/* ---- Status pill / badge ---- */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--sunk); border-radius: 999px; padding: 4px 10px; }
.pill .d { width: 7px; height: 7px; border-radius: 999px; background: var(--green); flex: none; }
.pill.good { color: var(--green-ink); background: oklch(96% 0.022 168); }
.pill.good .d { background: var(--green); }
.pill.warn { color: oklch(50% 0.11 70); background: oklch(95% 0.03 75); }
.pill.warn .d { background: var(--warm); }
.pill.neutral .d { background: var(--ink-3); }
/* Count badge, the same chip used in the nav. */
.badge-count { font-size: 11px; font-weight: 600; background: var(--sunk); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; }

/* ---- KPI / stat tile (Reports, summaries) ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.kpi .kl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.kpi .kv { font-size: clamp(2rem, 1rem + 2vw, 2.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); display: flex; align-items: flex-start; }
.kpi .kv .cur { font-size: 0.45em; font-weight: 700; margin-top: 0.18em; margin-right: 0.04em; color: var(--ink-2); }
.kpi .kv .u { font-size: 0.42em; font-weight: 600; margin-left: 8px; align-self: flex-end; margin-bottom: 0.18em; color: var(--ink-3); }
.kpi .kt { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.kpi .kt svg { width: 12px; height: 12px; }
.kpi .kt.up { color: var(--green-ink); }
.kpi .kt.down { color: oklch(52% 0.12 70); }

/* ---- Simple CSS bar (Reports). A meter, not decoration. ---- */
.barset { display: flex; flex-direction: column; gap: var(--space-4); }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-4); align-items: baseline; }
.bar .bl { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.bar .bn { font-size: 13.5px; font-weight: 700; color: var(--ink); justify-self: end; }
.bar .btrack { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bar .bfill { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.bar .bfill.quiet { background: var(--ink-3); }
.bar .bfill.warm { background: var(--warm); }

/* ---- Inline sparkline (Reports). Small, but it carries real series data. ---- */
.spark { display: inline-flex; align-items: center; gap: var(--space-4); }
.spark svg { width: 96px; height: 28px; display: block; overflow: visible; }
.spark svg .sln { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark svg .sdot { fill: var(--green); }
.spark svg .sarea { fill: oklch(74% 0.135 167 / 0.14); stroke: none; }
.spark .scap { font-size: 12.5px; color: var(--ink-3); }

/* ---- Media card (Recordings, video thumbnails with duration) ---- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.media-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: border-color 180ms ease, transform 180ms ease; text-decoration: none; }
.media-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.media-card .thumb { position: relative; aspect-ratio: 16 / 9; background: oklch(96% 0.022 168); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.media-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-card .thumb .play { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 999px; background: var(--green); display: grid; place-items: center; box-shadow: 0 4px 14px oklch(34% 0.06 165 / 0.28); }
.media-card .thumb .play svg { width: 18px; height: 18px; color: #08140F; margin-left: 2px; }
.media-card .thumb .dur { position: absolute; right: 8px; bottom: 8px; z-index: 1; font-size: 11.5px; font-weight: 700; background: var(--ink); color: var(--ground); padding: 2px 7px; border-radius: 6px; letter-spacing: 0.01em; }
.media-card .mbody { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.media-card .mbody .mtag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-ink); }
.media-card .mbody h4 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); }
.media-card .mbody .mmeta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ---- Empty state (teaches the interface, never just "nothing here") ---- */
.empty { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.empty .eicon { width: 52px; height: 52px; border-radius: 14px; background: oklch(96% 0.022 168); display: grid; place-items: center; box-shadow: inset 0 0 0 1px oklch(88% 0.04 168); margin-bottom: var(--space-2); }
.empty .eicon svg { width: 24px; height: 24px; color: var(--green-ink); }
.empty h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.empty p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.empty .actions { margin-top: var(--space-4); display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* ---- Generic content grids reused across pages ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }

/* ============ Motion ============ */
.reveal { opacity: 0; transform: translateY(12px); }
.revealed { opacity: 1; transform: none; transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .revealed { transition: none; } }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .field { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  .work { grid-template-columns: 1fr; gap: var(--space-6); }
  .secondary { grid-template-columns: 1fr 1fr; }
  .secondary .learn { grid-column: span 2; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .brand { margin: 0 auto 0 0; padding: 0; display: flex; align-items: center; gap: 14px; }
  .brand .logo { width: 32px; }
  .brand .sub { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .nav a { padding: 8px 10px; }
  .nav a span.lbl { display: none; }
  .nav .badge { display: none; }
  .nav-group { display: none; }
  .rail-spacer { display: none; }
  .pm { display: none; }
  .insights { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .main { padding: var(--space-6) var(--space-5) var(--space-7); }
}
@media (max-width: 560px) {
  .secondary { grid-template-columns: 1fr; }
  .secondary .learn { grid-column: auto; }
  .topline { flex-wrap: wrap; }
  .letter { grid-template-columns: 1fr; gap: var(--space-4); padding: 24px; }
  .letter .rule { display: none; }
}

/* =====================================================================
   PROJECT ARCHETYPE COMPONENTS
   Added for the fixed-scope PROJECT portal (timeline, progress, sign-off).
   Built ONLY from the existing tokens above: cream surface, warm hairline,
   green accent, ink type, amber "worth a nudge" signal, tabular figures.
   No new colours, fonts, radii, or shadow recipes are introduced.
   ===================================================================== */

/* ---- Phase timeline -------------------------------------------------
   Horizontal on desktop, vertical on mobile. Each .phase is a node: a
   marker (the same pip language as .col-head), a label, and meta. The
   connector between nodes is a 1px hairline; the completed run reads
   green. .done is ticked, .now is the emphasised "you are here" card,
   future phases are ghosted. .gate is an amber approval marker. */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: var(--space-2); }
.phase { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-2); padding-top: 30px; }
.phase:first-child { padding-left: 0; }
.phase:last-child { padding-right: 0; }

/* The connector rule runs through the marker row (markers sit at 9px from
   the section top). Each phase paints the rule on its own left edge so a
   done phase can colour the segment that leads into it. */
.phase::before { content: ""; position: absolute; left: 0; right: 50%; top: 9px; height: 1.5px; background: var(--line-2); }
.phase::after  { content: ""; position: absolute; left: 50%; right: 0;  top: 9px; height: 1.5px; background: var(--line-2); }
.phase:first-child::before { display: none; }
.phase:last-child::after { display: none; }
/* A completed phase greens the rule on both sides of its own (ticked) marker,
   and the segment flowing into the current phase stays green up to "now". */
.phase.done::before, .phase.done::after { background: var(--green); }
.phase.now::before { background: var(--green); }

/* Marker, positioned on the connector line. */
.phase .pmark { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 999px; background: var(--ground); display: grid; place-items: center; z-index: 1; box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: box-shadow 160ms ease; }
.phase.done .pmark { background: var(--green); box-shadow: 0 0 0 4px oklch(90% 0.05 168); }
.phase.done .pmark svg { width: 11px; height: 11px; color: #08140F; display: block; }
.phase.now  .pmark { background: var(--ground); box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px oklch(90% 0.05 168); }
.phase.now  .pmark .core { width: 8px; height: 8px; border-radius: 999px; background: var(--green); }
.phase.next .pmark, .phase.later .pmark { box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* Phase number + label. */
.phase .pno { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.phase .ptitle { font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.28; color: var(--ink); }
.phase .pmeta { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.phase.next .ptitle, .phase.later .ptitle { color: var(--ink-2); font-weight: 500; }
.phase.later { opacity: 0.72; }

/* "You are here" emphasis: the current phase lifts onto a cream surface
   card, the same recipe as the active nav item. */
.phase.now { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px var(--space-4) var(--space-4); margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-4); padding-right: var(--space-4); }
.phase.now .pmark { left: var(--space-4); transform: none; }
.phase.now::before { right: calc(100% - var(--space-4) - 9px); }
.phase.now .pno { color: var(--green-ink); }
.phase.now .here { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-ink); }
.phase.now .here .d { width: 6px; height: 6px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px oklch(90% 0.05 168); }
/* Per-phase progress note that sits only inside the current card. */
.phase.now .pprog { margin-top: var(--space-2); }
.phase:not(.now) .here, .phase:not(.now) .pprog { display: none; }

/* Gate marker: an amber diamond that hangs on the connector after the
   phase it follows, signalling an approval moment (worth your attention,
   never alarming). It uses the same warm signal token as insight tags. */
.gate { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: 30px var(--space-2) var(--space-2); min-width: 132px; }
.gate::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1.5px; background: var(--line-2); }
.gate .gmark { position: absolute; top: 2px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; border-radius: 3px; background: var(--ground); box-shadow: inset 0 0 0 2px var(--warm); z-index: 1; }
.gate .glabel { text-align: center; }
.gate .glabel .gk { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(50% 0.11 70); }
.gate .glabel .gt { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.32; margin-top: 3px; max-width: 16ch; }

/* ---- Project progress (percent complete + go-live) ------------------
   Reuses the .bar / .btrack / .bfill meter tokens, framed with a header.*/
.projbar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.projbar .pbhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.projbar .pbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.projbar .pbpct { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.1rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.projbar .pbpct .u { font-size: 0.42em; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.projbar .pbgo { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.projbar .pbgo svg { width: 14px; height: 14px; opacity: 0.6; flex: none; }
.projbar .pbgo b { font-weight: 600; color: var(--ink); }

/* ---- Sign-off action banner ----------------------------------------
   Warm and attention-drawing, never alarming. Sits on the soft green
   wash already used for .seal, with a green-ink count and a primary
   action. Green is the accent here, not red. */
.signoff-banner { background: oklch(96% 0.022 168); border: 1px solid oklch(88% 0.04 168); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4) var(--space-5); align-items: center; }
.signoff-banner .sbcount { font-size: clamp(2.4rem, 1rem + 3vw, 3.4rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; color: var(--green-ink); justify-self: center; }
.signoff-banner .sbbody { min-width: 0; }
.signoff-banner .sbk { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 6px; }
.signoff-banner .sbt { margin: 0; font-size: clamp(17px, 1rem + 0.5vw, 20px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.28; color: var(--ink); }
.signoff-banner .sbt b { font-weight: 900; }
.signoff-banner .sbsub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.signoff-banner .sbact { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: nowrap; }
.signoff-banner .sbnote { font-size: 11.5px; color: var(--ink-3); }

/* ---- Sign-off / approval card --------------------------------------
   One per deliverable. Built on the .card surface. Title, what-it-is,
   the acceptance criterion (set off by a quiet labelled line, never a
   coloured side stripe), a status pill, and an actions row. */
.signoff-list { display: flex; flex-direction: column; gap: var(--space-4); }
.signoff-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5) clamp(20px, 3vw, 28px); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3) var(--space-4); align-items: start; transition: border-color 180ms ease; }
.signoff-card:hover { border-color: var(--line-2); }
/* Leading index number, tabular, quiet. */
.signoff-card .scnum { grid-row: 1 / span 3; font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; min-width: 1.4em; }
.signoff-card .schead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.signoff-card .sctitle { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.signoff-card .scwhat { grid-column: 2; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }

/* Acceptance criterion: a quiet inset line on the soft green wash, set off
   by a small uppercase label. No side stripe, a full tint block instead. */
.signoff-card .scaccept { grid-column: 2; margin-top: var(--space-3); background: oklch(97% 0.014 168); border: 1px solid oklch(91% 0.025 168); border-radius: 10px; padding: 10px 13px; display: flex; gap: 9px; align-items: flex-start; }
.signoff-card .scaccept svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--green-ink); }
.signoff-card .scaccept .acl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-ink); display: block; margin-bottom: 2px; }
.signoff-card .scaccept p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* Status pill sits top-right; reuse the shared .pill states. */
.signoff-card .scstatus { grid-row: 1; grid-column: 3; justify-self: end; }

/* Actions row, full width under the body. One primary (Accept), one ghost
   (Request changes). */
.signoff-card .scactions { grid-column: 2 / -1; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.signoff-card .scactions .scaside { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* State: ACCEPTED. Actions collapse to a confirmation line with a green
   tick and timestamp. The whole card reads settled, not loud. */
.signoff-card.accepted { border-color: oklch(88% 0.04 168); }
.signoff-card.accepted .scactions { display: none; }
.signoff-card .scconfirm { display: none; grid-column: 2 / -1; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.signoff-card.accepted .scconfirm { display: flex; }
.signoff-card .scconfirm .ckdot { width: 20px; height: 20px; border-radius: 999px; background: var(--green); display: grid; place-items: center; flex: none; }
.signoff-card .scconfirm .ckdot svg { width: 12px; height: 12px; color: #08140F; }
.signoff-card .scconfirm b { color: var(--ink); font-weight: 600; }

/* State: CHANGES REQUESTED. Shows the client's note and a "with
   Neighbourhood" handoff pill; primary action steps back to a quiet edit. */
.signoff-card.changes { border-color: oklch(90% 0.03 75); }
.signoff-card .scchanges { display: none; grid-column: 2 / -1; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); flex-direction: column; gap: var(--space-3); }
.signoff-card.changes .scchanges { display: flex; }
.signoff-card.changes .scactions { display: none; }
.signoff-card .scchanges .ccnote { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.signoff-card .scchanges .ccnote .q { color: var(--ink); font-weight: 500; }
.signoff-card .scchanges .ccfoot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Project archetype responsive ----------------------------------*/
@media (max-width: 920px) {
  /* Timeline goes vertical: nodes stack, the connector becomes a left rail. */
  .timeline { grid-auto-flow: row; grid-auto-columns: auto; }
  .phase { padding: var(--space-2) 0 var(--space-5) 34px; padding-top: var(--space-2); }
  .phase:first-child { padding-left: 34px; }
  .phase::before, .phase::after { left: 9px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .phase::before { top: 0; height: 18px; bottom: auto; }
  .phase::after { top: 18px; bottom: 0; height: auto; }
  .phase:first-child::before { display: block; background: transparent; }
  .phase:last-child::after { display: none; }
  .phase .pmark { top: 0; left: 0; transform: none; }
  .phase.now { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 48px; }
  .phase.now .pmark { left: var(--space-4); }
  .phase.now::before { right: auto; }
  .gate { align-self: flex-start; min-width: 0; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2) 0 var(--space-4) 34px; }
  .gate::before { left: 9px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .gate .gmark { top: 2px; left: 2px; transform: rotate(45deg); }
  .gate .glabel { text-align: left; }
  .gate .glabel .gt { max-width: none; }
}
@media (max-width: 760px) {
  .signoff-banner { grid-template-columns: auto 1fr; }
  .signoff-banner .sbact { grid-column: 1 / -1; justify-self: stretch; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
  .signoff-banner .sbact .btn { flex: 1; min-width: 160px; }
  .signoff-card { grid-template-columns: auto 1fr; }
  .signoff-card .scstatus { grid-row: auto; grid-column: 1 / -1; justify-self: start; order: -1; }
  .signoff-card .schead { flex-direction: column; gap: 6px; }
}
@media (max-width: 480px) {
  .signoff-banner { grid-template-columns: 1fr; text-align: left; }
  .signoff-banner .sbcount { justify-self: start; }
  .signoff-card .scactions { flex-direction: column; align-items: stretch; }
  .signoff-card .scactions .btn { width: 100%; }
  .signoff-card .scactions .scaside { margin: 4px 0 0; }
}