/* LOOK B, BLACK (Eric, 2026-10-10: "Reorganize the landing page so all three
   options are at the top. Have it be a more sleek black style with some
   color pop." Then: "make the chat the highlight option. Put 'not currently
   offering' and gray out the two options outside of chat.")

   The landing page alone, loaded only by index.html after glowup.css, so no
   other page moves. One visual world on every device: a black ground, white
   ink, and one electric cyan that belongs to the chat line and its button.
   High contrast is still honoured: the colour rules below step aside for it,
   and only the layout rules (unscoped) apply there.

   Palette: ground #0A0A0C, raised #131317, raised-2 #1B1B21, ink #F5F5F7,
   soft #D2D2D9, dim #9C9CA8, the pop #3DDCF5 (the wordmark's cyan, turned
   up), and a faint violet only in the ground's light. */

/* ---- the type: semibold (Eric, 2026-10-11: "change the font to something
   semibold. You tend to use the same font for everything.") Sora for the
   headings at 600, Manrope for the reading at 500 with 600 for anything that
   is pressed or labelled. Self-hosted latin subsets, Google Fonts' own woff2
   files fetched 2026-10-11; variable, so one file each carries every weight.
   The Fraunces and Source Sans 3 of Look A stay in glowup.css, unused here. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
}
body.landing {
  font-family: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
}
body.landing h1,
body.landing h2,
body.landing h3,
body.landing .num,
body.landing .svc-price,
body.landing .who-quote p {
  font-family: 'Sora', 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: -.025em;
}
body.landing .land-sec.hero h1 { letter-spacing: -.035em; }
body.landing .btn,
body.landing .act,
body.landing .eyebrow,
body.landing .opt-badge,
body.landing strong { font-weight: 600; }
body.landing .eyebrow { font-family: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif; }
body.landing .options > h2 { font-family: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif; font-weight: 700; letter-spacing: .16em; }

/* ---- the tokens, black ------------------------------------------------- */
:root:not([data-scheme="contrast"]):has(body.landing) {
  background: #0A0A0C;
  color-scheme: dark;
}
:root:not([data-scheme="contrast"]) body.landing {
  --bg: #0A0A0C;
  --bg-deep: #050506;
  --panel: #131317;
  --panel-2: #1B1B21;
  --ink: #F5F5F7;
  --soft: #D2D2D9;
  --dim: #9C9CA8;
  --muted: #73737F;
  --line: #26262E;
  --cyan: #3DDCF5;
  --cyan-dim: #1E8FA3;
  --magenta: #B9A6FF;
  --blue: #8FB4FF;
  --green: #4FD69C;
  --gold: #F2C14E;
  --danger: #FF7A7A;
  --on-accent: #02161A;
  --sur-quiet: #0F0F12;
  --sur-base: #131317;
  --sur-lit: #1B1B21;
  --sur-floating: #17171C;
  --sur-inset: #0D0D10;
  --edge-quiet: rgba(255, 255, 255, .06);
  --edge-base: rgba(255, 255, 255, .10);
  --edge-lit: rgba(255, 255, 255, .18);
  --edge-focus: #3DDCF5;
  --el-1: none;
  --el-2: 0 18px 50px rgba(0, 0, 0, .5);
  --el-3: 0 24px 70px rgba(0, 0, 0, .6);
  --el-cta: 0 10px 30px rgba(61, 220, 245, .28), 0 0 0 1px rgba(61, 220, 245, .55);
  --glow-c: 0 10px 30px rgba(61, 220, 245, .25);
  --glow-m: none;
  --bar: rgba(10, 10, 12, .82);
  --deep: #050506;
  --deep-2: #050506;
  --deep-ink: #F5F5F7;
  --deep-dim: #9C9CA8;
  --deep-line: rgba(255, 255, 255, .08);
  background-color: #0A0A0C;
  background-image:
    radial-gradient(900px 420px at 88% -6%, rgba(61, 220, 245, .11), transparent 62%),
    radial-gradient(700px 380px at -12% 26%, rgba(139, 123, 255, .07), transparent 60%);
  color: var(--ink);
}

