:root {
    --bg: #fbfbfa;
    --paper: #ffffff;
    --ink: #111827;
    --body: #374151;
    --muted: #6b7280;
    --faint: #9ca3af;
    --line: #e5e7eb;
    --line-soft: #eeece8;
    --accent: #1F40ED;
    --accent-soft: #eef2ff;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }

  .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(251,251,250,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
  .nav-inner { max-width: 1180px; margin: 0 auto; height: 64px; padding: 0 28px; display: flex; align-items: center; gap: 34px; }
  .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -.03em; white-space: nowrap; }
  .brand-mark { width: 25px; height: 25px; display: inline-flex; flex: 0 0 auto; }
  .brand em { font-style: normal; color: var(--accent); }
  .nav-links { display: flex; align-items: center; gap: 24px; margin-left: 10px; }
  .nav-links a { font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 8px 0; border-bottom: 1px solid transparent; }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); border-color: var(--accent); }
  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500; }
  .nav-cta:hover { background: #000; }
  .nav-agent { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 500; }
  .nav-agent:hover { border-color: #d1d5db; }

  main { padding: 0 28px; }
  .breadcrumbs { max-width: 900px; margin: 0 auto; padding: 26px 0 0; color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
  .breadcrumbs span { margin: 0 7px; color: #d1d5db; }
  .breadcrumbs a:hover { color: var(--ink); }

  .article-head { max-width: 800px; margin: 0 auto; padding: 60px 0 0; }
  .kicker { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .article-head h1 { margin: 22px 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.2vw, 64px); line-height: 1.01; letter-spacing: -.045em; color: #0f172a; }
  .dek { max-width: 690px; color: var(--muted); font-size: 18px; line-height: 1.55; }
  .byline { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .02em; }
  .byline b { color: var(--body); font-weight: 500; }
  .byline i { width: 3px; height: 3px; margin-top: 5px; border-radius: 50%; background: #d1d5db; }

  .hero { max-width: 900px; margin: 34px auto 0; }
  .hero-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; overflow: hidden; background: #111827; border-radius: 2px; }
  .hero-collage img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.78) contrast(1.02); }
  .hero-meta { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px 0; color: var(--faint); font-family: var(--mono); font-size: 9.5px; }
  .hero-meta b { color: var(--body); font-weight: 500; }
  .hero figcaption { margin-top: 9px; color: var(--faint); font-size: 10.5px; line-height: 1.5; }

  .article-layout { max-width: 1030px; margin: 66px auto 0; display: grid; grid-template-columns: 184px minmax(0, 760px); gap: 58px; align-items: start; }
  .toc { position: sticky; top: 96px; padding-top: 2px; }
  .toc-label { color: var(--faint); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
  .toc a { display: flex; gap: 9px; padding: 7px 0 7px 11px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.35; transition: color .15s, border-color .15s; }
  .toc a span { color: var(--faint); font-family: var(--mono); font-size: 9px; padding-top: 1px; }
  .toc a:hover { color: var(--ink); }
  .toc a.active { color: var(--ink); border-color: var(--accent); }
  .toc a.active span { color: var(--accent); }
  .toc .read { margin-top: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
  .toc .read:hover { border-color: #c7d2fe; color: var(--accent); }

  .prose { min-width: 0; color: var(--body); font-size: 17px; line-height: 1.76; }
  .prose p { margin: 0 0 22px; }
  .prose p.lead { color: var(--ink); font-size: 19px; line-height: 1.65; }
  .prose h2 { margin: 78px 0 20px; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -.035em; color: var(--ink); }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { margin: 34px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
  .prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(31,64,237,.24); }
  .prose a:hover { border-color: var(--accent); }
  .prose strong { color: var(--ink); font-weight: 600; }
  .prose ul { margin: 0 0 24px 20px; padding: 0; }
  .prose li { margin: 7px 0; padding-left: 3px; }
  .prose li::marker { color: var(--accent); }

  .pullquote { margin: 36px 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--accent); }
  .pullquote p { margin: 0; font-family: var(--serif); font-size: 27px; line-height: 1.3; letter-spacing: -.025em; color: var(--ink); }
  .pullquote small { display: block; margin-top: 10px; color: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; }

  .section-note { margin: -10px 0 24px; color: var(--faint); font-size: 11.5px; line-height: 1.55; }

  /* budget bars */
  .budget { margin: 28px 0 30px; padding: 20px 20px 12px; border: 1px solid var(--line-soft); background: #fdfdfc; }
  .budget-row { display: grid; grid-template-columns: 92px 1fr 80px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
  .budget-row:last-child { border-bottom: 0; }
  .budget-row span { font-size: 11.5px; color: var(--body); }
  .budget-row b { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--faint); text-align: right; }
  .budget-bar { height: 6px; background: #f1f2f4; border-radius: 100px; overflow: hidden; }
  .budget-bar i { display: block; height: 100%; border-radius: 100px; background: #c7d2fe; }
  .budget-row.hot .budget-bar i { background: var(--accent); }

  /* inline search */
  .inline-search { margin: 34px 0 38px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 26px -24px rgba(0,0,0,.25); }
  .is-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
  .is-kicker { color: var(--accent); font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
  .is-title { margin-top: 4px; font-family: var(--serif); font-size: 25px; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); }
  .is-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 7px; background: #f2f1f0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); flex: 0 0 auto; }
  .is-tabs button { padding: 5px 9px; border: 0; border-radius: 5px; background: none; color: rgba(0,0,0,.45); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
  .is-tabs button.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.08); }
  .is-tabs button.agent.on { color: var(--accent); }
  .is-agent-pill { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid #dbe4ff; border-radius: 999px; background: #eef2ff; color: var(--accent); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; flex: 0 0 auto; }
  .is-row { display: flex; align-items: center; gap: 10px; }
  .is-row input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 16px; }
  .is-row input::placeholder { color: rgba(0,0,0,.35); }
  .is-submit { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 17px; cursor: pointer; }
  .is-submit:hover { background: #000; }
  .is-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .is-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .is-chips a { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; border-bottom: 1px solid var(--line); }
  .is-chips a:hover { border-color: #c7d2fe; color: var(--accent); }
  .is-count { color: var(--faint); font-family: var(--mono); font-size: 9px; white-space: nowrap; }
  .is-note { margin-top: 8px; color: var(--faint); font-size: 10px; }

  /* chart */
  .chart-card { margin: 24px 0 8px; padding: 18px 18px 12px; border: 1px solid var(--line-soft); background: #fff; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 5px 15px; margin-bottom: 12px; color: var(--muted); font-size: 10.5px; }
  .chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .chart-legend i { width: 7px; height: 7px; border-radius: 50%; }
  .chart-wrap { width: 100%; overflow-x: auto; }
  .chart-wrap svg { display: block; width: 100%; height: auto; }
  .chart-note { margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 10px; line-height: 1.55; }
  .chart-note b { color: var(--body); font-weight: 500; }

  /* table */
  .model-table { width: 100%; border-collapse: collapse; margin: 24px 0 10px; font-size: 12px; }
  .model-table th { padding: 8px 7px; border-bottom: 1px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: 8.5px; font-weight: 400; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .model-table td { padding: 10px 7px; border-bottom: 1px solid var(--line-soft); color: var(--body); }
  .model-table td:first-child a { color: var(--ink); font-weight: 500; border-bottom: 0; }
  .model-table td:first-child a:hover { color: var(--accent); }
  .model-table th:nth-child(n+2), .model-table td:nth-child(n+2) { text-align: right; font-family: var(--mono); font-size: 10.5px; }
  .model-table tr:last-child td { border-bottom: 0; }
  .model-table .tesla td { background: #fcfcff; }
  .table-note { color: var(--faint); font-size: 10px; line-height: 1.55; }

  /* tesla stats */
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 22px; }
  .stat-card { padding: 15px 16px; border: 1px solid var(--line-soft); background: #fff; }
  .stat-card .stat-label { color: var(--faint); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .stat-card b { display: block; margin-top: 5px; font-size: 26px; letter-spacing: -.04em; color: var(--ink); }
  .stat-card span { color: var(--muted); font-size: 10.5px; }
  .caveat { margin: 26px 0; padding: 15px 17px; border: 1px solid #e2e7fb; background: #f8f9ff; color: var(--body); font-size: 12px; line-height: 1.6; }
  .caveat b { color: var(--ink); }

  .cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 26px 0 8px; background: var(--line); border: 1px solid var(--line); }
  .cta-card { display: flex; flex-direction: column; gap: 8px; min-height: 138px; padding: 17px 16px; background: #fff; }
  .cta-card:hover { background: #fcfcff; }
  .cta-card .cta-kicker { color: var(--faint); font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; }
  .cta-card b { color: var(--ink); font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
  .cta-card span { margin-top: auto; color: var(--accent); font-size: 10.5px; font-weight: 500; }

  .sources { margin: 48px 0 0; padding-top: 17px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; line-height: 1.65; }
  .sources b { color: var(--body); font-weight: 500; }

  .more { max-width: 1030px; margin: 72px auto 0; padding-top: 26px; border-top: 1px solid var(--line); }
  .more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
  .more-head h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -.03em; }
  .more-head a { color: var(--accent); font-size: 11px; }
  .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .more-card { display: block; }
  .more-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.8); }
  .more-card .more-kicker { margin: 9px 0 4px; color: var(--faint); font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; }
  .more-card b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
  .more-card:hover b { color: var(--accent); }

  footer { max-width: 1180px; margin: 70px auto 0; padding: 24px 0 34px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--faint); font-size: 10px; }
  .footer-links { display: flex; gap: 16px; }
  .footer-links a:hover { color: var(--ink); }

  @media (max-width: 980px) {
    .article-layout { grid-template-columns: 1fr; gap: 22px; max-width: 800px; }
    .toc { position: static; display: flex; flex-wrap: wrap; gap: 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .toc-label { width: 100%; margin-bottom: 4px; }
    .toc a { border-left: 0; border-bottom: 1px solid transparent; padding: 4px 0; }
    .toc a.active { border-color: var(--accent); }
    .toc .read { display: none; }
  }
  @media (max-width: 720px) {
    .nav-inner { padding: 0 18px; gap: 14px; }
    .nav-links { display: none; }
    .nav-agent { display: none; }
    main { padding: 0 18px; }
    .article-head { padding-top: 36px; }
    .article-head h1 { font-size: 40px; }
    .dek { font-size: 16px; }
    .hero-collage { grid-template-columns: repeat(2, 1fr); }
    .article-layout { margin-top: 34px; }
    .prose { font-size: 16px; }
    .prose h2 { font-size: 30px; margin-top: 58px; }
    .pullquote p { font-size: 23px; }
    .budget-row { grid-template-columns: 76px 1fr 64px; }
    .is-head { flex-direction: column; gap: 9px; }
    .is-foot { flex-direction: column; align-items: flex-start; }
    .is-count { align-self: flex-end; }
    .stat-grid, .cta-grid, .more-grid { grid-template-columns: 1fr; }
    .cta-card { min-height: auto; }
  }

/* ── hub-article components (server-rendered listings / directory / how / faq) ── */
.sim-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,230px);gap:14px;overflow-x:auto;padding:2px 2px 12px;margin:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sim-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;scroll-snap-align:start;transition:transform .15s,box-shadow .15s}
.sim-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.18)}
.sim-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f3f4f6;display:block}
.sim-card .st{font-weight:500;font-size:13px;line-height:1.35;margin:9px 11px 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.sim-card .sp{font-weight:600;font-size:14px;margin:0 11px 4px}
.sim-card .sp.zero{color:var(--muted);font-weight:400}
.sim-card .sm{color:var(--faint);font-size:10.5px;margin:0 11px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 6px}
.hub-chips a{border:1px solid var(--line);background:#fff;color:var(--body);border-radius:999px;padding:6px 12px;font-size:11.5px;text-decoration:none;transition:border-color .15s,color .15s}
.hub-chips a:hover{border-color:#c7d2fe;color:var(--accent)}
.hub-group{font-size:12px;font-weight:600;color:var(--ink);margin:18px 0 2px}
.vh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 6px;padding:0;list-style:none}
.vh-steps li{border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:12px;color:var(--body);line-height:1.55;background:#fff}
.vh-steps li b{display:block;color:var(--ink);margin-bottom:2px}
.vh-steps .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;margin-bottom:7px}
.vh-faq{margin:10px 0 6px;border-top:1px solid var(--line);}
.vh-faq details{border-bottom:1px solid var(--line-soft)}
.vh-faq summary{list-style:none;cursor:pointer;padding:13px 0;font-size:13px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;gap:16px}
.vh-faq summary::-webkit-details-marker{display:none}
.vh-faq summary:after{content:'+';color:var(--faint);font-size:17px;font-weight:400}
.vh-faq details[open] summary:after{content:'−'}
.vh-faq p{margin:0 20px 14px 0;color:var(--body);font-size:12.5px;line-height:1.65}
.vh-seo{max-width:70ch;color:var(--body);line-height:1.75;font-size:14px}
.vh-seo p{margin:0 0 16px}
.source-table{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:12px}
.source-table th{padding:7px 6px;border-bottom:1px solid var(--line);color:var(--faint);font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.source-table td{padding:9px 6px;border-bottom:1px solid var(--line-soft);color:var(--body)}
.source-table td:last-child{text-align:right;font-family:var(--mono);font-size:10.5px}
.source-table a{color:var(--ink);font-weight:500;border-bottom:0}
.source-table a:hover{color:var(--accent)}
.article-note{color:var(--faint);font-size:10px;line-height:1.55}
.fresh-section .sim-row{margin-top:16px}
@media(max-width:720px){.vh-steps{grid-template-columns:1fr}.sim-row{grid-auto-columns:minmax(160px,200px)}}
.prose .pdp-sec{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;letter-spacing:-.03em;color:var(--ink);margin:68px 0 16px;padding:0}
.prose .muted{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0 0 12px}
.hero-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;background:#111827;color:#fff;text-align:center}
.hero-empty span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hero-empty b{margin-top:7px;font-family:var(--serif);font-weight:400;font-size:25px}
.horse-list{display:grid;gap:0;margin:14px 0 4px;border-top:1px solid var(--line)}
.horse-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;padding:12px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.horse-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:13px;font-weight:500}
.horse-p{color:var(--ink);font-family:var(--mono);font-size:11px;white-space:nowrap}
.horse-m{grid-column:1/-1;color:var(--faint);font-size:10.5px}
.horse-row:hover .horse-t{color:var(--accent)}
.hero-empty small{display:block;margin-top:7px;color:rgba(255,255,255,.55);font-size:11px}

/* ── /computers market page ─────────────────────────────────────── */
.compute-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 12px}
.compute-tab{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:7px 13px;font-size:11.5px;font-weight:500;cursor:pointer;font-family:var(--sans)}
.compute-tab:hover{border-color:#c7d2fe;color:var(--ink)}
.compute-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.compute-panel{display:none}
.compute-panel.on{display:block}
.compute-kpis{grid-template-columns:repeat(3,1fr)}
.compute-table td:first-child{max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compute-deals-table td:first-child{max-width:300px}
.compute-deals-table td:nth-child(4){color:#047857;font-weight:500}
.compute-panel .chart-card{margin-top:0}
.compute-panel .model-table{margin-top:18px}
@media(max-width:720px){
  .compute-kpis{grid-template-columns:1fr}
  .compute-table{font-size:11px}
  .compute-table th,.compute-table td{padding-left:4px;padding-right:4px}
  .compute-table td:first-child{max-width:150px}
}
.compute-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.compute-table-wrap .compute-table{min-width:620px}
@media(max-width:720px){.compute-table-wrap .compute-table{min-width:680px}}
body.hub-article-page{overflow-x:hidden}
.compute-search .is-row input::placeholder{font-size:13.5px}