/* Juxtafold — structure ported from dev/juxtafold/NOTION_DESIGN.md
   Kept from the source system: 8px buttons (not pills), 12px cards,
   radius:full on badges only, the navy hero band, the type scale, 96px section
   rhythm, 1280/32 container, one dominant CTA color, link blue kept separate.

   Deliberately NOT ported: the signature purple #5645d4 (too recognizable as
   somebody else's brand), the scattered sticky-note dots (they reference that
   product's database colors and mean nothing here), and the pastel feature
   card tints (they fight product photography, which is the content this page
   exists to show). The tint tokens stay defined; only peach and teal are used,
   as small chips well away from the product images. */

:root {
  /* brand + primary */
  --primary: #0b6b5e;
  --primary-pressed: #08544a;
  --primary-deep: #06403a;
  --on-primary: #ffffff;
  --brand-navy: #0a1530;
  --brand-navy-deep: #070f24;
  --brand-navy-mid: #1a2a52;
  --link-blue: #0075de;
  --link-blue-pressed: #005bab;

  /* accents */
  --brand-orange: #dd5b00;
  --brand-orange-deep: #793400;
  --brand-pink: #ff64c8;
  --brand-purple: #7b3ff2;
  --brand-purple-300: #d6b6f6;
  --brand-purple-800: #391c57;
  --brand-teal: #2a9d99;
  --brand-green: #1aae39;
  --brand-yellow: #f5d75e;

  /* card tints */
  --tint-peach: #ffe8d4;
  --tint-rose: #fde0ec;
  --tint-mint: #d9f3e1;
  --tint-lavender: #e6e0f5;
  --tint-sky: #dcecfa;
  --tint-yellow: #fef7d6;
  --tint-yellow-bold: #f9e79f;
  --tint-cream: #f8f5e8;
  --tint-gray: #f0eeec;
  --tint-teal: #d6efea;
  --teal-deep: #0b5c50;

  /* surface */
  --canvas: #ffffff;
  --surface: #f6f5f4;
  --surface-soft: #fafaf9;
  --hairline: #e5e3df;
  --hairline-soft: #ede9e4;
  --hairline-strong: #c8c4be;

  /* text */
  --ink-deep: #000000;
  --ink: #1a1a1a;
  --charcoal: #37352f;
  --slate: #5d5b54;
  /* darkened from the source system's #787671, which is 4.5:1 on white but
     drops to 4.2:1 on --surface, and this page puts it on --surface a lot */
  --steel: #6c6a64;
  --stone: #a4a097;
  --muted: #bbb8b1;
  --on-dark: #ffffff;
  --on-dark-muted: #a4a097;

  /* semantic */
  --success: #1aae39;
  --warning: #dd5b00;
  --error: #e03131;

  /* radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xxl: 20px;
  --r-xxxl: 24px;
  --r-full: 9999px;

  /* spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 20px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-xxxl: 40px;
  --s-section-sm: 48px;
  --s-section: 64px;
  --s-section-lg: 96px;
  --s-hero: 120px;

  /* elevation */
  --e1: rgba(15, 15, 15, 0.04) 0 1px 2px 0;
  --e2: rgba(15, 15, 15, 0.08) 0 4px 12px 0;
  --e3: rgba(15, 15, 15, 0.2) 0 24px 48px -8px;
  --e4: rgba(15, 15, 15, 0.16) 0 16px 48px -8px;

  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, system-ui,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --container: 1280px;
  --gutter: 32px;
}

/* Schibsted Grotesk, self-hosted, latin subset, 46KB, variable weight.

   Not Inter. The source system specifies a proprietary Inter-based face and its
   own Don't list says not to substitute generic Inter, which is exactly what
   the first build did. Inter is also the default of every AI-generated
   interface, so it reads as no decision at all. Schibsted Grotesk is a
   newspaper grotesque: slightly editorial, tight apertures, confident at
   display sizes, and it stays out of the way next to product photography.

   Self-hosting keeps the privacy policy's "loads no fonts from other
   companies" literally true. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-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;
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* teal on navy is 2.8:1, under the 3:1 minimum for non-text. On the dark band
   the ring goes white. */
