/* Elevation reads in opposite directions per theme. In dark, a raised surface
   gets LIGHTER than the page. In light, the page is tinted and raised surfaces
   go pure WHITE plus a real shadow. Naively inverting a dark palette is what
   flattens a light theme, so --bg / --surface / --surface-2 are defined as
   roles here and every component picks a role, never a literal. */
:root{
  --bg:#f2f4f7; --surface:#ffffff; --surface-2:#e8ecf2;
  --ink:#0d1523; --ink-2:#414d5f; --muted:#586471;
  --line:#d9dee6; --line-strong:#b9c2ce;
  --accent:#1550c0; --accent-ink:#ffffff; --accent-soft:#e6eefc;
  --ok:#136c44; --ok-soft:#e2f2ea;
  --warn:#8f5100; --warn-soft:#fcedd6;
  --bad:#a71d16; --bad-soft:#fce8e6;
  --shadow:0 1px 2px rgba(13,21,35,.07), 0 3px 8px rgba(13,21,35,.07);
  --radius:6px;
  /* tells the engine which palette this document is in, so scrollbars, form
     controls and the canvas the browser paints before our CSS lands all match */
  color-scheme:light;
  --sans:Roboto,"Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  /* NOT a code font. ui-monospace resolves to Cascadia on Windows, which reads
     like a text editor, and numbers are most of what is on this page. Roboto and
     Segoe UI both ship true tabular figures, so columns still line up. */
  --mono:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1319; --surface:#171d27; --surface-2:#222a37;
    --ink:#e8ecf2; --ink-2:#bcc5d1; --muted:#8e99a8;
    --line:#2a323e; --line-strong:#3d4757;
    --accent:#6a9df2; --accent-ink:#0d1219; --accent-soft:#1b2637;
    --ok:#5fc493; --ok-soft:#16281f;
    --warn:#e0a54e; --warn-soft:#2c2317;
    --bad:#ef7c74; --bad-soft:#2e1a19;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1319; --surface:#171d27; --surface-2:#222a37;
  --ink:#e8ecf2; --ink-2:#bcc5d1; --muted:#8e99a8;
  --line:#2a323e; --line-strong:#3d4757;
  --accent:#6a9df2; --accent-ink:#0d1219; --accent-soft:#1b2637;
  --ok:#5fc493; --ok-soft:#16281f;
  --warn:#e0a54e; --warn-soft:#2c2317;
  --bad:#ef7c74; --bad-soft:#2e1a19;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.011em}
h1{font-size:clamp(24px,3.2vw,32px); line-height:1.2; font-weight:700}
h2{font-size:19px; font-weight:700}
h3{font-size:15px; font-weight:600}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

/* header */
.site-head{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:24px; height:56px}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); font-size:16px}
.brand:hover{text-decoration:none}
.brand .mark{
  width:22px; height:22px; border-radius:4px; background:var(--accent);
  color:var(--accent-ink); font-size:13px; font-weight:700;
  display:grid; place-items:center; font-family:var(--mono);
}
.site-nav{display:flex; gap:20px; margin-left:8px}
.site-nav a{color:var(--ink-2); font-size:14px}
.head-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.head-right a{font-size:14px; color:var(--ink-2)}
.icon-btn{
  display:grid; place-items:center; width:30px; height:30px; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink-2);
}
.icon-btn:hover{background:var(--surface-2); color:var(--ink)}
/* proof strip, every number here is measured, not decorative */
.proof{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  padding:12px 14px; margin-top:22px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.proof-item{display:flex; align-items:baseline; gap:7px; font-size:13.5px; color:var(--muted)}
.proof-item b{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:700; color:var(--ink);
}
.proof-note{margin-left:auto; font-size:12.5px; color:var(--muted)}
@media (max-width:760px){ .site-nav{display:none} }

/* buttons */
.btn{
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:var(--radius); display:inline-flex;
  align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{filter:brightness(1.07); background:var(--accent)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-link{border:0; background:none; color:var(--accent); padding:0; font-size:14px; cursor:pointer}
.btn-link:hover{text-decoration:underline; background:none}

/* tool */
.tool{padding:36px 0 8px}
.tool-intro{max-width:620px; display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.tool-intro p{color:var(--muted); font-size:15.5px}

.drop{
  border:2px dashed var(--line-strong); border-radius:8px; background:var(--surface);
  padding:34px 24px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:6px; transition:border-color .12s, background .12s;
}
.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop.working{border-style:solid; border-color:var(--accent); background:var(--accent-soft)}
.drop.working .drop-title{color:var(--accent)}
.drop-title{font-size:17px; font-weight:600}
.drop-sub{color:var(--muted); font-size:14px}
.drop .btn{margin-top:10px}
.drop-formats{
  margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--muted);
  letter-spacing:.02em;
}
.under-drop{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
  padding:10px 2px 0; font-size:13.5px; color:var(--muted);
}
.under-drop .dot{color:var(--line-strong)}
.privacy{display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-weight:500}

/* file tabs */
.files{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.file-tab{
  display:flex; align-items:center; gap:8px; font-size:13.5px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  padding:6px 10px; border-radius:var(--radius); cursor:pointer; font-family:inherit;
  max-width:280px;
}
.file-tab .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-tab[aria-selected="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.file-tab.bad{border-color:var(--bad); color:var(--bad)}

/* results */
.results{margin:28px 0 12px; display:none; flex-direction:column; gap:18px; scroll-margin-top:72px}
.results.on{display:flex}
.bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
}
.bar .lbl{font-size:13px; color:var(--muted); margin-right:2px}
.bar .spacer{flex:1 1 auto}
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:3px 9px; border-radius:100px; border:1px solid transparent;
}
.pill.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}
.pill.neutral{background:var(--surface-2); color:var(--ink-2); border-color:var(--line-strong)}

.card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
.card > h2, .card > .card-head{
  padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--radius) var(--radius) 0 0; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.card-body{padding:14px}

.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 20px}
.field{display:flex; flex-direction:column; gap:2px; min-width:0}
.field .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
.field .v{font-size:15px; overflow-wrap:anywhere}
.field .v.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.field .v.big{font-size:19px; font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums}

.parties{display:grid; grid-template-columns:1fr 1fr; gap:0}
.parties > div{padding:14px}
.parties > div + div{border-left:1px solid var(--line)}
.party-name{font-weight:600; margin-bottom:2px}
.party-line{color:var(--ink-2); font-size:14px}
.party-id{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); margin-top:6px}
@media (max-width:640px){
  .parties{grid-template-columns:1fr}
  .parties > div + div{border-left:0; border-top:1px solid var(--line)}
}

