/* ── Poppins, self-hosted ────────────────────────────────────────────────────
 * These files used to come from fonts.gstatic.com, discovered through a
 * render-blocking stylesheet on fonts.googleapis.com whose only content was these
 * same @font-face rules. That is a blocking request on the critical path to learn
 * about a second origin, for ~40 KB of font we can simply ship.
 *
 * The unicode-range split is Google's own and is load-bearing: a page of English
 * copy fetches only the five `latin` files, while a company scorecard that mentions
 * Nestlé or Ørsted pulls the matching `latin-ext` file on demand. Collapsing them
 * into one file per weight would make every visitor pay for glyphs almost none of
 * them render.
 *
 * font-display: swap keeps text visible during the fetch — the same behaviour the
 * old `&display=swap` query parameter asked for.
 *
 * ops/generate_critical_css.py always copies @font-face rules into the inlined
 * critical block, which is what makes these discoverable at first parse now that no
 * stylesheet blocks rendering.
 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/poppins-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/poppins-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/poppins-400-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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/poppins-500-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/poppins-600-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/poppins-700-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: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/poppins-800-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;
}

:root {
  --orange: #ff7300;
  --orange-bright: #ff8200;
  /* --orange-dark (#d95500) WAS HERE AND IS DELETED. 2026-07-23.
     It was the last darker orange in the product, and it outlived the 2026-07-21
     retirement below because that pass moved --orange-deep and stopped: nine rules in
     this file named --orange-dark instead — .eyebrow, .verdict-back,
     .verdict-finding__src, .verdict-scorecard-link, .scorecard-link, .issue-view-all,
     .breakdown-sample, .analysis-source-bar a, .availability — and the extension spent it
     on two button hovers, three wizard marks and the MIXED verdict tone. All of them now
     take --orange (hovers take --orange-bright, which is the direction site.css already
     brightened .btn--fill-orange).

     Deleted rather than left declared-and-unused so it cannot quietly come back: the
     ramp in extension/tests/brand-colors.test.mjs is derived from these declarations, so
     dropping it here also drops it from that test's allow-list, and #d95500 anywhere in
     extension/src now fails the build. There is one orange. Do not add a darker one. */
  /* The TEXT end of the ramp, and it is now the brand orange itself.

     It was a genuinely darker step (#c2560a, then #a94a04) so orange words would clear
     WCAG AA on the grounds this site uses. RETIRED ON 2026-07-21 BY EXPLICIT DECISION of
     the product owner: the darker value reads as brown next to the brand, and matching
     the rest of the site's orange won over the contrast gain. Orange text now measures
     2.4-2.7:1 against a 4.5:1 floor — knowingly, not by accident.

     The build still gates contrast: ops/browser/probe.mjs fails on every violation whose
     foreground is NOT this exact colour, so a regression in any other colour is caught.
     extension/tests/brand-colors.test.mjs pins this value; update both together.

     The name is kept because the ramp is mirrored by the extension and by DESIGN.md, and
     because putting a text-safe step back means changing this one line. */
  --orange-deep: #ff7300;
  --orange-grad: linear-gradient(132deg, #ff7c00 0%, #ff6900 100%);  /* the ONE brand bar/band gradient — deeper/richer orange */
  --cream: #fffaf4;
  --cream-deep: #fff1df;
  --paper: #ffffff;
  --ink: #000000;
  --muted: #5f6065;
  --line: #e5e5e5;
  --green: #49a742;
  --red: #e65345;
  --amber: #dc9800;
  --shadow-sm: 0 8px 22px rgba(74, 46, 24, 0.07);
  --shadow-md: 0 18px 50px rgba(74, 46, 24, 0.1);
  --shadow-lg: 0 28px 70px rgba(57, 31, 10, 0.18);
  --radius: 22px;
  --shell: min(1560px, calc(100% - 112px));
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--cream);
  font-family: "Poppins", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

/* ── Inline icons (templates/_icons.html) ────────────────────────────────────
 * The <i> wrapper is what makes this a drop-in replacement for the Font Awesome
 * markup it succeeded: a dozen rules across this file and company.css size icons
 * with `font-size` on an ancestor or on the <i> itself (`.analysis-all i`,
 * `.sc-source i`, `.waitlist-bell`, `.mobile-modal__icon`). A 1em-square SVG
 * inherits that sizing exactly as a glyph did, and `currentColor` inherits the
 * colour, so none of those rules needed to change.
 *
 * -0.125em is the usual icon-font optical baseline nudge; without it an inline SVG
 * sits on the baseline and rides high next to its label.
 */
.ic > svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* The <symbol> definitions injected by icon_sprite(). Same removed-from-flow treatment
 * as the browser sprite below, and for the safer of the two reasons: display:none on a
 * sprite has a history of breaking <use> resolution, and there is nothing to gain by
 * risking it. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The <symbol> definitions injected by browser_sprite(). display:none would be
 * simpler but breaks gradient rendering in some engines, so it is removed from flow
 * while staying technically rendered. */
.browser-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.browser-mark {
  display: block;
  width: 1em;
  height: 1em;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
}

.browser-mark--button {
  width: 21px;
  height: 21px;
}

.browser-mark--inline {
  width: 23px;
  height: 23px;
}

.browser-mark--card {
  width: 52px;
  height: 52px;
}

.browser-mark--coming {
  width: 38px;
  height: 38px;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 116px 0;
}

.section--paper {
  background: var(--cream);
}

.section--white {
  background: var(--cream);
}

.section-heading {
  max-width: 880px;
  margin: 0 auto 54px;
  text-align: center;
}

