/* ===========================================================================
   WHITE LABEL, IN THE LANDER'S STYLE
   The homepage's look, laid over this page without changing its layout or
   copy: General Sans in mastra.ai's arrangement (+0.255px everywhere,
   headings 520 / 1.1, text 1.36), the lander's warm grounds and text greys,
   sentence-case two-tone headings (the muted half is .wl-mute), plain-language
   labels instead of mono caps, cards with the lander's 2px edge and rounder
   corners, and its in-view motion (wl-lander.js) in place of the old uniform
   blur-in. Loaded last and scoped to .page--white-label, so the shared
   stylesheets are untouched and deleting this file (and its two tags)
   restores the page.
   =========================================================================== */
@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;
}

/* the lander's palette, through this page's own tokens */
.page--white-label {
  --font-display: 'General Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'General Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* the lander resolves mono to the sans too, so no mono label survives */
  --font-mono: 'General Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ink-900: #161513;   /* section ground  (lander --lp-bg)    */
  --ink-950: #0d0c0b;   /* chrome / frame  (lander --lp-frame) */
  --ink-850: #131210;   /* inset           (lander --lp-inset) */
  --ink-800: #1a1917;   /* raised          (lander --lp-panel) */
  --ink-700: #201f1c;   /* card            (lander --lp-card)  */
  --ink-600: #2a2825;   /* hairline        (lander --lp-line)  */
  --ink-500: #424242;   /*                 (lander --lp-line-3)*/
  --cream-050: #f0f0f0; /* headings        (lander --lp-head)  */
  --cream-100: #d9d9d9; /*                 (lander --lp-fg)    */
  --cream-300: #939393; /* body            (lander --lp-muted) */
  --cream-400: #939393; /* quiet UI                            */
  --cream-500: #7a7875; /* meta                                */
  --wl-head: var(--cream-050);
  --wl-muted: var(--cream-300);
  --wl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background-color: var(--ink-900);
  letter-spacing: 0.255px;
  -webkit-font-smoothing: antialiased;
}

/* ---- type -------------------------------------------------------------- */
.page--white-label :is(h1, h2, h3, h4, .t-display, .t-h2, .t-h3, .t-h4) {
  font-family: var(--font-display);
  letter-spacing: 0.255px;
  text-wrap: balance;
}
.page--white-label :is(.t-h2, .t-display, .wl-price__h2, .faq__title) {
  color: var(--wl-head); font-weight: 520; line-height: 1.1;
  font-size: clamp(30px, 2.8vw, 40px);
}
.page--white-label .page-hero__h1,
.page--white-label .cta__h2 { font-size: clamp(40px, 3.75vw, 54px); }
.page--white-label .wl-mute { color: var(--wl-muted); }
.page--white-label :is(.t-h3, .t-h4, .wl-feat__title, .wl-price__name) {
  color: var(--wl-head); font-weight: 450; line-height: 1.36; font-size: 22px;
}
.page--white-label .t-body { font-size: 17px; line-height: 1.36; color: var(--wl-muted); }
.page--white-label .section__lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.36; color: var(--wl-muted); }
.page--white-label .t-small { letter-spacing: 0.255px; }

/* labels: the copy in plain sentence case, not mono capitals */
.page--white-label :is(.eyebrow, .t-mono, .wl-card-label, .wl-feat__eyebrow, .wl-price__eyebrow, .wl-own-card__mono) {
  font-family: var(--font-body); text-transform: none;
  font-size: 15px; font-weight: 500; letter-spacing: 0.255px; line-height: 1.3;
  color: var(--cream-400);
}

/* ---- surfaces: the lander's 2px edge and rounder corners ---------------- */
.page--white-label :is(.wl-own-card, .wl-bonus, .wl-model, .wl-pain__col, #wl-included .wl-feat) {
  border-width: 2px; border-color: var(--ink-600); border-radius: 28px;
}
.page--white-label #wl-faq .accordion__item { border-radius: 20px; }

/* ---- phones: headings at most 28px, running text at most 16px ----------- */
@media (max-width: 599px) {
  .page--white-label :is(.t-h2, .t-display, .wl-price__h2, .faq__title) { font-size: min(28px, 7vw); }
  .page--white-label .page-hero__h1,
  .page--white-label .cta__h2 { font-size: min(28px, 7.05vw); }
  .page--white-label :is(.t-h3, .t-h4, .wl-feat__title, .wl-price__name) { font-size: 20px; }
  .page--white-label :is(.t-body, .section__lead) { font-size: 16px; }
}

