/* Class A — homepage only. WebGL canvases, glass panels, shimmer, carousel. */
#lv-field-canvas, #lv-particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-gradient-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(240, 117, 42, 0.16), transparent 60%),
              linear-gradient(180deg, var(--lv-base), var(--lv-deep));
}

/* Aurora — slow drifting colour washes. Gives the frosted glass something to
   actually refract instead of blurring a flat wall. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 46vw; height: 46vw;
  top: -8vw; left: -6vw;
  background: radial-gradient(circle, rgba(240,117,42,0.28), transparent 68%);
  animation: aurora-drift-a 26s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 40vw; height: 40vw;
  top: 32vh; right: -10vw;
  background: radial-gradient(circle, rgba(64,116,190,0.22), transparent 68%);
  animation: aurora-drift-b 32s ease-in-out infinite;
}
.aurora span:nth-child(3) {
  width: 52vw; height: 52vw;
  bottom: -16vw; left: 18vw;
  background: radial-gradient(circle, rgba(240,117,42,0.16), transparent 70%);
  animation: aurora-drift-c 38s ease-in-out infinite;
}
@keyframes aurora-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 8vh, 0) scale(1.12); }
}
@keyframes aurora-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-8vw, -6vh, 0) scale(1); }
}
@keyframes aurora-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, -9vh, 0) scale(1.15); }
}
/* These overrides must match the :nth-child specificity of the rules above,
   otherwise they silently lose and the blobs keep animating. */
@media (prefers-reduced-motion: reduce) {
  .aurora span:nth-child(1),
  .aurora span:nth-child(2),
  .aurora span:nth-child(3) { animation: none; }
}
/* Phones: the blobs are the most expensive paint on the page, and the WebGL
   canvas is already off here. Keep one static wash, drop the rest. */
@media (max-width: 760px) {
  .aurora span:nth-child(1) {
    animation: none;
    filter: blur(70px);
    opacity: 0.4;
  }
  .aurora span:nth-child(2),
  .aurora span:nth-child(3) { display: none; }
}

/* Fine grain texture — cheap way to kill the "flat gradient" look */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero — two column: copy left, phone deck right */
.hero {
  position: relative;
  z-index: 1;
  /* padding-block only: the shorthand would zero the horizontal gutter this
     element inherits from .container, putting copy flush to the screen edge. */
  padding-block: var(--lv-space-7) var(--lv-space-6);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--lv-space-6);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* .hero-visual is hidden entirely under 900px. That rule lives beside the
     .hero-visual definition further down, so it wins the cascade against the
     display:flex there. */
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--lv-space-4);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--lv-hairline);
  border-radius: 999px;
  background: var(--lv-glass);
}
.hero .eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lv-accent);
  box-shadow: 0 0 8px 1px var(--lv-accent);
}
.hero h1 {
  max-width: 620px;
  margin: 0 0 var(--lv-space-4);
  letter-spacing: -0.01em;
}
.hero .lede { max-width: 480px; margin: 0 0 var(--lv-space-5); font-size: 1.08rem; }
.hero-ctas { display: flex; gap: var(--lv-space-3); flex-wrap: wrap; margin-bottom: var(--lv-space-6); }

/* Keynote-style entrance: hero children arrive one by one, blurred to sharp */
@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.hero-parallax > * {
  opacity: 0;
  animation: hero-arrive 1s var(--lv-ease-glide) forwards;
}
.hero-parallax > .eyebrow { animation-delay: 0.1s; }
.hero-parallax > h1 { animation-delay: 0.25s; }
.hero-parallax > .lede { animation-delay: 0.45s; }
.hero-parallax > .hero-ctas { animation-delay: 0.6s; }
.hero-parallax > .hero-stats { animation-delay: 0.75s; }
.hero-visual {
  opacity: 0;
  animation: hero-arrive 1.2s var(--lv-ease-glide) 0.35s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-parallax > *, .hero-visual { opacity: 1; animation: none; }
}

