@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* dark theme (default) */
  --bg:#05050a;
  --bg-soft:rgba(255,255,255,0.035);
  --border:rgba(255,255,255,0.08);
  --border-soft:rgba(255,255,255,0.06);
  --hairline:rgba(255,255,255,0.1);
  --hairline-strong:rgba(255,255,255,0.12);
  --overlay-soft:rgba(255,255,255,0.06);
  --overlay-border:rgba(255,255,255,0.12);
  --input-bg:rgba(255,255,255,0.08);
  --input-border:rgba(255,255,255,0.16);
  --row-hover:rgba(255,255,255,0.02);
  --table-bg:rgba(255,255,255,0.025);

  --text:#e8e8f2;
  --text-dim:#a19fbb;
  --text-faint:#7d7b98;
  --text-faint2:#6b6890;
  --text-strong:#ffffff;

  --violet:#7c5cff;
  --violet-soft:rgba(124,92,255,0.16);
  --violet-border:rgba(124,92,255,0.35);
  --violet-text:#c4bfff;

  --green:#00ff9d;
  --green-soft:rgba(0,255,157,0.08);
  --green-text:#8fe3b0;
  --green-badge-text:#b8ffe0;
  --green-badge-border:rgba(0,255,157,0.22);

  --amber:#ffb84d;
  --amber-soft:rgba(255,184,77,0.14);

  --contrast-bg:#ffffff;
  --contrast-text:#05050a;
  --btn-primary-text:#ffffff;

  --glow1:rgba(124,92,255,0.16);
  --glow2:rgba(0,255,157,0.07);
  --glow3:rgba(255,184,77,0.05);
  --dot-color:rgba(255,255,255,0.035);
  --glass-blur:16px;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
}

:root[data-theme="light"]{
  /* muted lavender-grey canvas, not stark white — cards float as frosted glass above it */
  --bg:#eeecf6;
  --bg-soft:rgba(255,255,255,0.62);
  --border:rgba(29,23,64,0.11);
  --border-soft:rgba(29,23,64,0.08);
  --hairline:rgba(29,23,64,0.13);
  --hairline-strong:rgba(29,23,64,0.18);
  --overlay-soft:rgba(255,255,255,0.55);
  --overlay-border:rgba(29,23,64,0.15);
  --input-bg:rgba(255,255,255,0.65);
  --input-border:rgba(29,23,64,0.18);
  --row-hover:rgba(255,255,255,0.55);
  --table-bg:rgba(255,255,255,0.5);
  --glass-blur:14px;

  --text:#161328;
  --text-dim:#54506d;
  --text-faint:#6f6c89;
  --text-faint2:#84819d;
  --text-strong:#000000;

  --violet:#6d4fe0;
  --violet-soft:rgba(109,79,224,0.12);
  --violet-border:rgba(109,79,224,0.4);
  --violet-text:#5a3fd0;

  --green:#00996b;
  --green-soft:rgba(0,153,107,0.11);
  --green-text:#0a8a5f;
  --green-badge-text:#067a52;
  --green-badge-border:rgba(0,153,107,0.3);

  --amber:#a8650a;
  --amber-soft:rgba(168,101,10,0.13);

  --contrast-bg:#161328;
  --contrast-text:#ffffff;
  --btn-primary-text:#ffffff;

  --glow1:rgba(109,79,224,0.20);
  --glow2:rgba(0,153,107,0.14);
  --glow3:rgba(255,184,77,0.14);
  --dot-color:rgba(29,23,64,0.05);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .2s ease, color .2s ease;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

.bg-glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--dot-color) 1px,transparent 1px);
  background-size:28px 28px;
}
.bg-glow .g1{
  position:absolute;top:-320px;left:8%;width:900px;height:700px;
  background:radial-gradient(ellipse,var(--glow1),transparent 70%);
}
.bg-glow .g2{
  position:absolute;top:-100px;right:4%;width:700px;height:600px;
  background:radial-gradient(ellipse,var(--glow2),transparent 70%);
}
.bg-glow .g3{
  position:absolute;top:900px;left:38%;width:640px;height:560px;
  background:radial-gradient(ellipse,var(--glow3),transparent 70%);
}

.wrap{max-width:1320px;margin:0 auto;padding-left:24px;padding-right:24px;position:relative;z-index:1;}
@media (max-width:760px){.wrap{padding-left:18px;padding-right:18px;}}

