/* Advisor sites on retire.courses: every page the landing publisher renders
   (amplify/functions/landing-publisher/siteTemplate.ts) links this one file.

   The look is Aryze's Figma file "Nexruto Landing Pages", the Webinar and
   Guide frames, built exactly as drawn (Steve, October 9 2026): Inter Bold
   Title Case headlines on the frames' text styles (H1 60, H2 50, H3 42, H4 34,
   card titles 32 and 28), a full-width nav bar with the logo in a white box,
   a light hero with the form on the right, charcoal and cool grays, no accent
   color. The brand guide and the sample it was proven on live outside this
   repo (Claude Folder/retire-courses-brand).

   It ships from pages-static/ with every backend deploy and is revalidated
   by the browser on every visit (ASSET_CACHE_CONTROL), so a fix here reaches
   every published site without republishing it. The renderer and this file
   share class names; change one, change the other. */

:root {
  --charcoal: #222229;
  --charcoal-card: #2e2e38;
  --charcoal-edge: #3a3a45;
  --charcoal-divider: #5d5d6f;
  --off-white: #f6f6f6;
  --lightest: #eaeaec;
  --lighter: #d4d4d4;
  --text: #3a3a45;
  --muted: #5d5d66;
  --dot: #acacb9;
  --error: #a3261b;
  --error-bg: #fbeceb;
  --ok: #1f6b45;
  --ok-bg: #e8f3ec;
  --sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h1: 60px; --h2: 50px; --h3: 42px; --h4: 34px; --h-card: 32px; --h5: 28px; --h6: 22px;
  --r-lg: 16px;
  --r-sm: 8px;
  --shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  --shadow-btn: 0 5px 25px rgba(0, 0, 0, 0.25);
  --shadow-nav: 0 5px 25px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.28);
  --wide: 1024px;
  --narrow: 864px;
  --gutter: 32px;
  --section: 80px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--off-white); color: var(--text); font: 500 18px/1.5 var(--sans); letter-spacing: -0.0125em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--sans); font-weight: 700; letter-spacing: -0.05em; line-height: 1.2; color: var(--charcoal); }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--off-white); }
.anchor { scroll-margin-top: 120px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
sup { font-size: 0.6em; line-height: 0; }

/* The no-class rule: body[data-mode] picks which copy of a block shows. */
body[data-mode="events"] [data-when="no-events"] { display: none !important; }
body[data-mode="no-events"] [data-when="events"] { display: none !important; }

/* ---------- Type ---------- */
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.h4 { font-size: var(--h4); }
.h-card { font-size: var(--h-card); }
.h5 { font-size: var(--h5); }
.h6 { font-size: var(--h6); }
.tagline { display: block; font: 700 16px/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal); }
.lede { font-size: 18px; line-height: 1.5; }
.fine { font: 500 12px/1.5 var(--sans); letter-spacing: -0.0125em; color: var(--charcoal); }
.on-dark .tagline, .on-dark h2, .on-dark h3 { color: var(--off-white); }
.on-dark .lede, .on-dark .head p { color: var(--lighter); }

/* ---------- Icons: Google Material Symbols Rounded ---------- */
.ico { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none !important; display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; user-select: none; flex: none; }
.ico-line { font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20; }
/* The card icon: a dark 40px tile in a pocket of the section's own color
   that runs to the card's left edge (every card in the Figma frames). */
