/* =============================================================
   SKYWAY — /annuity-report/  (ANNUITY FUNNEL V3)
   -------------------------------------------------------------
   Page-specific styles only. Tokens, fonts and resets come from
   /assets/fonts.css, /assets/tokens.css, /assets/components.css
   and /assets/site.css, linked ahead of this file.

   No new colors, fonts, radii or shadows: every value below is a
   site token or a composition of them.

   MOBILE FIRST. Base rules target 320-430px; min-width queries
   add the 768/1080/1280 layouts. Nothing here is fixed or sticky,
   so no control can ever cover an answer, the Back button, the
   progress row, a field, the consent block, the CTA, the
   confirmation, or the footer.
   ============================================================= */

/* Screens are swapped by the script; without JS the intro screen
   is the one marked is-active and the page still reads. */
/* site.css gives every <section> the marketing section rhythm
   (padding: var(--section-y-*) 0). The funnel screens own their own
   spacing, so that inherited padding is stood down here — otherwise
   each step opens with ~120px of dead space above the content. */
.ar-screen { display: none; padding: 0; }
.ar-screen.is-active { display: block; }
.ar-js .ar-screen:not(.is-active) { display: none; }

/* -------------------------------------------------------------
   TOPBAR — static, in flow, never sticky (a pinned bar costs
   viewport on every step of a phone funnel).
   ------------------------------------------------------------- */
.ar-topbar {
  position: relative;
  background: var(--sky-cream);
  border-bottom: 1px solid var(--sky-navy-100);
}
.ar-topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px var(--gutter-mobile);
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--sky-navy-900);
}
.ar-brand:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 2px; }
.ar-brand-mark { width: 30px; height: 30px; display: inline-flex; flex-shrink: 0; }
.ar-brand-word {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding-top: 2px;
}
.ar-topbar-note {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  white-space: nowrap;
}
@media (max-width: 359px) {
  .ar-brand-word { display: none; }
}

/* -------------------------------------------------------------
   HERO / COMMITMENT SCREEN
   Copy first, CTA above the media on a phone so the primary
   action lands inside the first screen; two columns from 1080px.
   ------------------------------------------------------------- */
.ar-hero {
  background: var(--sky-cream);
  padding: 28px 0 40px;
}
.ar-hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: grid;
  gap: 28px;
}
.ar-eyebrow {
  margin: 0 0 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--sky-teal-700);
}
.ar-hero-copy h1 {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 7.4vw, 2.5rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--sky-navy-900);
  text-wrap: pretty;
}
.ar-hero-copy h1:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 4px; border-radius: var(--r-xs); }
.ar-lede {
  margin: 0 0 24px;
  max-width: 46ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* --- primary CTA ------------------------------------------- */
.ar-cta-block { margin: 0 0 18px; }
.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ar-btn:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 3px; }
.ar-btn-primary {
  width: 100%;
  background: var(--sky-navy-800);
  color: var(--sky-white);
}
.ar-btn-primary:hover { background: var(--sky-navy-700); }
.ar-btn-primary[disabled] { background: var(--sky-navy-300); cursor: default; }
.ar-btn-secondary {
  background: transparent;
  border-color: var(--sky-navy-200);
  color: var(--sky-navy-800);
}
.ar-btn-secondary:hover { background: var(--sky-navy-50); }
.ar-btn-block { width: 100%; }
.ar-microcopy {
  margin: 10px 0 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-subtle);
}
.ar-microcopy-center { text-align: center; }

/* --- secondary path: present, deliberately not a button ---- */
.ar-secondary-path {
  margin: 0 0 26px;
  font-size: var(--fs-body-sm);
  color: var(--fg-subtle);
}
.ar-secondary-path a {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.ar-secondary-path a:hover { color: var(--sky-teal-700); }

.ar-reassure {
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--sky-stone-200);
  list-style: none;
  display: grid;
  gap: 10px;
}
.ar-reassure li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.ar-reassure li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sky-gold-500);
}
.ar-noscript {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--sky-warning-bg);
  font-size: var(--fs-body-sm);
  color: var(--sky-stone-800);
}

/* --- hero media region -------------------------------------
   Holds the FINAL proportions whether or not the photograph has
   landed: 16:9 on a phone, 3:2 from 768px. The approved image
   fills the same box through object-fit, so inserting it later
   changes no layout. --------------------------------------- */
.ar-hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--sky-navy-800);
}
.ar-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.ar-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  color: var(--sky-cream);
  background:
    repeating-linear-gradient(135deg, rgba(247,245,240,0.05) 0 2px, transparent 2px 9px),
    var(--sky-navy-800);
}
.ar-media-placeholder svg { opacity: 0.55; }
.ar-media-placeholder-label {
  margin: 6px 0 0;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--sky-cream);
}
.ar-media-placeholder-sub {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--sky-gold-300);
}

/* -------------------------------------------------------------
   PANEL — the shared shell for quiz, contact and confirmation.
   ------------------------------------------------------------- */
.ar-panel {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px var(--gutter-mobile) 48px;
}
.ar-progress { margin: 0 0 24px; }
.ar-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.ar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  margin-left: -4px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
}
.ar-back:hover { color: var(--sky-navy-800); }
.ar-back:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 2px; }
.ar-back[hidden] { display: none; }
.ar-progress-label {
  margin: 0;
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ar-progress-track {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ar-progress-seg {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--sky-stone-200);
  transition: background-color var(--dur-base) var(--ease-out);
}
.ar-progress-seg.is-on { background: var(--sky-teal-500); }

.ar-q-heading {
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--sky-navy-900);
  text-wrap: pretty;
}
.ar-q-heading:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 4px; border-radius: var(--r-xs); }

