/* =========================================================
   FARMBRIGHT — v2 · Polestar-inspired design system
   Minimal · monochrome · sharp · generous whitespace
   ========================================================= */

:root {
  /* Palette — mostly grayscale, sparing color accents */
  --ink: #0E0E0E;             /* Near-black for headings */
  --ink-2: #1F1F1F;           /* Pure-feel black for body */
  --grey-1: #2B2B2B;          /* Strong secondary text */
  --grey-2: #535353;          /* Medium secondary */
  --grey-3: #767676;          /* Muted text */
  --grey-4: #A8A8A8;          /* Captions */
  --grey-5: #D6D6D6;          /* Borders */
  --grey-6: #E6E6E6;          /* Soft borders / dividers */
  --bg: #FFFFFF;              /* Pure white */
  --bg-soft: #F4F4F4;         /* Subtle light grey for alt sections */
  --bg-tone: #E8E8E8;         /* Slightly cooler for hero backdrops */
  --bg-dark: #0A0A0A;         /* Used sparingly for contrast moments */

  /* Subtle product accents — kept for biology semantics */
  --brand: #5CDB95;           /* Farmbright brand mint — used in logo accent + select moments */
  --brand-deep: #2DA56B;      /* Deeper brand variant for hover / accessible AA text on white */
  --moss: #5C8C4A;            /* Verdara accent (dot/indicator only) */
  --wheat: #B89348;           /* Sylvara accent */
  --available: #5CDB95;       /* "Available now" dot indicator (brand mint) */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout */
  --max-width: 1440px;
  --max-content: 1200px;
  --max-text: 760px;
  --content-pad: clamp(20px, 3vw, 48px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Nav heights */
  --nav-h: 56px;
  --subnav-h: 56px;

  /* === Backward-compat token aliases ===
     Old earth-tone tokens remap to v2 palette so existing
     inline styles render correctly without page-by-page edits. */
  --earth-dark: var(--ink);
  --earth-mid: var(--bg);
  --earth-light: var(--bg);
  --earth-tint: var(--bg-soft);
  --white: var(--ink);
  --white-70: var(--grey-2);
  --white-50: var(--grey-3);
  --white-15: var(--grey-5);
  --white-08: var(--grey-6);
  --body-text: var(--ink);
  --muted-text: var(--grey-2);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --moss-light: var(--grey-2);
  --soil: var(--ink);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

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

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* =========================================================
   Type — Polestar-style light weights, tight tracking
   ========================================================= */

.eyebrow,
.section-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--grey-3);
}

.display {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.body-l {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--grey-2);
  max-width: var(--max-text);
  font-weight: 400;
  text-wrap: pretty;
}

.body-l.on-dark { color: var(--grey-2); }

p { text-wrap: pretty; max-width: var(--max-text); color: var(--grey-2); }

.caption {
  font-size: 12px;
  color: var(--grey-3);
  line-height: 1.55;
}
.caption.on-dark { color: var(--grey-3); }

/* =========================================================
   Layout
   ========================================================= */

.section {
  padding: clamp(64px, 7vw, 120px) var(--content-pad);
  position: relative;
}

.wrap,
.wrap-wide {
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
}
.wrap-wide { max-width: var(--max-width); }

.bg-dark { background: var(--bg-soft); color: var(--ink); }
.bg-mid { background: var(--bg-soft); color: var(--ink); }
.bg-light { background: var(--bg); color: var(--ink); }
.bg-tint { background: var(--bg-soft); color: var(--ink); }
.bg-white { background: var(--bg); color: var(--ink); }

/* Disable previous grain / field textures */
.grain::after { content: none !important; }
.grain > * { position: relative; z-index: 1; }

.field-bg,
.canopy {
  display: none !important;
}

/* =========================================================
   Buttons — sharp 4px corners (Polestar-style)
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 11px 22px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.2;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--grey-1);
  border-color: var(--grey-1);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary.on-light {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn-secondary.on-dark,
.btn .on-dark,
.bg-dark .btn-secondary {
  border-color: var(--ink);
  color: var(--ink);
}
.bg-dark .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.btn-wheat {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-wheat:hover { background: var(--grey-1); }

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-top: 10px;
  padding-bottom: 2px;
  transition: gap 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn-arrow-label {
  /* Keep inline text (including ®/™ <sup> tags) as a single flex
     item so the gap rule above only sits between the label and the
     trailing arrow glyph. */
  display: inline;
}
.btn-arrow.on-dark { color: var(--ink); }
.btn-arrow:hover { gap: 14px; }
.btn-arrow::after { content: "→"; font-weight: 400; }

