/*
 * The landing page, and only the landing page.
 *
 * The refresh of 8 October 2026: one calm ground, a large serif headline with
 * an italic line, a call shown happening in the hero, fewer words and more
 * room. Loaded by `public/landing.html` alone, so the portal and every other
 * public page are untouched and reverting this is deleting this file and the
 * template change.
 *
 * It loads **before** shell.css (the `head_extra` block sits above the main
 * stylesheets in base.html), so every rule that overrides a shared class is
 * prefixed with `.lp` to win on specificity rather than on order.
 *
 * Tokens only, never raw colours, except the header's own ground, so both
 * themes follow from tokens.css.
 */

/* ---------------------------------------------------------------- ground */

/* No mesh and no grid. A single quiet ground is most of what reads as calm. */

/*
 * The photograph behind the whole page, 15 October 2026: a patient checking in
 * at a med spa desk while the phone rings. It sits still while the page scrolls
 * over it, faint enough that it gives the page depth and never competes with
 * the words.
 *
 * **A fixed layer, not `background-attachment: fixed`.** `.pub::before` is
 * already `position: fixed` behind everything (shell.css), so the photograph
 * is painted on it. That is what keeps it still on iOS Safari and Android
 * Chrome, which ignore `background-attachment: fixed` and would scroll it, and
 * it is one composited layer, so scrolling never repaints the photograph.
 *
 * **The veil is the page's own colour, and the figure is measured, not
 * chosen.** It is the thinnest veil at which the text sitting directly on
 * the photograph still clears its floor over the photograph's darkest one
 * percent on light (the phone and the suit) and its brightest on dark (the
 * walls): 4.5:1 for small text, 3:1 for the large accent headings.
 *
 * - **Light, 76%**, so the photograph shows at about a quarter, Ramoel's
 *   call of 15 October 2026 to make it stronger there. Small text on it is
 *   `--ink` to `--ink-3`, which measure 9.7, 6.0 and 4.6; the accent is only
 *   ever large here and measures 3.4. `--ink-4` would be 4.0, so the two
 *   footer lines set in it take `--ink-3` on this page (below).
 * - **Dark, 89%**, unchanged. The photograph's walls are near white, so a
 *   thinner veil on navy lifts the ground faster than it shows the picture.
 *
 * The bands below are 80% opaque over it, which keeps their own text above
 * 6:1 whatever the veil does. Re-measure if a text colour on the page ground
 * changes, because no battery measures a photograph.
 *
 * A CSS background is decoration and is never announced, so it needs no
 * `alt`. The file is `patient-check-in.jpg`, 1600 wide, with no text in it.
 */
.lp { --lp-veil: color-mix(in srgb, var(--bg) 76%, transparent); }
html[data-theme="dark"] .lp { --lp-veil: color-mix(in srgb, var(--bg) 89%, transparent); }

/* Measured at 4.0:1 over the darkest patch at the light veil, against 4.6 for
   `--ink-3`, the next step up and nearly the same shade. Light only. */
html:not([data-theme="dark"]) .lp .foot-who > span,
html:not([data-theme="dark"]) .lp .foot-address { color: var(--ink-3); }

main.pub.lp::before {
  opacity: 1;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--lp-veil), var(--lp-veil)),
    url("../media/patient-check-in.jpg");
  background-size: cover, cover;
  /* The desk, the patient and the ringing phone are right of centre. */
  background-position: center, 62% center;
  background-repeat: no-repeat;
}

/* A phone shows a tall slice of a wide photograph, and the words run the full
   width of it, so the crop moves onto the desk and the veil thickens a little:
   80% on light, still a little over twice what it was, and 92% on dark. */
@media (max-width: 640px) {
  .lp { --lp-veil: color-mix(in srgb, var(--bg) 80%, transparent); }
  html[data-theme="dark"] .lp { --lp-veil: color-mix(in srgb, var(--bg) 92%, transparent); }
  main.pub.lp::before { background-position: center, 70% center; }
}

/* The header's look is header.css, shared by every public page. */

/* One primary action, drawn in ink, the way a calm page does it. The header's
 * Get started follows, so the page has one button colour. */
.lp .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
}
.lp .btn-primary:hover {
  background: var(--ink-2);
  box-shadow: none;
}

.lp .lp-btn {
  padding: 13px 26px;
  font-size: 14px;
  letter-spacing: 0;
}
.lp .btn-ghost.lp-btn { border-color: var(--ink-3); color: var(--ink); }

/* ---------------------------------------------------------------- page */

.lp-page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  align-content: start;
}

.lp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.lp em {
  font-style: italic;
  color: var(--accent);
}

/* ---------------------------------------------------------------- hero */

