@font-face{font-family:"Familjen Grotesk";src:url("/fonts/familjen-grotesk.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--bg:#ffffff;--surface:#f5f5f5;--border:#e3e3e3;--ink:#0d0d0d;--body:#4d4d4d;--muted:#6b6b6b;--accent:#d6006e;--on-accent:#ffffff;--bleed:#0086b3;--error:#b42318;--ok:#0f6b3f;
--sans:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0d0d0d;--surface:#272727;--border:#3a3a3a;--ink:#f5f5f5;--body:#f5f5f5;--muted:#b0b0b0;--accent:#ff5cab;--on-accent:#0d0d0d;--bleed:#4cc9f0;--error:#ff9b8f;--ok:#6ed39a;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:16px/1.5 var(--sans)}
h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.15;margin:0}
h1{font-size:32px;letter-spacing:-.01em}
h2{font-size:24px}
h3{font-size:16px}
p{margin:0}
a{color:var(--accent);text-underline-offset:2px}
.mono,td.num,th.num{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1168px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:8px;background:var(--bg);padding:8px;z-index:9}
header.top{border-bottom:1px solid var(--border)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.wordmark{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:20px;text-decoration:none}
.wordmark svg{width:20px;height:20px}
.wordmark svg path{stroke:var(--ink);stroke-width:1.5;fill:none}
.wordmark svg rect{stroke:var(--accent);stroke-width:1.5;fill:none}
.unaff{font-size:12px;color:var(--muted);text-align:right;max-width:190px;line-height:1.3}
.hero{padding-top:32px;padding-bottom:16px}
.hero p{font-size:16px;margin-top:8px;max-width:620px}
.tool{display:grid;gap:24px;padding-top:16px;padding-bottom:32px}
.tool-proof{order:-1}
.panel{border:1px solid var(--border);border-radius:2px;background:var(--bg)}
.drop{position:relative;display:block;border:1px dashed var(--muted);border-radius:2px;padding:24px 16px;text-align:center;cursor:pointer;background:var(--surface)}
.drop strong{display:block;color:var(--ink);font-size:20px;font-weight:600}
.drop span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.drop i{position:absolute;width:14px;height:14px;opacity:0;transition:opacity .12s}
.drop i:nth-of-type(1){left:-9px;top:-9px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.drop i:nth-of-type(2){right:-9px;top:-9px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.drop i:nth-of-type(3){left:-9px;bottom:-9px;border-right:1px solid var(--ink);border-top:1px solid var(--ink)}
.drop i:nth-of-type(4){right:-9px;bottom:-9px;border-left:1px solid var(--ink);border-top:1px solid var(--ink)}
.drop.over{border:1px solid var(--accent);background:var(--bg)}
.drop.over i{opacity:1}
.drop.has strong{font-family:var(--mono);font-size:14px;font-weight:400;word-break:break-all}
.sample{margin-top:8px;font-size:14px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.field label,.field legend{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:4px;padding:0}
.field small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.field.full{grid-column:1/-1}
.custom{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-items:end;margin-top:12px}
.custom[hidden]{display:none}
.custom label{margin:0;font-size:12px;white-space:nowrap}
.custom input{min-width:0;width:100%}
.custom small{grid-column:1/-1;margin-top:0}
.custom small.bad{color:var(--error)}
select,input[type=number],textarea{width:100%;font:16px var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:2px;padding:10px 12px;min-height:44px}
textarea{font-family:var(--sans);min-height:72px;resize:vertical}
fieldset{border:0;margin:0;padding:0;min-width:0}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:2px}
.seg label{margin:0;position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:10px 8px;font-size:14px;font-weight:500;color:var(--body);min-height:42px}
.seg input:checked+span{background:var(--ink);color:var(--bg)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
details.adv{margin-top:12px;font-size:14px}
details.adv summary{cursor:pointer;color:var(--muted)}
details.adv .field{margin-top:8px}
.local{margin-top:16px;font-size:14px;color:var(--ink);font-weight:500}
.local small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.proof{padding:16px}
.proof figure{margin:0}
.proof figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;text-align:center}
.spread{display:block;width:100%;height:auto;max-height:560px}
.sp-paper{fill:var(--bg);stroke:none}
.sp-trim{fill:none;stroke:var(--accent);stroke-width:1.2}
.sp-bleed{fill:none;stroke:var(--bleed);stroke-width:1;stroke-dasharray:4 3}
.sp-gutter{fill:var(--accent);opacity:.14}
.sp-safe{fill:none;stroke:var(--muted);stroke-width:.7;stroke-dasharray:2 3}
.sp-line{fill:var(--border)}
.sp-mark{stroke:var(--ink);stroke-width:.8}
.sp-dim{stroke:var(--accent);stroke-width:1}
.sp-label{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.sp-label.sp-accent{fill:var(--accent)}
.only-wide{display:none}
.pagetoggle{display:flex;justify-content:center;margin-bottom:8px}
.pagetoggle .seg{width:220px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:2px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);font:500 16px var(--sans);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn[disabled]{opacity:.55;cursor:default}
.badge{display:inline-block;border-radius:9999px;padding:2px 10px;font:12px var(--mono);text-transform:uppercase;border:1px solid currentColor;white-space:nowrap}
.badge.pass{color:var(--ok)}.badge.fail{color:var(--error)}.badge.note{color:var(--muted)}
.result{padding-top:8px;padding-bottom:32px}
.result[hidden],[hidden]{display:none!important}
.status{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:16px}
.status .mono{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.working{padding:16px;margin-bottom:16px}
.working .count{font-family:var(--mono);font-size:20px;color:var(--ink)}
.bar{height:4px;background:var(--surface);margin-top:12px}
.bar b{display:block;height:100%;width:0;background:var(--accent)}
.thumbs{display:flex;gap:8px;margin-top:12px;min-height:74px;overflow:hidden}
.thumbs canvas{height:72px;width:auto;border:1px solid var(--border)}
.alert{border:1px solid var(--error);border-radius:2px;padding:16px;color:var(--ink);margin-bottom:16px}
.alert strong{color:var(--error);display:block}
.sheet{width:100%;border-collapse:collapse;font-size:14px}
.sheet th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:8px 12px;border-bottom:1px solid var(--border)}
.sheet td{vertical-align:top;padding:12px;border-bottom:1px solid var(--border)}
.sheet td:first-child{color:var(--ink);font-weight:500;width:20%}
.sheet .badge{margin-bottom:4px}
.sheet p{color:var(--body)}
.sub{margin:32px 0 12px}
.pagecards{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));list-style:none;padding:0;margin:0}
.pagecards li{border:1px solid var(--border);border-radius:2px;padding:12px;font-size:14px}
.pagecards b{font-family:var(--mono);font-weight:400;color:var(--ink)}
.pagecards span{display:block;color:var(--body)}
.pagecards .after{color:var(--muted);font-size:12px;margin-top:4px}
.previews{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.previews figure{margin:0;border:1px solid var(--border);border-radius:2px;padding:8px;background:var(--surface)}
.previews canvas{display:block;width:100%;height:auto;background:#fff}
.previews figcaption{font:12px var(--mono);color:var(--muted);margin-top:6px}
.legend{font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--accent);vertical-align:middle;margin:0 4px 0 12px}
.legend i.safe{border-top:1px dashed var(--muted)}
.cta{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border);padding:12px 0;margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;z-index:3}
.cta .btn{flex:1 1 240px}
.cta small{flex:1 1 220px;color:var(--muted);font-size:12px;line-height:1.35}
.downloads{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.section{padding:48px 0;border-top:1px solid var(--border)}
.section h2{margin-bottom:16px}
.cols{display:grid;gap:24px}
.list{margin:0;padding:0;list-style:none}
.list li{padding:10px 0;border-bottom:1px solid var(--border);font-size:16px}
.list li b{color:var(--ink);font-weight:500}
.price{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.price div{border:1px solid var(--border);border-radius:2px;padding:16px}
.price b{display:block;font:32px var(--mono);color:var(--ink);font-weight:400}
.price span{font-size:14px}
.answers{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));list-style:none;padding:0;margin:0}
.answers a{display:block;border:1px solid var(--border);border-radius:2px;padding:12px;color:var(--ink);text-decoration:none;font-weight:500;height:100%}
.answers a small{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:4px}
.answers a:hover{border-color:var(--accent)}
.faq details{border-bottom:1px solid var(--border);padding:12px 0}
.faq summary{cursor:pointer;color:var(--ink);font-weight:500}
.faq p{margin-top:8px;max-width:720px}
.prose{max-width:760px}
.prose p,.prose ul,.prose ol{margin:12px 0}
.prose h2{margin-top:32px}
.prose li{margin:6px 0}
.crumbs{font-size:12px;color:var(--muted);padding-top:24px}
.crumbs a{color:var(--muted)}
/* Data tables never hide a column: cells wrap on wide screens, and each row becomes a card with
   its headings beside the values on narrow ones (see the max-width block below). */
.tablewrap{border:1px solid var(--border);border-radius:2px;margin:16px 0}
table.data{border-collapse:collapse;width:100%;font-size:14px}
table.data th,table.data td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;overflow-wrap:anywhere}
table.data th{font-weight:500;color:var(--muted);font-size:12px;background:var(--surface);vertical-align:bottom}
table.data td{font-family:var(--mono);color:var(--ink)}
table.data tr:last-child td{border-bottom:0}
table.data tr.hl td{background:var(--surface)}
.src{font-size:12px;color:var(--muted);margin-top:8px}
.answer{border-left:2px solid var(--accent);padding:4px 0 4px 16px;margin:16px 0;color:var(--ink);font-size:20px;line-height:1.35;max-width:760px}
.feedback{max-width:560px}
.feedback .btn{margin-top:8px}
.feedback p{font-size:14px;margin-bottom:8px}
footer{border-top:1px solid var(--border);padding:24px 0 96px;font-size:12px;color:var(--muted)}
footer a{color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
@media (min-width:860px){
  h1{font-size:48px}
  .hero{padding-top:48px}
  .tool{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:32px}
  .tool-proof{order:0}
  .only-wide{display:block}.only-narrow{display:none}
  .cols{grid-template-columns:1fr 1fr;gap:48px}
  .previews{grid-template-columns:repeat(4,1fr)}
  .cta{position:static;border-top:0;padding:0}
  .cta .btn{flex:0 0 auto}
  .unaff{max-width:none}
}
@media (max-width:859px){
  /* Phones: the drop zone comes first, then the proof spread, then the controls. */
  .tool{gap:0}
  .tool-form{display:contents}
  .tool-form>.drop,.tool-form>.sample{order:-2}
  .tool-proof{order:-1;margin:24px 0 8px}
  .tool .spread{max-height:46vh}
  .sheet thead{display:none}
  .sheet,.sheet tbody,.sheet tr,.sheet td{display:block;width:100%}
  .sheet tr{border:1px solid var(--border);border-radius:2px;margin-bottom:8px;padding:12px}
  .sheet td{border:0;padding:0 0 8px}
  .sheet td:first-child{width:100%;font-size:16px}
  .sheet td[data-h]::before{content:attr(data-h);display:block;font-size:12px;color:var(--muted)}
  .sheet td:last-child{padding-bottom:0}
  .tablewrap{border:0}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border:1px solid var(--border);border-radius:2px;margin-bottom:8px;padding:8px 12px}
  table.data tr.hl{background:var(--surface)}
  table.data td{display:flex;gap:12px;align-items:baseline;border:0;padding:4px 0}
  table.data td[data-h]::before{content:attr(data-h);flex:0 0 40%;font:12px var(--sans);color:var(--muted);overflow-wrap:anywhere}
  table.data td>span{flex:1 1 0;min-width:0}
  table.data td:not([data-h])>span,table.data td:first-child>span{color:var(--ink);font-weight:500}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}