/* landing - page-scoped rules, lifted verbatim from the page's
   former inline <style> block. Loaded from page_styles, i.e. the same
   cascade position the inline block held, so no winner can flip. */
/* page-local: hero node-line motif + landing rhythm (composition only, no new tokens) */
  .hero { position: relative; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-2xl); align-items: center;
    padding-block: clamp(48px, 9vw, 108px); }
.hero .node-bg { position: absolute; inset: -10% -5% auto auto; width: 620px; max-width: 70%; height: 520px;
    z-index: 0; pointer-events: none; opacity: .9;
    -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 78%);
            mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 78%); }
.hero > * { position: relative; z-index: 1; }
@media (max-width: 860px){ .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl);} .hero .node-bg{ opacity:.5;} }

/* ---- THE PRICING TEASER'S OWN COMPOSITION -------------------------------
   Four declarations the bundle carries as `style="..."` attributes, which this app
   cannot emit under `style-src 'self'`. Sheet-local, because this sheet is loaded by
   exactly one template (`app/templates/main/index.html:9`) - so these are landing's
   rules by construction, and nothing outside the page can inherit them.
   THE ROW'S BOTTOM ALIGNMENT (`bundle/templates/main/index.html:89,97`). Shared
   `.between` centres its two children; here the design hangs the currency control and
   the "View all plans" link off the SAME baseline as the heading beneath it, and
   `.cluster` needs the same word or its own wrapped rows drift off that line. */
.teaser-bar { align-items: flex-end; }
.teaser-controls { align-items: flex-end; }

/* THE SPEC ROWS INSIDE THE TEASER CARD (`bundle/templates/main/index.html:124-126`).
   `.i` is a 20px `currentColor` glyph by default (shared/common.css:977), so these rows
   rendered oversized and in the muted body ink of their parent. 15px + `--accent-400` is
   the same treatment `.trust-row .i` already carries in css/public/shell.css:283 - the
   bundle states one value for both, and this is the half that had no rule. */
.teaser-specs .i { width: 15px; height: 15px; color: var(--accent-400); }

/* THE SECOND TEASER CARD (`bundle/templates/main/index.html:130`). It holds one short
   paragraph beside a card whose content is much taller, so the bundle centres it in its
   own box; without this it sits pinned to the top of a mostly empty card. */
.teaser-note { display: flex; flex-direction: column; justify-content: center; }