/* =========================================================
   Navigation — two-tier
   ========================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--grey-6);
  transition: background 240ms var(--ease-out), backdrop-filter 240ms var(--ease-out);
}
.nav::before {
  content: '';
  position: absolute;
  inset: -4px 0 auto 0;
  height: 4px;
  background: #FFFFFF;
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.nav.is-scrolled::before {
  background: rgba(255,255,255,0.72);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--content-pad);
  color: var(--ink);
}

.nav-logo {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  line-height: 1;
}
.nav-logo .logo-svg {
  height: 30px;
  width: auto;
  display: block;
  color: var(--brand);
}
.logo-reg {
  font-size: 9px;
  color: var(--brand);
  line-height: 1;
  font-weight: 400;
  align-self: flex-start;
  margin-top: 2px;
  margin-left: -11px;
}
.bg-dark .nav-logo .logo-svg,
.nav .nav-logo .logo-svg { color: var(--brand); }

/* Hide the old wordmark text when a real SVG logo is present */
.nav-logo:has(.logo-svg) .nav-wordmark-text { display: none; }
/* Hide the old gradient logo mark — wordmark only */
.nav-logo-mark {
  display: none !important;
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
.nav-links a {
  position: relative;
  transition: color 200ms;
  color: var(--ink);
  padding: 4px 0;
}
.nav-links a:hover { color: var(--grey-2); }
.nav-links a.active::after { content: none; }

/* === Mega dropdown — full-width dark bar below the nav ====================
   Hovering the Verdara® nav item drops a dark band immediately under
   the main nav, containing the two product sub-links (Broadacre and
   Horticulture). The panel itself is also hover-sticky, so the user
   can move down into it without losing the menu. */
/* === Click-toggle dropdown ================================================
   The Verdara® nav trigger toggles `.nav-mega-open` on its wrapper via
   JS click. The panel sits as a fixed bar pinned to the bottom of the
   main nav (above any product subnav). */
.nav-item--mega {
  position: relative;
  display: inline-flex;
  align-self: stretch;
  align-items: stretch;
}
.nav-item--mega > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  transition: color 200ms;
}
.nav-item--mega > a:hover { color: var(--grey-2); }

.nav-mega {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(16, 16, 16, 0.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  color: var(--bg);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: clip-path 280ms var(--ease-out),
              opacity 220ms var(--ease-out);
  /* Above .subnav (99) so the dropdown lands cleanly on top of the
     product subnav row on verdara.html. */
  z-index: 101;
  will-change: clip-path;
}
.nav-item--mega.nav-mega-open .nav-mega {
  clip-path: inset(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-mega-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--content-pad);
  display: flex;
  gap: 32px;
}
.nav-mega a {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--bg);
  letter-spacing: -0.005em;
  transition: color 200ms;
}
.nav-mega a:hover { color: rgba(255, 255, 255, 0.6); }

/* Mobile: drawer has the two sub-links inline; collapse the wrapper
   so the trigger link still flows naturally with the rest of the menu. */
@media (max-width: 880px) {
  .nav-item--mega { display: contents; }
  .nav-mega { display: none !important; }
}

.nav-cta {
  background: transparent;
  color: var(--ink);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ink);
  transition: background 200ms, color 200ms;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--bg);
}

/* === Region pill (AUD / Australia) ====================================== */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.region-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  border: 1px solid var(--grey-5);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
  white-space: nowrap;
}
.region-pill:hover { border-color: var(--ink); }
.region-pill img { width: 20px; height: 20px; border-radius: 50%; display: block; }
.region-pill-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--grey-3);
  border-bottom: 1.5px solid var(--grey-3);
  transform: rotate(45deg) translateY(-1px);
  margin-left: 1px;
}


