/* ===========================================================================
   ROMOTANA — site stylesheet
   ===========================================================================

   Direction: SPREAD. The site reads as a publication rather than a brochure.
   The association files comments on federal rulemaking and reads registers its
   members cannot; that is a body of record, and bodies of record read like
   publications. Full rationale in docs/design-spread.md.

   The three rules that keep it coherent:

     1. Serif talks, sans signposts. Source Serif 4 carries every word meant to
        be read; Archivo carries navigation, labels, tables, forms and figures.
        A serif label reads as decoration; a sans headline throws away the one
        thing that makes this distinct.
     2. Hairlines, not shadows. Structure comes from rules and space. Nothing
        floats, almost nothing is rounded.
     3. One accent per page. Red marks the action, blue marks reference, and
        the tricolour appears once, as a rule, never as decoration.

   Class names are unchanged from the previous stylesheet so every existing
   template keeps working; what changed is what they look like.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
/* Self-hosted: the Content-Security-Policy allows fonts from this origin only.
   latin-ext is required, not an optimisation — Romanian's comma-below
   characters (ș U+0219, ț U+021B) live there. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800;
  font-stretch: 75% 125%; font-display: swap;
  src: url('/assets/fonts/archivo-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800;
  font-stretch: 75% 125%; font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/sourceserif-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/sourceserif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
  --paper:      #fcfbf8;
  --paper-2:    #f6f4ee;
  --white:      #ffffff;
  --ink:        #131519;
  --ink-2:      #3b3f47;   /* body — 10.2:1 on paper */
  --ink-3:      #61666f;   /* captions — 5.6:1 */
  --rule:       #ddd9d0;
  --rule-firm:  #bdb8ab;

  --blue:       #0b3a8f;
  --blue-deep:  #072a63;
  --yellow:     #fcd116;
  --red:        #c3122a;
  --red-deep:   #a20f21;
  --ok:         #146c3a;

  --ok-bg:      #e6f2ea;  --ok-fg:  #0f5a30;
  --err-bg:     #fbeaec;  --err-fg: #9d1020;
  --warn-bg:    #fdf3d6;  --warn-fg:#7a5c00;
  --info-bg:    #e8eef8;  --info-fg:#0b3a8f;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font:  var(--serif);

  --step--2: 0.76rem;
  --step--1: clamp(0.86rem, 0.84rem + 0.1vw, 0.92rem);
  --step-0:  clamp(1.06rem, 1.02rem + 0.2vw, 1.14rem);
  --step-1:  clamp(1.24rem, 1.16rem + 0.4vw, 1.46rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.78vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.45vw, 2.6rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2.5vw, 3.6rem);
  --step-5:  clamp(2.9rem, 1.9rem + 4.9vw, 5.6rem);

  --container: 74rem;
  --gutter: clamp(1.15rem, 5vw, 3rem);
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4, h5 { font-size: var(--step-0); }

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
li { margin-bottom: 0.4rem; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--red); }