/* Hero parallax layer — JS sets --scroll-y (0..1 over first viewport) */
.hero-parallax {
  --scroll-y: 0;
  opacity: 1;
  transform: translateY(calc(var(--scroll-y) * -40px));
  opacity: calc(1 - var(--scroll-y) * 1.1);
  filter: blur(calc(var(--scroll-y) * 6px));
  will-change: transform, opacity, filter;
}
@media (prefers-reduced-motion: reduce) {
  .hero-parallax { transform: none; opacity: 1; filter: none; }
}
/* Stacked layouts have to be scrolled to be read, and the fade above is keyed to
   scroll distance, so the copy would dim while it is still being read. */
@media (max-width: 900px) {
  .hero-parallax { transform: none; opacity: 1; filter: none; will-change: auto; }
  /* Both CTAs share the row rather than stacking, so the secondary action stays
     visible without pushing the stat strip below the fold. */
  .hero-ctas {
    flex-wrap: nowrap;
    gap: var(--lv-space-3);
    margin-bottom: var(--lv-space-5);
  }
  .hero-ctas .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 0.8rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* Homepage section rhythm. These were per-section inline paddings, which could
   not respond to viewport and also zeroed the horizontal gutter inherited from
   .container. On phones the desktop 4-6rem gaps read as dead air. */
.sec        { padding-block: 2rem 4rem; }
.sec-lead   { padding-block: 4rem; }
.sec-end    { padding-block: 2rem 5rem; }
.sec-final  { padding-block: 2rem 6rem; }
@media (max-width: 900px) {
  .sec        { padding-block: 1rem 2rem; }
  .sec-lead   { padding-block: 2rem; }
  .sec-end    { padding-block: 1rem 2.5rem; }
  .sec-final  { padding-block: 1rem 3rem; }
  .hero { padding-block: var(--lv-space-4) var(--lv-space-5); }
  /* .routing-band's override lives beside its own rule further down: that rule
     uses the padding shorthand and would otherwise win on source order. */
}

/* Hero stat/proof strip beneath CTAs */
.hero-stats {
  display: flex;
  /* Fluid gap and equal columns so the strip never wraps into a ragged
     two-then-one stack. The left hero column narrows to about 415px just above
     the 900px breakpoint, which a fixed 4rem gap could not survive. */
  gap: clamp(1rem, 3.5vw, var(--lv-space-6));
  flex-wrap: nowrap;
  padding-top: var(--lv-space-4);
  border-top: 1px solid var(--lv-hairline);
  max-width: 560px;
}
.hero-stats .stat { text-align: left; flex: 1 1 0; min-width: 0; }
.hero-stats .stat strong {
  display: block;
  font-family: var(--lv-font-display);
  font-size: 1.9rem;
  color: var(--lv-text);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.hero-stats .stat span {
  font-family: var(--lv-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lv-muted);
}
/* The labels are the binding constraint, not the numerals: "INDUSTRY SYSTEMS"
   needs roughly 150px at full size, and the stat columns stay narrower than
   that until about 1100px. Compact the labels across that whole band so they
   never wrap inside their column. */
@media (max-width: 1100px) {
  .hero-stats .stat span {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }
}
/* Phones also need smaller numerals; tablets have room to keep them large. */
@media (max-width: 900px) {
  .hero-stats .stat strong { font-size: 1.5rem; }
}

/* Glass panel — gradient border via padding-box/border-box trick, glow on hover */
.glass-panel {
  background: linear-gradient(175deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035) 40%, rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--lv-radius-lg);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  padding: var(--lv-space-5);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 24px 48px -24px rgba(0,0,0,0.55);
  transition: border-color var(--lv-duration-base) var(--lv-ease),
              transform var(--lv-duration-base) var(--lv-ease),
              box-shadow var(--lv-duration-base) var(--lv-ease);
}
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 900ms var(--lv-ease);
}
.glass-panel::after {
  content: '';
  position: absolute;
  top: -40%; left: -40%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(240,117,42,0.18), transparent 70%);
  opacity: 0;
  transition: opacity var(--lv-duration-base) var(--lv-ease);
  pointer-events: none;
}
.glass-panel:hover {
  border-color: rgba(240, 117, 42, 0.4);
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 32px 64px -28px rgba(0,0,0,0.6),
    0 12px 40px -18px rgba(240,117,42,0.28);
}
.glass-panel:hover::before { transform: translateX(100%); }
.glass-panel:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glass-panel::before { display: none; } }

