/* Sitebound — sitebound.app landing page
   No webfonts, no analytics, no third-party CSS. Light and dark from prefers-color-scheme. */

:root {
  --paper:       #FAF8F4;
  --paper-2:     #F3EFE8;
  --paper-3:     #FFFFFF;
  --ink:         #16181C;
  --ink-2:       #43474E;
  --ink-3:       #5E636B;
  --rule:        #DED8CC;
  --rule-2:      #C6BEAE;
  --accent:      #C4442A;
  --accent-deep: #9C351F;
  --accent-soft: #F7E7E1;
  --accent-line: #E4BFB4;
  --focus:       #1B5FC4;
  --warn-bg:     #FDF3E2;
  --warn-line:   #D8B87A;
  --ok-bg:       #E9F2EA;
  --ok-line:     #9DBFA3;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap: clamp(2.75rem, 7vw, 6rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #14171B;
    --paper-2:     #191D22;
    --paper-3:     #1E232A;
    --ink:         #ECE9E3;
    --ink-2:       #B7BCC4;
    --ink-3:       #8E959E;
    --rule:        #2A3037;
    --rule-2:      #3C444D;
    --accent:      #FF7A5C;
    --accent-deep: #FF9578;
    --accent-soft: #2B1B16;
    --accent-line: #5A3428;
    --focus:       #6FA8FF;
    --warn-bg:     #2A2317;
    --warn-line:   #6B5628;
    --ok-bg:       #16241A;
    --ok-line:     #35543C;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--accent-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
h1, h2, h3 { line-height: 1.14; letter-spacing: -.021em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 650; }

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

.skip {
  position: absolute; left: .5rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: .5rem; }

.wrap { width: min(72rem, 100% - (var(--pad) * 2)); margin-inline: auto; }
.section { padding-block: var(--gap); }
/* the header is sticky, so an in-page jump has to stop short of it */
section[id], main[id] { scroll-margin-top: 5rem; }
.band { background: var(--paper-2); border-block: 1px solid var(--rule); padding-block: var(--gap); }

/* ── header ─────────────────────────────────────────────── */
/* Wordmark only. The five-item nav is gone: five choices before the first sentence,
   four of them leading away from the one action this page is for. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) { .site-head { background: var(--paper); } }
.head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 640; }
.brand-mark { flex: none; }
.brand-word { font-size: 1.16rem; letter-spacing: -.02em; }
.brand-tld { color: var(--ink-3); font-weight: 450; }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .68rem 1.15rem; border-radius: 7px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none;
  cursor: pointer; transition: background .15s ease, transform .12s ease;
}
@media (prefers-color-scheme: dark) { .btn { color: #14171B; } }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
@media (prefers-color-scheme: dark) { .btn:hover { color: #14171B; } }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }

/* ── shared type ────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 1rem;
}
.sec-h { font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.6rem); margin-bottom: .45em; }
.sec-lead { max-width: 46rem; color: var(--ink-2); font-size: 1.06rem; }
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: .9rem 1.1rem; border-radius: 0 7px 7px 0;
  font-size: .97rem; color: var(--ink-2); margin-block: 1.5rem;
}
.note strong { color: var(--ink); }

/* ── hero ───────────────────────────────────────────────── */
.hero { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(2.75rem, 6vw, 5.5rem) var(--gap); }
@media (min-width: 58rem) { .hero { grid-template-columns: 1.02fr .98fr; align-items: center; } }
.hero h1 { font-size: clamp(2.15rem, 1.2rem + 3.9vw, 3.6rem); letter-spacing: -.032em; margin-bottom: .38em; }
.lead { font-size: clamp(1.06rem, 1rem + .38vw, 1.22rem); color: var(--ink-2); max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-fig { margin: 0; }

/* A window onto the exported sheet, not a second copy of it. The SVG is served whole and
   unedited; the four numbers below are the only editorial decision, and they are the crop
   rectangle in the sheet's own millimetres — origin (296, 56), 516 wide, 544 tall, on a
   sheet 914.4 by 609.6. That window holds the whole plan, all four dimension chains, the
   FLOOR PLAN bubble with its scale, the graphic scale bar and the north arrow; the notes
   column and the title block sit outside it. Both margins resolve against the container's
   WIDTH, which is what makes the whole thing scale from one number:
       width      914.4 / 516 = 177.209%      margin-left  -296 / 516 = -57.364%
       aspect     516 / 544                   margin-top    -56 / 516 = -10.853%
   The paper stays white in dark mode on purpose: it is paper, and the file cannot be
   recoloured without making the caption's "unedited" a lie. */
.sheet-crop {
  position: relative; overflow: hidden;
  aspect-ratio: 516 / 544;
  background: #fff;
  border: 1px solid var(--rule-2); border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -12px rgb(0 0 0 / .22);
}
.sheet-crop img {
  display: block; position: relative;
  /* max-width: none, or the `img, svg { max-width: 100% }` reset pins the sheet to the
     window and you get the whole page shrunk into the frame instead of a crop of it. */
  width: 177.209%; max-width: none; height: auto;
  margin-left: -57.364%; margin-top: -10.853%;
}
/* The download line comes first and the caption last: `figcaption` must be the figure's first
   or last child, and the caption reads better as the closing note. */
.sheet-get {
  margin: .9rem 0 0; font-size: .84rem; color: var(--ink-3);
  max-width: 34rem; line-height: 1.5;
}
figcaption {
  margin-top: .55rem; font-size: .84rem; color: var(--ink-3);
  max-width: 34rem; line-height: 1.5;
}
.sheet-get a { color: var(--accent-deep); }

/* ── what it's for ──────────────────────────────────────── */
/* No counters and no numbering: the order these appear in is not a build order. */
.blocks {
  display: grid; gap: 1.1rem; margin-top: 2.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.block {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.5rem 1.4rem 1.35rem;
}
.block h3 { font-size: 1.06rem; margin: .95rem 0 .45rem; }
.block p { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.58; }
.ico { width: 34px; height: 34px; color: var(--accent); display: block; }

/* ── limits ─────────────────────────────────────────────── */
.limits { display: grid; gap: 0; margin-top: 2.25rem; border-top: 1px solid var(--rule); }
.limits li { border-bottom: 1px solid var(--rule); padding-block: 1.6rem; display: grid; gap: .35rem 2.5rem; }
@media (min-width: 58rem) { .limits li { grid-template-columns: 20rem 1fr; } }
.limits h3 { font-size: 1.08rem; margin: 0; }
.limits p { margin: 0; color: var(--ink-2); font-size: .97rem; max-width: 44rem; }

/* ── form ───────────────────────────────────────────────── */
.band-form { border-bottom: none; }
.form-wrap { max-width: 46rem; }
.field { border: 0; padding: 0; margin: 0 0 1.65rem; min-inline-size: 0; }
.field > label, legend {
  display: block; font-weight: 620; font-size: .97rem; margin-bottom: .4rem; padding: 0; color: var(--ink);
}
.req { color: var(--accent-deep); }
.opt { font-weight: 450; color: var(--ink-3); font-size: .84rem; letter-spacing: .01em; }
.hint { font-size: .87rem; color: var(--ink-3); margin: .1rem 0 .7rem; line-height: 1.5; }
.err { font-size: .87rem; color: var(--accent-deep); font-weight: 600; margin: .45rem 0 0; }

input[type="email"] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper-3); border: 1px solid var(--rule-2); border-radius: 7px;
  padding: .68rem .8rem; transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="email"]:hover { border-color: var(--ink-3); }
input[type="email"]:focus-visible { border-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }

.choices { display: grid; gap: .6rem; }
@media (min-width: 40rem) {
  .choices-2 { grid-template-columns: 1fr 1fr; }
  .choices-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 52rem) { .choices-5 { grid-template-columns: repeat(5, 1fr); } }
.choice {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--rule-2); border-radius: 9px; padding: .8rem .9rem;
  background: var(--paper-3); cursor: pointer;
  transition: border-color .13s ease, background .13s ease;
}
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice input { flex: none; margin: .28rem 0 0; accent-color: var(--accent); width: 1rem; height: 1rem; }
.choice span { display: block; }
.choice strong { display: block; font-size: .95rem; font-weight: 620; }