.notch { align-self: start; justify-self: start; display: inline-flex; padding: 8px 8px 8px 16px; margin-left: -16px; border-radius: 0 12px 12px 0; background: linear-gradient(180deg, var(--notch, var(--off-white)) 45%, color-mix(in srgb, var(--notch, var(--off-white)) 35%, transparent)); flex: none; }
.tile { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; }
.tile .ico { font-size: 22px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.sec { padding-block: var(--section); background: var(--off-white); --notch: var(--off-white); }
.sec-alt { background: var(--lightest); --notch: var(--lightest); }
.sec-dark { background: var(--charcoal); color: var(--lighter); }
.head { display: grid; gap: 16px; align-content: center; }
.head > p { margin-top: 8px; }
.head.center { text-align: center; justify-items: center; max-width: 640px; margin: 0 auto 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.span-2 { grid-column: span 2; }
.hairline { height: 1px; background: var(--lighter); border: 0; margin: 0; }
.stack-8 { display: grid; gap: 8px; }
.stack-16 { display: grid; gap: 16px; }

/* The sample site's note above the nav (retire.courses/demo only; no real
   advisor's page carries it): the frames' charcoal, plain words. */
.sample-note { margin: 0; padding: 10px 16px; background: var(--charcoal); color: var(--off-white); font: 500 14px/1.4 var(--sans); letter-spacing: 0; text-align: center; }
/* And under its thank-yous, where a real site promises an email. */
.sample-done { padding: 12px 14px; border-radius: var(--r-sm); background: var(--lightest); color: var(--charcoal); font-size: 15px; line-height: 1.4; }

/* ---------- Nav bar (Figma "nav") ---------- */
.site-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--lightest); box-shadow: var(--shadow-nav); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.logo-box { display: flex; align-items: center; justify-content: center; gap: 10px; height: 74px; min-width: 120px; max-width: 300px; padding: 8px 18px; background: #ffffff; border: 1px solid var(--lighter); border-radius: var(--r-sm); box-shadow: var(--shadow); text-decoration: none; flex: none; }
.logo-box img { height: 100%; width: auto; max-width: 200px; object-fit: contain; }
.logo-box .firm { font: 700 17px/1.1 var(--sans); letter-spacing: -0.04em; color: var(--charcoal); max-width: 150px; }
.logo-box .firm:only-child { max-width: 240px; font-size: 22px; }
.nav-right { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { font: 600 18px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--charcoal); text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { text-decoration-line: underline; text-decoration-color: var(--lighter); }
.nav-menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--charcoal); cursor: pointer; place-items: center; }
.nav-menu-btn .ico { font-size: 32px; }
.nav-sheet { border-top: 1px solid var(--lighter); padding: 8px var(--gutter) 24px; display: grid; gap: 2px; }
.nav-sheet a { padding: 14px 0; text-decoration: none; font: 600 18px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--charcoal); }
.nav-sheet a.active { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--lighter); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; text-decoration: none; font: 600 18px/1.2 var(--sans); letter-spacing: -0.025em; border-radius: var(--r-sm); padding: 16px 24px; transition: transform 250ms var(--ease); -webkit-tap-highlight-color: transparent; white-space: nowrap; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0) scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn .ico { font-size: 20px; margin-right: -4px; }
.btn-ink { background: var(--charcoal); color: var(--off-white); box-shadow: var(--shadow-btn); }
.btn-light { background: var(--off-white); color: var(--charcoal); box-shadow: var(--shadow-btn); }
.btn-full { width: 100%; padding: 12px 20px; }
.btn-sm { padding: 12px 16px; font-size: 16px; }
.btn-text { background: none; border: 0; padding: 4px 0; font: 500 16px/1.3 var(--sans); color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link { font-weight: 600; color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.on-dark .link { color: var(--off-white); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---------- Cards ---------- */
.card { background: var(--off-white); border: 1px solid var(--lighter); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card-fg { background: var(--lightest); border: 1px solid var(--lighter); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pad-24 { padding: 24px; } .pad-32 { padding: 32px; }
.pain { padding: 16px; display: grid; gap: 16px; overflow: hidden; }
.pain-top { display: flex; align-items: center; gap: 8px; }
.pain h3 { font-size: var(--h5); }
.benefit { padding: 16px; display: grid; align-content: start; overflow: hidden; }
.benefit h3 { font-size: var(--h-card); margin-top: 16px; }
.benefit h3.sm { font-size: var(--h5); }
.benefit p { margin-top: 8px; }
.inside { padding: 16px; display: flex; gap: 8px; overflow: hidden; }
.inside h3 { font-size: var(--h5); }
.inside p { margin-top: 8px; }
.cta-dark { background: var(--charcoal); border-radius: var(--r-lg); padding: 32px; display: flex; flex-wrap: nowrap; gap: 24px; align-items: center; justify-content: space-between; box-shadow: var(--shadow); }
.cta-dark > div { max-width: 420px; }
.cta-dark h3 { font-size: var(--h-card); color: var(--off-white); }
.cta-dark p { color: var(--lightest); margin-top: 8px; }

/* Shared by card */
.shared { display: flex; align-items: center; gap: 16px; padding: 16px; text-decoration: none; }
.shared .avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 4px solid var(--charcoal); object-fit: cover; object-position: 50% 18%; background: var(--lightest); }
.shared .avatar-initial { display: grid; place-items: center; font: 700 26px/1 var(--sans); color: var(--charcoal); }
.shared .by { display: flex; align-items: center; gap: 6px; font: 700 10px/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal); }
.shared .by .ico { font-size: 13px; }
.shared .name { display: block; font: 700 22px/1.2 var(--sans); letter-spacing: -0.05em; color: var(--charcoal); margin-top: 4px; }
.shared .sub { display: block; font: 400 14px/1.4 var(--sans); letter-spacing: -0.025em; color: var(--text); margin-top: 2px; }

/* ---------- Hero (Webinar and Guide frames) ---------- */
/* Behind every hero, the Retire.Courses home page's own photo under the same
   flat 75% charcoal layer (home.css .hero; Steve, October 14 2026: "the
   same hero section image as the retire.courses hero section"). The copy
   reads light on it as it does there, and a button on the photo is the light
   one, as the home page's is (Steve chose it over the dark one, October 15
   2026); the form card and the Shared by card are the
   same light cards in the same places. Worst case, a white pixel under the
   layer is #59595f: the headline is 6.4:1 on it and the lede 4.7:1
   (heroPhoto.test.ts checks every hero color against it). */
.hero { position: relative; isolation: isolate; background: var(--charcoal) url(/assets/home/hero.jpg) 62% 40% / cover no-repeat; padding-block: 48px; --notch: var(--charcoal); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(34, 34, 41, 0.75); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.hero-copy h1 { font-size: var(--h1); margin-top: 16px; color: var(--off-white); }
.hero-copy .tagline { color: var(--off-white); }
.hero-copy .lede { margin-top: 24px; color: var(--lighter); }
.hero-copy .title-line { margin-top: 12px; font-weight: 600; color: var(--off-white); }
/* About pages published before October 14 2026 carry the title line's old
   charcoal inline; a republish replaces it with .title-line above. */
.hero-copy .lede[style*="--charcoal"] { color: var(--off-white) !important; }
.hero-copy .hairline { margin-block: 24px; background: var(--charcoal-divider); }
.hero-copy .btn-row { margin-top: 24px; }
.hero-copy .btn-ink { background: var(--off-white); color: var(--charcoal); }
.hero-copy .link { color: var(--off-white); }
.hero-copy :focus-visible { outline-color: var(--off-white); }
.hero .advisor-photo { align-self: center; }

/* ---------- Form card ---------- */
.form-card { background: var(--off-white); border: 1px solid var(--lightest); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 32px; color: var(--text); }
.form-card > h2 { font-size: var(--h4); }
.form-card > .hairline { margin-top: 16px; }
/* One column that never grows past the card: a long picked-dates label
   once pushed the date box out of it (November 2 2026). */
.form-card form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.form-card .intro { margin-top: 8px; font-size: 16px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.fields.stack { grid-template-columns: minmax(0, 1fr); }
/* The label sits inside the field like Figma, and shrinks to the top edge
   once the field has a value or focus, so it never disappears. */
.field { position: relative; min-width: 0; }
.field input, .field textarea { width: 100%; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--lighter); background: var(--lightest); box-shadow: var(--shadow); padding: 13px 8px 0; font: 600 16px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--charcoal); appearance: none; -webkit-appearance: none; transition: border-color 250ms var(--ease), background-color 250ms var(--ease); }
.field textarea { height: auto; min-height: 88px; padding-top: 20px; resize: vertical; line-height: 1.4; }
.field label { position: absolute; left: 9px; top: 11px; font: 600 16px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--text); pointer-events: none; transform-origin: left top; transition: transform 200ms var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--charcoal); background: #ffffff; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-8px) scale(0.62); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.error { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--error); }
.hint { margin-top: 6px; font: 500 13px/1.35 var(--sans); color: var(--muted); }
.welcome { padding: 12px 14px; border-radius: var(--r-sm); background: var(--ok-bg); color: var(--ok); font-size: 15px; line-height: 1.4; }
.welcome button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.form-error { padding: 12px 14px; border-radius: var(--r-sm); background: var(--error-bg); color: var(--error); font-size: 15px; line-height: 1.4; }
.consent { font: 500 12px/1.5 var(--sans); letter-spacing: -0.0125em; color: var(--charcoal); }
.consent a { color: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 14px 8px; border-radius: var(--r-sm); background: var(--lightest); list-style: none; }
.trust li { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1.2 var(--sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--charcoal); }
.trust .ico { font-size: 16px; }
.guest { display: flex; align-items: center; gap: 10px; width: fit-content; font-size: 16px; cursor: pointer; user-select: none; }
.guest input, .choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--charcoal); cursor: pointer; }
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choices legend { padding: 0; margin-bottom: 8px; font: 600 16px/1.2 var(--sans); color: var(--text); }
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--lighter); border-radius: var(--r-sm); background: var(--lightest); font: 600 15px/1.3 var(--sans); color: var(--charcoal); cursor: pointer; }
.choice:has(:checked) { border-color: var(--charcoal); background: #ffffff; }
.choice:has(:disabled) { opacity: 0.55; cursor: not-allowed; }
.note-box { padding: 12px 14px; border-radius: var(--r-sm); background: var(--lightest); font-size: 15px; line-height: 1.45; }

/* Course date picker: plain checkboxes for two dates or fewer, a dropdown
   with a scrolling list for more (Steve, October 9 2026). */
.pick { position: relative; display: grid; gap: 8px; min-width: 0; }
.pick-title { font: 600 16px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--text); }
.pick-btn { width: 100%; height: 40px; display: flex; align-items: center; gap: 8px; text-align: left; border-radius: var(--r-sm); border: 1px solid var(--lighter); background: var(--lightest); box-shadow: var(--shadow); padding: 0 8px 0 9px; cursor: pointer; font: inherit; color: var(--charcoal); }
.pick-btn:focus-visible { outline: none; border-color: var(--charcoal); background: #fff; }
.pick-value { flex: 1; min-width: 0; font: 600 16px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick.has-value .pick-value { color: var(--charcoal); }
.pick-caret { font-size: 22px; transition: transform 250ms var(--ease); }
.pick.open .pick-caret { transform: rotate(180deg); }
.pick.invalid .pick-btn, .pick-inline.invalid .pick-list { border-color: var(--error); background: var(--error-bg); }
.pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid var(--lighter); border-radius: var(--r-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); overflow: hidden; }
.pick-scroll { max-height: 232px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.pick-group + .pick-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--lightest); }
.pick-course { display: block; padding: 8px 8px 4px; font: 700 11px/1.3 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--lightest); background: var(--off-white); font: 500 13px/1.3 var(--sans); color: var(--muted); }
.pick-foot .btn { padding: 8px 14px; font-size: 15px; box-shadow: none; }
.pick-inline .pick-btn, .pick-inline .pick-foot { display: none; }
.pick-inline .pick-list { position: static; background: var(--lightest); box-shadow: var(--shadow); }
.pick-inline .pick-scroll { max-height: none; padding: 4px; }
.pick-empty { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--lighter); background: var(--lightest); font-size: 15px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; font: 500 14px/1.3 var(--sans); letter-spacing: -0.0125em; color: var(--muted); cursor: pointer; min-width: 0; }
.check:hover { background: var(--off-white); }
.check span { min-width: 0; }
.check b { display: block; font-weight: 600; color: var(--charcoal); font-size: 15px; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: 1.5px solid var(--text); border-radius: 5px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--charcoal); border-color: var(--charcoal); }
.check input:checked::after { content: "check"; font-family: "Material Symbols Rounded"; font-size: 16px; color: #fff; font-feature-settings: "liga"; }
.check input:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }

/* Guide form: the cover sits beside the title (Guide frame) */
.guide-top { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: start; }
.guide-top h2 { font-size: var(--h4); margin-bottom: 16px; }
.guide-top .cover { width: 108px; margin-top: -14px; padding: 12px 10px; }
.guide-top .cover .t { font-size: 17px; }

/* The drawn guide cover, until the real first page exists */
.cover { aspect-ratio: 8.5 / 11; width: 100%; max-width: 200px; border-radius: 4px; background: var(--charcoal); color: var(--off-white); padding: 16px 14px; display: grid; align-content: space-between; box-shadow: 0 18px 40px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15); position: relative; overflow: hidden; }
.cover::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(255,255,255,0.08); }
.cover .k { font: 700 9px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lighter); }
.cover .t { font: 700 22px/1.05 var(--sans); letter-spacing: -0.05em; }
.cover .f { font: 600 10px/1.2 var(--sans); color: var(--lighter); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Success panels (siteScript.ts writes these) ---------- */
.success { display: grid; gap: 12px; }
.success h3 { font-size: var(--h6); }
.success .ok-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; }
.success .ok-mark .ico { font-size: 26px; }
/* A long label (the guide's "Open The Retirement Prep Guide (PDF)") wraps
   inside the card on a phone instead of running past its edge. */
