/* ============================================================================
   AIWA · Sub-page styles

   The home page is one continuous scroll-driven composition; everything else on
   this site is a PAGE - a reading surface with a nav, a heading, blocks of
   content and a footer. Those pages share the tokens, the type scale, the
   button, the blur-reveal and the footer from tokens/base/site.css, and add
   only what a page needs and the home page has no use for.

   NOTHING HERE REDEFINES A TOKEN. If a value looks like it wants to be a token,
   it belongs in tokens.css and the spec, not in this file.

   The vocabulary, in the order it appears below:

     TYPE HIERARCHY (AIWA-Style-Guide-Design-System.md §2) — size then color:
       1. Section head     .t-h2          cream-050 (display)
       2. Section eyebrow  .eyebrow       cream-500 mono UPPER — only above .t-h2
       3. Card title       .t-h4 / h3     cream-050 (display)
       4. Body / lead      .t-body        cream-300
       5. In-card label    .wl-card-label cream-400 body font — NOT .eyebrow
       6. Meta / caption   .t-small       cream-500
       Rare punch (callout lead, idea punch, manifesto) stays below section .t-h2.

     .page             body class - nav visible from the first paint (§2.2's
                       opacity:0 is a hero-entrance state and there is no
                       entrance here), and top padding for the fixed nav.
     .page-hero        eyebrow + display heading + lead + actions, over a blob
     .page-badge       outline pill (no fill) in base.css — hero proof + page heroes
                       Normal case. Not .eyebrow.
     .page-meta        the hairline strip of facts under a page hero
     .wl-card-label    in-card label (body font). Not .eyebrow.
                       .eyebrow is ONLY for section-head intros above headlines.
     .steps            numbered "how it works" rail
     .compare          feature-by-product comparison table
     .cases            use-case grid (a lighter .feature)
     .related          "explore more" cards
     .prose            long-form copy: legal documents and doc articles
     .toc              on-this-page nav for a long document
     .hub              the /legal directory listing
     .cards            docs + resources card grids
     .quickstart       the terminal-ish code block on /docs
     .notfound         /404
     .page-main        flush marketing layout (/features): sections bring
                       their own .shell so alt bands and the jump nav can
                       go edge to edge
     .feat-jump        sticky on-this-page rail under the fixed nav
     .feat-spot        split copy + product still
     .feat-shots       three shipping stills
     .feat-chips       connector catalog
     .wl-hero          /white-label offer hero + Northstar preview
     .wl-card          branded-experience cards with compact mocks
     .wl-econ          resale example table
     .wl-pricing       Annual / Lifetime offer cards
     .wl-offer-hero    centered sales hero + VSL shell
     .wl-vsl           hero video placeholder
     .wl-sticky        fixed bottom CTA after hero
     .wl-gallery       template mock gallery
   ========================================================================= */

/* ---------------------------------------------------------------------------
   The page shell
   ------------------------------------------------------------------------ */
/* overflow-x: CLIP, never hidden. The page hero's blob is deliberately wider
   than the page (that is how a glow reads as atmosphere rather than as a
   graphic), and something has to stop it adding a horizontal scrollbar. It
   cannot be `overflow: hidden` on the hero: measured at 1440x900, the hero's
   clip box draws a visible hard rectangle around the blob's faint tail. And it
   cannot be `overflow-x: hidden` HERE either - on the body that silently makes
   the block axis a scroll container, which breaks .toc's position:sticky and
   hands ScrollTrigger the wrong scroller. `clip` clips without becoming a
   scroll container, which is the entire reason it exists. */
.page { overflow-x: clip; }
/* Sales header is in normal flow and always presents the primary CTA. */
.page--white-label .nav--sales { position: relative; inset: auto; opacity: 1; }
.page--white-label .nav--sales .nav__inner { justify-content: flex-end; background: transparent; box-shadow: none; transition: none; }
.page.page--white-label main { padding-top: 0; overflow-x: clip; }
.page--white-label .wl-offer-hero { padding-top: clamp(24px, 3vw, 48px); overflow: clip; }
.page--white-label .btn:focus-visible,
.page--white-label .wl-vsl__hit:focus-visible {
  outline: 2px solid var(--cream-050);
  outline-offset: 4px;
}
.page .nav { opacity: 1; }
.page .footer { opacity: 1; filter: none; }          /* IO adds .is-in; a page
   that is shorter than the viewport never scrolls, so the observer that owns
   .is-in may never fire. A page must not be able to hide its own footer. */
.page main { padding-top: calc(var(--nav-h) + 2.5rem); }

/* Breadcrumb. One line, one hop up the tree, always the first thing in main. */
.crumb {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-500);
  transition: color var(--dur-micro) var(--ease-brand);
}
.crumb::before {
  content: ''; width: 0.9rem; height: 1px; background: currentColor;
  transition: width var(--dur-base) var(--ease-brand);
}
.crumb:hover { color: var(--accent); }
.crumb:hover::before { width: 1.4rem; }

/* ---------------------------------------------------------------------------
   .page-hero
   The page's opening. Same instrument as the home hero's first panel - display
   type on a dark ground with one amber blob behind it - at a third of the
   height, because a page that is mostly content should not spend a full
   viewport saying its own name.
   ------------------------------------------------------------------------ */
.page-hero { position: relative; padding-block: clamp(3rem, 8vh, 6rem) clamp(3rem, 7vh, 5rem); }
/* Same treatment as .feature__blob and .cta__blob in site.css, and for the same
   reason: mix-blend-mode SCREEN, no filter. A filter:blur() on the element gives
   it its own containing box, and the SVG's rectangle then shows as a hard edge
   wherever .page-hero clips it - which is exactly what a blob must never do. */
.page-hero__blob {
  position: absolute; right: -16%; top: 50%; translate: 0 -50%;
  /* Sized to OVERFLOW the hero on every axis, which is the whole trick and the
     same one .cta__blob uses: .page-hero clips, the blob's radial fill reaches
     its own viewBox edge, so any edge that lands inside the section reads as a
     rectangle. A page hero is ~470px tall at its shortest (the legal hub) and
     this is ~990px, so there is no edge left inside to see. */
  width: min(120vw, 62rem); height: min(120vw, 62rem);
  z-index: 0; opacity: 0.34; pointer-events: none; mix-blend-mode: screen;
  /* And the belt to that braces: the blob's radial fill still carries alpha at
     its own viewBox edge, so a soft rectangle survives wherever the section does
     clip it. This mask takes its alpha to zero before the box ends, which makes
     the shape correct at any hero height rather than at the ones measured. */
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
}
.page-hero__inner { position: relative; z-index: 1; display: grid; gap: 1.5rem; justify-items: start; max-width: 56rem; }
.page-hero__h1 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 0.98; text-wrap: balance; }
.page-hero__lead { max-width: 44rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.page-hero__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.page-hero__note { font-size: 0.82rem; color: var(--cream-500); }

/* Soft pill for product/page identity — defined in base.css (.page-badge). */

/* In-card / in-panel labels. Body font. Not section eyebrows. */
.wl-card-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cream-400);
  text-transform: none;
}

/* Narrower opening for a document: prose wants a measure, not a canvas. */
.page-hero--doc { padding-bottom: clamp(2rem, 5vh, 3rem); }
.page-hero--doc .page-hero__inner { max-width: 46rem; gap: 1.1rem; }

/* ---------------------------------------------------------------------------
   .page-meta - the fact strip. Hairline top and bottom, mono labels, so the
   claims in the hero are immediately followed by something checkable.
   ------------------------------------------------------------------------ */
