/* SoleSprout styles. Mobile-first; design widths 390 and 1240. No external requests.
   Each build step adds its own commented section below: "==== <section> ====".
   Tokens live on :root; use var(--token) instead of raw hex values. */

/* ==== Fonts (self-hosted, latin subset, variable) ==== */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== Tokens ==== */
:root {
  /* palette (design-system-notes.md) */
  --canvas: #FAF6EE;
  --card: #FFFDF8;
  --panel: #F3EAD7;
  --stage-top: #F5EDDC;
  --stage-bottom: #EFE4CE;
  --stage: linear-gradient(180deg, var(--stage-top), var(--stage-bottom));
  --ink: #111214;
  --ink-hover: #2B2A26;
  --muted: #6F675A;
  --hairline: #EBE3D2;
  --rule: #E9E0CC;
  --field-border: #E2D8C2;
  --input-border: #8F8573; /* text inputs: 3:1+ edge (WCAG 1.4.11) */
  --dash: #C9BC9F;
  --eyebrow: #866346; /* design #B08968 darkened for AA text contrast */
  --accent: #FF5A1F; /* rationed: mark, primary CTAs, live %-off, selected size step */
  --accent-hover: #E64D14;
  --accent-text: #C53400; /* orange used AS text on light backgrounds (AA) */
  --on-accent: #111214; /* text on orange fills (cream fails AA at 3.1:1) */
  --sprout: #3E8E52;
  --sprout-light: #6FB27E;
  /* verdicts: shape + color + word, never color alone */
  --buy: #1E7A44;
  --hold: #9A6C17; /* design #B07C1A darkened so cream text passes AA */
  --wait: #4E6E8E;
  --on-verdict: #FFFDF8;
  /* footer (dark) */
  --footer-bg: #111214;
  --footer-text: #B4AE9F;
  --footer-link: #FAF6EE;
  --footer-hover: #FF8A5C;
  --focus: #111214;

  /* type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(33px, calc(24.3px + 2.235vw), 52px);
  --fs-h2: clamp(24px, calc(20.3px + .941vw), 32px);
  --fs-h3: clamp(20px, calc(17.2px + .706vw), 26px);
  --fs-lead: clamp(14.5px, calc(13.6px + .235vw), 16.5px);
  --fs-body: 14.5px;
  --fs-small: 12.5px;
  --fs-xs: 11.5px;
  --fs-eyebrow: clamp(10.5px, calc(10.3px + .06vw), 11px);
  --ls-display: -.04em;
  --ls-heading: -.03em;
  --ls-eyebrow: .16em;

  /* spacing + radii */
  --sp-pad: 20px;
  --sp-section: clamp(52px, calc(31.8px + 5.176vw), 96px);
  --gutter: 20px;
  --max: 1240px;
  --r-panel: 24px;
  --r-card: 18px;
  --r-inner: 12px;
  --r-pill: 999px;
  --tap: 44px;

  /* shadows */
  --shadow-warm: 0 10px 30px -14px rgba(60, 48, 25, .12);
  --shadow-card: 0 1px 2px rgba(60, 48, 25, .04), 0 10px 30px -12px rgba(60, 48, 25, .10);
  --ground-shadow: radial-gradient(ellipse at center, rgba(96, 74, 40, .18), transparent 70%);
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 50px; } }

/* ==== Base ==== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: var(--ls-heading); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-text); }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--panel); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==== Utilities ==== */
.ss-container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.ss-section { padding-top: var(--sp-section); }
.ss-section-head { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.ss-eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--eyebrow); }
.ss-display { font-size: var(--fs-display); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1.02; }
.ss-h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-heading); }
.ss-sub { font-size: var(--fs-small); color: var(--muted); }
.ss-price { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ss-panel { background: var(--panel); border-radius: var(--r-panel); padding: var(--sp-pad); }
.ss-surface { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-warm); }
.ss-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ss-arrow-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 14px; font-weight: 700; text-decoration: none; }

/* ==== Buttons ==== */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 22px; border: 0; border-radius: 14px;
  font-family: var(--font-body); font-size: 15px; font-weight: 800; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ss-btn--primary { background: var(--accent); color: var(--on-accent); }
.ss-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.ss-btn--dark { background: var(--ink); color: var(--canvas); }
.ss-btn--dark:hover { background: var(--ink-hover); color: var(--canvas); }
.ss-btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ss-btn--outline:hover { background: var(--card); color: var(--ink); }
.ss-btn--pill { border-radius: var(--r-pill); }
.ss-btn[disabled], .ss-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ==== Skip link ==== */
.ss-skip {
  position: absolute; left: 8px; top: -200px; z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px;
  background: var(--ink); color: var(--canvas); border-radius: var(--r-inner); font-weight: 700; text-decoration: none;
}
.ss-skip:focus { top: 8px; color: var(--canvas); }