/* ===========================================================================
   IN-VIEW MOTION - the lander's (see lander.css, IN-VIEW MOTION): titles
   rise word by word out of a soft blur, subtext answers, framed shots settle
   up into place, and cards step in in reading order as each row arrives.
   wl-lander.js tags them [data-io] and adds .io-in; nothing is hidden before
   it has run (.wl-io on <html>), and reduced motion never sets it.
   =========================================================================== */
.wl-io [data-io="title"] .tw { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(8px);
  transition: opacity .75s var(--wl-ease), transform .75s var(--wl-ease), filter .75s var(--wl-ease);
  transition-delay: calc(min(var(--i), 16) * 45ms); }
.wl-io [data-io="title"].io-in .tw { opacity: 1; transform: none; filter: none; }
.wl-io [data-io="sub"] { opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--wl-ease), transform .7s var(--wl-ease); transition-delay: calc(.25s + var(--k, 0) * 90ms); }
.wl-io [data-io="sub"].io-in { opacity: 1; transform: none; }
.wl-io [data-io="tray"] { opacity: 0; transform: translateY(36px) scale(.985); transform-origin: 50% 0;
  transition: opacity .9s var(--wl-ease), transform .9s var(--wl-ease); }
.wl-io [data-io="tray"].io-in { opacity: 1; transform: none; }
.wl-io [data-io="item"] { opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--wl-ease), transform .7s var(--wl-ease); transition-delay: calc(.15s + var(--k, 0) * 80ms); }
.wl-io [data-io="item"].io-in { opacity: 1; transform: none; }

/* ===========================================================================
   Closing CTA: the lander's footer grain (Paper Shaders' GrainGradient with
   mastra.ai's footer settings, in the amber tints) in place of the animated
   blob, mounted by wl-lander.js as the section nears the screen. No WebGL:
   the plain ground stays.
   =========================================================================== */
.page--white-label #wl-final { isolation: isolate; }
.page--white-label #wl-final .cta__blob { display: none; }
/* like the lander's, it runs from the section's top down behind the footer
   (wl-lander.js sets the height); the footer's plate sits over it, so the
   grain shows round the plate instead of stopping in a line at the seam */
.page--white-label .wl-grain { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 0; pointer-events: none; }
.page--white-label .wl-grain canvas { opacity: 0; transition: opacity .9s ease-out; }
.page--white-label .wl-grain.is-on canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page--white-label .wl-grain canvas { transition: none; } }

/* ===========================================================================
   TRAYS - mastra.ai's section grammar, as on the lander (lp-frame / lp-stage)
   Each section's content sits in a deep frame with a notched tab on top,
   holding a bordered stage, holding the cards. Corners nest: only the outer
   radius and each padding are set, every inner radius is derived from them.
   The tab names what is inside; it is not a heading.
   =========================================================================== */
.page--white-label {
  --r-frame: 32px; --p-frame: 8px;                       /* phones */
  --r-stage: calc(var(--r-frame) - var(--p-frame));
  --p-stage: 8px;
  --r-card: calc(var(--r-stage) - var(--p-stage));
}
@media (min-width: 768px) {
  .page--white-label { --r-frame: 56px; --p-frame: 16px; --p-stage: 12px; }   /* 56 / 40 / 28 */
}
.page--white-label .wl-frame {
  position: relative; max-width: 1300px; margin: clamp(88px, 9vw, 132px) auto 0;
  padding: var(--p-frame); border-radius: var(--r-frame); background: var(--ink-950);
}
.page--white-label .wl-frame + .wl-frame { margin-top: clamp(96px, 9vw, 132px); }
.page--white-label .wl-frame__tab {
  position: absolute; left: 50%; top: 1px; translate: -50% -100%; z-index: 1; margin: 0;
  padding: 14px 34px 6px; border-radius: 24px 24px 0 0; background: var(--ink-950);
  color: var(--cream-400); font-family: var(--font-body); font-size: 15px; font-weight: 470; line-height: 22px;
  letter-spacing: .025em; white-space: nowrap;
}
.page--white-label .wl-frame__tab::before,
.page--white-label .wl-frame__tab::after { content: ''; position: absolute; bottom: 0; width: 24px; height: 24px; pointer-events: none; }
.page--white-label .wl-frame__tab::before { left: -24px; background: radial-gradient(circle at 0 0, transparent 23.5px, var(--ink-950) 24px); }
.page--white-label .wl-frame__tab::after { right: -24px; background: radial-gradient(circle at 100% 0, transparent 23.5px, var(--ink-950) 24px); }
@media (min-width: 768px) {
  .page--white-label .wl-frame__tab { padding: 16px 44px 8px; border-radius: 28px 28px 0 0; font-size: 17px; }
  .page--white-label .wl-frame__tab::before, .page--white-label .wl-frame__tab::after { width: 28px; height: 28px; }
  .page--white-label .wl-frame__tab::before { left: -28px; background: radial-gradient(circle at 0 0, transparent 27.5px, var(--ink-950) 28px); }
  .page--white-label .wl-frame__tab::after { right: -28px; background: radial-gradient(circle at 100% 0, transparent 27.5px, var(--ink-950) 28px); }
}
.page--white-label .wl-stage {
  display: grid; gap: var(--p-stage); padding: var(--p-stage);
  border: 2px solid var(--ink-600); border-radius: var(--r-stage); background: var(--ink-800);
}
/* the stage owns the spacing now: the blocks inside drop their own outer margins */
.page--white-label .wl-stage > * { margin: 0; min-width: 0; }

