/* =============================================================
   Forward Finance — shared site chrome
   Used by every standalone page in pages/. Link order:
       fonts.css → tokens.css → site.css → <page>.css

   Holds the parts that must look identical on every page: reset,
   container, type helpers, buttons, announcement bar, nav (incl.
   the mobile burger), hero shell, section shells, closing CTA band
   and footer — plus their responsive behaviour.

   NOTE: index.html carries its own inline copy of these components
   because its stylesheet lives inside a bundler payload and cannot
   be linked out. Change the footer or nav here and you must mirror
   it in index.html (see the project memory note).

   Breakpoints: 1024px / 900px / 768px / 480px
   ============================================================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--fw-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p { margin: 0; }
/* ol included deliberately: every numbered list on the site draws its own
   marker (see .pmodal-steps), so leaving the native one on double-numbers it */
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.tnum { font-variant-numeric: tabular-nums; }


/* -------------------------------------------------------------
   Type helpers
   ------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow.on-dark { color: var(--ff-gold-bright); }

/* Gold underline device — sits behind the text.
   A hand-drawn-style curve rather than a straight bar: the SVG is a filled
   band (not a stroke) whose top and bottom edges are matched quadratic
   curves, so it keeps an even thickness when stretched to any word width.
   preserveAspectRatio="none" lets it stretch; the gold is hardcoded because
   a data URI cannot read CSS custom properties. */
/* z-index:0 gives .u-gold its own stacking context so the ::after below
   stays behind the glyphs without dropping beneath an ancestor background
   (it vanished on .bg-bone sections otherwise). */
.u-gold { position: relative; z-index: 0; white-space: nowrap; }
.u-gold::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* Scaling the box scales the whole drawing, so the stroke thins and the curve
     eases off together: 0.20em box -> ~0.11em of visible ink. The offset keeps
     the straight run sitting where it did. */
  bottom: -0.01em;
  height: 0.20em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6.2' preserveAspectRatio='none'%3E%3Cpath d='M1.75 2.7Q25 0 48 0Q75 0 98.25 1.35A1.75 1.75 0 0 1 98.25 4.85Q75 3.5 48 3.5Q25 3.5 1.75 6.2A1.75 1.75 0 0 1 1.75 2.7Z' fill='%23E5AD43'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
  z-index: -1;
}


/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  border-radius: 12px;
  padding: 15px 26px;
  border: 1px solid transparent;
  transition: all .22s var(--ease-forward);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--fw-blue); color: #fff; }
.btn-primary:hover { background: var(--fw-blue-deep); }
.btn-ghost { color: var(--fg-1); border-color: var(--border-1); }
.btn-ghost:hover { background: var(--neutral-50); }
.btn-ghost-dark { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.08); }


/* -------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------- */
.announce {
  background: var(--fw-black);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.announce b { color: var(--ff-gold-bright); font-weight: 600; }


/* -------------------------------------------------------------
   Nav — dark surface, burger below 768px
   ------------------------------------------------------------- */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 30px; display: block; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 15px;
  font-weight: 400;
  color: var(--fg-2);
  transition: color .18s;
}
.nav-links a:hover { color: var(--fg-1); }
/* gold-deep, not gold-bright: the bright tone is for dark surfaces and fails
   contrast on this light hero */
.nav-links a.on { color: var(--accent-strong); font-weight: 500; }

.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-login { font-size: 15px; color: var(--fg-2); }
.nav-login:hover { color: var(--fg-1); }
.nav-cta { padding: 12px 22px; font-size: 15px; }

/* `display: contents` dissolves the wrapper on desktop so the nav's
   flex children stay  logo | links | right. Below 768px it becomes a
   real box and turns into the drop panel. */
.nav-collapse { display: contents; }

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: -8px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--fg-1);
}
.nav-burger svg { width: 24px; height: 24px; display: block; }
.nav-burger .ico-close { display: none; }
.nav.open .nav-burger .ico-open { display: none; }
.nav.open .nav-burger .ico-close { display: block; }