/* ==== Header ==== */
.ss-header { position: relative; z-index: 20; background: var(--canvas); }
.ss-header__bar { position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; padding-block: 10px; }
.ss-brand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-right: auto; color: var(--ink); text-decoration: none; }
.ss-brand:hover { color: var(--ink); }
.ss-brand img { width: 28px; height: 28px; flex: none; }
.ss-wordmark { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.ss-menu > summary {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 14px; list-style: none; cursor: pointer;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--field-border); font-size: 14px; font-weight: 700;
}
.ss-menu > summary::-webkit-details-marker { display: none; }
.ss-menu[open] > summary { background: var(--card); }
.ss-nav { display: flex; flex-direction: column; position: absolute; top: calc(100% - 6px); left: var(--gutter); right: var(--gutter); padding: 6px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-inner); box-shadow: var(--shadow-warm); }
.ss-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }
.ss-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.ss-header__cta { min-height: var(--tap); padding: 0 16px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 359px) { .ss-header__bar { gap: 4px; } .ss-brand { gap: 6px; } .ss-menu > summary, .ss-header__cta { padding: 0 10px; } }
@media (min-width: 760px) {
  .ss-header__bar { min-height: 76px; gap: 20px; }
  .ss-wordmark { font-size: 19px; }
  .ss-brand { gap: 9px; }
  .ss-menu > summary { display: none; }
  .ss-menu::details-content { content-visibility: visible; } /* the static nav shows on desktop before (or without) app.js */
  .ss-nav { position: static; flex-direction: row; gap: 12px; padding: 0; background: none; border: 0; box-shadow: none; }
  .ss-nav a { padding: 0 6px; font-size: 13.5px; }
  .ss-header__cta { padding: 0 20px; }
}

/* <html class="ss-pending"> (index, deals): main + footer hidden until filled; shown anyway after 4 s (noscript.css: at once) */
.ss-pending main, .ss-pending footer { visibility: hidden; animation: ss-show 0s 4s forwards; }
.ss-nojs { margin-block: 10px; padding: 12px 14px; background: var(--panel); border-left: 4px solid var(--ink); border-radius: var(--r-inner); font-weight: 600; }
@keyframes ss-show { to { visibility: visible; } }

/* ==== Freshness strip + stale notice ==== */
.ss-fresh { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-block: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--muted); }
.ss-fresh::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sprout); transform: translateY(-1px); }
.ss-stale { margin-top: 10px; padding: 12px 14px; background: var(--panel); border-left: 4px solid var(--ink); border-radius: var(--r-inner); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }

/* ==== Footer ==== */
.ss-footer { margin-top: var(--sp-section); background: var(--footer-bg); color: var(--footer-text); font-size: var(--fs-small); line-height: 1.55; --focus: var(--footer-link); }
.ss-footer__inner { display: grid; gap: 22px; padding-block: 32px 36px; }
.ss-footer__main { display: grid; gap: 12px; max-width: 560px; }
.ss-footer .ss-brand, .ss-footer .ss-brand:hover { color: var(--footer-link); }
.ss-footer .ss-wordmark { font-size: 17px; }
.ss-footer__notice { color: var(--footer-link); }
.ss-footer__links { display: flex; flex-wrap: wrap; margin: 0 0 0 -8px; padding: 0; list-style: none; }
.ss-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; color: var(--footer-link); font-size: 13px; font-weight: 600; text-decoration: none; }
.ss-footer__links a:hover { color: var(--footer-hover); }
.ss-footer__copy { margin-top: 4px; }
@media (min-width: 900px) {
  .ss-footer__inner { grid-template-columns: minmax(0, 560px) 1fr; column-gap: 60px; padding-block: 36px 40px; }
  .ss-footer__side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .ss-footer__links { justify-content: flex-end; margin: 0 -8px 0 0; }
}