/* the grids inside a stage space their cards by the stage padding, so the
   inner corners stay concentric with the stage's */
.page--white-label .wl-stage :is(.wl-market, .wl-pain, .wl-own-grid, .wl-mono-grid, .wl-models, .wl-included-rows,
  .wl-bonuses, .wl-launch-steps, .wl-audience, .faq__grid) { gap: var(--p-stage); }

/* cards on the stage: the lander's card */
.page--white-label .wl-stage :is(.wl-market__panel, .wl-pain__col, .wl-own-card, .wl-model, .wl-feat, .wl-bonus,
  .wl-rate-card, .wl-calc, .accordion__item, .wl-audience > li, .wl-launch-steps > li) {
  border: 2px solid var(--ink-600); border-radius: var(--r-card); background: var(--ink-700);
}
/* framed shots and the gallery sit on the stage with the card radius */
.page--white-label .wl-stage :is(.wl-demo, .wl-shot, .wl-console-overview, .wl-output, .wl-price__frame) { border-radius: var(--r-card); }

/* pricing and the template gallery carry their own decorative frames; inside a
   tray those would be a frame within a frame */
.page--white-label .wl-stage .wl-price__corner { display: none; }

@media (max-width: 599px) {
  /* the tab plus its notches must fit inside the frame on a 390px phone */
  .page--white-label .wl-frame__tab { max-width: calc(100% - 64px); overflow: visible; }
}

/* the tray's tab rises from behind it a beat after the tray settles */
.wl-io [data-io="tray"] > .wl-frame__tab { opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--wl-ease) .3s, transform .6s var(--wl-ease) .3s; }
.wl-io [data-io="tray"].io-in > .wl-frame__tab { opacity: 1; transform: none; }

/* blocks inside a stage fill it, rather than keeping the max-widths they had
   when they sat on the open page (which left an empty strip in the tray) */
.page--white-label .wl-stage > *,
.page--white-label .wl-stage .wl-price__table { max-width: none; width: auto; margin-inline: 0; }
/* the lander's cards are plain: the Market panels drop their hatch layer */
.page--white-label .wl-stage .wl-market__lines { display: none; }
/* an id-level rule caps the Pain grid at 1024px; inside a tray it fills the stage */
.page--white-label #wl-pain .wl-stage .wl-pain { max-width: none; }
/* the pricing table follows the card radius */
.page--white-label .wl-stage .wl-price__table { border-radius: var(--r-card); overflow: hidden; }

/* ===========================================================================
   BREATHING ROOM IN THE TRAYS
   On the lander nothing sits straight on a stage: copy lives in a padded
   card, and every card has the lander's padding. Several blocks here kept the
   spacing they had on the open page, so they hugged the stage edges. The
   section ids are in the selectors because the page's own rules for these
   blocks are id-scoped and would otherwise win.
   --wl-pad   the lander's card padding
   --wl-pad-lg  copy blocks that are a whole card on their own
   =========================================================================== */
.page--white-label { --wl-pad: clamp(24px, 2.6vw, 36px); --wl-pad-lg: clamp(28px, 3.4vw, 56px); }

/* copy that sat straight on the stage becomes a card */
.page--white-label #wl-idea .wl-stage .wl-idea,
.page--white-label #wl-monetize .wl-stage .wl-mono-grid > div,
.page--white-label #wl-console .wl-stage .wl-cap-grid,
.page--white-label #wl-reveal .wl-stage .wl-reveal {
  border: 2px solid var(--ink-600); border-radius: var(--r-card); background: var(--ink-700);
}
.page--white-label #wl-idea .wl-stage .wl-idea { padding: var(--wl-pad-lg); }
.page--white-label #wl-monetize .wl-stage .wl-mono-grid > div { padding: var(--wl-pad); }
.page--white-label #wl-console .wl-stage .wl-cap-grid { padding: var(--wl-pad); }
/* Reveal fills its tray with real room above and below; its content keeps a
   readable measure in the middle */
