/* ==========================================================================
   Stefcode shared styles. Design direction "Cobalt Night".
   Colour tokens live in assets/tailwind-config.js (ink, accent, ice, mist).
   This file holds the reusable components: surfaces + grain, buttons, cards,
   eyebrow labels, the floating pill navbar, the logo marquee and the FAQ.
   ========================================================================== */

:root {
  --ink-950: #070b15;
  --ink-900: #0a0f1c;
  --ink-800: #161e33;
  --navy: #0e1424;
  --accent-500: #3b5bfd;
  --accent-600: #2a45ec;
  --accent-700: #2236c4;
  --cobalt-deep: #1e3a8a;
  --ice-200: #bae6fd;
  --ice-300: #7dd3fc;
  --mist-100: #f2f4f8;
  /* Film grain: inline SVG turbulence, desaturated */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ring-soft: 0 0 0 1px rgba(14, 20, 36, .07);
  --shadow-card: 0 1px 2px rgba(14, 20, 36, .04), 0 14px 34px -18px rgba(14, 20, 36, .16);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: "ss01", "cv11"; }

/* Anchor jumps and focus scrolling keep content clear of the sticky header */
html { scroll-padding-top: 7.5rem; }
/* ...but the header itself is sticky: focusing its controls must never scroll the page */
.site-header a, .site-header summary { scroll-margin-top: -7.5rem; }

/* Big headlines: avoid one short word alone on the last line */
main h1, main h2 { text-wrap: balance; }

/* ---------- Legacy header (pages that still use the transparent/solid header) ---------- */
.site-header {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, backdrop-filter .25s ease;
}
.site-header .nav-link { transition: color .2s ease, background-color .2s ease; }
.site-header .cta-pill { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.logo-white, .logo-black { transition: opacity .25s ease; }
.logo-black { opacity: 0; }
.site-header.is-scrolled .logo-white { opacity: 0; }
.site-header.is-scrolled .logo-black { opacity: 1; }

/* ---------- Floating pill navbar ---------- */
.nav-float { pointer-events: none; }
.nav-float > * { pointer-events: auto; }
.nav-pill {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(14, 20, 36, .06), 0 12px 32px -14px rgba(7, 11, 21, .35);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.nav-float.is-scrolled .nav-pill {
  box-shadow: 0 0 0 1px rgba(14, 20, 36, .08), 0 16px 40px -16px rgba(7, 11, 21, .38);
}
.nav-float .nav-link {
  /* display comes from the markup (hidden md:inline-flex) so Tailwind can hide it on mobile */
  align-items: center; height: 2.5rem; padding: 0 .875rem;
  border-radius: 9999px; font-size: .875rem; font-weight: 500; color: #2a3553;
}
.nav-float .nav-link:hover { background: var(--mist-100); color: var(--ink-950); }
.nav-float .menu-btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .9rem;
  border-radius: 9999px; font-size: .875rem; font-weight: 600; color: var(--ink-950);
  background: var(--mist-100); box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .06);
}
.nav-float .mobile-menu[open] .menu-btn { background: #e7ebf2; }
.nav-float .mobile-menu-panel a {
  display: flex; align-items: center; justify-content: space-between; min-height: 3rem;
  padding: 0 1rem; border-radius: 1rem; font-size: .9375rem; font-weight: 500; color: var(--ink-800);
}
.nav-float .mobile-menu-panel a:hover { background: var(--mist-100); }

/* ---------- Layout rhythm + type scale ---------- */
/* One vertical gap between sections everywhere. Light sections get .section (padding-top);
   inset dark surfaces (full-width cards, the principles card, the closing CTA) get .section-surface
   (margin-top). The light section right after a surface gets .section again, so every gap is equal. */
:root { --section-gap: 5rem; }
@media (min-width: 640px) { :root { --section-gap: 6.5rem; } }
@media (min-width: 1024px) { :root { --section-gap: 7.5rem; } }
.section { padding-top: var(--section-gap); }
.section-surface { margin-top: var(--section-gap); }
/* Section heading block: eyebrow + h2 (+ lead), then the content */
.section-head { max-width: 42rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .section-head { margin-bottom: 3.5rem; } }
/* h2 scale (all section headings, light or dark): 34 / 48 / 56px */
.h2 { font-size: 2.125rem; line-height: 1.05; letter-spacing: -.035em; font-weight: 600; margin-top: 1.25rem; }
@media (min-width: 640px) { .h2 { font-size: 3rem; } }
@media (min-width: 1024px) { .h2 { font-size: 3.5rem; } }
/* The single larger step: the closing CTA heading only. 40 / 60 / 72px */
.h2-display { font-size: 2.5rem; line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin-top: 1.5rem; }
@media (min-width: 640px) { .h2-display { font-size: 3.75rem; } }
@media (min-width: 1024px) { .h2-display { font-size: 4.5rem; } }
.lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; }

