/* withmagpie.ai: the marketing layout layer.
   ───────────────────────────────────────────────────────────────
   Page structure only. Anything that is a Plume component belongs
   in plume.css, which is the file a web app would take; this one
   is specific to the six pages here.

   Until September 2026 these rules lived in a per-page <style>
   block inside each exported page, which is how the three
   different footers happened: nothing compared one page's chrome
   against another's. They are consolidated here, and
   tools/check_site.py fails the deploy when the pages disagree.

   One layout, on every page. A page differs from its neighbours in
   content and nothing else. Do not add a breakpoint layer: Plume is
   responsive by construction, widths come from clamp() and grids
   from repeat(auto-fit, minmax(...)), so they collapse on their
   own. An older version of this file held a media query layer for a
   design system that is gone, and so is the layer. */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The header is sticky, so an anchor that lands flush with the viewport top
   lands underneath it. Until tiding#116 a click handler did this in
   JavaScript, scrolling to the target's offset minus 72; this is the same
   number, declared instead of computed. Deep links to these sections are real
   URLs people share, so every section id carries it, not only the two the nav
   currently points at. */
#how,
#what,
#principles,
#early-access { scroll-margin-top: 72px; }

body { background: var(--surface-canvas); }

/* ── The page shell ───────────────────────────────────────────── */

.page {
  background: var(--surface-canvas);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}
.wrap--section { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }

/* ── Header ───────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--surface-default) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xs);
}
.site-header__inner {
  min-height: var(--app-header-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
/* The product pages pad the bar vertically; the legal pages do not. */
.site-header__inner--padded { padding-top: 12px; padding-bottom: 12px; }
.site-header__inner--split { justify-content: space-between; gap: 20px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.2vw, 28px);
  flex: 1 1 auto;
  align-items: center;
}
.site-nav a {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a[aria-current="page"] {
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  padding-bottom: 4px;
  box-shadow: inset 0 -3px 0 var(--action-primary);
}

.site-back {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-decoration: none;
}
.site-back:hover { color: var(--text-primary); }

/* ── Footer ───────────────────────────────────────────────────── */
/* One footer, on all six pages. There were three until tiding#115: the
   landing page's, the product pages' (a different tagline and a lighter link
   colour), and the legal pages' (no links out at all, so the privacy policy
   could not reach the terms). tools/check_site.py compares them in full. */

.site-footer { background: var(--ink-900); }
.site-footer--push { margin-top: auto; }

.site-footer__inner {
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.site-footer__links a,
.site-footer__copy {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { color: var(--text-primary); }

/* ── Sections and grids ───────────────────────────────────────── */

.section--sunken { background: var(--surface-sunken); }

.hero {
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 40px) clamp(40px, 5vw, 56px);
}

.grid { display: grid; align-items: start; }
.grid--wide   { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.grid--medium { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.grid--narrow { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 40px);
}

/* ── Type ─────────────────────────────────────────────────────── */

.body-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.small-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.strong-text { color: var(--text-primary); font-weight: var(--weight-extrabold); }

/* base.css zeroes every margin, so vertical rhythm is explicit. */
.stack-2  { margin-top: 8px; }
.stack-4  { margin-top: 16px; }
.stack-6  { margin-top: 24px; }
.rule-above {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle);
}

/* ── Landing page ─────────────────────────────────────────────── */

.lp-card {
  display: block;
  background: var(--surface-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition-surface);
}
.lp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-primary); }
.lp-card h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.lp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--action-primary);
  text-decoration: none;
}
.lp-sticker {
  background: var(--surface-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5) var(--space-5);
  transform: rotate(-2deg);
}
.lp-figure {
  background: var(--surface-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.lp-rule { border-top: 2px solid var(--border-subtle); }

/* ── Figures ──────────────────────────────────────────────────── */

.figure {
  margin: 0;
  background: var(--surface-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.figure--relative { position: relative; }
.figure__caption {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* ── Confetti ─────────────────────────────────────────────────── */

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  opacity: 0.9;
}

/* ── Ledger (the product pages' comparison table) ─────────────── */

.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 0 12px;
  border-bottom: 2px solid var(--border-subtle);
}
.ledger-head {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 10px;
}
.ledger-row {
  align-items: center;
  padding: 10px 0;
  font-size: var(--text-sm);
}

/* ── Legal pages ──────────────────────────────────────────────── */

.legal {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 40px) clamp(64px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.legal__title { display: flex; flex-direction: column; gap: 14px; }
.lg-h1 {
  font-size: clamp(2.5rem, 5vw, var(--text-5xl));
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}
.lg-h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.lg-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 2px solid var(--border-subtle);
}
.lg-p {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 68ch;
}
.lg-list {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 68ch;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-todo {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  max-width: 68ch;
}


/* ── Layout utilities ─────────────────────────────────────────────
   A small, closed set. base.css zeroes every margin, so vertical
   rhythm is explicit; flex rows and gaps recur often enough across
   six pages that naming each instance would be worse. This is not a
   utility framework and must not grow into one: a rule used once
   belongs in the one-off block at the foot of this file. */

.row        { display: flex; align-items: center; }
.row--top   { display: flex; align-items: flex-start; }
.row--end   { display: flex; justify-content: flex-end; }
.row--between { display: flex; justify-content: space-between; align-items: center; }
.row--baseline { align-items: baseline; }
.col        { display: flex; flex-direction: column; }
.wrap-items { flex-wrap: wrap; }
.relative   { position: relative; }
.min0       { min-width: 0; }
.spacer     { flex: 1 1 0%; min-width: 8px; }
.push-left  { margin-left: auto; }
.inline-block-flex { display: inline-flex; flex: 0 0 auto; }

.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-s2 { gap: var(--space-2); }
.gap-s3 { gap: var(--space-3); }
.gap-s4 { gap: var(--space-4); }

.stack-4  { margin-top: 4px; }
.stack-6  { margin-top: 6px; }
.stack-8  { margin-top: 8px; }
.stack-10 { margin-top: 10px; }
.stack-12 { margin-top: 12px; }
.stack-14 { margin-top: 14px; }
.stack-16 { margin-top: 16px; }
.stack-18 { margin-top: 18px; }
.stack-20 { margin-top: 20px; }
.stack-24 { margin-top: 24px; }
.stack-32 { margin-top: 32px; }
.stack-40 { margin-top: 40px; }
.stack-s2 { margin-top: var(--space-2); }
.stack-s4 { margin-top: var(--space-4); }
.pad-top-16 { padding-top: 16px; }
.pad-top-24 { padding-top: 24px; }

.col-340 { flex: 1 1 340px; }
.col-360 { flex: 1 1 360px; }
.col-380 { flex: 1 1 380px; }
.col-400 { flex: 1 1 400px; }
.col-420 { flex: 1 1 420px; }
.col-520 { flex: 1 1 520px; }

.divided { padding: 14px 0; border-top: 2px solid var(--border-subtle); }
.divided--tight { padding: 12px 0; }
.rule-above-only { padding-top: 16px; border-top: 2px solid var(--border-subtle); }
.measure-prose { max-width: var(--content-prose); }
.measure-68  { max-width: 68ch; }
.measure-760 { max-width: 760px; }

/* ── Type ─────────────────────────────────────────────────────── */

.h-hero {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
  color: var(--text-primary);
}
.h-band {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.h-band--inline { flex: 1 1 320px; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.h-band-lg {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-primary);
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.h-card {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-primary);
}
.h-card-sm { font-size: var(--text-lg); font-weight: var(--weight-extrabold); line-height: var(--leading-snug); }
.h-card-lg { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
.h-row  { font-size: var(--text-md); font-weight: var(--weight-extrabold); }
.h-stat { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }

.lead-640 {
  max-width: 640px;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.t-lead-sm    { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-secondary); }
.t-strong     { font-weight: 700; color: var(--text-primary); }
.t-strongest  { font-weight: 800; color: var(--text-primary); }
.t-strongest-sm { font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); }
.t-strong-sm  { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); }
.t-strong-base { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--leading-snug); }
.t-muted-sm   { font-size: var(--text-sm); color: var(--text-tertiary); }
.t-label      { font-size: var(--text-xs); font-weight: 800; color: var(--text-secondary); }
.t-note       { font-size: var(--text-xs); font-weight: 700; color: var(--text-tertiary); }
.t-secondary  { color: var(--text-secondary); }
.t-action     { color: var(--action-primary); }
.t-intelligence { color: var(--intelligence-text); }
.t-right      { text-align: right; }
.t-normal     { line-height: var(--leading-normal); }
.small-text--tight { line-height: 1.5; }
.link-plain { text-decoration: none; }
.link-plain--inline { display: inline-flex; }
.link-plain--block  { display: block; }
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-link);
}

/* ── Bands, panels, gutters ───────────────────────────────────── */

.band { padding-top: clamp(56px, 7vw, 80px); padding-bottom: clamp(56px, 7vw, 80px); }
.band--tall   { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.band--offset { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(56px, 7vw, 80px); }
.gutter { padding: 0 clamp(12px, 2vw, 24px); }

.panel {
  position: relative;
  overflow: hidden;
  background: var(--surface-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(32px, 5vw, 64px);
}
/* Not modifiers of .panel: these are their own thing, three declarations
   each, and composing them onto .panel meant inheriting its
   position/overflow/flex and then un-setting most of it. */
.panel-dark   { background: var(--ink-900); color: var(--text-primary); border-radius: var(--radius-2xl); }
.panel-sunken { background: var(--surface-sunken); border-radius: var(--radius-2xl); }

.split--center { align-items: center; gap: clamp(40px, 6vw, 64px); }
.split--wide   { gap: clamp(24px, 4vw, 48px); }
.grid--medium-24 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.grid--stretch { align-items: stretch; }
.brand-edge { height: 4px; background: var(--gradient-plume); }
.page--flat { min-height: 100vh; display: block; }
.site-nav--top { align-items: flex-start; }
.sticker-anchor { position: absolute; top: -18px; right: -4px; z-index: 2; }
.col-380--inset { padding: 44px 10px 20px 0; }
/* The product pages' footer sets a colour the other two do not (tiding#115). */

/* ── The timeline figure ──────────────────────────────────────── */

.tl-who   { width: 64px; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.tl-track { position: relative; flex: 1 1 auto; height: 36px; }
.tl-rule  { position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: var(--border-subtle); }
.tl-mark  { position: absolute; left: 58.3%; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--warning-solid); }

/* ── Category dots ────────────────────────────────────────────── */

.dot-row { display: inline-flex; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 999px; }
.dot--school { background: var(--cat-school-tile); }
.dot--drive  { background: var(--cat-drive-tile); }
.dot--sport  { background: var(--cat-sport-tile); }

/* ── Landing page, from its own former <style> block ──────────── */

.lp-nav a { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-secondary); text-decoration: none; }
.lp-nav a:hover { color: var(--text-primary); }
.lp-h1 { font-size: clamp(2.75rem, 6vw, var(--text-6xl)); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
.lp-h2 { font-size: clamp(2rem, 3.6vw, var(--text-4xl)); font-weight: var(--weight-black); letter-spacing: var(--tracking-tighter); line-height: var(--leading-display); }
.lp-lead { max-width: var(--content-prose); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.lp-body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.lp-small { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.lp-confetti { position: absolute; border-radius: 999px; }


/* ── One-off layout ───────────────────────────────────────────────
   Blocks that appear exactly once. A page prefix and a role, because
   inventing a semantic name for a single grid on a single page is a
   fiction the next reader has to decode. Generated from the measured
   layout of each page and then left alone. */

.cal-box-1 { width: 64px; flex: 0 0 auto; }
.cal-box-2 { margin-top: 14px; margin-left: 76px; }
.cal-box-3 { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 11px 0px 8px; border-radius: var(--radius-full); white-space: nowrap; background: var(--warning-surface); color: var(--warning-fg); font-size: var(--text-xs); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-wide); }
.cal-box-4 { margin-top: 14px; background: var(--surface-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 8px 24px; }
.cal-pos-1 { position: absolute; left: 16.7%; width: 66.6%; top: 4px; height: 28px; background: var(--cat-work-tile); border-radius: var(--radius-full); color: rgb(255, 255, 255); font-size: var(--text-xs); font-weight: 800; display: flex; align-items: center; padding: 0px 12px; white-space: nowrap; overflow: hidden; }
.cal-pos-2 { position: absolute; left: 0px; right: 0px; top: 4px; height: 28px; border: 2px dashed var(--border-strong); border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; padding: 0px 12px; }
.cal-pos-3 { position: absolute; left: 58.3%; right: 0px; min-width: max-content; top: 4px; height: 28px; background: var(--cat-sport-bg); color: var(--cat-sport-fg); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 800; display: flex; align-items: center; padding: 0px 12px; white-space: nowrap; }
.cal-row-1 { flex: 1 1 auto; display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-tertiary); }
.cal-row-2 { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-row-3 { max-width: var(--content-wide); margin: 0px auto; padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 40px); display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 40px); align-items: flex-start; }
.confetti-1 { left: 4%; top: 18%; background: var(--coral-500); }
.confetti-2 { left: 9%; top: 70%; background: var(--lilac-500); }
.confetti-3 { left: 50%; top: 8%; background: var(--marigold-500); }
.confetti-4 { left: 93%; top: 22%; background: var(--mint-500); }
.confetti-5 { left: 88%; top: 78%; background: var(--bubblegum-500); }
.confetti-6 { left: 62%; top: 86%; background: var(--blue-azure); }
.hm-box-1 { margin-top: 24px; position: relative; overflow: hidden; background: var(--intelligence-surface); border-radius: var(--radius-lg); padding: 24px 24px 24px 28px; }
.hm-col-1 { flex: 1 1 300px; font-size: var(--text-base); font-weight: 500; line-height: var(--leading-relaxed); color: var(--text-secondary); }
.hm-row-1 { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 32px); align-items: center; margin-top: 10px; }
.hm-row-2 { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); font-weight: 700; }
.lp-band-1 { padding: clamp(40px, 6vw, 64px) clamp(12px, 2vw, 24px) 0px; }
.lp-band-2 { padding-top: clamp(48px, 6vw, 64px); padding-bottom: clamp(64px, 8vw, 96px); }
.lp-box-1 { position: relative; display: inline-flex; flex: 0 0 auto; width: 32px; height: 32px; }
.lp-box-10 { left: 70%; top: 90%; width: 6px; height: 6px; background: var(--peach-500); }
.lp-box-11 { left: 52%; top: 8%; width: 6px; height: 6px; background: var(--blue-cyan); }
.lp-box-12 { position: relative; flex: 1 1 420px; min-width: 0px; }
.lp-box-13 { position: relative; flex: 1 1 360px; min-width: 0px; }
.lp-box-2 { position: relative; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--cream); color: var(--coral-900); font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-extrabold); letter-spacing: 0.01em; }
.lp-box-3 { margin-top: 16px; padding: 4px var(--space-5); }
.lp-box-4 { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); }
.lp-box-5 { left: 6%; top: 18%; width: 10px; height: 10px; background: var(--coral-500); }
.lp-box-6 { left: 14%; top: 70%; width: 8px; height: 8px; background: var(--marigold-500); }
.lp-box-7 { left: 30%; top: 88%; width: 6px; height: 6px; background: var(--mint-500); }
.lp-box-8 { left: 86%; top: 14%; width: 8px; height: 8px; background: var(--lilac-500); }
.lp-box-9 { left: 93%; top: 62%; width: 10px; height: 10px; background: var(--bubblegum-500); }
.lp-col-1 { flex: 1 1 320px; font-size: var(--text-2xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.lp-col-2 { flex: 1 1 420px; }
.lp-grid-1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.lp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 40px; margin-top: 48px; }
.lp-head-1 { max-width: 860px; margin-top: 16px; }
.lp-head-2 { font-size: clamp(2.25rem, 4.4vw, var(--text-5xl)); font-weight: var(--weight-black); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); margin-top: 16px; }
.lp-panel-2 { position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(32px, 6vw, 64px); }
.lp-row-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(40px, 6vw, 56px); }
.lp-row-2 { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.lp-row-3 { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 40px); margin-top: clamp(48px, 6vw, 64px); align-items: flex-start; }
.lp-row-4 { margin-top: clamp(48px, 6vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 24px; }
.lp-row-5 { margin-top: clamp(48px, 6vw, 64px); padding-top: 32px; border-top: 2px solid var(--border-default); display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 40px); }
.lp-text-1 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-tertiary); padding-top: 12px; }