/* The call page (/call), where the booking ads land. 2026-10-21.
   The look is Danny's agent site (~/Projects/anchor-agent-sites, template/src/styles/site.css, the
   one-page kind, live at danny.myanchorgroup.com; Michael, 2026-10-21: "that is pretty much the
   template that we're using for agents"): Anchor navy and gold, Geist (since 2026-10-30, as the agent sites now use), the map lines with the light
   gliding along them, the framed photo with the name on it, the white form card on navy. The form
   inside is the registration page's, element for element, styled here on the agent site's fields.
   What came off it for Medicare: the four lines Danny sells (Medicare work never cross-sells), the
   "compare plans" wording, the two texting boxes (this form carries Block 4), the topic picker (a
   product choice on a public form is a Scope of Appointment). Senior floors from page.css: 18px body,
   labels above fields, a full-width button of 58px or more. Self-contained: nothing here touches the
   registration or booking pages. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/geist.woff2') format('woff2');
}

:root {
  --ink: #0A1628;
  --ink-deep: #071020;
  --accent: #C9A84C;
  --accent-deep: #8A6D1E;
  --on-ink: #F4F1EA;
  --on-ink-muted: #C9CCD2;
  --ink-line: rgba(244, 241, 234, .13);
  --text: #1B2230;
  --muted: #4E5665;
  --line: #E4E0D8;
  --field: #6E7684;
  --tint: #F5F2EC;
  --gold-btn: linear-gradient(180deg, #F2DBA8, #BE9749);
  --card-text: #FBF8F2;
  --card-muted: #B3B6B9;
  --card-field: #0B1626;
  --card-edge: rgba(251, 248, 242, .18);
  --brass: #D5B06C;
  --error-ink: #8C2F1F;
  --error-bg: #FBEDE9;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ink-deep);
  color: var(--on-ink);
  font: 400 18px/1.6 "Geist", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.cl-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .cl-wrap { padding: 0 16px; } }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: #fff; color: var(--ink); padding: 12px 16px; font-weight: 700; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }
h1, h2 { color: var(--on-ink); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }

/* Header: Danny's bar of navy glass, sitting over the top of the hero rather than following the page,
   so it never covers the form on a phone. The Anchor mark, a hairline, his name; his number on the right. */