/* === Region slide-out panel ============================================= */
.region-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(14,14,14,0.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}
.region-open .region-scrim { opacity: 1; visibility: visible; transition: opacity 280ms var(--ease-out), visibility 0s linear 0s; }
.region-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw); z-index: 151;
  background: var(--bg);
  border-left: 1px solid var(--grey-6);
  transform: translateX(100%);
  transition: transform 360ms var(--ease-out);
  display: flex; flex-direction: column;
  padding: 32px; overflow-y: auto;
}
.region-open .region-drawer { transform: translateX(0); }
.region-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.region-drawer-title { font-family: var(--font-sans); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.region-drawer-sub { font-size: 14px; line-height: 1.5; color: var(--grey-2); margin: 6px 0 28px; max-width: 40ch; }
.region-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--grey-5); background: transparent; color: var(--ink);
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.region-close:hover { background: var(--bg-soft); border-color: var(--ink); }
.region-group-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-3); margin: 0 0 12px; }
.region-list { display: grid; gap: 8px; margin: 0 0 28px; }
.region-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border: 1px solid var(--grey-6); border-radius: 10px;
  background: var(--bg); text-align: left; cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
.region-item:hover { border-color: var(--ink); }
.region-item.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.region-item img { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.region-item-text { display: grid; gap: 1px; flex: 1; }
.region-item-name { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.region-item-cur { font-size: 13px; color: var(--grey-3); }
.region-item-check { width: 18px; height: 18px; color: var(--ink); flex-shrink: 0; }
.region-item--soon { cursor: default; opacity: 0.5; display: none !important; }
.region-item--soon:hover { border-color: var(--grey-6); }
.region-list:has(.region-item--soon) { display: none !important; }
.region-list + .region-group-label { display: none !important; }
.region-soon-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-3); border: 1px solid var(--grey-5); border-radius: 999px; padding: 3px 9px; flex-shrink: 0; }
.region-drawer-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--grey-6); font-size: 12px; line-height: 1.55; color: var(--grey-3); }

/* Two-tier subnav for product pages */
.subnav {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 97;
  background: #FFFFFF;
  border-bottom: 1px solid var(--grey-6);
  transition: background 240ms var(--ease-out), backdrop-filter 240ms var(--ease-out);
}
.subnav.is-scrolled {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.subnav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--subnav-h);
  padding: 0 var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.subnav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  flex-wrap: wrap;
}
.subnav-links a {
  position: relative;
  padding: 18px 0;
  color: var(--ink);
  font-weight: 400;
  transition: color 200ms;
}
.subnav-links a.active {
  font-weight: 500;
}
.subnav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
}
.subnav-links a:hover { color: var(--grey-2); }
.subnav-cta { display: flex; gap: 8px; align-items: center; }
.subnav-cta .btn { padding: 8px 18px; font-size: 13px; }

/* Has-subnav nav stacking handled per-page via hero padding */

.nav-burger {
  display: none;
  width: 24px;
  height: 18px;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transition: transform 300ms var(--ease-out), opacity 200ms;
}
.nav-burger span:nth-child(1) { top: 2px; }
.nav-burger span:nth-child(2) { top: 9px; }
.nav-burger span:nth-child(3) { top: 16px; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  background: var(--bg);
  z-index: 98;
  padding: 32px var(--content-pad);
  transform: translateY(-100%);
  transition: transform 360ms var(--ease-out);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
}
.nav-open .nav-drawer {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;
}

.nav-drawer a {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--grey-6);
  letter-spacing: -0.01em;
}

.nav-drawer .btn {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  color: var(--bg) !important;
}
.nav-drawer .btn:hover {
  color: var(--bg) !important;
}

@media (max-width: 880px) {
  .nav-links, .nav-actions .nav-cta { display: none; }
  .nav-burger { display: block; }
  /* Keep the region pill visible on mobile, sitting beside the burger. */
  .nav-actions { gap: 8px; margin-left: auto; margin-right: 14px; }
  .nav-actions .region-pill { display: inline-flex; padding: 5px 11px 5px 6px; font-size: 12px; }
  .nav-actions .region-pill img { width: 18px; height: 18px; }
  .subnav-links {
    gap: 24px;
    font-size: 13px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
  }
  .subnav-links::-webkit-scrollbar { display: none; }
  .subnav-links a { white-space: nowrap; flex-shrink: 0; }
  .subnav-cta .btn { padding: 7px 14px; font-size: 12px; }
}
@media (max-width: 600px) {
  .subnav-inner { flex-direction: column; align-items: flex-start; gap: 0; height: auto; padding: 8px var(--content-pad); }
  .subnav-links { padding-bottom: 12px; overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .subnav-links a.active::after { bottom: 5px; }
  .subnav-cta { padding: 4px 0 8px; }
  body.has-subnav { padding-top: 0 !important; }
}

/* =========================================================
   Cards — Polestar style: flat, sharp, thin borders
   ========================================================= */

.card {
  background: var(--bg);
  border: 1px solid var(--grey-6);
  border-radius: 8px;
  box-shadow: none;
  padding: clamp(28px, 3vw, 40px);
}

.card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: clamp(28px, 3vw, 40px);
  color: var(--bg);
}

