/*
  TrackOrBuy design system.

  One file, custom properties, no framework and no build step: the CSP
  carries no 'unsafe-inline' for style-src, so there are no inline styles
  anywhere and no external font host is reachable. That last constraint is
  why this uses the system stack rather than a webfont, and why the work of
  looking designed is done with scale, weight, spacing and numerals instead.

  Mobile first: base rules are the 375px layout, min-width queries add the
  wider ones. Every number below is deliberate; if you change one, check the
  verdict colour pairs still clear WCAG AA (4.5:1) in both schemes.
*/

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Neutrals. A slightly cool grey ramp: warmer greys read as "document",
     cooler greys read as "instrument", and this is an instrument. */
  --n-0:  #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f4f6f8;
  --n-100:#e9edf1;
  --n-200:#d8dee6;
  --n-300:#b9c2ce;
  --n-400:#8d99a9;
  --n-500:#667385;
  --n-600:#4b5666;
  --n-700:#343d4a;
  --n-800:#212832;
  --n-900:#141a21;
  --n-950:#0b0f14;

  /* What made this read as a template was never the background colour, it
     was the absence of depth: cards sat flat on the page with a 1px grey
     box around them, so nothing was above anything else. The page is
     white, with a light grey gradient over its first 720px, and
     separation is carried by elevation and hairlines. */
  --bg:            #ffffff;
  --bg-sunken:     #f2f5f9;
  --surface:       var(--n-0);
  --surface-raised:var(--n-25);
  --border:        rgba(16, 24, 40, 0.07);
  --border-strong: rgba(16, 24, 40, 0.13);

  --text:          #171e27;
  --text-muted:    #5b6675;
  --text-faint:    #8d99a9;

  /* Brand. Indigo, deliberately not the same hue family as any verdict, so
     brand chrome can never be mistaken for a verdict signal. */
  --brand:         #4f46e5;
  --brand-hover:   #4338ca;
  --brand-contrast:#ffffff;
  --brand-tint:    #eef2ff;
  --focus:         #4f46e5;

  /* Verdicts. Four states that must be distinguishable at a glance, in a
     stats context, at small sizes, and never by colour alone: each also
     carries its own word and its own icon shape.

     WAIT is amber, not red. It is advice, not an alarm: nothing has gone
     wrong when the answer is "not yet". */
  --buy:        #0f8a54;
  --buy-strong: #0b6f43;
  --buy-tint:   #e6f6ee;
  --buy-line:   #12a866;

  --wait:       #9a6206;
  --wait-strong:#7c4e05;
  --wait-tint:  #fdf4e3;
  --wait-line:  #d08a10;

  --fair:       #4b5666;
  --fair-strong:#343d4a;
  --fair-tint:  #f1f4f7;
  --fair-line:  #8d99a9;

  --tracking:   #3f5b96;
  --tracking-strong:#324a7c;
  --tracking-tint:  #eef2fa;
  --tracking-line:  #6b86c4;

  --danger:      #b3261e;
  --danger-tint: #fdecea;

  /* Type. system-ui for prose, the mono stack for anything numeric, which
     is what makes a price feel measured rather than typed. */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.8125rem; /* 13 */
  --t-base: 0.9375rem; /* 15 */
  --t-md:   1.0625rem; /* 17 */
  --t-lg:   1.25rem;   /* 20 */
  --t-xl:   1.5rem;    /* 24 */
  --t-2xl:  2rem;      /* 32 */
  --t-3xl:  2.75rem;   /* 44 */

  /* Spacing, 4px base. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Layered, short-then-long, which is what makes a card read as sitting
     above the page rather than being drawn onto it. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow:    0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 8px 20px -4px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 4px 8px -2px rgba(16, 24, 40, 0.05), 0 20px 40px -8px rgba(16, 24, 40, 0.12);

  /* Top of the vertical page gradient. Light grey, resolving to --bg. */
  --wash-top: #eceff4;

  --measure: 68ch;
  --page-max: 1080px;
  --page-narrow: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            var(--n-950);
    --bg-sunken:     #080b0f;
    --surface:       #11161d;
    --surface-raised:#161c25;

    --text:          #e8ecf1;
    --text-muted:    #a3aebd;
    --text-faint:    #778394;

    --brand:         #8b87f5;
    --brand-hover:   #a5a1ff;
    --brand-contrast:#12101f;
    --brand-tint:    #1c1b3a;
    --focus:         #8b87f5;

    --buy:        #3ddc97;
    --buy-strong: #6ee7b0;
    --buy-tint:   #0d2a1e;
    --buy-line:   #3ddc97;

    --wait:       #f0b445;
    --wait-strong:#f6c96f;
    --wait-tint:  #2c2113;
    --wait-line:  #f0b445;

    --fair:       #a3aebd;
    --fair-strong:#c3ccd8;
    --fair-tint:  #1a212a;
    --fair-line:  #778394;

    --tracking:   #8fabe8;
    --tracking-strong:#b3c6f2;
    --tracking-tint:  #151d2e;
    --tracking-line:  #8fabe8;

    --danger:      #ff8a80;
    --danger-tint: #2c1512;

    --border:        rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --wash-top: #151b23;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.55);
  }
}

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */

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

