/* ===========================================================================
   AIWA LANDER
   Layout: Cocodly's section order and components (nav, prompt hero, word
   marquee, app grid, workspace cards, build plan, masonry, pricing table).
   Finish: Mastra's. A near-black page (#020202) with sections lifted to
   #080808, content held in large rounded frames with a notched tab label,
   2px #1c1c1c hairlines, two-tone headings, and generous padding.

   Type: General Sans (Fontshare, ITF Free Font License) for text and
   headings, Commit Mono (SIL OFL) for labels and mock UI - the nearest free,
   self-hostable pair to Mastra's Greed + Commit Mono. One scale, whole
   pixels: 12.5 / 14 / 15 / 17 / 20 / 22 / 24 / 32 / 40 / 54 / 64. The old
   15px-root quarter-pixel sizes (13.125, 11.25...) are gone.

   Accent: AIWA's sunset (#ce1400 / #ff5e00 / #ffb300) plus the soft amber
   Mastra uses for its mono call-outs (#fdac53), which sits close to AIWA's
   --accent.
   =========================================================================== */

@font-face {
  font-family: 'General Sans';
  src: url('/wl-assets/fonts/general-sans.woff2') format('woff2');
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face { font-family: 'Commit Mono'; src: url('/wl-assets/fonts/commit-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Commit Mono'; src: url('/wl-assets/fonts/commit-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Commit Mono'; src: url('/wl-assets/fonts/commit-mono-600.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }

.lp {
  --lp-page: #020202;       /* page ground            */
  --lp-bg: #080808;         /* section ground         */
  --lp-frame: #030303;      /* outer frame + tab      */
  --lp-panel: #0b0b0b;      /* panel inside the frame */
  --lp-card: #111111;       /* card                   */
  --lp-card-2: #161616;     /* raised card / hover    */
  --lp-inset: #070707;      /* screens inside cards   */
  --lp-line: #1c1c1c;       /* 2px hairline           */
  --lp-line-2: #262626;
  --lp-line-3: #424242;
  --lp-head: #f0f0f0;
  --lp-fg: #d9d9d9;
  --lp-soft: #cccccc;
  --lp-muted: #939393;
  --lp-dim: #5c5c5c;
  --lp-o1: var(--app-sunset-3);   /* #ce1400 */
  --lp-o2: var(--app-sunset-2);   /* #ff5e00 */
  --lp-o3: var(--app-sunset-1);   /* #ffb300 */
  --lp-accent: var(--app-sunset-2);
  --lp-amber: #fdac53;
  --lp-good: #7aff78;
  --lp-grad: linear-gradient(to right, var(--lp-o1) 0%, var(--lp-o2) 50%, var(--lp-o3) 100%);
  --lp-sans: 'General Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --lp-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lp-wrap: 1252px;
  --lp-gutter: 10px;

  /* CONCENTRIC CORNERS. Every nested box takes its parent's radius minus the
     gap between them, so the two curves share a centre and the ring of
     space between them stays even all the way round the corner. Only the
     outermost radius and each padding are set; the rest are derived. */
  --r-frame: 32px;  --p-frame: 8px;
  --r-stage: calc(var(--r-frame) - var(--p-frame));   /* 24 / 40 */
  --p-stage: 8px;
  --r-card: calc(var(--r-stage) - var(--p-stage));    /* 16 / 28 */
  --p-card: 8px;
  --r-mock: calc(var(--r-card) - var(--p-card));      /*  8 / 16 */
  --p-mock: 4px;
  --r-mock-in: calc(var(--r-mock) - var(--p-mock));   /*  4 /  8 */
  --r-panel: 24px;  --p-panel: 8px;
  --r-step: calc(var(--r-panel) - var(--p-panel));    /* 16 / 20 */
  --p-step: 10px;
  --r-step-in: calc(var(--r-step) - var(--p-step));   /*  6 /  8 */

  margin: 0;
  background: var(--lp-page);
  color: var(--lp-fg);
  font-family: var(--lp-sans);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  color-scheme: dark;
}
@media (min-width: 768px) {
  .lp {
    --lp-gutter: 40px;
    --r-frame: 56px; --p-frame: 16px;
    --p-stage: 12px; --p-card: 12px; --p-mock: 8px;
    --r-panel: 32px; --p-panel: 12px; --p-step: 12px;
  }
}
@media (min-width: 1280px) { .lp { --lp-gutter: 94px; } }

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
/* Resets sit inside :where() so they carry no specificity - a component
   class always beats them. */
:where(.lp) :where(img, video) { display: block; max-width: 100%; height: auto; }
:where(.lp) a { color: inherit; text-decoration: none; }
:where(.lp) button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.lp) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.lp) :where(ul, ol) { padding: 0; list-style: none; }
.lp :focus-visible { outline: 2px solid var(--lp-amber); outline-offset: 3px; border-radius: 8px; }
.lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lp-skip { position: absolute; left: 12px; top: -60px; z-index: 9000; padding: 10px 16px; border-radius: 999px; background: var(--lp-head); color: #000; font-weight: 600; }
.lp-skip:focus { top: 12px; }
.lp-ico { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- type -------------------------------------------------------------- */
.lp-h1, .lp-h2, .lp-h3 { color: var(--lp-head); font-weight: 560; letter-spacing: -0.01em; text-wrap: balance; }
.lp-h2 { font-size: 30px; line-height: 1.12; }
.lp-h3 { font-size: 26px; line-height: 1.15; }
.lp-mute { color: var(--lp-muted); }
.lp-lead { font-size: 17px; line-height: 1.5; color: var(--lp-muted); text-wrap: pretty; }
.lp-lead--lg { font-size: 17px; }
@media (min-width: 768px) {
  .lp-h2 { font-size: 40px; line-height: 1.1; }
  .lp-h3 { font-size: 32px; }
  .lp-lead--lg { font-size: 20px; line-height: 1.5; }
}
@media (min-width: 1280px) {
  .lp-lead--lg { font-size: 22px; line-height: 1.36; }
}

/* ---- shared parts ------------------------------------------------------- */
.lp-ring-btn { position: relative; display: inline-flex; padding: 1.5px; border-radius: 999px; background: var(--lp-grad); flex: 0 0 auto; }
.lp-ring-btn__face { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: #fff; color: #050505; font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: 0; transition: background-color .2s ease; }
.lp-ring-btn__face .lp-ico { width: 15px; height: 15px; transition: transform .2s var(--lp-ease); }
.lp-ring-btn:hover .lp-ring-btn__face { background: #f2f2f2; }
.lp-ring-btn:hover .lp-ring-btn__face .lp-ico { transform: translateX(2px); }
.lp-ring-btn--lg .lp-ring-btn__face { padding: 15px 30px; font-size: 17px; }

.lp-ghost-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--lp-line-3); border-radius: 999px; background: var(--lp-line-2); color: var(--lp-head); font-size: 15px; font-weight: 500; line-height: 22px; transition: background-color .2s ease, border-color .2s ease; flex: 0 0 auto; }
.lp-ghost-btn:hover { background: #2e2e2e; border-color: #555; }
.lp-ghost-btn .lp-ico { width: 15px; height: 15px; }

.lp-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border: 1px solid var(--lp-line-2); border-radius: 999px; background: var(--lp-card); color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12.5px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-pill .lp-ico { color: var(--lp-amber); width: 14px; height: 14px; }

/* Mastra's frame: an outer rounded ground, a tab label notched into its top
   edge, and a bordered panel inside. The tab's inverse corners are two
   radial-gradient quarter circles in the frame colour. */
.lp-frame { position: relative; max-width: calc(var(--lp-wrap) + 2 * 24px); margin: 64px auto 0; padding: var(--p-frame); border-radius: var(--r-frame); background: var(--lp-frame); }
.lp-frame__tab { position: absolute; left: 50%; top: 1px; translate: -50% -100%; padding: 14px 34px 6px; border-radius: 24px 24px 0 0; background: var(--lp-frame); color: var(--lp-muted); font-family: var(--lp-sans); font-size: 15px; font-weight: 470; line-height: 22px; letter-spacing: 0.025em; white-space: nowrap; }
.lp-frame__tab::before, .lp-frame__tab::after { content: ''; position: absolute; bottom: 0; width: 24px; height: 24px; pointer-events: none; }
.lp-frame__tab::before { left: -24px; background: radial-gradient(circle at 0 0, transparent 23.5px, var(--lp-frame) 24px); }
.lp-frame__tab::after { right: -24px; background: radial-gradient(circle at 100% 0, transparent 23.5px, var(--lp-frame) 24px); }
.lp-stage { position: relative; border: 2px solid var(--lp-line); border-radius: var(--r-stage); background: var(--lp-panel); padding: var(--p-stage); }
@media (min-width: 768px) {
  .lp-frame { margin-top: 80px; }
  .lp-frame__tab { padding: 16px 44px 8px; border-radius: 28px 28px 0 0; font-size: 17px; }
  .lp-frame__tab::before, .lp-frame__tab::after { width: 28px; height: 28px; }
  .lp-frame__tab::before { left: -28px; background: radial-gradient(circle at 0 0, transparent 27.5px, var(--lp-frame) 28px); }
  .lp-frame__tab::after { right: -28px; background: radial-gradient(circle at 100% 0, transparent 27.5px, var(--lp-frame) 28px); }
}

.lp-noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }

.js .lp-reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s var(--lp-ease), transform .8s var(--lp-ease), filter .8s var(--lp-ease); }
.js .lp-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ===========================================================================
   NAV
   =========================================================================== */
/* ===========================================================================
   HERO
   =========================================================================== */
.lp-hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 128px var(--lp-gutter) 72px; overflow: hidden; background: var(--lp-page); }
.lp-hero__fluid { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Softer than the layout reference: Mastra runs no colour field at all, so
   the glow stays but sits lower and quieter on the darker ground. */
.lp-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; animation: lp-float 18s ease-in-out infinite alternate; will-change: transform; }
.lp-blob--1 { width: 95vw; height: 95vw; top: -25%; left: -25%; background: var(--lp-o1); animation-delay: 0s; }
.lp-blob--2 { width: 90vw; height: 90vw; top: 10%; right: -35%; background: var(--lp-o2); animation-delay: -6s; }
.lp-blob--3 { width: 120vw; height: 80vw; bottom: -30%; left: -10%; background: var(--lp-o3); animation-delay: -12s; opacity: 0.32; }
@media (min-width: 801px) {
  .lp-blob { filter: blur(120px); opacity: 0.34; }
  .lp-blob--1 { width: 50vw; height: 50vw; top: -22%; left: -12%; }
  .lp-blob--2 { width: 45vw; height: 45vw; top: 18%; right: -16%; }
  .lp-blob--3 { width: 60vw; height: 40vw; bottom: -24%; left: 10%; opacity: 0.24; }
}
@keyframes lp-float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(5%, -5%) scale(1.08); }
  66%  { transform: translate(-5%, 5%) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}
.lp-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 48%, rgb(2 2 2 / 0.55), transparent 70%); }
.lp-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 220px; z-index: 1; background: linear-gradient(to bottom, transparent, var(--lp-page)); pointer-events: none; }
.lp-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 760px; text-align: center; }
.lp-hero__title { display: grid; justify-items: center; width: 100%; margin-bottom: 18px; color: var(--lp-head); font-size: 38px; font-weight: 560; line-height: 1.06; letter-spacing: -0.02em; }
.lp-hero__grad { background: linear-gradient(90deg, var(--lp-head) 0%, var(--lp-head) 35%, var(--lp-o3) 68%, var(--lp-o2) 100%); background-size: 240% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lp-shine 7s ease-in-out infinite alternate; padding-bottom: 0.06em; }
@keyframes lp-shine { to { background-position: 100% 50%; } }
.lp-hero__sub { margin-bottom: 32px; color: var(--lp-muted); font-size: 17px; line-height: 1.45; }

.lp-prompt { position: relative; width: 100%; max-width: 640px; border: 2px solid var(--lp-line-2); border-radius: 34px; background: rgb(12 12 12 / 0.86); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 30px 70px rgb(0 0 0 / 0.45); text-align: left; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-prompt:focus-within { border-color: var(--lp-line-3); box-shadow: 0 30px 70px rgb(0 0 0 / 0.5), 0 0 0 5px rgb(255 94 0 / 0.1); }
.lp-prompt__input { display: block; width: 100%; min-height: 58px; resize: none; padding: 20px 24px 0; border: 0; background: transparent; color: var(--lp-head); font: 400 17px/1.45 var(--lp-sans); letter-spacing: 0.01em; outline: none; }
.lp-prompt__input::placeholder { color: var(--lp-muted); }
.lp-prompt__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 14px 16px; }
.lp-prompt__end { position: relative; display: flex; align-items: center; gap: 6px; }
.lp-prompt__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: var(--lp-muted); transition: color .2s ease, background-color .2s ease; }
.lp-prompt__icon:hover { color: var(--lp-head); background: var(--lp-card-2); }
.lp-prompt__icon .lp-ico { width: 19px; height: 19px; }
.lp-prompt__tip-wrap { position: relative; display: inline-flex; }
.lp-prompt__tip { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; padding: 7px 12px; border: 1px solid var(--lp-line-2); border-radius: 12px; background: #0e0e0e; color: var(--lp-fg); font-size: 13px; line-height: 18px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 5; }
.lp-prompt__tip-wrap:hover .lp-prompt__tip, .lp-prompt__tip-wrap:focus-within .lp-prompt__tip { opacity: 1; }
.lp-prompt__mode { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; color: var(--lp-fg); font-size: 15px; font-weight: 500; }
.lp-prompt__mode:hover { background: var(--lp-card-2); }
.lp-prompt__mode .lp-ico { width: 14px; height: 14px; color: var(--lp-muted); }
.lp-prompt__modes { position: absolute; right: 46px; bottom: calc(100% + 8px); min-width: 140px; padding: 6px; border: 2px solid var(--lp-line); border-radius: 18px; background: #0c0c0c; box-shadow: 0 18px 40px rgb(0 0 0 / 0.5); z-index: 6; }
.lp-prompt__modes li { padding: 8px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; }
.lp-prompt__modes li:hover, .lp-prompt__modes li[aria-selected="true"] { background: var(--lp-card-2); color: var(--lp-head); }
.lp-prompt__send { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--lp-line-2); color: var(--lp-muted); transition: background-color .2s ease, color .2s ease; }
.lp-prompt.has-text .lp-prompt__send { background: var(--lp-accent); color: #fff; }
.lp-prompt__send .lp-ico { width: 17px; height: 17px; }
.lp-hero__hint { margin-top: 16px; color: var(--lp-dim); font-family: var(--lp-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.02em; }
.lp-hero__hint kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--lp-line-2); border-radius: 6px; background: var(--lp-card); font: inherit; color: var(--lp-fg); }

@media (min-width: 640px) { .lp-hero__title { font-size: 46px; } }
@media (min-width: 768px) {
  .lp-hero__title { font-size: 54px; margin-bottom: 20px; }
  .lp-hero__sub { font-size: 20px; }
}
@media (min-width: 1280px) {
  .lp-hero__title { font-size: 64px; }
  .lp-hero__sub { font-size: 22px; margin-bottom: 36px; }
}

/* ===========================================================================
   WHO BUILDS - the tilted word marquee
   =========================================================================== */
.lp-logos { position: relative; z-index: 10; padding: 36px 0 12px; border-top: 2px solid var(--lp-line); background: var(--lp-page); }
.lp-logos__label { padding: 0 var(--lp-gutter); color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12.5px; font-weight: 400; line-height: 18px; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
.lp-logos__label b { color: var(--lp-amber); font-weight: 500; }
.lp-logos__stage { position: relative; height: 130px; overflow: hidden; perspective: 1200px; perspective-origin: center; display: flex; align-items: center; }
.lp-logos__tilt { width: 100%; height: 100%; display: flex; align-items: center; transform: rotateX(4deg) rotateY(-14deg); transform-style: preserve-3d; transform-origin: center; }
.lp-logos__track { display: flex; white-space: nowrap; will-change: transform; }
.lp-logos__track span { display: inline-block; padding: 0 0.42em; color: var(--lp-head); font-family: var(--lp-sans); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }
.lp-logos__fade { position: absolute; inset: 0; pointer-events: none; }
.lp-logos__fade--x { background: linear-gradient(90deg, var(--lp-page) 0%, transparent 25%, transparent 90%, var(--lp-page) 100%); }
.lp-logos__fade--y { background: linear-gradient(var(--lp-page) 0%, transparent 28%, transparent 72%, var(--lp-page) 100%); }
@media (min-width: 768px) {
  .lp-logos { padding: 48px 0 20px; }
  .lp-logos__stage { height: 260px; margin-top: 8px; }
  .lp-logos__track span { font-size: 92px; }
}

/* ===========================================================================
   SECTION SHELL - every content section sits on the lifted ground with
   Mastra's vertical rhythm.
   =========================================================================== */
.lp-apps, .lp-build, .lp-plan, .lp-why, .lp-pricing, .lp-faq, .lp-cta { background: var(--lp-bg); }
.lp-apps, .lp-build, .lp-why, .lp-pricing, .lp-faq { padding: 96px var(--lp-gutter); }
@media (min-width: 1024px) {
  .lp-apps, .lp-build, .lp-why, .lp-pricing, .lp-faq { padding-block: 140px; }
}

/* ===========================================================================
   REAL APPS
   =========================================================================== */
.lp-apps { border-radius: 40px 40px 0 0; }
.lp-apps__head { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: var(--lp-wrap); margin: 0 auto; text-align: center; }
.lp-apps__head .lp-h2 { margin-bottom: 14px; }
.lp-apps__lead { max-width: 560px; }
/* sibling gap = the stage padding around them, so every inner corner is
   concentric with the stage's corner and with its neighbours' */
.lp-apps__grid { display: grid; grid-template-columns: 1fr; gap: var(--p-stage); }
.lp-app { overflow: hidden; border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-card); transition: border-color .25s ease, transform .35s var(--lp-ease); }
.lp-app:hover { border-color: var(--lp-line-3); transform: translateY(-3px); }
.lp-app__shot { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; margin: var(--p-card) var(--p-card) 0; border-radius: var(--r-mock); background: #fff; }
.lp-app__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--lp-ease); }
.lp-app:hover .lp-app__shot img { transform: scale(1.025); }
.lp-app__shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.1) 50%, transparent 100%); opacity: 0; transition: opacity .25s ease; }
.lp-app__open { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff; font-family: var(--lp-mono); font-size: 11.5px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.lp-app:hover .lp-app__shot::after, .lp-app__shot:focus-visible::after { opacity: 1; }
.lp-app:hover .lp-app__open, .lp-app__shot:focus-visible .lp-app__open { opacity: 1; transform: none; }
.lp-app__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 14px; padding: 16px 18px 18px; }
.lp-app__bar h3 { flex: 1 1 200px; }
.lp-app__bar h3 { min-width: 0; color: var(--lp-head); font-size: 17px; font-weight: 560; line-height: 22px; }
.lp-app__bar h3 span { display: block; margin-top: 3px; color: var(--lp-muted); font-size: 14px; font-weight: 400; line-height: 20px; }
.lp-app__bar a { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--lp-line-2); border-radius: 999px; color: var(--lp-fg); font-size: 13px; font-weight: 500; transition: background-color .2s ease, color .2s ease; }
.lp-app__bar a:hover { background: var(--lp-card-2); color: var(--lp-head); }
.lp-app__bar a .lp-ico { width: 13px; height: 13px; }
@media (min-width: 768px) {
  .lp-apps__head { flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left; }
  .lp-apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .lp-apps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===========================================================================
   WORKSPACE
   =========================================================================== */
.lp-build__wrap { max-width: var(--lp-wrap); margin: 0 auto; }
.lp-build__head { max-width: 820px; margin: 0 auto; text-align: center; }
.lp-build__head .lp-h2 { margin-bottom: 20px; }
.lp-build__head .lp-lead { max-width: 620px; margin-inline: auto; }
.lp-build__grid { display: grid; grid-template-columns: 1fr; gap: var(--p-stage); }
.lp-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-card); }
.lp-card__copy { padding: 28px 28px 24px; }
.lp-card__stage { flex: 1; padding: 0 var(--p-card) var(--p-card); }


.lp-qa { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 16px 20px; }
.lp-qa__head { margin-bottom: 4px; color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

@media (min-width: 768px) {
  .lp-build__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-card__copy { padding: 36px 36px 28px; }
  .lp-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; }
  .lp-card--wide .lp-card__copy { padding: 40px; }
  .lp-qa { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; padding: 28px 28px 28px 0; }
  .lp-card--flip .lp-card__copy { order: 2; }
  .lp-card--flip .lp-mock--wide { margin: var(--p-card) 0 var(--p-card) var(--p-card); }
}

/* ===========================================================================
   ENGINE / WHITE LABEL - copy beside a panel
   =========================================================================== */
.lp-plan { position: relative; isolation: isolate; overflow: hidden; padding: 96px var(--lp-gutter); }
.lp-plan__glow { position: absolute; left: 70%; top: 50%; z-index: -1; width: 760px; max-width: 100vw; height: 460px; translate: -50% -50%; border-radius: 999px; background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.09), transparent 65%); pointer-events: none; }
.lp-plan__wrap { display: grid; gap: 48px; max-width: var(--lp-wrap); margin: 0 auto; }
.lp-plan__copy { text-align: center; }
.lp-plan__copy .lp-h2 { margin-bottom: 24px; }
.lp-plan__copy .lp-pill { margin-bottom: 24px; }
.lp-plan__lead { margin-bottom: 32px; }
.lp-checks { display: grid; gap: 14px; justify-items: start; width: fit-content; margin: 0 auto; text-align: left; }
.lp-checks li { display: flex; align-items: center; gap: 12px; color: var(--lp-fg); font-size: 17px; line-height: 1.4; }
.lp-checks .lp-ico { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: rgb(253 172 83 / 0.12); color: var(--lp-amber); stroke-width: 2.6; }

.lp-panel { min-width: 0; overflow: hidden; border: 2px solid var(--lp-line); border-radius: var(--r-panel); background: var(--lp-panel); box-shadow: 0 40px 80px rgb(0 0 0 / 0.45); }
.lp-panel__bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.lp-panel__live { display: inline-flex; align-items: center; gap: 7px; color: var(--lp-amber); }
.lp-panel__bar > .lp-panel__live { margin-left: auto; }
.lp-panel__live > i:first-child { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: lp-pulse 1.8s ease-in-out infinite; }
@keyframes lp-pulse { 50% { opacity: 0.35; } }
.lp-panel__prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; border-bottom: 1px solid var(--lp-line); color: var(--lp-fg); font-family: var(--lp-mono); font-size: 13px; line-height: 1.5; }
.lp-panel__shot { padding: var(--p-panel); }
.lp-panel__shot img { width: 100%; border: 1px solid var(--lp-line-2); border-radius: var(--r-step); aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }
.lp-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12px; }
.lp-panel__foot b { color: var(--lp-head); font-weight: 500; }
.lp-panel__foot i:not(:first-child), .lp-panel__sep { display: inline-block; width: 1px; height: 11px; margin: 0 10px; vertical-align: middle; background: var(--lp-line-3); animation: none; }
.lp-panel__foot .lp-panel__live b { color: var(--lp-head); }
.lp-panel__foot em { font-style: normal; color: var(--lp-amber); }

.lp-panel__nav { display: inline-flex; gap: 6px; margin-left: auto; }
.lp-panel__arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--lp-line-3); border-radius: 999px; background: var(--lp-line-2); color: var(--lp-head); transition: background-color .2s ease, border-color .2s ease; }
.lp-panel__arrow:hover { background: #2e2e2e; border-color: #555; }
.lp-panel__arrow .lp-ico { width: 16px; height: 16px; }

/* the timer: one segment per stage; the running one fills over STEP_MS */
.lp-segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 14px var(--p-panel) 0; }
.lp-seg { display: block; padding: 6px 0; }
.lp-seg i { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--lp-line-2); }
.lp-seg i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--lp-amber); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.lp-seg.is-done i::after { background: rgb(253 172 83 / 0.5); }
.lp-seg:hover i { background: var(--lp-line-3); }

/* every stage stacks in one grid cell, so the panel is always as tall as the
   tallest stage and never jumps when the next one fades in */
.lp-steps { display: grid; padding: var(--p-panel); }
.lp-step { grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lp-line-2); border-radius: var(--r-step); background: var(--lp-card); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--lp-ease), transform .45s var(--lp-ease), visibility 0s .45s; }
.lp-step.is-current { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lp-step__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--lp-line); }
.lp-step__n { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--lp-line-2); border-radius: 9px; background: var(--lp-card-2); color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12px; }
.lp-step__state { width: 17px; height: 17px; color: var(--lp-dim); }
.lp-step__text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.lp-step__text b { color: var(--lp-head); font-size: 17px; font-weight: 560; line-height: 22px; }
.lp-step__text small { overflow: hidden; color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.lp-step__tag { flex: 0 0 auto; padding: 3px 9px; border: 1px solid var(--lp-line-2); border-radius: 999px; color: var(--lp-muted); font-family: var(--lp-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-step__tag:empty { display: none; }
.lp-step.is-active .lp-step__n { border-color: rgb(253 172 83 / 0.45); background: rgb(253 172 83 / 0.08); color: var(--lp-amber); }
.lp-step.is-active .lp-step__state { color: var(--lp-amber); animation: lp-spin 3s linear infinite; }
.lp-step.is-active .lp-step__tag { border-color: rgb(253 172 83 / 0.45); background: rgb(253 172 83 / 0.08); color: var(--lp-amber); }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-step__body { display: grid; gap: var(--p-step); align-items: start; padding: 16px var(--p-step) var(--p-step) 16px; }
.lp-step__tasks { display: grid; margin-left: 8px; padding: 0 0 0 24px; border-left: 1px dashed var(--lp-line-3); }
.lp-step__tasks li { position: relative; padding: 6px 0; color: var(--lp-soft); font-size: 15px; line-height: 1.4; }
.lp-step__tasks li::before { content: ''; position: absolute; left: -29px; top: 11px; width: 9px; height: 9px; border: 1.5px solid var(--lp-dim); border-radius: 50%; background: var(--lp-card); }
/* the art sits in the stage's lower corner, one step padding in */
.lp-step__art { width: 100%; border: 1px solid var(--lp-line-2); border-radius: var(--r-step-in); aspect-ratio: 800 / 664; object-fit: cover; }
.lp-step__arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) {
  .lp-step__body { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); padding-left: 18px; }
  .lp-step__body > :only-child { grid-column: 1 / -1; }
  .lp-step__arts { grid-template-columns: 1fr; }
  .lp-step__arts .lp-step__art { aspect-ratio: 16 / 10; }
}

.lp-wl { border-block: 2px solid var(--lp-line); }
.lp-wl__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.lp-wl__cta p { color: var(--lp-muted); font-family: var(--lp-mono); font-size: 12.5px; letter-spacing: 0.02em; }

@media (min-width: 1024px) {
  .lp-plan { padding-block: 140px; }
  .lp-plan__wrap { grid-template-columns: minmax(0, 470px) minmax(0, 700px); justify-content: space-between; align-items: center; gap: 64px; }
  .lp-plan__copy { text-align: left; }
  .lp-checks { margin: 0; }
  .lp-wl__cta { align-items: flex-start; }
}

/* ===========================================================================
   WHAT YOU CAN BUILD - the masonry
   =========================================================================== */
.lp-why { position: relative; isolation: isolate; overflow: hidden; }
.lp-why__glow { position: absolute; z-index: -1; pointer-events: none; }
.lp-why__glow--a { left: 50%; top: 0; width: 1100px; max-width: 100%; height: 600px; translate: -50% 0; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgb(255 94 0 / 0.06), transparent 70%); }
.lp-why__glow--b { right: 0; bottom: 0; width: 600px; height: 600px; background: radial-gradient(circle at 100% 100%, rgb(255 179 0 / 0.05), transparent 65%); }
.lp-why__title { max-width: 820px; margin: 0 auto 20px; text-align: center; }
.lp-why__lead { max-width: 620px; margin: 0 auto; text-align: center; }
.lp-why__grid { display: grid; grid-template-columns: 1fr; gap: var(--p-stage); }
.lp-why__stack { display: grid; gap: var(--p-stage); }
.lp-note { display: flex; flex-direction: column; gap: 20px; padding: 26px; border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-card); }
.lp-note--deep { background: var(--lp-inset); }
.lp-note__big { color: var(--lp-head); font-size: 20px; font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.lp-note__small { color: var(--lp-fg); font-size: 17px; font-weight: 400; line-height: 1.5; text-wrap: pretty; }
.lp-note__art { width: 100%; margin-top: auto; border: 1px solid var(--lp-line-2); border-radius: 14px; aspect-ratio: 800 / 405; object-fit: cover; }
.lp-note__art + .lp-note__by { margin-top: 0; }
.lp-note__art--square { aspect-ratio: 16 / 10; object-position: center; }
.lp-note__by { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--lp-line); }
.lp-note__by h3 { color: var(--lp-head); font-size: 17px; font-weight: 560; line-height: 22px; }
.lp-note__by a, .lp-note__by p { display: block; margin-top: 2px; color: var(--lp-muted); font-size: 14px; line-height: 20px; transition: color .2s ease; }
.lp-note__by a:hover { color: var(--lp-amber); }
.lp-note__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid var(--lp-line-2); }
@media (min-width: 640px) { .lp-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===========================================================================
   PRICING
   =========================================================================== */
.lp-pricing { position: relative; isolation: isolate; overflow: hidden; border-top: 2px solid var(--lp-line); }
.lp-pricing__head { display: flex; flex-direction: column; align-items: center; max-width: 820px; margin: 0 auto; text-align: center; }
.lp-pricing__head .lp-pill { margin-bottom: 22px; }
.lp-pricing__head .lp-h2 { margin-bottom: 20px; }
.lp-pricing__sub { margin-bottom: 40px; color: var(--lp-muted); font-size: 20px; line-height: 1.45; }
.lp-switch { display: inline-flex; align-items: center; padding: 4px; border: 1px solid var(--lp-line-3); border-radius: 999px; background: var(--lp-line-2); }
.lp-switch button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; color: var(--lp-muted); font-size: 15px; font-weight: 500; line-height: 20px; transition: background-color .25s ease, color .25s ease; }
.lp-switch button[aria-pressed="true"] { background: var(--lp-head); color: #050505; }
.lp-switch em { padding: 2px 7px; border-radius: 999px; background: rgb(122 255 120 / 0.12); color: #2eb82c; font-family: var(--lp-mono); font-size: 11px; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-switch button[aria-pressed="false"] em { color: var(--lp-good); }

.lp-table { position: relative; display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; max-width: var(--lp-wrap); margin: 56px auto 0; overflow: hidden; border: 2px solid var(--lp-line); border-radius: 32px; background: var(--lp-panel); }

.lp-plan-col { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; border-bottom: 2px solid var(--lp-line); background: var(--lp-panel); }
.lp-plan-col:last-of-type { border-bottom: 0; }
.lp-plan-col--featured { background: var(--lp-card); }
.lp-plan-col--featured::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--lp-o2), var(--lp-o3), transparent); }
/* lift the content over the glow - but not the glow itself, which must stay
   absolute or the subgrid hands it a row of its own */