.card-hover {
  transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.card-hover:hover {
  border-color: var(--grey-3);
  transform: none;
  box-shadow: none;
}

/* Eyebrow section labels */
.section-label.on-dark { color: var(--grey-3); }
.section-label.moss { color: var(--grey-3); }
.section-label.moss-light { color: var(--grey-3); }
.section-label.wheat { color: var(--grey-3); }

/* Badge — Polestar uses very minimal pill-free labels */
.badge {
  display: inline;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
}
.badge.wheat { color: var(--ink); }
.badge.on-light { color: var(--ink); }
.badge.dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--available);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s infinite;
}
.bg-dark .badge,
.badge.on-dark { color: var(--ink); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,157,91,0.5); }
  100% { box-shadow: 0 0 0 8px rgba(46,157,91,0); }
}

/* Feature chip — Polestar uses simple text rows, no pills */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
}
.bg-dark .chip { color: var(--ink); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}
.chip-row .chip::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  margin-right: 10px;
}

/* =========================================================
   Site-wide pre-footer disclaimer
   ========================================================= */
/* =========================================================
   Insights — newsletter sign-up CTA (sits above disclaimer)
   ========================================================= */
.insights {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--grey-6);
  background: var(--bg);
  padding: clamp(72px, 9vw, 128px) var(--content-pad);
  overflow: hidden;
}
.insights > .section-bg-art { z-index: 0; }
.insights-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.insights-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey-3);
  margin: 0 0 18px;
}
.insights-title {
  font-family: var(--font-sans);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 18ch;
  text-wrap: balance;
}
.insights-body {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--grey-2);
  margin: 0;
  max-width: 48ch;
}
.insights-form-wrap { width: 100%; }
.insights-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.insights-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--grey-5);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.2;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.insights-input::placeholder { color: var(--grey-4); }
.insights-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.insights-submit {
  flex-shrink: 0;
  height: 48px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  border-radius: 50px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.insights-submit:hover { background: var(--grey-1); border-color: var(--grey-1); }
.insights-privacy {
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey-3);
  margin: 14px 0 0;
  max-width: 46ch;
}
.insights-success {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--grey-5);
  border-radius: 50px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
}.insights.is-subscribed .insights-form,
.insights.is-subscribed .insights-privacy { display: none; }
.insights.is-subscribed .insights-success { display: flex; }
@media (max-width: 860px) {
  .insights-inner { grid-template-columns: 1fr; gap: 36px; }
  .insights-title { max-width: 24ch; }
}
@media (max-width: 560px) {
  .insights-form { flex-direction: column; }
  .insights-input { flex: none; width: 100%; }
  .insights-submit { width: 100%; }
}

.disclaimer {
  background: var(--bg);
  border-top: 1px solid var(--grey-6);
  padding: clamp(60px, 7vw, 96px) 0;
  color: var(--grey-2);
}
.disclaimer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.disclaimer-header {
  margin-bottom: clamp(40px, 5vw, 56px);
}
.disclaimer-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey-3);
  margin: 0 0 16px;
}
.disclaimer-title {
  font-family: var(--font-sans);
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 720px) {
  .disclaimer-title { font-size: 32px !important; }
}
.disclaimer-body {
  display: grid;
  gap: 14px;
  max-width: 880px;
}
.disclaimer-body p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--grey-2);
  margin: 0;
  max-width: none;
}

/* =========================================================
   Footer — light grey, simple link columns
   ========================================================= */