/* The `hidden` attribute must beat any class that sets `display`.
   Browsers enforce it with a UA rule of the form `[hidden] { display: none }`,
   and a bare attribute selector loses to any class selector, so an element
   that is both `hidden` and, say, `.checking-now` (which is `inline-flex`)
   stays on screen. That shipped once: the pending page showed the
   "checking" and the "slow" phase at the same time. This is the only
   `!important` in the file and it is here to make a platform primitive
   behave like one. */
[hidden] { display: none !important; }

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Light grey at the top of the document, resolving to the page colour
     further down. One plain vertical gradient, no tint and no radial. */
  background-color: var(--bg);
  background-image: linear-gradient(to bottom, var(--wash-top) 0%, var(--bg) 720px);
  background-repeat: no-repeat;
}

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

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--brand-hover); }

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 650;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Every number on this site is tabular, so digits never shimmy as prices
   update in place during a poll. */
.num, .price, .stat-value, .chart-axis text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.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;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--surface);
  color: var(--text);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

/* ---------------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
  flex: 1 0 auto;
}

.page-narrow { max-width: var(--page-narrow); }

.site-header {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 680;
  font-size: var(--t-md);
  letter-spacing: -0.02em;
}
.wordmark:hover { color: var(--text); }
.wordmark .mark { width: 26px; height: 26px; flex: 0 0 26px; }
.wordmark .wordmark-or { color: var(--text-faint); font-weight: 550; }

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-sm);
}

.site-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.site-footer nav {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-1);
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }

.associates-disclosure { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   Buttons and forms
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-md);
  font-weight: 620;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color 120ms ease, border-color 120ms ease, transform 60ms ease, box-shadow 120ms ease;
}
.btn:active { transform: translateY(1px); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

.btn-primary {
  background: var(--brand);
  color: var(--brand-contrast);
}
.btn-primary:hover { background: var(--brand-hover); color: var(--brand-contrast); }

/* The click the business runs on. Bigger type and more weight than any
   other control on the page. */