/* -------------------------------------------------------------
   Sticky header — clear over the hero, frosted once scrolled
   The nav lives in this wrapper (a direct child of <body>) instead of
   inside .hero, because .hero sets overflow: hidden and an ancestor
   with overflow: hidden disables position: sticky on its descendants.
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease-forward),
              border-color .3s var(--ease-forward),
              box-shadow .3s var(--ease-forward);
}

/* .is-stuck is toggled from JS as soon as the page leaves the top.
   backdrop-filter only shows through a translucent background, so the
   alpha on that background is doing half the work here. */
.site-header.is-stuck {
  background: rgba(247, 250, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom-color: rgba(16, 24, 32, 0.08);
  box-shadow: 0 6px 24px rgba(16, 24, 32, 0.06);
}

/* no backdrop-filter support: go near-opaque, otherwise the nav links
   sit unreadably on top of whatever content is scrolling under them */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: rgba(247, 250, 255, 0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}


/* -------------------------------------------------------------
   Hero shell — LIGHT surface, matching index.html's light hero
   (same gradient), so all three pages share one theme.
   ------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(to top, #DDEBFF 0%, #EAF3FF 38%, #F8FBFF 100%);
  color: var(--fg-1);
  overflow: hidden;
  /* The nav used to live inside this box. Pulling the hero up by the header's
     height keeps the gradient running to the top of the page (so the clear
     header sits on it, and the frosted one blurs it), and the matching
     padding puts the hero content back exactly where it was. */
  margin-top: -76px;
  padding-top: 76px;
}

/* shared two-column hero body */
.phero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  /* Start, not center: the RBI badge sits at a fixed offset from the nav
     on About, Products and Contact, so it does not jump when switching pages. */
  align-items: start;
  padding: 56px 0 96px;
}
/* One ramp for every .phero page, and it matches .doc-head h1 on the legal
   pages, so the site has a single inner-page headline size. 52px rather than
   the old 68px because it has to hold About's long headline inside the shared
   column; at 68px that page needed its own type scale and its own grid split,
   which is what put the pages out of step in the first place. */
.phero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 52px);
  /* 1.05 was tuned for a 68px single line; at 52px over two or three lines
     the rows sit too tight. */
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 18px;
}
.phero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 520px;
  margin-top: 22px;
}

.badge-rbi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 7px 14px 7px 12px;
  margin-bottom: 26px;
}
.badge-rbi svg { width: 15px; height: 15px; color: var(--ff-gold-deep); }

/* bullet list with a coloured accent bar per row */
.asset-list { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.asset-list li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-2);
}
.asset-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--ff-gold);
}
.asset-list li:nth-child(2)::before { background: var(--fw-blue); }
.asset-list li:nth-child(3)::before { background: var(--neutral-500); }
.asset-list b { color: var(--fg-1); font-weight: 600; }


/* -------------------------------------------------------------
   Section shells
   ------------------------------------------------------------- */
section { scroll-margin-top: 96px; }   /* clears the sticky header */
.sec { padding: 104px 0; }
.bg-bone { background: var(--neutral-50); }

.sec-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 14px;
}
.sec-head p { font-size: 18px; line-height: 1.6; color: var(--fg-2); margin-top: 18px; }


/* -------------------------------------------------------------
   Closing CTA band
   ------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--fw-black);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  left: 50%;
  top: -320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 99, 255, 0.3), rgba(0, 99, 255, 0) 60%);
}
.cta-inner { position: relative; z-index: 2; padding: 104px 0; }
.cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.cta p { font-size: 18px; color: rgba(255, 255, 255, 0.68); margin-top: 20px; }
.hero-cta { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 36px; }


/* -------------------------------------------------------------
   Footer — same structure as index.html
   ------------------------------------------------------------- */
