/* ============================================================================
   GENERATEQR — "SCANFRAME" design system
   A bespoke identity derived from QR anatomy itself:
   · finder-eye brackets  → brand mark, section markers, focus/selection
   · timing pattern       → dashed dividers and the signature top strip
   · module grid          → discrete square meters, status squares, textures
   · quiet zone           → the spacing philosophy (hard keylines, real air)
   · scanner beam         → one laser-red signal colour + the preview sweep
   Cold print-white / true black / laser red. Sharp corners, 2px keylines,
   heavy tight uppercase display type. System fonts only, zero requests.
   ============================================================================ */
:root{
  --bg:        #ffffff;
  --bg-2:      #f4f4f2;
  --surface:   #ffffff;
  --ink:       #0a0a0a;
  --ink-soft:  #3d3d3b;
  --muted:     #6f6f6a;
  --faint:     #9a9a94;
  --line:      #0a0a0a;      /* structural keylines — always hard */
  --hair:      #e3e3df;      /* hairline separators */
  --red:       #e8102d;      /* the beam */
  --red-ink:   #ffffff;
  --ok:        #0a0a0a;      /* pass = solid module */
  --warn:      #b57400;
  --bad:       #e8102d;
  --cell:      #efefec;      /* checkerboard cell */

  --bw: 2px;                 /* keyline weight */
  --container: 1180px;
  --pad: clamp(16px, 4vw, 28px);
  --field-gap: 8px;          /* the single caption-to-box distance, sitewide */
  --fs-field: 16px;          /* never below 16px: iOS zooms the page otherwise */
  --tap: 46px;               /* minimum comfortable touch target */

  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Consolas, monospace;

  --eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><rect x="1" y="1" width="12" height="12" fill="none" stroke="%230a0a0a" stroke-width="2"/><rect x="4.5" y="4.5" width="5" height="5" fill="%23e8102d"/></svg>');

  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c0c0c; --bg-2:#151514; --surface:#0c0c0c;
    --ink:#f4f4f1; --ink-soft:#c9c9c4; --muted:#93938d; --faint:#6b6b66;
    --line:#f4f4f1; --hair:#262624;
    --red:#ff3348; --red-ink:#0c0c0c;
    --ok:#f4f4f1; --warn:#e0a33a; --bad:#ff3348;
    --cell:#1a1a19;
    --eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><rect x="1" y="1" width="12" height="12" fill="none" stroke="%23f4f4f1" stroke-width="2"/><rect x="4.5" y="4.5" width="5" height="5" fill="%23ff3348"/></svg>');
  }
}
:root[data-theme="dark"]{
  --bg:#0c0c0c; --bg-2:#151514; --surface:#0c0c0c;
  --ink:#f4f4f1; --ink-soft:#c9c9c4; --muted:#93938d; --faint:#6b6b66;
  --line:#f4f4f1; --hair:#262624;
  --red:#ff3348; --red-ink:#0c0c0c;
  --ok:#f4f4f1; --warn:#e0a33a; --bad:#ff3348;
  --cell:#1a1a19;
  --eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><rect x="1" y="1" width="12" height="12" fill="none" stroke="%23f4f4f1" stroke-width="2"/><rect x="4.5" y="4.5" width="5" height="5" fill="%23ff3348"/></svg>');
}

/* == base ================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
/* [hidden] must beat every layout rule below it. Without this, any element we
   style with display:flex/grid stays visible while marked hidden — which is
   exactly how all nine type panels once rendered at once. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:1.55;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
/* the timing strip — page signature, reads as a QR timing row */
body::before{
  content:""; display:block; height:6px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px);
}
h1,h2,h3,h4{ line-height:1.04; margin:0; font-weight:800; letter-spacing:-.028em; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
svg{ display:block; }
code{
  font-family:var(--mono); font-size:.9em; background:var(--bg-2);
  padding:1px 6px; border:1px solid var(--hair);
}
.mono{ font-family:var(--mono); }
::selection{ background:var(--red); color:var(--red-ink); }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:var(--pad); top:-52px; z-index:100;
  background:var(--ink); color:var(--bg); padding:10px 16px;
  text-decoration:none; transition:top .15s; font-weight:700;
}
.skip-link:focus{ top:6px; }

