/* Shared styles for the rouva.io homepage and /demo (receipt, sections; the header is /nav.css, the footer /footer.css).
   Page-only additions live in that page's own <style> block. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #FFFFFF;
  --surface: #F9F8F6;
  --surface2: #F2F1EE;
  --border: rgba(0,0,0,0.07);
  --border-md: rgba(0,0,0,0.12);
  --text: #16151A;
  --text-muted: #68676A;
  --text-dim: #B0AFB2;
  --navy: #1A1A2E;
  --accent: #1A1A2E;
  --accent2: #3D3BF3;
  --blue: #3D3BF3;
  --blue-dim: rgba(61,59,243,0.07);
  --blue-border: rgba(61,59,243,0.2);
  --green: #16A34A;
  --green-ink: #15803D;
  --green-dim: rgba(22,163,74,0.08);
  --amber: #B45309;
  --amber-dim: rgba(180,83,9,0.08);
  --radius: 10px;
  --radius-lg: 16px;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-weight: 300;
  background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Buttons (design system: navy primary, 44px, 10px radius, opacity hover) ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 24px; border-radius: var(--radius);
  font: 500 15px/1 var(--sans); text-decoration: none;
  transition: opacity 150ms;
}
.btn:hover { opacity: 0.8; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-ghost { color: var(--text); border: 1px solid var(--border-md); background: #fff; }

/* The header (nav, mobile menu) lives in /nav.css, shared by every landing page. */
@media (max-width: 640px) {
  .hero-cta-row { flex-direction: column; align-items: stretch !important; }
  .hero-cta-row a { justify-content: center; }
}

/* ── Layout ── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
section { padding: 72px 0; }
.eyebrow {
  font: 500 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
}
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.01em; }
.lede-link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-border); transition: text-decoration-color 150ms; }
.lede-link:hover { text-decoration-color: var(--blue); }
.lede { font-size: 17px; color: var(--text-muted); max-width: 540px; margin-top: 16px; }

/* ── Hero ── */
/* Warm paper-toned ground (design-system surface) so the white receipt card stands out. */
.hero { padding: 152px 0 96px; position: relative; overflow: hidden; background: var(--surface); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; position: relative; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.025em;
}
.hero h1 .nowrap { white-space: nowrap; }
.hero h1 em { font-style: italic; color: var(--blue); position: relative; white-space: nowrap; }
.hero h1 em::after {              /* a blue rule that draws in under "every" once the hero has risen */
  content: ""; position: absolute; left: 2%; right: 4%; bottom: 0.02em; height: 0.06em; min-height: 3px;
  background: var(--blue); border-radius: 2px; transform-origin: left center;
  transform: scaleX(0); animation: draw 700ms cubic-bezier(.65,0,.35,1) 750ms forwards;
}
@keyframes draw { to { transform: scaleX(1); } }
.hero-sub { font-size: 18px; color: var(--text-muted); margin-top: 24px; max-width: 520px; }

.hero > .wrap > .hero-grid > * { animation: rise 600ms cubic-bezier(.2,.7,.2,1) both; }
.hero-copy { animation-delay: 60ms !important; }
.receipt-stage { animation-delay: 200ms !important; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ── Receipt ── */
.receipt-stage { position: relative; display: flex; justify-content: center; }
.receipt {
  width: 100%; max-width: 440px; position: relative;
  background: #fff; border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 var(--border), 0 24px 48px -24px rgba(26,26,46,0.18);
  padding: 24px 24px 20px;
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
}
.r-head { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-md); }
.r-head b { color: var(--text); font-weight: 500; letter-spacing: 0.08em; }
.r-prompt { padding: 16px 0 14px; font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--text); border-bottom: 1px dashed var(--border-md); }
.r-prompt small { display: block; font: 400 12px/1 var(--mono); color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.r-lines { padding: 12px 0; border-bottom: 1px dashed var(--border-md); }
.r-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; padding: 4px 0; align-items: baseline; }
.r-line dt { color: var(--text-muted); white-space: nowrap; }
.r-line dd { color: var(--text); overflow-wrap: anywhere; }
.r-line .amt { text-align: right; white-space: nowrap; }
.r-line .strike { color: var(--text-dim); text-decoration: line-through; }
.pill { display: inline-block; font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 99px; vertical-align: 1px; margin-left: 4px; }
.pill-blue { background: var(--blue-dim); color: var(--blue); }
.pill-amber { background: var(--amber-dim); color: var(--amber); }
.pill-muted { background: var(--surface2); color: var(--text-muted); }
.r-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.r-total span:first-child { color: var(--text-muted); }
.r-saved { font-size: 26px; font-weight: 500; color: var(--green-ink); letter-spacing: -0.02em; }
.r-saved small { font-size: 13px; margin-left: 6px; color: var(--green); }
.r-foot { margin-top: 14px; font: 300 12px/1.5 var(--sans); color: var(--text-muted); }