.footer {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  color: var(--ink);
  padding: 80px 0 32px;
  border-top: 1px solid var(--grey-6);
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 55% at 18% 30%, rgba(92, 219, 149, 0.10), transparent 70%),
    radial-gradient(45% 50% at 82% 70%, rgba(212, 168, 75, 0.05), transparent 70%);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: clamp(48px, 7vw, 96px);
  row-gap: 40px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--grey-5);
}
.footer-brand { padding-right: clamp(40px, 8vw, 120px); }
.footer-brand .nav-logo { font-size: 18px; margin-bottom: 16px; color: var(--ink); }
.footer-brand .nav-logo .logo-svg { height: 28px; }
.footer-tag { color: var(--grey-2); max-width: 360px; line-height: 1.5; font-size: 14px; }

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: grid; gap: 14px; }
.footer-col a, .footer-col li { color: var(--grey-2); transition: color 200ms; font-size: 14px; }
.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--grey-3);
  line-height: 1.6;
}
.footer-bottom .legal { max-width: 720px; }

@media (max-width: 980px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
    padding-bottom: 40px;
  }
  .footer-brand { padding-right: 0; grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; row-gap: 32px; }
}

/* =========================================================
   Scroll reveal
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   Hero / Imagery placeholders
   ========================================================= */

.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.025) 0 2px,
      transparent 2px 14px),
    linear-gradient(180deg, #EFEFEF, #DFDFDF);
  border: 1px solid var(--grey-6);
  border-radius: 0;
  display: grid;
  place-items: center;
  color: var(--grey-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.placeholder.on-dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.03) 0 2px,
      transparent 2px 14px),
    linear-gradient(180deg, #1A1A1A, #0A0A0A);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
}
.placeholder .ph-label {
  padding: 5px 10px;
  background: rgba(0,0,0,0.04);
  border-radius: 2px;
  text-transform: lowercase;
}
.placeholder.on-dark .ph-label { background: rgba(255,255,255,0.05); }

/* Polestar-style "studio" hero image: light grey with subtle gradient */
.studio-bg {
  background: linear-gradient(180deg, #ECECEC 0%, #DCDCDC 70%, #C8C8C8 100%);
}

/* =========================================================
   Tables
   ========================================================= */

.table-wrap {
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  border-top: 1px solid var(--grey-5);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th, .table td {
  padding: 18px 16px;
  text-align: right;
  border-bottom: 1px solid var(--grey-6);
  font-weight: 400;
}
.table th:first-child, .table td:first-child { text-align: left; padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th {
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--grey-3);
  border-bottom: 1px solid var(--grey-5);
}
.table tbody tr:hover td { background: var(--bg-soft); }
.table .num { font-variant-numeric: tabular-nums; color: var(--ink); }
.table .pos { color: var(--ink); font-weight: 500; }

/* =========================================================
   Form
   ========================================================= */

.form-field {
  display: grid;
  gap: 6px;
}
.form-field label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey-3);
  font-family: var(--font-sans);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--grey-5);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color 200ms;
  box-sizing: border-box;
}
.form-field input,
.form-field select {
  height: 48px;
  line-height: 1.2;
}
/* Strip native chrome on selects (Safari/macOS otherwise applies its own
   rounded border that breaks the consistent 8px radius). Replace the
   native dropdown caret with a custom chevron so the field still reads
   as a select. */
.form-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  padding-right: 38px;
}
/* Match dark-section selects too — chevron in white */
.bg-dark .form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Dark-form variant (kept for cases that genuinely sit on dark — n/a in v2 light theme) */
.bg-dark .form-field label { color: var(--grey-3); }
.bg-dark .form-field input,
.bg-dark .form-field select,
.bg-dark .form-field textarea {
  background: var(--bg);
  border-color: var(--grey-5);
  color: var(--ink);
}
.bg-dark .form-field input:focus,
.bg-dark .form-field select:focus,
.bg-dark .form-field textarea:focus {
  border-color: var(--ink);
}

/* =========================================================
   Registered / trademark marks — small, slightly raised,
   typographic consistency across all ® and ™ symbols.
   ========================================================= */
sup.reg-mark {
  font-size: 0.55em;
  /* Use vertical-align to lift the glyph above baseline without
     affecting line-height of the surrounding text. */
  vertical-align: 0.45em;
  line-height: 0;
  font-weight: inherit;
  letter-spacing: 0;
  /* Subtle horizontal breathing room from the word it follows */
  margin-left: 0.04em;
}