/* eye marker — the section glyph that replaces any numbering */
.eye{
  display:inline-block; width:13px; height:13px; flex:0 0 auto;
  background:var(--eye) center/contain no-repeat; transform:translateY(1px);
}

/* == header =============================================================== */
.site-head{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:var(--bw) solid var(--line);
}
.head-row{ display:flex; align-items:center; gap:22px; height:60px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark{ color:var(--ink); }
.brand-name{
  font-size:16px; letter-spacing:.1em; font-weight:800; font-family:var(--font);
}
.brand-name b{ color:var(--red); font-weight:800; }
.head-nav{ display:flex; gap:0; margin-left:auto; }
.head-nav a{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  text-decoration:none; color:var(--muted); padding:8px 14px;
  border-left:1px solid var(--hair);
}
.head-nav a:first-child{ border-left:0; }
.head-nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--red); text-decoration-thickness:2px; }
.head-nav a[aria-current="page"]{ color:var(--ink); }
.head-nav a[aria-current="page"]::before{
  content:""; display:inline-block; width:6px; height:6px; background:var(--red);
  margin-right:7px; vertical-align:1px;
}
.head-tools{ display:flex; align-items:center; gap:8px; margin-left:12px; }
.theme-toggle, .nav-toggle{
  border:var(--bw) solid var(--line); background:var(--bg); border-radius:0;
  width:38px; height:38px; display:grid; place-items:center; color:var(--ink);
  flex:0 0 auto;
}
.theme-toggle:hover, .nav-toggle:hover{ background:var(--ink); color:var(--bg); }
/* the module-grid menu button: four QR modules that become a cross when open */
.nav-toggle{ display:none; }
.nav-toggle .i-close{ display:none; }
.nav-toggle[aria-expanded="true"] .i-open{ display:none; }
.nav-toggle[aria-expanded="true"] .i-close{ display:block; }
.nav-toggle[aria-expanded="true"]{ background:var(--ink); color:var(--bg); }

/* == hero ================================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(44px,7vw,84px) 0 clamp(30px,4.5vw,52px);
  border-bottom:var(--bw) solid var(--line);
}
/* giant cropped finder eye — the hero ornament */
.hero::after{
  content:""; position:absolute; top:50%; right:-140px; transform:translateY(-50%);
  width:min(46vw,460px); aspect-ratio:1; pointer-events:none;
  background:var(--eye) center/contain no-repeat;
  opacity:.07;
}
.hero > .container{ position:relative; z-index:1; }
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--ink); margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:13px; height:13px;
  background:var(--eye) center/contain no-repeat;
}
.hero h1{
  font-size:clamp(34px, 6vw, 66px); max-width:15ch; text-transform:uppercase;
}
.hero h1 em{ font-style:normal; color:var(--red); }
.hero-sub{
  margin-top:20px; max-width:52ch; color:var(--ink-soft);
  font-size:clamp(15px,2vw,18px); line-height:1.6;
}
.trust-row{
  list-style:none; display:flex; flex-wrap:wrap; gap:0; padding:0; margin:26px 0 0;
  border:var(--bw) solid var(--line); width:fit-content; max-width:100%;
}
.trust-row li{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  padding:7px 14px; border-right:1px solid var(--hair); color:var(--ink);
}
.trust-row li:last-child{ border-right:0; }
.trust-row li::before{ content:"■ "; color:var(--red); font-size:8px; vertical-align:2px; }

/* == studio grid ========================================================== */
.studio{ padding-block:clamp(26px,4vw,44px); }
.studio-grid{
  display:grid; gap:22px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"content preview" "design design";
}
.panel{
  background:var(--surface); border:var(--bw) solid var(--line); border-radius:0;
  padding:clamp(16px,2.6vw,26px);
}
.panel-content{ grid-area:content; }
.panel-preview{ grid-area:preview; }
.panel-design{ grid-area:design; }
.panel-title{
  font-size:12px; letter-spacing:.2em; font-weight:800; text-transform:uppercase;
  margin:0 0 18px; display:flex; gap:10px; align-items:center; color:var(--ink);
  padding-bottom:12px;
  border-bottom:1px dashed var(--line);
}