/* The price ladder: bare numbers, no explanatory sub-labels. A sub-label under a price
   primes the answer it is trying to measure. */
.field-price { padding: 1.4rem 1.3rem; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--paper); }
/* float the legend so a wrapped, multi-line question sits inside the box
   instead of straddling the top border */
.field-price legend { float: left; width: 100%; padding: 0; margin: 0 0 .45rem; }
.field-price > p, .field-price > .choices { clear: both; }
.choice-price { flex-direction: column; gap: .55rem; }
.choice-price .amt {
  font-family: var(--mono); font-size: 1.5rem; letter-spacing: -.03em;
  font-weight: 600; color: var(--ink);
}
.choice-price .amt-word {
  font-family: var(--sans); font-size: .88rem; line-height: 1.32;
  letter-spacing: 0; font-weight: 600;
}
.choice-price input { margin: 0; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 450 !important; font-size: .95rem !important; cursor: pointer; }
.check input { flex: none; margin: .3rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.turnstile { min-height: 4.5rem; }
.submit-row { display: grid; gap: .9rem; align-items: center; margin-top: 2rem; }
@media (min-width: 44rem) { .submit-row { grid-template-columns: auto 1fr; gap: 1.4rem; } }
.fineprint { font-size: .83rem; color: var(--ink-3); margin: 0; line-height: 1.5; }
.fineprint strong { color: var(--ink-2); }
.status { margin-top: 1rem; font-size: .95rem; font-weight: 600; color: var(--accent-deep); }
.status:empty { margin: 0; }

.alert { border-radius: 8px; padding: .9rem 1.1rem; font-size: .93rem; margin-bottom: 1.75rem; line-height: 1.55; }
.alert-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--ink); }
.success {
  background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 12px;
  padding: 1.75rem 1.6rem; max-width: 40rem;
}
.success h3 { font-size: 1.35rem; margin-bottom: .35em; }
.success p { color: var(--ink-2); }
.success p:last-child { margin-bottom: 0; }