.page-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--ink-600); border-bottom: 1px solid var(--ink-600);
}
.page-meta div { display: grid; gap: 0.3rem; align-content: start; }
.page-meta dt, .page-meta__label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-500);
}
.page-meta dd, .page-meta__value { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; }
.page-meta dd em, .page-meta__value em { font-style: normal; font-family: var(--font-body); font-size: 0.8rem; color: var(--cream-500); margin-left: 0.45rem; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   .steps - the numbered rail.
   The index is the visual: a mono numeral against a 1px amber tick, with the
   connector drawn as a border on the item rather than a pseudo-element line, so
   it cannot fall out of sync with the row heights.
   ------------------------------------------------------------------------ */
.steps { display: grid; gap: 0; counter-reset: step; }
.steps__item {
  counter-increment: step;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vh, 2.4rem);
  border-top: 1px solid var(--ink-600);
}
.steps__item:last-child { border-bottom: 1px solid var(--ink-600); }
.steps__idx {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--accent);
  display: flex; align-items: baseline; gap: 0.6rem;
}
.steps__idx::before { content: counter(step, decimal-leading-zero); }
.steps__idx::after { content: ''; flex: 1; height: 1px; background: var(--ink-600); transform: translateY(-0.35rem); }
.steps__body { display: grid; gap: 0.6rem; max-width: 48rem; }
.steps__body h3 { font-size: clamp(1.2rem, 1.9vw, 1.65rem); }
@media (max-width: 660px) {
  .steps__item { grid-template-columns: 1fr; gap: 0.7rem; }
  .steps__idx::after { display: none; }
}

/* ---------------------------------------------------------------------------
   .compare - the comparison table.
   Scrolls inside its own box; the first column is sticky, because a five-column
   table read on a phone is useless the moment the feature name leaves the
   screen. The AIWA column is tinted so the eye finds it without reading.
   ------------------------------------------------------------------------ */
.compare { overflow-x: auto; border: 1px solid var(--ink-600); border-radius: 1.4rem; background: var(--ink-850); }
.compare table { border-collapse: collapse; width: 100%; min-width: 44rem; }
.compare th, .compare td {
  padding: 0.95rem 1.1rem; text-align: left; font-size: 0.85rem;
  border-bottom: 1px solid var(--ink-700);
}
.compare thead th {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-500); white-space: nowrap; background: var(--ink-800);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody th {
  font-weight: 400; color: var(--cream-100); font-family: var(--font-body); font-size: 0.85rem;
  position: sticky; left: 0; background: var(--ink-850); min-width: 15rem;
}
.compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--ink-800); }
.compare td { color: var(--cream-500); text-align: center; }
.compare .is-ours { background: rgba(254, 160, 2, 0.05); color: var(--cream-050); }
.compare thead .is-ours { color: var(--accent); background: rgba(254, 160, 2, 0.09); }
/* Yes/no as marks, not words: a column of "Yes" reads slower than a column of ticks. */
.compare i {
  display: inline-block; width: 0.62rem; height: 0.34rem;
  border-left: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good);
  transform: rotate(-45deg) translateY(-0.1rem);
}
.compare s { display: inline-block; width: 0.7rem; height: 1px; background: var(--ink-500); text-decoration: none; vertical-align: middle; }

/* ---------------------------------------------------------------------------
   .feature--wide - a lead card two columns wide.

   site.css's .feature--hero spans all three, which is right for the home page's
   Project Brain card (one statement, then three supporting cards). The agent
   grids here have FIVE items, and 3 + 1 + 1 leaves a hole two columns wide.
   2 + 3 fills the grid exactly, which is the only reason this variant exists.
   ------------------------------------------------------------------------ */
.feature--wide { grid-column: span 2; min-height: 15rem; align-content: end; }
@media (max-width: 900px) { .feature--wide { grid-column: auto; min-height: 0; } }

/* ---------------------------------------------------------------------------
   .cases - the use-case grid. A .feature without the blob or the hover spring:
   these are read, not clicked.
   ------------------------------------------------------------------------ */
.cases { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cases article {
  display: grid; gap: 0.6rem; align-content: start;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border: 1px solid var(--ink-600); border-radius: 1.4rem;
  background: linear-gradient(180deg, var(--ink-800), rgba(18, 18, 17, 0.35));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cases h3 { font-size: 1.05rem; }
.cases p { font-size: 0.88rem; color: var(--cream-300); line-height: 1.6; }
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cases { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   .related - "explore more". Cards that ARE links, so the whole card is the
   target rather than a 12px "learn more" at the bottom of one.
   ------------------------------------------------------------------------ */
.related { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.related a {
  display: grid; gap: 0.55rem; align-content: start;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border: 1px solid var(--ink-600); border-radius: 1.4rem;
  background: var(--ink-800);
  transition: border-color var(--dur-base) var(--ease-brand), background var(--dur-base) var(--ease-brand);
}
.related h3 { font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.related h3 span { color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; transition: transform var(--dur-base) var(--ease-brand); }
.related p { font-size: 0.86rem; color: var(--cream-300); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .related a:hover { border-color: rgba(254, 160, 2, 0.45); background: var(--ink-700); }
  .related a:hover h3 span { transform: translateX(0.3rem); }
}

/* ---------------------------------------------------------------------------
   .prose - long-form copy.
   Used by the legal documents and the doc articles, both of which arrive as
   rendered markdown, so this styles BARE TAGS: the generator emits <h2>/<p>/
   <ul>/<table> with no classes and this file decides what they look like.

   scroll-margin-top on the headings is not decoration: every h2 is a link
   target from .toc, and without it the fixed nav lands on top of the heading
   the reader just asked for.
   ------------------------------------------------------------------------ */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--ink-600);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.25; margin-top: 2rem;
  color: var(--cream-050);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.prose p, .prose li { font-size: 1rem; line-height: 1.75; color: var(--cream-300); }
.prose ul { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.prose li { position: relative; padding-left: 1.2rem; }
.prose li::before {
  content: ''; position: absolute; left: 0; top: 0.75em;
  width: 0.42rem; height: 1px; background: var(--accent); opacity: 0.7;
}
.prose strong { color: var(--cream-050); font-weight: 600; }
.prose em { font-style: italic; }
.prose a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: rgba(254, 160, 2, 0.4);
  transition: text-decoration-color var(--dur-micro) var(--ease-brand);
}
.prose a:hover { text-decoration-color: var(--accent); }

/* Tables are the widest thing in a legal document. They scroll in their own box
   rather than pushing the page into a horizontal scroll on a phone. */
.table-scroll { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--ink-600); border-radius: 1rem; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 30rem; }
.table-scroll th, .table-scroll td {
  padding: 0.8rem 1rem; text-align: left; font-size: 0.88rem; line-height: 1.6;
  border-bottom: 1px solid var(--ink-700);
}
.table-scroll th { color: var(--cream-050); font-weight: 600; background: var(--ink-800); white-space: nowrap; }
.table-scroll td { color: var(--cream-300); }
.table-scroll tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   .doc-layout - a document and its on-this-page nav.
   The nav is sticky beside the prose above 1000px and collapses to a plain
   block above the document below it, where there is no room for a column and a
   sticky element would eat a third of a phone screen.
   ------------------------------------------------------------------------ */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.doc-layout .prose { max-width: 44rem; }
.toc { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: 0.7rem; }
.toc__name {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-500);
}
.toc ol { display: grid; gap: 0.15rem; max-height: 60vh; overflow-y: auto; }
.toc a {
  display: block; padding: 0.3rem 0 0.3rem 0.8rem;
  border-left: 1px solid var(--ink-600);
  font-size: 0.82rem; line-height: 1.45; color: var(--cream-500);
  transition: color var(--dur-micro) var(--ease-brand), border-color var(--dur-micro) var(--ease-brand);
}
.toc a:hover { color: var(--cream-050); border-color: var(--accent); }
@media (max-width: 1000px) {
  .doc-layout { grid-template-columns: 1fr; gap: 2rem; }
  .toc { position: static; padding: 1.2rem 1.4rem; border: 1px solid var(--ink-600); border-radius: 1.2rem; background: var(--ink-850); }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .doc-layout > .toc { order: -1; }
}
@media (max-width: 560px) { .toc ol { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   .hub - the /legal directory. A list, not cards: these are documents, and a
   reader arriving here is looking for one row by name.
   ------------------------------------------------------------------------ */
.hub { display: grid; gap: 3rem; }
.hub__group { display: grid; gap: 0.9rem; }
.hub__group-name {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-500);
}
.hub__list { border-top: 1px solid var(--ink-600); }
.hub__list li { border-bottom: 1px solid var(--ink-600); }
.hub__list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem;
  padding-block: 1.3rem;
  transition: padding-inline var(--dur-base) var(--ease-brand);
}
.hub__list h2 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--cream-050); transition: color var(--dur-micro) var(--ease-brand); }
.hub__list p { margin-top: 0.3rem; font-size: 0.88rem; color: var(--cream-500); line-height: 1.55; max-width: 52ch; }
/* a > span:last-child, NOT .hub__list span: the row wraps its heading and its
   description in a span too, and the loose selector put both in mono. */