/* Cursor-tracked spotlight — JS sets --mx/--my (px, relative to panel) on mousemove */
.glass-panel.has-spotlight {
  --mx: 50%;
  --my: 50%;
}
.glass-panel.has-spotlight::after {
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(240,117,42,0.16), transparent 65%);
  opacity: 0;
}
.glass-panel.has-spotlight:hover::after { opacity: 1; }

/* Cinematic scroll reveal — blur + scale + rise, Apple-style stagger */
.reveal-cinema {
  opacity: 0;
  transform: translateY(36px) scale(0.965);
  filter: blur(14px);
  transition: opacity 1100ms var(--lv-ease-glide), transform 1100ms var(--lv-ease-glide), filter 1100ms var(--lv-ease-glide);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal-cinema.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-cinema { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Magnetic buttons */
.btn-magnetic {
  transition: transform 220ms var(--lv-ease);
}
@media (prefers-reduced-motion: reduce) {
  .btn-magnetic { transition: none !important; transform: none !important; }
}

.glass-panel .eyebrow { display: block; margin-bottom: var(--lv-space-3); }
.glass-panel h3 { position: relative; z-index: 1; }
.glass-panel p { position: relative; z-index: 1; }

/* Industry routing band */
.routing-band { padding: var(--lv-space-7) 0; position: relative; z-index: 1; }
/* Must follow the shorthand above to win on source order. 6rem top and bottom
   put roughly two thirds of a phone screen of dead air around this band. */
@media (max-width: 900px) {
  .routing-band { padding-block: 2.5rem; }
}
.routing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--lv-space-3);
}
.routing-card {
  background: linear-gradient(175deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lv-radius-md);
  padding: var(--lv-space-4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: border-color var(--lv-duration-base) var(--lv-ease), transform var(--lv-duration-base) var(--lv-ease), box-shadow var(--lv-duration-base) var(--lv-ease);
}
.routing-card::after {
  content: '→';
  position: absolute;
  right: var(--lv-space-4);
  bottom: var(--lv-space-3);
  font-family: var(--lv-font-mono);
  color: var(--lv-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--lv-duration-base) var(--lv-ease), transform 420ms var(--lv-ease-spring);
}
/* Mobile only, and placed after the two rules above so it wins on source order:
   these cards go full width on a phone, where 1.5rem reads as cramped. On
   desktop they sit five to a row at about 205px, and the same increase would
   leave the copy barely 125px to wrap in. */
@media (max-width: 900px) {
  .routing-card { padding: var(--lv-space-5); }
  .routing-card::after { right: var(--lv-space-5); bottom: var(--lv-space-4); }
}
.routing-card:hover, .routing-card:focus-visible {
  border-color: var(--lv-accent);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 36px -20px rgba(0,0,0,0.55), 0 8px 28px -14px rgba(240,117,42,0.25);
}
.routing-card:hover::after, .routing-card:focus-visible::after { opacity: 1; transform: translateX(0); }
.routing-card .eyebrow { margin-bottom: var(--lv-space-2); }
.routing-icon {
  width: 26px;
  height: 26px;
  color: var(--lv-muted);
  margin-bottom: var(--lv-space-3);
  transition: color var(--lv-duration-base) var(--lv-ease);
}
.routing-card:hover .routing-icon, .routing-card:focus-visible .routing-icon { color: var(--lv-accent); }

/* Card carousel */
.card-carousel {
  display: flex;
  gap: var(--lv-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--lv-space-3) var(--lv-space-1) var(--lv-space-4);
  scrollbar-width: none;
}
.card-carousel::-webkit-scrollbar { display: none; }
.card-carousel .glass-panel {
  min-width: 300px;
  scroll-snap-align: start;
}
.card-carousel .glass-panel .index-num {
  font-family: var(--lv-font-mono);
  font-size: 0.7rem;
  color: var(--lv-muted);
  display: block;
  margin-bottom: var(--lv-space-3);
}
/* Mobile: bleed the row edge to edge and narrow the cards, so the next one
   visibly peeks. At 300px in a 327px row only 3px of the next card showed,
   which read as a full-width static card rather than a scrollable row. */
@media (max-width: 900px) {
  .card-carousel {
    gap: var(--lv-space-3);
    margin: 0 calc(var(--lv-space-4) * -1);
    padding: var(--lv-space-3) var(--lv-space-4) var(--lv-space-4);
  }
  .card-carousel .glass-panel {
    flex: 0 0 82vw;
    min-width: 0;
    scroll-snap-align: center;
  }
  /* reveal-cinema fires per card on entering the viewport, but cards past the
     first sit off-screen horizontally inside the scroll row, so they stayed at
     opacity 0 and there was nothing for the peek to show. Reveal them with the
     row and let the section's own entrance carry the motion. */
  .card-carousel .glass-panel.reveal-cinema {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Section rhythm — @handle prefix ties section headers to the feed metaphor */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--lv-space-3);
  margin-bottom: var(--lv-space-4);
}
.section-label .eyebrow { margin: 0; }
.section-label .eyebrow::before {
  content: '@LeviteAVC /';
  /* .eyebrow uppercases its text; the brand name is always cased LeviteAVC */
  text-transform: none;
  margin-right: 0.5em;
  color: var(--lv-muted);
  font-weight: 400;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lv-hairline);
}

