/* ==========================================================================
   OpenAccessBridge — waitlist page
   Rebuilt as a single responsive page from the SimpleDCP "Industry" design
   system. Two grounds: auditorium (dark, default) and paper (light).
   Everything is square (border-radius:0), hairlines are 1px, no shadows.
   ========================================================================== */

/* ---- Tokens: auditorium (dark) is the default ground --------------------- */
:root {
  color-scheme: dark;
  --color-bg: #0f1317;
  --color-surface: #161c21;
  --color-text: #f2f2f3;
  --color-divider: color-mix(in srgb, #f2f2f3 22%, transparent);
  --color-accent: #94bce3;
  --oab-muted: color-mix(in srgb, #f2f2f3 72%, transparent);
  --oab-faint: color-mix(in srgb, #f2f2f3 52%, transparent);
  --oab-corner: color-mix(in srgb, #f2f2f3 55%, transparent);

  /* Fixed accent steps for button states (theme-independent, per Industry). */
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  /* Fluid layout — the two artboards (1440 / 390) are the two ends. */
  --gutter: clamp(20px, 5.5vw, 96px);
  --sec-top: clamp(52px, 8vw, 104px);
  --content-max: 1248px;
}

/* ---- Paper ground (light) ------------------------------------------------ */
[data-theme="paper"] {
  color-scheme: light;
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-divider: color-mix(in srgb, #1d1f20 20%, transparent);
  --color-accent: #416180;
  --oab-muted: color-mix(in srgb, #1d1f20 76%, transparent);
  --oab-faint: color-mix(in srgb, #1d1f20 72%, transparent);
  --oab-corner: color-mix(in srgb, #1d1f20 55%, transparent);
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-bg);
  padding: 10px 16px; font-family: var(--font-heading); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.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;
}

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

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}
h1 {
  font-size: clamp(42px, 8.2vw, 86px);
  line-height: 1.045;
  letter-spacing: .01em;
  margin: 0 0 36px;
}
h1 span { display: block; }
h2 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: .01em;
  margin: 0 0 24px;
}
h3 {
  font-size: clamp(24px, 2.4vw, 27px);
  line-height: 1.12;
  letter-spacing: .02em;
  margin: 0 0 12px;
}
p { margin: 0; }

.kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 12px;
}
hr.rule {
  height: 1px; border: 0; margin: 0 0 40px;
  background: var(--color-divider);
}
.lead {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--oab-muted);
}
.muted { color: var(--oab-muted); }
.faint { color: var(--oab-faint); }

/* ---- Layout scaffolding -------------------------------------------------- */
.section { padding: var(--sec-top) var(--gutter) 0; }
.inner { max-width: var(--content-max); margin-inline: auto; }

/* ---- Blueprint frame (the system's signature) --------------------------- */
.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: var(--oab-corner);
  pointer-events: none;
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* Duotone image treatment (appliance photo) */
.blueprint.duotone { overflow: visible; }
.duotone { position: relative; }
.duotone > img { filter: grayscale(1); }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent; border-radius: 0;
  padding: 9px 16px;
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: progress; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  display: flex; align-items: center; gap: 28px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--color-divider);
}
.wordmark {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 21px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-text);
}
.byline { font-size: 13px; letter-spacing: .04em; color: var(--oab-faint); }
.brand { display: flex; align-items: baseline; gap: 14px; }
.site-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.site-nav a {
  font-size: 14px; color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.site-nav a:hover { border-bottom-color: var(--color-accent); color: var(--color-text); }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.site-nav + .header-actions { margin-left: 0; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--color-divider); border-radius: 0;
  background: transparent; color: var(--color-text); cursor: pointer;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.theme-toggle:active { background: color-mix(in srgb, var(--color-text) 15%, transparent); }
.icon-moon { display: none; }
[data-theme="paper"] .icon-sun { display: none; }
[data-theme="paper"] .icon-moon { display: block; }

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "kicker figure"
    "rule   figure"
    "h1     figure"
    "lead   figure"
    "form   figure";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: 0 var(--gutter);
}
.hero__kicker { grid-area: kicker; margin-top: var(--sec-top); }
.hero__rule   { grid-area: rule; }
.hero__h1     { grid-area: h1; }
.hero__lead   { grid-area: lead; margin-bottom: 40px; }
.hero__capture{ grid-area: form; }
.hero__figure {
  grid-area: figure; align-self: stretch; position: relative; min-height: 640px;
}
.hero__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; filter: grayscale(1);
}

