/* ===========================================================================
   WHO WE'RE FOR: LAUNCHING A NEW PRACTICE — /launching-a-new-practice/  (9/16)
   ---------------------------------------------------------------------------
   Built by scripts/build-launching.py from Alie's locked copy. Loaded last,
   scoped to .page-launch and lp-* classes. Tokens only; verify.js reads this
   sheet, comments included, for hex values and banned effect words.

   Sections and grounds (corner sides alternate back from the CTA's top-left):
   1 hero white · 2 advantage oat (single corner, L) · 3 fit white with the
   indigo strip (R) · 4 chooser oat (L) · 5 proof indigo (R) · 6 CTA sky (L).
   Contrast: ink on white 13.3 · ink on oat 11.5 · ink-muted on white/oat
   above 5 · ink on lime 8.95 · white on indigo 8.09 · oat on indigo 7.01 ·
   oat-75 on indigo 4.77 · lime on indigo 5.44 · marigold / sky on indigo at
   display size above 3.
   =========================================================================== */

.page-launch .lp-hero,
.page-launch .lp-edge { --corner: var(--corner-1); }

/* ---------------------------------------------------------------- 1. hero */
/* ⏹ 9/16 ROUND 2 — OPENING "A" (Brees: "We should stick with A"). The white-to-oat step read as "weird", the hero
   "so small ... it all just looks very crowded". Now the hero owns the first screen under the header, centred
   vertically; "Starting from zero" continues on the SAME white below a hairline; the discs float across the join
   instead of being sliced by a colour change. The first colour on the page is the indigo fit strip.
   Explored in _preview/launching-concepts/ (A-D). ⚠️ The H1 runs larger than the shared .hero__headline family
   size (clamp 2.5-4.5rem vs 2-3.25rem) — that is the point of A; flag it if the family size must hold. */
.page-launch .lp-hero,
.page-launch .lp-edge { --corner: var(--corner-1); }
.lp-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--hdr-h, 162px));
  padding-block: var(--s-6) var(--s-5);
  background-color: var(--white);
}
.lp-hero__inner { position: relative; z-index: 1; }
/* 🔁 9/16 (later), Brees: "the h1 seems really large" - the A-concept size override is gone; the H1 now takes the shared
   .t-display.hero__headline family size like every other page. */
.lp-hero__h1 { max-width: 16ch; margin: 0 0 var(--s-4); }
.lp-hero__intro { max-width: 50ch; margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.lp-hero__pattern { z-index: 0; width: clamp(320px, 38vw, 680px); aspect-ratio: 1; top: -8%; right: -10%; }
.lp-hero__disc { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; }
/* 9/16 round 3: the discs now cross onto INDIGO. multiply against indigo turns petal and lime to mud, so both sit
   in one isolated layer: they still multiply where they overlap each other, and paint true colour everywhere else. */
.lp-hero__discs { position: absolute; inset: 0; z-index: 0; isolation: isolate; pointer-events: none; }
/* Offsets are multiples of each disc's own width, so the crossing into section 2 is the same at every size:
   the lime disc sits about half over the indigo, the petal just touching it (Google Ads' "circles in sec1 bleed
   into sec2"). */
.lp-hero__disc--petal { --d: clamp(120px, 12vw, 220px); width: var(--d); right: 24%; bottom: calc(var(--d) * -0.12); background-color: var(--petal); }
.lp-hero__disc--lime { --d: clamp(150px, 14vw, 260px); width: var(--d); right: 15%; bottom: calc(var(--d) * -0.5); background-color: var(--lime); }
@media (max-width: 899px) {
  .lp-hero { min-height: 0; padding-block: calc(var(--section-pad) * 0.5 + 43px) var(--s-5); }
  .lp-hero__pattern { width: 240px; top: -60px; right: -90px; }
  .lp-hero__disc { display: none; }
}
@media (max-width: 599px) {
  .lp-hero__pattern { width: 200px; top: -96px; right: -118px; }
}

/* ----------------------------------------------------------- 2. advantage + fit */
/* 9/16 ROUND 3 — SMART INTAKE'S SECTION 2, ON LIGHT BLUE (round 4: indigo -> --sky-soft, the numbered circles ->
   the site's numeral icons, Brees: "instead of indigo we should do light blue and then instead of the 01 02 03 in
   circles, let's use the icons we've been using across the site").
   Previously: SMART INTAKE'S SECTION 2, ON INDIGO. Brees: style "Starting from zero" and "We're a good fit for
   you" "like we did Section 2 on the smart patient intake form", and section 2 in INDIGO. Construction mirrors
   .page-si .si-setup (spotlight.css + smart-intake-flow.css):
     - the section's own ground is INDIGO (what the text really sits on, so contrast checkers read it right) and a
       white square sits under an indigo band whose top-left corner steps 40 -> 500px, so the curve reveals the
       hero's white
     - heading left / paragraph right; the fit heading is the lead-in the line leaves from (Altivo, like "And the
       best part")
     - three numbered white cards zig-zag off a spine drawn by intake-line.js (shared file); below 1024 no line
   The hero's discs cross the curve (they sit in an isolated layer, so multiply only blends them with each other).
   Contrast: ink on --sky-soft 12.3 · ink on white 13.3 · the ink line on --sky-soft 12.3 (graphic, 3:1). */
.lp-edge {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow-x: clip;
  padding-block: calc(var(--section-pad) + 48px) calc(var(--section-pad) + var(--corner-3x));
  background-color: var(--sky-soft);
}
.lp-edge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 500px;
  height: 500px;
  background-color: var(--white);
  pointer-events: none;
}
.lp-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--sky-soft);
  border-top-left-radius: 40px;
}
@media (min-width: 700px)  { .lp-edge::before { border-top-left-radius: 160px; } }
@media (min-width: 900px)  { .lp-edge::before { border-top-left-radius: 240px; } }
@media (min-width: 1024px) { .lp-edge::before { border-top-left-radius: 380px; } }
@media (min-width: 1280px) { .lp-edge::before { border-top-left-radius: 500px; } }