/* Feed-post meta tags on capability cards */
.card-meta-tag {
  display: inline-block;
  margin-top: var(--lv-space-3);
  font-family: var(--lv-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lv-secondary);
  border: 1px solid var(--lv-hairline);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  position: relative;
  z-index: 1;
}

/* Review posts — reviews rendered as social posts, not generic testimonial cards */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--lv-space-4);
}
.review-post {
  background: linear-gradient(175deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lv-radius-md);
  padding: var(--lv-space-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: border-color var(--lv-duration-base) var(--lv-ease), transform var(--lv-duration-base) var(--lv-ease), box-shadow var(--lv-duration-base) var(--lv-ease);
}
.review-post:hover {
  border-color: rgba(240,117,42,0.35);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 36px -20px rgba(0,0,0,0.55);
}
.review-post-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--lv-space-3);
}
.review-post-top .post-avatar {
  position: static;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid var(--lv-hairline);
}
.review-post-top div { display: flex; flex-direction: column; }
.review-handle {
  font-family: var(--lv-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--lv-text);
}
.review-source {
  font-family: var(--lv-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lv-muted);
}
.review-quote {
  font-style: italic;
  color: var(--lv-secondary);
  margin-bottom: var(--lv-space-3);
}
.review-post-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: var(--lv-space-3);
  border-top: 1px solid var(--lv-hairline);
}
.review-post-actions svg {
  width: 17px; height: 17px;
  stroke: var(--lv-muted);
  fill: none;
  stroke-width: 1.8;
}
.review-rating {
  margin-left: auto;
  color: var(--lv-accent);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* .fact-table moved to base.css: it is used on guides, privacy and proof too,
   which load class-b.css and so were rendering raw unstyled tables. */

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--lv-space-4); }
.pricing-grid .glass-panel.is-featured {
  border-color: rgba(240, 117, 42, 0.5);
  box-shadow: 0 0 0 1px rgba(240, 117, 42, 0.15), 0 20px 50px -25px rgba(240, 117, 42, 0.35);
}
.pricing-grid .glass-panel.is-featured .eyebrow { color: var(--lv-accent); }

/* Price treatment — display serif reads as considered, not as a discount shout.
   Lives here because class-b.css is never loaded alongside home.css. */
