/* elevate.css — editorial elevation layer, loaded after styles.css.
   Keeps Jeff's berry / cream / aubergine identity and Big Shoulders type.
   Adds: paper grain, numbered section kickers, a word marquee, huge display
   headlines, pill buttons, big-numeral steps, a dark proof band, and a giant
   footer wordmark. Presentation only; no copy or claims added. */

main{ counter-reset:sec; }
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.55; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .25  0 0 0 0 .3  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection{ background:var(--vinyl); color:#fff; }

/* display type: bigger, tighter */
.hero__h1{ font-size:clamp(3.4rem,9.2vw,9rem); line-height:.88; letter-spacing:-.01em; }
.hero__h1 .l--turn{ color:var(--vinyl); }
.sechead h2, .vid__copy h2{ font-size:clamp(2.6rem,6.4vw,6rem); line-height:.92; letter-spacing:-.005em; }
.sechead{ max-width:60ch; }

/* numbered kickers: 01 — What you're getting */
.sechead .kicker, .vid__copy .kicker{
  display:flex; align-items:center; gap:.9rem;
}
.sechead .kicker::before, .vid__copy .kicker::before{
  counter-increment:sec; content:counter(sec,decimal-leading-zero); color:var(--vinyl); font-weight:500;
}
.sechead .kicker::after, .vid__copy .kicker::after{ content:""; width:3.2rem; height:1px; background:currentColor; opacity:.35; }

/* pills */
.btn{ border-radius:999px; }
.btn--ghost{ border-radius:999px; }
.nav .btn{ border-radius:999px; }

/* marquee (injected after hero) */
.marquee{ overflow:hidden; background:var(--ink); color:var(--talc); border-block:1px solid var(--ink); padding:.9rem 0; }
.marquee__track{ display:flex; width:max-content; animation:mq 40s linear infinite; }
.marquee__track span{
  font-family:var(--disp); text-transform:uppercase; font-weight:800; letter-spacing:.02em;
  font-size:clamp(1.5rem,3vw,2.6rem); padding:0 1.5rem; white-space:nowrap; display:inline-flex; align-items:center; gap:3rem;
}
.marquee__track span::after{ content:"✂"; color:var(--vinyl-hi); font-size:.7em; }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* steps: big numerals on hairlines */
.steps{ gap:0 clamp(1.25rem,2.5vw,2.5rem); }
.step{ background:transparent; border:0; border-top:2px solid var(--ink); border-radius:0; box-shadow:none; padding:1.4rem 0 0; }
.step .guard{
  font-family:var(--disp); font-weight:800; font-size:clamp(3.6rem,6vw,6rem); line-height:.9; color:var(--vinyl);
  background:none; border:0; width:auto; height:auto; padding:0; display:block; margin-bottom:.8rem; letter-spacing:-.01em;
}
.step h3{ font-size:clamp(1.3rem,1.8vw,1.7rem); }

/* proof bands go dark aubergine for rhythm */
.wins{ background:var(--ink); color:var(--talc); }
.wins .sechead h2{ color:var(--talc); }
.wins .sechead .sub, .wins .kicker{ color:rgba(243,234,231,.72); }
.wins .sechead .kicker::before{ color:var(--vinyl-hi); }
.wins__card{ border:1px solid rgba(243,234,231,.18); background:rgba(255,255,255,.04); border-radius:18px; overflow:hidden; }

/* receipt + phone: crisp offset shadow */
.phone{ box-shadow:14px 14px 0 var(--ink); }
.receipt--live{ box-shadow:10px 10px 0 var(--ink); border:1px solid var(--ink); }

/* giant footer wordmark */
.foot{ position:relative; overflow:hidden; }
.foot__wordmark{
  font-family:var(--disp); font-weight:900; text-transform:uppercase; text-align:center; white-space:nowrap;
  font-size:clamp(3rem,15.4vw,17rem); line-height:.82; letter-spacing:-.01em; color:var(--talc);
  margin:2.5rem 0 -.08em; opacity:.95; user-select:none; overflow:hidden;
}
.foot__wordmark em{ color:var(--vinyl-hi); font-style:normal; }

@media (max-width:760px){
  .phone{ box-shadow:8px 8px 0 var(--ink); }
  .receipt--live{ box-shadow:6px 6px 0 var(--ink); }
}

/* fixes */
.steps{ background:transparent; border:0; gap:0 clamp(1.25rem,2.5vw,2.5rem); }
.step:hover{ transform:none; box-shadow:none; }
.step:hover .guard{ background:none; color:var(--ink); transform:none; }
.foot__wordmark{ grid-column:1 / -1; }
.foot__wordmark{ font-size:clamp(2.6rem,13.6vw,15rem); }