/* ============================================================
   [BRAND NAME] — design system
   Tokens, components and layout. One stylesheet, no build step.
   Spacing scale: 4 8 12 16 24 32 48 64 only.
   Radius: 8 buttons/inputs/tags · 12 cards · 16 modals · pill chips.
   Shadows: dropdowns and modals only. Cards use a hairline border.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:#FDFCFA; --card:#F3F0E8; --bd:#E8E5DD;
  --tx:#1B2233; --tx2:#5A5548; --tx3:#9C9587;
  --ac:#2A3B6B; --ok:#2F7D5A; --dg:#B8452F; --wn:#A6791F;
  --acsoft:rgba(42,59,107,0.08);
  --dgsoft:rgba(184,69,47,0.10);
  --oksoft:rgba(47,125,90,0.10);
  --wnsoft:rgba(166,121,31,0.12);
  --shadow:0 4px 12px rgba(0,0,0,0.08);
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --ease:180ms ease-out;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:#0E1116; --card:#171B21; --bd:#262B33;
  --tx:#F2F3F5; --tx2:#A9B0BB; --tx3:#767D89;
  --ac:#7B94D8; --ok:#5FAE86; --dg:#E27458; --wn:#D9A441;
  --acsoft:rgba(123,148,216,0.12);
  --dgsoft:rgba(226,116,88,0.14);
  --oksoft:rgba(95,174,134,0.14);
  --wnsoft:rgba(217,164,65,0.14);
  --shadow:0 4px 12px rgba(0,0,0,0.4);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
h1,h2,h3,h4 { font-family:var(--serif); margin:0; color:var(--tx); letter-spacing:-0.01em; line-height:1.2; }
p { margin:0; color:var(--tx2); line-height:1.7; }
a { color:var(--ac); text-decoration:none; transition:color var(--ease); }
a:hover { color:var(--tx); }
:focus-visible { outline:2px solid var(--ac); outline-offset:2px; border-radius:4px; }
hr { border:0; height:0.5px; background:var(--bd); margin:0; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.skip {
  position:absolute; left:-9999px; top:8px; z-index:100;
  background:var(--ac); color:#fff; padding:12px 16px; border-radius:8px;
}
.skip:focus { left:8px; }
[hidden] { display:none !important; }   /* beats inline display: on toggled blocks */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 3. Layout ---------- */
.wrap { max-width:1312px; margin:0 auto; padding:0 32px; }
.wrap-narrow { max-width:824px; margin:0 auto; padding:0 32px; }
.sec { padding:48px 0; }
.sech { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.sech h2 { font-size:28px; font-weight:600; }
.sub { font-size:14px; color:var(--tx3); margin-top:4px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.row { display:flex; align-items:center; gap:16px; }
.scroller { display:flex; gap:24px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.scroller > * { flex:0 0 280px; }

/* ---------- 4. Components ---------- */
.card {
  background:var(--card); border:0.5px solid var(--bd); border-radius:12px;
  transition:border-color var(--ease);
}
a.card:hover, .card.hoverable:hover { border-color:var(--ac); }
.tag {
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; padding:4px 8px; border-radius:8px;
  background:var(--acsoft); color:var(--ac);
}
.tag.dg { background:var(--dgsoft); color:var(--dg); }
.tag.ok { background:var(--oksoft); color:var(--ok); }
.tag.wn { background:var(--wnsoft); color:var(--wn); }
.tag.mut { background:transparent; color:var(--tx3); border:0.5px solid var(--bd); }
.chip {
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border-radius:999px; border:0.5px solid var(--bd); background:transparent;
  color:var(--tx2); font:500 13px var(--sans); cursor:pointer; white-space:nowrap;
  transition:background var(--ease), border-color var(--ease), color var(--ease);
}
.chip:hover { border-color:var(--ac); }
.chip[aria-pressed="true"] { background:var(--ac); border-color:var(--ac); color:#fff; }
.btn, .btn2, .ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 24px; border-radius:8px;
  font:600 14px var(--sans); cursor:pointer; transition:all var(--ease);
}
.btn { border:0; background:var(--ac); color:#fff; }
.btn:hover { opacity:0.9; color:#fff; }
.btn2 { border:1px solid var(--ac); background:transparent; color:var(--ac); }
.btn2:hover { background:var(--acsoft); }
.ghost { border:0; background:none; color:var(--tx2); padding:0 8px; }
.ghost:hover { color:var(--tx); }
.btn-sm { min-height:36px; padding:0 16px; font-size:13px; }
.icon { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.icon-sm { width:16px; height:16px; }
.iconbtn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; background:none; border:0; color:var(--tx2); cursor:pointer;
}
.iconbtn:hover { color:var(--tx); }
.badge {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:0.04em; padding:4px 8px; border-radius:8px;
}
.b-ok { background:var(--oksoft); color:var(--ok); }
.b-wn { background:var(--wnsoft); color:var(--wn); }
.b-dg { background:var(--dgsoft); color:var(--dg); }
.b-ac { background:var(--acsoft); color:var(--ac); }
.b-mut { background:transparent; color:var(--tx3); border:0.5px solid var(--bd); }
.thumb {
  border-radius:12px 12px 0 0; border-bottom:0.5px solid var(--bd);
  background:linear-gradient(160deg, var(--acsoft), transparent 70%);
  display:flex; align-items:flex-end; padding:16px; min-height:160px;
}
.thumb.loss { background:linear-gradient(160deg, var(--dgsoft), transparent 70%); }
.thumb.win  { background:linear-gradient(160deg, var(--oksoft), transparent 70%); }

/* form controls */
.lbl { display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--tx3); margin-bottom:8px; }
.inp {
  width:100%; min-height:44px; padding:0 16px; border:0.5px solid var(--bd);
  border-radius:8px; background:var(--bg); color:var(--tx); font:400 14px var(--sans);
}
.inp::placeholder { color:var(--tx3); }
textarea.inp { min-height:104px; padding:12px 16px; resize:vertical; line-height:1.6; }
select.inp { cursor:pointer; }
input[type="range"] { width:100%; accent-color:var(--ac); height:44px; }
input[type="checkbox"] { width:18px; height:18px; accent-color:var(--ac); }

/* ---------- 5. Ticker + header ---------- */
.ticker {
  background:var(--tx); color:var(--bg); height:32px;
  display:flex; align-items:center; overflow:hidden; font-size:12px;
}
.ticker .wrap { display:flex; align-items:center; gap:32px; width:100%; overflow-x:auto; scrollbar-width:none; }
.ticker .wrap::-webkit-scrollbar { display:none; }
.ticker .up { color:#5FAE86; }
.ticker .down { color:#E27458; }
.ticker .hot { display:inline-flex; align-items:center; gap:8px; font-weight:600; margin-left:auto; white-space:nowrap; }
.ticker .hot a { color:inherit; }

.topbar {
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:0.5px solid var(--bd); transition:transform 200ms ease-out;
}
body.nav-hidden .topbar { transform:translateY(-100%); }
.topbar .wrap { min-height:72px; display:flex; align-items:center; gap:32px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--tx); }
.brand:hover { color:var(--tx); }
.brand span { font-family:var(--serif); font-size:22px; font-weight:700; }
.nav-links { display:flex; align-items:center; gap:24px; font-size:14px; font-weight:500; }
.nav-links a { color:var(--tx2); }
.nav-links a[aria-current="page"] { color:var(--tx); }
.topbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

.drawer {
  position:fixed; inset:0; z-index:40; background:var(--bg);
  padding:24px 32px; overflow-y:auto;
}
.drawer[hidden] { display:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.drawer a { display:block; padding:16px 0; font-size:20px; font-family:var(--serif); color:var(--tx); border-bottom:0.5px solid var(--bd); }

.bottomnav {
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  background:var(--bg); border-top:0.5px solid var(--bd); height:64px;
  padding:0 8px; transition:transform 200ms ease-out;
}
body.nav-hidden .bottomnav { transform:translateY(100%); }
.bottomnav a {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:44px; color:var(--tx3); font-size:10px; font-weight:500;
}
.bottomnav a[aria-current="page"] { color:var(--ac); }

/* ---------- 6. Hero ---------- */
.hero { display:flex; gap:32px; align-items:stretch; }
.hero-main { flex:1.4; display:flex; flex-direction:column; overflow:hidden; padding:0; }
.hero-side { flex:1; display:flex; flex-direction:column; gap:24px; }
.hero-figure {
  min-height:300px; border-bottom:0.5px solid var(--bd);
  display:flex; align-items:flex-end; padding:32px;
}
.hero-body { padding:32px; display:flex; flex-direction:column; gap:16px; }
.hero-body h2 { font-size:40px; font-weight:700; line-height:1.15; }
.slide[hidden] { display:none; }
.dots { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:24px; }
.dots button {
  width:8px; height:8px; padding:0; border:0; border-radius:999px; background:var(--bd);
  cursor:pointer; transition:width var(--ease), background var(--ease);
}
.dots button[aria-current="true"] { width:24px; background:var(--ac); }

/* ---------- 7. Article ---------- */
.prose p { font-size:17px; margin-bottom:16px; }
.prose h2 { font-size:28px; font-weight:600; margin:48px 0 16px; scroll-margin-top:96px; }
.prose strong { color:var(--tx); }
.digest {
  border-left:3px solid var(--ac); background:var(--acsoft);
  border-radius:0 12px 12px 0; padding:24px 32px;
}
.digest-list { display:flex; flex-direction:column; gap:12px; font-size:15px; color:var(--tx); }
.callout {
  margin:32px 0; padding:32px 0; text-align:center;
  border-top:0.5px solid var(--bd); border-bottom:0.5px solid var(--bd);
}
.callout .big { font-family:var(--mono); font-size:48px; font-weight:600; line-height:1.1; }
.toc { padding:24px; }
.toc-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; font-size:14px; }
.sentiment-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.vote {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-height:44px; padding:12px 8px; border-radius:8px; border:0.5px solid var(--bd);
  background:transparent; color:var(--tx2); font:500 13px var(--sans); cursor:pointer;
  transition:border-color var(--ease), background var(--ease), color var(--ease);
}
.vote:hover { border-color:var(--ac); }
.vote[aria-pressed="true"] { border-color:var(--ac); background:var(--acsoft); color:var(--ac); }
.replay { padding:32px; border-color:var(--ac); }
.replay-opts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.pick {
  text-align:left; padding:24px; border-radius:12px; border:0.5px solid var(--bd);
  background:transparent; color:var(--tx); cursor:pointer; font-family:var(--sans);
  transition:border-color var(--ease), background var(--ease);
}
.pick:hover { border-color:var(--ac); }
.pick[aria-pressed="true"] { border-color:var(--ac); background:var(--acsoft); }
.pick b { display:block; font-size:16px; margin-bottom:8px; }
.faq { border-top:0.5px solid var(--bd); }
.faq details { border-bottom:0.5px solid var(--bd); }
.faq summary {
  list-style:none; cursor:pointer; padding:16px 0; font-size:16px; color:var(--tx);
  display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq p { padding:0 0 16px; font-size:15px; }
.disclaimer { padding:24px; border:0.5px dashed var(--bd); border-radius:12px; }
.progress { position:fixed; top:0; left:0; height:3px; background:var(--ac); z-index:50; width:0; }

/* ---------- 8. Lab ---------- */
.stepper { display:flex; align-items:center; gap:8px; }
.stepper i { display:block; width:8px; height:4px; border-radius:999px; background:var(--bd); transition:all var(--ease); }
.stepper i.on { width:24px; background:var(--ac); }
.step[hidden] { display:none; }
.opt {
  min-height:44px; padding:16px; border-radius:8px; border:0.5px solid var(--bd);
  background:transparent; color:var(--tx); font:500 15px var(--sans); cursor:pointer;
  text-align:left; transition:border-color var(--ease), background var(--ease);
}
.opt:hover { border-color:var(--ac); }
.opt[aria-pressed="true"] { border-color:var(--ac); background:var(--acsoft); color:var(--ac); }
.arch {
  padding:24px; border-radius:12px; border:0.5px solid var(--bd); background:transparent;
  cursor:pointer; text-align:left; font-family:var(--sans);
  transition:border-color var(--ease), background var(--ease);
}
.arch:hover { border-color:var(--ac); }
.arch[aria-pressed="true"] { border-color:var(--ac); background:var(--acsoft); }
.arch h3 { font-size:20px; font-weight:600; }
.calc-dots { display:flex; gap:8px; }
.calc-dots i { display:block; width:10px; height:10px; border-radius:999px; background:var(--ac); animation:pulse 1s ease-in-out infinite; }
.calc-dots i:nth-child(2) { animation-delay:0.15s; }
.calc-dots i:nth-child(3) { animation-delay:0.3s; }
@keyframes pulse { 0%,100% { opacity:0.35; } 50% { opacity:1; } }

/* ---------- 9. Bars, tables, admin ---------- */
.bar { height:8px; border-radius:999px; background:var(--bd); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:999px; background:var(--ac); }
.list-row {
  display:flex; align-items:center; gap:16px; padding:12px 0;
  border-bottom:0.5px solid var(--bd);
}
.list-row:last-child { border-bottom:0; }
table { width:100%; border-collapse:collapse; }
th {
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--tx3);
  font-weight:600; text-align:left; padding:8px 12px; border-bottom:0.5px solid var(--bd);
}
td { padding:12px; border-bottom:0.5px solid var(--bd); font-size:14px; color:var(--tx2); }
tr:last-child td { border-bottom:0; }
.tablewrap { overflow-x:auto; }

.admin { display:flex; min-height:100vh; }
.side {
  flex:0 0 248px; border-right:0.5px solid var(--bd); padding:24px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.side button {
  display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0 16px;
  border-radius:8px; border:0; background:transparent; color:var(--tx2);
  font:500 14px var(--sans); cursor:pointer; text-align:left; transition:background var(--ease);
}
.side button:hover { background:var(--acsoft); }
.side button[aria-selected="true"] { background:var(--ac); color:#fff; }
.admin main { flex:1; padding:32px 32px 64px; min-width:0; }
.panel[hidden] { display:none; }
.tile { padding:24px; border-radius:12px; border:0.5px solid var(--bd); background:var(--card); }
.notice {
  display:flex; align-items:center; gap:12px; padding:16px; border-radius:8px;
  background:var(--wnsoft); border:0.5px solid rgba(166,121,31,0.3);
}
.notice.ac { background:var(--acsoft); border-color:transparent; }

/* ---------- 10. Vendor + deals ---------- */
.pkg {
  padding:24px; border-radius:12px; border:0.5px solid var(--bd); background:transparent;
  cursor:pointer; text-align:left; font-family:var(--sans);
  transition:border-color var(--ease), background var(--ease);
}
.pkg:hover { border-color:var(--ac); }
.pkg[aria-pressed="true"] { border-color:var(--ac); background:var(--acsoft); }
.stepnum {
  font-family:var(--mono); width:28px; height:28px; border-radius:999px; background:var(--ac);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; flex:0 0 auto;
}
.vlogo {
  width:40px; height:40px; border-radius:8px; background:var(--acsoft);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--tx3);
}
.expired { opacity:0.72; }

/* ---------- 11. Cookie banner ---------- */
.cookie {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60; max-width:640px;
  margin:0 auto; padding:24px; border-radius:16px; background:var(--card);
  border:0.5px solid var(--bd); box-shadow:var(--shadow);
}
.cookie[hidden] { display:none; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }

/* ---------- 12. Footer ---------- */
footer { border-top:0.5px solid var(--bd); margin-top:32px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding:48px 0; }
.foot-col-title { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--tx3); margin-bottom:12px; }
.foot-links { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.foot-bottom {
  border-top:0.5px solid var(--bd); padding:24px 0 32px;
  display:flex; justify-content:space-between; gap:24px; font-size:13px; color:var(--tx3);
}

/* ---------- 13. Motion ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 400ms ease-out, transform 400ms ease-out; }
.reveal.in { opacity:1; transform:none; }

/* ---------- 14. Responsive ---------- */
@media (max-width:1024px) {
  .nav-links { display:none; }
  .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .hero { flex-direction:column; }
  .side { flex:0 0 200px; }
}
@media (max-width:768px) {
  .wrap, .wrap-narrow { padding:0 16px; }
  .sec { padding:32px 0; }
  .grid2, .grid3, .grid4 { grid-template-columns:1fr; gap:16px; }
  .sech { flex-direction:column; align-items:flex-start; gap:8px; }
  .sech h2 { font-size:24px; }
  .hero-body h2 { font-size:28px; }
  .hero-figure { min-height:200px; padding:16px; }
  .hero-body { padding:24px; }
  .toc-list { grid-template-columns:1fr; }
  .sentiment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .replay-opts { grid-template-columns:1fr; }
  .callout .big { font-size:32px; }
  .prose h2 { font-size:22px; }
  .scroller > * { flex:0 0 240px; }
  body { padding-bottom:64px; }
  .bottomnav { display:flex; align-items:center; }
  .admin { flex-direction:column; }
  .side { flex:none; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:0.5px solid var(--bd); }
  .side .side-brand, .side .side-foot { display:none; }
  .admin main { padding:24px 16px 64px; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; gap:8px; }
}

/* ---------- 15. Accessibility + print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}
@media print {
  .ticker, .topbar, .bottomnav, .cookie, .drawer, .progress,
  .deals-zone, .sentiment-zone, .share-zone, .cta-zone, footer { display:none !important; }
  body { background:#fff; color:#000; font-size:12pt; }
  .card { border:0.5px solid #ccc; background:#fff; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}