/* =============================================================
   SKYWAY — site layer
   Loaded after tokens.css + components.css. Holds the new
   components (first-conversation panel, trust, process, legal,
   breadcrumbs, form states) and the accessibility / mobile
   corrections that override the older component styles.
   ============================================================= */

/* ---------- utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--sky-navy-800); color: var(--sky-cream);
  padding: 14px 20px; border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 500; text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; color: var(--sky-cream); }

:focus-visible {
  outline: 3px solid var(--sky-teal-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- header / nav ---------- */
/* Desktop: the nav links sit next to the logo instead of being pushed to the
   far right by the inherited `margin-left: auto`; the phone + CTA group takes
   over the auto margin so it stays right-aligned. Header height unchanged. */
@media (min-width: 1081px) {
  .sky-nav .links { margin-left: 20px; }
  .sky-nav .phone { margin-left: auto; }
}

/* ---------- header: annuity quiz nav CTA ---------- */
/* A compact gold pill so it reads as an action among the text links, using
   the existing brand gold tokens. Sized off the text links, not the header,
   so header height and the phone / "Choose a time" group are unaffected. */
.sky-nav .links .quiz-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--r-pill);
  background: var(--sky-gold-100);
  border: 1px solid var(--sky-gold-300);
  color: var(--sky-navy-900);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sky-nav .links .quiz-link { margin-left: 6px; padding: 8px 14px; }
/* Narrow desktop band: brand + six links + the quiz pill + phone + CTA no
   longer fit, so the phone number stands down here. It remains reachable in
   the footer, the mobile drawer, and on /contact. */
@media (min-width: 1081px) and (max-width: 1140px) {
  .sky-nav .links { margin-left: 0 !important; }
  .sky-nav .links .quiz-link { margin-left: 4px; padding: 8px 11px; }
  /* The phone control used to be the full number (144px) and had to be hidden
     in this band. As the compact "Call Us" pill (90px) it fits, so it now
     shows across the whole desktop-navigation range. Measured free space at
     1081px: 121px available, 106px needed. */
  /* The phone normally carries the auto margin that right-aligns the group;
     with it hidden, the CTA takes it over so it stays flush right. */
  .sky-nav .cta { margin-left: auto; }
}
/* Just above that, the links keep their tighter offset but the phone fits. */
@media (min-width: 1141px) and (max-width: 1200px) {
  .sky-nav .links { margin-left: 0 !important; }
  .sky-nav .links .quiz-link { margin-left: 4px; padding: 8px 11px; }
}
.sky-nav .links .quiz-link:hover {
  background: var(--sky-gold-300);
  border-color: var(--sky-gold-500);
  color: var(--sky-navy-900);
}

/* ---------- hero CTA area ---------- */
.sky-hero .hero-tertiary {
  margin-top: 18px;
  text-align: center;
  font-size: var(--fs-body-sm);
}
.sky-hero .hero-tertiary a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sky-teal-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 195, 207, 0.35);
  padding-bottom: 1px;
}
.sky-hero .hero-tertiary a:hover {
  color: var(--sky-teal-100);
  border-bottom-color: var(--sky-teal-100);
}

/* ---------- mobile header: single row ----------
   Below 1080px the desktop link row cannot hold brand + 6 links + phone +
   CTA, so the header becomes: brand | Take Quiz | menu. Every page lives in
   the drawer, which already handles focus trap, Escape, focus restore and
   scroll lock. The previous horizontally-scrolling second row is gone: at
   390px it overflowed its track by 131px and clipped the quiz pill by 123px. */
.sky-nav .quiz-cta { display: none; }
@media (max-width: 1080px) {
  .sky-nav .quiz-cta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    min-height: 44px;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--sky-navy-900);
    text-decoration: none;
    background: var(--sky-gold-100);
    border: 1px solid var(--sky-gold-300);
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .sky-nav .quiz-cta:hover {
    background: var(--sky-gold-300);
    border-color: var(--sky-gold-500);
    color: var(--sky-navy-900);
  }
}
@media (max-width: 380px) {
  .sky-nav .quiz-cta { padding: 11px 13px; font-size: 14px; }
}