.price-band {
  font-family: var(--lv-font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--lv-text);
  margin: var(--lv-space-3) 0 var(--lv-space-3);
  letter-spacing: -0.01em;
}
.price-per {
  font-family: var(--lv-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--lv-muted);
  margin-left: 0.35em;
  vertical-align: baseline;
}
.pricing-grid .glass-panel.is-featured .price-band { color: var(--lv-accent); }

/* Scope note — what is and isn't in a retainer. Load-bearing commercially,
   so it reads as a deliberate statement, not fine print. */
.scope-note {
  margin-top: var(--lv-space-4);
  padding: var(--lv-space-4) var(--lv-space-4) var(--lv-space-4) var(--lv-space-5);
  max-width: 760px;
  border-left: 2px solid var(--lv-accent);
  border-radius: 0 var(--lv-radius-md) var(--lv-radius-md) 0;
  background: linear-gradient(90deg, rgba(240,117,42,0.07), rgba(255,255,255,0.02) 60%);
}
.scope-note p {
  font-size: 0.92rem;
  margin: 0 0 var(--lv-space-2);
  color: var(--lv-secondary);
}
.scope-note p:last-child { margin-bottom: 0; }
.scope-note strong { color: var(--lv-text); font-weight: 600; }
.scope-note-meta {
  font-family: var(--lv-font-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lv-muted) !important;
  padding-top: var(--lv-space-2);
  border-top: 1px solid var(--lv-hairline);
  margin-top: var(--lv-space-3) !important;
}

/* Add-ons table styling also lives in base.css now, alongside .fact-table. */

/* Mobile: pricing becomes a swipeable card row instead of a stacked grid — */
/* a different layout on purpose, not a squeezed version of the desktop one. */
/* Shared by every swipeable row. Hidden until the row actually becomes
   swipeable, which happens at a different width per row. */
.swipe-hint {
  display: none;
  font-family: var(--lv-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--lv-muted);
  margin-bottom: var(--lv-space-3);
}
/* The capability row is a scroll row at every width, but only needs telling
   about where the next card stops being obvious. */
@media (max-width: 900px) {
  .carousel-swipe-hint { display: block; }
}
@media (max-width: 720px) {
  .pricing-swipe-hint { display: block; }
  .pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--lv-space-3);
    margin: 0 calc(var(--lv-space-4) * -1);
    padding: 0 var(--lv-space-4) var(--lv-space-2);
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .pricing-grid .glass-panel {
    /* flex-basis, not min-width. min-width only sets a floor, so the flex base
       stayed auto and each card sized to its paragraphs' max-content (~1100px),
       running the copy off the screen instead of wrapping it. */
    flex: 0 0 82vw;
    scroll-snap-align: center;
  }
}

/* Hero phone deck — the brand's floating device graphic */
.hero-visual {
  position: relative;
  height: 460px;
  padding-bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.hero-visual .phone-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1400px;
}
/* Ambient light pool behind the deck — breathes slowly */
.hero-visual .phone-stage::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 130%; height: 90%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(240,117,42,0.16), rgba(240,117,42,0.05) 45%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  animation: stage-breathe 7s ease-in-out infinite;
}
@keyframes stage-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
/* Idle float — the whole deck drifts gently, like it's suspended */
.hero-visual .phone-stage {
  animation: stage-float 9s ease-in-out infinite;
}
@keyframes stage-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .phone-stage::before { animation: none; }
  .hero-visual .phone-stage { animation: none; }
}
/* The entire visual column goes on stacked layouts: the phone deck cost a full
   screen of scrolling before the headline was reached, and the platform pills
   only read as its caption, so they are orphaned without it. This must sit
   after the .hero-visual display:flex above to win the cascade. */
@media (max-width: 900px) {
  .hero-visual { display: none; }
}

/* 3D phone carousel — three cards, role reassigned by JS every few seconds */
.phone-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 208px;
  height: 420px;
  margin: -210px 0 0 -104px;
  border-radius: 30px;
  overflow: hidden;
  transform-style: preserve-3d;
  border: 1px solid var(--lv-hairline);
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  transition: transform 900ms var(--lv-ease), opacity 900ms var(--lv-ease),
              box-shadow 900ms var(--lv-ease), background 900ms var(--lv-ease), border-color 900ms var(--lv-ease);
  will-change: transform;
}