.cl-top { position: absolute; top: 12px; left: 0; right: 0; z-index: 20; }
.cl-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: calc(100% - 24px); max-width: calc(var(--wrap) - 24px); height: 64px; padding: 0 20px 0 24px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%), rgba(10, 22, 40, .9);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); }
.cl-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .03) 70%, rgba(255, 255, 255, .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cl-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cl-logo { width: auto; height: 26px; }
.cl-agent { padding-left: 14px; border-left: 1px solid rgba(244, 241, 234, .24); font-weight: 650; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.cl-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cl-tel svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.cl-tel:hover { color: var(--accent); }
@media (max-width: 640px) {
  .cl-top { top: 8px; }
  .cl-bar { width: calc(100% - 16px); height: 56px; padding: 0 12px 0 18px; border-radius: 18px; }
  .cl-logo { height: 20px; }
  .cl-agent { display: none; }
  .cl-tel { font-size: 16px; }
}

/* Hero: navy, Danny's map lines behind, the words and his photo on the left, the form on the right. */
.cl-hero { position: relative; overflow: hidden; background: var(--ink); }
.cl-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 72px; align-items: start;
  padding-top: 132px; padding-bottom: 96px; }
.cl-chip { display: none; align-items: center; gap: 14px; margin-bottom: 22px; color: var(--on-ink-muted); font-size: 16px; line-height: 1.35; }
.cl-chip img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.cl-chip strong { display: block; color: var(--on-ink); font-size: 17px; }
.cl-hero h1 { font-size: clamp(40px, 4.6vw, 62px); max-width: 14ch; margin-bottom: 22px; text-wrap: balance; }
.cl-lede { font-size: 20px; max-width: 40ch; color: var(--on-ink-muted); text-wrap: pretty; }
.cl-portrait { position: relative; width: 340px; aspect-ratio: 4 / 5; margin-top: 44px; border-radius: 22px; overflow: hidden;
  background: #1a2a42; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.cl-portrait img, .cl-portrait video { width: 100%; height: 100%; object-fit: cover; }
.cl-portrait figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 14px 20px; border-radius: 14px;
  background: var(--ink); font-size: 15px; line-height: 1.4; color: var(--on-ink-muted); }
.cl-portrait figcaption strong { display: block; color: var(--on-ink); font-size: 17px; }
.cl-video { aspect-ratio: 9 / 16; width: 300px; }
.cl-video figcaption { display: none; }
.cl-npn { width: 340px; margin-top: 14px; font-size: 15px; color: var(--on-ink-muted); text-align: center; }
.cl-video + .cl-npn { width: 300px; }

/* The map lines (anchor-agent-sites, .op-map): thin gold, cleared behind the words, a soft light along them. */
.cl-map { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent), radial-gradient(ellipse 58% 70% at 28% 60%, rgba(0, 0, 0, .05) 34%, #000 86%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent), radial-gradient(ellipse 58% 70% at 28% 60%, rgba(0, 0, 0, .05) 34%, #000 86%);
  mask-composite: intersect; }
.cl-map .drift { position: absolute; inset: -5%; }
.cl-map .drift > div { position: absolute; inset: 0; }
.cl-map svg { display: block; width: 100%; height: 100%; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cl-map path { vector-effect: non-scaling-stroke; }
.cl-map .base svg { stroke: var(--accent); }
.cl-map .glow svg { stroke: #F6E7B0; }
.cl-map .t-thin { stroke-width: 1px; stroke-opacity: .34; }
.cl-map .t-index { stroke-width: 1.5px; stroke-opacity: .55; }
.cl-map .glow .t-thin, .cl-map .glow .t-index { stroke-opacity: .9; }
.cl-map .glow { -webkit-mask-image: radial-gradient(circle at center, #000, transparent 65%); mask-image: radial-gradient(circle at center, #000, transparent 65%);
  -webkit-mask-size: 560px 560px; mask-size: 560px 560px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 20% -40%; mask-position: 20% -40%; }
@media (prefers-reduced-motion: no-preference) {
  .cl-map .drift { animation: topo-drift 30s ease-in-out infinite alternate; }
  .cl-map .glow { animation: topo-light 11s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .cl-map .glow { display: none; } }
@keyframes topo-drift { from { transform: translate3d(-2%, -1.5%, 0) scale(1.02); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } }
@keyframes topo-light { 0% { -webkit-mask-position: 20% -40%; mask-position: 20% -40%; } 50% { -webkit-mask-position: 125% 40%; mask-position: 125% 40%; } 100% { -webkit-mask-position: 80% 140%; mask-position: 80% 140%; } }

/* Phones and narrow tablets: one column. His face and name in the chip over the headline, then the
   form at once. The framed photo is left out (the chip carries his face); a video, once there is one,
   stays, under the words. */
@media (max-width: 980px) {
  .cl-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 104px; padding-bottom: 56px; }
  .cl-chip { display: flex; }
  /* The words run the full width, so a navy pool clears the lines behind them (Danny's .op-about). */
  .cl-intro { position: relative; }
  .cl-intro::before { content: ""; position: absolute; z-index: -1; inset: -40px -16px; pointer-events: none;
    background: linear-gradient(transparent, var(--ink) 48px, var(--ink) calc(100% - 48px), transparent); }
  .cl-hero h1 { font-size: clamp(34px, 9vw, 46px); margin-bottom: 16px; max-width: 16ch; }
  .cl-lede { font-size: 19px; }
  .cl-portrait:not(.cl-video), .cl-portrait:not(.cl-video) + .cl-npn { display: none; }
  .cl-video { width: min(300px, 100%); margin-top: 28px; }
  .cl-formcol { max-width: 560px; }
  .cl-map { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent), radial-gradient(ellipse 100% 44% at 45% 40%, rgba(0, 0, 0, .04) 45%, #000 95%);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent), radial-gradient(ellipse 100% 44% at 45% 40%, rgba(0, 0, 0, .04) 45%, #000 95%); }
  .cl-map .t-thin { stroke-opacity: .26; }
  .cl-map .t-index { stroke-opacity: .42; }
}

/* The form card on navy, as Danny's contact form and Kurt's workshop form (anchor-agent-sites site.css, the
   [data-look="d"] .form-card; Michael, 2026-10-29: the white card was a big jump). Glass navy with a brass hairline,
   fields a step darker with a light edge and a brass ring on focus. Senior floors kept: 18px fields, 58px rows. */
.cl-card { position: relative; color-scheme: dark; color: var(--card-text); padding: 36px 36px 28px; border-radius: 22px;
  border: 1px solid transparent; scroll-margin-top: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%) padding-box,
    linear-gradient(180deg, #19283E, #122035) padding-box,
    linear-gradient(160deg, rgba(242, 219, 168, .40), rgba(190, 151, 73, .14) 50%, rgba(213, 176, 108, .28)) border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28), 0 40px 80px -40px rgba(0, 0, 0, .7); }
.cl-card:focus-visible { outline-offset: 4px; }
.cl-card-tel { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 17px; color: var(--card-muted); }
.cl-card-tel svg { width: 20px; height: 20px; color: var(--brass); flex: none; }
.cl-card-tel a { display: inline-block; margin: -12px 0; padding: 12px 0; color: var(--card-text); font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }
@media (max-width: 640px) { .cl-card { padding: 24px 20px 20px; border-radius: 20px; } }

fieldset { border: 0; margin: 0 0 22px; min-width: 0; }
legend { padding: 0; margin-bottom: 14px; font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--card-text); }
.radio { display: flex; align-items: flex-start; gap: 14px; min-height: 58px; padding: 15px 16px; margin-bottom: 10px;
  font-size: 18px; line-height: 1.4; color: var(--card-text); cursor: pointer; background: var(--card-field);
  border: 1.5px solid var(--card-edge); border-radius: 14px; transition: border-color .2s, background-color .2s; }
.radio:last-child { margin-bottom: 0; }
.radio:hover { border-color: rgba(251, 248, 242, .34); }
.radio input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 0; accent-color: var(--brass); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--brass); background: rgba(213, 176, 108, .08); }
/* A picked option shows only its brass edge. A focus ring shows for the keyboard alone, thin and on the edge itself
   (Michael, 2026-10-30: the thick ring around a clicked option looked tacky). */
.radio:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 0; }
.radio input:focus-visible { outline: none; }
.form-gated .form-rest { display: none; }
.form-gated fieldset { margin-bottom: 0; }