/* type tabs — segmented strip */
.type-tabs{
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:20px;
  border:var(--bw) solid var(--line);
}
.type-tabs [role="tab"]{
  font-size:12px; letter-spacing:.06em; font-weight:700; text-transform:uppercase;
  border:0; border-right:1px solid var(--hair);
  background:var(--bg); color:var(--muted);
  padding:9px 13px; flex:1 0 auto; position:relative;
}
.type-tabs [role="tab"]:hover{ color:var(--ink); background:var(--bg-2); }
.type-tabs [aria-selected="true"]{
  background:var(--ink); color:var(--bg);
}
.type-tabs [aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--red);
}

/* == THE FIELD SYSTEM =====================================================
   One rule governs every labelled control on the site: the label is a flex
   column and the ONLY thing that separates caption from box is --field-gap.
   No margins on controls, so spacing can never drift between field types,
   breakpoints or pages. Inputs are 16px because anything smaller makes iOS
   Safari zoom the viewport on focus.
   ========================================================================= */
fieldset{ border:0; padding:0; margin:0; }
.type-form{ display:flex; flex-direction:column; gap:18px; }
.type-form label:not(.btn), .panel label:not(.btn), .mini-gen-fields label:not(.btn){
  display:flex; flex-direction:column; align-items:stretch; gap:var(--field-gap);
  font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em;
  line-height:1.3;
}
input[type="text"], input[type="number"], input[type="datetime-local"], textarea, select{
  display:block; width:100%; margin:0; padding:11px 12px; min-height:46px;
  border:var(--bw) solid var(--line); border-radius:0;
  background:var(--bg); color:var(--ink); font:inherit; font-size:var(--fs-field);
  line-height:1.35;
}
textarea{ resize:vertical; font-family:var(--mono); font-size:15px; min-height:76px; }
input:focus, textarea:focus, select:focus{ outline:2px solid var(--red); outline-offset:-2px; }
input::placeholder, textarea::placeholder{ color:var(--faint); opacity:1; }
/* paired fields: captions may wrap to different heights, boxes still align */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; align-items:stretch; }
.field-row > label{ justify-content:flex-end; }
.check{
  flex-direction:row !important; align-items:center; gap:10px;
  font-weight:500 !important; min-height:34px;
}
.check input{ width:18px; height:18px; accent-color:var(--red); margin:0; flex:0 0 auto; }
.hint{ font-size:12.5px; color:var(--muted); line-height:1.55; }
.linklike{
  background:none; border:0; padding:0; color:var(--red); font-weight:600;
  text-decoration:underline; text-underline-offset:3px; font-size:inherit; font-family:inherit;
}

/* payload meter — discrete modules, not a smooth bar */
.payload-meter{ margin-top:20px; border-top:1px dashed var(--line); padding-top:12px; }
.meter-line{
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px;
  color:var(--muted); letter-spacing:.05em; margin-bottom:8px;
}
.meter-bar{
  height:10px; display:block; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, var(--cell) 0 8px, transparent 8px 10px);
}
#meterFill{
  height:100%; width:0;
  background:repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 10px);
  transition:width .25s steps(8);
}

/* preview — the viewfinder */
.preview-frame{
  position:relative; display:grid; place-items:center; padding:26px;
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / 26px var(--bw) no-repeat,
    linear-gradient(var(--line), var(--line)) 0 0 / var(--bw) 26px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / 26px var(--bw) no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / var(--bw) 26px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 100% / 26px var(--bw) no-repeat,
    linear-gradient(var(--line), var(--line)) 0 100% / var(--bw) 26px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 100% / 26px var(--bw) no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 100% / var(--bw) 26px no-repeat,
    repeating-conic-gradient(var(--cell) 0 25%, transparent 0 50%) 0 0/18px 18px;
}
#qrPreview{ position:relative; width:min(300px, 62vw); overflow:hidden; }
#qrPreview svg{ width:100%; height:auto; }
/* the beam: sweeps on every re-encode */
#qrPreview.scanned::after{
  content:""; position:absolute; left:0; right:0; top:-4px; height:3px;
  background:var(--red);
  box-shadow:0 0 12px 1px var(--red);
  animation:beam .5s linear 1 forwards;
}
@keyframes beam{
  from{ transform:translateY(0); opacity:1; }
  85%{ opacity:1; }
  to{ transform:translateY(calc(var(--sweep, 300px) + 8px)); opacity:0; }
}
.preview-meta{
  margin-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  color:var(--muted); text-align:center;
}

