/*
 * Landing page, "Spatial" direction: styles.
 *
 * Ported from the approved static design (ttt-harness/landing-spatial/index.html,
 * HANDOFF.md) and, at phone width, the Spatial phone board (spatial-phone.html).
 *
 * WHY A PLAIN STYLESHEET AND NOT TAILWIND UTILITIES. The design is a set of
 * exact values (radii, layered shadows, letter-spacing per size, translucent
 * materials). As utilities they would be several hundred arbitrary-value
 * classes compiled into the MAIN stylesheet, which `check:bundle` counts
 * against the login path. Imported from the lazy LandingPage chunk, this file
 * ships in that chunk's CSS and only loads on `/`.
 *
 * SCOPING RULE. Everything is under `.lp`. Once the lazy chunk has loaded, its
 * CSS stays in the document for the rest of the session, so a bare `body`,
 * `html` or `:focus-visible` rule here would restyle the trading app after a
 * visitor logs in. The two `html:has(.lp-page)` rules switch themselves off
 * when the page unmounts.
 *
 * BOX MODEL. The design was authored against browser defaults (content-box);
 * Tailwind's preflight makes everything border-box. Several of the design's
 * numbers depend on content-box (the chart toolbar's `min-width: 36px` plus
 * padding, the chart column's flex-basis), so the scope restores the browser
 * default, buttons included as browsers ship them (border-box).
 *
 * ORDER MATTERS in one place: the preference fallbacks (reduced transparency,
 * more contrast) sit BEFORE the per-element rules, because in the design those
 * per-element values were inline styles and so beat the fallbacks. Keeping the
 * order keeps that behaviour.
 */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/instrument-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Scope ─────────────────────────────────────────────────────────────────── */