.btn-buy {
  background: var(--buy);
  color: #ffffff;
  font-size: var(--t-lg);
  font-weight: 650;
  min-height: 56px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px -4px color-mix(in srgb, var(--buy) 45%, transparent);
}
.btn-buy:hover {
  background: var(--buy-strong);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 22px -4px color-mix(in srgb, var(--buy) 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  .btn-buy { color: #06210f; }
  .btn-buy:hover { color: #06210f; }
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-sunken); color: var(--text); }

.btn-quiet {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding-left: var(--s-2);
  padding-right: var(--s-2);
}
.btn-quiet:hover { color: var(--text); background: var(--bg-sunken); }

.btn-block { width: 100%; }

.btn-danger {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-tint); color: var(--danger); }

.field { margin-bottom: var(--s-3); }

label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

input[type="url"],
input[type="text"],
input[type="email"],
input[type="number"],
select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input::placeholder { color: var(--text-faint); }

input:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.form-error {
  color: var(--danger);
  background: var(--danger-tint);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------------
   Landing
   --------------------------------------------------------------------------- */

.hero {
  padding: var(--s-7) 0 var(--s-6);
  max-width: var(--measure);
}

.hero h1 {
  font-size: var(--t-2xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}

.hero .tagline {
  font-size: var(--t-md);
  color: var(--text-muted);
  margin-bottom: var(--s-5);
  text-wrap: pretty;
}

.lookup-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 560px;
}

.lookup-form .form-error { order: 3; }

.marketplace-switcher {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.marketplace-switcher label { margin-bottom: 0; }
.marketplace-switcher select { width: auto; min-height: 36px; padding: var(--s-1) var(--s-2); }

.value-props {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}

.value-prop-title {
  font-weight: 620;
  margin-bottom: var(--s-1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.value-prop p { color: var(--text-muted); font-size: var(--t-base); }

.value-prop .mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--brand);
}

.privacy-line {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------------
   Product page: identity strip
   --------------------------------------------------------------------------- */

.product-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.product-image-box {
  grid-row: span 2;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
}
.product-image-box img { width: 100%; height: 100%; object-fit: contain; }

.product-title {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
  text-wrap: pretty;
}

.variant-note {
  font-size: var(--t-sm);
  color: var(--text-muted);
  background: var(--bg-sunken);
  border-left: 2px solid var(--border-strong);
  padding: var(--s-2) var(--s-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--s-3);
}

.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.price {
  font-size: var(--t-3xl);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.price.unavailable {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.price-delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--radius-sm);
}
.price-delta[data-dir="down"] { color: var(--buy); background: var(--buy-tint); }
.price-delta[data-dir="up"]   { color: var(--wait); background: var(--wait-tint); }
.price-delta[data-dir="flat"] { color: var(--text-muted); background: var(--bg-sunken); }

.last-checked { font-size: var(--t-sm); color: var(--text-faint); margin-top: var(--s-2); }
.last-checked.prominent { color: var(--wait); font-weight: 550; }

.checking-now {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-md);
  color: var(--text-muted);
}

.checking-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand);
  animation: wob-pulse 1.4s ease-in-out infinite;
}

@keyframes wob-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .checking-dot { animation: none; opacity: 1; }
}

.pending-status { margin-top: var(--s-2); }
.pending-status > p { margin: 0; }
.pending-stopped { font-size: var(--t-md); color: var(--text-muted); text-wrap: pretty; }

/* Skeletons. These stand in for content we have asked Amazon for and not
   received yet, and they exist so a wait reads as deliberate. The price
   skeleton is sized to the price it replaces so the layout does not jump
   when the real number lands. */
.price-skeleton {
  display: inline-block;
  /* Sized in the price's own type, not the body's. Both dimensions are
     relative to font-size, so matching .price here is what makes the line
     the same height and roughly the same width as the number that
     replaces it, which is the entire point of drawing it. */
  font-size: var(--t-3xl);
  width: 7ch;
  height: 1em;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.price-skeleton,
.product-image-box.is-loading {
  /* Both stops are theme aware. A raw --n-* highlight would be a bright
     band on near black, because the neutral ramp is not re-mapped in the
     dark palette, only the semantic tokens built from it are. */
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--surface-raised) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: wob-shimmer 1.4s ease-in-out infinite;
}

.product-image-box.is-loading { border-color: transparent; box-shadow: none; }

