/* My Honest Pick content site, brand A2 "Circled" (Ricky approved 2026-11-01). Tokens below are brand/logo/tokens.css, verbatim. */
/* My Honest Pick, brand A2 "Circled". Copied verbatim from design/design_system.md v4 §10; that file is the source of truth. */
:root{
  --paper:#F3EADB; --surface:#FFFDF8; --sunk:#EADFCC; --line:#DFD1BC; --control-border:#8A7766;
  --ink:#2A211B; --ink-2:#4A3D33; --ink-3:#66554A;
  --trail:#2D5F48; --on-trail:#FFFFFF; --trail-strong:#224A38; --trail-tint:#E3EDE6;
  --marker:#B5461A; --on-marker:#FFFFFF; --marker-tint:#FBE6D8; --marker-ink:#8A3412;
  --sun:#F2B33D; --on-sun:#2A211B; --sun-tint:#FDF1D8; --sun-ink:#6B4A00;
  --danger:#B42318; --danger-tint:#FDECEA; --info:#2C66A6; --info-tint:#E8F0FA;
  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-ui:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-bubble:20px; --r-card:18px; --r-sheet:24px; --r-btn:14px; --r-input:12px;
  --shadow-1:0 1px 2px rgba(42,33,27,.06),0 1px 1px rgba(42,33,27,.04);
  --shadow-2:0 10px 24px -18px rgba(42,33,27,.5);
  --shadow-3:0 16px 48px rgba(42,33,27,.16);
  --focus-ring:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15110D; --surface:#1F1914; --sunk:#29211B; --line:#3A2F27; --control-border:#8E7D6E;
    --ink:#F3EADB; --ink-2:#D9CCBA; --ink-3:#B5A593;
    --trail:#7CC4A2; --on-trail:#0E2419; --trail-strong:#A6D9C0; --trail-tint:#1B3027;
    --marker:#F08C5E; --on-marker:#2A1206; --marker-tint:#3A2318; --marker-ink:#F6B595;
    --sun-tint:#2C2312; --sun-ink:#F2C66B; --danger:#E8907F; --danger-tint:#2D1714;
    --info:#86B4E8; --info-tint:#16263A;
    --shadow-1:none; --shadow-2:none; --shadow-3:none;
  }
}
:root[data-theme="dark"]{
  --paper:#15110D; --surface:#1F1914; --sunk:#29211B; --line:#3A2F27; --control-border:#8E7D6E;
  --ink:#F3EADB; --ink-2:#D9CCBA; --ink-3:#B5A593;
  --trail:#7CC4A2; --on-trail:#0E2419; --trail-strong:#A6D9C0; --trail-tint:#1B3027;
  --marker:#F08C5E; --on-marker:#2A1206; --marker-tint:#3A2318; --marker-ink:#F6B595;
  --sun-tint:#2C2312; --sun-ink:#F2C66B; --danger:#E8907F; --danger-tint:#2D1714;
  --info:#86B4E8; --info-tint:#16263A;
  --shadow-1:none; --shadow-2:none; --shadow-3:none;
}
:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); }
@media (forced-colors: active){ :focus-visible{ outline:2px solid CanvasText; box-shadow:none; } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* content-site aliases onto the brand tokens */
:root { --display: var(--font-display); --ui: var(--font-ui); --r: 12px; --gap: 16px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--ui); }
a { color: var(--trail); text-underline-offset: 2px; }
a:hover { color: var(--trail-strong); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--ui); font-weight: 800; line-height: 1.2; color: var(--ink); }
.bike h3, .band-card h3, .bike-name { font-family: var(--display); font-weight: 600; }
h1 { font-size: clamp(28px, 5vw, 40px); margin: 8px 0 12px; }
h2 { font-size: 24px; margin: 36px 0 12px; }
h3 { font-size: 19px; margin: 20px 0 8px; }
p, li { max-width: 72ch; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px; z-index: 9; }
.draft { background: var(--sun); color: #14211D; padding: 10px 16px; font-size: 14px; }
.topbar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.mhp-wordmark { height: 36px; width: auto; display: block; }
.brand .mark { color: var(--trail); display: inline-flex; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.topbar nav a { color: var(--ink-2); text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }
.disclosure-bar { margin: 0; padding: 8px 16px; background: var(--sunk); color: var(--ink-2); font-size: 14px; max-width: none; }
main { max-width: 920px; margin: 0 auto; padding: 8px 16px 48px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.crumbs a { color: var(--ink-3); }
.overline { font: 600 12px/16px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 0; }
.answer { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--trail); border-radius: var(--r); padding: 16px 18px; margin: 12px 0 8px; }
.answer p { margin: 0 0 10px; }
.verdict { display: grid; gap: 4px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.verdict h2 { font-size: 18px; margin: 4px 0 6px; }
.verdict ul { padding-left: 18px; margin: 0 0 8px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0; }
.btn { display: inline-block; background: var(--trail); color: var(--on-trail); font: 600 16px/20px var(--ui); padding: 12px 18px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; min-height: 44px; }
.btn:hover { background: var(--trail-strong); color: var(--on-trail); }
.btn-quiet { background: transparent; color: var(--trail); border: 1.5px solid var(--trail); padding: 9px 16px; font-size: 15px; }
.btn-quiet:hover { background: var(--trail-tint); color: var(--trail-strong); }
.cta-sub { font-size: 13px; color: var(--ink-3); }
.small { font-size: 14px; }
.muted { color: var(--ink-3); }
table.data { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 15px; background: var(--surface); border-radius: var(--r); overflow: hidden; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--sunk); font-weight: 600; font-size: 14px; }
table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--sunk) 45%, transparent); }
table.cmp tr[data-diff] th::after { content: " \25CF"; color: var(--sun); }
@media (max-width: 680px) { table.data { display: block; overflow-x: auto; white-space: normal; } }
.bike { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 14px 0; }
.bike h3 { margin-top: 2px; }
.ribbon { display: inline-block; margin: 0 0 4px; background: var(--sun); color: #14211D; font: 600 12px/16px var(--ui); letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.price { font: 700 20px var(--ui); font-variant-numeric: tabular-nums lining-nums; }
.catch { background: var(--sun-tint); color: var(--ink); border-radius: 8px; padding: 8px 10px; }
.catch strong { color: var(--sun-ink); }
details { margin: 8px 0; }
summary { cursor: pointer; color: var(--trail); font-weight: 500; }
table.specs { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
table.specs th, table.specs td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.specs th { width: 38%; font-weight: 500; color: var(--ink-2); }
table.specs tr.hl { background: var(--trail-tint); }
.note { color: var(--ink-3); font-size: 13px; }
.ev { display: inline-block; font-size: 12px; line-height: 16px; padding: 1px 6px; border-radius: 6px; background: var(--info-tint); color: var(--info); white-space: nowrap; }
.ev-estimated { background: var(--sun-tint); color: var(--sun-ink); }
.src { font-size: 13px; color: var(--ink-3); }
.receipts { padding-left: 18px; }
.receipts li { margin: 6px 0; }
.editorial { margin-top: 12px; }
.checklist li { margin: 8px 0; }
.lede { font-size: 18px; color: var(--ink-2); }
.legal { background: var(--info-tint); color: var(--ink); padding: 10px 12px; border-radius: 8px; font-size: 15px; }
.caution { background: var(--danger-tint); color: var(--ink); border-left: 4px solid var(--danger); padding: 10px 12px; border-radius: 8px; margin: 12px 0; }
.conf { font-weight: 600; text-transform: none; letter-spacing: 0; }
.conf-high { color: var(--trail); } .conf-medium { color: var(--sun-ink); } .conf-low { color: var(--danger); }
.cta-end { background: var(--trail-tint); border-radius: var(--r); padding: 4px 18px 8px; margin: 32px 0; }
.alert-card { background: var(--surface); border: 1px dashed var(--control-border); border-radius: var(--r); padding: 4px 18px 14px; margin: 28px 0; }
.alert-form { display: grid; gap: 8px; max-width: 520px; }
.alert-form input[type=email] { font: 400 16px var(--ui); padding: 10px 12px; border: 1.5px solid var(--control-border); border-radius: 10px; background: var(--paper); color: var(--ink); }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; font-size: 14px; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 2px; }
.alert-note { font-size: 13px; color: var(--ink-3); margin: 0; }
.alert-result { font-size: 14px; margin: 0; min-height: 1em; }
.alert-result.err { color: var(--danger); }
.alert-result.ok { color: var(--trail); }
.hero { padding: 24px 0 8px; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); max-width: 18ch; }
.doors { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.door a { display: grid; gap: 4px; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; text-decoration: none; color: var(--ink); }
.door a:hover { border-color: var(--trail); }
.door strong { font: 800 20px var(--ui); color: var(--trail); }
.sample-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sun); border-radius: var(--r); padding: 4px 18px 10px; }
.steps li { margin: 8px 0; }
.guide-list { list-style: none; padding: 0; }
.guide-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin: 10px 0; }
.related ul { padding-left: 18px; }
.footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 13px; padding: 16px; }
.footer p { max-width: 920px; margin: 6px auto; }
.btn-link { color: var(--trail); font-weight: 600; font-size: 14px; white-space: nowrap; }
.bands { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 8px 0; }
.band-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sun); border-radius: var(--r); padding: 4px 14px 6px; }
.band-card h3 { margin: 4px 0; }
.band-card p { margin: 6px 0; font-size: 15px; }
.band-card.empty { border-top-color: var(--line); }
.disclose-inline { font-size: 14px; color: var(--ink-2); background: var(--sunk); border-radius: 8px; padding: 6px 10px; margin: 4px 0 8px; }
@media (max-width: 640px) {
  .crumbs { display: none; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .topbar nav a { white-space: nowrap; }
  .disclosure-bar { font-size: 13px; padding: 6px 16px; }
  h2 { font-size: 21px; margin-top: 28px; }
}
.trust { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.trust li::before { content: "\2713 "; color: var(--trail); font-weight: 600; }
.diff li { margin: 6px 0; }
.editor-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 18px 8px; margin: 24px 0; }
.rode { background: var(--trail-tint); border-radius: 8px; padding: 6px 10px; margin: 8px 0; font-size: 15px; }
.rode ul { margin: 4px 0; padding-left: 18px; }
.ribbon-rode { background: var(--trail); color: var(--on-trail); }
.caution-inline { background: var(--sun-tint); color: var(--ink); border-radius: 8px; padding: 6px 10px; }
.promise { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--trail); border-radius: var(--r); padding: 4px 18px 8px; margin: 24px 0; }
.byline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 4px 0 10px; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--trail); color: var(--on-trail); font: 600 12px var(--ui); flex: none; }
.avatar-lg { width: 72px; height: 72px; font-size: 24px; }
.editor-head { display: flex; gap: 16px; align-items: center; }
.editor-head h2 { margin: 0; }
.editor-photo { border-radius: 50%; object-fit: cover; }
/* Codex content r4: deciding screen first, reading path, configuration note */
.lead-answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin: 12px 0; }
.lead-answer ul { margin: 6px 0; padding-left: 20px; }
.jump { margin: 8px 0 0; }
.config-note { margin: 4px 0 8px; }
/* Ricky's photo as the byline avatar and on the editor page (CEO 2026-11-01) */
.avatar-photo { border-radius: 50%; object-fit: cover; flex: none; }
.editor-photo { border-radius: 50%; object-fit: cover; }