.lp-plan-col > :not(.lp-plan-col__glow) { position: relative; z-index: 1; }
/* the credit picker opens downward over the button row below it */
.lp-plan-col > .lp-plan-col__top { z-index: 3; }
.lp-plan-col__top { display: flex; flex-direction: column; padding: 32px 30px 28px; }
.lp-plan-col__name { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lp-plan-col__name h3 { color: var(--lp-head); font-size: 22px; font-weight: 560; line-height: 28px; }
.lp-popular, .lp-best { padding: 3px 10px; border-radius: 999px; background: var(--lp-grad); color: #fff; font-family: var(--lp-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.lp-best { background: rgb(122 255 120 / 0.1); color: var(--lp-good); }
.lp-plan-col__desc { min-height: 46px; padding-bottom: 18px; border-bottom: 1px solid var(--lp-line-2); color: var(--lp-muted); font-size: 15px; line-height: 1.5; }
.lp-plan-col__price { padding-top: 20px; }
.lp-price { color: var(--lp-head); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lp-price__per { margin-top: 8px; color: var(--lp-muted); font-size: 15px; line-height: 20px; }
.lp-price__note { color: var(--lp-dim); font-family: var(--lp-mono); font-size: 12px; line-height: 20px; }
.lp-plan-col__fee { margin-top: auto; padding-top: 20px; }
.lp-plan-col__fee .lp-price__note { margin-top: 8px; color: var(--lp-muted); font-family: var(--lp-sans); font-size: 15px; line-height: 1.45; }
.lp-fee { color: var(--lp-head); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.lp-credits { margin-top: 26px; }
.lp-credits__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-family: var(--lp-mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.lp-credits__row span:first-child { color: var(--lp-muted); }
.lp-credits__choose { color: var(--lp-amber); }
.lp-credits__pick { position: relative; }
.lp-credits__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 10px; border: 1px solid var(--lp-line-3); border-radius: 16px; background: var(--lp-line-2); color: var(--lp-head); font-size: 15px; font-weight: 500; line-height: 20px; text-align: left; transition: border-color .2s ease, background-color .2s ease; }
.lp-credits__btn:hover, .lp-credits__btn[aria-expanded="true"] { border-color: #5a5a5a; background: #2b2b2b; }
.lp-credits__btn > span:nth-child(2) { flex: 1; min-width: 0; }
.lp-credits__btn b { font-weight: 600; }
.lp-credits__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: rgb(253 172 83 / 0.12); color: var(--lp-amber); }
.lp-credits__icon .lp-ico { width: 14px; height: 14px; }
.lp-credits__updown { width: 16px; height: 16px; color: var(--lp-muted); }
.lp-credits__list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; padding: 6px; border: 2px solid var(--lp-line); border-radius: 18px; background: #0c0c0c; box-shadow: 0 22px 44px rgb(0 0 0 / 0.55); }
.lp-credits__list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--lp-head); font-size: 15px; font-weight: 500; cursor: pointer; }
.lp-credits__list li span { color: var(--lp-muted); font-weight: 400; }
.lp-credits__list li:hover, .lp-credits__list li[aria-selected="true"] { background: var(--lp-card-2); }
.lp-credits__list li:focus-visible { outline-offset: -2px; }
.lp-credits__hint { margin-top: 10px; color: var(--lp-muted); font-size: 13px; line-height: 1.45; }
.lp-credits__hint .lp-credits__step { color: var(--lp-head); font-weight: 500; }

.lp-plan-col__cta { padding: 18px 30px; border-top: 1px solid var(--lp-line-2); }
.lp-plan-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 10px 16px; border: 1px solid var(--lp-line-3); border-radius: 999px; background: var(--lp-line-2); color: var(--lp-head); font-size: 15px; font-weight: 600; line-height: 20px; transition: background-color .2s ease, filter .2s ease, border-color .2s ease; }
.lp-plan-btn:hover { background: #2e2e2e; border-color: #555; }
.lp-plan-btn--grad { border-color: transparent; background: var(--lp-grad); color: #fff; }
.lp-plan-btn--grad:hover { background: var(--lp-grad); filter: brightness(1.08); }
.lp-plan-col__list-wrap, .lp-plan-col > .lp-plan-col__list { padding: 24px 30px 32px; border-top: 1px solid var(--lp-line-2); }
.lp-plan-col__plus { margin-bottom: 14px; color: var(--lp-head); font-size: 15px; font-weight: 500; line-height: 20px; }
.lp-plan-col__plus span { color: var(--lp-amber); }
.lp-plan-col__list { display: grid; gap: 12px; align-content: start; }
.lp-plan-col__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--lp-fg); font-size: 15px; line-height: 1.4; }
.lp-plan-col__list .lp-ico { width: 15px; height: 15px; margin-top: 3px; color: var(--lp-amber); }
.lp-plan-col__list li.is-limit { color: var(--lp-dim); }
.lp-plan-col__list li.is-limit .lp-ico { color: var(--lp-dim); }
.lp-new { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgb(253 172 83 / 0.12); color: var(--lp-amber); font-family: var(--lp-mono); font-size: 10.5px; font-style: normal; line-height: 17px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.lp-pricing__foot { max-width: 680px; margin: 40px auto 0; color: var(--lp-muted); font-size: 14px; line-height: 1.6; text-align: center; }
.lp-pricing__foot a { color: var(--lp-head); text-decoration: underline; text-decoration-color: var(--lp-line-3); text-underline-offset: 3px; }
.lp-pricing__foot a:hover { text-decoration-color: var(--lp-head); }

@media (min-width: 700px) {
  .lp-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-plan-col:nth-of-type(odd) { border-right: 2px solid var(--lp-line); }
  .lp-plan-col:nth-last-of-type(2) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .lp-table { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 40px; }
  .lp-plan-col { border-bottom: 0; border-right: 2px solid var(--lp-line); }
  .lp-plan-col:last-of-type { border-right: 0; }
}

/* ===========================================================================
   FAQ - Mastra's: tab label, one framed panel, rows with a chevron
   =========================================================================== */
.lp-faq .lp-frame { margin-top: 40px; }
.lp-faq__panel { padding: var(--p-stage); }
.lp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px; cursor: pointer; list-style: none; border-radius: var(--r-card); transition: background-color .2s ease; }
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary:hover { background: rgb(255 255 255 / 0.02); }
.lp-faq__item summary h3 { color: var(--lp-head); font-size: 19px; font-weight: 400; line-height: 1.36; letter-spacing: 0.015em; }
.lp-faq__item summary .lp-ico { width: 18px; height: 18px; color: var(--lp-soft); transition: transform .25s var(--lp-ease); }
.lp-faq__item[open] summary .lp-ico { transform: rotate(90deg); }
.lp-faq__item p { max-width: 760px; padding: 0 20px 26px; color: var(--lp-soft); font-size: 17px; line-height: 1.45; letter-spacing: 0.015em; }
@media (min-width: 768px) {
  .lp-faq__item summary { padding: 22px 28px; }
  .lp-faq__item summary h3 { font-size: 22px; }
  .lp-faq__item p { padding: 0 28px 30px; }
}

/* ===========================================================================
   CTA
   =========================================================================== */
.lp-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: max(560px, 72vh); padding: 96px var(--lp-gutter); text-align: center; }
.lp-cta__glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: 900px; max-width: 110vw; height: 480px; translate: -50% -55%; border-radius: 999px; background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.1), rgb(206 20 0 / 0.04) 45%, transparent 70%); pointer-events: none; }
.lp-cta__word { min-height: 1em; color: var(--lp-head); font-size: 58px; font-weight: 560; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.lp-cta__sub { max-width: 560px; margin: 32px auto 40px; color: var(--lp-muted); font-size: 17px; line-height: 1.5; }
.lp-cta__lead { color: var(--lp-head); }
@media (min-width: 768px) {
  .lp-cta__word { font-size: 96px; }
  .lp-cta__sub { font-size: 22px; line-height: 1.36; }
}
@media (min-width: 1024px) { .lp-cta__word { font-size: 128px; } }

/* ===========================================================================
   FOOTER - Mastra's: one framed panel on the page ground
   =========================================================================== */
.lp-foot { padding: 0 12px 12px; background: var(--lp-bg); }
.lp-foot__panel { max-width: 1340px; margin: 0 auto; padding: 44px 24px 36px; border: 2px solid var(--lp-line); border-radius: 32px; background: var(--lp-bg); }
.lp-foot__top { display: grid; gap: 36px; }
.lp-foot__logo { display: inline-flex; }
.lp-foot__logo img { height: 40px; width: auto; }
.lp-news { width: 100%; max-width: 588px; }
.lp-news__label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--lp-amber); font-family: var(--lp-mono); font-size: 13px; font-weight: 500; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-news__label i { width: 12px; height: 12px; border-radius: 50%; background: var(--lp-amber); box-shadow: 0 0 0 3px rgb(253 172 83 / 0.2); }
.lp-news__row { display: flex; gap: 8px; }
.lp-news__row input { flex: 1; min-width: 0; height: 36px; padding: 4px 14px; border: 1px solid var(--lp-line-3); border-radius: 999px; background: var(--lp-line-2); color: var(--lp-head); font: 13px var(--lp-sans); letter-spacing: 0.02em; outline: none; transition: border-color .2s ease; }
.lp-news__row input::placeholder { color: var(--lp-muted); }
.lp-news__row input:focus { border-color: #5a5a5a; }
.lp-news__btn { position: relative; overflow: hidden; height: 36px; padding: 0 18px; border: 1px solid var(--lp-line-3); border-radius: 999px; background: var(--lp-line-2); color: var(--lp-soft); font-size: 13px; font-weight: 500; transition: background-color .2s ease; }
.lp-news__btn:hover { background: #2e2e2e; }
.lp-news__btn[disabled] { cursor: default; }
.lp-news__flip { display: grid; height: 34px; }
.lp-news__flip span { grid-area: 1 / 1; display: grid; place-items: center; height: 34px; transition: transform .35s var(--lp-ease); }
.lp-news__flip span + span { transform: translateY(100%); }
.lp-news.is-done .lp-news__flip span:first-child { transform: translateY(-100%); }
.lp-news.is-done .lp-news__flip span + span { transform: none; }
.lp-news__status { margin-top: 10px; color: var(--lp-muted); font-size: 13px; }
.lp-news__status[data-tone="error"] { color: #f87171; }

.lp-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 56px; }
.lp-foot__cols h2 { margin-bottom: 20px; color: var(--lp-head); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: 0.015em; }
.lp-foot__cols a { display: block; width: fit-content; margin-bottom: 18px; color: var(--lp-muted); font-size: 15px; line-height: 16px; letter-spacing: 0.015em; transition: color .2s ease; }
.lp-foot__cols a:hover { color: var(--lp-head); }

.lp-foot__bottom { display: grid; gap: 28px; margin-top: 48px; }
.lp-foot__meta { display: grid; gap: 14px; }
.lp-foot__meta p { display: flex; align-items: center; gap: 12px; color: var(--lp-soft); font-family: var(--lp-mono); font-size: 12.5px; line-height: 12px; letter-spacing: 0.03em; text-transform: uppercase; }
.lp-foot__meta p:first-child { color: var(--lp-amber); }
.lp-foot__meta i { width: 12px; height: 12px; border-radius: 50%; background: var(--lp-amber); box-shadow: 0 0 0 3px rgb(253 172 83 / 0.2); }
.lp-foot__meta i.is-dim { background: #8d8d8d; box-shadow: 0 0 0 3px rgb(141 141 141 / 0.2); }
.lp-foot__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.lp-foot__legal a { color: var(--lp-muted); font-size: 15px; line-height: 20px; letter-spacing: 0.015em; transition: color .2s ease; }
.lp-foot__legal a:hover { color: var(--lp-head); }

@media (min-width: 768px) {
  .lp-foot { padding: 0 24px 24px; }
  .lp-foot__panel { padding: 92px 42px 72px; border-radius: 40px; }
  .lp-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 94px; }
  .lp-foot__bottom { margin-top: 72px; }
}
@media (min-width: 1024px) {
  .lp-foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .lp-foot__bottom { grid-template-columns: auto 1fr; align-items: start; }
  .lp-foot__legal { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .lp-reveal { opacity: 1; transform: none; filter: none; }
}
/* the footer live line is running text - only the dot takes the gap */
.lp-panel__foot { flex-wrap: wrap; row-gap: 6px; }
.lp-panel__foot .lp-panel__live { display: inline; }
.lp-panel__foot .lp-panel__live > i:first-child { display: inline-block; margin-right: 8px; vertical-align: middle; }

/* ---------------------------------------------------------------------------
   JOINED CARDS (two-column layout only)
   The readiness card (top right) and the QA card beneath it are one shape
   with one outline, an upside-down L with the build card sitting in its
   notch.

   How the join is drawn:
   - the top card grows down through the row gap (negative bottom margin on a
     stretched grid item) and 2px further, so it paints over the QA card's
     top border where the two meet; its own bottom border and bottom corners
     go, and so does the QA card's top-right corner, so the right-hand edges
     run as one straight stroke;
   - the inside corner is a grid-placed ::after on the stage, parked on the
     top card's lower-left. It is a square of --j + 2px painted with a
     radial gradient centred on its top-left: clear inside --j, the 2px
     stroke from --j to --j + 2px, card colour beyond. That draws the curve
     and hides the two straight border runs it replaces. The stroke sits on
     --j..--j+2 (not --j-2..--j) so it lines up with the cards' own 2px
     borders at both ends of the arc.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
  /* --j: the inside curve runs parallel to the build card's corner, one gap
     out from it - so its radius is that corner's radius plus the gap */
  .lp-build__grid { --g: var(--p-stage); --j: calc(var(--r-card) + var(--g)); }
  /* Every card is pinned to its cell. The corner piece below is an explicitly
     placed grid item on row 1, column 2, and auto-placement would otherwise
     treat that cell as taken and push the readiness card out of it. */
  .lp-build__grid > .lp-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .lp-card--join-top { grid-column: 2; grid-row: 1; }
  .lp-card--join-base { grid-row: 2; }
  .lp-build__grid > .lp-card--flip { grid-row: 3; }
  .lp-card--join-top {
    position: relative;
    z-index: 2;
    margin-bottom: calc(-1 * (var(--g) + 2px));
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .lp-card--join-base { position: relative; z-index: 1; border-top-right-radius: 0; }
  .lp-build__grid::after {
    content: '';
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    position: relative;
    z-index: 3;
    width: calc(var(--j) + 2px);
    height: calc(var(--j) + 2px);
    margin-left: calc(-1 * var(--j));
    margin-bottom: calc(-1 * (var(--g) + 2px));
    pointer-events: none;
    background: radial-gradient(circle at 0 0,
      transparent calc(var(--j) - 0.5px),
      var(--lp-line) var(--j),
      var(--lp-line) calc(var(--j) + 1.5px),
      var(--lp-card) calc(var(--j) + 2px));
  }
}

/* ---------------------------------------------------------------------------
   SECOND JOIN - QA (middle) into Ship & evolve (bottom), down the left
   The two full-width cards share their left edge as one straight stroke and
   are bridged across the left column. The gap between them becomes a groove
   open to the right that ends in a round cap at the column line.

   The bridge is a grid-placed ::before, laid over the gap on row 3 column 1:
   it runs from the QA card's bottom border to the ship card's top border
   (gap + 2 x 2px), draws the shared left stroke itself, and fills with card
   colour except for a half circle at its right edge - clear inside gap/2,
   2px of stroke, card colour beyond - which is the groove's end cap. At the
   cap's top and bottom the stroke lands exactly on the two cards' borders.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .lp-card--join-base { border-bottom-left-radius: 0; }
  .lp-build__grid > .lp-card--flip { position: relative; z-index: 1; border-top-left-radius: 0; }
  .lp-build__grid::before {
    content: '';
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    position: relative;
    z-index: 3;
    height: calc(var(--g) + 4px);
    margin-top: calc(-1 * (var(--g) + 2px));
    border-left: 2px solid var(--lp-line);
    pointer-events: none;
    background: radial-gradient(circle at 100% 50%,
      transparent calc(var(--g) / 2 - 0.5px),
      var(--lp-line) calc(var(--g) / 2),
      var(--lp-line) calc(var(--g) / 2 + 1.5px),
      var(--lp-card) calc(var(--g) / 2 + 2px));
  }
}

/* ---------------------------------------------------------------------------
   AMBIENCE
   The ground lifts a step, and each section gets a warm pool of light so the
   page reads as lit rather than flat black. All glows are radial and fade to
   nothing, so no edge ever shows.
   ------------------------------------------------------------------------ */
.lp { --lp-bg: #0a0a0a; }
.lp-apps, .lp-build, .lp-pricing, .lp-faq { position: relative; isolation: isolate; }
.lp-apps::before, .lp-build::before, .lp-faq::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lp-apps::before {
  background:
    radial-gradient(ellipse 45% 28% at 18% 6%, rgb(255 94 0 / 0.09), transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 70%, rgb(255 179 0 / 0.05), transparent 70%);
}
.lp-build::before {
  background:
    radial-gradient(ellipse 50% 22% at 50% 4%, rgb(255 94 0 / 0.1), transparent 70%),
    radial-gradient(ellipse 35% 30% at 6% 60%, rgb(206 20 0 / 0.06), transparent 70%),
    radial-gradient(ellipse 35% 28% at 94% 88%, rgb(255 179 0 / 0.05), transparent 70%);
}
.lp-plan__glow { background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.14), rgb(206 20 0 / 0.05) 45%, transparent 68%); }
.lp-plan::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 45% at 12% 30%, rgb(255 179 0 / 0.05), transparent 70%); }
.lp-why__glow--a { background: radial-gradient(ellipse 50% 60% at 50% 0%, rgb(255 94 0 / 0.1), transparent 70%); }
.lp-why__glow--b { background: radial-gradient(circle at 100% 100%, rgb(255 179 0 / 0.08), transparent 65%); }
.lp-pricing::after { content: ''; position: absolute; left: 50%; bottom: 8%; z-index: -1; width: 1100px; max-width: 100%; height: 520px; translate: -50% 0; pointer-events: none; background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.08), transparent 68%); }
.lp-faq::before { background: radial-gradient(ellipse 45% 35% at 50% 20%, rgb(255 94 0 / 0.07), transparent 70%); }
.lp-cta__glow { background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.16), rgb(206 20 0 / 0.06) 45%, transparent 70%); }

/* ===========================================================================
   THE PROMPT ARC - ported from the original lander
   The section is taller than the screen; its headline is sticky at the
   vertical centre, so it holds still while the two prompt columns travel
   past it. The bow, scale and fade on each prompt are set per frame in
   lander.js from its distance to the viewport's centre line.
   =========================================================================== */
/* overflow: clip, not hidden - hidden makes the section a scroll box, and a
   sticky child then pins to it instead of to the page, i.e. never pins */