.sky-header {
  position: sticky; top: 0; z-index: 60;
  padding-top: 16px;
  pointer-events: none;
}
.sky-nav-wrap { position: static; top: auto; }
.sky-hero, .sky-page-header { margin-top: -72px; }

.sky-nav .links a { padding: 10px 12px; }
.sky-nav .cta { padding: 12px 18px; font-size: var(--fs-body-sm); }
.sky-nav .menu-btn {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(14, 33, 72, 0.12);
  background: var(--sky-white);
}

/* The desktop nav pill cannot hold brand + 5 links + phone + CTA below
   ~1080px, so the simplified header starts there rather than at 900px. */
/* Mobile header is one row: brand left, Take Quiz + menu right. */
@media (max-width: 1080px) {
  .sky-header { padding-top: 12px; }
  .sky-hero, .sky-page-header { margin-top: -64px; }
  /* The nav pill needs the mobile gutter, not the 64px desktop one — at
     390px the desktop gutter leaves only 262px of track, which the brand +
     Take Quiz + menu button overflow. */
  .sky-nav-wrap { padding: 0 var(--gutter-mobile); }
  .sky-nav {
    padding: 8px 8px 8px 12px; gap: 8px;
    flex-wrap: nowrap;
    border-radius: var(--r-pill);
  }
  .sky-nav .links { display: none !important; }
  .sky-nav .phone { display: none !important; }
  .sky-nav .cta { display: none !important; }
  .sky-nav .brand { border-right: 0; padding-right: 10px; }
  .sky-nav .brand .word { display: inline-block; font-size: 13px; }
  .sky-nav .menu-btn { display: inline-flex; }
}
/* Narrow phones: at 390px the single row fits with ~1px to spare, so a
   375px iPhone SE/mini would overflow. Below 400px the wordmark stands
   down and the bridge mark carries the brand, freeing ~70px. */
@media (max-width: 400px) {
  .sky-nav .brand .word { display: none; }
  .sky-nav .brand { padding-right: 4px; }
}

/* Belt and braces: nothing in the pill may force it to overflow. */
.sky-nav { overflow: hidden; }
.sky-nav .brand, .sky-nav .cta, .sky-nav .menu-btn { flex-shrink: 0; }
.sky-nav .links { min-width: 0; }

/* mobile menu — modal, 44px targets, readable type */
.sky-mobile-menu { pointer-events: auto; }
.sky-mobile-menu .mm-head { padding: 14px 20px; min-height: 68px; }
.sky-mobile-menu .mm-head .close-btn { width: 44px; height: 44px; }
.sky-mobile-menu .mm-links a { font-size: 22px; padding: 18px 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; }
.sky-mobile-menu .mm-foot { display: grid; gap: 12px; padding: 16px 20px 28px; }
.sky-mobile-menu .mm-foot .sk-btn { width: 100%; justify-content: center; min-height: 52px; }

/* ---------- breadcrumbs ---------- */
.sky-breadcrumbs { margin-bottom: 18px; }
.sky-breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: var(--fs-body-sm);
  justify-content: center;
}
.sky-breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; color: rgba(247, 245, 240, 0.7); }
.sky-breadcrumbs li + li::before { content: '/'; color: rgba(247, 245, 240, 0.4); }
.sky-breadcrumbs a { color: rgba(247, 245, 240, 0.86); text-decoration: underline; text-underline-offset: 3px; }
.sky-breadcrumbs a:hover { color: var(--sky-cream); }
.sky-breadcrumbs [aria-current='page'] { color: var(--sky-cream); }

/* ---------- page header ---------- */
.sky-page-header { padding: 132px 0 72px; }
.sky-page-header .eyebrow { text-transform: uppercase; }
.sky-page-header h1 { max-width: 24ch; }
@media (max-width: 700px) {
  .sky-page-header { padding: 104px 0 44px; }
  .sky-page-header h1 { font-size: 2rem; }
  .sky-page-header p { font-size: var(--fs-body); }
}