/* Eric's notice (2026-10-11) came down on 2026-10-14 ("remove banner"); its
   rules went with it and are in git. */

/* ---- the hero: no card, just the line, kept short so the options sit in
   the first screen of a phone ------------------------------------------- */
body.landing main { padding-top: var(--s-2); }
body.landing .land-sec.hero {
  gap: var(--s-2);
  padding: var(--s-2) 0 0;
  border: 0;
  background: none;
}
body.landing .land-sec.hero h1 {
  font-size: clamp(2.3rem, 9.4vw, 3.8rem);
  line-height: 1.02;
}
body.landing .land-sec.hero + .options { margin-top: calc(var(--s-3) * -1); }
/* The wordmark is right above it in the bar; on a phone the tile is the
   space the options need. */
@media (max-width: 639px) {
  body.landing .land-sec.hero > .hero-logo { display: none; }
  body.landing .land-sec.hero .hero-sub { font-size: 1rem; }
}
:root:not([data-scheme="contrast"]) body.landing .hero-eyebrow {
  color: var(--cyan);
  letter-spacing: .14em;
}

/* ---- the three options ------------------------------------------------- */
body.landing .options {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
body.landing .options > h2 {
  margin: 0;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
body.landing .opt-lede { margin: 0; color: var(--soft); font-size: 1.12rem; line-height: 1.45; }
body.landing .opt-grid { display: grid; gap: var(--s-2); }
body.landing .opt {
  display: grid;
  align-content: start;
  gap: .5rem;
  padding: 1.3rem 1.25rem;
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
}
body.landing .opt h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
body.landing .opt-ic {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-1);
  background: var(--sur-quiet);
  color: var(--soft);
}
body.landing .opt .svc-price { font-size: 1.6rem; }
body.landing .opt .svc-line { color: var(--soft); font-size: var(--t-small); line-height: 1.5; }
body.landing .opt-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  margin-top: .45rem;
}
body.landing .opt-go {
  min-height: 48px;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}
body.landing .opt-more {
  color: var(--cyan);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}