/* ==== Trust pages (how-we-verify, privacy, disclosure, terms) + 404 ==== */
.prose-page { display: flex; flex-direction: column; min-height: 100vh; }
.prose-page > main { flex: 1 0 auto; }
.prose { max-width: 720px; padding-top: clamp(28px, calc(15px + 3.3vw), 56px); font-size: var(--fs-lead); line-height: 1.65; }
.prose h1, .prose-nf h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1.04; }
.prose h2 { font-size: var(--fs-h3); scroll-margin-top: 16px; }
.prose h3 { font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }
.prose a { font-weight: 600; }
.prose ul { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--sprout); }
.prose section { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--rule); }
.prose section > * + *, .prose-short > * + * { margin-top: 12px; }
.prose-effective { display: inline-block; margin-top: 16px; padding: 4px 12px; border: 1px dashed var(--dash); border-radius: 10px; font-size: var(--fs-small); color: var(--muted); }
.prose-effective:empty { display: none; }
.prose-lead { margin-top: 16px; font-size: clamp(16px, calc(14.6px + .36vw), 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.prose-short { margin-top: 28px; padding: 18px 20px; background: var(--panel); border-radius: var(--r-card); }
.prose-mail { display: inline-flex; align-items: center; min-height: var(--tap); }
.prose-qa { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.prose-qa:last-child { border-bottom: 0; }
.prose-qa h3 + p { margin-top: 6px; }
.prose code { font: 600 .9em var(--font-mono); overflow-wrap: anywhere; }
.prose-nf { display: grid; justify-items: start; gap: 14px; margin-top: clamp(20px, calc(8px + 3vw), 48px); padding: clamp(36px, calc(20px + 4vw), 72px) clamp(22px, calc(12px + 3vw), 56px); background: var(--stage); border-radius: var(--r-panel); }
.prose-nf p { font-size: var(--fs-lead); font-weight: 600; }
.prose-nf .ss-btn { margin-top: 6px; }

/* ==== Card: .card--featured (home picks) / .card--compact (browse); call badge .vb, Everyday marker .ev, tag chips .tag, price chart .chart ==== */
.card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.card__media{position:relative;flex:none}
.card__stage{position:relative;display:flex;align-items:center;justify-content:center;height:170px;margin:10px 10px 0;padding:18px 18px 22px;background:var(--stage);border-radius:var(--r-inner);color:inherit;text-decoration:none}
.card__stage:hover{color:inherit}
.card__img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.card__stage--fill{padding:0;overflow:hidden}.card__stage--fill .card__img{object-fit:cover} /* cdn.shopify.com: the photo fills the stage (spec §5) */
.card__ground{position:absolute;bottom:12px;left:22.5%;width:55%;height:10px;background:var(--ground-shadow);pointer-events:none}
.card__fb{display:flex;flex-direction:column;align-items:center;max-width:100%;text-align:center}
.card__fb-brand{font:800 26px/1.05 var(--font-display);letter-spacing:var(--ls-heading);overflow-wrap:anywhere}
.card__chips{position:absolute;top:20px;left:20px;display:flex;gap:4px;pointer-events:none}
.card__chip{padding:4px 10px;border-radius:var(--r-pill);background:var(--card);font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.3}
.card__info{display:flex;flex-direction:column;gap:5px;min-width:0;padding:14px 16px 0}
.card__slot{font-size:11px;font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--eyebrow)}
.card__slot--budget{font-size:var(--fs-small);font-weight:600;letter-spacing:0;line-height:1.4;text-transform:none;color:var(--ink);text-wrap:pretty}
.card__title{font-size:18px;letter-spacing:-.015em;line-height:1.15}
.card__title span span,.card__title a span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.card__title a{display:block;margin-block:-13px;padding-block:13px;color:inherit;text-decoration:none}
.card__title a:hover{text-decoration:underline}
.card__brand{margin-top:3px;font-size:var(--fs-xs);color:var(--muted)}
.card__prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;font-size:13px;font-variant-numeric:tabular-nums}
.card__pay{font-size:24px}
.card__was{color:var(--muted)}
.card__pct{font-weight:800;color:var(--accent-text)}
.card__body{display:flex;flex:1;flex-direction:column;gap:10px;padding:12px 16px 14px}
.card__ev{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px}
.card__ev>.vb,.card__ev>.ev{justify-self:start}
.card__ev>.chart{grid-area:1/2}
.card__tags{grid-area:2/1/auto/-1}
.card__taglist{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;max-width:100%;overflow:hidden;padding:4px 10px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--panel);font-size:12.5px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.tag--code{color:var(--accent-text)}
.ev{display:inline-block;padding:5px 10px;white-space:nowrap;border-radius:3px;background:var(--panel);font-size:12.5px;font-weight:700;line-height:1.3}
.chart,.trend{flex:none;overflow:visible}
.chart__line,.trend__l{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chart__typ{stroke:var(--field-border)}
.chart__was{stroke:var(--muted);stroke-width:1.5;stroke-linecap:round}
.chart__dot,.trend__d{fill:var(--accent);stroke:var(--card);stroke-width:1.5}
.trend__u{stroke:var(--dash)}
.vb{display:inline-flex;flex:none;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:var(--r-pill);background:var(--buy);color:var(--on-verdict);font-size:12px;font-weight:800;letter-spacing:.1em;line-height:1}
.vb--buy .vb__i::before{content:"\2191";font-size:13px}
.vb--hold{border-radius:7px;background:var(--hold)}
.vb--hold .vb__i{width:7.5px;height:11px;border-inline:2.5px solid}
.vb--wait{gap:8px;padding:4.5px 13px 4.5px 9px;border:1.5px solid;border-radius:5px;background:none;color:var(--wait)}
.vb--wait .vb__i{display:grid;place-items:center;width:11px;height:11px;border-radius:1.5px;background:currentColor;transform:rotate(45deg)}
.vb--wait .vb__i::before{content:"\2193";color:var(--on-verdict);font-size:8px;transform:rotate(-45deg)}
.card__code,.card__math,.card__final{display:grid;gap:3px;padding:12px 14px;border-radius:var(--r-inner);font-size:var(--fs-small);line-height:1.45}
.card__code{border:1.5px dashed var(--dash)}
.card__math,.card__final{background:var(--panel);font-weight:600}
.card__math{font-size:13px}
.card__final{display:flex;gap:8px;padding:9px 12px}
.card__final::before{content:"!";display:grid;flex:none;place-items:center;width:16px;height:16px;margin-top:1px;border:1.5px solid;border-radius:50%;font-size:10px;font-weight:800;line-height:1}
.card__code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.card__code-val{font:700 16px var(--font-mono);letter-spacing:.06em;overflow-wrap:anywhere}
.card__code-with{font-size:14px;font-weight:700}
.card__code-shelf,.card__code-label,.card__allin-note{display:block;color:var(--muted)}
.card__ship{font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.card__allin{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px}
.card__cta{display:flex;flex:1 1 150px;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap);padding:10px 14px;border-radius:11px;background:var(--ink);color:var(--canvas);font-size:13.5px;font-weight:700;line-height:1.25;text-decoration:none}
.card__cta:hover{background:var(--ink-hover);color:var(--canvas)}
.card__btn{flex:none;min-height:var(--tap);padding:0 13px;border:1px solid var(--field-border);border-radius:11px;background:var(--card);font-size:13px;font-weight:700;cursor:pointer}
.card__btn:hover{border-color:var(--ink)}
.card__dbtn{flex:1 0 auto}
.card__share{color:var(--muted)}
/* Details opens over its own card, from the bottom edge up (where its control sits), so the row's height never changes */
.card__dp{position:absolute;inset:auto 0 0;z-index:5;display:flex;flex-direction:column;gap:10px;max-height:100%;overflow:auto;padding:12px 16px 14px;border-top:1px solid var(--hairline);background:var(--card);box-shadow:0 -14px 28px -14px rgba(60,48,25,.3)}
.card__dp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__dp-t{font:700 15px var(--font-display)}
.card__dclose{min-height:var(--tap);padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--panel);font-size:12.5px;font-weight:700;cursor:pointer}
.card__dp ul{display:grid;gap:7px;margin:0;padding:10px 0 0;border-top:1px solid var(--hairline);list-style:none;font-size:13px;line-height:1.45}
.card--compact .card__top{display:flex;align-items:center;gap:12px;padding:10px 12px 0 10px}
.card--compact .card__stage{width:108px;height:108px;margin:0;padding:22px 8px 12px}
.card--compact .card__stage--fill{padding:0}
.card--compact .card__ground{bottom:8px}
.card--compact .card__chips{top:6px;left:6px}
.card--compact .card__chip{padding:3px 8px;font-size:10px}
.card--compact .card__fb-brand{font-size:15px}
.card--compact .card__info{flex:1;gap:4px;padding:0}
.card--compact .card__title{font-size:16px}
.card--compact .card__pay{font-size:22px}
/* a designed tile, not a missing photo: the panel color with a quiet hairline weave (CSS only) */
.card--nophoto .card__stage{padding-top:30px;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(60,48,25,.035) 9px 10px) var(--panel)}
.card__incart{font-size:var(--fs-small);font-weight:700;color:var(--muted)}
/* three chips keep to two lines on the narrowest phones: the last one shrinks (its full text stays in title and for screen readers) */
@media (max-width:359px){.card__body{padding-inline:12px}.tag{padding-inline:8px}.tag:last-child:not(:first-child){flex:1 1 6em;max-width:max-content}}

