/* Callsign — the brand, scoped (design_handoff_callsign 5, opinion 27). Loads only on Callsign surfaces: the marketing
   page, the board, the free room's head, the foot line and the Squawk layout. Amber is TEXT only on dark grounds;
   on paper it is a fill or a 2px rule. Buttons stay Cloudbase blue on light grounds. */
:root { --strip-ground: #101828; --strip-live: #f5a623; --strip-ground-2: #1b2638; --strip-hair: #2a3850;
        --strip-rule: #24324a; --strip-label: #5f7590; --strip-quiet: #8b9ab3;
        --strip-paper: #f4efe2; --strip-paper-rule: #d9cfb8; --strip-paper-label: #8a7a55; --strip-paper-ink: #6b5d3e; }

/* the mark: an @ on a transponder light */
.cs-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--strip-ground);
  color: var(--strip-live); font-family: var(--mono); line-height: 1; border-radius: 20%; }
.cs-dark .cs-mark, .cs-mark.on-dark { background: var(--strip-ground-2); box-shadow: inset 0 0 0 1px var(--strip-hair); }
.cs-mark-44 { width: 44px; height: 44px; font-size: 26px; } .cs-mark-22 { width: 22px; height: 22px; font-size: 13px; }
.cs-mark-16 { width: 16px; height: 16px; font-size: 10px; } .cs-mark-14 { width: 14px; height: 14px; font-size: 9px; }
.cs-mark-12 { width: 12px; height: 12px; font-size: 8px; }
.cs-word { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.cs-dark .cs-word { color: #fff; }
.cs-from { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--strip-quiet); }

/* the ident ring — "this page is live", nothing else */
.cs-ident { position: relative; width: 8px; height: 8px; flex: none; display: inline-block; }
.cs-ident::before, .cs-ident::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--strip-live); }
.cs-ident::before { animation: cs-ident 2s ease-out infinite; }
.cs-ident.off::before, .cs-ident.off::after { background: var(--strip-quiet); animation: none; }
@keyframes cs-ident { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cs-ident::before { animation: none; opacity: 0; } }

/* phonetic readout — only in the claim field, the card back and the share image */
.cs-phon { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--strip-live); }

/* the amber button: only on dark Callsign surfaces (ground-colored text, 9.6:1) */
.cs-btn-amber { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--strip-live);
  color: var(--strip-ground); border: 1px solid var(--strip-live); border-radius: 3px; padding: 12px 22px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.cs-btn-amber:hover { background: #ffb73d; }
.cs-dark a.cs-btn-amber, .cs-dark a.cs-btn-amber:hover { color: var(--strip-ground); }   /* beat .cs-dark a */
.cs-btn-amber[disabled] { opacity: .5; cursor: default; }

/* the one pill: "Copy that" */
.cs-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--strip-ground); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