/* scan report */
.safety{ margin-top:18px; border:var(--bw) solid var(--line); }
.safety-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 14px; background:var(--ink); color:var(--bg);
}
.safety-head h3{
  font-size:11px; letter-spacing:.22em; font-weight:800; text-transform:uppercase;
}
.safety-score{ font-family:var(--mono); font-size:12.5px; font-weight:700; }
.safety-score.ok{ color:var(--bg); }
.safety-score.warn{ color:#ffd47e; }
.safety-score.bad{ color:#ff8c9a; }
.safety-list{ list-style:none; margin:0; padding:4px 0; }
.safety-list li{
  display:flex; gap:11px; align-items:baseline; padding:6px 14px;
  font-size:13px; color:var(--muted); border-top:1px solid var(--hair);
}
.safety-list li:first-child{ border-top:0; }
.safety-list li::before{
  content:""; width:9px; height:9px; flex:0 0 auto; transform:translateY(.5px);
}
.safety-list li.ok::before{ background:var(--ok); }
.safety-list li.warn::before{ background:var(--warn); }
.safety-list li.bad::before{ background:var(--bad); }
.safety-list li strong{ color:var(--ink); font-weight:700; }

/* buttons */
.export-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.export-row.center{ justify-content:center; }
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:var(--bw) solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:0; padding:10px 18px; font-weight:800; font-size:13.5px;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  min-width:78px; transition:background .1s, color .1s;
}
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn:hover .btn-sub{ color:inherit; }
.btn:active{ transform:translate(1px,1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--bg); color:var(--ink); }
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ background:var(--red); border-color:var(--red); color:var(--red-ink); }
.btn-ghost{ border-style:dashed; font-weight:600; color:var(--muted); }
.btn-sub{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--muted); font-weight:400; text-transform:none;
}
.btn-file{ cursor:pointer; flex-direction:row; }
.export-opts{
  display:flex; gap:14px; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--line);
}
.export-opts label{
  font-size:10.5px; font-family:var(--mono); color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; flex:1; font-weight:400;
  gap:6px;
}
.export-opts select, .export-opts input{ padding:9px 10px; }

.project-save{ display:flex; gap:10px; margin-top:16px; }
.project-save input{ flex:1; margin-top:0; }

/* design bench */
.design-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; }
.design-col{ padding:0 22px; border-left:1px dashed var(--line); }
.design-col:first-child{ padding-left:0; border-left:0; }
.design-col:last-child{ padding-right:0; }
.design-label{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.24em; font-weight:800;
  color:var(--ink); margin-bottom:12px; text-transform:uppercase;
}
.design-label::before{ content:""; width:9px; height:9px; background:var(--red); }
.design-col > label{ margin-top:16px; }
.color-field input[type="color"]{
  width:100%; height:var(--tap); margin:0; padding:3px;
  border:var(--bw) solid var(--line); border-radius:0; background:var(--bg);
  cursor:pointer;
}
/* matches the input box height so a slider and a select paired in one row
   align on both edges */
input[type="range"]{ width:100%; margin:0; accent-color:var(--red); height:46px; }
/* caption row for controls that carry a live value (quiet zone, logo size) */
.label-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.label-row .val{
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--red);
}
.logo-controls{ display:flex; gap:10px; }