body.landing .opt-more::after { content: " \203A"; }
body.landing .opt-tag,
body.landing .opt-badge {
  justify-self: start;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.landing .opt-tag { border: 1px solid var(--cyan); color: var(--cyan); }
body.landing .opt-badge { border: 1px solid var(--edge-lit); color: var(--soft); }

/* The chat line, lit: the one option open, at every hour. */
:root:not([data-scheme="contrast"]) body.landing .opt-live {
  border-color: rgba(61, 220, 245, .62);
  background:
    linear-gradient(180deg, rgba(61, 220, 245, .11), rgba(61, 220, 245, .02) 58%),
    var(--sur-base);
  box-shadow: 0 0 0 1px rgba(61, 220, 245, .22), 0 22px 60px rgba(61, 220, 245, .12);
}
:root:not([data-scheme="contrast"]) body.landing .opt-live .svc-price { color: var(--cyan); font-size: 2rem; }
:root:not([data-scheme="contrast"]) body.landing .opt-live .opt-ic { border-color: rgba(61, 220, 245, .4); color: var(--cyan); }
:root:not([data-scheme="contrast"]) body.landing .opt-live .opt-tag { background: var(--cyan); color: var(--on-accent); }

/* The two he is not offering: greyed, his words on them, no tap. */
body.landing .opt-off {
  border-style: dashed;
  background: var(--sur-quiet);
  cursor: default;
}
body.landing .opt-off > :not(.opt-badge) { opacity: .5; filter: grayscale(1); }

body.landing .options .hero-fine,
body.landing .options .reframe { margin: 0; color: var(--dim); font-size: var(--t-small); line-height: 1.5; }
body.landing .options .actions { margin: 0; }
body.landing .options .acts { margin: 0; }

/* ---- the rest, on black ------------------------------------------------ */
body.landing .who .hero-cred { margin: 0 0 var(--s-1); color: var(--soft); }
:root:not([data-scheme="contrast"]) body.landing .num { color: var(--cyan); border-color: rgba(61, 220, 245, .4); }
:root:not([data-scheme="contrast"]) body.landing .land-sec.ruled > h2 { color: #FFFFFF; }

@media (min-width: 900px) {
  body.landing .opt-grid { grid-template-columns: 1.3fr 1fr 1fr; align-items: stretch; }
  body.landing .opt-live .opt-acts { margin-top: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  body.landing .opt-go { transition: filter .15s ease, transform .12s ease; }
  body.landing .opt-go:hover { filter: brightness(1.08); }
  body.landing .opt-go:active { transform: translateY(1px); }
}

/* ---- the waitlist (Eric, 2026-10-12: "a small 'join the waitlist' that's
   in a shining text bubble at the top right of the screen") -------------
   A chat bubble, its tail at the bottom right, in the pop with a sheen that
   crosses it every few seconds. The sheen and the glow are motion, so they
   only run for people who have not asked for less of it. */
body.landing .wl-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--s-2);
}
body.landing .wl-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 20px 20px 4px 20px;
  background: linear-gradient(110deg, #3DDCF5 0%, #9BEBFA 48%, #B9A6FF 100%);
  color: #02161A;
  font-family: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 0 0 1px rgba(61, 220, 245, .55), 0 8px 26px rgba(61, 220, 245, .32);
  cursor: pointer;
}
/* The tail. */
body.landing .wl-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: #B9A6FF;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* The sheen. */
body.landing .wl-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  pointer-events: none;
}
body.landing .wl-spark { font-size: .85em; }
body.landing .wl-bubble:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  body.landing .wl-bubble::before { animation: wl-shine 3.6s ease-in-out infinite; }
  body.landing .wl-bubble { animation: wl-glow 3.6s ease-in-out infinite; }
  body.landing .wl-spark { display: inline-block; animation: wl-twinkle 3.6s ease-in-out infinite; }
}
@keyframes wl-shine {
  0%, 52% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
@keyframes wl-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(61, 220, 245, .55), 0 8px 26px rgba(61, 220, 245, .32); }
  50% { box-shadow: 0 0 0 1px rgba(61, 220, 245, .8), 0 8px 34px rgba(61, 220, 245, .55); }
}
@keyframes wl-twinkle {
  0%, 60%, 100% { transform: scale(1) rotate(0); }
  75% { transform: scale(1.35) rotate(45deg); }
}