hr, .rule { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

::selection { background: var(--yellow); color: var(--ink); }

/* -------------------------------------------------------------- structure -- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--mid { max-width: 60rem; }
.container--narrow { max-width: 46rem; }
.measure { max-width: 62ch; }
.measure-wide { max-width: 74ch; }
.stack > * + * { margin-top: 1.05rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem;
  font-family: var(--sans); font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.center { text-align: center; }
.text-muted { color: var(--ink-3); }
.text-small { font-size: var(--step--1); }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.num, .stat__value, .price-card__amount { font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------------ chrome -- */
/* The topbar is the publication's standing line: contact details and social,
   set small in the sans above the masthead rule. */
.topbar {
  background: var(--ink); color: #b8bcc4;
  font-family: var(--sans); font-size: var(--step--2);
}
.topbar .container { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 0.5rem; }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.topbar a { color: #e4e7eb; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__social { display: flex; gap: 0.75rem; align-items: center; }
.topbar__social a { display: inline-flex; }
.topbar__social svg { width: 1rem; height: 1rem; fill: currentColor; }

.site-header {
  background: rgb(252 251 248 / 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.site-header .container { display: flex; align-items: center; gap: 1.25rem; padding-block: 0.85rem; }
.site-header .brand { margin-right: auto; }

.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); }
.brand img { height: 2.5rem; width: auto; }
.brand__name {
  display: block; font-family: var(--sans); font-weight: 800;
  font-size: 1.25rem; letter-spacing: -0.04em; font-stretch: 112%; color: var(--ink);
}
.brand__sub { display: block; font-family: var(--sans); font-size: var(--step--2); color: var(--ink-3); }

.nav { display: flex; gap: 1.4rem; align-items: center; font-family: var(--sans); }
.nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: var(--step--1); font-weight: 600; padding-block: 0.3rem;
}
.nav a:hover { color: var(--blue); }
.nav a[aria-current] { color: var(--ink); box-shadow: 0 2px 0 var(--red); }

/* The masthead's subscription flash.
   A publication does not put a solid pill in its masthead; it prints what a
   subscription costs and lets the price do the selling. This is the site's
   one differentiator — almost nobody in this industry publishes a price — so
   the number is the second line rather than being hidden behind a click.
   It sits outside .nav so it stays visible when the menu collapses. */
.join {
  display: inline-grid; gap: 0;
  padding: 0.34rem 0.8rem;
  border-left: 3px solid var(--red);
  background: var(--paper-2);
  font-family: var(--sans); line-height: 1.2;
  text-decoration: none; color: var(--ink);
  transition: background-color .14s ease, color .14s ease;
}
.join b { font-size: var(--step--1); font-weight: 800; letter-spacing: -0.01em; }
.join span { font-size: var(--step--2); font-weight: 500; color: var(--ink-3); }
.join:hover { background: var(--red); color: #fff; }
.join:hover span { color: #ffdde1; }

.nav-toggle {
  display: none; font: inherit; font-family: var(--sans); font-weight: 700;
  font-size: var(--step--1); align-items: center; gap: 0.5rem;
  background: transparent; border: 1px solid var(--rule-firm); border-radius: var(--radius);
  padding: 0.5rem 0.8rem; color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { width: 1rem; height: 2px; background: currentColor; position: relative; display: block; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .site-header .container { gap: 0.6rem; }
  .nav-toggle { order: 3; }
  .join { order: 2; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav[data-open] { display: flex; }
  .nav a { padding-block: 0.7rem; border-bottom: 1px solid var(--rule); }
  .site-header .container { position: relative; }
}

/* ---------------------------------------------------------------- sections -- */
.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.section--soft { background: var(--paper-2); border-block: 1px solid var(--rule); }
.section--navy { background: var(--blue-deep); color: #c3d1ea; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: #fff; }
.section--navy .lede, .section--navy p { color: #b8c9e6; }

.section-head { max-width: 48ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 0.75rem; }

/* The kicker above a section title. Set in the sans, in red, because it is a
   navigational label and not something to be read as prose. */
.eyebrow {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 700;
  color: var(--red); margin: 0 0 0.35rem; letter-spacing: 0;
}
.eyebrow--light { color: var(--yellow); }

.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 54ch; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }

/* -------------------------------------------------------------------- hero -- */
/* The cover. On the home page it fills the screen; elsewhere it is a standing
   head, closed by a rule. */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
.hero--compact { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem); }
.hero h1 { font-size: var(--step-5); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; max-width: 16ch; }
.hero--compact h1 { font-size: var(--step-4); line-height: 1.02; max-width: 20ch; }
.hero__lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: end; }
.hero--compact .hero__lead { grid-template-columns: 1fr; align-items: start; }
.hero .lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); max-width: 46ch; }
.hero__card { border: 1px solid var(--ink); background: var(--white); padding: clamp(1.1rem, 2.5vw, 1.6rem); }

/* The tricolour, used once per page. It hangs off the container rather than
   the section, so it starts on the text's left edge and not the viewport's. */
.hero .container::after,
.cta-band .container::before {
  content: ""; display: block; height: 5px; max-width: 22rem;
  background: linear-gradient(90deg, var(--blue) 0 33.34%, var(--yellow) 33.34% 66.67%, var(--red) 66.67%);
}
.hero .container::after { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cta-band .container::before { margin-bottom: 1.5rem; }
.hero--compact .container::after { display: none; }

@media (max-width: 60rem) {
  .hero__lead { grid-template-columns: 1fr; align-items: start; }
  .hero h1 { max-width: 20ch; }
}

/* ------------------------------------------------------------------- grids -- */
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 60rem) { .grid--sidebar { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- cards -- */
/* Not cards in the SaaS sense. Bordered blocks, square, no shadow: the shape a
   printed page uses for a boxed aside. */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
}
.card h3 { margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }
.card--accent { border-top-color: var(--blue); }
.card--accent-gold { border-top-color: var(--yellow); }
.card--accent-red { border-top-color: var(--red); }
.card--link { text-decoration: none; color: inherit; display: block; transition: border-color .14s ease; }
.card--link:hover { border-color: var(--rule-firm); border-top-color: var(--red); color: inherit; }
.card--link:hover h3 { color: var(--blue); }

.icon-card__mark {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem; margin-bottom: 0.75rem;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--blue);
}
.icon-card__mark svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.box { border: 1px solid var(--ink); background: var(--paper-2); padding: clamp(1.1rem, 2.5vw, 1.6rem); }

/* ----------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--sans); font-weight: 700; font-size: var(--step--1);
  padding: 0.78rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); color: #fff; }
.btn--navy { background: var(--blue-deep); color: #fff; }
.btn--navy:hover { background: var(--blue); color: #fff; }
.btn--gold { background: var(--yellow); color: var(--ink); }
.btn--gold:hover { background: #e8bf0d; color: var(--ink); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-light { border-color: rgb(255 255 255 / 0.55); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--blue-deep); }
.btn--danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn--danger:hover { background: var(--red); color: #fff; }
.btn--sm { padding: 0.55rem 1rem; font-size: var(--step--2); }
.btn--block { display: flex; width: 100%; }
.btn.is-disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ------------------------------------------------------------------- forms -- */
/* A subscription card. Labels above hairline-underlined inputs; nothing
   rounded, because a rounded input breaks the register immediately. */
.form { font-family: var(--sans); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.25rem; margin-bottom: 1rem; }
.form__row--3 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.field { display: grid; gap: 0.3rem; min-width: 0; }
.field > label { font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.field__req { color: var(--red); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field input[type="number"], .field input[type="search"],
.field input[type="date"], .field input[type="password"], .field select, .field textarea {
  font: inherit; font-family: var(--sans); font-size: var(--step--1);
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0;
  padding: 0.5rem 0; width: 100%;
}
.field textarea { border: 1px solid var(--ink-3); padding: 0.6rem 0.7rem; min-height: 7rem; resize: vertical; }
.field select { border-bottom: 1px solid var(--ink-3); padding-block: 0.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 3px; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); border-bottom-width: 2px; }
.field__hint { font-size: var(--step--2); color: var(--ink-3); }
.field__error { font-size: var(--step--2); color: var(--err-fg); font-weight: 600; }

.checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-family: var(--sans); font-size: var(--step--1); }
.checkbox input { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; flex: 0 0 auto; }

/* Choosing an option reads as ticking a box on a printed form. */
.radio-cards { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.radio-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem;
  align-items: start; padding: 0.9rem 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; font-family: var(--sans);
}
.radio-card input { width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; }
.radio-card b, .radio-card > span > b { color: var(--ink); font-weight: 700; }
.radio-card span span { display: block; font-size: var(--step--2); color: var(--ink-3); margin-top: 0.15rem; }
.radio-card:has(input:checked) { background: var(--paper-2); }
.radio-card:has(input:checked) b { color: var(--blue-deep); }

/* The honeypot. Never shown, never announced. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset > legend { padding: 0; font-family: var(--sans); font-weight: 700; font-size: var(--step--1); color: var(--ink); margin-bottom: 0.5rem; }

/* ------------------------------------------------------------- price cards -- */
.price-card {
  background: var(--white); border: 1px solid var(--rule); border-top: 2px solid var(--ink);
  padding: clamp(1.15rem, 2.5vw, 1.7rem);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.price-card--featured { border-top-color: var(--red); }
.price-card__tag {
  font-family: var(--sans); font-size: var(--step--2); font-weight: 800;
  color: var(--red); letter-spacing: 0.02em;
}
.price-card__amount {
  font-family: var(--sans); font-size: var(--step-3); font-weight: 800;
  color: var(--blue-deep); letter-spacing: -0.035em; line-height: 1;
}
.price-card__amount span { font-size: var(--step--1); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-family: var(--sans); font-size: var(--step--1); }
.price-card li { position: relative; padding-left: 1.05rem; margin: 0; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 2px; background: var(--blue); }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-family: var(--sans); font-size: var(--step--1); }
.check-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.55rem; margin: 0; }
.check-list li::before { content: "\2713"; color: var(--ok); font-weight: 800; }

/* ------------------------------------------------------------ calculator -- */
/* A table set in print rules, like every other table on the site. The figures
   are the point, so they are the only thing set large. */
.calc { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.calc caption {
  text-align: left; font-size: var(--step--2); font-weight: 700;
  color: var(--ink-3); padding-bottom: 0.5rem;
}
.calc th, .calc td { text-align: right; padding: 0.6rem 0 0.6rem 0.75rem; }
.calc thead th {
  font-size: var(--step--2); font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.calc thead th:first-child, .calc tbody th { text-align: left; padding-left: 0; }
.calc tbody th {
  font-weight: 700; color: var(--ink); font-size: var(--step-0);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.calc tbody td {
  border-bottom: 1px solid var(--rule);
  font-weight: 700; color: var(--blue-deep);
  font-size: var(--step-1); letter-spacing: -0.02em;
}
.calc tbody tr:last-child th, .calc tbody tr:last-child td { border-bottom: 2px solid var(--ink); }

/* ------------------------------------------------------------------- meta -- */
.meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-3); }
.meta__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta__item svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }

.badge, .pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: var(--step--2); font-weight: 700;
  padding: 0.22rem 0.55rem; border-radius: var(--radius);
  background: var(--info-bg); color: var(--info-fg);
}
.badge--upcoming { background: var(--ok-bg); color: var(--ok-fg); }
.badge--past { background: var(--paper-2); color: var(--ink-3); }
.pill__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.stat-row > * { padding: 1rem 1.25rem 1rem 0; border-right: 1px solid var(--rule); }
.stat-row > *:last-child { border-right: 0; }
.stat__value {
  display: block; font-family: var(--sans); font-size: var(--step-3); font-weight: 800;
  color: var(--blue-deep); letter-spacing: -0.035em; line-height: 1;
}
.stat__label { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-3); margin-top: 0.3rem; }