@keyframes wob-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* The image column only earns its space when there is an image or a wait
   to show. A settled listing with no image gets the full width rather
   than an empty frame. */
.product-head.no-image { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .price-skeleton,
  .product-image-box.is-loading { animation: none; background: var(--bg-sunken); }
}

/* ---------------------------------------------------------------------------
   Verdict
   --------------------------------------------------------------------------- */

.verdict {
  --v:        var(--fair);
  --v-strong: var(--fair-strong);
  --v-tint:   var(--fair-tint);
  --v-line:   var(--fair-line);
}
.verdict[data-verdict="BUY"]      { --v: var(--buy);      --v-strong: var(--buy-strong);      --v-tint: var(--buy-tint);      --v-line: var(--buy-line); }
.verdict[data-verdict="WAIT"]     { --v: var(--wait);     --v-strong: var(--wait-strong);     --v-tint: var(--wait-tint);     --v-line: var(--wait-line); }
.verdict[data-verdict="WATCHING"] { --v: var(--tracking); --v-strong: var(--tracking-strong); --v-tint: var(--tracking-tint); --v-line: var(--tracking-line); }

.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border-radius: 999px;
  background: var(--v-tint);
  color: var(--v);
  border: 1px solid color-mix(in srgb, var(--v) 28%, transparent);
  font-size: var(--t-sm);
  font-weight: 680;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.verdict-badge .mark { width: 15px; height: 15px; flex: 0 0 15px; }

/* The hero object on the page. It carries the answer, the evidence for it
   and the action that follows from it, so it is the one element allowed
   real elevation and a tint of its own verdict colour. */
.verdict-card {
  position: relative;
  margin: 0 0 var(--s-5);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--v) 6%, var(--surface)) 0%, var(--surface) 40%);
  border: 1px solid color-mix(in srgb, var(--v) 22%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* A full bleed rule of the verdict colour along the top edge. */
.verdict-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--v);
}

.verdict-headline {
  font-size: var(--t-2xl);
  letter-spacing: -0.03em;
  margin: var(--s-3) 0 var(--s-2);
  text-wrap: balance;
}

/* The claim carries full weight; the qualification after it steps back.
   One undifferentiated block at one size was hard to read at a glance. */
.verdict-reason {
  font-size: var(--t-md);
  color: var(--text);
  max-width: var(--measure);
  text-wrap: pretty;
}

.verdict-reason-more {
  margin-top: var(--s-2);
  font-size: var(--t-base);
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.verdict-supporting-single {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--t-base);
  color: var(--text-muted);
}

.verdict-supporting {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--t-base);
}

.verdict-supporting li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--text);
}

.verdict-supporting li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--v-line);
}

.verdict-cta { margin-top: var(--s-4); font-size: var(--t-base); color: var(--text); }

/* Both actions in one block, inside the card that argues for them, with
   the choice between them said out loud. They used to be a Buy button in
   the card and a watch widget in its own box underneath, which read as
   two unrelated offers stacked up rather than one either/or. */
.verdict-action {
  margin-top: var(--s-5);
}

.verdict-actions {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.actions-or {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0;
  color: var(--text-faint);
  font-size: var(--t-sm);
}
.actions-or::before,
.actions-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.actions-or span { flex: 0 0 auto; }

/* The quiet Amazon link on a WAIT, sitting under the "or". */
.verdict-actions .cta-secondary {
  margin: 0;
  text-align: center;
}

.verdict-confidence {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--t-xs);
  color: var(--text-faint);
}

/* ---------------------------------------------------------------------------
   Stats strip: the data-forward payload
   --------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 var(--s-5);
  box-shadow: var(--shadow-sm);
}

/* Both columns of the product grid start on the same line. The evidence
   column was inheriting a top margin from whichever block happened to be
   first, which opened a gap above the stats that lined up with nothing. */
.product-grid > * > :first-child { margin-top: 0; }

.stat {
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
}