/* The sheet. Tokens, so the high-contrast scheme gets its own colours. */
body.landing .wl-sheet {
  width: min(28rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 1.25rem;
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-3);
  background: var(--sur-floating);
  color: var(--ink);
  box-shadow: var(--el-3);
}
body.landing .wl-sheet::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
body.landing .wl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
body.landing .wl-head h2 { margin: 0; font-size: 1.35rem; }
body.landing .wl-x {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--edge-base);
  border-radius: 999px;
  background: none;
  color: var(--soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
body.landing .wl-form { display: grid; gap: .85rem; }
body.landing .wl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
body.landing .wl-form label {
  display: grid;
  gap: .35rem;
  min-width: 0;
  color: var(--soft);
  font-size: .9rem;
  font-weight: 600;
}
body.landing .wl-form input,
body.landing .wl-form select {
  width: 100%;
  min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid var(--edge-base);
  border-radius: var(--r-1);
  background: var(--sur-inset);
  color: var(--ink);
  font: 500 16px/1.3 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
}
body.landing .wl-form input:focus-visible,
body.landing .wl-form select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
body.landing .wl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.landing .wl-err { margin: 0; color: var(--danger); font-size: .92rem; font-weight: 600; }
body.landing .wl-go { min-height: 48px; margin-top: .25rem; border-radius: 999px; font-size: 1rem; font-weight: 700; }
body.landing .wl-done { display: grid; gap: .6rem; }
body.landing .wl-done[hidden], body.landing .wl-form[hidden] { display: none; }
body.landing .wl-done p { margin: 0; color: var(--soft); font-size: 1.05rem; line-height: 1.5; }
body.landing .wl-done .wl-done-h { color: var(--ink); font-family: 'Sora', 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif; font-size: 1.3rem; font-weight: 600; }
body.landing .wl-done .btn { justify-self: start; margin-top: .4rem; }
@media (max-width: 359px) {
  body.landing .wl-pair { grid-template-columns: 1fr; }
}

/* ==== v7.36: the chat line ringed, the home on one screen, the menu, and
   the question box (Eric, 2026-10-14) ==================================== */

/* ---- the chat card's ring (Eric: "Have a yellow shiny outline around it
   with an animated ease in ease out bright spot circling around the line",
   then: "make the glowing line around the chat ... the same gradient and
   effect as the waitlist button is right now"). The bubble's gradient,
   cyan to pale cyan to violet, as a 2px ring; a white spot rides round it
   on the bubble's 3.6s ease-in-out beat, and the card breathes the
   bubble's glow. The angle is a registered property so it can animate;
   where it cannot, the ring is still there, just still. */
/* SMOOTH ON A PHONE (Eric, 2026-10-17: "The app is having some hitching
   when scrolling"). The spot used to ride a registered angle inside a
   conic-gradient, with a blurred copy behind, so the whole card was painted
   again on every frame: measured, about a second of drawing work in every
   two. Now the line's gradient is the card's own ground and the fill sits
   over it, inset by the line's width, so only the line shows; the spot is a
   layer under the fill that turns, and turning is the graphics chip's work,
   not a repaint. Same line, same spot, same 3.6s ease in and out. */
:root:not([data-scheme="contrast"]) body.landing .opt-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* No border: the line is drawn inside the edge, so the clip is the card's own edge and the spot runs the line's full width. */
  border-width: 0;
  background: linear-gradient(110deg, #3DDCF5 0%, #9BEBFA 48%, #B9A6FF 100%);
  box-shadow: 0 0 0 1px rgba(61, 220, 245, .55), 0 8px 26px rgba(61, 220, 245, .32);
}
/* The spot: a square twice as wide as the card, centred on it, so it covers
   every corner while it turns; the card's rounded edge clips it. */
:root:not([data-scheme="contrast"]) body.landing .opt-gold::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 160%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  will-change: transform;
  backface-visibility: hidden;
  background: conic-gradient(transparent 0deg 300deg, rgba(255, 255, 255, .55) 322deg, #FFFFFF 338deg, rgba(255, 255, 255, .55) 350deg, transparent 360deg);
  pointer-events: none;
}
/* The card's fill, over the spot, leaving the 2.5px line around it. */
:root:not([data-scheme="contrast"]) body.landing .opt-gold::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  z-index: -1;
  border-radius: calc(var(--r-3) - 2.5px);
  /* The open card's own wash (.opt-live), now on the fill. */
  background:
    linear-gradient(180deg, rgba(61, 220, 245, .11), rgba(61, 220, 245, .02) 58%),
    var(--sur-base);
  pointer-events: none;
}
/* The package pages' hero wears the same ring over its own wash. */
:root:not([data-scheme="contrast"]) body.landing .pkg-hero.opt-gold::after {
  background:
    linear-gradient(160deg, rgba(61, 220, 245, .12), rgba(185, 166, 255, .06) 55%, transparent 80%),
    var(--sur-base);
}
/* STILL, NOT BREATHING (Eric, 2026-10-18: "The 24/7 priority chat is..
   jiggling? It's bouncing up and down. Make that stop."). The card's glow used
   to grow and shrink on the bubble's beat; a shadow that swells underneath
   reads as the card lifting and dropping, and the phone painted the whole card
   again on every frame of it, so it trailed the page while it scrolled. The
   glow holds still now. Only the spot turns, as a transform the graphics chip
   moves without repainting anything. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-scheme="contrast"]) body.landing .opt-gold::before { animation: pa-ring 3.6s ease-in-out infinite; }
}
@keyframes pa-ring { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---- the home, one screen (Eric: "Reorient everything so everything on the
   main page fits without scrolling"). The hero and the three options are
   the home; every other section is a screen of its own behind the menu.
   What the home carries steps down with the height it has, so a phone in
   Safari, with its bars showing, still never scrolls. */