.hero :focus-visible,
.banner-answer :focus-visible { outline-color: var(--on-dark); }

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

/* ---------- layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 760px; }

/* the nav is sticky at 64px; without this, every in-page anchor lands with its
   heading tucked underneath it */
:target,
section[id],
main[id] { scroll-margin-top: 88px; }

.section { padding-block: var(--s-section-lg); }
.section--tight { padding-block: var(--s-section); }
.section--surface { background: var(--surface-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--canvas);
  color: var(--ink);
  padding: var(--s-sm) var(--s-md);
  z-index: 100;
  border-radius: var(--r-md);
}
.skip-link:focus { left: var(--s-md); top: var(--s-md); }

/* ---------- type scale ---------- */

.t-hero {
  font-size: 80px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -2px;
}
.t-display {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}
.t-h1 { font-size: 48px; line-height: 1.15; letter-spacing: -0.5px; }
.t-h2 { font-size: 36px; line-height: 1.2; letter-spacing: -0.5px; }
.t-h3 { font-size: 28px; line-height: 1.25; }
.t-h4 { font-size: 22px; line-height: 1.3; }
.t-h5 { font-size: 18px; line-height: 1.4; }
.t-subtitle { font-size: 18px; font-weight: 400; line-height: 1.5; }
.t-body { font-size: 16px; line-height: 1.55; }
.t-sm { font-size: 14px; line-height: 1.5; }
.t-caption { font-size: 13px; line-height: 1.4; }
.t-micro {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.t-slate { color: var(--slate); }
.t-steel { color: var(--steel); }
.t-on-dark-muted { color: var(--on-dark-muted); }

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 62ch;
}

.section__head { max-width: 720px; margin-bottom: var(--s-xxxl); }
.section__head .lede { margin-top: var(--s-md); }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--s-sm);
}

/* ---------- wordmark ----------
   Placeholder until the real logo lands. Swapping it is one edit here plus
   replacing the .wordmark contents in the three page templates. */

.wordmark {
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark--on-dark { color: var(--on-dark); }
.wordmark--lg { font-size: 22px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
  min-height: 44px;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-pressed); }
.btn--primary:active { background: var(--primary-deep); }

.btn--dark { background: var(--ink-deep); color: var(--on-dark); }
.btn--dark:hover { background: var(--charcoal); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--secondary:hover { background: var(--surface); }

.btn--on-dark { background: var(--on-dark); color: var(--ink); }
.btn--on-dark:hover { background: var(--surface); }

.btn--secondary-on-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark-muted);
}
.btn--secondary-on-dark:hover { background: rgba(255, 255, 255, 0.08); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}
.btn-row--center { justify-content: center; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-xxl);
  min-height: 64px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
  list-style: none;
  margin-left: auto;
}
.nav__links a {
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
}
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__cta { margin-left: var(--s-md); flex: none; }

/* Below 1024px the links move to their own scrolling row underneath, and the
   CTA stays on the first row beside the wordmark. A hamburger would need
   JavaScript for four anchors on a three-page site. */
@media (max-width: 1023px) {
  .nav__inner { flex-wrap: wrap; gap: var(--s-sm); padding-block: var(--s-sm); }
  .nav__cta { margin-left: auto; }
  .nav__links {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: var(--s-lg);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links li { white-space: nowrap; flex: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--brand-navy);
  color: var(--on-dark);
  padding-top: var(--s-hero);
  padding-bottom: 0;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero h1 { max-width: 17ch; margin-inline: auto; }
.hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 58ch;
  margin: var(--s-xl) auto 0;
}
.hero .btn-row { margin-top: var(--s-xxl); }
.hero__note {
  margin-top: var(--s-md);
  font-size: 13px;
  color: var(--on-dark-muted);
}

/* the mockup card breaks out of the navy band */
.hero__mockup {
  margin: var(--s-section) 0 0;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
  overflow: hidden;
  text-align: left;
  position: relative;
  z-index: 1;
}
.hero__band-fill {
  height: 96px;
  background: linear-gradient(var(--brand-navy) 50%, var(--canvas) 50%);
  margin-top: -96px;
}

/* ---------- hero mockup contents ---------- */

.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-sm) var(--s-md);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.mock__bar > span {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--hairline-strong);
  flex: none;
}
.mock__url {
  margin-left: var(--s-sm);
  flex: 1;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--steel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-xxl);
  padding: var(--s-xl);
}
.mock__pdp {
  display: flex;
  gap: var(--s-md);
  align-items: flex-start;
  padding: var(--s-md);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  height: fit-content;
}
.mock__pdp img {
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-soft);
  background: var(--canvas);
  flex: none;
}
.mock__vendor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.mock__title { font-size: 13px; line-height: 1.35; color: var(--charcoal); }
.mock__price { font-size: 13px; font-weight: 600; margin-top: 2px; }
.mock__ctx { font-size: 11px; color: var(--steel); margin-top: 6px; }