/* ---------- hero corrections ---------- */
.sky-hero .eyebrow { text-transform: uppercase; }
.sky-hero .stat-card .cred-eyebrow { text-transform: uppercase; }
.sky-hero .stat-card .cred-title {
  text-transform: none; letter-spacing: var(--tr-snug);
  font-size: var(--fs-h4); max-width: 22ch;
}
.sky-hero .stat-card .cred-body { max-width: 32ch; font-size: 14px; }
.sky-hero .stat-card .cred-body a { color: var(--sky-teal-300); text-decoration: underline; }
.sky-hero .portrait-frame .frame-tag .av {
  background: var(--sky-navy-900); color: var(--sky-cream);
  font-size: 11px; font-weight: 600;
}
.sky-hero .feat-card .feat-title { margin-top: 0; font-size: var(--fs-h4); }
.sky-hero .feat-card .feat-desc { font-size: 14px; }
.sky-hero .feat-card .glyph { width: 64px; height: 64px; border-radius: var(--r-xl); }
.sky-hero .mini-tile .txt { font-size: 14px; }
.sky-hero .showcase { padding-bottom: 72px; }
@media (max-width: 600px) {
  .sky-hero .inner { padding: 112px 0 40px; }
  .sky-hero .showcase { padding: 24px 0 48px; gap: 12px; }
}

/* ---------- first-conversation panel ---------- */
.sky-first-convo { background: var(--bg); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.sky-first-convo .panel {
  background: var(--sky-white);
  border: 1px solid rgba(14, 33, 72, 0.05);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 48px;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center;
}
.sky-first-convo .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-700); margin-bottom: 16px;
}
.sky-first-convo .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--sky-gold-500); display: inline-block; }
.sky-first-convo h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem); font-weight: 500; line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight); margin-bottom: 14px;
}
.sky-first-convo p { font-size: var(--fs-body-lg); max-width: 54ch; margin-bottom: 24px; }
.sky-first-convo .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sky-first-convo .details {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  border-left: 1px solid var(--border); padding-left: 40px;
}
.sky-first-convo .details li { display: flex; gap: 14px; align-items: center; }
.sky-first-convo .details .ico {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex-shrink: 0;
  background: var(--sky-navy-50); color: var(--sky-navy-800);
  display: flex; align-items: center; justify-content: center;
}
.sky-first-convo .details b { font-weight: 500; color: var(--sky-navy-900); font-size: var(--fs-body); }
@media (max-width: 900px) {
  .sky-first-convo .panel { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; border-radius: var(--r-lg); }
  .sky-first-convo .details { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 24px; }
  .sky-first-convo .actions .sk-btn { width: 100%; justify-content: center; }
}

/* ---------- verified trust ---------- */
.sky-trust { background: var(--bg-lifted); }
.sky-trust .trust-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sky-trust .trust-grid li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--sky-white); border: 1px solid rgba(14, 33, 72, 0.05);
  border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--shadow-1);
}
.sky-trust .trust-grid .ico {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex-shrink: 0;
  background: var(--sky-navy-50); color: var(--sky-navy-800);
  display: flex; align-items: center; justify-content: center;
}
.sky-trust .trust-grid .lbl { font-size: var(--fs-body); font-weight: 600; color: var(--sky-navy-900); margin-bottom: 4px; }
.sky-trust .trust-grid .det { font-size: var(--fs-body-sm); color: var(--fg-muted); margin: 0; }
.sky-trust .trust-note {
  margin: 28px auto 0; max-width: 68ch; text-align: center;
  font-size: var(--fs-body-sm); color: var(--fg-subtle);
}
@media (max-width: 900px) { .sky-trust .trust-grid { grid-template-columns: 1fr; } }

/* ---------- service card badge ---------- */
.sky-services .card .card-badge {
  align-self: flex-start; margin-bottom: -4px;
  font-size: var(--fs-caption); font-weight: 500;
  color: var(--sky-teal-700); background: var(--sky-teal-100);
  border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap;
}

/* ---------- footer link groups: desktop lists always visible ---------- */
.sky-footer .footer-group summary { pointer-events: none; }
.sky-footer .footer-group .chev { display: none; }

