/* ===========================================================================
   WorldFrame - shared site stylesheet.
   Design language mirrors the app: near-black canvas, Newsreader serif display,
   Inter UI, IBM Plex Mono labels, white primary controls, hairline borders,
   pill chips and big-number stats.
   =========================================================================== */
:root{
  --bg:#0A0A0A; --surface:#101010; --panel:#161616; --raised:#1E1E1E; --control:#252525;
  --border:#1e1e1e; --border2:#2c2c2c;
  --text:#F4F3F1; --soft:#C6C6C4; --muted:#8c8c8a; --subtle:#5d5d5b;
  --accent:#ffffff; --violet:#8b5cf6; --emerald:#34d399; --sky:#5eb3f6;
  --serif:'Newsreader',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:860px; --pad:24px; --r:8px; --r-lg:12px; --r-xl:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.serif{font-family:var(--serif);} .mono{font-family:var(--mono);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
img{max-width:100%;display:block;}
::selection{background:rgba(255,255,255,.15);}
hr.rule{height:1px;background:var(--border);border:0;margin:0;}

/* logo via favicon mask (recolorable) */
.brand-logo{display:inline-block;width:24px;height:24px;background:currentColor;vertical-align:middle;flex:none;
  -webkit-mask:url(favicon.svg) no-repeat center/contain;mask:url(favicon.svg) no-repeat center/contain;}

/* buttons - app-style white primary + ghost */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:var(--r);
  border:1px solid var(--border2);color:var(--text);background:transparent;cursor:pointer;transition:.18s ease;white-space:nowrap;}
.btn:hover{border-color:var(--muted);background:rgba(255,255,255,.05);}
.btn.primary{background:var(--accent);color:#0A0A0A;border-color:var(--accent);}
.btn.primary:hover{background:#e9e9e7;}

/* nav */
nav.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(1.3);background:rgba(10,10,10,.68);border-bottom:1px solid var(--border);}
nav.site .bar{display:flex;align-items:center;gap:12px;height:60px;}
nav.site .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--text);}
nav.site .links{margin-left:auto;display:flex;align-items:center;gap:24px;}
nav.site .links a{font-size:13px;color:var(--muted);transition:color .15s;}
nav.site .links a:hover,nav.site .links a[aria-current]{color:var(--text);}
@media(max-width:720px){nav.site .links a:not(.btn){display:none;}}

/* hero / lede */
header.lede{padding:88px 0 52px;}
header.lede .eyebrow{display:inline-flex;align-items:center;gap:11px;}
header.lede .eyebrow::before{content:"";width:22px;height:1px;background:var(--border2);}
header.lede h1{font-family:var(--serif);font-weight:500;letter-spacing:-.022em;line-height:1.04;font-size:clamp(34px,5.6vw,58px);margin:18px 0 0;}
header.lede h1 em{font-style:italic;color:var(--soft);}
header.lede .sub{margin-top:22px;font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;color:var(--soft);max-width:60ch;}
header.lede .ctas{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
header.lede .tldr{margin-top:32px;padding:3px 0 3px 20px;border-left:2px solid var(--border2);
  font-size:14.5px;line-height:1.6;color:var(--soft);max-width:58ch;}
header.lede .tldr b{color:var(--text);}

/* chips - app-style pill tags */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.chip{font-size:12px;color:var(--soft);background:var(--panel);border:1px solid var(--border2);border-radius:999px;padding:5px 12px;line-height:1.4;}
.chip.mono{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);}

/* stat band - app dashboard stats (big serif number + mono label, hairline dividers) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stat{padding:22px 24px;border-left:1px solid var(--border);}
.stat:first-child{border-left:0;padding-left:0;}
.stat .num{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.01em;color:var(--text);line-height:1;}
.stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
@media(max-width:640px){.stats{grid-template-columns:1fr;}.stat{border-left:0;border-top:1px solid var(--border);padding-left:0;}.stat:first-child{border-top:0;}}

/* screenshot frame (real app captures already carry window chrome, so no faux bar) */
figure.shot{margin:36px 0 0;border:1px solid var(--border2);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);}
figure.shot img{width:100%;height:auto;display:block;}
figure.shot figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--muted);padding:12px 16px;border-top:1px solid var(--border);}