/* Block 3 opens the fields: full size and full ink, read before anyone types a detail. */
.block3 { margin: 0 0 18px; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--card-text); }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 360px) { .two-up { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; min-width: 0; }
.field label { display: block; margin-bottom: 7px; font-size: 17px; font-weight: 600; color: var(--card-text); }
.input-wrap { position: relative; display: block; }
.f-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #848A93; pointer-events: none; }
.two-up .f-icon { display: none; }
.field input { width: 100%; min-height: 56px; padding: 14px 14px 14px 48px; font: inherit; font-size: 18px; color: var(--card-text);
  background: var(--card-field); border: 1.5px solid var(--card-edge); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.two-up .field input { padding-left: 14px; }
.field input:hover { border-color: rgba(251, 248, 242, .34); }
.field input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(213, 176, 108, .25); }
.input-wrap:focus-within .f-icon { color: var(--brass); }
.hp-wrap { display: none; }

.consent { margin: 6px 0 18px; padding: 16px; background: rgba(251, 248, 242, .04); border: 2px solid var(--card-edge); border-radius: 14px; }
.consent.is-locked { border-style: dashed; }
.consent.is-unlocked { border-style: solid; border-color: rgba(251, 248, 242, .34); background: rgba(251, 248, 242, .06); }
.consent .row { display: flex; align-items: flex-start; gap: 12px; }
.consent input[type="checkbox"] { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 1px; accent-color: var(--brass); }
.consent.is-locked input[type="checkbox"] { cursor: not-allowed; }
.consent label { font-size: 17px; line-height: 1.5; color: var(--card-text); cursor: pointer; }
#consentNumber { font-weight: 700; white-space: nowrap; }
#consentNumber.is-empty { font-weight: 400; color: var(--card-muted); }
.helper { margin: 9px 0 0 38px; font-size: 17px; color: var(--card-muted); }
.helper.is-problem { color: #FF9C8F; font-weight: 600; }
.consent.is-unlocked .helper { display: none; }

/* The gold button, full width: the agent site's gold gradient (the flat gold was the "old mustard" look, Michael,
   2026-10-28) with Danny's rise, white coming in from the lower left on hover. */
.cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 60px; padding: 14px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gold-btn); color: #1A1206; font: 650 19px/1.2 "Geist", sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(190, 151, 73, .7); text-decoration: none; text-align: center; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; pointer-events: none;
  -webkit-mask-image: linear-gradient(45deg, #000 0 40%, rgba(0, 0, 0, .6) 42%, transparent 44%); mask-image: linear-gradient(45deg, #000 0 40%, rgba(0, 0, 0, .6) 42%, transparent 44%);
  -webkit-mask-size: 260% 260%; mask-size: 260% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position .95s cubic-bezier(.6, .05, .2, 1), mask-position .95s cubic-bezier(.6, .05, .2, 1); }
.cta:hover::after, .cta:focus-visible::after { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
@media (hover: none) { .cta:hover::after { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.cta[disabled] { cursor: progress; opacity: .7; }
.cta[disabled]::after { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.cta:active { transform: scale(.98); }
.cta:focus-visible { outline-color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .cta::after { transition: none; } }
.submit-error { display: none; margin-top: 14px; padding: 13px 15px; border-radius: 12px; font-size: 17px; font-weight: 600; color: #FFD5CF; background: rgba(255, 122, 107, .10); }
.submit-error.is-visible { display: block; }
.under-cta { margin-top: 6px; text-align: center; font-size: 16px; }
.under-cta a { display: inline-block; padding: 11px 10px; color: var(--card-muted); }

/* Once sent: the card says so and points down to the calendar. */
.cl-sent { display: grid; gap: 20px; }
.cl-sent-head { display: flex; align-items: flex-start; gap: 12px; font-size: 21px; font-weight: 650; line-height: 1.35; color: var(--card-text); }
.cl-sent-head svg { flex: none; width: 28px; height: 28px; color: var(--brass); margin-top: 1px; }
.cl-note { padding: 14px 16px; border-radius: 12px; background: rgba(251, 248, 242, .06); font-size: 17px; line-height: 1.5; color: var(--card-text); }

/* The second step: the calendar on the deeper navy, Danny's booking section. */
.cl-pick { position: relative; padding: 96px 0 104px; background: var(--ink-deep); scroll-margin-top: 0; }
.cl-pick-grid { display: grid; gap: 40px; }
.cl-pick h2 { font-size: clamp(32px, 3.4vw, 44px); max-width: 16ch; }
.cl-pick h2:focus { outline: none; }
.cl-steps { list-style: none; margin-top: 26px; display: grid; gap: 16px; counter-reset: step; max-width: 44ch; }
.cl-steps li { display: grid; grid-template-columns: 32px 1fr; font-size: 18px; color: var(--on-ink-muted); }
.cl-steps li::before { counter-increment: step; content: counter(step); font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--accent); font-variant-numeric: tabular-nums; }
.cl-alt { display: flex; align-items: flex-start; gap: 10px; margin-top: 30px; max-width: 44ch; font-size: 18px; color: var(--on-ink); }
.cl-alt svg { width: 22px; height: 22px; margin-top: 3px; color: var(--accent); flex: none; }
.cl-alt a { font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }
.cl-pick-main { min-width: 0; max-width: 760px; }
/* Side by side once the card can be 760px wide, so the calendar shows the month and the times together. */
@media (min-width: 1100px) {
  .cl-pick-grid { grid-template-columns: minmax(0, 1fr) 760px; gap: 64px; align-items: start; }
}
@media (max-width: 640px) { .cl-pick { padding: 72px 0 64px; } .cl-pick-grid { gap: 28px; } }

/* The calendar card and its placeholder, dark as on Danny's /book, which shows this same calendar (anchor-agent-sites
   site.css, .cal-*). */
.cal-card { position: relative; background: #0C1522; color: var(--card-muted); border-radius: 18px; overflow: hidden; color-scheme: dark;
  box-shadow: inset 0 0 0 1px #28374F, 0 30px 60px -24px rgba(0, 0, 0, .55); container-type: inline-size; --skel: rgba(213, 176, 108, .10); }
.cal-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #28374F; pointer-events: none; z-index: 1; }
.cal-frame { display: block; width: calc(100% + 2px); height: 700px; margin: -1px -1px -6px; border: 0; overflow: hidden; }
.js .cal-card:not(.is-ready) .cal-frame { position: absolute !important; top: 0 !important; left: 0 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.cal-ph { display: none; position: relative; height: 535px; padding: 0 17px; }
.js .cal-card:not(.is-ready) .cal-ph { display: block; }
.cal-ph-line { position: relative; z-index: 1; min-height: 44px; padding: 9px 0 6px; font-size: 17px; color: var(--card-muted); }
.cal-ph-line a { padding: 12px 0; color: var(--card-text); font-weight: 600; text-underline-offset: 3px; }
.is-slow .cal-ph { height: auto; min-height: 535px; }
.cal-ph-shape { position: relative; overflow: hidden; }
.cal-ph-head { display: none; }
.cal-ph-month { display: flex; align-items: center; justify-content: center; gap: 46px; height: 44px; margin-top: 6px; }
.cal-ph-month i { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--skel); }
.cal-ph-month i:first-child { background: none; }
.cal-ph-month b { display: block; width: 118px; height: 18px; border-radius: 9px; background: var(--skel); }
.cal-ph-week, .cal-ph-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
.cal-ph-week { height: 20px; margin-top: 19px; align-items: center; }
.cal-ph-week span { display: block; width: 26px; height: 10px; border-radius: 5px; background: var(--skel); }
.cal-ph-grid { margin-top: 4px; grid-auto-rows: 44px; align-items: center; }
.cal-ph-grid span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--skel); }
.cal-ph-times { display: none; }
@container (min-width: 726px) {
  .cal-ph { height: 666px; padding: 24px 25px 0; }
  .is-slow .cal-ph { min-height: 666px; }
  .cal-ph-line { position: absolute; top: 24px; left: 25px; right: 25px; min-height: 0; padding: 0; line-height: 30px; }
  .is-slow .cal-ph-line { padding-bottom: 12px; background: #0C1522; }
  .cal-ph-head { display: block; visibility: hidden; width: 228px; height: 30px; }
  .cal-ph-body { display: flex; gap: 36px; }
  .cal-ph-cal { flex: 0 0 410px; }
  .cal-ph-month { margin-top: 12px; }
  .cal-ph-week { height: 26px; margin-top: 21px; }
  .cal-ph-grid { margin-top: 6px; grid-auto-rows: 56px; }
  .cal-ph-grid span { width: 44px; height: 44px; }
  .cal-ph-times { display: grid; align-content: start; gap: 19px; flex: 0 1 240px; padding-top: 120px; }
  .cal-ph-times span { display: block; height: 50px; border-radius: 12px; background: var(--skel); }
}
.cal-card a:focus-visible { outline-color: var(--brass); }
.cal-after { margin-top: 14px; font-size: 16px; }
.cal-after a { color: var(--on-ink-muted); text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .cal-ph-shape::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(213, 176, 108, .08) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(-100%); animation: cal-sheen 2.6s ease-in-out infinite; }
  .js .cal-card.is-ready .cal-frame { animation: cal-in .3s ease-out backwards; }
}
@keyframes cal-sheen { to { transform: translateX(100%); } }
@keyframes cal-in { from { opacity: 0; } }

/* Footer: the deeper navy, who Danny is, and Blocks 1, 2 and 5 at reading size and full contrast
   (Block 1 is never shrunk or greyed, comms/drafts/registration-page-copy.md). */
.cl-foot { padding: 56px 0 48px; background: var(--ink-deep); border-top: 1px solid var(--ink-line); font-size: 16px; line-height: 1.6; color: var(--on-ink); }
.cl-foot-logo { width: auto; height: 22px; margin-bottom: 18px; }
.cl-foot-who { color: var(--on-ink-muted); }
.cl-foot-who strong { display: block; color: var(--on-ink); font-size: 17px; }
.cl-foot-who a { white-space: nowrap; }
.cl-legal { display: grid; gap: 12px; max-width: 900px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.cl-foot-links { margin-top: 24px; }
.cl-foot-links a { display: inline-block; padding: 10px 0; color: var(--on-ink-muted); text-underline-offset: 4px; }