.mock__rows { display: grid; gap: var(--s-xs); align-content: start; }
.mock__rowhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-sm);
}
.mock__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.mock__strip { display: flex; gap: var(--s-xs); align-items: stretch; }
.mock__thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  overflow: hidden;
}
.mock__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mock__thumb.is-dim { border-color: #e8b98d; }
.mock__thumb.is-dim img { opacity: 0.78; }
.mock__more {
  flex: none;
  width: 44px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--steel);
}

/* ---------- trend ---------- */

.trend {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-xxl);
  align-items: center;
  margin-top: var(--s-xxxl);
  padding: var(--s-xxl);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.trend__bars { list-style: none; display: grid; gap: var(--s-md); }
.trend__bars li {
  display: grid;
  grid-template-columns: 52px 1fr 56px;
  align-items: center;
  gap: var(--s-sm);
}
.trend__day { font-size: 13px; color: var(--slate); }
/* the track makes the bar read as a share of the row's slots rather than as an
   abstract length */
.trend__bar {
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--hairline-soft);
  position: relative;
  overflow: hidden;
}
.trend__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct) * 1%);
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--brand-orange-deep), var(--brand-orange));
}
.trend__pct { font-size: 14px; font-weight: 600; text-align: right; }

/* ---------- cards ---------- */

.grid { display: grid; gap: var(--s-xl); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-xxl);
}
.card h3 { margin-bottom: var(--s-sm); }
.card p { color: var(--slate); }

/* head on the left, content on the right, so wide desktops do not leave a
   column of dead space beside a narrow measure */
.split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--s-section-lg);
  align-items: start;
}
.split__head { margin-bottom: 0; position: sticky; top: 96px; }
.split__head .lede { font-size: 16px; }

@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; gap: var(--s-xxxl); }
  .split__head { position: static; }
}

.rules { margin-top: var(--s-lg); }
.rules .card { padding: var(--s-lg); }
.rules .tag { margin-bottom: var(--s-xs); }
.rules h4 { margin-bottom: var(--s-xs); }
.rules p { font-size: 14px; line-height: 1.5; }

.disclaimer { margin-top: var(--s-lg); max-width: 84ch; }

.fineprint a { color: var(--link-blue-pressed); }

.fineprint {
  margin-top: var(--s-md);
  margin-bottom: var(--s-lg);
  padding-top: var(--s-md);
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
}

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

.card--gray { background: var(--tint-gray); }

/* The one objection that decides the sale gets the loudest surface on the
   page. Navy echoes the hero rather than introducing a new colour. */
.banner-answer {
  margin-top: var(--s-xxxl);
  background: var(--brand-navy);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: var(--s-xxxl);
}
.banner-answer p { color: #cfd4de; max-width: 78ch; }

/* ---------- numbered steps ---------- */

.steps { counter-reset: step; list-style: none; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 56px;
  padding-bottom: var(--s-xxl);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--ink-deep);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
}
.steps > li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: 8px;
  width: 1px;
  background: var(--hairline);
}
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: var(--s-xs); }
.steps p { color: var(--slate); max-width: 68ch; }

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.badge--primary { background: var(--primary); color: var(--on-primary); }