.lp {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Instrument Sans', system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 1rem;
  font-feature-settings: normal;
  line-height: 1.5;
  color: #F5F5F7;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  text-align: left;
}
.lp *, .lp *::before, .lp *::after { box-sizing: content-box; }
.lp button { box-sizing: border-box; }
.lp a { text-decoration: none; }
.lp :focus-visible { outline: 2px solid #FF9A57; outline-offset: 3px; }

.lp-page { background: #05060A; overflow: hidden; overflow: clip; }

html:has(.lp-page) body { background: #05060A; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.lp-page) { scroll-behavior: smooth; }
}

/* ── Design system (index.html's class layer) ─────────────────────────────── */

.lp .w { max-width: 70rem; margin: 0 auto; padding-inline: 1.5rem; box-sizing: border-box; }
.lp .ww { max-width: 80rem; margin: 0 auto; padding-inline: 1.5rem; box-sizing: border-box; }
.lp .disp { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Instrument Sans', system-ui, sans-serif; font-weight: 700; }
.lp .nav { display: flex; gap: 1.75rem; }
.lp .glass { background: rgba(22, 24, 32, .55); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.lp .pane { background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 80px -40px rgba(0, 0, 0, .8); }
.lp .edge { position: absolute; left: 0; right: 0; bottom: -16px; height: 16px; pointer-events: none; background: linear-gradient(rgba(5, 6, 10, .55), rgba(5, 6, 10, 0)); }
.lp .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.625rem; border-radius: 999px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.005em; background: #FF6B00; color: #14090A; box-shadow: 0 0 0 1px rgba(255, 170, 110, .5) inset, 0 10px 40px -10px rgba(255, 107, 0, .7); transition: background-color 200ms ease, transform 100ms ease-out, box-shadow 200ms ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lp .pill:hover, .lp .lp-hit:hover .pill { background: #FF8A3D; color: #14090A; box-shadow: 0 0 0 1px rgba(255, 190, 140, .6) inset, 0 14px 50px -10px rgba(255, 107, 0, .85); }
.lp .pill:active, .lp .lp-hit:active .pill { transform: scale(.97); background: #F06400; }
.lp .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1.0625rem; color: #F5F5F7; transition: transform 100ms ease-out, background-color 200ms ease; }
.lp .ghost:hover { color: #FFFFFF; background: rgba(255, 255, 255, .1); }
.lp .ghost:active { transform: scale(.97); }
.lp .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.lp .s4 { grid-column: span 4; }
.lp .s2 { grid-column: span 2; }
.lp .tile { border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; position: relative; }
.lp .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.lp .seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 999px; width: min(100%, 21rem); box-sizing: border-box; }
.lp .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 16px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 255, 255, .15); transition: transform 380ms cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.lp .segb { position: relative; z-index: 1; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: .9375rem; font-weight: 600; color: #C7C7CC; cursor: pointer; border-radius: 999px; transition: color 200ms ease, transform 100ms ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lp .segb:active { transform: scale(.96); }
.lp .act { min-height: 44px; flex: 1; border: 0; border-radius: 999px; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: transform 100ms ease-out, background-color 200ms ease; touch-action: manipulation; }
.lp .act:active { transform: scale(.97); }
.lp .chip { font-size: .875rem; letter-spacing: .01em; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #D2D2D7; }
.lp .stage { perspective: 1800px; perspective-origin: 50% 0; }
.lp .orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE2C8 0%, #FF9A57 22%, #FF6B00 48%, #7A1E00 78%, #1A0600 100%); box-shadow: 0 0 60px 10px rgba(255, 107, 0, .45), 0 0 160px 40px rgba(255, 107, 0, .18), inset -10px -14px 30px rgba(0, 0, 0, .45), inset 6px 8px 20px rgba(255, 255, 255, .25); }

/*
 * The segmented control's dark labels ride INSIDE the thumb (the thumb sits on
 * top of the buttons) and slide the opposite way by the same amount with the
 * same curve, so they stay put while the thumb moves over them. At rest this
 * is identical to the design (dark label on the white thumb, light labels
 * elsewhere). It also makes the dark-on-white pair a real ancestor/descendant
 * pair, so contrast tools measure it against the thumb rather than the glass
 * behind it. Press feedback reaches the dark label through `:has()`.
 */
.lp .seg .thumb { z-index: 2; overflow: hidden; pointer-events: none; }
.lp .seg-track { position: absolute; top: 0; bottom: 0; left: 0; width: 300%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); transition: transform 380ms cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.lp .seg-label { display: flex; align-items: center; justify-content: center; font-size: .9375rem; font-weight: 600; color: #05060A; transition: transform 100ms ease-out; }
.lp .seg:has(.segb[data-tab="ask"]:active) .seg-label[data-tab="ask"],
.lp .seg:has(.segb[data-tab="alert"]:active) .seg-label[data-tab="alert"],
.lp .seg:has(.segb[data-tab="trade"]:active) .seg-label[data-tab="trade"] { transform: scale(.96); }

@media (max-width: 640px) { .lp .mk-hide { display: none !important; } }
@media (max-width: 900px) {
  .lp .s4, .lp .s2 { grid-column: span 6; }
  .lp .nav { display: none; }
  .lp .three { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .lp .up { animation: lp-up 900ms cubic-bezier(.32, .72, 0, 1) both; }
  .lp .tilt { transform-origin: 50% 0; animation: lp-tilt 1600ms 150ms cubic-bezier(.32, .72, 0, 1) both; }
  .lp .rise { animation: lp-rise 1800ms cubic-bezier(.32, .72, 0, 1) both; }
  .lp .mat-r { transform-origin: 100% 100%; animation: lp-mat 420ms cubic-bezier(.32, .72, 0, 1) both; }
  .lp .mat-l { transform-origin: 0 100%; animation: lp-mat 460ms 140ms cubic-bezier(.32, .72, 0, 1) both; }
}
@keyframes lp-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lp-tilt { from { opacity: 0; transform: translateY(80px) rotateX(28deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(40%) scaleX(.8); } to { opacity: 1; transform: none; } }
@keyframes lp-mat { from { opacity: 0; transform: scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lp .thumb { transition: opacity 200ms ease; }
  .lp .seg-track { transition: none; }
  .lp .mat-r, .lp .mat-l, .lp .up, .lp .tilt, .lp .rise { animation: lp-fade 200ms ease both; }
}

/* Preference fallbacks — before the per-element rules (see the header note). */
@media (prefers-reduced-transparency: reduce) {
  .lp .glass { background: #16181F; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp .pane { background: #14161D; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp .edge { display: none; }
}
@media (prefers-contrast: more) {
  .lp .glass, .lp .pane { background: #0B0C10; box-shadow: inset 0 0 0 1px #F5F5F7; }
  .lp .chip { box-shadow: inset 0 0 0 1px #F5F5F7; }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.lp .lp-header { position: sticky; top: 0; z-index: 10; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
.lp .lp-header-bar { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lp .lp-brand { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #F5F5F7; }
.lp .lp-brand-mark { width: 24px; height: 24px; border-radius: 7px; background: #FF6B00; color: #14090A; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px rgba(255, 107, 0, .6); }
.lp .lp-brand-name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.lp .lp-nav { font-size: .875rem; letter-spacing: .01em; }
.lp .lp-nav a { color: #D2D2D7; padding-block: 14px; }
.lp .lp-end { display: flex; align-items: center; gap: 4px; }
.lp .lp-actions { display: flex; align-items: center; gap: 4px; }
.lp .lp-login { font-size: .875rem; letter-spacing: .01em; padding: 14px 12px; color: #D2D2D7; }
/* A 44px hit area around a visually smaller control (the header's 34px pill). */
.lp .lp-hit { display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.lp .pill-sm { min-height: 34px; padding: 0 16px; font-size: .875rem; }
.lp .lp-menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #F5F5F7; align-items: center; justify-content: center; cursor: pointer; transition: transform 100ms ease-out, background-color 200ms ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lp .lp-menu-btn:hover { background: rgba(255, 255, 255, .08); }
.lp .lp-menu-btn:active { transform: scale(.96); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.lp .lp-hero { position: relative; padding-top: 7rem; background: radial-gradient(70% 45% at 50% 0%, rgba(90, 110, 255, .14), rgba(5, 6, 10, 0) 70%), #05060A; }
.lp .lp-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
.lp .lp-eyebrow { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; color: #FF9A57; display: flex; align-items: center; gap: 10px; }
.lp .lp-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF6B00; box-shadow: 0 0 12px #FF6B00; }
.lp .lp-h1 { margin: 0; font-size: clamp(3rem, 7.6vw, 6.75rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; max-width: 12ch; background: linear-gradient(180deg, #FFFFFF 40%, #A9ABB8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .lp-lede { margin: .5rem 0 0; font-size: clamp(1.1875rem, 2vw, 1.5rem); line-height: 1.38; color: #A1A1A6; max-width: 30ch; text-wrap: pretty; }
.lp .lp-ctas { display: flex; gap: .75rem; align-items: center; justify-content: center; flex-wrap: wrap; padding-top: 1rem; }
.lp .lp-note { margin: 0; font-size: .875rem; letter-spacing: .01em; color: #8E8E93; }

.lp .lp-stage { position: relative; z-index: 2; padding-top: 5rem; }
.lp .lp-frame-wrap { transform-style: preserve-3d; }
.lp .lp-frame { border-radius: 30px; padding: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 140px -30px rgba(255, 107, 0, .55), 0 60px 120px -40px rgba(0, 0, 0, .9); }
.lp .lp-screen { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #0B0D14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); text-align: left; }
.lp .lp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
.lp .lp-quote { display: flex; align-items: center; gap: 14px; }
.lp .lp-sym { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lp .lp-sym-name { font-size: 13px; color: #8E8E93; }
.lp .lp-last { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp .lp-chg { font-size: 13px; font-weight: 600; color: #5CE1C6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .lp-tools { display: flex; align-items: center; gap: 12px; }
.lp .lp-tf { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.lp .lp-tf span { min-width: 36px; text-align: center; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #8E8E93; }
.lp .lp-tf .on { background: rgba(255, 255, 255, .14); color: #F5F5F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.lp .lp-live { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #D2D2D7; padding: 6px 12px; border-radius: 999px; background: rgba(92, 225, 198, .1); box-shadow: inset 0 0 0 1px rgba(92, 225, 198, .3); }
.lp .lp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #5CE1C6; box-shadow: 0 0 8px #5CE1C6; }
.lp .lp-split { display: flex; flex-wrap: wrap; }
.lp .lp-chart-col { flex: 999 1 560px; min-width: 0; padding: 12px 8px 4px 12px; }
.lp .lp-chart { display: block; height: auto; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Instrument Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.lp .lp-ticket { flex: 1 1 260px; max-width: 100%; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); }
.lp .lp-pos { border-radius: 16px; padding: 16px; background: rgba(92, 225, 198, .07); box-shadow: inset 0 0 0 1px rgba(92, 225, 198, .22); display: flex; flex-direction: column; gap: 8px; }
.lp .lp-pos-head { display: flex; justify-content: space-between; align-items: baseline; }
.lp .lp-pos-label { font-size: 13px; font-weight: 600; color: #D2D2D7; }
.lp .lp-pos-cap { font-size: 12px; color: #8E8E93; }
.lp .lp-pnl { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #5CE1C6; font-variant-numeric: tabular-nums; }
.lp .lp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.lp .lp-side span { text-align: center; padding: 9px 0; border-radius: 9px; font-size: 14px; font-weight: 600; color: #A1A1A6; }
.lp .lp-side .on { font-weight: 700; background: #5CE1C6; color: #05060A; }
.lp .lp-rows { display: flex; flex-direction: column; gap: 10px; }
.lp .lp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.lp .lp-row > :first-child { color: #8E8E93; }
.lp .lp-row > :last-child { color: #F5F5F7; font-weight: 500; font-variant-numeric: tabular-nums; }
.lp .lp-row > .is-entry { color: #FF9A57; font-weight: 600; }
.lp .lp-row > .is-up { color: #5CE1C6; font-weight: 600; }
.lp .lp-row > .is-down { color: #FF5A4E; font-weight: 600; }
.lp .lp-ticket-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.lp .lp-fake-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); color: #F5F5F7; }
.lp .lp-hint { text-align: center; font-size: 12px; color: #8E8E93; }

.lp .lp-horizon { position: absolute; z-index: 1; left: -30%; right: -30%; bottom: -46rem; height: 70rem; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #05060A 92%, rgba(5, 6, 10, 0) 100%); box-shadow: 0 -2px 0 rgba(255, 170, 110, .9), 0 -30px 90px rgba(255, 107, 0, .55), 0 -120px 240px rgba(255, 107, 0, .25); }
.lp .lp-hero-spacer { height: 9rem; }

/* ── Platform (features) ──────────────────────────────────────────────────── */

/* z-index 2: the hero's horizon reaches 46rem down into this section. In the
   static design it painted over this heading and the top of the War Room tile;
   the section now sits above it, and its background is the same colour. */
.lp .lp-features { position: relative; z-index: 2; padding-block: 7rem 7.5rem; background: #05060A; }
.lp .lp-features-inner { display: flex; flex-direction: column; gap: 4rem; }
.lp .lp-section-head { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; }
.lp .lp-h2 { margin: 0; font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.022em; text-wrap: balance; }
.lp .lp-h2-narrow { max-width: 15ch; }
.lp .lp-features-lede { margin: 0; font-size: 1.3125rem; line-height: 1.42; color: #A1A1A6; max-width: 40ch; }
.lp .lp-tile-warroom { min-height: 35rem; background: radial-gradient(80% 60% at 70% 100%, rgba(255, 107, 0, .16), rgba(255, 107, 0, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); }
.lp .lp-tile-copy { padding: 2.75rem 2.75rem 2rem; display: flex; flex-direction: column; gap: .625rem; max-width: 33rem; }
.lp .lp-h3-xl { margin: 0; font-size: 2.125rem; letter-spacing: -0.018em; line-height: 1.12; }
.lp .lp-text-lg { margin: 0; font-size: 1.1875rem; line-height: 1.45; color: #A1A1A6; }
/* `display: contents` keeps the <img>, not the <picture>, as the flex item, so
   the War Room shot's `margin-top: auto` still pins it to the tile's bottom. */
.lp picture { display: contents; }
.lp .lp-warroom-img { display: block; width: calc(100% - 2.75rem); max-width: none; margin-left: 2.75rem; margin-top: auto; height: auto; border-radius: 16px 0 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.lp .lp-tile-markets { padding: 2.75rem 2.25rem; gap: .875rem; justify-content: space-between; min-height: 35rem; }
.lp .lp-tile-head { display: flex; flex-direction: column; gap: .625rem; }
.lp .lp-h3-lg { margin: 0; font-size: 1.75rem; letter-spacing: -0.016em; line-height: 1.14; }
.lp .lp-text { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: #A1A1A6; }
.lp .lp-markets-img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.lp .lp-tile-sm { padding: 2.5rem 2.25rem; gap: .875rem; min-height: 19rem; }
.lp .lp-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255, 107, 0, .12); box-shadow: inset 0 0 0 1px rgba(255, 154, 87, .35), 0 0 30px -6px rgba(255, 107, 0, .5); }
.lp .lp-h3-md { margin: .75rem 0 0; font-size: 1.5rem; letter-spacing: -0.012em; line-height: 1.17; }
.lp .lp-h3-md.flush { margin: 0; }
.lp .lp-tile-soon { background: radial-gradient(90% 70% at 100% 0%, rgba(90, 110, 255, .18), rgba(90, 110, 255, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); }
.lp .lp-soon { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: #B4BEFF; display: flex; align-items: center; gap: 8px; }
.lp .lp-soon-dot { width: 6px; height: 6px; border-radius: 50%; background: #8C9BFF; box-shadow: 0 0 10px #8C9BFF; }

/* ── Agent T ──────────────────────────────────────────────────────────────── */

.lp .lp-agent { position: relative; padding-block: 8rem 9.5rem; background: radial-gradient(50% 40% at 50% 18%, rgba(255, 107, 0, .14), rgba(5, 6, 10, 0) 70%), #05060A; }
.lp .lp-agent-inner { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.lp .lp-agent-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.lp .lp-agent-title { margin: .5rem 0 0; font-size: clamp(4rem, 11vw, 9.25rem); line-height: 1; letter-spacing: -0.032em; }
.lp .lp-agent-lede { margin: 0; font-size: clamp(1.1875rem, 2vw, 1.5rem); line-height: 1.38; color: #A1A1A6; max-width: 34ch; }
.lp .lp-seg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lp .lp-chat { width: 100%; max-width: 45rem; min-height: 22rem; box-sizing: border-box; border-radius: 32px; padding: 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.lp .panel { display: flex; flex-direction: column; gap: 1.25rem; }
.lp .lp-bubble-user { align-self: flex-end; max-width: 80%; background: #FF6B00; color: #14090A; padding: 14px 20px; border-radius: 22px 22px 6px 22px; font-size: 1.125rem; line-height: 1.4; font-weight: 500; box-shadow: 0 10px 40px -12px rgba(255, 107, 0, .7); }
.lp .lp-reply { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 14px; }
.lp .lp-bubble-agent { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); padding: 18px 22px; border-radius: 22px 22px 22px 6px; font-size: 1.125rem; line-height: 1.5; }
.lp .lp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lp .lp-alert { align-self: flex-start; max-width: 88%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); padding: 20px 22px; border-radius: 22px 22px 22px 6px; display: flex; gap: 16px; align-items: flex-start; }
.lp .lp-alert svg { flex-shrink: 0; margin-top: 2px; }
.lp .lp-alert-body { display: flex; flex-direction: column; gap: 6px; }
.lp .lp-alert-title { font-size: 1.125rem; font-weight: 600; }
.lp .lp-alert-text { font-size: 1.0625rem; line-height: 1.5; color: #D2D2D7; }
.lp .lp-staged { align-self: flex-start; width: min(100%, 26rem); background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); border-radius: 22px 22px 22px 6px; padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.lp .lp-staged-title { font-size: 1.125rem; font-weight: 600; }
.lp .lp-staged-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.lp .lp-staged-grid > :nth-child(odd) { color: #A1A1A6; }
.lp .lp-staged-grid > :nth-child(even) { text-align: right; }
.lp .lp-staged-grid > :nth-child(2) { font-weight: 600; }
.lp .lp-confirm { display: flex; flex-direction: column; gap: 16px; }
.lp .lp-confirm-row { display: flex; gap: 10px; }
.lp .act-primary { background: #FF6B00; color: #14090A; box-shadow: 0 10px 30px -10px rgba(255, 107, 0, .8); }
.lp .lp-fine { font-size: .875rem; letter-spacing: .01em; color: #A1A1A6; }
.lp .lp-done-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.lp .lp-done-label { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; }
.lp .act-undo { flex: 0 0 auto; padding: 0 18px; background: rgba(255, 255, 255, .12); color: #F5F5F7; }

/* ── Privacy, pricing, footer ─────────────────────────────────────────────── */

.lp .lp-privacy { padding-block: 8rem; background: #05060A; }
.lp .lp-privacy-inner { display: flex; flex-direction: column; gap: 4rem; }
.lp .lp-center { text-align: center; }
.lp .lp-card { border-radius: 28px; padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: .75rem; }
.lp .lp-card h3 { margin: .5rem 0 0; font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; }

.lp .lp-pricing { padding-block: 6rem 9.5rem; background: radial-gradient(60% 50% at 50% 60%, rgba(255, 107, 0, .12), rgba(5, 6, 10, 0) 70%), #05060A; }
.lp .lp-pricing-inner { display: flex; justify-content: center; }
.lp .lp-price-card { width: 100%; max-width: 40rem; border-radius: 40px; padding: 4rem 2rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
.lp .lp-price-title { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.lp .lp-price { display: flex; align-items: baseline; gap: 10px; padding-top: .5rem; }
.lp .lp-price-num { font-size: clamp(5rem, 11vw, 8.5rem); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FFFFFF 30%, #FF9A57 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .lp-price-per { font-size: 1.375rem; color: #A1A1A6; }
.lp .lp-price-text { margin: 0; font-size: 1.125rem; line-height: 1.5; color: #A1A1A6; max-width: 36ch; }
.lp .lp-price-cta { padding-top: 1rem; }
.lp .pill-lg { min-height: 3.5rem; padding: 0 2.25rem; font-size: 1.125rem; }

.lp .lp-footer { padding-block: 2.5rem 3.5rem; background: #05060A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.lp .lp-footer-inner { display: flex; flex-direction: column; gap: 1.25rem; font-size: .75rem; letter-spacing: .012em; line-height: 1.6; color: #8E8E93; }
.lp .lp-disclaimer { margin: 0; max-width: 110ch; }
.lp .lp-footer-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); padding-top: 12px; }
.lp .lp-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
/* The design's links were 43px tall and as narrow as 35px; 44 x 44 minimum. */
.lp .lp-footer-links a { color: #C7C7CC; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ── Mobile menu sheet (Radix Dialog, portalled outside the page) ─────────── */

.lp-sheet-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); }
.lp.lp-sheet { position: fixed; z-index: 51; top: 0; left: 0; right: 0; max-height: 100dvh; overflow-y: auto; box-sizing: border-box; padding: 0 8px 24px 16px; border-radius: 0 0 28px 28px; background: rgba(16, 18, 24, .82); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 30px 80px -20px rgba(0, 0, 0, .8); outline: none; }
.lp .lp-sheet-bar { height: 52px; display: flex; align-items: center; justify-content: space-between; }
.lp.lp-sheet .lp-menu-btn { display: flex; }
.lp .lp-sheet-nav { display: flex; flex-direction: column; padding: 8px 8px 0 0; }
.lp .lp-sheet-nav a { display: flex; align-items: center; min-height: 52px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.012em; color: #F5F5F7; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.lp .lp-sheet-actions { display: flex; flex-direction: column; gap: 8px; padding: 24px 8px 0 0; }
.lp .lp-sheet-actions .pill, .lp .lp-sheet-actions .ghost { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .lp-sheet-overlay[data-state='open'] { animation: lp-fade 300ms ease both; }
  .lp-sheet-overlay[data-state='closed'] { animation: lp-fade 200ms ease reverse both; }
  .lp.lp-sheet[data-state='open'] { animation: lp-sheet-in 420ms cubic-bezier(.32, .72, 0, 1) both; }
  .lp.lp-sheet[data-state='closed'] { animation: lp-sheet-out 220ms ease-in both; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-sheet-overlay[data-state='open'], .lp.lp-sheet[data-state='open'] { animation: lp-fade 200ms ease both; }
  .lp-sheet-overlay[data-state='closed'], .lp.lp-sheet[data-state='closed'] { animation: lp-fade 200ms ease reverse both; }
}
@keyframes lp-sheet-in { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes lp-sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-16px); } }
@media (prefers-reduced-transparency: reduce) {
  .lp.lp-sheet { background: #16181F; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .lp.lp-sheet { background: #0B0C10; box-shadow: inset 0 0 0 1px #F5F5F7; }
}

/* ── Tablet: the nav links fold into the menu ─────────────────────────────── */

@media (max-width: 900px) {
  .lp .lp-menu-btn { display: flex; }
}

/* ── Phone: the Spatial phone board (spatial-phone.html, 390 wide) ────────── */

@media (max-width: 640px) {
  .lp .lp-header-bar { padding-inline: 16px 8px; }
  .lp .lp-actions { display: none; }

  /* The board's gradient sits behind the glass header, so the hero slides up
     under it. Radii are the board's 90% x 40% of a 390 x 844 frame. */
  .lp .lp-hero { margin-top: -52px; padding-top: 104px; background: radial-gradient(351px 338px at 50% 0%, rgba(90, 110, 255, .16), rgba(5, 6, 10, 0) 70%), #05060A; }
  .lp .lp-hero-copy { gap: 14px; }
  .lp .lp-eyebrow { font-size: .9375rem; gap: 8px; }
  .lp .lp-eyebrow-dot { width: 7px; height: 7px; box-shadow: 0 0 10px #FF6B00; }
  .lp .lp-h1 { font-size: 2.875rem; line-height: 1.04; letter-spacing: -0.024em; max-width: none; text-wrap: wrap; }
  .lp .lp-lede { margin-top: 4px; font-size: 1.125rem; line-height: 1.4; max-width: 28ch; text-wrap: wrap; }
  .lp .lp-ctas { padding-top: 14px; }
  .lp .lp-ctas .ghost { display: none; }
  .lp .lp-ctas .pill { min-height: 50px; padding: 0 28px; font-size: 1.0625rem; letter-spacing: normal; }
  .lp .lp-note { font-size: .8125rem; }
  /* The phone board sets no root line-height, so its one-line labels sit at
     the font's normal leading rather than the page's 1.5. */
  .lp .lp-eyebrow, .lp .lp-note { line-height: normal; }
  .lp .lp-note-extra { display: none; }

  .lp .lp-stage { padding-top: 0; margin-top: 40px; padding-inline: 20px; perspective: 1200px; perspective-origin: 50% 50%; }
  /* The board's resting 14deg lean lives on the wrapper, so the load tilt on
     the frame inside keeps ONE set of keyframes at every width: switching
     animation-name at a breakpoint would replay the tilt on rotation. */
  .lp .lp-frame-wrap { transform: rotateX(14deg); transform-origin: 50% 100%; }
  .lp .lp-frame { border-radius: 22px; padding: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 90px -20px rgba(255, 107, 0, .6); }
  .lp .lp-screen { border-radius: 15px; padding: 8px 2px 2px 6px; box-shadow: none; }
  .lp .lp-toolbar, .lp .lp-ticket { display: none; }
  .lp .lp-chart-col { flex: 1 1 auto; padding: 0; }

  .lp .lp-horizon { left: -60%; right: -60%; top: 640px; bottom: auto; height: 700px; background: #05060A; box-shadow: 0 -2px 0 rgba(255, 170, 110, .9), 0 -24px 70px rgba(255, 107, 0, .55), 0 -90px 180px rgba(255, 107, 0, .25); }
}