.success .btn { white-space: normal; text-align: center; }
.next-box { margin-top: 8px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--lightest); font-size: 15px; line-height: 1.45; }
.next-box ul { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.next-box .tagline { font-size: 11px; }
/* The texting step under the thank-you (siteTemplate.ts textStep): the
   success panel's own look, set apart from the thank-you by its hairline. */
.text-step { margin-top: 16px; }
.text-step [data-text-done]:focus { outline: none; }

/* ---------- Course cards (Webinar "Upcoming Webinars") ---------- */
.class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.class-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.class-grid.one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.course-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: 48px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--lighter); }
.course-head:first-child { margin-top: 0; }
.course-head h3 { font-size: var(--h5); margin-top: 6px; }
.course-head .tagline { font-size: 12px; }
.course-head p { max-width: 460px; font-size: 16px; }
.class-card { background: var(--lightest); border: 1px solid var(--lighter); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.class-card .media { padding: 16px 16px 0; background: var(--off-white); }
.class-card .media img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow); }
.class-card .body { padding: 28px 28px 24px; display: grid; align-content: start; }
.class-card h3 { font-size: var(--h5); margin-top: 12px; }
.class-card .when { margin-top: 12px; font-size: 16px; color: var(--charcoal); font-weight: 600; }
.class-card .where { margin-top: 4px; font-size: 16px; }
.class-card .perks { margin-top: 16px; }
.class-card .foot { padding: 8px; background: var(--off-white); }
.class-card .foot .btn { width: 100%; }
.class-card.is-passed, .class-card.is-closed { opacity: 0.65; }
.class-card.is-passed img, .class-card.is-closed img { filter: grayscale(1); }
.status-note { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 20px; border-radius: var(--r-sm); background: var(--lighter); color: var(--text); font: 600 16px/1.2 var(--sans); }
.date-tag { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 4px 6px; border-radius: 6px; background: var(--lighter); font: 700 14px/1.2 var(--sans); letter-spacing: 0.02em; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.date-tag .ico { font-size: 16px; }
.perks { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 14px; list-style: none; }
.perks li { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1.2 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--charcoal); }
.perks .ico { font-size: 16px; }
.empty-note { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--lighter); background: var(--lightest); text-align: center; }