.breadcrumb { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-3); margin-bottom: 0.85rem; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--blue); }

.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-family: var(--sans); margin-top: 2rem; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule); text-decoration: none; color: var(--ink-2);
  font-size: var(--step--1); font-weight: 600;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination [aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.alert {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-family: var(--sans); font-size: var(--step--1);
  border: 1px solid var(--rule); border-left: 3px solid var(--ink);
  background: var(--white); padding: 0.9rem 1.1rem; margin-bottom: 1.25rem;
}
.alert__icon { flex: 0 0 auto; }
.alert__icon svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.alert--success { background: var(--ok-bg); border-left-color: var(--ok-fg); color: var(--ok-fg); }
.alert--error { background: var(--err-bg); border-left-color: var(--err-fg); color: var(--err-fg); }
.alert--warning { background: var(--warn-bg); border-left-color: var(--warn-fg); color: var(--warn-fg); }
.alert--info { background: var(--info-bg); border-left-color: var(--info-fg); color: var(--info-fg); }

/* ------------------------------------------------------------------ lists -- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; font-family: var(--sans); font-size: var(--step--1); }
.contact-list li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.8rem; align-items: start; margin: 0; }
.contact-list__mark {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--blue);
}
.contact-list__mark svg { width: 1rem; height: 1rem; fill: currentColor; }

.network-list, .chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; font-family: var(--sans); }
.network-list li, .chip-list li {
  margin: 0; background: var(--white); border: 1px solid var(--rule);
  padding: 0.35rem 0.75rem; font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
}

/* -------------------------------------------------------------- logo wall -- */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.logo-wall__item {
  background: var(--white); display: grid; place-items: center;
  padding: 1rem; min-height: 5rem; text-decoration: none; color: var(--ink-3);
  font-family: var(--sans); font-size: var(--step--2); text-align: center;
}
.logo-wall__item img { max-height: 2.4rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter .16s ease, opacity .16s ease; }
.logo-wall__item:hover img { filter: none; opacity: 1; }

.partner-group + .partner-group { margin-top: clamp(2rem, 4vw, 2.75rem); }
.partner-group h3 {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 800;
  color: var(--red); border-bottom: 2px solid var(--ink);
  padding-bottom: 0.35rem; margin-bottom: 0.85rem;
}

.team-card { display: grid; gap: 0.75rem; }
.team-card__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper-2);
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 800; font-size: 1.6rem; color: var(--ink-3);
}