/* site.css's old .landing column put a gap and a top pad round the bar. */
body.landing { gap: 0; padding-top: 0; min-height: 0; }
body.landing main { padding-top: .6rem; padding-bottom: .6rem; }
body.landing .land-sec.hero { gap: .5rem; padding-top: .25rem; }
body.landing .hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
}
:root:not([data-scheme="contrast"]) body.landing .hero-top .hero-eyebrow,
body.landing .hero-top .hero-eyebrow { font-size: .8rem; line-height: 1.35; letter-spacing: 0; text-transform: none; }
body.landing .hero-top .wl-bubble { min-height: 44px; padding: .4rem .85rem; font-size: .8rem; }
body.landing .land-sec.hero h1 { font-size: clamp(1.8rem, min(7.8vw, 5.4svh), 3.6rem); line-height: 1.03; }
body.landing .land-sec.hero .hero-sub { margin: 0; font-size: .98rem; line-height: 1.45; }
body.landing .land-sec.hero + .options { margin-top: 0; }
body.landing .options { gap: .55rem; padding-top: .9rem; }
body.landing .opt-lede { font-size: 1rem; }
body.landing .opt-grid { gap: .5rem; }
body.landing .opt { gap: .3rem; padding: .75rem .95rem; }
body.landing .opt h3 { font-size: 1.12rem; }
body.landing .opt-ic { width: 1.6rem; height: 1.6rem; }
body.landing .opt h3 { gap: .45rem; }
body.landing .opt .svc-line { font-size: .84rem; line-height: 1.38; }
/* NO SIDEWAYS SCROLL (Eric, 2026-10-17: "the landing page has side scroll"):
   the row wraps rather than letting "What is included" run past the card,
   and the page body clips anything that still would. A phone's browser lets
   the whole page pan sideways when one line runs past its edge. */
body.landing .opt-acts { flex-wrap: wrap; margin-top: .2rem; gap: .3rem .7rem; }
body.landing > main { overflow-x: clip; }
body.landing .opt-live .opt-go { flex: 0 0 auto; width: auto; min-height: 44px; padding: .55rem 1.15rem; }
body.landing .opt-live .opt-more { white-space: nowrap; }
/* The open card: the name and the price on one line. Lined up from the top, not
   the baseline (Eric's screenshot, 2026-10-18: on his iPhone the three-line
   Full-Service title sat with its first line above the card). The title is a
   flex row whose first item is the icon box, and WebKit takes that box's
   bottom edge, centred beside the middle line, as the title's baseline, so a
   baseline grid lifted the whole title until that edge met the price. From
   the top, nothing can move; the price's own line-height keeps its digits
   level with the title's first line. */
body.landing .opt-live {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: .75rem;
}
body.landing .opt-live > .svc-price { align-self: start; line-height: 1.2; padding-top: .08rem; }
body.landing .opt-live > .svc-line,
body.landing .opt-live > .opt-acts { grid-column: 1 / -1; }
:root:not([data-scheme="contrast"]) body.landing .opt-live .svc-price { font-size: 1.3rem; }
body.landing .opt .svc-per { font-size: .7em; }
/* The closed cards, one tight block each: the badge, then the name and the
   price on one line. Their sentences are on the services page. */