/* ---------- Additional courses (Webinar "Keep Learning") ---------- */
.courses-grid { display: grid; grid-template-columns: minmax(0, 290fr) minmax(0, 686fr); gap: 48px; align-items: center; }
.car-view { border-inline: 1px solid var(--lighter); padding: 16px; }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel.single { grid-auto-columns: 100%; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
.course-card { background: var(--off-white); border: 1px solid var(--lighter); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 8px 8px; display: grid; grid-template-rows: auto auto 1fr auto; }
.course-card .pic { position: relative; margin-inline: 8px; }
.course-card .pic img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; }
.course-card .pic .date-tag { position: absolute; top: 12px; left: 12px; font-size: 16px; }
.course-card h3 { font-size: var(--h5); margin: 28px 16px 0; }
.course-card .about { margin: 12px 16px 20px; font-size: 16px; }
.course-card .about ul { padding-left: 18px; display: grid; gap: 4px; }
.course-card .foot { border-top: 1px solid var(--lighter); padding-top: 10px; display: grid; gap: 8px; }
.car-ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.car-arrows { display: inline-flex; border-radius: 999px; background: var(--charcoal); overflow: hidden; }
.car-arrows button { width: 34px; height: 26px; border: 0; background: transparent; color: var(--off-white); display: grid; place-items: center; cursor: pointer; }
.car-arrows button + button { border-left: 1px solid var(--off-white); }
.car-arrows button[disabled] { opacity: 0.35; cursor: default; }
.car-arrows .ico { font-size: 20px; }

/* ---------- What the course covers (the agenda, kept from the Sep 15 design) ---------- */
.agenda { border: 1px solid var(--lighter); border-radius: var(--r-lg); background: var(--off-white); box-shadow: var(--shadow); overflow: hidden; }
.agenda details + details { border-top: 1px solid var(--lighter); }
.agenda summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.agenda summary::-webkit-details-marker { display: none; }
.agenda summary > span { display: flex; align-items: center; gap: 14px; }
.agenda summary > span > span:first-child { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; font: 700 15px/1 var(--sans); }
.agenda summary > span > span:last-child { font: 700 20px/1.25 var(--sans); letter-spacing: -0.04em; color: var(--charcoal); }
.agenda summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform 250ms var(--ease); }
.agenda details[open] summary svg { transform: rotate(180deg); }
.agenda summary + div { padding: 0 20px 20px 66px; display: grid; gap: 10px; font-size: 16px; }
.agenda ul { padding-left: 18px; display: grid; gap: 6px; }

/* ---------- Waitlist / dark sections ---------- */
.notify-grid { display: grid; grid-template-columns: minmax(0, 455fr) minmax(0, 521fr); gap: 48px; align-items: center; }
.dark-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; list-style: none; }
.dark-chip { display: inline-flex; align-items: center; gap: 6px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--charcoal-card); font: 700 11px/1.2 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--off-white); }
.dark-chip::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.mini-list { display: grid; gap: 12px; }
.mini-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--charcoal-card); border: 1px solid var(--charcoal-edge); color: var(--lighter); }
.mini-row b { display: block; color: var(--off-white); font-size: 18px; letter-spacing: -0.03em; }
.mini-row .btn { padding: 10px 16px; font-size: 16px; }

/* ---------- Meet the advisor ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.advisor-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 15%; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--lighter); }
/* .photo-initial and .shared .avatar-initial (the name's first letter where
   the photo goes) are no longer rendered: since October 12 2026 no photo
   means no photo slot. Kept only for pages published before then; remove
   once every site has been republished. */
.photo-initial { display: grid; place-items: center; font: 700 120px/1 var(--sans); color: var(--charcoal); }
.bio { white-space: pre-line; }
.firm-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--lighter); background: var(--off-white); }
.firm-card img { height: 48px; width: auto; max-width: 96px; object-fit: contain; }
.firm-card b { display: block; color: var(--charcoal); letter-spacing: -0.03em; }
.firm-card span { font-size: 15px; color: var(--muted); }
.verify { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--lighter); background: var(--off-white); font: 600 15px/1.3 var(--sans); color: var(--charcoal); text-decoration: none; }
.verify .ico { font-size: 18px; }

