/* Shared styles for Chronoscape sub-pages (comparisons, legal).
   The homepage keeps its own inline styles — it has the generative sky canvas
   and a lot of layout that nothing else needs. This file is the plain-document
   half of the site: headings, prose, comparison tables, FAQ lists, CTA. */

:root {
  --ground:#0A1220; --surface:#14202F; --card:#1A283A; --card-2:#1F3044;
  --text:#F2ECE1; --text-2:#A8B5C6; --text-3:#64748B;
  --accent:#E8A84C; --hair:rgba(255,255,255,0.10);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,ui-serif,serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --ground:#E7EFF7; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#F1F6FB;
    --text:#16202C; --text-2:#4A5A6B; --text-3:#8494A5;
    --accent:#C8862E; --hair:rgba(20,34,54,0.12); color-scheme:light;
  }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);background:var(--ground);color:var(--text);line-height:1.68;
  -webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.wrap{width:min(760px,100% - 48px);margin-inline:auto;}

header{border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(12px);}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text);letter-spacing:-.01em;}
.brand:hover{text-decoration:none;}
.nav-links{display:flex;gap:22px;font-size:14px;}
.nav-links a{color:var(--text-2);}

main{padding:56px 0 24px;}
.crumbs{font-size:13.5px;color:var(--text-3);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap;}
.crumbs a{color:var(--text-2);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:14px;}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5.4vw,40px);letter-spacing:-.02em;line-height:1.16;}
h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:40px 0 12px;letter-spacing:-.01em;}
h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:26px 0 8px;}
.updated{color:var(--text-3);font-size:13.5px;font-family:var(--mono);margin:12px 0 26px;}
p,li,dd{color:var(--text-2);font-size:16.5px;}
p{margin-bottom:14px;}
.lede{font-size:18px;}
ul{margin:0 0 14px 20px;}
li{margin-bottom:9px;}
strong{color:var(--text);font-weight:600;}
em{font-style:italic;}
.fine{color:var(--text-3);font-size:14.5px;margin-top:34px;}

/* Wide tables must scroll inside their own box, never the page. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;
  border:1px solid var(--hair);border-radius:14px;}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px;}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hair);vertical-align:top;}
thead th{background:var(--card-2);color:var(--text);font-weight:600;font-size:14px;
  letter-spacing:.02em;white-space:nowrap;}
tbody th{font-weight:500;color:var(--text-2);white-space:nowrap;}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none;}
td{color:var(--text-2);}
.yes{color:var(--accent);font-weight:600;}

.note{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:20px 22px;margin:24px 0;}
.note p:last-child{margin-bottom:0;}

.cta{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:26px;margin:34px 0 8px;}
.cta h2{margin-top:0;}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#17130A;
  font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;margin-top:6px;}
.btn:hover{text-decoration:none;opacity:.92;}

.faq dt{font-family:var(--serif);font-size:18px;color:var(--text);margin:22px 0 6px;}
.faq dd{margin:0;font-size:16px;}

footer{border-top:1px solid var(--hair);margin-top:52px;padding:28px 0 44px;
  color:var(--text-3);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
footer a{color:var(--text-3);}

@media (max-width:600px){
  main{padding:40px 0 16px;}
  h2{font-size:21px;}
  .nav-links{gap:16px;font-size:13.5px;}
}