/* Email capture (hero + inline note) */
.capture { display: flex; flex-direction: column; gap: 12px; }
.note { font-size: 13px; line-height: 20px; color: var(--oab-faint); margin: 0; }

/* ---- Spec strip ---------------------------------------------------------- */
.spec-section { padding: 48px var(--gutter) 0; }
.spec { display: grid; grid-template-columns: repeat(4, 1fr); }
.spec-cell { padding: 18px 24px; }
.spec-cell + .spec-cell { border-left: 1px solid var(--color-divider); }
.spec-label {
  display: block; font-family: var(--font-heading);
  font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--oab-faint); margin-bottom: 4px;
}
.spec-value {
  font-family: var(--font-heading); font-size: 20px;
  letter-spacing: .02em; text-transform: uppercase;
}

/* ---- Two-column section grids ------------------------------------------- */
.grid-6-6 {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.grid-5-7 {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.measure { max-width: 52ch; }
.measure-sm { max-width: 44ch; }

/* Problem term rows */
.term-list { display: grid; }
.term-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--color-divider);
}
.term-row:last-child { border-bottom: 1px solid var(--color-divider); }
.term {
  font-family: var(--font-heading); font-size: 19px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--color-accent);
}
.term-desc { font-size: 16px; line-height: 26px; color: var(--oab-muted); }

/* ---- Card grids (how it works / who it's for) --------------------------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.card-pad { padding: 24px; }
.card-pad-lg { padding: 28px; }
.step-kicker {
  display: block; font-family: var(--font-heading);
  font-size: 13px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 8px;
}
.card-body { font-size: 16px; line-height: 26px; color: var(--oab-muted); }
.diagram { display: block; color: var(--color-text); margin-bottom: 20px; width: 100%; }

/* ---- Schematic figure ---------------------------------------------------- */
.figure-plate { margin: 56px 0 0; padding: 32px 36px 24px; }
.figure-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-size: 13px;
  letter-spacing: .11em; text-transform: uppercase;
}
.figure-head .sheet { color: var(--oab-faint); }
.schematic { display: block; color: var(--color-text); width: 100%; }
.schematic--mobile { display: none; max-width: 360px; margin-inline: auto; }
.schematic-legend { display: none; gap: 8px; margin-top: 16px; }
.schematic-legend span {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--oab-faint);
}
figcaption { font-size: 14px; line-height: 22px; color: var(--oab-faint); }
.figcap-mt { margin-top: 20px; max-width: 80ch; }

/* ---- Appliance plate ----------------------------------------------------- */
.appliance-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plate { padding: 0 32px 8px; }
.plate-head-row, .plate-row {
  display: grid; grid-template-columns: 64px minmax(0, 300px) minmax(0, 1fr);
  gap: 32px;
}
.plate-head-row {
  padding: 22px 0;
  font-family: var(--font-heading); font-size: 12px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--oab-faint);
}
.plate-head-mobile { display: none; }
.plate-row { padding: 24px 0; border-top: 1px solid var(--color-divider); align-items: baseline; }
.plate-no { font-family: var(--font-heading); font-size: 14px; letter-spacing: .1em; color: var(--color-accent); }
.plate-what { font-family: var(--font-heading); font-size: 23px; letter-spacing: .02em; text-transform: uppercase; }
.plate-means { font-size: 16px; line-height: 26px; color: var(--oab-muted); }

/* ---- Waitlist form ------------------------------------------------------- */
.notes-list { display: grid; border-top: 1px solid var(--color-divider); margin-top: 8px; }
.notes-list span {
  padding: 16px 0; font-size: 15px; line-height: 24px; color: var(--oab-faint);
  border-bottom: 1px solid var(--color-divider);
}
.notes-list span:last-child { border-bottom: 0; }

form.waitlist { display: grid; gap: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; }
.field > label {
  font-size: 14px; margin-bottom: 6px; color: var(--color-text);
}
.field .req { color: var(--color-accent); }
.input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 92px; resize: vertical; line-height: 26px; }