/* ---------- Free guide band (Webinar and Guide frames, above the footer) ---------- */
.band { background: var(--lightest); border-radius: var(--r-lg); padding: 32px; display: grid; grid-template-columns: minmax(0, 290fr) minmax(0, 368fr) minmax(0, 238fr); gap: 32px; align-items: center; overflow: hidden; }
.band .form-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.band .cover-slot { align-self: stretch; margin: -32px -32px -32px 0; background: var(--off-white); border-radius: var(--r-lg) 0 0 var(--r-lg); display: grid; place-items: center; padding: 24px; }
.band .cover-slot .cover { transform: rotate(3deg); max-width: 180px; }
.band.no-form { grid-template-columns: minmax(0, 1fr) auto 238fr; }

/* ---------- About page parts ---------- */
.situations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.situation { padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--lighter); background: var(--lightest); font: 600 16px/1.35 var(--sans); color: var(--charcoal); letter-spacing: -0.02em; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; }
.step-card { padding: 24px; }
.step-card .num { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; font: 700 18px/1 var(--sans); }
.step-card h3 { font-size: var(--h6); margin-top: 16px; }
.step-card p { margin-top: 8px; font-size: 16px; }
.stat-card { background: var(--charcoal-card); border: 1px solid var(--charcoal-edge); border-radius: var(--r-lg); padding: 32px; display: grid; gap: 12px; align-content: start; color: var(--lighter); }
.stat-card .big { font: 700 44px/1 var(--sans); letter-spacing: -0.05em; color: var(--off-white); }
.stat-card .src { font-size: 14px; line-height: 1.5; color: var(--dot); border-top: 1px solid var(--charcoal-edge); padding-top: 12px; display: grid; gap: 8px; }
.stat-card .src p { margin: 0; }
.stat-card .src-k { color: var(--lighter); font-weight: 600; }
.stat-card .src-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.stat-card .src-links a { color: var(--off-white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }
.stat-card .src-links a:hover { color: #fff; }
.stat-card .src-links a:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; border-radius: 2px; }
.stat-card .src-ico { font-size: 16px; }
.stat-card .src-date { font-size: 13px; }
.research-fine { margin-top: 24px; color: var(--dot); text-align: center; max-width: 864px; margin-inline: auto; }
.contact-cards { display: grid; gap: 16px; }
.faq { border-top: 1px solid var(--lighter); }
.faq details { border-bottom: 1px solid var(--lighter); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 700 21px/1.3 var(--sans); letter-spacing: -0.04em; color: var(--charcoal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform 250ms var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq .answer { padding: 0 0 20px; max-width: 46em; }

/* ---------- Footer (Figma "footer") ---------- */
.site-footer { background: var(--lightest); border-top: 1px solid var(--lighter); padding-block: 80px; }
.foot-top { display: flex; justify-content: space-between; gap: 32px 48px; }
.foot-firm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; max-width: 560px; }
.foot-firm .addr { font: 500 18px/1.6 var(--sans); color: var(--muted); white-space: pre-line; }
.foot-firm .addr b { display: block; font-weight: 700; color: var(--charcoal); letter-spacing: -0.025em; white-space: normal; }
.foot-firm .addr a { text-decoration: none; }
.foot-firm .desc { grid-column: 1 / -1; max-width: 380px; font-size: 18px; }
.foot-right { display: grid; gap: 16px; justify-items: end; align-content: start; flex: none; }
.foot-nav { display: flex; gap: 4px; padding: 8px; background: var(--off-white); border: 1px solid var(--lighter); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.foot-nav a { padding: 8px 16px; border-radius: var(--r-sm); font: 600 18px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--charcoal); text-decoration: none; transition: background-color 250ms var(--ease); }
.foot-nav a:hover, .foot-nav a.active { background: var(--lightest); }
/* Under the nav pill: the advisor's social tiles, then Register Today, 16px apart. */
.foot-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
/* The advisor's own social pages (Figma footer): 32px charcoal tiles, 8px corners, 5px apart, a 14px off-white glyph. Only the pages the advisor gave are drawn. */
.socials { display: flex; gap: 5px; }
.socials a { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; flex: none; }
.socials svg { width: 14px; height: 14px; fill: currentColor; }
.foot-legal { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--lighter); display: grid; gap: 12px; }
.disclosure { font: 500 12px/1.5 var(--sans); letter-spacing: -0.0125em; color: var(--charcoal); white-space: pre-line; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-top: 12px; }
.foot-base nav { display: flex; gap: 16px; }
.foot-base nav a { font: 500 14px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--charcoal); text-underline-offset: 3px; }
/* "Designed by Aryze | Powered by Nexruto" (Figma component credit_wrapper). Keep it. */
.credit { display: flex; align-items: center; gap: 14px; font: 500 14px/1 var(--sans); color: var(--charcoal); }
.credit a, .credit .by { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.credit .sep { width: 1px; height: 28px; background: var(--lighter); }
.credit .aryze { height: 30px; width: auto; }
.credit .nexruto { height: 24px; width: auto; }

/* ---------- Phone-only bar ---------- */
#mobile-cta { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(234, 234, 236, 0.96); border-top: 1px solid var(--lighter); }
#mobile-cta .btn { width: 100%; }

/* ---------- Dialogs: calendar handoff and the guide popup ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(34, 34, 41, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog { position: relative; width: min(100%, 560px); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--off-white); border: 1px solid var(--lighter); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 32px; animation: rise 500ms var(--ease) both; }
.dialog h2 { font-size: var(--h5); }
.dialog p { margin-top: 10px; }
.dialog .btn-row { margin-top: 20px; }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--charcoal); cursor: pointer; display: grid; place-items: center; }
.dialog-close:hover { background: var(--lightest); }
/* The advisor's card, opened from the free call's "one financial advisor"
   (November 2 2026): whatever there is of the name, headshot and bio. */
.advisor-card-top { display: flex; align-items: center; gap: 16px; padding-right: 40px; }
.advisor-card-photo { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.advisor-card-top h2 { margin: 0; }
.advisor-card .bio { margin-top: 16px; line-height: 1.55; white-space: pre-line; }
/* The advisor's name in the free call question: the usual link blue, so it
   reads as a link (Steve, November 2 2026: "a true blue link"). */
.rc-q-advisor { padding: 0; border: 0; background: none; font: inherit; color: #1a0dab; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rc-q-advisor:hover { color: #0b0880; }
.rc-q-advisor:focus-visible { outline: 2px solid #1a0dab; outline-offset: 2px; border-radius: 2px; }
.advisor-card .btn-row { margin-top: 20px; }
.popup-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding-right: 32px; }
.popup-top .cover { width: 96px; padding: 10px 9px; transform: rotate(-3deg); }
.popup-top .cover .t { font-size: 15px; }
.popup-list { list-style: none; display: grid; gap: 8px; margin-top: 16px; font-size: 16px; }
.popup-list li { display: flex; gap: 8px; align-items: flex-start; }
.popup-list .ico { font-size: 20px; color: var(--charcoal); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- Hidden site ---------- */
.hidden-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--lightest); text-align: center; }
.hidden-page .inner { display: grid; gap: 16px; justify-items: center; max-width: 560px; }
.hidden-page h1 { font-size: var(--h4); }

/* ---------- Motion: rise in once, transform and opacity only ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .pick-caret, .agenda summary svg, .faq summary .ico { transition: none !important; }
  .dialog { animation: none; }
  .carousel { scroll-behavior: auto; }
}

/* ---------- Tablet: 768 to 1023 ---------- */
@media (max-width: 1023px) {
  :root { --h1: 52px; --h2: 44px; --h3: 38px; --section: 64px; }
  .nav-right .nav-links, .nav-right > .btn { display: none; }
  .nav-menu-btn { display: grid; }
  .hero-grid, .about-grid, .courses-grid, .notify-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-copy, .hero .form-card { max-width: 600px; }
  .hero .advisor-photo { max-width: 360px; }
  .grid-3, .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(odd), .class-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .span-2 { grid-column: auto; }
  .cta-dark { flex-wrap: wrap; }
  .pain-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .band .cover-slot { display: none; }
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advisor-photo { max-width: 420px; }
  .foot-top { flex-wrap: wrap; }
}
/* ---------- Phone: under 768 (Figma phone frames: phone text styles) ---------- */
@media (max-width: 767px) {
  :root { --h1: 44px; --h2: 38px; --h3: 28px; --h4: 26px; --h-card: 26px; --h5: 22px; --h6: 18px; --section: 56px; --gutter: 24px; }
  body { font-size: 17px; }
  .logo-box { height: 60px; padding: 6px 12px; }
  .logo-box .firm { font-size: 15px; }
  .grid-3, .grid-2, .class-grid, .class-grid.two, .band, .fields, .situations, .steps-grid, .choice-row { grid-template-columns: minmax(0, 1fr); }
  .band .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card { padding: 28px 24px; }
  .head.center { text-align: left; justify-items: start; }
  .carousel { grid-auto-columns: 88%; }
  .cta-dark { padding: 24px; }
  .foot-firm { grid-template-columns: minmax(0, 1fr); }
  .foot-right { justify-items: stretch; width: 100%; }
  .foot-nav { flex-direction: column; }
  /* Figma phone footer: the tiles on a row of their own, left, over the button. */
  .foot-actions { flex-direction: column; align-items: stretch; }
  .socials { align-self: flex-start; }
  .dialog { padding: 28px 22px; }
  .guide-top { grid-template-columns: 84px minmax(0, 1fr); }
  .guide-top .cover { width: 84px; }
  #mobile-cta { display: block; }
  .site-footer { padding-bottom: 120px; }
  .agenda summary + div { padding-left: 20px; }
}

/* ============================================================
   The registered page (October 30 2026): after a course sign-up, free or
   paid, the site shows this in place of everything else, so the visitor
   reads that they are registered and what for, not a sign-up form.
   siteScript.ts showRegistered builds it.
   ============================================================ */
body.rc-registered-on:not(.rc-attendee-on) > *:not(.rc-registered):not(#advisor-card):not(script):not(style) { display: none !important; }
/* Keep Stripe's dynamically inserted authentication overlay visible. */
body.rc-attendee-on > :is(header, main, footer, .sample-note, #mobile-cta, #handoff, #guide-popup, #advisor-card) { display: none !important; }
.rc-registered { min-height: 100vh; padding: 48px var(--gutter, 20px) 64px; background: var(--off-white); color: var(--text); }
.rc-registered-card { max-width: 640px; margin: 0 auto; display: grid; gap: 20px; padding: 32px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); }
.rc-registered-card .ok-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; }
.rc-registered-card .ok-mark .ico { font-size: 30px; }
.rc-registered-card.is-waiting .ok-mark { background: var(--lighter); color: var(--charcoal); }
.rc-registered-card h1 { margin: 0; font-size: var(--h5); line-height: 1.15; color: var(--charcoal); }
.rc-registered-card .lead { margin: 0; font-size: 18px; line-height: 1.5; }
.rc-registered-sub { margin: -8px 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--charcoal); }
.rc-registered-why { margin: -14px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.rc-registered-paid { margin: -8px 0 0; font-size: 15px; color: var(--muted); }
.rc-registered-card[data-attendee-state="payment"] { max-width: 1024px; min-width: 0; }
[data-attendee-mount] { min-width: 0; }
.rc-registered-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--lightest); }
.rc-registered-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lightest); }
.rc-registered-facts dt { font-weight: 600; color: var(--charcoal); }
.rc-registered-facts dd { margin: 0; overflow-wrap: anywhere; }
.rc-registered-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-registered-actions .btn { padding: 12px 20px; }
/* The texting step right under the heading (November 2 2026: "the natural
   next step of the form"): the form's own look, no box of its own. */