/* The price and the badge sit left, so the corner the question button
   rides is empty. */
body.landing .opt-off {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "name name" "price badge";
  justify-items: start;
  align-items: baseline;
  column-gap: .75rem;
  row-gap: .15rem;
  padding: .6rem .95rem;
}
body.landing .opt-off > h3 { grid-area: name; }
body.landing .opt-off > .svc-price { grid-area: price; }
body.landing .opt-off > .svc-line { grid-column: 1 / -1; }
body.landing .opt-off > .opt-badge { grid-area: badge; padding: 0; border: 0; font-size: .62rem; letter-spacing: .08em; }
body.landing .opt-off .svc-price { font-size: .95rem; }
body.landing .opt-off .opt-ic { display: none; }
body.landing .opt-off h3 { font-size: 1rem; }
@media (max-width: 899px) {
  body.landing .opt-off > .svc-line { display: none; }
}
body.landing .home-fine { margin: .1rem 0 0; padding-right: 4.2rem; color: var(--dim); font-size: .72rem; line-height: 1.35; }
body.landing .home-fine a { color: var(--soft); }
/* Height, stepping down: each line goes when the screen is too short to
   hold it as well, the least needed first. */
@media (max-height: 1000px) { body.landing .options .reframe { display: none; } }
@media (max-height: 940px) { body.landing .options .hero-fine { display: none; } }
@media (max-height: 900px) { body.landing .land-sec.hero .hero-sub { display: none; } }
@media (max-height: 760px) { body.landing .opt-lede { display: none; } }
@media (max-height: 700px) { body.landing .options > h2 { display: none; } }
/* A narrow phone wraps every line sooner, so it gets smaller type. */
@media (max-width: 389px) {
  body.landing .land-sec.hero h1 { font-size: clamp(1.5rem, 7.4vw, 1.9rem); }
  :root:not([data-scheme="contrast"]) body.landing .hero-top .hero-eyebrow,
  body.landing .hero-top .hero-eyebrow { font-size: .72rem; }
  body.landing .hero-top .wl-bubble { padding: .35rem .7rem; font-size: .74rem; }
  body.landing .opt h3 { font-size: 1rem; }
  body.landing .opt-off h3 { font-size: .9rem; }
  body.landing .opt .svc-line { font-size: .8rem; }
  body.landing .opt-live .opt-go { padding: .5rem 1rem; }
}
@media (max-width: 389px) and (max-height: 700px) {
  body.landing .opt-live > .svc-line { display: none; }
}
@media (max-width: 359px) {
  body.landing .opt-acts { flex-wrap: wrap; row-gap: .3rem; }
}
@media (max-width: 340px) {
  body.landing .hero-top .hero-eyebrow { display: none; }
  body.landing .hero-top { grid-template-columns: 1fr; justify-items: end; }
  body.landing .home-fine { display: none; }
}
/* A wide screen lays the cards side by side and has the room for more. */
@media (min-width: 900px) and (min-height: 700px) {
  body.landing .land-sec.hero .hero-sub,
  body.landing .opt-lede,
  body.landing .options > h2 { display: block; }
}
@media (max-height: 620px) {
  body.landing .opt-live > .svc-line,
  body.landing .home-fine { display: none; }
  body.landing .land-sec.hero h1 { font-size: clamp(1.6rem, 7.2vw, 2.2rem); }
  body.landing .options { padding-top: .5rem; }
  body.landing .opt { padding-top: .6rem; padding-bottom: .6rem; }
}

/* ---- every other section, a screen of its own (Eric: "a hamburger menu
   symbol at the top right where tabs for every other section appears").
   The menu's links are anchors; the section they name is the :target and
   lays itself over the home under the bar. Back, or the Back link, puts
   the home back. No script needed for any of it; landing-tabs.js only adds
   the Back links and makes Back a real step back. */
