/* ============================================================================
   WhatWeWant.com — design system
   Hand-written, standalone. No Bootstrap, no CSS framework, no build step.
   Fonts: Instrument Serif (display) + DM Sans (body/UI), loaded in _Layout.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
    --ww-ink: #0f1729;
    --ww-paper: #fafaf8;
    --ww-surface-1: #f3f2ee;
    --ww-surface-2: #eae8e3;
    --ww-border: #d6d3cc;
    --ww-border-strong: #b0ada6;

    --ww-text: #1b2838;
    --ww-text-secondary: #5a6170;
    --ww-text-muted: #8892a0;

    --ww-accent: #0d8f6a;
    --ww-accent-dark: #07694e;
    --ww-accent-bg: rgba(13, 143, 106, 0.10);
    --ww-accent-text: #07694e;

    --ww-caution: #c67030;
    --ww-caution-bg: rgba(198, 112, 48, 0.08);
    --ww-caution-text: #9a5a20;

    --ww-danger: #b83c3c;
    --ww-danger-bg: rgba(184, 60, 60, 0.08);

    --ww-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --ww-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ base -- */

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

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

body.ww-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--ww-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ww-text);
    background: var(--ww-paper);
    -webkit-font-smoothing: antialiased;
}

body.ww-body > main {
    flex: 1 0 auto;
}

h1, h2, h3, h4 {
    font-family: var(--ww-serif);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--ww-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.9375rem; }
h3 { font-size: 1.375rem; }

p {
    margin: 0 0 16px;
}

a {
    color: var(--ww-accent-text);
    text-decoration: none;
    transition: all 0.15s ease;
}

a:hover {
    color: var(--ww-accent-dark);
    text-decoration: underline;
}

strong {
    font-weight: 600;
}

code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.875em;
    background: var(--ww-surface-2);
    border-radius: 4px;
    padding: 1px 5px;
}

img {
    max-width: 100%;
}

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

.ww-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Inner-page top padding (the landing hero supplies its own). */
.ww-page {
    padding: 40px 32px 64px;
}

.ww-page__head {
    margin-bottom: 28px;
}

.ww-page__head h1,
.ww-page__head h2 {
    margin-bottom: 6px;
}

.ww-lede {
    font-size: 17px;
    color: var(--ww-text-secondary);
    max-width: 620px;
}

.ww-muted {
    color: var(--ww-text-muted);
}

.ww-section {
    padding: 56px 32px;
}

.ww-section--tint {
    background: var(--ww-surface-1);
    border-top: 1px solid var(--ww-border);
    border-bottom: 1px solid var(--ww-border);
}

.ww-section__head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 36px;
}

.ww-section__head h2 {
    font-size: 2.125rem;
    margin-bottom: 8px;
}

.ww-section__head p {
    font-size: 16px;
    color: var(--ww-text-secondary);
    margin: 0;
}

/* ------------------------------------------------------------------ logo -- */

.ww-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ww-logo:hover {
    text-decoration: none;
}

.ww-logo__icon {
    width: 30px;
    height: 30px;
    display: block;
}

.ww-logo__text {
    font-family: var(--ww-serif);
    font-size: 23px;
    letter-spacing: -0.02em;
    color: var(--ww-text);
    line-height: 1;
}

.ww-logo__text em {
    font-style: normal;
    color: var(--ww-accent);
}

.ww-logo--on-dark .ww-logo__text {
    color: #fff;
}

.ww-logo--lg .ww-logo__icon {
    width: 44px;
    height: 44px;
}

.ww-logo--lg .ww-logo__text {
    font-size: 33px;
}

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

.ww-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    max-width: 960px;
    margin: 0 auto;
    min-height: 64px;
    border-bottom: 1px solid var(--ww-border);
}

.ww-nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ww-nav__links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ww-text-secondary);
    text-decoration: none;
}

.ww-nav__links a:hover {
    color: var(--ww-text);
    text-decoration: none;
}

