/* Swatsmith · Debugger waitlist page.
   Layout: a product datasheet printed on the logo's own paper. One typeface family (Archivo) used across
   its width axis: expanded 125 % like the wordmark for display, normal for reading, condensed for drawing
   annotations. Content sits left on a 12-column grid; the film gets a dark band; the dimensioned
   side elevation is the one loud element. Light = the default logo (ink + orange on cream),
   dark = the dark logo (cream + orange on ink). */

@font-face {
  font-family: "Archivo";
  src: url("assets/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* logo palette (Launch/brand/README.md) */
  --cream: #F9F6ED;
  --ink-brand: #1A252B;
  --orange: #E15019;
  --blue: #1156DE;

  /* light theme = swatsmith_lockup_light */
  --paper: var(--cream);
  --paper-2: #F1ECDF;
  --ink: var(--ink-brand);
  --ink-2: #555C5F;
  --rule: #D8D4C8;
  --rule-strong: #1A252B;
  --accent: var(--blue);
  --accent-hover: #0C46B8;
  --on-accent: #F9F6ED;
  --cinema: #1A252B;
  --cinema-ink: #F9F6ED;
  --cinema-ink-2: #AEB3B1;
  --cinema-rule: #34424A;
  --film-bg: #0E1417;
  --logo-ink: var(--ink-brand);
  --logo-wing: var(--orange);
  --field: #FFFDF8;
  --chip-on: #E6ECFB;

  --f: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --s-2: 0.75rem;
  --s-1: 0.875rem;
  --s0: 1.0625rem;
  --s1: 1.3125rem;
  --s2: 1.625rem;
  --s3: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --s4: clamp(2.1rem, 1.3rem + 3.1vw, 3.6rem);
  --display: min(calc((100vw - 48px) / 7.72), 10rem);
  --wrap: 1280px;
  --sec: clamp(72px, 10vw, 140px);
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* dark theme = swatsmith_lockup_dark */
  --paper: var(--ink-brand);
  --paper-2: #212F36;
  --ink: var(--cream);
  --ink-2: #B3B6B1;
  --rule: #36444C;
  --rule-strong: #F9F6ED;
  --accent: #2A67EC;
  --accent-hover: #4A7FF0;
  --on-accent: #F9F6ED;
  --cinema: #121A1E;
  --cinema-rule: #2A363D;
  --logo-ink: var(--cream);
  --field: #151F24;
  --chip-on: #1D3463;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f);
  font-size: var(--s0);
  line-height: 1.55;
  font-weight: 420;
  font-stretch: 100%;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-size: var(--s4); font-weight: 760; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.012em; }
h3 { font-size: var(--s1); font-weight: 700; font-stretch: 106%; line-height: 1.2; }
p { margin: 0; max-width: 62ch; }
.note { font-size: var(--s-1); color: var(--ink-2); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.skip { position: absolute; left: 12px; top: -60px; background: var(--accent); color: var(--on-accent); padding: 10px 14px; z-index: 20; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 4px; cursor: pointer;
  font-weight: 660; font-stretch: 108%; font-size: var(--s0); letter-spacing: 0.005em;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--s-1); }
.btn-wide { width: 100%; }
.textlink { font-weight: 600; text-decoration: none; }
.textlink > span:first-child { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.textlink .dur { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 450; margin-left: 4px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.logo { display: block; color: var(--logo-ink); line-height: 0; }
.logo svg { height: 34px; width: auto; }
.lg-ink { fill: var(--logo-ink); }
.lg-wing { fill: var(--logo-wing); }
.tools { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; border: 1.5px solid var(--rule); border-radius: 4px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 0 10px; min-height: 36px; min-width: 40px; font-size: var(--s-1); font-weight: 600; font-stretch: 110%; cursor: pointer; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.theme { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--rule); border-radius: 4px; background: transparent; cursor: pointer; }
.theme:hover, .seg button:hover { color: var(--ink); }
@media (max-width: 560px) { .top .btn-sm { display: none; } .logo svg { height: 28px; } }

/* ---------- confirmation bar (?confirmed=1) ---------- */
.confirmed { background: var(--accent); color: var(--on-accent); padding-block: 14px; }
.confirmed b { font-weight: 700; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(8px, 2vw, 28px) var(--sec); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.display {
  grid-column: 1 / -1;
  font-size: var(--display);
  font-weight: 820; font-stretch: 125%;
  line-height: 0.84; letter-spacing: 0.015em;
  text-transform: uppercase;
  margin-left: -0.045em;
  white-space: nowrap;
}
.hero-fig { grid-column: 1 / -1; margin: calc(var(--display) * -0.30) 0 0; position: relative; z-index: 1; }
.hero-fig img { width: 100%; }
.hero-fig figcaption { font-size: var(--s-2); color: var(--ink-2); text-align: right; margin-top: -4px; }
.hero-copy { grid-column: 1 / -1; display: grid; gap: 18px; align-content: start; margin-top: 28px; position: relative; z-index: 2; }
.lead { font-size: var(--s3); font-weight: 680; font-stretch: 108%; line-height: 1.12; letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance; }
.made { font-weight: 650; font-stretch: 104%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
@media (min-width: 960px) {
  .hero-copy { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(40px, 5vw, 80px); }
  .hero-fig { grid-column: 6 / -1; grid-row: 2; margin-top: calc(var(--display) * -0.30); margin-right: -3%; }
}

/* ---------- film ---------- */
.cinema { background: var(--cinema); color: var(--cinema-ink); padding-block: var(--sec); }
.cinema .note { color: var(--cinema-ink-2); }
.cinema-grid { display: grid; gap: 40px; }
.film-copy { display: grid; gap: 22px; align-content: center; }
.film-copy > p:first-of-type { color: var(--cinema-ink-2); font-size: var(--s1); line-height: 1.45; }
.chapters { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--cinema-rule); max-width: 460px; }
.chapters li { border-bottom: 1px solid var(--cinema-rule); }
.chapters button { all: unset; box-sizing: border-box; display: flex; gap: 18px; width: 100%; padding: 13px 4px; cursor: pointer; }
.chapters button:hover span:last-child, .chapters button:focus-visible span:last-child { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.22em; }
.chapters button:focus-visible { outline: 2px solid var(--cinema-ink); outline-offset: 2px; }
.tc { font-variant-numeric: tabular-nums; color: var(--orange); font-weight: 650; min-width: 2.6em; }
.film-frame { position: relative; width: 100%; max-width: 400px; justify-self: center; aspect-ratio: 9 / 16; background: var(--film-bg); border-radius: 6px; overflow: hidden; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px 0 18px;
  background: var(--cream); color: var(--ink-brand); border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 660; font-stretch: 106%; white-space: nowrap;
}
.play:hover { background: #FFFFFF; }
.play:focus-visible { outline-color: var(--cream); }
@media (min-width: 900px) {
  .cinema-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: clamp(48px, 7vw, 120px); align-items: center; }
  .film-frame { justify-self: end; }
}

/* ---------- section heads ---------- */
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p { color: var(--ink-2); font-size: var(--s1); line-height: 1.45; }
@media (min-width: 960px) {
  .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px; align-items: end; }
  .sec-head p { padding-bottom: 6px; }
}

/* ---------- how it works ---------- */
.how { padding-block: var(--sec); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px 24px; }
.step { display: grid; gap: 14px; align-content: start; }
.step figure { margin: 0 0 6px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--film-bg); }
.step img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { display: flex; align-items: center; gap: 12px; }
.step p { color: var(--ink-2); }
.how > .wrap > .note { margin-top: 28px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.balloon {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--orange); color: var(--ink);
  font-size: var(--s-1); font-weight: 700; font-stretch: 100%; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- the drawing ---------- */
.design { padding-block: 0 var(--sec); }
.sheet { border: 1.5px solid var(--rule-strong); background: var(--paper); }
.elevation { border-bottom: 1px solid var(--rule); padding: clamp(10px, 2vw, 20px) clamp(4px, 1.5vw, 16px) 0; }
.elev-in { position: relative; }
.elevation img { width: 100%; }
.elevation svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.elevation .dim { stroke: var(--ink-2); stroke-width: 1; fill: none; }
.elevation .ext { stroke: var(--ink-2); stroke-width: 0.75; stroke-dasharray: 3 3; fill: none; opacity: .8; }
.elevation .arrow { fill: var(--ink-2); }
.elevation .ldr { stroke: var(--orange); stroke-width: 1.25; fill: none; }
.elevation .dot { fill: var(--orange); }
.tag { position: absolute; transform: translate(-50%, -50%); background: var(--paper); }
.dimtxt {
  position: absolute; transform: translate(-50%, -50%);
  padding: 0 6px; background: var(--paper);
  font-size: var(--s-1); font-weight: 620; font-stretch: 78%; font-variant-numeric: tabular-nums; color: var(--ink);
}
.dimtxt.v { transform: translate(-50%, -50%) rotate(-90deg); }
.sheet-foot { display: grid; }
.legend { list-style: none; margin: 0; padding: 22px; display: grid; gap: 18px 28px; align-content: start; }
.legend li { display: flex; gap: 12px; align-items: flex-start; }
.legend li div { display: grid; gap: 2px; }
.legend b { font-weight: 680; font-stretch: 104%; }
.legend span:not(.balloon) { color: var(--ink-2); font-size: var(--s-1); line-height: 1.45; }
.titleblock { border-collapse: collapse; width: 100%; font-size: var(--s-1); border-top: 1px solid var(--rule); }
.titleblock th, .titleblock td { text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.titleblock tr:last-child th, .titleblock tr:last-child td { border-bottom: 0; }
.titleblock th { font-weight: 560; font-stretch: 80%; color: var(--ink-2); width: 42%; letter-spacing: 0.01em; }
.titleblock td { font-weight: 600; }
.titleblock .num { font-variant-numeric: tabular-nums; }
.design > .wrap > .note { margin-top: 16px; }
@media (min-width: 720px) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px; } }
@media (min-width: 1040px) {
  .sheet-foot { grid-template-columns: minmax(0, 1fr) 380px; }
  .titleblock { border-top: 0; border-left: 1.5px solid var(--rule-strong); }
  .titleblock tr:first-child th, .titleblock tr:first-child td { padding-top: 14px; }
}
@media (max-width: 640px) {
  .elevation .dot { display: none; }
  .tag .balloon { width: 24px; height: 24px; font-size: var(--s-2); }
}

/* ---------- maker ---------- */
.maker { padding-block: 0 var(--sec); }
.maker-grid { display: grid; gap: 36px; }
.maker-fig { margin: 0; }
.maker-fig img { width: 100%; border-radius: 4px; background: var(--film-bg); }
.maker-fig figcaption { font-size: var(--s-2); color: var(--ink-2); margin-top: 10px; }
.maker-copy { display: grid; gap: 20px; align-content: center; }
.maker-copy p:not(.sig) { font-size: var(--s1); line-height: 1.5; }
.sig { display: grid; gap: 2px; margin-top: 6px; }
.sig span:first-child { font-weight: 720; font-stretch: 112%; font-size: var(--s2); }
.sig span:last-child { color: var(--ink-2); font-size: var(--s-1); }
@media (min-width: 900px) {
  .maker-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .maker-fig { grid-column: 1 / span 6; }
  .maker-copy { grid-column: 8 / -1; }
}

/* ---------- waitlist ---------- */
.waitlist { background: var(--paper-2); padding-block: var(--sec); }
.wl-grid { display: grid; gap: 36px; }
.wl-intro { display: grid; gap: 18px; align-content: start; }
.wl-intro p { font-size: var(--s1); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.wl-box { min-width: 0; }
#wl-form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 640; font-stretch: 104%; padding: 0; }
.field > legend { margin-bottom: 8px; }
input[type="email"], select {
  width: 100%; min-height: 54px; padding: 0 14px;
  font: inherit; font-size: var(--s0); color: var(--ink);
  background: var(--field); border: 1.5px solid var(--rule); border-radius: 4px;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input[type="email"]:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
input[aria-invalid="true"] { border-color: var(--orange); }
/* offer picker: the finished product is the big, pre-selected card; the other three are small chips below it */
.offers { display: grid; gap: 10px; }
.offer-main { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border: 2px solid var(--rule); border-radius: 6px; background: var(--field); cursor: pointer; }
.offer-main input { accent-color: var(--accent); width: 22px; height: 22px; margin: 3px 0 0; flex: none; }
.om-text { display: grid; gap: 4px; }
.om-text b { font-size: var(--s1); font-weight: 720; font-stretch: 108%; line-height: 1.2; }
.om-text span { color: var(--ink-2); font-size: var(--s-1); line-height: 1.45; }
.offer-main:has(input:checked) { border-color: var(--accent); background: var(--chip-on); }
.offer-main:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips { display: grid; gap: 8px; }
.chip { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--rule); border-radius: 4px; background: var(--field); cursor: pointer; font-size: var(--s-1); line-height: 1.3; }
.chip input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--chip-on); }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 560px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.err { color: var(--orange); font-size: var(--s-1); font-weight: 600; }
.fine { font-size: var(--s-1); color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-done { display: grid; gap: 12px; padding: 28px; border: 1.5px solid var(--accent); border-radius: 4px; background: var(--field); }
.wl-done h3 { font-size: var(--s2); }
.wl-done:focus { outline: none; }
@media (min-width: 960px) {
  .wl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .wl-intro { grid-column: 1 / span 5; }
  .wl-box { grid-column: 7 / -1; }
}

/* ---------- faq ---------- */
.faq { padding-block: var(--sec); }
.faq h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.faq dl { margin: 0; border-bottom: 1px solid var(--rule); }
.qa { border-top: 1px solid var(--rule); padding-block: 22px; display: grid; gap: 8px; }
.qa dt { font-weight: 680; font-stretch: 104%; font-size: var(--s1); line-height: 1.3; }
.qa dd { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) { .qa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .qa dt { grid-column: 1 / span 5; } .qa dd { grid-column: 7 / -1; } }

/* ---------- footer ---------- */
.foot { border-top: 1.5px solid var(--rule-strong); padding-block: 40px 48px; }
.foot-grid { display: grid; gap: 24px; }
.foot-brand { display: grid; gap: 10px; }
.logo-foot svg { height: 30px; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.handle { color: var(--ink-2); font-weight: 450; }
.foot-small { font-size: var(--s-2); color: var(--ink-2); max-width: none; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1fr auto; align-items: start; } .foot-small { grid-column: 1 / -1; } }

/* ---------- privacy page ---------- */
.legal { padding-block: 24px var(--sec); }
.legal .wrap > * + * { margin-top: 18px; }
.legal h1 { font-size: var(--s4); font-weight: 760; font-stretch: 112%; line-height: 1.05; }
.legal h2 { font-size: var(--s1); font-stretch: 106%; margin-top: 36px; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}