/* TheTourKo landing page (served at / on the landing domain, and at /landing anywhere).
   Space Grotesk throughout. Square corners everywhere except the hero's tour illustration (.hero-shot), which is a
   picture of a product and keeps its rounded window. Icons: Lucide, written in by server/landing.mjs.
   The hero is a dark stage lit from above (React Bits Light Rays, drawn by landing.js); the rest of the page is light.
   Motion: the hero comes in once; sections rise as they scroll in; cards light up under the cursor; the navigation
   floats as glass once the page scrolls. All of it stops under prefers-reduced-motion. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/landing/fonts/space-grotesk-latin.woff2") format("woff2"); }
:root {
  --paper: #ffffff; --frost: #f2f5fa; --line: #dfe5ee; --edge: #d5dde9;
  --ink: #0f172a; --text: #1e293b; --slate: #475569; --muted: #556479;
  --signal: #2563eb; --signal-hover: #1d4ed8; --signal-ink: #1d4ed8; --signal-tint: #e8effd;
  --harbor: #0d2b66; --harbor-2: #143a80; --harbor-line: #2a4d8f; --harbor-text: #c9d7f3;
  --stage: #071733; --stage-text: #c3d1ec; --stage-muted: #9fb2d6;
  --logo: #ff8f0c;
  --nav-h: 76px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-rise: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* The page is paper (main); the body is the stage colour, so the bar's own backdrop is the stage and overscroll past either end shows navy, not a white strip. */