.section-heading--left {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow--pill {
  padding: 8px 16px;
  border: 1px solid rgba(255, 115, 0, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
  text-transform: none;
}

.section-heading h2 {
  margin: 0 0 18px;
  font-size: clamp(2.35rem, 4.7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.section-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

/* Emphasis inside running text, so it is TEXT and takes the deep end. --orange as a
   foreground is 2.6:1 on white; the brand rule fixes contrast by darkening text, never by
   dulling an orange surface. */
.accent {
  color: var(--orange-deep);
}

.btn {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--dark {
  color: #fff;
  background: #262626;
  box-shadow: 0 13px 28px rgba(31, 31, 31, 0.22);
}

.btn--dark:hover {
  background: #111;
  box-shadow: 0 17px 34px rgba(31, 31, 31, 0.3);
}

.btn--hero-download {
  color: #000;
  border-color: rgba(255, 255, 255, 0.72);
  background: #fffaf4;
  box-shadow: 0 13px 30px rgba(133, 53, 0, 0.2);
}

.btn--hero-download:hover {
  background: #fff;
  box-shadow: 0 17px 36px rgba(133, 53, 0, 0.26);
}

.btn--outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.13);
}

.btn--outline-orange {
  color: var(--orange);
  border-color: var(--orange);
  background: #fff;
}

.btn--outline-orange:hover {
  background: #fff8f0;
}

/* Filled brand orange with white text. FLAT #ff7300, not the band gradient: a button is
   a small mark, and the gradient belongs to the large surfaces (bars, bands, hero).
   KNOWN AND ACCEPTED, by explicit request: white on #ff7300 is 2.73:1, below the 4.5:1
   AA floor — the same deliberate trade every other orange surface on the site already
   carries (see .sc-why in company.css). Do not darken it without asking. */
.btn--fill-orange {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 12px 26px rgba(190, 90, 0, 0.22);
}

.btn--fill-orange:hover {
  background: #ff8214;
  box-shadow: 0 16px 32px rgba(190, 90, 0, 0.28);
}

.btn--block {
  width: 100%;
}

.brand-mark {
  display: inline-flex;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--orange);
  background: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 7px 20px rgba(102, 45, 0, 0.12);
}

.site-header {
  --fold-top-left: 0%;
  --fold-top-right: 100%;
  --fold-bottom-right-x: 100%;
  --fold-bottom-right-y: 100%;
  --fold-bottom-left: 0%;
  --fold-radius-right: 0%;
  --fold-radius-left: 0%;
  --fold-cream-lift: 0px;    /* extra climb of the bottom cream sweep (mobile scroll fold) */
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border-radius: 0 0 var(--fold-radius-right) var(--fold-radius-left);
  clip-path: polygon(
    var(--fold-top-left) 0%,
    var(--fold-top-right) 0%,
    var(--fold-bottom-right-x) var(--fold-bottom-right-y),
    var(--fold-bottom-left) 100%
  );
  color: #fff;
  background: var(--orange-grad);
  transform-origin: top center;
  will-change: clip-path, border-radius;
  /* will-change on clip-path makes this element a STACKING CONTEXT, whether or not a
     clip-path is currently set. That silently trapped .site-nav's z-index: 20 (and the
     search dropdown's z-index: 100 inside it) in a z-index:auto layer, so any positioned
     element further down the document — every .dir-card__mark, which is position:
     relative for its logo — painted straight through the open search panel. The header
     owns an overlay, so it gets an explicit layer of its own. Below .mobile-modal
     (10000) and the consent banner, which must still cover it. */
  z-index: 40;
}

/* Inner-page variant: the same orange bar + shared .site-nav, without the tall
   hero fold. Lets /company/* and /companies reuse the homepage top bar exactly. */
/* Double class = higher specificity so these beat the base .site-header rules
   regardless of source order (the homepage fold rules come later in the file). */
.site-header.site-header--bar {
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  clip-path: none;
  /* The inner-page bar has no fold to animate (see the ::after reset below), so the hint
     is pure cost — and a will-change that names clip-path keeps forcing a stacking
     context and its own compositor layer for a property this element never changes. */
  will-change: auto;
}
.site-header.site-header--bar .site-nav {
  min-height: 104px;   /* match the homepage nav height so the top bar is identical everywhere */
}
/* No curved cream fold on the inner bar (that belongs to the homepage hero). */
.site-header.site-header--bar::after {
  content: none;
  display: none;
}

/* The one shared footer (templates/_footer.html), used on every page. */
.foot {
  margin-top: 40px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  background: transparent;   /* blend with each page's bg — no warm/orange-tinted box */
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.foot__logo {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.foot__links a {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.foot__links a:hover {
  color: var(--orange);
}
.social-icon {
  display: block;
  width: 18px;
  height: 18px;
}
.foot__social-link {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.foot__copy {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .foot__copy { margin-left: 0; }
}
/* On the homepage the footer sits inside the orange .closing-panel — flip it to
   light text and drop the divider line (it stays dark-on-light on every other page). */
.closing-panel .foot { border-top: none; }
.closing-panel .foot__logo { color: #fff; }
.closing-panel .foot__links a { color: rgba(255, 255, 255, 0.9); }
.closing-panel .foot__links a:hover { color: #fff; }
.closing-panel .foot__copy { color: rgba(255, 255, 255, 0.82); }

.hero-blobs {
  position: absolute;
  z-index: 0;
  inset: 104px 0 0 0;      /* start below the nav so the top bar is flat orange, identical on every page */
  overflow: hidden;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  animation:
    bubble-float var(--float-duration, 12s) ease-in-out var(--float-delay, 0s) infinite,
    bubble-morph var(--morph-duration, 16s) ease-in-out var(--morph-delay, 0s) infinite alternate;
  background:
    radial-gradient(ellipse at 29% 24%, rgba(255, 235, 207, 0.32), rgba(255, 194, 112, 0.16) 42%, rgba(255, 137, 22, 0.08) 72%),
    linear-gradient(145deg, rgba(255, 199, 125, 0.3), rgba(255, 146, 34, 0.12));
  box-shadow:
    inset 15px 17px 30px rgba(255, 238, 214, 0.08),
    inset -18px -22px 36px rgba(226, 87, 0, 0.08);
  opacity: 0.78;
  will-change: transform, border-radius;
}

@keyframes bubble-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--bubble-rotation, 0deg)) scale(1);
  }
  34% {
    transform: translate3d(var(--float-x-one, 16px), var(--float-y-one, -22px), 0) rotate(calc(var(--bubble-rotation, 0deg) + var(--float-rotate-one, 3deg))) scale(1.07, 0.94);
  }
  68% {
    transform: translate3d(var(--float-x-two, -12px), var(--float-y-two, 13px), 0) rotate(calc(var(--bubble-rotation, 0deg) + var(--float-rotate-two, -2deg))) scale(0.95, 1.08);
  }
}

@keyframes bubble-morph {
  0%, 100% {
    border-radius: 60% 40% 56% 44% / 46% 59% 41% 54%;
  }
  32% {
    border-radius: 47% 53% 62% 38% / 57% 43% 55% 45%;
  }
  66% {
    border-radius: 62% 38% 45% 55% / 42% 54% 46% 58%;
  }
  84% {
    border-radius: 52% 48% 59% 41% / 58% 40% 60% 42%;
  }
}

.hero-blob::after {
  position: absolute;
  top: 16%;
  left: 18%;
  width: 32%;
  height: 19%;
  border-radius: 68% 32% 61% 39% / 55% 64% 36% 45%;
  background: rgba(255, 242, 222, 0.1);
  content: "";
  transform: rotate(-16deg);
}

.hero-blob--one {
  --bubble-rotation: -13deg;
  --float-rotate-one: 3deg;
  --float-rotate-two: -2deg;
  --float-duration: 12s;
  --float-x-one: 16px;
  --float-x-two: -12px;
  --float-y-one: -22px;
  --float-y-two: 13px;
  --morph-duration: 17s;
  top: 7%;
  left: 6%;
  width: 152px;
  height: 126px;
  border-radius: 63% 37% 55% 45% / 44% 62% 38% 56%;
  transform: rotate(-13deg);
}

.hero-blob--two {
  --bubble-rotation: 17deg;
  --float-delay: -5s;
  --float-duration: 14s;
  --float-rotate-one: -4deg;
  --float-rotate-two: 2deg;
  --float-x-one: -18px;
  --float-x-two: 10px;
  --float-y-one: 13px;
  --float-y-two: -20px;
  --morph-delay: -8s;
  --morph-duration: 19s;
  top: 8%;
  left: 70%;
  width: 184px;
  height: 142px;
  border-radius: 41% 59% 68% 32% / 57% 39% 61% 43%;
  opacity: 0.58;
  transform: rotate(17deg);
}

.hero-blob--three {
  --bubble-rotation: -21deg;
  --float-delay: -10s;
  --float-duration: 16s;
  --float-rotate-one: 2deg;
  --float-rotate-two: -4deg;
  --float-x-one: 13px;
  --float-x-two: -16px;
  --float-y-one: 19px;
  --float-y-two: -12px;
  --morph-delay: -4s;
  --morph-duration: 20s;
  top: 48%;
  right: -82px;
  width: 266px;
  height: 238px;
  border-radius: 55% 45% 38% 62% / 34% 57% 43% 66%;
  opacity: 0.5;
  transform: rotate(-21deg);
}

.hero-blob--four {
  --bubble-rotation: 11deg;
  --float-delay: -3s;
  --float-duration: 13s;
  --float-rotate-one: -3deg;
  --float-rotate-two: 4deg;
  --float-x-one: -15px;
  --float-x-two: 17px;
  --float-y-one: -18px;
  --float-y-two: 10px;
  --morph-delay: -13s;
  --morph-duration: 18s;
  bottom: -96px;
  left: 3%;
  width: 240px;
  height: 216px;
  border-radius: 38% 62% 48% 52% / 62% 43% 57% 38%;
  opacity: 0.62;
  transform: rotate(11deg);
}

.site-header::after {
  position: absolute;
  z-index: 5;
  bottom: -105px;
  left: 50%;
  width: 126%;
  height: 170px;
  border-radius: 50%;
  background: var(--cream);
  content: "";
  /* --fold-cream-lift slides the whole sweep up as you scroll (mobile fold).
     A translate, not a `bottom` change, so the scroll handler never triggers layout. */
  transform: translate(-50%, calc(-1 * var(--fold-cream-lift)));
  will-change: transform;
}

.site-nav {
  position: relative;
  z-index: 20;
  display: grid;
  width: var(--shell);
  min-height: 104px;
  align-items: center;
  margin: 0 auto;
  /* The search takes the spare width (1fr) and the link column sits hard against the
     right edge. Capping the search at 34rem was tried and reverted: the columns then did
     not fill the bar, so the freed space became dead space to the RIGHT of the links
     instead of widening the search. The links were never squeezed by the search — they
     were squeezed by a fixed `width` on .nav-links, which is what actually got fixed. */
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: clamp(20px, 2.6vw, 42px);
}

/* Colour is stated, not inherited. These are <a> elements, so a page-level `a { color }`
   (privacy_policy.html had one) beats the white inherited from .site-header and paints
   the whole top bar orange-on-orange. An inherited value loses to ANY direct rule. */
.site-logo {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: normal;   /* privacy_policy.html sets body{line-height:1.6}, which leaked in and made the bar 1px taller there */
}

.nav-links {
  display: flex;
  /* Was `width: 10.4rem` with `gap: 0`, leaning on space-between to fake the spacing —
     a box measured for exactly two links. Adding a third left it nowhere to go and the
     labels ran together as "CompaniesIssuesAbout". Real gap, width from the content, so
     the list stays correct at any number of links. */
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 1.9rem);
  line-height: normal;   /* same body{line-height} leak as .site-logo — the <ul> box inherits it too */
  list-style: none;
}

.nav-links a {
  position: relative;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: normal;
}

.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: #fff;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* The hamburger is a mobile-only control: it is off entirely until the ≤980px
   block below turns it on, so the desktop bar is untouched. */
.nav-toggle {
  display: none;
  /* Bare glyph, no chrome. The 44px box is kept as an invisible tap target — the
     bars themselves are far smaller than a finger. */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;         /* only ever seen as the focus ring's shape */
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard users still need to see where they are; pointer users see nothing. */
.nav-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Three bars drawn from one element: the middle is the element itself, the outer
   two are its pseudo-elements. On open they collapse into an X. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  content: "";
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before {
  top: -6px;
  left: 0;
}

.nav-toggle-bars::after {
  top: 6px;
  left: 0;
}

.site-nav.nav-open .nav-toggle-bars {
  transform: rotate(45deg);
}

.site-nav.nav-open .nav-toggle-bars::before {
  transform: translateY(6px) rotate(-90deg);
}

/* The bottom bar fades rather than stacking a third line under the X. */
.site-nav.nav-open .nav-toggle-bars::after {
  opacity: 0;
  transform: translateY(-6px);
}

.nav-search {
  position: relative;
  width: 100%;
  max-width: none;
}

.nav-search-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 17px;
  color: #a95a20;
  font-size: 0.84rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.nav-search-input {
  width: 100%;
  min-height: 45px;
  padding: 10px 16px 10px 42px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  outline: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 24px rgba(116, 55, 0, 0.08);
  font-size: 0.86rem;
  transition: box-shadow 180ms ease, background 180ms ease;
}

.nav-search-input::placeholder {
  color: #8f8580;
}

.nav-search-input:focus {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 13px 30px rgba(116, 55, 0, 0.16);
}

.nav-cta {
  min-height: 48px;
  padding-inline: 19px;
  border-radius: 10px;
  white-space: nowrap;
}

.search-results {
  position: absolute;
  z-index: 100;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  max-height: min(720px, calc(100vh - 130px));
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.search-results[hidden] {
  display: none;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.92rem;
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result:hover {
  background: var(--cream);
}

.search-result .name {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verdict-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}

.verdict-dot.positive,
.verdict-badge.positive {
  background: var(--green);
}

.verdict-dot.negative,
.verdict-badge.negative {
  background: var(--red);
}

.verdict-dot.neutral,
.verdict-badge.neutral {
  background: #efa91c;
}

.verdict-label {
  font-size: 0.7rem;
  font-weight: 700;
}

.verdict-label.positive {
  color: #278720;
}

.verdict-label.negative {
  color: #cb3e32;
}

.verdict-label.neutral {
  color: #a46d00;
}

.search-state {
  padding: 22px;
  color: var(--muted);
  font-size: 0.9rem;
}

.verdict-detail {
  padding: clamp(22px, 2.4vw, 34px);
}

.verdict-back {
  margin-bottom: 22px;
  padding: 0;
  border: 0;
  color: #000;
  background: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
}

.verdict-back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.verdict-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.verdict-badge {
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.verdict-name {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 750;
}

.verdict-cat {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.verdict-reason {
  max-width: 90ch;
  margin: 12px 0 16px;
  color: #000;
  font-size: 0.92rem;
  line-height: 1.65;
}

.verdict-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.verdict-tag {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.verdict-tag.support {
  color: #23761e;
  background: #e6f5e3;
}

.verdict-tag.oppose {
  color: #a8332b;
  background: #fae8e5;
}

/* The cited findings inside a search result's detail card (/api/company-findings).
   Same content as a /company/<slug> finding — topic, verbatim span, publisher — at
   dropdown scale, so the card says what Choice actually found instead of only that
   it found something. */
.verdict-findings {
  max-width: 1100px;
  margin-top: 18px;
}

.verdict-finding {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}

.verdict-finding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.verdict-finding__when {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Provenance caveats travel with the quote — a company's own account must never
   render like an independent report. */
.verdict-flag {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.verdict-finding__quote {
  max-width: 95ch;
  color: #000;
  font-size: 0.92rem;
  line-height: 1.65;
}

.verdict-finding__src {
  display: inline-block;
  margin-top: 8px;
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}

.verdict-finding__src:hover {
  text-decoration: underline;
}

.verdict-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* site.css owns the search dropdown; company.css only styles the scorecard page, so
   the link needs a rule here too or it renders as unstyled body text on every other
   page in the site. */
.verdict-scorecard-link {
  display: inline-block;
  margin-top: 14px;
  color: #000;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
}

.verdict-scorecard-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.search-results .verdict-scorecard-link--primary {
  padding: 13px 18px;
  border: 2px solid #000;
  border-radius: 10px;
  color: #fff;
  background: #000;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  font-size: 0.92rem;
  font-weight: 750;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.search-results .verdict-scorecard-link--primary:hover {
  background: #242424;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transform: translateY(-1px);
}

.search-results .verdict-scorecard-link--primary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.hero {
  position: relative;
  z-index: 10;
  display: grid;
  width: var(--shell);
  align-items: center;
  margin: clamp(48px, 5vw, 72px) auto 0;
  grid-template-columns: minmax(520px, 0.85fr) minmax(640px, 1.15fr);
  gap: clamp(48px, 4.2vw, 70px);
}

.hero-copy {
  padding-bottom: 28px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.hero-kicker i {
  font-size: 0.68rem;
}

/* The three hero blocks (headline / lede / install button) sat in ~415px of a 760px
   orange fold, bunched at the top with dead space beneath. These gaps open the rhythm
   out; clamped so phones do not inherit desktop-sized air. */
/* White is stated rather than inherited from .site-header. Visually identical, but an
   inherited colour loses to ANY rule that sets one, however low its specificity — which
   is exactly how company.css's plain `h1` rule once painted this headline brown when
   the critical-CSS collector emitted it after .hero h1. Declaring it here means
   specificity, not source order, decides. See ops/generate_critical_css.py. */
.hero h1 {
  max-width: 690px;
  margin-bottom: clamp(22px, 2.5vw, 38px);
  color: #fff;
  font-size: clamp(3.25rem, 4.4vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.062em;
  line-height: 0.99;
}

/* Keeps a trailing phrase whole so the headline breaks at a deliberate point
   instead of orphaning the last word. Released below 720px, where the viewport
   is too narrow to guarantee the phrase fits on one line. */
.nowrap-tail {
  white-space: nowrap;
}

.hero-lede {
  max-width: 630px;
  margin-bottom: clamp(30px, 3.4vw, 52px);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 33px;
}

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px 0;
  list-style: none;
}

.hero-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.75rem;
  font-weight: 550;
}

.hero-benefits li + li::before {
  width: 1px;
  height: 28px;
  margin: 0 18px;
  background: rgba(255, 255, 255, 0.35);
  content: "";
}

.hero-benefits i {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.hero-visual {
  position: relative;
  align-self: start;
  margin-top: 4px;
}

.hero-visual::before {
  position: absolute;
  z-index: -1;
  top: 9%;
  right: -7%;
  width: 37%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 192, 107, 0.24);
  content: "";
}

/* The white frame is a box-shadow SPREAD, not a border, and the ratio is the demo
 * images' exact 1600x902 rather than an approximate 16/9.03.
 *
 * These two changes are one fix. `* { box-sizing: border-box }` means aspect-ratio
 * applies to the BORDER box, so a 10px border on all sides made the content box —
 * the box the screenshot is painted into — a different shape from the frame: at a
 * 1350px viewport the stage measured 661x373 (1.772, as asked) but the image inside
 * it measured 641x353 (1.816). object-fit:cover then cropped ~1% off the top and
 * bottom of every hero screenshot, and image audits reported the demos as distorted.
 *
 * The 20px could not be compensated for with a fixed ratio because it is absolute
 * while the ratio is proportional — the error changes with viewport width. A shadow
 * spread paints the same 10px frame without taking layout space, so the content box
 * now equals the border box and the ratio is exactly the file's. Keep var(--shadow-lg)
 * second: the frame must be the inner of the two shadows.
 */
.browser-stage {
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  background: #f2f2f2;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.95), var(--shadow-lg);
  aspect-ratio: 1600 / 902;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 650ms ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-section {
  padding-top: 132px;
  overflow: hidden;
}

.soft-orb {
  position: absolute;
  background:
    radial-gradient(ellipse at 31% 25%, rgba(255, 250, 241, 0.98), rgba(255, 218, 169, 0.68) 53%, rgba(255, 174, 67, 0.27) 78%),
    linear-gradient(145deg, #ffe4bd, rgba(255, 184, 88, 0.42));
  box-shadow:
    inset 18px 16px 28px rgba(255, 255, 255, 0.16),
    inset -22px -20px 38px rgba(255, 163, 44, 0.08);
  opacity: 0.66;
  filter: blur(0.2px);
  pointer-events: none;
}

.soft-orb--how-left {
  top: 110px;
  left: -70px;
  width: 200px;
  height: 200px;
  border-radius: 57% 43% 64% 36% / 38% 61% 39% 62%;
  transform: rotate(-16deg);
}

.soft-orb--how-right {
  top: 155px;
  right: -100px;
  width: 260px;
  height: 260px;
  border-radius: 43% 57% 36% 64% / 62% 39% 61% 38%;
  transform: rotate(19deg);
}

.steps-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-card {
  display: flex;
  min-height: 590px;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 30px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
}

.step-card__head {
  display: grid;
  align-items: start;
  margin-bottom: 27px;
  grid-template-columns: 42px 1fr;
  gap: 14px;
}

.step-number {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--orange-grad);
  font-weight: 750;
  box-shadow: 0 7px 16px rgba(255, 105, 0, 0.2);
}

.step-card h3 {
  margin: 2px 0 9px;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.step-card__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
}

.step-visual {
  position: relative;
  display: flex;
  min-height: 390px;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
}

.mini-browser {
  width: 100%;
  min-height: 315px;
  overflow: hidden;
  border: 1px solid #dedbd7;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(#f8f8f8, #ededed);
  box-shadow: 0 16px 32px rgba(24, 24, 24, 0.09);
}

.mini-browser__bar {
  display: flex;
  height: 45px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid #e2e2e2;
  background: #fafafa;
}

.window-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f56;
}

.window-dot:nth-child(2) {
  background: #ffbd2e;
}

.window-dot:nth-child(3) {
  background: #27c93f;
}

.mini-address {
  height: 24px;
  margin-left: 8px;
  border-radius: 999px;
  flex: 1;
  background: #eee;
}

.choice-active {
  width: calc(100% - 64px);
  margin: 46px auto 0;
  padding: 26px 24px;
  border: 1px solid #dedbd7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(31, 31, 31, 0.12);
}

.choice-active__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 1rem;
  font-weight: 700;
}

.choice-active__brand .brand-mark {
  width: 31px;
  height: 31px;
  color: #fff;
  background: var(--orange);
  font-size: 0.8rem;
}

.active-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
  color: #248b3d;
  font-size: 0.88rem;
  font-weight: 700;
}

.active-line i {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.choice-active p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.shop-preview {
  width: 100%;
  height: 330px;
  overflow: hidden;
  border: 1px solid #dedbd7;
  border-radius: 17px 17px 0 0;
  box-shadow: 0 16px 32px rgba(24, 24, 24, 0.09);
}

.shop-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

.scorecard-preview {
  width: 78%;
  min-height: 355px;
  overflow: hidden;
  border: 1px solid #dedbd7;
  border-radius: 17px 17px 0 0;
  background: #fff;
  box-shadow: 0 16px 32px rgba(24, 24, 24, 0.09);
}

.scorecard-top {
  padding: 20px;
  color: #fff;
  background: var(--orange-grad);
}

.scorecard-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.92rem;
  font-weight: 700;
}

.scorecard-top small,
.scorecard-top strong {
  display: block;
}

.scorecard-top small {
  margin-bottom: 3px;
  opacity: 0.85;
  font-size: 0.63rem;
}

.scorecard-top strong {
  font-size: 0.9rem;
}

.impact-label {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #b73528;
  background: #ffd8d3;
  font-size: 0.58rem;
  font-weight: 700;
}

.scorecard-body {
  padding: 17px;
}

.scorecard-body h4 {
  margin-bottom: 7px;
  font-size: 0.69rem;
}

.concern-row,
.alternative-row {
  display: grid;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
}

.concern-row i {
  color: var(--orange);
  font-size: 0.65rem;
}

.concern-row strong,
.alternative-row strong {
  display: block;
  font-size: 0.58rem;
}

.concern-row span,
.alternative-row span {
  display: block;
  color: var(--muted);
  font-size: 0.48rem;
}

.micro-pill {
  padding: 4px 7px;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  color: #343434;
  background: #fff;
  font-size: 0.47rem;
  font-weight: 700;
}

.alternative-row i {
  color: var(--green);
  font-size: 0.54rem;
}

.scorecard-link {
  display: block;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid var(--orange);
  border-radius: 8px;
  color: var(--orange);
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
}

.value-strip {
  display: flex;
  max-width: 820px;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 26px auto 0;
}

.value-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-right: 1px solid var(--line);
  color: #4f4d51;
  font-size: 0.78rem;
  font-weight: 550;
}

.value-strip__item:last-child {
  border-right: 0;
}

.value-strip__item i {
  color: var(--orange);
  font-size: 1.2rem;
}

.analysis-section {
  overflow: hidden;
  background: var(--cream);
}

.analysis-showcase {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(350px, 0.78fr) minmax(620px, 1.22fr);
  gap: clamp(52px, 6vw, 96px);
}

.analysis-copy {
  max-width: 550px;
}

.analysis-copy h2 {
  margin: 4px 0 26px;
  font-size: clamp(3.4rem, 5vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.analysis-copy > p {
  max-width: 520px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.issue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 34px 0 25px;
}

.issue-chip {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  font-size: 0.76rem;
  font-weight: 600;
}

.issue-chip i {
  color: var(--orange);
  font-size: 1.05rem;
}

.issue-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 0.83rem;
  font-weight: 650;
}

.issue-view-all i {
  transition: transform 180ms ease;
}

.issue-view-all:hover i {
  transform: translateX(4px);
}

.breakdown-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 75px rgba(91, 52, 22, 0.11);
}

.breakdown-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}

.breakdown-sample {
  display: block;
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breakdown-card__header h3 {
  margin-bottom: 3px;
  font-size: 1.58rem;
  letter-spacing: -0.04em;
}

.breakdown-card__header p {
  color: var(--muted);
  font-size: 0.82rem;
}

.overall-score {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.overall-score__ring {
  display: inline-flex;
  position: relative;
  width: 61px;
  height: 61px;
  align-items: center;
  justify-content: center;
  flex: 0 0 61px;
  border-radius: 50%;
  background: conic-gradient(var(--orange) 0 62%, #f2e6dc 62% 100%);
}

.overall-score__ring::before {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.overall-score__ring strong {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: 1.36rem;
  letter-spacing: -0.04em;
}

.score-rows {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.score-row {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.score-row:last-child {
  border-bottom: 0;
}

.score-row__summary {
  display: grid;
  min-height: 51px;
  align-items: center;
  padding: 12px 18px;
  grid-template-columns: minmax(150px, 0.9fr) minmax(110px, 1fr) minmax(90px, 0.65fr) 16px;
  gap: 17px;
}

.score-row__label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.72rem;
  font-weight: 650;
}

.score-row__label i {
  width: 18px;
  color: var(--orange);
  text-align: center;
}

.score-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #ecebea;
}

.score-meter > span {
  display: block;
  width: var(--score-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9a00, #ffb21a);
}

.score-meter--good > span {
  background: linear-gradient(90deg, #62b62e, #91be55);
}

.score-meter--poor > span {
  background: linear-gradient(90deg, #fa4e28, #ff6b32);
}

.score-status {
  font-size: 0.68rem;
  font-weight: 500;
}

.score-status--good {
  color: #4a9a2b;
}

.score-status--mixed {
  color: #e28300;
}

.score-status--poor {
  color: #ed4d2e;
}

.score-chevron {
  color: #77757a;
  font-size: 0.68rem;
}

.score-row__detail {
  margin: 0 16px 15px;
  padding: 17px 18px;
  border-radius: 11px;
  background: linear-gradient(135deg, #fff7ef, #fff3e8);
}

.score-row__detail p {
  margin-bottom: 13px;
  color: #56535a;
  font-size: 0.7rem;
  line-height: 1.55;
}

.score-row__detail > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.64rem;
}

.source-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #f2cda8;
  border-radius: 8px;
  color: #a85b23;
  background: #fff;
  font-weight: 600;
}

.analysis-source-bar {
  display: grid;
  min-height: 92px;
  align-items: center;
  margin-top: 30px;
  padding: 20px 28px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  grid-template-columns: auto 1fr auto;
  gap: 18px;
}

.analysis-source-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--orange);
  background: linear-gradient(145deg, #fff8ef, #ffe9d2);
  font-size: 1.28rem;
}

.analysis-source-bar strong {
  font-size: 0.9rem;
}

.analysis-source-bar a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 0.76rem;
  font-weight: 650;
}

.analysis-heading {
  max-width: 1000px;
  margin: 0 auto 44px;
  text-align: center;
}

.analysis-heading h2 {
  margin: 0;
  font-size: clamp(2.7rem, 4.6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.04;
}

/* No max-width: the subhead is meant to read as ONE line under the headline, so it
   is allowed the full heading width and only wraps when the viewport forces it. */
.analysis-heading .analysis-lede {
  margin: 18px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.6;
}

/* Substantiates the coverage number: a real destination listing every issue. */
.analysis-all {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin: 20px auto 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
}

.analysis-all i {
  font-size: 0.82rem;
  transition: transform 160ms ease;
}

.analysis-all:hover {
  text-decoration: underline;
}

.analysis-all:hover i {
  transform: translateX(3px);
}

.coverage-count {
  display: inline-block;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.values-tabs {
  --tabs-pad: 6px;
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  margin: 0 auto 38px;
  padding: var(--tabs-pad);
  border-radius: 999px;
  background: #f0ece8;
}

.values-tabs__indicator {
  position: absolute;
  z-index: 0;
  top: var(--tabs-pad);
  bottom: var(--tabs-pad);
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(42, 30, 19, 0.12);
  opacity: 0;
  pointer-events: none;
  transition:
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
}

.values-tabs.is-enhanced .values-tabs__indicator {
  opacity: 1;
}

.values-tab {
  position: relative;
  z-index: 1;
  min-height: 50px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  color: #343136;
  background: transparent;
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.values-tab:hover {
  color: var(--ink);
}

.values-tab:focus-visible {
  outline: 3px solid rgba(255, 115, 0, 0.28);
  outline-offset: 2px;
}

.values-tab.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 10px rgba(42, 30, 19, 0.12);
}

.values-tabs.is-enhanced .values-tab.is-active {
  background: transparent;
  box-shadow: none;
}

.values-showcase {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(270px, 0.75fr);
  gap: 20px;
}

.values-feature {
  position: relative;
  display: flex;
  min-height: 570px;
  overflow: hidden;
  justify-content: space-between;
  flex-direction: column;
  padding: 58px;
  border: 1px solid #f0dfcf;
  border-radius: 34px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 79% 42%, rgba(255, 173, 89, 0.23), transparent 29%),
    linear-gradient(145deg, #fffefc 0%, #fffaf4 62%, #fff2e3 100%);
  box-shadow: 0 22px 50px rgba(88, 45, 12, 0.08);
  isolation: isolate;
}

.values-feature::before {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 72%;
  background: linear-gradient(90deg, #fffefc 0 68%, rgba(255, 254, 252, 0));
  content: "";
}

/* ── Topic wallpaper ─────────────────────────────────────────────────────────
 * Was an <img> with alt="" and aria-hidden; now the background it always was. See
 * the note at the call site in templates/index.html for why the markup changed.
 *
 * The URL lives here rather than in the template because the panel is 358px wide on
 * a phone and 1165px on a desktop, and only a stylesheet can pick a source per
 * viewport — as an <img> this shipped a single 1663px file to every visitor,
 * including the phone that needed a fifth of it.
 *
 * Tiers below are set from measured panel widths (358 / 726 / max 1165 — the shell
 * caps it, so nothing above 1165 exists to serve). The 2x candidates only fetch on
 * high-DPI screens; image-set() picks per device pixel ratio, so a 1x display never
 * downloads them.
 */
.values-feature__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.values-feature__image[data-values-image="power"] {
  background-image: image-set(url(/static/value-topics/money-democracy-1200.webp) 1x,
                              url(/static/value-topics/money-democracy.webp) 2x);
}
.values-feature__image[data-values-image="costs"] {
  background-image: image-set(url(/static/value-topics/costs-work-1200.webp) 1x,
                              url(/static/value-topics/costs-work.webp) 2x);
}
.values-feature__image[data-values-image="safety"] {
  background-image: image-set(url(/static/value-topics/health-safety-1200.webp) 1x,
                              url(/static/value-topics/health-safety.webp) 2x);
}
.values-feature__image[data-values-image="rights"] {
  background-image: image-set(url(/static/value-topics/immigration-rights-1200.webp) 1x,
                              url(/static/value-topics/immigration-rights.webp) 2x);
}
.values-feature__image[data-values-image="global"] {
  background-image: image-set(url(/static/value-topics/climate-global-1200.webp) 1x,
                              url(/static/value-topics/climate-global.webp) 2x);
}

@media (max-width: 1100px) {
  .values-feature__image[data-values-image="power"] {
    background-image: image-set(url(/static/value-topics/money-democracy-800.webp) 1x,
                                url(/static/value-topics/money-democracy.webp) 2x);
  }
  .values-feature__image[data-values-image="costs"] {
    background-image: image-set(url(/static/value-topics/costs-work-800.webp) 1x,
                                url(/static/value-topics/costs-work.webp) 2x);
  }
  .values-feature__image[data-values-image="safety"] {
    background-image: image-set(url(/static/value-topics/health-safety-800.webp) 1x,
                                url(/static/value-topics/health-safety.webp) 2x);
  }
  .values-feature__image[data-values-image="rights"] {
    background-image: image-set(url(/static/value-topics/immigration-rights-800.webp) 1x,
                                url(/static/value-topics/immigration-rights.webp) 2x);
  }
  .values-feature__image[data-values-image="global"] {
    background-image: image-set(url(/static/value-topics/climate-global-800.webp) 1x,
                                url(/static/value-topics/climate-global.webp) 2x);
  }
}

@media (max-width: 640px) {
  .values-feature__image[data-values-image="power"] {
    background-image: image-set(url(/static/value-topics/money-democracy-480.webp) 1x,
                                url(/static/value-topics/money-democracy-800.webp) 2x);
  }
  .values-feature__image[data-values-image="costs"] {
    background-image: image-set(url(/static/value-topics/costs-work-480.webp) 1x,
                                url(/static/value-topics/costs-work-800.webp) 2x);
  }
  .values-feature__image[data-values-image="safety"] {
    background-image: image-set(url(/static/value-topics/health-safety-480.webp) 1x,
                                url(/static/value-topics/health-safety-800.webp) 2x);
  }
  .values-feature__image[data-values-image="rights"] {
    background-image: image-set(url(/static/value-topics/immigration-rights-480.webp) 1x,
                                url(/static/value-topics/immigration-rights-800.webp) 2x);
  }
  .values-feature__image[data-values-image="global"] {
    background-image: image-set(url(/static/value-topics/climate-global-480.webp) 1x,
                                url(/static/value-topics/climate-global-800.webp) 2x);
  }
}

.values-feature__image,
.values-feature__copy {
  transition: opacity 280ms ease-in-out;
}

.values-stat > strong,
.values-stat > span {
  transition: opacity 280ms ease-in-out;
}

.values-feature__image--incoming {
  opacity: 0;
}

.values-feature.is-switching .values-feature__image--incoming {
  opacity: 1;
}

.values-feature.is-switching .values-feature__copy,
.values-stats.is-switching .values-stat > strong,
.values-stats.is-switching .values-stat > span {
  opacity: 0;
}

.values-feature__copy {
  position: relative;
  z-index: 3;
  max-width: 560px;
}

.values-feature h3 {
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 4vw, 4.35rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.values-feature__copy p {
  max-width: 520px;
  color: #656169;
  font-size: clamp(0.98rem, 1.35vw, 1.16rem);
  line-height: 1.7;
}

.values-stats {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

/* Explanatory panels, NOT controls. They sit beside the tab strip and change with it,
   but nothing happens when you click them — so the styling deliberately stops short of
   button affordance: a flatter radius than the pill-shaped .btn, and an explicit
   default cursor. There is no :hover state here on purpose. */
.values-stat {
  display: flex;
  min-height: 0;
  justify-content: space-between;
  flex-direction: column;
  padding: 38px;
  border-radius: 20px;
  color: #000;
  background: #fff0df;
  cursor: default;
}

.values-stat:last-child {
  color: #000;
  background: #f2eee9;
}

.values-stat strong {
  font-size: clamp(2.15rem, 3vw, 3.4rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.values-stat span {
  max-width: 230px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.download-section {
  overflow: hidden;
  background: var(--cream);
}

.download-lede {
  max-width: 62ch;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.6;
}

/* display:flex would otherwise defeat the [hidden] attribute. */
.availability[hidden] {
  display: none;
}

.availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  color: var(--orange);
  font-size: 1rem;
  font-weight: 600;
}

/* Sits under the install buttons, where the "what does this get to see?" hesitation
   actually happens. Quiet on purpose — it is reassurance, not another pitch. */
.download-trust {
  margin-top: 26px;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.download-trust a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.download-layout {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1.12fr 0.98fr 0.85fr;
  gap: 22px;
}

/* Set by setupDownloadForBrowser() when the visitor's browser is not Chrome: the
   tapered default would push an install button into the narrowest column. */
.download-layout--reordered {
  grid-template-columns: repeat(3, 1fr);
}

.browser-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.browser-card--featured {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(circle at 86% 15%, rgba(255, 187, 88, 0.36) 0 9%, transparent 9.4%),
    var(--orange-grad);
  box-shadow: 0 24px 55px rgba(255, 111, 0, 0.22);
}

/* Applied by setupDownloadForBrowser() to a Firefox visitor's own card. Outline, not the
   orange fill of --featured: the emphasis says "this one is yours", while the fill stays
   reserved for a button that installs something today. Mirrors .coming-card--primary. */
.browser-card--primary {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), var(--shadow-sm);
}

.browser-card__head {
  display: grid;
  align-items: center;
  margin-bottom: 24px;
  grid-template-columns: 74px 1fr;
  gap: 18px;
}

.browser-logo {
  display: inline-flex;
  width: 74px;
  height: 74px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(54, 35, 21, 0.08);
}

.browser-card h3 {
  margin-bottom: 5px;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.browser-card p {
  color: var(--muted);
  font-size: 0.79rem;
}

.browser-card--featured p {
  color: rgba(255, 255, 255, 0.85);
}

.browser-card .btn {
  margin-top: auto;
}

/* Button treatment follows the CARD's state, not a hard-coded modifier class, because
   setupDownloadForBrowser() moves --featured between the Chrome and Firefox cards at
   runtime. Keyed to the class the JS toggles, both states travel with it. */
.browser-card--featured .btn {
  color: #000;
  border-color: rgba(255, 255, 255, 0.72);
  background: #fffaf4;
  box-shadow: 0 13px 30px rgba(133, 53, 0, 0.2);
}

.browser-card--featured .btn:hover {
  background: #fff;
  box-shadow: 0 17px 36px rgba(133, 53, 0, 0.26);
}

.browser-card:not(.browser-card--featured) .btn {
  color: var(--orange);
  border-color: var(--orange);
  background: #fff;
}

.browser-card:not(.browser-card--featured) .btn:hover {
  background: #fff8f0;
}

.coming-stack {
  display: grid;
  height: 100%;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.coming-card {
  display: grid;
  min-height: 0;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
}

/* Applied by setupDownloadForBrowser() to the visitor's own browser when it is not
   supported yet. It is the honest primary message for that visitor, so it gets the
   emphasis — an outline rather than the orange fill, which stays reserved for a card
   you can actually act on. */
.coming-card--primary {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), var(--shadow-sm);
}

/* Reuses the existing fill mechanism (background-size), rather than overriding
   background outright, so the button keeps its drain-on-leave behaviour. */
.coming-card--primary .notify-button {
  color: #fff;
  border-color: var(--orange);
  background-size: 100% 100%;
}

.coming-icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.coming-card > div strong,
.coming-card > div span {
  display: block;
}

.coming-card > div strong {
  font-size: 0.84rem;
}

.coming-card > div span {
  color: var(--muted);
  font-size: 0.65rem;
}

.notify-button {
  padding: 9px 12px;
  border: 1px solid #d9d6d3;
  border-radius: 10px;
  color: #5b585c;
  /* an orange layer that grows from the left; text/base sit on the background-color */
  background-color: #fff;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  font-size: 0.64rem;
  font-weight: 650;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-size 300ms ease, color 220ms ease, border-color 220ms ease;
}
.notify-button:hover {
  color: #fff;
  border-color: var(--orange);
  background-size: 100% 100%;   /* fill left→right on enter; reverses (drains) on leave */
}

.closing-panel {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--orange-grad);
}

.closing-panel::before,
.closing-panel::after {
  position: absolute;
  animation:
    bubble-float var(--float-duration, 14s) ease-in-out var(--float-delay, 0s) infinite,
    bubble-morph var(--morph-duration, 18s) ease-in-out var(--morph-delay, 0s) infinite alternate;
  background:
    radial-gradient(ellipse at 30% 24%, rgba(255, 234, 204, 0.2), rgba(255, 190, 105, 0.11) 52%, rgba(255, 132, 20, 0.04) 78%),
    linear-gradient(145deg, rgba(255, 205, 139, 0.16), rgba(255, 149, 42, 0.07));
  box-shadow: inset 20px 18px 34px rgba(255, 243, 226, 0.04);
  content: "";
  pointer-events: none;
  will-change: transform, border-radius;
}

.closing-panel::before {
  --bubble-rotation: -14deg;
  --float-delay: -7s;
  --float-duration: 14s;
  --float-rotate-one: -3deg;
  --float-rotate-two: 3deg;
  --float-x-one: -16px;
  --float-x-two: 9px;
  --float-y-one: 15px;
  --float-y-two: -18px;
  --morph-delay: -4s;
  --morph-duration: 19s;
  top: 24px;
  left: -58px;
  width: 230px;
  height: 202px;
  border-radius: 64% 36% 52% 48% / 42% 63% 37% 58%;
  transform: rotate(-14deg);
}

.closing-panel::after {
  --bubble-rotation: 18deg;
  --float-delay: -2s;
  --float-duration: 16s;
  --float-rotate-one: 4deg;
  --float-rotate-two: -3deg;
  --float-x-one: 18px;
  --float-x-two: -11px;
  --float-y-one: -13px;
  --float-y-two: 20px;
  --morph-delay: -12s;
  --morph-duration: 21s;
  right: -76px;
  top: 330px;
  width: 286px;
  height: 244px;
  border-radius: 39% 61% 67% 33% / 58% 41% 59% 42%;
  transform: rotate(18deg);
}

.about-section {
  position: relative;
  z-index: 1;
  padding: 92px 0;
}

.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 90px;
}

.about-section .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.about-section h2 {
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  letter-spacing: -0.055em;
  line-height: 1.03;
}

.about-copy {
  display: grid;
  max-width: 700px;      /* a personal story reads badly across a 900px+ measure */
  gap: 18px;
}

/* White, at FULL opacity and a heavier weight — the previous rgba(255,255,255,0.74)
   measured 2.0:1 against this gradient. Solid white plus 600 lifts it to 2.9:1, which
   is the most contrast white can reach here; AA (4.5:1) needs either a darker panel
   or dark ink. Never drop back to a translucent white. */
.about-copy p {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.75;
}

.about-copy strong {
  color: #fff;
  font-weight: 700;
}

.about-more {
  margin-top: 4px;
}

.about-founder-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-founder-link i {
  font-size: 0.8rem;
  transition: transform 160ms ease;
}

.about-founder-link:hover i {
  transform: translateX(3px);
}

.site-footer {
  position: relative;
  z-index: 1;
  padding: 56px 0 26px;
  color: #fff;
  background: transparent;
}

.footer-main {
  display: grid;
  align-items: center;
  padding-bottom: 34px;
  grid-template-columns: 1fr auto auto;
  gap: 46px;
}

.footer-logo {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 0.8rem;
  font-weight: 600;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-main .btn {
  min-height: 48px;
  font-size: 0.78rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
}

.mobile-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(21, 18, 16, 0.72);
  backdrop-filter: blur(6px);
}

.mobile-modal.open {
  display: flex;
}

/* Waitlist modal — horizontal rectangle: text on the left, form on the right. */
/* Double class beats the base .mobile-modal__card (defined later, equal specificity). */
.mobile-modal__card.waitlist-card {
  position: relative;
  width: min(780px, calc(100% - 40px));
  padding: 38px 42px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 40px;
}
.waitlist-text { flex: 1; min-width: 0; }
.waitlist-text h2 { margin: 0 0 8px; font-size: 1.28rem; line-height: 1.28; }
.waitlist-text p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.waitlist-bell { display: block; margin-bottom: 12px; font-size: 1.5rem; color: var(--orange); }
.waitlist-form-col { flex: 0 0 auto; width: 244px; }
.waitlist-form-col form { display: flex; flex-direction: column; }
.waitlist-input {
  width: 100%;
  min-height: 52px;
  margin-bottom: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  outline: 0;
}
.waitlist-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 115, 0, 0.14);
}
.waitlist-form-col .btn { width: 100%; min-height: 52px; }
.waitlist-msg { margin: 12px 0 0; font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.waitlist-msg--ok { color: var(--green); }
.waitlist-msg--err { color: var(--red); }
.waitlist-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.waitlist-close:hover { background: var(--cream-deep); color: var(--ink); }
@media (max-width: 620px) {
  .mobile-modal__card.waitlist-card { flex-direction: column; align-items: stretch; gap: 22px; padding: 30px; }
  .waitlist-form-col { width: 100%; }
}

.mobile-modal__card {
  width: min(420px, 100%);
  padding: 32px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.mobile-modal__icon {
  display: inline-flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--orange);
  background: var(--cream-deep);
  font-size: 1.5rem;
}

.mobile-modal h2 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}

.mobile-modal p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.consent-banner {
  position: fixed;
  z-index: 2147483000;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: none;
  max-width: 980px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  background: #242424;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.3);
  font-size: 0.72rem;
}

.consent-banner > span:first-child {
  flex: 1;
}

.consent-banner a {
  color: #ff9b3d;
  text-decoration: underline;
}

.consent-actions {
  display: flex;
  gap: 9px;
}

.consent-actions button {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
}

.consent-decline {
  border: 1px solid #777;
  color: #fff;
  background: transparent;
}

.consent-accept {
  border: 1px solid var(--orange);
  color: #fff;
  background: var(--orange);
}

@media (max-width: 1220px) {
  :root {
    --shell: min(1120px, calc(100% - 48px));
  }

  .site-nav {
    grid-template-columns: auto minmax(210px, 1fr) auto;
    gap: 24px;
  }

  .nav-links {
    /* Same fixed-width trap as the base rule, one breakpoint down: 9.4rem was measured
       for two links. Tighten the GAP here instead, so the list shrinks without the
       labels touching. */
    gap: clamp(.85rem, 1.4vw, 1.3rem);
  }

  .hero {
    grid-template-columns: minmax(370px, 0.82fr) minmax(490px, 1.18fr);
    gap: 45px;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 5.2vw, 4.3rem);
  }

  .step-card {
    min-height: 555px;
    padding-inline: 23px;
  }

  .scorecard-preview {
    width: 88%;
  }

  .analysis-showcase {
    grid-template-columns: minmax(310px, 0.72fr) minmax(540px, 1.28fr);
    gap: 38px;
  }

  .breakdown-card {
    padding: 27px;
  }

  .score-row__summary {
    grid-template-columns: minmax(135px, 0.9fr) minmax(95px, 1fr) minmax(78px, 0.6fr) 14px;
    gap: 12px;
  }

  .values-tab {
    padding-inline: 17px;
    font-size: 0.76rem;
  }

  .values-feature {
    min-height: 530px;
    padding: 46px;
  }

  .values-stat {
    padding: 30px;
  }

  .download-layout {
    grid-template-columns: 1fr 1fr;
  }

  .coming-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }
}

@media (max-width: 980px) {
  :root {
    --shell: min(900px, calc(100% - 40px));
  }

  .section {
    padding: 92px 0;
  }

  /* Phones get no polygon fold: on a narrow viewport the diagonal side insets
     sliced straight through the CTA and the browser mock (see setupHeroFold).
     The hero stays full-bleed and the scroll fold is carried by the cream sweep
     alone, which never crosses any content. border-radius is pinned to 0 so a
     desktop -> mobile resize can't leave the % corners from the wide layout
     behind (they would round the whole block, and the corners are covered by the
     cream sweep anyway — all a radius adds here is a hairline orange seam). */
  .site-header {
    min-height: 0;
    padding-bottom: 105px;
    clip-path: none;
    border-radius: 0;
  }

  /* Third column is the hamburger; the link list drops to a full-width second row.
     row-gap must be 0 or the collapsed panel still reserves the nav's gap.

     grid-template-rows is what keeps the bar still. With only a min-height, the
     closed nav's single row stretched to fill it and centred the logo; opening the
     panel pushed the rows past that height, the top row shrank to its content, and
     the whole bar jumped upward. Pinning row 1 to the bar height means row 2 can
     only ever grow downward. */
  .site-nav {
    min-height: 88px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: minmax(88px, auto) auto;
    align-content: start;
    row-gap: 0;
  }

  /* Inner pages run a taller bar (104px, set outside these media queries), so their
     row 1 has to match or the same jump comes back on /companies and /about. */
  .site-header.site-header--bar .site-nav {
    grid-template-rows: minmax(104px, auto) auto;
  }

  /* ...and they must NOT keep the 105px the homepage reserves above for its cream
     sweep. The --bar variant already cancels the fold itself (::after { content: none }),
     but the padding that made room for it was left behind — so every inner page carried
     a 209px orange bar on a phone, a quarter of the viewport, holding space for an
     element that is not rendered. */
  .site-header.site-header--bar {
    padding-bottom: 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* The mobile dropdown. In normal flow (grid row 2) rather than absolutely
     positioned, because the homepage .site-header is overflow:hidden and would
     clip an overlay panel. Collapsed it is zero-height AND visibility:hidden, so
     the links stay out of the tab order until the panel is actually open. */
  .nav-links {
    display: flex;
    width: auto;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    max-height: 0;
    margin-top: 0;
    gap: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 200ms ease,
      margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 300ms;
  }

  .site-nav.nav-open .nav-links {
    max-height: 260px;
    margin-top: 6px;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 200ms ease 60ms,
      margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
  }

  .nav-links li {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .nav-links li:first-child {
    border-top: 0;
  }

  .nav-links a {
    display: block;
    padding: 15px 4px;
    font-size: 1rem;
  }

  /* The desktop underline sweep is a hover affordance; it has no place in a
     touch dropdown, where it reads as a stray line under each row. */
  .nav-links a::after {
    content: none;
  }

  .nav-search {
    width: min(340px, 100%);
    justify-self: center;
  }

  .hero {
    margin-top: 42px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hero-copy {
    max-width: 760px;
    padding-bottom: 28px;
    text-align: center;
    justify-self: center;
  }

  .hero h1,
  .hero-lede {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-benefits {
    justify-content: center;
  }

  .hero-visual {
    width: min(820px, 100%);
    margin-inline: auto;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .step-card {
    min-height: 430px;
    display: grid;
    grid-template-columns: minmax(230px, 0.62fr) 1fr;
    gap: 30px;
    padding: 30px 30px 0;
  }

  .step-card__head {
    align-self: center;
  }

  .step-visual {
    width: 100%;
    min-height: 370px;
  }

  .analysis-showcase {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .analysis-copy {
    max-width: 720px;
  }

  .breakdown-card {
    width: 100%;
  }

  .values-tabs {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .values-tabs::-webkit-scrollbar {
    display: none;
  }

  .values-showcase {
    grid-template-columns: 1fr;
  }

  .values-stats {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }

  .values-stat {
    min-height: 220px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100% - 30px);
    --radius: 18px;
  }

  .section {
    padding: 76px 0;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2 {
    font-size: clamp(2.15rem, 10.5vw, 3.25rem);
  }

  /* Keep the hamburger's column — a bare `auto 1fr` here would drop it back to the
     two-column layout and push the link panel out of the bar. Row 1 tracks the
     shorter bar height for the same reason as the ≤980px block above. */
  .site-nav {
    min-height: 76px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: minmax(76px, auto) auto;
    column-gap: 14px;
    row-gap: 0;
  }

  .site-logo {
    font-size: 1.7rem;
  }

  .nav-search {
    width: 100%;
  }

  .nav-search-input {
    min-height: 42px;
    font-size: 16px;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    margin-top: 32px;
  }

  .hero-copy {
    padding-bottom: 12px;
  }

  .hero-kicker {
    margin-bottom: 18px;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  /* Narrow enough that a forced-whole phrase could overflow the viewport, so
     let the headline wrap wherever it needs to. */
  .nowrap-tail {
    white-space: normal;
  }

  .hero-lede {
    font-size: 0.98rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-benefits {
    display: grid;
    max-width: 280px;
    margin-inline: auto;
    justify-content: start;
  }

  .hero-benefits li + li::before {
    display: none;
  }

  .browser-stage {
    border-width: 6px;
    border-radius: 15px;
  }

  .how-section {
    padding-top: 104px;
  }

  .step-card {
    display: flex;
    min-height: 570px;
    padding: 25px 22px 0;
  }

  .step-card__head {
    margin-bottom: 20px;
  }

  .step-visual {
    min-height: 350px;
  }

  .value-strip {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  .value-strip__item {
    justify-content: center;
    border-right: 0;
  }

  .analysis-copy h2 {
    font-size: clamp(3.1rem, 15vw, 4.7rem);
  }

  .issue-chip {
    min-height: 44px;
    padding: 9px 13px;
    font-size: 0.69rem;
  }

  .breakdown-card {
    padding: 20px 14px;
    border-radius: 21px;
  }

  .breakdown-card__header {
    align-items: flex-start;
    padding-inline: 4px;
  }

  .breakdown-card__header h3 {
    font-size: 1.28rem;
  }

  .overall-score {
    gap: 7px;
    font-size: 0.58rem;
  }

  .overall-score__ring {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .overall-score__ring::before {
    width: 41px;
    height: 41px;
  }

  .overall-score__ring strong {
    font-size: 1.15rem;
  }

  .score-row__summary {
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) auto 12px;
    gap: 8px;
  }

  .score-row__label {
    font-size: 0.67rem;
  }

  .score-meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .score-status {
    font-size: 0.62rem;
  }

  .score-row__detail {
    margin-inline: 10px;
    padding: 14px;
  }

  .analysis-source-bar {
    justify-items: center;
    padding: 24px 20px;
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }

  .analysis-heading {
    margin-bottom: 34px;
  }

  .analysis-heading h2 {
    font-size: clamp(2.35rem, 11vw, 3.35rem);
  }

  .values-tabs {
    --tabs-pad: 4px;
    margin-bottom: 24px;
  }

  .values-tab {
    min-height: 44px;
    padding: 8px 15px;
    font-size: 0.72rem;
  }

  .values-feature {
    min-height: 590px;
    padding: 32px 24px;
    border-radius: 25px;
  }

  .values-feature::before {
    width: 100%;
    height: 72%;
    background: linear-gradient(180deg, #fffefc 0 58%, rgba(255, 254, 252, 0.9) 76%, transparent);
  }

  .values-feature h3 {
    font-size: clamp(2.25rem, 11vw, 3.3rem);
  }

  .values-feature__copy p {
    font-size: 0.9rem;
  }

  .values-feature__image {
    top: auto;
    bottom: 0;
    height: 58%;
    object-position: 72% center;
  }

  .values-stats {
    gap: 10px;
  }

  .values-stat {
    min-height: 180px;
    padding: 23px;
    border-radius: 24px;
  }

  .values-stat strong {
    font-size: 1.85rem;
  }

  .values-stat span {
    font-size: 0.75rem;
  }

  .download-layout {
    grid-template-columns: 1fr;
  }

  .coming-stack {
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }

  .footer-main {
    justify-items: center;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-bottom {
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .consent-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* The rule above zeroes durations but not delays. The mobile menu defers its
     visibility switch by the slide duration, so without this the closed panel
     would stay keyboard-reachable for 300ms after collapsing. */
  .nav-links,
  .site-nav.nav-open .nav-links {
    transition-delay: 0s !important;
  }
}