body.landing main > .land-sec.ruled,
body.landing .site-foot { display: none; }
body.landing main > .land-sec.ruled:target,
body.landing .site-foot:target {
  position: fixed;
  inset: var(--bar-h, 60px) 0 0;
  z-index: 4;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) max(16px, calc((100vw - 42rem) / 2)) 7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 0;
  background: var(--bg);
}
body.landing .site-foot:target { display: block; }
body.landing .panel-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--edge-base);
  border-radius: 999px;
  color: var(--soft);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
body.landing .site-foot .panel-back { margin-bottom: var(--s-3); }
/* The menu's two headings. */
body.landing .tabs-label {
  padding: .55rem .9rem .2rem;
  color: var(--dim);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.landing .bar-inner:not(.collapsed) .tabs-label { display: none; }
body.landing .bar-inner.collapsed .tabs a { padding: .55rem .9rem; }

/* ---- the question box (Eric: "Have a chat box icon at the bottom right of
   the screen and it opens up a window"). The button rides the corner of
   every screen of the landing; the sheet is the waitlist's, with a box for
   the question. */
body.landing .ask-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(110deg, #3DDCF5 0%, #9BEBFA 48%, #B9A6FF 100%);
  color: #02161A;
  box-shadow: 0 0 0 1px rgba(61, 220, 245, .55), 0 10px 28px rgba(0, 0, 0, .45);
  cursor: pointer;
}
body.landing .ask-fab svg { width: 26px; height: 26px; }
body.landing .ask-fab:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
body.landing .wl-form textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: .7rem .8rem;
  border: 1px solid var(--edge-base);
  border-radius: var(--r-1);
  background: var(--sur-inset);
  color: var(--ink);
  font: 500 16px/1.4 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  resize: vertical;
}
body.landing .wl-form textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
body.landing .ask-lede { margin: -.4rem 0 1rem; color: var(--soft); font-size: 1rem; line-height: 1.5; }

/* ==== v7.37: one package, one page (Eric, 2026-10-15: "it should go to a
   page dedicated to what the chat is. Same with the other two options. They
   should never commingle information." and "Keep the shiny blue/purple
   aesthetic throughout") ================================================= */

/* The two cards not offered are each a door to their own page now. */
body.landing a.opt { color: inherit; text-decoration: none; }
body.landing a.opt-off { position: relative; padding-right: 2.3rem; }
body.landing a.opt-off::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: .95rem;
  transform: translateY(-50%);
  color: var(--soft);
  font-size: 1.5rem;
  line-height: 1;
}
body.landing a.opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- the package pages: the home's black, its type, its ring ----------- */
body.landing.pkg main {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  padding: 1rem 16px 3rem;
}
body.landing .pkg-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--edge-base);
  border-radius: 999px;
  color: var(--soft);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