/* Post header — avatar + handle, top-left overlay */
.post-top {
  position: absolute;
  top: 16px; left: 14px; right: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
}
.post-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: background 900ms var(--lv-ease), border-color 900ms var(--lv-ease);
}
.post-handle {
  font-family: var(--lv-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  transition: color 900ms var(--lv-ease);
}
.post-platform-badge {
  margin-left: auto;
  font-family: var(--lv-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color 900ms var(--lv-ease);
}

/* Side action rail — like / comment / share */
.post-actions {
  position: absolute;
  right: 12px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 2;
}
.post-actions svg {
  width: 19px; height: 19px;
  stroke: rgba(255,255,255,0.75);
  fill: none;
  stroke-width: 1.8;
  transition: stroke 900ms var(--lv-ease);
}
.post-actions .likes {
  font-family: var(--lv-font-mono);
  font-size: 0.52rem;
  color: rgba(255,255,255,0.55);
  margin-top: -10px;
  transition: color 900ms var(--lv-ease);
}

/* Caption block, bottom overlay */
.post-bottom {
  position: absolute;
  left: 14px; right: 14px; bottom: 16px;
  z-index: 2;
}
.post-caption {
  font-size: 0.66rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.85);
  margin: 0 0 4px;
  transition: color 900ms var(--lv-ease);
}
.post-caption strong { margin-right: 0.3em; }
.post-tag {
  font-family: var(--lv-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 900ms var(--lv-ease);
}

/* Front role gets dark text/icons on the orange field; side roles stay light on navy ghost */
.phone-card[data-role="front"] .post-avatar { background: rgba(12,22,38,0.3); border-color: rgba(12,22,38,0.5); }
.phone-card[data-role="front"] .post-handle,
.phone-card[data-role="front"] .post-caption { color: rgba(12,22,38,0.85); }
.phone-card[data-role="front"] .post-platform-badge,
.phone-card[data-role="front"] .post-tag,
.phone-card[data-role="front"] .post-actions .likes { color: rgba(12,22,38,0.55); }
.phone-card[data-role="front"] .post-actions svg { stroke: rgba(12,22,38,0.75); }

.phone-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(240,117,42,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 900ms var(--lv-ease), height 900ms var(--lv-ease), background 900ms var(--lv-ease);
}
.phone-play::before {
  content: '';
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--lv-text);
  margin-left: 2px;
}

/* Front role — accent card, front and center */
.phone-card[data-role="front"] {
  background: linear-gradient(160deg, #ff8a3d, var(--lv-accent) 55%, #c9591a);
  border-color: rgba(255,255,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 40px 80px -30px rgba(240,117,42,0.5),
    0 10px 30px -10px rgba(0,0,0,0.5);
  transform: translateZ(40px) rotateY(0deg) scale(1);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1), opacity 1100ms var(--lv-ease),
              box-shadow 1100ms var(--lv-ease), background 1100ms var(--lv-ease), border-color 1100ms var(--lv-ease);
  z-index: 3;
  opacity: 1;
}
.phone-card[data-role="front"] .phone-play { width: 56px; height: 56px; background: rgba(12,22,38,0.55); }

/* Side roles — ghost cards, turned away in true 3D (rotation carries the motion, not scale) */
.phone-card[data-role="left"] {
  transform: translateX(-150px) translateZ(-60px) rotateY(62deg) scale(0.94);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1), opacity 1100ms var(--lv-ease),
              box-shadow 1100ms var(--lv-ease), background 1100ms var(--lv-ease), border-color 1100ms var(--lv-ease);
  z-index: 2;
  opacity: 0.5;
}
.phone-card[data-role="right"] {
  transform: translateX(150px) translateZ(-60px) rotateY(-62deg) scale(0.94);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1), opacity 1100ms var(--lv-ease),
              box-shadow 1100ms var(--lv-ease), background 1100ms var(--lv-ease), border-color 1100ms var(--lv-ease);
  z-index: 2;
  opacity: 0.5;
}