.hub__list a > span:last-child {
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-500);
  transition: color var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand);
}
@media (hover: hover) and (pointer: fine) {
  .hub__list a:hover { padding-inline: 0.8rem 0; }
  .hub__list a:hover h2 { color: var(--accent); }
  .hub__list a:hover > span:last-child { color: var(--accent); transform: translateX(0.35rem); }
}

/* ---------------------------------------------------------------------------
   .cards - docs sections and resource entries.
   ------------------------------------------------------------------------ */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.card {
  display: grid; gap: 0.9rem; align-content: start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--ink-600); border-radius: 1.6rem;
  background: linear-gradient(180deg, var(--ink-800), rgba(18, 18, 17, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card__head { display: grid; gap: 0.45rem; }
.card__kind { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.card h3 { font-size: 1.15rem; }
.card p { font-size: 0.88rem; color: var(--cream-300); line-height: 1.6; }
.card__links { display: grid; gap: 0.1rem; padding-top: 0.3rem; border-top: 1px solid var(--ink-600); }
.card__links a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  padding-block: 0.55rem;
  font-size: 0.87rem; color: var(--cream-300);
  transition: color var(--dur-micro) var(--ease-brand);
}
.card__links a + a { border-top: 1px solid rgba(42, 37, 30, 0.6); }
.card__links a em { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-500); white-space: nowrap; }
.card__links a:hover { color: var(--accent); }
.card__links a:hover em { color: var(--cream-500); }
.card__cta { justify-self: start; margin-top: 0.2rem; }

/* ---------------------------------------------------------------------------
   .quickstart - the four-line "you are here in 30 seconds" block on /docs.
   Mono on the raised surface, with the prompt glyph coloured the way the hero
   canvas colours its own.
   ------------------------------------------------------------------------ */
.quickstart {
  display: grid; gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--ink-600); border-radius: 1.6rem;
  background: var(--ink-850);
}
.quickstart > .btn { justify-self: start; }
.quickstart__rows { display: grid; gap: 0.9rem; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; }
.quickstart__row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; }
.quickstart__row b { color: var(--accent); font-weight: 400; }
.quickstart__row span { color: var(--cream-100); }
.quickstart__row span i { display: block; font-style: normal; color: var(--cream-500); font-size: 0.74rem; margin-top: 0.25rem; }

/* ---------------------------------------------------------------------------
   .notfound
   ------------------------------------------------------------------------ */
.notfound { min-height: 76vh; display: grid; align-content: center; gap: 1.5rem; justify-items: start; }
.notfound__code { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--accent); }

/* ---------------------------------------------------------------------------
   Section rhythm for pages.
   The home page's .section owns its own vertical space; on a page the blocks
   are read one after another and want a tighter, even beat.
   ------------------------------------------------------------------------ */
.page-section { padding-block: clamp(3.5rem, 8vh, 6rem); }
.page-section--tight { padding-block: clamp(2rem, 5vh, 3.5rem); }
.page-section__head { display: grid; gap: 0.85rem; justify-items: start; margin-bottom: clamp(2rem, 4vh, 3rem); max-width: 56rem; }
/* Page section heads: quieter than home .t-h2 landmarks, still the loudest
   text in each section (above card .t-h4, body, labels). */
.page-section__head .t-h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  color: var(--cream-050);
  line-height: 1.05;
}
.page-section__head .eyebrow { color: var(--cream-500); }
.page-section__head .section__lead,
.page-section__head .t-body { color: var(--cream-300); }
.page-section__head--center { justify-items: center; text-align: center; margin-inline: auto; }
.page-section--alt { background: var(--ink-850); border-block: 1px solid var(--ink-600); }

/* The FAQ on a page has no sticky aside; it is one column at full measure. */
.page .faq__grid--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .page .faq__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   /features · flush marketing page
   ------------------------------------------------------------------------ */
.page-main > .cta { padding-inline: var(--gutter); }
.page-main > .cta .cta__inner { max-width: var(--measure); margin-inline: auto; }

.feat-jump {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  border-block: 1px solid var(--ink-600);
  background: var(--ink-900);
}
.feat-jump__list {
  display: flex;
  gap: 0.25rem 1.4rem;
  list-style: none;
  margin: 0;
  padding-block: 0.85rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.feat-jump__list::-webkit-scrollbar { display: none; }
.feat-jump a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-500);
  white-space: nowrap;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-brand), border-color var(--dur-micro) var(--ease-brand);
}
.feat-jump a:hover { color: var(--cream-050); }
.feat-jump a[aria-current="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.page-main .page-section[id],
.feat-spot {
  scroll-margin-top: calc(var(--nav-h) + 3.25rem);
}

.feat-spot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.feat-spot--flip .feat-spot__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.feat-spot--flip .feat-spot__copy { order: 2; }
.feat-spot--flip .feat-spot__frame { order: 1; }
.feat-spot__copy { display: grid; gap: 1rem; justify-items: start; max-width: 38rem; }
.feat-spot__copy .t-h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.feat-spot__points {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.feat-spot__points li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream-300);
}
.feat-spot__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.42rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.75;
}
.feat-spot__frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ink-600);
  border-radius: 1.1rem;
  background: var(--ink-850);
}
.feat-spot__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 900px) {
  .feat-spot__grid,
  .feat-spot--flip .feat-spot__grid { grid-template-columns: 1fr; }
  .feat-spot--flip .feat-spot__copy,
  .feat-spot--flip .feat-spot__frame { order: 0; }
}

.feat-shots {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feat-shot { display: grid; gap: 0.7rem; align-content: start; }
.feat-shot h3 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.feat-shot p { font-size: 0.88rem; line-height: 1.6; color: var(--cream-300); }
@media (max-width: 900px) { .feat-shots { grid-template-columns: 1fr; } }

.feat-chips {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.feat-chip {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--ink-600);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, var(--ink-800), rgba(18, 18, 17, 0.35));
}
.feat-chip strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.feat-chip span { font-size: 0.84rem; line-height: 1.5; color: var(--cream-300); }
.feat-note {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cream-500);
}
.feat-note a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(254, 160, 2, 0.4);
}
.feat-note a:hover { text-decoration-color: var(--accent); }
@media (max-width: 900px) { .feat-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feat-chips { grid-template-columns: 1fr; } }

.page-main .compare table { min-width: 32rem; }
.cases--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .cases--quad { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .page-main .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-main .why__grid { grid-template-columns: 1fr; }
}