/* ==== Home (v1.4.3): heading, picks row, See the deals, strip, How it works, funnel, chips, signup ==== */
.home-top{padding-top:4px}
.home-h1{max-width:15em;text-wrap:pretty}
.home-h1 em{font-style:normal;box-shadow:inset 0 -.09em 0 var(--accent)}
.home-picks{padding-top:20px}
.home-picks__head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.home-picks__sub{font-size:var(--fs-body);line-height:1.4;color:var(--muted)}
.home-picks__row{display:flex;gap:12px;max-width:var(--max);margin-inline:auto;overflow-x:auto;padding:0 var(--gutter) 8px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter)}
.home-picks__row>*{flex:none;width:292px;scroll-snap-align:start}
.pick-empty{display:flex;flex-direction:column;gap:8px;padding:20px;border:1.5px dashed var(--dash);border-radius:var(--r-card);font-size:15px;font-weight:600;line-height:1.45}
.home-empty{display:grid;justify-items:start;gap:12px;font-size:15px;font-weight:600}
.home-lead{display:flex;flex-direction:column;gap:14px;padding-top:24px}
.home-ctas{display:flex;flex-direction:column;gap:10px}
.home-ctas .ss-btn{min-height:50px}
[data-strip]{margin-top:22px}
[data-strip] .ss-fresh{padding:12px 14px;border:0;border-radius:14px;background:var(--panel);color:var(--ink);line-height:1.5}
.home-more{display:flex;flex-direction:column;gap:22px;padding-top:var(--sp-section)}
.home-funnel{font-size:var(--fs-small);font-weight:700}
.home-chips{display:flex;flex-wrap:wrap;gap:8px}
.home-chips__price{display:contents}
.chip{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:1px solid var(--field-border);border-radius:var(--r-pill);background:var(--card);font-size:13px;font-weight:700;text-decoration:none}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.home-cart{align-self:flex-start;margin-top:-16px}
.home-signup{width:100%;max-width:620px;margin-top:18px;padding:20px 18px;border-radius:20px;scroll-margin-top:12px}
.hiw-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hiw-head{display:grid;gap:12px}
.hiw-h2{font-size:clamp(28px,calc(19px + 2.7vw),52px);font-weight:800;letter-spacing:var(--ls-display);line-height:1.05;text-wrap:pretty}
.hiw-tiles,.legend{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hiw-tiles li{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card)}
.hiw-tiles__top{display:flex;align-items:flex-start;justify-content:space-between}
.hiw-tiles__n{font:800 15px var(--font-display);color:var(--accent-text)}
.hiw-tiles h2,.hiw-tiles h3{font-size:20px;letter-spacing:-.02em}
.hiw-tiles p{font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
.hiw-ico{flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hiw-legend{padding:8px 18px 20px;background:var(--panel);border-radius:var(--r-panel)}
.legend{gap:0}
.legend li{display:grid;align-content:start;gap:10px;padding:14px 0;border-top:1px solid var(--rule)}
.legend li:first-child{border:0}
.legend__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.legend__t{font-size:var(--fs-body);line-height:1.5}
.hiw-legend .ev{background:var(--card)}
.hiw-legend .trend__d{stroke:var(--panel)}
.hiw-signals{padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-small);color:var(--muted);text-wrap:pretty}
.hiw-who{display:grid;gap:8px;font-size:16.5px;line-height:1.5}
.hiw-link{justify-self:start}
@media (min-width:600px){.home-ctas{flex-direction:row}.home-ctas .ss-btn{min-width:220px}}
@media (min-width:900px){.hiw-grid{grid-template-columns:minmax(0,1fr) 340px;gap:40px 60px}.hiw-grid>*{grid-column:1/-1}.hiw-grid>.hiw-head{grid-column:1}
 .hiw-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.hiw-tiles li{padding:26px}.hiw-legend{padding:14px 32px 28px}.hiw-legend .legend{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.hiw-legend .legend li{border:0}
 .hiw-legend .legend__top{flex-direction:column;align-items:flex-start}.hiw-who{grid-template-columns:200px minmax(0,640px);gap:40px;padding-top:28px;border-top:1px solid var(--hairline);font-size:18px}}
@media (min-width:1100px){.home-top{padding-top:28px}.home-picks__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;overflow:visible}.home-picks__row>*{width:auto}.home-signup{padding:30px 28px;border-radius:var(--r-panel)}}

/* ==== How we verify: the steps, the two sample charts (verify.js) and the legend, inside .prose ==== */
.prose .hiw-tiles,.prose .legend{padding:0}
.prose .hiw-tiles{margin-top:28px}
.prose .hiw-tiles li,.prose .legend li{margin:0}
.vchart{margin:20px 0 0;padding:18px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card)}
.vchart figcaption{font-size:var(--fs-body);line-height:1.5}
.vchart__t{display:block;margin-bottom:4px;font:700 20px/1.2 var(--font-display);letter-spacing:-.02em}
.vchart__plot{margin:14px 0 10px}
.vchart .chart{width:100%;height:auto}
.vchart .chart__line{stroke-width:2}