.table-scroll{
  overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
}
table{border-collapse:collapse; width:100%; font-size:14px; color:var(--ink); background:var(--surface)}
th,td{
  padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;
  color:var(--ink);
}
thead th{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:600; background:var(--surface-2); white-space:nowrap; position:sticky; top:0;
}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.idx{color:var(--muted); font-family:var(--mono); font-variant-numeric:tabular-nums; width:1%}
/* static field map: first column is a group label, keep it bold and full-ink */
section.block tbody td:first-child{font-weight:600; color:var(--ink); white-space:nowrap}
tbody tr:hover td{background:var(--surface-2)}
tfoot td{font-weight:600; border-top:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}

.totals{display:grid; grid-template-columns:1fr auto; gap:6px 24px; max-width:420px; margin-left:auto}
.totals .k{color:var(--ink-2); font-size:14px}
.totals .v{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; font-size:14px}
.totals .grand{font-weight:700; font-size:17px; padding-top:6px; border-top:1px solid var(--line-strong)}
.totals .grand.k{font-weight:700; font-size:15px}

.note{font-size:13.5px; color:var(--muted)}
.err-link{margin-left:6px; color:inherit; text-decoration:underline; font-weight:600}
.fb{display:flex; flex-direction:column; gap:10px; max-width:640px}
.fb-label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
.fb-text,.fb-input{
  font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:9px 11px; width:100%;
}
.fb-text{resize:vertical; min-height:92px; line-height:1.5}
.fb-text::placeholder,.fb-input::placeholder{color:var(--muted)}
.fb-text:focus,.fb-input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.fb-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.fb-field{display:flex; flex-direction:column; gap:5px; flex:1 1 260px}
.fb-note{font-size:12.5px; color:var(--muted); max-width:60ch}
.fb-done{
  border:1px solid var(--ok); background:var(--ok-soft); color:var(--ok);
  padding:12px 14px; border-radius:var(--radius); font-size:14px; font-weight:500;
}
.err{
  border:1px solid var(--bad); background:var(--bad-soft); color:var(--bad);
  padding:12px 14px; border-radius:var(--radius); font-size:14px;
}

/* static content */
section.block{padding:40px 0; border-top:1px solid var(--line); scroll-margin-top:56px}
section.block h2{margin-bottom:6px}
section.block > .wrap > p.lead{color:var(--muted); margin-bottom:22px; max-width:620px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.step{display:flex; flex-direction:column; gap:5px}
.step .n{
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent);
  letter-spacing:.08em;
}
.step p{color:var(--ink-2); font-size:14px}
.fmt-list{display:flex; flex-wrap:wrap; gap:8px}
.fmt{
  font-family:var(--mono); font-size:12.5px; padding:5px 10px; border-radius:100px;
  border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface);
}
.faq{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  padding:13px 0; cursor:pointer; font-weight:600; font-size:15px;
  list-style:none; display:flex; align-items:center; gap:10px;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; font-family:var(--mono); color:var(--accent); font-weight:700}
details[open] summary::before{content:"\2212"}
details p{padding:0 0 14px 22px; color:var(--ink-2); font-size:14px; max-width:70ch}

.site-foot{border-top:1px solid var(--line); background:var(--surface-2); padding:32px 0; margin-top:8px}
.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:24px}
.foot-cols h3{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px}
.foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.foot-cols a{color:var(--ink-2); font-size:13.5px}
.foot-base{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* landing pages: the "what you get out" list. Same rhythm as .plan li on the
   pricing page, so a visitor moving between them sees one system. */
.out-list{list-style:none; margin:0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); max-width:900px}
.out-list li{position:relative; padding-left:21px; font-size:14.5px; color:var(--ink-2)}
.out-list li::before{
  content:""; position:absolute; left:2px; top:7px; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
section.block#related .note{margin-top:14px}