/* nav */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid var(--border-soft);
  position:relative;z-index:2;
}
.nav .brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;}
.nav .brand .mark{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none;display:block;}
.nav .links{display:flex;gap:28px;font-size:13.5px;color:var(--text-dim);font-weight:500;}
.nav .links a:hover{color:var(--text-strong);}
.nav .links a.active{color:var(--text-strong);}
.nav .actions{display:flex;align-items:center;gap:14px;}
.nav .actions .login{font-size:13.5px;color:var(--text-dim);}
.nav .btn-solid{background:var(--contrast-bg);color:var(--contrast-text);font-size:13px;font-weight:700;padding:10px 18px;border-radius:8px;white-space:nowrap;}
.theme-toggle{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;
  background:var(--overlay-soft);border:1px solid var(--overlay-border);color:var(--text);cursor:pointer;flex:none;
}
.theme-toggle svg{width:16px;height:16px;}
.theme-toggle .sun{display:none;}
:root[data-theme="light"] .theme-toggle .moon{display:none;}
:root[data-theme="light"] .theme-toggle .sun{display:block;}
.nav-toggle{display:none;background:none;border:none;color:var(--text);padding:6px;cursor:pointer;}

.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown > a, .nav-dropdown > button{display:flex;align-items:center;gap:4px;}
/* Invisible hit-area bridging the visual gap between the trigger and the
   menu below it. Lives on .nav-dropdown itself (not inside .nav-dropdown-menu,
   which clips it — setting only overflow-y also computes overflow-x as
   "auto" per spec, so anything positioned outside the menu's own box, like
   a bridge placed there, gets clipped). Without this, moving the mouse
   straight down from the link to the menu crosses a strip of nothing,
   breaks :hover on .nav-dropdown, and the menu closes before the cursor
   arrives. */
.nav-dropdown::before{content:"";position:absolute;top:100%;left:0;right:0;height:12px;}
.caret{opacity:0.6;flex:none;transition:transform 0.15s ease;}
.nav-dropdown:hover .caret, .nav-dropdown:focus-within .caret{transform:rotate(180deg);}
.nav-lang-toggle{
  background:none;border:none;color:var(--text-dim);cursor:pointer;padding:0;
  font:inherit;font-size:13.5px;font-weight:500;font-family:var(--mono);letter-spacing:0.3px;
}
.nav-lang-toggle:hover{color:var(--text-strong);}
.nav-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 12px);left:0;min-width:230px;max-height:360px;overflow-y:auto;
  background:var(--table-bg);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:20;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 12px 32px rgba(0,0,0,0.28);
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{display:block;}
.lang-dropdown .nav-dropdown-menu{left:auto;right:0;min-width:170px;}
.nav-dropdown-menu a{display:block;padding:8px 10px;border-radius:7px;font-size:13px;color:var(--text-dim);white-space:nowrap;}
.nav-dropdown-menu a:hover{background:var(--row-hover);color:var(--text-strong);}
.nav-dropdown-menu a.active{color:var(--violet-text);font-weight:600;background:var(--violet-soft);}

@media (max-width:900px){
  .nav-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--overlay-soft);border:1px solid var(--overlay-border);flex:none;}
  .nav-toggle svg{width:18px;height:18px;}
  .nav .actions .login{display:none;}
  .nav .actions .btn-solid{display:none;}
  .nav .links{
    display:none;flex-direction:column;align-items:flex-start;gap:2px;
    position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 70px);overflow-y:auto;
    padding:14px 18px 18px;
    background:var(--bg);border-bottom:1px solid var(--border);z-index:15;
    box-shadow:0 16px 32px rgba(0,0,0,0.5);
  }
  .nav .links.mobile-open{display:flex;}
  .nav .links a{padding:9px 0;width:100%;}
  .nav-dropdown{flex-direction:column;align-items:flex-start;width:100%;}
  .nav-dropdown::before{display:none;} /* hover-bridge is irrelevant to the tap-driven mobile menu, and would otherwise sit over the next link */
  .nav-dropdown-menu{
    display:block;position:static;box-shadow:none;border:none;background:none;backdrop-filter:none;
    padding:0 0 4px 14px;width:100%;
  }
  .nav-dropdown-menu a{padding:6px 0;font-size:12.5px;}
}
@media (min-width:901px){.nav-toggle{display:none;}}

