/* ------------------------------------------------------------------
   Landing page (marketing) only. Loaded by layouts/landing; never by the
   app. Lives outside app/assets so `stylesheet_link_tag :app` does not
   pull it into every page.

   Colours, radii and motion come from the shared tokens (application.css).
   Tailwind only emits theme variables that a utility uses, so the few
   theme values the landing needs are mirrored here with the same values.
   The stage wallpapers and the fictional "Harbor" app drawn inside the
   scenes have their own palette below: illustration colours, used nowhere
   else.
   ------------------------------------------------------------------ */

.lp {
  --lp-radius-xl: 28px;
  --lp-radius-lg: 18px;
  --lp-radius-sm: 8px;
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Springs as CSS easing, sampled with Motion's spring(): the cut reveal
     (stiffness 190, damping 22, 21st.dev's Vertical Cut Reveal) and a soft,
     barely bouncing one for larger surfaces. Use with the paired duration. */
  --lp-spring-cut: linear(0, 0.076, 0.2395, 0.4243, 0.5944, 0.7341, 0.8397, 0.9139, 0.9625, 0.9918, 1.0074, 1.0142, 1.0156, 1.0142, 1.0115, 1.0087, 1.0061, 1.0039, 1.0023, 1.0012, 1.0005, 1, 1);
  --lp-spring-cut-ms: 700ms;
  --lp-spring-soft: linear(0, 0.0442, 0.1477, 0.2776, 0.4125, 0.5393, 0.6511, 0.745, 0.8209, 0.8799, 0.9243, 0.9565, 0.9789, 0.9938, 1.003, 1.0082, 1.0106, 1.0111, 1.0105, 1.0093, 1.0079, 1.0064, 1.005, 1.0037, 1.0027, 1.0019, 1.0013, 1.0008, 1, 1);
  --lp-spring-soft-ms: 900ms;
  --lp-wrap: 76rem;
  --lp-gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --lp-h2-size: clamp(2rem, 1.15rem + 3.3vw, 3.75rem);
  --lp-lede-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --lp-band: #0d0e11;
  --lp-bar: #000000;

  /* Stage wallpapers: only ever behind a product frame. */
  --wp-dusk:
    radial-gradient(120% 90% at 8% 105%, rgb(255 166 77 / 0.95) 0%, rgb(255 166 77 / 0) 52%),
    radial-gradient(90% 80% at 92% 0%, rgb(84 56 214 / 0.95) 0%, rgb(84 56 214 / 0) 60%),
    radial-gradient(80% 90% at 70% 100%, rgb(222 60 140 / 0.9) 0%, rgb(222 60 140 / 0) 62%),
    linear-gradient(160deg, #2a1b5e 0%, #6b2a86 45%, #c2477a 75%, #f08a4b 100%);
  --wp-tide:
    radial-gradient(100% 80% at 0% 0%, rgb(46 196 182 / 0.85) 0%, rgb(46 196 182 / 0) 58%),
    radial-gradient(90% 90% at 100% 100%, rgb(48 86 230 / 0.95) 0%, rgb(48 86 230 / 0) 60%),
    linear-gradient(150deg, #0c4a5a 0%, #11607a 40%, #1f4fb8 80%, #2a3aa6 100%);
  --wp-ember:
    radial-gradient(110% 90% at 100% 0%, rgb(255 197 49 / 0.8) 0%, rgb(255 197 49 / 0) 55%),
    radial-gradient(90% 90% at 0% 100%, rgb(214 66 52 / 0.9) 0%, rgb(214 66 52 / 0) 60%),
    linear-gradient(145deg, #5a1f2b 0%, #a3402f 50%, #e08a3a 100%);
  --wp-slate:
    radial-gradient(100% 90% at 15% 0%, rgb(124 140 170 / 0.55) 0%, rgb(124 140 170 / 0) 60%),
    radial-gradient(100% 90% at 100% 100%, rgb(70 92 150 / 0.7) 0%, rgb(70 92 150 / 0) 60%),
    linear-gradient(160deg, #1d2330 0%, #2b3550 55%, #3b4a72 100%);

  /* The fictional app (Harbor) and terminal drawn inside scenes. */
  --hb-bg: #ffffff;
  --hb-side: #f6f7f9;
  --hb-ink: #14171c;
  --hb-muted: #687080;
  --hb-line: #e7e9ee;
  --hb-brand: #3651d4;
  --hb-brand-ink: #ffffff;
  --hb-ok: #12805c;
  --hb-ok-bg: #e3f4ec;
  --hb-a: #e8dcff;
  --hb-b: #d6ecff;
  --hb-c: #ffe3cc;
  --hb-d: #d9f2e4;
  --hb-e: #fff1bf;
  --hb-av-ink: #2b2f38;
  --tm-bg: #0f1013;
  --tm-ink: #e6e8ec;
  --tm-dim: #8a91a0;
  --tm-ok: #3ddc97;
  --tm-prompt: #d6a4ff;
  --chrome-bg: #1b1d22;
  --chrome-bar: #24272d;
  --chrome-ink: #d7dae0;
  --chrome-dim: #8d939e;
  --light-r: #ff5f57;
  --light-y: #febc2e;
  --light-g: #28c840;

  /* Scene surfaces and marks drawn inside the product frames. */
  --sc-white: #ffffff;
  --sc-black: #0d0f12;
  --sc-soft: #c4c9d2;
  --bt-base: #3a3f4a;
  --bt-1: #59617a;
  --bt-3: #4c5466;
  --hb-skeleton: #e2e5ec;
  --sc-well: #15171c;
  /* Fernpay, the fictional payments dashboard in the across-tabs scene. */
  --fp-side: #0f2a24;
  --fp-brand: #1f9d74;
  --fp-ink: #11201c;
  --fp-muted: #5c6b66;
  --fp-line: #e3e8e6;
  --fp-ok: #0f7a52;
  --fp-ok-bg: #dcf3e8;
  --fp-warn: #7a5000;
  --fp-warn-bg: #fdf0d2;
  --xt-harbor: #aab6ff;
  --xt-fernpay: #86dfbd;
  --sc-busy: #2b2e35;
  --bt-2: #2d3546;
  --bt-live: #3a3b30;

  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp :where(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; }
.lp :where(ul, ol) { padding: 0; list-style: none; }
.lp a:not(.btn) { color: inherit; }
.lp-main { display: block; outline: none; }
.lp .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lp-wrap {
  width: 100%;
  max-width: calc(var(--lp-wrap) + var(--lp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* ================================================================ type */

.lp-display,
.lp-h2 {
  font-weight: 640;
  color: var(--ink);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.lp-display {
  font-size: clamp(2.625rem, 1.2rem + 5vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.lp-h2 {
  font-size: var(--lp-h2-size);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.lp-lede {
  max-width: 36em;
  font-size: var(--lp-lede-size);
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--muted);
  text-wrap: pretty;
}
.lp-key { color: var(--ink); font-weight: 520; }

/* Kinetic type (LandingHelper#landing_words): each word in its own clipped
   box, so it can slide up into place. The box is padded and pulled back by
   the same amount, so descenders and accents are not cut and the line box
   does not change. */
.kin-w {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-block: 0.08em 0.14em;
  margin-block: -0.08em -0.14em;
}
.kin-i { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .kin-load .kin-i { animation: lp-cut var(--lp-spring-cut-ms) var(--lp-spring-cut) both; }
  .kin-load .kin-w:nth-child(2) .kin-i { animation-delay: 70ms; }
  .kin-load .kin-w:nth-child(3) .kin-i { animation-delay: 140ms; }
  .kin-load .kin-w:nth-child(4) .kin-i { animation-delay: 210ms; }
  .kin-load .kin-w:nth-child(5) .kin-i { animation-delay: 280ms; }
  .kin-load .kin-w:nth-child(6) .kin-i { animation-delay: 350ms; }
  /* Set by the kinetic controller just before it plays, never by markup:
     without JavaScript the words and copy are simply there. */
  [data-armed="view"] .kin-i { transform: translateY(160%); }
  [data-armed] [data-kinetic-target~="after"] { opacity: 0; }
}
@keyframes lp-cut { from { transform: translateY(160%); } }

/* ================================================================ nav */

.lp-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0.75rem var(--lp-gutter) 0;
  pointer-events: none;
}
.lp-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  max-width: 50rem;
  height: 3.25rem;
  padding: 0 0.5rem 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--overlay-shadow);
}
.lp-nav-home { display: inline-flex; align-items: center; min-height: 2.25rem; padding-inline: 0.25rem; border-radius: var(--lp-radius-sm); text-decoration: none; }
.lp-nav-home .wordmark { font-size: 0.9375rem; }
.lp-nav-links { display: flex; align-items: center; gap: 0.125rem; margin-left: auto; }
.lp-nav-actions { display: flex; align-items: center; gap: 0.375rem; margin-left: 0.5rem; }
.lp-nav-link {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms var(--lp-ease), background-color 140ms var(--lp-ease);
}
.lp-nav-link:hover { color: var(--ink); background: rgb(255 255 255 / 0.06); }
.lp-nav-cta.btn { height: 2.25rem; border-radius: 999px; padding-inline: 1rem; font-size: 0.875rem; }

.lp-nav-link { white-space: nowrap; }
@media (max-width: 59.99rem) {
  .lp-nav-link { padding-inline: 0.5rem; }
}
/* Five section links and two actions: a little tighter where the pill is narrowest. */
@media (min-width: 48rem) and (max-width: 53.99rem) {
  .lp-nav-link { padding-inline: 0.375rem; }
  .lp-nav-actions { margin-left: 0.25rem; }
}
@media (max-width: 59.99rem) {
  .lp-nav-links { gap: 0; }
}
@media (max-width: 47.99rem) {
  .lp-nav-links { display: none; }
  .lp-nav-actions { margin-left: auto; }
  .lp-nav { padding-left: 0.75rem; }
}
@media (max-width: 22.5rem) {
  .lp-nav-signin { display: none; }
}

/* The page as a beat strip (timeline controller): one beat per section,
   as wide as the section is tall, played beats in white and the yellow
   playhead where the reader is. Decorative; shown once the controller has
   measured the page. */
.lp-nav-wrap { flex-direction: column; align-items: center; }
.lp-tl {
  position: relative;
  width: min(100% - 3rem, 46rem);
  height: 0.6875rem;
  margin-top: 0.3125rem;
  overflow: clip;
  overflow-clip-margin: 2px;
  opacity: 0;
  transition: opacity 400ms var(--lp-ease);
}
.lp-tl[data-ready] { opacity: 1; }
.lp-tl-beats { position: absolute; inset: 0.25rem 0 auto; display: flex; gap: 3px; height: 3px; }
.lp-tl-beats > i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: rgb(255 255 255 / 0.16); }
.lp-tl-fill > i { background: rgb(255 255 255 / 0.62); }
.lp-tl-fill { clip-path: inset(0 100% 0 0); }
.lp-tl-head { position: absolute; inset: 0; transform: translateX(0%); }
.lp-tl-head::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--canvas);
}

/* ================================================================ buttons */

.lp .btn-lg.lp-cta { height: 3rem; padding-inline: 1.375rem; border-radius: 999px; font-size: 1rem; font-weight: 600; }
.lp .lp-cta-quiet { height: 3rem; padding-inline: 1.25rem; border-radius: 999px; font-size: 1rem; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); }
.lp .lp-cta-quiet:hover { background: rgb(255 255 255 / 0.06); }
.lp .btn:focus-visible, .lp a:focus-visible, .lp button:focus-visible, .lp summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ================================================================ sections */

.lp-section {
  --lp-space: clamp(4.5rem, 2.75rem + 5.5vw, 8.5rem);
  position: relative;
  padding-block: var(--lp-space) 0;
}
.lp-section-band { background: var(--lp-band); padding-bottom: var(--lp-space); margin-top: var(--lp-space); }
.lp-section-band + .lp-section { padding-top: var(--lp-space); }
.lp-head {
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  text-align: center;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.lp-head .lp-lede { margin-inline: auto; }
.lp-head-start { justify-items: start; text-align: left; }
.lp-head-start .lp-lede { margin-inline: 0; }

/* One quiet sentence under a scene, its key phrase in ink. */
.lp-note {
  max-width: 40em;
  margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
  text-wrap: pretty;
}

/* One reveal per section as it scrolls in. Browsers without scroll-driven
   animations simply show everything, and so does a tour (?tour, body
   data-tour: landing/tour.js). :where() keeps the specificity as it was. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(.lp:not([data-tour])) .lp-reveal {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(2.5rem) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ================================================================ stage + frame */

.lp-stage {
  position: relative;
  container-type: inline-size;
  margin: 0;
  padding: clamp(0.875rem, 0.2rem + 3.4cqi, 4rem);
  border-radius: var(--lp-radius-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--wp-slate);
}
.lp-stage-dusk { background: var(--wp-dusk); }
.lp-stage-tide { background: var(--wp-tide); }
.lp-stage-ember { background: var(--wp-ember); }
.lp-stage-slate { background: var(--wp-slate); }
/* A soft vignette makes the wallpaper feel lit rather than flat. */
.lp-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 45%, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 70%),
    linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.22));
  pointer-events: none;
}

/* Cinema bars: while the AI is recording, the stage is a cutscene. The bars
   close in during the record part of a scene and open again for your turn
   (and for everything that is not recording). */
.lp-bars { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.lp-bars::before,
.lp-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(0.5rem, 0.1rem + 2.6cqi, 2.75rem);
  background: var(--lp-bar);
  transform: scaleY(0);
  transition: transform 520ms var(--lp-ease);
}
.lp-bars::before { top: 0; transform-origin: 50% 0; }
.lp-bars::after { bottom: 0; transform-origin: 50% 100%; }
.lp-stage:has(> .sc[data-phase="record"]) .lp-bars::before,
.lp-stage:has(> .sc[data-phase="record"]) .lp-bars::after,
.lp-stage:has(> .sc-tabs[data-phase="ai"]) .lp-bars::before,
.lp-stage:has(> .sc-tabs[data-phase="ai"]) .lp-bars::after,
.lp-stage:has(> .sc-tabs[data-phase="back"]) .lp-bars::before,
.lp-stage:has(> .sc-tabs[data-phase="back"]) .lp-bars::after { transform: none; }

.lp-pause {
  position: absolute;
  z-index: 6;
  right: 0.75rem;
  top: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: rgb(10 11 14 / 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--sc-white);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 140ms var(--lp-ease), background-color 140ms var(--lp-ease);
}
.lp-pause:hover, .lp-pause:focus-visible { opacity: 1; background: rgb(10 11 14 / 0.8); }
.lp-pause .lp-play-icon { display: none; }
.lp-pause[aria-pressed="true"] .lp-play-icon { display: block; }
.lp-pause[aria-pressed="true"] .lp-pause-icon { display: none; }
@media (prefers-reduced-motion: reduce), (scripting: none) { .lp-pause { display: none; } }
/* Phones: room above the window for the pause button. */
@media (max-width: 40rem) { .lp-stage:has(.lp-pause) { padding-top: 3.25rem; } }

/* ================================================================ scene engine
   Everything inside a scene is sized in em from one font size that follows
   the stage width, so a scene is real, crisp layout at any size. */

.sc {
  --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  font-size: clamp(5.5px, 1.04cqi, 14px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  user-select: none;
  -webkit-user-select: none;
}
.sc * { box-sizing: border-box; }
.sc i, .sc b { font-style: normal; }

/* Cue vocabulary. Anything with an "on" cue starts hidden; "gone" hides. */
.sc [data-cues*=" on"]:not(.on),
.sc [data-cues^="on"]:not(.on),
.sc .gone {
  opacity: 0;
  visibility: hidden;
}
.sc [data-cues] {
  transition:
    opacity 260ms var(--sc-ease),
    transform 420ms var(--sc-ease),
    visibility 0s linear 0s;
}
.sc [data-cues*=" on"]:not(.on),
.sc .gone {
  transition:
    opacity 200ms var(--sc-ease),
    transform 300ms var(--sc-ease),
    visibility 0s linear 200ms;
}
.is-paused .sc *, .is-paused .sc *::before, .is-paused .sc *::after { animation-play-state: paused !important; }

/* Text that swaps in place: every option shares one grid cell. */
.sc-swap { display: inline-grid; min-width: 0; }
.sc-swap > * { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-swap > .sc-y { transform: translateY(0.35em); }
.sc-swap > .sc-y.on { transform: none; }

/* The fake cursor: glides between targets, presses on clicks. */
.sc-cursor {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 1.55em;
  height: 1.85em;
  margin: -0.15em 0 0 -0.2em;
  transform: translate(var(--x, 50%), var(--y, 50%));
  transition: transform 640ms cubic-bezier(0.45, 0, 0.2, 1), opacity 200ms ease;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.sc-cursor.on { opacity: 1; }
.sc-cursor.is-jump { transition: opacity 200ms ease; }
.sc-cursor svg {
  width: 100%;
  height: 100%;
  fill: var(--sc-black);
  stroke: var(--sc-white);
  filter: drop-shadow(0 0.15em 0.25em rgb(0 0 0 / 0.35));
  transition: transform 120ms ease;
  transform-origin: 20% 10%;
}
.sc-cursor.is-click svg { transform: scale(0.84); }
.sc-click {
  position: absolute;
  top: -0.9em;
  left: -0.95em;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: 0.14em solid var(--accent);
  opacity: 0;
  transform: scale(0.3);
}
.sc-cursor.is-click .sc-click { animation: sc-ripple 520ms var(--sc-ease); }
@keyframes sc-ripple {
  0% { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.35); }
}
.is-pressed { transform: scale(0.96) !important; }

/* ---------------------------------------------------------------- window */

.sc-win {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  aspect-ratio: 16 / 10;
  border-radius: 1.1em;
  overflow: hidden;
  background: var(--chrome-bg);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 0.2em 0.5em rgb(0 0 0 / 0.25),
    0 3em 6em -1.5em rgb(0 0 0 / 0.6);
  color: var(--chrome-ink);
}
.sc-chrome {
  display: flex;
  align-items: flex-end;
  gap: 1.2em;
  height: 2.9em;
  padding: 0 1em;
}
.sc-lights { display: inline-flex; gap: 0.5em; align-self: center; }
.sc-lights i { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--light-r); }
.sc-lights i:nth-child(2) { background: var(--light-y); }
.sc-lights i:nth-child(3) { background: var(--light-g); }
.sc-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  width: 17em;
  height: 2.3em;
  padding: 0 0.9em;
  border-radius: 0.7em 0.7em 0 0;
  background: var(--chrome-bar);
  font-size: 0.95em;
}
.sc-tab .sc-swap { display: inline-flex; align-items: center; gap: 0.6em; min-width: 0; }
.sc-tab .sc-swap > .sc-fav { grid-area: auto; }
.sc-tab .sc-x { position: relative; }
.sc-tab .sc-x.sc-y { position: absolute; margin-left: 1.6em; }
.sc-fav { flex: none; width: 1em; height: 1em; border-radius: 0.3em; background: var(--hb-brand); }
.sc-bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  height: 2.9em;
  padding: 0 0.8em 0 1em;
  background: var(--chrome-bar);
  border-bottom: 1px solid rgb(0 0 0 / 0.4);
}
.sc-url {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: 1;
  min-width: 0;
  height: 2em;
  padding: 0 0.9em;
  border-radius: 1em;
  background: var(--chrome-bg);
  color: var(--chrome-dim);
  font-size: 0.95em;
}
.sc-url svg { width: 0.95em; height: 0.95em; }
.sc-ext {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  color: var(--accent);
  background: rgb(255 197 49 / 0.12);
}
.sc-ext .lp-mark { width: 1.1em; height: 1.1em; }
.lp-mark { color: var(--accent); }
.lp-mark-cut { stroke: var(--canvas); }

.sc-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 22.5em;
  min-height: 0;
  background: var(--hb-bg);
}
.sc-view { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.sc-app, .sc-share { grid-area: 1 / 1; }
.sc-panel { grid-area: 1 / 2; border-left: 1px solid rgb(0 0 0 / 0.5); }

/* ---------------------------------------------------------------- Harbor app */

.hb {
  position: relative;
  display: grid;
  grid-template-columns: 12.5em 1fr;
  height: 100%;
  background: var(--hb-bg);
  color: var(--hb-ink);
}
.hb-side {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 1.3em 0.8em;
  background: var(--hb-side);
  border-right: 1px solid var(--hb-line);
}
.hb-brand { display: flex; align-items: center; gap: 0.6em; margin: 0 0.5em 1.1em; font-weight: 650; font-size: 1.05em; }
.hb-logo { width: 1.3em; height: 1.3em; border-radius: 0.4em; background: var(--hb-brand); box-shadow: inset 0 -0.35em 0 rgb(0 0 0 / 0.15); }
.hb-group { margin: 1em 0.6em 0.3em; font-size: 0.8em; font-weight: 600; color: var(--hb-muted); }
.hb-nav {
  padding: 0.5em 0.6em;
  border-radius: 0.5em;
  color: var(--hb-muted);
  font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
.hb-nav-on { background: var(--sc-white); color: var(--hb-ink); box-shadow: 0 0 0 1px var(--hb-line), 0 0.1em 0.2em rgb(0 0 0 / 0.04); }
.hb-main { position: relative; min-width: 0; }
.hb-page { position: absolute; inset: 0; padding: 1.8em 2em; }
.hb-page.gone, .hb-page[data-cues*=" on"]:not(.on) { transform: translateY(0.6em); }
.hb-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.3em; }
.hb-title { font-size: 1.55em; font-weight: 680; letter-spacing: -0.02em; }
.hb-count { margin-left: 0.4em; font-size: 0.6em; font-weight: 500; color: var(--hb-muted); letter-spacing: 0; }
.hb-btn {
  display: inline-flex;
  align-items: center;
  height: 2.4em;
  padding: 0 1em;
  border-radius: 0.6em;
  background: var(--hb-brand);
  color: var(--hb-brand-ink);
  font-weight: 600;
  white-space: nowrap;
  transition: transform 120ms ease;
}
.hb-btn-ghost { background: var(--sc-white); color: var(--hb-ink); box-shadow: inset 0 0 0 1px var(--hb-line); }
.hb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9em;
  height: 3.3em;
  padding: 0 0.6em;
  border-bottom: 1px solid var(--hb-line);
}
.hb-dot { width: 0.7em; height: 0.7em; border-radius: 0.25em; background: var(--hb-brand); opacity: 0.35; }
.hb-name { font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-meta { color: var(--hb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-tag, .hb-role {
  justify-self: end;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: var(--hb-side);
  color: var(--hb-muted);
  font-size: 0.85em;
  font-weight: 560;
}
.hb-av {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 650;
  color: var(--hb-av-ink);
  background: var(--hb-a);
}
.hb-av-b { background: var(--hb-b); }
.hb-av-c { background: var(--hb-c); }
.hb-av-d { background: var(--hb-d); }
.hb-av-e { background: var(--hb-e); }
.hb-sub { margin: 1.4em 0 0.3em 0.6em; font-size: 0.85em; font-weight: 600; color: var(--hb-muted); }
/* The recorder's ring on what the voice is talking about (Phase 1 and 2). */
.sc .hb-ringable {
  border-radius: 0.6em;
  transition: box-shadow 260ms var(--sc-ease), background-color 260ms var(--sc-ease), opacity 260ms var(--sc-ease), transform 420ms var(--sc-ease);
}
.hb-ringable.ring { box-shadow: 0 0 0 0.18em var(--accent); background: rgb(255 197 49 / 0.08); }
.hb-title.hb-ringable { margin-left: -0.3em; padding: 0.05em 0.3em; }
.hb-pending { position: relative; border-radius: 0.6em; }
.hb-pending[data-cues*=" on"]:not(.on) { transform: translateY(-0.5em); }
.hb-pending.ring { box-shadow: 0 0 0 0.18em var(--accent); background: rgb(255 197 49 / 0.08); border-color: transparent; }
.hb-scrim { position: absolute; inset: 0; z-index: 3; background: rgb(15 18 25 / 0.35); }
.hb-dialog {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 0.55em;
  width: 25em;
  padding: 1.5em;
  border-radius: 1em;
  background: var(--sc-white);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1.5em 3em -0.5em rgb(15 18 25 / 0.35);
  transform: translate(-50%, -50%);
}
.hb-dialog[data-cues*=" on"]:not(.on) { transform: translate(-50%, -46%) scale(0.97); }
.hb-dialog-title { margin-bottom: 0.5em; font-size: 1.2em; font-weight: 680; letter-spacing: -0.015em; }
.hb-label { font-size: 0.85em; font-weight: 600; color: var(--hb-muted); }
.hb-input {
  display: flex;
  align-items: center;
  height: 2.6em;
  padding: 0 0.8em;
  border-radius: 0.6em;
  box-shadow: inset 0 0 0 1px var(--hb-line);
  color: var(--hb-ink);
  transition: box-shadow 160ms ease;
}
.hb-input.focus { box-shadow: inset 0 0 0 1px var(--hb-brand), 0 0 0 0.2em rgb(54 81 212 / 0.18); }
.hb-caret { display: none; width: 1px; height: 1.2em; margin-left: 1px; background: var(--hb-ink); }
.hb-input.focus .hb-caret { display: block; animation: sc-blink 1s steps(1) infinite; }
.hb-select { color: var(--hb-muted); }
.hb-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6em; margin-top: 0.8em; }
.hb-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 1.4em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.1em;
  border-radius: 0.7em;
  background: var(--hb-ink);
  color: var(--sc-white);
  font-weight: 560;
  white-space: nowrap;
  transform: translateX(-50%);
}
.hb-toast[data-cues*=" on"]:not(.on) { transform: translate(-50%, -0.6em); }
.hb-toast svg { width: 1.1em; height: 1.1em; color: var(--tm-ok); }
@keyframes sc-blink { 50% { opacity: 0; } }

/* Countdown before recording starts (not part of the video). */
.sc-count {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgb(8 9 11 / 0.55);
}
.sc-count span {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 4.6em;
  height: 4.6em;
  border-radius: 50%;
  background: rgb(8 9 11 / 0.7);
  color: var(--sc-white);
  font-size: 1.9em;
  font-weight: 650;
  box-shadow: 0 0 0 0.12em var(--accent);
}
.sc-count span:not(.on) { transform: scale(0.8); }

/* Captions burned into the recording. */
.sc-captions {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 1.5em;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.sc-cue {
  grid-area: 1 / 1;
  max-width: 88%;
  padding: 0.35em 0.75em;
  border-radius: 0.45em;
  background: rgb(8 9 11 / 0.82);
  color: var(--sc-white);
  font-size: 1.2em;
  font-weight: 540;
  letter-spacing: -0.01em;
  text-align: center;
}
.sc-cue:not(.on) { transform: translateY(0.25em); }
/* Lines that replace each other in one spot: the old one leaves at once so
   two never blend. */
.sc .sc-cue:not(.on) { transition: none; }

/* ---------------------------------------------------------------- side panel */

.cp {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.1em;
  background: var(--surface);
  color: var(--ink);
}
.cp-head { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.9em; margin-bottom: 1em; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.cp-head .lp-mark { width: 1.2em; height: 1.2em; }
.cp-host { color: var(--muted); font-size: 0.9em; }
.cp-screen { position: relative; display: flex; flex-direction: column; gap: 0.7em; min-height: 0; flex: 1; }
.cp-ctx.gone { position: absolute; inset: 4.2em 1.1em 1.1em; }
.cp-script { position: absolute; inset: 4.2em 1.1em 1.1em; }
.cp-label { font-weight: 620; font-size: 1.05em; }
.cp-card {
  display: grid;
  gap: 0.35em;
  padding: 0.85em 0.95em;
  border-radius: 0.8em;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px rgb(255 197 49 / 0.55);
}
.cp-card[data-cues*=" on"]:not(.on) { transform: translateY(0.5em) scale(0.98); }
.cp-card-src { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.82em; font-weight: 600; color: var(--accent); }
.cp-card-src svg { width: 1.1em; height: 1.1em; }
.cp-card-title { font-weight: 620; }
.cp-card-body { color: var(--muted); font-size: 0.9em; line-height: 1.45; }
.cp-or { margin-top: 0.3em; font-size: 0.85em; color: var(--muted); }
.cp-area { height: 5.5em; border-radius: 0.7em; background: var(--raised); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.cp-primary {
  display: grid;
  place-items: center;
  height: 2.7em;
  margin-top: auto;
  border-radius: 0.7em;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  transition: transform 120ms ease;
}
.cp-title { font-size: 1.2em; font-weight: 680; letter-spacing: -0.015em; }
.cp-status { display: flex; min-width: 0; color: var(--muted); font-size: 0.88em; }
.cp-steps { display: grid; gap: 0.45em; margin: 0.2em 0 0; padding: 0; list-style: none; }
.cp-step {
  display: grid;
  gap: 0.2em;
  padding: 0.55em 0.7em;
  border-radius: 0.65em;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: box-shadow 200ms ease, background-color 200ms ease, opacity 260ms var(--sc-ease), transform 420ms var(--sc-ease);
}
.cp-step:not(.on) { transform: translateY(0.4em); }
.cp-step.cur { background: var(--overlay); box-shadow: inset 0 0 0 1px var(--accent); }
.cp-step.done { opacity: 0.55; }
.cp-act { display: flex; gap: 0.45em; min-width: 0; font-size: 0.82em; white-space: nowrap; }
.cp-kind { font-weight: 650; color: var(--ink); }
.cp-target { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.cp-line {
  color: var(--sc-soft);
  font-size: 0.86em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-strip {
  position: relative;
  display: grid;
  /* --beats: each step's slot (LandingHelper#landing_strip_style). */
  grid-template-columns: var(--beats, repeat(5, 1fr));
  gap: 0.2em;
  height: 1.6em;
  margin-top: auto;
  padding: 0.3em;
  border-radius: 0.5em;
  background: var(--canvas);
}
.cp-beat { border-radius: 0.25em; background: var(--bt-base); }
.cp-beat:not(.on) { transform: scaleX(0.2); transform-origin: left; }
.cp-beat-1 { background: var(--bt-1); }
.cp-beat-3 { background: var(--bt-3); }
.cp-beat-5 { background: var(--bt-1); }
.cp-head-line {
  position: absolute;
  top: -0.25em;
  bottom: -0.25em;
  left: 0.3em;
  right: 0.3em;
  pointer-events: none;
}
.cp-head-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.14em;
  border-radius: 0.1em;
  background: var(--accent);
  box-shadow: 0 0 0.6em rgb(255 197 49 / 0.6);
}
.cp-head-line { transform: translateX(0); }
.cp-head-line.play { animation: sc-sweep 5.25s linear forwards; }
@keyframes sc-sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }
.cp-foot { position: relative; display: grid; height: 2.7em; }
.cp-foot > * { grid-area: 1 / 1; }
.cp-record {
  display: grid;
  place-items: center;
  border-radius: 0.7em;
  background: var(--overlay);
  color: var(--muted);
  font-weight: 650;
  transition: background-color 240ms ease, color 240ms ease, transform 120ms ease, opacity 200ms ease;
}
.cp-record.ready { background: var(--accent); color: var(--accent-ink); }
.cp-record .sc-x { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; }
.cp-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
.cp-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  border-radius: 0.7em;
  background: rgb(255 197 49 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 197 49 / 0.5);
  color: var(--accent);
  font-weight: 620;
}
.cp-live .cp-dot { animation: sc-pulse 1.2s ease-in-out infinite; }
.cp-live b { font-variant-numeric: tabular-nums; color: var(--sc-white); font-weight: 620; }
.cp-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 0.7em;
  background: rgb(61 220 151 / 0.12);
  color: var(--tm-ok);
  font-weight: 600;
  font-size: 0.92em;
}
.cp-done svg { width: 1.1em; height: 1.1em; }
@keyframes sc-pulse { 50% { opacity: 0.35; transform: scale(0.75); } }

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

.sc-share { background: var(--canvas); color: var(--ink); }
.sc-share[data-cues*=" on"]:not(.on) { transform: scale(0.985); }
.sh { display: grid; grid-template-rows: auto auto 1fr; gap: 1em; height: 100%; padding: 1.6em 2em; }
.sh-player {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 30em;
  justify-self: center;
  width: 100%;
  max-width: 53.5em;
  border-radius: 0.8em;
  overflow: hidden;
  background: var(--hb-bg);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

/* The player: the recording of Harbor (landing/_harbor_team) laid out in em
   of a font size that follows the player's width (64em across, 16 by 9), so
   it is the same picture at any size and Zoom::LandingClip's boxes hold.
   landing/playback.js moves the view (auto zoom), the recording's cursor and
   the recorder's ring; captions and the progress bar sit over it, unzoomed. */
.sh-screen { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; }
.sh-world { position: absolute; inset: 0; font-size: calc(100cqi / 64); transform-origin: 0 0; will-change: transform; }
/* The page inside is a desktop recording at every size: undo the phone and
   tablet compositions that the scene's container queries would apply. */
.sh-world .hb { grid-template-columns: 12.5em 1fr; }
.sh-world .hb-side { display: flex; }
.sh-world .hb-page { padding: 1.8em 2em; }
.sh-world .hb-title { font-size: 1.55em; }
.sh-world .hb-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; height: 3.3em; }
.sh-world .hb-row > .hb-meta { display: block; }
.sh-world .hb-dialog { width: 25em; }
.sh-ring, .sh-pointer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.sh-ring { opacity: 0; }
.sh-ring > i { position: absolute; top: 0; left: 0; display: block; border-radius: 0.6em; box-shadow: 0 0 0 0.18em var(--accent), 0 0 0 0.6em rgb(255 197 49 / 0.18); }
.sh-pointer { z-index: 8; }
.sh-cursor { position: absolute; top: 0; left: 0; display: block; width: 1.55em; height: 1.85em; margin: -0.15em 0 0 -0.2em; opacity: 0; }
.sh-cursor svg { width: 100%; height: 100%; fill: var(--sc-black); stroke: var(--sc-white); filter: drop-shadow(0 0.15em 0.25em rgb(0 0 0 / 0.35)); }
.sh-cursor.is-click .sc-click { animation: sc-ripple 520ms var(--sc-ease); }
.sh-caps { position: absolute; z-index: 9; left: 0; right: 0; bottom: 1.6em; display: grid; justify-items: center; pointer-events: none; }
.sh-cap { grid-area: 1 / 1; max-width: 90%; padding: 0.25em 0.6em; border-radius: 0.35em; background: rgb(8 9 11 / 0.82); color: var(--sc-white); font-size: 0.95em; text-align: center; }
.sc .sh-cap:not(.on) { transition: none; }
.sh-progress { position: absolute; z-index: 9; left: 0.8em; right: 0.8em; bottom: 0.7em; height: 0.3em; border-radius: 1em; background: rgb(0 0 0 / 0.15); overflow: hidden; }
.sh-progress-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0.02); }
.sh-meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.1em 1em; max-width: 53.5em; width: 100%; justify-self: center; }
.sh-title { font-size: 1.35em; font-weight: 680; letter-spacing: -0.02em; }
.sh-by { grid-row: 2; color: var(--muted); font-size: 0.9em; }
.sh-copy {
  grid-row: 1 / 3;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 2.5em;
  padding: 0 1em;
  border-radius: 0.6em;
  background: var(--overlay);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  font-weight: 600;
  transition: transform 120ms ease;
}
.sh-copy svg { width: 1.1em; height: 1.1em; }
.sh-lines { display: grid; align-content: start; gap: 0.15em; max-width: 53.5em; width: 100%; margin: 0; padding: 0; justify-self: center; list-style: none; }
.sc .sh-line {
  display: flex;
  gap: 0.9em;
  min-width: 0;
  padding: 0.45em 0.8em;
  border-radius: 0.5em;
  color: var(--muted);
  font-size: 0.92em;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.sh-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-time { flex: none; font-variant-numeric: tabular-nums; }
.sc .sh-line.cur { background: var(--sc-well); box-shadow: inset 0.18em 0 0 var(--accent); color: var(--sc-soft); }
/* The share page has the recording's own cursor: the scene's one leaves. */
.sc-hero[data-phase="share"] .sc-cursor { opacity: 0; }

/* ---------------------------------------------------------------- terminal */

.sc-term {
  position: absolute;
  z-index: 20;
  left: 7%;
  top: 22%;
  display: grid;
  gap: 0.55em;
  width: 46%;
  padding: 0 1.2em 1.3em;
  border-radius: 0.9em;
  background: var(--tm-bg);
  color: var(--tm-ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.12em;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 2em 4em -1em rgb(0 0 0 / 0.75);
}
.sc-term[data-cues*=" on"]:not(.on) { transform: translateY(1em) scale(0.97); }
.tm-bar {
  display: flex;
  align-items: center;
  gap: 1em;
  height: 2.6em;
  margin: 0 -1.2em 0.3em;
  padding: 0 1em;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  color: var(--tm-dim);
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 0.85em;
}
.tm-bar .sc-lights i { width: 0.85em; height: 0.85em; }
.tm-line { display: flex; align-items: baseline; gap: 0.4em; min-width: 0; line-height: 1.45; }
.tm-prompt b { color: var(--tm-prompt); }
.tm-dim { color: var(--tm-dim); }
.tm-dim b { color: var(--tm-ink); font-weight: 500; }
.tm-caret { display: inline-block; width: 0.55em; height: 1.1em; background: var(--tm-ink); align-self: center; animation: sc-blink 1s steps(1) infinite; }
.tm-ok { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--tm-ok); align-self: center; }

/* ================================================================ hero */

.lp-hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.lp-hero-copy { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.lp-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }
.lp-hero-note { font-size: 0.875rem; color: var(--muted); text-wrap: balance; }
/* The note and the two app links (landing/app_links) share one line on wide
   screens and wrap under it on narrow ones. */
.lp-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 1.25rem; max-width: 100%; }
.lp-app-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }
.lp-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.5rem;
  border-radius: var(--lp-radius-sm);
  font-size: 0.875rem;
  font-weight: 520;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color 140ms var(--lp-ease);
}
.lp-app-link:hover { text-decoration-color: currentColor; }
.lp-app-link svg { color: var(--muted); }
@media (min-width: 48rem) {
  .lp-app-links { padding-left: 1.25rem; border-left: 1px solid var(--line-strong); }
}
.lp-hero-stage-wrap { margin-top: clamp(2.5rem, 1.75rem + 2.6vw, 4rem); }
.lp-hero-stage { box-shadow: 0 2rem 6rem -2rem rgb(140 70 200 / 0.35); }
/* On short screens (laptops at 1280x720 or 1366x768) the flat frame, about
   0.68 of its width tall, would not fit under the sticky bar, so the depth
   controller could only settle it cut off. Cap its width by the window's
   height (bar 5rem + 1rem above and below), never under 50rem, where the
   scene keeps its wide layout; tall screens keep the full width. */
