/* ============================================================
   HyperC — landing-page messaging tests (/lp/*)
   Loaded AFTER landing.css, hustle.css and chapters.css. The
   palette is hustle.css's; the one-idea-per-screen pacing is
   chapters.css's. This file owns only the components the test
   pages add: a hero whose visual is the product's OUTPUT (a
   purchasing plan, not a VM or a robot), the recorded plan
   itself, the who-does-what table, the three kinds of demo,
   the starter instruction and the readiness routes — and, since
   2026-10-04, the intake questions, the code cards, the status tags
   and the experiment registry.

   Every page in /lp/ is generated by tools/build_lp.py. Edit
   the generator, not the pages.
   ============================================================ */

/* ---------- Hero ----------
   Copy on the left, a compact excerpt of the recorded plan on the
   right. The recommendation this tests is explicit that the first
   visual should be the output: a visitor who understands the card
   has understood the product. */
.lp-hero { padding: 64px 0 56px; }
.lp-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.lp-chip {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-line); background: var(--gold-wash);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 1.3rem;
}
.lp-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.06; max-width: 13em; }
.lp-lede {
  margin-top: 1.3rem; font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.55;
  color: var(--ink-dim); max-width: 32em;
}
.lp-lede strong { color: var(--ink); font-weight: 600; }
.lp-ctas { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-micro { margin-top: 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); max-width: 34em; }
@media (max-width: 900px) {
  .lp-hero .wrap { grid-template-columns: 1fr; }
  .lp-hero { padding: 40px 0 44px; }
}