/* dark Callsign surface */
.cs-dark { background: var(--strip-ground); color: #d8e0ee; }
.cs-dark a { color: #c7d5f5; }

/* a flight strip (board, marketing, card): paper strip literals live here and nowhere else */
/* paper is paper in any theme: strips and the style swatches keep day ink at night */
.cs-strip, .csm-paper, .csm-style-card { --ink: #11203b; --ink-body: #33415c; --ink-quiet: #5a6b86; --ink-faint: #8b9ab3;
  --line: #d8e0ee; --line-quiet: #eef2f8; --line-strong: #b9c7de; }
.cs-strip { display: grid; grid-template-columns: 6px 120px minmax(0, 1fr) auto auto 34px; align-items: stretch;
  background: var(--strip-paper); color: var(--ink); border-radius: 2px; text-decoration: none; min-height: 72px; transition: box-shadow .12s; }
.cs-strip:hover, .cs-strip:focus-visible { box-shadow: 0 0 0 2px var(--strip-live); outline: none; }
.cs-strip-bar { background: var(--accent, #1d4ed8); border-radius: 2px 0 0 2px; }
.cs-strip-cs { display: flex; align-items: center; padding: 0 14px; font-family: var(--fig); font-size: 17px; color: var(--ink);
  border-right: 1px solid var(--strip-paper-rule); }
.cs-strip-who { display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; min-width: 0; }
.cs-strip-who b { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cs-strip-who span { font-family: var(--prose); font-size: 14px; color: var(--strip-paper-ink); margin-top: 3px; overflow-wrap: anywhere; }
.cs-strip-cell { display: flex; align-items: center; padding: 0 14px; font-family: var(--fig); font-size: 14px; color: var(--ink);
  border-left: 1px solid var(--strip-paper-rule); }
.cs-strip-style { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--strip-paper-label); min-width: 110px; }
.cs-strip-go { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--strip-paper-rule);
  font-family: var(--mono); font-size: 11px; color: var(--ink); }
.cs-new { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--strip-paper-label);
  border: 1px solid var(--strip-paper-rule); border-radius: 2px; padding: 2px 5px; }
@media (max-width: 640px) {
  .cs-strip { grid-template-columns: 5px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .cs-strip-bar { grid-row: 1 / 3; }
  .cs-strip-cs { border: 0; padding: 10px 12px 0; font-size: 15px; }
  .cs-strip-who { grid-column: 2 / 4; padding: 4px 12px 12px; }
  .cs-strip-cell:not(.cs-strip-squawk), .cs-strip-style, .cs-strip-go { display: none; }
  .cs-strip-squawk { grid-column: 3; grid-row: 1; border: 0; padding: 10px 12px 0; }
}

/* the foot line under a free page's card — protected by the rule person_page.html puts after the page's CSS */
.cs-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px auto 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.cs-foot a { color: var(--ink-faint); text-decoration: none; }
.cs-foot a:hover { color: var(--ink-quiet); }
.cs-foot .cs-get { color: var(--ink-quiet); text-decoration: underline; text-underline-offset: 3px; }

/* the free account's shell (4e) */
.cs-free { background: var(--surface-sunk); }
.csf-head { display: flex; align-items: center; gap: 18px; padding: 12px clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.csf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.csf-brand .cs-word { font-size: 18px; }
.csf-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--strip-quiet); }
.csf-live b { font-family: var(--fig); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--strip-live); }
.csf-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.csf-nav a, .csf-me summary { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c7d5f5; text-decoration: none; cursor: pointer; }
.csf-me { position: relative; }
.csf-me summary { list-style: none; }
.csf-me summary::-webkit-details-marker { display: none; }
.csf-me > div { position: absolute; right: 0; top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px; z-index: 5; }
.csf-out { all: unset; cursor: pointer; padding: 6px 10px; font-family: var(--prose); font-size: 14px; color: var(--ink); white-space: nowrap; }
.csf-main { max-width: 1240px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 28px) 60px; }
.csf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.csf-left > .acct-card { margin-top: 0; }
.csf-right { display: grid; gap: 14px; }
@media (max-width: 1000px) { .csf-grid { grid-template-columns: 1fr; } .csf-nav { margin-left: 0; } }

/* 6b — the Squawk page layout */
.sq-card { max-width: 640px; margin: 0 auto; padding: 0 !important; overflow: hidden; border-radius: 10px; }
.sq-band { background: var(--strip-ground); padding: 24px clamp(16px, 5%, 26px) 0; }
.sq-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sq-photo { width: calc(var(--pp-photo, 84px) * .9); height: calc(var(--pp-photo, 84px) * .9);   /* Small / Large (Look) */
  flex: none; border-radius: var(--pp-photo-r); border: 1px solid var(--strip-hair); overflow: hidden; background: #18233a; }
.sq-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-who { flex: 1 1 180px; min-width: 0; }
.sq-where { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--strip-quiet); }
.sq-live { color: var(--strip-live); }
.sq-name { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 6vw, 36px); line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 5px 0 0; }
.sq-title { font-family: var(--prose); font-size: 16px; color: #d8e0ee; margin-top: 3px; }
.sq-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); margin: 20px calc(-1 * clamp(16px, 5%, 26px)) 0; border-top: 1px solid var(--strip-rule); }
.sq-strip > div { padding: 10px 12px 12px; border-left: 1px solid var(--strip-rule); }
.sq-strip > div:first-child { border-left: 0; }
.sq-strip i { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--strip-label); }
.sq-strip b { display: block; font-family: var(--fig); font-weight: 400; font-size: 16px; color: #fff; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sq-strip b.sq-amber { color: var(--strip-live); }
.sq-strip em { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--strip-quiet); margin-top: 2px; }
.sq-body { padding: calc(var(--pp-pad, 30px) - 8px) clamp(16px, 5%, 26px) 4px; }   /* Roomy 22, Compact 14 */
.sq-bio { margin-top: 0 !important; }
.sq-body .pp-now { border-left-color: var(--strip-live); }
.sq-body .pp-actions { margin: 20px 0 18px; }
.sq-link { display: grid; grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline;
  padding: var(--pp-row, 12px) clamp(16px, 5%, 26px); border-top: 1px solid var(--line-quiet); text-decoration: none; }