/* The first screen follows the screen's height as well as its width.
 * Ramoel, 29 October 2026: the hero was 783px tall whatever the window, so
 * on a 1366 by 768 laptop, the commonest there is, the price line sat below
 * the fold, and at 1280 by 720 the call card was cut in half. The headline,
 * the padding and the gaps now shrink with `vh` on a short screen and stop at
 * their old sizes on a tall one, so 1440 by 900 and up is unchanged. */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
  align-items: center;
  /* 72px from a 900px screen up, about 34px at 625, which is what a 768px
   * laptop shows inside the browser's own toolbars. */
  padding: clamp(24px, calc(14vh - 54px), 72px) 0 clamp(32px, 6vh, 56px);
}
.lp-hero.is-solo { grid-template-columns: minmax(0, 1fr); }

.lp-hero-copy { display: grid; gap: clamp(14px, 2.4vh, 22px); align-content: start; }

.lp-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, min(6.4vw, 8.4vh), 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.lp-lede {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The hero's main action, the demo page, and visibly the bigger of the two:
 * taller and wider than the call card under it, which is compact here.
 * Ramoel's call of 29 October 2026. `justify-self: start` keeps a grid item
 * from stretching to the column; the width is set instead, capped. */
.lp .lp-demo-btn {
  justify-self: start;
  width: min(100%, 420px);
  min-height: clamp(54px, 8.4vh, 66px);
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 2.2vh, 19px) 34px;
  font-size: 18px;
  font-weight: 600;
}
.lp-hero-copy .call-card.is-compact { margin-top: -8px; }

@media (max-width: 640px) {
  .lp .lp-demo-btn { width: 100%; }
}

.lp-price {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}
.lp-price b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------- the call card */

.lp-phone-wrap { display: grid; gap: 12px; justify-items: center; }

.lp-phone {
  width: 100%;
  max-width: 430px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  display: grid;
  gap: clamp(10px, 1.8vh, 16px);
}

.lp-phone-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.lp-live { display: inline-flex; align-items: center; gap: 7px; }
.lp-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}

.lp-caller {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.lp-caller-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--ink-2);
}
.lp-caller-state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--good);
}
.lp-caller-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
}
.lp-caller-num { font-size: 12.5px; color: var(--ink-3); }

.lp-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lp-thread li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.lp-thread .who {
  justify-self: start;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface-1);
  color: var(--ink-3);
}
.lp-thread .is-line .who { background: var(--ink); color: var(--bg); }
.lp-thread p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.lp-thread .is-caller p { color: var(--ink-2); }

.lp-phone-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--surface-1);
  font-size: 12px;
  color: var(--ink-3);
}
.lp-phone-foot b { color: var(--ink); font-weight: 600; }

.lp-phone-note {
  max-width: 430px;
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: var(--ink-3);
}
.lp-phone-note a { color: var(--ink-2); text-decoration: underline; }

/*
 * The conversation arrives one line at a time.
 *
 * CSS alone, so it runs whether or not any script loads, and only where
 * motion is welcome. Outside this query every line is simply there, which is
 * the rule the reveal script follows: nothing starts hidden unless something
 * is certain to show it.
 */
@media (prefers-reduced-motion: no-preference) {
  .lp-thread li,
  .lp-phone-foot {
    animation: lp-line-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(0.5s + var(--at, 0) * 1.15s);
  }
  .lp-live i { animation: lp-pulse 1.8s ease-in-out infinite; }
}

@keyframes lp-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ------------------------------------------------------------ sections */

.lp-section {
  display: grid;
  gap: 40px;
  padding: 104px 0;
}

/*
 * Two grounds, alternating, so the page reads as a sequence of rooms rather
 * than one long sheet. MedspAI does the same with three warm tones.
 *
 * Full bleed without a wrapper: the band paints its own colour, a shadow of
 * the same colour spreads it to both edges of the window, and `clip-path`
 * keeps the shadow off the top and bottom. A shadow does not count towards
 * scrolling, so this cannot open a sideways scroll on a phone.
 *
 * The band colour is its own token, light and dark, rather than a raw value
 * in the rules below. Light is a deeper step of the same sand the page is
 * built on; dark is the next navy up from the page.
 */