/* projects strip */
.projects{ margin-top:26px; border-top:var(--bw) solid var(--line); padding-top:20px; }
.projects-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.projects-io{ display:flex; gap:16px; font-size:13px; }
.projects-row{ display:flex; gap:14px; overflow-x:auto; padding:8px 2px 12px; }
.project-card{
  flex:0 0 auto; width:136px; border:var(--bw) solid var(--line);
  background:var(--surface); padding:10px; text-align:center; position:relative;
}
.project-card img, .project-card svg{ width:78px; height:78px; margin:0 auto 8px; }
.project-card .pc-name{
  font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.project-card .pc-type{ font-family:var(--mono); font-size:9.5px; color:var(--muted); letter-spacing:.08em; }
.project-card .pc-load{ position:absolute; inset:0; border:0; background:none; }
.project-card .pc-load:hover{ outline:var(--bw) solid var(--red); outline-offset:-2px; }
.project-card .pc-del{
  position:absolute; top:0; right:0; z-index:1; border:0; border-left:1px solid var(--hair);
  border-bottom:1px solid var(--hair); background:var(--bg);
  width:22px; height:22px; line-height:1; font-size:13px; color:var(--muted);
}
.project-card .pc-del:hover{ color:var(--red-ink); background:var(--red); }

/* == benches ============================================================== */
.bench{ padding-block:clamp(30px,4.5vw,56px); border-top:var(--bw) solid var(--line); }
.bench-title{
  font-size:clamp(21px,3vw,30px); display:flex; gap:12px; align-items:center;
  text-transform:uppercase;
}
.bench-sub{ color:var(--muted); margin-top:10px; max-width:60ch; }
.bench-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px; }
.mini-title{
  font-size:11px; letter-spacing:.2em; color:var(--ink); text-transform:uppercase;
  font-weight:800; margin-bottom:16px; padding-bottom:10px; border-bottom:1px dashed var(--line);
}
.unit-input{ display:flex; gap:8px; }
.unit-input select{ width:auto; }
.stat-list{ margin:18px 0 6px; padding:0; }
.stat-list > div{
  display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--hair); font-size:13.5px;
}
.stat-list dt{ color:var(--muted); }
.stat-list dd{ margin:0; font-weight:700; font-size:13px; }

/* templates — a numbered spec sheet, not a card grid */
.templates-grid{
  margin-top:24px; border:var(--bw) solid var(--line);
  counter-reset:tpl;
  display:flex; flex-direction:column;
}
.tpl-card{
  counter-increment:tpl;
  display:grid;
  grid-template-columns:44px 110px minmax(0,1fr) 84px;
  grid-template-rows:auto auto;
  column-gap:16px; row-gap:2px; align-items:center;
  text-align:left; border:0; border-top:1px solid var(--hair);
  background:var(--surface); padding:14px 18px;
}
.tpl-card:first-child{ border-top:0; }
.tpl-card::before{
  content:counter(tpl, decimal-leading-zero);
  grid-column:1; grid-row:1 / span 2;
  font-family:var(--mono); font-size:12px; color:var(--faint);
}
.tpl-card > .tpl-kind{
  grid-column:2; grid-row:1 / span 2;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--red);
  border:1px solid var(--hair); padding:3px 8px; width:fit-content;
}
.tpl-card > .tpl-name{
  grid-column:3; grid-row:1; align-self:end;
  font-weight:800; font-size:15px; letter-spacing:-.01em;
}
.tpl-card > .tpl-desc{
  grid-column:3; grid-row:2; align-self:start;
  font-size:12.5px; color:var(--muted); line-height:1.5;
}
.tpl-card::after{
  content:"LOAD ↳";
  grid-column:4; grid-row:1 / span 2; justify-self:end;
  font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--muted);
}
.tpl-card:hover{ background:var(--bg-2); }
.tpl-card:hover::after{ color:var(--red); }

/* FAQ */
.faq-grid{ margin-top:24px; border-top:var(--bw) solid var(--line); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{
  cursor:pointer; padding:17px 4px; font-weight:800; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--mono); font-weight:400; color:var(--red); font-size:17px;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 4px 20px; color:var(--muted); max-width:72ch; }
.faq a{ color:var(--red); }