/* Mobile: a genuinely different layout, not a shrunk desktop fan. One big card, */
/* full-width and legible; the other two platforms sit hidden behind it and */
/* crossfade in on rotation instead of turning through 3D space. */
@media (max-width: 900px) {
  .phone-card {
    width: 270px;
    height: 546px;
    margin: -273px 0 0 -135px;
    transition: opacity 900ms var(--lv-ease), background 900ms var(--lv-ease);
  }
  .phone-card[data-role="front"] {
    transform: none;
    transition: opacity 900ms var(--lv-ease), background 900ms var(--lv-ease), box-shadow 900ms var(--lv-ease);
  }
  .phone-card[data-role="left"],
  .phone-card[data-role="right"] {
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 900ms var(--lv-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-card, .phone-card[data-role="front"], .phone-card[data-role="left"], .phone-card[data-role="right"] {
    transition: none;
  }
}

/* Platform pills beneath the deck */
.platform-pills {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 280px;
  z-index: 3;
}
.platform-pills span {
  font-family: var(--lv-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lv-secondary);
  border: 1px solid var(--lv-hairline);
  background: rgba(8,16,28,0.85);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
  .phone-main { transition: none; }
}

/* Signal.io differentiator panel */
.signal-panel {
  max-width: 980px;
  border-color: rgba(240, 117, 42, 0.28);
}
.signal-panel h2 em,
.signal-panel h2 { font-family: var(--lv-font-display); }
.signal-panel-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--lv-space-6);
  align-items: center;
}
@media (max-width: 820px) {
  .signal-panel-grid { grid-template-columns: 1fr; }
  .content-grid-graphic { max-width: 260px; margin: 0 auto; }
}

/* Content-grid graphic — an abstract scheduled feed, not a literal screenshot */
.content-grid-graphic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  position: relative;
}
.cg-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cg-go-live 6.3s ease-in-out infinite;
}
.cg-tile.cg-solid {
  background: linear-gradient(160deg, #ff8a3d, var(--lv-accent) 70%);
}
.cg-tile.cg-outline {
  border: 1px solid var(--lv-hairline);
  background: var(--lv-glass);
}
.cg-tile.cg-play {
  background: var(--lv-glass-strong);
  border: 1px solid rgba(240, 117, 42, 0.4);
}
.cg-tile.cg-play .phone-play { background: rgba(240, 117, 42, 0.85) !important; }

/* Tiles "go live" one at a time, left to right, top to bottom — a schedule, not a burst */
.cg-tile:nth-child(1) { animation-delay: 0s; }
.cg-tile:nth-child(2) { animation-delay: 0.7s; }
.cg-tile:nth-child(3) { animation-delay: 1.4s; }
.cg-tile:nth-child(4) { animation-delay: 2.1s; }
.cg-tile:nth-child(5) { animation-delay: 2.8s; }
.cg-tile:nth-child(6) { animation-delay: 3.5s; }
.cg-tile:nth-child(7) { animation-delay: 4.2s; }
.cg-tile:nth-child(8) { animation-delay: 4.9s; }
.cg-tile:nth-child(9) { animation-delay: 5.6s; }

@keyframes cg-go-live {
  0%, 88%, 100% {
    transform: scale(1);
    box-shadow: none;
    filter: brightness(1);
  }
  94% {
    transform: scale(1.08);
    box-shadow: 0 10px 24px -10px rgba(240, 117, 42, 0.55);
    filter: brightness(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-tile { animation: none; }
}
.cg-caption {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: var(--lv-space-2);
}
.cg-caption .eyebrow { margin: 0; }
.signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--lv-space-4);
  margin-top: var(--lv-space-4);
  padding-top: var(--lv-space-4);
  border-top: 1px solid var(--lv-hairline);
}
.signal-point .index-num {
  display: block;
  font-family: var(--lv-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--lv-accent);
  margin-bottom: 0.5rem;
}
.signal-point p {
  font-size: 0.88rem;
  margin: 0;
}