/* Dark variant, used inside the landing hero. */
.ww-nav--dark {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ww-nav--dark .ww-nav__links a {
    color: rgba(255, 255, 255, 0.6);
}

.ww-nav--dark .ww-nav__links a:hover {
    color: #fff;
}

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

.ww-hero {
    background: var(--ww-ink);
    color: #fff;
}

.ww-hero__inner {
    padding: 56px 32px 48px;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.ww-hero h1 {
    font-size: 2.875rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 16px;
}

.ww-hero__sub {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 540px;
    margin: 0 auto 32px;
}

.ww-hero__search {
    display: flex;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto;
}

.ww-hero__search input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ww-sans);
    font-size: 16px;
    padding: 14px 20px;
    border: none;
    border-radius: 10px 0 0 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: all 0.15s ease;
}

.ww-hero__search input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.ww-hero__search input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.14);
}

.ww-hero__search button {
    flex: 0 0 auto;
    font-family: var(--ww-sans);
    font-size: 16px;
    font-weight: 500;
    padding: 14px 28px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: var(--ww-accent);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ww-hero__search button:hover {
    background: var(--ww-accent-dark);
}

.ww-hero__note {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 12px 0 0;
}

/* ------------------------------------------------------------ value prop -- */

.ww-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.ww-value {
    text-align: left;
}

.ww-value__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.ww-value__icon--accent {
    background: var(--ww-accent-bg);
    color: var(--ww-accent-text);
    font-weight: 600;
}

.ww-value__icon--caution {
    background: var(--ww-caution-bg);
    color: var(--ww-caution-text);
}

.ww-value__icon--slate {
    background: rgba(27, 40, 56, 0.07);
    color: var(--ww-text-secondary);
}

.ww-value h3 {
    font-family: var(--ww-sans);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.ww-value p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ww-text-secondary);
    margin: 0;
}

/* --------------------------------------------------------- how it works -- */

.ww-how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
}

.ww-step__num {
    font-family: var(--ww-serif);
    font-size: 33px;
    line-height: 1;
    color: var(--ww-accent);
    margin-bottom: 10px;
}

.ww-step h3 {
    font-family: var(--ww-sans);
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 8px;
}

.ww-step p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ww-text-secondary);
    margin: 0;
}

/* ---------------------------------------------------------- verdict card -- */

.ww-verdict-card {
    background: #fff;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
}

.ww-verdict-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 4px;
}

.ww-verdict-card__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.ww-verdict-card__verdict {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ww-text-secondary);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--ww-border);
}

/* ------------------------------------------------------------- truth bar -- */
/* The signature element: 90-day range with a "current" dot and a target line.
   Marker positions come from inline --ww-pos custom properties (data-driven,
   so they can't live in the stylesheet). */

.ww-truth-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ww-text-muted);
}

.ww-truth-bar {
    position: relative;
    height: 8px;
    background: var(--ww-surface-2);
    border-radius: 4px;
    margin: 8px 0 44px;
}

.ww-truth-bar__current {
    position: absolute;
    top: 50%;
    left: var(--ww-pos, 50%);
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--ww-accent);
    border: 3px solid var(--ww-paper);
    box-shadow: 0 0 0 1px var(--ww-accent);
}

.ww-truth-bar__target {
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: var(--ww-pos, 50%);
    width: 0;
    border-left: 2px dashed var(--ww-caution);
}

.ww-truth-bar__note {
    position: absolute;
    left: var(--ww-pos, 50%);
    transform: translateX(-50%);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    /* Tight line box: these two notes are stacked 18px apart and would collide at the
       inherited body line-height. */
    line-height: 1.25;
}

/* Centered text overflows the card when its marker sits near either edge (e.g. target
   price == 90d low). Anchor to the near edge instead of centering past that point. */
.ww-truth-bar__note--start {
    transform: translateX(0);
}

.ww-truth-bar__note--end {
    transform: translateX(-100%);
}

.ww-truth-bar__note--current {
    top: 15px;
    color: var(--ww-accent-text);
}

.ww-truth-bar__note--target {
    top: 33px;
    color: var(--ww-caution-text);
}

/* When the now/target markers are far enough apart that their text won't collide, keep
   the target note on the same line as "now" instead of always dropping it a row down. */
.ww-truth-bar__note--target-level {
    top: 15px;
}

/* Compact variant used in dashboard rows. Bottom margin still has to clear the
   absolutely-positioned now/target notes below the bar (top: 15px/33px, unchanged
   from the full-size variant), not just the 6px bar itself. */
.ww-truth-bar--mini {
    height: 6px;
    margin: 10px 0 48px;
}