.faq-item {
  background: var(--bg);
  border: none;
  border-top: 1px solid var(--grey-5);
  border-radius: 0;
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--grey-5); }
.faq-item summary {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding: 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p {
  margin-top: 12px;
  color: var(--grey-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}

/* =========================================================
   v2 overrides — force inline-style cards to sharp 4px corners
   and tighten legacy uppercase/letterspaced labels
   ========================================================= */

.tile,
.window-card,
.app-card,
.roi-card,
.order-card,
.bio-stat-card,
.rainforest-card,
.team-card,
.team-photo,
.press-card,
.checklist,
.spec-grid,
.contact-form,
.register-form,
.step,
.table-wrap {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.btn,
.nav-cta {
  border-radius: 50px !important;
}

/* Drop AI-slop circular gradient glow inside tiles */
.tile::before,
.order-card::before { display: none !important; }

/* Trust-strip and other legacy uppercase labels → sentence case */
.trust-strip,
.app-num,
.window-num,
.checklist-title,
.roi-label,
.value-num,
.stat-label,
.bsc-label,
.app-section h5,
.rf-meta,
.tile-stats span,
.press-date,
.team-title,
.nav-drawer .nav-logo,
.footer-col h4 {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-sans) !important;
}

/* Sharper trust-strip: muted small text, no caps */
.trust-strip {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--grey-3) !important;
}
.trust-strip .dot-sep {
  background: var(--grey-4) !important;
  opacity: 1 !important;
}

/* Remove the animated pulse rings (felt sci-fi, not Polestar) */
.rf-ring, .rf-core {
  animation: none !important;
  border-color: var(--grey-5) !important;
  background: var(--grey-5) !important;
  box-shadow: none !important;
}
.rf-dot {
  background: var(--ink) !important;
  box-shadow: none !important;
}

/* Spec-row in v1 verdara page: looked like a striped table — convert to clean Polestar rows */
.spec-row {
  border-bottom: 1px solid var(--grey-6) !important;
}
.spec-row dt {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--grey-3) !important;
}
.spec-row dd {
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
}

/* Stat numbers — keep tabular look but ink colour */
.stat-num, .ps-num, .bsc-big, .roi-net, .order-price {
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}
.stat-num .stat-sep, .stat-num .stat-unit { color: var(--ink) !important; }
.roi-unit, .op-unit { color: var(--grey-3) !important; }

/* Tile and product imagery: light bg, ink text */
.tile,
.order-card,
.window-card,
.app-card,
.bio-stat-card,
.rainforest-card,
.contact-form,
.register-form {
  background: var(--bg) !important;
  border: 1px solid var(--grey-6) !important;
  color: var(--ink) !important;
}
.tile-title, .tile-subtitle, .tile-body, .tile-stats strong,
.order-title, .order-sub, .order-pack, .order-list li,
.window-card .h3, .window-body,
.app-card .h3, .app-section p, .app-section h5,
.bsc-label, .bsc-caption,
.rf-meta, .rf-stats span, .rf-stats label,
.quote-body, .quote-name, .quote-role {
  color: var(--ink) !important;
}
.tile-subtitle, .tile-body, .order-sub, .order-pack, .order-list li,
.window-body, .app-section p, .bsc-caption,
.rf-stats label, .quote-role {
  color: var(--grey-2) !important;
}
.app-section h5, .app-num, .window-num, .rf-meta, .tile-stats span {
  color: var(--grey-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
.app-gs { white-space: nowrap; }
.app-timing {
  color: var(--grey-3) !important;
  letter-spacing: 0 !important;
}
.tile-stats {
  border-color: var(--grey-6) !important;
}
.order-list li::before {
  background: var(--ink) !important;
  width: 4px !important;
  height: 4px !important;
}
.order-list {
  border-color: var(--grey-6) !important;
}

/* Vision quote: light bg, large ink quote */
.quote-section .quote-body {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
.quote-mark text { fill: var(--grey-5) !important; }

/* Hero specific: reduce display-accent to same ink color */
.display-accent { color: var(--ink) !important; }

/* Remove window-line and similar accent strokes (too decorative for Polestar) */
.window-line {
  background: var(--grey-5) !important;
  opacity: 1 !important;
}
.mech-dot { background: var(--ink) !important; box-shadow: none !important; }

/* Step icons — black ink */
.step-icon, .step-num {
  color: var(--ink) !important;
}
.step .h3 + p { color: var(--grey-2) !important; }
.checklist svg { color: var(--ink) !important; }

/* Team quote inherits border colour */
.team-quote {
  border-left-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* Press card / media — drop hover lift */
.press-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--grey-3) !important;
}

/* ===== Section background art — shared across pages ============
   Apply `has-bg-art` + a child `<div class="section-bg-art">` to
   any section that hosts glass modules. The wash gives the frosted
   surfaces something to refract. */
.has-bg-art { position: relative; isolation: isolate; }
.has-bg-art > * { position: relative; z-index: 1; }
.section-bg-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Two ultra-soft conic-blob layers — no heavy blur (which was producing
     GPU banding artifacts on retina). Stops are chosen so the alpha
     quantization step is too small to perceive at any zoom. */
  background:
    radial-gradient(120% 90% at 12% 14%, rgba(92, 219, 149, 0.14), transparent 65%),
    radial-gradient(120% 90% at 88% 90%, rgba(212, 168, 75, 0.10), transparent 65%);
}
.section-bg-art::after { content: none; }

.section-bg-art--mirror {
  background:
    radial-gradient(120% 90% at 88% 14%, rgba(92, 219, 149, 0.14), transparent 65%),
    radial-gradient(120% 90% at 12% 90%, rgba(212, 168, 75, 0.10), transparent 65%);
}

.section-bg-art--soft {
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(92, 219, 149, 0.09), transparent 65%),
    radial-gradient(120% 80% at 50% 85%, rgba(212, 168, 75, 0.07), transparent 65%);
}