.toc a[aria-current="true"] { color: var(--cream-050); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   /white-label
   ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
   /white-label hero — multi-surface Brand Takeover (higher fidelity than home)
   ------------------------------------------------------------------------ */
.wl-hero figure { margin: 0; }
.page .accordion__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(254, 160, 2, 0.4);
}
.page .accordion__body a:hover { text-decoration-color: var(--accent); }
.wl-hero .page-hero__blob { right: -8%; }
.wl-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
.wl-hero__copy { display: grid; gap: 1.15rem; justify-items: start; max-width: 40rem; }
.wl-hero__copy .page-hero__h1 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 0.98; text-wrap: balance; }
.wl-hero__copy .page-hero__lead { max-width: 40rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.wl-hero__visual { margin: 0; min-width: 0; }
.wl-takeover--page {
  overflow: clip;
  --wl-page-inset: 0.75rem;
  --wl-inner-radius: 8px;
  --wl-mastra-tab-h: 48px;
  --wl-mastra-gap: 14px;
  --wl-mastra-tab-gap: 12px;
  --wl-mastra-radius: 14px;
  --wl-mastra-path-radius: 16px;
  --wl-mastra-notch: 28px;
  --wl-mastra-shell: var(--mock-chrome, #161412);
  --wl-mastra-border: color-mix(in srgb, #504A43 55%, transparent);
  --wl-mastra-idle: #12100e;
  --wl-mastra-idle-hover: color-mix(in srgb, #161412 80%, var(--cream-050) 6%);
  display: grid;
  gap: 0;
}
/* Mastra-style SVG clip shell: active tab bump merges into the panel body. */
.wl-mastra {
  position: relative;
  z-index: 1;
  min-height: clamp(22rem, 52vh, 30rem);
  height: clamp(22rem, 52vh, 30rem);
  overflow: visible;
}
.wl-mastra__clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wl-mastra__fill {
  position: absolute;
  inset: 0;
  background: var(--wl-mastra-shell);
}
.wl-mastra__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.wl-mastra__border {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--wl-mastra-border);
}
.wl-mastra__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: var(--wl-mastra-tab-h) minmax(0, 1fr);
  gap: var(--wl-mastra-gap);
  height: 100%;
  min-height: 0;
}
.wl-mastra__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wl-mastra-tab-gap);
  height: var(--wl-mastra-tab-h);
  margin: 0;
  padding: 0;
}
.wl-mastra__trigger {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--wl-mastra-radius);
  background: var(--wl-mastra-idle);
  color: color-mix(in srgb, var(--cream-050) 62%, transparent);
  transition: background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.wl-mastra__trigger:not(:has([aria-selected="true"])):is(:hover, :focus-within) {
  border-color: var(--wl-mastra-border);
  background: var(--wl-mastra-idle-hover);
  color: var(--cream-050);
}
.wl-mastra__trigger:has([aria-selected="true"]) {
  background: transparent;
  border-color: transparent;
  color: var(--cream-050);
}
.wl-mastra__tab {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: calc(var(--wl-mastra-radius) - 2px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
}
.wl-mastra__tab:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent);
}
.wl-mastra__tab-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.wl-mastra__tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.wl-mastra__stage {
  position: relative;
  min-height: 0;
  padding: var(--wl-page-inset);
  box-sizing: border-box;
}
.wl-takeover--page .wl-takeover__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0.55rem) scale(0.992);
  filter: blur(4px);
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.56s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.wl-takeover--page .wl-takeover__panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  pointer-events: auto;
  position: relative;
  inset: auto;
  height: 100%;
}
.wl-takeover--page .wl-takeover__panel[hidden] { display: block; }
.wl-takeover--page .wl-takeover__panel:not(.is-active) { position: absolute; inset: 0; }
.wl-takeover--page .wl-takeover__browser {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  border: 1px solid color-mix(in srgb, #504A43 45%, transparent);
  border-radius: 12px;
  overflow: hidden;
  background: var(--mock-chrome, #161412);
  box-shadow: none;
}
.wl-takeover--page .wl-takeover__chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--mock-chrome, #161412);
  border-bottom: 0;
  padding: 0.55rem 0.75rem;
}
.wl-takeover--page .wl-takeover__body {
  margin: 0 var(--wl-page-inset) var(--wl-page-inset);
  border-radius: var(--wl-inner-radius);
  border: 0;
  background: var(--mock-content, #252320);
  overflow: hidden;
  min-height: 0;
}
.wl-takeover__body--center {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  padding: 1.6rem 1.2rem;
  text-align: center;
  min-height: 14rem;
  color: var(--cream-050);
  background: var(--mock-content, #252320);
}
.wl-takeover--page .wl-takeover__body--center .wl-takeover__sub {
  color: var(--cream-500);
}
.wl-takeover--page .wl-takeover__body--center .wl-mark {
  color: var(--accent);
}
.wl-takeover--page .wl-takeover__cta--partner {
  background: var(--accent);
  color: var(--ink-950);
  border-radius: 999px;
}
.wl-takeover__body--builder {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  min-height: 14rem;
  color: var(--cream-050);
  background: var(--mock-content, #252320);
}
.wl-builder__rail {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.9rem 0.7rem;
  border-right: 1px solid #3a3530;
  background: color-mix(in srgb, #161412 70%, transparent);
  font-size: 0.7rem;
  color: var(--cream-500);
}
.wl-builder__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  color: var(--cream-050);
  font-weight: 600;
  font-size: 0.72rem;
}
.wl-builder__rail .is-hot { color: var(--accent); font-weight: 600; }
.wl-builder__main {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  align-content: start;
}
.wl-builder__prompt {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--wl-inner-radius, 8px);
  border: 1px solid #3a3530;
  background: #2c2926;
  font-size: 0.78rem;
  color: var(--cream-500);
}
.wl-builder__preview {
  display: grid;
  gap: 0.25rem;
  min-height: 7rem;
  place-content: center;
  text-align: center;
  border-radius: var(--wl-inner-radius, 8px);
  border: 1px dashed color-mix(in srgb, var(--cream-050) 18%, transparent);
  background:
    radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--ink-850);
  color: var(--cream-050);
}
.wl-builder__preview span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-500);
}
.wl-builder__preview strong { font-size: 0.95rem; }
.wl-takeover__body--pricing {
  display: grid;
  gap: 0.85rem;
  align-content: center;
  justify-items: stretch;
  padding: 1.25rem 1.1rem;
  min-height: 14rem;
  color: var(--cream-050);
  background: var(--mock-content, #252320);
}
.wl-price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.wl-price-cards article {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  padding: 0.75rem 0.4rem;
  border-radius: var(--wl-inner-radius, 8px);
  border: 1px solid #3a3530;
  background: #2c2926;
  text-align: center;
}
.wl-price-cards article span { font-size: 0.68rem; color: var(--cream-500); }
.wl-price-cards article b { font-size: 1.1rem; }
.wl-price-cards article em { font-style: normal; font-size: 0.65rem; color: var(--cream-500); }
.wl-price-cards article.is-hot {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.wl-takeover__hint {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cream-500);
}
@media (max-width: 900px) {
  .wl-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wl-takeover--page {
    --wl-page-inset: 0.6rem;
    --wl-mastra-tab-h: 42px;
    --wl-mastra-gap: 10px;
    --wl-mastra-tab-gap: 8px;
    --wl-mastra-radius: 14px;
    --wl-mastra-path-radius: 16px;
    --wl-mastra-notch: 22px;
  }
  .wl-mastra {
    min-height: clamp(20rem, 58vh, 26rem);
    height: clamp(20rem, 58vh, 26rem);
  }
  .wl-mastra__tab {
    gap: 0.3rem;
    padding: 0 0.45rem;
  }
  .wl-mastra__tab-icon {
    width: 0.95rem;
    height: 0.95rem;
  }
  .wl-mastra__tab-label { font-size: 0.62rem; }
}
@media (max-width: 520px) {
  .wl-takeover__body--builder { grid-template-columns: 1fr; }
  .wl-builder__rail {
    grid-auto-flow: column;
    grid-template-columns: none;
    border-right: 0;
    border-bottom: 1px solid var(--ink-600);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wl-takeover--page .wl-takeover__panel {
    transition: none;
    filter: none;
    transform: none;
  }
}

.wl-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wl-card {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  background: var(--surface-fill);
}
.wl-card h3,
.wl-card .t-h4 {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  color: var(--cream-050);
}
.wl-card p,
.wl-card .t-body { font-size: clamp(1rem, 1.1vw, 1.125rem); color: var(--cream-300); line-height: 1.6; }
.wl-card .ns-studio { min-height: 0; }
@media (max-width: 720px) {
  .wl-cards { grid-template-columns: 1fr; }
}

.wl-caps {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wl-caps article {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  justify-items: start;
  min-height: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.1rem, 2vw, 1.75rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.wl-caps article + article {
  border-inline-start: 1px solid var(--ink-600);
}
.wl-caps__icon {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--cream-050);
}
.wl-caps__icon svg,
.wl-caps__icon.ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.wl-caps article h3,
.wl-caps article .t-h4 {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  font-weight: 500;
  color: var(--cream-050);
}
.wl-caps article p,
.wl-caps article .t-body {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  color: var(--cream-300);
  line-height: 1.6;
  text-wrap: pretty;
}
.wl-caps__bridge {
  margin-top: 1.4rem;
  max-width: 46rem;
}
@media (max-width: 900px) {
  .wl-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-caps article { border-inline-start: 0; }
  .wl-caps article:nth-child(even) {
    border-inline-start: 1px solid var(--ink-600);
  }
}
@media (max-width: 560px) {
  .wl-caps { grid-template-columns: 1fr; }
  .wl-caps article,
  .wl-caps article:nth-child(even) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--ink-600);
  }
  .wl-caps article:first-child { border-block-start: 0; }
}

.page .cta__lead {
  max-width: 38rem;
}

/* Guided setup: engine-style horizontal track (scoped overrides only). */
.wl-setup.engine {
  margin-top: 0;
  padding-top: clamp(3.5rem, 8vh, 5.5rem);
  background: transparent;
}
.wl-setup .engine__head {
  align-items: flex-end;
}
.wl-setup__titles {
  display: grid;
  gap: 0.55rem;
  max-width: 28rem;
}
.wl-setup__titles .t-h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--cream-050);
}
.wl-setup-note {
  margin: 0 auto;
  padding-block: 0 2.5rem;
  font-size: 0.88rem;
  color: var(--cream-500);
  line-height: 1.6;
  max-width: var(--measure);
  text-align: center;
}