.ww-truth-bar--mini .ww-truth-bar__current {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-width: 2px;
}

/* ------------------------------------------------------------ stats row -- */

.ww-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 20px;
}

.ww-stat__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-text-muted);
    margin-bottom: 2px;
}

.ww-stat__value {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ww-stat__value--accent {
    color: var(--ww-accent);
}

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

.ww-badge {
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.5;
}

.ww-badge--genuine,
.ww-badge--watching {
    background: var(--ww-accent-bg);
    color: var(--ww-accent-text);
}

.ww-badge--close {
    background: var(--ww-caution-bg);
    color: var(--ww-caution-text);
}

.ww-badge--neutral {
    background: var(--ww-surface-2);
    color: var(--ww-text-secondary);
}

.ww-badge--danger {
    background: var(--ww-danger-bg);
    color: var(--ww-danger);
}

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

.ww-btn {
    font-family: var(--ww-sans);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    /* Never wrap: a two-line button breaks the height match with the input it sits
       beside in .ww-field-group (visible at narrow widths). */
    white-space: nowrap;
}

.ww-btn:hover {
    text-decoration: none;
}

.ww-btn--primary {
    background: var(--ww-accent);
    color: #fff;
}

.ww-btn--primary:hover {
    background: var(--ww-accent-dark);
    color: #fff;
}

.ww-btn--secondary {
    background: transparent;
    color: var(--ww-text-secondary);
    border: 1px solid var(--ww-border);
}

.ww-btn--secondary:hover {
    border-color: var(--ww-border-strong);
    color: var(--ww-text);
}

.ww-btn--sm {
    font-size: 14px;
    padding: 7px 14px;
}

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

.ww-btn:focus-visible,
.ww-input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ww-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- forms -- */

.ww-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ww-border);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--ww-sans);
    background: var(--ww-paper);
    color: var(--ww-text);
    transition: border-color 0.15s ease;
}

.ww-input:focus {
    outline: none;
    border-color: var(--ww-accent);
}

.ww-input::placeholder {
    color: var(--ww-text-muted);
}

.ww-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ww-text-muted);
    margin-bottom: 6px;
}

/* Input with a leading "$" affix and an optional trailing button. */
.ww-field-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.ww-field-group .ww-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* stretch, so the input matches the height of the button beside it. */
.ww-affix {
    display: flex;
    align-items: stretch;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ww-affix__symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--ww-text-muted);
    pointer-events: none;
}

.ww-affix .ww-input {
    padding-left: 26px;
}

.ww-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ww-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ww-text-secondary);
    cursor: pointer;
}