/* article prose */
article{padding:60px 0 8px;}
article h2{font-family:var(--serif);font-weight:500;font-size:clamp(25px,3.2vw,34px);letter-spacing:-.015em;line-height:1.12;margin:60px 0 0;}
article h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:30px 0 0;}
article p{margin-top:17px;color:var(--soft);font-size:16.5px;max-width:66ch;}
article p.lead{font-size:19px;line-height:1.55;color:var(--text);max-width:64ch;}
article ul,article ol{margin:18px 0 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:9px;max-width:64ch;}
article li{color:var(--soft);font-size:16px;}
article li::marker{color:var(--subtle);}
article a.inline{color:var(--text);border-bottom:1px solid var(--border2);transition:border-color .15s;}
article a.inline:hover{border-color:var(--soft);}
article strong{color:var(--text);font-weight:600;}
article .note{color:var(--muted);font-size:13.5px;margin-top:10px;}

/* comparison table */
.cmp{margin-top:30px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);}
.cmp table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;}
.cmp thead th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--muted);background:#0d0d0d;}
.cmp thead th.us{color:var(--text);}
.cmp tbody td:first-child{color:var(--soft);}
.cmp td.us{background:rgba(255,255,255,.035);color:var(--text);font-weight:500;}
.cmp tr:last-child td{border-bottom:none;}
.cmp .y{color:var(--text);font-weight:700;} .cmp .n{color:var(--subtle);} .cmp .p{color:var(--muted);}

/* feature cards - clean panels, serif titles */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;}
@media(max-width:680px){.cards{grid-template-columns:1fr;}}
.card{border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px;background:var(--surface);transition:border-color .18s;}
.card:hover{border-color:var(--border2);}
.card b{display:block;font-family:var(--serif);font-size:18.5px;font-weight:500;margin-bottom:9px;color:var(--text);}
.card span{font-size:14.5px;color:var(--muted);line-height:1.55;}

/* verdict / highlight */
.verdict{margin-top:34px;border:1px solid var(--border);border-left:2px solid var(--soft);border-radius:var(--r-lg);padding:24px 26px;background:var(--surface);}
.verdict h3{margin-top:0;}
.verdict p{margin-top:10px;}

/* FAQ */
.faq{margin-top:44px;}
.faq details{border-top:1px solid var(--border);padding:18px 2px;}
.faq details:last-child{border-bottom:1px solid var(--border);}
.faq summary{cursor:pointer;font-size:16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;transition:color .15s;}
.faq summary:hover{color:#fff;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:20px;line-height:1;transition:transform .2s ease,color .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--soft);}
.faq p{margin-top:12px;color:var(--muted);font-size:15px;max-width:64ch;}

/* related links */
.related{margin-top:56px;}
.related h2{margin-bottom:4px;}
.related .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
@media(max-width:680px){.related .grid{grid-template-columns:1fr;}}
.related a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:var(--r);
  padding:15px 18px;font-size:14px;color:var(--soft);transition:.16s;}
.related a:hover{border-color:var(--border2);background:var(--surface);color:var(--text);}

/* CTA band */
.cta{margin:72px 0 0;text-align:center;border:1px solid var(--border);border-radius:var(--r-xl);padding:56px 28px;background:var(--surface);position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);}
.cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vw,38px);letter-spacing:-.02em;margin:0;}
.cta p{margin-top:14px;color:var(--soft);font-size:15.5px;max-width:52ch;margin-left:auto;margin-right:auto;}
.cta .ctas{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta .meta{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--subtle);}

/* footer */
footer.site{border-top:1px solid var(--border);padding:44px 0;margin-top:64px;}
footer.site .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
footer.site .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--text);}
footer.site .muted{color:var(--subtle);font-size:12px;}
footer.site .right{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;}
footer.site .right a{color:var(--muted);font-size:12.5px;transition:color .15s;}
footer.site .right a:hover{color:var(--text);}

@media(max-width:600px){:root{--pad:18px;} header.lede{padding:60px 0 40px;} article{padding:40px 0 8px;} .cta{padding:40px 20px;}}