.wl-econ-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.wl-econ {
  display: grid;
  gap: 1.2rem;
  max-width: none;
}
.wl-econ .table-scroll { margin-top: 0; }
.wl-econ__title {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  color: var(--cream-050);
}
.wl-econ__caption {
  font-size: 0.875rem;
  color: var(--cream-500);
  line-height: 1.6;
  text-align: left;
}
.wl-econ__credits {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.wl-econ__credits-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--accent);
}
.wl-econ-side {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-width: 0;
}
.wl-econ-visual {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 18.5rem;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid var(--ink-600);
  background: var(--ink-850);
}
.wl-econ-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 900px) {
  .wl-econ-layout { grid-template-columns: 1fr; }
  .wl-econ-visual { max-height: 20rem; }
}

.wl-pricing .pricing__head { margin-bottom: 2.2rem; }
.wl-pricing__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 48rem;
  margin-inline: auto;
  align-items: stretch;
}
.wl-pricing__grid .plan { height: 100%; }
.wl-pricing__includes {
  max-width: 48rem;
  margin: 1.6rem auto 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--ink-600);
  border-radius: 1.4rem;
  background: var(--surface-fill);
}
.wl-pricing__includes h3,
.wl-pricing__includes .wl-card-label {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--cream-400);
}
.wl-pricing__includes .plan__list { padding-top: 0; border-top: 0; }
.wl-pricing__foot {
  max-width: 48rem;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--cream-500);
}
@media (max-width: 720px) {
  .wl-pricing__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   White-Label sales offer page (/white-label)
   ------------------------------------------------------------------------ */
.wl-offer-hero .shell--wide {
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
}
.wl-offer-hero__copy {
  display: grid;
  gap: clamp(1.2rem, 1.6vw, 1.7rem);
  justify-items: center;
  max-width: 64rem;
}
.wl-offer-hero__copy--cta { margin-top: 0.5rem; }
.wl-offer-hero__copy--cta .btn { min-height: 60px; padding-inline: 32px; font-size: 18px; font-weight: 500; max-width: 100%; }
@media (max-width: 640px) {
  .wl-offer-hero__copy .page-hero__h1 br { display: none; }
  .wl-offer-hero__copy--cta, .wl-offer-hero__copy--cta .page-hero__actions { width: 100%; }
  .wl-offer-hero__copy--cta .page-hero__actions { justify-content: center; }
}
.wl-offer-hero__copy .page-hero__h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.02;
  text-wrap: balance;
}
.wl-offer-hero__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream-500);
  max-width: 40rem;
  line-height: 1.5;
}
.wl-offer-hero__copy .page-hero__lead {
  max-width: 48rem;
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
.wl-offer-hero__price { display: grid; gap: 0.25rem; }
.wl-offer-hero__price-main {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--cream-050);
}
.wl-offer-hero__price-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--cream-500);
}
.wl-benefit-strip {
  list-style: none;
  margin: 0.5rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 1.35rem;
  width: min(100%, 44rem);
  min-width: 0;
}
.wl-benefit-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: clamp(12px, 0.8vw, 14px);
  color: var(--cream-050);
  white-space: nowrap;
}
.wl-benefit-strip__check {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--accent-hot);
}

.wl-vsl {
  width: min(100%, 62rem);
  margin: 0;
}
.wl-vsl__hit {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1336 / 729;
  padding: 0;
  border: 1px solid var(--ink-600);
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--ink-850);
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.wl-vsl__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ink-600);
  border-radius: 1.1rem;
  background: var(--ink-850);
}
.wl-vsl__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wl-vsl__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(12, 12, 11, 0.82) 100%);
  pointer-events: none;
}
.wl-vsl__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.wl-vsl__play::after {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent var(--accent);
}
.wl-vsl__hit:hover .wl-vsl__play,
.wl-vsl__hit:focus-visible .wl-vsl__play {
  transform: translate(-50%, -50%) scale(1.06);
}
.wl-vsl__caption {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.15rem;
  display: grid;
  gap: 0.35rem;
  z-index: 1;
}
.wl-vsl__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream-050);
  text-wrap: balance;
}
.wl-vsl__sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-500);
}

.wl-demo {
  margin: 0 0 2rem;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
}