/* The message someone lands on after clicking the link in the confirmation email.
   Above the hero, because it is the answer to the thing they just did. */
.confirm-note {
  background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 12px;
  padding: 1.5rem 1.6rem; margin-block: var(--pad) 0;
}
.confirm-note h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.6rem); margin-bottom: .4em; }
.confirm-note p { color: var(--ink-2); font-size: .98rem; }
.confirm-note p:last-child { margin-bottom: 0; }

/* ── faq ────────────────────────────────────────────────── */
.faq { margin-top: 2rem; border-top: 1px solid var(--rule); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 620; font-size: 1.03rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.55rem; width: .6rem; height: .6rem;
  border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:hover { color: var(--accent-deep); }
.faq p { padding: 0 2.5rem 1.35rem 0; margin: 0; color: var(--ink-2); font-size: .97rem; max-width: 44rem; }

/* ── footer ─────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--rule); background: var(--paper-2); padding-block: 3rem 2.25rem; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; }
.foot-brand { font-size: 1.15rem; font-weight: 640; margin: 0 0 .3rem; letter-spacing: -.02em; }
.foot-note { color: var(--ink-3); font-size: .89rem; margin: 0; max-width: 26rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-links a { color: var(--ink-2); font-size: .89rem; text-decoration: none; display: inline-block; padding-block: .18rem; }
.foot-links a:hover { color: var(--accent-deep); text-decoration: underline; }
.foot-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.foot-legal p { color: var(--ink-3); font-size: .8rem; line-height: 1.6; max-width: 52rem; margin-bottom: .6rem; }

/* ── privacy notice ─────────────────────────────────────── */
.doc { max-width: 44rem; }
.doc h2 { font-size: 1.25rem; margin-top: 2.5rem; }
.doc h2:first-of-type { margin-top: 1.5rem; }
.doc p, .doc li { color: var(--ink-2); font-size: .97rem; }
.doc ul { list-style: disc; padding-left: 1.2rem; margin: 0 0 1em; display: grid; gap: .4rem; }
.doc .table-scroll { overflow-x: auto; margin: 0 0 1.5em; }
.doc table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 30rem; }
.doc th, .doc td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 620; }
.doc td { color: var(--ink-2); }
.doc code { font-family: var(--mono); font-size: .88em; color: var(--ink); }
.todo {
  background: var(--warn-bg); border: 1px dashed var(--warn-line); border-radius: 4px;
  padding: 0 .35rem; font-family: var(--mono); font-size: .85em; color: var(--ink);
}
.back { display: inline-block; margin-bottom: 2rem; font-size: .9rem; }

/* ── motion ─────────────────────────────────────────────── */
@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; }
}

/* ── scripts off ────────────────────────────────────────── */
/* This lived in `<noscript><style>` in index.html's <head> until it was found to be dead on the
   deployment: the CSP in `_headers` sets `style-src 'self'` with no 'unsafe-inline', no nonce and
   no hash, so the browser refused the inline sheet and neither rule ever applied. A scripts-off
   visitor therefore got the form fully visible, its submit button disabled forever (main.js is
   what enables it, and main.js never ran), and no explanation — precisely the state the block was
   written to prevent, and invisible on the laptop preview because `serve.js` sent no CSP.

   `_headers` says: "Never add 'unsafe-inline'. If something is blocked, it belongs in main.js or
   styles.css." The `scripting` media feature is how that is done for this case — it is CSS, so
   the CSP has nothing to refuse, and it needs no class flip from JavaScript, so there is no flash
   of the wrong state before script runs. Baseline since 2023 (Firefox 113, Safari 17, Chrome 120).
   Browsers older than that match nothing here and fall back to the broken-but-no-worse behaviour
   this replaces. */
@media (scripting: none) {
  .needs-js { display: none !important; }
  .no-js-note { display: block !important; }   /* also overrides the `hidden` attribute */
}