body { margin: 0; background: var(--stage); color: var(--ink); font: 400 17px/1.6 "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { background: var(--paper); }
a { color: var(--signal-ink); }
a:hover { color: #1e40af; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.hero :focus-visible, .top:not([data-tone="light"]) :focus-visible, .security :focus-visible, footer :focus-visible, .closing :focus-visible, .plan.hi :focus-visible, .caption :focus-visible { outline-color: #fff; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.i { display: block; flex-shrink: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }   /* no one-word last lines */
h1 { font-size: clamp(46px, 5.6vw, 76px); line-height: .98; letter-spacing: -.045em; }
h2 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.06; letter-spacing: -.035em; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.sub { margin: 18px 0 0; font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 580px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16.5px; }
.btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-hover); border-color: var(--signal-hover); color: #fff; }
.btn-outline { background: #fff; border-color: #c4cfdf; color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: #e7edf8; border-color: #e7edf8; color: var(--ink); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

/* header: transparent over the stage at the top of the page. Once the page scrolls it floats as a glass bar: dark glass
   over the dark sections, light glass over the light ones (landing.js sets .scrolled and data-tone). Floating, it's
   rounded (the one rounded element besides the hero's tour window) and so is its button, concentric inside it. Without JavaScript it stays at the top of the stage and scrolls away with it. */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 40; pointer-events: none; }
.top.live { position: fixed; }   /* set by landing.js, which also keeps its tone; without it the bar stays on the stage */
.top nav { pointer-events: auto; height: var(--nav-h); margin-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid transparent; background-color: transparent; border-radius: 0;
  transition: border-radius .5s var(--ease-out), max-width .5s var(--ease-out), height .5s var(--ease-out), margin-top .5s var(--ease-out), padding .5s var(--ease-out),
    background-color .4s ease, border-color .4s ease, box-shadow .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease; }
.top.scrolled nav { max-width: min(1140px, calc(100% - 28px)); height: 62px; margin-top: 12px; padding: 0 10px 0 20px; border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.top nav .btn { transition: border-radius .5s var(--ease-out), background-color .2s ease, color .2s ease; }
.top.scrolled nav .btn { border-radius: 10px; }
.top.scrolled[data-tone="dark"] nav { background-color: rgba(9, 22, 50, .56); border-color: rgba(255, 255, 255, .1); box-shadow: 0 14px 40px -12px rgba(2, 6, 23, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.top.scrolled[data-tone="light"] nav { background-color: rgba(255, 255, 255, .74); border-color: rgba(15, 23, 42, .09); box-shadow: 0 14px 40px -16px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .8); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.brand:hover { color: var(--ink); }
.links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.links a { color: var(--slate); text-decoration: none; }
.links a:hover { color: var(--ink); }
.actions { display: flex; align-items: center; gap: 4px; }
.signin { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 12px; white-space: nowrap; }
.signin:hover { color: var(--signal-ink); }
.top .brand, .top .signin, .top .links a { transition: color .3s ease; }
.top:not([data-tone="light"]) .brand, .top:not([data-tone="light"]) .brand:hover, .top:not([data-tone="light"]) .signin { color: #fff; }
.top:not([data-tone="light"]) .links a { color: #fff; }
.top:not([data-tone="light"]) .links a:hover { color: #bfdbfe; }
.top:not([data-tone="light"]) .signin:hover { color: #bfdbfe; }

/* hero: a dark stage lit from above. The light is React Bits' Light Rays (WebGL2), drawn by landing.js into .rays and
   faded in over the plain stage; without WebGL or JavaScript the stage is navy with a low blue haze. */
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background-color: var(--stage);
  background-image: radial-gradient(55% 45% at 6% 108%, rgba(37, 99, 235, .24), transparent 70%); }
.rays { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* a shade at the top of the stage keeps the navigation readable where the light is brightest */
.hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 200px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 23, 51, .74), rgba(7, 23, 51, .58) 76px, rgba(7, 23, 51, 0)); }   /* holds through the bar, so its text stays AA over the light */
.rays canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; padding-top: calc(var(--nav-h) + 64px); padding-bottom: 72px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { color: #fff; }
.lede { margin: 0; font-size: 20px; line-height: 1.55; color: var(--stage-text); max-width: 520px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { margin: 0; font-size: 15px; color: var(--stage-muted); }
.hero-shot { position: relative; }
.tour-hint { position: relative; margin: 18px 0 0; font-size: 15px; color: var(--stage-text); }

/* the hero comes in once, on load: the headline word by word (React Bits Blur Text), then the copy, then the tour */
@keyframes word-in { from { opacity: 0; filter: blur(12px); transform: translateY(.3em); } to { opacity: 1; filter: none; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero h1 .w { display: inline-block; animation: word-in 1s var(--ease-rise) both; animation-delay: calc(.12s + var(--i, 0) * 75ms); }
.enter { animation: rise 1s var(--ease-rise) both; animation-delay: var(--d, .4s); }

/* the tour illustration (the only rounded part of the page) */
.window { position: relative; z-index: 1; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(1, 5, 18, .95), 0 0 0 1px rgba(255, 255, 255, .07); }
.chrome { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.dots { display: flex; gap: 6px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.address { flex: 1; max-width: 340px; height: 26px; border-radius: 6px; background: #fff; border: 1px solid #e2e8f0; display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; color: #64748b; }
.screen { position: relative; overflow: hidden; }
.app { display: flex; min-height: 388px; font-size: 13px; line-height: 1.4; color: #0f172a; }
.app .side { width: 150px; flex-shrink: 0; background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.app-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 4px 8px 14px; }
.app-logo i { width: 18px; height: 18px; border-radius: 5px; background: var(--signal); }
.nav-item { padding: 7px 8px; border-radius: 6px; color: #475569; }
.nav-item.on { background: #e8effd; color: var(--signal-ink); font-weight: 600; }
.app .main { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-title { display: flex; flex-direction: column; gap: 2px; }
.app-title b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.app-title small { font-size: 12px; color: #64748b; }
.app-btns { display: flex; gap: 8px; }
.mbtn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid #cbd5e1; background: #fff; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.mbtn.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.app .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app .tile { border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.app .tile small { font-size: 12px; color: #64748b; }
.app .tile strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.sev { display: block; height: 4px; border-radius: 2px; }
.sev.crit { width: 30%; background: #e11d48; }
.sev.high { width: 60%; background: #f59e0b; }
.sev.low { width: 85%; background: #94a3b8; }
.table-mock { border: 1px solid #e2e8f0; border-radius: 9px; overflow: hidden; }
.trow { display: grid; grid-template-columns: 1.1fr 1.25fr .75fr; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid #eef2f7; font-size: 12.5px; }
.trow.thead { border-top: 0; background: #f8fafc; color: #64748b; font-size: 11.5px; font-weight: 600; }
.masked { display: inline-block; font-style: normal; padding: 2px 6px; border-radius: 5px; background: #f1f5f9; color: #475569; font-size: 12px; white-space: nowrap; }
.status { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.status.run { background: #e8effd; color: var(--signal-ink); }
.status.done { background: #dcfce7; color: #166534; }

/* the spotlight: everything but the current step is dimmed; it glides to the next step when you press Next */
.spot { display: none; position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--signal), 0 0 0 9999px rgba(15, 23, 42, .34); }
.window.live .spot { display: block; }
.window.live.ready .spot { transition: left .5s cubic-bezier(.2, .75, .25, 1), top .5s cubic-bezier(.2, .75, .25, 1), width .5s cubic-bezier(.2, .75, .25, 1), height .5s cubic-bezier(.2, .75, .25, 1); }
.spot::before, .spot::after { content: ""; position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--signal); }
.spot::after { border: 2px solid #fff; }
.spot::before { animation: beacon 1.8s ease-out infinite; }
@keyframes beacon { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.window:not(.live) [data-tour-step="2"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--signal); }
.caption { position: absolute; z-index: 3; right: 16px; bottom: 16px; width: 272px; padding: 14px 16px 12px; border-radius: 12px; background: #0f172a; color: #fff; box-shadow: 0 18px 40px -14px rgba(2, 6, 23, .6); display: flex; flex-direction: column; gap: 6px; }
.caption-count { margin: 0; font-size: 12.5px; font-weight: 600; color: #93c5fd; }
.caption-text { margin: 0; font-size: 14.5px; line-height: 1.45; min-height: 42px; }
.caption-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.progress { display: flex; gap: 4px; }
.progress span { width: 16px; height: 4px; border-radius: 2px; background: #334155; transition: background-color .3s; }
.progress span.on { background: #fff; }
.tour-nav { display: flex; gap: 6px; }
.tour-nav button { font: inherit; font-size: 13px; font-weight: 600; height: 30px; padding: 0 12px; border-radius: 7px; cursor: pointer; border: 1px solid #475569; background: transparent; color: #e2e8f0; }
.tour-nav button[data-tour="next"] { background: #fff; border-color: #fff; color: #0f172a; }
.tour-nav button:disabled { opacity: .4; cursor: default; }
.window:not(.live) .tour-nav { visibility: hidden; }

/* four facts at the foot of the stage */
.facts { list-style: none; margin: 0; padding: 36px 0 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid rgba(255, 255, 255, .12); }
.facts li { display: flex; gap: 14px; align-items: flex-start; }
.facts li > svg { color: #93c5fd; margin-top: 2px; }
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts strong { font-size: 16.5px; font-weight: 600; color: #fff; }
.facts span { font-size: 15px; line-height: 1.5; color: var(--stage-muted); }

/* sections */
.section { padding: 120px 0; }
.frost { background: var(--frost); }
.head { max-width: 780px; margin-bottom: 56px; }
.split-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.split-head .sub { margin: 0; }

/* sections rise into view as they scroll in: landing.js marks what starts below the fold with .rv, then adds .in */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-rise), transform .9s var(--ease-rise); }
.rv.in { opacity: 1; transform: none; }

/* how it works: three steps on a dashed tour path (the path from the logo), which draws itself as it scrolls in */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.path::before { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 64px) / 3 - 28px); border-top: 2px dashed #9fb5e3; transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) .15s; }
.path.wait::before { transform: scaleX(0); }
.path.wait.drawn::before { transform: none; }
.path li { position: relative; display: flex; flex-direction: column; gap: 14px; padding-right: 16px; }
.marker { position: relative; z-index: 1; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--signal); color: #fff; box-shadow: 0 0 0 10px var(--frost); margin-bottom: 10px; }
.path li.rv .marker { transform: scale(.6); transition: transform .8s var(--ease-out); transition-delay: inherit; }
.path li.rv.in .marker { transform: none; }
.path h3 { font-size: 24px; letter-spacing: -.02em; }
.path p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--slate); }

/* tiles: features and teams */
.tiles-grid { display: grid; gap: 16px; }
.tiles-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team { background: var(--frost); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.team h3 { display: flex; align-items: center; gap: 14px; }
.badge { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--signal); border: 1px solid var(--edge); }
.team p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--slate); }

/* cards light up under the cursor (React Bits Spotlight Card); landing.js keeps --mx and --my on the card under it */
.team, .sec > div, .plan, .credit-list li { position: relative; isolation: isolate; }
.team::after, .sec > div::after, .plan::after, .credit-list li::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), var(--glow, rgba(37, 99, 235, .11)), transparent 62%); }
.team:hover::after, .sec > div:hover::after, .plan:hover::after, .credit-list li:hover::after { opacity: 1; }
.sec > div, .plan.hi { --glow: rgba(147, 197, 253, .17); }

/* analytics: an example drop-off chart that fills and counts up as it scrolls in */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.ticks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; color: var(--text); }
.ticks svg { color: var(--signal); margin-top: 3px; }
.panel { background: #fff; border: 1px solid var(--edge); box-shadow: 0 30px 60px -40px rgba(13, 43, 102, .45); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.panel-head span:first-child { display: flex; align-items: center; gap: 10px; }
.panel-head svg { color: var(--signal); }
.panel-head .muted { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.funnel { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.funnel div { display: grid; grid-template-columns: 58px 1fr 44px; gap: 14px; align-items: center; font-size: 14px; color: var(--slate); }
.funnel i { display: block; height: 26px; background: var(--signal); transform-origin: 0 50%; }
.funnel b { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.funnel.wait i { transform: scaleX(0); }
.funnel.wait.fill i { transform: none; transition: transform 1.1s var(--ease-rise); transition-delay: calc(.15s + var(--k, 0) * 90ms); }

/* security band */
.security { background: var(--harbor); color: #fff; padding: 120px 0; }
.security h2 { color: #fff; }
.security .sub { color: var(--harbor-text); }
.sec > div { background: var(--harbor-2); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.sec h3 { display: flex; align-items: flex-start; gap: 12px; font-size: 17.5px; color: #fff; }
.sec h3 svg { color: #93c5fd; margin-top: 2px; }
.sec p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--harbor-text); }

/* pricing */
.pricing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.pricing-head > div { max-width: 720px; }
.billing { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex-shrink: 0; padding: 4px; background: #fff; border: 1px solid var(--edge); }
.billing::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--ink); transition: transform .35s var(--ease-out); }
.billing[data-period="yearly"]::before { transform: translateX(100%); }
.billing button { position: relative; z-index: 1; min-height: 46px; padding: 0 20px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--slate); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: color .25s; }
.billing button[aria-pressed="true"] { color: #fff; }
.billing .save { font-size: 13px; font-weight: 600; color: #047857; }
.billing button[aria-pressed="true"] .save { color: #86efac; }

.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 22px; padding: 28px 22px 28px; background: #fff; border: 1px solid var(--edge); }
.plan.hi { background: var(--harbor); border-color: var(--harbor); color: #fff; box-shadow: 0 34px 60px -34px rgba(13, 43, 102, .75); }
.plan-head { display: flex; flex-direction: column; gap: 12px; min-height: 92px; }
.plan-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-ico { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--signal-tint); color: var(--signal); }
.plan.hi .plan-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.plan-head p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.plan.hi .plan-head p { color: var(--harbor-text); }
.price { display: flex; flex-direction: column; gap: 3px; min-height: 96px; }
.amount { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.amount strong { font-size: 44px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.amount span { font-size: 14px; color: var(--muted); }
.price small { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.plan.hi .amount span, .plan.hi .price small { color: var(--harbor-text); }
.plan .btn { width: 100%; padding: 0 12px; }
.includes { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 22px; }
.plan.hi .includes { border-color: rgba(255, 255, 255, .18); }
.includes > span { font-size: 14px; font-weight: 600; }
.includes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.includes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.includes li svg { color: var(--signal); margin-top: 2px; }
.plan.hi .includes li { color: #e3eafa; }
.plan.hi .includes li svg { color: #93c5fd; }

.every { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px; padding: 20px 24px; background: #fff; border: 1px solid var(--edge); }
.every h3 { font-size: 16px; }
.every ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.every li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.every svg { color: var(--signal); }

.compare { margin-top: 80px; }
.compare > h3, .credits h3 { font-size: 28px; letter-spacing: -.025em; margin-bottom: 20px; }
.compare .scroll { overflow-x: auto; background: #fff; border: 1px solid var(--edge); }
/* Separate borders (not collapsed), so the frozen label column keeps its lines while the table scrolls sideways. */
.compare table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; }
.compare thead td { width: 28%; border-bottom: 1px solid var(--line); }
.compare thead td, .compare tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; }
.compare thead th { padding: 18px 12px; text-align: center; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.compare tbody th { text-align: left; font-weight: 500; color: var(--text); padding: 14px 12px 14px 24px; border-bottom: 1px solid #edf1f6; }
.compare td { text-align: center; padding: 14px 12px; border-bottom: 1px solid #edf1f6; color: var(--text); font-variant-numeric: tabular-nums; }
.compare td .i { display: inline-block; vertical-align: middle; }
.compare .yes { color: var(--signal); }
.compare .no { color: #8c9bb0; }
.compare thead th.hi, .compare tbody td:nth-child(4) { background: #f3f7ff; }
.compare tr.group th { padding: 28px 24px 12px; font-size: 15.5px; font-weight: 600; color: var(--ink); background: #f7f9fc; border-bottom: 1px solid var(--line); }
.compare tr.group th > span { position: sticky; left: 24px; display: inline-flex; align-items: center; gap: 10px; }
.compare tr.group th .i { color: var(--signal); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.soon { font-size: 12.5px; font-weight: 600; color: var(--slate); border: 1px solid #c4cfdf; padding: 2px 8px; }

.credits { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 48px; align-items: start; }
.credits h3 { margin-bottom: 14px; }
.credits-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); }
.credit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.credit-list li { background: #fff; border: 1px solid var(--edge); padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.credit-ico { color: var(--signal); }
.credit-name { font-size: 15px; font-weight: 600; line-height: 1.35; min-height: 2.7em; }
.credit-cost { font-size: 14px; line-height: 1.45; color: var(--muted); }
.credit-cost strong { display: block; font-size: 32px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.note { margin: 48px 0 0; font-size: 16px; color: var(--slate); }

/* faq: answers open smoothly where the browser can animate to height: auto */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; align-items: start; }
.faq-wrap .head { margin: 0; position: sticky; top: 108px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 18.5px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--signal); transition: transform .3s var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 56px 24px 0; font-size: 16.5px; line-height: 1.65; color: var(--slate); }
.faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-rise), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { height: auto; }

/* closing + footer */
.closing { background: var(--signal); color: #fff; }
.closing .wrap { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.closing h2 { max-width: 860px; color: #fff; font-size: clamp(34px, 4.2vw, 58px); }
.closing p { margin: 0; font-size: 19px; color: #fff; }
.closing .cta-row { padding-top: 8px; }
footer { background: var(--harbor); color: var(--harbor-text); }
.foot { padding-top: 72px; padding-bottom: 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; font-size: 15px; }
.foot-brand p { margin: 14px 0 0; max-width: 320px; line-height: 1.6; }
footer .brand { color: #fff; font-size: 18px; }
footer .brand:hover { color: #fff; }
footer nav { display: flex; flex-direction: column; gap: 12px; }
footer h4 { margin: 0 0 4px; font-size: 15px; color: #fff; }
footer nav a { color: var(--harbor-text); text-decoration: none; }
footer nav a:hover { color: #fff; }
.legal { padding-bottom: 36px; font-size: 14px; }
.legal span { display: block; border-top: 1px solid var(--harbor-line); padding-top: 24px; }

/* narrower screens */
@media (max-width: 1180px) {
  .links { gap: 20px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 1020px) {
  .links { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: calc(var(--nav-h) + 48px); }
  .split-head, .split, .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq-wrap .head { position: static; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-head { flex-direction: column; align-items: flex-start; }
  .compare thead td, .compare tbody th[scope="row"] { box-shadow: inset -1px 0 0 var(--edge); }
  .foot { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .top.scrolled nav { max-width: calc(100% - 16px); height: 56px; margin-top: 8px; padding: 0 8px 0 14px; border-radius: 14px; }
  .section, .security { padding: 80px 0; }
  .head { margin-bottom: 36px; }
  .lede { font-size: 18px; }
  .sub { font-size: 17.5px; }
  .tiles-grid.four, .plans, .facts { grid-template-columns: 1fr; }
  .team, .sec > div { padding: 24px; }
  .plan-head, .price { min-height: 0; }
  .credit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare table { min-width: 720px; }
  .compare thead td { width: 160px; }
  .compare tbody th { padding-left: 16px; }
  .compare tr.group th { padding-left: 16px; }
  .compare tr.group th > span { left: 16px; }
  .signin { display: none; }
  .path { grid-template-columns: 1fr; gap: 36px; }
  .path::before { top: 28px; bottom: 28px; left: 27px; right: auto; border-top: 0; border-left: 2px dashed #9fb5e3; transform-origin: 50% 0; }
  .path.wait::before { transform: scaleY(0); }
  .path li { padding-left: 84px; padding-right: 0; }
  .marker { position: absolute; left: 0; top: 0; margin: 0; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .app .side { display: none; }
  .app { min-height: 0; }
  .trow { grid-template-columns: 1fr 1.2fr; }
  .trow > span:last-child { display: none; }
  .caption { position: relative; right: auto; bottom: auto; width: auto; margin: 0 12px 12px; }
  .every { flex-direction: column; align-items: flex-start; }
  .every ul { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spot::before { animation: none; display: none; }
  .hero h1 .w, .enter { animation: none; }
  .window.live.ready .spot, .billing::before, .billing button, .faq summary svg, .progress span, .top nav, .top .brand, .top .signin, .top .links a,
  .team::after, .sec > div::after, .plan::after, .credit-list li::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }
@media print { .rv { opacity: 1 !important; transform: none !important; } .top.live { position: absolute; } }

/* ---------- company and legal pages (web/landing/page.html, server/legal.mjs) ---------- */
.foot-mail a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--harbor-line); }
.foot-mail a:hover { border-color: #fff; }
.doc-hero { background: var(--stage); color: var(--stage-text); }
.doc-hero .wrap { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 64px; max-width: 1240px; }
.doc-hero h1 { margin: 10px 0 0; color: #fff; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; }
.doc-kicker { margin: 0; font-size: 15px; color: var(--stage-muted); }
.doc-kicker a { color: var(--stage-text); text-decoration: none; }
.doc-kicker a:hover { color: #fff; }
.doc-summary { margin: 18px 0 0; max-width: 680px; font-size: 19px; line-height: 1.55; color: var(--stage-text); }
.doc-date { margin: 22px 0 0; font-size: 14px; color: var(--stage-muted); }
.doc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 72px; padding-top: 64px; padding-bottom: 104px; }
.doc { max-width: 740px; font-size: 16.5px; line-height: 1.7; color: var(--text); }
.doc > :first-child { margin-top: 0; }
.doc h2 { margin: 48px 0 14px; font-size: 25px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.doc h3 { margin: 28px 0 8px; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin: 6px 0; padding-left: 2px; }
.doc li::marker { color: var(--signal); }
.doc a { color: var(--signal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc code { font: 500 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 2px 6px; background: var(--frost); border: 1px solid var(--line); }
.doc .facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 18px 0 22px; padding: 22px 24px; background: var(--frost); border: 1px solid var(--line); }
.doc .facts dt { font-weight: 600; color: var(--ink); }
.doc .facts dd { margin: 0; overflow-wrap: anywhere; }
.doc .table { margin: 16px 0 22px; overflow-x: auto; border: 1px solid var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc thead th { background: var(--frost); color: var(--ink); font-weight: 600; }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.doc-side nav { position: sticky; top: 112px; display: grid; gap: 2px; padding-left: 20px; border-left: 1px solid var(--line); }
.doc-side h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.doc-side a { padding: 6px 0; font-size: 15px; color: var(--slate); text-decoration: none; }
.doc-side a:hover { color: var(--ink); }
.doc-side a[aria-current="page"] { color: var(--signal-ink); font-weight: 600; box-shadow: -21px 0 0 -19px var(--signal); }
@media (max-width: 1020px) {
  .doc-wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .doc-side { order: -1; }
  .doc-side nav { position: static; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 18px; border-left: 0; border-bottom: 1px solid var(--line); }
  .doc-side h2 { width: 100%; margin-bottom: 2px; }
  .doc-side a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-underline-offset: 5px; }
}
@media (max-width: 560px) {
  .doc-hero .wrap { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 44px; }
  .doc .facts { grid-template-columns: 1fr; gap: 2px; }
  .doc .facts dd { margin-bottom: 10px; }
}
.doc h2[id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

/* ---------- Features: a list of six on the left, the selected one illustrated on the right ----------
   Without JavaScript every description shows and the first illustration stands for the set. landing.js makes the
   list a vertical tablist (click, arrow keys, Home / End): the chosen feature opens and its scene shows. */
.fx { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: start; }
.fx-list { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.fx-tab { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; width: 100%; margin-left: -1px; padding: 20px 22px;
  border: 0; border-left: 2px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease; }
.fx-tab:hover { background: #f7f9fc; }
.fx-tab[aria-selected="true"] { background: var(--frost); border-left-color: var(--signal); }
.fx-ico { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--edge); color: var(--slate); transition: color .2s ease, border-color .2s ease; }
.fx-tab[aria-selected="true"] .fx-ico, .fx-tab:hover .fx-ico { color: var(--signal); }
.fx-tab[aria-selected="true"] .fx-ico { border-color: #b9cdf6; }
.fx-copy { display: block; padding-top: 8px; }
.fx-title { display: block; font-size: 18.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.fx-text { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--slate); }
.fx.live .fx-tab:not([aria-selected="true"]) .fx-title { color: var(--slate); }
.fx.live .fx-tab:not([aria-selected="true"]):hover .fx-title { color: var(--ink); }
.fx.live .fx-text { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease-out), opacity .25s ease, margin-top .35s var(--ease-out); }
.fx.live .fx-tab[aria-selected="true"] .fx-text { max-height: 12em; margin-top: 8px; opacity: 1; }

.fx-stage { position: sticky; top: calc(var(--nav-h) + 48px); padding: 32px; background: var(--frost); border: 1px solid var(--line); }
.fx-scene { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--edge); box-shadow: 0 30px 60px -40px rgba(13, 43, 102, .45); color: var(--text); font-size: 14px; }
.fx-scene[hidden] { display: none; }
/* With JavaScript the six scenes share one cell, so the panel keeps the tallest one's height and nothing below moves. */
.fx.live .fx-stage { display: grid; }
.fx.live .fx-scene { grid-area: 1 / 1; }
.fx.live .fx-scene[hidden] { display: flex; visibility: hidden; animation: none; }
.fx.live .fx-scene { animation: fx-in .4s var(--ease-out); }
@keyframes fx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fx-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.fx-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.fx-bar i { width: 8px; height: 8px; background: #cbd5e1; }
.fx-bar span { margin-left: 12px; padding: 5px 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.fx-body { flex: 1; padding: 24px; min-height: 318px; }
.fx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; background: var(--signal); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fx-lines { display: grid; gap: 10px; }
.fx-lines i { display: block; height: 10px; background: #e2e8f0; }
.fx-foot code, .fx-fields em, .fx-link, .fx-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* 1. Real HTML */
.fx-app { display: grid; grid-template-columns: 120px minmax(0, 1fr); padding: 0; }
.fx-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; background: var(--harbor); color: var(--harbor-text); font-size: 13px; }
.fx-side b { color: #fff; font-size: 14px; padding: 0 8px 12px; }
.fx-side span { padding: 6px 8px; }
.fx-side .on { background: var(--harbor-2); color: #fff; }
.fx-main { padding: 22px 22px 26px; }
.fx-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fx-row-head strong { font-size: 17px; color: var(--ink); }
.fx-target { position: relative; }
.fx-ring { position: absolute; inset: -6px; border: 2px solid var(--signal); box-shadow: 0 0 0 5px rgba(37, 99, 235, .14); }
.fx-table div { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fx-pill { padding: 4px 10px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: var(--slate); }
.fx-pill.ok { background: #dcfce7; color: #166534; }
.fx-pill.run { background: var(--signal-tint); color: var(--signal-ink); }
.fx-callout { width: max-content; max-width: 100%; margin: 18px 0 0 auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #fff; border: 1px solid var(--edge); box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .35); font-size: 13.5px; line-height: 1.45; }
.fx-step { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; background: var(--signal); color: #fff; font-size: 12.5px; font-weight: 700; }
.fx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: #f8fafc; }
.fx-foot code { font-size: 12.5px; color: var(--signal-ink); }
.fx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-tags span { padding: 4px 10px; border: 1px solid var(--line); background: #fff; font-size: 12px; color: var(--slate); }

/* 2. Redaction */
.fx-fields { display: grid; }
.fx-fields div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.fx-fields span { color: var(--muted); font-size: 13.5px; }
.fx-fields em { justify-self: start; font-style: normal; font-size: 13px; padding: 6px 12px; background: #f1f5f9; color: #334155; }
.fx-fields em.fx-hatch { font-family: inherit; color: var(--slate); background: repeating-linear-gradient(135deg, #eef2f7 0 6px, #e2e8f0 6px 12px); border: 1px dashed #94a3b8; }
.fx-shield { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; background: var(--signal-tint); color: var(--signal-ink); font-size: 14px; line-height: 1.5; }
.fx-shield svg { margin-top: 1px; }
.fx-shield span { color: #1e3a8a; }

/* 3. AI */
.fx-label { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fx-caption, .fx-chapters, .fx-langs { margin-bottom: 20px; }
.fx-spark { display: inline-flex; align-items: center; gap: 6px; color: var(--signal-ink); }
.fx-caption { padding: 12px 14px; border: 1.5px solid var(--signal); box-shadow: 0 0 0 4px rgba(37, 99, 235, .1); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.fx-chapters { list-style: none; margin-top: 0; padding: 0; display: grid; gap: 6px; counter-reset: ch; }
.fx-chapters li { counter-increment: ch; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); font-size: 13.5px; }
.fx-chapters li::before { content: counter(ch); width: 20px; height: 20px; display: grid; place-items: center; background: var(--frost); color: var(--slate); font-size: 12px; font-weight: 600; }
.fx-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.fx-langs span { padding: 6px 12px; border: 1px solid var(--line); font-size: 13px; color: var(--slate); }
.fx-langs .on { background: var(--signal); border-color: var(--signal); color: #fff; }

/* 4. Voice */
.fx-voice { display: flex; flex-direction: column; }
.fx-screen { position: relative; flex: 1; min-height: 222px; padding: 22px; background: var(--frost); border: 1px solid var(--line); overflow: hidden; }
.fx-screen .fx-lines { width: 58%; }
.fx-presenter { position: absolute; right: 18px; top: 18px; width: 92px; height: 92px; display: grid; place-items: center; background: linear-gradient(160deg, #3b5998, #0d2b66); color: #fff; font-size: 22px; font-weight: 600; border: 3px solid #fff; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .5); }
.fx-subs { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: 88%; padding: 7px 14px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 14px; }
.fx-wave { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.fx-play { width: 34px; height: 34px; display: grid; place-items: center; background: var(--signal); color: #fff; flex-shrink: 0; }
.fx-bars { flex: 1; display: flex; align-items: center; gap: 4px; height: 34px; }
.fx-bars i { flex: 1; height: var(--h); background: #cbd5e1; }
.fx-bars i:nth-child(-n + 7) { background: var(--signal); }
.fx-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 5. Leads */
.fx-leads { display: grid; justify-items: start; align-content: start; gap: 16px; }
.fx-form { width: min(100%, 330px); display: grid; gap: 12px; padding: 20px; border: 1px solid var(--edge); box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .35); }
.fx-form strong { font-size: 16px; color: var(--ink); }
.fx-input { padding: 9px 12px; border: 1px solid #cbd5e1; font-size: 14px; color: var(--ink); }
.fx-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--slate); }
.fx-check i { flex-shrink: 0; width: 16px; height: 16px; display: grid; place-items: center; background: var(--signal); color: #fff; margin-top: 1px; }
.fx-form .fx-btn { padding: 9px 14px; }
.fx-link { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 12px; background: #f8fafc; border: 1px solid var(--line); color: var(--slate); font-size: 12.5px; }
.fx-link span { overflow-wrap: anywhere; }
.fx-link svg { color: var(--signal); flex-shrink: 0; }
.fx-link b, .fx-hello b { color: var(--signal-ink); font-weight: 600; }
.fx-hello { font-size: 14px; color: var(--text); }

/* 6. Brand */
.fx-brand { display: grid; gap: 16px; align-content: start; }
.fx-swatches { display: flex; align-items: center; gap: 8px; }
.fx-swatches span { width: 22px; height: 22px; background: var(--c); }
.fx-swatches .on { outline: 2px solid var(--c); outline-offset: 3px; }
.fx-swatches b { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fx-embed { position: relative; padding: 18px; border: 1px solid var(--line); background: #f3faf7; min-height: 150px; }
.fx-embed-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); }
.fx-logo { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #047857; }
.fx-embed .fx-lines { width: 55%; }
.fx-card { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border: 1px solid #a7f3d0; box-shadow: 0 14px 30px -18px rgba(6, 78, 59, .4); font-size: 13.5px; }
.fx-card .fx-btn { background: #047857; }
.fx-code { display: block; padding: 12px 14px; background: var(--stage); color: #e2e8f0; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }

@media (max-width: 1020px) {
  .fx { grid-template-columns: 1fr; gap: 28px; }
  .fx-stage { position: static; order: -1; padding: 20px; }
}
@media (max-width: 560px) {
  .fx-stage { padding: 0; border: 0; background: none; }
  .fx-body { padding: 18px; min-height: 0; }
  .fx-app { grid-template-columns: 1fr; padding: 0; }
  .fx-side { display: none; }
  .fx-tab { padding: 16px 14px; gap: 14px; }
  .fx-presenter { width: 70px; height: 70px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .fx.live .fx-scene { animation: none; } .fx.live .fx-text, .fx-tab, .fx-ico { transition: none; } }