/* ---------- services process ---------- */
.sky-process { background: var(--bg); }
.sky-process .steps {
  list-style: none; counter-reset: step; margin: 0 auto; padding: 0;
  max-width: 880px; display: grid; gap: 0;
  border-top: 1px solid var(--border);
}
.sky-process .steps li {
  display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--border);
}
.sky-process .steps .n {
  font-family: var(--font-serif); font-style: italic; font-size: 28px;
  color: var(--sky-gold-600); line-height: 1;
}
.sky-process .steps p { font-size: var(--fs-body-lg); color: var(--sky-navy-900); margin: 0; }
.sky-process .process-foot {
  max-width: 880px; margin: 40px auto 0; display: grid; gap: 16px;
  padding-top: 28px; border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .sky-process .steps li { grid-template-columns: 48px 1fr; gap: 12px; padding: 18px 0; }
  .sky-process .steps p { font-size: var(--fs-body); }
}

/* ---------- compensation / scope / licensing ---------- */
.sky-compensation h2 {
  font-size: var(--fs-h4); font-weight: 600; margin-bottom: 8px;
}
.sky-compensation p, .sky-scope, .sky-licensing p {
  font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--fg-muted); margin: 0;
}
.sky-scope { margin-top: 16px; }
.sky-licensing { display: grid; gap: 8px; }
.sky-licensing .ids { font-size: var(--fs-caption); color: var(--fg-subtle); }
.sky-footer .sky-scope, .sky-footer .sky-licensing p, .sky-footer .sky-compensation p {
  color: rgba(247, 245, 240, 0.66); font-size: 13.5px;
}
.sky-footer .sky-licensing a { color: rgba(247, 245, 240, 0.9); text-decoration: underline; }

/* Medicare TPMO disclaimer — prominent, never small print. */
.sky-tpmo {
  margin: 28px 0; padding: 20px 22px;
  background: var(--sky-info-bg); border: 1px solid var(--sky-teal-300);
  border-radius: var(--r-md);
}
.sky-tpmo p { font-size: var(--fs-body); color: var(--sky-navy-900); margin: 0; line-height: var(--lh-relaxed); }
.sky-medicare-resources { font-size: var(--fs-body-sm); color: var(--fg-muted); margin: 20px 0 0; }

/* ---------- about: professional information ---------- */
.sky-pro-info { background: var(--bg-lifted); }
.sky-pro-info .pro-grid {
  max-width: 880px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--border);
}
.sky-pro-info .pro-grid > div { padding: 18px 4px; border-bottom: 1px solid var(--border); }
.sky-pro-info dt {
  font-size: var(--fs-caption); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-700); margin-bottom: 6px;
}
.sky-pro-info dd { margin: 0; font-size: var(--fs-body); color: var(--sky-navy-900); }
.sky-pro-info dd .dd-sub { display: block; font-size: var(--fs-body-sm); color: var(--fg-muted); margin-top: 2px; }
.sky-pro-info .pro-foot { max-width: 880px; margin: 36px auto 0; display: grid; gap: 18px; }
@media (max-width: 700px) { .sky-pro-info .pro-grid { grid-template-columns: 1fr; } }

/* ---------- learn ---------- */
.sky-education .learn-h {
  font-size: var(--fs-h3); font-weight: 600; margin-bottom: 20px;
}
.sky-education .article .reviewed { font-size: var(--fs-caption); color: var(--fg-subtle); margin-top: 8px; }
.sky-education .aside h2 { font-size: var(--fs-h3); color: var(--sky-cream); margin-bottom: 12px; }
.sky-education .aside .eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-300); margin-bottom: 12px;
}
.edu-scope, .sky-article .edu-scope {
  margin-top: 32px; font-size: var(--fs-body-sm); color: var(--fg-subtle);
  border-top: 1px solid var(--border); padding-top: 16px;
}