@media (min-width: 48rem) {
  .lp-hero-stage { max-width: max(50rem, calc((100svh - 7rem) / 0.69)); margin-inline: auto; }
}

/* The first screen moves on its own, in CSS so it starts with the first
   paint: the headline's words cut in (see Kinetic type), the copy under it
   rises a little (transform only, so the text is there and readable at
   once), and the stage comes up from below. */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-copy > :not(h1) { animation: lp-nudge 900ms var(--lp-ease) both; }
  .lp-hero-copy > :nth-child(2) { animation-delay: 220ms; }
  .lp-hero-copy > :nth-child(3) { animation-delay: 300ms; }
  .lp-hero-copy > :nth-child(4) { animation-delay: 380ms; }
  .lp-hero-stage-wrap > .lp-scene { animation: lp-stage-in var(--lp-spring-soft-ms) var(--lp-spring-soft) 360ms both; }
}
@keyframes lp-nudge { from { transform: translateY(0.9rem); } }
@keyframes lp-stage-in { from { transform: translateY(5rem); } }

/* Depth (depth controller): frames tilted back settle flat as the page
   scrolls. The hero's first frame is drawn here, exactly where its scroll
   animation starts, so nothing jumps when Motion takes over; the same media
   query switches the controller on. */
/* Each frame turns about the edge that would otherwise come toward you, so
   a tilted frame is never wider than it is flat (no sideways overflow). */