/* == footer =============================================================== */
.site-foot{
  border-top:var(--bw) solid var(--line); margin-top:24px; position:relative;
}
.site-foot::before{
  content:""; display:block; height:6px; margin-top:2px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px);
}
.foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:28px;
  padding-block:clamp(30px,4vw,48px);
}
.foot-tag{ color:var(--muted); font-size:13.5px; margin-top:10px; }
.foot-head{
  display:block; font-size:10.5px; letter-spacing:.24em; font-weight:800;
  color:var(--ink); margin-bottom:14px; text-transform:uppercase;
}
.foot-grid nav a{
  display:block; text-decoration:none; color:var(--muted); font-size:13.5px; padding:3px 0;
}
.foot-grid nav a:hover{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.foot-meta{ font-size:11.5px; color:var(--muted); line-height:1.7; font-family:var(--mono); }
.foot-meta + .foot-meta{ margin-top:12px; font-family:var(--font); }
.foot-meta a{ color:var(--ink-soft); }
.foot-legal{
  border-top:1px solid var(--hair); padding-block:15px; font-size:11px;
  color:var(--faint); letter-spacing:.06em; font-family:var(--mono);
}
.foot-legal a{ color:var(--muted); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 90px);
  background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:700;
  padding:11px 20px; border-left:4px solid var(--red);
  opacity:0; pointer-events:none; transition:transform .2s, opacity .2s; z-index:200; max-width:90vw;
}
.toast.show{ transform:translate(-50%, 0); opacity:1; }

/* == print mount ========================================================== */
.print-mount{ display:none; }
@media print{
  body::before{ display:none; }
  body > *:not(.print-mount){ display:none !important; }
  .print-mount{ display:block !important; }
  .print-mount .sheet{ page-break-after:always; }
  .print-mount .cell{ position:absolute; text-align:center; }
  .print-mount .cell svg{ width:100%; height:auto; }
  .print-mount .cell .cap{ font-family:var(--mono); font-size:8pt; margin-top:2mm; color:#000; }
  @page{ margin:0; }
}

/* == reader page ========================================================== */
.drop-zone{
  border:var(--bw) dashed var(--line); padding:34px 20px; text-align:center;
  cursor:pointer; background:var(--bg-2);
}
.drop-zone.over{ border-style:solid; background:var(--bg); outline:2px solid var(--red); outline-offset:-6px; }
.drop-zone:hover{ background:var(--bg); }
.drop-title{ font-weight:800; letter-spacing:.18em; font-size:13px; }
.result-kind{
  font-size:10.5px; letter-spacing:.16em; color:var(--red);
  border:1px solid var(--hair); padding:3px 8px; width:fit-content; margin-inline:auto;
}
.result-text{
  margin-top:10px; font-family:var(--mono); font-size:13px; line-height:1.5;
  word-break:break-all; white-space:pre-wrap; text-align:left;
  border:1px solid var(--hair); background:var(--bg-2); padding:10px 12px;
  max-height:180px; overflow-y:auto;
}

/* == landing pages ======================================================== */
.mini-gen{ margin-top:30px; }
.mini-gen .panel{ display:grid; grid-template-columns:1.4fr 1fr; gap:26px; align-items:start; }
.mini-gen-fields{ display:flex; flex-direction:column; gap:13px; }
.mini-gen-out{ text-align:center; }
.mini-gen-out #miniPreview{
  width:min(240px,70vw); margin-inline:auto; position:relative; overflow:hidden;
  outline:1px solid var(--hair); outline-offset:6px;
}
.article{ padding-block:clamp(28px,4vw,48px); }
.article h1{ font-size:clamp(28px,4.6vw,46px); max-width:24ch; text-transform:uppercase; }
.article h2{
  font-size:clamp(18px,2.5vw,23px); margin-top:42px; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.prose h2::before{ content:""; width:11px; height:11px; flex:0 0 auto; background:var(--eye) center/contain no-repeat; }
.article > .container > p, .article .prose p{ margin-top:15px; color:var(--ink-soft); max-width:70ch; }
.article .prose ul, .article .prose ol{ color:var(--ink-soft); max-width:68ch; margin-top:12px; padding-left:22px; }
.article .prose li{ margin-top:7px; }
.article .prose li::marker{ color:var(--red); font-weight:700; }
.article .prose strong{ color:var(--ink); }
.article .prose table{ border-collapse:collapse; margin-top:18px; font-size:14px; border:var(--bw) solid var(--line); }
.article .prose th, .article .prose td{ border:1px solid var(--hair); padding:9px 14px; text-align:left; }
.article .prose th{
  font-size:10.5px; letter-spacing:.14em; color:var(--bg); background:var(--ink);
  text-transform:uppercase; border-color:var(--ink);
}
.breadcrumb{
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em;
  margin-bottom:20px; text-transform:uppercase;
}
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover{ color:var(--red); }
.cta-band{
  margin-top:38px; border:var(--bw) solid var(--line);
  padding:20px 24px; display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between; position:relative;
}
.cta-band::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:repeating-linear-gradient(180deg, var(--ink) 0 10px, transparent 10px 20px);
}
.cta-band p{ font-weight:700; padding-left:10px; }
.cta-band .btn-primary{ flex-direction:row; }