.ww-radio input[type="radio"] {
    accent-color: var(--ww-accent);
    margin: 0;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.ww-field-error {
    display: block;
    font-size: 13.5px;
    color: var(--ww-danger);
    margin-top: 6px;
}

/* --------------------------------------------------------------- notices -- */

.ww-notice {
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 16px;
    background: var(--ww-surface-1);
    color: var(--ww-text-secondary);
}

.ww-notice p:last-child {
    margin-bottom: 0;
}

.ww-notice--success {
    background: var(--ww-accent-bg);
    border-color: rgba(13, 143, 106, 0.35);
    color: var(--ww-text);
}

.ww-notice--caution {
    background: var(--ww-caution-bg);
    border-color: rgba(198, 112, 48, 0.3);
    color: var(--ww-text);
}

.ww-notice--danger {
    background: var(--ww-danger-bg);
    border-color: rgba(184, 60, 60, 0.3);
    color: var(--ww-text);
}

.ww-notice--sm {
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 10px;
}

.ww-notice__title {
    font-family: var(--ww-sans);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

/* ------------------------------------------------------------ candidates -- */

.ww-candidates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.ww-candidate {
    background: var(--ww-paper);
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.ww-candidate:hover {
    border-color: var(--ww-border-strong);
}

.ww-candidate--selected {
    border-color: var(--ww-accent);
    border-width: 2px;
}

.ww-candidate__media {
    text-align: center;
    margin-bottom: 12px;
}

.ww-candidate__media img {
    max-height: 120px;
    width: auto;
}

.ww-candidate__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.ww-candidate__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
}

.ww-candidate__meta {
    font-size: 12.5px;
    color: var(--ww-text-muted);
    margin: 0;
}

.ww-candidate__price {
    flex: 0 0 auto;
    text-align: right;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

.ww-candidate__stats {
    margin-bottom: 14px;
}

.ww-candidate__form {
    margin-top: auto;
}

.ww-candidate__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ww-candidate__coach:not(:empty) {
    margin: 10px 0;
}

/* ------------------------------------------------------------- coaching -- */

.ww-coaching {
    border: 1px solid var(--ww-border);
    border-left: 3px solid var(--ww-text-muted);
    border-radius: 8px;
    background: var(--ww-surface-1);
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
}

.ww-coaching--solid {
    border-left-color: var(--ww-accent);
    background: var(--ww-accent-bg);
}

.ww-coaching--caution {
    border-left-color: var(--ww-caution);
    background: var(--ww-caution-bg);
}

.ww-coaching__message {
    color: var(--ww-text);
    margin-bottom: 4px;
}

.ww-coaching__numbers {
    font-size: 12.5px;
    color: var(--ww-text-muted);
}

.ww-coaching__band {
    font-size: 13px;
    color: var(--ww-text-secondary);
    margin-top: 4px;
}

/* ------------------------------------------------------- check ("/Check") -- */
/* The free "Is this deal real?" checker. Reuses .ww-hero, .ww-verdict-card,
   .ww-truth-bar, .ww-stats, .ww-notice--* and .ww-btn--*; only the verdict box,
   the big price link, and the good-buy zone overlay are new. */

/* Slightly tighter than the landing hero — this page is a tool, not a pitch. */
.ww-hero--check .ww-hero__inner {
    padding: 44px 32px 40px;
}

.ww-check-price {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.ww-check-price a {
    color: var(--ww-accent);
}

.ww-verdict {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.ww-verdict__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.ww-verdict__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ww-text);
    margin: 0 0 4px;
}

.ww-verdict__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ww-text-secondary);
    margin: 0;
}

.ww-verdict--good {
    background: var(--ww-accent-bg);
    border-color: rgba(13, 143, 106, 0.35);
}

.ww-verdict--good .ww-verdict__icon {
    background: var(--ww-accent);
    color: #fff;
}

.ww-verdict--bad {
    background: var(--ww-danger-bg);
    border-color: rgba(184, 60, 60, 0.3);
}

.ww-verdict--bad .ww-verdict__icon {
    background: var(--ww-danger);
    color: #fff;
}

/* No 90-day history to judge on — say so plainly rather than picking a side. */
.ww-verdict--neutral {
    background: #f3f4f6;
    border-color: var(--ww-border);
}

.ww-verdict--neutral .ww-verdict__icon {
    background: #6b7280;
    color: #fff;
}

.ww-check-nodata {
    margin-bottom: 20px;
}

/* The good-buy band drawn onto the truth bar: 90d low up to low x NearLowFactor. */
.ww-truth-bar__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ww-zone-end, 0%);
    background: var(--ww-accent);
    opacity: 0.3;
    border-radius: 4px 0 0 4px;
}

/* Above the good-buy band: the marker and its note go coral, not accent green.
   These must stay after .ww-truth-bar__current / __note--current to win. */
.ww-truth-bar__current--bad {
    background: var(--ww-danger);
    box-shadow: 0 0 0 1px var(--ww-danger);
}

.ww-truth-bar__note--bad {
    color: var(--ww-danger);
}

.ww-check-legend {
    font-size: 13px;
    color: var(--ww-text-muted);
    margin: 0 0 20px;
}

.ww-check-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--ww-border);
}

/* ------------------------------------------------------------ want rows -- */

.ww-want-row {
    background: var(--ww-paper);
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.15s ease;
}

.ww-want-row:hover {
    border-color: var(--ww-border-strong);
}

.ww-want-row__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ww-text);
    line-height: 1.4;
    margin: 0 0 8px;
}

.ww-want-row__cancelled .ww-want-row__title {
    color: var(--ww-text-secondary);
}

.ww-want-row__price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 8px;
}

.ww-want-row__price {
    font-size: 20px;
    font-weight: 500;
    color: var(--ww-text);
}

.ww-want-row__buy-link {
    font-size: 15px;
    color: var(--ww-accent);
    white-space: nowrap;
}