/* === Frosted glass on product/order/spec cards ===========================
   Sits over a soft gradient wash (`.section-bg-art`) so the blur
   has colour to refract — without that, glass on plain grey reads
   as a flat panel. Dark emphasis cards (.bio-stat-card,
   .roi-card--featured) keep their solid ink finish and are
   re-asserted further down the file. */
.tile,
.order-card,
.window-card,
.app-card,
.step,
.checklist,
.spec-grid,
.team-card,
.press-card,
.contact-form,
.register-form,
.pricing-grid > .card,
.values-grid > .card,
.faq-item.card-glass {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 60px -28px rgba(0, 0, 0, 0.10) !important;
}
.tile.tile-wheat {
  /* Match Verdara tile — neutral, glass over the wash provides the only colour */
  background: rgba(255, 255, 255, 0.55) !important;
}

/* Re-assert dark emphasis cards (these intentionally stay solid) */
.bio-stat-card,
.roi-card--featured {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ink) !important;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.30) !important;
}

/* Spec-grid: keep the inset highlight but drop the outer drop-shadow */
.spec-grid {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* Featured ROI card — Polestar-style inverted emphasis card.
   Properly white-on-black; overrides the generic .roi-card -> ink
   colour rules above. */
.roi-card--featured {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
}
.roi-card--featured .roi-label,
.roi-card--featured .roi-net,
.roi-card--featured .roi-row,
.roi-card--featured .roi-row span,
.roi-card--featured .roi-row .num,
.roi-card--featured .roi-final,
.roi-card--featured .roi-final .num {
  color: var(--bg) !important;
}
.roi-card--featured .roi-label {
  color: rgba(255,255,255,0.65) !important;
}
.roi-card--featured .roi-unit {
  color: rgba(255,255,255,0.55) !important;
}
.roi-card--featured .roi-final {
  border-top: none !important;
}
.roi-card--featured .roi-row {
  border-bottom-color: rgba(255,255,255,0.16) !important;
}
.roi-card--featured .badge,
.roi-card--featured .badge.on-light {
  background: rgba(255,255,255,0.12) !important;
  color: var(--bg) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Bio-stat-card on Verdara — Polestar-style inverted emphasis card */
.bio-stat-card {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
}
.bio-stat-card .bsc-big,
.bio-stat-card .bsc-label {
  color: var(--bg) !important;
}
.bio-stat-card .bsc-big span,
.bio-stat-card .bsc-caption {
  color: rgba(255,255,255,0.6) !important;
}
.bio-stat-card .bsc-row {
  border-bottom-color: rgba(255,255,255,0.16) !important;
}

.spec-strip {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  max-width: 480px;
}
.spec-strip-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.spec-strip-rows {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--grey-2);
}
.spec-strip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  column-gap: 24px;
  white-space: nowrap;
}
.spec-strip-row span:first-child { color: var(--grey-2); }
.spec-strip-row span:last-child {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec-strip-row sup { font-size: 0.7em; }