/* ==========================================================================
   Unframe — editorial light system
   Concept: the page borrows the vernacular of a design canvas (selection
   frames, layer labels, dimension tags) and then releases it. Blue is
   reserved for "still selected" UI; released content is ink.
   ========================================================================== */

:root {
  /* Surface — deliberately cool. Warm near-whites read as craft/paper;
     this product is about digital files, so the canvas stays screen-neutral. */
  --canvas:     #F5F6F8;
  --surface:    #FFFFFF;
  --canvas-2:   #EFF1F4;

  /* Ink */
  --ink:        #0B0D12;
  --ink-2:      #454B57;
  --ink-3:      #616874;   /* ≥4.96:1 on every surface here */

  /* Rules */
  --line:       #E1E4EA;
  --line-soft:  #EDEFF3;

  /* Selection — the one accent, used only for canvas UI and primary action */
  --sel:        #2154F5;
  --sel-deep:   #1740CE;
  --sel-soft:   #EDF2FF;

  --danger:     #B3261E;   /* 5.9:1 on surface */

  /* Type — one voice family across display and body, carried by its optical
     size axis, plus a mono that does all the data and label work. */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sans:    "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;

  --shell: 1120px;
  --radius: 3px;

  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Semantic layers, so nothing ever needs a 9999 */
  --z-sticky: 50;
  --z-skip:   90;
}

/* ── Reset ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { text-wrap: pretty; }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--canvas-2);
  padding: 0.1em 0.36em;
  border-radius: 2px;
}

::selection { background: var(--sel); color: #fff; }

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

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s4); top: -60px; z-index: var(--z-skip);
  background: var(--ink); color: #fff;
  padding: 13px 18px; font-size: 14px; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s4); }

/* ── Layout ──────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.shell--narrow { max-width: 760px; }

.section { padding-block: clamp(72px, 11vw, 128px); }
.section--canvas { background: var(--canvas-2); }

/* ── Type roles ──────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border: 1.5px solid var(--sel);
  flex: none;
}
.eyebrow__meta {
  color: var(--ink-3);
  opacity: .7;
  letter-spacing: .08em;
  text-transform: none;
}

.display {
  font-family: var(--display);
  font-size: clamp(42px, 8vw, 96px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.036em;
  text-wrap: balance;
  margin: 0;
}
.display em { font-style: normal; font-weight: 800; }

.h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin-bottom: var(--s7);
  max-width: 24ch;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin-top: var(--s5);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn__arrow { width: 15px; height: 15px; flex: none; transition: transform .22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--sel); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--sel-deep); }

.btn--ghost { --btn-fg: var(--ink); border-color: var(--line); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--lg { min-height: 56px; padding: 0 var(--s6); font-size: 17px; }

.btn:active { transform: translateY(1px); }

/* ── Masthead ────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--canvas) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--line); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s2);   /* lifts the hit area to 44px */
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__glyph { width: 19px; height: 19px; color: var(--sel); flex: none; }

.masthead__nav {
  display: flex;
  gap: var(--s5);
  margin-left: auto;
  font-size: 14.5px;
  color: var(--ink-2);
}
.masthead__nav a {
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.masthead__cta { min-height: 44px; padding: 0 var(--s4); font-size: 14px; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(64px, 10vw, 120px) clamp(56px, 8vw, 96px); }

.stage { position: relative; }

/* Signature: a design-canvas selection frame that releases the headline. */
.frame {
  position: absolute;
  inset: -22px clamp(-14px, -2vw, -28px) -18px clamp(-14px, -2vw, -28px);
  border: 1px solid var(--sel);
  pointer-events: none;
  opacity: 1;
}
.frame__tag {
  position: absolute;
  top: -1px; left: -1px;
  transform: translateY(-100%);
  background: var(--sel);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  padding: 3px 7px;
  white-space: nowrap;
}
.frame__handle {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--surface);
  border: 1.5px solid var(--sel);
}
.frame__handle--tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.frame__handle--tr { top: 0; right: 0; transform: translate(50%, -50%); }
.frame__handle--bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.frame__handle--br { bottom: 0; right: 0; transform: translate(50%, 50%); }

