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

:root{
  --bg:#ffffff;
  --ink:#0e1016;
  --muted:#5a6172;
  --faint:#8890a0;
  --line:#e2e5ee;
  --surface:#f6f7fb;
  --accent:#254edb;
  --accent-ink:#15318f;
  --radius:0;
  --radius-pill:999px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.7;
}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover, a:focus{color:var(--accent)}
::selection{background:var(--accent); color:#fff}

h1,h2,h3{
  font-family:"Outfit",system-ui,sans-serif;
  color:var(--ink);
  line-height:1.15;
  letter-spacing:-0.012em;
  text-wrap:balance;
}
p{margin:1.1em 0}
ul,ol{padding-left:1.25em}
li{margin:.4em 0}
strong{font-weight:700}
code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.92em; background:var(--surface); padding:.1em .35em}

/* ===== top rule ===== */
.top-rule{height:4px; background:var(--accent)}

/* ===== header ===== */
header{border-bottom:1px solid var(--line); background:var(--bg)}
.bar{
  max-width:1180px; margin:0 auto; padding:1.15rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.brand{
  font-family:"Outfit",sans-serif; font-weight:800; font-size:1.05rem;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em;
}
.brand span{color:var(--accent)}
.bar nav{display:flex; gap:1.4rem; flex-wrap:wrap}
.bar nav a{
  font-family:"Public Sans",sans-serif; font-weight:600; font-size:.86rem;
  color:var(--muted); text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent;
}
.bar nav a:hover, .bar nav a:focus{color:var(--ink); border-bottom-color:var(--line)}
.bar nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}

/* ===== intro / masthead ===== */
.crumbs{
  max-width:760px; margin:1.5rem auto 0; padding:0 1.5rem;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint);
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink)}

.intro{max-width:760px; margin:0 auto; padding:2.75rem 1.5rem 0}
.intro h1{font-size:clamp(2rem,4.4vw,2.9rem); font-weight:800; margin:.3em 0 .5em}
.credit{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint); margin:0 0 1.1em;
}
.dek{font-size:1.1rem; color:var(--muted); margin:0 0 1.6em; max-width:60ch}