.lp-stage[data-depth-target="frame"] { transform-origin: 50% 0; }
.lp-hero-stage[data-depth-target="frame"] { transform-origin: 50% 100%; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  .lp-hero-stage { transform: perspective(1400px) translateY(-24%) rotateX(18deg) scale(0.94); }
}

/* Chapters under the hero scene: where the story is, and a way to jump. */
.lp-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 46rem;
  margin: 1.25rem auto 0;
}
.lp-chapter {
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 520;
  text-align: left;
  cursor: pointer;
  transition: color 160ms var(--lp-ease);
}
.lp-chapter::before,
.lp-chapter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.lp-chapter::after {
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}
.lp-chapter[data-current="true"] { color: var(--ink); }
.lp-chapter:hover { color: var(--ink); }
.lp-chapter:focus-visible { outline-offset: 4px; border-radius: 4px; }

/* ================================================================ beat strip */

.sc-strip { font-size: clamp(6px, 1.22cqi, 16px); }
.bs {
  display: grid;
  gap: 1.6em;
  padding: 1.5em 1.6em 1.9em;
  border-radius: 1.1em;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 3em 6em -1.5em rgb(0 0 0 / 0.7);
}
.bs-top { display: flex; align-items: center; gap: 1em; min-width: 0; }
.bs-title { font-size: 1.35em; font-weight: 680; letter-spacing: -0.02em; white-space: nowrap; }
.bs-meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-saved { display: inline-flex; align-items: center; gap: 0.35em; margin-left: auto; color: var(--tm-ok); font-size: 0.9em; font-weight: 560; }
.bs-saved svg { width: 1.1em; height: 1.1em; }
.bs-record {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 2.7em;
  padding: 0 1.2em;
  margin-left: auto;
  border-radius: 0.7em;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 680;
  white-space: nowrap;
}
.bs-saved + .bs-record { margin-left: 0; }
.bs-time { font-variant-numeric: tabular-nums; }
.bs-record.flash { animation: bs-flash 700ms var(--sc-ease); }
@keyframes bs-flash { 0% { transform: scale(1); } 30% { transform: scale(1.08); box-shadow: 0 0 0 0.35em rgb(255 197 49 / 0.35); } 100% { transform: scale(1); } }