.lp-arc { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; min-height: 120svh; background: var(--lp-bg); }
.lp-arc::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 38% 30% at 50% 50%, rgb(255 94 0 / 0.1), transparent 70%); }
.lp-arc__center { position: sticky; top: 50vh; translate: 0 -50%; z-index: 3; display: grid; justify-items: center; gap: 22px; padding-inline: var(--lp-gutter); text-align: center; }
.lp-arc__h2 { color: var(--lp-head); font-size: 44px; font-weight: 560; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.lp-arc__h2 span { background: linear-gradient(90deg, var(--lp-head) 0%, var(--lp-o3) 55%, var(--lp-o2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.lp-arc__claims { display: flex; flex-direction: column; gap: 6px; color: var(--lp-soft); font-size: 15px; line-height: 1.4; }
.lp-arc__claims li { position: relative; }

.lp-arc__col { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 42vw; color: var(--lp-muted); font-family: var(--lp-mono); font-size: 9.5px; white-space: nowrap; pointer-events: none; }
.lp-arc__col span { display: block; }
.lp-arc.is-live .lp-arc__col span { will-change: transform, opacity; }
.lp-arc__col--left { right: calc(50% + 18px); align-items: flex-end; text-align: right; }
.lp-arc__col--right { left: calc(50% + 18px); align-items: flex-start; text-align: left; }
.lp-arc__col--left span { transform-origin: right center; }
.lp-arc__col--right span { transform-origin: left center; }
/* outer-edge fade plus a dissolve before the floor, so overflow never cuts a
   prompt on a hard line */
.lp-arc__col--left {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.lp-arc__col--right {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 22%), linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  mask-image: linear-gradient(270deg, transparent 0, #000 22%), linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.lp-arc__fade { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.lp-arc__fade--top { top: 0; height: 26vh; background: linear-gradient(180deg, var(--lp-bg), transparent); }
.lp-arc__fade--bottom { bottom: 0; height: clamp(8rem, 28vh, 16rem); background: linear-gradient(180deg, transparent 0%, var(--lp-bg) 88%); }

/* on a phone the columns pass behind the headline - a soft pool of ground
   colour under the text keeps it readable while the prompts run past */
@media (max-width: 760px) {
  .lp-arc__center::before { content: ''; position: absolute; inset: -40px -20px; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--lp-bg) 55%, transparent 100%); }
}
@media (min-width: 761px) {
  .lp-arc { min-height: 150svh; }
  .lp-arc__h2 { font-size: 64px; }
  .lp-arc__claims { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 28px; font-size: 16px; }
  /* written as an escape: the original's literal middot was saved in the
     wrong encoding and rendered as "·" */
  .lp-arc__claims li + li::before { content: '\00B7'; position: absolute; left: -16px; color: var(--lp-dim); }
  .lp-arc__col { gap: 22px; max-width: none; font-size: clamp(11px, 1.05vw, 14.5px); }
  .lp-arc__col--left { right: calc(50% + 8rem); }
  .lp-arc__col--right { left: calc(50% + 8rem); }
}
@media (min-width: 1101px) {
  .lp-arc__h2 { font-size: 80px; }
  .lp-arc__col--left { right: calc(50% + 16rem); }
  .lp-arc__col--right { left: calc(50% + 16rem); }
}

/* ===========================================================================
   DE-SLOP PASS
   Checked against three published catalogues of AI-design tells - Impeccable
   (impeccable.style/slop), avoid-ai-design (github.com/funboy322) and
   Developers Digest's 16 patterns. What each rule below removes is named in
   its comment; the rules for the removed markup (fake window chrome, fake
   prompt bar and action button, sparkle icons, chevron columns, mock boxes
   nested inside cards) were deleted outright above.
   =========================================================================== */

/* Mono only where the text is literally something a person types: the
   prompts in the arc. Everywhere else it was a costume - "tracked uppercase
   mono labels" is the most-cited second-order tell. --lp-mono now resolves
   to the text face, so every former mono label reads as plain text. */
.lp {
  --lp-code: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lp-mono: var(--lp-sans);
}
.lp-arc__col { font-family: var(--lp-code); }

/* No all-caps labels, no tracked-out meta text. Sentence case, real sizes -
   nothing under 13px. */
.lp-pill, .lp-logos__label, .lp-app__open, .lp-panel__bar, .lp-step__tag, .lp-credits__row,
.lp-popular, .lp-best, .lp-new, .lp-switch em, .lp-news__label, .lp-foot__meta p,
.lp-price__note, .lp-hero__hint {
  text-transform: none;
  letter-spacing: normal;
}
.lp-logos__label { font-size: 15px; color: var(--lp-muted); }
.lp-logos__label b { color: var(--lp-head); font-weight: 500; }
.lp-hero__hint { font-size: 14px; color: var(--lp-muted); }
.lp-app__open { font-size: 13px; }
.lp-step__n { font-size: 13px; font-variant-numeric: tabular-nums; }
.lp-step__text small { font-size: 14px; }
.lp-step__tag { font-size: 13px; }
.lp-credits__row { font-size: 13px; font-weight: 500; }
.lp-popular, .lp-best { font-size: 13px; font-weight: 500; }
.lp-new { font-size: 12px; font-weight: 600; }
.lp-switch em { font-size: 12.5px; font-weight: 600; }
.lp-price__note { font-size: 14px; color: var(--lp-muted); }
.lp-news__label { font-size: 15px; font-weight: 500; color: var(--lp-head); }
.lp-foot__meta p { font-size: 14px; color: var(--lp-muted); }

/* Contrast: #5c5c5c on #0b0b0b is under 3:1. Text that carried it goes to
   the muted grey (about 6.5:1); the dim tone stays for rules and icons only. */
.lp-plan-col__list li.is-limit, .lp-plan-col__list li.is-limit .lp-ico { color: var(--lp-muted); }

/* No gradient text. The headline is one solid colour; the orange lives in
   the buttons and the hero light instead of being painted into letters. */
.lp-hero__grad, .lp-arc__h2 span { background: none; color: var(--lp-head); animation: none; padding-bottom: 0; }

/* Buttons: one solid brand orange with dark text (5.3:1), no sunset ring,
   no arrow welded on the end. */
.lp-ring-btn { padding: 0; background: none; }
.lp-ring-btn__face { background: var(--lp-accent); color: #1a0e06; }
.lp-ring-btn:hover .lp-ring-btn__face { background: #ff7424; }
.lp-plan-btn--grad, .lp-plan-btn--grad:hover { background: var(--lp-accent); color: #1a0e06; filter: none; }
.lp-plan-btn--grad:hover { background: #ff7424; }
.lp-popular { background: rgb(255 94 0 / 0.14); color: var(--lp-amber); }
.lp-plan-col--featured::before { content: none; }

/* Letter-spacing: display sizes were pulled tight enough to crowd letters. */
.lp-arc__h2 { letter-spacing: -0.02em; }
.lp-logos__track span { letter-spacing: -0.02em; }
@media (min-width: 1024px) { .lp-cta__word { letter-spacing: -0.02em; } }

/* Light: no halo parked behind a headline ("radial halo on a dark page" and
   "soft spotlight behind content"). The ambience stays, moved off-axis so it
   lights the section rather than spotlighting a line of text. */
.lp-arc::before { background: radial-gradient(ellipse 30% 40% at 8% 80%, rgb(255 94 0 / 0.07), transparent 70%), radial-gradient(ellipse 30% 40% at 92% 20%, rgb(255 179 0 / 0.05), transparent 70%); }
.lp-arc__center::before { content: none; }
/* The wash moved off-centre (12%), so its box must span the whole section:
   inside the old centred 1100px box the ellipse ran past the box's left edge
   and ended in a hard vertical line. It also fades in from the top, so it is
   not brightest right on the seam with the section above. */
.lp-why__glow--a {
  left: 0; width: 100%; max-width: none; translate: none;
  background: radial-gradient(ellipse 40% 60% at 12% 0%, rgb(255 94 0 / 0.08), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 180px);
  mask-image: linear-gradient(to bottom, transparent, #000 180px);
}
.lp-faq::before { background: radial-gradient(ellipse 35% 40% at 88% 12%, rgb(255 94 0 / 0.06), transparent 70%); }
.lp-cta__glow { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; height: 70%; translate: none; border-radius: 0; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgb(255 94 0 / 0.12), transparent 70%); }

/* Motion with no meaning: pulsing and spinning status marks, image zoom on
   hover, and an identical blur-up entrance on every block. Content is simply
   visible - nothing waits on a script to appear. */
.lp-step.is-active .lp-step__state { animation: none; }
.lp-app:hover { transform: none; }
.lp-app:hover .lp-app__shot img { transform: none; }
.js .lp-reveal { opacity: 1; transform: none; filter: none; transition: none; }

/* One edge per surface: panels had a hairline AND a wide shadow. */
.lp-panel { box-shadow: none; }

/* ---- workspace cards: a heading, a sentence, the real screenshot ---------- */
.lp-card__title { margin-bottom: 10px; color: var(--lp-head); font-size: 22px; font-weight: 560; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.lp-card__title--wide { font-size: 26px; line-height: 1.15; }
.lp-card__text { max-width: 60ch; color: var(--lp-muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
/* the screenshot sits straight in the card - no box around it - one card
   padding in, so its corner is the card's minus that padding */
.lp-card__shot { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; border: 1px solid var(--lp-line-2); border-radius: var(--r-mock); }
.lp-card__stage--wide { padding: 0 var(--p-card) var(--p-card); }

/* QA: one plain list of checks with their result, not two mock columns and
   a row of arrows */
.lp-qa { display: block; padding: 0 var(--p-card) var(--p-card); }
.lp-qa__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 12px; color: var(--lp-head); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.lp-qa__head span { color: var(--lp-muted); font-weight: 400; font-size: 14px; }
.lp-qa__list { overflow: hidden; border: 1px solid var(--lp-line-2); border-radius: var(--r-mock); background: var(--lp-inset); }
.lp-qa__list li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--lp-line); color: var(--lp-fg); font-size: 15px; }
.lp-qa__list li:first-child { border-top: 0; }
.lp-qa__list b { color: var(--lp-good); font-size: 14px; font-weight: 500; }
.lp-qa__foot { margin: 12px 4px 0; color: var(--lp-muted); font-size: 14px; }
@media (min-width: 768px) {
  .lp-card__title--wide { font-size: 32px; }
  .lp-card--wide .lp-qa { display: block; padding: var(--p-card) var(--p-card) var(--p-card) 0; }
  .lp-card--flip .lp-card__stage--wide { padding: var(--p-card) 0 var(--p-card) var(--p-card); }
}

/* ---- engine panel: a title, the prompt as a sentence, no costume ---------- */
.lp-panel__title { color: var(--lp-head); font-size: 15px; font-weight: 500; }
.lp-panel__prompt { font-size: 15px; color: var(--lp-fg); }
.lp-panel__label { color: var(--lp-muted); font-size: 14px; }
.lp-panel__foot { font-size: 13px; }
.lp-panel__foot .lp-panel__live { color: var(--lp-muted); }

/* ---- white label: the real console, framed once --------------------------- */
.lp-panel--shot { padding: var(--p-panel); }
.lp-panel--shot img { width: 100%; border: 1px solid var(--lp-line-2); border-radius: var(--r-step); aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }

/* audit follow-ups: nothing under 13px; the saving badge on the white
   (active) switch was green on near-white at 2.3:1 - a dark green there */
.lp-wl__cta p { font-size: 14px; letter-spacing: normal; }
.lp-new { font-size: 13px; }
.lp-switch em { font-size: 13px; }
.lp-switch button[aria-pressed="true"] em { background: rgb(21 128 61 / 0.12); color: #166534; }
@media (max-width: 760px) { .lp-arc__col { font-size: 11px; } }


/* ===========================================================================
   ILLUSTRATIONS - drawn the way mastra.ai draws its hero panels
   Inline SVG, not screenshots or video: neutral greys (#171717 panels,
   #242424 tracks, #424242 placeholder bars, #2b2b2b connectors), real words
   only where they carry meaning, and one accent per meaning - orange for
   actions, amber for attention, green for passed. Each row is a
   <g data-frame style="--i:n">; when the illustration scrolls into view it
   gets data-state="in" and the rows drop into place 90ms apart, with
   Mastra's own curve and distance (8px, 0.8s, cubic-bezier(.16,1,.3,1)).
   The card behind it is Mastra's too: a corner-lit radial fill and a 1px
   edge that fades out across the card.
   =========================================================================== */
.lp-ill {
  position: relative;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: var(--r-mock);
  background:
    radial-gradient(86% 69% at 2% 1%, #171717 27%, #0b0b0b 88%) padding-box,
    linear-gradient(135deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 55%) border-box;
}
.lp-ill--panel { border-radius: var(--r-step); }
.lp-ill svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--lp-sans); }
.lp-ill text { letter-spacing: 0.01em; }
.js .lp-ill g[data-frame] { opacity: 0; }
.js .lp-ill[data-state="in"] g[data-frame] {
  animation: lp-row-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes lp-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lp-ill g[data-frame] { opacity: 1; animation: none; }
}
.lp-card__stage--end { padding: 0 var(--p-card) var(--p-card); }
@media (min-width: 768px) {
  .lp-card--wide .lp-card__stage--end { padding: var(--p-card) var(--p-card) var(--p-card) 0; }
}
@media (max-width: 767px) { .lp-ill { padding: 14px; } }

/* build plan: each step's illustration sits beside its task list, one step
   padding in from the step card's corner */
.lp-ill--step { padding: 14px; border-radius: var(--r-step-in); }
.lp-step__tasks { align-self: start; }
@media (prefers-reduced-motion: reduce) { .js .lp-ill--step g[data-frame] { opacity: 1; } }

/* ===========================================================================
   LIVE PREVIEW DEMO - a scripted chat that edits the preview beside it
   HTML rather than SVG so chat text wraps. Every size is in --u, 1/560th of
   the illustration's width (a container query unit), so it keeps the SVG
   illustrations' proportions at every screen size.
   =========================================================================== */
.lp-ill--live { container-type: inline-size; }
.lp-live { --u: calc(100cqw / 560); position: relative; aspect-ratio: 560 / 373; font-family: var(--lp-sans); letter-spacing: 0.01em; }
.lp-live__chat { position: absolute; left: 0; top: 0; width: calc(236 * var(--u)); height: 100%; }
.lp-live__thread {
  position: absolute; inset: 0 0 calc(92 * var(--u)) 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: calc(12 * var(--u));
  overflow: hidden; transition: opacity .45s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(44 * var(--u)));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(44 * var(--u)));
}
.lp-live__thread.is-clearing { opacity: 0; }
.lp-live__msg { flex: 0 0 auto; color: #ccc; font-size: calc(12.5 * var(--u)); line-height: 1.45; animation: lp-row-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.lp-live__msg p { margin: 0; }
.lp-live__msg--user { align-self: flex-end; max-width: calc(220 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: linear-gradient(90deg, #1d1d1d, #171717); }
.lp-live__who { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-bottom: calc(4 * var(--u)) !important; color: #939393; font-size: calc(12 * var(--u)); font-weight: 500; }
.lp-live__who i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #ff5e00; }
.lp-live__files { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)) !important; }
.lp-live__files span { padding: calc(4 * var(--u)) calc(10 * var(--u)); border: calc(1.5 * var(--u)) solid #242424; border-radius: 999px; background: #171717; color: #939393; font-size: calc(11.5 * var(--u)); }
/* while AIWA works: a line of light running along a bar, the same streaming
   mark the static illustration used */
.lp-live__stream { display: block; width: calc(120 * var(--u)); height: calc(9 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, #262626 0%, #262626 30%, #fdac53 60%, #262626 90%); background-size: 250% 100%; animation: lp-stream 1.1s linear infinite; }
@keyframes lp-stream { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.lp-live__composer { position: absolute; left: 0; right: 0; bottom: 0; height: calc(78 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(1.5 * var(--u)) solid #242424; border-radius: calc(16 * var(--u)); background: #171717; }
.lp-live__input { margin: 0; padding-right: calc(28 * var(--u)); color: #f0f0f0; font-size: calc(12.5 * var(--u)); line-height: 1.45; }
.lp-live__caret { display: none; width: calc(1.5 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(1 * var(--u)); vertical-align: -0.15em; background: #fdac53; animation: lp-caret 1s steps(1) infinite; }
.lp-live__composer.is-typing .lp-live__caret { display: inline-block; }
@keyframes lp-caret { 50% { opacity: 0; } }
.lp-live__ph { display: none; color: #939393; }
.lp-live__composer.is-empty .lp-live__ph { display: inline; }
.lp-live__send { position: absolute; right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border: calc(1.5 * var(--u)) solid #2b2b2b; border-radius: 50%; background: #1c1c1c; color: #f0f0f0; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.lp-live__send svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.lp-live__send.is-ready { border-color: transparent; background: #ff5e00; color: #1a0e06; }

.lp-live__preview { position: absolute; left: calc(256 * var(--u)); top: 0; width: calc(304 * var(--u)); height: 100%; overflow: hidden; border: calc(1.5 * var(--u)) solid #242424; border-radius: calc(16 * var(--u)); background: #111; transition: background .9s ease; }
.lp-live__preview:is([data-step="2"], [data-step="3"], [data-step="4"]) { background: radial-gradient(ellipse 90% 55% at 30% 30%, rgb(255 94 0 / 0.14), transparent 70%), #111; }
.lp-live__bar { display: flex; align-items: center; justify-content: space-between; height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid #1c1c1c; }
.lp-live__url { display: flex; align-items: center; width: calc(196 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #1c1c1c; color: #939393; font-size: calc(11.5 * var(--u)); }
.lp-live__status { display: flex; align-items: center; gap: calc(6 * var(--u)); color: #939393; font-size: calc(11.5 * var(--u)); }
.lp-live__status i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #7aff78; }
.lp-live__page { padding: calc(20 * var(--u)) calc(20 * var(--u)) 0; }
.lp-live__h { margin: 0; color: #f0f0f0; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1.17; transition: color .9s ease; }
.lp-live__h--mute { color: #939393; }
.lp-live__preview:is([data-step="2"], [data-step="3"], [data-step="4"]) .lp-live__h:not(.lp-live__h--mute) { color: #ffe0c2; }
.lp-live__sub { position: relative; height: calc(7 * var(--u)); margin-top: calc(12 * var(--u)); }
.lp-live__line { display: block; width: calc(200 * var(--u)); height: calc(7 * var(--u)); border-radius: 999px; background: #2b2b2b; transition: opacity .5s ease; }
.lp-live__line--short { width: calc(150 * var(--u)); margin-top: calc(7 * var(--u)); }
.lp-live__date { position: absolute; left: 0; top: calc(-5 * var(--u)); color: #fdac53; font-size: calc(11.5 * var(--u)); font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity .5s ease; }
.lp-live__preview:is([data-step="2"], [data-step="3"], [data-step="4"]) .lp-live__sub .lp-live__line { opacity: 0; }
.lp-live__preview:is([data-step="2"], [data-step="3"], [data-step="4"]) .lp-live__date { opacity: 1; }
.lp-live__btns { display: flex; gap: calc(8 * var(--u)); margin-top: calc(20 * var(--u)); }
.lp-live__btn { display: inline-grid; place-items: center; height: calc(26 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #ff5e00; color: #1a0e06; font-size: calc(11.5 * var(--u)); font-weight: 600; }
.lp-live__btn--ghost { border: calc(1.5 * var(--u)) solid #2b2b2b; background: transparent; color: #ccc; font-weight: 400; transition: border-color .5s ease, color .5s ease; }
.lp-live__btn--ghost b { grid-area: 1 / 1; font-weight: inherit; transition: opacity .4s ease; }
.lp-live__btn--ghost b + b { opacity: 0; }
.lp-live__preview:is([data-step="3"], [data-step="4"]) .lp-live__btn--ghost { border-color: #fdac53; color: #fdac53; }
.lp-live__preview:is([data-step="3"], [data-step="4"]) .lp-live__btn--ghost b:first-child { opacity: 0; }
.lp-live__preview:is([data-step="3"], [data-step="4"]) .lp-live__btn--ghost b + b { opacity: 1; }
.lp-live__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; gap: calc(8 * var(--u)); height: calc(94 * var(--u)); margin-top: calc(18 * var(--u)); }
.lp-live__tiles i { border-radius: calc(12 * var(--u)); background: linear-gradient(#3a2415, #1a1410); transition: background .9s ease; }
.lp-live__tiles i:nth-child(2) { background: linear-gradient(#262626, #161616); }
.lp-live__tiles i:nth-child(3) { background: linear-gradient(#33200f, #181310); }
.lp-live__tiles i:nth-child(4) { background: linear-gradient(#2d1f14, #16110d); }
.lp-live__tiles i:nth-child(5) { background: linear-gradient(#3b2413, #1b120b); }
.lp-live__tiles i:nth-child(6) { background: linear-gradient(#40271a, #1c140f); }
.lp-live__tiles i:nth-child(n+4) { display: none; }
.lp-live__preview:is([data-step="2"], [data-step="3"], [data-step="4"]) .lp-live__tiles i:nth-child(2) { background: linear-gradient(#40271a, #1c140f); }
.lp-live__preview[data-step="4"] .lp-live__tiles { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.lp-live__preview[data-step="4"] .lp-live__tiles i { border-radius: calc(9 * var(--u)); }
.lp-live__preview[data-step="4"] .lp-live__tiles i:nth-child(n+4) { display: block; animation: lp-row-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.lp-live__chips { display: flex; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.lp-live__chips span { display: inline-flex; align-items: center; height: calc(24 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #1c1c1c; color: #939393; font-size: calc(11 * var(--u)); }
/* where an edit lands: one amber ring that opens and fades */
.lp-live .is-flash { animation: lp-flash 1.2s ease-out; }
@keyframes lp-flash {
  0% { box-shadow: 0 0 0 calc(2 * var(--u)) rgb(253 172 83 / 0.8); }
  100% { box-shadow: 0 0 0 calc(8 * var(--u)) rgb(253 172 83 / 0); }
}
.lp-live [data-live-tiles].is-flash, .lp-live .lp-live__h.is-flash, .lp-live [data-live-date].is-flash { border-radius: calc(10 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
  .lp-live__msg, .lp-live__stream, .lp-live .is-flash { animation: none; }
}
/* A phone card is ~280px wide: side by side, the chat text would render at
   about 6px. Stack the chat over the preview instead, both near full size. */
@container (max-width: 440px) {
  .lp-live { --u: calc(100cqw / 304); display: flex; flex-direction: column; gap: calc(12 * var(--u)); aspect-ratio: auto; }
  .lp-live__chat { position: relative; width: 100%; height: calc(190 * var(--u)); }
  .lp-live__thread { bottom: calc(70 * var(--u)); }
  .lp-live__composer { height: calc(58 * var(--u)); }
  .lp-live__preview { position: relative; left: 0; width: 100%; height: calc(372 * var(--u)); }
}
/* The demo's buttons wear the original AIWA site's buttons (base.css .btn),
   so the page AIWA "built" carries the product's own call to action: the
   sunset primary with its edge lights, and the tactile charcoal secondary.
   Shadow lengths are in --u so they scale with the drawing. */
.lp-live__btn {
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--app-sunset-1), var(--app-sunset-2));
  color: var(--app-primary-fg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 calc(-10 * var(--u)) calc(18 * var(--u)) calc(-10 * var(--u)) rgb(255 190 80 / 0.55),
    0 1px 2px rgb(0 0 0 / 0.4);
}
.lp-live__btn--ghost {
  border-color: transparent;
  background: linear-gradient(180deg, var(--btn-secondary-top) 0%, var(--btn-secondary-mid) 48%, var(--btn-secondary-bottom) 100%);
  color: #f0f0f0; font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--btn-secondary-rim),
    0 1px 2px rgb(0 0 0 / 0.45),
    0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgb(0 0 0 / 0.55);
}
/* once the change lands, only the label turns amber; the fill stays the
   original secondary */
.lp-live__preview:is([data-step="3"], [data-step="4"]) .lp-live__btn--ghost { border-color: transparent; color: #fdac53; }

/* ===========================================================================
   BUTTONS - the original AIWA site's, ported from its base.css .btn
   Primary (nav, White Label, closing CTA, the featured plan, the hero send
   once there is text): the sunset fill from #ffb300 to #ff5e00, a white rim
   light on top and a warm glow pooled along the bottom, dark ink. Secondary
   (View all, the other plans, Subscribe): the tactile charcoal pill. Colours
   are the --app-* and --btn-secondary-* tokens in tokens.css, which sample
   the product app, so the site and the app share one button.
   Hover is a brightness step with no transition, as in the app: its
   transition-colors list leaves filter out, so the change lands on the same
   frame as the pointer. Don't add a filter transition.
   Sizes stay the lander's own; only the surface is the original's.
   This replaces the flat orange from the de-slop pass, at the owner's request.
   =========================================================================== */
.lp-ring-btn__face,
.lp-plan-btn--grad,
.lp-plan-btn--grad:hover,
.lp-prompt.has-text .lp-prompt__send {
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--app-sunset-1), var(--app-sunset-2));
  color: var(--app-primary-fg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 -10px 18px -10px rgb(255 190 80 / 0.55),
    0 1px 2px rgb(0 0 0 / 0.4);
  transition: color var(--app-dur-colors) var(--ease-out), box-shadow var(--app-dur-colors) var(--ease-out), gap var(--app-dur-colors) var(--ease-out);
}
.lp-ring-btn__face, .lp-plan-btn--grad { font-weight: 600; }
.lp-ring-btn:hover .lp-ring-btn__face,
.lp-plan-btn--grad:hover,
.lp-prompt.has-text .lp-prompt__send:hover { background: linear-gradient(180deg, var(--app-sunset-1), var(--app-sunset-2)); filter: brightness(1.05); }
.lp-ring-btn:active .lp-ring-btn__face,
.lp-plan-btn--grad:active,
.lp-prompt.has-text .lp-prompt__send:active { filter: brightness(0.97); }
.lp-ring-btn:focus-visible { outline: none; }
.lp-ring-btn:focus-visible .lp-ring-btn__face,
.lp-plan-btn--grad:focus-visible,
.lp-prompt.has-text .lp-prompt__send:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--app-ring),
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 -10px 18px -10px rgb(255 190 80 / 0.55),
    0 1px 2px rgb(0 0 0 / 0.4);
}

.lp-ghost-btn,
.lp-plan-btn:not(.lp-plan-btn--grad),
.lp-news__btn {
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--btn-secondary-top) 0%, var(--btn-secondary-mid) 48%, var(--btn-secondary-bottom) 100%);
  color: var(--cream-050);
  box-shadow:
    inset 0 1px 0 var(--btn-secondary-rim),
    0 1px 2px rgb(0 0 0 / 0.45),
    0 6px 14px -6px rgb(0 0 0 / 0.55);
  transition: color var(--app-dur-colors) var(--ease-out), box-shadow var(--app-dur-colors) var(--ease-out);
}
.lp-ghost-btn:hover,
.lp-plan-btn:not(.lp-plan-btn--grad):hover,
.lp-news__btn:hover {
  border-color: transparent;
  background: linear-gradient(180deg, var(--btn-secondary-top) 0%, var(--btn-secondary-mid) 48%, var(--btn-secondary-bottom) 100%);
  filter: brightness(1.08);
}
.lp-ghost-btn:active,
.lp-plan-btn:not(.lp-plan-btn--grad):active,
.lp-news__btn:active { filter: brightness(0.96); }
.lp-ghost-btn:focus-visible,
.lp-plan-btn:not(.lp-plan-btn--grad):focus-visible,
.lp-news__btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--app-ring),
    inset 0 1px 0 var(--btn-secondary-rim),
    0 1px 2px rgb(0 0 0 / 0.45),
    0 6px 14px -6px rgb(0 0 0 / 0.55);
}

/* The original's arrow: two arrows side by side in a clipped box. On a
   mouse it is hidden at rest and opens with the gap on hover, then the
   first arrow slides out as the second slides in. Touch has no hover, so
   there it stays visible and the direction cue is never missing. */
.lp-ring-btn__face { gap: 0.6rem; }
.lp-btn__label { position: relative; white-space: nowrap; }
.lp-btn__arrow { position: relative; width: 0.9rem; height: 0.9rem; overflow: hidden; flex: 0 0 auto; }
.lp-btn__arrow > span { display: flex; width: 200%; height: 100%; transition: transform var(--app-dur-colors) var(--ease-out); }
.lp-btn__arrow .lp-ico,
.lp-ring-btn:hover .lp-ring-btn__face .lp-btn__arrow .lp-ico { flex: 0 0 50%; width: 50%; height: 100%; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .lp-ring-btn__face { gap: 0; }
  .lp-btn__arrow { width: 0; opacity: 0; transition: width var(--app-dur-colors) var(--ease-out), opacity var(--app-dur-colors) var(--ease-out); }
  .lp-ring-btn:is(:hover, :focus-visible) .lp-ring-btn__face { gap: 0.6rem; }
  .lp-ring-btn:is(:hover, :focus-visible) .lp-btn__arrow { width: 0.9rem; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lp-ring-btn:is(:hover, :focus-visible) .lp-btn__arrow > span { transform: translate(-50%, 0); }
}

/* ===========================================================================
   TOP NAV - mastra.ai's header, measured off the live site
   A bar across the full width (fill from the aiwa lander backup, below).
   Inside, a 1328px row with 38px side
   padding, so at 1440 the logo lands on the same 94px line as the page.
   Links are 15px/500 grey pills, 38px tall; the dropdown triggers carry a
   6px dot at 60% that goes full on hover or when open. Login is Mastra's
   gradient-stroke style (kept for the phone menu's Login); Start Building
   keeps the original AIWA surface at Mastra's 38px size. No Login in the bar.
   The links sit on the bar's centre, and the dropdown hangs from the
   centre too, off the bar's bottom rule, as one drawn shape: 64px
   inverse fillets into the bar, 40px corners at the bottom (the path is
   built in lander.js from the content size, like Mastra's). It opens by
   height over .48s cubic-bezier(.32,.72,0,1) and closes on
   cubic-bezier(.32,0,.67,0); switching menus slides the content 24px.
   Under 1024px: logo and a two-line toggle only; the menu fills the screen
   below the bar, opens instantly (as Mastra's does), and ends with the two
   buttons at full width.
   =========================================================================== */
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-nav {
  position: fixed; inset: 0 0 auto; z-index: 8000;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--ink-900) 80%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.015em;
}
/* The bar's fill is the aiwa lander backup's (the one measured off Dispatch):
   the warm page ground #1a1714 at 80% over an 8px blur, with a 1px --line
   rule and no shadow. The dropdown shell and the open phone menu can't blur
   in their own shape, so they take the same colour made solid over the
   page (--lp-page), which reads as the same surface. */
.lp-nav { --nav-solid: color-mix(in srgb, var(--ink-900) 80%, var(--lp-page)); }
.lp-nav.is-menu { background: var(--nav-solid); }
.lp-nav__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1328px; min-height: 58px; margin-inline: auto; padding: 12px 28px;
}
.lp-nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.lp-nav__logo img { width: auto; height: 22px; }
.lp-nav__links, .lp-nav__end, .lp-dd { display: none; }

.lp-nav__menu { display: grid; place-items: center; flex: 0 0 auto; padding: 8px; color: #d9d9d9; }
.lp-nav__menu svg { display: block; }
.lp-nav__menu rect { transform-origin: center; transition: transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.lp-nav__menu rect:first-child { transform: translateY(-3.5px); }
.lp-nav__menu rect:last-child { transform: translateY(3.5px); }
.lp-nav__menu[aria-expanded="true"] rect:first-child { transform: rotate(45deg); }
.lp-nav__menu[aria-expanded="true"] rect:last-child { transform: rotate(-45deg); }
.lp-nav__menu:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* Mastra's secondary nav button: #1c1c1c fill inside a 1.5px edge that
   fades from #383838 at the top to nothing at the bottom. */
.lp-stroke-btn {
  --fill: #1c1c1c; --edge: #383838;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 38px; padding: 0 17px; border: 1.5px solid transparent; border-radius: 999px;
  background: linear-gradient(var(--fill), var(--fill)) padding-box, linear-gradient(180deg, var(--edge) 0%, rgb(43 43 43 / 0) 100%) border-box;
  color: #ccc; font-size: 14.5px; font-weight: 500; line-height: 1; letter-spacing: 0.025em; white-space: nowrap;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-stroke-btn:hover { --fill: #242424; --edge: #464646; }
.lp-stroke-btn:active { transform: scale(0.98); }
.lp-stroke-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-ring-btn--nav .lp-ring-btn__face { height: 38px; padding: 0 17px; font-size: 14.5px; line-height: 1; letter-spacing: 0.025em; }

/* ---- phone / tablet menu ---- */
.lp-mobile { display: none; }
.lp-nav.is-menu .lp-mobile {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  height: calc(100vh - 59px); height: calc(100dvh - 59px); overflow: hidden; background: transparent;
}
:where(.lp-mobile) ul { margin: 0; padding: 0; list-style: none; }
.lp-mobile__list { display: flex; flex-direction: column; gap: 32px; flex: 1 1 auto; min-height: 0; padding: 24px 0; overflow-y: auto; overscroll-behavior: contain; }
.lp-mobile__head { display: block; padding: 0 12px; color: #939393; font-size: 18px; font-weight: 500; line-height: 28px; }
.lp-mobile__items { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; font-size: 24px; line-height: 32px; }
.lp-mobile__link { display: block; padding: 8px 12px; border-radius: 6px; color: #fff; font-weight: 500; letter-spacing: -0.04em; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.lp-mobile__cap { display: block; color: #939393; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; }
@media (hover: hover) { .lp-mobile__link:hover { background: rgb(46 46 46 / 0.9); } }
.lp-mobile__foot { display: flex; flex-direction: column; gap: 12px; padding: 8px 8px 16px; border-top: 2px solid #2b2b2b; }
.lp-mobile__foot > a { width: 100%; }
.lp-mobile__foot .lp-ring-btn__face { width: 100%; justify-content: center; }
html.lp-menu-open { overflow: hidden; }

@media (min-width: 768px) {
  .lp-nav__logo img { height: 29px; }
}

/* ---- desktop ---- */
@media (min-width: 1024px) {
  /* Three columns, the outer two equal, so the links sit on the bar's true
     centre whatever the logo and button widths are. */
  .lp-nav__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 20px; min-height: 62px; padding: 12px 38px; }
  .lp-nav__logo { justify-self: start; }
  .lp-nav__links { position: relative; z-index: 10; display: flex; }
  .lp-nav__end { justify-self: end; }
  .lp-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .lp-nav__link {
    display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 12px;
    border-radius: 999px; background: transparent; color: #939393;
    font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0.017em;
    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .lp-nav__link[aria-expanded="true"] { background: #1c1c1c; color: #fff; }
  .lp-nav__link:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
  .lp-nav__dot { width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; opacity: 0.6; transition: opacity .3s; }
  .lp-nav__link:hover .lp-nav__dot, .lp-nav__link[aria-expanded="true"] .lp-nav__dot { opacity: 1; }
  .lp-nav__end { display: flex; align-items: center; gap: 12px; }
  .lp-nav__menu { display: none; }
  .lp-nav.is-menu .lp-mobile { display: none; }

  .lp-dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 50; display: block; pointer-events: none; }
  .lp-dd[data-state="open"] { pointer-events: auto; }
  .lp-dd__shell { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 4px 54px rgb(0 0 0 / 0.8)); }
  .lp-dd__fill { fill: var(--nav-solid); }
  .lp-dd__stroke { fill: none; stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .lp-dd__clip { position: relative; height: 0; overflow-x: visible; overflow-y: clip; }
  .lp-dd__body { position: relative; padding: 20px; }
  .lp-dd__stack { position: relative; display: grid; width: 700px; }
  .lp-dd__view {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .48s cubic-bezier(.32, .72, 0, 1) 80ms, transform .36s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .56s;
  }
  .lp-dd__view:not([data-active]) { position: absolute; top: 0; left: 0; width: 100%; }
  .lp-dd__view[data-rest-side="right"] { transform: translateX(24px); }
  .lp-dd__view[data-rest-side="left"] { transform: translateX(-24px); }
  .lp-dd__view[data-active] {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .32s cubic-bezier(.32, .72, 0, 1), transform .36s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s;
  }
  .lp-dd__head { display: flex; align-items: center; height: 36px; margin: 0; padding: 0 18px; color: #939393; font-size: 14.5px; font-weight: 400; line-height: 1.36; letter-spacing: 0.015em; }

  .lp-dd__view--products { display: grid; grid-template-columns: 2fr 1fr; gap: 0 20px; }
  .lp-dd__group { display: grid; grid-template-rows: 36px minmax(0, 1fr); min-width: 0; overflow: hidden; border-radius: 20px; background: #171717; }
  .lp-dd__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 20px; background: #0f0f0f; }
  .lp-dd__grid--one { grid-template-columns: minmax(0, 1fr); }
  .lp-dd__grid::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid #242424; border-radius: inherit; }
  .lp-dd__cell { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 16px 18px; box-shadow: inset -1px 0 0 #242424, inset 0 -1px 0 #242424; transition: background-color .18s; }
  .lp-dd__cell:hover, .lp-dd__cell:focus-visible { background: #1c1c1c; outline: none; }
  .lp-dd__title { color: #f0f0f0; font-size: 14.5px; font-weight: 500; line-height: 16px; letter-spacing: 0.025em; }
  .lp-dd__cap { color: #939393; font-size: 13px; line-height: 1.3; }

  .lp-dd__view--resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .lp-dd__col { display: flex; flex-direction: column; min-width: 0; }
  .lp-dd__link { display: flex; align-items: center; gap: 14px; height: 44px; padding: 8px 18px; border-radius: 20px; color: #ccc; transition: background-color .18s; }
  .lp-dd__link:hover, .lp-dd__link:focus-visible { background: #1c1c1c; outline: none; }
  .lp-dd__link .lp-ico { width: 18px; height: 18px; flex: 0 0 auto; color: #ccc; }
  .lp-dd__link span { overflow: hidden; font-size: 14.5px; font-weight: 450; line-height: 16px; letter-spacing: 0.025em; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1280px) {
  .lp-nav__link { padding: 0 17px; }
}
@media (hover: hover) and (min-width: 1024px) {
  .lp-nav__link:hover { background: #1c1c1c; color: #fff; }
}

/* ===========================================================================
   GRADIENT SWEEP - the original lander's arc headline (base.css [data-grad],
   primitives.js gradientText()), ported as a CSS transition.
   The fill is a 400%-wide strip: solid heading colour for the first third,
   then the sunset band (--stop-4, -2, -1, -5, -3), then transparent. Parked
   at 100% the heading shows the transparent end, so it is not yet visible;
   when it reaches 90% of the viewport it slides to 0% over 2.2s on GSAP's
   power2.out, and the band wipes across left to right, leaving solid text.
   It rests as one solid colour, so it isn't the banned "gradient text".
   Hidden only under .js, and reduced motion shows the finished state.
   =========================================================================== */
[data-grad] {
  background-image: linear-gradient(90deg,
    currentColor 0, currentColor 33.33%,
    var(--stop-4) 40%, var(--stop-2) 45%, var(--stop-1) 50%,
    var(--stop-5) 55%, var(--stop-3) 60%,
    transparent 66.67%, transparent);
  background-size: 400% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.js [data-grad] { background-position: 100% 50%; transition: background-position 2.2s cubic-bezier(0.33, 1, 0.68, 1); }
.js [data-grad].is-swept { background-position: 0% 50%; }
@media (prefers-reduced-motion: reduce) {
  .js [data-grad] { background-position: 0% 50%; transition: none; }
}

/* ===========================================================================
   WHITE LABEL - the overhead light from the White Label page (#wl-idea)
   Same asset and values as .wl-idea-light in white-label-sales.css: the
   glow's luminance baked into idea-light-mask.png's alpha, used as a mask
   over an amber fill, so the light keeps its exact shape in AIWA's colour.
   The bar sits 50.4% down the image, so centring the box on the section's
   top edge puts the bar on that edge, and the section's overflow cuts off
   the half above it. lander.js opens it with scroll, from scale .5264 to 1.4
   over 420px, and it closes again on the way back up.
   =========================================================================== */
.lp-wl__light {
  position: absolute; top: 0; left: 50%; z-index: 0;
  width: min(1228px, 94vw); aspect-ratio: 1201 / 611;
  translate: -50% -50%;
  transform: translateY(-26.88px) scale(0.5264);
  transform-origin: 50% 50%;
  will-change: transform; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 62%, #fff) 0%,
    color-mix(in srgb, var(--accent) 58%, #fff) 49%,
    var(--accent) 57%, var(--accent-hot) 74%, var(--accent-deep) 100%);
  -webkit-mask: url("/wl-assets/images/wl/idea-light-mask.png?v=f6bb9f1382") center / 100% 100% no-repeat;
  mask: url("/wl-assets/images/wl/idea-light-mask.png?v=f6bb9f1382") center / 100% 100% no-repeat;
}
.lp-wl .lp-plan__wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lp-wl__light { transform: scale(1.4); } }

/* ===========================================================================
   AMBIENCE LIFT - the owner found the page too dark
   Before this block the grounds sat at 2-17 out of 255 and the median pixel
   of a section was 10-16. Every ground token moves up to a warm charcoal (the
   same family as the nav's #1a1714), keeping their order: frame below
   section, section below panel, panel below card. The washes are about 1.6x
   stronger. Everything is here, so deleting the block restores the old
   levels.
   =========================================================================== */
.lp {
  --lp-page: #0f0e0d;
  --lp-bg: #161513;
  --lp-frame: #0d0c0b;
  --lp-panel: #1a1917;
  --lp-card: #201f1c;
  --lp-card-2: #282623;
  --lp-inset: #131210;
  --lp-line: #2a2825;
  --lp-line-2: #33312d;
}
/* the Mastra-style illustration card uses its own greys, not the tokens */
.lp-ill {
  background:
    radial-gradient(86% 69% at 2% 1%, #22211e 27%, #151412 88%) padding-box,
    linear-gradient(135deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 55%) border-box;
}
.lp-apps::before {
  background:
    radial-gradient(ellipse 45% 28% at 18% 6%, rgb(255 94 0 / 0.15), transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 70%, rgb(255 179 0 / 0.08), transparent 70%);
}
.lp-build::before {
  background:
    radial-gradient(ellipse 50% 22% at 50% 4%, rgb(255 94 0 / 0.16), transparent 70%),
    radial-gradient(ellipse 35% 30% at 6% 60%, rgb(206 20 0 / 0.1), transparent 70%),
    radial-gradient(ellipse 35% 28% at 94% 88%, rgb(255 179 0 / 0.08), transparent 70%);
}
.lp-plan__glow { background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.22), rgb(206 20 0 / 0.08) 45%, transparent 68%); }
.lp-plan::before { background: radial-gradient(ellipse 40% 45% at 12% 30%, rgb(255 179 0 / 0.08), transparent 70%); }
.lp-why__glow--a { background: radial-gradient(ellipse 40% 60% at 12% 0%, rgb(255 94 0 / 0.13), transparent 70%); }
.lp-why__glow--b { background: radial-gradient(circle at 100% 100%, rgb(255 179 0 / 0.12), transparent 65%); }
.lp-pricing::after { background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.13), transparent 68%); }
.lp-faq::before { background: radial-gradient(ellipse 45% 35% at 50% 20%, rgb(255 94 0 / 0.11), transparent 70%); }
.lp-cta__glow { background: radial-gradient(ellipse at center, rgb(255 94 0 / 0.24), rgb(206 20 0 / 0.09) 45%, transparent 70%); }

/* ===========================================================================
   WHITE LABEL REEL - the console illustration's replacement
   One pre-cut MP4 (videos/wl-reel.mp4): nine shots from the White Label
   page's feature clips, 2.8s apart, joined by 0.6s eased transitions (push,
   zoom-through, blur dissolve, slide-up) with a slow push-in on each. It is
   rendered offline by a script so the cuts never stall on a seek. The
   caption is HTML, kept in time with the video by lander.js, and changes at
   the middle of each transition. The frame takes the panel's inner radius.
   =========================================================================== */
.lp-reel { position: relative; overflow: hidden; aspect-ratio: 696 / 464; border-radius: var(--r-step); background: var(--lp-inset); }
.lp-reel__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-reel__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 13px 7px 11px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 999px;
  background: rgb(15 14 13 / 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--lp-head); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
}
.lp-reel__cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-accent); flex: 0 0 auto; }
.lp-reel__cap span { display: inline-block; transition: opacity .32s cubic-bezier(0.32, 0.72, 0, 1), transform .42s cubic-bezier(0.32, 0.72, 0, 1), filter .32s ease; }
.lp-reel__cap span.is-out { opacity: 0; transform: translateY(8px); filter: blur(4px); transition-duration: .2s; }
@media (max-width: 767px) { .lp-reel__cap { left: 10px; bottom: 10px; padding: 6px 11px 6px 9px; font-size: 13px; } }

/* ===========================================================================
   WHITE LABEL REEL - GLASS BEZEL
   The White Label page's glass (white-label-sales.css, "GALLERY FRAMES -
   GLASS BEZEL"), same layers and values: an amber pool under the top edge
   and a faint cream wash; a 20px blur with 165% saturation and 1.08
   brightness, so the overhead light behind stays vivid rather than grey; a
   specular rim brightest at top-left; a hairline bevel on top, a darker
   base and a deep outer shadow; faint grain. The reel sits under the glass
   in a recessed window: a dark lip where the glass overhangs, a lit bevel
   below and a sheen across it. The corners already nest: panel --r-panel,
   the reel 12px inside at --r-step (32 - 12 = 20).
   =========================================================================== */
.lp-wl .lp-panel--shot {
  position: relative; isolation: isolate; overflow: hidden;
  border: 0;
  background:
    radial-gradient(75% 28% at 50% 0%, rgba(254, 160, 2, 0.20), transparent 72%),
    linear-gradient(180deg, transparent 45%, rgba(251, 249, 246, 0.025)),
    linear-gradient(180deg, rgba(251, 249, 246, 0.10), rgba(251, 249, 246, 0.04));
  box-shadow:
    inset 0 1px 1px rgba(251, 249, 246, 0.35),
    inset 0 0 36px 1px rgba(251, 249, 246, 0.06),
    inset 0 0 140px 0 rgba(251, 249, 246, 0.025),
    inset 0 -20px 40px -20px rgba(0, 0, 0, 0.35),
    0 20px 40px -12px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.30);
  -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.08);
  backdrop-filter: blur(20px) saturate(165%) brightness(1.08);
}
.lp-wl .lp-panel--shot::before,
.lp-wl .lp-panel--shot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* specular rim: a 1px ring cut from a conic gradient, brightest top-left */
.lp-wl .lp-panel--shot::before {
  z-index: 2; padding: 1px;
  background: conic-gradient(from 215deg at 25% 0%,
    rgba(251, 249, 246, 0.55), rgba(251, 249, 246, 0.06) 35%,
    rgba(251, 249, 246, 0.02) 60%, rgba(254, 160, 2, 0.14) 88%, rgba(251, 249, 246, 0.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* grain, under the reel so it never lands on the picture */
.lp-wl .lp-panel--shot::after {
  z-index: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lp-wl .lp-reel { z-index: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
/* the recess: the glass overhanging the window, over the video */
.lp-wl .lp-reel::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(251, 249, 246, 0.10) 0%, rgba(251, 249, 246, 0.03) 24%, transparent 42%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.30),
    inset 0 -1px 0 rgba(251, 249, 246, 0.10);
}
.lp-reel__cap { z-index: 2; }
/* no glass where it is unwanted or unsupported: an opaque panel instead */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .lp-wl .lp-panel--shot { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lp-panel); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-wl .lp-panel--shot { background: var(--lp-panel); }
}

/* ===========================================================================
   NAV GLASS - the dropdown and the bar as one surface
   An element with backdrop-filter becomes the backdrop root for everything
   inside it, so a dropdown nested in the bar could only ever blur the bar,
   never the page. The bar's glass therefore moves onto ::before, a layer
   behind its content, and the dropdown gets its own glass: .lp-dd__glass,
   clipped by lander.js to the shell's exact outline. Both use the same fill
   and blur (the aiwa lander backup's: --ink-900 at 80% over an 8px blur).
   The shell SVG now only draws the edge; the Mastra drop shadow went with the
   solid fill, since the bar has no shadow either.
   Inside, Mastra's neutral greys become warm translucent tints of the
   headline cream, so the cards take the glass's colour instead of sitting on
   it as grey slabs.
   =========================================================================== */
.lp-nav {
  --nav-glass: color-mix(in srgb, var(--ink-900) 80%, transparent);
  --nav-tint: rgb(251 249 246 / 0.05);
  --nav-tint-2: rgb(251 249 246 / 0.08);
  --nav-rule: rgb(251 249 246 / 0.08);
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lp-nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lp-nav.is-menu { background: transparent; }
.lp-nav.is-menu::before { background: var(--nav-solid); }
.lp-dd__glass {
  position: absolute; top: 0; left: -64px; height: 0; pointer-events: none;
  background: var(--nav-glass);
  /* same tint as the bar, so the same colour; a stronger blur because the
     panel is large enough for text passing behind it to compete */
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.lp-dd__shell { filter: none; }
.lp-dd__fill { fill: none; }
.lp-dd__group { background: var(--nav-tint); }
.lp-dd__grid { background: rgb(0 0 0 / 0.22); }
.lp-dd__grid::after { border-color: var(--nav-rule); }
.lp-dd__cell { box-shadow: inset -1px 0 0 var(--nav-rule), inset 0 -1px 0 var(--nav-rule); }
.lp-dd__cell:hover, .lp-dd__cell:focus-visible,
.lp-dd__link:hover, .lp-dd__link:focus-visible { background: var(--nav-tint-2); }
.lp-nav__link[aria-expanded="true"] { background: var(--nav-tint-2); }
@media (hover: hover) and (min-width: 1024px) { .lp-nav__link:hover { background: var(--nav-tint-2); } }
@media (hover: hover) { .lp-mobile__link:hover { background: var(--nav-tint); } }
.lp-mobile__foot { border-top-color: var(--line); }
.lp-stroke-btn { --fill: rgb(251 249 246 / 0.06); --edge: rgb(251 249 246 / 0.2); }
.lp-stroke-btn:hover { --fill: rgb(251 249 246 / 0.1); --edge: rgb(251 249 246 / 0.28); }

/* The nav carries only the original site's links (Features, Pricing, Docs,
   Community), so the phone menu is one list with no section heads. The
   dropdown styles above stay dormant: nothing in the page uses them now. */
.lp-mobile__items--solo { margin-top: 0; }

/* ===========================================================================
   TOP OF PAGE AS ONE SURFACE - owner request
   The hero and the logo strip sat on --lp-page, the gallery on the lighter
   --lp-bg with a 40px rounded top and a 2px rule over the strip, so the
   three read as stacked bands. They now share --lp-bg: the hero's bottom
   fade and the strip's edge fades end in that same colour, the strip loses
   its rule and the gallery its radius, so nothing marks where one stops.
   =========================================================================== */
.lp-hero, .lp-logos { background: var(--lp-bg); }
.lp-hero::after { background: linear-gradient(to bottom, transparent, var(--lp-bg)); }
.lp-logos { border-top: 0; }
.lp-logos__fade--x { background: linear-gradient(90deg, var(--lp-bg) 0%, transparent 25%, transparent 90%, var(--lp-bg) 100%); }
.lp-logos__fade--y { background: linear-gradient(var(--lp-bg) 0%, transparent 28%, transparent 72%, var(--lp-bg) 100%); }
.lp-apps { border-radius: 0; }
/* Section washes that sit near a section's top edge fade in from it, so the
   light starts softly instead of stopping in a line at the seam. */
.lp-apps::before, .lp-build::before, .lp-faq::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 220px);
  mask-image: linear-gradient(to bottom, transparent, #000 220px);
}

/* ===========================================================================
   AGENCY - the White Label pricing's moving beam, copied verbatim from
   white-label-sales.css (@property --wl-border-angle, wl-border-spin,
   .wl-price__beam and its reduced-motion rule). As on that page, the beam
   sits in the featured plan's top cell only, the part above the button.
   =========================================================================== */
@property --wl-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes wl-border-spin { to { --wl-border-angle: 360deg; } }

/* --- the moving beam ------------------------------------------------------
   The overlay's border is transparent and 1px. Mask one is clipped to
   padding-box and is fully transparent; mask two is clipped to border-box and
   fully opaque. `intersect` keeps only what both cover, which is the 1px ring
   and nothing else. */
.wl-price__beam {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Nothing travels: a conic gradient SWEEPS, and the ring mask shows whatever
   part of it currently lands on the border.

   Two earlier attempts both snapped, for the same underlying reason - they
   moved a rigid object around a box with square corners:
     1. A square sized 55% of the card orbited by animating left/top between
        the corners. It overlapped two edges at once, so a long stretch lit up,
        and its centre moved in a straight line between corners, so the lit
        part jumped to the next edge while the previous edge sat frozen.
     2. offset-path fixed the speed and the length, but a 90 degree vertex has
        no curve to follow, so offset-rotate flipped the bar a quarter turn in
        an instant - the snap into the next side.
   A conic gradient has no object and no rotation to perform. The colour stops
   sweep past the corner continuously, so the light rounds it with ease.

   Angle comes from --wl-border-angle, already registered with @property above
   (a plain custom property cannot be tweened), driven by the file's existing
   wl-border-spin keyframes. */
.wl-price__beam {
  background: conic-gradient(from var(--wl-border-angle) at 50% 50%,
    transparent 0deg,
    color-mix(in srgb, var(--accent-deep) 45%, transparent) 26deg,
    var(--accent-hot) 58deg,
    var(--accent) 78deg,
    color-mix(in srgb, var(--accent) 65%, #fff) 90deg,
    var(--accent) 102deg,
    color-mix(in srgb, var(--accent-deep) 45%, transparent) 124deg,
    transparent 150deg,
    transparent 360deg);
  animation: wl-border-spin 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wl-price__beam { animation: none; }
}

/* ===========================================================================
   LAUNCH CARD SLIDESHOW - the White Label page's gallery examples
   The thirteen project examples from the White Label gallery, in its order,
   as 800x533 WebP copies cut to the gallery's 3:2 from the top (its own
   cover/top rule), so the frame takes 3:2 instead of the old screenshot's
   800:405. One slide every 3.2s: the next fades in while settling from a
   4% zoom, on the curve the nav and reel use. Only the first image loads
   with the page; each next one is fetched a slide ahead. The caption is the
   reel's.
   =========================================================================== */
.lp-show { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--lp-inset); }
.lp-show__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0; transform: scale(1.04);
  transition: opacity .9s cubic-bezier(0.32, 0.72, 0, 1), transform 1.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.lp-show__img.is-on { opacity: 1; transform: none; }
.lp-show__cap { left: 10px; bottom: 10px; padding: 6px 11px 6px 9px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .lp-show__img { transition: none; } }

/* ===========================================================================
   CLOSING CTA + FOOTER - mastra.ai's footer backdrop, in AIWA's colours
   The same shader Mastra runs: Paper Shaders' GrainGradient (Apache-2.0,
   vendored in js/vendor/paper-shaders with its LICENSE), with Mastra's own
   settings, read from their bundle: wave shape, scale 3.07, speed .4,
   intensity .4, softness 1, noise 0, offsetY .15, transparent colorBack, and
   three tints at 12% / 24% / 16% over the ground. Mastra's tints are white;
   these are AIWA's amber, light gold and hot orange at the same alphas.
   Mastra's layout too: the backdrop starts at the top of the closing section
   and runs down behind the footer. Mastra ends it at the panel's bottom;
   here it runs to the very bottom of the page, so the padding under the
   panel is grained too (lander.js measures it). The footer is transparent, so the grain
   shows round the panel, and the panel keeps its solid ground. The canvas
   fades in over 900ms, as Mastra's does.
   =========================================================================== */
.lp-cta { overflow: visible; }
.lp-cta__grain {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: 1360px; pointer-events: none;
  background: var(--lp-bg);
}
.lp-cta__grain canvas { opacity: 0; transition: opacity .9s ease-out; }
.lp-cta__grain.is-on canvas { opacity: 1; }
.lp-foot { position: relative; z-index: 10; isolation: isolate; background: transparent; }
.lp { background: var(--lp-bg); }
@media (prefers-reduced-motion: reduce) { .lp-cta__grain canvas { transition: none; } }

/* ===========================================================================
   PHONE SCALING - mastra.ai's principle, measured off their page at 390px
   against 1440px:
     - only display type shrinks: their h1 54 -> 30 and section h2
       40 -> 28, both at 1.1 line height;
     - everything else keeps its desktop size: 22px leads, 17px body, 22px
       card and question titles, 17px tabs, 14.5px small print;
     - footer: two columns, 48px row / 32px column gaps, 64px / 18px panel
       padding;
     - text sits about 24px in from the screen edge.
   The outer 10px gutter stays (the owner halved it for the frames), so
   free-standing text gets a 14px inset of its own to land on 24px; frames,
   cards and the hero prompt box keep the gutter. No reading text goes under 13px.
   =========================================================================== */
/* sizes that stay put at every width */
.lp-lead--lg, .lp-hero__sub, .lp-cta__sub { font-size: 22px; line-height: 1.36; }
.lp-faq__item summary h3 { font-size: 22px; }
.lp-frame__tab { font-size: 17px; }

@media (max-width: 767.98px) {
  /* display type: Mastra's ratio and 1.1 leading */
  .lp-h2 { font-size: 28px; line-height: 1.1; }
  .lp-hero__title { font-size: 36px; line-height: 1.1; }

  /* free-standing text on Mastra's 24px line */
  .lp-hero__title, .lp-hero__sub, .lp-hero__hint, .lp-apps__head, .lp-build__head, .lp-plan__copy,
  .lp-why__title, .lp-why__lead, .lp-pricing__head, .lp-pricing__foot, .lp-cta__sub { padding-inline: 14px; }
  .lp-logos__label { padding-inline: 24px; }
  /* the typed example prompts wrap to two lines at this width */
  .lp-prompt__input { min-height: 78px; }

  /* footer: Mastra's phone grid and panel padding */
  .lp-foot__panel { padding: 64px 18px; }
  .lp-foot__cols { gap: 48px 32px; }

  /* Live preview demo: its text scaled with the card and fell to 10-12px.
     The chat becomes a column, so messages and the composer size to their
     text, and nothing reads under 13px. */
  .lp-live__chat { display: flex; flex-direction: column; gap: calc(10 * var(--u)); height: auto; min-height: calc(210 * var(--u)); }
  .lp-live__thread { position: relative; inset: auto; flex: 1 1 auto; min-height: calc(150 * var(--u)); }
  .lp-live__composer { position: relative; left: auto; right: auto; bottom: auto; height: auto; min-height: 48px; }
  .lp-live__msg, .lp-live__input { font-size: 14px; }
  .lp-live__who, .lp-live__files span, .lp-live__url, .lp-live__status,
  .lp-live__date, .lp-live__btn, .lp-live__chips span { font-size: 13px; }
  .lp-live__url { width: auto; }
  .lp-live__btn { height: 30px; }
  .lp-live__chips { flex-wrap: wrap; }
  .lp-live__preview { height: auto; padding-bottom: 16px; }
}

/* ===========================================================================
   PHONE MENU - the original site's menu, hung from the bar like Mastra's
   dropdown
   What it holds is the original's (site.css "mobile nav"): the four links,
   Features, Pricing, Docs and Community, in a compact list, with no call to
   action (the original says why: Start Building is the hero's and the
   closing section's). How it attaches is Mastra's: one drawn shape that
   flows out of the bar's bottom rule on inverse fillets and rounds off at the
   bottom, opening by height on Mastra's curves (.48s cubic-bezier(.32,.72,0,1)
   in, (.32,0,.67,0) out). Same glass as the bar and the desktop dropdown:
   --nav-glass over a 16px blur, clipped to the shape; the edge is --line.
   The old full-screen menu's styles above (.lp-mobile*) are unused.
   =========================================================================== */
.lp-mm { position: absolute; top: calc(100% - 1px); left: 24px; right: 24px; z-index: 5; pointer-events: none; }
.lp-mm[data-state="open"] { pointer-events: auto; }
.lp-mm__glass {
  position: absolute; top: 0; left: -20px; height: 0; pointer-events: none;
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.lp-mm__shell { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.lp-mm__stroke { fill: none; stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lp-mm__clip { position: relative; height: 0; overflow: hidden; }
.lp-mm__list { display: grid; gap: 2px; margin: 0; padding: 10px 10px 14px; list-style: none; }
.lp-mm__link {
  display: block; padding: 11px 14px; border-radius: 12px;
  color: var(--lp-fg); font-size: 17px; font-weight: 500; line-height: 1.3;
  transition: background-color .15s ease, color .15s ease;
}
.lp-mm__link:hover, .lp-mm__link:focus-visible { background: var(--nav-tint-2); color: var(--lp-head); outline: none; }
@media (min-width: 1024px) { .lp-mm { display: none; } }

/* ===========================================================================
   HERO COMPOSER - app.aiwa.codes's own chat box, copied from the live app
   Values read off the app's stylesheet and bundle (the .aiwa-composer
   rules, its toolbar components, the typed placeholder, the brief-readiness
   meter). The app renders at zoom: .9, so the composer does too; every size
   below is the app's own design value.
     - card #2c2c2b, radius 24, 0 24px 60px -30px black/.7 under it
     - ::before  a 1.5px rim, radial from the top-left in the mode's colours
     - ::after   a halo 3px outside, blurred 16px, .32 at rest, .68 focused
     - sunrise   a bloom rising from the bottom edge
     - focus brightens the rim (1.25 / saturate 1.12); a brief being written
       ("working") and a strong prompt ("ready") brighten it further
     - Plan mode recolours rim, halo and bloom violet (the app's own values)
   Mode colours: Build = orange-300, Plan = violet-400. Timings: .22s / .42s
   on cubic-bezier(.22,1,.36,1).
   =========================================================================== */
.ac {
  --ac-card: #2c2c2b; --ac-fg: #f8f8f6; --ac-muted: #c4c2b6; --ac-border: #f8f8f614;
  --ac-accent: #353533; --ac-recessed: #171716; --ac-primary: #ff5e00; --ac-primary-fg: #1f1f1e;
  --ac-s1: #ffb300; --ac-s2: #ff5e00; --ac-s3: #ce1400;
  --ac-dur: .22s; --ac-dur-slow: .42s; --ac-ease: cubic-bezier(.22, 1, .36, 1); --ac-ease-io: cubic-bezier(.65, 0, .35, 1);
  --mode-rim-1: var(--ac-s1); --mode-rim-2: var(--ac-s2); --mode-rim-3: #ce140066;
  --mode-halo-1: #ffb3008c; --mode-halo-2: #ff5e004d; --mode-bloom-1: #ff5e0029; --mode-bloom-2: #ffb30012;
  zoom: .9;
  position: relative; display: block; width: 100%; max-width: 768px; margin: 0 auto;
  border-radius: 24px; background: var(--ac-card); color: var(--ac-fg); text-align: left;
  box-shadow: rgba(0, 0, 0, .7) 0 24px 60px -30px;
  font-family: var(--lp-sans); letter-spacing: normal;
}
.ac[data-mode="plan"] { --mode-rim-1: #c491ff; --mode-rim-2: #8b5cf6; --mode-rim-3: #4c1d9566; --mode-halo-1: #a78bfa8c; --mode-halo-2: #7c3aed4d; --mode-bloom-1: #7c3aed29; --mode-bloom-2: #a78bfa12; }
.ac::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(135% 120% at 0% 0%, var(--mode-rim-1), var(--mode-rim-2) 30%, var(--mode-rim-3) 48%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .9; transition: opacity var(--ac-dur) var(--ac-ease), filter var(--ac-dur) var(--ac-ease);
}
.ac:focus-within::before { opacity: 1; filter: brightness(1.25) saturate(1.12); }
.ac::after {
  content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 95% at 50% -6%, var(--mode-halo-1), var(--mode-halo-2) 36%, transparent 68%);
  filter: blur(16px); opacity: .32; transition: opacity var(--ac-dur-slow) var(--ac-ease);
}
.ac:focus-within::after { opacity: .68; }
.ac[data-brief="working"]::before { opacity: 1; filter: brightness(1.32) saturate(1.18); }
.ac[data-brief="working"]::after { opacity: .74; }
.ac[data-brief="ready"]::before { opacity: .97; filter: brightness(1.14) saturate(1.08); }
.ac[data-brief="ready"]::after { opacity: .52; }
.ac-sunrise { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 85% at 50% 100%, var(--mode-bloom-1), var(--mode-bloom-2) 42%, transparent 72%); }

.ac-i10 { width: 10px; height: 10px; } .ac-i12 { width: 12px; height: 12px; } .ac-i14 { width: 14px; height: 14px; }
.ac-i16 { width: 16px; height: 16px; } .ac-i18 { width: 18px; height: 18px; } .ac-i20 { width: 20px; height: 20px; } .ac-i24 { width: 24px; height: 24px; }
.ac svg { flex: 0 0 auto; }
.ac-sun { color: var(--ac-s2); }
.ac-tr { transition: transform var(--ac-dur) var(--ac-ease), box-shadow var(--ac-dur) var(--ac-ease), border-color var(--ac-dur) var(--ac-ease), background-color var(--ac-dur) var(--ac-ease), color var(--ac-dur) var(--ac-ease); }

.ac-info {
  position: absolute; right: 12px; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; color: rgb(196 194 182 / .45);
  transition: color var(--ac-dur) var(--ac-ease);
}
.ac-info:hover { color: rgb(248 248 246 / .8); }
.ac-body { position: relative; z-index: 10; padding: 12px; }
.ac-scroll { position: relative; max-height: 300px; overflow-y: auto; padding: 6px 8px; }
.ac-ph { position: absolute; left: 8px; top: 6px; pointer-events: none; user-select: none; color: var(--ac-muted); font-size: 15px; line-height: 1.6; }
.ac-scroll[data-empty="false"] .ac-ph { display: none; }
.ac-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: baseline; transform: translateY(3px); background: rgb(196 194 182 / .7); }
@media (prefers-reduced-motion: no-preference) { .ac-caret { animation: ac-caret-blink 1.1s step-end infinite; } }
@keyframes ac-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.ac-input {
  display: block; width: 100%; min-height: 88px; margin: 0; padding: 0; border: 0; outline: none; resize: none; overflow: hidden;
  background: transparent; color: var(--ac-fg); font: 400 15px/1.6 var(--lp-sans); letter-spacing: normal;
}
.ac-scroll[data-empty="true"] .ac-input { caret-color: transparent; }

.ac-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ac-grow { flex: 1 1 auto; }
.ac-attach {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); color: rgb(248 248 246 / .8);
}
.ac-attach:hover { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .1); color: var(--ac-fg); }
.ac-pill, .ac-brief {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px;
  color: var(--ac-muted); font-size: 12px; line-height: 16px; white-space: nowrap;
}
.ac-pill:hover, .ac-pill[aria-expanded="true"], .ac-brief:hover { border-color: rgb(255 94 0 / .4); background: var(--ac-accent); color: var(--ac-fg); }
.ac-pill__name { font-weight: 500; color: rgb(248 248 246 / .9); }
.ac-pill__mode { font-weight: 500; }
.ac-mode-ico { display: flex; }
.ac[data-mode="build"] .ac-mode-ico, .ac[data-mode="build"] .ac-pill__mode, .ac-acc--build { color: #fdba74; }
.ac[data-mode="plan"] .ac-mode-ico, .ac[data-mode="plan"] .ac-pill__mode, .ac-acc--plan { color: #a78bfa; }
.ac-acc--build, .ac-acc--plan { display: flex; }
.ac-pg {
  display: none; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / .1); border-radius: 999px;
  background: var(--ac-recessed); color: var(--ac-muted); font-size: 12px; line-height: 16px; white-space: nowrap;
  box-shadow: rgba(255, 255, 255, .05) 0 1px inset;
}
.ac-pg img { width: 14px; height: 14px; }
.ac-pg__name { font-weight: 500; color: rgb(248 248 246 / .8); }
@media (min-width: 768px) { .ac-pg { display: inline-flex; } }
.ac-mic {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid transparent; color: var(--ac-muted);
}
.ac-mic:hover { border-color: rgb(255 94 0 / .5); background: var(--ac-accent); color: var(--ac-fg); }
/* send: the app's .aiwa-primary sunset button; with text in the box its own
   shadow is replaced by an orange lift (0 6px 18px -4px, sunset-2 at 65%) */
.ac-send {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  background: linear-gradient(180deg, var(--ac-s1), var(--ac-s2)); color: var(--ac-primary-fg);
  box-shadow: 0 6px 18px -4px rgb(255 94 0 / .65);
  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.ac-send:hover { transform: scale(1.05); filter: brightness(1.05); }
.ac-send:active { transform: scale(.95); filter: brightness(.97); }
.ac-send:disabled {
  opacity: .4; cursor: default; transform: none; filter: none;
  box-shadow: rgba(255, 255, 255, .28) 0 1px inset, rgba(255, 202, 77, .55) 0 -10px 18px -10px inset, rgba(0, 0, 0, .4) 0 1px 2px;
}
.ac-attach, .ac-pill, .ac-brief, .ac-mic { transition: transform var(--ac-dur) var(--ac-ease), box-shadow var(--ac-dur) var(--ac-ease), border-color var(--ac-dur) var(--ac-ease), background-color var(--ac-dur) var(--ac-ease), color var(--ac-dur) var(--ac-ease); }

/* brief: fades up once the prompt has 12 characters; the segments fill as
   it covers what a brief needs, the newest one pops */
.ac-brief { position: relative; overflow: hidden; flex-shrink: 0; }
.ac-brief[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .ac-brief { animation: ac-fade-up var(--ac-dur-slow) var(--ac-ease) both; } }
.ac-segs { display: flex; align-items: center; gap: 3px; }
.ac-segs i { width: 6px; height: 3px; border-radius: 999px; background: var(--ac-border); transition: background-color var(--ac-dur) var(--ac-ease); }
.ac-segs i.is-on { background: var(--ac-s2); }
@media (prefers-reduced-motion: no-preference) { .ac-segs i.is-pop { animation: ac-seg-pop .32s var(--ac-ease) both; } }
.ac-shimmer { position: absolute; inset: 0 auto 0 0; width: 50%; pointer-events: none; background: linear-gradient(to right, transparent, rgb(255 94 0 / .25), transparent); }
@media (prefers-reduced-motion: no-preference) { .ac-shimmer { animation: ac-shimmer 1.1s var(--ac-ease-io) 1; } }
@keyframes ac-fade-up { 0% { opacity: 0; transform: translateY(12px) scale(.985); } 100% { opacity: 1; transform: none; } }
@keyframes ac-seg-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes ac-shimmer { 0% { transform: translate(-120%); } 100% { transform: translate(120%); } }

/* menus: the app's dropdown (sOe) */
.ac-menu-wrap { position: relative; }
.ac-menu {
  position: absolute; top: calc(100% + 8px); z-index: 50; min-width: 220px; padding: 6px;
  border: 1px solid var(--ac-border); border-radius: 12px; background: var(--ac-card);
  box-shadow: rgba(255, 255, 255, .05) 0 1px inset, 0 20px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .5);
  transform-origin: top;
}
.ac-menu--model { left: 0; min-width: 268px; }
.ac-menu--mode { right: 0; }
.ac-menu[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .ac-menu { animation: ac-select-in .14s var(--ac-ease); } }
@keyframes ac-select-in { 0% { opacity: 0; transform: scale(.98); } 100% { opacity: 1; transform: scale(1); } }
.ac-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; color: var(--ac-fg); font-size: 14px; line-height: 20px; text-align: left; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.ac-item:hover, .ac-item:focus-visible { background: var(--ac-accent); outline: none; }
.ac-item__txt { display: flex; flex: 1 1 auto; flex-direction: column; }
.ac-menu__t { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; font-size: 14px; }
.ac-menu__d { margin: 0; color: var(--ac-muted); font-size: 11px; line-height: 16px; }
.ac-menu__label { margin: 0; padding: 2px 10px 4px; color: rgb(196 194 182 / .6); font-size: 11px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; }
.ac-check { color: var(--ac-primary); visibility: hidden; }
.ac-item[aria-checked="true"] .ac-check { visibility: visible; }
.ac-pro { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; background: rgb(255 255 255 / .06); color: var(--ac-muted); font-size: 10px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; }
.ac-agentic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; }
.ac-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; width: 36px; height: 20px; border-radius: 999px; background: var(--ac-primary); }
.ac-switch span { width: 16px; height: 16px; border-radius: 999px; background: #fff; transform: translateX(18px); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.ac-sep { height: 1px; margin: 4px 0; background: var(--ac-border); }

/* tooltips: the app's (.aiwa-tooltip) */
.ac-tip {
  position: absolute; z-index: 60; max-width: 320px; padding: 6px 10px; border: 1px solid var(--ac-border); border-radius: 8px;
  background: var(--ac-card); color: var(--ac-fg); font-size: 12px; font-weight: 500; line-height: 16px; pointer-events: none;
  box-shadow: rgba(255, 255, 255, .05) 0 1px inset, 0 20px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .5);
  transform-origin: bottom center;
}
.ac-tip::after { content: ''; position: absolute; left: calc(50% + var(--ac-tip-arrow, 0px)); top: 100%; width: 10px; height: 5px; translate: -50% 0; background: var(--ac-card); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ac-tip__muted { color: var(--ac-muted); }
@media (prefers-reduced-motion: no-preference) { .ac-tip { animation: ac-tip-in .14s var(--ac-ease); } }
@keyframes ac-tip-in { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ac::before, .ac::after, .ac-attach, .ac-pill, .ac-brief, .ac-mic, .ac-send, .ac-segs i { transition: none; }
}
@media (max-width: 767.98px) {
  .ac { zoom: 1; border-radius: 22px; }
  .ac-pill__name { display: none; }
}
/* the composer's own focus signal is the rim and halo brightening
   (:focus-within), as in the app, so the text box drops the page outline */
.ac .ac-input:focus, .ac .ac-input:focus-visible { outline: none; }

/* ===========================================================================
   WORKSPACE SHOWCASE - the original lander's workspace case, under the hero
   Ported from the original site.css (.workspace__case, .workspace__browser,
   .workspace__chrome, .workspace__zone, .ws-aside and their 900px / 479px
   rules), on the tokens it used (--ink-700 hairlines, --ink-850 wells,
   --accent for the active tab). The original's scroll handoff (the hero
   media flying into the well) is left out, as the owner asked: the browser
   eases up into view, then the three tabs follow 80ms apart, on the page's
   soft curve. The captions keep the original's small tracked mono, an
   exception to the no-mono rule because this block is a straight port.
   =========================================================================== */
.ws-show { position: relative; padding: 24px var(--lp-gutter) 72px; background: var(--lp-bg); }
.ws-show .workspace__case {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(11rem, 17vw, 15rem);
  gap: clamp(0.8rem, 1.4vw, 1.3rem); align-items: stretch;
  width: 100%; max-width: 1406px; margin: 0 auto;
}
.ws-show .workspace__browser {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--ink-700); border-radius: 1rem; background: #1f1f1f;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.45);
}
.ws-show .workspace__chrome { flex: 0 0 auto; line-height: 0; background: #1f1f1f; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ws-show .workspace__chrome img { display: block; width: 100%; height: auto; }
.ws-show .workspace__zone { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink-850); }
.ws-show .workspace__zone-shot {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: opacity .32s cubic-bezier(.22, 1, .36, 1);
}
.ws-show .workspace__zone-shot.is-swapping { opacity: 0; transition-duration: .16s; }
.ws-show .ws-aside {
  display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.3rem);
  min-height: 100%; margin: 0; padding: 0; list-style: none;
}
.ws-show .ws-aside > li { min-height: 0; height: 100%; }
.ws-show .ws-aside__item {
  position: relative; overflow: hidden; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 1px solid var(--ink-700); border-radius: 1rem; background: var(--ink-850);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}
.ws-show .ws-aside__item:hover, .ws-show .ws-aside__item:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--ink-700)); outline: none; }
.ws-show .ws-aside__item.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-show .ws-aside__item img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; pointer-events: none;
}
.ws-show #ws-tab-build img { object-position: 72% 6%; }
.ws-show #ws-tab-test img { object-position: center 42%; }
.ws-show #ws-tab-ship img { object-position: 78% 8%; }
.ws-show .ws-aside__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0.95rem 0.75rem 0.55rem 1.15rem;
  color: var(--cream-100); font-family: var(--lp-code); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(6, 5, 4, 0), rgba(6, 5, 4, 0.88) 55%);
  pointer-events: none;
}

/* entrance: no scroll-scrub, one soft ease in when it comes into view */
.js .ws-show .workspace__browser, .js .ws-show .ws-aside__item {
  opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1),
              border-color .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}
.js .ws-show .ws-aside__item { transform: translateY(20px); transition-delay: calc(180ms + var(--i, 0) * 80ms), calc(180ms + var(--i, 0) * 80ms), calc(180ms + var(--i, 0) * 80ms), 0s, 0s; }
.js .ws-show.is-in .workspace__browser, .js .ws-show.is-in .ws-aside__item { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js .ws-show .workspace__browser, .js .ws-show .ws-aside__item { opacity: 1; transform: none; filter: none; transition: none; }
  .ws-show .workspace__zone-shot { transition: none; }
}

@media (max-width: 900px) {
  .ws-show .workspace__case { display: flex; flex-direction: column; }
  .ws-show .ws-aside { order: -1; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-show .ws-aside__item { aspect-ratio: 16 / 9; border-radius: 0.85rem; }
}
@media (max-width: 700px) { .ws-show .workspace__zone { aspect-ratio: 4 / 3; } }
@media (max-width: 479px) {
  .ws-show .ws-aside {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; gap: 0.7rem; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--lp-gutter) * -1); padding-inline: var(--lp-gutter);
  }
  .ws-show .ws-aside::-webkit-scrollbar { display: none; }
  .ws-show .ws-aside__item { aspect-ratio: auto; scroll-snap-align: center; border: 0; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
  .ws-show .ws-aside__item.is-active { box-shadow: none; }
  .ws-show .ws-aside__item img { position: static; aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--ink-700); border-radius: 1rem; background: var(--ink-850); }
  .ws-show .ws-aside__item.is-active img { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
  .ws-show .ws-aside__cap { position: static; padding: 0.5rem 0.15rem 0 0.35rem; background: none; font-size: 0.62rem; letter-spacing: 0.14em; }
  .ws-show .workspace__browser { border-radius: 0.85rem; }
}

/* the showcase's heading and lead, as on the original (.workspace__head,
   .t-h2, .t-body.section__lead): left-aligned, 1rem apart, 2.5rem above the
   case, heading with the original's gradient sweep */
.ws-show .workspace__head { display: grid; gap: 1rem; justify-items: start; width: 100%; max-width: 1406px; margin: 0 auto 2.5rem; }
.ws-show__title { margin: 0; color: var(--lp-head); font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 560; line-height: 1.04; letter-spacing: -0.02em; }
.ws-show__lead { max-width: 46rem; margin: 0; color: var(--cream-300); font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; text-wrap: pretty; }
.js .ws-show .workspace__head { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1); }
.js .ws-show.is-in .workspace__head { opacity: 1; transform: none; filter: none; }
.js .ws-show .workspace__browser { transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) { .js .ws-show .workspace__head { opacity: 1; transform: none; filter: none; transition: none; } }
@media (max-width: 767.98px) {
  .ws-show .workspace__head { padding-inline: 14px; }
  .ws-show__title { font-size: 28px; line-height: 1.1; }
}

/* Income card: a drawn Earnings panel in place of the old square render,
   which was cropped off-centre in the 16:10 slot and did not say what the
   card says. Same illustration language as the others; the four lines sum to
   the total. Centred in the slot, which keeps the card's height. */
.lp-ill--note { display: grid; place-items: center; aspect-ratio: auto; min-height: 0; padding: 18px; }
.lp-ill--note svg { width: 100%; max-width: 360px; }

/* ===========================================================================
   HERO DOT RING - after the particle ring on aistudio.google.com's hero
   Google's is a pre-rendered video (their asset, not reused). This is drawn
   live on a canvas by lander.js: a rounded-rectangle band of dots, thirty
   rows deep (twenty on phones), wider than the hero so it runs off both sides, fading from
   full in the middle to almost nothing at the edges. The dots stream slowly
   along the band, a light sweeps round it every 7s (their loop's length),
   each dot twinkles on its own phase, and about one in ten is AIWA amber or
   orange where theirs are blue. Above the colour field and its darkening
   layer, under the content and the hero's bottom fade.
   =========================================================================== */
.lp-hero__dots { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1); }
.lp-hero__dots.is-on { opacity: 1; }

/* ===========================================================================
   NAV - cocodly.com's scroll behaviour, AIWA's own bar
   Measured off cocodly at 1440: at the top the header is full width, clear
   (no fill, no border, no blur) and roomy (22.5px / 45px padding). After a
   few pixels of scroll it contracts into a 1200px pill flush against the
   top of the page, not floating below it: 11.25px / 30px padding, a 1px
   edge, a translucent fill over a 24px blur and a soft shadow, all
   animated over .5s cubic-bezier(.16, 1, .3, 1). Under 1024px it stays
   full width and only gains its fill and bottom rule, over .15s.
   Here the fill is the bar's existing warm glass (--nav-glass), and the
   logo keeps its line with the page at the top (38px inside a 1328px row).
   The header itself is now only the fixed layer; the look lives on the bar.
   =========================================================================== */
.lp-nav { background: transparent; border-bottom: 0; }
.lp-nav::before, .lp-nav.is-menu::before { content: none; }
.lp-nav__bar {
  border: 1px solid transparent; border-top-width: 0; background-color: transparent;
  transition: background-color .15s cubic-bezier(0, 0, .2, 1), border-color .15s cubic-bezier(0, 0, .2, 1);
}
.lp-nav.is-stuck .lp-nav__bar, .lp-nav.is-menu-open .lp-nav__bar {
  background-color: var(--nav-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
@media (min-width: 1024px) {
  .lp-nav__bar {
    max-width: 1328px; min-height: 0; padding: 22px 38px;
    border-width: 1px; border-radius: 0;
    transition: padding .5s cubic-bezier(.16, 1, .3, 1), max-width .5s cubic-bezier(.16, 1, .3, 1),
                border-radius .5s cubic-bezier(.16, 1, .3, 1), background-color .5s cubic-bezier(.16, 1, .3, 1),
                box-shadow .5s cubic-bezier(.16, 1, .3, 1), -webkit-backdrop-filter .5s cubic-bezier(.16, 1, .3, 1),
                backdrop-filter .5s cubic-bezier(.16, 1, .3, 1), border-color .5s cubic-bezier(.16, 1, .3, 1);
  }
  .lp-nav.is-stuck .lp-nav__bar {
    /* 11px on the right as well as top and bottom: the 38px button's curve
       then sits concentric inside the pill's end (pill 62px tall, radius 31;
       button radius 19; an even 11px ring between them). The logo side is
       not a curve, so it keeps a normal inset. */
    max-width: 1200px; padding: 11px 11px 11px 26px; border-radius: 999px;
    border-color: rgb(255 255 255 / .09);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: 0 8px 30px rgb(0 0 0 / .35);
  }
}
@media (prefers-reduced-motion: reduce) { .lp-nav__bar { transition: none; } }

/* ===========================================================================
   AGENCY-FIRST HOMEPAGE - the client's brief (AIWA website copy tab)
   Structure and copy follow the brief: hero, client request -> AIWA -> app,
   before / with AIWA, the AI product team, what agencies can build, Agency
   vs White Label, pricing, FAQ, closing CTA. Styling stays the lander's own
   (grounds, frames, buttons, glass, amber accents). The brief asks for
   eyebrows over section headlines, so .lp-eyebrow brings them back as a
   small amber line in sentence case.
   =========================================================================== */
.lp-eyebrow { margin: 0 0 14px; color: var(--lp-amber); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; }
.lp-shift, .lp-kinds, .lp-offers { position: relative; background: var(--lp-bg); padding: 96px var(--lp-gutter); }
@media (min-width: 1024px) { .lp-shift, .lp-kinds, .lp-offers { padding-block: 140px; } }
.lp-shift__head, .lp-kinds__head, .lp-offers__head, .lp-pricing__head { max-width: 860px; margin: 0 auto; text-align: center; }
.lp-kinds__head .lp-lead { max-width: 620px; margin: 18px auto 0; }

/* ---- hero -------------------------------------------------------------- */
.lp-hero__inner { max-width: 1120px; }
.lp-hero__title { font-size: clamp(38px, 4.6vw, 64px); text-wrap: balance; }
.lp-hero__second { color: var(--lp-muted); }
.lp-hero__sub { max-width: 800px; margin: 22px auto 0; }
.lp-hero__support { max-width: 640px; margin: 14px auto 0; color: var(--lp-muted); font-size: 17px; line-height: 1.5; }
.lp-hero__ctas, .lp-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.lp-ghost-btn--lg { padding: 15px 28px; font-size: 17px; line-height: 22px; }
.lp-caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--lp-muted); font-size: 14px; }
.lp-caps li + li::before { content: '\00B7'; margin-right: 12px; color: var(--lp-dim); }

/* ---- client request -> AIWA -> working application ---------------------- */
.lp-flow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr);
  align-items: stretch; gap: 14px; width: 100%; max-width: 1406px; margin: 0 auto 40px;
}
.lp-flow__card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 2px solid var(--lp-line); border-radius: 22px; background: var(--lp-card); }
.lp-flow__label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--lp-muted); font-size: 13px; font-weight: 500; }
.lp-flow__label img { width: auto; height: 20px; }
.lp-flow__quote { margin: 0; color: var(--lp-head); font-size: 18px; line-height: 1.5; }
.lp-flow__arrow { display: grid; place-items: center; color: var(--lp-dim); }
.lp-flow__arrow .lp-ico { width: 20px; height: 20px; }
.lp-flow__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-flow__steps li {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 12px; padding: 9px 12px;
  border-radius: 12px; background: var(--lp-inset); opacity: .45;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1), background-color .4s cubic-bezier(.22, 1, .36, 1);
}
.lp-flow__steps b { color: var(--lp-head); font-size: 15px; font-weight: 500; }
.lp-flow__steps small { grid-column: 2; color: var(--lp-muted); font-size: 13px; }
.lp-flow__dot { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--lp-line-3); border-radius: 50%; transition: background-color .3s ease, border-color .3s ease; }
.lp-flow__dot .lp-ico { width: 12px; height: 12px; opacity: 0; color: #1a0e06; stroke-width: 3; transition: opacity .3s ease; }
.lp-flow__steps li.is-active { opacity: 1; background: rgb(255 179 0 / .07); }
.lp-flow__steps li.is-active .lp-flow__dot { border-color: var(--lp-amber); box-shadow: 0 0 0 4px rgb(253 172 83 / .14); }
.lp-flow__steps li.is-done { opacity: 1; }
.lp-flow__steps li.is-done .lp-flow__dot { border-color: transparent; background: var(--lp-amber); }
.lp-flow__steps li.is-done .lp-flow__dot .lp-ico { opacity: 1; }
.lp-flow__live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--lp-good); opacity: 0; transition: opacity .5s ease; }
.lp-flow__live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp-flow__shot { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 160px; border: 1px solid var(--lp-line-2); border-radius: 14px; background: var(--lp-inset); }
.lp-flow__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .35; filter: blur(6px) saturate(.4); transform: scale(1.03); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), filter .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.lp-flow__app.is-ready .lp-flow__shot img { opacity: 1; filter: none; transform: none; }
.lp-flow__app.is-ready .lp-flow__live { opacity: 1; }
@media (max-width: 900px) {
  .lp-flow { grid-template-columns: minmax(0, 1fr); }
  .lp-flow__arrow { transform: rotate(90deg); }
  .lp-flow__shot { aspect-ratio: 3 / 2; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .lp-flow__steps li, .lp-flow__shot img, .lp-flow__live { transition: none; } }

/* ---- before / with AIWA ------------------------------------------------ */
.lp-shift__body { max-width: 680px; margin: 22px auto 0; }
.lp-shift__body p { margin: 0 0 10px; color: var(--lp-muted); font-size: 18px; line-height: 1.55; }
.lp-shift__option { color: var(--lp-head) !important; font-weight: 500; }
.lp-shift__highlight { max-width: 860px; margin: 48px auto 0; color: var(--lp-head); font-size: clamp(24px, 3vw, 36px); font-weight: 560; line-height: 1.2; letter-spacing: -0.01em; text-align: center; }
.lp-shift__highlight span { color: var(--lp-amber); }
.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 48px auto 0; }
.lp-compare__col { padding: 32px; border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-panel); }
.lp-compare__col h3 { margin: 0 0 16px; color: var(--lp-muted); font-size: 18px; font-weight: 500; }
.lp-compare__col ul { margin: 0; padding: 0; list-style: none; }
.lp-compare__col li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--lp-line-2); color: var(--lp-muted); font-size: 16px; line-height: 1.45; }
.lp-compare__col li .lp-ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--lp-dim); }
.lp-compare__col--with { border-color: color-mix(in srgb, var(--lp-amber) 35%, var(--lp-line)); background: var(--lp-card); box-shadow: 0 24px 60px -30px rgb(255 94 0 / .35); }
.lp-compare__col--with h3 { color: var(--lp-head); }
.lp-compare__col--with li { color: var(--lp-fg); }
.lp-compare__col--with li .lp-ico { color: var(--lp-amber); }
@media (max-width: 767.98px) { .lp-compare { grid-template-columns: minmax(0, 1fr); } .lp-compare__col { padding: 24px; } }

/* ---- AI product team --------------------------------------------------- */
.lp-plan__close { margin: 28px 0 0; color: var(--lp-head); font-size: 20px; font-weight: 500; line-height: 1.35; }
.lp-plan__close span { color: var(--lp-muted); }
.lp-feats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: var(--lp-wrap); margin: 56px auto 0; }
.lp-feat { padding: 24px; border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-card); }
.lp-feat .lp-ico { width: 22px; height: 22px; color: var(--lp-amber); }
.lp-feat h3 { margin: 14px 0 6px; color: var(--lp-head); font-size: 17px; font-weight: 500; }
.lp-feat p { margin: 0; color: var(--lp-muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 1023.98px) { .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .lp-feats { grid-template-columns: minmax(0, 1fr); } }

/* ---- what agencies can build ------------------------------------------ */
.lp-kinds .lp-frame { max-width: var(--lp-wrap); margin: 56px auto 0; }
.lp-kinds__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--p-stage); }
.lp-kind { padding: 24px; border-radius: var(--r-card); background: var(--lp-card); }
.lp-kind .lp-ico { width: 22px; height: 22px; color: var(--lp-amber); }
.lp-kind h3 { margin: 16px 0 6px; color: var(--lp-head); font-size: 18px; font-weight: 500; }
.lp-kind p { margin: 0; color: var(--lp-muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 1023.98px) { .lp-kinds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .lp-kinds__grid { grid-template-columns: minmax(0, 1fr); } }
.lp-tpl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 32px; max-width: var(--lp-wrap); margin: 48px auto 0; }
.lp-tpl__copy h3 { margin: 0 0 10px; color: var(--lp-head); font-size: 24px; font-weight: 560; }
.lp-tpl__copy p { margin: 0 0 22px; color: var(--lp-muted); font-size: 17px; line-height: 1.5; }
.lp-tpl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp-tpl__card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--lp-line); border-radius: 18px; background: var(--lp-card); transition: border-color .25s ease; }
.lp-tpl__card:hover { border-color: color-mix(in srgb, var(--lp-amber) 45%, var(--lp-line)); }
.lp-tpl__card > .lp-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--lp-amber); }
.lp-tpl__card b { display: block; color: var(--lp-head); font-size: 16px; font-weight: 500; }
.lp-tpl__card small { color: var(--lp-muted); font-size: 13px; }
.lp-tpl__go { width: 16px !important; height: 16px !important; margin-left: auto; color: var(--lp-dim) !important; }
@media (max-width: 900px) { .lp-tpl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 499.98px) { .lp-tpl__list { grid-template-columns: minmax(0, 1fr); } }

/* ---- Agency vs White Label: White Label reads as the higher tier -------- */
.lp-offers { overflow: hidden; isolation: isolate; }
.lp-offers > :not(.lp-wl__light) { position: relative; z-index: 1; }
.lp-offers__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; gap: 20px; max-width: var(--lp-wrap); margin: 56px auto 0; }
.lp-offer { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px; border: 2px solid var(--lp-line); border-radius: 28px; background: var(--lp-card); }
.lp-offer__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--lp-amber); font-size: 14px; font-weight: 500; }
.lp-offer__tag { padding: 3px 10px; border: 1px solid var(--lp-line-3); border-radius: 999px; color: var(--lp-muted); font-size: 12px; }
.lp-offer__title { margin: 0; color: var(--lp-head); font-size: clamp(24px, 2.4vw, 30px); font-weight: 560; line-height: 1.15; }
.lp-offer__text { margin: 0; color: var(--lp-muted); font-size: 17px; line-height: 1.5; }
.lp-offer__sub { margin: 8px 0 0; color: var(--lp-head); font-size: 15px; font-weight: 500; }
.lp-offer__list { margin: 0; padding: 0; list-style: none; }
.lp-offer__list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; color: var(--lp-fg); font-size: 16px; line-height: 1.45; }
.lp-offer__list .lp-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--lp-amber); }
.lp-offer__cta { margin-top: auto; padding-top: 12px; }
.lp-offer--wl {
  border-color: transparent;
  background:
    radial-gradient(75% 30% at 50% 0%, rgba(254, 160, 2, 0.18), transparent 72%),
    linear-gradient(180deg, rgba(251, 249, 246, 0.07), rgba(251, 249, 246, 0.03)),
    var(--lp-card);
  box-shadow: inset 0 1px 1px rgba(251, 249, 246, 0.25), 0 40px 90px -40px rgb(255 94 0 / .45), 0 2px 6px rgb(0 0 0 / .3);
}
.lp-offer__yours { margin: 6px 0; color: var(--lp-head); font-size: clamp(26px, 2.8vw, 38px); font-weight: 560; line-height: 1.12; letter-spacing: -0.01em; }
.lp-offer--wl .lp-reel { border-radius: 16px; }
.lp-ghl { max-width: 860px; margin: 28px auto 0; padding: 24px 28px; border: 2px solid var(--lp-line); border-radius: 22px; background: var(--lp-panel); text-align: center; }
.lp-ghl p { margin: 0; color: var(--lp-muted); font-size: 15px; line-height: 1.55; }
.lp-ghl .lp-ghl__q { margin-bottom: 6px; color: var(--lp-head); font-size: 17px; font-weight: 500; }
.lp-ghl__q span { color: var(--lp-muted); font-weight: 400; }
@media (max-width: 900px) { .lp-offers__grid { grid-template-columns: minmax(0, 1fr); } .lp-offer { padding: 26px; } }

/* ---- pricing: two plans ------------------------------------------------ */
.lp-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; max-width: 1040px; margin: 56px auto 0; }
.lp-price-card { position: relative; display: flex; flex-direction: column; padding: 36px; border: 2px solid var(--lp-line); border-radius: 28px; background: var(--lp-card); }
.lp-price-card--wl {
  border-color: transparent;
  background: radial-gradient(80% 30% at 50% 0%, rgba(254, 160, 2, 0.16), transparent 72%), var(--lp-card);
  box-shadow: inset 0 1px 1px rgba(251, 249, 246, 0.22), 0 40px 90px -40px rgb(255 94 0 / .45);
}
.lp-price-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--lp-head); font-size: 22px; font-weight: 560; }
.lp-price-card__badge { padding: 3px 10px; border-radius: 999px; background: rgb(255 94 0 / 0.14); color: var(--lp-amber); font-size: 12px; font-weight: 500; }
.lp-price-card__for { margin: 8px 0 22px; color: var(--lp-muted); font-size: 15px; }
.lp-price-card__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.lp-price-card__amount > b { color: var(--lp-head); font-size: 48px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-price-card__amount > span { color: var(--lp-muted); font-size: 16px; }
.lp-price-card__amount em { flex-basis: 100%; margin-top: 6px; color: var(--lp-muted); font-size: 15px; font-style: normal; }
.lp-price-card__amount em b { color: var(--lp-head); font-size: 17px; font-weight: 600; }
.lp-price-card__btn { display: flex; justify-content: center; width: 100%; margin-top: 24px; }
.lp-price-card__btn .lp-ring-btn__face { width: 100%; justify-content: center; }
.lp-price-card__inc { margin: 28px 0 8px; color: var(--lp-muted); font-size: 13px; font-weight: 500; }
.lp-price-card__list { margin: 0; padding: 0; list-style: none; }
.lp-price-card__list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; color: var(--lp-fg); font-size: 15px; line-height: 1.45; }
.lp-price-card__list .lp-ico { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--lp-amber); }
.lp-price-card__note { margin: auto 0 0; padding-top: 20px; color: var(--lp-muted); font-size: 13px; }
.lp-pricing__after { max-width: 720px; margin: 36px auto 0; text-align: center; }
.lp-pricing__solo { margin: 0; color: var(--lp-fg); font-size: 16px; }
.lp-pricing__solo a { color: var(--lp-amber); text-decoration: underline; text-underline-offset: 3px; }
.lp-pricing__byok { margin: 12px 0 0; color: var(--lp-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 767.98px) { .lp-prices { grid-template-columns: minmax(0, 1fr); } .lp-price-card { padding: 26px; } }

/* ---- FAQ and closing section ------------------------------------------ */
.lp-faq__eyebrow { margin-bottom: 44px; text-align: center; }
.lp-faq__item p:not(:last-of-type) { padding-bottom: 10px; }
.lp-faq__more { margin: 28px 0 0; color: var(--lp-muted); font-size: 16px; text-align: center; }
.lp-faq__more a { color: var(--lp-head); text-decoration: underline; text-decoration-color: var(--lp-line-3); text-underline-offset: 3px; }
.lp-cta__h { position: relative; max-width: 1000px; margin: 0 auto; color: var(--lp-head); font-size: clamp(32px, 4.4vw, 60px); font-weight: 560; line-height: 1.08; letter-spacing: -0.02em; text-align: center; }
.lp-cta__body { margin: 26px auto 0; }
.lp-cta__body p { margin: 0 0 6px; color: var(--lp-muted); font-size: 19px; line-height: 1.5; }
.lp-cta__final { margin: 44px 0 0; color: var(--lp-head); font-size: 18px; font-weight: 500; line-height: 1.4; }
.lp-cta__final span { color: var(--lp-amber); }

/* ---- nav: the brief's Sign In beside Start Building ------------------- */
.lp-nav__signin { display: none; }
@media (min-width: 1024px) {
  .lp-nav__signin { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; color: #ccc; font-size: 14.5px; font-weight: 500; letter-spacing: 0.025em; transition: color .2s ease; }
  .lp-nav__signin:hover { color: #fff; }
  .lp-nav__list { gap: 0; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) { .lp-nav__link { padding: 0 9px; font-size: 14px; } }

/* Pricing cards: as on the White Label page, the plan's head is its own raised
   cell and the beam circles that cell only, stopping above the button. The
   card is inset 8px so the cell's 20px corners sit concentric with its 28px. */
.lp-price-card { padding: 8px 8px 30px; }
.lp-price-card > :not(.lp-price-card__top) { margin-inline: 28px; }
.lp-price-card__top { position: relative; padding: 28px 28px 30px; border: 1px solid var(--lp-line-2); border-radius: 20px; background: var(--lp-inset); }
.lp-price-card--wl { background: var(--lp-card); }
.lp-price-card--wl .lp-price-card__top { border-color: transparent; background: radial-gradient(90% 60% at 50% 0%, rgba(254, 160, 2, 0.14), transparent 75%), var(--lp-inset); }
.lp-price-card__top .lp-price-card__amount { min-height: 84px; align-content: flex-start; } /* fits the "or $1,990/year" line, so both buttons line up */
.lp-price-card__btn { width: auto; margin-top: 22px; }
.lp-price-card__note { margin-top: auto; }
@media (max-width: 767.98px) {
  .lp-price-card { padding: 6px 6px 24px; }
  .lp-price-card > :not(.lp-price-card__top) { margin-inline: 20px; }
  .lp-price-card__top { padding: 22px 20px 24px; border-radius: 22px; }
}

/* Phones: the four stages sit two by two so the flow stays about one screen
   tall instead of three. */
@media (max-width: 599.98px) {
  .lp-flow { gap: 8px; }
  .lp-flow__card { gap: 12px; padding: 16px; border-radius: 20px; }
  .lp-flow__quote { font-size: 16px; }
  .lp-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-flow__steps li { grid-template-columns: 18px 1fr; column-gap: 8px; padding: 8px 10px; }
  .lp-flow__dot { width: 18px; height: 18px; }
  .lp-flow__steps small { font-size: 13px; line-height: 1.3; }
  .lp-flow__shot { aspect-ratio: 16 / 10; }
  .lp-flow__arrow .lp-ico { width: 16px; height: 16px; }
}

/* Phones: the capability row wraps, and a wrapped line would open on a
   separator dot, so each item becomes a small chip instead. */
@media (max-width: 599.98px) {
  .lp-caps { gap: 8px; }
  .lp-caps li + li::before { content: none; }
  .lp-caps li { padding: 5px 11px; border: 1px solid var(--lp-line-2); border-radius: 999px; font-size: 13px; }
}

/* ===========================================================================
   MASTRA GRAMMAR over the client's copy
   Every section after the showcase reads the same way mastra.ai's do: one
   centred two-tone statement (bright sentence, muted continuation, no
   eyebrow, no pill), a long breath, then a tray whose notched tab carries the
   brief's eyebrow line, holding cards. Measured off mastra.ai at 1440: the
   statement is 40/44 at ~1000px wide, about 130px sits between it and the
   tab, cards are 2px-bordered on a quieter fill with the text set first and
   the colour kept for state. Radii, insets and colours stay AIWA's own
   (--r-frame / --r-stage / --r-card, --lp-*), so the trays nest concentric.
   =========================================================================== */
.lp-shift__title, .lp-kinds__title, .lp-offers__title, .lp-pricing__title, .lp-faq__title {
  max-width: 1000px; margin: 0 auto; text-align: center;
}
.lp-shift__lead { max-width: 680px; margin: 22px auto 0; text-align: center; }
.lp-shift .lp-frame, .lp-kinds .lp-frame, .lp-offers .lp-frame, .lp-pricing .lp-frame, .lp-faq .lp-frame, .lp-feats__frame {
  margin-top: clamp(88px, 9vw, 132px);
}
.lp-kinds .lp-frame { max-width: calc(var(--lp-wrap) + 2 * 24px); }
.lp-kinds .lp-tpl__frame { margin-top: clamp(96px, 9vw, 132px); }
.lp-pricing { border-top: 0; }

/* One card for every tray: the lander's note card. */
.lp-compare__col, .lp-feat, .lp-kind, .lp-tpl__copy, .lp-tpl__card, .lp-flow__card {
  border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-card);
}
.lp-kind, .lp-feat { padding: clamp(22px, 2.2vw, 30px); }
.lp-kind .lp-ico, .lp-feat .lp-ico, .lp-tpl__card > .lp-ico:first-child { color: var(--lp-fg); }
.lp-kind h3, .lp-feat h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.lp-kind p, .lp-feat p { font-size: 15px; line-height: 1.5; }

/* Before / with: the old way sits in the deeper fill, AIWA in the card fill.
   The amber is only on the ticks. */
.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-stage); max-width: none; margin: 0; }
.lp-compare__col { padding: clamp(24px, 2.6vw, 36px); box-shadow: none; }
.lp-compare__col--before { background: var(--lp-inset); }
.lp-compare__col--with { border-color: var(--lp-line); }
.lp-compare__col h3 { margin-bottom: 10px; font-size: 17px; }
@media (max-width: 767.98px) { .lp-compare { grid-template-columns: minmax(0, 1fr); } }

/* The product team's features sit in their own tray under the plan. */
.lp-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--p-stage); max-width: none; margin: 0; }
.lp-feats__frame { position: relative; z-index: 1; }
@media (max-width: 1023.98px) { .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .lp-feats { grid-template-columns: minmax(0, 1fr); } }

/* Templates tray: the pitch as a deep card, the four starters beside it. */
.lp-tpl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--p-stage); max-width: none; margin: 0; align-items: stretch; }
.lp-tpl__copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.6vw, 36px); background: var(--lp-inset); }
.lp-tpl__copy .lp-ghost-btn { margin-top: auto; }
.lp-tpl__copy h3 { font-size: 20px; font-weight: 500; }
.lp-tpl__list { gap: var(--p-stage); }
.lp-tpl__card { height: 100%; padding: 22px 24px; border-radius: var(--r-card); }
.lp-tpl__card b { font-size: 17px; }
@media (max-width: 900px) { .lp-tpl { grid-template-columns: minmax(0, 1fr); } }

/* Agency / White Label: mastra's case-study card (statement first, art,
   then a footer with the name and the action). The Agency card carries the
   White Label gallery slideshow as client work; White Label carries the reel. */
.lp-offers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-stage); max-width: none; margin: 0; }
.lp-offer { gap: 20px; padding: clamp(22px, 2.4vw, 32px); border: 2px solid var(--lp-line); border-radius: var(--r-card); background: var(--lp-card); }
.lp-offer .lp-note__big { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; }
.lp-offer .lp-note__art { margin-top: 0; }
.lp-offer .lp-show { aspect-ratio: 3 / 2; }
/* the reel keeps the glass frame it had in the old White Label section
   (.lp-wl .lp-panel--shot); the card carries .lp-wl for that reason only */
.lp-offer__reel { flex: 0 0 auto; }
.lp-offer--wl.lp-wl { border-block-color: transparent; }
.lp-offer__sub { margin: 0; }
.lp-offer__list li { padding: 5px 0; font-size: 15px; }
.lp-offer .lp-note__by { flex-wrap: wrap; margin-top: auto; }
.lp-offer .lp-note__by p { margin: 2px 0 0; }
.lp-offer--wl {
  border-color: transparent;
  background: radial-gradient(80% 26% at 50% 0%, rgba(254, 160, 2, 0.12), transparent 72%), var(--lp-card);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lp-amber) 22%, var(--lp-line)), inset 0 1px 1px rgba(251, 249, 246, 0.18);
}
.lp-ghl { max-width: 760px; margin: 32px auto 0; padding: 0; border: 0; background: none; color: var(--lp-muted); font-size: 16px; line-height: 1.55; text-align: center; }
.lp-ghl b { color: var(--lp-head); font-weight: 500; }
@media (max-width: 900px) { .lp-offers__grid { grid-template-columns: minmax(0, 1fr); } }

/* Pricing: the two plans on one stage, as concentric cards. */
.lp-prices__frame { max-width: 1120px; }
.lp-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-stage); max-width: none; margin: 0; }
.lp-price-card { border-radius: var(--r-card); box-shadow: none; }
.lp-price-card__top { border-radius: max(8px, calc(var(--r-card) - 8px)); }
.lp-price-card--wl { border-color: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lp-amber) 22%, var(--lp-line)); }
.lp-pricing__after { margin-top: 32px; }
@media (max-width: 767.98px) {
  .lp-prices { grid-template-columns: minmax(0, 1fr); }
  .lp-price-card__top { border-radius: max(8px, calc(var(--r-card) - 6px)); }
}

/* FAQ: statement over the tray, like the rest. */
.lp-faq__title { margin-bottom: 0; }

/* The showcase: the original's title and lead, then the request-to-app flow
   in a tray, then the workspace case. The brief's line is longer than
   "Build · Test · Ship", so it steps the size down to hold two lines. */
.ws-show__title--brief { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.08; }
.lp-flow__frame { max-width: 1406px; margin: 72px auto 40px; }
.lp-flow { max-width: none; margin: 0; gap: var(--p-stage); }
.lp-flow__card { padding: clamp(16px, 1.6vw, 22px); }
.lp-flow__req { background: var(--lp-inset); }

/* Hero: the brief's headline over the restored composer. The second CTA is
   a quiet text link after the key hint, as mastra's "Quickstart" sits next
   to its pill. */
.lp-hero__title { max-width: 1200px; margin-inline: auto; }
.lp-hero__sub { max-width: 760px; margin: 0 auto 36px; }
.lp-hero__hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.lp-hero__or { color: var(--lp-dim); }
.lp-hero__link { display: inline-flex; align-items: center; gap: 6px; color: var(--lp-head); font-family: var(--lp-sans); font-size: 15px; font-weight: 500; transition: color .2s ease; }
.lp-hero__link .lp-ico { width: 16px; height: 16px; color: var(--lp-muted); transition: transform .25s var(--lp-ease), color .2s ease; }
.lp-hero__link:hover { color: var(--lp-amber); }
.lp-hero__link:hover .lp-ico { color: var(--lp-amber); transform: translate(2px, -2px); }

/* Phones: the brief's tab lines run longer than the original's one- and
   two-word tabs, so on a narrow tray they may take two lines instead of
   pushing past the screen edge. */
@media (max-width: 599.98px) {
  .lp-frame__tab { width: max-content; max-width: calc(100% - 64px); padding: 12px 20px 6px; font-size: 15px; line-height: 20px; white-space: normal; text-align: center; text-wrap: balance; }
}
@media (max-width: 599.98px) {
  .lp-hero__or { display: none; }
  .lp-hero__link { flex-basis: 100%; justify-content: center; margin-top: 6px; }
}

/* ===========================================================================
   HERO DEMO - replaces the composer. An 18s loop rendered from
   scripts/hero-demo/scene.html by scripts/build-hero-demo.py: a client's
   request arrives, goes to AIWA, is planned, built and tested, and goes back
   live. It sits in the same glass as the White Label reel (specular rim,
   recessed window) so the two read as one family. The primary CTA returns as
   a button; White Label stays a quiet text link beside it, as mastra pairs
   its pill with "Quickstart".
   =========================================================================== */
.lp-hero__ctas { align-items: center; gap: 12px 28px; margin-top: 34px; }
.lp-hero__demo { position: relative; z-index: 2; width: min(100%, 1120px); margin: clamp(44px, 5vw, 64px) auto 0; }
.lp-hero__demo-frame {
  --r-demo: clamp(20px, 2.4vw, 32px); --p-demo: clamp(6px, 0.9vw, 12px);
  position: relative; isolation: isolate; overflow: hidden; padding: var(--p-demo); border-radius: var(--r-demo);
  background:
    radial-gradient(75% 28% at 50% 0%, rgba(254, 160, 2, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(251, 249, 246, 0.10), rgba(251, 249, 246, 0.04));
  box-shadow:
    inset 0 1px 1px rgba(251, 249, 246, 0.35),
    inset 0 0 36px 1px rgba(251, 249, 246, 0.06),
    0 40px 90px -30px rgba(0, 0, 0, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.08);
  backdrop-filter: blur(20px) saturate(165%) brightness(1.08);
}
/* specular rim, brightest top-left, as on the reel */
.lp-hero__demo-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 215deg at 25% 0%, rgba(251, 249, 246, 0.55), rgba(251, 249, 246, 0.06) 35%, rgba(251, 249, 246, 0.02) 60%, rgba(254, 160, 2, 0.14) 88%, rgba(251, 249, 246, 0.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.lp-hero__demo-video {
  display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1200; object-fit: cover;
  border-radius: calc(var(--r-demo) - var(--p-demo)); background: #11100e;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .lp-hero__demo-frame { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lp-panel); }
}
@media (max-width: 599.98px) {
  .lp-hero__ctas { flex-direction: column; gap: 16px; }
  .lp-hero__demo { width: calc(100% + 16px); margin-inline: -8px; }
}

/* What agencies can build: each kind shows a real example from the White
   Label gallery (its 3:2 copies in images/lander/showcase, cut from the top
   like the gallery's own cover/top rule). The card insets the picture so its
   corners nest concentric with the card's. No hover zoom (banned). */
.lp-kind { display: flex; flex-direction: column; padding: 8px; }
.lp-kind__img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top;
  border: 1px solid var(--lp-line-2); border-radius: max(8px, calc(var(--r-card) - 8px)); background: var(--lp-inset);
}
.lp-kind h3 { margin: 16px 14px 4px; }
.lp-kind p { margin: 0 14px 16px; }
.lp-shift__lead p + p { margin-top: 10px; }

/* ===========================================================================
   HERO, after the owner's Framer hero (humorous-leaders-080265.framer.app),
   measured off the live page and recoloured in AIWA's warm palette:
   - a panel inset from both sides with 24px bottom corners, which here runs
     from the very top of the page (behind the nav), not from under it;
   - a dot grid: 4px dots on a 24px pitch at 5% white (their 96px SVG tile
     shown at 48px, inverted, at 5% opacity);
   - light rays from the top-left (their Rays image at 59%), drawn here as
     blurred beams fanning from a point off the panel's corner;
   - colour only at the bottom, behind the video: a warm wash and, over it, a
     giant faded wordmark (their "Swiftify"), masked away downward;
   - the title in their style: regular weight, -0.04em, 1.2 leading, the
     first line fading off to the right, one gradient word, the second line
     at 50% white;
   - their ticker: 700px wide, edges masked over 17.5%, 38px pills at 5%
     white with a check, 14px text at 64% white.
   The old blobs and the dot ring canvas are gone from the markup (heroDots()
   finds no canvas and returns).
   =========================================================================== */
.lp-hero { --panel-in: clamp(10px, 2.1vw, 30px); --frame-in: 320px; overflow: hidden; background: var(--lp-bg); padding-bottom: 0; }
.lp-hero::before, .lp-hero::after { content: none; }
.lp-hero__panel {
  position: absolute; z-index: 0; top: 0; left: var(--panel-in); right: var(--panel-in);
  /* it ends part-way down the video: heroDemo() measures --panel-bottom */
  bottom: var(--panel-bottom, 220px);
  overflow: hidden; border-radius: 0 0 24px 24px; background: #0b0a09; pointer-events: none;
}
.lp-hero__dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 12px 12px, rgb(255 255 255 / 0.05) 2px, transparent 2.5px);
  background-size: 24px 24px; background-position: center top;
}
.lp-hero__rays { position: absolute; left: -12%; top: -18%; width: 70%; height: 120%; opacity: 0.6; filter: blur(22px); mix-blend-mode: screen; }
.lp-hero__rays i {
  position: absolute; left: 0; top: 0; width: 150%; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(255 236 214 / 0.22), rgb(255 226 196 / 0.10) 35%, transparent 75%);
  border-radius: 50%; animation: lp-ray 9s ease-in-out infinite alternate;
}
.lp-hero__rays i:nth-child(1) { height: 70px;  --a: 24deg; animation-delay: 0s; }
.lp-hero__rays i:nth-child(2) { height: 120px; --a: 33deg; animation-delay: -2s; opacity: .85; }
.lp-hero__rays i:nth-child(3) { height: 50px;  --a: 41deg; animation-delay: -4s; }
.lp-hero__rays i:nth-child(4) { height: 140px; --a: 52deg; animation-delay: -6s; opacity: .6; }
.lp-hero__rays i:nth-child(5) { height: 60px;  --a: 64deg; animation-delay: -1s; opacity: .5; }
.lp-hero__rays i { transform: rotate(var(--a)); }
@keyframes lp-ray { 0% { transform: rotate(var(--a)); opacity: .55; } 100% { transform: rotate(calc(var(--a) + 3deg)); opacity: 1; } }
.lp-hero__colors {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: calc(var(--frame-in) + 300px);
  background:
    radial-gradient(34% 46% at 50% 62%, rgb(255 150 60 / 0.55), transparent 70%),
    radial-gradient(30% 60% at 14% 100%, rgb(232 74 34 / 0.95), transparent 70%),
    radial-gradient(32% 60% at 86% 100%, rgb(253 160 60 / 0.9), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgb(191 78 11 / 0.85), transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.lp-hero__word {
  position: absolute; left: 50%; bottom: calc(var(--frame-in) * -0.55); translate: -50% 0;
  color: rgb(255 240 225 / 0.22); font-family: var(--lp-sans); font-size: min(34vw, 520px); font-weight: 600; line-height: 1; letter-spacing: -0.06em; white-space: nowrap;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.lp-hero__inner { position: relative; z-index: 2; }

.lp-hero__title { font-weight: 400; line-height: 1.2; letter-spacing: -0.04em; }
.lp-hero__title > span:first-child {
  background: linear-gradient(287deg, rgb(255 255 255 / 0.1) -52%, #fff 53%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero__accent { font-style: normal; background: linear-gradient(102deg, #fdac53 0%, #ff6a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.lp-hero__second { color: rgb(255 255 255 / 0.5); }

.lp-ticker {
  display: flex; overflow: hidden; width: min(700px, 100%); margin: clamp(40px, 4.2vw, 61px) auto 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17.5%, #000 82.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 17.5%, #000 82.5%, transparent 100%);
}
.lp-ticker__track { display: flex; flex: 0 0 auto; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; animation: lp-tick 26s linear infinite; }
.lp-ticker__track li {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 14px; border-radius: 6px;
  background: rgb(255 255 255 / 0.05); color: rgb(255 255 255 / 0.64); font-size: 14px; line-height: 22px; white-space: nowrap;
}
.lp-ticker__track .lp-ico { width: 16px; height: 16px; color: rgb(255 255 255 / 0.64); }
@keyframes lp-tick { to { transform: translateX(-100%); } }
.lp-hero__demo { margin-top: clamp(36px, 3.5vw, 50px); }
@media (prefers-reduced-motion: reduce) { .lp-ticker__track, .lp-hero__rays i { animation: none; } }
@media (max-width: 599.98px) {
  .lp-hero__panel { border-radius: 0 0 18px 18px; }
  .lp-ticker { width: 100%; }
}
/* tuning after the first render: brighter rays like the Framer's 59% image,
   and a softer, blurred bottom wash with no hard edge at the sides */
.lp-hero__rays { left: -16%; top: -22%; width: 80%; height: 130%; opacity: 1; filter: blur(26px); }
.lp-hero__rays i { background: linear-gradient(90deg, rgb(255 238 220 / 0.30), rgb(255 228 200 / 0.14) 38%, transparent 78%); }
.lp-hero__rays i:nth-child(2) { height: 160px; }
.lp-hero__rays i:nth-child(4) { height: 190px; }
.lp-hero__colors {
  left: 0; right: 0; height: calc(var(--frame-in) + 340px); filter: blur(30px);
  background:
    radial-gradient(40% 40% at 50% 66%, rgb(255 150 60 / 0.42), transparent 72%),
    radial-gradient(42% 52% at 8% 104%, rgb(232 74 34 / 0.85), transparent 72%),
    radial-gradient(42% 52% at 92% 104%, rgb(253 160 60 / 0.8), transparent 72%),
    radial-gradient(70% 46% at 50% 108%, rgb(191 78 11 / 0.8), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%); mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
}
.lp-hero__word { bottom: calc(var(--frame-in) * -0.18); color: rgb(255 244 232 / 0.28); }
/* the lander's own h1 weight, not the Framer's regular */
.lp-hero__title { font-weight: 560; letter-spacing: -0.03em; }
/* "Aiwa codes" spans the panel's full width behind the video, as "Swiftify"
   does on the Framer hero: its top sits just under the frame's top edge and
   it fades away downward. heroDemo() fits its size to the panel's width. */
.lp-hero__word {
  left: 0; right: 0; bottom: auto; top: var(--word-top, 60%); translate: none; text-align: center;
  font-size: var(--word-size, 15vw); font-weight: 600; line-height: 0.8; letter-spacing: -0.045em;
  color: rgb(255 240 226 / 0.34); mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 80%); mask-image: linear-gradient(to bottom, #000 10%, transparent 80%);
}
/* no side padding on the hero itself; on phones only the text keeps a 16px
   inset so it never meets the screen edge, while the video runs full width */
.lp-hero { padding-left: 0; padding-right: 0; }
.lp-hero__sub { font-size: 16px; line-height: 1.5; }
@media (max-width: 599.98px) {
  .lp-hero__title, .lp-hero__sub, .lp-hero__ctas { padding-inline: 16px; }
  .lp-hero__demo { width: 100%; margin-inline: 0; }
}
.lp-nav__signin { white-space: nowrap; }
/* the panel runs the page's full width (no side inset); it keeps its rounded
   bottom corners */
.lp-hero { --panel-in: 0px; }
/* the video lines up with every section below: the page width less the
   side gutter, capped where .lp-frame caps (--lp-wrap + 48px) */
.lp-hero__inner { max-width: none; }
.lp-hero__demo, .lp-ticker { --sect-w: min(calc(100% - 2 * var(--lp-gutter)), calc(var(--lp-wrap) + 48px)); }
.lp-hero__demo { width: var(--sect-w); margin-inline: auto; }
@media (max-width: 599.98px) { .lp-hero__demo { width: var(--sect-w); margin-inline: auto; } }
/* the showcase lines up with every other section (and the hero video):
   the same cap as .lp-frame, not the original's 1406px */
.ws-show .workspace__head, .ws-show .workspace__case, .lp-flow__frame { max-width: calc(var(--lp-wrap) + 48px); }
/* generous breathing room between the hero video and the showcase, as the
   brief asks: the same rhythm as the space between other sections */
.ws-show { padding-top: clamp(96px, 10vw, 160px); }

/* ===========================================================================
   PRODUCT WORKFLOW (.lp-wf, workflow() in lander.js): the brief's
   "Plan -> Architect -> Build -> Test -> Evolve", as the backup lander's
   "How it works" section: a column of step cards scrolls past a pinned agent
   rail that holds the client's request, and the rail's activity swaps to the
   step crossing the upper part of the view. A thin amber progress bar runs
   along the foot of the viewport while the rail is pinned. The screens are
   the owner's recording of this exact request (the Test card swaps the
   generated preview for the hand-built ClientVault, as the hero reel does).
   Restyled in the lander's own frame language: 2px rules, concentric radii.
   =========================================================================== */
.lp-wf {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: clamp(20px, 2.4vw, 32px);
  width: 100%; max-width: calc(var(--lp-wrap) + 48px); margin: clamp(56px, 6vw, 80px) auto 0;
}
.lp-wf__stage { display: grid; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }
.lp-wf__card {
  padding: 8px; border: 2px solid var(--lp-line); border-radius: 28px; background: var(--lp-card);
  opacity: .42; transform: scale(.985); transform-origin: 50% 50%;
  transition: opacity .55s var(--lp-ease), transform .55s var(--lp-ease), border-color .55s var(--lp-ease), box-shadow .55s var(--lp-ease);
}
.lp-wf__card.is-live {
  opacity: 1; transform: none; border-color: color-mix(in srgb, var(--lp-amber) 28%, var(--lp-line));
  box-shadow: 0 40px 90px -50px rgb(255 94 0 / .45);
}
.lp-wf__shot { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 20px; background: var(--lp-inset); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.lp-wf__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lp-wf__copy { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; padding: 22px 18px 16px; }
.lp-wf__n { grid-row: span 2; margin: 0; color: var(--lp-amber); font-family: var(--lp-mono); font-size: 13px; font-weight: 500; }
.lp-wf__t { margin: 0; color: var(--lp-head); font-size: clamp(22px, 2vw, 28px); font-weight: 560; line-height: 1.15; letter-spacing: -0.02em; }
.lp-wf__d { margin: 8px 0 0; max-width: 52ch; color: var(--lp-muted); font-size: 16px; line-height: 1.5; }

/* the pinned agent rail */
.lp-wf__rail { position: sticky; top: 104px; }
.lp-wf__chat {
  display: flex; flex-direction: column; height: min(600px, calc(100vh - 140px)); padding: 12px;
  border: 2px solid var(--lp-line); border-radius: 26px; background: color-mix(in srgb, #050403 80%, transparent);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .8);
}
.lp-wf__ask { padding: 14px; border-radius: 16px; background: rgb(251 249 246 / .05); border: 1px solid var(--lp-line-2); }
.lp-wf__ask p { margin: 8px 0 0; color: var(--lp-head); font-size: 14px; font-weight: 560; line-height: 1.45; }
.lp-wf__chip { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 7px; background: rgb(253 172 83 / .14); color: var(--lp-amber); font-size: 11.5px; font-weight: 600; }
.lp-wf__feeds { position: relative; flex: 1 1 auto; min-height: 150px; margin-top: 16px; }
.lp-wf__feed { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s var(--lp-ease), transform .4s var(--lp-ease); }
.lp-wf__feed.is-live { opacity: 1; transform: none; }
.lp-wf__feed > * { margin: 0; }
.lp-wf__feed.is-live > * { animation: lp-wf-rise .5s var(--lp-ease) both; }
.lp-wf__feed.is-live > :nth-child(2) { animation-delay: .07s; }
.lp-wf__feed.is-live > :nth-child(3) { animation-delay: .14s; }
@keyframes lp-wf-rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.lp-wf__thought { color: var(--lp-dim); font-size: 13px; }
.lp-wf__act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--lp-line-2); background: rgb(251 249 246 / .035); color: var(--lp-fg); font-size: 13px; }
.lp-wf__act-ico { display: inline-flex; color: var(--lp-muted); }
.lp-wf__act-t { color: var(--lp-dim); font-size: 12px; }
.lp-wf__status { color: var(--lp-head); font-size: 13.5px; font-weight: 560; line-height: 1.45; }
.lp-wf__composer { padding: 12px; border-radius: 16px; background: rgb(251 249 246 / .05); border: 1px solid var(--lp-line-2); }
.lp-wf__composer p { margin: 0 0 26px; color: var(--lp-dim); font-size: 13px; }
.lp-wf__composer-foot { display: flex; align-items: center; justify-content: space-between; color: var(--lp-muted); font-size: 12px; }
.lp-wf__send { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--lp-amber); color: #1a1714; }

/* the progress bar along the foot of the view, while the rail is pinned */
.lp-wf__progress { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lp-wf__progress.is-on { opacity: 1; }
.lp-wf__hud { display: flex; justify-content: flex-end; gap: 18px; padding: 0 var(--lp-gutter) 10px; color: var(--lp-dim); font-family: var(--lp-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.lp-wf__hud > span:first-child { color: var(--lp-amber); }
.lp-wf__track { height: 2px; background: rgb(255 255 255 / .06); }
.lp-wf__track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #bf4e0b, var(--lp-amber)); }

@media (max-width: 1099.98px) {
  .lp-wf { grid-template-columns: minmax(0, 1fr); }
  .lp-wf__rail { position: relative; top: auto; order: -1; }
  .lp-wf__chat { height: auto; }
  .lp-wf__feeds { min-height: 120px; }
  .lp-wf__card { opacity: 1; transform: none; }
  .lp-wf__progress { display: none; }
}
@media (max-width: 599.98px) {
  .lp-wf__card { border-radius: 22px; padding: 6px; }
  .lp-wf__shot { border-radius: 16px; }
  .lp-wf__copy { padding: 16px 12px 10px; column-gap: 12px; }
  .lp-wf__d { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-wf__card, .lp-wf__feed { transition: none; }
  .lp-wf__feed.is-live > * { animation: none; }
}

/* ===========================================================================
   PRODUCT TEAM FEATURES as four stacked rows (owner's request): the copy card
   on the left (icon at the top, words at the foot) and a dark panel on the
   right with a live illustration of that feature.
   1 Project memory  - an Obsidian-style graph of the project's notes,
                       turning in 3D (brain() in lander.js, canvas)
   2 Backend         - the portal's schema with requests flowing through it
   3 Integrations    - after the Revo template's hub: tiles on curved rails
                       feeding light streaks into a glowing AIWA core
   4 Publish         - the old Deploy step's checklist, started by a click on
                       AIWA's own Publish button, on a 9s loop
   SVG animations are SMIL and CSS; heavy work only runs while on screen.
   =========================================================================== */
.lp-feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--p-stage); }
.lp-feat-row { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: var(--p-stage); }
.lp-feat-row .lp-feat { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(24px, 2.6vw, 36px); }
.lp-feat-row .lp-feat .lp-ico { width: 26px; height: 26px; color: var(--lp-amber); }
.lp-feat-row .lp-feat h3 { margin: 0 0 10px; color: var(--lp-head); font-size: clamp(22px, 2vw, 28px); font-weight: 560; line-height: 1.15; letter-spacing: -0.02em; }
.lp-feat-row .lp-feat p { max-width: 34ch; font-size: 16px; line-height: 1.55; }
.lp-feat__ill {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-card);
  background: radial-gradient(90% 80% at 50% 50%, #12100e 0%, #070605 100%);
  box-shadow: inset 0 0 0 2px var(--lp-line), inset 0 1px 0 rgb(255 255 255 / .04);
}
.lp-ill-svg { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--lp-sans); }
@media (max-width: 899.98px) {
  .lp-feat-row { grid-template-columns: minmax(0, 1fr); }
  .lp-feat-row .lp-feat { gap: 28px; }
}

/* 1. memory */
.lp-ill-memory { position: absolute; inset: 0; }
.lp-ill-memory canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 2. backend */
.lp-ill-svg .ln { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1.2; }
.lp-ill-svg .ln--rel { stroke-dasharray: 3 4; }
.lp-ill-svg .ln-flow { fill: none; stroke: #ff9a3d; stroke-width: 1.6; stroke-dasharray: 10 140; stroke-linecap: round; animation: ill-dash 2.4s linear infinite; opacity: .9; }
@keyframes ill-dash { to { stroke-dashoffset: -150; } }
.lp-ill-svg .pk { fill: #fff; filter: drop-shadow(0 0 4px #ff8a2a); }
.lp-ill-svg .rel { fill: #6a655e; }
.lp-ill-svg .tb-bg { fill: #161412; stroke: rgba(255,255,255,.10); }
.lp-ill-svg .tb-hd, .lp-ill-svg .tb-hd2 { fill: #1f1c19; }
.lp-ill-svg .tb-dot { fill: #fdac53; }
.lp-ill-svg .tb-name { fill: #f2efea; font-size: 12.5px; font-weight: 600; font-family: var(--lp-mono); }
.lp-ill-svg .tb-f { fill: #cfcac3; font-size: 11.5px; font-family: var(--lp-mono); }
.lp-ill-svg .tb-t { fill: #77716a; font-size: 10.5px; font-family: var(--lp-mono); }
.lp-ill-svg .chip rect { fill: #161412; stroke: rgba(253,172,83,.35); }
.lp-ill-svg .chip text { fill: #f2efea; font-size: 12px; font-weight: 500; }
.lp-ill-svg .chip-ic { fill: none; stroke: #fdac53; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-ill-svg .badge rect { fill: rgba(74,222,128,.08); stroke: rgba(74,222,128,.3); }
.lp-ill-svg .badge text { fill: #c9f2d6; font-size: 11px; font-weight: 500; }
.lp-ill-svg .live { fill: #4ade80; animation: ill-blink 1.6s ease-in-out infinite; }
@keyframes ill-blink { 50% { opacity: .3; } }

/* 3. integrations hub */
.lp-ill-hub .ln { stroke: rgba(255,255,255,.14); }
.lp-ill-hub .tile rect { fill: #14110f; stroke: rgba(255,255,255,.16); }
.lp-ill-hub .tile .ti { fill: none; stroke: #f2efea; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-ill-hub .port { fill: #fff; filter: drop-shadow(0 0 4px #ffb36b) drop-shadow(0 0 10px #ff7a1a); }
.lp-ill-hub .hub { filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.lp-ill-hub .hub-breathe { animation: ill-breathe 4s ease-in-out infinite; transform-origin: 320px 200px; }
@keyframes ill-breathe { 50% { opacity: .55; } }


@media (prefers-reduced-motion: reduce) {
  .lp-ill-svg * { animation: none !important; }
}

/* feature panels: warmer ambience, after the owner's note that they read too
   dark - a lifted ground with a soft amber light behind each illustration */
.lp-feat__ill {
  background:
    radial-gradient(60% 70% at 50% 46%, rgb(255 138 42 / .13), transparent 70%),
    radial-gradient(100% 90% at 50% 40%, #1d1712 0%, #110e0b 60%, #0b0908 100%);
}
.lp-ill-svg .tb-bg { fill: #1b1815; stroke: rgba(255,255,255,.12); }
.lp-ill-svg .tb-hd { fill: #24201c; }
.lp-ill-svg .tb-rule { stroke: rgba(255,255,255,.08); }
.lp-ill-svg .ln { stroke: rgba(255,255,255,.16); }
.lp-ill-svg .chip rect { fill: #1b1815; }
.lp-ill-hub .tile rect { fill: #1b1714; stroke: rgba(255,255,255,.2); }
/* 4. publish: the backup lander's "Ships a working app" clip, cropped to the
   panel the way the backup crops it */
.lp-ill-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* rows alternate sides (owner's request, as on the White Label features):
   the second and fourth put the illustration first. Side by side on desktop
   and iPad; phones stack, card above illustration. */
@media (min-width: 768px) {
  .lp-feat-row { grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); }
  .lp-feat-row:nth-child(even) { grid-template-columns: minmax(0, 0.64fr) minmax(0, 0.36fr); }
  .lp-feat-row:nth-child(even) .lp-feat { order: 2; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .lp-feat-row, .lp-feat-row:nth-child(even) { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .lp-feat-row:nth-child(even) { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); }
  .lp-feat-row .lp-feat { gap: 24px; padding: 24px; }
  .lp-feat-row .lp-feat h3 { font-size: 22px; }
  .lp-feat-row .lp-feat p { font-size: 15px; }
}
/* the product section now carries the workflow: its statement centred above,
   and clip (not hidden) so the agent rail can stick */
.lp-plan { overflow: clip; }
.lp-plan__copy--center { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }
.lp-plan__copy--center .lp-plan__lead { max-width: 680px; margin-inline: auto; }
#product .lp-wf { position: relative; z-index: 1; margin-top: clamp(64px, 7vw, 96px); }
.lp-hero__support { max-width: 640px; margin: -18px auto 36px; color: var(--lp-muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 599.98px) { .lp-hero__support { padding-inline: 16px; } }
.lp-shift__highlight { margin-top: clamp(56px, 6vw, 80px); }
.lp-wf__shot { position: relative; }
.lp-wf__label { position: absolute; right: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgb(20 19 17 / .82); border: 1px solid rgb(255 255 255 / .12); color: var(--lp-head); font-size: 12.5px; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lp-wf__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-good, #4ade80); box-shadow: 0 0 0 3px rgb(74 222 128 / .18); }

/* ===========================================================================
   #agencies head: the statement left, the body right, in one band
   (space-between), then the brief's highlight centred under it.
   - The statement fills word by word as it scrolls up the view, from a faint
     ghost to its final colours (scrubTitle() in lander.js).
   - The highlight tells the story in two beats: the request rises in word by
     word, then the answer arrives in amber with a light sweeping across it
     and a line drawn underneath (storyLine()).
   =========================================================================== */
.lp-shift__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(32px, 5vw, 96px);
  width: 100%; max-width: calc(var(--lp-wrap) + 48px); margin: 0 auto;
}
.lp-shift__top .lp-shift__title { flex: 1 1 0; max-width: 720px; margin: 0; text-align: left; }
.lp-shift__top .lp-shift__lead { flex: 0 1 440px; max-width: 440px; margin: 0; text-align: left; }
.lp-shift__lead p { margin: 0; color: var(--lp-muted); font-size: 16px; line-height: 1.6; }
.lp-shift__lead p + p { margin-top: 14px; }
@media (max-width: 899.98px) {
  .lp-shift__top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .lp-shift__top .lp-shift__lead { flex-basis: auto; max-width: 560px; }
}
.js [data-scrub-title] .sw { color: rgb(255 255 255 / .14); transition: color .25s linear; }
.js [data-scrub-title] .sw.is-lit { color: var(--lp-head); }
.js [data-scrub-title] .lp-mute .sw.is-lit { color: var(--lp-muted); }
.lp-shift__highlight { position: relative; }
.lp-hl__b { position: relative; display: inline-block; color: var(--lp-amber);
  background: linear-gradient(100deg, var(--lp-amber) 0%, var(--lp-amber) 40%, #fff6e8 50%, var(--lp-amber) 60%, var(--lp-amber) 100%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.lp-hl__b::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--lp-amber), transparent); transform: scaleX(0); transform-origin: 50% 50%; }
.js [data-story-line] .hw { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(8px);
  transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease), filter .7s var(--lp-ease); transition-delay: calc(var(--i) * 70ms); }
.js [data-story-line].is-in .hw { opacity: 1; transform: none; filter: none; }
.js [data-story-line] .lp-hl__b { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .8s var(--lp-ease) .75s, transform .8s var(--lp-ease) .75s; }
.js [data-story-line].is-in .lp-hl__b { opacity: 1; transform: none; color: transparent; animation: lp-hl-sweep 1.6s var(--lp-ease) 1.15s both; }
.js [data-story-line].is-in .lp-hl__b::after { transform: scaleX(1); transition: transform 1s var(--lp-ease) 1.5s; }
@keyframes lp-hl-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-scrub-title] .sw { color: var(--lp-head); }
  .js [data-scrub-title] .lp-mute .sw { color: var(--lp-muted); }
  .js [data-story-line] .hw, .js [data-story-line] .lp-hl__b { opacity: 1; transform: none; filter: none; transition: none; animation: none; }
  .js [data-story-line] .lp-hl__b { color: var(--lp-amber); }
}
.lp-shift__highlight .lp-hl__a, .lp-shift__highlight .lp-hl__a .hw { color: var(--lp-head); }
/* head top-aligned; the highlight sits as far below it as the section's top
   padding sits above it (96px phones, 140px from 1024px) */
.lp-shift__top { align-items: flex-start; }
.lp-shift__highlight { margin-top: 96px; }
@media (min-width: 1024px) { .lp-shift__highlight { margin-top: 140px; } }

/* ===========================================================================
   PHONE TYPE CAPS (owner's rule): on phones no heading is set above 28px and
   no running text above 16px. Decorative type (the "Aiwa codes" wordmark,
   the moving strip) and the price figure are outside the rule.
   =========================================================================== */
@media (max-width: 599.98px) {
  .lp-hero__title, .lp-hero__title > span, .lp-hero__accent, .lp-hero__second { font-size: 28px; line-height: 1.12; }
  .lp-cta__h { font-size: 28px; line-height: 1.12; }
  .lp-h2, .ws-show__title, .lp-shift__title, .lp-wf__t, .lp-feat-row .lp-feat h3, .lp-offer__title { font-size: min(28px, 1em); }
  .lp-h2 { font-size: 26px; }
  .lp-shift__highlight { font-size: 22px; }
  .lp-price-card__amount > b { font-size: 34px; }

  .lp-lead, .lp-lead--lg, .lp-plan__lead, .lp-plan__close, .lp-hero__sub, .lp-hero__support,
  .lp-tpl__copy p, .lp-tpl__card b, .lp-note__big, .lp-note__small, .lp-offer .lp-note__big, .lp-offer__text,
  .lp-faq__item p, .lp-cta__body p, .lp-cta__final, .lp-pricing__solo, .lp-shift__lead p, .lp-wf__d,
  .lp-price-card__amount em b, .lp-btn__label, .lp-ring-btn--lg .lp-btn__label, .lp-ghost-btn, .lp-ghost-btn--lg, .lp-hero__link {
    font-size: 16px; }
  .lp-plan__close span, .lp-note__big .lp-mute, .lp-cta__final span { font-size: inherit; }
  .lp-faq__item summary h3 { font-size: 17px; }
}
@media (max-width: 599.98px) { .lp-price-card__amount > b { font-size: 28px; } }
/* the arc headline is a display piece between the prompt columns: it keeps
   its own size on phones (owner's call), outside the 28px heading cap */

/* ===========================================================================
   MASTRA TYPE ARRANGEMENT (measured off mastra.ai at 1440): one fixed
   +0.255px tracking on every size, headings at weight 520 and 1.1 leading,
   text at 1.36. Display 54, section 40, card titles and statements 22,
   body 17. The typeface stays General Sans: Mastra's own (Greed, by
   Displaay) is a commercial font they license. Owner's earlier rules still
   win: the hero sub is 16px, and phones keep the 28px / 16px caps.
   =========================================================================== */
.lp { letter-spacing: 0.255px; }
.lp-hero__title, .lp-hero__title > span, .lp-hero__accent, .lp-hero__second,
.lp-h2, .lp-shift__title, .ws-show__title, .lp-cta__h, .lp-arc__h2, .lp-shift__highlight, .lp-plan__close,
.lp-wf__t, .lp-feat-row .lp-feat h3, .lp-offer__title, .lp-price-card h3, .lp-tpl__copy h3, .lp-compare__col h3 {
  font-weight: 520; letter-spacing: 0.255px;
}
.lp-kind h3, .lp-feat h3, .lp-faq__item summary h3 { letter-spacing: 0.255px; }
@media (min-width: 600px) {
  .lp-hero__title, .lp-hero__title > span, .lp-hero__accent, .lp-hero__second { font-size: clamp(40px, 3.75vw, 54px); line-height: 1.1; }
  .lp-cta__h { font-size: clamp(36px, 3.75vw, 54px); line-height: 1.1; }
  .lp-h2, .lp-shift__title { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; }
  .lp-wf__t, .lp-feat-row .lp-feat h3, .lp-offer__title { font-size: 22px; font-weight: 450; line-height: 1.36; }
  .lp-offer .lp-note__big { font-size: 22px; font-weight: 400; line-height: 1.36; }
  .lp-shift__lead p, .lp-wf__d, .lp-feat-row .lp-feat p, .lp-kind p, .lp-cta__body p, .lp-faq__item p,
  .lp-compare__col li, .lp-offer__list li, .lp-price-card__list li, .lp-tpl__copy p, .lp-note__small { font-size: 17px; line-height: 1.36; }
  .lp-plan__lead, .lp-lead--lg { font-size: 22px; line-height: 1.36; }
  .lp-kind h3 { font-size: 17px; font-weight: 450; line-height: 1.4; }
  .lp-faq__item summary h3 { font-size: 22px; font-weight: 400; line-height: 1.36; }
}

/* Workflow on phones (owner's request): the agent panel sits below the
   cards and sticks to the foot of the screen, inset by the page gutter on
   all three sides. Once stuck, its request header folds away and the step
   cards rise from behind it, like replies arriving above a chat box. */
@media (max-width: 767.98px) {
  .lp-wf__rail { order: 2; position: sticky; top: auto; bottom: var(--lp-gutter); z-index: 3; }
  .lp-wf__stage { position: relative; z-index: 1; }
  .lp-wf__chat { background: #0c0b0a; box-shadow: 0 -30px 40px -12px rgb(12 11 10 / .95), 0 -2px 0 0 rgb(12 11 10); }
  /* the fold: the header's row eases 1fr -> 0fr while the rail's top margin
     eases 0 -> the same height, on one curve, so the rail's footprint (and
     the section's height) never changes and the stuck state cannot flicker */
  .lp-wf__fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--lp-ease), opacity .35s ease; }
  .lp-wf__fold > div { min-height: 0; overflow: hidden; }
  .lp-wf__rail { transition: margin-top .5s var(--lp-ease); }
  .lp-wf__rail.is-stuck { margin-top: var(--fold-h, 0px); }
  .lp-wf__rail.is-stuck .lp-wf__fold { grid-template-rows: 0fr; opacity: 0; }
}
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .lp-wf__fold, .lp-wf__rail { transition: none; } }

/* ===========================================================================
   WORKFLOW CHAT (.acx): AIWA's own chat panel, rebuilt from the owner's
   recording (panel #1f1f1f, cards #262626, composer #2f2e31; a violet rim and
   Plan pill in Plan mode, an orange rim and Build pill in Build mode, a red
   stop button while it works). It narrates the ClientVault use case: each
   step plays its part of the conversation live as its card becomes the live
   one (acx() in lander.js); earlier steps stay in the thread above.
   Each step's card plays the real recording of that step (build-flow-clips.py).
   =========================================================================== */
.lp-wf { grid-template-columns: minmax(0, 1fr) 340px; }
.lp-wf__shot { aspect-ratio: 1598 / 1056; }
.lp-wf__vid { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.lp-wf__chat { height: min(660px, calc(100vh - 130px)); padding: 10px; gap: 10px; background: #0b0b0b; }
.lp-wf__ask { padding: 12px 14px; }
.lp-wf__ask p { font-size: 13px; }

.acx { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 18px; background: #1f1f1f; color: #ececea; font-size: 12.5px; letter-spacing: 0; }
.acx svg { display: block; }
.acx-top { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-bottom: 1px solid #2a2a2a; background: #191919; }
.acx-top b { font-size: 13px; font-weight: 600; }
.acx-chev svg, .acx-show svg, .acx-model svg, .acx-mode > svg { width: 10px; height: 10px; opacity: .55; }
.acx-thread { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 12px 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
.acx-i, .acx-fr, .acx-ready { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--lp-ease), opacity .4s ease; }
.acx-i > div, .acx-fr > div, .acx-ready > div { min-height: 0; overflow: hidden; }
.acx-i.on, .acx-fr.on, .acx-ready.on { grid-template-rows: 1fr; opacity: 1; }
.acx-i > div > * { margin-top: 10px; }
.acx.instant *, .acx.instant { transition: none !important; }
.acx-me > div { display: flex; justify-content: flex-end; }
.acx-bubble { max-width: 86%; padding: 10px 12px; border-radius: 14px; background: #2a2a2a; font-size: 12.5px; font-weight: 560; line-height: 1.45; }
.acx-bubble p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acx-show { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: #8e8a83; font-size: 11px; font-weight: 500; }
.acx-act { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #262626; border: 1px solid #303030; font-size: 12.5px; }
.acx-act b { font-weight: 560; }
.acx-act--plan { border-color: rgb(139 108 246 / .3); background: linear-gradient(90deg, rgb(139 108 246 / .08), transparent 70%), #262626; }
.acx-pi { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: rgb(139 108 246 / .14); color: #a78bfa; }
.acx-pi svg { width: 13px; height: 13px; }
.acx-by { margin-left: auto; color: #77736c; font-size: 10.5px; }
.acx-spin { display: inline-block; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .12); border-top-color: #ff8a2a; animation: acx-rot .8s linear infinite; }
.acx-spin--v { border-top-color: #a78bfa; }
@keyframes acx-rot { to { transform: rotate(360deg); } }
.acx-plan { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #262626; border: 1px solid #303030; }
.acx-pt { display: grid; gap: 2px; min-width: 0; }
.acx-pt b { font-size: 12.5px; font-weight: 600; }
.acx-pt small { color: #8e8a83; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acx-view { margin-left: auto; flex: 0 0 auto; color: #cfcbc4; font-size: 11px; font-weight: 500; }
.acx-files { padding: 10px; border-radius: 12px; background: #262626; border: 1px solid #303030; }
.acx-fh { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; font-size: 12.5px; }
.acx-fh b { font-weight: 560; }
.acx-frr { display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 9px; margin-top: 6px; padding: 7px 9px; border-radius: 10px; background: #1f1f1f; border: 1px solid #2c2c2c; transition: border-color .3s ease, box-shadow .3s ease; }
.acx-fr.run .acx-frr { border-color: rgb(255 122 26 / .5); box-shadow: 0 0 0 3px rgb(255 122 26 / .08); }
.acx-fi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #171717; font: 600 8.5px var(--lp-mono); }
.acx-fi--ts { color: #60a5fa; } .acx-fi--sql { color: #fb923c; } .acx-fi--tsx { color: #22d3ee; }
.acx-fn b { display: block; font-size: 12px; font-weight: 560; }
.acx-fn small { display: block; color: #77736c; font: 400 10px var(--lp-mono); }
.acx-fs { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.acx-fs > * { position: absolute; }
.acx-ck { color: #4ade80; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .35s var(--lp-ease); }
.acx-ck svg { width: 14px; height: 14px; }
.acx-fr.done .acx-ck, .acx-fh.done .acx-ck { opacity: 1; transform: none; }
.acx-fr.done .acx-spin, .acx-fh.done .acx-spin { opacity: 0; }
.acx-morefiles { margin-top: 6px; padding: 6px; text-align: center; color: #8e8a83; font-size: 11px; }
.acx-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 2px 0; color: #8e8a83; font-size: 11px; }
.acx-pg { display: inline-flex; align-items: center; gap: 5px; color: #c9f2d6; }
.acx-ver { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgb(74 222 128 / .1); color: #4ade80; box-shadow: inset 0 0 0 1px rgb(74 222 128 / .3); }
.acx-ver svg { width: 11px; height: 11px; }
.acx-th { margin-left: auto; color: #77736c; } .acx-th svg { width: 13px; height: 13px; }
.acx-chips { display: flex; gap: 6px; overflow: hidden; }
.acx-chips span { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #262626; border: 1px solid #333; color: #cfcbc4; font-size: 11px; white-space: nowrap; }
.acx-ship { border-color: rgb(74 222 128 / .3); }
.acx-live { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgb(74 222 128 / .1); color: #4ade80; font-size: 10.5px; font-weight: 600; }
.acx-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.acx-shipfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 2px; color: #8e8a83; font-size: 11px; }
.acx-rb { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid #383838; color: #cfcbc4; }
.acx-rb svg { width: 11px; height: 11px; }

/* composer */
.acx-comp { position: relative; margin: 0 10px 10px; padding: 12px; border-radius: 16px; background: #2f2e31; }
.acx-comp::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; transition: opacity .5s ease;
  background: linear-gradient(135deg, var(--rim, #8b6cf6), color-mix(in srgb, var(--rim, #8b6cf6) 35%, transparent) 30%, transparent 58%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.acx-comp::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; border-radius: 0 0 16px 16px; pointer-events: none;
  background: radial-gradient(70% 90% at 30% 100%, color-mix(in srgb, var(--rim, #8b6cf6) 16%, transparent), transparent 70%); }
.acx-comp[data-mode="plan"] { --rim: #8b6cf6; }
.acx-comp[data-mode="build"] { --rim: #ff7a1a; }
.acx-readyin { padding: 2px 0 12px; }
.acx-readyrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.acx-ri { color: #ff9a3d; } .acx-ri svg { width: 14px; height: 14px; }
.acx-rev { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid #444; color: #ddd; font-size: 11.5px; }
.acx-rev svg { width: 11px; height: 11px; }
.acx-approve { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-top: 10px; padding: 0 14px 0 11px; border-radius: 999px;
  background: linear-gradient(180deg, #ffa149, #fe8d01); color: #1b0d03; font-size: 12px; font-weight: 600; box-shadow: 0 8px 18px -8px rgb(254 141 1 / .8); transition: transform .18s ease; }
.acx-approve svg { width: 13px; height: 13px; }
.acx-approve.press { transform: scale(.93); }
.acx-input { position: relative; min-height: 38px; font-size: 12.5px; line-height: 1.45; }
.acx-ph { color: #8e8a83; }
.acx-typed:not(:empty) + .acx-ph { display: none; }
.acx-typed:not(:empty)::after { content: ''; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #f2f0ec; animation: acx-blink 1s steps(1) infinite; }
@keyframes acx-blink { 50% { opacity: 0; } }
.acx-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.acx-btn, .acx-model, .acx-neon, .acx-mic { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 28px; min-width: 28px; border-radius: 999px; color: #cfcbc4; }
.acx-btn { border: 1px solid #454448; font-size: 15px; }
.acx-model { padding: 0 6px; }
.acx-neon { background: #141414; }
.acx-mic svg { width: 14px; height: 14px; opacity: .7; }
.acx-grow { flex: 1; }
.acx-mode { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.acx-m { display: none; align-items: center; gap: 5px; }
.acx-m svg { width: 13px; height: 13px; }
.acx-comp[data-mode="plan"] .acx-m--plan { display: inline-flex; color: #a78bfa; }
.acx-comp[data-mode="build"] .acx-m--build { display: inline-flex; color: #f0a35e; }
.acx-send { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #7a4b1d; color: #f6d9b8; transition: background-color .3s ease, transform .18s ease; }
.acx-send svg { width: 14px; height: 14px; }
.acx-send.ready { background: linear-gradient(180deg, #ffa149, #ff7a1a); color: #1b0d03; }
.acx-send.press { transform: scale(.88); }
.acx-stop { display: none; width: 10px; height: 10px; border-radius: 2px; background: #f87171; }
.acx-comp.run .acx-send { background: #4a2626; }
.acx-comp.run .acx-arrow { display: none; }
.acx-comp.run .acx-stop { display: block; }

@media (max-width: 1099.98px) { .lp-wf { grid-template-columns: minmax(0, 1fr); } .lp-wf__chat { height: auto; } .acx-thread { height: 260px; flex: 0 0 auto; } }
@media (max-width: 767.98px) {
  .acx-top { display: none; }
  .acx-thread { height: 190px; }
  .lp-wf__chat { padding: 8px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .acx-spin { animation: none; } }
.acx-top, .acx-comp { flex: 0 0 auto; } .acx-thread { flex: 1 1 0; }
@media (max-width: 1099.98px) { .acx-thread { flex: 0 0 auto; } }
/* the cards are canvases, as Framer shows its agent's work: a dark dotted
   canvas holding AIWA's preview window, which answers the chat beside it */
.lp-wf__shot { aspect-ratio: 16 / 10; display: grid; place-items: center; background:
  radial-gradient(circle at 1px 1px, rgb(255 255 255 / .06) 1px, transparent 1.5px) 0 0 / 18px 18px, #121212; }
.lp-wf__vid { width: auto; height: 90%; max-width: 94%; aspect-ratio: 1114 / 1056; object-fit: cover; border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -24px rgb(0 0 0 / .9), 0 8px 18px -8px rgb(0 0 0 / .6); background: #0d0d0d; }
.lp-wf__shot { position: relative; display: block; }
.lp-wf__vid { position: absolute; left: 50%; top: 50%; height: 88%; width: auto; max-width: none; transform: translate(-50%, -50%); }
.lp-wf__label { z-index: 2; }

/* the preview window: 80% of the canvas, equal space left, right and top,
   and no space below, as if the screen were seated on the card's bottom edge */
.lp-wf__shot { display: block; padding: 7% 10% 0; }
.lp-wf__vid { position: static; transform: none; width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  object-fit: cover; object-position: top center; border-radius: 12px 12px 0 0; }
/* equal space on the left, right and top (10% of the card's width) */
.lp-wf__shot { padding: 10% 10% 0; }

/* the features get their own section headline, left-aligned on the content edge */
.lp-feats__title { position: relative; z-index: 1; width: 100%; max-width: calc(var(--lp-wrap) + 48px); margin: clamp(120px, 12vw, 180px) auto 0; text-align: left; }
.lp-feats__title + .lp-feats__frame { margin-top: clamp(72px, 7vw, 100px); }

/* #agencies: a warm light in the middle of the section, behind the statement
   and the highlight line. Sized to the whole section and fully faded before
   any edge, so it never ends in a seam. */
.lp-shift { isolation: isolate; }
.lp-shift::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 50% 34%, rgb(255 122 26 / .16), transparent 70%),
    radial-gradient(60% 42% at 50% 36%, rgb(253 172 83 / .07), transparent 72%);
}
@media (max-width: 767.98px) {
  .lp-shift::before { background: radial-gradient(80% 26% at 50% 30%, rgb(255 122 26 / .14), transparent 72%); }
}
/* phones: the hero title is always three lines - line one whole, line two
   wrapping once - by scaling with the screen on the narrowest phones */
@media (max-width: 599.98px) {
  .lp-hero__title, .lp-hero__title > span, .lp-hero__accent, .lp-hero__second { font-size: min(28px, 7.05vw); letter-spacing: -0.01em; }
  .lp-hero__title > span { white-space: nowrap; }
  .lp-hero__title > .lp-hero__second { white-space: normal; text-wrap: balance; }
}
/* more air between the workflow and the features that follow it */
.lp-feats__title { margin-top: clamp(160px, 15vw, 240px); }

/* ===========================================================================
   The handoff line under "You bring the client": the agency's line on the
   left, AIWA's on the right, spread across the full content width. It plays
   once as a handoff - the agency line rises in word by word, an amber line
   draws across with a spark riding it, then AIWA's line arrives and "AIWA"
   lights amber (handoff() in lander.js). Stacked with a vertical line on phones.
   =========================================================================== */
.lp-handoff { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 48px);
  width: 100%; max-width: calc(var(--lp-wrap) + 48px); margin: clamp(64px, 7vw, 104px) auto 0; }
.lp-handoff p { margin: 0; flex: 0 1 auto; color: var(--lp-head); font-size: clamp(20px, 1.9vw, 26px); font-weight: 520; line-height: 1.25; letter-spacing: 0.255px; }
.lp-handoff__b { color: var(--lp-muted) !important; text-align: right; }
.lp-handoff__b em { font-style: normal; transition: color .6s var(--lp-ease) 1.7s; }
.lp-handoff.is-in .lp-handoff__b em { color: var(--lp-amber); }
.lp-handoff__line { position: relative; flex: 1 1 auto; min-width: 60px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .07); }
.lp-handoff__line i { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgb(255 122 26 / .2), var(--lp-amber)); transition: transform 1s cubic-bezier(.65, 0, .35, 1) .75s; }
.lp-handoff__line b { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0;
  background: #fff; box-shadow: 0 0 0 4px rgb(253 172 83 / .25), 0 0 18px 4px rgb(255 140 50 / .8); transition: left 1s cubic-bezier(.65, 0, .35, 1) .75s, opacity .3s ease .75s; }
.lp-handoff.is-in .lp-handoff__line i { transform: scaleX(1); }
.lp-handoff.is-in .lp-handoff__line b { left: 100%; opacity: 1; }
.js .lp-handoff .hw { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(8px);
  transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease), filter .7s var(--lp-ease); transition-delay: calc(var(--d, 0s) + var(--i) * 70ms); }
.js .lp-handoff.is-in .hw { opacity: 1; transform: none; filter: none; }
.lp-handoff__b { --d: 1.5s; }
@media (max-width: 767.98px) {
  .lp-handoff { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lp-handoff__b { text-align: left; }
  .lp-handoff__line { width: 2px; height: 44px; min-width: 0; flex: 0 0 auto; margin-left: 10px; }
  .lp-handoff__line i { transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, rgb(255 122 26 / .2), var(--lp-amber)); }
  .lp-handoff.is-in .lp-handoff__line i { transform: scaleY(1); }
  .lp-handoff__line b { left: 50%; top: 0; transition: top 1s cubic-bezier(.65, 0, .35, 1) .75s, opacity .3s ease .75s; }
  .lp-handoff.is-in .lp-handoff__line b { left: 50%; top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lp-handoff .hw { opacity: 1; transform: none; filter: none; transition: none; }
  .lp-handoff__line i, .lp-handoff__line b, .lp-handoff__b em { transition: none; }
}
@media (max-width: 767.98px) {
  .lp-handoff { align-items: center; text-align: center; }
  .lp-handoff__b { text-align: center; }
  .lp-handoff__line { margin-left: 0; }
}
/* the offer cards' actions run the card's full width */
.lp-offer .lp-note__by > .lp-ghost-btn, .lp-offer .lp-note__by > .lp-ring-btn { flex: 1 0 100%; width: 100%; display: flex; justify-content: center; text-align: center; }
.lp-offer .lp-note__by > .lp-ring-btn .lp-ring-btn__face { width: 100%; justify-content: center; }
.lp-offer .lp-note__by > .lp-ghost-btn { padding-block: 12px; }

/* Before / With headings: the White Label page's badge row (#wl-pain) - a
   rule above and below, a 7px dot, and a 115deg hatch on a 6px pitch filling
   the rest of the row. The heading keeps its own type. */
.lp-compare__col .lp-cmp-h { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 0 6px;
  border-block: 1px solid rgb(251 249 246 / .1); }
.lp-cmp-h__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lp-cmp-h > span:nth-child(2) { flex: none; }
.lp-cmp-h__hatch { flex: 1 1 auto; min-width: 2rem; height: 15px; opacity: .5;
  background: repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 6px); }
.lp-compare__col--with .lp-cmp-h { border-color: color-mix(in srgb, var(--lp-amber) 35%, transparent); }
.lp-compare__col--with .lp-cmp-h__dot { background: var(--lp-amber); }
.lp-compare__col--with .lp-cmp-h__hatch { background: repeating-linear-gradient(115deg, var(--lp-amber) 0 1px, transparent 1px 6px); }
.lp-compare__col .lp-cmp-h + ul > li:first-child { border-top: 0; }
/* what agencies can build: two per row, each image at its own natural
   shape (3:2) so nothing is cropped; one per row on phones */
.lp-kinds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-kinds__grid > .lp-kind { grid-column: auto; }
.lp-kind__img { height: auto; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 599.98px) { .lp-kinds__grid { grid-template-columns: minmax(0, 1fr); } }

/* Agency / White Label: one tab over each card, so each is labelled; phones
   (cards stacked) keep the single shared tab */
.lp-offers__tab { display: none; }
@media (min-width: 900px) {
  .lp-offers__tab-all { display: none; }
  .lp-offers__tab { display: block; }
  .lp-offers__tab--a { left: calc(var(--p-frame) + (100% - 2 * var(--p-frame) - var(--p-stage)) / 4 + var(--p-stage) / 2); }
  .lp-offers__tab--b { left: calc(100% - var(--p-frame) - (100% - 2 * var(--p-frame) - var(--p-stage)) / 4 - var(--p-stage) / 2); }
}
/* the scrolled nav pill spans exactly the sections' content width */
@media (min-width: 1024px) {
  .lp-nav.is-stuck .lp-nav__bar { max-width: min(calc(100vw - 2 * var(--lp-gutter)), 1300px); }
}

/* ===========================================================================
   Templates as a bento, after the AIWA app's own template gallery: a wide
   card (copy left, the screen bleeding off the right and bottom edges) beside
   a narrow one (the screen above its copy); the second row mirrors the
   first. The intro copy runs as a band across the top. Below 860px every
   card takes the narrow shape, one per row.
   Each screen sits in a liquid-glass browser frame. The two wide cards get
   their depth the way mastra.ai's feature panel does, from its footer grain
   (GrainGradient, wave), here in the closing CTA's own amber tints, mounted
   per card by cardGrain() in lander.js. The two narrow cards get an overhead
   light in the same three colours. Every card keeps the one card ground.
   =========================================================================== */
.lp-tpl { grid-template-columns: minmax(0, 1fr); }
.lp-tpl__copy { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.lp-tpl__copy p { max-width: 52ch; margin-bottom: 0; }
.lp-tpl__copy .lp-ghost-btn { margin-top: 0; }

.lp-tpl__bento { grid-template-columns: minmax(0, 1fr); }
.lp-tpl__bento .lp-tpl__card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  height: 100%; padding: 0; overflow: hidden; }

.lp-tpl__shot { position: relative; display: block; flex: none; aspect-ratio: 16 / 10.5; overflow: hidden; }

/* liquid glass: a frosted, slightly tinted pane with a bright top-left rim
   and a softer return on the far edge, seated on the bottom edge */
.lp-tpl__glass { position: absolute; inset: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) 0; display: flex; flex-direction: column;
  padding: 0 5px; border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .05) 30px, rgb(255 255 255 / .04));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 0 0 1px rgb(255 255 255 / .05),
    0 24px 60px -18px rgb(0 0 0 / .75), 0 0 0 1px rgb(0 0 0 / .25);
  transition: transform .5s var(--lp-ease); }
.lp-tpl__glass::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / .55), rgb(255 255 255 / .1) 22%, rgb(255 255 255 / .03) 55%, rgb(255 255 255 / .2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lp-tpl__bento .lp-tpl__card:hover .lp-tpl__glass { transform: translateY(-4px); }
/* no bar on the narrow cards: the screen keeps the same 5px of glass on top as at the sides */
.lp-tpl__item--narrow .lp-tpl__glass { padding-top: 5px; }
.lp-tpl__bar { display: flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 7px; }
.lp-tpl__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .22); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .3); }
.lp-tpl__url { min-width: 0; max-width: 60%; margin: 0 auto; padding: 3px 14px; overflow: hidden; border-radius: 999px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  color: rgb(255 255 255 / .55); font-size: 11px; font-weight: 500; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
.lp-tpl__view { position: relative; flex: 1; overflow: hidden; border-radius: 9px 9px 0 0; background: var(--lp-inset); }
.lp-tpl__view img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.lp-tpl__txt { position: relative; display: flex; flex: 1; flex-direction: column; padding: clamp(22px, 2.4vw, 32px) 64px clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px); }
.lp-tpl__txt b { color: var(--lp-head); font-size: 22px; font-weight: 450; line-height: 1.36; }
.lp-tpl__txt small { margin-top: 2px; color: var(--lp-muted); font-size: 15px; line-height: 1.4; }
.lp-tpl__d { margin-top: 14px; color: var(--lp-muted); font-size: 17px; line-height: 1.36; }
.lp-tpl__bento .lp-tpl__go { position: absolute; right: clamp(22px, 2.4vw, 32px); bottom: clamp(22px, 2.4vw, 32px); margin: 0; }
.lp-tpl__bento .lp-tpl__card:hover .lp-tpl__go { color: var(--lp-head) !important; }
/* drawn at mastra.ai's panel size (1328 x 696) and clipped by the card, so
   the grain keeps their scale, then held to a band down the left edge that
   falls off across the card, as on their panel */
.lp-tpl__grain { position: absolute; top: 0; left: 0; z-index: -1; width: 1328px; height: 696px; pointer-events: none; opacity: .8;
  -webkit-mask-image: linear-gradient(to right, #000 0, rgb(0 0 0 / .6) 180px, rgb(0 0 0 / .2) 360px, transparent 520px);
  mask-image: linear-gradient(to right, #000 0, rgb(0 0 0 / .6) 180px, rgb(0 0 0 / .2) 360px, transparent 520px); }
/* the narrow cards: a showcase light over the frame, in the grain's amber,
   light gold and hot orange, falling from the top edge and gone before the copy */
.lp-tpl__item--narrow .lp-tpl__shot {
  background:
    radial-gradient(46% 60% at 50% 0%, rgb(255 210 138 / .2), transparent 70%),
    radial-gradient(75% 95% at 50% 0%, rgb(254 160 2 / .2), rgb(242 129 62 / .08) 55%, transparent 80%); }
.lp-tpl__item--narrow .lp-tpl__shot::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 210 138 / .55), transparent); }
/* the copy sits on the grain: the description one step lighter to hold up */
.lp-tpl__item--wide .lp-tpl__d { color: var(--lp-fg); }
.lp-tpl__grain canvas { opacity: 0; transition: opacity .4s ease-out; }
.lp-tpl__grain.is-on canvas { opacity: 1; }

@media (min-width: 860px) {
  .lp-tpl__bento { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lp-tpl__item--wide { grid-column: span 3; }
  .lp-tpl__item--narrow { grid-column: span 2; }
  .lp-tpl__item--wide .lp-tpl__card { display: grid; grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "txt shot"; }
  .lp-tpl__item--wide .lp-tpl__txt { grid-area: txt; justify-content: center; }
  .lp-tpl__item--wide .lp-tpl__d { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .lp-tpl__item--wide .lp-tpl__shot { grid-area: shot; aspect-ratio: auto; min-height: 300px; background: none; }
  /* the frame runs off the card's right and bottom edges */
  .lp-tpl__item--wide .lp-tpl__glass { inset: clamp(32px, 3.4vw, 48px) -12% -2px 0; }
}
@media (max-width: 599px) {
  .lp-tpl__txt b { font-size: 20px; }
  .lp-tpl__txt small { font-size: 14px; }
  .lp-tpl__d { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lp-tpl__glass, .lp-tpl__grain canvas { transition: none; } }

/* ===========================================================================
   White Label offer: the White Label page's live platform demo
   (embeds/wl-preview.html) in place of the reel. It runs in desktop mode at
   every width; the demo scales its own 1280px canvas down and keeps its
   device toggle. Its height follows the demo's content (wlDemo() in
   lander.js); the square below is only the pre-script fallback, close to its
   height at the card's widths.
   =========================================================================== */
.lp-offer__demo { flex: 0 0 auto; margin: 0; }
.lp-offer__frame { display: block; width: 100%; aspect-ratio: 1; border: 0; background: transparent;
  /* must match the demo's own color-scheme, or the browser paints an opaque
     backdrop behind the transparent frame */
  color-scheme: dark; }

/* ===========================================================================
   The overhead light comes from under the Templates container. It moved from
   the top of #choose into #templates, straight after the container, with its
   bar on the container's bottom edge and one layer beneath it: the container
   hides the bar and the half of the light above it, so the glow seems to fall
   from under the tray. #choose drops its ground (the page's .lp ground is the
   same colour) so the light runs on into it instead of stopping at a seam.
   =========================================================================== */
.lp-kinds .lp-tpl__frame { z-index: 1; }
.lp-kinds > .lp-wl__light { top: calc(100% - 96px); }
@media (min-width: 1024px) { .lp-kinds > .lp-wl__light { top: calc(100% - 140px); } }
.lp-offers { background: transparent; overflow: visible; }
/* the light is wider than the page at full scale: clip it sideways only
   (clip, unlike hidden, leaves the other axis free) so it can still fall
   into #choose below */
.lp-kinds, .lp-offers { overflow-x: clip; }

/* ===========================================================================
   IN-VIEW MOTION - each kind of element has its own entrance, played once as
   it reaches the screen (inView() in lander.js tags them [data-io] and adds
   .io-in). This is deliberately not one blur-up for every block, which the
   page dropped: titles rise word by word, subtext answers them, trays settle
   and raise their tab, and the cards inside step in in reading order as each
   row arrives. Nothing is hidden until the script has run (.lp-io on <html>),
   and reduced motion never sets it.
   =========================================================================== */
/* titles: words rise out of a soft blur; the muted half carries straight on */
.lp-io [data-io="title"] .tw { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(8px);
  transition: opacity .75s var(--lp-ease), transform .75s var(--lp-ease), filter .75s var(--lp-ease);
  transition-delay: calc(min(var(--i), 16) * 45ms); }
.lp-io [data-io="title"].io-in .tw { opacity: 1; transform: none; filter: none; }
/* subtext: a quieter reply under the title, no blur */
.lp-io [data-io="sub"] { opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease); transition-delay: calc(.25s + var(--k, 0) * 90ms); }
.lp-io [data-io="sub"].io-in { opacity: 1; transform: none; }
/* trays: settle up into place, then the tab rises from behind */
.lp-io [data-io="tray"] { opacity: 0; transform: translateY(36px) scale(.985); transform-origin: 50% 0;
  transition: opacity .9s var(--lp-ease), transform .9s var(--lp-ease); }
.lp-io [data-io="tray"].io-in { opacity: 1; transform: none; }
.lp-io [data-io="tray"] > .lp-frame__tab { opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--lp-ease) .3s, transform .6s var(--lp-ease) .3s; }
.lp-io [data-io="tray"].io-in > .lp-frame__tab { opacity: 1; transform: none; }
/* cards: step in one after another, in the order they arrive */
.lp-io [data-io="item"] { opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease); transition-delay: calc(.15s + var(--k, 0) * 80ms); }
.lp-io [data-io="item"].io-in { opacity: 1; transform: none; }

/* Marketing polish: keep the complete purchase label together. */
.lp-pricing__solo a { display: inline-block; white-space: nowrap; }
.lp-nav { top: var(--marketing-banner-height, 0px); }
html:has(body.lp) { scroll-padding-top: calc(100px + var(--marketing-banner-height, 0px)); }
@media (min-width: 1024px) {
  .lp-nav.is-stuck { top: calc(16px + var(--marketing-banner-height, 0px)); }
}
.lp-news [aria-busy="true"] { cursor: progress; opacity: .7; }
.lp-news [aria-busy="true"] .lp-news__flip { visibility: hidden; }
.lp-news [aria-busy="true"]::after { content: 'Subscribing…'; position: absolute; }
.lp-news__btn { position: relative; }