.ww-want-row__buy-link:hover {
    color: var(--ww-accent-dark);
}

.ww-want-row__meta {
    font-size: 13px;
    color: var(--ww-text-muted);
    margin: 0 0 12px;
}

.ww-want-row__meta strong {
    font-weight: 500;
    color: var(--ww-text);
}

/* ------------------------------------------------------------ empty state -- */

.ww-empty {
    border: 1px dashed var(--ww-border-strong);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    background: var(--ww-surface-1);
}

.ww-empty h3 {
    font-size: 1.375rem;
    margin-bottom: 6px;
}

.ww-empty p {
    font-size: 16px;
    color: var(--ww-text-secondary);
    margin: 0 0 20px;
}

/* ------------------------------------------------------------------ CTA -- */

.ww-cta {
    background: var(--ww-ink);
    color: #fff;
    text-align: center;
    padding: 56px 32px;
}

.ww-cta__eyebrow {
    font-size: 13.5px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 10px;
}

.ww-cta h2 {
    font-size: 2.3125rem;
    color: #fff;
    margin: 0 0 24px;
}

/* ------------------------------------------------------------ login card -- */

.ww-auth {
    display: flex;
    justify-content: center;
    padding: 64px 24px 80px;
}

.ww-login-card {
    background: #fff;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 1px 3px rgba(15, 23, 41, 0.05);
}

.ww-login-card__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ww-login-card h1 {
    font-size: 1.9375rem;
    text-align: center;
    margin-bottom: 6px;
}

.ww-login-card__sub {
    font-size: 15px;
    color: var(--ww-text-secondary);
    text-align: center;
    margin-bottom: 24px;
}

.ww-login-card__field {
    margin-bottom: 16px;
}

.ww-login-card__foot {
    font-size: 13.5px;
    color: var(--ww-text-muted);
    text-align: center;
    margin: 18px 0 0;
}

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

.ww-footer {
    border-top: 1px solid var(--ww-border);
    padding: 28px 32px;
    text-align: center;
    font-size: 13.5px;
    color: var(--ww-text-muted);
}

.ww-footer p {
    margin: 0 0 4px;
}

.ww-footer p:last-child {
    margin-bottom: 0;
}

.ww-footer a {
    color: var(--ww-text-muted);
}

.ww-footer a:hover {
    color: var(--ww-text-secondary);
}

/* -------------------------------------------------------------- spinner -- */
/* htmx toggles .htmx-request on the indicator; keep it out of flow otherwise. */

.htmx-indicator {
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 14px;
    color: var(--ww-text-muted);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* -------------------------------------------------------------- utility -- */

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

.ww-stack > * + * {
    margin-top: 12px;
}

.ww-mt-24 { margin-top: 24px; }
.ww-mt-32 { margin-top: 32px; }

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

@media (max-width: 768px) {
    .ww-container,
    .ww-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ww-page {
        padding: 24px 16px 48px;
    }

    .ww-section {
        padding: 40px 20px;
    }

    .ww-hero__inner {
        padding: 40px 20px;
    }

    .ww-hero h1 {
        font-size: 2rem;
    }

    .ww-logo__text {
        font-size: 21px;
    }

    .ww-logo__icon {
        width: 26px;
        height: 26px;
    }

    .ww-nav__links a {
        font-size: 14px;
    }

    .ww-nav__links {
        gap: 16px;
    }

    .ww-values,
    .ww-how-steps,
    .ww-candidates {
        grid-template-columns: 1fr;
    }

    .ww-how-steps {
        gap: 24px;
    }

    .ww-verdict-card {
        padding: 20px;
    }

    .ww-stats {
        gap: 20px;
    }

    .ww-cta {
        padding: 40px 20px;
    }

    .ww-cta h2 {
        font-size: 1.875rem;
    }

    .ww-candidate__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ww-candidate__price {
        text-align: left;
    }

    /* Full-width, stacked CTAs — "Watch it — we'll email you when it's real" doesn't
       fit beside "Buy on Amazon" on a phone. */
    .ww-check-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ww-check-actions .ww-btn {
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .ww-hero__search {
        flex-direction: column;
        gap: 8px;
    }

    .ww-hero__search input,
    .ww-hero__search button {
        border-radius: 10px;
    }
}