/* ==========================================================================
   Brightrate — main site styles
   --------------------------------------------------------------------------
   Everything the multi-page site adds on top of components.css (which holds
   the pieces shared with the ad landing pages: quiz, buttons, FAQ, footer...).
   All values come from tokens.css.

   Contents
     1. Skip link
     2. Header navigation (desktop + mobile menu)
     3. Landing-page header variant
     4. Section headings
     5. Home hero + "What can we help with?" picker
     6. Product cards
     7. Bank vs broker table
     8. "How we make money" panel
     9. Guide cards (Learn)
    10. Article pages (guides)
    11. Page intro (About, Contact, Learn)
    12. Contact page
    13. Not found (404)
   ========================================================================== */


/* 1. Skip link ------------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 20;
  padding: var(--space-2) var(--space-4);
  background: var(--ink); color: var(--on-spruce);
  border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }


/* 2. Header navigation ----------------------------------------------------- */
/* Desktop (≥ 960px): links inline + CTA. Phones/tablets: a menu button opens
   a panel under the header. JS: assets/js/site.js toggles .is-menu-open. */
.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__list { display: none; }
.site-nav__list a { color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.site-nav__list a:not(.btn):hover { color: var(--spruce); }
.site-nav__list a[aria-current="page"] { color: var(--spruce); box-shadow: inset 0 -2px 0 var(--sun); }
.site-nav__menu-cta { display: none; }

.site-nav__toggle {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.site-nav__toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.is-menu-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-menu-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
.is-menu-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 959px) {
  .site-nav__cta { display: none; }
  .is-menu-open .site-nav__list {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; gap: var(--space-1);
    padding: var(--space-4) var(--space-4) var(--space-6);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(15, 39, 37, .35);
  }
  .is-menu-open .site-nav__list a:not(.btn) { display: block; padding: var(--space-3) var(--space-2); font-size: 1.0625rem; border-radius: var(--radius-sm); }
  .is-menu-open .site-nav__list a[aria-current="page"] { box-shadow: none; background: var(--spruce-soft); }
  .is-menu-open .site-nav__menu-cta { display: block; margin-top: var(--space-2); }
  .is-menu-open.site-header { background: var(--surface-raised); }
}
@media (min-width: 960px) {
  .site-nav { gap: var(--space-8); }
  .site-nav__list { display: flex; gap: var(--space-6); align-items: center; }
  .site-nav__list a { padding-block: var(--space-2); }
  .site-nav__toggle { display: none; }
}


/* Footer: five columns on the main site (about + four link groups). */
@media (min-width: 960px) { .site-footer__grid--5 { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.site-footer__email { color: var(--sun); text-decoration: none; font-weight: 600; }
.site-footer__email:hover { text-decoration: underline; }


/* 3. Landing-page header variant ------------------------------------------- */
/* Logo isn't a link; only the CTA remains. */
.site-header--landing .brand { cursor: default; }
.site-footer--landing { padding-block: var(--space-8); }
.site-footer--landing .site-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.site-footer--landing a { color: var(--footer-text); }
.site-footer--landing a:hover { color: var(--on-spruce); }


/* 4. Section headings ------------------------------------------------------ */
.section-head { max-width: 680px; }
.section-head > * + * { margin-top: var(--space-3); }
.section-head p { color: var(--ink-muted); font-size: var(--text-lead); line-height: 1.55; }
.section-head--center { margin-inline: auto; text-align: center; }


/* 5. Home hero + picker ---------------------------------------------------- */
/* The sunrise from the logo, drawn as soft concentric arcs behind the picker. */
.home-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-12);
  isolation: isolate;
}
.home-hero::before {
  content: "";
  position: absolute; z-index: -1;
  right: -260px; bottom: -420px;
  width: 1100px; height: 1100px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--sun-soft) 0 22%, transparent 22.2%),
    repeating-radial-gradient(circle, transparent 0 7.6%, rgba(15, 76, 69, .07) 7.7% 7.9%, transparent 8%),
    radial-gradient(circle, var(--spruce-soft) 0 60%, transparent 60.2%);
  pointer-events: none;
}
.home-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.home-hero__copy { min-width: 0; }
.home-hero__copy > * + * { margin-top: var(--space-4); }
.home-hero__copy h1 { max-width: 13ch; }
.home-hero__copy .hero__points { margin-top: var(--space-6); }
@media (min-width: 960px) {
  .home-hero { padding-block: var(--space-20) var(--space-20); }
  .home-hero__grid { grid-template-columns: 1fr 480px; gap: var(--space-12); }
}