/* The excerpt card. Mono, because it is a result, not a claim. */
.plan-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(19,25,38,0.10); padding: 22px 24px 20px;
  font-family: var(--mono); font-size: 0.86rem; color: var(--ink);
}
.pc-tag { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.pc-row { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.pc-row:last-of-type { border-bottom: 0; }
.pc-k { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.08em; padding-top: 2px; }
.pc-v strong { font-weight: 600; }
.pc-pass { color: var(--ink-faint); }
.pc-money { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-money .v { text-align: right; font-weight: 600; }
.pc-money .v.sim { color: var(--green); }
.pc-link { display: inline-block; margin-top: 14px; font-size: 0.78rem; color: var(--gold); text-decoration: none; }
.pc-link:hover { text-decoration: underline; }

/* ---------- The recorded plan ----------
   In -> out as two stat blocks, then the ten rows, then the provenance.
   Predicted and simulator columns sit side by side and are the same
   weight: the rows where the model was too optimistic are the point of
   showing rows at all. */
.inout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin-top: 2.2rem; }
.io-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.io-box.out { border-color: var(--gold-line); background: var(--gold-wash); }
.io-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.io-v { display: block; margin-top: 0.5rem; font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.io-n { margin-top: 0.5rem; font-size: 0.86rem; color: var(--ink-dim); }
.inout .arrow { align-self: center; font-size: 1.4rem; color: var(--ink-faint); }
@media (max-width: 760px) {
  .inout { grid-template-columns: 1fr; }
  .inout .arrow { transform: rotate(90deg); justify-self: center; }
}
.plan-table { margin-top: 1.4rem; }
.plan-table table { font-variant-numeric: tabular-nums; }
.plan-table td.num, .plan-table th.num { text-align: right; white-space: nowrap; }
.plan-table td.key { font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; }
.plan-table tr.pass td { color: var(--ink-faint); font-style: italic; }
.plan-table tr.tot td { font-weight: 600; border-top: 2px solid var(--line); }
.plan-table td.sim { color: var(--green); }
.prov {
  margin-top: 1.2rem; font-size: 0.8rem; line-height: 1.6; color: var(--ink-faint);
  border-left: 3px solid var(--gold-fill); padding-left: 16px; max-width: 58em;
}
.prov strong { color: var(--ink-dim); }
.prov a { color: var(--gold); }

/* ---------- Who does what ---------- */
.roles { margin-top: 2rem; }
.roles td:first-child { font-weight: 600; white-space: nowrap; color: var(--ink); }
.roles td { color: var(--ink-dim); }
.roles tr.p34 td { background: var(--gold-wash); }

/* ---------- Three kinds of demo ----------
   "Try P34" means three different things and the page names all three,
   so nobody believes they ran the model when they only validated a file. */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2rem; }
.kind { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px 22px; }
.kind .kn { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.kind h3 { margin-top: 0.5rem; font-size: 1.08rem; }
.kind p { margin-top: 0.6rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-dim); }
.kind .cost { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); }
@media (max-width: 900px) { .kinds { grid-template-columns: 1fr; } }

/* ---------- The starter instruction ----------
   landing.js fills [data-prompt-url] with this visitor's own workspace
   URL; lp.js copies exactly what is shown. The instruction ends in a
   stopping boundary on purpose. */
.starter {
  margin-top: 2rem; background: #151B27; color: #F5F2EA; border-radius: var(--radius-lg);
  padding: 22px 24px 20px; box-shadow: 0 14px 36px rgba(19,25,38,0.16); max-width: 52em;
}
.starter .st-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,234,0.6); }
.starter .st-text { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.starter .st-text [data-prompt-url] { color: #F3C96E; }
.starter .st-foot { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.starter .st-note { font-size: 0.78rem; color: rgba(245,242,234,0.66); max-width: 34em; }
.starter .btn-copy { font-size: 0.84rem; padding: 9px 16px; }

/* ---------- Starting routes ---------- */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2rem; }
.route { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.route .rn { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); }
.route h3 { margin-top: 0.5rem; font-size: 1.1rem; }
.route p { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-dim); flex: 1; }
.route a.go { margin-top: 1rem; font-size: 0.86rem; color: var(--gold); text-decoration: none; font-weight: 600; }
.route a.go:hover { text-decoration: underline; }
@media (max-width: 900px) { .routes { grid-template-columns: 1fr; } }

/* ---------- Checklist (readiness) and ladder ---------- */
.checks { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 46em; }
.checks li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--line); color: var(--ink-dim); font-size: 0.98rem; line-height: 1.5; }
.checks li::before { content: "\2610"; position: absolute; left: 2px; top: 10px; font-size: 1.15rem; color: var(--gold); }
.checks li strong { color: var(--ink); }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2rem; counter-reset: rung; }
.rung { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.rung .rn { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.rung h3 { margin-top: 0.4rem; font-size: 1.12rem; }
.rung p { margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-dim); }
.rung.now { border-color: var(--gold-line); background: var(--gold-wash); }
@media (max-width: 900px) { .ladder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ladder { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.lp-faq { margin-top: 1.8rem; max-width: 52em; }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 600; position: relative; color: var(--ink); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--mono); color: var(--ink-faint); }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq .a { padding: 0 0 18px; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; }

/* ---------- Test index (/lp/) ---------- */
.lp-index { display: grid; gap: 16px; margin-top: 2rem; }
.lpi { display: grid; grid-template-columns: 9rem 1fr auto; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px; }
.lpi .lpi-path { font-family: var(--mono); font-size: 0.84rem; color: var(--gold); }
.lpi h3 { font-size: 1.08rem; }
.lpi p { margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-dim); }
.lpi.base { background: var(--panel-2); }
@media (max-width: 720px) { .lpi { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Sections ----------
   Ordinary sections, not full-screen chapters: this test is about the ORDER
   in which ideas arrive, and forcing each one to a full screen would test
   pacing at the same time and muddy the result. */
.lp-sec { padding: 80px 0; }
.lp-sec .inner { max-width: 54em; }
.lp-label {
  display: block; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.lp-sec h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); max-width: 19em; line-height: 1.1; }
.lp-sec .lede2 { margin-top: 1rem; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.55; color: var(--ink-dim); max-width: 42em; }
.lp-sec .lede2 strong { color: var(--ink); }
.lp-sec .lede2 a, .lp-sec .note a { color: var(--gold); }
.lp-sec .note { margin-top: 1.2rem; font-size: 0.86rem; line-height: 1.55; color: var(--ink-faint); max-width: 46em; }
@media (max-width: 760px) { .lp-sec { padding: 56px 0; } }

/* Starter: sample-market / own-data switch. */
.starter .st-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.st-modes { display: inline-flex; border: 1px solid rgba(245,242,234,0.2); border-radius: 999px; padding: 3px; }
.st-mode {
  font: inherit; font-size: 0.78rem; color: rgba(245,242,234,0.72); background: none; border: 0;
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.st-mode.is-on { background: rgba(245,242,234,0.14); color: #F5F2EA; }
.st-mode:focus-visible { outline: 2px solid #F3C96E; outline-offset: 2px; }

/* Chips for "things to change" (experiment page). */
.knobs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.knob { font-family: var(--mono); font-size: 0.8rem; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 14px; color: var(--ink-dim); }
.knob strong { color: var(--ink); font-weight: 600; }
.chapter-offer-inline .price-card { margin-top: 2rem; }

/* ---------- Phone ----------
   The plan table keeps the two columns the page is about — P34's prediction
   and the simulator's outcome — on screen. Cost columns step out first (the
   committed total is already in the OUT box above the table), rather than
   leaving the reader to scroll sideways for the only numbers that matter. */
/* Header words that only exist at full width. */
.plan-table .sm { display: none; }
@media (max-width: 760px) { .plan-table .c-unit { display: none; } }
@media (max-width: 480px) {
  .plan-table .c-cost { display: none; }
  .plan-table td.key { font-size: 0.74rem; }
  .plan-table th, .plan-table td { padding-left: 7px; padding-right: 7px; }
  .plan-table th { letter-spacing: 0.04em; }
  .plan-table .lg { display: none; }
  .plan-table .sm { display: inline; }
  .lp-chip { letter-spacing: 0.06em; }
}
/* Who-does-what stacks: a nowrap name column beside a description squeezed
   to a few words per line reads worse than two lines per piece. */
@media (max-width: 620px) {
  .roles tr:first-child { display: none; }
  .roles tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .roles td { display: block; border: 0; padding: 2px 12px; }
  .roles td:first-child { white-space: normal; }
}

/* ---------- The close ----------
   Paid action and free action side by side, centred like the root's final
   CTA. The free-community band above it is the root's own markup. */
.final-cta .lp-ctas { justify-content: center; }
.final-cta h2 { max-width: 18em; }

/* ---------- Call-first pages ----------
   The reason picker is a grid of pressable cards (aria-pressed), not a
   select: the six reasons are the page's argument, so they are shown, not
   hidden in a dropdown. The Calendly iframe only exists after a click. */
.kinds-2 { grid-template-columns: repeat(2, 1fr); }
.kind .go { display: inline-block; margin-top: 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--gold); text-decoration: none; }
.kind .go:hover { text-decoration: underline; }
.cal { margin-top: 2rem; }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reason {
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.reason strong { font-size: 0.98rem; font-weight: 600; }
.reason span { font-size: 0.84rem; line-height: 1.45; color: var(--ink-dim); }
.reason:hover { border-color: var(--gold-line); }
.reason.is-on { border-color: var(--gold-fill); background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-fill); }
.reason:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.cal-actions .btn[disabled] { opacity: 0.6; cursor: default; font-size: 0.9rem; }
.cal-newtab { font-size: 0.9rem; color: var(--gold); font-weight: 600; text-decoration: none; }
.cal-newtab:hover { text-decoration: underline; }
.cal-embed { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.cal-embed iframe { display: block; width: 100%; height: 760px; border: 0; }
.cal-note { margin-top: 1rem; font-size: 0.8rem; line-height: 1.55; color: var(--ink-faint); max-width: 46em; }
.cal-note a { color: var(--gold); }
.cal-note.ok { color: var(--green); font-weight: 600; font-size: 0.95rem; }
@media (max-width: 900px) { .reasons { grid-template-columns: 1fr 1fr; } .kinds-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .reasons { grid-template-columns: 1fr; } .cal-embed iframe { height: 980px; } }

/* ---------- Intake (start-business, business-robots) ----------
   A few optional questions in place of the reason picker. Chips, not a
   form: nothing is submitted anywhere — the answers only ride along when
   the visitor opens Calendly. */
.qs { display: grid; gap: 18px; max-width: 52em; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.q legend small { font-weight: 400; font-size: 0.8rem; color: var(--ink-faint); margin-left: 4px; }
.q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-opt {
  font: inherit; font-size: 0.88rem; line-height: 1.3; cursor: pointer; text-align: left;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px;
}
.q-opt:hover { border-color: var(--gold-line); }
.q-opt.is-on { color: var(--ink); border-color: var(--gold-fill); background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-fill); }
.q-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.readiness {
  margin-top: 1.4rem; max-width: 46em; padding: 14px 18px;
  background: var(--gold-wash); border-left: 3px solid var(--gold-fill);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.readiness .rd-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.readiness p { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }

/* ---------- Code (api) ----------
   The hero visual on /lp/api/ is the contract itself. Dark like the
   starter card; the <pre> scrolls inside the card, never the page. */
.code-card {
  min-width: 0; background: #151B27; color: #F5F2EA; border-radius: var(--radius-lg);
  padding: 20px 22px 18px; box-shadow: 0 18px 44px rgba(19,25,38,0.16);
}
.code-card .cc-tag { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,234,0.6); }
.code-card pre { margin: 0.8rem 0 0; overflow-x: auto; font-family: var(--mono); font-size: 0.8rem; line-height: 1.65; white-space: pre; }
.code-card code { font-family: inherit; background: none; color: inherit; padding: 0; }
.code-card .cc-m { color: #F3C96E; }
.code-card .cc-c { color: rgba(245,242,234,0.5); }
.code-card .cc-r { color: #9FD8B0; }
.code-card .pc-link { color: #F3C96E; }
.code-block { margin-top: 1.6rem; max-width: 52em; }
.access, .labels { margin-top: 1.6rem; }
.access td:nth-child(2), .access td:nth-child(3) { white-space: normal; font-weight: 400; }
.starter.build .st-text { white-space: normal; }
.blueprint td:first-child { width: 11em; }

/* ---------- Concept page (business-robots) ----------
   Every component carries its status; the hero trace says it is a mock
   on its first line. */
.tag {
  display: inline-block; vertical-align: 1px; font-family: var(--mono); font-size: 0.64rem;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.tag.exists { color: var(--green); border: 1px solid currentColor; }
.tag.proposed { color: var(--ink-faint); border: 1px dashed currentColor; }
.tag.partly { color: var(--gold); border: 1px solid var(--gold-line); }
.trace .tr-row { display: grid; grid-template-columns: 4.4em 6.2em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.trace .tr-t { color: var(--ink-faint); font-size: 0.74rem; }
.trace .tr-s { font-weight: 600; }
.trace .tr-v { color: var(--ink-dim); }
.trace .tr-v .tag { margin-left: 4px; }
.status td:nth-child(2) { white-space: nowrap; }

/* ---------- The registry (/lp/) ---------- */
.lp-group { margin-top: 2.8rem; }
.lp-group .lpg { font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.lp-group .lpg-why { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-faint); max-width: 52em; }
.lp-group .lp-index { margin-top: 1.2rem; }
.lp-index.reg .lpi { grid-template-columns: 11.5rem minmax(0, 1fr) auto; align-items: start; }
.lp-index.reg .lpi-path { padding-top: 3px; overflow-wrap: anywhere; }
.lpi-role { display: block; margin-bottom: 0.3rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.lpi-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 0.9rem 0 0; }
.lpi-meta div { min-width: 0; }
.lpi-meta dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.lpi-meta dd { margin: 2px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-dim); }
.ladder.l5 { grid-template-columns: repeat(5, 1fr); }
.lpq { margin: 1rem 0 0; padding-left: 1.2rem; max-width: 52em; }
.lpq li { margin: 0.4rem 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-dim); }
.lpq li strong { color: var(--ink); }
@media (max-width: 900px) { .ladder.l5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .lp-index.reg .lpi { grid-template-columns: 1fr; }
  .lpi-meta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ladder.l5 { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .code-card { padding: 16px 16px 14px; }
  .code-card pre { font-size: 0.72rem; }
  .trace .tr-row { grid-template-columns: 3.8em minmax(0, 1fr); }
  .trace .tr-v { grid-column: 2; }
}

/* ---------- Product screens (/lp/pro/, 2026-10-04) ----------
   The pro-user page shows the Business Builder itself. Every screen is the
   real app on seeded demo data, and every caption says so (deploy asserts
   it). The app is dark; it sits in a plain window frame on the light page. */
.lp-hero.wide .wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
.lp-hero.wide h1 { max-width: 17em; }
.lp-hero.wide .lp-lede { max-width: 40em; }
.shot { margin: 0; min-width: 0; }
.shot .frame {
  background: #0B0F17; border: 1px solid #1E2533; border-radius: 12px; overflow: hidden;
  box-shadow: 0 22px 56px rgba(19,25,38,0.16);
}
.shot .bar { display: flex; gap: 6px; padding: 9px 12px; background: #141A25; border-bottom: 1px solid #1E2533; }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #2C3443; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 0.7rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); }
.shot figcaption .demo {
  display: inline-block; margin-right: 6px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; border: 1px dashed currentColor; border-radius: 999px; padding: 1px 7px; vertical-align: 1px;
}
.tour { display: grid; gap: clamp(52px, 7vw, 88px); margin-top: 2.8rem; }
.tour-row { display: grid; gap: 22px; }
.tour-copy { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px clamp(24px, 4vw, 48px); align-items: start; }
.tour-copy .kn { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.tour-copy h3 { margin-top: 0.5rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; }
.tour-copy p { font-size: 0.98rem; line-height: 1.6; color: var(--ink-dim); }
.tour-copy ul { margin: 0.7rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.55; color: var(--ink-dim); }
.tour-copy li { margin: 0.35rem 0; }
.tour-copy code { font-size: 0.85em; }
.phones { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 2.6rem; }
.phones .shot { width: min(250px, 44%); }
.phones .shot .frame { border: 6px solid #1B2230; border-radius: 28px; }
.phones .shot .bar { display: none; }
.phones .shot figcaption { text-align: center; }
@media (max-width: 900px) { .tour-copy { grid-template-columns: minmax(0, 1fr); } }