/* == responsive =========================================================== */
@media (max-width: 940px){
  .studio-grid{ grid-template-columns:1fr; grid-template-areas:"content" "preview" "design"; }
  .design-grid{ grid-template-columns:1fr; }
  .design-col{ padding:18px 0 0; border-left:0; border-top:1px dashed var(--line); margin-top:18px; }
  .design-col:first-child{ padding-top:0; border-top:0; margin-top:0; }
  .bench-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }

  /* ---- mobile navigation: hamburger disclosure ---- */
  .nav-toggle{ display:grid; }
  .head-tools{ margin-left:auto; gap:10px; }
  /* thumb-sized targets on touch layouts */
  .theme-toggle, .nav-toggle{ width:44px; height:44px; }
  .head-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:var(--bg); border-bottom:var(--bw) solid var(--line);
    max-height:calc(100dvh - 62px); overflow-y:auto;
    /* closed state is display:none so links leave the tab order entirely */
    display:none;
  }
  .head-nav[data-open="true"]{ display:flex; animation:navIn .16s ease-out; }
  @keyframes navIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .head-nav a{
    border-left:0; border-top:1px solid var(--hair);
    padding:0 var(--pad); min-height:var(--tap); display:flex; align-items:center;
    font-size:13.5px; letter-spacing:.1em;
  }
  .head-nav a:first-child{ border-top:0; }
  .head-nav a:hover, .head-nav a:focus-visible{ background:var(--bg-2); text-decoration:none; }
  .head-nav a::after{ content:"→"; margin-left:auto; color:var(--red); font-size:15px; }

  .mini-gen .panel{ grid-template-columns:1fr; }
  .hero::after{ opacity:.05; right:-30vw; }
  .tpl-card{ grid-template-columns:34px minmax(0,1fr) 70px; }
  .tpl-card > .tpl-kind{ grid-column:2; grid-row:1; margin-bottom:6px; }
  .tpl-card > .tpl-name{ grid-column:2; grid-row:2; }
  .tpl-card > .tpl-desc{ grid-column:2; grid-row:3; }
  .tpl-card::before{ grid-column:1; grid-row:1 / span 3; }
  .tpl-card::after{ grid-column:3; grid-row:1 / span 3; }
  .tpl-card{ grid-template-rows:auto auto auto; }
}
@media (max-width: 540px){
  /* the tool is the product: less runway before it on a phone */
  .hero{ padding:26px 0 22px; }
  .hero h1{ font-size:clamp(28px,8.4vw,38px); }
  .hero-sub{ margin-top:12px; font-size:15px; }
  .trust-row{ margin-top:16px; }
  .studio{ padding-block:18px; }
  .field-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .export-opts{ flex-wrap:wrap; }
  .export-opts label{ flex:1 1 40%; }
  .type-tabs [role="tab"]{ flex:1 1 33%; border-bottom:1px solid var(--hair); min-height:46px; }
  .trust-row{ border:0; gap:8px; }
  .trust-row li{ border:1px solid var(--hair); }
}