.picker {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(15, 39, 37, .35);
  scroll-margin-top: 96px;
}
@media (min-width: 720px) { .picker { padding: var(--space-8); } }
.picker__step { font-size: var(--text-label); color: var(--ink-muted); }
.picker h2 { font-size: 1.625rem; margin-top: var(--space-1); }
.picker__list { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.picker__option {
  display: grid; grid-template-columns: 44px 1fr 20px; gap: var(--space-4); align-items: center;
  padding: var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.picker__option:hover { border-color: var(--spruce); }
.picker__option:hover .picker__arrow { transform: translateX(3px); color: var(--spruce); }
.picker__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--spruce-soft); color: var(--spruce); }
.picker__icon svg { width: 24px; height: 24px; }
.picker__text { display: grid; gap: 2px; min-width: 0; }
.picker__title { font-weight: 700; font-size: 1.0625rem; }
.picker__sub { font-size: var(--text-label); color: var(--ink-muted); line-height: 1.4; }
.picker__arrow { width: 20px; height: 20px; color: var(--ink-muted); transition: transform .15s ease, color .15s ease; }
.picker__foot { margin-top: var(--space-4); font-size: var(--text-label); color: var(--ink-muted); }

/* Gentle page-load reveal for the hero (skipped with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .home-hero__copy > *, .picker { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .home-hero__copy > :nth-child(2) { animation-delay: .06s; }
  .home-hero__copy > :nth-child(3) { animation-delay: .12s; }
  .home-hero__copy > :nth-child(4) { animation-delay: .18s; }
  .picker { animation-delay: .15s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }


/* 6. Product cards --------------------------------------------------------- */
.products { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 900px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  min-width: 0;
  padding: var(--space-6);
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
}
.product-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sun); color: var(--on-sun); }
.product-card__icon svg { width: 26px; height: 26px; }
.product-card h3 { font-size: var(--text-h2); }
.product-card > p { color: var(--ink-muted); }
.product-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.product-card li { display: flex; gap: var(--space-2); font-size: 0.9375rem; }
.product-card li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--spruce); }
.product-card__link { margin-top: auto; padding-top: var(--space-2); font-weight: 700; color: var(--spruce); text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: center; }
.product-card__link svg { width: 18px; height: 18px; transition: transform .15s ease; }
.product-card__link:hover svg { transform: translateX(3px); }


/* 7. Bank vs broker table -------------------------------------------------- */
.compare-wrap { margin-top: var(--space-8); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.compare th, .compare td { padding: var(--space-4) var(--space-6); vertical-align: top; }
.compare thead th { font-size: var(--text-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.compare thead th.compare__us { color: var(--spruce); }
.compare tbody th { font-weight: 600; width: 28%; }
.compare tbody tr + tr > * { border-top: 1px solid var(--line); }
.compare td { color: var(--ink-muted); }
.compare td.compare__us { color: var(--ink); background: rgba(220, 239, 234, .45); font-weight: 500; }


/* 8. "How we make money" panel --------------------------------------------- */
.money {
  display: grid; gap: var(--space-8);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--on-spruce);
}
@media (min-width: 900px) { .money { grid-template-columns: 1fr 1fr; padding: var(--space-12); align-items: center; } }
.money .eyebrow { color: var(--sun); }
.money h2 { color: var(--on-spruce); margin-top: var(--space-2); }
.money p { color: rgba(255, 255, 255, .78); margin-top: var(--space-3); }
.money a { color: var(--sun); font-weight: 600; }
.money__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.money__facts li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; }
.money__facts svg { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--sun); }
.money__facts strong { display: block; color: var(--on-spruce); }
.money__facts span { color: rgba(255, 255, 255, .72); font-size: 0.9375rem; }