/* Actionist-style product preview (Own The Experience) — lander DS tokens only */
.wl-preview {
  --wl-preview-chrome: var(--ink-850);
  --wl-preview-raised: transparent;
  --wl-preview-well: var(--ink-850);
  --wl-preview-url: var(--ink-800);
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
}
.wl-preview__toolbar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  justify-content: space-between;
}
.wl-preview__tabs,
.wl-preview__viewport,
.wl-preview__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wl-preview__tabs {
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--wl-preview-well);
  border: 1px solid var(--ink-600);
}
.wl-preview__tab {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream-500);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}
.wl-preview__tab.is-active,
.wl-preview__tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--cream-050) 12%, transparent);
  color: var(--cream-050);
}
.wl-preview__viewport {
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--ink-600);
  background: var(--wl-preview-well);
}
.wl-preview__vp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream-500);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
}
.wl-preview__vp svg,
.wl-preview__vp .ph {
  width: 0.95rem;
  height: 0.95rem;
  font-size: 0.95rem;
}
.wl-preview__vp.is-active {
  background: color-mix(in srgb, var(--cream-050) 12%, transparent);
  color: var(--cream-050);
}
.wl-preview__actions { gap: 0.4rem; margin-left: auto; }
.wl-preview__action {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--ink-600);
  color: var(--cream-500);
  background: var(--wl-preview-well);
  cursor: pointer;
}
.wl-preview__action:hover,
.wl-preview__action:focus-visible {
  color: var(--cream-050);
  border-color: color-mix(in srgb, var(--cream-050) 28%, var(--ink-600));
}
.wl-preview__action svg,
.wl-preview__action .ph {
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.9rem;
}
.wl-preview.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 10050;
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  background: var(--ink-950);
  display: grid;
  align-content: start;
  gap: 0.75rem;
  overflow: auto;
}
.wl-preview.is-expanded .wl-preview__stage {
  max-width: min(72rem, 100%);
  width: 100%;
  margin-inline: auto;
}
.wl-preview.is-expanded .wl-preview__frame {
  width: 100%;
  max-width: none;
}
.wl-preview.is-expanded .wl-preview__frame.is-mobile {
  width: min(100%, 24rem);
  margin-inline: auto;
}
.wl-preview__stage {
  min-width: 0;
  display: flex;
  justify-content: center;
}
.wl-preview__frame {
  width: min(100%, 44rem);
  border: 1px solid var(--ink-600);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--wl-preview-chrome);
  transition: width 0.28s var(--ease-brand, ease);
}
.wl-preview__frame.is-mobile {
  width: min(100%, 22rem);
}
.wl-preview__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--wl-preview-raised);
  border-bottom: 1px solid var(--ink-600);
}
.wl-preview__chrome .wl-takeover__dots i {
  background: var(--ink-500);
}
.wl-preview__url {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--wl-preview-url);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cream-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wl-preview__ext {
  flex: 0 0 auto;
  font-size: 0.95rem;
  color: var(--cream-500);
}
.wl-preview__badge {
  flex: 0 0 auto;
  padding: 0.12rem 0.4rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--cream-050) 10%, transparent);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-400);
}
.wl-preview__body {
  position: relative;
  min-height: 28rem;
  background: var(--wl-preview-chrome);
}
.wl-preview__panel {
  position: relative;
  min-height: 28rem;
}
.wl-preview__panel[hidden] { display: none; }
.wl-preview__glow { display: none; }
.wl-preview__auth {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  justify-items: stretch;
  max-width: 22rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.5rem;
  text-align: center;
}
.wl-preview__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
}
.wl-preview__brand .wl-mark {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--accent);
}
.wl-preview__welcome {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  font-weight: 750;
  color: var(--cream-050);
  line-height: 1.1;
}
.wl-preview__lead {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cream-500);
}
.wl-preview__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.wl-preview__social button {
  margin: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid var(--ink-600);
  background: var(--ink-850);
  color: var(--cream-100);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: default;
}
.wl-preview__or {
  margin: 0.35rem 0 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-500);
}
.wl-preview__or::before,
.wl-preview__or::after {
  content: '';
  height: 1px;
  background: var(--ink-600);
}
.wl-preview__field {
  display: block;
  text-align: left;
}
.wl-preview__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px solid var(--ink-600);
  background: var(--ink-850);
  color: var(--cream-300);
  font-family: var(--font-body);
  font-size: 0.9rem;
  pointer-events: none;
}
.wl-preview__signin {
  margin: 0.15rem 0 0;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--app-primary-fg, var(--ink-950));
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: default;
}
.wl-preview__footer-link {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--cream-500);
}
.wl-preview__footer-link span { color: var(--accent); }
.wl-preview__tagline {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cream-100);
}
.wl-preview__loading,
.wl-preview__home {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  align-content: center;
  min-height: 28rem;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--cream-400);
}
.wl-preview__spinner {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--ink-600);
  border-top-color: var(--accent);
  animation: wl-preview-spin 0.8s linear infinite;
}
@keyframes wl-preview-spin {
  to { transform: rotate(360deg); }
}
.wl-preview__home h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--cream-050);
}
.wl-preview__home p {
  margin: 0;
  max-width: 18rem;
  font-size: 0.92rem;
}
.wl-preview__home-card {
  display: grid;
  gap: 0.25rem;
  width: min(100%, 18rem);
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--ink-600);
  background: var(--ink-850);
  text-align: left;
}
.wl-preview__home-card span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-500);
}
.wl-preview__home-card strong {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cream-050);
}
.wl-preview__caption {
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--cream-500);
}
@media (max-width: 720px) {
  .wl-preview__toolbar { justify-content: center; }
  .wl-preview__actions { display: none; }
  .wl-preview__vp span { display: none; }
}

.wl-shot {
  margin: 0 0 1rem;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--ink-600);
  background: var(--ink-850);
}
.wl-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.wl-shot--wide { margin-bottom: 1.5rem; }
.wl-shot--wide img { aspect-ratio: 16 / 9; }
#wl-console .wl-shot--wide img { object-position: center top; }

.wl-pain {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 46rem;
  margin-inline: auto;
  justify-content: center;
}
.wl-pain__col {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1.25rem 1.1rem 1.15rem;
  border: 1px solid var(--ink-600);
  border-radius: 1.15rem;
  background: var(--surface-fill);
}
.wl-pain__title {
  margin: 0.15rem 0 0.35rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--cream-050);
  line-height: 1.15;
}
.wl-pain__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  margin: 0 0 0.2rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink-950) 22%, transparent);
  background: color-mix(in srgb, var(--ink-950) 12%, transparent);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 500;
  color: var(--ink-950);
  line-height: 1.2;
  text-align: center;
}
.wl-pain__col--good {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ink-600));
  background: var(--accent);
}
.wl-pain__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.wl-pain__list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--ink-600);
  background: color-mix(in srgb, var(--ink-950) 55%, transparent);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream-300);
  line-height: 1.35;
  text-align: left;
}
.wl-pain__col--good .wl-pain__list li {
  border-color: transparent;
  background: var(--ink-950);
  color: var(--cream-100);
}
.wl-pain__ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.wl-pain__ico svg,
.wl-pain__ico .ph {
  width: 0.72rem;
  height: 0.72rem;
  font-size: 0.72rem;
}
.wl-pain__ico--bad {
  color: color-mix(in srgb, var(--accent) 70%, var(--cream-500));
}
.wl-pain__ico--good {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
@media (max-width: 760px) {
  .wl-pain { grid-template-columns: 1fr; max-width: 22rem; }
}

.wl-launch-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wl-launch-steps li {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 0 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-left: 1px solid var(--ink-600);
}
.wl-launch-steps li:first-child {
  padding-left: 0;
  border-left: 0;
}
.wl-launch-steps li:last-child {
  padding-right: 0;
}
.wl-launch-steps__n {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--cream-050);
}
.wl-launch-steps h3,
.wl-launch-steps .t-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 650;
  color: var(--cream-050);
  line-height: 1.15;
}
.wl-launch-steps p,
.wl-launch-steps .t-body {
  margin: 0;
  color: var(--cream-400);
  line-height: 1.55;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  max-width: 22rem;
}
@media (max-width: 900px) {
  .wl-launch-steps {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .wl-launch-steps li {
    padding: 0 0 0 1.25rem;
    border-left: 1px solid var(--ink-600);
  }
  .wl-launch-steps li:first-child {
    padding-left: 1.25rem;
    border-left: 1px solid var(--ink-600);
  }
}

.wl-mid-cta {
  border-block: 1px solid var(--ink-600);
  background: rgba(18, 18, 17, 0.55);
  padding: 1.75rem 0;
}
.wl-mid-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.wl-sticky {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  width: min(52rem, calc(100% - 1.5rem));
  transform: translate(-50%, 140%);
  transition: transform 0.32s var(--ease-brand, ease);
  pointer-events: none;
}
.wl-sticky.is-visible {
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.wl-sticky[hidden] { display: none; }
.wl-sticky:not([hidden]) { display: block; }
.wl-sticky__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.65rem 0.75rem 0.65rem 1.15rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream-050) 14%, var(--ink-600));
  background: color-mix(in srgb, var(--ink-950) 45%, transparent);
  box-shadow:
    0 14px 40px color-mix(in srgb, var(--ink-950) 65%, transparent),
    0 2px 12px color-mix(in srgb, var(--ink-950) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cream-050) 10%, transparent);
  color: var(--cream-050);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.wl-sticky__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
}
.wl-sticky__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cream-050);
  white-space: nowrap;
}
.wl-sticky__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 450;
  color: var(--cream-500);
}
.wl-sticky__cta {
  flex: 0 0 auto;
  border-radius: 999px;
  padding-inline: 1rem;
  min-height: 2.35rem;
}
.wl-sticky__dismiss {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream-500);
  cursor: pointer;
}
.wl-sticky__dismiss svg,
.wl-sticky__dismiss .ph {
  width: 0.95rem;
  height: 0.95rem;
  font-size: 0.95rem;
}
.wl-sticky__dismiss:hover,
.wl-sticky__dismiss:focus-visible {
  color: var(--cream-050);
  background: color-mix(in srgb, var(--cream-050) 8%, transparent);
}
@media (max-width: 720px) {
  .wl-sticky {
    width: calc(100% - 1rem);
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .wl-sticky__bar {
    border-radius: 1.25rem;
    padding: 0.65rem 0.7rem;
    gap: 0.55rem;
  }
  .wl-sticky__sub { display: none; }
  .wl-sticky__copy { flex: 1 1 auto; }
  .wl-sticky__cta { flex: 0 1 auto; padding-inline: 0.85rem; }
  .wl-sticky__cta .btn__label { font-size: 0.82rem; }
}

.wl-trust {
  border-block: 1px solid var(--ink-600);
  background: rgba(18, 18, 17, 0.45);
  padding: 1.25rem 0;
}
.wl-trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.wl-trust__inner .t-h3 {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.15;
  text-wrap: balance;
}
.wl-trust__inner .t-body {
  max-width: 34rem;
  margin: 0;
  color: var(--cream-300);
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.45;
  text-align: right;
}
@media (max-width: 720px) {
  .wl-trust { padding: 1.5rem 0; }
  .wl-trust__inner {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
    text-align: center;
  }
  .wl-trust__inner .t-body { text-align: center; }
}

.page-section__head--center { text-align: center; justify-items: center; margin-inline: auto; }
.page-section__head--center .t-h2 { text-wrap: balance; }

.wl-market {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
}
.wl-market__panel {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--ink-600);
  border-radius: 1rem;
  background: var(--ink-800);
}
.wl-demand-list,
.wl-strike-list,
.wl-check-list,
.wl-infra,
.wl-cap-grid,
.wl-include-grid,
.wl-audience,
.wl-final-stack,
.wl-final-bonuses {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wl-demand-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.2rem;
}
.wl-demand-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.75rem;
  background: var(--ink-850);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  color: var(--cream-300);
}
.wl-demand-list span {
  font-family: var(--font-mono);
  color: var(--cream-500);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.wl-market .wl-demand-list li,
.wl-market .wl-strike-list li { font-size: clamp(1.125rem, 1.3vw, 1.25rem); }
.wl-market .wl-demand-list li { color: var(--cream-050); }
.wl-strike-list {
  display: grid;
  gap: 0.7rem;
  margin: 0.25rem 0 0.4rem;
}
.wl-strike-list li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 500;
  color: var(--cream-500);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--ink-850);
}
.wl-callout {
  padding: 1.25rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--ink-600));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.wl-callout__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1.2;
}
.wl-callout__sub {
  margin: 0.35rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 500;
  color: var(--cream-300);
  line-height: 1.5;
}
.wl-callout--block {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.75rem 1.6rem;
}