/* --------------------------------------------------------------- cta band -- */
.cta-band {
  background: var(--blue-deep); color: #c3d1ea;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: #b8c9e6; margin-top: 0.75rem; max-width: 54ch; }
.cta-band .btn--outline { border-color: rgb(255 255 255 / 0.6); color: #fff; }
.cta-band .btn--outline:hover { background: #fff; color: var(--blue-deep); }

/* ----------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink); color: #9aa1ab;
  font-family: var(--sans); font-size: var(--step--1);
  padding-block: clamp(2.25rem, 5vw, 3.25rem) 2rem;
}
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site-footer h3 { color: #fff; font-family: var(--sans); font-size: var(--step--1); font-weight: 800; margin-bottom: 0.7rem; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.site-footer li { margin: 0; }
.site-footer a { color: #d4d8de; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__brand img { filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 0.9rem; }
.footer__brand p { color: #9aa1ab; max-width: 40ch; }
.footer__bottom {
  border-top: 1px solid #2a2e35; margin-top: 2rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: var(--step--2); color: #7d848e;
}
.footer__bottom a { color: #b6bcc4; }
@media (max-width: 60rem) { .footer__grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }

/* ------------------------------------------------------------------ print -- */
@media print {
  .topbar, .site-header, .cta-band, .site-footer, .nav-toggle { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { color: inherit; text-decoration: underline; }
}

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

/* ===========================================================================
   The fuel card hero
   ===========================================================================
   The one animated object on the site, and it is on the page that brings
   members in. A fuel card is a physical thing a driver holds and a nozzle is a
   physical thing they hold every day, so the pair behave like objects: the
   card floats and tilts toward the pointer, the nozzle hangs on its hose and
   releases one drop, and light passes across the plastic every eight seconds.

   Everything here is decoration. The markup carries aria-hidden, and with
   motion reduced it settles into a still life that reads correctly on its own.
   =========================================================================== */

.hero--card__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.hero--card .lede { max-width: 40ch; }

.stage { position: relative; perspective: 1200px; min-height: 15rem; display: grid; place-items: center; }

/* --------------------------------------------------------------- the card -- */
.fuelcard { width: min(100%, 21rem); transform-style: preserve-3d; }
.fuelcard__face {
  position: relative; aspect-ratio: 1.586;      /* ISO/IEC 7810 ID-1 */
  border-radius: 12px; padding: 1.25rem 1.35rem;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #e8eefa; font-family: var(--sans); overflow: hidden;
  background: radial-gradient(125% 145% at 12% 6%, #174aa6 0%, var(--blue) 44%, var(--blue-deep) 100%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.22) inset,
    0 22px 45px -18px rgb(7 42 99 / 0.55),
    0 6px 14px -8px rgb(7 42 99 / 0.4);
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg));
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
  animation: card-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Light passing over the plastic. One pass, not a constant shimmer. */
.fuelcard__face::after {
  content: ""; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(72deg, transparent 42%, rgb(255 255 255 / 0.2) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: card-sweep 8s ease-in-out infinite;
}
@keyframes card-sweep {
  0%, 62% { transform: translateX(-60%); }
  86%, 100% { transform: translateX(60%); }
}

.fuelcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fuelcard__brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; color: #fff; font-stretch: 112%; }
.fuelcard__brand em { display: block; font-style: normal; font-weight: 400; font-size: 0.66rem; letter-spacing: 0; color: #a8c0e8; margin-top: 0.1rem; }
.fuelcard__chip {
  width: 2.6rem; height: 2rem; border-radius: 5px; flex: 0 0 auto; position: relative;
  background: linear-gradient(150deg, var(--yellow), #dcb40c);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.28);
}
.fuelcard__chip::before, .fuelcard__chip::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: rgb(19 21 25 / 0.3);
}
.fuelcard__chip::before { top: 36%; }
.fuelcard__chip::after { top: 64%; }
.fuelcard__pan { font-size: 0.95rem; letter-spacing: 0.06em; color: #dbe6f8; }
.fuelcard__foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.64rem; color: #a8c0e8; }
.fuelcard__foot b { display: block; color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.fuelcard__stripe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #2f6fd8 0 33.34%, var(--yellow) 33.34% 66.67%, var(--red) 66.67%);
}

/* ------------------------------------------------------------- the nozzle -- */
/* Hangs from the top right, above and behind the card, on a hose that leaves
   the frame — the way a nozzle hangs on a pump. */
.nozzle { position: absolute; top: -1.5rem; right: 4%; width: clamp(4.5rem, 9vw, 6.5rem); z-index: 2; pointer-events: none; }
.nozzle svg { width: 100%; height: auto; overflow: visible; animation: nozzle-hang 7s ease-in-out infinite; transform-origin: 96px 8px; }
@keyframes nozzle-hang { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }

.nozzle__hose { fill: none; stroke: #2a2f36; stroke-width: 9; stroke-linecap: round; }
.nozzle__body { fill: var(--red); }
.nozzle__guard { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; }
.nozzle__trigger { fill: #2a2f36; }
.nozzle__spout { fill: #b9bfc7; }
.nozzle__tip { fill: #8e959d; }

/* One drop, falling on the same cycle as the sweep. */
.nozzle__drop { fill: var(--yellow); opacity: 0; animation: nozzle-drip 8s ease-in infinite; }
@keyframes nozzle-drip {
  0%, 70%  { opacity: 0; translate: 0 0; }
  74%      { opacity: 1; translate: 0 0; }
  88%      { opacity: 1; translate: 0 26px; }
  93%, 100%{ opacity: 0; translate: 0 34px; }
}

@media (max-width: 60rem) {
  .hero--card__in { grid-template-columns: 1fr; }
  .stage { order: -1; min-height: 12rem; margin-bottom: 0.5rem; }
  .fuelcard { width: min(100%, 18rem); }
  .nozzle { right: 8%; top: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fuelcard__face { animation: none; transform: rotateX(6deg) rotateY(-10deg); }
  .fuelcard__face::after { animation: none; opacity: 0; }
  .nozzle svg { animation: none; }
  .nozzle__drop { animation: none; opacity: 0; }
}

/* The rendered animation. Alpha channel, so no ground behind it. */
.stage__video { width: min(100%, 26rem); height: auto; display: block; }
.stage__fallback { position: relative; width: 100%; display: grid; place-items: center; }
.stage__fallback[hidden] { display: none; }