.footer {
  background: var(--fw-black);
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 48px;
}
.footer-logo { height: 28px; display: block; }
.footer h5 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-bottom: 18px;
}
.footer a { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.68); padding: 6px 0; }
.footer a:hover { color: #fff; }
.footer .blurb { font-size: 14px; line-height: 1.6; max-width: 300px; margin-top: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}
.fb-links { display: flex; gap: 22px; }
.fb-links a { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }

.disclaimer-cards { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 4px; }
.dcard-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-bottom: 2px;
}
.dcard { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
.dcard svg { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.32); flex-shrink: 0; margin-top: 2px; }
.dcard p { font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.42); }
.disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.38);
}


/* =============================================================
   ≤1024px — tablet
   ============================================================= */
@media (max-width: 1024px) {
  .wrap { padding: 0 24px; }
  .sec { padding: 80px 0; }
  .sec-head { margin-bottom: 44px; }

  .phero { gap: 40px; padding: 44px 0 76px; }
  .hero-chevron { font-size: 400px; right: -60px; top: 60px; }

  .nav-links { gap: 22px; }
  .nav-links a, .nav-login { font-size: 14.5px; }

  .cta-inner { padding: 80px 0; }
}


/* =============================================================
   ≤900px — hero stacks
   ============================================================= */
@media (max-width: 900px) {
  .phero { grid-template-columns: 1fr; gap: 40px; padding: 36px 0 64px; }
  .phero-sub { max-width: none; }
}


/* =============================================================
   ≤768px — phone
   ============================================================= */
@media (max-width: 768px) {
  html { overflow-x: hidden; }
  .wrap { padding: 0 20px; }

  /* announce bar: fixed height → wraps */
  .announce {
    height: auto;
    padding: 9px 18px;
    font-size: 12px;
    line-height: 1.45;
    flex-wrap: wrap;
    text-align: center;
    gap: 6px;
  }

  /* ---- nav → burger + drop panel ---- */
  .nav { height: var(--nav-h-mobile); }
  .hero {
    margin-top: calc(-1 * var(--nav-h-mobile));
    padding-top: var(--nav-h-mobile);
  }
  .nav-burger { display: inline-flex; }

  .nav-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 8px 16px 16px;
    background: #fff;
    border: 1px solid var(--border-1);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--shadow-3);
  }
  .nav.open .nav-collapse { display: block; }

  .nav-collapse .nav-links,
  .nav-collapse .nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a, .nav-login { font-size: 16px; padding: 13px 4px; }
  .nav-right {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-1);
  }
  .nav-cta { justify-content: center; margin-top: 10px; padding: 14px 22px; font-size: 16px; }

  /* ---- hero ---- */
  .cta-glow { width: 460px; height: 460px; top: -230px; }

  .phero { padding: 30px 0 52px; gap: 34px; }
  .badge-rbi { font-size: 11.5px; margin-bottom: 20px; }
  .phero h1 { font-size: clamp(31px, 8.4vw, 44px); margin-top: 14px; }
  .phero-sub { font-size: 16.5px; margin-top: 18px; }

  .asset-list { margin-top: 26px; gap: 13px; }
  .asset-list li { font-size: 15px; }

  /* ---- sections ---- */
  .sec { padding: 56px 0; }
  .sec-head { margin-bottom: 32px; max-width: none; }
  .sec-head p { font-size: 15.5px; margin-top: 12px; }

  /* ---- CTA band ---- */
  .cta-inner { padding: 60px 0; }
  .cta p { font-size: 16px; margin-top: 14px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
  .hero-cta .btn { justify-content: center; width: 100%; }

  /* ---- footer ---- */
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 44px 0 32px; }
  .footer .blurb { max-width: none; }
  .footer a { padding: 9px 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fb-links { flex-wrap: wrap; gap: 18px; }
}


/* =============================================================
   ≤480px — small phone
   ============================================================= */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .announce { font-size: 11.5px; padding: 8px 14px; }

  .phero h1 { font-size: clamp(27px, 8.2vw, 34px); }
  .phero-sub { font-size: 15.5px; }
  .asset-list li { font-size: 14.5px; }

  .sec { padding: 46px 0; }
  .cta-inner { padding: 48px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { font-size: 12px; }
}