fieldset.chips { border: 0; margin: 0; padding: 0; }
fieldset.chips legend {
  font-size: 14px; color: var(--oab-muted); padding: 0; margin-bottom: 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; font-size: 15px;
  border: 1px solid var(--color-divider); cursor: pointer; user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.chip:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  font-size: 15px; line-height: 24px; color: var(--oab-muted); cursor: pointer;
}
.consent input {
  width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-accent);
}
.form-foot {
  margin: 0; padding-top: 20px; border-top: 1px solid var(--color-divider);
  font-size: 15px; line-height: 24px; color: var(--oab-faint);
}
.form-error {
  margin: 0; font-size: 15px; line-height: 22px; color: var(--color-accent);
}
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success panels */
.success { padding: 40px; }
.success--sm { padding: 20px 22px; }
.success-title-lg {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(30px, 4vw, 38px); line-height: 1.05;
  letter-spacing: .02em; text-transform: uppercase; margin: 0 0 16px;
}
.success-title-sm {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 22px; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px;
}
.success-body { font-size: 15px; line-height: 24px; color: var(--oab-muted); margin: 0; }
.success-body-lg { font-size: 17px; line-height: 28px; color: var(--oab-muted); margin: 0; }
.is-hidden { display: none !important; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: var(--sec-top);
  padding: 40px var(--gutter) 56px;
  border-top: 1px solid var(--color-divider);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.footer-mark {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 19px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 6px;
}
.footer-disclaimer { margin: 0; max-width: 56ch; font-size: 14px; line-height: 22px; color: var(--oab-faint); }

/* ==========================================================================
   Responsive — collapse from the 1440 artboard toward the 390 one
   ========================================================================== */

/* 3-up card grids collapse to 2-up first */
@media (max-width: 1080px) {
  .cards-3 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* Primary mobile/tablet reflow */
@media (max-width: 860px) {
  .site-nav { display: none; }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "rule" "h1" "lead" "figure" "form";
    padding: var(--sec-top) var(--gutter) 0;
  }
  .hero__kicker { margin-top: 0; }
  .hero__lead { margin-bottom: 28px; }
  .hero__figure { min-height: 0; height: 470px; margin-bottom: 24px; }

  .cards-3 { grid-template-columns: 1fr; gap: 36px; }
  .grid-6-6, .grid-5-7 { grid-template-columns: 1fr; gap: 28px; }

  .term-row { grid-template-columns: 1fr; gap: 2px; padding: 16px 0; }
  .term-row:last-child { border-bottom: 1px solid var(--color-divider); }

  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  form.waitlist { gap: 20px; }
  .input { min-height: 48px; }

  /* Plate rows stack: number + title on one line, meaning below */
  .plate { padding: 0 18px 6px; }
  .plate-head-row { display: none; }
  .plate-head-mobile {
    display: block; padding: 16px 0;
    font-family: var(--font-heading); font-size: 11px;
    letter-spacing: .11em; text-transform: uppercase; color: var(--oab-faint);
  }
  .plate-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "no what" "means means";
    gap: 6px 12px; padding: 18px 0; align-items: baseline;
  }
  .plate-no { grid-area: no; }
  .plate-what { grid-area: what; font-size: 21px; }
  .plate-means { grid-area: means; font-size: 15px; line-height: 25px; }

  .figure-plate { padding: 20px; }
  .figure-head { flex-direction: column; gap: 2px; align-items: flex-start; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-disclaimer { text-align: left; }
}

/* Spec strip → 2×2, schematic → vertical, header CTA hidden on phones */
@media (max-width: 680px) {
  .spec { grid-template-columns: 1fr 1fr; }
  .spec-cell { padding: 14px 16px; }
  .spec-cell + .spec-cell { border-left: 0; }
  .spec-cell:nth-child(2n) { border-left: 1px solid var(--color-divider); }
  .spec-cell:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
  .spec-value { font-size: 17px; }

  .schematic--desktop { display: none; }
  .schematic--mobile { display: block; }
  .schematic-legend { display: grid; }
}

/* Final tightening toward the 390 artboard */
@media (max-width: 520px) {
  body { font-size: 16px; line-height: 26px; }
  .header-cta { display: none; }         /* hero capture is right below — matches the mobile artboard */
  .brand { flex-direction: column; gap: 2px; align-items: flex-start; }
  .header-actions { margin-left: auto; }
  .card-pad, .card-pad-lg { padding: 20px; }
}