/* ---------- FAQ ---------- */
.sky-faq h3 { margin: 0; }
.sky-faq .q { min-height: 56px; }
.sky-faq .q:hover .text { color: var(--sky-teal-700); }
.sky-faq .a p { margin-bottom: 14px; }
.sky-faq .a p:last-child { margin-bottom: 0; }
.sky-faq .a { padding-bottom: 28px; }
.sky-faq .a a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- contact form ---------- */
.sky-contact .method.quiet { background: var(--bg-lifted); box-shadow: none; }
.sky-contact .method .val a { text-decoration: underline; text-underline-offset: 3px; }
.sky-contact .form-intro { font-size: var(--fs-body-sm); color: var(--fg-subtle); margin: 0; }
.sky-contact .field label { font-size: var(--fs-body-sm); }
.sky-contact .field .req { color: var(--sky-danger); }
.sky-contact .field input, .sky-contact .field select, .sky-contact .field textarea { min-height: 48px; font-size: 16px; }
.sky-contact .field .hint { font-size: var(--fs-caption); color: var(--fg-subtle); margin-top: 2px; }
.sky-contact .field-err {
  font-size: var(--fs-body-sm); color: var(--sky-danger); font-weight: 500; margin-top: 2px;
}
.sky-contact [aria-invalid='true'] { border-color: var(--sky-danger); background: var(--sky-danger-bg); }
.sky-contact .error-summary {
  background: var(--sky-danger-bg); border: 1px solid var(--sky-danger);
  border-radius: var(--r-md); padding: 18px 20px;
}
.sky-contact .error-summary p { color: var(--sky-navy-900); font-weight: 600; margin-bottom: 8px; }
.sky-contact .error-summary ul { margin: 0; padding-left: 18px; font-size: var(--fs-body-sm); }
.sky-contact .error-summary a { color: var(--sky-danger); }
.sky-contact .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sky-contact .form-state {
  background: var(--sky-white); border: 1px solid rgba(14, 33, 72, 0.05);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 36px;
}
.sky-contact .form-state h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.sky-contact .form-state p { font-size: var(--fs-body); margin-bottom: 18px; }
.sky-contact .form-state .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.sky-contact .form-state.success { border-left: 4px solid var(--sky-success); }
.sky-contact .form-state.fallback { border-left: 4px solid var(--sky-warning); }
.sky-contact .link-btn {
  background: none; border: 0; padding: 0; color: var(--link); font-size: var(--fs-body-sm);
  text-decoration: underline; cursor: pointer;
}
.sky-contact .contact-foot { max-width: 760px; margin: 40px auto 0; }

/* ---------- schedule ---------- */
.sky-schedule { background: var(--bg); }
.sky-schedule .details-line {
  font-size: var(--fs-body); color: var(--fg-muted); text-align: center; margin-bottom: 8px;
}
.sky-schedule h2 {
  font-size: var(--fs-h3); text-align: center; margin-bottom: 24px;
}
.sky-schedule .cal-embed-wrap {
  background: var(--sky-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
}
.sky-schedule .cal-alternatives {
  margin: 28px auto 0; max-width: 760px; text-align: center; display: grid; gap: 10px;
}
.sky-schedule .cal-alternatives .direct a {
  font-size: var(--fs-body-lg); font-weight: 500; text-decoration: underline; text-underline-offset: 4px;
}
.sky-schedule .cal-alternatives .new-tab { font-size: var(--fs-body-sm); color: var(--fg-subtle); }
.sky-schedule .cal-alternatives .or { font-size: var(--fs-body-sm); color: var(--fg-subtle); margin-top: 6px; }
.sky-schedule .alt-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sky-schedule .schedule-foot {
  max-width: 760px; margin: 48px auto 0; padding-top: 28px;
  border-top: 1px solid var(--border); display: grid; gap: 16px;
}
.sky-schedule .schedule-foot p { font-size: var(--fs-body-sm); }
@media (max-width: 700px) {
  /* Keep Calendly's 320px minimum without creating horizontal scroll. */
  .sky-schedule .cal-embed-wrap {
    margin-left: calc(-1 * var(--gutter-mobile)); margin-right: calc(-1 * var(--gutter-mobile));
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .sky-schedule .alt-actions .sk-btn { width: 100%; justify-content: center; }
}

/* ---------- article ---------- */
.sky-article { padding-top: 56px; }
.sky-article .meta-row { justify-content: flex-start; }
.sky-article .body .qualifier {
  font-size: var(--fs-body-sm); color: var(--fg-subtle);
  border-left: 2px solid var(--sky-stone-200); padding-left: 16px; margin: 0 0 20px;
}
.sky-article .body .callout p.lbl, .sky-service-detail .callout p.lbl {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-700); margin-bottom: 8px;
}
.sky-article .sources { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.sky-article .sources h2 { font-size: var(--fs-h4); margin-bottom: 12px; }
.sky-article .sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--fs-body-sm); }
.sky-article .sources a { text-decoration: underline; text-underline-offset: 3px; }
.sky-article .sources .nt { color: var(--fg-subtle); font-size: var(--fs-caption); }
.sky-article .glossary-term .reviewed, .sky-article .body .reviewed {
  font-size: var(--fs-caption); color: var(--fg-subtle); margin-top: 18px;
}
.sky-article .related .card { align-items: center; }
.sky-article .related .card .nm { font-size: var(--fs-body); font-weight: 600; color: var(--sky-navy-900); }
.sky-article .related .card .lb {
  font-size: var(--fs-caption); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-faint);
}

