/* The calls page (design_handoff_callsign ROUND2 · 12, Callsign Calls.dc.html). Fluid, max 1120, clamp() padding,
   auto-fit grids — the marketing page's shape. Dark bands on --strip-ground, light ones on the surfaces. */
.cc { font-family: var(--prose); color: #d8e0ee; background: var(--strip-ground); }
.cc a { color: #8fb0ff; text-decoration: none; }
.cc a:hover { color: #fff; }
.cc-wrap { max-width: 1120px; margin: 0 auto; padding: 72px clamp(18px, 4vw, 40px); box-sizing: border-box; }
.cc-narrow { max-width: 880px; }
.cc-nav { max-width: 1120px; margin: 0 auto; padding: 20px clamp(18px, 4vw, 40px); display: flex; align-items: center;
          justify-content: space-between; gap: 20px; flex-wrap: wrap; box-sizing: border-box; }
.cc-nav .csm-brand { align-items: center; gap: 9px; }
.cc-nav .cs-mark-22 { width: 24px; height: 24px; font-size: 16px; border-radius: 5px; }
.cc-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #8b9ab3;
          border-left: 1px solid #2a3850; padding-left: 12px; margin-left: 4px; }
.cc-nav nav { display: flex; align-items: center; gap: 24px; font-size: 14px; flex-wrap: wrap; }
.cc .cc-nav nav a { color: #c3d0e6; }
.cc .cc-nav nav a:hover { color: #fff; }

.cc-k { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-quiet); }
.cc-amber { color: var(--strip-live); }
.cc-blue { color: #8fb0ff; }

/* hero */
.cc-hero { padding: clamp(36px, 6vw, 72px) clamp(18px, 4vw, 40px) 56px; display: grid;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.cc-display { font-family: var(--serif); font-weight: 600; font-size: clamp(42px, 6.4vw, 70px); line-height: 1; letter-spacing: -.03em;
              color: #fff; margin: 16px 0 0; text-wrap: balance; }
.cc-lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.65; color: #c3d0e6; margin: 20px 0 0; max-width: 46ch; text-wrap: pretty; }
.cc-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.cc-ctas-c { justify-content: center; }
.cc .cc-cta { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 0 22px; min-height: 50px;
              border-radius: 3px; display: inline-flex; align-items: center; box-sizing: border-box; }
.cc .cs-btn-amber.cc-cta, .cc .cs-btn-amber.cc-cta:hover { color: var(--strip-ground); }
.cc .cc-ghost { border: 1px solid #2a3850; color: #fff; }
.cc .cc-ghost:hover { border-color: #8b9ab3; }
.cc-already { font-size: 15px; color: #8b9ab3; }

/* the live ask form, on Aaron's card */
/* the sample page is day paper in any theme, so it keeps day ink and the house blue at night */
.cc-ask { --ink: #11203b; --ink-body: #33415c; --ink-quiet: #5a6b86; --ink-faint: #8b9ab3; --line: #d8e0ee; --line-quiet: #eef2f8;
  --line-strong: #b9c7de; --accent: #1d4ed8; --accent-wash: #eaf0ff; --accent-line: #c7d5f5; --surface: #ffffff; }
.cc-ask { background: #f4f6fb; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); color: var(--ink-body); }
.cc-ask-h { background: var(--strip-ground); padding: 16px 20px; display: flex; gap: 14px; align-items: center; border-bottom: 1px solid #24324a; }
.cc-ask-h img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; border: 1px solid #2a3850; flex: none; }
.cc-ask-who { flex: 1; min-width: 0; }
.cc-ask-where { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #8b9ab3; }
.cc-ask-where .cs-ident { width: 7px; height: 7px; }
.cc-live { color: var(--strip-live); }
.cc-ask-name { font-family: var(--serif); font-weight: 600; font-size: 20px; color: #fff; margin-top: 2px; }
.cc-ask-handle { font-family: var(--fig); font-size: 13px; color: var(--strip-live); }
.cc-ask-b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.cc-ask-line { font-size: 15px; line-height: 1.6; color: var(--ink-body); margin: 0; }
.cc-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-kind { cursor: pointer; border-radius: 6px; padding: 9px 10px; border: 1px solid var(--line); background: #fff; text-align: left; font: inherit; }
.cc-kind b { display: block; font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--ink); }
.cc-kind span { display: block; font-family: var(--fig); font-size: 11px; color: var(--ink-quiet); margin-top: 2px; }
.cc-kind.on { border-color: var(--accent); background: var(--accent-wash); }
.cc-times-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cc-times-h .cc-k { font-size: 10px; letter-spacing: .2em; }
.cc-picked { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-align: right; }
.cc-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.cc-day { display: flex; flex-direction: column; gap: 5px; }
.cc-day-d { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); text-align: center; }
.cc-slot { font-family: var(--fig); font-size: 12px; text-align: center; padding: 8px 0; border-radius: 3px; cursor: pointer;
           border: 1px solid var(--line); background: #fff; color: var(--ink); }
.cc-slot.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.cc-slot:disabled { cursor: default; background: var(--surface-quiet); color: var(--ink-faint); }
.cc-why { font-size: 11px; line-height: 1.35; font-style: italic; color: var(--ink-faint); text-align: center; padding-top: 4px; }
.cc-what { border: 1px solid var(--line); border-radius: 3px; background: #fff; padding: 9px 12px; font-family: var(--prose); font-size: 14px;
           color: var(--ink); width: 100%; box-sizing: border-box; }
.cc-what::placeholder { font-style: italic; color: var(--ink-faint); }
.cc-ask-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cc-ask-f span { font-size: 13px; color: var(--ink-quiet); }
.cc-send { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; border-radius: 3px;
           cursor: pointer; background: var(--accent); color: #fff; border: 1px solid var(--accent); white-space: nowrap; }
.cc-send.sent { background: transparent; color: var(--ok); border-color: var(--line); }

/* bands */
.cc-sunk { background: var(--surface-sunk); color: var(--ink-body); }
.cc-light { background: var(--surface); color: var(--ink-body); border-top: 1px solid var(--line); }
.cc-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 12px 0 0; }
.cc-h2-big { font-size: clamp(34px, 5vw, 52px); line-height: 1.04; letter-spacing: -.025em; color: #fff; max-width: 20ch; }
.cc-p { font-size: 17px; line-height: 1.7; color: var(--ink-body); margin: 12px 0 28px; max-width: 60ch; }

/* both sides */
.cc-both { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }
.cc-steps { list-style: none; margin: 0; padding: 0; }
.cc-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 2px solid var(--line); }
.cc-steps li > span { font-family: var(--fig); font-size: 15px; color: var(--accent); }
.cc-steps b { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }
.cc-steps p { font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 4px 0 0; }
.cc-room { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cc-room-h { padding: 14px 18px; border-bottom: 1px solid var(--line-quiet); display: flex; justify-content: space-between; align-items: center; gap: 12px;
             font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); }
.cc-tabs { display: flex; gap: 14px; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet); }
.cc-tabs .on { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.cc-room-b { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cc-room-b > .cc-k { font-size: 10px; letter-spacing: .2em; }
.cc-room-line { font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.cc-room-line b { font-weight: 600; }
.cc-room-line .cc-name { font-family: var(--serif); color: var(--ink); }
.cc-room blockquote { margin: 0; border-left: 2px solid var(--line-strong); padding: 2px 0 2px 14px; font-size: 15px; line-height: 1.6; color: var(--ink-body); font-style: italic; }
.cc-offered { display: flex; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.cc-offer { font-family: var(--fig); font-size: 13px; padding: 8px 12px; border-radius: 3px; cursor: pointer; border: 1px solid var(--line-strong);
            background: var(--surface); color: var(--ink); }
.cc-offer.on { border-color: var(--navy, #11203b); background: var(--navy, #11203b); color: #fff; }
.cc-none { font-size: 14px; font-style: italic; color: var(--ink-faint); padding-top: 6px; }
.cc-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-acts > * { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cc-yes { padding: 10px 14px; border-radius: 3px; cursor: pointer; border: 0; background: var(--navy, #11203b); color: #fff; }
.cc-yes:disabled { cursor: default; background: var(--surface-quiet); color: var(--ink-faint); }
.cc-suggest { border: 1px solid var(--line-strong); color: var(--ink); padding: 10px 14px; border-radius: 3px; }
.cc-wb { color: var(--accent); }
.cc-pass { color: var(--ink-faint); }
.cc-booked { background: var(--surface-quiet); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.cc-booked > span:first-child { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ok); white-space: nowrap; }
.cc-booked > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-body); }

/* hours */
.cc-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; }
.cc-strip { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.cc-hrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; }
.cc-hrow > span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); }
.cc-hrow > div { position: relative; height: 22px; background: var(--surface); border: 1px solid var(--line-quiet); border-radius: 3px; }
.cc-hrow i { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; box-sizing: border-box; }
.cc-b-open { background: var(--accent-line); border: 1px solid var(--accent); }
.cc-b-busy { background: var(--line-strong); }
.cc-b-lunch { background: var(--surface-quiet); border: 1px dashed var(--line-strong); }
.cc-hscale { display: flex; justify-content: space-between; padding-left: 56px; font-family: var(--fig); font-size: 10px; color: var(--ink-faint); margin-top: 4px; }
.cc-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--ink-quiet); flex-wrap: wrap; }
.cc-legend span { display: flex; align-items: center; gap: 6px; }
.cc-legend i { width: 14px; height: 10px; border-radius: 2px; box-sizing: border-box; display: inline-block; }

/* what it isn't */
.cc-isnt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 40px; margin-top: 30px; }
.cc-isnt > div { padding: 16px 0; border-top: 1px solid #24324a; }
.cc-isnt b { font-family: var(--serif); font-weight: 600; font-size: 19px; color: #fff; }
.cc-isnt p { font-size: 16px; line-height: 1.65; color: #c3d0e6; margin: 4px 0 0; }

/* straight answers */
.cc-qa { border-top: 1px solid var(--line); padding: 16px 0; }
.cc-qa > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.cc-qa > div + div { margin-top: 8px; }
.cc-qa b { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.cc-qa p { font-size: 17px; line-height: 1.7; color: var(--ink-body); margin: 0; }
.cc-you, .cc-me { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.cc-me { color: var(--accent); }

/* close */
.cc-close { padding-top: 80px; padding-bottom: 80px; text-align: center; }
.cc-h2-close { font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: 0 auto; max-width: 18ch; }
.cc-close-line { font-size: 15px; color: #8b9ab3; margin: 14px 0 0; }

@media (max-width: 520px) {
  .cc-kinds { grid-template-columns: minmax(0, 1fr); }
  .cc-ask-f { flex-direction: column; align-items: stretch; }
  .cc-room-h { flex-direction: column; align-items: flex-start; }
  .cc-qa > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.cc [hidden] { display: none !important; }
.cc .csm-nav .cs-btn-amber { color: var(--strip-ground); }   /* the shared header's Claim yours, on this page too */