/* Self-hosted so the site makes no third-party requests at all.
   Archivo and DM Mono are used under the SIL Open Font Licence 1.1. */
@font-face {
  font-family: Archivo;
  src: url(/fonts/archivo-var.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Metric-matched fallback. font-display: swap deliberately shows a system
   font first, which normally causes a visible reflow when Archivo arrives.
   These overrides (computed from both fonts' actual advance widths and
   vertical metrics) make Arial occupy the same space as Archivo, so the
   swap produces no layout shift. CLS is a Core Web Vitals ranking signal. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 106.26%;
  ascent-override: 82.63%;
  descent-override: 19.76%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Mono";
  src: url(/fonts/dmmono-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url(/fonts/dmmono-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* QR Tag Generator — visual system
   Light, professional, restrained. White surfaces, hairline rules,
   one navy accent. The QR itself stays pure black on white so it scans. */

:root {
  --paper:  #FFFFFF;
  --tint:   #F7F8FA;
  --lift:   #FFFFFF;
  --ink:    #1A1F27;
  --dim:    #667085;
  --edge:   #E3E7ED;          /* decorative rules and dividers */
  --control: #8A93A0;         /* interactive control borders, 3.11:1 on white */
  --control-hover: #6E7684;
  --edge-soft: #EFF2F6;
  --accent: #1B4DD1;
  --accent-soft: #EEF2FE;
  --accent-deep: #143BA5;

  --measure: 66ch;
  --gap: clamp(2rem, 5vw, 4.5rem);
  --pad: clamp(1.25rem, 5vw, 3rem);
  --r: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 400; font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; }
h2, h3, .section { scroll-margin-top: 5.5rem; }

.wrap { width: min(1160px, 100% - var(--pad) * 2); margin-inline: auto; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Keyboard users can jump past the header straight to the content. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 6px 0; font-size: .92rem; text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }
main:focus { outline: none; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 600; font-variation-settings: "wdth" 106, "wght" 640; line-height: 1.14; margin: 0; letter-spacing: -0.019em; color: var(--ink); }
h1 { font-size: clamp(2.15rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.026em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.08rem; font-weight: 600; font-variation-settings: "wdth" 104, "wght" 630; line-height: 1.35; letter-spacing: -0.012em; }
p  { margin: 0 0 1.05em; max-width: var(--measure); }
.lede { font-size: clamp(1.03rem, 1.6vw, 1.16rem); color: var(--dim); max-width: 50ch; line-height: 1.6; }

.anchor {
  margin-left: .4em; color: var(--edge); text-decoration: none;
  font-weight: 400; opacity: 0; transition: opacity .12s ease;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; color: var(--accent); }
@media (pointer: coarse) { .anchor { display: none; } }

.mono { font-family: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .94em; }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--edge-soft); background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 700; font-variation-settings: "wdth" 105, "wght" 680; font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand svg { display: block; color: var(--accent); }
.site-nav { margin-left: auto; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-nav a { color: var(--dim); text-decoration: none; font-size: .93rem; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current] { color: var(--ink); font-weight: 600; font-variation-settings: "wght" 600; }

/* ---------- layout ---------- */
.hero { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2.4rem, 5vw, 3.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: var(--gap); align-items: start; }
.section {
  padding: clamp(2.6rem, 5.5vw, 4rem) 0;
  border-top: 1px solid var(--edge-soft);
  /* Skip layout and paint for sections still below the fold. contain-intrinsic-size
     reserves an estimated height so the scrollbar does not jump. */
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.section-tint { background: var(--tint); border-top-color: var(--edge); }
.section-tint .grid-types a { background: var(--lift); }
.prose { max-width: var(--measure); }
.prose h2 + p, .prose h3 + p { margin-top: .75em; }
.prose h3 { margin-top: 2.1em; }
.prose ul { padding-left: 1.15rem; max-width: var(--measure); }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--dim); }

/* ---------- form ---------- */
.field { margin-bottom: 1.15rem; }
.field > label, .legend { display: block; font-size: .875rem; font-weight: 600; font-variation-settings: "wdth" 102, "wght" 600; margin-bottom: .38rem; color: var(--ink); }
.hint { font-size: .82rem; color: var(--dim); margin: .38rem 0 0; line-height: 1.5; }

input[type=text], input[type=url], input[type=tel], input[type=email], input[type=password], textarea, select {
  width: 100%;
  font: inherit;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: .92rem;
  color: var(--ink);
  background: var(--lift);
  border: 1px solid var(--control);
  border-radius: 6px;
  padding: .66rem .75rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
select { font-family: Archivo, "Archivo Fallback", sans-serif; font-size: .9rem; }
input::placeholder, textarea::placeholder { color: #6E7684; }  /* 4.58:1 */
input:hover, textarea:hover, select:hover { border-color: var(--control-hover); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.check { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--ink); }
.check input { width: auto; accent-color: var(--accent); }

/* type switcher */
.switch { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--tint); border: 1px solid var(--edge-soft); border-radius: 9px; margin-bottom: 1.5rem; }
.switch button { font: inherit; font-size: .88rem; font-weight: 600; font-variation-settings: "wdth" 102, "wght" 570; padding: .45rem .85rem; border: 0; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; transition: background .12s ease, color .12s ease; }
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed=true] { background: var(--lift); color: var(--ink); font-weight: 600; font-variation-settings: "wght" 640; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.05); }

/* ---------- QR panel ---------- */
.panel { position: sticky; top: 5.5rem; }
.qr-stage {
  background: var(--lift);
  border: 1px solid var(--edge);
  border-radius: var(--r) var(--r) 0 0;
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.qr-stage svg { width: 100%; height: auto; max-width: 340px; display: block; }
.qr-empty { color: var(--dim); font-size: .9rem; text-align: center; max-width: 26ch; line-height: 1.55; }

.readout { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--tint); padding: .65rem .9rem; font-family: "DM Mono", monospace; font-size: .76rem; color: var(--dim); }
.readout b { color: var(--ink); font-weight: 500; }

.payload { margin: .95rem 0 0; font-family: "DM Mono", monospace; font-size: .76rem; color: var(--dim); word-break: break-all; max-width: none; line-height: 1.55; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.btn { font: inherit; font-size: .92rem; font-weight: 600; font-variation-settings: "wdth" 102, "wght" 600; padding: .62rem 1.15rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; transition: background .12s ease, border-color .12s ease; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-2 { background: var(--lift); color: var(--ink); border-color: var(--control); }
.btn-2:hover { background: var(--tint); color: var(--ink); border-color: var(--control-hover); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--accent); border-color: var(--accent); }
.btn-2[disabled]:hover { background: var(--lift); border-color: var(--control); }

.tune { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--edge-soft); }
.tune label { display: block; font-size: .8rem; color: var(--dim); margin-bottom: .35rem; }
.tune select { padding: .48rem .55rem; }
.swatches { display: flex; gap: .45rem; }
.swatches button { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--control); cursor: pointer; padding: 0; }
.swatches button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }

.status { font-size: .84rem; color: var(--accent); min-height: 1.3em; margin: .6rem 0 0; }
.status[data-kind=error] { color: #C0392B; }

/* ---------- type directory ---------- */
.grid-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: .85rem; }
.grid-types a { display: block; padding: 1.15rem 1.2rem; border: 1px solid var(--edge); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--lift); transition: border-color .12s ease, box-shadow .12s ease; }
.grid-types a:hover { border-color: #C9D3E4; box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.grid-types strong { display: block; font-weight: 600; font-variation-settings: "wdth" 104, "wght" 640; font-size: .97rem; margin-bottom: .28rem; letter-spacing: -0.012em; }
.grid-types span { font-size: .855rem; color: var(--dim); line-height: 1.5; display: block; }

/* ---------- faq ---------- */
.faq { max-width: var(--measure); border-top: 1px solid var(--edge-soft); }
.faq details { border-bottom: 1px solid var(--edge-soft); }
.faq summary { cursor: pointer; padding: 1.05rem 0; font-weight: 600; font-variation-settings: "wdth" 102, "wght" 600; list-style: none; display: flex; justify-content: space-between; gap: 1.2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { content: "+"; color: var(--accent); font-family: "DM Mono", monospace; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 1.05rem; margin: 0; color: var(--dim); }

.sitemap-list { list-style: none; padding: 0; margin: 0 0 2.2rem; max-width: var(--measure); }
.sitemap-list li {
  padding: .7rem 0; border-bottom: 1px solid var(--edge-soft);
  display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: .2rem 1.4rem; align-items: baseline;
}
.sitemap-list li:first-child { border-top: 1px solid var(--edge-soft); }
.sitemap-list a { font-variation-settings: "wdth" 102, "wght" 600; font-weight: 600; text-decoration: none; }
.sitemap-list a:hover { text-decoration: underline; }
.sitemap-list span { color: var(--dim); font-size: .88rem; line-height: 1.5; }
@media (max-width: 620px) {
  .sitemap-list li { grid-template-columns: 1fr; gap: .25rem; }
}

/* ---------- steps ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; max-width: var(--measure); }
.steps li { counter-increment: s; padding-left: 2.6rem; position: relative; margin-bottom: 1.05rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .12rem; font-family: "DM Mono", monospace; font-size: .78rem; color: var(--accent); background: var(--accent-soft); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--edge-soft); background: var(--tint); padding: clamp(2.4rem, 4.5vw, 3.5rem) 0 2.5rem; font-size: .9rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1.8rem; }
.foot-grid .foot-h { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.4; letter-spacing: 0; font-weight: 600; font-variation-settings: "wdth" 102, "wght" 640; color: var(--ink); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .42rem; color: var(--dim); }
.foot-grid a { color: var(--dim); text-decoration: none; }
.foot-grid a:hover { color: var(--accent); }
.foot-base { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--edge); color: var(--dim); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .855rem; }

.foot-tm { margin: 1rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--dim); max-width: 80ch; }
.foot-tm a { color: var(--dim); }
.foot-tm a:hover { color: var(--accent); }

.crumbs { font-size: .84rem; color: var(--dim); padding-top: 1.4rem; margin: 0; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- content utilities ---------- */
.hero-intro { max-width: 46ch; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.h1-narrow { max-width: 16ch; }
.prose-top { margin-top: clamp(1.2rem, 3vw, 1.7rem); }
.grid-top { margin-top: clamp(1.2rem, 3vw, 1.7rem); }
.faq-top { margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.section-lede { margin-top: .85rem; }
.mono-lg { font-size: 1.02rem; word-break: break-all; }

/* ===================================================================
   RESPONSIVE
   1180+  full two-column
   1024   narrower gutters
   860    single column, preview capped and centred
   620    compact spacing, single-column field rows
   380    smallest phones
   =================================================================== */

@media (max-width: 1180px) {
  .hero-grid { gap: clamp(1.8rem, 4vw, 3rem); }
}

/* tablet landscape — keep both columns, ease the pressure on the form */
@media (max-width: 1023px) {
  :root { --measure: 62ch; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  .qr-stage { padding: 1.25rem; }
  .qr-stage svg { max-width: 300px; }
  .tune { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* tablet portrait and below — stack, and stop the preview filling the screen */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .panel { position: static; order: -1; width: 100%; max-width: 400px; margin-inline: auto; }
  .qr-stage svg { max-width: 100%; }
  .site-head { position: static; backdrop-filter: none; background: var(--paper); }
  .site-head .wrap { flex-wrap: wrap; min-height: 0; padding-block: .8rem; gap: .5rem 1rem; }
  .site-nav {
    margin-left: 0; width: 100%; gap: 1.25rem;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .15rem;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .switch { display: flex; width: 100%; }
  .switch button { flex: 1 1 auto; text-align: center; }
}

/* phones */
@media (max-width: 620px) {
  :root { --measure: 100%; --r: 7px; }
  .hero { padding: 1.75rem 0 2rem; }
  .section { padding: 2.1rem 0; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .hero-intro { margin-bottom: 1.4rem; }
  /* keep the preview visible but leave the form reachable without scrolling far */
  .panel { max-width: 280px; }
  .h1-narrow { max-width: 20ch; }
  textarea { min-height: 5.5rem; }
  .actions { gap: .55rem; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
  .grid-types { gap: .65rem; }
  .grid-types a { padding: 1rem; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .site-foot { margin-top: 2.2rem; }
  .payload { font-size: .72rem; }
  .steps li { padding-left: 2.35rem; }
  .prose h3 { margin-top: 1.8em; }
}

/* small phones */
@media (max-width: 380px) {
  :root { --pad: 1rem; }
  .switch button { padding: .45rem .5rem; font-size: .82rem; }
  .readout { gap: .25rem .7rem; font-size: .72rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; }
  .panel { max-width: 240px; }
}

/* ---------- touch devices ----------
   iOS Safari zooms the page whenever a focused input is under 16px,
   and 44px is the minimum comfortable tap target. */
@media (pointer: coarse) {
  input[type=text], input[type=url], input[type=tel], input[type=email],
  input[type=password], textarea, select { font-size: 16px; padding: .7rem .75rem; }
  .btn { padding: .78rem 1.15rem; font-size: 1rem; }
  .switch button { padding: .6rem .9rem; min-height: 44px; }
  .swatches button { width: 40px; height: 40px; }
  .swatches { gap: .55rem; }
  .site-nav a { padding-block: .35rem; }
  .faq summary { padding: 1.15rem 0; }
  .check input { width: 20px; height: 20px; }
  .grid-types a { padding: 1.15rem 1.2rem; }
}

/* landscape phones — reclaim vertical space */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  .hero { padding: 1.25rem 0 1.5rem; }
  .panel { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-head, .site-nav, .site-foot, .actions, .tune, .switch, .crumbs { display: none; }
  body { background: #fff; }
  .hero-grid { grid-template-columns: 1fr; }
}