.sq-link:hover { background: var(--surface-quiet); }
.sq-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); }
.sq-v { font-family: var(--prose); font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.sq-go { font-family: var(--mono); font-size: 10px; color: var(--accent); }
.sq-shelf { padding: 0 clamp(16px, 5%, 26px) 16px; }
.sq-foot { margin: 0 !important; padding: 14px clamp(16px, 5%, 26px); border-top: 1px solid var(--line-quiet); background: var(--surface-quiet); }

/* 4c claim · 4d first run · 4f back */
.cs-claim-in { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 0 10px; }
.cs-claim-in span { font-family: var(--fig); font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.cs-claim-in input { border: 0 !important; flex: 1; min-width: 0; padding: 10px 2px !important; font-family: var(--fig) !important; font-size: 14px !important; outline: none; box-shadow: none !important; }
.cs-claim-in i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); white-space: nowrap; }
.cs-claim-in i.taken, .cs-claim-in i.reserved { color: var(--warn); }
.cs-sug { display: flex; gap: 6px; margin-top: 6px; }
.cs-sug button { all: unset; cursor: pointer; font-family: var(--fig); font-size: 12px; color: var(--accent); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; }
.cs-sent-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ok); margin-bottom: 8px; }
.cs-held { border-left: 2px solid var(--accent); background: var(--surface-quiet); padding: 12px 16px; margin: 16px 0; font-family: var(--prose); font-size: 15px; line-height: 1.55; color: var(--ink-body); }
.cs-held-k { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 4px; }
.cs-again { display: flex; justify-content: space-between; align-items: center; font-family: var(--prose); font-size: 15px; color: var(--ink-body); }
.csx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.csx-card { padding: 22px 28px; }
.csx-steps { display: flex; gap: 18px; border-bottom: 1px solid var(--line-quiet); margin-bottom: 18px; }
.csx-steps a { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.csx-steps a.on { color: var(--accent); border-bottom-color: var(--accent); }
.csx-h { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin: 0; }
.csx-say { font-family: var(--prose); font-size: 15.5px; line-height: 1.6; color: var(--ink-quiet); margin: 6px 0 16px; }
.csx-card form > input, .csx-card form > textarea { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.csx-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.csx-photo img { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); }
.csx-f { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.csx-skip { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); text-decoration: none; }
.csx-place { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-quiet); }
.csx-place b { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.csx-place span { font-family: var(--prose); font-size: 13.5px; color: var(--ink-quiet); }
.csx-place textarea { width: 100%; box-sizing: border-box; }
.csx-copy { display: flex; gap: 8px; }
.csx-copy input { flex: 1; font-family: var(--fig); font-size: 13px; }
.csx-pill { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; }
.csb-card { max-width: 640px; margin: 40px auto; padding: 30px 34px; }
.csb-h { font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--ink); margin: 6px 0 14px; }
.csb-say { font-family: var(--prose); font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.csb-f { display: flex; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
@media (max-width: 960px) { .csx-grid { grid-template-columns: 1fr; } .csx-place { grid-template-columns: 1fr; } }

/* the marketing page and the board (Callsign.dc.html, The Board.dc.html) */
.csm-body { margin: 0; background: var(--strip-ground); }
.csm-body.page { background: var(--surface); }
.csm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px); box-sizing: border-box; }
.csm-nav { max-width: 1120px; margin: 0 auto; padding: 18px clamp(16px, 5vw, 40px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-sizing: border-box; }
.csm-brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.csm-brand .cs-mark { align-self: center; }
.csm-brand .cs-word { font-size: 20px; }
.csm-nav nav { margin-left: auto; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.csm-nav nav a:not(.cs-btn-amber) { font-family: var(--prose); font-size: 15px; color: #d8e0ee; text-decoration: none; }
.csm-nav nav a:not(.cs-btn-amber):hover { color: #fff; }
.csm-claim.cs-btn-amber, .csm-nav .csm-claim { padding: 10px 16px; margin-top: 0; }
.csm-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(40px, 8vw, 90px); padding-bottom: clamp(48px, 8vw, 90px); }
.csm-k { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--strip-live); }
.csm-display { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 7vw, 80px); line-height: 1; letter-spacing: -.035em; color: #fff; margin: 18px 0; }
.csm-display.sm { font-size: clamp(36px, 5.5vw, 64px); }
.csm-lede { font-family: var(--prose); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: #c4cde0; max-width: 60ch; }
.csm-lede.dark { color: var(--ink-body); }
.csm-small { font-family: var(--prose); font-size: 14px; color: var(--strip-quiet); }
.csm-small.dark { color: var(--ink-quiet); }
.csm-claim { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.csm-claim-in { flex: 1 1 280px; display: flex; align-items: center; background: #162036; border: 1px solid var(--strip-hair); border-radius: 3px; padding: 0 14px; }
.csm-claim-in span { font-family: var(--fig); font-size: 15px; color: #5f7590; }
.csm-claim-in input { all: unset; flex: 1; min-width: 0; font-family: var(--fig); font-size: 15px; color: #fff; padding: 14px 2px; text-align: left; }
.csm-claim-in i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6fcf97; }
.csm-claim-in i.taken, .csm-claim-in i.reserved { color: var(--strip-live); }
.csm-phon { margin-top: 12px; min-height: 16px; }
.csm-k2 { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--strip-quiet); margin-bottom: 10px; }
.csm-paper { display: grid; grid-template-columns: 8px 1.5fr 1fr 1fr; background: var(--strip-paper); border-radius: 2px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.csm-paper-bar { background: var(--strip-live); }
.csm-cell { padding: 16px 14px; border-left: 1px solid var(--strip-paper-rule); }
.csm-cell-cs { border-left: 0; }
.csm-cell i { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--strip-paper-label); }
.csm-cell b { display: block; font-family: var(--fig); font-weight: 400; font-size: clamp(18px, 2.4vw, 26px); color: var(--ink); margin: 8px 0; overflow-wrap: anywhere; }
.csm-cell em { font-family: var(--prose); font-size: 13.5px; color: var(--strip-paper-ink); }
.csm-cell-cs em { font-style: italic; }
.csm-caret { display: inline-block; width: 2px; height: 1em; background: var(--ink); vertical-align: -3px; margin-left: 2px; animation: csm-blink 1s steps(1) infinite; }
@keyframes csm-blink { 50% { opacity: 0; } }
.csm-band { background: #0d1524; border-top: 1px solid #1b2638; padding: clamp(48px, 7vw, 80px) 0; }
.csm-k3 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8fb0ff; }
.csm-k3.dark { color: var(--ink-quiet); }
.csm-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: #fff; margin: 14px 0; max-width: 20ch; }
.csm-h2.dark { color: var(--ink); }
.csm-strips { display: grid; gap: 8px; margin: 26px 0 12px; }
.csm-light { background: var(--surface-sunk); padding: clamp(56px, 8vw, 96px) 0; }
.csm-white { background: var(--surface); padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line-quiet); }
.csm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 5vw, 56px); align-items: center; }
.csm-points { list-style: none; counter-reset: p; padding: 0; margin: 20px 0 0; }
.csm-points li { counter-increment: p; display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--line); }
.csm-points li::before { content: "0" counter(p); font-family: var(--fig); font-size: 13px; color: var(--ink-quiet); grid-row: 1 / 3; }
.csm-points b { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.csm-points span { font-family: var(--prose); font-size: 15px; line-height: 1.6; color: var(--ink-body); margin-top: 4px; }
.csm-mini { max-width: 520px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(17,32,59,.12); }
/* the demo sits in a window onto the page — it scrolls, like the real thing (Design, mk "What's behind it") */
.csm-frame { max-width: 560px; height: min(620px, 80vh); overflow-y: auto; box-sizing: border-box; padding: clamp(16px, 4%, 40px) clamp(16px, 4%, 40px) 0;
             background: var(--paper, #f4f6fb); border: 1px solid var(--line); border-radius: 12px; overscroll-behavior: contain; }
.csm-frame .csm-mini { max-width: none; box-shadow: none; border-radius: 8px 8px 0 0; }
.csm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 18px; }
.csm-btn { white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-body);
           background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px; padding: 9px 16px; }
.csm-btn.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.csm-initials { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 22px; color: #c7d5f5; }
.csm-initials.sm { width: 44px; height: 44px; border-radius: 6px; background: #18233a; font-size: 16px; flex: none; }
.csm-bio { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 0; }
.csm-now { border-left: 2px solid var(--strip-live); padding: 2px 0 2px 14px; margin: 16px 0 12px; font-family: var(--prose); font-size: 15px; color: var(--ink-body); }
.csm-now i { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-quiet); }
.csm-radar { padding: clamp(56px, 8vw, 96px) 0; }
.csm-scope { position: relative; width: min(380px, 80vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: #0b1220; border: 1px solid var(--strip-rule); overflow: hidden; }
.csm-scope::before, .csm-scope::after { content: ""; position: absolute; background: var(--strip-rule); }
.csm-scope::before { left: 50%; top: 0; bottom: 0; width: 1px; } .csm-scope::after { top: 50%; left: 0; right: 0; height: 1px; }
.csm-ring { position: absolute; border: 1px solid var(--strip-rule); border-radius: 50%; inset: 0; margin: auto; }
.csm-ring.r1 { width: 33%; height: 33%; } .csm-ring.r2 { width: 66%; height: 66%; } .csm-ring.r3 { width: 99%; height: 99%; }
.csm-sweep { position: absolute; left: 50%; top: 50%; width: 2px; height: 50%; background: linear-gradient(to bottom, #3fae6a, transparent); transform-origin: top center; animation: csm-sweep 6s linear infinite; }
@keyframes csm-sweep { to { transform: rotate(360deg); } }
.csm-blip { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--strip-live); }
.csm-clear { position: absolute; left: 0; right: 0; top: 74%; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ok, #1c7a4d); filter: brightness(1.6); }
@media (prefers-reduced-motion: reduce) { .csm-sweep, .csm-caret { animation: none; } }
.csm-turn { all: unset; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 3px; padding: 10px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.csm-placard { width: min(420px, 100%); aspect-ratio: 7 / 4; margin: 0 auto; border-radius: 4px; box-shadow: 0 24px 50px rgba(17,32,59,.25); overflow: hidden; }
.csm-placard img { width: 100%; height: 100%; display: block; }
.csm-placard img[hidden] { display: none; }
.csm-four { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 26px; }
.csm-style-card { height: 260px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.csm-s-name { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }
.csm-workbench .csm-s-name { font-family: "Space Grotesk", var(--prose); }
.csm-field .csm-s-name { font-family: Newsreader, var(--serif); }
.csm-s-strip { height: 22px; margin: -22px -18px 6px; background: var(--accent); }
.csm-s-band { margin: -22px -18px 6px; background: var(--strip-ground); padding: 18px; }
.csm-s-band b { display: block; font-family: var(--serif); font-weight: 600; font-size: 18px; color: #fff; }
.csm-s-band span { font-family: var(--fig); font-size: 12px; color: var(--strip-live); }
.csm-s-title { font-family: var(--prose); font-size: 14px; color: var(--ink-quiet); }
.csm-s-l { height: 6px; border-radius: 3px; background: var(--line); width: 90%; }
.csm-s-l.short { width: 60%; }
.csm-s-btn { margin-top: auto; width: 96px; height: 26px; border-radius: 3px; background: var(--accent); }
.csm-squawk .csm-s-btn { background: #1d4ed8; }
.csm-style-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-quiet); margin-top: 10px; }
.csm-narrow { max-width: 820px; }
.csm-qa { display: grid; gap: 10px; padding: 20px 0; border-top: 1px solid var(--line); }
.csm-qa > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; }
.csm-qa i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.csm-qa i.me { color: var(--accent); }
.csm-qa b { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.csm-qa p { font-family: var(--prose); font-size: 17px; line-height: 1.65; color: var(--ink-body); margin: 0; }
.csm-close { padding: clamp(64px, 9vw, 110px) 0 0; }
.csm-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.csm-center .csm-claim { width: min(560px, 100%); }
.csm-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 50px; margin-top: 70px; border-top: 1px solid #1b2638; }
.csm-foot p { font-family: var(--prose); font-style: italic; font-size: 16px; color: #c4cde0; max-width: 46ch; }
.csm-foot .csm-by { font-family: var(--fig); font-style: normal; color: var(--strip-live); text-decoration: none; }
.csm-foot .csm-by:hover { text-decoration: underline; }
.csm-foot nav { display: flex; gap: 48px; }
.csm-foot nav div { display: grid; gap: 10px; align-content: start; }
.csm-foot nav i { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #8fb0ff; }
.csm-foot nav a { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #c4cde0; text-decoration: none; }
.csm-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 5.5vw, 56px); letter-spacing: -.03em; color: #fff; margin: 34px 0 10px; }
.csb-board { padding-bottom: 40px; }
.csb-find { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 30px; }
.csb-find input { flex: 1 1 260px; background: #162036; border: 1px solid var(--strip-hair); border-radius: 3px; padding: 13px 14px; font-family: var(--prose); font-size: 16px; color: #fff; }
.csb-chips { display: flex; overflow-x: auto; border: 1px solid var(--strip-hair); border-radius: 3px; }
.csb-chips a { font-family: var(--fig); font-size: 13px; color: #d8e0ee; text-decoration: none; padding: 13px 12px; border-left: 1px solid var(--strip-hair); white-space: nowrap; }
.csb-chips a:first-child { border-left: 0; }
.csb-chips a.on { background: var(--strip-live); color: var(--strip-ground); }
.csb-group { margin-bottom: 26px; }
.csb-group h2 { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; margin: 0 0 10px; border-bottom: 1px solid var(--strip-rule); font-weight: 400; }
.csb-group h2 b { font-family: var(--fig); font-weight: 400; font-size: 18px; color: var(--strip-live); }
.csb-group h2 span { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--strip-quiet); }
.csb-group .cs-strip { margin-bottom: 6px; }
.csb-empty { padding: 30px 0; font-family: var(--prose); font-size: 17px; color: #c4cde0; }
.csb-empty b { color: #fff; font-weight: 600; }
.csb-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; margin-top: 20px; border-top: 1px solid var(--strip-rule);
  font-family: var(--prose); font-size: 15px; color: #c4cde0; }
.csb-foot a { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--strip-quiet); text-decoration: none; }
.csh-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; background: var(--surface); border-radius: 8px; padding: 28px 30px; margin: 26px 0; }
.csh-rules h2 { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); padding-bottom: 12px; border-bottom: 2px solid var(--line); margin: 0 0 4px; }
.csh-rules h2.csh-does { color: var(--ok); border-bottom-color: var(--ok); }
.csh-rules p { font-family: var(--prose); font-size: 16px; line-height: 1.6; color: var(--ink-body); padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line-quiet); }
@media (max-width: 820px) { .csm-hero { grid-template-columns: 1fr; } .csm-paper { grid-template-columns: 6px 1.4fr 1fr 1fr; } }
.cs-strip-mk { grid-template-columns: 6px 120px minmax(0, 1fr) auto auto 130px; }
.cs-again button { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cs-again button:hover { text-decoration: underline; }
.cs-pill[hidden] { display: none; }
.csx-place > .btn { justify-self: start; }
.csm-body.page.cs-dark { background: var(--strip-ground); }
/* someone who already has Cloudbase: the claim box says so instead */
.csm-mine { align-items: center; }
.csm-mine p { flex: 1 1 280px; margin: 0; font-size: 15px; line-height: 1.5; color: #c9d4e2; }
.csm-mine p b { color: #fff; font-family: var(--fig); }
.csx-adjust { margin-left: 14px; }
.csr-blocked .csr-k { margin: 4px 0 8px; }
.csr-bl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-quiet); font-family: var(--fig); font-size: 13px; color: var(--ink-body); }
.csr-bl-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csr-unblock { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sq-phon { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--strip-quiet); margin-top: 4px; }
.sq-strip [hidden] { display: none !important; }

/* ---- the room (design_handoff_callsign 10a–10c): one layout, free and full ------------------------------- */
.cs-free .csf-head { height: 56px; box-sizing: border-box; padding: 0 clamp(16px, 3vw, 26px); flex-wrap: nowrap; }
.csf-narrow { display: none; }
.csf-me > div a.csf-out { display: block; text-decoration: none; color: var(--ink); font-family: var(--prose); font-size: 14px; letter-spacing: 0; text-transform: none; }
.cs-free .csf-main:has(> .rm) { max-width: none; padding: 0; }
.rm { --rm-pad: clamp(16px, 3vw, 30px); }
.rm-app { margin: calc(-1 * var(--main-pad, 0px)) 0 0; }
.rm-link { display: flex; align-items: center; gap: 22px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 22px var(--rm-pad); }
.rm-app .rm-link { border: 1px solid var(--line); border-radius: 8px; }
.rm-link-l { flex: 1; min-width: 0; }
.rm-live { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-quiet); }
.rm-live b { font-weight: 400; color: var(--ink); }
.rm-addr { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.rm-url { font-family: var(--fig); font-size: 24px; color: var(--ink); overflow-wrap: anywhere; }
.rm-url em { font-style: normal; color: var(--accent); }
.rm-copy, .rm-open, .rm-inline { all: unset; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rm-open { color: var(--ink-quiet); }
.rm-open:hover, .rm-copy:hover { color: var(--ink); }
.rm-link-r { flex: none; display: flex; gap: 8px; white-space: nowrap; }
.rm-copy-m { display: none; }
.rm-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; padding: 24px var(--rm-pad) 40px; }
.rm-app .rm-body { padding-left: 0; padding-right: 0; }
.rm-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rm-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line-quiet); overflow-x: auto; }
.rm-tabs a { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet); text-decoration: none;
             padding-bottom: 7px; border-bottom: 2px solid transparent; white-space: nowrap; }
.rm-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.rm-list { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rm-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-quiet); }
.rm-ih { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rm-ih b { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.rm-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
.rm-tag-call { color: var(--accent); }
.rm-item.rm-new { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.rm-new .rm-tag { color: var(--accent); }
.rm-new-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.rm-by { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
.rm-when { font-family: var(--fig); font-size: 12px; color: var(--ink-quiet); white-space: nowrap; }
.rm-text { grid-column: 1 / -1; margin: 0; font-family: var(--prose); font-size: 15px; line-height: 1.6; color: var(--ink-body); white-space: pre-line; overflow-wrap: anywhere; }
.rm-thread { grid-column: 1 / -1; }
.rm-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-top: 2px; }
.rm-acts form { display: inline; }
.rm-acts > a, .rm-acts button, .rm-wb > summary { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet); }
.rm-wb > summary { color: var(--accent); list-style: none; }
.rm-wb > summary::-webkit-details-marker { display: none; }
.rm-wb[open] { flex-basis: 100%; order: 9; }
.rm-wb form { margin-top: 10px; }
.rm-wb textarea { width: 100%; box-sizing: border-box; font-family: var(--prose); font-size: 15px; line-height: 1.6; }
.rm-acts > a { color: var(--accent); }
.rm-acts button.rm-block { color: var(--ink-faint); }
.rm-acts > a:hover, .rm-acts button:hover { color: var(--ink); }
.rm-held, .rm-held-h { padding: 12px 20px; background: var(--surface-quiet); font-size: 13px; color: var(--ink-quiet); }
.rm-held-h { border-bottom: 1px solid var(--line-quiet); }
.rm-none { padding: 22px 20px; font-size: 15px; color: var(--ink-quiet); }
.rm-empty { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 34px 36px; }
.rm-quiet { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ok); }
.rm-empty h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin: 8px 0 0; }
.rm-empty > p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 8px 0 0; max-width: 56ch; }
.rm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.rm-tiles > div { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; }
.rm-tiles b { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.rm-tiles span { font-size: 14px; line-height: 1.5; color: var(--ink-quiet); margin-top: 4px; }
.rm-tiles button, .rm-tiles a { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.rm-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.rm-k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); }
.rm-page { overflow: hidden; }
.rm-mini { height: 210px; overflow: hidden; position: relative; border-bottom: 1px solid var(--line-quiet); background: var(--surface-sunk); }
.rm-mini iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(.4); transform-origin: 0 0; pointer-events: none; }
.rm-page-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.rm-page-b p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.rm-page-links { display: flex; gap: 14px; margin-top: 6px; }
.rm-page-links button { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rm-take { padding: 14px 16px; display: flex; flex-direction: column; }
.rm-take .rm-k { margin-bottom: 4px; }
.rm-take a, .rm-take button { all: unset; cursor: pointer; display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-quiet);
  font-family: var(--prose); font-size: 15px; color: var(--ink); }
.rm-take > :last-child { border-bottom: 0; }
.rm-take i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--accent); }
.rm-take a:hover, .rm-take button:hover { color: var(--accent); }
.rm-sws { padding: 0 16px; }
.rm-sws .pes-sw:last-of-type { border-bottom: 0; }
.rm-sws form + form .pes-sw { border-top: 1px solid var(--line-quiet); }
.rm-sws .pes-sw { border-bottom: 0; }
.rm-blocked { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-quiet); font-size: 13px; color: var(--ink-quiet); }
.rm-blocked button { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rm-rest { margin: 0; padding: 2px 4px; font-size: 14px; line-height: 1.6; color: var(--ink-quiet); }
@media (max-width: 900px) {
  .rm-body { grid-template-columns: minmax(0, 1fr); }
  .rm-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .csf-wide { display: none; }
  .csf-narrow { display: inline; }
  .csf-me > div a.csf-narrow { display: block; }
  .cs-free .csf-head { height: 46px; }
  .rm-link { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .rm-url { font-size: 16px; }
  .rm-addr .rm-copy { display: none; }
  .rm-link-r { display: grid; grid-template-columns: 1fr 1fr; }
  .rm-link-r .btn { min-height: 44px; justify-content: center; }
  .rm-copy-m { display: inline-flex; }
  .rm-body { padding: 12px 16px 32px; }
  .rm-item { padding: 12px 14px; }
  .rm-empty { padding: 22px 18px; }
}
.csm-nav nav a[aria-current] { color: #fff; box-shadow: inset 0 -1px 0 var(--strip-live); }
/* Callsign is in beta (Aaron, 10-27) — a small chip by the wordmark, and one line in the room's rail */
.cs-beta { display: inline-block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  color: var(--strip-live); border: 1px solid currentColor; border-radius: 3px; padding: 3px 5px 2px; margin-left: 8px; vertical-align: middle; }
.rm-beta { margin: 0; padding: 2px 4px; font-size: 14px; line-height: 1.6; color: var(--ink-quiet); }
.rm-beta .cs-beta { margin: 0 6px 0 0; color: var(--accent); }
.rm-beta button, .rm-beta a { all: unset; cursor: pointer; color: var(--accent); }
.csr-dlg textarea { width: 100%; box-sizing: border-box; margin-top: 12px; font-family: var(--prose); font-size: 15px; line-height: 1.6; }
.csr-dlg .pe-seg { margin-top: 6px; }
.csf-me > div button.csf-out { display: block; width: 100%; text-align: left; }
.csm-brand .cs-beta { margin-left: 0; align-self: center; }
/* the board's live search: a quiet dim while the next results come in */
[data-csb-results] { transition: opacity .12s; }
[data-csb-results][aria-busy] { opacity: .55; }

/* First Flight (design_handoff_callsign 14): the Squawk card with a crew line — a 3px amber rule, the dashed
   edition line, an amber photo frame, and the Crew cell. Always at night; the renderer sees to that. */
.sq-card.sq-ed { position: relative; }
.sq-ed-rule { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--strip-live); z-index: 1; }
.sq-edition { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--strip-hair); }
.sq-ed-line { font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--strip-live); }
.sq-ed-since { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--strip-quiet); }
.sq-ed .sq-photo { border-color: var(--strip-live); }
.sq-strip [data-pp~="crew"] b { font-size: 14px; white-space: nowrap; }

/* at night a strip is a night strip: the strip ground, hairline rules, light ink; the bar and the amber ring stay */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .cs-strip, :root:not(.theme-light) .csm-paper { --strip-paper: #1b2638; --strip-paper-rule: #2a3850; --strip-paper-label: #8b9ab3; --strip-paper-ink: #c4cde0;
  --ink: #f4f6fb; --ink-body: #d8e0ee; --ink-quiet: #8b9ab3; --ink-faint: #5f7590; --line: #2a3850; --line-quiet: #24324a; --line-strong: #3a5470; }
}
.night .cs-strip, .night .csm-paper { --strip-paper: #1b2638; --strip-paper-rule: #2a3850; --strip-paper-label: #8b9ab3; --strip-paper-ink: #c4cde0;
  --ink: #f4f6fb; --ink-body: #d8e0ee; --ink-quiet: #8b9ab3; --ink-faint: #5f7590; --line: #2a3850; --line-quiet: #24324a; --line-strong: #3a5470; }
@media (prefers-color-scheme: dark) { :root:not(.theme-light) .cs-strip { outline: 1px solid #2a3850; outline-offset: -1px; } }
.night .cs-strip { outline: 1px solid #2a3850; outline-offset: -1px; }
@media (prefers-color-scheme: dark) { :root:not(.theme-light) .cs-strip-bar { background: var(--accent-night, var(--accent)); } }
.night .cs-strip-bar { background: var(--accent-night, var(--accent)); }
.csx-signin { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; display: grid; gap: 16px; }
.csx-signin .acct-card { margin: 0; }

/* the home page's band (waitlist handoff §4) — the marketing hero's pieces on the home page's own rhythm */
.csh-band { padding: clamp(8px, 2vw, 24px) 0; }
.csh-in { padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(36px, 6vw, 72px); }
.csh-h { margin: 14px 0 0; }
.csh-more { margin: 18px 0 0; font-family: var(--prose); font-size: 15px; }
.csh-more a { color: var(--strip-live); text-decoration: none; }
.csh-more a:hover { text-decoration: underline; }