/* launch.css: /launch, the Launch Build ad page (2026-10-05). Stands alone: it does not load site.css, go.css or
   remodel.css, so nothing here can move another page.
   One typeface (Overpass 400 and 800, the site's own), white, ink and the brass of the mark, hairline rules, a lot of
   space. Phone first: measured at 390 wide, checked at 320, 360 and 430. The page is the form: the hook, two lines and
   question one fill the first screen; the sample, what you get and who I am sit below it for the people who scroll.
   Each question is a div (not a fieldset), so its answers can sit at the bottom, where the thumb is. */

@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/overpass-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/overpass-latin-800-normal.woff2") format("woff2");
}

:root {
  --ink: #161616;
  --white: #FFFFFF;
  --brass: #B08A3E;
  --brass-hover: #A27F38;
  --steel: #5E5E5E;
  --line: #E4E4E4;
  --line-strong: #858585;
  --font: "Overpass", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: 20px;
  --head: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 17px/1.45 var(--font); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
input, button { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.lb-sr {
  position: absolute !important; left: 50%; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lb-skip {
  position: absolute; left: var(--gutter); top: -96px; z-index: 10; display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 16px; background: var(--ink); color: var(--white); font-weight: 800; text-decoration: none;
}
.lb-skip:focus { top: 8px; }
.lb-wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- The header: the arch and the name. Not a link: this page has no way around the questions. ---------- */
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--head); border-bottom: 1px solid var(--line); }
.lb-brand { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.lb-brand svg { width: auto; height: 18px; fill: var(--brass); flex: none; }
.lb-brand span { padding-top: 0.12em; }
/* The header is the mark and the name only. The price is said once, at question 4 (2026-10-11): no tag up here. */
@media (max-width: 389px) {
  .lb-brand { font-size: 14px; gap: 6px; }
}

/* ---------- The first screen: the hook, two short lines, then question one ---------- */
.js body:not([data-step="0"]) .lb-hero, .js body[data-done] .lb-hero,
.js body:not([data-step="0"]) .lb-below, .js body[data-done] .lb-below { display: none; }

.lb-hero { padding-top: 20px; }
.lb-h1 { font-size: clamp(30px, 8.6vw, 52px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.lb-kicker { margin-top: 10px; max-width: 24em; font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; color: var(--steel); text-wrap: balance; }
.lb-promise { margin-top: 12px; font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; text-wrap: pretty; }

.lb-btn {
  appearance: none; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 2px 24px 0;
  border: 0; border-radius: 3px; background: var(--brass); color: var(--ink); cursor: pointer; text-decoration: none;
  font-size: 18px; line-height: 1; font-weight: 800; transition: background-color 160ms var(--ease);
}
.lb-btn:hover { background: var(--brass-hover); }
.lb-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.lb-btn[disabled] { opacity: 0.6; cursor: default; }

/* ---------- The form: one question per screen ---------- */
.lb-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink); }
/* After question 1 the page is only the form: the title at the top, the answers down where the thumb is */
.js body:not([data-step="0"]) .lb-form {
  display: flex; flex-direction: column; margin-top: 0; padding-top: 22px; border-top: 0;
  min-height: calc(100vh - var(--head) - 64px); min-height: calc(100svh - var(--head) - 64px);
}
.lb-prog { display: flex; align-items: center; gap: 12px; min-height: 24px; margin-bottom: 12px; }
html:not(.js) .lb-prog { display: none; }
.lb-prog__label { flex: none; font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; padding-top: 0.15em; }
.lb-prog__bar { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 120px; }
.lb-prog__bar i { height: 3px; background: var(--line); transition: background-color 160ms var(--ease); }
.lb-prog__bar i.is-on { background: var(--ink); }
/* Back: a 48px tall tap target; the negative margins keep the progress row the height it was */
.lb-back {
  position: relative; z-index: 1;
  appearance: none; margin: -14px 0 -14px auto; padding: 14px 0 14px 16px; min-width: 48px; min-height: 48px;
  background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 800; line-height: 1;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.lb-hp { position: absolute; left: 50%; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }

.lb-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.js .lb-q { display: none; }
.js .lb-q.is-active { display: block; }
.js body:not([data-step="0"]) .lb-q.is-active { display: flex; flex: 1 1 auto; flex-direction: column; }
html:not(.js) .lb-q + .lb-q { margin-top: 40px; }
.lb-q__t { display: block; width: 100%; padding: 0; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
.lb-q__t:focus { outline: none; }

/* The answers: hairline rows, the whole row is the tap target */
.lb-opts { margin-top: 16px; border-top: 1px solid var(--ink); }
.js body:not([data-step="0"]) .lb-opts { margin-top: auto; }
.js body:not([data-step="0"]) .lb-q__t { margin-bottom: 26px; }
/* One plain line under a question title (question 4: what the $5,000 buys) */
.lb-q__sub { margin-top: -12px; margin-bottom: 26px; max-width: 30em; font-size: 17px; line-height: 1.35; color: var(--steel); text-wrap: pretty; }
html:not(.js) .lb-q__sub, .js body[data-step="0"] .lb-q__sub { margin-top: 10px; margin-bottom: 0; }
.lb-opt {
  position: relative; display: flex; align-items: center; min-height: 58px; padding: 12px 34px 10px 0;
  border-bottom: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.lb-opt:last-child { border-bottom-color: var(--ink); }
.lb-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lb-opt::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg);
}
/* A picked row fills edge to edge: the shadows carry the fill 14px past each side, so unpicked rows stay flush with the text above */
.lb-opt:has(input:checked) { background: var(--ink); color: var(--white); border-bottom-color: var(--ink); box-shadow: -14px 0 0 var(--ink), 14px 0 0 var(--ink); }
.lb-opt:has(input:focus-visible) { outline: 3px solid var(--brass); outline-offset: 4px; }
@media (hover: hover) {
  .lb-opt:hover { background: #F5F3EE; box-shadow: -14px 0 0 #F5F3EE, 14px 0 0 #F5F3EE; }
  .lb-opt:has(input:checked):hover { background: var(--ink); box-shadow: -14px 0 0 var(--ink), 14px 0 0 var(--ink); }
}
.lb-err { margin-top: 14px; font-size: 15px; line-height: 1.3; font-weight: 800; }

/* The last step: four fields, the best time to call, one optional box for texts, the brass button */
.lb-field { display: grid; gap: 6px; margin-top: 14px; }
.lb-q__t + .lb-field { margin-top: 22px; }
.lb-field label, .lb-times legend { font-size: 15px; line-height: 1.2; font-weight: 800; }
.lb-field label span { margin-left: 6px; font-weight: 400; color: var(--steel); }
.lb-field input {
  width: 100%; min-height: 52px; padding: 2px 14px 0; border: 1px solid var(--ink); border-radius: 2px; background: var(--white);
  font-size: 17px; line-height: 1.2;
}
.lb-field input:focus { outline: 3px solid var(--brass); outline-offset: 2px; }
.lb-field input[aria-invalid="true"] { border-width: 3px; padding: 0 12px 0; }
.lb-field__err { margin-top: 6px; font-size: 14px; line-height: 1.3; font-weight: 800; }
/* Best time to call: three equal choices on one hairline frame; the picked one fills. The word sits in the tap target. */
.lb-times { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.lb-times legend { padding: 0; margin-bottom: 6px; }
.lb-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: 2px; }
.lb-seg label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-seg label + label { border-left: 1px solid var(--ink); }
.lb-seg input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lb-seg span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 2px 4px 0;
  background: var(--white); color: var(--ink); font-size: 16px; line-height: 1; font-weight: 800; text-align: center;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.lb-seg input:checked + span { background: var(--ink); color: var(--white); }
.lb-seg input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: -3px; }
@media (hover: hover) {
  .lb-seg input:not(:checked):hover + span { background: #F5F3EE; }
}
.lb-times:has([aria-invalid="true"]) .lb-seg, .lb-seg[aria-invalid="true"] { border-width: 3px; }
@media (max-width: 349px) { .lb-seg span { font-size: 15px; } }
.lb-check { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; min-height: 44px; margin-top: 16px; padding: 6px 0; cursor: pointer; }
.lb-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lb-check__box { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 2px; background: var(--white); }
.lb-check__box svg { width: 16px; height: 16px; opacity: 0; }
.lb-check input:checked + .lb-check__box { background: var(--ink); }
.lb-check input:checked + .lb-check__box svg { opacity: 1; }
.lb-check input:focus-visible + .lb-check__box { outline: 3px solid var(--brass); outline-offset: 2px; }
.lb-check__text { font-size: 14px; line-height: 1.35; color: var(--steel); }
/* Privacy and Terms inside the consent line: padding grows each tap area past 48px; negative side margins give the width back */
.lb-check__text a { position: relative; z-index: 1; padding: 16px 3px 16px 6px; margin: 0 -3px 0 -6px; }
.lb-check__text a + a { padding: 16px 8px 16px 3px; margin: 0 -8px 0 -3px; }
.lb-send { margin-top: 16px; }
.js body:not([data-step="0"]) .lb-q--contact .lb-send { margin-top: auto; }
.js body:not([data-step="0"]) .lb-q--contact .lb-check { margin-bottom: 16px; }

/* ---------- The endings: the same white screen, the link down where the thumb is ---------- */
.lb-end { display: flex; flex-direction: column; padding: 32px 0 8px; }
.lb-end__t { font-size: clamp(33px, 9.4vw, 46px); line-height: 1; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.lb-end__t:focus { outline: none; }
.lb-end p { margin-top: 18px; font-size: 19px; line-height: 1.4; max-width: 28em; text-wrap: pretty; }
.lb-end .lb-end__sig { font-weight: 800; }
.lb-end .lb-btn { margin-top: 6px; }
.lb-end .lb-end__more { margin-top: auto; padding-top: 36px; max-width: none; }
.lb-end .lb-end__more--two { display: grid; gap: 12px; }
/* The way on: an outlined button, second to the brass one. Never hover only. */
.lb-link {
  appearance: none; cursor: pointer; font-family: inherit; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 2px 20px 0;
  border: 1.5px solid var(--ink); border-radius: 3px; background: var(--white); color: var(--ink); text-decoration: none;
  font-size: 18px; line-height: 1.1; font-weight: 800; text-align: center; transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.lb-link:active { background: var(--ink); color: var(--white); }
.lb-link:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
@media (hover: hover) { .lb-link:hover { background: #F5F3EE; } }
body[data-done="no"] .lb-end, body[data-done="pass"] .lb-end { min-height: calc(100vh - var(--head) - 110px); min-height: calc(100svh - var(--head) - 110px); }
body[data-done="no"] .lb-foot, body[data-done="pass"] .lb-foot { margin-top: 0; }

/* ---------- Below the form, for the people who scroll ---------- */
.lb-below { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
/* The sample: two phone screens side by side, the brand board under them, one caption. A missing file leaves its frame as a thin outline. */
.lb-sample { margin: 0 calc(-1 * var(--gutter)); }
.lb-shot { position: relative; width: 100%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lb-shot--phone { aspect-ratio: 520 / 1126; }
.lb-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lb-phones + .lb-shot { margin-top: 10px; }
.lb-shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-sample figcaption { margin: 14px var(--gutter) 0; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.3; color: var(--steel); }

.lb-sec { margin-top: 56px; }
.lb-h2 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: 24px; line-height: 1; letter-spacing: -0.03em; font-weight: 800; }

/* How it works: three rows, the numbers in the brass of the mark */
.lb-steps { counter-reset: step; }
.lb-steps li {
  counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline;
  padding: 18px 0 14px; border-bottom: 1px solid var(--line); font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
}
.lb-steps li::before { content: counter(step); font-size: 28px; line-height: 1; color: var(--brass); font-variant-numeric: lining-nums; }

/* What you get: a bold name, then one plain line */
.lb-gets li { display: grid; gap: 3px; padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.lb-gets strong { font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.lb-gets span { font-size: 17px; line-height: 1.35; color: var(--steel); }
.lb-gets .lb-gets__line { font-size: 17px; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; }
.lb-terms { margin-top: 28px; max-width: 24em; font-size: 20px; line-height: 1.35; letter-spacing: -0.005em; text-wrap: pretty; }
.lb-terms strong { font-weight: 800; }
.lb-addon { margin-top: 14px; max-width: 28em; font-size: 15px; line-height: 1.4; color: var(--steel); }
.lb-me { margin-top: 40px; max-width: 22em; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; }
.lb-below__go { margin-top: 28px; }
.lb-fire { margin-top: 56px; font-size: clamp(30px, 8.6vw, 44px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }

.lb-foot { margin-top: 56px; padding: 14px 0 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: 14px; line-height: 1.4; color: var(--steel); }
/* 48px tap targets; the negative side margin keeps the words where they were */
.lb-foot a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 6px; margin: 0 -6px; }

/* Wider than a phone: the same single column, centered, a little more air */
@media (min-width: 600px) {
  :root { --gutter: 28px; --head: 64px; }
  .lb-hero { padding-top: 48px; }
  .lb-sample { margin-left: 0; margin-right: 0; }
  .lb-sample figcaption { margin-left: 0; margin-right: 0; }
  .lb-shot { border-radius: 2px; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-opt, .lb-prog__bar i, .lb-btn, .lb-link, .lb-seg span { transition: none; }
}