.page--white-label #wl-reveal .wl-stage .wl-reveal {
  max-width: none; padding: clamp(40px, 5.5vw, 80px) var(--wl-pad-lg);
}
.page--white-label #wl-reveal .wl-stage .wl-reveal > * { width: 100%; max-width: 900px; margin-inline: auto; }
/* the money-flow pills get their own row of air above the two columns */
.page--white-label #wl-monetize .wl-stage .wl-flow { padding: clamp(12px, 1.4vw, 20px) var(--wl-pad); }

/* every card on a stage: the lander's 2px edge, nested corner and padding */
.page--white-label #wl-launch .wl-stage .wl-launch-steps > li,
.page--white-label #wl-models .wl-stage .wl-model,
.page--white-label #wl-bonuses .wl-stage .wl-bonus,
.page--white-label #wl-economics .wl-stage :is(.wl-rate-card, .wl-calc),
.page--white-label #wl-audience .wl-stage .wl-audience > li,
.page--white-label #wl-market .wl-stage .wl-market__panel,
.page--white-label #wl-pain .wl-stage .wl-pain__col {
  border: 2px solid var(--ink-600); border-radius: var(--r-card); background-color: var(--ink-700);
  padding: var(--wl-pad);
}
/* cards that frame a screenshot keep a tighter inset so the image stays large */
.page--white-label #wl-experience .wl-stage .wl-own-card,
.page--white-label #wl-included .wl-stage .wl-feat {
  border: 2px solid var(--ink-600); border-radius: var(--r-card); background-color: var(--ink-700);
  padding: clamp(16px, 1.8vw, 24px);
}

/* Reveal: the card spans the whole stage (its content stays centred at a
   readable measure), and one flexible column so nothing overflows on phones */
.page--white-label #wl-reveal .wl-stage .wl-reveal {
  width: auto; max-width: none; margin-inline: 0; justify-self: stretch; grid-template-columns: minmax(0, 1fr);
}
/* whatever follows a tray (a closing line, a CTA, the trust strip) stands clear of it */
.page--white-label .wl-frame + :not(.wl-frame) { margin-top: clamp(28px, 3vw, 44px); }

/* Idea: on wide screens the console shot is as tall as the copy beside it and
   runs off the card's right edge, cropping about a fifth to a third of it. Below
   1280px the column is too narrow for that (the crop passes half), so the shot
   sits whole in its column as before. */
@media (min-width: 1280px) {
  .page--white-label #wl-idea .wl-stage .wl-idea { overflow: hidden; padding-right: 0; align-items: stretch; }
  .page--white-label #wl-idea .wl-idea__visual { position: relative; align-self: stretch; }
  .page--white-label #wl-idea .wl-idea__visual .wl-project-shot {
    position: absolute; top: 0; bottom: 0; left: 0; width: auto; max-width: none; margin: 0; aspect-ratio: 16 / 9;
  }
  .page--white-label #wl-idea .wl-idea__visual .wl-project-shot img { width: auto; height: 100%; max-width: none; }
}

/* the Reveal button fills its card instead of sizing itself off the window,
   which pushed it past the card on phones */
.page--white-label #wl-reveal .wl-stage .wl-cta-stack { width: 100%; max-width: 760px; margin-inline: auto; }
.page--white-label #wl-reveal .wl-stage .wl-callout .btn { width: 100%; max-width: 100%; min-width: 0; }

/* Reveal's infrastructure list is the argument of the section, so it reads as
   content, not as meta: 16px light text in inset rows with a visible edge and
   a small amber mark, instead of 12px dim grey on a hairline */
.page--white-label #wl-reveal .wl-infra { gap: var(--p-stage); margin-top: clamp(20px, 2vw, 28px); }
.page--white-label #wl-reveal .wl-infra li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border: 1px solid var(--ink-500); background: var(--ink-850);
  color: var(--cream-100); font-family: var(--font-body); font-size: 16px; font-weight: 450; line-height: 1.3; letter-spacing: 0.255px;
}
.page--white-label #wl-reveal .wl-infra li::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.page--white-label #wl-reveal .wl-reveal .t-body { color: var(--cream-100); }

/* content that was still set at meta size inside the trays: the feature
   descriptions, the pricing lists and the money-flow pills */
.page--white-label #wl-included .wl-stage .wl-feat__desc { font-size: 15px; line-height: 1.45; color: var(--cream-300); }
.page--white-label #wl-pricing .wl-stage .wl-price__list li { font-size: 15px; line-height: 1.4; }
.page--white-label #wl-monetize .wl-stage .wl-flow li { font-size: 14px; }