/* ==== Browse: the control row, chips, the filter sheet (<dialog>) below 1100 and the sidebar from 1100, the size sheet ==== */
.br{padding-top:20px}
.br-head{display:grid;gap:6px;margin-bottom:14px}
.br-h1{font-size:clamp(27px,calc(20.6px + 1.65vw),41px);font-weight:800;letter-spacing:var(--ls-display);line-height:1.05}
.br-side{display:none}
/* one row on a phone: my kid's size, the price and band chips (they scroll), then Filters and search, which stay in view */
.br-tools{display:flex;align-items:center;gap:8px;margin:-4px;padding:4px;overflow-x:auto;scrollbar-width:none}
.br-tools>*{flex:none}
.br-kid{min-height:var(--tap);padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--canvas);font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.br-kidx{margin-left:-4px;border-radius:50%;background:var(--panel)}
.br-quick{display:flex;align-items:center;gap:6px}
.br-div{flex:none;width:1px;height:22px;margin:0 4px;background:var(--field-border)}
.br-end{position:sticky;right:-4px;display:flex;gap:8px;margin-left:auto;padding-left:8px;background:var(--canvas)}
.br-sbtn{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:1px solid var(--field-border);border-radius:50%;background:var(--card);cursor:pointer}
.br-sbtn svg{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
.br-tools .br-search{display:flex;flex:1;align-items:center;min-height:var(--tap);padding-left:16px;border:1px solid var(--input-border);border-radius:var(--r-pill);background:var(--card)}
.br-q{flex:1;min-width:0;min-height:42px;border:0;background:none;font-size:16px}
.br-q::placeholder{color:var(--muted)}
.is-search>:not(.br-search){display:none}
.br-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:var(--tap);margin-top:10px;font-size:13px;font-weight:700}
.br-count{color:var(--muted)}
.br-link{min-height:var(--tap);border:0;background:none;font-weight:700;text-decoration:underline;cursor:pointer}
.br-sort{display:flex;align-items:center;gap:6px;margin-left:auto}
.br-def{margin:2px 0 12px;font-size:var(--fs-xs);color:var(--muted)}
.br-grid{display:grid;gap:12px}
.br-pin{margin-top:12px}
.br-pin:empty{display:none}
.br-pin .card{transition:box-shadow .6s}
.br-hl{box-shadow:0 0 0 3px var(--ink)}
.br-missing{margin:12px 0 0}
.br-nocat{margin-top:18px;font-size:15px;font-weight:600}
.br-empty{display:grid;justify-items:start;gap:14px;font-size:15px;font-weight:600}
.br-more{display:flex;width:max-content;margin:24px auto 0}
.br-cart{display:grid;gap:6px;margin-top:44px;padding-top:26px;border-top:1px solid var(--rule);scroll-margin-top:12px}
.br-cart .br-grid{margin-top:10px}
.br-group{padding:14px 0 16px;border-top:1px solid var(--rule)}
.br-group:first-child{border:0}
.br-group .ss-eyebrow{margin-bottom:10px}
.br-chips{display:flex;flex-wrap:wrap;gap:8px}
.br-chip{min-height:var(--tap);padding:0 14px;border:1px solid var(--field-border);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-size:13px;font-weight:700;line-height:42px;white-space:nowrap;cursor:pointer}
.br-chip:hover{border-color:var(--ink)}
.br-chip[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--canvas);font-weight:800}
.br-chip:disabled{opacity:.45;cursor:not-allowed}
.br-chip__n{font-weight:500}
.br-help{margin-top:8px;font-size:var(--fs-small);color:var(--muted)}
.br-sheet{position:fixed;inset:0 0 0 auto;width:min(100%,440px);max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;background:var(--canvas);color:var(--ink)}
.br-sheet[open]{display:flex;flex-direction:column}
.br-sheet::backdrop{background:rgba(17,18,20,.45)}
body:has(.br-sheet[open]){overflow:hidden}
.br-sheet__head,.br-sheet__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px var(--gutter);border-bottom:1px solid var(--hairline)}
.br-sheet__body{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px var(--gutter) 20px}
.br-sheet__foot{padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--hairline);background:var(--card)}
.br-sheet__foot .ss-btn--dark{flex:1}
.br-ksheet{inset:auto 0 0;width:100%;max-width:520px;margin-inline:auto;border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--card)}
.br-ksheet .br-sheet__body{padding-top:14px}
.br-x{position:relative;flex:none;width:var(--tap);height:var(--tap);border:0;background:none;cursor:pointer}
.br-x::before,.br-x::after{content:"";position:absolute;top:21px;left:12px;width:20px;height:2px;background:currentColor;transform:rotate(45deg)}
.br-x::after{transform:rotate(-45deg)}
@media (min-width:600px){.br-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1100px){.br{padding-top:36px}.br-layout{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:40px}.br-side{display:block;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding:18px 18px 4px}.br-fbtn{display:none}.br-cart .br-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ==== Signup: #signup-picker (signup.js) ==== */
.su-tabs,.su-ladder,.su-row{display:flex;gap:4px}
.su-tab{flex:1 1 auto;min-height:var(--tap);padding:6px 2px;border:solid var(--field-border);border-width:0 0 2px;background:none;font-size:12px;font-weight:700;line-height:1.2;color:var(--muted);cursor:pointer}
.su-tab[aria-selected=true],.su-tab[aria-pressed=true]{border-color:var(--ink);color:var(--ink);font-weight:800}
.su-ladder{align-items:flex-end;justify-content:center;gap:3px;height:100px;margin-top:14px}
.su-step{display:flex;flex:1 1 0;flex-direction:column;justify-content:flex-end;gap:6px;min-width:32px;max-width:64px;height:100%;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.su-bar{position:relative;border-radius:6px 6px 3px 3px;background:var(--hairline)}
:hover>.su-bar{background:var(--field-border)}
[aria-checked=true]>.su-bar,.su-step[aria-pressed=true]>.su-bar{background:var(--accent)}
[aria-checked=true]>.su-bar::before,.su-step[aria-pressed=true]>.su-bar::before{content:"";position:absolute;top:-13px;left:calc(50% - 5.5px);width:11px;height:11px;border-radius:0 100% 45% 100%;background:var(--sprout);box-shadow:-3px 3px 0 -1px var(--sprout-light);transform:rotate(-38deg)}
.su-lbl{font-size:var(--fs-xs);font-weight:600;line-height:1.2;white-space:nowrap}
.su-lbl,.su-next,.su-under,.su-consent{color:var(--muted)}
[aria-checked=true]>.su-lbl,.su-step[aria-pressed=true]>.su-lbl,.su-next strong,.su-consent a{color:var(--ink);font-weight:800}
.su-half{margin-top:12px;padding:0 16px;font-size:13.5px}
.su-half[aria-pressed=true]{background:var(--ink);color:var(--canvas)}
.su-out:not(:empty){margin-top:12px;padding:10px 14px;border-radius:11px;background:var(--stage-top)}
.su-res{font-size:14px;font-weight:800}
.su-next{margin-top:2px;font-size:var(--fs-small)}
.su-form{margin-top:20px}
.su-label{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
.su-row{flex-wrap:wrap;gap:9px 10px}
.su-row input{flex:1 1 200px;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--input-border);border-radius:var(--r-inner);background:var(--canvas);font-size:16px}
.su-row input::placeholder{color:var(--muted);opacity:1}
.su-row .ss-btn{flex:1 0 auto;border-radius:var(--r-inner)}
.su-msg:not(:empty){margin-top:10px;font-weight:700}
.su-msg--err{color:var(--accent-text)}
.su-under,.su-consent{margin-top:10px}
.su-under,.su-consent{font-size:var(--fs-xs)}
@media (max-width:389px){.su-ladder{margin-inline:-14px}.su-step{min-width:0}}

/* ==== Spec card (v1.5) ==== */
/* a card with no photo: brand, the type art and the colorway chips on the plain cream stage (no hatch); art.js builds it */
.card--spec .card__stage{padding:0;overflow:hidden;background:var(--stage)}
.card--spec .card__chips{right:20px;left:auto}
.spec__brand{position:absolute;top:14px;left:16px;right:16px;z-index:1;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:800 20px/1.1 var(--font-display);letter-spacing:var(--ls-heading);text-align:left;overflow-wrap:anywhere}
.card__media:has(.card__chips) .spec__brand{right:42%}
.card__stage--spec .art{height:64px;margin-top:14px}
.spec__foot{position:absolute;right:16px;bottom:12px;left:16px;display:flex;align-items:center;gap:8px}
.spec__chips{display:flex;gap:4px}
.spec__chip{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(17,18,20,.2)}
.spec__see{margin-left:auto;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap}
.card--compact .card__chips{left:6px}
.card--compact .spec__brand{top:28px;right:8px;left:8px;display:block;font-size:12px;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.card--compact .card__stage--spec .art{height:44px;margin-top:22px}
.card--compact .spec__foot{right:8px;bottom:9px;left:8px;justify-content:center}
.card--compact .spec__chip{width:8px;height:8px}
.art{display:block;flex:none;width:auto;overflow:visible;color:var(--ink);fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.art__p{fill:var(--panel)}.art__k{fill:var(--card)}
.art__s{stroke:var(--buy);stroke-width:5}.art__g,.art__G{stroke:none;fill:var(--buy)}.art__G{fill:var(--sprout)}
/* the sprout tile: the brand centered over the sprout pattern at 8% (a layer, so the brand stays full strength) */
.spec--sprout::before{content:"";position:absolute;inset:0;background:url("/assets/sprout-pattern.svg") 0 0/28px 28px;opacity:.08}
.card__stage.spec--sprout .spec__brand,.card--compact .spec--sprout .spec__brand{position:relative;inset:auto;max-width:100%;padding:0 16px;font-size:26px;text-align:center;-webkit-line-clamp:3}
.card--compact .spec--sprout .spec__brand{display:-webkit-box;padding:0 8px;font-size:15px;white-space:normal}
/* a row's square: the store photo or the type art (browse.js) */
.row__sq{display:grid;flex:none;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:var(--r-inner);background:var(--stage)}
.row__sq .art{width:52px;height:auto}.row__sq .art--sprout{width:auto;height:36px}
.row__img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.row__sq--fill .row__img{object-fit:cover}

/* ==== Browse all's sections and rows, and the join page (v1.5) ==== */
/* sections (V5-4): Our calls (cards), Everyday prices and New on our radar (rows), each with its count and its own Show more */
.br-sec{margin-top:30px}.br-sec:first-of-type{margin-top:6px}
.br-sec__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--ls-heading)}
.br-sec__n{font:700 13px/1.3 var(--font-body);letter-spacing:0;color:var(--muted)}
.br-sec__line{max-width:60ch;margin-top:4px;font-size:var(--fs-small);line-height:1.45;color:var(--muted);text-wrap:pretty}
.br-sec .br-grid,.br-rows{margin-top:12px}
/* a row (V5-5): two lines below 1100 px, one from 1100 */
.br-rows{display:grid;gap:8px;margin-bottom:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"sq main price" "sq meta go";align-items:center;gap:4px 12px;padding:10px 10px 10px 12px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card)}
.row:focus{outline:0}.row:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.row__sq{grid-area:sq}.row__main{grid-area:main;min-width:0}.row__meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.row__price{grid-area:price;justify-self:end;font-size:15px}.row__go{grid-area:go;justify-self:end}
.row__model{display:block;overflow:hidden;margin:-12.5px 0;padding:12.5px 0;font-size:14.5px;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis;color:inherit;text-decoration:none}
.row__model:hover{text-decoration:underline}
.row__brand{overflow:hidden;font-size:var(--fs-xs);line-height:1.35;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.row .card__chips{position:static}.row .card__chip{padding:2px 7px;background:var(--panel);font-size:10px}
.row__stock,.row__new{font-size:var(--fs-xs);line-height:1.3;color:var(--muted)}.row__new{font-weight:700}
.row__final{padding:1px 8px;border-radius:var(--r-pill);background:var(--panel);font-size:var(--fs-xs);font-weight:700;line-height:1.4}
.row__go{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-pill);background:var(--panel);font-size:17px;font-weight:800;color:inherit;text-decoration:none}
.row__go:hover{background:var(--ink);color:var(--canvas)}
@media (min-width:1100px){.row{grid-template-columns:56px minmax(0,1fr) minmax(0,auto) auto auto;grid-template-areas:"sq main meta price go";gap:12px 16px}.row__meta{justify-content:flex-end;max-width:420px}}
/* the join page (V5-7): one screen to sign up; the header's button is hidden, since the form is on screen */
.join-page .ss-header__cta{display:none}
.join-top{padding-top:10px}
.join-h1{max-width:15em;font-size:clamp(26px,calc(18px + 2.2vw),46px);text-wrap:pretty}
.join-h1 em{font-style:normal;box-shadow:inset 0 -.09em 0 var(--accent)}
.join-signup .home-signup{margin-top:12px}
.join-hiw{margin-top:8px}.join-more{margin-top:8px}