/* ===========================================================
   OnFinance, Base / Reset / Typography
=========================================================== */

/* ---- Self-hosted variable type ----------------------------
   One family, two files, the full 100-900 weight range plus an
   optical-size axis. Self-hosting removes a render-blocking
   third-party request and cuts the font payload to roughly
   150KB total, which is the eco-design half of the brief.
----------------------------------------------------------- */
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after{ box-sizing: border-box; }

/* The browser's own [hidden] rule lives in the user agent origin, so any
   author rule that sets display beats it. That is how the hero wizard came
   to show its progress rail and its Back link on step one, both of which
   are marked hidden in the markup but carry a display of flex from their
   component rule. Restate it here with enough weight that hidden always
   means hidden. until-found is excluded because that value is meant to
   stay findable and needs content-visibility instead. */
[hidden]:not([hidden="until-found"]){ display: none !important; }
[hidden="until-found"]{ content-visibility: hidden; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
  block-size: 100%;
}

/* Entry animations drift grid tiles in from alternating sides, which briefly
   pushes the right-hand column past the viewport edge and leaves a couple of
   stray pixels of sideways scroll on a phone. Clip rather than hide, because
   overflow: hidden would make this a scroll container and quietly break every
   position: sticky panel on the site. */
html,
body{ overflow-x: clip; }
@media (prefers-reduced-motion: no-preference){
  html:focus-within{ scroll-behavior: smooth; }
}

body{
  margin: 0;
  min-block-size: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01" 1, "cv05" 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video{ display: block; max-inline-size: 100%; block-size: auto; }
img{ font-style: italic; color: var(--ink-500); }

h1, h2, h3, h4{
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
  color: var(--color-text);
}
h1{ font-size: var(--text-4xl); }
h2{ font-size: var(--text-3xl); }
h3{ font-size: var(--text-xl); }
h4{ font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; }

p{ margin: 0 0 var(--space-sm); max-inline-size: 68ch; }
p.lede{ font-size: var(--text-md); color: var(--color-text-muted); max-inline-size: 52ch; }
p:last-child{ margin-block-end: 0; }
ul, ol{ padding-inline-start: 1.2em; margin: 0 0 var(--space-sm); }
small, .text-sm{ font-size: var(--text-sm); }

a{ color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; }
a:not([class]){ color: var(--brand-red-600); }
a:not([class]):hover{ color: var(--brand-red-700); }

strong{ font-weight: 700; }

/* ---- Focus ---- */
:focus{ outline: none; }
:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible{ outline-offset: 4px; }

/* ---- Selection ---- */
::selection{ background: var(--brand-red-100); color: var(--brand-red-900); }

/* ---- Skip link ---- */
.skip-link{
  position: fixed;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 1000;
  background: var(--ink-950);
  color: #fff;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out-quart);
}
.skip-link:focus{ transform: translateY(0); }

/* ---- Layout helpers ---- */
.container{
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow{ max-inline-size: var(--content-narrow); }
.section{ padding-block: var(--space-2xl); }
.section--tight{ padding-block: var(--space-xl); }
.section-head{ max-inline-size: 46rem; margin-block-end: var(--space-lg); }
.section-head.center{ margin-inline: auto; text-align: center; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-red-600);
  margin-block-end: var(--space-xs);
}
.eyebrow::before{
  content: "";
  inline-size: 1.6em;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.stack{ display: flex; flex-direction: column; }
.cluster{ display: flex; flex-wrap: wrap; align-items: center; }

/* ---- Buttons ---- */
.btn{
  --btn-bg: var(--brand-red-500);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1;
  padding: 1em 1.6em;
  min-block-size: var(--tap-min);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-fast) var(--ease-out-quart),
              background-color var(--duration-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-sm);
  touch-action: manipulation;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active{ transform: translateY(0); }
.btn svg{ inline-size: 1.15em; block-size: 1.15em; flex: none; }

.btn--primary{ --btn-bg: var(--brand-red-500); --btn-fg: #fff; }
.btn--primary:hover{ --btn-bg: var(--brand-red-600); }

.btn--dark{ --btn-bg: var(--ink-950); --btn-fg: #fff; }
.btn--dark:hover{ --btn-bg: var(--ink-800); }

.btn--ghost{
  --btn-bg: transparent; --btn-fg: var(--color-text);
  border-color: var(--color-border-strong);
  box-shadow: none;
}
.btn--ghost:hover{ background: var(--ink-050); box-shadow: none; }
.on-dark .btn--ghost{ border-color: var(--color-border-strong); }
.on-dark .btn--ghost:hover{ background: rgba(255,255,255,0.08); }

.btn--phone{ --btn-bg: var(--brand-navy-900); --btn-fg: #fff; }
.btn--phone:hover{ --btn-bg: var(--brand-navy-700); }

.btn--sm{ padding: 0.7em 1.2em; font-size: var(--text-sm); min-block-size: 38px; }
.btn--block{ inline-size: 100%; }

.btn-link{
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; color: var(--brand-red-600);
  text-decoration: none; background: none; border: none; padding: 0; cursor: pointer;
  min-block-size: var(--tap-min);
}
/* ---- Inline icon safety net -------------------------------------
   An inline <svg> that has a viewBox but no width or height attribute
   and no CSS size falls back to the CSS default replaced-element size,
   which is 300x150. Not small, not proportional, just 300x150.

   Three separate icons on this site had no sizing rule of their own and
   were rendering at that size: the plus on every FAQ accordion, an arrow
   inside a text link on the contact page, and the warning triangle in
   form validation messages, which only ever appeared at the moment a
   visitor got something wrong.

   This gives every unsized inline icon a sane 1em default. It is wrapped
   in :where() so it carries zero specificity, which means every existing
   rule that sets a real size still wins, and it cannot fight anything.
   New icons added later are covered automatically. */
svg:where(:not([width]):not([height])){
  inline-size: 1em;
  block-size: 1em;
}

.btn-link svg{ inline-size: 1em; block-size: 1em; transition: transform var(--duration-fast) var(--ease-out-quart); }
.btn-link:hover svg{ transform: translateX(3px); }

/* ---- Cards / surfaces ---- */
.surface{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

hr{ border: none; border-block-start: 1px solid var(--color-border); margin: var(--space-lg) 0; }

/* ---- Utility ---- */
.text-muted{ color: var(--color-text-muted); }
.text-center{ text-align: center; }
.mt-0{ margin-block-start: 0; }