/* Nous design system, as tokens. Every colour in the app comes from here, so a
   dark palette (not yet derived - see docs/GAPS.md) is a second block, not a rewrite. */
:root {
  --brand: #6125CF; --brand-hover: #5418BD; --brand-tint: rgba(97,37,207,.09);
  --brand-tint-strong: rgba(97,37,207,.16); --brand-light: #9B7BE8;
  --ink: #1A1726; --dark: #14111F; --body: #3A3744; --secondary: #56525E;
  --muted: #8A8678; --faint: #A8A395; --pale: #B3AFA3;
  --canvas: #F1EFEA; --inset: #FAF9F6; --card: #FFFFFF;
  --line: #EAE7DF; --line-inset: #EEEBE3; --line-nav: #ECEAE3; --hair: #F1EFE9; --hair-2: #F5F3ED;
  --line-input: #E2DED6; --line-input-hover: #C9C4BA; --line-purple: #D9D3E8; --dashed: #DDD8CC;
  --logo-divider: #D8D4C8; --line-dropdown: #E8E4DC; --seg-track: #F4F2EC; --chip-past: #EFEDE6;
  --ok: #1F9B7E; --ok-tint: rgba(31,155,126,.13);
  --warn: #B8821B; --warn-tint: rgba(184,130,27,.12);
  --crit: #C2566E; --crit-tint: rgba(194,86,110,.11); --crit-on-dark: #F0A0B0;
  --shadow-card: 0 1px 3px rgba(0,0,0,.04);
  --shadow-purple: 0 4px 16px rgba(97,37,207,.08);
  --shadow-primary: 0 6px 18px rgba(97,37,207,.26);
  --shadow-danger: 0 6px 18px rgba(194,86,110,.24);
  --shadow-drop: 0 14px 40px rgba(26,23,38,.12);
  --shadow-modal: 0 14px 40px rgba(26,23,38,.24);
  --shadow-dark: 0 6px 16px rgba(26,23,38,.18);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(20px, 5vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--canvas); color: var(--ink); font-family: Outfit, sans-serif; font-size: 15px;
       line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button { font: inherit; }
input, textarea { font-family: Outfit, sans-serif; }
@keyframes nousPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.pulse { animation: nousPulse 2.4s ease-in-out infinite; }
.pulse-fast { animation: nousPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse, .pulse-fast { animation: none; } }

/* ---- layout -------------------------------------------------------------- */
.page { margin: 0 auto; padding: 44px var(--gutter) 150px; }
.page.tight { padding-top: 34px; }
.w-1280 { max-width: 1280px; } .w-1180 { max-width: 1180px; } .w-1040 { max-width: 1040px; }
.w-1000 { max-width: 1000px; } .w-940 { max-width: 940px; } .w-900 { max-width: 900px; } .w-430 { max-width: 430px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.push { margin-left: auto; }
.gap-9 { gap: 9px } .gap-10 { gap: 10px } .gap-12 { gap: 12px } .gap-14 { gap: 14px } .gap-16 { gap: 16px }
.mt-6 { margin-top: 6px } .mt-8 { margin-top: 8px } .mt-10 { margin-top: 10px } .mt-12 { margin-top: 12px }
.mt-14 { margin-top: 14px } .mt-16 { margin-top: 16px } .mt-18 { margin-top: 18px } .mt-20 { margin-top: 20px }
.mt-22 { margin-top: 22px } .mt-24 { margin-top: 24px } .mt-26 { margin-top: 26px } .mt-28 { margin-top: 28px }
.mt-30 { margin-top: 30px } .mt-34 { margin-top: 34px } .mt-36 { margin-top: 36px }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---- type ---------------------------------------------------------------- */
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.eyebrow.small { font-size: 10.5px; letter-spacing: .2em; }
.display { font-size: 44px; font-weight: 600; letter-spacing: -1.5px; line-height: 1.05; max-width: 18ch; }
.h-34 { font-size: 34px; font-weight: 600; letter-spacing: -1.1px; }
.h-30 { font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; }
.h-24 { font-size: 24px; font-weight: 600; letter-spacing: -.7px; }
.h-22 { font-size: 22px; font-weight: 600; letter-spacing: -.6px; }
.h-19 { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.h-17 { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.h-16 { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.lede { font-size: 15.5px; color: var(--body); line-height: 1.55; max-width: 62ch; }
.body { font-size: 14.5px; color: var(--body); line-height: 1.55; }
.meta { font-size: 13px; color: var(--muted); }
.meta-2 { font-size: 12.5px; color: var(--muted); }
.faint { color: var(--faint); } .pale { color: var(--pale); } .secondary { color: var(--secondary); }
.ink { color: var(--ink); } .brand { color: var(--brand); }
.note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-crit { color: var(--crit); } .t-muted { color: var(--muted); }
.divider { width: 1px; height: 12px; background: var(--line-input); }
.divider.short { height: 11px; }

/* ---- surfaces ------------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); }
.card.clip { overflow: hidden; }
.card.hover { cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; }
.card.hover:hover { border-color: var(--line-purple); box-shadow: var(--shadow-purple); }
.inset { background: var(--inset); border: 1px solid var(--line-inset); border-radius: 14px; }
.inset.r16 { border-radius: 16px } .inset.r12 { border-radius: 12px } .inset.r13 { border-radius: 13px }
.dark { background: var(--dark); color: #fff; border-radius: 18px; box-shadow: var(--shadow-dark); }
.dashed { border: 1px dashed var(--dashed); border-radius: 14px; }
.sev-left { border-left: 3px solid var(--line); }
.sev-left.ok { border-left-color: var(--line); }
.sev-left.warning { border-left-color: var(--line); }
.sev-left.warning.loud { border-left-color: var(--warn); }
.sev-left.critical { border-left-color: var(--crit); }
.sev-left.brand { border-left-color: var(--brand); }
.sev-left.warn { border-left-color: var(--warn); }
.hairline { height: 1px; background: var(--line-inset); }

/* ---- controls ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px;
       border-radius: 11px; border: 1px solid transparent; font-weight: 500; font-size: 14px; cursor: pointer;
       transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
       white-space: nowrap; background: transparent; color: var(--ink); }
.btn.primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-primary); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.primary.strong { font-weight: 600; }
.btn.outline { background: var(--card); border-color: var(--line-input); }
.btn.outline:hover { border-color: var(--line-input-hover); }
.btn.danger { background: var(--crit); color: #fff; font-weight: 600; box-shadow: var(--shadow-danger); }
.btn.ghost-dark { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.8); }
.btn.sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.btn.xs { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.btn.disabled, .btn:disabled { background: var(--chip-past); color: var(--faint); cursor: not-allowed; box-shadow: none; border-color: transparent; }
.btn.link { padding: 0; border: 0; color: var(--brand); font-size: 13px; }
.btn.link.danger-text { color: var(--crit); background: none; box-shadow: none; font-weight: 500; }
.link { color: var(--brand); font-weight: 500; font-size: 13px; cursor: pointer; }
.link.danger { color: var(--crit); }
.input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-input); border-radius: 11px;
         background: var(--card); color: var(--ink); font-size: 15.5px; outline: none;
         transition: border-color 150ms ease, box-shadow 150ms ease; }
.input.h46 { height: 46px; font-size: 15px; }
.input::placeholder { color: #B0ADB8; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(97,37,207,.14); }
textarea.input { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.pill { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 12.5px;
        font-weight: 500; white-space: nowrap; cursor: pointer; }
.pill.promote { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(97,37,207,.22); }
.pill.promote-prod { background: var(--ink); color: #fff; box-shadow: var(--shadow-dark); }
.pill.flat { background: var(--card); border: 1px solid var(--line-input); color: var(--faint); cursor: default; }
.pill.choice { padding: 9px 16px; font-size: 14px; background: var(--card); color: var(--secondary); border: 1px solid var(--line-input); transition: all 150ms ease; }
.pill.choice.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: .16em;
        text-transform: uppercase; padding: 4px 9px; border-radius: 7px; flex: none; }
.chip.production { background: var(--ink); color: #fff; }
.chip.test { background: var(--chip-past); color: var(--secondary); }
.chip.dev { background: var(--canvas); color: var(--faint); }
.chip.preview { background: var(--brand-tint); color: var(--brand); }
.chip.big { font-size: 11px; letter-spacing: .18em; padding: 6px 12px; }
.chip.mid { font-size: 10px; letter-spacing: .18em; padding: 5px 10px; }
.badge { display: inline-flex; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
         padding: 4px 9px; border-radius: 7px; }
.badge.ok { background: var(--ok-tint); color: var(--ok); }
.badge.warn { background: var(--warn-tint); color: var(--warn); }
.badge.crit { background: var(--crit-tint); color: var(--crit); }
.badge.brand { background: rgba(97,37,207,.10); color: var(--brand); }
.badge.past { background: var(--chip-past); color: var(--muted); }
.soft-chip { background: var(--card); border: 1px solid var(--line-nav); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--secondary); }
.soft-chip.inset { background: #F6F4EF; }
.may { background: var(--ok-tint); color: var(--ok); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 500; }
.may-not { background: var(--hair); color: var(--muted); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.dot.big { width: 8px; height: 8px; }
.dot.small { width: 6px; height: 6px; }
.dot.ok { background: var(--ok); } .dot.warning { background: var(--warn); } .dot.critical { background: var(--crit); }
.dot.muted { background: var(--muted); } .dot.plain { background: var(--muted); } .dot.brand { background: var(--brand); }
.dot.ring { background: transparent; border: 1.5px solid var(--dashed); }
.tick { width: 16px; height: 16px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 9px;
        display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tick.lg { width: 18px; height: 18px; font-size: 10px; }
.ring { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--dashed); flex: none; }
.ring.lg { width: 18px; height: 18px; }
.step-n { width: 18px; height: 18px; border-radius: 999px; font-size: 10px; font-weight: 600; display: inline-flex;
          align-items: center; justify-content: center; flex: none; }
.step-n.now { background: var(--brand); color: #fff; }
.step-n.todo { background: var(--chip-past); color: var(--faint); }
.mark { width: 22px; height: 22px; border-radius: 999px; color: #fff; font-size: 9.5px; font-weight: 600;
        display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mark.agent { border-radius: 7px; border: 1.5px solid var(--brand); color: var(--brand); background: var(--card); font-size: 10px; }
.mark.lg { width: 24px; height: 24px; font-size: 11px; } .mark.lg.agent { font-size: 11px; }
.mark.xl { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 12.5px;
          display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.add { border: 1.5px dashed var(--dashed); color: var(--faint); font-size: 15px; background: transparent; }
.seg { display: inline-flex; background: var(--seg-track); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg > div { padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--muted); transition: all 150ms ease; }
.seg > div.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.tabs { display: flex; gap: 2px; margin: 30px 0 24px; border-bottom: 1px solid var(--line); }
.tabs > div { padding: 13px 16px; font-size: 15px; font-weight: 500; cursor: pointer; border-bottom: 2.5px solid transparent; color: var(--secondary); }
.tabs > div.on { color: var(--brand); border-bottom-color: var(--brand); }
.switch { width: 46px; height: 27px; border-radius: 999px; flex: none; cursor: pointer; padding: 3px; background: rgba(255,255,255,.18); transition: background 150ms ease; }
.switch.on { background: var(--brand); }
.switch > div { width: 21px; height: 21px; border-radius: 999px; background: #fff; transition: transform 150ms ease; }
.switch.on > div { transform: translateX(19px); }
.bar { height: 6px; border-radius: 999px; background: var(--chip-past); overflow: hidden; }
.bar > div { height: 100%; border-radius: 999px; background: var(--ok); }
.bar.dark { background: rgba(255,255,255,.14); height: 5px; } .bar.dark > div { background: var(--brand-light); }
.code { font-family: var(--mono); font-size: 12.5px; color: var(--secondary); }
.log { background: var(--dark); padding: 18px 22px; font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.log .err { color: var(--crit-on-dark); }
.log .hi { color: var(--brand-light); }
.sqlblock { padding: 13px 15px; background: var(--dark); font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.7; white-space: pre-wrap; }
.err-line { color: var(--crit); font-size: 13px; margin-top: 8px; min-height: 1em; }
.ok-line { color: var(--ok); font-size: 13px; margin-top: 8px; }

/* ---- nav ----------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--line-nav); height: 74px; display: flex; align-items: center; }
.nav-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 34px; }
.lockup { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.lockup .word { font-weight: 500; font-size: 17px; letter-spacing: .26em; text-transform: uppercase; }
.lockup .div { width: 1px; height: 16px; background: var(--logo-divider); }
.lockup .desc { font-weight: 300; font-size: 8.5px; letter-spacing: .33em; text-transform: uppercase; color: var(--pale); line-height: 1.35; }
.lockup.on-dark .word { color: #fff; } .lockup.on-dark .div { background: rgba(255,255,255,.34); } .lockup.on-dark .desc { color: rgba(255,255,255,.7); }
.nav-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav-links > div { padding: 8px 14px; border-radius: 9px; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; color: var(--secondary); transition: background 150ms ease, color 150ms ease; }
.nav-links > div:hover { background: rgba(26,23,38,.045); }
.nav-links > div.on { color: var(--brand); background: var(--brand-tint); }
.nav-badge { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--warn-tint); color: var(--warn); }
.nav-links > div.on .nav-badge { background: var(--brand-tint-strong); color: var(--brand); }
.role-pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line-input); border-radius: 999px; background: var(--card); flex: none; font-size: 12.5px; font-weight: 500; color: var(--secondary); }
.menu { position: absolute; top: 44px; right: 0; width: 250px; background: var(--card); border: 1px solid var(--line-dropdown); border-radius: 14px; box-shadow: var(--shadow-drop); overflow: hidden; z-index: 60; }
.menu > .item { padding: 11px 16px; font-size: 14px; font-weight: 500; color: var(--body); cursor: pointer; }
.menu > .item:hover { background: #F6F4EF; }
@media (max-width: 1040px) { .nav-links { overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .role-pill { display: none !important; } }

/* ---- chain --------------------------------------------------------------- */
.chain { display: grid; padding: 4px 14px 14px; align-items: stretch; }
.chain.full { padding: 0; gap: 0; }
.cell-wrap { padding: 18px 8px; }
.chain.full .cell-wrap { padding: 0; }
.env-cell { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; height: 100%; transition: all 150ms ease; }
.env-cell:hover { border-color: var(--line-purple); box-shadow: var(--shadow-purple); }
.gap-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 26px; }
.chain.full .gap-cell { justify-content: center; height: 100%; padding: 0 8px; gap: 9px; }
.gap-note { font-size: 11.5px; color: var(--pale); text-align: center; line-height: 1.3; }
.state { font-size: 13px; font-weight: 500; }

/* ---- grids --------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .two-col { grid-template-columns: minmax(0,1fr); } }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
.tile { padding: 18px 22px; border-right: 1px solid var(--hair); }
.tile:nth-child(3n) { border-right: 0; }
.tile:nth-child(n+4) { border-top: 1px solid var(--hair); }
.tile .val { font-size: 24px; font-weight: 600; letter-spacing: -.5px; margin-top: 9px; }
.tile .val.critical { color: var(--crit); } .tile .val.warning { color: var(--warn); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.three.cards { gap: 14px; max-width: 1000px; }
@media (max-width: 760px) { .three { grid-template-columns: 1fr; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.stages3 { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--hair); }
.stages3 > div { padding: 20px 24px; border-right: 1px solid var(--hair); }
.stages3 > div:last-child { border-right: 0; }
.stages3 > div.done { background: var(--inset); }

/* ---- modals & dock ------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(26,23,38,.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: var(--card); border-radius: 18px; box-shadow: var(--shadow-modal); overflow: hidden; max-height: 86vh; display: flex; flex-direction: column; width: 100%; }
.modal.w520 { max-width: 520px; } .modal.w620 { max-width: 620px; } .modal.w440 { max-width: 440px; }
.modal .m-body { padding: 26px 28px 20px; overflow: auto; }
.modal .m-foot { padding: 18px 28px; background: var(--inset); border-top: 1px solid var(--line-inset); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dock { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 340px; background: var(--dark); border-radius: 18px; box-shadow: 0 14px 40px rgba(26,23,38,.28); overflow: hidden; color: #fff; }

/* ---- sign-in ------------------------------------------------------------- */
.signin-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.signin-brand { background: radial-gradient(120% 90% at 18% 8%, #7B3BE8 0%, #6125CF 42%, #46159E 100%); padding: clamp(32px,5vw,56px); display: flex; flex-direction: column; color: #fff; }
.signin-pitch { margin-top: auto; max-width: 20ch; }
.signin-pitch .h { font-size: clamp(34px,4.2vw,54px); font-weight: 600; letter-spacing: -1.8px; line-height: 1.06; }
.signin-locations { margin-top: auto; padding-top: 40px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: rgba(255,255,255,.5); }
.signin-locations .d { width: 1px; height: 11px; background: rgba(255,255,255,.24); }
@media (max-width: 760px) {
  .signin-split { grid-template-columns: minmax(0,1fr); }
  .signin-brand { min-height: 0; padding: 24px 22px; }
  .signin-pitch, .signin-locations { display: none; }
}

/* ---- phones and small tablets ------------------------------------------- */
html, body { overflow-x: hidden; }
.tabs { overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > div { flex: none; }
.mono, .code { overflow-wrap: anywhere; }
.log, .sqlblock { overflow-x: auto; }
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .page { padding-top: 28px; padding-bottom: 110px; max-width: 100vw; }
  /* Flex children shrink instead of forcing their parent wider than the phone. */
  .row > *, .col > *, .card, .inset, .dark, .tile, .env-cell { min-width: 0; max-width: 100%; }
  .nowrap { white-space: normal; }
  .env-cell .ellipsis, .card .ellipsis { white-space: normal; overflow-wrap: anywhere; }
  .mono.brand, .row > .mono[style*="width:150px"] { white-space: nowrap; overflow-wrap: normal; width: auto !important; }
  .page.tight { padding-top: 22px; }
  /* Header: wordmark, scrollable links, avatar. Nothing else. */
  .nav { height: auto; min-height: 60px; }
  .nav-inner { gap: 12px; padding: 8px var(--gutter); }
  .lockup { gap: 0; flex: none; }
  .lockup .div, .lockup .desc { display: none; }
  .lockup .word { font-size: 15px; letter-spacing: .22em; }
  .nav-links { flex: 1 1 auto; min-width: 0; gap: 0; }
  .nav-links > div { padding: 8px 10px; font-size: 14px; }
  .nav .push { flex: none; gap: 8px; }
  /* Type scales down instead of overflowing. */
  .display { font-size: clamp(28px, 8.5vw, 44px); letter-spacing: -1px; max-width: none; }
  .h-34 { font-size: clamp(24px, 7vw, 34px); letter-spacing: -.8px; }
  .h-30 { font-size: 26px; }
  .h-24 { font-size: 21px; }
  .lede, .body { font-size: 14.5px; }
  /* One column everywhere. */
  .two-col, .three, .three.cards, .two, .tiles { grid-template-columns: 1fr !important; }
  .three.cards { gap: 10px; }
  .tile { border-right: 0 !important; border-top: 1px solid var(--hair); }
  .tile:first-child { border-top: 0; }
  .stages3 { grid-template-columns: 1fr; }
  .stages3 > div { border-right: 0; border-bottom: 1px solid var(--hair); }
  /* The chain stacks; the gap between two environments becomes a row. */
  .chain, .chain.full { grid-template-columns: 1fr !important; padding: 4px 10px 10px; }
  .chain.full { padding: 0; }
  .cell-wrap { padding: 8px 0; }
  .gap-cell, .chain.full .gap-cell { flex-direction: row; justify-content: flex-start; padding: 2px 6px; gap: 12px; height: auto; }
  .gap-note { text-align: left; }
  /* List rows wrap; fixed pixel columns give way. */
  .card .row, .inset .row, .card.row, .inset.row { flex-wrap: wrap; row-gap: 6px; }
  .row > div[style*="width:190px"], .row > div[style*="width:150px"]:not(.mono), .row > div[style*="width:130px"],
  .row > div[style*="width:330px"], .row > div[style*="width:200px"], .row > .grow { width: auto !important; flex: 1 1 100% !important; }
  .row > div[style*="width:78px"], .row > div[style*="width:70px"], .row > div[style*="width:66px"] { width: auto !important; text-align: left !important; }
  .push { margin-left: 0; }
  .card .row > .push, .inset .row > .push, .card.row > .push { flex: 1 1 100%; }
  .nav .push, .nav-links { flex-wrap: nowrap; }
  .card .row:has(> .mono[style*="width:150px"]) { flex-wrap: nowrap; }
  .card .row:has(> .mono[style*="width:150px"]) > .push { flex: 0 0 auto; margin-left: auto; }
  .card .row:has(> .mono[style*="width:150px"]) > .mono { font-size: 11.5px; }
  /* Inputs fill the line. */
  .input[style*="width:"], input.input, textarea.input { width: 100% !important; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg > div { flex: none; padding: 8px 12px; font-size: 13.5px; }
  .btn { padding: 10px 16px; }
  .dark.row > .push { width: 100%; }
  .dark.row > .push .btn { flex: 1; }
  /* Overlays use the whole screen. */
  .scrim { padding: 10px; align-items: flex-end; }
  .modal { max-height: 92vh; border-radius: 16px; }
  .modal .m-body { padding: 20px 18px 16px; }
  .modal .m-foot { padding: 14px 18px; }
  .modal .m-foot .push { width: 100%; }
  .modal .m-foot .push .btn { flex: 1; }
  .dock { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .menu { width: 230px; }
  .w-430 { padding-left: 16px; padding-right: 16px; }
  /* Sign-in: form first on a phone. */
  .signin-split > div:last-child { padding: 28px 18px; }
}

/* ---- mobile menu --------------------------------------------------------- */
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-input); background: var(--card); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); }
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(26,23,38,.42); display: flex; align-items: flex-start; justify-content: flex-end; }
.sheet-panel { width: min(320px, 88vw); height: 100%; background: var(--card); box-shadow: -14px 0 40px rgba(26,23,38,.18); display: flex; flex-direction: column; }
.sheet-links { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.sheet-links > div { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: 11px; font-size: 17px; font-weight: 500; color: var(--secondary); cursor: pointer; }
.sheet-links > div.on { color: var(--brand); background: var(--brand-tint); }
.sheet-account { margin-top: auto; padding: 18px 20px 28px; border-top: 1px solid var(--hair); }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  .nav .avatar-wrap { display: none; }
  .nav-inner { justify-content: space-between; }
  .row.meta { flex-wrap: wrap; row-gap: 4px; }
  .divider { display: none; }
  .row.meta > div, .row.wrap.meta > div { flex: 0 1 auto; }
}