.hero-cta{display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:.4em}
.back-link{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:"Public Sans",sans-serif; font-weight:600; font-size:.88rem;
  color:var(--accent-ink); text-decoration:none; margin:0 0 1.6em;
}
.back-link:hover{color:var(--accent)}
.back-link svg{width:14px; height:14px}

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Public Sans",sans-serif; font-weight:700; font-size:.92rem;
  padding:.8rem 1.5rem; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff; text-decoration:none; border:1.5px solid var(--ink);
  white-space:nowrap;
}
.btn:hover, .btn:focus{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
.btn-accent{background:var(--accent); border-color:var(--accent)}
.btn-accent:hover, .btn-accent:focus{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn-outline{background:#fff; color:var(--ink); border:1.5px solid var(--ink)}
.btn-outline:hover, .btn-outline:focus{background:var(--ink); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover, .btn-ghost:focus{border-color:var(--ink); background:transparent; color:var(--ink)}
.btn svg{width:15px; height:15px; flex-shrink:0}

/* ===== main content ===== */
main{max-width:760px; margin:0 auto; padding:2.4rem 1.5rem 5rem}
main > p:first-child{font-size:1.08rem}

section{margin:3.2rem 0}
section h2{font-size:clamp(1.35rem,2.6vw,1.65rem); font-weight:700; margin:0 0 .6em}
section h3{font-size:1.08rem; font-weight:600; margin:1.7em 0 .3em}

/* ===== data table (ledger) ===== */
.table-scroll{overflow-x:auto; border:1.5px solid var(--ink); margin:1.6rem 0}
table{border-collapse:collapse; width:100%; min-width:660px; font-family:"Public Sans",sans-serif; font-size:.9rem}
thead th{
  background:var(--ink); color:#fff; text-align:left; padding:.85em .9em;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
tbody td{padding:.8em .9em; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface)}
td.center{text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.85rem}
td.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

.pill{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:500;
  letter-spacing:.02em; padding:.28em .7em; border-radius:var(--radius-pill); white-space:nowrap;
}
.pill-good{background:var(--ink); color:#fff}
.pill-check{background:#fff; color:var(--ink); border:1.5px solid var(--ink)}

.note{
  font-family:"Public Sans",sans-serif; font-size:.88rem; color:var(--muted);
  border-left:3px solid var(--accent); padding:.9rem 1.2rem; background:var(--surface); margin:1.6rem 0;
}

/* ===== panels (pros/cons, checklist) ===== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1.5px solid var(--ink); margin:1.7rem 0}
.panel{background:#fff; padding:1.3rem 1.4rem; font-size:.92rem}
.panel h3{margin:0 0 .6em; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; font-family:"IBM Plex Mono",monospace; font-weight:500}
.panel ul{margin:0; padding-left:0; list-style:none}
.panel li{margin:.55em 0; padding-left:1.3em; position:relative}
.panel.plus li::before{content:"+"; position:absolute; left:0; font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ink)}
.panel.minus li::before{content:"\2212"; position:absolute; left:0; font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--muted)}

/* ===== rating card (review scorecards) ===== */
.rating{
  display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap;
  border:1.5px solid var(--ink); padding:1.4rem 1.6rem; margin:1.8rem 0 2.2rem;
}
.rating-score{
  font-family:"IBM Plex Mono",monospace; font-size:2.6rem; font-weight:600; color:var(--ink);
  line-height:1; flex-shrink:0;
}
.rating-score small{font-size:1rem; color:var(--faint); font-weight:400}
.rating-note{font-size:.87rem; color:var(--muted); line-height:1.6}

/* ===== checklist ===== */
.checklist{list-style:none; padding:0; margin:1.4rem 0}
.checklist li{
  display:flex; gap:.7em; padding:.65em 0; border-bottom:1px solid var(--line);
}
.checklist li::before{content:"\2713"; font-family:"IBM Plex Mono",monospace; color:var(--accent); flex-shrink:0; margin-top:.1em}

/* ===== FAQ ===== */
.qa dt{font-family:"Outfit",sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink); margin-top:1.6em}
.qa dt:first-child{margin-top:0}
.qa dd{margin:.45em 0 0; color:var(--muted); padding-left:0}

/* ===== more / related ===== */
.more{border-top:1.5px solid var(--ink); padding-top:1.6rem; margin-top:3rem}
.more h2{font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:500; margin-bottom:.7em}
.more p{color:var(--muted); font-size:.94rem}

/* ===== invoice template ===== */
.invoice{border:1.5px solid var(--ink); padding:clamp(1.2rem,4vw,2.2rem); font-family:"Public Sans",sans-serif; color:var(--ink); background:#fff}
.invoice-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.6rem; border-bottom:2px solid var(--ink); padding-bottom:1.1rem; margin-bottom:1.1rem}
.invoice-label{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 .4em}
.invoice-meta h2{margin:0 0 .4em; color:var(--ink); font-size:1.4rem}
.invoice-meta table{border-collapse:collapse}
.invoice-meta th{text-align:left; color:var(--muted); font-weight:600; font-size:.82rem; padding:.15em .8em .15em 0}
.invoice-meta td{font-family:"IBM Plex Mono",monospace; font-size:.85rem; padding:.15em 0}
.invoice-to{margin-bottom:1.5rem}
.invoice-lines{width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.9rem}
.invoice-lines th,.invoice-lines td{padding:.55em .5em; text-align:left; border-bottom:1px solid var(--line)}
.invoice-lines thead th{background:transparent; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--ink); font-family:"IBM Plex Mono",monospace}
.invoice-lines td:nth-child(2),.invoice-lines th:nth-child(2),.invoice-lines td:nth-child(3),.invoice-lines th:nth-child(3),.invoice-lines td:nth-child(4),.invoice-lines th:nth-child(4){text-align:right; font-family:"IBM Plex Mono",monospace}
.invoice-lines tfoot th{text-align:right; border-bottom:none; font-weight:600}
.invoice-lines tfoot td{text-align:right; border-bottom:none; font-family:"IBM Plex Mono",monospace}
.invoice-lines tfoot tr.invoice-total th,.invoice-lines tfoot tr.invoice-total td{font-size:1.05rem; font-weight:700; color:var(--ink); border-top:2px solid var(--ink); padding-top:.6em}
.invoice-pay{background:var(--surface); padding:1rem 1.2rem; margin-top:1.5rem; font-size:.9rem}
.invoice-note{font-style:italic; color:var(--muted); margin-top:1.1rem; font-size:.9rem}

/* ===== footer ===== */
footer{border-top:1.5px solid var(--ink); background:var(--bg); padding:2.6rem 1.5rem}
.foot-inner{max-width:1180px; margin:0 auto}
footer p{color:var(--muted); font-size:.85rem; margin:.4em 0; max-width:70ch}
footer a{color:var(--ink)}
footer nav{margin-top:.9em; display:flex; gap:1.2rem; flex-wrap:wrap}
footer nav a{font-family:"Public Sans",sans-serif; font-weight:600; font-size:.82rem; text-decoration:none; color:var(--muted)}
footer nav a:hover{color:var(--ink)}

@media(max-width:820px){
  .bar nav{gap:1rem}
}
@media(max-width:640px){
  .bar{flex-direction:column; align-items:flex-start; gap:.9rem}
  .bar nav{gap:.85rem; flex-wrap:wrap; font-size:.82rem}
  .split{grid-template-columns:1fr}
  .rating{flex-direction:column; align-items:flex-start; gap:.8rem}
}
@media print{
  header,footer,.crumbs,.btn-print,.more,.intro,.top-rule,.back-link{display:none!important}
  body{background:#fff}
  main{padding:0; margin:0; max-width:none}
  .invoice{border:none; padding:0}
}