body.landing .pkg-hero {
  display: grid;
  gap: .55rem;
  padding: 1.35rem 1.25rem;
  border-radius: var(--r-3);
  background:
    linear-gradient(160deg, rgba(61, 220, 245, .12), rgba(185, 166, 255, .06) 55%, transparent 80%),
    var(--sur-base);
}
body.landing .pkg-hero h1 { margin: 0; font-size: clamp(2rem, 8.4vw, 3rem); line-height: 1.05; }
/* The shine, in the bubble's own gradient, on the words that carry it. */
body.landing .pkg-tag,
body.landing .pkg-price {
  margin: 0;
  background: linear-gradient(110deg, #3DDCF5 0%, #9BEBFA 48%, #B9A6FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.landing .pkg-tag { justify-self: start; font-size: .74rem; font-weight: 700; letter-spacing: .16em; }
body.landing .pkg-price { justify-self: start; font-family: 'Sora', 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif; font-size: 2.1rem; font-weight: 600; line-height: 1.1; }
body.landing .pkg-price .svc-per { font-size: .5em; }
body.landing .pkg-line { margin: 0; color: var(--soft); font-size: 1.02rem; line-height: 1.5; }
body.landing .pkg-status { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .35rem; }
body.landing .pkg-status .opt-badge { border: 1px solid var(--edge-lit); color: var(--soft); }
body.landing .pkg-go { min-height: 48px; padding: .65rem 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 700; }
body.landing .pkg-body { display: grid; gap: 1rem; }
body.landing .pkg-sec {
  display: grid;
  gap: .7rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
}
body.landing .pkg-sec h2 { margin: 0; font-size: 1.15rem; }
body.landing .pkg-sec p { margin: 0; color: var(--soft); line-height: 1.6; }
body.landing .pkg-tldr { box-shadow: inset 3px 0 0 #3DDCF5; }
body.landing .pkg-tldr p { color: var(--ink); font-size: 1.05rem; }
body.landing .pkg-points { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
body.landing .pkg-points li { position: relative; padding-left: 1.5rem; color: var(--soft); line-height: 1.5; }
body.landing .pkg-points li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  top: .05em;
  background: linear-gradient(110deg, #3DDCF5, #B9A6FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.landing .pkg-note { color: var(--dim) !important; font-size: .95rem; }
body.landing.pkg .footer-disclaimer { margin-top: .5rem; color: var(--dim); font-size: .85rem; line-height: 1.5; }

/* The chat page's letter (Eric, 2026-10-15): his words, signed. */
body.landing .pkg-letter p { color: var(--ink); font-size: 1.05rem; line-height: 1.65; }
body.landing .pkg-letter .pkg-sign { margin-top: .3rem; color: var(--soft); font-weight: 600; }

/* The chat page's what-to-expect note (Eric, 2026-10-15): ringed in the
   pop's gradient so it is the first thing read after the price. */
body.landing .pkg-callout {
  display: grid;
  gap: .4rem;
  padding: 1rem 1.15rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-3);
  background: linear-gradient(var(--sur-base), var(--sur-base)) padding-box, linear-gradient(110deg, #3DDCF5 0%, #9BEBFA 48%, #B9A6FF 100%) border-box;
  box-shadow: 0 10px 30px rgba(61, 220, 245, .14);
}
body.landing .pkg-callout p { margin: 0; color: var(--soft); line-height: 1.55; }
body.landing .pkg-callout .pkg-callout-h { color: var(--ink); font-family: 'Sora', 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif; font-size: 1.08rem; font-weight: 600; }

/* ---- PREVIEW A CASE (Eric, 2026-10-15) ---------------------------------
   "This showcase suite will be on the top left in the same aesthetic as the
   waitlist button, but it will say 'preview a case'." The waitlist bubble's
   twin: the same gradient, glow and sheen (it carries the same class), with
   its tail on the other side. The two share the hero's first row, preview on
   the left and waitlist on the right, and the line about the practice runs
   under both. (The pull-up numbers tab that sat at the foot of the page came
   off the same day: "remove the stats tab on the landing page".) */
body.landing .hero-top { grid-template-columns: auto auto; justify-content: space-between; row-gap: .45rem; }
body.landing .hero-top .hero-eyebrow { grid-column: 1 / -1; }
body.landing .pv-bubble { justify-self: start; border-radius: 20px 20px 20px 4px; text-decoration: none; }
/* Its tail on the left, in the gradient's first colour. */
body.landing .pv-bubble::after { right: auto; left: -7px; background: #3DDCF5; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
body.landing .hero-top [data-waitlist-open] { justify-self: end; }
/* The second bubble gave the hero a row, and a phone in Safari with its bars
   showing (390 by 664) ran 25px past one screen. On a short phone the
   headline takes the narrow phone's size, two lines instead of three, so the
   home still fits without hiding anything. */
@media (max-width: 439px) and (max-height: 720px) {
  body.landing .land-sec.hero h1 { font-size: clamp(1.5rem, 7.4vw, 1.9rem); }
}