/* 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; } }

/* Under the form (2026-10-30): Danny's agent site's own parts, ported from anchor-agent-sites template/src/styles/site.css
   at look "d" (Michael, 2026-10-30: the first version "doesn't really match the style of his agent website at all"). One
   navy band with his second map running behind all three sections at a third of its strength, centered headings with
   their full stop, the brass-edged card and the icon tile, the gold visit circles, the question cards. Reading text
   keeps this page's 18px floor where his site uses 17px. */
.op-flow { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.op-flow > :not(.op-map) { position: relative; z-index: 1; }
.op-map { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 220px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 220px), transparent); }
.op-map .drift { position: absolute; inset: -2%; }
.op-map .drift > div { position: absolute; inset: 0; }
.op-map svg { display: block; width: 100%; height: 100%; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.op-map path { vector-effect: non-scaling-stroke; }
.op-map .base svg { stroke: var(--accent); }
.op-map .glow svg { stroke: #F6E7B0; }
.op-map .t-thin { stroke-width: 1px; stroke-opacity: .34; }
.op-map .t-index { stroke-width: 1.5px; stroke-opacity: .55; }
.op-map .glow .t-thin, .op-map .glow .t-index { stroke-opacity: .9; }
.op-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) {
  .op-map .drift { animation: topo-drift 30s ease-in-out infinite alternate; }
  .op-map .glow { animation: topo-light 26s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .op-map .glow { display: none; } }

.op-band { padding: 104px 0; }
/* The cards sit on their own quiet navy, as on his site (.op-med .op-basics), so the lines show only between sections. */
.op-basics { background: linear-gradient(to bottom, rgba(10, 22, 40, 0), var(--ink-deep) 180px, var(--ink-deep) calc(100% - 180px), rgba(10, 22, 40, 0)); }
.op-center-head { position: relative; max-width: 900px; margin: 0 auto 40px; text-align: center; }
.op-center-head::before { content: ""; position: absolute; z-index: -1; inset: -110px -130px; pointer-events: none;
  background: radial-gradient(closest-side, var(--ink) 60%, rgba(10, 22, 40, .7) 80%, transparent); }
.op-center-head h2 { font-size: clamp(30px, 3.6vw, 40px); text-wrap: balance; }

/* The card and its tile (look "d"): the lifted navy surface with a soft top light, a brass hairline edge. */
.op-card { --c-text: #FBF8F2; --c-muted: #B3B6B9; --c-line: rgba(251, 248, 242, .10);
  position: relative; border: 1px solid transparent; border-radius: 20px; color: var(--c-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 55%) padding-box,
    linear-gradient(180deg, #19283E, #122035) padding-box,
    linear-gradient(160deg, #F2DBA8, #BE9749 45%, #D5B06C 75%, #BE9749) border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28), 0 40px 80px -40px rgba(0, 0, 0, .7); }
.op-tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(160deg, #34445C, #1C2B42); color: #D5B06C;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .14); }
.op-tile svg { width: 24px; height: 24px; }

/* How the call works: Kurt's visit steps. A gold circle with the navy glyph, its number at the shoulder, a dashed gold
   line to the next; across on a computer, stacked on a phone. */
.op-visit { --gap: 32px; --mark: 84px; list-style: none; display: grid; gap: 56px var(--gap); max-width: 1040px; margin: 0 auto; text-align: center; }
.op-visit li { position: relative; }
.op-visit li::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--mark) - 8px) -48px -48px; pointer-events: none;
  background: radial-gradient(closest-side, var(--ink) 62%, rgba(10, 22, 40, .7) 82%, transparent); }
.op-visit-mark { position: relative; z-index: 1; display: grid; place-items: center; width: var(--mark); height: var(--mark); margin: 0 auto 24px; border-radius: 50%;
  background: var(--gold-btn); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 6px var(--ink); }
.op-visit-mark svg { width: 34px; height: 34px; }
.op-visit-n { position: absolute; top: -4px; right: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #F2DBA8; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px #D5B06C; }
.op-visit li:not(:last-child)::after { content: ""; position: absolute; pointer-events: none; border: 0 dashed rgba(213, 176, 108, .6); }
.op-visit h3 { margin-bottom: 8px; font-size: 22px; color: var(--on-ink); line-height: 1.2; letter-spacing: -0.01em; font-weight: 650; }
.op-visit p { max-width: 30ch; margin: 0 auto; font-size: 18px; line-height: 1.6; color: var(--on-ink-muted); text-wrap: pretty; }
@media (min-width: 861px) {
  .op-visit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-visit li:not(:last-child)::after { top: calc(var(--mark) / 2 - 1px); left: calc(50% + var(--mark) / 2 + 16px); right: calc(-50% - var(--gap) + var(--mark) / 2 + 16px); border-top-width: 2px; }
}
@media (max-width: 860px) {
  .op-visit li:not(:last-child)::after { left: 50%; bottom: -48px; height: 40px; border-left-width: 2px; }
  /* The words run the full width on a phone, so each step clears a full-width strip behind its text. */
  .op-visit li::before { inset: calc(var(--mark) - 8px) -16px -20px;
    background: linear-gradient(transparent, var(--ink) 28px, var(--ink) calc(100% - 28px), transparent); }
}

/* When to sign up: the cards two across, a tile, a title and a line, or the list with gold ticks. */
.op-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.op-item { padding: 32px; }
.op-item h3 { margin: 20px 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 650; color: var(--c-text); }
.op-item > p { font-size: 18px; line-height: 1.6; color: var(--c-muted); }
.op-checks { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.op-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 18px; line-height: 1.45; color: var(--c-text); }
.op-checks svg { width: 20px; height: 20px; margin-top: 2px; color: #D5B06C; }

/* A section's actions: the gold button and the call beside it, centered. */
.op-sec-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 48px; }
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--gold-btn); color: #1A1206;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(190, 151, 73, .7);
  font: 650 18px/1 "Geist", sans-serif; text-decoration: none; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn::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); }
.btn:hover::after, .btn:focus-visible::after { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.btn:active { transform: scale(.98); }
.op-more { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--on-ink); font-size: 18px; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(251, 248, 242, .35); text-underline-offset: 5px; white-space: nowrap; }
.op-more svg { width: 18px; height: 18px; color: #D5B06C; transition: transform .3s var(--ease); }
.op-more:hover { text-decoration-color: var(--on-ink); }
@media (prefers-reduced-motion: no-preference) { .op-more:hover svg { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .btn::after, .op-more svg { transition: none; } }
:is(.btn, .op-more, .op-ask, .op-q summary):focus-visible { outline: 2px solid #F2DBA8; outline-offset: 3px; }

/* Common questions: one centered column of quieter cards, a thin brass hairline that warms on hover or when open. */
.op-faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.op-q.op-card { border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 60%) padding-box,
    linear-gradient(180deg, #172539, #122035) padding-box,
    linear-gradient(160deg, rgba(242, 219, 168, .28), rgba(190, 151, 73, .10) 50%, rgba(213, 176, 108, .2)) border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.op-q.op-card:is(:hover, [open]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 60%) padding-box,
    linear-gradient(180deg, #19283E, #142238) padding-box,
    linear-gradient(160deg, rgba(242, 219, 168, .55), rgba(190, 151, 73, .22) 50%, rgba(213, 176, 108, .4)) border-box; }
.op-q summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 20px 16px 24px;
  cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--c-text); }
.op-q summary::-webkit-details-marker { display: none; }
.op-q summary:focus-visible { outline-offset: 2px; border-radius: 16px; }
.op-q-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--ink); color: #D5B06C; box-shadow: inset 0 0 0 1px rgba(213, 176, 108, .6); transition: color .25s, box-shadow .25s; }
.op-q summary:hover .op-q-mark { color: #F2DBA8; box-shadow: inset 0 0 0 1px rgba(242, 219, 168, .75); }
.op-q-mark svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.op-q[open] .op-q-mark svg { transform: rotate(45deg); }
.op-q-a { padding: 0 24px 22px; }
.op-q-a > p { font-size: 18px; line-height: 1.6; color: var(--c-muted); max-width: 62ch; }
.op-faq-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 36px; font-size: 19px; color: var(--on-ink-muted); }
.op-ask { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px;
  background: var(--gold-btn); color: #1A1206; font-weight: 650; font-size: 18px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(190, 151, 73, .7); }
.op-ask svg { width: 20px; height: 20px; }
.op-ask:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 28px -12px rgba(190, 151, 73, .85); }

/* Things rise in as the visitor reaches them, as on his site; shown at once without script or with motion reduced. */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.motion [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 860px) { .op-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .op-band { padding: 72px 0 56px; }
  .op-center-head { margin-bottom: 28px; }
  .op-visit { --mark: 72px; }
  .op-visit-mark svg { width: 30px; height: 30px; }
  .op-visit h3 { font-size: 20px; }
  .op-grid { gap: 16px; }
  .op-item { padding: 26px 22px; border-radius: 18px; }
  .op-tile { width: 44px; height: 44px; border-radius: 12px; }
  .op-tile svg { width: 22px; height: 22px; }
  .op-item h3 { margin-top: 16px; font-size: 20px; }
  .op-sec-actions { margin-top: 32px; }
  .op-sec-actions .btn { width: 100%; }
  .op-q summary { font-size: 18px; padding: 14px 16px 14px 18px; }
  .op-q-a { padding: 0 18px 18px; }
  .op-faq-ask { font-size: 18px; }
}
/* 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; }