.sponsor-bar{display:flex;align-items:center;gap:18px;margin-top:36px;padding:16px 0 4px;flex-wrap:wrap;}
.sponsor-bar-label{font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;}
.sponsor-slots{display:flex;gap:12px;flex-wrap:wrap;flex:1;}
.sponsor-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:52px;padding:0 16px;border-radius:9px;
  font-size:13px;font-weight:600;white-space:nowrap;flex:1;min-width:130px;text-align:center;
}
.sponsor-slot.filled{background:var(--overlay-soft);border:1px solid var(--overlay-border);color:var(--text-strong);}
.sponsor-slot.open{border:1px dashed var(--border);color:var(--text-faint2);}
.sponsor-slot.open .price{font-size:10.5px;font-weight:500;color:var(--text-faint);font-family:var(--mono);}
.sponsor-slot.open:hover{border-color:var(--violet-text);color:var(--violet-text);}
@media (max-width:640px){.sponsor-bar{flex-direction:column;align-items:flex-start;}.sponsor-slot{min-width:100%;}}

/* hero */
.hero{padding:56px 0 8px;position:relative;z-index:1;}
.hero-grid{display:flex;gap:40px;align-items:center;}
.hero-copy{flex:1;min-width:0;}
.badge{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--green-badge-text);
  background:var(--green-soft);border:1px solid var(--green-badge-border);
  padding:6px 14px;border-radius:100px;margin-bottom:20px;
}
.badge .dot{width:6px;height:6px;background:var(--green);border-radius:50%;flex:none;}
.eyebrow{font-size:11.5px;letter-spacing:1px;color:var(--text-faint);font-weight:600;margin-bottom:10px;}
h1{font-size:50px;line-height:1.1;font-weight:800;letter-spacing:-1.5px;margin:0 0 20px;max-width:660px;}
.hero-copy p.lede{font-size:16.5px;line-height:1.6;color:var(--text-dim);max-width:540px;margin:0 0 28px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{
  background:linear-gradient(135deg,var(--violet),#a06bff);color:var(--btn-primary-text);font-size:14.5px;font-weight:700;
  padding:14px 26px;border-radius:var(--radius-sm);box-shadow:0 0 34px rgba(124,92,255,0.35);
  border:none;cursor:pointer;
}
.btn-secondary{
  background:var(--overlay-soft);border:1px solid var(--overlay-border);color:var(--text);
  font-size:14.5px;font-weight:600;padding:14px 26px;border-radius:var(--radius-sm);
}

.index-card{
  width:380px;flex:none;padding:26px;border-radius:16px;background:var(--bg-soft);border:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
@media (max-width:900px){.index-card{width:100%;}}
.index-card .label{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);letter-spacing:0.6px;margin-bottom:10px;}
.index-card .value-row{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.index-card .value{font-family:var(--mono);font-size:38px;font-weight:700;letter-spacing:-1px;}
.index-card .sub{font-size:11.5px;color:var(--text-faint2);margin-top:8px;}

@media (max-width:900px){
  .hero-grid{flex-direction:column;}
  h1{font-size:38px;letter-spacing:-1px;}
}

/* stat row */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0 48px;}
@media (max-width:900px){.stat-row{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.stat-row{grid-template-columns:1fr;}}
.stat-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:14px;padding:20px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));}
.stat-card .k{font-size:12px;color:var(--text-faint);margin-bottom:8px;}
.stat-card .v{font-family:var(--mono);font-size:20px;font-weight:700;}
.stat-card .d{font-size:12px;margin-top:6px;}
.stat-card .d.green{color:var(--green-text);}
.stat-card .d.amber{color:var(--amber);}
.stat-card .d.dim{color:var(--text-faint);}