/* ---------- service detail ---------- */
.sky-service-detail .further-reading {
  margin: 32px 0 8px; padding: 20px 22px;
  background: var(--bg-lifted); border-radius: var(--r-md); border: 1px solid var(--border);
}
.sky-service-detail .further-reading .lbl {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-700); margin-bottom: 10px;
}
.sky-service-detail .further-reading ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sky-service-detail .further-reading a { font-size: var(--fs-body); text-decoration: underline; text-underline-offset: 3px; }
.sky-service-detail .body .qualifier {
  font-size: var(--fs-body-sm); color: var(--fg-subtle);
  border-left: 2px solid var(--sky-stone-200); padding-left: 16px; margin: 0 0 20px;
}
.sky-service-detail .aside .panel .lbl { display: inline-flex; }
.sky-service-detail .aside .panel.quiet { background: var(--bg-lifted); box-shadow: none; }
.sky-service-detail .aside .panel .small { font-size: var(--fs-body-sm); color: var(--fg-muted); margin: 0; }
.sky-service-detail .aside .cta-panel h3 {
  font-size: var(--fs-h4); font-weight: 500; color: var(--sky-cream); margin: 0 0 8px; letter-spacing: var(--tr-snug);
}
.sky-service-detail .body .sky-scope { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- legal pages ---------- */
.sky-legal { background: var(--bg); padding: 56px 0 96px; }
.sky-legal .effective { font-size: var(--fs-body-sm); color: var(--fg-subtle); margin-bottom: 32px; }
.sky-legal .body h2 {
  font-size: var(--fs-h3); font-weight: 600; margin: 40px 0 12px; letter-spacing: var(--tr-snug);
}
.sky-legal .body h2:first-child { margin-top: 0; }
.sky-legal .body p { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); margin: 0 0 16px; color: var(--sky-stone-700); }
.sky-legal .body ul { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--sky-stone-700); padding-left: 22px; margin: 0 0 20px; }
.sky-legal .body li { padding: 4px 0 4px 6px; }
.sky-legal .body li::marker { color: var(--sky-gold-500); }
.sky-legal .body a { text-decoration: underline; text-underline-offset: 3px; }
.sky-legal .review-date { font-size: var(--fs-body-sm); color: var(--fg-subtle); }

