/* =====================================================================
   SierraChartbooks — stylesheet
   Dark, open-card design. Sections are separated by space (120px desktop,
   96px phones); everything shares one left/right edge (32px inside the
   1200px frame on desktop, 16px on phones).
   Breakpoints: 1264 (frame margin) · 1100 · 1000 (bundle row) · 960 (menu, grids)
                900 (product page) · 860 (FAQ) · 760 (footer) · 640 (phones)
   ===================================================================== */

/* ---------- fonts (self-hosted, latin subset; no requests to Google) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-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: "Inter Tight"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/inter-tight-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: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bebas-neue-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; }

/* ---------- design tokens ---------- */
:root {
  --bg: #121212;
  --bg-2: #181818;             /* = surface (kept as a name for older rules) */
  --surface: #181818;          /* cards, buy box, FAQ box, menu panel */
  --surface-hover: #1e1e1e;    /* hover on surfaces */
  --surface-line: #262626;     /* = line (card borders) */
  --line: #262626;             /* every line and border */
  --line-2: #262626;           /* = line */
  --line-strong: #363636;      /* hover borders, ghost-button hover */
  --text: #f2f2f2;
  --muted: #a6a6a6;            /* secondary text */
  --dim: #858585;              /* small print: >= 4.5:1 on both --bg and --surface */
  --pink: #ff5588;             /* brand pink: only for stars, SAVE tags, sale prices and the hero dot */
  --pink-soft: rgba(255, 85, 136, 0.12);
  --max: 1200px;
  --nav-h: 64px;
  /* type scale: labels 12 / small notes 13 / reading text 15 (16 on phones) */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-body: 15px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-headline: "Bebas Neue", "Inter Tight", sans-serif;
}
@media (max-width: 640px) { :root { --fs-body: 16px; } }

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--pink); color: #fff; }
[hidden] { display: none !important; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: var(--fs-sm); background: var(--surface-hover); padding: 1px 6px; border-radius: 0; color: var(--text); }

/* ---------- page frame ---------- */
.frame { max-width: var(--max); margin: 0 auto; }
/* center on a whole pixel ("margin: auto" can land on x.5px and blur thin lines) */
@supports (margin-left: round(down, 1.5px, 1px)) {
  @media (min-width: 1265px) {
    .frame, .nav .nav-inner { margin-left: round(down, calc((100% - var(--max)) / 2), 1px); margin-right: 0; }
  }
}
@media (max-width: 1264px) { .frame { margin: 0 16px; max-width: none; } }   /* up to 1264 the edge stays 48px; above it the centered frame gives more */
@media (max-width: 640px)  { .frame { margin: 0; } }

/* ---------- menu bar ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(18, 18, 18, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* logo | centered links | buttons; same left/right edge as the page content */
.nav-inner {
  max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav-inner .brand { justify-self: start; }
.nav-inner .nav-cta { justify-self: end; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: 17px; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--bg-2);
}
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--muted); }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-text-link { font-size: 14px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.nav-text-link:hover { color: var(--text); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 0; place-items: center; }
.mobile-menu { display: none; }

/* Chartbooks dropdown */
.dd { position: relative; }
.dd-trigger { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; height: var(--nav-h); }
.dd-trigger:hover, .dd-trigger.active, .dd.open .dd-trigger { color: var(--text); }
.dd-trigger svg { transition: transform .2s; }
.dd.open .dd-trigger svg { transform: rotate(180deg); }
.dd-panel {
  position: absolute; top: calc(100% - 8px); left: 50%; width: 300px; z-index: 60;
  transform: translate(-50%, -4px); opacity: 0; visibility: hidden;
  transition: opacity .15s, transform .15s, visibility .15s;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; padding: 8px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8);
}
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) {
  .dd:hover .dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .dd:hover .dd-trigger { color: var(--text); }
}
.dd-group { display: grid; }
.dd-group + .dd-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.dd-label { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); padding: 8px 8px 4px; }
/* plain list: name left, price right */
.dd-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 8px; font-size: 14px; color: var(--text); }
.dd-item:hover, .dd-item[aria-current] { background: var(--surface-hover); }
.dd-item[aria-current] .dd-name, .mobile-menu .mm-sub[aria-current] span:first-child { font-weight: 600; color: var(--text); }   /* the product page you're on */
.dd-price { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-price s { color: var(--dim); margin-right: 8px; font-size: var(--fs-xs); }   /* bundles: original price, crossed out */
.dd-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px 4px; font-size: var(--fs-sm); color: var(--muted); }
.dd-all:hover { color: var(--text); }