/* The release, staged: handles pop off, then the outline lets go. */
.js .frame,
.js .frame__handle,
.js .frame__tag { will-change: opacity, transform; }

.js .frame { transition: opacity .5s var(--ease) .24s, transform .6s var(--ease) .24s; }
.js .frame__handle { transition: opacity .26s var(--ease), transform .26s var(--ease); }
.js .frame__tag { transition: opacity .3s var(--ease); }

.js .stage.is-released .frame { opacity: 0; transform: scale(1.015); }
.js .stage.is-released .frame__tag { opacity: 0; }
.js .stage.is-released .frame__handle--tl { opacity: 0; transform: translate(-50%, -50%) scale(0); }
.js .stage.is-released .frame__handle--tr { opacity: 0; transform: translate(50%, -50%) scale(0); }
.js .stage.is-released .frame__handle--bl { opacity: 0; transform: translate(-50%, 50%) scale(0); }
.js .stage.is-released .frame__handle--br { opacity: 0; transform: translate(50%, 50%) scale(0); }

/* ── Export form ─────────────────────────────────────────────────────── */

.export { margin-top: clamp(40px, 5vw, 64px); max-width: 640px; }

.export__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s3);
}

.export__row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.export__row:focus-within {
  border-color: var(--sel);
  box-shadow: 0 0 0 3px var(--sel-soft);
}
.export__row:has(.export__input[aria-invalid="true"]) { border-color: var(--danger); }

.export__scheme {
  display: flex; align-items: center;
  padding-left: var(--s4);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-3);
  flex: none;
}

.export__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  min-height: 46px;
  padding: 15px var(--s3);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
}
/* The placeholder teaches the expected URL shape, so it has to be readable. */
.export__input::placeholder { color: var(--ink-3); opacity: 1; }
.export__input:focus { outline: none; }

.export__submit { margin: 5px; flex: none; }

.export__error {
  margin-top: var(--s3);
  font-size: 14px;
  color: var(--danger);
}

.export__note {
  margin-top: var(--s3);
  font-size: 14px;
  color: var(--ink-3);
}

/* ── Export options ──────────────────────────────────────────────────── */

.opts { margin-top: var(--s4); max-width: 640px; }
.opts > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block: 6px;
}
.opts > summary::-webkit-details-marker { display: none; }
.opts > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}
.opts[open] > summary::before { transform: rotate(45deg); }
.opts > summary:hover { color: var(--ink); }