/* ---------- not found ---------- */
.sky-notfound { padding: 64px 0 96px; }
.sky-notfound .grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- footer ---------- */
.sky-footer .footer-group h2 {
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--sky-gold-300); margin: 0;
}
.sky-footer .footer-group summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid rgba(247, 245, 240, 0.08);
}
.sky-footer .footer-group summary::-webkit-details-marker { display: none; }
.sky-footer .footer-group .chev { display: none; color: var(--sky-teal-300); }
.sky-footer ul a { font-size: 15px; text-decoration: none; }
.sky-footer ul a:hover { text-decoration: underline; }
.sky-footer .compliance { max-width: 860px; }
.sky-footer .compliance p { font-size: 13.5px; color: rgba(247, 245, 240, 0.68); }
.sky-footer .verified-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(247, 245, 240, 0.08); }
.sky-footer .verified-row .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(247, 245, 240, 0.06); font-size: 12.5px; color: rgba(247, 245, 240, 0.82);
}
.sky-footer .verified-row .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--sky-teal-300); }
.sky-footer .bottom { font-size: 13px; color: rgba(247, 245, 240, 0.62); }
.sky-footer .bottom a { font-size: 13px; color: rgba(247, 245, 240, 0.78); text-decoration: underline; }
.sky-footer .brand-col .meta { font-size: 13.5px; color: rgba(247, 245, 240, 0.62); display: grid; gap: 4px; }

@media (max-width: 900px) {
  /* Collapsible navigation groups; disclosures below are never collapsed. */
  .sky-footer .top { grid-template-columns: 1fr; gap: 4px; padding-bottom: 32px; }
  .sky-footer .footer-group summary { cursor: pointer; pointer-events: auto; padding: 18px 0; margin-bottom: 0; min-height: 56px; }
  .sky-footer .footer-group .chev { display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
  .sky-footer .footer-group details[open] .chev { transform: rotate(180deg); }
  .sky-footer .footer-group ul { padding-bottom: 20px; gap: 16px; }
  .sky-footer .footer-group ul a { display: inline-block; padding: 4px 0; }
}

/* ---------- mobile density ---------- */
@media (max-width: 600px) {
  section { padding-top: 48px; padding-bottom: 48px; }
  .sky-first-convo { padding-top: 40px; padding-bottom: 40px; }
  .section-head { margin-bottom: 28px; }
  .sky-article { padding-top: 32px; }
  .sky-legal { padding: 32px 0 64px; }
}

/* ---------- mobile floating "Call Us" pill ---------- */
/* Geometry, type and interaction copied from the existing .sky-nav .quiz-cta
   header chip; colour/emphasis from .menu-btn (white fill, faint navy
   hairline) so the gold quiz CTA stays the dominant action. Hidden above the
   existing 1080px mobile breakpoint — this is a mobile affordance only.
   z-index 55 sits above page content but below .sky-header (60) and the
   .sky-mobile-menu drawer (100), so open navigation always wins. */
.call-cta { display: none; }

@media (max-width: 1080px) {
  .call-cta {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--sky-navy-900);
    text-decoration: none;
    background: var(--sky-white);
    border: 1px solid rgba(14, 33, 72, 0.12);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-3);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .call-cta:hover,
  .call-cta:active {
    background: var(--sky-navy-50);
    border-color: var(--sky-navy-200);
    color: var(--sky-navy-900);
  }
  /* The pill above is viewport-fixed in the lower-right, so the last footer
     row would otherwise come to rest underneath it at the bottom of the
     scroll and cover the Accessibility link. Reserve the pill's own height
     (44px) plus its 16px bottom offset and 12px of clearance at the end of
     the footer. Scoped to this media query because .call-cta is display:none
     above 1080px, so no space is reserved where there is no pill. */
  .sky-footer .bottom {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* Matches the narrow-width step the header chip already takes at 380px. */
@media (max-width: 380px) {
  .call-cta { padding: 11px 13px; font-size: 14px; }
}

/* ---------- desktop header: Call Us (converted .phone control) ---------- */
/* Was a plain text link showing the number; it now reads "Call Us" and takes
   the same secondary pill language as .menu-btn and the floating .call-cta —
   white fill, faint navy hairline, navy ink. Sized off .sky-nav .cta so the
   two contact controls share a baseline height, but without its navy fill, so
   "Choose a time" stays the dominant action. Visibility is unchanged: the
   existing rules still hide it below 1141px. */
@media (min-width: 1081px) {
  .sky-nav .phone {
    gap: 7px;
    padding: 9px 16px;
    background: var(--sky-white);
    border: 1px solid rgba(14, 33, 72, 0.12);
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .sky-nav .phone:hover {
    background: var(--sky-navy-50);
    border-color: var(--sky-navy-200);
    color: var(--sky-navy-900);
  }
}