/* --- answer cards ------------------------------------------- */
.ar-options {
  display: grid;
  gap: 10px;
}
.ar-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  text-align: left;
  background: var(--sky-white);
  border: 1px solid var(--sky-stone-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--sky-navy-900);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ar-option:hover { border-color: var(--sky-navy-300); box-shadow: var(--shadow-2); }
.ar-option:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 2px; }
.ar-option-tick {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--sky-stone-300);
  border-radius: 50%;
  color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ar-option[aria-pressed="true"] {
  border-color: var(--sky-navy-800);
  background: var(--sky-navy-50);
}
.ar-option[aria-pressed="true"] .ar-option-tick {
  border-color: var(--sky-navy-800);
  background: var(--sky-navy-800);
  color: var(--sky-white);
}
.ar-q-foot {
  margin: 22px 0 0;
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
}

/* -------------------------------------------------------------
   CONTACT FORM
   ------------------------------------------------------------- */
.ar-contact-lede {
  margin: 0 0 24px;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.ar-form { display: grid; gap: 18px; }
.ar-field { display: grid; gap: 6px; }
.ar-field label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--sky-navy-900);
}
.ar-field input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--sky-white);
  border: 1px solid var(--sky-stone-300);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--sky-navy-900);
}
.ar-field input:focus-visible {
  outline: 3px solid rgba(16, 144, 168, 0.30);
  outline-offset: 0;
  border-color: var(--sky-navy-800);
  border-width: 1.5px;
}
.ar-field input[aria-invalid="true"] { border-color: var(--sky-danger); }
.ar-err {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--sky-danger);
}
.ar-err[hidden] { display: none; }
.ar-err-consent { margin-top: -10px; }

.ar-consent {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  background: var(--sky-cream-lt);
  border: 1px solid var(--sky-stone-200);
  border-radius: var(--r-md);
}
.ar-consent input {
  width: 24px; height: 24px;
  margin: 2px 0 0;
  accent-color: var(--sky-navy-800);
}
.ar-consent input:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 2px; }
.ar-consent label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.ar-consent a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.ar-hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ar-form-error {
  margin: 0;
  padding: 14px 16px;
  background: var(--sky-danger-bg);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--sky-stone-800);
}
.ar-form-error[hidden] { display: none; }

/* -------------------------------------------------------------
   CONFIRMATION
   ------------------------------------------------------------- */
.ar-panel-done { text-align: left; }
.ar-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--sky-success-bg);
  color: var(--sky-success);
}
.ar-steps {
  margin: 0 0 28px;
  padding: 0 0 0 22px;
  display: grid;
  gap: 16px;
}
.ar-steps li {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.ar-steps strong {
  display: block;
  font-weight: 600;
  color: var(--sky-navy-900);
}
.ar-done-note {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--sky-stone-200);
  font-size: var(--fs-body-sm);
  color: var(--fg-subtle);
}
.ar-done-note a { color: var(--link); }

/* -------------------------------------------------------------
   FOOTER — static, in flow, always reachable.
   ------------------------------------------------------------- */
.ar-footer {
  background: var(--sky-cream-lt);
  border-top: 1px solid var(--sky-stone-200);
}
.ar-footer-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px var(--gutter-mobile) 40px;
  display: grid;
  gap: 12px;
}
.ar-footer-brand {
  margin: 0;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-navy-900);
}
.ar-footer-legal,
.ar-footer-copy {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--fg-subtle);
}
.ar-footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.ar-footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ar-sr-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   BREAKPOINTS UP
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  .ar-topbar-inner { padding: 10px var(--gutter-tablet); min-height: 60px; }
  .ar-hero { padding: 48px 0 64px; }
  .ar-hero-inner { padding: 0 var(--gutter-tablet); gap: 36px; }
  .ar-hero-media { aspect-ratio: 3 / 2; }
  .ar-btn-primary { width: auto; min-width: 280px; }
  .ar-panel { padding: 36px var(--gutter-tablet) 64px; }
  .ar-options { gap: 12px; }
  .ar-footer-inner { padding: 40px var(--gutter-tablet) 48px; }
}

@media (min-width: 1080px) {
  .ar-hero { padding: 64px 0 88px; }
  .ar-hero-inner {
    padding: 0 var(--gutter-desktop);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }
  .ar-hero-copy h1 { font-size: clamp(2.3rem, 3.2vw, 3rem); }
  .ar-hero-media { aspect-ratio: 3 / 2; }
  .ar-panel { padding: 56px 0 88px; }
  .ar-topbar-inner { padding: 10px var(--gutter-desktop); }
  .ar-footer-inner { padding: 48px var(--gutter-desktop) 56px; }
}

@media (min-width: 1280px) {
  .ar-hero-inner { gap: 72px; }
}

/* -------------------------------------------------------------
   REDUCED MOTION — the funnel has no decorative motion, but the
   transitions above are still stood down.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ar-btn, .ar-option, .ar-option-tick, .ar-progress-seg { transition: none; }
}