@media (max-width: 1264px) { .nav-inner { max-width: none; padding: 0 48px; } }
@media (max-width: 1100px) { .nav-text-link { display: none; } }
@media (max-width: 960px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .mobile-menu.open {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 16px 20px;
  }
  /* main links: white, semibold, the logo's font (like the desktop menu bar) */
  .mobile-menu > a:not(.btn), .mobile-menu .mm-group > a:first-child { padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
  .mm-group { display: grid; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .mobile-menu .mm-group > a:first-child { border-bottom: 0; }
  /* the product list in a panel, like the desktop dropdown */
  .mm-panel { display: grid; background: var(--surface); border: 1px solid var(--line-2); padding: 8px; }
  .mobile-menu .mm-label { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); padding: 8px 8px 4px; }
  .mobile-menu .mm-label ~ .mm-label { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); }
  .mobile-menu .mm-sub { display: flex; justify-content: space-between; padding: 7px 8px; border-bottom: 0; font-family: inherit; font-weight: 400; font-size: 15px; letter-spacing: 0; }
  .mobile-menu .mm-sub[aria-current] { background: var(--surface-hover); }
  .mobile-menu .mm-all { padding: 10px 8px 4px; border-bottom: 0; font-family: inherit; font-weight: 400; font-size: 14px; color: var(--muted); }

  .mobile-menu .btn { margin-top: 12px; border-bottom: 0; }
  .mobile-menu .btn-primary { color: #0d0d0d; }
}
@media (max-width: 640px) { .nav-inner { padding: 0 16px; } }
@media (max-width: 560px) { .nav-cta .btn { display: none; } }

/* ---------- announcement bar (STORE.announcement in products.js) ---------- */
.announce {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 9px 44px; font-size: var(--fs-sm); text-align: center; color: #fff;
  background: linear-gradient(90deg, #c2185b, var(--pink) 50%, #c2185b);
}
.announce p { text-wrap: balance; }   /* when it wraps on phones: two even lines, no lone word */
.announce a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.announce-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 0; font-size: 20px; line-height: 1; color: #fff; opacity: .8;
}
.announce-x:hover { opacity: 1; background: rgba(0, 0, 0, .15); }
@media (max-width: 640px) {
  .announce { padding: 8px 44px 8px 16px; justify-content: flex-start; text-align: left; }
  .announce-x { width: 36px; height: 36px; right: 4px; }   /* bigger tap target on phones */
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 0;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  transition: background .15s, transform .15s, border-color .15s;
}
.btn:active { transform: scale(0.98); }
/* gumroad.js adds an empty logo span to checkout links; hide it so it doesn't take the gap and push the text off center */
.btn .logo-full { display: none; }
.btn-primary { background: #fff; color: #0d0d0d; }
.btn-primary:hover { background: #e6e6e6; }
.btn-ghost { background: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--line-strong); }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: 0; }
.btn-block { width: 100%; }

/* ---------- hero ---------- */
.hero { padding: 40px 32px 0; container-type: inline-size; }   /* 40px below the menu line, like each section's heading below its line */
/* typographic hero: label row (ES & NQ left, purchase terms right) with a line, then the full-width headline */
/* label row: pink-dot label left, small print right, thin line under it (hero, 404) */
.meta-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm); color: var(--muted);
}
.meta-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.meta-tag .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}
@media (max-width: 640px) { .meta-row { font-size: var(--fs-xs); } }
/* hero: "Built for ES & NQ" + total star rating on the left */
.hero-meta-left { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.hero-rating { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.hero-rating .review-stars { margin: 0; font-size: 13px; letter-spacing: 2px; }
a.hero-rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
/* margin-bottom puts the headline's letters exactly midway between this line and the Bundles line */
.hero-meta { margin-bottom: 77px; }
.hero h1 {
  font-family: var(--font-headline); font-weight: 400; letter-spacing: .005em; line-height: .9; color: #fff;
  /* sized so the letters of "PROFESSIONAL CHARTBOOKS." (8.75 x the font size, letter-spacing included) run
     exactly edge to edge; 100cqi = the hero's content width */
  font-size: calc(100cqi / 8.76);
  /* left/right: cancel the font's built-in space before the P and after the period.
     bottom: Bebas sits high in its line box (~5% empty above the caps, ~15% below), so pull what follows
     up by that difference; the headline's letters then sit exactly midway between the two lines */
  margin: 0 -0.1em calc(-0.1em - 4px) -0.03em;
}
.hero h1 span { color: #6b6b6b; }   /* >= 3:1 contrast for large text */
/* two buttons under the headline: jump to the bundles / single chartbooks */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
@media (max-width: 640px) {
  .hero { padding: 24px 16px 0; }
  .hero-meta { margin-bottom: 66px; }
  .hero h1 { font-size: clamp(48px, 14.2vw, 72px); }
}

/* ---------- sections: separated by space (120px desktop / 96px phones) ---------- */
.section { overflow: hidden; }
#pdp { overflow: visible; }
.section + .section, #bundles, .frame > .footer { margin-top: 80px; }
/* thin line at the top of each content section, same as the hero lines */
#bundles::before, #chartbooks::before, #why::before, #reviews::before, #faq::before, #related::before {
  content: ""; display: block; height: 1px; margin: 0 32px; background: var(--line-2);
}
@media (max-width: 640px) { #bundles::before, #chartbooks::before, #why::before, #reviews::before, #faq::before, #related::before { margin: 0 16px; } }
/* "Why SierraChartbooks": three numbered points in a row, thin lines between them */
.why-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 32px; }
.why-grid li { padding: 4px 32px 4px 0; }
.why-grid li + li { padding-left: 32px; border-left: 1px solid var(--line); }
.why-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.why-num { font-family: var(--font-headline); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: .01em; color: #6b6b6b; }   /* big grey Bebas, like the hero's second line */
.why-icon { color: var(--muted); flex: none; }
.why-grid h3 { margin-top: 12px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.why-grid p { margin-top: 8px; color: var(--muted); line-height: 1.6; max-width: 340px; }
@media (max-width: 860px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-grid li, .why-grid li + li { padding: 20px 0; border-left: 0; }
  .why-grid li:first-child { padding-top: 0; }
  .why-grid li + li { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) { .why-grid { margin: 0 16px; } }
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 40px 32px 24px;
}
.section-head h2 { font-family: var(--font-headline); font-weight: 400; font-size: 46px; letter-spacing: .01em; line-height: 1; }
.section-head p { color: var(--muted); font-size: var(--fs-body); margin-top: 6px; }
/* sections without a heading row get the same top spacing */
#faq .faq { padding-top: 40px; }   /* below the section line, like .section-head */
@media (min-width: 641px) and (max-width: 860px) { #faq .faq { padding-top: 40px; } }
@media (max-width: 640px) {
  .section + .section, #bundles, .frame > .footer { margin-top: 70px; }
  .section-head { padding: 26px 16px 14px; }
  .section-head h2 { font-size: 38px; }
  .section-head p { margin-top: 4px; }
  #faq .faq { padding-top: 26px; }
}
/* anchor targets land below the sticky menu, not under it */
section[id], details[id], .pdp-details .block[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- product grids: rounded cards with space between ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 32px; }
.grid > * { min-width: 0; }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; } }
/* bundles: three in a row from 1000px (name + SAVE tag fit on one line), stacked below */
@media (max-width: 999px) { #bundle-grid { grid-template-columns: 1fr; } }
/* reviews: 1-2 reviews use that many columns (no empty cells) */
@media (min-width: 641px) {
  #review-grid[data-count="1"] { grid-template-columns: 1fr; }
  #review-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  #review-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }   /* 2x2 instead of 3 + 1 */
  /* 5: three on top, two wider ones below, so the second row has no empty cell */
  #review-grid[data-count="5"] { grid-template-columns: repeat(6, 1fr); }
  #review-grid[data-count="5"] > * { grid-column: span 2; }
  #review-grid[data-count="5"] > :nth-child(n+4) { grid-column: span 3; }
}

/* ---------- product cards ---------- */
.card {
  display: flex; flex-direction: column; padding: 12px 12px 18px;
  background: var(--surface); border: 1px solid var(--surface-line); border-radius: 0;
  transition: background .2s;
}
/* hover: flat and calm, like the rest of the site: the card lightens a step */
.card:hover { background: var(--surface-hover); }
.card-media {
  position: relative; container-type: inline-size;
  aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden;
  background: #0c0c0c; border: 1px solid var(--line);
}
/* images slightly darkened so busy charts sit behind the label and all cards look even */
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
/* card text lines up with the image edge */
.card-body { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; }
.card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
/* star rating, small line under the title */
.card-rating { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; }
.card-rating .star { color: var(--pink); }
.card-rating .count { color: var(--muted); font-weight: 400; }
.card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: auto; padding-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
/* card info as chips (ES / Orderflow / 6 charts), like the product page */
.card-meta .card-chips { margin-top: 0; gap: 4px; }
.card-meta .chip { padding: 4px 8px; }
.card-price { display: inline-flex; align-items: baseline; gap: 2px; font-size: 17px; white-space: nowrap; }
.card-price .compare { font-size: var(--fs-sm); }

/* prices and tags */
.price { color: var(--text); font-weight: 600; }
.price.sale { color: var(--pink); }
.compare { color: var(--dim); text-decoration: line-through; margin-left: 6px; }
.badge {
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0;
  padding: 2px 7px; border-radius: 0; line-height: 1.5;
}
.badge-tag { background: var(--line); color: var(--text); }
.badge-sale { background: var(--pink-soft); color: var(--pink); }
/* status tag (Bestseller / Popular / Best value) on the image's top-left corner */
.media-badges { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.media-badges .badge { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; padding: 4px 9px; border-radius: 0; line-height: 1.3; }
/* status tag (Bestseller / Popular / Best value): solid white, the opposite of the dark name label */
.media-badges .badge-tag { background: #fff; color: #0d0d0d; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.media-badges .badge-sale { background: var(--pink); color: #fff; border: 1px solid transparent; }

/* product name on the card images: a flat dark box with large white Bebas letters, centered */
.cover-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 88%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: "Bebas Neue", "Inter Tight", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(18px, 7.8cqw, 44px); line-height: 1;
  padding: .3em .24em .22em; background: rgba(24, 24, 24, .94); color: #fff;
  pointer-events: none;
}
/* trim to cap height so equal padding truly centers the letters (+.025em: Bebas caps run a bit tall) */
@supports (text-box: trim-both cap alphabetic) {
  .cover-label { text-box: trim-both cap alphabetic; padding: .335em .24em .31em; }
}
/* market bar on the left of the label: ES blue, NQ orange (same muted tone as the blue), ES + NQ both */
.card { --es: #1c76a2; --nq: #ab5d1d; }
/* the bar sits inside the dark box, exactly as tall as the capital letters (top and bottom aligned with the name) */
/* the bar is the font's own "I" (a plain cap-height stem, .11em wide), colored: the browser renders it exactly like
   the stems of the letters next to it, so top and bottom always line up to the pixel. A drawn box can round 1px off.
   Gap to the name: 5px (the I's own side bearings are .082em). Right padding = everything before the name, so it stays centered. */
/* scaleX(1.4) makes the stem a bit thicker (.154em) without touching its top/bottom; it grows rightward from the
   stem's left edge (41/192 of the glyph), so the gap and right padding get the extra .044em. */
.card[data-market] .cover-label { padding-right: calc(.394em + 5px); }
.card[data-market] .cover-label::before {
  content: "I"; display: inline-block; transform: scaleX(1.4); transform-origin: 21.35% 0;
  margin-right: calc(5px - .038em); color: var(--es);
}
.card[data-market="NQ"] .cover-label::before { color: var(--nq); }
/* ES + NQ: split in two colors at the middle of the capitals. The bar's box is 1em tall (line-height 1) with the
   capitals from .1em to .8em, so their middle is at 45%. */
.card[data-market="ES + NQ"] .cover-label::before {
  color: transparent; background: linear-gradient(var(--es) 45%, var(--nq) 45%);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- reviews (home): plain quotes, no cards ---------- */
#review-grid { column-gap: 48px; row-gap: 40px; }
.review { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin: 0; }
.review-stars { color: var(--pink); font-size: 18px; letter-spacing: 3px; line-height: 1; margin-bottom: -6px; }
.review blockquote { font-size: 16px; line-height: 1.6; color: var(--text); }
.review figcaption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.review-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 600; font-size: 14px; color: var(--text); background: var(--line);
}
.review-who { display: grid; line-height: 1.3; flex: 1; min-width: 0; }
.review-who strong { font-size: 14px; font-weight: 600; }
.review-who span { font-size: var(--fs-sm); color: var(--dim); }
.review-product { font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--line-2); border-radius: 0; padding: 3px 10px; white-space: nowrap; }
.review-product:hover { color: var(--text); border-color: var(--line-strong); }
/* visible marker for example reviews (example: true in products.js) */
.review-example {
  align-self: flex-start; margin-bottom: -10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 0; color: #0d0d0d; background: #e3b341;
}
@media (max-width: 640px) { #review-grid { row-gap: 32px; } }
/* featured quote: full width, larger, with a line under it */
#review-grid .review-featured { grid-column: 1 / -1; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.review-featured blockquote { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; max-width: 900px; }
@media (max-width: 640px) {
  #review-grid .review-featured { padding-bottom: 32px; }
  .review-featured blockquote { font-size: 22px; }
}

/* ---------- FAQ: intro left, questions right as rows between thin lines (no box) ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 0 32px; }
.faq-intro h2 { font-family: var(--font-headline); font-weight: 400; font-size: 46px; letter-spacing: .01em; line-height: 1; }
.faq-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
/* the address as plain text with a copy icon; clicking copies it */
.copy-mail {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--muted);
}
.copy-mail:hover { color: var(--text); }
.copy-mail .i-check { display: none; }
.copy-mail.copied { color: var(--text); }
.copy-mail.copied .i-copy { display: none; }
.copy-mail.copied .i-check { display: block; }
/* the first question lines up with the heading; lines only between questions (the section line is above) */
.faq-list { margin-top: -20px; }
.faq-list details + details { border-top: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .plus { transition: transform .2s; color: var(--muted); flex: none; }
.faq-list details[open] summary .plus { transform: rotate(45deg); }
.faq-list summary:hover .plus { color: var(--text); }
.faq-list .answer { padding: 0 0 22px; color: var(--muted); font-size: var(--fs-body); max-width: 640px; }
.faq-list .answer a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.faq-list .answer a:hover { text-decoration-color: var(--text); }
.install-intro { margin-bottom: 12px; }
.install-steps { padding-left: 20px; display: grid; gap: 8px; }
.install-steps li::marker { color: var(--dim); }
.install-tip { margin-top: 10px; }
@media (min-width: 641px) { .faq-list summary { font-size: 16px; } }
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
  .faq-list { margin-top: 0; }
  /* stacked: heading, questions, then the Email support button (after people have read the answers) */
  .faq-intro { display: contents; }
  .faq-intro h2 { order: 1; }
  .faq-list { order: 2; }
  .faq-contact { order: 3; justify-self: start; margin-top: 8px; }
  .faq-list .answer { padding-bottom: 20px; }
}
@media (min-width: 641px) and (max-width: 860px) { .faq { padding: 0 32px; } }
@media (max-width: 640px) { .faq-intro h2 { font-size: 38px; } }

/* ---------- terms page: label row, heading, readable text column ---------- */
.legal { padding: 40px 32px 0; }
.legal .meta-row { margin-bottom: 40px; }
.legal h1 { font-family: var(--font-headline); font-weight: 400; font-size: 46px; letter-spacing: .01em; line-height: 1; }
.legal-lead { margin-top: 14px; font-size: 17px; color: var(--text); }
.legal h2 { margin-top: 36px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.legal p { max-width: 720px; }
.legal h2 + p, .legal p + p { margin-top: 8px; }
.legal p:not(.legal-lead) { color: var(--muted); line-height: 1.65; }
.legal ul { max-width: 720px; margin-top: 8px; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); line-height: 1.6; }
.legal ul + p { margin-top: 12px; }
.legal li::marker { color: var(--dim); }
.legal .install-steps { max-width: 720px; margin-top: 10px; color: var(--muted); line-height: 1.6; }
.legal strong { color: var(--text); font-weight: 600; }
/* guides: example footprint bar (bid × ask per price), imbalance in pink, POC outlined */
.fp-example { max-width: 720px; margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.fp-bar { display: grid; min-width: 220px; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.fp-row { display: grid; grid-template-columns: 80px 60px 60px; align-items: center; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; }
.fp-row span:not(:first-child) { text-align: right; color: var(--text); }
.fp-row span:first-child { color: var(--muted); }
.fp-head span, .fp-head span:not(:first-child) { color: var(--dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.fp-poc { border-color: var(--line-strong); }
.fp-imb { color: var(--pink) !important; font-weight: 600; }
.fp-foot { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; }
.fp-foot span:last-child { font-weight: 600; }
.fp-example figcaption { flex: 1 1 240px; display: grid; gap: 12px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.fp-key { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: 0; }
.fp-key-imb { background: var(--pink); }
.fp-key-poc { border: 1px solid var(--line-strong); }
.legal .fp-example + p { margin-top: 16px; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.legal a:hover { text-decoration-color: var(--text); }
/* "On this page" list on the left (sticky) + numbered sections with a line between them (built by site.js) */
.legal-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 64px; margin-top: 48px; }
.toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; max-height: calc(100vh - var(--nav-h) - 64px); overflow-y: auto; scrollbar-width: thin; }
.toc-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.toc ol { list-style: none; border-left: 1px solid var(--line); }
.legal .toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); text-decoration: none; }
.legal .toc a:hover { color: var(--text); }
.legal .toc a[aria-current] { color: var(--text); border-left-color: var(--pink); }
.legal-sec { padding: 36px 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal-sec:first-child { padding-top: 0; }
.legal-sec + .legal-sec { border-top: 1px solid var(--line); }
.legal .legal-sec h2 { margin-top: 0; display: flex; align-items: baseline; gap: 12px; }
.sec-num { font-size: var(--fs-sm); font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .toc { display: none; }   /* no room beside the text: the page reads top to bottom */
}
@media (max-width: 640px) {
  .legal-sec { padding: 28px 0; }
  .legal { padding: 24px 16px 0; }
  .legal .meta-row { margin-bottom: 28px; }
  .legal h1 { font-size: 38px; }
  .legal-lead { font-size: var(--fs-body); }
}
/* ---------- newsletter signup, above the footer on every page ---------- */
.newsletter { margin-top: 80px; padding: 0 32px; display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 24px 48px; align-items: end; }
.newsletter::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 16px; background: var(--line-2); }   /* section line */
.nl-text h2 { font-family: var(--font-headline); font-weight: 400; font-size: 46px; letter-spacing: .01em; line-height: 1; }
.nl-text p { margin-top: 10px; color: var(--muted); max-width: 520px; }
.nl-form { display: flex; gap: 8px; }
.nl-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; font: inherit; font-size: var(--fs-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0;
}
.nl-form input::placeholder { color: var(--dim); }
.nl-form input:focus { outline: 2px solid var(--pink); outline-offset: -1px; }
.nl-form .btn { height: 44px; white-space: nowrap; }
.nl-note { margin-top: 10px; font-size: var(--fs-sm); color: var(--dim); }
.nl-note .sep { margin: 0 8px; }
.nl-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.nl-note a:hover { color: var(--text); }
.nl-note.done { color: var(--muted); font-size: var(--fs-body); }
.nl-note.done strong { color: var(--text); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.newsletter > * { min-width: 0; }   /* let the columns shrink below their content's natural width (no sideways scroll on phones) */
@media (max-width: 860px) { .newsletter { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 640px) {
  .newsletter { margin-top: 70px; padding: 0 16px; }
  .newsletter::before { margin-bottom: 2px; }   /* line -> heading 31px, like the other sections on phones */
  .nl-text h2 { font-size: 38px; }
}

/* ---------- footer: one row of links, then the small print ---------- */
.footer { padding: 0 32px 28px; }
/* full-width line at the top, like the line under the menu: the menu and footer frame the page.
   The line is 1px inside the footer, widened to the screen edges with a shadow (a shadow never causes sideways scrolling). */
.footer::before {
  content: ""; display: block; height: 1px; margin-bottom: 40px; background: var(--line);
  box-shadow: 0 0 0 100vmax var(--line); clip-path: inset(0 -100vmax);
}
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.footer-links a:hover { color: var(--text); }
/* social icons at the end of the footer links */
.footer-links .social { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 21px; }
.footer-links li:has(.social) + li:has(.social) { margin-left: -8px; }   /* icons sit a little closer together than text links */
.footer-bottom {
  display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  margin-top: 32px; font-size: var(--fs-sm); color: var(--dim);
}
/* disclaimer on one line where it fits */
@media (min-width: 1100px) { .footer-bottom p { white-space: nowrap; } }
@media (max-width: 640px) { .footer { padding: 0 16px 24px; } .footer::before { margin-bottom: 26px; } .footer-bottom { margin-top: 24px; } }

/* ======================================================
   PRODUCT PAGE
   desktop: [screenshots + details] | [buy box, stays in view]
   phones:  screenshots (swipe), buy box, details
   ====================================================== */
.pdp {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr; grid-template-areas: "media info" "details info";
}
.pdp-media { grid-area: media; position: relative; min-width: 0; }
.pdp-info { grid-area: info; position: relative; }
.pdp-details { grid-area: details; min-width: 0; padding: 8px 16px 0 32px; }
.pdp-details > .block:first-child { margin-top: 32px; }
.pdp-details h2 { font-family: var(--font-headline); font-weight: 400; font-size: 34px; letter-spacing: .01em; margin-bottom: 4px; }

/* gallery: one large image + thumbnail strip (phones swipe instead) */
.pdp-gallery { padding: 16px 16px 16px 32px; display: grid; gap: 16px; align-content: start; }
.shot {
  border-radius: 0; padding: 18px; position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.shot img { width: 100%; height: auto; border-radius: 0; box-shadow: 0 20px 50px -12px rgba(0,0,0,.7); cursor: zoom-in; }
/* "click to enlarge" hint: small expand icon in the top right corner of each screenshot (the image opens the viewer) */
.shot::after {
  content: ""; position: absolute; top: 26px; right: 26px; width: 30px; height: 30px; pointer-events: none;
  background: rgba(0, 0, 0, .65) center / 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f2f2f2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5h3.5V6M6 13.5H2.5V10M13.5 2.5L9 7M2.5 13.5L7 9'/%3E%3C/svg%3E");
  opacity: .75; transition: opacity .15s;
}
.shot:hover::after { opacity: 1; }
.gallery-count { display: none; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; padding: 0 16px 16px 32px; }
.thumb {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden;
  border: 1px solid var(--line-2); opacity: .55; transition: opacity .15s, border-color .15s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; }
.thumb[aria-selected="true"] { opacity: 1; border-color: var(--text); }
/* animated screenshots get a small play marker */
.thumb.is-anim::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0, 0, 0, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2.5v5l4-2.5z' fill='white'/%3E%3C/svg%3E") center / 10px no-repeat;
}
@media (min-width: 901px) { .pdp-gallery .shot:not(.active) { display: none; } }

/* buy box: a floating card on desktop; stays in view only when it fits (site.js adds .no-stick otherwise) */
.pdp-sticky { position: sticky; top: var(--nav-h); padding: 28px 32px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
@media (min-width: 901px) {
  .pdp-sticky {
    top: calc(var(--nav-h) + 16px); margin: 16px 32px 0 0;   /* no bottom margin: when it stops, it ends level with the small-print box */ padding: 20px 24px;
    max-height: calc(100vh - var(--nav-h) - 32px);
    background: var(--surface); border: 1px solid var(--surface-line); border-radius: 0;
  }
}
.pdp-sticky.no-stick { position: static; max-height: none; overflow: visible; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.back:hover { color: var(--text); }
/* breadcrumb above the product name: "Chartbooks / Footprint" */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--dim); }
.crumb-sep { margin: 0 8px; color: var(--dim); }
.pdp h1 { font-family: var(--font-headline); font-weight: 400; font-size: clamp(40px, 3.8vw, 52px); letter-spacing: .01em; line-height: .95; margin-top: 12px; }
/* chips under the name: status tag (Bestseller / Popular / Best value) first, then market, category, platform */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip { font-size: var(--fs-xs); padding: 4px 10px; background: var(--line); color: var(--muted); }
.chip-status { background: #fff; color: #0d0d0d; font-weight: 700; letter-spacing: .02em; }
/* market chip (ES / NQ / ES + NQ): a step brighter than the other chips so it reads first */
.chip-market { background: var(--line-strong); color: var(--text); font-weight: 600; }
.pdp-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
.pdp-rating .review-stars { margin: 0; font-size: 16px; letter-spacing: 2px; }
a.pdp-rating:hover span:last-child { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pdp-tagline { color: var(--muted); font-size: 16px; margin-top: 16px; }
.pdp-price { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.pdp-price .now { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.03em; }
.pdp-price .was { color: var(--dim); text-decoration: line-through; font-size: 18px; }
.pdp-price .badge { align-self: center; }
.buy-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
/* one quiet line under the Buy button: terms + install link */
.buy-sub { margin-top: 12px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.buy-sub .sep, .req-line .sep { margin: 0 8px; color: var(--dim); }
/* "Last updated ..." at the bottom of What's Included */
.incl-updated { margin-top: 14px; font-size: var(--fs-sm); color: var(--dim); }
.buy-sub a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.buy-sub a:hover { color: var(--text); }
.req-line { margin-top: 6px; text-align: center; font-size: var(--fs-sm); color: var(--dim); text-wrap: balance; }   /* two even lines when it wraps */

/* bundle offer: plain text under a thin line (no box, no image) */
.upsell { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.upsell-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 15px; }
.upsell-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.upsell-price { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.upsell-price .compare { margin-left: 0; }
.upsell p { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; line-height: 1.5; }
.upsell-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; flex-wrap: wrap; }

/* details column */
.block { margin-top: 30px; }
.block h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
/* product page: thin line above each details section, like the home page section lines (the collapsible group is a card, so no line) */
.pdp-details > .block:not(.acc-group) { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.pdp .intro { color: var(--muted); margin-top: 20px; max-width: 640px; }
.pdp .intro p + p { margin-top: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills span { font-size: var(--fs-sm); padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 0; color: var(--text); }
.table { border: 1px solid var(--line); border-radius: 0; overflow: hidden; font-size: var(--fs-body); }
.table .row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table .row:last-child { border-bottom: 0; }
.table .row span:first-child { color: var(--muted); }
.table .row.total { background: var(--bg-2); font-weight: 600; }
.table .row.total span:first-child { color: var(--text); }
.table .row.save { background: var(--bg-2); padding-top: 0; font-weight: 600; }
.table .row.total:has(+ .row.save) { border-bottom: 0; }
.table .row.save span:last-child { color: var(--pink); }
/* reviews of this product */
.pdp-reviews { display: grid; gap: 28px 40px; }
@media (min-width: 901px) { .pdp-reviews { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
/* plain quotes, like the home page reviews */
.pdp-review { margin: 0; display: grid; gap: 10px; align-content: start; }
.pdp-review .review-stars { margin: 0; font-size: 16px; }
.pdp-review blockquote { font-size: var(--fs-body); color: var(--text); line-height: 1.55; }
.pdp-review figcaption { font-size: var(--fs-sm); color: var(--dim); }
.pdp-review figcaption strong { color: var(--text); font-weight: 600; }
/* What's Included: four items in a 2x2 grid (file, guide / charts, access); compact labels on phones */
.incl-line { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 40px; font-size: var(--fs-body); color: var(--text); }
.incl-item { display: inline-flex; align-items: center; gap: 8px; }
.incl-item svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.incl-item .short { display: none; }
@media (max-width: 640px) {
  .incl-line { grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: var(--fs-sm); }
  .incl-item .long { display: none; }
  .incl-item .short { display: inline; }
  .incl-item svg { width: 16px; height: 16px; }
}
/* collapsible sections (Features, Installation) */
/* collapsible sections (Features, Installation): rows between thin lines, no box */
.acc-group { margin-top: 32px; }
.acc { border-top: 1px solid var(--line-2); }
.acc:last-child { border-bottom: 1px solid var(--line-2); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 16px; font-weight: 600;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover .plus { color: var(--text); }
.acc summary .plus { color: var(--muted); transition: transform .2s; flex: none; }
.acc[open] summary .plus { transform: rotate(45deg); }
.acc-body { padding: 0 0 20px; }
.acc[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.checks { list-style: none; display: grid; gap: 9px; font-size: var(--fs-body); color: var(--muted); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks svg { flex: none; color: var(--muted); margin-top: 4px; }
/* feature + explanation: name in white, why in grey; one column so each reads as a single line */
.checks .feat-name { color: var(--text); }
.checks .feat-why { color: var(--muted); }
.checks:has(.feat-why) { gap: 12px; }
@media (min-width: 901px) { .checks:not(:has(.feat-why)) { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.numbered { padding-left: 22px; display: grid; gap: 7px; font-size: var(--fs-body); color: var(--muted); }
.numbered li::marker { color: var(--dim); font-variant-numeric: tabular-nums; }
.block-note { color: var(--muted); margin-top: 12px; font-size: var(--fs-sm); line-height: 1.5; }
.block-note strong { color: var(--text); font-weight: 600; }
/* standalone "go here next" links (install guide, browse the chartbooks): white, semibold, underlined */
.guide-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.guide-note a:hover { text-decoration-color: var(--text); }/* market note + license at the bottom */
/* market note + license: small print in a quiet box (the line above would double the Installation row's line) */
.info-note { margin-top: 32px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.info-note p + p { margin-top: 8px; }

.mobile-buy { display: none; }

/* back to top: small square button, bottom right, fades in after scrolling down */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 39; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; color: var(--muted);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, color .15s, bottom .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--text); background: var(--surface-hover); }
@media (max-width: 640px) { .to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 42px; height: 42px; } }
/* product pages on phones: sit above the sticky buy bar while it's showing */
body:has(.mobile-buy.show) .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "media" "info" "details"; }
  .pdp-details { padding: 0 16px; }
  .pdp-sticky { position: static; max-height: none; overflow: visible; padding: 28px 16px 32px; }
  .pdp-gallery {
    display: flex; gap: 10px; padding: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .pdp-gallery::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 88%; padding: 10px; border-radius: 0; scroll-snap-align: center; }
  .pdp-gallery .shot:only-child { flex-basis: 100%; }
  .thumbs { display: none; }
  .gallery-count {
    display: block; position: absolute; right: 26px; bottom: 26px; pointer-events: none;
    font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: 0;
    background: rgba(0, 0, 0, .65); color: var(--text); font-variant-numeric: tabular-nums;
  }
  .mobile-buy {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(18,18,18,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); align-items: center; gap: 12px;
    transform: translateY(110%); transition: transform .25s;
  }
  .mobile-buy.show { transform: none; }
  .mobile-buy .mb-name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted); }
  .mobile-buy .mb-name strong { display: block; color: var(--text); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* tablets: same 32px inner edge as the rest of the site (48px from the screen edge, like the menu) */
@media (min-width: 641px) and (max-width: 900px) {
  .pdp-details { padding: 0 32px; }
  .pdp-sticky { padding: 28px 32px 32px; }
  .pdp-gallery { padding: 16px 32px; scroll-padding: 0 32px; }
  .gallery-count { right: 42px; }
}

/* screenshot lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(8, 8, 8, .94);
  display: none; align-items: center; justify-content: center; padding: 64px 88px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox:focus { outline: none; }   /* the viewer itself holds focus after a mouse click: no ring */
.lightbox img { max-width: 100%; max-height: calc(100vh - 128px); border-radius: 0; cursor: default; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
/* square buttons in the site's style: close top right, arrows centered on the sides */
.lb-btn {
  position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: rgba(24, 24, 24, .9); border: 1px solid var(--line-strong); border-radius: 0; color: var(--muted);
  transition: color .15s, background .15s;
}
.lb-btn:hover { color: var(--text); background: var(--surface-hover); }
.lb-close { top: 16px; right: 16px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.lb-count span { color: var(--text); }
@media (max-width: 640px) {
  .lightbox { padding: 64px 0; }                         /* image uses the full width; arrows sit over it */
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-prev, .lb-next { width: 40px; height: 40px; }
}

/* ---------- 404 ---------- */
/* same layout as the home hero (label row, big two-line headline), plus one button */
.not-found .hero-meta { margin-bottom: 64px; }
.not-found-actions { margin-top: 56px; }
@media (max-width: 640px) { .not-found .hero-meta { margin-bottom: 48px; } .not-found-actions { margin-top: 40px; } .not-found-actions .btn { width: 100%; } }

/* ---------- motion & keyboard focus ---------- */
/* content fades in and rises slightly as it scrolls into view; items in a row follow one another (--d set by site.js) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
/* clear pink ring for keyboard users (Tab key); mouse clicks don't show it */
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 0; }
.card:focus-visible, .dd-item:focus-visible, .faq-list summary:focus-visible, .review-product:focus-visible { outline-offset: -2px; }
.btn:focus-visible, .thumb:focus-visible { border-radius: 0; }
/* phones: bigger tap area for small text links, without moving anything (padding + equal negative margin) */
@media (max-width: 640px) {
  .back, .upsell-title a { padding: 8px 0; margin-top: -8px; margin-bottom: -8px; }
  .pdp-rating { padding: 8px 0; margin-top: 6px; margin-bottom: -8px; }   /* 14px top margin - 8px */
}