.rc-registered .text-step { margin-top: 0; display: grid; gap: 12px; }
.rc-registered .text-step h3 { margin: 0; font-size: var(--h6); line-height: 1.25; color: var(--charcoal); }
.rc-registered .text-step > p { margin: 0; }
/* The questions, in the same card under the texting step: the card's gap
   already spaces them, the hairline sets them apart. */
.rc-registered-card .rc-q-card { margin-top: 0; }
@media (max-width: 560px) {
  .rc-registered { padding-top: 24px; }
  .rc-registered-card { padding: 22px 18px; }
  .rc-registered-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* The questions after a sign-up, one per screen (prospectQuestions.ts). */
.rc-q-preface { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--off-white); line-height: 1.5; }
.rc-q-prompt { margin: 0; font-size: var(--h6); line-height: 1.25; color: var(--charcoal); }
.rc-q-hint { margin: -8px 0 0; color: var(--muted); }
.rc-registered-card form[data-q-form], .rc-q-card form[data-q-form] { display: grid; gap: 16px; }
.rc-registered-card textarea, .rc-q-card textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--lighter); border-radius: var(--r-sm); font: inherit; resize: vertical; }
/* The questions in a form card, under its thank-you and texting step
   (November 2 2026): the card's own look, set apart by a hairline. */
