:root{
    --bg:#fbfbfd; --panel:#fff; --panel-3:#e9ebf1;
    --border:#e4e6ee; --border-hover:#c7cddc;
    --text:#0d1220; --dim:#5c6478; --mute:#9098a8;
    --accent:#5a2a7a; --accent-soft:#5a2a7a1a;
    --shadow:0 1px 2px rgba(13,18,32,.04), 0 10px 30px -16px rgba(13,18,32,.16);
    --shadow-hi:0 2px 5px rgba(13,18,32,.06), 0 26px 50px -22px rgba(13,18,32,.32);
    --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --bg:#080b11; --panel:#111823; --panel-3:#1c2634;
    --border:#212c3d; --border-hover:#36485f;
    --text:#eaf0f8; --dim:#94a3b8; --mute:#5f6d82;
    --accent:#9f83b1; --accent-soft:#9f83b126;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.9);
    --shadow-hi:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,1);
  }}
  :root[data-theme="dark"]{
    --bg:#080b11; --panel:#111823; --panel-3:#1c2634;
    --border:#212c3d; --border-hover:#36485f;
    --text:#eaf0f8; --dim:#94a3b8; --mute:#5f6d82;
    --accent:#9f83b1; --accent-soft:#9f83b126;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.9);
    --shadow-hi:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,1);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0; background:var(--bg); color:var(--text);
    font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
  .wrap{max-width:900px; margin:0 auto; padding:0 26px 100px}
  a{color:var(--accent)}

  /* ---- Top bar --------------------------------------------------------- */
  .bar{display:flex; align-items:center; gap:12px; padding:22px 0 0}
  .bar .home{display:flex; align-items:center; gap:8px; color:var(--mute);
    text-decoration:none; font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
  .bar .home:hover{color:var(--text)}
  .bar .sp{flex:1}
  .theme-btn{width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
    border:1px solid var(--border); background:var(--panel); color:var(--dim); cursor:pointer}
  .theme-btn:hover{color:var(--text); border-color:var(--border-hover)}
  .theme-btn svg{width:16px; height:16px; display:none}
  .theme-btn .i-sun{display:block}
  :root[data-theme="dark"] .theme-btn .i-sun{display:none}
  :root[data-theme="dark"] .theme-btn .i-moon{display:block}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .theme-btn .i-sun{display:none}
    :root:not([data-theme="light"]) .theme-btn .i-moon{display:block}
  }

  /* ---- Hero ------------------------------------------------------------ */
  .hero{padding:52px 0 0; text-align:center}
  .hero .ic{width:104px; height:104px; border-radius:24px;
    box-shadow:0 14px 34px rgba(13,18,32,.22), 0 0 0 1px rgba(13,18,32,.06)}
  h1{margin:24px 0 0; font:700 clamp(32px,5.4vw,48px)/1.06 var(--sans); letter-spacing:-.035em}
  .tag{color:var(--accent); font:600 15px/1.4 var(--sans); margin:12px 0 0}
  .lede{color:var(--dim); font-size:17px; margin:16px auto 0; max-width:50ch}

  .cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin:30px 0 0}
  .btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    font:600 15px/1 var(--sans); letter-spacing:-.01em; padding:14px 22px; border-radius:12px;
    background:var(--accent); color:#fff; border:1px solid transparent;
    box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
  .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-hi)}
  .btn svg{width:18px; height:18px}
  .btn.ghost{background:var(--panel); color:var(--text); border-color:var(--border)}
  .btn.ghost:hover{border-color:var(--border-hover)}
  .status{color:var(--mute); font:600 11px/1 var(--mono); letter-spacing:.12em;
    text-transform:uppercase; margin:16px 0 0}
  .note{color:var(--mute); font-size:13px; margin:10px auto 0; max-width:44ch}

  .shot{margin:44px auto 0; max-width:760px; border-radius:18px; overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow-hi)}
  .shot img{display:block; width:100%; height:auto}

  /* ---- Sections -------------------------------------------------------- */
  section{margin-top:64px}
  .sec-head{display:flex; align-items:baseline; gap:12px; margin:0 0 20px}
  .sec-head h2{margin:0; font:600 13px/1 var(--mono); letter-spacing:.13em;
    text-transform:uppercase; color:var(--mute)}
  .sec-head .rule{flex:1; height:1px; background:var(--border)}

  .feats{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
  .f{background:var(--panel); border:1px solid var(--border); border-radius:14px;
    padding:18px 18px 19px; box-shadow:var(--shadow)}
  .f h3{margin:0; font:650 15px/1.3 var(--sans); letter-spacing:-.018em}
  .f p{margin:7px 0 0; color:var(--dim); font-size:13.5px; line-height:1.5}

  details{background:var(--panel); border:1px solid var(--border); border-radius:12px;
    padding:14px 16px; margin-bottom:9px}
  details[open]{border-color:var(--border-hover)}
  summary{cursor:pointer; font:650 14.5px/1.4 var(--sans); letter-spacing:-.015em;
    list-style:none}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; float:right; color:var(--mute); font-weight:400}
  details[open] summary::after{content:"–"}
  details p{margin:10px 0 0; color:var(--dim); font-size:13.5px}

  footer{margin-top:70px; padding-top:24px; border-top:1px solid var(--border);
    color:var(--mute); font-size:13px; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:10px}
  footer a{color:var(--dim); text-decoration:none}
  footer a:hover{color:var(--accent)}
  @media (max-width:560px){ .hero{padding-top:34px} .feats{grid-template-columns:1fr} }
  @media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* ---- Added for /compare and /blog: prose, tables, cards ---- */
.prose{max-width:760px;margin:0 auto;padding:0 20px}
.prose h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.03em;line-height:1.12;margin:0 0 10px}
.prose h2{font-size:clamp(21px,3.4vw,27px);letter-spacing:-.02em;margin:44px 0 12px}
.prose h3{font-size:18px;letter-spacing:-.01em;margin:28px 0 8px}
.prose p,.prose li{color:var(--dim);line-height:1.62}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 7px}
.prose strong{color:var(--text)}
.prose a{color:var(--accent)}
.lede{font-size:clamp(16px,2.2vw,19px);color:var(--dim);margin:0 0 6px!important}
.byline{color:var(--mute);font-size:13px;margin:0 0 30px!important}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px;
  border:1px solid var(--border);border-radius:14px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:650;color:var(--text);background:var(--panel-3);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td{color:var(--dim)}
td.us{color:var(--text);font-weight:600}
caption{caption-side:bottom;padding:10px 14px;color:var(--mute);font-size:12.5px;text-align:left}

.note{border:1px solid var(--border);border-left:3px solid var(--accent);
  background:var(--panel);border-radius:0 12px 12px 0;padding:14px 16px;margin:0 0 20px}
.note p{margin:0}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 24px}
.cardlink{display:block;border:1px solid var(--border);border-radius:14px;background:var(--panel);
  padding:16px;text-decoration:none;box-shadow:var(--shadow)}
.cardlink:hover{border-color:var(--border-hover)}
.cardlink h3{margin:0 0 5px;color:var(--text);font-size:16.5px;letter-spacing:-.01em}
.cardlink p{margin:0;color:var(--dim);font-size:14px;line-height:1.5}
.crumbs{font-size:13.5px;color:var(--mute);margin:0 0 22px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.pagepad{padding:max(30px,env(safe-area-inset-top)) 0 70px}