/* --total (the video's seconds) and --beats (lead-in, each step's slot, tail)
   come from the script's timing: LandingHelper#landing_strip_style. */
.bs-track { position: relative; }
.bs-ruler {
  position: relative;
  height: 1.9em;
  margin-bottom: 0.6em;
  background-image: repeating-linear-gradient(to right, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 100%);
  background-size: calc(100% / var(--total)) 0.4em;
  background-repeat: repeat-x;
  background-position: left bottom;
  color: var(--muted);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.bs-tick { position: absolute; top: 0; transform: translateX(-50%); }
.bs-tick-0 { left: 0; transform: none; }
.bs-tick-10 { left: calc(10 / var(--total) * 100%); }
.bs-tick-20 { left: calc(20 / var(--total) * 100%); }
.bs-tick-30 { left: calc(30 / var(--total) * 100%); }
.bs-tick-40 { left: calc(40 / var(--total) * 100%); }
.bs-tick-end { right: 0; transform: none; color: var(--accent); font-weight: 600; }
.bs-beats {
  display: grid;
  grid-template-columns: var(--beats, repeat(7, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.bs-beats::before, .bs-beats::after { content: ""; }
.bs-beat { display: grid; grid-template-rows: auto 1fr; gap: 0.7em; min-width: 0; padding-right: 0.25em; }
.bs-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1em;
  min-width: 0;
  height: 3.6em;
  padding: 0 0.75em;
  border-radius: 0.55em;
  background: var(--bt-base);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  white-space: nowrap;
  overflow: hidden;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
.bs-beat-1 .bs-block { background: var(--bt-1); }
.bs-beat-2 .bs-block { background: var(--bt-2); }
.bs-beat-3 .bs-block { background: var(--bt-3); }
.bs-beat-4 .bs-block { background: var(--bt-2); }
.bs-beat-5 .bs-block { background: var(--bt-1); }
.bs-beat.cur .bs-block { box-shadow: inset 0 0 0 0.12em var(--accent); background: var(--bt-live); }
.bs-kind { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.bs-slot { color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.bs-line {
  position: relative;
  padding: 0.1em 0.4em 0 0.7em;
  color: var(--muted);
  font-size: 0.92em;
  line-height: 1.45;
  border-radius: 0.4em;
  transition: color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.bs-line::before { content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.15); }
.bs-beat.cur .bs-line { color: var(--sc-white); }
.bs-beat.cur .bs-line::before { background: var(--accent); }
.bs-line-edit.focus { background: var(--raised); box-shadow: 0 0 0 1px var(--focus); color: var(--sc-white); }
.bs-old.gone { display: none; }
.bs-playhead {
  position: absolute;
  top: 1.2em;
  bottom: -0.6em;
  left: 0;
  right: 0;
  pointer-events: none;
}
.bs-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 0.8em rgb(255 197 49 / 0.55);
}
.bs-playhead::after {
  content: "";
  position: absolute;
  top: -0.35em;
  left: -0.45em;
  width: 0.9em;
  height: 0.7em;
  border-radius: 0.2em 0.2em 0.5em 0.5em;
  background: var(--accent);
}
.bs-playhead.play { animation: sc-sweep 5.6s linear forwards; }

@container (max-width: 40rem) {
  .sc-strip { font-size: clamp(9px, 3.1cqi, 13px); }
  .bs { padding: 1.2em; gap: 1.1em; }
  .bs-meta { display: none; }
  .bs-ruler, .bs-playhead { display: none; }
  .bs-beats, .edited .bs-beats { grid-template-columns: 1fr; gap: 0.9em; }
  .bs-beats::before, .bs-beats::after { display: none; }
  .bs-beat { gap: 0.35em; }
  /* --w: the step's share of the longest (LandingHelper#landing_strip_style). */
  .bs-block { flex-direction: row; align-items: center; justify-content: space-between; width: calc(var(--w, 1) * 100%); min-width: 7.5em; height: 2.5em; }
}

/* ================================================================ agent */

.sc-agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26em;
  align-items: center;
  aspect-ratio: 16 / 7.4;
  font-size: clamp(5.5px, 1.08cqi, 14.5px);
}
.ag-term {
  grid-area: 1 / 1 / 2 / 3;
  justify-self: start;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  width: 70%;
  border-radius: 1em;
  overflow: hidden;
  background: var(--tm-bg);
  color: var(--tm-ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 3em 6em -1.5em rgb(0 0 0 / 0.7);
}
.ag-term .tm-bar { margin: 0; }
.ag-body {
  display: grid;
  align-content: start;
  gap: 0.8em;
  padding: 1.4em 1.6em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.04em;
}
.ag-dot { flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--tm-dim); align-self: center; }
.ag-box {
  display: grid;
  gap: 0.55em;
  padding: 1em 1.1em;
  border-radius: 0.6em;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  line-height: 1.45;
}
.ag-box[data-cues*=" on"]:not(.on) { transform: translateY(0.4em); }
.ag-row { display: grid; grid-template-columns: 4.5em 1fr; gap: 0.8em; }
.ag-key { color: var(--tm-prompt); }
.ag-yes { color: var(--tm-ok); }
.ag-panel {
  position: relative;
  z-index: 2;
  grid-area: 1 / 2;
  height: 92%;
  gap: 0.75em;
  border-radius: 1.1em;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 3em 6em -1.5em rgb(0 0 0 / 0.75);
}
.ag-when { margin-left: auto; color: var(--muted); font-weight: 500; }
.ag-card .cp-card-src { display: flex; }
.ag-card.picked { box-shadow: inset 0 0 0 0.14em var(--accent); background: var(--bt-live); }
.cp-primary.busy { background: var(--sc-busy); color: var(--sc-soft); }

/* ================================================================ how it works
   One scene, three chapters: Claude Code hands over (the agent layout), then
   the beat strip is checked, rewritten and recorded. Both layers share one
   grid cell, so the stage keeps the height of the taller one. */

.sc-how { display: grid; align-items: center; }
.sc-how > .hw-layer { grid-area: 1 / 1; min-width: 0; }
@container (min-width: 40.01rem) { .sc-how .sc-agent { aspect-ratio: 16 / 6.4; } }
/* The strip fills more of the stage the agent layer sizes, so it reads at a glance. */
@container (min-width: 60.01rem) { .sc-how .sc-strip { font-size: clamp(6px, 1.5cqi, 19px); } }
.hw-act { display: grid; margin-left: auto; }
.hw-act > * { grid-area: 1 / 1; }
.bs-saved + .hw-act { margin-left: 0; }
.hw-act .bs-record { margin-left: 0; }
.hw-live, .hw-done { height: 2.7em; padding: 0 1.1em; white-space: nowrap; }
.hw-rewrite {
  position: absolute;
  z-index: 3;
  left: 0.7em;
  top: calc(100% + 0.45em);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  height: 2.2em;
  padding: 0 0.8em;
  border-radius: 0.55em;
  background: var(--overlay);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0.8em 1.6em -0.4em rgb(0 0 0 / 0.6);
  color: var(--ink);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
.hw-rewrite svg { width: 1.1em; height: 1.1em; }
.hw-rewrite[data-cues*=" on"]:not(.on) { transform: translateY(-0.3em); }
.bs-line-edit.busy .bs-old { animation: hw-think 0.9s ease-in-out infinite; }
@keyframes hw-think { 50% { opacity: 0.4; } }

/* Pinned and scrubbed on wide screens (scene controller, scrub-until; the
   same media query switches it on): the track is the scroll distance, and
   the pin holds the heading and the scene together, centred under the nav,
   while the scroll position plays it. Pinning them together fills the
   screen: a scene pinned alone sat in the middle of an empty viewport, with
   a gap the height of that emptiness under its heading. The scene is capped
   by what the viewport has left after the nav, the heading (the h2 and a
   two-line lede) and the chapters, so it always fits whole; below 42rem
   of height it would be too small to read, so it plays on its own there.
   The section's top space gives back the nav's share, which the pin keeps
   clear. Not in a tour (?tour), where the scene plays on its own clock as
   on narrow screens. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 42rem) {
  :where(.lp:not([data-tour])) #how { --hw-top: clamp(4.75rem, 10svh, 5.5rem); padding-top: calc(var(--lp-space) - var(--hw-top)); }
  :where(.lp:not([data-tour])) .hw-track { height: 250svh; }
  :where(.lp:not([data-tour])) .hw-pin {
    /* Height the scene's frame cannot have: the nav's room, the h2's line,
       the head's gap, a two-line lede, the head's margin, the chapters and
       the bottom padding. Frames are 2.13 to 2.24 times as wide as tall from
       40 to 76rem. */
    --hw-head-gap: clamp(1.5rem, 4svh, 2.5rem);
    --hw-reserve: calc(var(--hw-top) + var(--lp-h2-size) * 1.02 + 1.125rem + var(--lp-lede-size) * 3 + var(--hw-head-gap) + 4rem + 1rem);
    --hw-ratio: 2.12;
    position: sticky;
    top: 0;
    display: grid;
    align-content: safe center;
    height: 100svh;
    padding: var(--hw-top) 0 1rem;
  }
  :where(.lp:not([data-tour])) .hw-pin > .lp-head { margin-bottom: var(--hw-head-gap); }
  :where(.lp:not([data-tour])) .hw-pin > .lp-scene { width: min(100%, (100svh - var(--hw-reserve)) * var(--hw-ratio)); margin-inline: auto; animation: none; }
  .is-scrub .lp-pause { display: none; }
}
.hw-playhead.play { animation-duration: 4.8s; }
.lp-chapters-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 36rem; }
/* Phones: every chapter name on one line ("Check the script" wrapped at 390 px). */
@media (max-width: 30rem) { .lp-chapter { padding-inline: 0; font-size: 0.8125rem; } }

/* ================================================================ across tabs
   Harbor and Fernpay in two tabs of one window, the side panel listing each
   step's tab, and the person's turn with Chrome's file picker. */

.sc-tabs { display: grid; justify-items: center; gap: 1em; }
.xt-win { width: 100%; aspect-ratio: 16 / 8.8; }
.xt-chrome { gap: 0.4em; }
.xt-chrome .sc-lights { margin-right: 0.8em; }
.xt-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  width: 15em;
  height: 2.3em;
  padding: 0 0.9em;
  border-radius: 0.7em 0.7em 0 0;
  color: var(--chrome-dim);
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 200ms ease, color 200ms ease;
}
.xt-tab-on { background: var(--chrome-bar); color: var(--chrome-ink); }
.xt-fav-fp { background: var(--fp-brand); border-radius: 50%; }
.xt-app { grid-area: 1 / 1; }
.xt-page { position: absolute; inset: 0; }
.xt-page.hb { height: auto; }
.hb-row.xt-row { grid-template-columns: 5.4em minmax(0, 1fr) 6em 4.4em 10.6em; }
.xt-inv { color: var(--hb-muted); font-size: 0.9em; font-variant-numeric: tabular-nums; }
.xt-amt { font-variant-numeric: tabular-nums; }
.xt-state, .xt-receipt { justify-self: start; }
.xt-state > *, .xt-receipt > * { overflow: visible; }
.xt-row .hb-tag { justify-self: start; }
.xt-paid { background: var(--hb-ok-bg); color: var(--hb-ok); transition: box-shadow 200ms ease; }
.xt-paid.ring, .xt-file-chip.ring { box-shadow: 0 0 0 0.18em var(--accent); }
.xt-receipt .hb-btn { height: 2.1em; font-size: 0.9em; }
.xt-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
  padding: 0.25em 0.55em;
  border-radius: 0.45em;
  background: var(--hb-side);
  color: var(--hb-ink);
  font-size: 0.88em;
  font-weight: 560;
  white-space: nowrap;
  transition: box-shadow 200ms ease;
}
.xt-file-chip .lp-glyph { color: var(--hb-muted); }
.lp-glyph { flex: none; width: 1.05em; height: 1.05em; }