.rc-q-card { display: grid; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--lightest); }
.rc-q-card > h2 { margin: 0; font-size: var(--h6); line-height: 1.25; color: var(--charcoal); }
.rc-q-card .ok-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--charcoal); color: var(--off-white); display: grid; place-items: center; }
/* The check mark on its heading's line (November 2 2026): "You're
   Registered!" and the questions' "Thank you". */
.rc-registered-head { display: flex; align-items: center; gap: 12px; }
.rc-registered-head .ok-mark { flex: none; width: 38px; height: 38px; }
.rc-registered-head .ok-mark .ico { font-size: 22px; }
.rc-registered-head h1, .rc-registered-head h2 { margin: 0; min-width: 0; }
.rc-q-card .rc-registered-head h2 { font-size: var(--h6); line-height: 1.25; color: var(--charcoal); }
.rc-q-card .lead { margin: 0; }
.rc-q-options { display: grid; gap: 8px; }
/* The birthday: a month and a year, side by side (November 2 2026). */
.rc-q-dob { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.rc-q-dob select { height: 48px; padding: 0 12px; border: 1px solid var(--lighter); border-radius: var(--r-sm); background: #fff; font: inherit; color: var(--charcoal); }
.rc-q-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--lighter); border-radius: var(--r-sm); cursor: pointer; }
.rc-q-option.is-on { border-color: var(--charcoal); background: var(--off-white); }
.rc-q-option input { margin: 0; accent-color: var(--charcoal); }