.wl-idea {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.wl-idea__copy { display: grid; gap: clamp(1.15rem, 1.7vw, 1.5rem); justify-items: start; }
.wl-idea__copy code {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.95em;
}
.wl-check-list {
  display: grid;
  gap: 0.65rem;
}
.wl-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--cream-300);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
}
.wl-check-list__icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--accent-hot);
  line-height: 1;
}
.wl-idea__punch {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--cream-050);
  line-height: 1.2;
}
.wl-idea__copy .wl-cta-stack {
  align-items: flex-start;
  gap: 12px;
}
.wl-idea__copy .wl-trust-strip {
  width: 160px;
  margin-top: 0;
}
.wl-idea__visual {
  min-width: 0;
}
.wl-idea__visual .wl-home__visual {
  width: 100%;
}
.wl-idea__visual .wl-takeover--home {
  width: 100%;
}

/* Idea takeover: skeleton chrome; AIWA logo + admin panel stay vivid. */
#wl-idea .wl-takeover--skeleton {
  --sk: color-mix(in srgb, var(--cream-050) 10%, transparent);
  --sk-strong: color-mix(in srgb, var(--cream-050) 14%, transparent);
  --sk-ink: var(--ink-600);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__glow {
  opacity: 0.22;
  background: radial-gradient(circle, color-mix(in srgb, var(--cream-050) 8%, transparent), transparent 68%);
}
#wl-idea .wl-takeover--skeleton.is-step-wash .wl-takeover__glow,
#wl-idea .wl-takeover--skeleton.is-step-done .wl-takeover__glow {
  opacity: 0.28;
  background: radial-gradient(circle, color-mix(in srgb, var(--cream-050) 10%, transparent), transparent 68%);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__browser {
  border-color: var(--sk-ink);
  background: var(--ink-850);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__chrome {
  background: transparent;
  border-bottom: 1px solid var(--sk-ink);
}
#wl-idea .wl-takeover.is-step-done .wl-takeover__chrome,
#wl-idea .wl-takeover__browser--partner .wl-takeover__chrome {
  background: transparent;
}
#wl-idea .wl-takeover.is-step-done .wl-takeover__admin,
#wl-idea .wl-takeover.is-step-brand .wl-takeover__admin,
#wl-idea .wl-takeover.is-step-wash .wl-takeover__admin {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__dots i {
  background: var(--ink-500);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__url {
  background: var(--sk);
  color: transparent;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__url-aiwa,
#wl-idea .wl-takeover--skeleton .wl-takeover__url-partner {
  color: transparent;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__ext {
  color: var(--ink-500);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__body {
  background: var(--ink-800);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__title,
#wl-idea .wl-takeover--skeleton .wl-takeover__sub {
  color: transparent;
  background: var(--sk);
  border-radius: 0.35rem;
  align-self: center;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__title {
  width: min(14rem, 72%);
  min-height: 1.15em;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__sub {
  width: min(11rem, 58%);
  min-height: 0.85em;
  margin-top: 0.15rem;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__cta {
  background: var(--sk-strong);
  color: transparent;
  border: 0;
  min-width: 7.5rem;
  min-height: 2rem;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__face--partner .wl-mark {
  color: var(--ink-500);
  opacity: 0.55;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__aiwa-mark {
  opacity: 1;
  filter: none;
  position: relative;
  z-index: 2;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__admin {
  background: var(--ink-950);
  border-color: color-mix(in srgb, var(--cream-050) 12%, transparent);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.55);
  z-index: 4;
}
#wl-idea .wl-takeover--skeleton .wl-takeover__admin-kicker,
#wl-idea .wl-takeover--skeleton .wl-takeover__field-label,
#wl-idea .wl-takeover--skeleton .wl-takeover__type {
  color: var(--cream-100);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__admin-kicker {
  color: var(--cream-500);
}
#wl-idea .wl-takeover--skeleton .wl-takeover__type {
  color: var(--cream-050);
}
#wl-idea .wl-takeover--skeleton .wl-swatch--accent {
  background: var(--accent);
}
#wl-idea .wl-takeover--skeleton .wl-swatch--gold {
  background: var(--cream-100);
}
#wl-idea .wl-takeover--skeleton .wl-swatch--ink {
  background: var(--ink-600);
}

.wl-browser-frame {
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--surface-fill);
}
.wl-browser-frame .wl-takeover__chrome {
  border-radius: 0;
}
.wl-browser-frame__body {
  padding: 1.25rem 1.2rem 1.4rem;
  display: grid;
  gap: 0.7rem;
}
.wl-browser-frame__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}
.wl-browser-frame--embed { margin-top: 1rem; }
.wl-browser-frame--console { margin-bottom: 1.5rem; }
.wl-swatch-row { display: flex; gap: 0.45rem; }

.wl-own-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.wl-own-card {
  --wl-own-pad: 1.25rem;
  padding: var(--wl-own-pad);
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  background: var(--surface-fill);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}
.wl-own-card h3,
.wl-own-card .t-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--cream-050);
}
.wl-own-card--wide { grid-column: span 2; }
.wl-own-card__mono {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.9rem;
}
.wl-own-card .wl-shot {
  margin: 0;
  flex: 1 1 auto;
  min-height: 14rem;
  display: grid;
  border: 0;
  background: transparent;
}
.wl-own-card .wl-shot img {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: left top;
}