/* 9. Guide cards ----------------------------------------------------------- */
.guides { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 900px) { .guides { grid-template-columns: repeat(3, 1fr); } }
.guide-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.guide-card:hover { border-color: var(--spruce); transform: translateY(-2px); }
/* Animated illustration on top of the card (assets/img/learn/*.svg), edge to edge. */
.guide-card { overflow: hidden; }
.guide-card__media {
  /* 2:1 crop of the 16:9 artwork: trims empty space above and below the drawing. */
  width: calc(100% + 2 * var(--space-6));
  max-width: none;
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-6)) var(--space-2);
  border-bottom: 1px solid var(--line);
  background: var(--spruce-soft);
}
.guide-card__tag { font-size: var(--text-fine); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--spruce); }
.guide-card h3 { font-size: 1.1875rem; line-height: 1.25; }
.guide-card p { color: var(--ink-muted); }
.guide-card p { font-size: 0.9375rem; line-height: 1.5; }
.guide-card__meta { margin-top: auto; padding-top: var(--space-1); font-size: var(--text-label); color: var(--ink-muted); }


/* 10. Article pages -------------------------------------------------------- */
.article { padding-block: var(--space-8) var(--space-12); }
.article__grid { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .article__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-12); align-items: start; } }
.breadcrumbs { font-size: var(--text-label); color: var(--ink-muted); }
.breadcrumbs a { color: var(--ink-muted); }
.article__header { max-width: 760px; }
.article__header > * + * { margin-top: var(--space-4); }
.article__header h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.article__meta { font-size: var(--text-label); color: var(--ink-muted); }

/* Guide illustration under the title. Animations live inside the SVG files and
   stop automatically for people who prefer reduced motion. */
.article__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.article__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.takeaways { padding: var(--space-6); border-radius: var(--radius-md); background: var(--sun-soft); }
.takeaways h2 { font-size: 1.125rem; font-family: var(--font-sans); }
.takeaways ul { margin: var(--space-3) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }

.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-h2); margin-top: var(--space-12); }
.prose h3 { font-size: 1.1875rem; margin-top: var(--space-8); font-family: var(--font-sans); }
.prose p, .prose li { color: #2E413E; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--space-2); }
.prose .note { padding: var(--space-4) var(--space-6); border-left: 4px solid var(--spruce); background: var(--surface-raised); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 700; }
.prose .table-wrap { overflow-x: auto; }

.article__aside { display: grid; gap: var(--space-4); }
@media (min-width: 1000px) { .article__aside { position: sticky; top: 96px; } }
.aside-cta { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--spruce); color: var(--on-spruce); }
.aside-cta h2 { font-size: 1.375rem; color: var(--on-spruce); }
.aside-cta p { margin: var(--space-2) 0 var(--space-4); color: rgba(255, 255, 255, .82); }
.aside-related { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.aside-related h2 { font-size: 1rem; font-family: var(--font-sans); }
.aside-related ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.article__disclaimer { margin-top: var(--space-12); max-width: 70ch; }


/* 11. Page intro ----------------------------------------------------------- */
.page-intro { padding-block: var(--space-12) var(--space-8); }
.page-intro > .container > * + * { margin-top: var(--space-4); }
.page-intro h1 { max-width: 18ch; }
.page-intro .lead { max-width: 60ch; }

.split { display: grid; gap: var(--space-8); margin-top: var(--space-3); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } }
.split > * { min-width: 0; }
.split h2 { font-size: var(--text-h1); }
.split p { color: var(--ink-muted); margin-top: var(--space-3); }