.lp-edge__inner { position: relative; z-index: 1; }
.lp-edge__split { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  /* Smart Intake's 0.85 / 1.15 split; the heading is held down off the curve on the smaller ladder steps */
  .lp-edge__split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--s-6); align-items: start; padding-top: clamp(0px, 10vw - 90px, 80px); }
}
.lp-edge__h { margin: 0; color: var(--ink); }
@media (min-width: 900px) { .lp-edge__h { max-width: 14ch; } }
.lp-edge__copy { max-width: 62ch; }
.lp-edge__p { margin: 0; color: var(--ink); }
.lp-edge__lead {
  margin: 48px 0 0;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---- the line (drawn by intake-line.js) ---- */
.page-launch .mt-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.page-launch .mt__rail,
.page-launch .mt__spur { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-launch .connector__head { fill: var(--ink); }
html[data-js="on"] .page-launch [data-mt-spur] { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 0.45s ease; }
html[data-js="on"] .page-launch [data-mt-spur].is-drawn { stroke-dashoffset: 0; }

/* ---- the three points: zig-zag ---- */
.page-launch .mt { position: relative; z-index: 1; }
.page-launch .mt__items { display: flex; flex-direction: column; margin: 150px 0 var(--s-5); padding: 0; list-style: none; }
.page-launch .mt__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: calc((100% - 128px) / 2);
  padding: 32px 36px;
  border-radius: 20px;
  background-color: var(--white);
}
.page-launch .mt__item:nth-child(odd)  { align-self: flex-start; }
.page-launch .mt__item:nth-child(even) { align-self: flex-end; }
.page-launch .mt__item + .mt__item     { margin-top: -60px; }
.page-launch .mt__num {
  flex: none;
  display: flex;
  align-items: center;
  height: clamp(2.5rem, 3.4vw, 3.25rem);
}
/* The numerals from Brees' icon sheet (the same files as Call Insights, Websites and the homepage), scaled by
   HEIGHT so the narrow 1 is not stretched to the width of the 2. */
.page-launch .mt__icon { display: block; width: auto; height: 100%; }
.page-launch .mt__text { margin: 0; color: var(--ink); font-size: 1.25rem; line-height: 1.55; }

html[data-js="on"] .page-launch .mt-seq { opacity: 0; transform: translateY(14px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); }
html[data-js="on"] .page-launch .mt-seq.is-in { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .page-launch .mt__items { margin-top: 48px; gap: 16px; }
  .page-launch .mt__item,
  .page-launch .mt__item:nth-child(odd),
  .page-launch .mt__item:nth-child(even) { width: 100%; align-self: stretch; }
  .page-launch .mt__item + .mt__item { margin-top: 0; }
}
@media (max-width: 599px) {
  .page-launch .mt__item { padding: 24px; }
  .page-launch .mt__text { font-size: 1.0625rem; }
  .lp-edge__lead { margin-top: 32px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .page-launch .mt-seq { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ 4. chooser */
/* 9/16 ROUND 2 — THE ORIGINAL CHOOSER, POLISHED. Brees kept this layout ("when you click 'What's most important to
   you?' you're supposed to click on an item and then the box on the right changes") and dropped the oat ("the
   oat just makes it feel dated and old"). A "doors" variant was built and reverted the same day, on his word.
   Polish, not a redesign:
     - white ground; the rows keep their white fill + hairline ring, the chosen row still lights up lime
     - the card moves off white-on-oat onto --sky-soft, so it reads as the answer panel on a white page
     - the chosen quote leads the card in the display face, so every click visibly changes the top of the box
     - all four cards share one grid cell (unchosen = visibility:hidden), so the page never jumps between clicks
     - the change replays on every click: the card slides in, rows arrive one by one, the kicker last
   Contrast: ink on white 13.3 · ink on lime 8.95 · ink on --sky-soft 12.3 · ink-muted on --sky-soft above 5. */
.lp-plan {
  position: relative;
  z-index: 4;
  margin-top: calc(-1 * var(--corner-3x));
  padding-block: calc(var(--section-pad) + 24px) calc(var(--section-pad) + var(--corner-3x));
  /* white over section 3's light blue: the corner shows again, top-LEFT (sections alternate back from the CTA) */
  border-top-left-radius: var(--corner-3x);
  background-color: var(--white);
}
.lp-plan__head { max-width: 46rem; }
.lp-plan__h { margin: 0; }
.lp-plan__intro { margin: var(--s-3) 0 0; }

.lp-chooser { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.lp-chooser__q { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
@media (min-width: 960px) {
  /* 🔁 9/17 Brees: "align the top of that box to 'What's most important to you'". The question used to span BOTH
     columns, so the panel started a heading's height below it and the left column ran out first — the panel looked
     like it was floating with slack under it. The question now sits over the CHOICES only and the panel spans both
     rows, so its top edge and the question's cap line start together. */
  .lp-chooser { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "q panel" "tabs panel"; grid-template-rows: min-content auto; column-gap: var(--s-5); row-gap: var(--s-3); align-items: start; }
  .lp-chooser__q { grid-area: q; }
  .lp-chooser__tabs { grid-area: tabs; }
  .lp-chooser__panels { grid-area: panel; }
}
/* 🔁 9/17 — THE LEDGER (concept C1 on the chooser canvas, claude.ai/artifact/5bTQRNo7Qt5T7hDui6KMGk).
   Brees: the section "makes it feel blocky and flat". It was five filled boxes at once — four white choice cards
   plus the panel — so nothing led the eye. The choices are now ruled LINES, no fills and no rings, and the only
   filled thing on the left is the chosen line's lime band. */
.lp-chooser__tabs { display: flex; flex-direction: column; }
.lp-choice {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 8px 22px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.3s var(--ease-out);
}
.lp-choice:hover { padding-left: 24px; }
.lp-choice:hover .lp-choice__quote { text-decoration: underline; text-underline-offset: 0.16em; }
.lp-choice:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* the mark: a small ink dot — an outline ring unchosen, solid when chosen */
.lp-choice__mark {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink-muted);
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
/* LIGHT UP: the chosen line gets the site's lime underline band (the homepage "different" device) and its dot
   fills ink. Ink on lime is 8.95, and the band sits behind the text rather than boxing it. */
.lp-choice[aria-selected="true"] { padding-left: 24px; }
.lp-choice[aria-selected="true"] .lp-choice__mark { background-color: var(--ink); box-shadow: none; }
.lp-choice[aria-selected="true"] .lp-choice__quote {
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: inset 0 -0.42em 0 var(--lime);
}

/* the card */
.lp-chooser__panels { display: grid; }
/* 🔁 9/17 — THE INDIGO ANSWER (concept C2). The flatness was a VALUE problem: pale blue on white with white
   choices meant nothing on the section was dark. The answer panel now anchors it, and the prices in lime are the
   one bright thing. Arch corner top-left, the site's shape. Contrast: white on indigo 8.09 · oat 7.01 ·
   lime on indigo 5.44 · oat-75 5.12. */
.lp-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
  /* 🔴 --corner-1 (80 max), NOT --corner-3x: at 240px the curve ate the first line of the quote — the arch has to
     clear the text, and the panel is only ~660px wide. */
  border-radius: var(--corner-1) 24px 24px 24px;
  background-color: var(--indigo);
  color: var(--white);
}
.lp-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* 🔴 One cell for all four; the unchosen are visibility:hidden (out of the tab order and the accessibility tree,
   so `hidden` keeps its meaning) instead of display:none, so the card is always the tallest plan's height. */
.lp-chooser.is-armed .lp-card[hidden] { display: block; visibility: hidden; }
/* Altivo, not All Round Gothic (Brees, 9/16): the quote in the box is a sentence the practice says, not a title —
   the 9/10 type rule, and the same face as the lead-in "We're a good fit for you if:" above. */
.lp-card__for { margin: 0 0 var(--s-4); color: var(--white); font-family: var(--font-body); font-weight: 500; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; }
.lp-stack { margin: 0; padding: 0; list-style: none; }
.lp-stack__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-ink);
}
.lp-stack__row:first-child { border-top: 1px solid var(--line-ink); }
.lp-stack__item { font-size: 1.125rem; font-weight: 500; }
.lp-stack__price { color: var(--ink); font-weight: 700; text-align: right; }
/* on the indigo panel */
.lp-card .lp-stack__row { border-bottom-color: var(--oat-14); }
.lp-card .lp-stack__row:first-child { border-top-color: var(--oat-14); }
.lp-card .lp-stack__item { color: var(--white); }
.lp-card .lp-stack__price { color: var(--lime); }
/* All four cards share one grid cell, so the panel is always the TALLEST plan's height and the shorter plans carry
   slack. Tried pushing the kicker to the foot (margin-top:auto): that opened a hole in the MIDDLE of the panel,
   which reads worse than empty padding at the bottom. So the kicker stays under the rows and the slack sits at the
   bottom, where it reads as the panel's own padding. */
.lp-card__kicker { margin: var(--s-4) 0 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
.lp-card .lp-card__kicker { color: var(--oat); }
@media (max-width: 599px) {
  .lp-stack__price { text-align: left; }
}

/* the change, replayed on every click (priority-chooser.js re-adds .is-lit) */
@keyframes lp-card-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes lp-row { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lp-card.is-lit { animation: lp-card-in 0.45s var(--ease-out) both; }
.lp-card.is-lit .lp-stack__row { animation: lp-row 0.45s var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
.lp-card.is-lit .lp-card__kicker { animation: lp-row 0.45s var(--ease-out) both; animation-delay: 430ms; }

/* JS off: no tabs to drive, so every card shows, stacked */
.lp-chooser:not(.is-armed) .lp-chooser__panels { gap: var(--s-3); }
.lp-chooser:not(.is-armed) .lp-card { grid-area: auto; }
.lp-chooser:not(.is-armed) .lp-card[hidden] { display: block; }

.lp-plan__prices { margin: var(--s-6) 0 0; font-size: 1.125rem; }
.lp-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; white-space: nowrap; }
.lp-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* -------------------------------------------------------------- 5. proof */
.lp-proof {
  position: relative;
  z-index: 5;
  overflow-x: clip;
  margin-top: calc(-1 * var(--corner-3x));
  padding-block: calc(var(--section-pad) + 24px) calc(var(--section-pad) + var(--corner-3x));
  border-top-right-radius: var(--corner-3x);
}
.lp-proof::before {
  content: "";
  position: absolute;
  /* LEFT, not right: the attribution (oat-75) sits in the right column and drops to 3.76:1 over the 16% petal tint
     (measured on Google Ads); a right-hand circle still reached it at 1536. The quote on the left is white, which
     stays well above 4.5:1 over the tint. */
  left: -12%;
  bottom: calc(var(--corner-3x) - 30%);
  z-index: 0;
  width: clamp(320px, 38vw, 620px);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background-color: var(--petal);
  opacity: 0.16;
  pointer-events: none;
}
.lp-proof > .container { position: relative; z-index: 1; }
.lp-proof__h { margin: 0; color: var(--white); }
.lp-proof__sub { max-width: 44ch; margin: var(--s-3) 0 0; color: var(--oat); }
.lp-proof__sub strong { color: var(--white); }
.lp-stats { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }

/* Feedbucket 991600 (Brees, 9/21, iPhone 430px): 76px of measured gap between the
   "Two years later:" line and the first stat, which reads as a hole on a phone where the
   three stats stack. --s-6 (96px) is the desktop interval, where the stats sit in ONE ROW
   and need the air to separate from the lead. Stacked, --s-5 (64px) is the same step on
   the same scale, not a magic number. Nothing here pays for a section overlap - checked
   before changing it, because the sibling .si-setup / .proofcase paddings DO. */
@media (max-width: 799px) {
  .lp-stats { margin-top: var(--s-5); }
}
@media (min-width: 800px) { .lp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-stat { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--oat-14); }
.lp-stat__fig { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.lp-stat__fig--lime { color: var(--lime); }
.lp-stat__fig--marigold { color: var(--marigold); }
.lp-stat__fig--sky { color: var(--sky); }
.lp-stat__label { color: var(--oat); font-size: 1.0625rem; }

/* the quote: the Google Ads / homepage / demo format, measure for measure */
.lp-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(2 * var(--s-4) + 5.06 * clamp(30px, 2.7vw, 42px));
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  margin: calc(var(--section-pad) * 0.9) 0 0;
}
.lp-quote__block { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
.lp-quote__text { margin: 0; color: var(--white); font-family: var(--font-body); font-size: clamp(1.375rem, 2.9vw, 2.25rem); font-weight: 400; line-height: 1.32; }
.lp-quote__turn { color: var(--lime); }
.lp-quote__card { grid-column: 2; grid-row: 2; }
.lp-quote__logo { display: block; width: calc(5.06 * clamp(30px, 2.7vw, 42px)); max-width: 297px; height: auto; }
.lp-quote__by { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); }
.lp-quote__name { color: var(--white); font-weight: 600; }
.lp-quote__role { color: var(--oat-75); }
@media (max-width: 899px) {
  .lp-quote { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lp-quote__block, .lp-quote__card, .lp-quote__by { grid-column: 1; grid-row: auto; }
}

/* ============ 4b. THE FOUR PRIORITIES AS CARDS (Alie, Feedbucket 987582) ============
   Was: a tablist on the left driving one panel on the right — "the card on the right feels disconnected."
   Now: the `.costs__card` idiom from /products/seo-content/, which is what she pointed at.
   🔴 A HAIRLINE, NOT A SHADOW — copied from that page's reasoning, and it matters more here: these cards sit on
   `.lp-plan`'s WHITE, so an elevation would be the only thing separating them from the ground and four raised
   slabs in a row reads as heavier than the page. The border does the work.
   🔴 `margin-top: auto` on the kicker is load-bearing. The four price lists are 2, 3, 3 and 3 rows long; without
   it the closing lines sit at three different heights and the row looks broken — the same fix `.costs__card`
   records for its own uneven bullet lists.
   🟢 The lime band under each quoted heading is the one thing Alie asked to KEEP. It used to be the selected
   tab's treatment, so retiring the tabs would have taken it with them.
   ⚠️ `.lp-chooser*` and `assets/js/priority-chooser.js` are NOT deleted — /putting-technology-to-work/ still
   runs the tabs version of this section. Do not tidy them away without checking that page. */
.lp-plan__q { margin: var(--s-6) 0 var(--s-4); font-family: var(--font-body); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; }
.lp-cards {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-render);
  background-color: var(--white);
}
.lp-pcard__q { margin: 0 0 var(--s-4); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
/* the band hugs the words and clones per line, so a three-line quote gets three bands, not one plate */
.lp-pcard__band {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: inset 0 -0.32em 0 var(--lime);
}
.lp-pcard__rows { margin: 0; padding: 0; list-style: none; }
.lp-pcard__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--s-2);
  padding: 10px 0;
  border-top: 1px solid var(--ink-10);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.lp-pcard__item { color: var(--ink); font-weight: 600; }
/* 🔴 The price WRAPS instead of being pinned right. "$299 month management, + ad budget paid directly to Google"
   is Alie's verbatim string and it is longer than the card is wide — nowrap or a fixed price column pushed it
   straight out of the card at every width below 1400. */
.lp-pcard__price { color: var(--ink-muted); text-align: right; }
/* 🔴 ONE OF THE FOUR PRICES IS A SENTENCE. "$299 month management, + ad budget paid directly to Google" is Alie's
   verbatim string and it is wider than the card; right-aligned opposite its item it broke into three ragged
   lines under a lone "Google Ads". Rows whose price runs past 22 characters stack instead — item on its own
   line, price under it, LEFT-aligned, where a sentence reads like a sentence. The build adds the modifier, so it
   follows the copy: if a price is shortened later the row goes back to the price column on its own. */
.lp-pcard__row--stack { display: block; }
.lp-pcard__row--stack .lp-pcard__item { display: block; }
.lp-pcard__row--stack .lp-pcard__price { display: block; margin-top: 2px; text-align: left; }
.lp-pcard__kicker { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--ink-10); color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.55; }
@media (min-width: 700px) { .lp-pcard__kicker { margin-top: auto; } }
/* 🔁 9/18, Brees: "in the first box, 'Website build' is higher than 'Website build' in the other boxes... if we
   could try to match at least at the top and the bottom, it would be easier to read on both pages."
   🔴 SUBGRID, so the three parts of every card share ONE set of row lines across the row of cards: the quoted
   headings take the height of the longest one, so every first price row starts on the same line; the rows block
   takes the height of the longest list, so every kicker rule sits on the same line too. Individual rows inside can
   still differ (one card has one row, one has a two-line Google Ads price) — that is the "won't match all the
   way" part, and the tops and bottoms are what line up.
   ⚠️ row-gap: 0 on the card. A subgrid inherits the parent's gap between its own tracks, which would drop
   --s-3 between heading, rows and kicker on top of their own margins.
   ⚠️ One definition, two pages: /launching-a-new-practice/ and /putting-technology-to-work/ both use .lp-cards. */
@media (min-width: 700px) {
  @supports (grid-template-rows: subgrid) {
    .lp-pcard {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    /* 🔁 9/18 (later), Brees: titles TOP-aligned, not bottom-aligned — a short one-/two-line quote sat low in the
       first card while the three-liners started at the top. The row lines are still shared, so every first price
       row still starts on the same line; only the title moves to the top of its (shared-height) cell. */
    .lp-pcard__q { align-self: start; }
    .lp-pcard__rows { align-self: start; }
    .lp-pcard__kicker { margin-top: var(--s-3); align-self: start; }
  }
}

/* ============ THE HERO IS THE WEBSITES WALL, STANDING STILL (Alie 987572 · Brees 9/17) ============
   Brees: "the launch hero should be exactly like the website hero. Only difference is no animation."
   The markup, the classes and the stylesheets are /products/websites/'s — site-renders.css and websites.css are
   loaded on this page for it. Everything below is the THREE overrides that stop it moving, and nothing else.
   🔴 DO NOT "TIDY" THESE INTO A REWRITE OF THE WALL. The perspective, `preserve-3d`, the middle lane's -28%
   offset and the right-edge bleed all still come from websites.css and all still paint. Standing still, the two
   heroes are the same composition — which is the whole ask.
   🔴 `preserve-3d` is load-bearing on `.wsite-gal__sticky`: without it the tiles flatten to stripes (8/28).
   ⚠️ Earlier attempts here were a lookalike — first a band after the plan cards, then a 2x2 grid beside the
   copy. Both were mine, neither was what was asked for. This is the real component. */

/* 1. no scroll track — on Websites `.wsite-gal` is 190vh of runway for the sticky pane to play across. */
.page-launch .wsite-gal { height: auto; }

/* 2. the pane stops being STICKY but KEEPS ITS HEIGHT, and that distinction is the whole thing.
      🔴 `height: auto` here breaks the hero. A wall at rotateX(75deg) scale(1.2) projects to a layout box of
      about 20,000 x 20,000px; what makes it a hero rather than a catastrophe is that this pane is exactly one
      viewport tall and `overflow: hidden` clips it. Set to auto, the pane grew to 1,977px, the layout grid with
      it, and the copy — which centres in its column — landed at y=1025, well below the fold. The hero rendered
      as an empty white screen with a wall underneath it.
      So: static instead of sticky (no track to stick to), same height as on Websites, clipping untouched. */
.page-launch .wsite-gal__sticky {
  position: static;
  height: calc(100vh - var(--hdr-h-min));
  height: calc(100svh - var(--hdr-h-min));
}
/* 🔴 RESPONSIVE PASS 9/17 — BUT BELOW 900 THE ONE-VIEWPORT PANE CUT THE WALL OFF.
   The reason above is a DESKTOP reason: it is the 3D projection that needs clipping. Below 900 websites.css
   flattens the wall (`transform: none !important`, two columns, a 62vh grid) and stacks it under the copy, so
   there is nothing to project — but this rule out-specified websites.css's phone `height: auto` and kept the
   pane one viewport tall with `overflow: hidden` anyway. Measured in WebKit: at 320x568 the grid started 39px
   above the clip, so the hero showed a sliver of tile tops; on a landscape phone (667x375, 844x390) the grid
   started BELOW the clip and the wall was not there at all. Below 900 the pane takes its content's height,
   which is exactly what /products/websites/ does at the same widths. */
@media (max-width: 900px) {
  .page-launch .wsite-gal__sticky { height: auto; }
}

/* 3. FROZEN AT THE AT-REST POSE, NOT FLATTENED — and this is the part I got wrong first.
      `.wsite-gal__grid`'s CSS default is `rotateX(0deg) scale(1)`, i.e. upright, and websites.css says so
      deliberately ("DEFAULTS ARE THE AT-REST END STATE, NOT THE START STATE") so a script that never runs cannot
      leave the wall folded flat on its face. But that default is the END of the scroll, not the beginning.
      Read off /products/websites/ at scrollY 0, the wall actually sits at **rotateX(75deg) scale(1.2)** with its
      columns at -10 / 15 / -10 / 12 percent; scrolling UNFOLDS it to upright. Dropping the script and taking the
      CSS defaults therefore did not remove the animation, it shipped the animation's last frame — a flat grid of
      thumbnails that looks nothing like the hero Brees pointed at.
      So the pose is written into the markup as inline `--gal-rx` / `--gal-sc` / `--gal-y`, and there is no
      transform override here at all: websites.css's own rule consumes them exactly as it does on that page.
      `will-change: transform` is dropped, though — nothing animates, so nothing needs promoting. */
.page-launch .wsite-gal__grid,
.page-launch .wsite-gal__col { will-change: auto; }

/* --------------------------- the published-prices line as a BUBBLE CALLOUT (Alie, Feedbucket 987592) ---------
   The `.wsite-more` device from /products/websites/, rebuilt here because that copy lives in websites.css, which
   neither page loads. Same shape: one row at 1100+ (sentence left, ink pill button right), a rounded lime card
   below that where one row cannot hold both.
   🔁 9/17, Brees: "should be in a green bubble on the startup page like it is on the tech page" — so it lives in
   THIS sheet, not technology.css, because /putting-technology-to-work/ loads launching.css first and both pages
   get one definition. Renamed `.tw-more` → `.lp-more` to stop a shared component wearing one page's prefix.
   🔴 Each page keeps its OWN sentence: Launching says "budget the launch", Technology says "see what any of this
   costs". Both are Alie's, both verbatim — the device is shared, the copy is not.
   Contrast: ink on lime 8.95 · white on ink 13.3. */
.lp-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: var(--s-4);
  border-radius: 32px;
  background-color: var(--lime);
  color: var(--ink);
}
.lp-more__body { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.lp-more__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  /* the arrow is its own flex item, so the space in the markup collapses — gap puts it back */
  gap: 0.45em;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background-color: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.lp-more__link:hover { background-color: #232328; color: var(--white); }
.lp-more__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (min-width: 1100px) {
  .lp-more {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-5);
    padding: 26px 26px 26px 48px;
    border-radius: var(--r-pill);
  }
  .lp-more__link { justify-self: end; white-space: nowrap; }
}

/* ---------------------------------------------------------------- 6. CTA */
.page-launch .lp-cta {
  position: relative;
  z-index: 6;
  margin-top: calc(-1 * var(--corner-3x));
  border-top-left-radius: var(--corner-3x);
}

@media (prefers-reduced-motion: reduce) {
  .lp-choice, .lp-choice__mark { transition: none; }
  .lp-choice[aria-selected="true"] { transform: none; }
  .lp-card.is-lit, .lp-card.is-lit .lp-stack__row, .lp-card.is-lit .lp-card__kicker { animation: none; }
}

/* 9/16 (later) — LOGO UNDER THE NAME. Brees: "on all the quotes - i think the logo would look better under the
   name/title instead of on top." Applies to the four big quotes (homepage, Google Ads, Strategy Session, Launching),
   his scope. Desktop swaps the two grid rows; stacked, `order` does the same (grid-row is auto there). */
.lp-quote__by   { grid-row: 2; }
.lp-quote__card { grid-row: 3; }
@media (max-width: 899px) {
  .lp-quote__by   { grid-row: auto; order: 2; }
  .lp-quote__card { grid-row: auto; order: 3; }
}


/* ============ STANDING OUT — the quote stands alone, CENTRED in its section (Brees 9/18) ============
   Launching's quote keeps a top margin to clear the h2 + stats above it; here there is no heading ("remove the title
   for now"), so that margin put the quote low: measured 211px above vs 68px below at 1440, 150 vs 36 on a phone.
   No margin, and the section's top padding equals the visible space below the quote (the section's bottom padding
   minus the closing panel's corner pull-up), so the gaps match at every width. */
.page-standout .so-quote { margin-top: 0; }
.page-standout .so-proof { padding-top: var(--section-pad); }

/* --------------------------------------------------------------------------------------------------------------
   STANDING OUT - HERO ART, concept 2 "the result that stands out" (Brees 9/18). Built by build-standing-out.py.
   A "vet near me" results list on a sky-soft panel: three look-alike listings (all "Compassionate care for your
   pets", muted) and one real DE build lifted out with a lime ring and its stars. Decorative (aria-hidden).
   (Concept 3 polished replaced it for an hour on 9/18 and was pulled: it fought the hero's background shapes.)
   Two columns from 900, copy left, as Putting Technology to Work does; stacked below, art last.
   🔁 9/18 FITS THE FIRST SCREEN (Brees: "needs to fit in the hero without scrolling"): three listings, not four;
   the look-alikes are one line + one bar; the thumbnail is 30% wide. Measured: the panel ends inside the viewport
   at 1280x681 (Jess's laptop), 1536x700, 1440x900 and 1920x1080.
   🔴 Scoped to .page-standout - .lp-hero__inner is shared with Launching, which has no hero art.
   -------------------------------------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page-standout .lp-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: var(--s-6);
    align-items: center;
  }
}
.page-standout .so-hero__art { position: relative; z-index: 2; margin: var(--s-5) 0 0; }
@media (min-width: 900px) { .page-standout .so-hero__art { margin: 0; } }
.so-search__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
  margin-left: auto;
  padding: clamp(14px, 1.8vw, 22px);
  border-radius: 22px;
  background-color: var(--sky-soft);
}
.so-search__q {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 0 0 2px;
  padding: 0 18px;
  border-radius: 999px;
  background-color: var(--white);
  box-shadow: 0 0 0 1px var(--ink-10);
  color: var(--ink);
  font-size: 1rem;
}
.so-search__lens { width: 14px; height: 14px; flex: none; border: 2px solid var(--ink-muted); border-radius: 50%; }
.so-res {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  background-color: var(--white);
  box-shadow: 0 0 0 1px var(--ink-10);
}
.so-res--same { opacity: 0.72; }
.so-res__t { margin: 0; color: var(--ink-muted); font-size: 0.8125rem; }
.so-res__bar { display: block; width: 78%; height: 8px; border-radius: 4px; background-color: var(--ink-10); }
.so-res__bar--short { width: 58%; }
/* the one that stands out: a real site, the lime ring, a lift, and its stars */
.so-res--you {
  flex-direction: row;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--lime), 0 30px 60px -26px rgb(20 20 30 / 0.5);
  transform: scale(1.04);
}
/* height:auto is load-bearing - without it the height attribute beats aspect-ratio and the shot runs 900px tall */
.so-res__shot { width: 30%; height: auto; align-self: flex-start; aspect-ratio: 150 / 104; flex: none; border-radius: 10px; object-fit: cover; object-position: top; }
.so-res__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding-top: 2px; }
.so-res__title { display: block; width: 72%; height: 12px; border-radius: 6px; background-color: var(--indigo); }
.so-res--you .so-res__bar { background-color: rgb(47 47 53 / 0.28); }
.so-res__stars { display: flex; gap: 4px; margin-top: 4px; }
.so-res__stars span { width: 12px; height: 12px; border-radius: 50%; background-color: var(--marigold); }
@media (max-width: 599px) {
  .so-res--you { gap: 12px; padding: 14px; transform: none; }
  .so-res__stars span { width: 10px; height: 10px; }
}