.lp { --lp-band: #f1e7d3; --lp-band-card: #fbf8f2; }
html[data-theme="dark"] .lp { --lp-band: #111a2c; --lp-band-card: #182238; }

/* The deep panels: the closing band and the back of each job card. In light
   they are ink, the darkest thing on the page. In dark, ink is the lightest
   thing on the page, so following it turned them into bright cream blocks;
   they are a deeper navy there instead, a step above the bands, with the
   page's own light ink on them. */
.lp { --lp-deep: var(--ink); --lp-on-deep: var(--bg); }
html[data-theme="dark"] .lp { --lp-deep: #1a2744; --lp-on-deep: var(--ink); }

/* 80% rather than solid, so the photograph behind the page carries on
   through the bands instead of stopping at them. Measured with the veil
   above: every ink step still clears 4.5:1 on a band over the photograph's
   darkest and brightest patches. */
.lp { --lp-band-glass: color-mix(in srgb, var(--lp-band) 80%, transparent); }

.lp-band {
  background: var(--lp-band-glass);
  box-shadow: 0 0 0 100vmax var(--lp-band-glass);
  clip-path: inset(0 -100vmax);
}

/* Cards set on the band step up to the lighter card colour, or a card the
   same tone as the band behind it disappears into it. */
.lp-band .lp-job-front { background: var(--lp-band-card); }

.lp-head { display: grid; gap: 14px; align-content: start; }
.lp-head h2,
.lp-closer h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 20ch;
}
.lp-head p {
  margin: 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.lp-head-center { justify-items: center; text-align: center; }
.lp-head-center h2 { max-width: 22ch; }

/* Heading on the left, content on the right, for sections with one thing. */
.lp-split {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}
/* The heading stays where it is written. It used to be sticky and follow the
   reader down beside a taller right column, which read as text sliding over
   the page. The space under it now carries something of its own instead. */
.lp-split .lp-head { position: static; }

/* A photograph under the heading, cropped to one shape whatever the source,
   so the left column's height is predictable and lines up with the right. */
.lp-side-photo {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}
.lp-side-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.lp-side-photo figcaption { font-size: 13px; color: var(--ink-3); }

/* The plan's terms as four figures beside the card. */
.lp-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}
.lp-terms div {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--lp-band-card);
}
.lp-terms dt {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lp-terms dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

.lp-ask { font-size: 14.5px; color: var(--ink-2); }
.lp-ask a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------- three jobs */

.lp-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.lp-job-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.lp-job-no { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.lp-job-icon { color: var(--ink); }
.lp-job h3,
.lp-job-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lp-job-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.lp-job-body { margin: 0; font-size: 14px; line-height: 1.6; }
.lp-job-control {
  display: grid;
  gap: 3px;
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 13px;
}
.lp-job-control span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* What the front adds to its one line: short tags, each a claim the page makes
   below already. They sit beside the hint rather than competing with it. */
.lp-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.lp-job-tags li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
}
.lp-job-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12px;
  color: var(--ink-3);
}

/*
 * The card turns over, after medspai.com's "Four jobs".
 *
 * The article is the stage and holds the perspective; the inner layer turns;
 * the two faces sit on top of each other with their backs hidden. The front
 * is the card's own colour, the back is ink, so turning it over reads as
 * a change rather than a reprint of the same card.
 *
 * **The card is as tall as its taller face, and no taller.** Both faces sit in
 * the one grid cell, so the cell is sized by whichever is longer and the other
 * stretches to match. This was a fixed 360px, chosen for the longest back at
 * the narrowest three-column width, and every other width paid for it: at
 * 1440 the fronts used 188 to 210px of the 360 and half of each card was empty.
 * Measured on 15 October 2026. Now the card is 255 to 278px there and 319 at
 * 981, which is exactly what the text needs at each.
 */
.lp-job {
  position: relative;
  display: grid;
  perspective: 1400px;
  border-radius: 20px;
  outline: none;
}
.lp-job-inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-job-face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lp-job-front { background: var(--surface-1); }
.lp-job-back {
  transform: rotateY(180deg);
  border-color: var(--lp-deep);
  background: var(--lp-deep);
  color: var(--lp-on-deep);
}
.lp-job-back .lp-job-no { color: color-mix(in srgb, var(--lp-on-deep) 60%, transparent); }
.lp-job-back .lp-job-title { margin-top: 8px; color: var(--lp-on-deep); }
.lp-job-back .lp-job-body { color: color-mix(in srgb, var(--lp-on-deep) 86%, transparent); }
.lp-job-back .lp-job-control { border-top: 1px solid color-mix(in srgb, var(--lp-on-deep) 22%, transparent); }
.lp-job-back .lp-job-control span { color: color-mix(in srgb, var(--lp-on-deep) 62%, transparent); }

/* Turned by a pointer that can hover, or by keyboard focus. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-job:hover .lp-job-inner,
  .lp-job:focus-visible .lp-job-inner { transform: rotateY(180deg); }
}
.lp-job:focus-visible .lp-job-face { box-shadow: 0 0 0 3px var(--focus-ring); }

/*
 * Where there is no hover to turn it (a touchscreen) or motion is unwelcome,
 * the card does not turn: both faces stack, front over back, so everything on
 * the back is still read. Nothing hides behind a gesture somebody cannot make.
 */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .lp-job { perspective: none; }
  .lp-job-inner { display: block; transform: none !important; transform-style: flat; }
  .lp-job-face {
    position: relative;
    grid-area: auto;
    inset: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .lp-job-front { border-bottom: 0; border-radius: 20px 20px 0 0; padding-bottom: 16px; }
  .lp-job-back { transform: none; border-radius: 0 0 20px 20px; padding-top: 20px; }
  .lp-job-back .lp-job-title,
  .lp-job-back .lp-job-no,
  .lp-job-hint { display: none; }
}

/* -------------------------------------------------------- appointments */

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}
.lp-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.lp-step-no {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  font-style: italic;
  color: var(--accent);
}
.lp-steps h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.lp-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------------------------------------------------------------- film */