.stat-value {
  font-size: var(--t-lg);
  font-weight: 640;
  letter-spacing: -0.02em;
}

.stat[data-tone="low"]  .stat-value { color: var(--buy); }
.stat[data-tone="high"] .stat-value { color: var(--text-muted); }

.stat-note { font-size: var(--t-xs); color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   Chart
   --------------------------------------------------------------------------- */

.chart-section { margin: var(--s-5) 0; }

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.chart-title { font-size: var(--t-sm); font-weight: 620; color: var(--text-muted); }

.chart-window-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.chart-window-switcher button {
  min-height: 32px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.chart-window-switcher button:hover { color: var(--text); }
.chart-window-switcher button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.chart-figure {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-3) var(--s-2);
  box-shadow: var(--shadow-sm);
}

.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

.chart-area  { fill: var(--v-line, var(--fair-line)); opacity: 0.10; }
.chart-line  { fill: none; stroke: var(--v-line, var(--fair-line)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-grid  { stroke: var(--border); stroke-width: 1; }

/* Axis text sits in a text token, never the series colour, and at a size
   that survives the viewBox scaling. */
.chart-axis  { fill: var(--text-faint); font-size: 13px; font-family: var(--font-mono); }

.chart-now       { fill: var(--v-line, var(--fair-line)); stroke: var(--surface); stroke-width: 3; }
.chart-now-label { fill: var(--text-faint); font-size: 12px; font-weight: 600; }
.chart-now-price { fill: var(--text); font-size: 14px; font-weight: 700; font-family: var(--font-mono); }

.chart-low-marker { stroke: var(--buy); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.75; }
.chart-low-label  { fill: var(--buy); font-size: 12px; font-weight: 650; font-family: var(--font-mono); }

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--text-faint);
  font-size: var(--t-sm);
  text-align: center;
  padding: var(--s-4);
}

/* ---------------------------------------------------------------------------
   Calls to action and the watch form
   --------------------------------------------------------------------------- */

.cta-stack { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-row .btn { flex: 1 1 auto; }
.cta-secondary { font-size: var(--t-sm); color: var(--text-muted); }
.cta-secondary a { color: var(--text-muted); }

/* The trigger is a real button. Its predecessor was a line of text in a
   bare <summary>, and people could not tell by looking that it did
   anything, which is fatal for the half of the product that earns the
   email address. */
.track-trigger {
  list-style: none;
  cursor: pointer;
}
.track-trigger::-webkit-details-marker { display: none; }
.track-trigger .mark { width: 16px; height: 16px; flex: 0 0 16px; }

.track-widget[open] .track-trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.track-widget[open] .track-trigger .mark { transform: rotate(45deg); }

.track-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow);
}
.track-widget[open] > .track-panel {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.track-panel-title {
  font-size: var(--t-sm);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0;
  margin-bottom: var(--s-3);
}

.track-choices { border: 0; padding: 0; margin: 0 0 var(--s-5); }

/* Every option visible at once. The old design hid two of the three
   behind "or watch for something else", which read as though it watched a
   different product. */
.track-choice {
  margin: 0 0 var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.track-choice:hover { background: var(--bg); }
.track-choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 1px var(--brand);
}

.track-choice-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: var(--text);
}

.track-choice input[type="radio"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--brand);
}

.track-choice-body { display: flex; flex-direction: column; gap: 2px; }
.track-choice-title { font-weight: 600; font-size: var(--t-base); }
.track-choice-note { font-size: var(--t-sm); color: var(--text-muted); }

/* Inside the option it belongs to, revealed by CSS rather than by script,
   so the target price still works with JavaScript switched off. Indented
   to line up with that option's text rather than its radio. */
.track-target {
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3) var(--s-3) calc(var(--s-3) + 18px + var(--s-3));
}
.track-choice:has(input:checked) .track-target { display: flex; }

.track-target-currency {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-muted);
}
.track-target input { max-width: 160px; }