/* ---------- Surfaces: named gradients ---------- */
/* Hero: deep cobalt across the whole surface (not near-black), a rich cobalt bloom behind the
   headline, and the electric cobalt + icy glow low and right, away from the body text.
   Measured: white/80 body text >= 7:1 and the ice headline >= 5:1 everywhere text sits. */
.bg-cobalt-night {
  background-color: #10205f;
  background-image:
    radial-gradient(34% 40% at 97% 100%, rgba(125, 211, 252, .5) 0%, rgba(125, 211, 252, 0) 70%),
    radial-gradient(62% 70% at 88% 104%, rgba(59, 91, 253, .95) 0%, rgba(59, 91, 253, 0) 72%),
    radial-gradient(60% 55% at 24% 36%, rgba(42, 69, 236, .5) 0%, rgba(42, 69, 236, 0) 72%),
    radial-gradient(55% 60% at 0% 100%, rgba(8, 14, 44, .55) 0%, rgba(8, 14, 44, 0) 70%),
    radial-gradient(50% 45% at 72% 0%, rgba(59, 91, 253, .32) 0%, rgba(59, 91, 253, 0) 70%),
    linear-gradient(160deg, #0b1540 0%, #12246f 48%, #1a35a6 100%);
}
/* Feature card (savings teaser): brighter cobalt with the ice glow in a corner.
   Below lg the text stacks on top, so the glow moves to the bottom-right (behind the white example
   card) and the top stays deep cobalt: every text pixel stays >= 4.5:1. From lg the text is on the
   left and the glow sits top-right behind the example card. */
.bg-cobalt-glow {
  background-color: #111a45;
  background-image:
    radial-gradient(circle at 100% 100%, rgba(125, 211, 252, .42) 0, rgba(125, 211, 252, 0) 16rem),
    radial-gradient(circle at 100% 100%, rgba(59, 91, 253, .85) 0, rgba(59, 91, 253, 0) 30rem),
    radial-gradient(circle at 0% 0%, rgba(42, 69, 236, .42) 0, rgba(42, 69, 236, 0) 22rem),
    linear-gradient(170deg, #0e1740 0%, #14226a 55%, #1c3587 100%);
}
@media (min-width: 1024px) {
  .bg-cobalt-glow {
    background-image:
      radial-gradient(circle at 100% 0%, rgba(125, 211, 252, .5) 0, rgba(125, 211, 252, 0) 22rem),
      radial-gradient(circle at 100% 0%, rgba(59, 91, 253, .9) 0, rgba(59, 91, 253, 0) 40rem),
      radial-gradient(circle at 0% 100%, rgba(42, 69, 236, .6) 0, rgba(42, 69, 236, 0) 30rem),
      linear-gradient(160deg, #0e1640 0%, #16277a 55%, #1e3a8a 100%);
  }
}
/* Final CTA: cobalt on top, fading into night navy so the footer can continue it */
.bg-cobalt-dusk {
  background-color: #0a0f1c;
  background-image:
    linear-gradient(180deg, rgba(10, 16, 48, 0) 55%, #0a1030 100%),
    radial-gradient(circle at 50% -4rem, rgba(125, 211, 252, .42) 0, rgba(125, 211, 252, 0) 16rem),
    radial-gradient(circle at 0% 0%, rgba(59, 91, 253, .75) 0, rgba(59, 91, 253, 0) 34rem),
    radial-gradient(circle at 100% 0%, rgba(42, 69, 236, .7) 0, rgba(42, 69, 236, 0) 34rem),
    linear-gradient(180deg, #1c2a74 0%, #121a4a 50%, #0a1030 100%);
}
@media (max-width: 639px) {
  .bg-cobalt-dusk {
    background-image:
      linear-gradient(180deg, rgba(10, 16, 48, 0) 55%, #0a1030 100%),
      radial-gradient(circle at 50% -4rem, rgba(125, 211, 252, .38) 0, rgba(125, 211, 252, 0) 14rem),
      radial-gradient(circle at 0% 0%, rgba(59, 91, 253, .7) 0, rgba(59, 91, 253, 0) 22rem),
      radial-gradient(circle at 100% 0%, rgba(42, 69, 236, .65) 0, rgba(42, 69, 236, 0) 22rem),
      linear-gradient(180deg, #1c2a74 0%, #121a4a 45%, #0a1030 100%);
  }
}
/* Quiet dark card: night navy with a hint of cobalt */
.bg-night {
  background-color: #0a1030;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(59, 91, 253, .42) 0, rgba(59, 91, 253, 0) 30rem),
    radial-gradient(circle at 0% 100%, rgba(30, 58, 138, .6) 0, rgba(30, 58, 138, 0) 28rem),
    linear-gradient(180deg, #0f1942 0%, #0a1030 100%);
}
/* Footer: flat midnight, continues the bottom of .bg-cobalt-dusk */
.bg-night-flat { background-color: #0a1030; }

/* Film grain on any surface. Sits between the background and the content. */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: .5;
}
.grain-soft::before { opacity: .3; }

/* Gradient text */
.text-gradient-accent {
  background-image: linear-gradient(115deg, #1f2f9c 0%, #2a45ec 55%, #3b5bfd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-ice {
  background-image: linear-gradient(100deg, #e0f2fe 0%, #bae6fd 40%, #7dd3fc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Luminous hero highlight: saturated ice into light cobalt, with a soft glow so it reads as colour,
   not grey. Darkest stop (#7aa0ff) is >= 5:1 on the hero surface. */
.text-highlight {
  background-image: linear-gradient(95deg, #7dd3fc 0%, #67c3ff 38%, #7aa0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  filter: drop-shadow(0 0 22px rgba(96, 165, 250, .35));
}

/* ---------- Buttons (pills) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3rem; padding: .75rem 1.5rem; border-radius: 9999px;
  font-weight: 600; font-size: .9375rem; line-height: 1.25rem; letter-spacing: -.005em;
  white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 2.5rem; padding: .5rem 1.125rem; font-size: .875rem; }
.btn-has-icon { padding-right: .5rem; }
.btn-sm.btn-has-icon { padding-right: .375rem; }
.btn-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: var(--accent-500); color: #fff;
  transition: transform .2s ease, background-color .2s ease;
}
.btn-sm .btn-icon { width: 1.75rem; height: 1.75rem; }
.btn:hover .btn-icon { transform: translateX(2px); }

.btn-light { background: #fff; color: var(--ink-950); box-shadow: 0 10px 30px -12px rgba(3, 6, 20, .55); }
.btn-light:hover { background: #eef2ff; }
.btn-dark { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -12px rgba(7, 11, 21, .6); }
.btn-dark:hover { background: var(--accent-700); }
.btn-dark .btn-icon { background: var(--accent-500); }
.btn-dark:hover .btn-icon { background: #fff; color: var(--accent-700); }
.btn-glass {
  background: rgba(255, 255, 255, .08); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .16); }
.btn-outline { background: #fff; color: var(--ink-950); box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .14), 0 1px 2px rgba(14, 20, 36, .05); }
.btn-outline:hover { background: var(--mist-100); }

/* PRIMARY: the one conversion action (Request an intro). Filled electric cobalt, white text (5.1:1),
   white arrow chip, soft cobalt glow. Same class on dark and light surfaces. */
.btn-primary {
  color: #fff;
  background-color: var(--accent-600);
  background-image: linear-gradient(180deg, #3b5bfd 0%, #2a45ec 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 14px 32px -12px rgba(59, 91, 253, .85), 0 2px 6px -2px rgba(18, 26, 74, .35);
}
.btn-primary:hover {
  background-image: linear-gradient(180deg, #2a45ec 0%, #2236c4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 18px 38px -12px rgba(59, 91, 253, .95), 0 2px 6px -2px rgba(18, 26, 74, .35);
}
.btn-primary .btn-icon { background: #fff; color: var(--accent-700); }
.on-dark .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .16),
  0 16px 40px -12px rgba(59, 91, 253, .95), 0 4px 14px -4px rgba(3, 6, 20, .45); }
.on-dark .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .22),
  0 18px 46px -10px rgba(59, 91, 253, 1), 0 4px 14px -4px rgba(3, 6, 20, .45); }
.btn-lg { min-height: 3.5rem; padding: .875rem 1.75rem; font-size: 1rem; }
.btn-lg.btn-has-icon { padding-right: .625rem; }
.btn-lg .btn-icon { width: 2.25rem; height: 2.25rem; }

/* SECONDARY on dark: a quiet, smaller outline pill (e.g. "Or send an email"). Never full width. */
.btn-secondary-dark, .btn-secondary-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem 1.125rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-secondary-dark { color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.btn-secondary-dark:hover { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.btn-secondary-dark svg { color: var(--ice-200); }
/* SECONDARY on light */
.btn-secondary-light { color: var(--ink-800); background: transparent; box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .16); }
.btn-secondary-light:hover { color: var(--ink-950); background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .26); }
.btn-secondary-light svg { color: var(--accent-600); }

/* Text link with arrow */
.link-arrow {
  display: inline; font-weight: 600;
  color: var(--accent-700); text-decoration: underline; text-decoration-color: rgba(34, 54, 196, .25);
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.link-arrow:hover { color: var(--ink-950); text-decoration-color: currentColor; }
.link-arrow .arrow { display: inline-block; margin-left: .35rem; transition: transform .2s ease; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* Link card: a whole-row link with an arrow chip (secondary actions under a section) */
.link-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .625rem .625rem .625rem 1.25rem; border-radius: 1.25rem;
  background: #fff; color: var(--ink-950); font-weight: 600; font-size: .9375rem; line-height: 1.35;
  box-shadow: var(--ring-soft), 0 8px 20px -16px rgba(14, 20, 36, .3);
  transition: box-shadow .2s ease, color .2s ease;
}
.link-card:hover { color: var(--accent-700); box-shadow: 0 0 0 1px rgba(59, 91, 253, .3), 0 12px 26px -16px rgba(30, 58, 138, .4); }
.link-card .btn-icon { width: 2.25rem; height: 2.25rem; }
@media (min-width: 640px) { .link-card { border-radius: 9999px; } }
.link-card:hover .btn-icon { transform: translateX(2px); }

/* ---------- Labels ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .8rem .375rem .65rem; border-radius: 9999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .08), 0 1px 2px rgba(14, 20, 36, .04);
  font-size: .6875rem; line-height: 1rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-700);
}
.eyebrow::before {
  content: ""; width: .4375rem; height: .4375rem; border-radius: 9999px; flex: none;
  background: var(--accent-500); box-shadow: 0 0 0 3px rgba(59, 91, 253, .18);
}
.eyebrow-dark {
  background: rgba(7, 11, 21, .38); color: var(--ice-200);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.eyebrow-dark::before { background: var(--ice-300); box-shadow: 0 0 0 3px rgba(125, 211, 252, .22); }

.tag {
  display: inline-flex; align-items: center; flex: none; height: 1.75rem; padding: 0 .75rem;
  border-radius: 9999px; font-size: .75rem; font-weight: 500; color: var(--accent-700);
  background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(59, 91, 253, .14);
}

.icon-chip {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: .875rem;
  background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%); color: var(--accent-700);
  box-shadow: inset 0 0 0 1px rgba(59, 91, 253, .14);
}
.icon-chip-dark {
  background: rgba(255, 255, 255, .08); color: var(--ice-200);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.icon-chip-solid {
  background: linear-gradient(135deg, #3b5bfd 0%, #2236c4 100%); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(59, 91, 253, .7);
}

/* ---------- Cards ---------- */
.card {
  background: #fff; border-radius: 1.5rem;
  box-shadow: var(--ring-soft), var(--shadow-card);
}
.card-muted {
  background: rgba(255, 255, 255, .45); border-radius: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .1);
}
.card-hover { transition: box-shadow .25s ease, transform .25s ease; }
.card-hover:hover { box-shadow: 0 0 0 1px rgba(59, 91, 253, .22), 0 24px 48px -24px rgba(30, 58, 138, .35); transform: translateY(-2px); }
/* Legacy pale metric tile (kept for pages not yet ported) */
.metric { border-radius: 1rem; background: var(--mist-100); box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .04); }

/* Metric panel: a small dark cobalt surface (use with .grain) holding 2-3 case metrics.
   Values are white with an ice sheen, labels white/80 (>= 5.2:1 on the brightest corner). */
.bg-cobalt-panel {
  background-color: #14226a;
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(59, 91, 253, .6) 0%, rgba(59, 91, 253, 0) 62%),
    radial-gradient(70% 110% at 0% 100%, rgba(30, 58, 138, .7) 0%, rgba(30, 58, 138, 0) 70%),
    linear-gradient(150deg, #0d163f 0%, #172a80 100%);
}
.metric-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 1.125rem; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 36px -22px rgba(18, 26, 74, .7);
}
.metric-panel > div { padding: 1.125rem 1rem 1.125rem 1.125rem; }
.metric-panel > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
.metric-panel dt {
  font-size: 1.75rem; line-height: 1; font-weight: 600; letter-spacing: -.035em; white-space: nowrap;
  background-image: linear-gradient(180deg, #ffffff 30%, #cdeafe 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric-panel dd { margin-top: .625rem; font-size: .8125rem; line-height: 1.4; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
/* 3-metric variant: 2 + 1 on phones (third spans the row, hairline on top), 3 across from sm */
.metric-panel-3 > div:nth-child(3) { grid-column: 1 / -1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
@media (min-width: 640px) {
  .metric-panel > div { padding: 1.375rem 1.25rem 1.375rem 1.5rem; }
  .metric-panel dt { font-size: 2.375rem; }
  .metric-panel dd { font-size: .875rem; }
  .metric-panel-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-panel-3 > div:nth-child(3) { grid-column: auto; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
  .metric-panel-3 > div { padding-left: 1.25rem; padding-right: 1rem; }
  .metric-panel-3 dt { font-size: 2rem; }
}
/* lg only: two cards per row, so the panels are narrower */
@media (min-width: 1024px) and (max-width: 1279px) { .metric-panel dt { font-size: 2.125rem; } .metric-panel-3 dt { font-size: 1.75rem; } }
/* Very narrow phones (< 360px): one metric per row, value left and label right */
@media (max-width: 359px) {
  .metric-panel, .metric-panel-3 { grid-template-columns: 1fr; }
  .metric-panel > div { display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; }
  .metric-panel > div + div, .metric-panel-3 > div:nth-child(3) { grid-column: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
  .metric-panel dt { flex: none; min-width: 5.75rem; font-size: 1.625rem; }
  .metric-panel dd { margin-top: 0; }
}
@media (forced-colors: active) { .metric-panel dt { background: none; color: CanvasText; } }

/* Case card title: the client logo IS the <h3> (img alt = company name). */
.case-logo { display: flex; align-items: center; gap: .75rem; min-height: 3rem; margin: 0; }
@media (min-width: 640px) { .case-logo { min-height: 4.25rem; gap: .875rem; } }
.case-logo img { display: block; width: auto; }
.case-logo .case-logo-divider { width: 1px; height: 1.75rem; background: #c8cdd9; flex: none; }
.built-note { border-radius: 1rem; background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%); box-shadow: inset 0 0 0 1px rgba(59, 91, 253, .12); }

/* Stats band: phones = compact rows (value left, label right, hairline dividers);
   sm+ = three columns with an icon chip above each value. */
.stats-band { display: grid; grid-template-columns: 1fr; }
.stats-band .stat {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
}
.stats-band .stat + .stat { box-shadow: inset 0 1px 0 #e8eaf0; }
.stats-band .stat-value { font-size: 1.75rem; line-height: 1; font-weight: 600; letter-spacing: -.035em; }
@media (min-width: 360px) { .stats-band .stat-value { font-size: 2rem; } }
.stats-band .stat-label { font-size: .875rem; line-height: 1.3; color: #3a4866; text-align: right; }
@media (min-width: 640px) {
  .stats-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-band .stat { display: block; padding: 2rem; }
  .stats-band .stat + .stat { box-shadow: inset 1px 0 0 #e8eaf0; }
  .stats-band .stat-value { font-size: 2.25rem; }
  .stats-band .stat-label { margin-top: .75rem; text-align: left; color: #5e6a83; }
}
@media (min-width: 640px) and (max-width: 767px) { .stats-band .stat-value { font-size: 2rem; } }
@media (min-width: 1024px) { .stats-band .stat-value { font-size: 3rem; } }

/* Small tile inside a glass panel: dark tint keeps small text AA over any glow */
.glass-tile { border-radius: 1rem; background: rgba(7, 11, 21, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* Glass panel on dark surfaces */
.glass {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -30px rgba(3, 6, 20, .6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Portrait frame on the hero */
.portrait-frame {
  padding: .5rem; border-radius: 2rem;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 80px -30px rgba(3, 6, 20, .75);
}

/* Logo tiles (client marquee). Each client logo gets its own height so the row reads with even
   visual weight (dense wordmarks smaller, airy ones larger); ~110-132px wide on phones. */
.logo-tile {
  flex: none; display: grid; place-items: center;
  width: 10.5rem; height: 4.75rem; padding: 0 1rem; border-radius: 1.125rem;
  background: #fff; box-shadow: var(--ring-soft), 0 10px 24px -18px rgba(14, 20, 36, .25);
}
.logo-tile img { display: block; width: auto; height: 1.625rem; max-width: 100%; object-fit: contain; }
.logo-tile .logo-bohus      { height: .875rem; }
.logo-tile .logo-klottrets  { height: 3rem; }
.logo-tile .logo-sweplan    { height: 1.625rem; }
.logo-tile .logo-ljungheden { height: 1.8125rem; }
.logo-tile .logo-norconsult { height: 1.6875rem; }
@media (min-width: 640px) {
  .logo-tile { width: 14rem; height: 6.5rem; padding: 0 1.5rem; }
  .logo-tile img { height: 2.25rem; }
  .logo-tile .logo-bohus      { height: 1.125rem; }
  .logo-tile .logo-klottrets  { height: 4rem; }
  .logo-tile .logo-sweplan    { height: 2.1875rem; }
  .logo-tile .logo-ljungheden { height: 2.4375rem; }
  .logo-tile .logo-norconsult { height: 2.1875rem; }
}

.tool-tile {
  display: flex; align-items: center; justify-content: center;
  height: 4.5rem; padding: 0 1rem; border-radius: 1.125rem;
  background: #fff; box-shadow: var(--ring-soft), 0 8px 20px -16px rgba(14, 20, 36, .22);
  transition: box-shadow .25s ease, transform .25s ease;
}
.tool-tile img { display: block; height: 2rem; width: auto; max-width: 100%; opacity: .88; transition: opacity .2s ease; }
.tool-tile:hover { box-shadow: 0 0 0 1px rgba(59, 91, 253, .25), 0 16px 30px -18px rgba(30, 58, 138, .4); transform: translateY(-2px); }
.tool-tile:hover img { opacity: 1; }
@media (min-width: 640px) { .tool-tile { height: 5.5rem; } .tool-tile img { height: 2.25rem; } }
@media (min-width: 1024px) { .tool-tile { height: 6rem; } .tool-tile img { height: 2.5rem; } }
.tool-tile img[alt="AWS"] { height: 1.5rem; } .tool-tile img[alt="Zapier"] { height: 1.625rem; }
@media (min-width: 640px) { .tool-tile img[alt="AWS"] { height: 1.75rem; } .tool-tile img[alt="Zapier"] { height: 1.875rem; } }
@media (min-width: 1024px) { .tool-tile img[alt="AWS"] { height: 1.875rem; } .tool-tile img[alt="Zapier"] { height: 2rem; } }
/* Logos on dark backgrounds */
.logo-invert { filter: brightness(0) invert(1); }

/* Principles on tablet: rows (number left, text right) with hairlines, instead of 3 narrow columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .principle { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: start; gap: 2rem; padding: 2rem 0; }
  .principle + .principle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
  .principle:first-child { padding-top: 0; }
  .principle:last-child { padding-bottom: 0; }
}

/* ---------- Infinite logo marquee ---------- */
.marquee {
  --marquee-gap: .75rem;
  --marquee-duration: 36s;
  display: flex; gap: var(--marquee-gap); overflow: hidden; padding: .75rem 0 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee-track {
  display: flex; flex: none; gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }
/* Pause/play toggle for the marquee (WCAG 2.2.2). site.js wires [data-marquee-toggle]. */
.marquee-toggle {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: #fff; color: var(--ink-800); cursor: pointer;
  box-shadow: var(--ring-soft), 0 6px 16px -10px rgba(14, 20, 36, .35);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.marquee-toggle:hover { color: var(--accent-700); box-shadow: 0 0 0 1px rgba(59, 91, 253, .3), 0 8px 18px -10px rgba(30, 58, 138, .4); }
.marquee-toggle .icon-play { display: none; }
.marquee-toggle[aria-pressed="true"] .icon-play { display: block; }
.marquee-toggle[aria-pressed="true"] .icon-pause { display: none; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--marquee-gap))); }
}
@media (min-width: 640px) { .marquee { --marquee-gap: 1rem; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Focus ---------- */
html :focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 3px;
}
:where(:focus-visible) { border-radius: 4px; }
.on-dark :focus-visible,
.site-header:not(.is-scrolled) :focus-visible { outline-color: #ffffff; }
/* The mobile menu panel is white even while the legacy header is transparent */
.site-header:not(.is-scrolled) .mobile-menu-panel :focus-visible { outline-color: #1f2a44; }
/* Floating navbar is always white: always the accent ring */
.site-header.nav-float :focus-visible,
.site-header.nav-float:not(.is-scrolled) :focus-visible,
.site-header.nav-float:not(.is-scrolled) .mobile-menu-panel :focus-visible { outline-color: var(--accent-500); }
/* White elements that sit on dark surfaces but hold light content */
.on-dark .on-light :focus-visible { outline-color: var(--accent-500); }

/* ---------- FAQ accordion (native <details>) ---------- */
.faq-item > summary { list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-card { background: #fff; border-radius: 1.25rem; box-shadow: var(--ring-soft), 0 8px 20px -18px rgba(14, 20, 36, .25); transition: box-shadow .2s ease; }
.faq-card:hover { box-shadow: 0 0 0 1px rgba(59, 91, 253, .2), 0 8px 20px -18px rgba(14, 20, 36, .25); }
.faq-card[open] { box-shadow: 0 0 0 1.5px rgba(59, 91, 253, .45), 0 18px 40px -24px rgba(30, 58, 138, .35); }
.faq-card > summary { border-radius: 1.25rem; }
.faq-card .faq-icon {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 9999px;
  background: #eef2ff; color: var(--accent-700);
}
.faq-card[open] .faq-icon { background: var(--accent-500); color: #fff; }

/* ---------- Savings calculator (calculator page) ---------- */
.calc-range { accent-color: var(--accent-600); }
.ind-construction [data-show-for="construction"] { display: revert !important; }
.ind-construction [data-hide-for="construction"] { display: none !important; }

/* A11Y-3: keep the selected cost mode visible in Windows high contrast mode */
@media (forced-colors: active) {
  #calc-inputs input[name="cost-mode"]:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  #calc-inputs input[name="cost-mode"]:focus-visible + span { outline: 2px solid CanvasText; outline-offset: 2px; }
  .text-gradient-accent, .text-gradient-ice { background: none; color: CanvasText; }
  .logo-tile, .tool-tile { forced-color-adjust: none; background: #fff; }
  .nav-pill > a > img, .case-logo img, footer a > img.invert { forced-color-adjust: none; filter: none; background: #fff; box-shadow: 0 0 0 .25rem #fff; }
}

/* Mobile menu (native <details>) */
.mobile-menu > summary { list-style: none; cursor: pointer; }
.mobile-menu > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .site-header, .site-header * { transition: none !important; }
  .faq-item .faq-icon { transition: none; }
  .btn, .btn-icon, .card-hover, .tool-tile, .link-card, .link-arrow .arrow { transition: none; }
  .btn:hover .btn-icon, .link-arrow:hover .arrow, .card-hover:hover, .tool-tile:hover { transform: none; }
  /* Marquee becomes a static, wrapped row */
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; padding-left: 1rem; padding-right: 1rem; }
  .marquee-track { animation: none; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; }
  .marquee-track[aria-hidden="true"] { display: none; }
  .marquee-toggle { display: none; }
  .btn-secondary-dark, .btn-secondary-light, .marquee-toggle { transition: none; }
}