.xt-picker {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 0.3em;
  width: 24em;
  padding: 1.2em;
  border-radius: 0.9em;
  background: var(--sc-white);
  color: var(--hb-ink);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1.5em 3em -0.5em rgb(15 18 25 / 0.35);
  transform: translate(-50%, -50%);
}
.xt-picker[data-cues*=" on"]:not(.on) { transform: translate(-50%, -46%) scale(0.97); }
.xt-picker-title { margin-bottom: 0.2em; font-size: 1.1em; font-weight: 680; letter-spacing: -0.015em; }
.xt-picker-place { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.3em; color: var(--hb-muted); font-size: 0.85em; font-weight: 560; }
.xt-picker-file {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.6em;
  border-radius: 0.5em;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.xt-picker-file .lp-glyph { color: var(--hb-muted); }
.xt-picker-file.sel { background: var(--hb-brand); color: var(--hb-brand-ink); }
.xt-picker-file.sel .lp-glyph { color: currentColor; }

.fp { display: grid; grid-template-rows: auto 1fr; background: var(--sc-white); color: var(--fp-ink); }
.fp-top { display: flex; align-items: center; justify-content: space-between; height: 3.2em; padding: 0 1.4em; background: var(--fp-side); color: var(--sc-white); }
.fp-brand { display: flex; align-items: center; gap: 0.55em; font-weight: 680; }
.fp-logo { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--fp-brand); box-shadow: inset -0.3em -0.3em 0 rgb(0 0 0 / 0.18); }
.fp-mode { padding: 0.2em 0.6em; border-radius: 999px; background: var(--fp-warn-bg); color: var(--fp-warn); font-size: 0.8em; font-weight: 650; }
.fp-main { display: grid; align-content: start; gap: 0.8em; padding: 1.6em 2em; min-width: 0; }
.fp-title { font-size: 1.45em; font-weight: 680; letter-spacing: -0.02em; }
.fp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6em 1em; padding: 1.2em 1.3em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px var(--fp-line); }
.fp-amount { font-size: 1.7em; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fp-amount small { color: var(--fp-muted); font-size: 0.5em; font-weight: 600; letter-spacing: 0; }
.fp-state-swap { justify-self: end; }
.fp-state-swap > * { overflow: visible; }
.fp-state { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.7em; border-radius: 999px; background: var(--fp-warn-bg); color: var(--fp-warn); font-size: 0.85em; font-weight: 650; }
.fp-ok { background: var(--fp-ok-bg); color: var(--fp-ok); }
.fp-desc { min-width: 0; color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-btn {
  display: inline-flex;
  align-items: center;
  height: 2.5em;
  padding: 0 1.1em;
  border-radius: 0.6em;
  background: var(--fp-brand);
  color: var(--sc-white);
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease;
}
.fp-btn.done { background: var(--fp-line); color: var(--fp-muted); }
.fp-row { display: grid; grid-template-columns: 6em 6em minmax(0, 1fr); align-items: center; gap: 1em; height: 2.9em; padding: 0 0.4em; border-bottom: 1px solid var(--fp-line); font-variant-numeric: tabular-nums; }
.fp-row-ok { justify-self: start; padding: 0.15em 0.55em; border-radius: 999px; background: var(--fp-ok-bg); color: var(--fp-ok); font-size: 0.8em; font-weight: 650; }
.fp-row-desc { color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The person's own words in their turn (captions from speech to text). */
.xt-cue-you { display: inline-flex; align-items: center; gap: 0.45em; }
.xt-cue-you .lp-glyph { color: var(--sc-soft); }

.xt-panel .cp { gap: 0.7em; }
.xt-panel .cp-head { margin-bottom: 0; }
.xt-live { flex: none; justify-content: flex-start; height: 2.5em; padding: 0 0.9em; }
.xt-live b { margin-left: auto; }
.xt-run { position: relative; flex: 1; min-height: 0; }
.xt-step .cp-act { align-items: center; }
.xt-site {
  flex: none;
  padding: 0.1em 0.5em;
  border-radius: 0.35em;
  background: var(--overlay);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: var(--sc-soft);
  font-weight: 650;
}
.xt-site-harbor { color: var(--xt-harbor); }
.xt-site-fernpay { color: var(--xt-fernpay); }
.xt-site-you { color: var(--ink); }
.xt-wait { display: inline-flex; align-items: center; gap: 0.4em; color: var(--muted); font-size: 0.82em; }
.xt-wait svg { width: 1.1em; height: 1.1em; animation: xt-spin 1s linear infinite; }
@keyframes xt-spin { to { transform: rotate(360deg); } }
.xt-turn {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 1em;
  border-radius: 0.8em;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgb(255 197 49 / 0.45);
}
.xt-turn[data-cues*=" on"]:not(.on) { transform: translateY(0.5em); }
.xt-turn-meta { color: var(--muted); font-size: 0.8em; }
.xt-turn-title { font-size: 1.2em; font-weight: 650; letter-spacing: -0.015em; }
.xt-turn-help { color: var(--muted); font-size: 0.85em; line-height: 1.45; }
.xt-meter { display: flex; align-items: center; gap: 0.3em; height: 1.6em; }
.xt-meter i { flex: none; width: 0.28em; height: 100%; border-radius: 1em; background: var(--sc-soft); transform: scaleY(0.3); }
.xt-meter i:nth-child(3n) { transform: scaleY(0.55); }
.xt-meter i:nth-child(3n + 1) { transform: scaleY(0.8); }
.xt-meter i:nth-child(4n) { transform: scaleY(0.42); }
.xt-turn .xt-meter i { animation: xt-level 0.8s ease-in-out infinite alternate; }
.xt-turn .xt-meter i:nth-child(3n) { animation-delay: -0.3s; }
.xt-turn .xt-meter i:nth-child(3n + 1) { animation-delay: -0.55s; }
.xt-turn .xt-meter i:nth-child(4n) { animation-delay: -0.15s; }
@keyframes xt-level { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.xt-done { display: flex; align-items: center; justify-content: center; gap: 0.45em; margin-top: 0.4em; padding: 0 0.6em; white-space: nowrap; }
.xt-done svg { width: 1.1em; height: 1.1em; }
.xt-estimate { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.88em; }
.xt-now {
  display: none;
  min-height: 2.6em;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: rgb(10 11 14 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  color: var(--sc-white);
  font-size: 1.05em;
  font-weight: 560;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.xt-now .sc-swap { justify-items: center; }

/* Whose pointer it is: "You" while the person has it. */
.sc-who {
  position: absolute;
  left: 1.5em;
  top: 1.9em;
  padding: 0.2em 0.55em;
  border-radius: 0.45em;
  background: var(--sc-white);
  color: var(--sc-black);
  box-shadow: 0 0.2em 0.6em rgb(0 0 0 / 0.35);
  font-size: 1em;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
}
.sc-tabs[data-phase="turn"] .sc-who { opacity: 1; }

/* ================================================================ private + record yourself */

.pv { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) { .pv { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.pv-copy .lp-head { margin-bottom: 2rem; }
.pv-list { display: grid; gap: 1.125rem; max-width: 34rem; }
.pv-list li { position: relative; padding-left: 1.25rem; color: var(--muted); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.pv-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.375rem; height: 0.375rem; border-radius: 2px; background: var(--line-strong); }
.pv-list b { color: var(--ink); font-weight: 580; }
.pv-more { margin-top: 1.75rem; }
.pv-more a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--ink);
  font-weight: 520;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.pv-more a:hover { text-decoration-color: currentColor; }
.pv-side { display: grid; gap: 1.75rem; }
.pv-stage { padding: clamp(1.25rem, 0.6rem + 3vw, 2.75rem); }
.ry { display: grid; place-items: center; font-size: clamp(12px, 3.4cqi, 15px); }
.ry-panel {
  display: grid;
  gap: 0.6em;
  width: min(100%, 22em);
  padding: 1.1em;
  border-radius: 1.1em;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 2.5em 5em -1.5em rgb(0 0 0 / 0.7);
}
.ry-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2em; padding: 0.2em; border-radius: 0.6em; background: var(--canvas); color: var(--muted); font-size: 0.85em; font-weight: 560; }
.ry-seg > span { padding: 0.45em 0.6em; border-radius: 0.45em; text-align: center; white-space: nowrap; }
.ry-seg .ry-seg-on { background: var(--overlay); color: var(--ink); }
.ry-label { margin-top: 0.3em; color: var(--muted); font-size: 0.8em; font-weight: 600; }
.ry-source {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.65em 0.8em;
  border-radius: 0.7em;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  font-size: 0.92em;
  font-weight: 600;
}
.ry-source > span { display: grid; gap: 0.1em; }
.ry-source small { color: var(--muted); font-size: 0.85em; font-weight: 450; }
.ry-source .lp-glyph { width: 1.35em; height: 1.35em; color: var(--muted); }
.ry-source-on { box-shadow: inset 0 0 0 1px var(--ink); }
.ry-source-on .lp-glyph { color: var(--ink); }
.ry-mic { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 0.1em; font-size: 0.9em; font-weight: 560; }
.ry-mic .lp-glyph { color: var(--muted); }
.ry-meter { flex: 1; height: 1.1em; margin-left: 0.4em; }
.ry-go { display: flex; align-items: center; justify-content: center; gap: 0.5em; height: 2.7em; border-radius: 0.7em; background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.ry-copy { display: grid; gap: 0.75rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.55; scroll-margin-top: 6rem; }
.ry-title { color: var(--ink); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 640; letter-spacing: -0.025em; line-height: 1.15; }
.ry-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.9375rem; }
.ry-kbd { display: inline-flex; gap: 0.25rem; }
.ry-kbd kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ================================================================ pricing */

.pr-plans { display: grid; gap: 1rem; max-width: 52rem; margin-inline: auto; }
@media (min-width: 48rem) { .pr-plans { grid-template-columns: 1fr 1fr; } }
.pr-plan {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--lp-radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.pr-free { border-color: rgb(255 197 49 / 0.35); background: linear-gradient(180deg, rgb(255 197 49 / 0.06), rgb(255 197 49 / 0) 40%), var(--surface); }
.pr-name { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 620; letter-spacing: -0.015em; }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.pr-amount { font-size: clamp(3rem, 2.4rem + 2vw, 4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
/* The kinetic controller pins its final width while it counts up from 0, so the unit never moves. */
.pr-amount > [data-kinetic-target="count"] { display: inline-block; }
.pr-unit { color: var(--muted); font-size: 1rem; }
.pr-unit-lone { color: var(--ink); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.33; padding-block: 0.6rem; }
.pr-note { color: var(--muted); font-size: 0.9375rem; }
.pr-list { display: grid; gap: 0.75rem; }
.pr-list li { display: flex; gap: 0.625rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.pr-list svg { margin-top: 0.1875rem; color: var(--ink); }
.pr-cta { margin-top: auto; width: 100%; }
.lp .pr-cta:disabled { opacity: 1; color: var(--muted); border-color: var(--line-strong); cursor: not-allowed; }
.pr-cost { color: var(--ink); font-weight: 600; }
/* Payments off: a quiet note where Get Pro would be, the same height. */
.pr-soon {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  margin-top: auto;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.pr-soon svg { flex-shrink: 0; color: var(--ink); }
.pr-soon strong { color: var(--ink); font-weight: 600; }
.pr-extra { max-width: 52rem; margin: 1.5rem auto 0; color: var(--muted); font-size: 0.9375rem; text-align: center; text-wrap: pretty; }
.pr-extra a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ================================================================ questions
   Native <details>: the heading sits beside the list on wide screens, the
   answers open in place. Hairlines, not cards. */

.fq { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 64rem) { .fq { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } }
.fq-head { margin-bottom: 0; gap: 0.75rem; }
.fq-more { color: var(--muted); }
.lp .fq-more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; border-radius: 2px; transition: text-decoration-color 140ms var(--lp-ease); }
.lp .fq-more a:hover { text-decoration-color: currentColor; }
.fq-list { border-top: 1px solid var(--line); }
.fq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
.fq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  /* Room for the focus ring inside the hairlines; the text stays aligned. */
  margin-inline: -0.75rem;
  padding: 0.875rem 0.75rem;
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.fq-q::-webkit-details-marker { display: none; }
.fq-q:focus-visible { border-radius: var(--lp-radius-sm); outline-offset: -2px; }
.fq-icon { flex: none; color: var(--muted); transition: transform 220ms var(--lp-ease), color 140ms var(--lp-ease); }
.fq-item[open] .fq-icon { transform: rotate(45deg); }
.fq-q:hover .fq-icon { color: var(--ink); }
.fq-a { max-width: 40em; padding: 0 2.5rem 1.25rem 0; color: var(--muted); line-height: 1.6; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .fq-icon { transition: none; } }

/* ================================================================ closing + footer */

.lp-closing { padding-bottom: clamp(5rem, 3rem + 7vw, 9rem); }
.lp-closing-inner { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.lp-closing-title { max-width: 12em; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5rem); }

.lp-footer { border-top: 1px solid var(--line); padding-block: 3rem 2rem; color: var(--muted); font-size: 0.9375rem; }
.lp-footer-inner { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .lp-footer-inner { grid-template-columns: 1fr auto; } }
.lp-footer-brand { display: grid; gap: 0.75rem; justify-items: start; }
.lp-footer-home { display: inline-flex; min-height: 2.25rem; align-items: center; border-radius: var(--lp-radius-sm); color: var(--ink); text-decoration: none; }
.lp-footer-line { max-width: 24em; }
.lp-footer-contact a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; border-radius: var(--lp-radius-sm); transition: text-decoration-color 140ms var(--lp-ease); }
.lp-footer-contact a:hover { text-decoration-color: currentColor; }
.lp-footer-nav { display: flex; gap: 3rem; }
.lp-footer-nav ul { display: grid; align-content: start; gap: 0.25rem; }
/* Phones: the two lists of pages side by side, the actions under them. */
@media (max-width: 47.99rem) {
  .lp-footer-nav { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2rem; }
  .lp-footer-nav a { white-space: nowrap; }
}
.lp-footer-nav a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--muted); text-decoration: none; transition: color 140ms var(--lp-ease); }
.lp-footer-nav a:hover { color: var(--ink); }
/* Phones: the apps get a row of their own, under the rest. */
@media (max-width: 47.99rem) { .lp-footer-apps { grid-column: 1 / -1; order: 1; } }
.lp-footer-soon { margin-left: 0.5rem; padding: 0.0625rem 0.4375rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.75rem; color: var(--muted); }
/* A heading reached by its link (/claude-code#install-title) clears the nav pill. */
.lp-main :is(h2, h3)[id] { scroll-margin-top: 5.5rem; }
.lp-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.875rem; }

/* ================================================================ phone scenes
   Below ~640 px of stage the scenes are recomposed, not shrunk: one surface
   at a time, larger type, the side panel as a sheet over the app. */

@container (max-width: 40rem) {
  .sc { font-size: clamp(8px, 2.9cqi, 12px); }
  .sc-win { aspect-ratio: 4 / 5.2; border-radius: 0.9em; }
  .sc-chrome { height: 2.5em; gap: 0.8em; }
  .sc-tab { width: auto; flex: 1; max-width: 13em; }
  .sc-bar { height: 2.6em; }

  .hb { grid-template-columns: 1fr; }
  .hb-side { display: none; }
  .hb-page { padding: 1.2em 1.1em; }
  .hb-title { font-size: 1.35em; }
  .hb-row { grid-template-columns: auto minmax(0, 1fr) auto; height: 3em; }
  .hb-row > .hb-meta { display: none; }
  .hb-dialog { width: 88%; }
  .sc-cue { font-size: 1.05em; }

  /* The hero: the panel is a sheet that leaves while the app is recorded. */
  .sc-hero .sc-body { grid-template-columns: 1fr; }
  .sc-hero .sc-panel {
    grid-area: 1 / 1;
    z-index: 9;
    align-self: end;
    height: 64%;
    border: 0;
    border-radius: 1.1em 1.1em 0 0;
    box-shadow: 0 -1em 2.5em rgb(0 0 0 / 0.35);
    transition: transform 520ms var(--sc-ease);
  }
  .sc-hero[data-phase="record"] .sc-panel,
  .sc-hero[data-phase="share"] .sc-panel { transform: translateY(104%); }
  .sc-hero .cp { padding: 0.9em 1em; }
  .sc-hero .cp-screen { gap: 0.55em; }
  .sc-hero .cp-ctx.gone, .sc-hero .cp-script { inset: 3.6em 1em 0.9em; }
  .sc-hero .cp-steps { gap: 0.35em; }
  .sc-hero .cp-step { padding: 0.4em 0.6em; }
  .sc-hero .cp-line { -webkit-line-clamp: 1; }
  .sc-hero .cp-step:nth-child(n + 4) { display: none; }
  .sc-term { left: 5%; top: 7%; width: 90%; font-size: 1em; }
  .sh { padding: 1.1em; gap: 0.8em; }
  .sh-lines { display: none; }
  .sh-caps { bottom: 1.2em; }
  .sh-cap { font-size: 0.82em; }

  /* The phone's scene type, not the desktop layer's (which is ~5 px here). */
  .sc-agent { grid-template-columns: 1fr; aspect-ratio: auto; gap: 1em; font-size: inherit; }
  .ag-term { grid-area: auto; width: 100%; }
  .ag-body { font-size: 0.95em; padding: 1em; }
  .ag-row { grid-template-columns: 3.8em 1fr; }
  .ag-panel { grid-area: auto; height: auto; }
  .ag-panel .cp-or, .ag-panel .cp-area { display: none; }

  .hw-rewrite { position: static; margin: 0.45em 0 0; }

  /* Across tabs: the panel is a sheet that rises only for the person's turn;
     a pill under the window says which step is running. */
  .sc-tabs .sc-body { grid-template-columns: 1fr; }
  .sc-tabs .sc-panel {
    grid-area: 1 / 1;
    z-index: 9;
    align-self: end;
    height: auto;
    border: 0;
    border-radius: 1.1em 1.1em 0 0;
    box-shadow: 0 -1em 2.5em rgb(0 0 0 / 0.35);
    transform: translateY(104%);
    transition: transform 520ms var(--sc-ease);
  }
  .sc-tabs[data-phase="turn"] .sc-panel { transform: none; }
  .sc-tabs .cp-head, .sc-tabs .cp-title, .sc-tabs .cp-foot, .sc-tabs .cp-steps, .xt-turn-help { display: none; }
  .xt-turn { position: static; }
  .xt-tab { width: auto; flex: 1; max-width: 11em; }
  .hb-row.xt-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .xt-row > .xt-inv { display: none; }
  .xt-picker { width: 88%; top: 35%; }
  .fp-main { padding: 1.2em 1.1em; }
  .fp-row { grid-template-columns: 5.5em minmax(0, 1fr); }
  .fp-row-desc { display: none; }
  .xt-now { display: grid; }
}

/* ================================================================ tablet scenes
   640 to 960 px of stage: same compositions, larger type, the app's own
   sidebar folded away to make room. */

@container (min-width: 40.01rem) and (max-width: 60rem) {
  .sc { font-size: 1.3cqi; }
  .sc-agent { font-size: 1.36cqi; }
  .sc-strip { font-size: 1.45cqi; }
  .hb { grid-template-columns: 1fr; }
  .hb-side { display: none; }
  .hb-row > .hb-email { display: none; }
  .hb-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sc-body { grid-template-columns: 1fr 20em; }
  .bs-meta { display: none; }
  .hb-row.xt-row { grid-template-columns: minmax(0, 1fr) 5.6em 4.4em 10em; }
  .xt-row > .xt-inv { display: none; }
  .xt-tab { width: 12em; }
}

/* ================================================================ legal */

.lp-legal {
  max-width: calc(44rem + var(--lp-gutter) * 2);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 5vw, 8rem);
  color: var(--muted);
  line-height: 1.7;
}
.lp-legal-head { margin-bottom: 2.5rem; }
.lp-legal-date { margin-top: 0.75rem; font-size: 0.9375rem; }
.lp-legal h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lp-legal h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.lp-legal p + p { margin-top: 1rem; }
.lp-legal ul { display: grid; gap: 0.5rem; margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.lp-legal li::marker { color: var(--muted); }
.lp-legal strong { color: var(--ink); font-weight: 560; }
.lp-legal a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.lp-legal a:hover { text-decoration-color: currentColor; }

/* ================================================================ pages beside the landing
   Claude Code, the comparisons and the use cases (PublicPageController):
   the landing's type, buttons, stages and FAQ, laid out to be read. The
   intro sits left like a document, not centred; each section puts its
   heading beside its text on wide screens, with a hairline between. */

.sp-intro {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  padding-top: clamp(2.25rem, 1.25rem + 3.5vw, 4.5rem);
}
.sp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--muted); font-size: 0.875rem; }
.sp-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.sp-crumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; border-radius: 4px; text-decoration: none; transition: color 140ms var(--lp-ease); }
.sp-crumbs a:hover { color: var(--ink); }
.sp-crumbs [aria-current="page"] { color: var(--ink); }
.sp-crumb-sep { color: var(--line-strong); }
.sp-title { max-width: 14em; font-size: clamp(2.5rem, 1.45rem + 4vw, 4.5rem); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.sp-visual { margin-top: clamp(2.5rem, 1.75rem + 2.6vw, 4rem); }

.sp-section { --lp-space: clamp(3.5rem, 2.25rem + 4vw, 6rem); }
.sp-block {
  display: grid;
  gap: 1.25rem 4rem;
  padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
/* The hairline above a section spans the text, not the gutters. */
.sp-block, .sp-more { background: linear-gradient(var(--line), var(--line)) top center / calc(100% - var(--lp-gutter) * 2) 1px no-repeat; }
@media (min-width: 64rem) {
  .sp-block { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; }
  /* A table needs the width: its heading sits above it. */
  .sp-block-wide { grid-template-columns: minmax(0, 1fr); }
}
.sp-h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

/* Text to read: muted, the key words in ink, under ~75 characters a line. */
.sp-prose { display: grid; gap: 1.125rem; max-width: 42rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.sp-prose strong { color: var(--ink); font-weight: 560; }
.sp-prose ul { display: grid; gap: 0.625rem; }
.sp-prose ul > li { position: relative; padding-left: 1.25rem; }
.sp-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.375rem; height: 0.375rem; border-radius: 2px; background: var(--line-strong); }
.lp .sp-prose a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; border-radius: 2px; transition: text-decoration-color 140ms var(--lp-ease); }
.lp .sp-prose a:not(.btn):hover { text-decoration-color: currentColor; }
.sp-prose code, .sp-table code {
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875em;
  overflow-wrap: anywhere;
}
.sp-link { font-weight: 520; }
.sp-note { font-size: 0.875rem; }

/* A real sequence, so it is numbered: the number in tabular figures. */
.sp-steps { display: grid; gap: 1.125rem; counter-reset: sp-step; }
.sp-steps > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); counter-increment: sp-step; }
.sp-steps > li::before {
  content: counter(sp-step);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Commands and an example context: code, so monospace, and selectable. */
.sp-code {
  margin: 0;
  padding: 1rem 1.125rem;
  border-radius: var(--lp-radius-sm);
  border: 1px solid var(--line);
  background: var(--tm-bg);
  color: var(--tm-ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sp-code code { padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; overflow-wrap: inherit; }

/* An example script: each step's action, then its line. */
.sp-script { display: grid; gap: 0.875rem; padding-left: 1rem; border-left: 2px solid var(--line-strong); }
.sp-script li { display: grid; gap: 0.125rem; }
.sp-script-act { color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.sp-script-line { font-size: 1rem; }

/* The comparison: a real table on wide screens; on phones each row is a
   block whose cells say which product they describe. */
.sp-table-wrap { display: grid; gap: 1rem; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.55; }
.sp-table caption { text-align: left; color: var(--muted); font-size: 0.875rem; caption-side: bottom; padding-top: 1rem; }
.sp-table th, .sp-table td { padding: 0.875rem 1rem 0.875rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.sp-table thead th { border-top: 0; padding-top: 0; color: var(--ink); font-size: 1rem; font-weight: 620; }
.sp-table tbody th { width: 11rem; color: var(--ink); font-weight: 560; }
.sp-table td { color: var(--muted); }
@media (max-width: 47.99rem) {
  .sp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sp-table, .sp-table caption, .sp-table tbody, .sp-table tr, .sp-table th, .sp-table td { display: block; width: auto; }
  .sp-table caption { padding: 0 0 1rem; }
  .sp-table tr { padding: 1rem 0; border-top: 1px solid var(--line); }
  .sp-table th, .sp-table td { padding: 0; border: 0; }
  .sp-table tbody th { margin-bottom: 0.5rem; }
  .sp-table td + td { margin-top: 0.5rem; }
  .sp-table td::before { content: attr(data-label); display: block; color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
}

/* Which to choose: two short lists side by side on wide screens. */
.sp-choose { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 48rem) { .sp-choose { grid-template-columns: 1fr 1fr; } }
.sp-choose h3 { margin-bottom: 0.75rem; color: var(--ink); font-size: 1.125rem; font-weight: 620; letter-spacing: -0.01em; }

.sp-sources { display: grid; gap: 0.75rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.sp-sources-title { color: var(--ink); font-size: 1rem; font-weight: 620; }
.sp-sources ul { display: grid; gap: 0.25rem; }
.lp .sp-sources a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; border-radius: 2px; }
.lp .sp-sources a:hover { text-decoration-color: currentColor; }

/* Links to the other pages, before the closing call. */
.sp-more { display: grid; gap: 1rem; padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.sp-more-title { color: var(--ink); font-size: 1.125rem; font-weight: 620; letter-spacing: -0.01em; }
.sp-more-about { max-width: 46rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.sp-more-list { display: grid; gap: 0.25rem 2.5rem; }
@media (min-width: 48rem) { .sp-more-list { grid-template-columns: 1fr 1fr; } }
.sp-more-list a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--muted); text-decoration: none; transition: color 140ms var(--lp-ease); }
.sp-more-list a:hover { color: var(--ink); }

/* A still scene: no pause button, no motion. */
.sp-stage { box-shadow: 0 2rem 6rem -2rem rgb(0 0 0 / 0.5); }

/* ================================================================ apps
   landing/apps: the two apps that work today, then the desktop and mobile
   apps that are coming, as concept screens (Preview) on a stage. */

.ap-now { display: grid; gap: 1rem; max-width: 60rem; margin-inline: auto; }
@media (min-width: 56rem) { .ap-now { grid-template-columns: 1fr 1fr; } }
.ap-app {
  grid-template-rows: 1fr auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 1.25rem 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--lp-radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.ap-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
}
.ap-icon .lp-mark { width: 1.5rem; height: 1.5rem; }
.ap-icon .lp-mark-cut { stroke: var(--raised); }
.ap-copy { display: grid; gap: 0.375rem; align-content: start; }
.ap-name { font-size: 1.1875rem; font-weight: 620; letter-spacing: -0.015em; color: var(--ink); }
.ap-line { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.lp .ap-cta { grid-column: 1 / -1; justify-self: start; gap: 0.5rem; margin-top: auto; }
.lp .ap-cta.lp-cta-quiet { display: inline-flex; align-items: center; text-decoration: none; }

.ap-soon { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ap-soon-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.ap-soon-title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 640; letter-spacing: -0.025em; color: var(--ink); }
.ap-chip, .ap-tag {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding-inline: 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgb(255 255 255 / 0.04);
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--ink);
  white-space: nowrap;
}

/* The scene: everything sized in em from the stage width, like the hero. */
.ap-stage { padding-block: clamp(2.5rem, 1rem + 6cqi, 5rem); }
.ap-scene {
  position: relative;
  font-size: clamp(6px, 1.1cqi, 14px);
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
  padding: 3.2em 22.5em 2em 0;
}
.ap-scene * { box-sizing: border-box; }
.ap-scene i, .ap-scene b { font-style: normal; }
.ap-tag {
  position: absolute;
  z-index: 2;
  height: 2.2em;
  padding-inline: 0.85em;
  font-size: 1em;
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(8 9 11 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ap-desk { position: relative; }
.ap-desk > .ap-tag { left: 0; top: -3.2em; }

.ap-win {
  overflow: hidden;
  border-radius: 1em;
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 0.2em 0.5em rgb(0 0 0 / 0.25), 0 3em 6em -1.5em rgb(0 0 0 / 0.6);
}
.ap-win-bar { position: relative; display: flex; align-items: center; height: 2.8em; padding-inline: 1em; background: var(--chrome-bar); }
.ap-win-title { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.95em; font-weight: 560; color: var(--chrome-dim); pointer-events: none; }
.ap-win-body { display: grid; grid-template-columns: 13em minmax(0, 1fr); min-height: 34em; }
.ap-side { display: grid; align-content: start; gap: 0.3em; padding: 1.2em 0.8em; border-right: 1px solid rgb(255 255 255 / 0.07); }
.ap-brand { display: flex; align-items: center; gap: 0.5em; margin: 0 0.5em 1em; font-weight: 650; font-size: 1.1em; color: var(--ink); }
.ap-brand .lp-mark { width: 1.1em; height: 1.1em; }
.ap-brand .lp-mark-cut { stroke: var(--chrome-bg); }
.ap-nav { display: flex; align-items: center; gap: 0.6em; height: 2.4em; padding-inline: 0.7em; border-radius: 0.6em; color: var(--chrome-dim); font-weight: 520; }
.ap-nav svg { width: 1.1em; height: 1.1em; }
.ap-nav-on { color: var(--ink); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.ap-main { padding: 1.6em 1.8em; min-width: 0; }
.ap-main-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.4em; }
.ap-h { font-size: 1.7em; font-weight: 680; letter-spacing: -0.025em; color: var(--ink); }
.ap-count { margin-left: 0.35em; font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--chrome-dim); }
.ap-rec { display: inline-flex; align-items: center; gap: 0.5em; height: 2.6em; padding-inline: 1.1em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 620; white-space: nowrap; }
.ap-rec-dot { width: 0.65em; height: 0.65em; border-radius: 50%; background: currentColor; }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em 1.2em; }
.ap-card { display: grid; gap: 0.25em; min-width: 0; }
.ap-card-title { margin-top: 0.4em; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-card-meta { font-size: 0.9em; color: var(--chrome-dim); }

/* A Harbor page drawn small: the thumbnail of a recording. */
.ap-thumb {
  position: relative;
  display: grid;
  grid-template-columns: 22% 1fr;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.6em;
  background: var(--hb-bg);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
  isolation: isolate;
}
.ap-t-side { background: var(--hb-side); border-right: 1px solid var(--hb-line); }
.ap-t-main { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 0.55em 0.6em; padding: 0.9em 1em; }
.ap-t-main > i { grid-column: 1 / -1; height: 0.75em; border-radius: 0.2em; background: var(--hb-skeleton); }
.ap-t-main > .ap-t-title { grid-column: 1; width: 45%; height: 1em; background: var(--hb-ink); opacity: 0.85; }
.ap-t-main > .ap-t-btn { grid-column: 2; width: 3.2em; height: 1.2em; border-radius: 0.3em; background: var(--hb-brand); }
.ap-thumb-pending .ap-t-main > i:nth-child(5) { background: var(--hb-ok-bg); }
.ap-thumb-rows .ap-t-main > i:nth-child(4) { width: 70%; }
.ap-t-dialog {
  position: absolute;
  left: 34%;
  top: 30%;
  display: grid;
  gap: 0.45em;
  width: 42%;
  padding: 0.7em;
  border-radius: 0.45em;
  background: var(--sc-white);
  box-shadow: 0 0.6em 1.6em rgb(0 0 0 / 0.28), 0 0 0 1px var(--hb-line);
}
.ap-t-dialog > i { height: 0.65em; border-radius: 0.2em; background: var(--hb-skeleton); }
.ap-t-dialog > i:first-child { width: 60%; background: var(--hb-ink); opacity: 0.8; }
.ap-t-dialog > b { justify-self: end; width: 3em; height: 1.1em; border-radius: 0.3em; background: var(--hb-brand); }
.ap-thumb-dialog::after { content: ""; position: absolute; inset: 0; background: rgb(20 23 28 / 0.18); z-index: 0; }
.ap-thumb-dialog .ap-t-dialog { z-index: 1; }
.ap-len {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
  z-index: 2;
  padding: 0.1em 0.45em;
  border-radius: 0.35em;
  background: rgb(8 9 11 / 0.78);
  color: var(--sc-white);
  font-size: 0.85em;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

/* The phone, in front of the window on the right. */
.ap-phone { position: absolute; z-index: 3; right: 0; top: 3.2em; width: 24em; }
.ap-phone > .ap-tag { right: 0; top: -3.2em; }
.ap-handset {
  display: grid;
  align-content: start;
  gap: 0.5em;
  aspect-ratio: 9 / 19.5;
  padding: 0.8em 1.1em 1.4em;
  border-radius: 3em;
  background: var(--sc-black);
  color: var(--chrome-ink);
  box-shadow: 0 0 0 0.45em #2a2d34, 0 0 0 0.55em rgb(255 255 255 / 0.12), 0 3em 6em -1em rgb(0 0 0 / 0.7);
}
.ap-status { display: flex; align-items: center; justify-content: space-between; height: 2.4em; padding-inline: 1em; font-size: 0.95em; font-weight: 620; color: var(--ink); }
.ap-island { width: 6.5em; height: 1.9em; border-radius: 999px; background: #000; }
.ap-signal { display: inline-flex; align-items: flex-end; gap: 0.2em; height: 0.9em; }
.ap-signal i { width: 0.3em; background: var(--ink); border-radius: 0.1em; }
.ap-signal i:nth-child(1) { height: 40%; }
.ap-signal i:nth-child(2) { height: 70%; }
.ap-signal i:nth-child(3) { height: 100%; }
.ap-ph-top { display: flex; align-items: center; gap: 0.4em; margin: 0.4em 0 0.3em; color: var(--chrome-dim); font-weight: 520; }
.ap-ph-top svg { width: 1.1em; height: 1.1em; }
.ap-player { position: relative; overflow: hidden; border-radius: 0.8em; }
.ap-thumb-big { border-radius: 0; font-size: 0.9em; }
.ap-cap {
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  z-index: 2;
  max-width: 92%;
  padding: 0.25em 0.55em;
  border-radius: 0.35em;
  transform: translateX(-50%);
  background: rgb(8 9 11 / 0.82);
  color: var(--sc-white);
  font-size: 0.82em;
  white-space: nowrap;
}
.ap-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 0.3em; background: rgb(255 255 255 / 0.25); }
.ap-bar-fill { display: block; width: 46%; height: 100%; background: var(--accent); }
.ap-ph-title { margin-top: 0.5em; font-size: 1.3em; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.ap-ph-by { color: var(--chrome-dim); font-size: 0.95em; }
.ap-ph-copy { justify-self: start; display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.3em; height: 2.3em; padding-inline: 0.9em; border-radius: 999px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); color: var(--ink); font-weight: 560; font-size: 0.95em; }
.ap-ph-copy svg { width: 1em; height: 1em; }
.ap-lines { display: grid; gap: 0.5em; margin-top: 0.6em; font-size: 0.92em; color: var(--chrome-dim); }
.ap-lines li { display: grid; grid-template-columns: 2.6em 1fr; gap: 0.3em; }
.ap-time { font-variant-numeric: tabular-nums; }
.ap-line-on { color: var(--ink); }
.ap-line-on .ap-time { color: var(--accent); }

/* A narrow stage: the window fills it and the phone stands in front, larger. */
@container (max-width: 40rem) {
  .ap-scene { font-size: clamp(5px, 1.55cqi, 10px); padding: 3.2em 0 26em; }
  .ap-win-body { grid-template-columns: 1fr; min-height: 0; }
  .ap-side { display: none; }
  .ap-main { padding: 1.2em; }
  .ap-phone { width: 46%; top: auto; bottom: 0; right: 3%; font-size: 1.45em; }
  .ap-phone > .ap-tag { top: auto; bottom: calc(100% + 0.6em); font-size: 0.69em; }
  .ap-phone .ap-lines li:nth-child(n + 4) { display: none; }
}