/* price distribution illustration */
.dist-card{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:24px 26px 8px;margin:0 0 48px;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
.dist-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;flex-wrap:wrap;gap:8px;}
.dist-head .t{font-size:14px;font-weight:700;}
.dist-head .s{font-size:12px;color:var(--text-faint);}
.dist-row{display:grid;grid-template-columns:150px 1fr 64px;align-items:center;gap:12px;padding:5px 0;}
.dist-row .name{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dist-row .track{height:8px;border-radius:4px;background:var(--border-soft);position:relative;overflow:hidden;}
.dist-row .fill{height:100%;border-radius:4px;}
.dist-row .fill.flagship{background:var(--amber);}
.dist-row .fill.balanced{background:var(--violet);}
.dist-row .fill.budget{background:var(--green);}
.dist-row .price{font-family:var(--mono);font-size:12px;text-align:right;color:var(--text-dim);}
.dist-legend{display:flex;gap:18px;padding:14px 0 16px;font-size:11.5px;color:var(--text-faint);}
.dist-legend span{display:inline-flex;align-items:center;gap:6px;}
.dist-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}
.dist-legend i.flagship{background:var(--amber);}
.dist-legend i.balanced{background:var(--violet);}
.dist-legend i.budget{background:var(--green);}
@media (max-width:640px){
  .dist-row{grid-template-columns:96px 1fr 54px;}
  .dist-row .name{font-size:11px;}
}

/* section heading */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:16px;flex-wrap:wrap;}
h2{font-size:24px;font-weight:700;letter-spacing:-0.4px;margin:0;}
.section-note{font-size:12.5px;color:var(--text-faint);}
section{padding-bottom:64px;position:relative;z-index:1;}

/* table */
.table-card{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--table-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));}
.table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap;gap:10px;}
.table-toolbar .count{font-size:14px;color:var(--text-dim);}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.filter-btn{
  font-size:12px;color:var(--text-faint);padding:6px 14px;border-radius:100px;border:1px solid transparent;
  background:none;cursor:pointer;font-family:var(--sans);
}
.filter-btn.active{background:var(--violet-soft);color:var(--violet-text);font-weight:600;}

.price-table{width:100%;border-collapse:collapse;}
.price-table thead th{
  text-align:left;padding:13px 22px;font-size:11px;color:var(--text-faint);font-weight:600;letter-spacing:0.4px;
  border-bottom:1px solid var(--border-soft);white-space:nowrap;
}
.price-table thead th.num, .price-table td.num{text-align:right;}
.price-table tbody td{padding:16px 22px;font-size:14.5px;border-top:1px solid var(--border-soft);vertical-align:middle;}
.price-table tbody tr:hover{background:var(--row-hover);}
.model-name{font-weight:600;}
.model-provider{color:var(--text-dim);font-size:13.5px;}
.tag{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:0.4px;padding:3px 8px;border-radius:5px;
  text-transform:uppercase;
}
.tag.flagship{background:var(--amber-soft);color:var(--amber);}
.tag.balanced{background:var(--violet-soft);color:var(--violet-text);}
.tag.budget{background:var(--green-soft);color:var(--green-text);}

/* free-tier level badges (/free-tier/ page) — distinct from the model-tier
   tags above even though they share the .tag base, since "yes/trial/no"
   is a different axis of meaning from "flagship/balanced/budget". */
.tag.yes{background:var(--green-soft);color:var(--green-text);}
.tag.trial{background:var(--amber-soft);color:var(--amber);}
.tag.no{background:var(--bg-soft);color:var(--text-faint);border:1px solid var(--border);}
.model-note{font-size:12px;color:var(--text-faint2);margin-top:3px;max-width:340px;}
.src-link{font-size:11.5px;color:var(--text-faint2);}
.src-link:hover{color:var(--text-dim);text-decoration:underline;}