.is-isnt { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 720px) { .is-isnt { grid-template-columns: 1fr 1fr; } }
.is-isnt__col { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.is-isnt__col h3 { font-size: 1.1875rem; }
.is-isnt__col ul { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.is-isnt__col li { display: flex; gap: var(--space-3); }
.is-isnt__col svg { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.is-isnt__col--yes svg { color: var(--positive); }
.is-isnt__col--no svg { color: var(--danger); }


/* 12. Contact page --------------------------------------------------------- */
.contact { display: grid; gap: var(--space-8); padding-bottom: var(--space-12); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 560px; gap: var(--space-12); align-items: start; } }
.contact__info { min-width: 0; display: grid; gap: var(--space-6); }
.contact__item h2 { font-size: 1.125rem; font-family: var(--font-sans); }
.contact__item p { color: var(--ink-muted); margin-top: var(--space-1); }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form textarea { min-height: 140px; resize: vertical; font: inherit; }
.contact-form__success { text-align: center; padding: var(--space-8) var(--space-4); }
.contact-form__success h2 { font-size: var(--text-h2); margin-top: var(--space-4); }
.contact-form__success p { color: var(--ink-muted); margin-top: var(--space-2); }


/* 13. Not found ------------------------------------------------------------ */
.not-found { padding-block: var(--space-20); text-align: center; }
.not-found__code { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--spruce); }
.not-found p { color: var(--ink-muted); margin: var(--space-4) auto var(--space-6); max-width: 46ch; }
.not-found__links { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }


/* 14. Small helpers --------------------------------------------------------- */
.band__more { margin-top: var(--space-6); color: var(--ink-muted); }
.band__more a { font-weight: 600; }
.section--flush-top { padding-top: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.btn--on-dark { background: transparent; color: var(--on-spruce); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.btn--on-dark:hover { box-shadow: inset 0 0 0 2px var(--on-spruce); }


/* 15. Learn hub groups ------------------------------------------------------ */
.learn-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.learn-jump a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink); font-weight: 600; font-size: var(--text-label); text-decoration: none;
}
.learn-jump a:hover { border-color: var(--spruce); color: var(--spruce); }
.learn-group { padding-bottom: var(--space-12); }
.learn-group__title { font-size: var(--text-h2); scroll-margin-top: 96px; }
.learn-group .guides { margin-top: var(--space-4); }


/* 16. Legal pages (privacy, terms) ----------------------------------------- */
.legal-hero {
  padding-block: var(--space-12);
  background: var(--spruce-soft);
  border-bottom: 1px solid var(--line);
}
.legal-hero .container > * + * { margin-top: var(--space-4); }
.legal-hero .lead { max-width: 60ch; }
.legal-hero__summary {
  display: flex; gap: var(--space-3); align-items: flex-start;
  max-width: 720px;
  padding: var(--space-4) var(--space-6);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}
.legal-hero__summary svg { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--spruce); }
.legal-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-label); color: var(--ink-muted); }

.legal { display: grid; gap: var(--space-8); padding-block: var(--space-12); }
@media (min-width: 1000px) { .legal { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-12); align-items: start; } }
.legal__toc { min-width: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
@media (min-width: 1000px) { .legal__toc { position: sticky; top: 96px; } }
.legal__toc h2 { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.legal__toc ol { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.legal__toc a { color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.legal__toc a:hover { color: var(--spruce); text-decoration: underline; }
.legal__body h2 { scroll-margin-top: 96px; }
.legal__body > h2:first-child { margin-top: 0; }

/* Learn hub: four cards per row on wide screens, and a wide "Start here" card. */
@media (min-width: 640px) and (max-width: 899px) { .guides--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .guides--4 { grid-template-columns: repeat(4, 1fr); } }
.guide-card--featured { padding: 0; }
.guide-card--featured .guide-card__media { width: 100%; margin: 0; border-bottom: 1px solid var(--line); }
.guide-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.guide-card--featured h2 { font-size: var(--text-h2); }
@media (min-width: 800px) {
  .guide-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .guide-card--featured .guide-card__media { height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
  .guide-card__body { padding: var(--space-8); }
}