.track-email label { font-size: var(--t-base); font-weight: 600; color: var(--text); margin-bottom: var(--s-2); }

.field-note { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--text-muted); }

/* D22: the real cadence, stated where the promise is made. Left aligned
   with everything else in the panel; centring one line of body copy in a
   left aligned form just looks like a mistake. */
.track-cadence-note {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.track-success {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--buy-tint);
  border: 1px solid color-mix(in srgb, var(--buy) 30%, transparent);
  border-radius: var(--radius);
  color: var(--buy-strong);
  font-size: var(--t-base);
}

@media (prefers-reduced-motion: reduce) {
  .track-choice { transition: none; }
}

/* No price yet: the evidence column carries the open watch panel instead
   of an empty chart well. */
.evidence-placeholder {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.evidence-placeholder-title { font-size: var(--t-md); font-weight: 620; margin-bottom: var(--s-1); }
.evidence-placeholder-note { font-size: var(--t-base); color: var(--text-muted); margin-bottom: var(--s-4); }
/* The panel is unstyled in here on purpose: the placeholder is already a
   surface, so the panel's own border, padding and shadow would be a card
   drawn inside a card. The shadow was the one that got missed, and a
   shadow with nothing casting it is what made this look wrong. */
.evidence-placeholder .track-panel { border: 0; padding: 0; box-shadow: none; }

/* ---------------------------------------------------------------------------
   Cards, manage and cancel
   --------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-sm);
}

.track-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-sm);
}

.track-row-title { font-weight: 620; margin-bottom: var(--s-1); }

.track-row dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-3);
  font-size: var(--t-sm);
  margin: var(--s-3) 0;
}
.track-row dt { color: var(--text-faint); font-weight: 550; }
.track-row dd { color: var(--text); font-variant-numeric: tabular-nums; }

.track-group-heading {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
  color: var(--text-faint);
  margin: var(--s-6) 0 var(--s-3);
}
.track-group-heading:first-of-type { margin-top: var(--s-2); }

.danger-zone {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.danger-zone p { color: var(--text-muted); font-size: var(--t-sm); margin-bottom: var(--s-3); }

.not-found h1, .cancel-page h1 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.not-found p, .cancel-page p { color: var(--text-muted); margin-bottom: var(--s-4); max-width: var(--measure); }

.prose { max-width: var(--measure); }
.prose h1 { font-size: var(--t-2xl); margin-bottom: var(--s-4); letter-spacing: -0.03em; }
.prose h2 { font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-3); }
.prose p { margin-bottom: var(--s-4); color: var(--text-muted); }
.prose ul { margin: 0 0 var(--s-4) var(--s-5); color: var(--text-muted); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--text); font-weight: 620; }

/* ---------------------------------------------------------------------------
   Wider viewports
   --------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .page { padding-left: var(--s-5); padding-right: var(--s-5); }
  .site-header-inner, .site-footer-inner { padding-left: var(--s-5); padding-right: var(--s-5); }

  .hero h1 { font-size: var(--t-3xl); }

  .lookup-form { flex-direction: row; align-items: flex-start; }
  .lookup-form input[type="url"] { flex: 1; }
  .lookup-form .btn { width: auto; flex: 0 0 auto; }
  .lookup-form .form-error { flex-basis: 100%; }

  .product-head { grid-template-columns: 104px 1fr; gap: var(--s-5); }

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

  .value-props { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }

  .site-footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .site-footer nav { margin-top: 0; }
}

@media (min-width: 940px) {
  /* The data-forward two column layout: the answer and the actions stay on
     the left where reading starts, the evidence sits beside them rather than
     below the fold. */
  .product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--s-6);
    align-items: start;
    margin-top: var(--s-5);
  }

  .product-grid > * { min-width: 0; }

  .verdict-card { margin-top: 0; }

  .product-image-box { max-width: 120px; }
}