.tag {
  display: inline-block;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
/* Contrast checked against their own backgrounds: orange 7.6:1, teal 6.6:1.
   The source system's mint-on-green chip was about 2.5:1 and is not used. */
.tag--orange { background: var(--tint-peach); color: var(--brand-orange-deep); }
.tag--teal { background: var(--tint-teal); color: var(--teal-deep); }

/* ---------- product row comparison ---------- */

.jf-compare { display: grid; gap: var(--s-xxl); }
/* two examples run back to back, so they need more air between them than the
   panels inside one example have between each other */
.jf-compare + .jf-compare { margin-top: var(--s-xxxl); }
/* the product and the sentence about it are one unit, tighter than the grid gap */
.jf-setup { display: grid; gap: var(--s-lg); }
.jf-note { max-width: 76ch; color: var(--slate); }

.jf-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
  overflow: hidden;
}
.jf-panel__head {
  padding: var(--s-lg) var(--s-xl);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-sm);
}
.jf-panel__head h3 { font-size: 18px; }
/* slate not steel: steel at 13px is 4.6:1, too thin a margin below 14px */
.jf-panel__meta { margin-left: auto; font-size: 13px; color: var(--slate); }
.jf-panel--ours { border-color: var(--primary); }

.jf-scroll {
  overflow-x: auto;
  padding: var(--s-xl);
  scrollbar-width: thin;
}
.jf-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: var(--s-md);
  min-width: min-content;
}

/* flex column with the price pushed to the bottom, so a three-line title does
   not drop its price below the neighbouring cards' */
.jf-card { font-size: 13px; display: flex; flex-direction: column; }
.jf-card__price { margin-top: auto; }
.jf-card__media {
  position: relative;
  background: var(--surface-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1;
}
.jf-card__media img { width: 100%; height: 100%; object-fit: contain; }
.jf-card__noimg { width: 100%; height: 100%; background: var(--tint-gray); }
/* A soft chip, not a solid one. On product photography a saturated block reads
   as an ecommerce sale sticker, which is the opposite of the point. */
.jf-card__badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  background: var(--tint-peach);
  color: var(--brand-orange-deep);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  text-align: center;
}
/* Marked, not dimmed into caricature. The badges carry the argument; fading a
   competitor's photography past legibility would put a thumb on a scale whose
   whole authority is that it does not need one. */
.jf-card--repeat .jf-card__media { border-color: #e8b98d; }
.jf-card--repeat img { opacity: 0.78; }
.jf-card__vendor {
  margin-top: var(--s-xs);
  color: var(--steel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.jf-card__title {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--charcoal);
  margin-top: 2px;
  min-height: 2.7em;
}
.jf-card__price { font-weight: 600; font-size: 13px; padding-top: 2px; }
.jf-card__sold {
  margin-left: var(--s-xs);
  color: var(--error);
  font-weight: 500;
}

.jf-hero-pdp {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-xl);
  align-items: center;
  padding: var(--s-xl);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.jf-hero-pdp img {
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-soft);
  background: var(--canvas);
}

.jf-verdict {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xl);
  padding: var(--s-lg) var(--s-xl);
  border-top: 1px solid var(--hairline);
  background: var(--surface-soft);
  font-size: 14px;
}
.jf-verdict b { font-weight: 600; }

/* ---------- comparison table ---------- */

.table-wrap { overflow-x: auto; }
table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  min-width: 640px;
}
table.cmp th,
table.cmp td {
  padding: var(--s-md) var(--s-lg);
  border-bottom: 1px solid var(--hairline-soft);
  text-align: left;
  vertical-align: top;
}
table.cmp thead th {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-soft);
}
table.cmp tbody th { font-weight: 500; color: var(--charcoal); width: 26%; }
table.cmp td { color: var(--slate); }
table.cmp .col-us { color: var(--ink); background: rgba(11, 107, 94, 0.05); }
table.cmp tr:last-child th,
table.cmp tr:last-child td { border-bottom: 0; }

/* ---------- pricing ---------- */