.wl-flow {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}
.wl-flow li {
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--ink-600);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-300);
}
.wl-flow li.is-accent {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--ink-600));
  color: var(--accent);
}
.wl-mono-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr 1fr;
}
.wl-mono-grid .wl-check-list { margin-top: 1rem; }
.wl-mono-cta { margin-top: 1.15rem; }
.wl-section-cta {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.wl-econ-h2 { white-space: nowrap; }
@media (max-width: 640px) {
  .wl-econ-h2 { white-space: normal; }
}

.wl-econ-sales {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
}
.wl-rate-card,
.wl-calc {
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  background: var(--surface-fill);
  padding: 1.4rem;
}
.wl-rate-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.wl-rate-card__struck,
.wl-rate-card__hot {
  margin: 0.35rem 0 0.15rem;
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
}
.wl-rate-card__struck {
  color: var(--cream-500);
  text-decoration: line-through;
}
.wl-rate-card__hot { color: var(--accent); }
.wl-rate-card__badge {
  display: inline-flex;
  margin: 1rem 0 1.2rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent);
}
.wl-rate-card .wl-econ-visual {
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 16rem;
}
.wl-rate-card .wl-econ-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.wl-calc { display: grid; gap: 0.9rem; }
.wl-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ink-600);
}
.wl-calc__row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.wl-calc__row span {
  font-size: 0.875rem;
  color: var(--cream-500);
}
.wl-calc__row em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--cream-500);
}
.wl-calc__row strong {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  color: var(--cream-050);
}
.wl-calc__row.is-accent span,
.wl-calc__row.is-accent strong { color: var(--accent); }
.wl-calc__note { color: var(--cream-500); }

.wl-models {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
}
.wl-model {
  position: relative;
  padding: 1.3rem 1.25rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  background: var(--surface-fill);
  display: grid;
  gap: 0.7rem;
  align-content: start;
  overflow: visible;
}
.wl-model__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--cream-500);
}
.wl-model h3,
.wl-model .t-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--cream-050);
  line-height: 1.15;
}
.wl-model > p,
.wl-model .t-body {
  margin: 0;
  color: var(--cream-300);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
}
.wl-model ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cream-500);
}
.wl-model--hot {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--ink-600));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: visible;
}
.wl-model p.wl-model__badge {
  position: absolute;
  top: 0;
  right: 0.9rem;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink-950);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  max-width: calc(100% - 1.8rem);
}
.wl-disclaimer {
  margin: 1.25rem 0 0;
  text-align: center;
  color: var(--cream-500);
}

.wl-gallery {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wl-gallery__item {
  margin: 0;
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--surface-fill);
}
.wl-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center center;
}
.wl-gallery__item figcaption {
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cream-300);
  border-top: 1px solid var(--ink-600);
}
.wl-gallery--more {
  margin-top: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.wl-preview-lock {
  overflow: hidden;
}
html.wl-preview-lock .nav {
  z-index: 1;
}
.wl-preview.is-expanded:-webkit-full-screen,
.wl-preview.is-expanded:fullscreen {
  width: 100%;
  height: 100%;
  background: var(--ink-950);
}
.wl-console-mock {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  min-height: 14rem;
}
.wl-console-mock aside {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--cream-500);
}
.wl-console-mock aside .is-hot { color: var(--accent); font-weight: 500; }
.wl-console-bars {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
}
.wl-console-bars i {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: #3a3530;
}
.wl-console-bars i:nth-child(1) { width: 92%; background: color-mix(in srgb, var(--accent) 55%, #3a3530); }
.wl-console-bars i:nth-child(2) { width: 74%; }
.wl-console-bars i:nth-child(3) { width: 61%; }
.wl-console-bars i:nth-child(4) { width: 48%; }
.wl-cap-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wl-cap-grid li,
.wl-include-grid li,
.wl-audience li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.75rem;
  background: var(--surface-fill-soft);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  color: var(--cream-300);
  line-height: 1.45;
}
.wl-cap-grid li span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cream-500);
  flex: 0 0 auto;
}
.wl-include-grid__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.05rem;
  line-height: 1;
}
.wl-audience__icon.ph {
  flex: 0 0 auto;
  font-size: 1.15rem;
  color: var(--accent);
}

.wl-levels {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.wl-levels article {
  position: relative;
  text-align: left;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  background: rgba(18, 18, 17, 0.45);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.wl-levels__body {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
}
.wl-levels__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: var(--accent);
}
.wl-levels__icon.ph {
  width: auto;
  height: auto;
  font-size: 1.15rem;
}
.wl-levels article h3,
.wl-levels article .t-h4 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--cream-050);
  line-height: 1.15;
}
.wl-levels article p,
.wl-levels article .t-body {
  margin: 0;
  color: var(--cream-300);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
}
.wl-levels article.is-hot {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--ink-600));
  transform: translateY(-0.25rem);
}
.wl-levels article p.wl-levels__badge {
  position: absolute;
  top: -0.7rem;
  right: 1.1rem;
  transform: none;
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink-950);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}
.wl-manifesto {
  margin: 2.4rem 0 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
  max-width: 40rem;
  color: var(--cream-050);
}
.wl-manifesto span {
  display: block;
}
@media (max-width: 640px) {
  .wl-manifesto {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  }
}

.wl-include-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wl-bonuses {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wl-bonus {
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.9rem;
  background: rgba(18, 18, 17, 0.45);
  display: grid;
  gap: 0.55rem;
}
.wl-bonus__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
}
.wl-bonus__top span { color: var(--cream-500); font-size: 0.75rem; }
.wl-bonus__top strong { color: var(--accent); font-size: 1rem; }
.wl-bonus h3,
.wl-bonus .t-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--cream-050);
  line-height: 1.15;
}
.wl-bonus p,
.wl-bonus .t-body { margin: 0; color: var(--cream-300); font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; }
.wl-bonus__limit {
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.wl-reveal {
  display: grid;
  gap: 1.5rem;
  /* One column at every width: the callout stacks under the infrastructure
     list rather than sitting beside it, which is the arrangement the tablet
     tier already used and the one this section is meant to read as. */
  grid-template-columns: 1fr;
  align-items: start;
}
/* The head carries a 896px measure but no auto margins, so it sat pinned to
   the left of a 1536px shell - centring its text then centred it at 541
   instead of the section's 797. Both blocks share that measure and are
   centred, which keeps the list compact and lines its edges up with the
   heading above it. */
#wl-reveal .page-section__head,
#wl-reveal .wl-reveal {
  max-width: 56rem;
  margin-inline: auto;
}
#wl-reveal .page-section__head { text-align: center; }
#wl-reveal .wl-callout--block {
  /* Centred against the infrastructure list beside it. It was `end`, which
     pinned the block to the foot of the row and left it sitting low against a
     much taller column. */
  align-self: center;
  justify-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.wl-infra {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}
.wl-infra li {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--cream-500);
}

.wl-pricing__grid--offer { max-width: 52rem; }
.wl-pricing__grid--offer .plan {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.wl-pricing__grid--offer .btn { justify-self: stretch; }

.wl-audience {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.5rem;
}

.wl-final-stack {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0.8rem;
  justify-items: center;
}
.wl-final-stack li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream-300);
}
.wl-final-bonuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.1rem;
  margin-top: 1.2rem;
}
.wl-final-bonuses li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cream-500);
}
.wl-final-bonuses__check.ph {
  font-size: 0.85rem;
  color: var(--accent);
}

@media (max-width: 992px) {
  .wl-market,
  .wl-idea,
  .wl-mono-grid,
  .wl-econ-sales,
  .wl-reveal { grid-template-columns: 1fr; }
  .wl-own-grid,
  .wl-models,
  .wl-levels { grid-template-columns: 1fr; }
  .wl-own-card--wide { grid-column: auto; }
  .wl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-levels article.is-hot { transform: none; }
}
@media (max-width: 640px) {
  .wl-gallery,
  .wl-bonuses,
  .wl-include-grid,
  .wl-cap-grid,
  .wl-infra,
  .wl-audience { grid-template-columns: 1fr; }
  .wl-console-mock { grid-template-columns: 1fr; }
}