@media (max-width:900px){
  .table-card{overflow-x:auto;}
  .price-table{min-width:760px;}
}
@media (max-width:640px){
  .table-card{overflow-x:visible;}
  /* The fixed-width/hidden-column treatment below assumes the homepage's
     specific 7-column layout (Model, Provider, Input, Output, Context,
     Tier, Source). /cheapest/ (6 cols, no Tier/Source) and /free-tier/
     (4 unrelated cols) get real, not decorative, columns hidden or
     squeezed to near-zero width if this applies to them too — so it's
     scoped to the plain .price-table only; .price-table--wide (both new
     tables) instead keeps a scrollable min-width, same as the 641-900px
     tier just above. */
  .price-table:not(.price-table--wide){min-width:0;width:100%;table-layout:fixed;}
  .price-table:not(.price-table--wide) th:nth-child(5), .price-table:not(.price-table--wide) td:nth-child(5),
  .price-table:not(.price-table--wide) th:nth-child(6), .price-table:not(.price-table--wide) td:nth-child(6),
  .price-table:not(.price-table--wide) th:nth-child(7), .price-table:not(.price-table--wide) td:nth-child(7){display:none;}
  .price-table:not(.price-table--wide) th:nth-child(1), .price-table:not(.price-table--wide) td:nth-child(1){width:39%;}
  .price-table:not(.price-table--wide) th:nth-child(2), .price-table:not(.price-table--wide) td:nth-child(2){width:23%;}
  .price-table:not(.price-table--wide) th:nth-child(3), .price-table:not(.price-table--wide) td:nth-child(3),
  .price-table:not(.price-table--wide) th:nth-child(4), .price-table:not(.price-table--wide) td:nth-child(4){width:19%;}
  .price-table.price-table--wide{min-width:600px;}
  .price-table thead th, .price-table tbody td{padding:12px 8px;word-break:break-word;}
  .price-table td.num{padding-left:2px;padding-right:8px;font-size:13.5px;white-space:nowrap;}
  .price-table th.num{padding-left:2px;padding-right:8px;}
  .model-note{max-width:none;}
}

/* stat highlight cards (cheapest/priciest/spread) */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:900px){.compare-grid{grid-template-columns:1fr;}}
.compare-card{border-radius:16px;border:1px solid var(--border);background:var(--bg-soft);padding:26px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));}
.compare-card.highlight{border-color:var(--violet-border);background:var(--violet-soft);}
.compare-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:0.5px;margin-bottom:12px;}
.compare-eyebrow.green{color:var(--green-text);}
.compare-eyebrow.violet{color:var(--violet-text);}
.compare-eyebrow.amber{color:var(--amber);}
.compare-model{font-size:20px;font-weight:700;margin-bottom:8px;}
.compare-desc{font-size:14px;color:var(--text-dim);line-height:1.6;}

/* methodology */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:900px){.method-grid{grid-template-columns:1fr;}}
.method-card{padding:24px 0;border-top:2px solid var(--hairline-strong);}
.method-num{font-family:var(--mono);font-size:13px;color:var(--text-faint);margin-bottom:10px;}
.method-title{font-size:16px;font-weight:700;margin-bottom:8px;}
.method-desc{font-size:14px;color:var(--text-dim);line-height:1.6;}

/* faq */
.faq{max-width:900px;border-top:1px solid var(--hairline);}
.faq-item{border-bottom:1px solid var(--hairline);}
.faq-q{
  padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  cursor:pointer;background:none;border:none;width:100%;text-align:left;color:var(--text);font-family:var(--sans);
}
.faq-q .q-text{font-size:15.5px;font-weight:600;}
.faq-q .icon{color:var(--text-faint);font-size:18px;flex:none;transition:transform .2s;}
.faq-item.open .icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{font-size:14px;color:var(--text-dim);line-height:1.65;max-width:760px;margin:0 0 20px;}

/* cta banner */
.cta-banner{
  border-radius:20px;padding:40px 44px;background:linear-gradient(135deg,var(--violet-soft),var(--green-soft));
  border:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-banner .cta-title{font-size:21px;font-weight:700;margin-bottom:6px;}
.cta-banner .cta-sub{font-size:14px;color:var(--text-dim);}
.cta-form{display:flex;gap:10px;flex-wrap:wrap;}
.cta-form input{
  background:var(--input-bg);border:1px solid var(--input-border);border-radius:9px;padding:14px 18px;
  font-size:14px;color:var(--text);width:230px;font-family:var(--sans);
}
.cta-form input::placeholder{color:var(--text-faint);}
.cta-form button{
  background:var(--contrast-bg);color:var(--contrast-text);font-size:14px;font-weight:700;padding:14px 22px;border-radius:9px;border:none;cursor:pointer;
}

/* footer */
footer{border-top:1px solid var(--border-soft);padding:44px 0 0;position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:32px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.footer-brand .mark{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:none;display:block;}
.footer-brand span{font-size:15px;font-weight:700;}
.footer-desc{font-size:13px;color:var(--text-faint);line-height:1.6;max-width:260px;}
.footer-col-title{font-size:12px;color:var(--text-faint);font-weight:700;margin-bottom:14px;letter-spacing:0.4px;}
.footer-links{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--text-dim);}
.footer-links a:hover{color:var(--text-strong);}
.footer-bottom{padding:20px 0 36px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--text-faint2);}