.lp-film-frame {
  width: 100%;
  max-width: 920px;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #000;
  box-shadow: var(--shadow-float);
}
.lp-film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* --------------------------------------------------------- safe by design */

.lp-safe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.lp-safe article {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 34px 30px 10px 0;
}
.lp-safe article + article { padding-left: 30px; border-left: 1px solid var(--line); }
.lp-safe-word {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 54px);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.lp-safe h3 { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.lp-safe p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------------------------------------------------------- calculator */

.lp .lp-calc {
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: none;
}
.lp .lp-calc .calc-out {
  padding: 26px;
  border-radius: 16px;
  background: var(--surface-2);
}
.lp .lp-calc .calc-figure { font-size: clamp(48px, 7vw, 72px); font-weight: 400; }
.lp .lp-calc .calc-fields { grid-template-columns: 1fr 1fr; }

/* **The calculator is as tall as what is in it.** It used to be stretched to the
   height of the column beside it, which carries a photograph, and with a
   figure and one line in the result box 437px held 129px of content: about
   60 percent of the white panel was empty. Measured on 15 October 2026. The
   working now sits in the box under the answer, and the panel is centred
   against the column rather than forced to match it. */
.lp #cost.lp-split { align-items: center; }
.lp .lp-calc { align-self: center; }
.lp .lp-calc .calc-out { align-content: start; gap: 8px; }

.lp .lp-calc .calc-sum {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lp .lp-calc .calc-sum-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lp .lp-calc .calc-sum-line { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.lp .lp-calc .calc-sum-year strong { font-weight: 600; color: var(--ink); }
.lp .lp-calc .calc-sum-ratio:empty { display: none; }

/* ------------------------------------------------------------- pricing */

.lp .lp-price-card {
  max-width: none;
  justify-self: stretch;
  padding: 34px;
  border-radius: 24px;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}
.lp .lp-price-card .price-badge {
  border-color: var(--line-strong);
  background: var(--surface-1);
  color: var(--ink-2);
}
.lp .lp-price-card .price-amount { font-size: clamp(56px, 7vw, 76px); font-weight: 400; }
.lp .lp-price-card .price-list { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.lp .lp-pricing .price-promise { justify-self: start; }

/* ----------------------------------------------------------- questions */

.lp .lp-faq summary {
  padding: 22px 2px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
}

/* --------------------------------------------------------------- closer */

.lp-closer {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 72px 28px;
  border-radius: 28px;
  background: var(--lp-deep);
  color: var(--lp-on-deep);
  text-align: center;
}
.lp-closer h2 { color: var(--lp-on-deep); max-width: 18ch; }
.lp-closer p { margin: 0; max-width: 46ch; font-size: 16px; opacity: 0.8; }
.lp-closer .lp-actions { justify-content: center; margin-top: 8px; }
.lp .lp-btn-light { background: var(--lp-on-deep); color: var(--lp-deep); }
.lp .lp-btn-light:hover { opacity: 0.9; }
.lp .lp-btn-outline {
  border-color: color-mix(in srgb, var(--lp-on-deep) 45%, transparent);
  color: var(--lp-on-deep);
}
.lp .lp-btn-outline:hover { border-color: var(--lp-on-deep); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 980px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 44px; }
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-split .lp-head { position: static; }
  .lp-jobs { grid-template-columns: minmax(0, 1fr); }
  .lp-safe { grid-template-columns: minmax(0, 1fr); }
  .lp-safe article,
  .lp-safe article + article { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .lp-section { padding: 76px 0; }
}

@media (max-width: 640px) {
  .lp-page { padding: 0 16px 32px; }
  .lp .lp-calc .calc-fields { grid-template-columns: minmax(0, 1fr); }
  .lp .lp-price-card { padding: 24px; }
  .lp .lp-price-card .price-list { grid-template-columns: minmax(0, 1fr); }
  .lp-closer { padding: 52px 20px; margin-top: 16px; }
  .lp-actions .lp-btn { flex: 1 1 auto; }
}