/* Soft light: a blurred blue glow beneath the receipt, so it reads as lit
   and lifted rather than flat. Lighting, not a decorative orb. */
.receipt-stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 58%; width: 115%; max-width: 560px; aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(61,59,243,0.22), rgba(61,59,243,0.07) 55%, transparent 100%);
  filter: blur(24px);
  animation: glow 7s ease-in-out infinite;
}
@keyframes glow { 50% { opacity: 0.7; transform: translate(-50%, -48%) scale(0.96); } }
.receipt { z-index: 1; }
/* resting on the page like a slip of paper (static, no hover tilt) */
.receipt { transform: rotate(-2deg); transform-origin: 50% 60%; }
.receipt-under { transform: rotate(-2deg); }

/* Routing trace: the candidate models for this task, scanned left to right;
   the dot lands on the one Rouva picked. */
.r-trace { padding: 10px 0 12px; }
.r-trace-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.r-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.r-chip {
  font: 400 12px/1 var(--mono); padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border); color: var(--text-dim); background: #fff;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.r-chip.scan { color: var(--text-muted); border-color: var(--border-md); }
.r-chip.picked { color: var(--blue); border-color: var(--blue-border); background: var(--blue-dim); font-weight: 500; }
.r-chip.picked.rule { color: var(--amber); border-color: rgba(180,83,9,0.25); background: var(--amber-dim); }
.r-track { position: relative; height: 1px; background: var(--border-md); margin-top: 10px; }
.r-dot {
  position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px var(--blue-dim);
  transform: translateX(0); opacity: 0;
}
.r-dot.rule { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-dim); }
/* Spend-cap example: the trace shows the member's cap, nearly full, instead of models */
.r-trace.is-cap .r-track { visibility: hidden; }
.r-capbar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin-top: 4px; }
.r-capbar span { display: block; height: 100%; width: var(--pct); background: var(--amber); border-radius: 99px; }