.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px;z-index:100;}
.skip-link:focus{left:12px;top:12px;}

::selection{background:var(--violet);color:#fff;}

/* breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--text-faint);padding:22px 0 0;}
.breadcrumb a{color:var(--text-faint);}
.breadcrumb a:hover{color:var(--text-dim);text-decoration:underline;}
.breadcrumb .sep{color:var(--text-faint2);}
.breadcrumb .current{color:var(--text-dim);}

/* internal page head (non-homepage) */
.page-head{padding:22px 0 40px;position:relative;z-index:1;}
.page-head .eyebrow{font-size:11.5px;letter-spacing:1px;color:var(--text-faint);font-weight:600;margin-bottom:12px;}
.page-head h1{font-size:36px;line-height:1.15;letter-spacing:-1px;margin:0 0 14px;max-width:760px;}
.page-head .lede{font-size:15.5px;line-height:1.6;color:var(--text-dim);max-width:620px;margin:0;}
@media (max-width:640px){.page-head h1{font-size:28px;}}

/* index/listing grids (models, providers) */
.index-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 0 18px;flex-wrap:wrap;gap:10px;}
.index-toolbar .count{font-size:13.5px;color:var(--text-dim);}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:56px;}
.entity-card{
  display:block;border-radius:14px;border:1px solid var(--border);background:var(--bg-soft);padding:20px;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));transition:border-color .15s ease;
}
.entity-card:hover{border-color:var(--violet-border);}
.entity-card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;}
.entity-card .name{font-size:16px;font-weight:700;}
.entity-card .sub{font-size:12.5px;color:var(--text-faint);margin-top:3px;}
.entity-card .prices{display:flex;gap:18px;margin-top:2px;}
.entity-card .prices .p-k{font-size:10.5px;color:var(--text-faint);letter-spacing:0.3px;margin-bottom:3px;}
.entity-card .prices .p-v{font-family:var(--mono);font-size:15px;font-weight:600;}
.entity-card .meta-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--text-faint2);}

/* model / provider detail pages */
.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;margin-bottom:56px;}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr;}}
.detail-main .provider-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);background:var(--overlay-soft);border:1px solid var(--overlay-border);padding:6px 12px;border-radius:100px;margin-bottom:16px;}
.detail-main .detail-note{font-size:14.5px;line-height:1.65;color:var(--text-dim);max-width:640px;margin:18px 0 0;}
.spec-card{border-radius:16px;border:1px solid var(--border);background:var(--bg-soft);padding:22px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));}
.spec-row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border-soft);gap:12px;}
.spec-row:last-child{border-bottom:none;}
.spec-row .k{font-size:12.5px;color:var(--text-faint);}
.spec-row .v{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;}
.detail-cta{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.detail-cta a{font-size:12.5px;color:var(--violet-text);text-align:center;padding:10px;border-radius:9px;background:var(--violet-soft);border:1px solid var(--violet-border);}
.detail-cta a:hover{filter:brightness(1.1);}

.rank-note{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-dim);background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:24px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));}
.rank-note b{color:var(--text-strong);}

/* prose (about, methodology full page) */
.prose{max-width:720px;font-size:15.5px;line-height:1.75;color:var(--text-dim);}
.prose h2{font-size:20px;color:var(--text);margin:36px 0 12px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 16px;}
.prose ul{margin:0 0 16px;padding-left:20px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--text);}

/* founder photo (about page) */
.founder-card{display:flex;align-items:flex-start;gap:20px;margin-bottom:16px;}
.founder-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border);}
.founder-card .prose{margin:0;}
.founder-card .prose p{margin:0;}
@media (max-width:520px){.founder-card{flex-direction:column;align-items:flex-start;gap:14px;}}

/* changelog */
.changelog-list{max-width:760px;border-left:2px solid var(--hairline);}
.changelog-entry{position:relative;padding:0 0 32px 26px;}
.changelog-entry::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft);}
.changelog-date{font-family:var(--mono);font-size:12.5px;color:var(--text-faint);margin-bottom:6px;}
.changelog-title{font-size:15.5px;font-weight:700;margin-bottom:6px;}
.changelog-desc{font-size:14px;color:var(--text-dim);line-height:1.6;max-width:600px;}