.opts__body {
  display: grid;
  gap: var(--s5);
  padding: var(--s5) 0 var(--s2);
}
.opts__field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--s2);
}
.opts__field input[type="number"] {
  width: 96px;
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
}
.opts__control { display: flex; align-items: center; gap: var(--s3); }
.opts__control label { margin-bottom: 0; }
.opts__field input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--sel);
  flex: none;
  cursor: pointer;
}
.opts__hint {
  margin-top: var(--s2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 56ch;
}

/* ── Export console ──────────────────────────────────────────────────── */

.console {
  margin-top: var(--s5);
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.console.is-done { border-color: var(--sel); }
.console.is-error { border-color: var(--danger); }

.console__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.console__title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.console__host {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chip {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--canvas-2);
  border: 1px solid var(--line);
  padding: 3px 7px;
  border-radius: 2px;
}
.console.is-done .chip { color: #fff; background: var(--sel); border-color: var(--sel); }
.console.is-error .chip { color: #fff; background: var(--danger); border-color: var(--danger); }

.console__body { padding: var(--s5) var(--s4) var(--s4); }

.meter {
  height: 4px;
  background: var(--canvas-2);
  border-radius: 2px;
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 2%;
  background: var(--sel);
  border-radius: 2px;
  transition: width .45s var(--ease);
}
.console.is-error .meter__fill { background: var(--danger); }

/* Queued has nothing to count, so the bar breathes instead of lying. */
.meter.is-waiting .meter__fill { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}
.counts dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.counts dd {
  margin: var(--s1) 0 0;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.console__status {
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  min-height: 2.4em;
}
.console.is-error .console__status { color: var(--danger); }

.console__done {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}
.console__done .btn { width: 100%; }
.btn__arrow--down { width: 14px; height: 14px; }
.btn:hover .btn__arrow--down { transform: translateY(2px); }
.console__keep {
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

/* ── Beta notice ─────────────────────────────────────────────────────── */

.beta {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--sel-soft);
  border: 1px solid #C9D8FF;
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  text-align: center;
}
.beta strong { color: var(--ink); font-weight: 600; }

.permission {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ── Output ──────────────────────────────────────────────────────────── */

.swap {
  display: grid;
  gap: var(--s2);
  max-width: 540px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.swap__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 13px var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 14px;
}
.swap__mark { width: 8px; height: 8px; flex: none; border: 1.5px solid currentColor; }

.swap__bar--framed { border-color: var(--sel); color: var(--sel); }
.swap__bar--framed .swap__url { color: var(--ink-2); }

.swap__bar--free { border-color: var(--ink); color: var(--ink); }
.swap__bar--free .swap__mark { background: var(--ink); }

.swap__url { font-weight: 500; min-width: 0; }

.swap__where {
  margin-left: auto;
  padding-left: var(--s3);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.swap__joint {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  padding-left: var(--s5);
  line-height: 1;
}

.output {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* min-width: 0 so the wide <pre> scrolls inside .scroller instead of
   stretching the grid column past the viewport. */
.output__tree {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5) 0 var(--s5) var(--s5);
}
.output__notes { min-width: 0; }
.scroller { overflow-x: auto; padding-right: var(--s5); }

.tree {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-2);
  white-space: pre;
}
.tree__root { color: var(--ink); font-weight: 500; }
.tree__size { color: var(--ink-3); }
.tree__note {
  color: var(--sel);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.output__notes p {
  color: var(--ink-2);
  font-size: 16.5px;
  margin-bottom: var(--s4);
  max-width: 46ch;
}

.stats {
  margin-top: var(--s6);
  border-top: 1px solid var(--line);
}
.stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.stats dt { font-size: 14px; color: var(--ink-3); }
.stats dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Spec list ───────────────────────────────────────────────────────── */

.spec { border-top: 1px solid var(--line); }

.spec__row {
  display: grid;
  gap: var(--s2) var(--s7);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
}
.spec__row dt {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.spec__row dd {
  margin: 0;
  color: var(--ink-2);
  max-width: 60ch;
}
.spec__row--mark dt { color: var(--sel); }

/* ── Pricing ─────────────────────────────────────────────────────────── */

.cycle {
  display: inline-flex;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--s7);
}
.cycle__btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cycle__btn:hover { color: var(--ink); }
.cycle__btn.is-on { background: var(--ink); color: #fff; }
.cycle__save {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sel);
  background: var(--sel-soft);
  padding: 2px 6px;
  border-radius: 2px;
}
.cycle__btn.is-on .cycle__save { background: rgba(255,255,255,.15); color: #fff; }

/* No align-items here: cards stretch to a shared height so the CTAs line up. */
.plans { display: grid; gap: var(--s4); }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6) var(--s5) var(--s5);
}
.plan--lead {
  border-color: var(--sel);
  box-shadow: 0 1px 0 var(--sel), 0 18px 40px -28px rgba(33, 84, 245, .55);
}
.plan__badge {
  position: absolute;
  top: 0; left: var(--s5);
  transform: translateY(-50%);
  background: var(--sel);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.plan__name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan__price {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: var(--s4);
}
.plan__num {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: 15px; color: var(--ink-3); }
.plan__cycle { font-size: 13px; color: var(--ink-3); margin-top: var(--s2); min-height: 20px; }
.plan__for {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-top: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line-soft);
}
.plan__list { margin-top: var(--s5); display: grid; gap: var(--s3); }
.plan__list li {
  position: relative;
  padding-left: var(--s5);
  font-size: 14.5px;
  color: var(--ink-2);
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 9px; height: 2px;
  background: var(--sel);
}
.plan__cta { margin-top: var(--s6); width: 100%; }
.plan__list + .plan__cta { margin-top: auto; }
.plan__list { margin-bottom: var(--s6); }

.oneoff {
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  text-align: center;
  color: var(--ink-2);
}
.oneoff strong { color: var(--ink); font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

/* Narrow for reading, but flush left so it lines up with every other section. */
.faq { border-top: 1px solid var(--line); max-width: 820px; }

.qa { border-bottom: 1px solid var(--line); }
.qa > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color .18s var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--sel); }
.qa > summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-left: auto;
  margin-top: .34em;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 1.5px 12px no-repeat;
  transition: transform .25s var(--ease), background-size .25s var(--ease);
}
.qa[open] > summary::after { transform: rotate(90deg); background-size: 12px 1.5px, 0 12px; }

.qa__body { padding-bottom: var(--s5); max-width: 62ch; }
.qa__body p { color: var(--ink-2); margin-bottom: var(--s3); }
.qa__body p:last-child { margin-bottom: 0; }

/* ── Closer ──────────────────────────────────────────────────────────── */

.closer {
  padding-block: clamp(88px, 13vw, 152px);
  background: var(--ink);
  color: var(--canvas);
  text-align: center;
}
.closer__line {
  font-family: var(--display);
  font-size: clamp(36px, 6.6vw, 82px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin-bottom: var(--s7);
}
.closer__line em { font-style: normal; font-weight: 800; }
.closer__note {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #8B93A1;
}
.closer .btn--primary { --btn-bg: var(--sel); }
.closer .btn--primary:hover { --btn-bg: #3B69FF; }
.closer :focus-visible { outline-color: #fff; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer { background: var(--canvas); padding-block: var(--s8) var(--s6); }

.footer__inner {
  display: grid;
  gap: var(--s7);
  padding-bottom: var(--s7);
}
.footer__tag {
  margin-top: var(--s4);
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: 40ch;
}
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.footer__nav div { display: grid; gap: var(--s2); align-content: start; }
.footer__head {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}
.footer__nav a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
  justify-self: start;
  transition: color .18s var(--ease);
}
.footer__nav a:hover { color: var(--sel); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

/* No scroll-reveal here by choice: content is never hidden behind a script.
   The hero release is the page's one piece of orchestrated motion. */

/* ── Breakpoints ─────────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .spec__row { grid-template-columns: minmax(200px, 15.5vw) minmax(0, 1fr); }
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

@media (min-width: 900px) {
  .output { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .plans { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

@media (max-width: 899px) {
  .plan--lead { order: -1; }
}

@media (max-width: 860px) {
  .masthead__nav { display: none; }
  .masthead__cta { margin-left: auto; }
}

@media (max-width: 560px) {
  /* Scheme and field stay on one line; the button takes its own full-width row. */
  .export__row { flex-wrap: wrap; padding-bottom: 6px; }
  .export__input { flex: 1 1 0; padding: 14px var(--s4) 10px var(--s2); }
  .export__submit { flex: 1 0 100%; margin: 0 6px; }
  .frame { inset: -16px -12px -14px -12px; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }
  /* The two URLs carry the story on their own; the hosting labels don't fit. */
  .swap__where { display: none; }
  .swap__bar { font-size: 13px; }
}

/* ── Motion preferences ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .frame { display: none; }
}