.pricing {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-xxl);
  align-items: start;
}
.price-card {
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: var(--r-lg);
  padding: var(--s-xxl);
}
.price-card .badge { margin-bottom: var(--s-md); }
.price-card ul { list-style: none; margin: var(--s-lg) 0; }
.price-card li {
  padding-left: 26px;
  position: relative;
  margin-bottom: var(--s-sm);
  color: var(--charcoal);
  font-size: 14px;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 10px;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--hairline); }
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-xl) 0;
}
.faq summary {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: var(--s-md); color: var(--slate); max-width: 78ch; }
.faq details p + p { margin-top: var(--s-sm); }

/* ---------- cta banner ---------- */

.cta-banner {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-section);
  text-align: center;
}
.cta-banner p { margin: var(--s-md) auto 0; max-width: 56ch; color: var(--slate); }
.cta-banner .btn-row { margin-top: var(--s-xl); }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-section) var(--s-xxl);
  color: var(--charcoal);
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-xxl);
}
.footer h3, .footer .footer__h {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--s-sm);
}
.footer ul { list-style: none; }
.footer li { padding-block: var(--s-xxs); }
.footer a { color: var(--steel); }
.footer address {
  font-style: normal;
  color: var(--steel);
  margin-top: var(--s-md);
  line-height: 1.6;
}
.footer__bottom {
  margin-top: var(--s-section-sm);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  justify-content: space-between;
  color: var(--slate);
  font-size: 13px;
}

/* ---------- legal pages ---------- */

.legal { padding-block: var(--s-section) var(--s-section-lg); }
.legal h1 { margin-bottom: var(--s-sm); }
.legal .updated { color: var(--steel); font-size: 14px; }
.legal h2 {
  font-size: 22px;
  line-height: 1.3;
  margin-top: var(--s-xxxl);
  margin-bottom: var(--s-sm);
  scroll-margin-top: 88px;
}
.legal h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-top: var(--s-xl);
  margin-bottom: var(--s-xs);
}
.legal p { margin-top: var(--s-sm); color: var(--charcoal); }
.legal ul { margin: var(--s-sm) 0 0 var(--s-lg); }
.legal li { margin-bottom: var(--s-xs); color: var(--charcoal); }
.legal .toc {
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  margin-top: var(--s-xxl);
}
.legal .toc ul { margin: 0; list-style: none; columns: 2; column-gap: var(--s-xxl); }
.legal .callout {
  background: var(--tint-sky);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  margin-top: var(--s-lg);
}
.legal .callout p { color: var(--charcoal); }
.legal .callout a { color: var(--link-blue-pressed); }
.legal .callout p:first-child { margin-top: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1279px) {
  .t-hero { font-size: 72px; letter-spacing: -1.6px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  .t-hero { font-size: 56px; letter-spacing: -1.2px; }
  .t-display { font-size: 44px; }
  .t-h1 { font-size: 38px; }
  .t-h2 { font-size: 30px; }
  .section { padding-block: var(--s-section); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; }
  .mock__body { grid-template-columns: 1fr; gap: var(--s-lg); }
  .trend { grid-template-columns: 1fr; gap: var(--s-xl); }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .t-hero { font-size: 48px; letter-spacing: -1px; }
  .t-display { font-size: 34px; letter-spacing: -0.5px; }
  .t-h1 { font-size: 32px; }
  .t-h2 { font-size: 26px; }
  .t-h3 { font-size: 22px; }
  .hero { padding-top: var(--s-section); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card { padding: var(--s-xl); }
  .jf-hero-pdp { grid-template-columns: 1fr; }
  .jf-hero-pdp img { max-width: 180px; }
  .mock__body { padding: var(--s-md); }
  .mock__strip { overflow-x: auto; }
  .mock__thumb { flex: none; width: 72px; }
  .trend { padding: var(--s-xl); }
  .trend__bars li { grid-template-columns: 48px 1fr 48px; }
  .legal .toc ul { columns: 1; }
  .cta-banner { padding: var(--s-xxl) var(--s-lg); }
  .banner-bold { padding: var(--s-xl); }
}

@media (max-width: 479px) {
  .t-hero { font-size: 36px; letter-spacing: -0.5px; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
}

@media print {
  .nav, .hero__dots { display: none; }
}