/* print-in: each receipt part reveals in order (data-step), re-run on every example */
.receipt [data-step] { opacity: 0; transform: translateY(4px); transition: opacity 260ms ease, transform 260ms ease; }
.receipt.printed [data-step] { opacity: 1; transform: none; }
.receipt-under { position: absolute; bottom: -48px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; max-width: 440px; margin: 0 auto; }
.receipt-nav { display: flex; gap: 6px; }
/* 4px bar drawn inside a 24×24px tap target (WCAG 2.5.8) */
.receipt-nav button { width: 24px; height: 24px; border: 0; border-radius: 2px; padding: 10px 0; background-color: var(--border-md); background-clip: content-box; cursor: pointer; }
.receipt-nav button[aria-current="true"] { background-color: var(--blue); }
.receipt-nav button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Providers ── */
.providers { padding: 48px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); }
.providers-row { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.providers-label { font: 500 12px/1.4 var(--sans); color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.1em; }
/* One line at every width: spread across the row on desktop; on narrower
   screens the row scrolls sideways inside itself (never the page). */
.logos {
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
  gap: 24px; width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.logos::-webkit-scrollbar { display: none; }
.logos span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.logos img { width: 20px; height: 20px; opacity: 0.85; }

/* ── Integration ── */
.integrate { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
/* Navy band: light → dark → light rhythm, and a preview of the navy footer */
.band { background: var(--navy); color: #E7E6F5; }
.band .eyebrow { color: #A5A4FB; }
.band h2 { color: #fff; }
.band .lede { color: rgba(231,230,245,0.68); }
/* the member cards stay white on the dark band, so they keep the page's dark text */
.band .member-card { color: var(--text); }
.band .assign-label { color: #fff; }
.band .assign-line { background: #fff; }
.band .assign-line::after { border-left-color: #fff; }
.code {
  background: var(--navy); color: #E7E6F5; border-radius: var(--radius-lg);
  font: 400 13.5px/1.7 var(--mono); overflow: hidden;
}
.code-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.code-tabs button {
  font: 500 12px/1 var(--sans); color: rgba(255,255,255,0.55); background: none; border: 0;
  padding: 10px 12px 12px; cursor: pointer; border-bottom: 2px solid transparent;
}
.code-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #8B8AF8; }
.code-tabs button:focus-visible { outline: 2px solid #8B8AF8; outline-offset: -2px; }
.code pre { padding: 24px; overflow-x: auto; }
/* Both panels share one grid cell, so the card is always as tall as the
   taller panel and switching tabs never resizes it or moves the page.
   The inactive panel keeps its space but is invisible (and hidden from
   assistive tech, via visibility). */
.code-panels { display: grid; }
.code-panels pre { grid-area: 1 / 1; }
.code-panels pre[hidden] { display: block; visibility: hidden; }
.code .c { color: rgba(231,230,245,0.45); }
.code .k { color: #A5A4FB; }
.code .s { color: #9BE3B4; }
.code .add { background: rgba(155,227,180,0.10); display: inline-block; width: 100%; margin: 0 -24px; padding: 0 24px; }
.steps { list-style: none; counter-reset: s; margin-top: 28px; display: grid; gap: 12px; font-size: 15px; color: var(--text-muted); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; align-items: baseline; }
.steps li > span { min-width: 0; }
.steps li::before { content: "0" counter(s); font: 400 13px/1 var(--mono); color: var(--blue); }
.steps b { color: var(--text); font-weight: 500; }


/* ── Team model assignment: member cards ──
   Alex's card (the member) plays the rule: a request for a model not on the list is
   refused (✕), then lands on the lowest-priced model that is. */
.team-head { max-width: 640px; }
.team-cards { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 12px; margin: 40px auto 0; align-items: stretch; max-width: 900px; }
.assign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.assign-label { font: 400 12px/1.4 var(--mono); color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.assign-line { position: relative; width: 100%; height: 1px; background: var(--blue-border); }
.assign-line::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--blue); border-right: 0; }
.member-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 150ms; }
.member-card:hover { border-color: var(--border-md); }
.mc-head { display: flex; align-items: center; gap: 12px; }
.mc-head b { display: block; font-weight: 600; font-size: 15px; }
.mc-head small { font: 400 12px/1.3 var(--mono); color: var(--text-muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); font: 500 12px/1 var(--sans); color: var(--text-muted); flex-shrink: 0; }
.owner .avatar { background: var(--navy); color: #fff; }
.mc-models { list-style: none; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-md); display: grid; gap: 8px; }
.mc-models li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; transition: background 250ms, color 250ms; }
.mc-models img { width: 16px; height: 16px; }
/* Owner card: the access checklist Jordan sets for Alex (as in the member
   Edit panel). Ticks land in sequence once the cards scroll into view. */
.access-label { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-md); font: 400 12px/1.3 var(--mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.access { list-style: none; margin-top: 10px; display: grid; gap: 4px; }
.access li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 0; color: var(--text-muted); transition: color 250ms calc(var(--i) * 180ms + 300ms); }
.access img { width: 16px; height: 16px; opacity: 0.5; transition: opacity 250ms calc(var(--i) * 180ms + 300ms); }
.access .box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-md); flex-shrink: 0; position: relative;
  transition: background 200ms calc(var(--i) * 180ms + 300ms), border-color 200ms calc(var(--i) * 180ms + 300ms);
}
.access .box::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform 200ms calc(var(--i) * 180ms + 380ms);
}
.team-cards.in .access li.on { color: var(--text); }
.team-cards.in .access li.on img { opacity: 1; }
.team-cards.in .access li.on .box { background: var(--blue); border-color: var(--blue); }
.team-cards.in .access li.on .box::after { transform: rotate(45deg) scale(1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.routed-tag { font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 99px; background: var(--blue-dim); color: var(--blue); opacity: 0; transition: opacity 250ms; }

.mc-cap { margin-top: auto; padding-top: 16px; }
.mc-models + .mc-cap { margin-top: 16px; }
.owner .mc-cap { margin-top: auto; }
.mc-cap-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.mc-cap-row .mono { color: var(--text); }
.cap-bar { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.cap-fill { height: 100%; width: 0; border-radius: 3px; background: var(--blue); transition: width 900ms cubic-bezier(.2,.7,.2,1); }
.mc-cap.warn .cap-fill { background: var(--amber); }
.team-cards.in .cap-fill { width: var(--pct); }
.mc-cap-foot { margin-top: 6px; font: 400 12px/1.3 var(--mono); color: var(--text-muted); }
.mc-cap.warn .mc-cap-foot { color: var(--amber); }

/* the request strip only exists on the member card */
.mc-request { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; margin-top: 16px; }
.req-pill { font: 500 12px/1 var(--mono); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--border-md); background: #fff; color: var(--text); opacity: 0; transform: translateY(-8px); transition: opacity 300ms, transform 300ms, color 250ms, border-color 250ms; }
.req-x { font: 500 12px/1 var(--sans); color: var(--amber); opacity: 0; transition: opacity 250ms; }
#member-demo[data-state="request"] .req-pill,
#member-demo[data-state="denied"] .req-pill { opacity: 1; transform: none; }
#member-demo[data-state="denied"] .req-pill,
#member-demo[data-state="routed"] .req-pill { color: var(--text-dim); border-color: var(--border); text-decoration: line-through; }
#member-demo[data-state="routed"] .req-pill { opacity: 1; transform: none; }
#member-demo[data-state="denied"] .req-x,
#member-demo[data-state="routed"] .req-x { opacity: 1; }
#member-demo[data-state="routed"] .target { background: var(--blue-dim); color: var(--blue); }
#member-demo[data-state="routed"] .routed-tag { opacity: 1; }
#member-demo[data-state="routed"] { border-color: var(--blue-border); }

/* ── What you get: one compact strip, three columns, hairline dividers ── */
.pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; overflow: hidden;
}
.pillar { padding: 20px 24px; transition: background 150ms; }
.pillar + .pillar { border-left: 1px solid var(--border); }
.pillar:hover { background: var(--surface); }
.pillar-num { font: 400 12px/1 var(--mono); color: var(--text-dim); }
.pillar h3 { font: 500 16px/1.3 var(--sans); color: var(--text); margin: 8px 0 4px; display: flex; align-items: center; gap: 8px; }
.pillar p { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.pillar.featured .pillar-num { color: var(--blue); }
.pillar.featured h3::after { content: "for teams"; font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 99px; background: var(--blue-dim); color: var(--blue); }

/* What you get on the navy band (as For teams) */
.band-tight { padding: 48px 0; }
.band .pillars { background: #24243F; border-color: rgba(255,255,255,0.08); }
.band .pillar + .pillar { border-left-color: rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.08); }
.band .pillar:hover { background: #2B2B4A; }
.band .pillar-num { color: rgba(231,230,245,0.4); }
.band .pillar h3 { color: #fff; }
.band .pillar p { color: rgba(231,230,245,0.68); }
.band .pillar.featured .pillar-num { color: #A5A4FB; }
.band .pillar.featured h3::after { background: rgba(165,164,251,0.14); color: #C4C3FD; }

/* ── Pricing (content unchanged from the live page, pending the pricing decision) ── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 40px auto 0; align-items: stretch; max-width: 900px; }
.plan { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; background: #fff; transition: border-color 150ms; }
.plan:hover { border-color: var(--border-md); }
.plan.pop { border-color: var(--blue-border); box-shadow: 0 0 0 3px var(--blue-dim); }
.plan-name { font: 500 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); display: flex; justify-content: space-between; }
.plan-name em { font-style: normal; color: var(--blue); letter-spacing: 0; text-transform: none; }
.plan-price { font-family: var(--serif); font-size: 32px; margin-top: 12px; line-height: 1; }
.plan-price small { font: 300 13px var(--sans); color: var(--text-muted); }
.plan-was { font: 400 12px var(--mono); color: var(--text-dim); text-decoration: line-through; margin-top: 6px; min-height: 16px; }
.plan-note { font-size: 12px; font-weight: 500; color: var(--blue); margin-top: 2px; min-height: 16px; }
.plan ul { list-style: none; margin: 14px 0 18px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); flex: 1; align-content: start; }
.plan li::before { content: "→"; color: var(--blue); margin-right: 8px; }
.plan .btn { justify-content: center; height: 40px; font-size: 14px; }
.plans-note { margin: 20px auto 0; max-width: 900px; text-align: center; font-size: 13px; color: var(--text-muted); }


/* The footer lives in /footer.css, shared by every landing page. */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .logos { justify-content: flex-start; mask-image: linear-gradient(to right, black 85%, transparent); }
}
@media (max-width: 960px) {
  .team-cards { grid-template-columns: 1fr; }
  .assign { flex-direction: row; padding: 4px 0; }
  .assign-label br { display: none; }
  .assign-line { width: 1px; height: 28px; order: -1; }
  .assign-line::after { right: -4px; top: auto; bottom: -1px; border: 4.5px solid transparent; border-top: 7px solid var(--blue); border-bottom: 0; }
  .band .assign-line::after { border-left-color: transparent; border-top-color: #fff; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: none; border-top: 1px solid var(--border); }
  .hero-grid, .integrate { grid-template-columns: 1fr; gap: 56px; }
        .plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero { padding-top: 112px; }
  section { padding: 56px 0; }
  .receipt { padding: 20px 16px 16px; font-size: 12px; transform: none; }
  .receipt-under { transform: none; }
  .r-line { grid-template-columns: 76px 1fr auto; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .receipt [data-step] { opacity: 1 !important; transform: none !important; }
  .hero h1 em::after { transform: scaleX(1) !important; }
  .cap-fill { width: var(--pct) !important; }
}