/* Restock Rush marketing site.
   Every measurement lives in the control block below: change a number, save, refresh.
   Palette and type follow the Restock Rush brand guide (red / yellow / midnight / warm white). */
:root {
  /* BRAND COLORS ---------------------------------------------------------- */
  --rush-red:        #C82A20; /* primary brand surface: hero, buttons, accents */
  --rush-red-deep:   #A92D20; /* darker red for gradients and button hover */
  --rush-yellow:     #FFD52A; /* accent only: emphasized words, status, speed lines */
  --midnight:        #1C0B05; /* warm near-black: dark sections, text on light */
  --midnight-soft:   #2A1209; /* slightly lighter dark surface for cards on midnight */
  --warm-white:      #FFF8EC; /* light section background instead of pure white */
  --warm-white-dim:  #F6EBD8; /* card / divider tone on warm white */
  --neutral:         #746865; /* secondary text on light surfaces */
  --neutral-on-dark: #CDBFB6; /* secondary text on dark and red surfaces */

  /* PAGE FRAME ------------------------------------------------------------ */
  --header-h:                68px; /* sticky header height */
  --page-max-width:        1160px; /* how wide content gets before it stops growing */
  --page-side-pad:           24px; /* space between content and the window edge */
  --section-pad-y:           96px; /* vertical air above and below each section */
  --section-head-gap:        56px; /* gap from a section heading block to its content */
  --section-head-measure:   680px; /* max width of a section's intro paragraph */

  /* TYPE ------------------------------------------------------------------ */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --body-size:               17px; /* paragraph text size */
  --body-leading:             1.6; /* line spacing in paragraphs — bigger = looser */
  --small-size:              14px; /* captions, fine print, labels */
  --eyebrow-size:            18px; /* the small uppercase label above headlines */
  --eyebrow-tracking:      0.16em; /* letter spacing in eyebrows — bigger = wider */
  --h1-size-min:             52px; /* smallest the hero headline gets */
  --h1-size-fluid:          7.2vw; /* how fast the hero headline grows with the window */
  --h1-size-max:            96px; /* largest the hero headline gets */
  --h1-leading:               0.92; /* line spacing in the hero headline */
  --h2-size-min:             40px; /* smallest a section headline gets */
  --h2-size-fluid:          5.2vw; /* how fast section headlines grow */
  --h2-size-max:             68px; /* largest a section headline gets */
  --h2-leading:               0.95; /* line spacing in section headlines */
  --h3-size:                 28px; /* card and step titles */
  --h3-leading:               1.05; /* line spacing in card titles */
  --display-slant:           -8deg; /* how far RUSH-style headlines lean — more negative = more speed */
  --display-tracking:      0.005em; /* letter spacing in display headlines */

  /* BUTTONS --------------------------------------------------------------- */
  --btn-pad-y:               16px; /* button top/bottom padding */
  --btn-pad-x:               28px; /* button left/right padding */
  --btn-size:                17px; /* button label size */
  --btn-radius:              12px; /* button corner rounding — bigger = rounder */
  --btn-border:               2px; /* thickness of the outline on ghost buttons */
  --btn-shadow-y:             5px; /* depth of the hard offset under primary buttons */
  --btn-press-y:              3px; /* how far a button sinks when hovered/pressed */
  --btn-small-pad-y:         10px; /* header button top/bottom padding */
  --btn-small-pad-x:         18px; /* header button left/right padding */
  --btn-small-size:          15px; /* header button label size */
  --hover-ms:               140ms; /* how fast hover states animate */

  /* HEADER ---------------------------------------------------------------- */
  --nav-gap:                 28px; /* space between header links */
  --nav-brand-icon:          40px; /* app icon size in the header */
  --nav-brand-radius:         9px; /* app icon corner rounding in the header */
  --nav-brand-gap:           12px; /* space between header icon and wordmark */
  --wordmark-size:           27px; /* RESTOCK RUSH wordmark size in the header */

  /* HERO ------------------------------------------------------------------ */
  --hero-pad-top:            64px; /* air above the hero content */
  --hero-pad-bottom:         88px; /* air below the hero content */
  --hero-max-width:        1360px; /* how wide the hero content gets (wider = bigger video) */
  --hero-col-gap:            56px; /* space between hero copy and the video */
  --hero-copy-width:        500px; /* width of the hero text column beside the video */
  --hero-eyebrow-gap:        18px; /* space between eyebrow and headline */
  --hero-h1-gap:             24px; /* space under the headline */
  --hero-sub-size:           20px; /* subhead paragraph size */
  --hero-sub-measure:       520px; /* subhead line length before wrapping */
  --hero-tag-gap:            18px; /* space between subhead and the three "no" lines */
  --hero-actions-gap:        14px; /* space between the two hero buttons */
  --hero-actions-top:        32px; /* space above the hero buttons */
  --hero-price-top:          22px; /* space above the price line under the buttons */
  --hero-glow-size:         820px; /* size of the soft light behind the video */

  /* VIDEO PLACEHOLDER / REEL ---------------------------------------------- */
  --video-radius:            22px; /* corner rounding of the reel frame */
  --video-border:             3px; /* thickness of the dark frame around the reel */
  --video-shadow-y:          26px; /* how far the reel's shadow drops */
  --video-shadow-blur:       70px; /* how soft the reel's shadow is */
  --video-portrait-width:   360px; /* width of the vertical reel on phones and portrait tablets */
  --sound-inset:             14px; /* distance of the sound button from the reel's corner */
  --sound-pad-y:              9px; /* sound button top/bottom padding */
  --sound-pad-x:             14px; /* sound button left/right padding */
  --sound-icon:              20px; /* speaker icon size */
  --sound-font:              14px; /* "Sound on" label size */
  --sound-blur:              10px; /* frosted blur behind the sound button */

  /* SPEED LINES (brand device) -------------------------------------------- */
  --speed-line-h:             8px; /* thickness of one speed line */
  --speed-line-gap:           7px; /* space between speed lines */
  --speed-line-long:        120px; /* length of the longest speed line */
  --speed-line-mid:          90px; /* length of the middle speed line */
  --speed-line-short:        60px; /* length of the shortest speed line */
  --speed-skew:              -8deg; /* lean of speed lines and slanted labels */

  /* TAGLINE STRIP --------------------------------------------------------- */
  --strip-pad-y:             22px; /* top/bottom padding of the marquee strip */
  --strip-size:              40px; /* tagline size in the strip */
  --strip-gap:               48px; /* space between repeated taglines */
  --strip-speed:             38s; /* time for one full scroll of the strip — bigger = slower */

  /* WORKFLOW STEPS -------------------------------------------------------- */
  --steps-gap:               20px; /* space between the four step cards */
  --step-pad:                28px; /* padding inside a step card */
  --step-radius:             18px; /* step card corner rounding */
  --step-num-size:           64px; /* big step number size */
  --step-cycle:              12s; /* time for the highlight to visit all four steps */
  --step-visual-h:          140px; /* height of the animated picture in each step */
  --step-border:              2px; /* step card outline thickness */

  /* PROBLEM SECTION ------------------------------------------------------- */
  --compare-gap:             20px; /* space between before/after cards */
  --compare-pad:             28px; /* padding inside a before/after card */
  --compare-radius:          18px; /* before/after card corner rounding */
  --compare-arrow-size:      44px; /* size of the arrow joining before and after */

  /* FEATURE GROUPS -------------------------------------------------------- */
  --feature-gap:             20px; /* space between feature cards */
  --feature-pad:             32px; /* padding inside a feature card */
  --feature-radius:          18px; /* feature card corner rounding */
  --feature-icon:            52px; /* size of the icon tile on each feature card */
  --feature-icon-radius:     14px; /* icon tile corner rounding */
  --feature-list-gap:        10px; /* space between bullet points */
  --card-border:              1px; /* thickness of card outlines */

  /* TICKET ---------------------------------------------------------------- */
  --ticket-width:           370px; /* width of the paper ticket */
  --ticket-pad-x:            30px; /* left/right padding inside the ticket */
  --ticket-pad-y:            34px; /* top/bottom padding inside the ticket */
  --ticket-size:             15px; /* ticket text size */
  --ticket-leading:           1.5; /* ticket line spacing */
  --ticket-tilt:              3deg; /* how far the ticket leans on wide screens */
  --ticket-tooth:            10px; /* size of the torn-paper zigzag at top and bottom */
  --ticket-shadow-y:         26px; /* how far the ticket's shadow drops */
  --ticket-shadow-blur:      50px; /* how soft the ticket's shadow is */
  --ticket-col-gap:          72px; /* space between ticket section copy and ticket */

  /* SCANNER BAND ---------------------------------------------------------- */
  --chip-pad-y:              12px; /* scanner chip top/bottom padding */
  --chip-pad-x:              22px; /* scanner chip left/right padding */
  --chip-gap:                12px; /* space between scanner chips */
  --chip-size:               18px; /* scanner chip label size */

  /* PRICING --------------------------------------------------------------- */
  --price-grid-gap:          20px; /* space between the monthly and annual cards */
  --price-card-pad:          36px; /* padding inside a price card */
  --price-card-radius:       22px; /* price card corner rounding */
  --price-size:              96px; /* the big dollar amount size */
  --price-card-width:       420px; /* width of each price card */
  --price-badge-pad-y:        6px; /* "Save $49.89" badge top/bottom padding */
  --price-badge-pad-x:       12px; /* "Save $49.89" badge left/right padding */
  --price-list-gap:          12px; /* space between included-feature lines */
  --price-check-size:        26px; /* size of the check circles in the list */
  --price-list-cols:           2; /* columns in the everything-included list on wide screens */
  --price-list-col-gap:      32px; /* space between included-list columns */

  /* FINAL CTA ------------------------------------------------------------- */
  --cta-pad-y:              104px; /* air above and below the closing call to action */
  --cta-h2-size-max:         92px; /* largest the closing headline gets */

  /* FOOTER ---------------------------------------------------------------- */
  --footer-pad-y:            48px; /* air above and below footer content */
  --footer-link-gap:         24px; /* space between footer links */

  /* LEGAL / PRIVACY PAGE -------------------------------------------------- */
  --legal-max-width:        760px; /* line length of the privacy page */
  --legal-pad-top:           72px; /* air above the privacy page title */
  --legal-h2-size:           26px; /* privacy page section headings */
  --legal-h2-top:            44px; /* space above each privacy section heading */
  --legal-p-gap:             14px; /* space between privacy paragraphs and list items */
  --legal-card-pad:          22px; /* padding inside the privacy summary box */

  /* LINES, EDGES, FOCUS --------------------------------------------------- */
  --rule-width:               1px; /* thickness of divider lines */
  --focus-ring-width:         3px; /* thickness of the keyboard focus outline */
  --focus-ring-offset:        3px; /* gap between element and its focus outline */

  /* BREAKPOINTS (numbers are repeated in the @media queries below) -------- */
  --bp-wide:               1000px; /* below this the hero and split sections stack */
  --bp-tablet:              860px; /* below this grids drop to two columns */
  --bp-phone:               600px; /* below this grids drop to one column, nav slims */
}

/* Tablet: hero and split sections stack, grids go to two columns. (--bp-wide) */
@media (max-width: 1000px) {
  :root {
    --section-pad-y:       72px; /* vertical air between sections on tablet */
    --hero-pad-top:        40px; /* air above the hero on tablet */
    --hero-pad-bottom:     64px; /* air below the hero on tablet */
    --hero-col-gap:        40px; /* space between hero copy and video once stacked */
    --ticket-col-gap:      48px; /* space between ticket copy and ticket once stacked */
    --strip-size:          32px; /* strip tagline size on tablet */
  }
}

/* Phone. (--bp-phone) */
@media (max-width: 600px) {
  :root {
    --page-side-pad:       18px; /* space between content and the window edge on phones */
    --section-pad-y:       56px; /* vertical air between sections on phones */
    --section-head-gap:    36px; /* gap from section heading to content on phones */
    --header-h:            60px; /* header height on phones */
    --body-size:           16px; /* paragraph size on phones */
    --h1-size-min:         46px; /* smallest hero headline on phones */
    --h2-size-min:         36px; /* smallest section headline on phones */
    --hero-sub-size:       18px; /* subhead size on phones */
    --btn-pad-x:           22px; /* button left/right padding on phones */
    --price-size:          80px; /* big dollar amount size on phones */
    --price-card-pad:      26px; /* padding inside price cards on phones */
    --step-pad:            22px; /* padding inside step cards on phones */
    --feature-pad:         24px; /* padding inside feature cards on phones */
    --compare-pad:         22px; /* padding inside before/after cards on phones */
    --strip-size:          26px; /* strip tagline size on phones */
    --ticket-size:         13px; /* ticket text size on phones */
    --ticket-pad-x:        20px; /* ticket left/right padding on phones */
    --wordmark-size:       23px; /* wordmark size on phones */
    --cta-pad-y:           72px; /* closing CTA air on phones */
    --video-radius:        16px; /* reel corner rounding on phones */
  }
}

/* =========================================================================
   BASE — structure only below this line; every number comes from a knob.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--midnight);
  background: var(--warm-white);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: var(--focus-ring-width) solid var(--rush-yellow); outline-offset: var(--focus-ring-offset); }
.on-light :focus-visible, .section--light :focus-visible, .section--cream :focus-visible { outline-color: var(--rush-red); }

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 100;
  padding: var(--btn-small-pad-y) var(--btn-small-pad-x);
  background: var(--rush-yellow); color: var(--midnight); font-weight: 700;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--page-max-width) + var(--page-side-pad) * 2); margin: 0 auto; padding: 0 var(--page-side-pad); }

/* Display type: heavy, condensed, leaning forward. */
.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
}
h1 { font-size: clamp(var(--h1-size-min), var(--h1-size-fluid), var(--h1-size-max)); line-height: var(--h1-leading); }
h2 { font-size: clamp(var(--h2-size-min), var(--h2-size-fluid), var(--h2-size-max)); line-height: var(--h2-leading); }
h3 { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--h3-size); line-height: var(--h3-leading); letter-spacing: var(--display-tracking); }
.hl { color: var(--rush-yellow); }
.on-light .hl, .section--light .hl, .section--cream .hl { color: var(--rush-red); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--rush-yellow);
}
.section--light .eyebrow, .section--cream .eyebrow { color: var(--rush-red); }

/* Speed lines: the brand's secondary device. */
.speed-lines { display: inline-flex; flex-direction: column; gap: var(--speed-line-gap); transform: skewX(var(--speed-skew)); }
.speed-lines i { display: block; height: var(--speed-line-h); border-radius: var(--speed-line-h); background: var(--rush-yellow); }
.speed-lines i:nth-child(1) { width: var(--speed-line-long); }
.speed-lines i:nth-child(2) { width: var(--speed-line-mid); }
.speed-lines i:nth-child(3) { width: var(--speed-line-short); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--chip-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font: 800 var(--btn-size)/1 var(--font-body);
  border-radius: var(--btn-radius); border: var(--btn-border) solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform var(--hover-ms) ease, box-shadow var(--hover-ms) ease, background var(--hover-ms) ease;
}
.btn--primary { background: var(--rush-yellow); color: var(--midnight); box-shadow: 0 var(--btn-shadow-y) 0 var(--midnight); }
.btn--primary:hover { transform: translateY(var(--btn-press-y)); box-shadow: 0 calc(var(--btn-shadow-y) - var(--btn-press-y)) 0 var(--midnight); }
.btn--primary:active { transform: translateY(var(--btn-shadow-y)); box-shadow: 0 0 0 var(--midnight); }
.btn--ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn--red { background: var(--rush-red); color: #fff; box-shadow: 0 var(--btn-shadow-y) 0 var(--midnight); }
.btn--red:hover { transform: translateY(var(--btn-press-y)); box-shadow: 0 calc(var(--btn-shadow-y) - var(--btn-press-y)) 0 var(--midnight); }
.btn--small { padding: var(--btn-small-pad-y) var(--btn-small-pad-x); font-size: var(--btn-small-size); box-shadow: none; }
.btn--small:hover { transform: none; box-shadow: none; background: #fff; }
.btn--small:active { transform: none; }

/* =========================================================================
   HEADER
   ========================================================================= */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--midnight); border-bottom: var(--rule-width) solid rgba(255,255,255,0.08); color: #fff; }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); }
.nav-brand { display: inline-flex; align-items: center; gap: var(--nav-brand-gap); text-decoration: none; }
.nav-brand img { width: var(--nav-brand-icon); height: var(--nav-brand-icon); border-radius: var(--nav-brand-radius); }
.wordmark { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--wordmark-size); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.wordmark b { color: var(--rush-yellow); font-weight: 900; }
.nav-links { display: flex; align-items: center; gap: var(--nav-gap); }
.nav-links a:not(.btn) { text-decoration: none; font-weight: 600; font-size: var(--small-size); color: var(--neutral-on-dark); transition: color var(--hover-ms) ease; }
.nav-links a:not(.btn):hover { color: #fff; }

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section { padding: var(--section-pad-y) 0; }
.section--dark { background: var(--midnight); color: #fff; }
.section--light { background: var(--warm-white); color: var(--midnight); }
.section--cream { background: var(--warm-white-dim); color: var(--midnight); }
.section--red { background: var(--rush-red); color: #fff; }
.section-head { max-width: var(--section-head-measure); margin-bottom: var(--section-head-gap); }
.section-head .eyebrow { margin-bottom: var(--hero-eyebrow-gap); }
.section-head h2 { margin-bottom: var(--hero-tag-gap); }
.section-head p { font-size: var(--hero-sub-size); color: var(--neutral); }
.section--dark .section-head p, .section--red .section-head p { color: var(--neutral-on-dark); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 20% 0%, var(--rush-red) 0%, var(--rush-red-deep) 100%);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
}
.hero::before { /* soft light behind the reel */
  content: ''; position: absolute; right: calc(var(--hero-glow-size) / -4); top: calc(var(--hero-glow-size) / -6);
  width: var(--hero-glow-size); height: var(--hero-glow-size); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,213,42,0.28), rgba(255,213,42,0));
  pointer-events: none;
}
.hero .container, .header .container { max-width: calc(var(--hero-max-width) + var(--page-side-pad) * 2); }
.hero-grid { position: relative; display: grid; grid-template-columns: var(--hero-copy-width) 1fr; align-items: center; gap: var(--hero-col-gap); }
.hero-copy .eyebrow { margin-bottom: var(--hero-eyebrow-gap); }
.hero-copy h1 { margin-bottom: var(--hero-h1-gap); text-shadow: 0 var(--btn-shadow-y) 0 rgba(28,11,5,0.55); }
.hero-sub { font-size: var(--hero-sub-size); max-width: var(--hero-sub-measure); color: #FFE9E2; }
.hero-nos { margin-top: var(--hero-tag-gap); font-weight: 800; max-width: var(--hero-sub-measure); }
.hero-nos span { display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--hero-actions-gap); margin-top: var(--hero-actions-top); }
.hero-price { margin-top: var(--hero-price-top); font-size: var(--small-size); font-weight: 600; color: #FFD9D0; }
.hero-price b { color: var(--rush-yellow); }
.hero-store { margin-top: var(--speed-line-gap); font-size: var(--small-size); max-width: var(--hero-sub-measure); color: #FFD9D0; }
.header .container { height: 100%; }

/* Sizzle reel: landscape 16:9 by default, vertical 9:16 in portrait. */
.reel { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--video-radius); overflow: hidden; background: var(--midnight); border: var(--video-border) solid var(--midnight); box-shadow: 0 var(--video-shadow-y) var(--video-shadow-blur) rgba(28,11,5,0.55); }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-sound {
  position: absolute; right: var(--sound-inset); top: var(--sound-inset);
  display: inline-flex; align-items: center; gap: var(--speed-line-gap);
  padding: var(--sound-pad-y) var(--sound-pad-x);
  font: 700 var(--sound-font)/1 var(--font-body); color: #fff;
  background: rgba(28,11,5,0.72); border: var(--rule-width) solid rgba(255,255,255,0.28); border-radius: var(--btn-radius);
  -webkit-backdrop-filter: blur(var(--sound-blur)); backdrop-filter: blur(var(--sound-blur));
  cursor: pointer; transition: background var(--hover-ms) ease;
}
.reel-sound[hidden] { display: none; }
.reel-sound:hover { background: rgba(28,11,5,0.9); }
.reel-sound.is-on { background: var(--rush-yellow); color: var(--midnight); border-color: var(--midnight); }
.reel-sound-icon { width: var(--sound-icon); height: var(--sound-icon); }
.reel-sound .wave { display: none; }
.reel-sound.is-on .wave { display: inline; }
.reel-sound.is-on .mute { display: none; }
@media (orientation: portrait) {
  .reel { aspect-ratio: 9 / 16; width: min(100%, var(--video-portrait-width)); margin: 0 auto; }
}

/* =========================================================================
   TAGLINE STRIP
   ========================================================================= */
.strip { background: var(--rush-yellow); color: var(--midnight); overflow: hidden; padding: var(--strip-pad-y) 0; border-block: var(--btn-border) solid var(--midnight); }
.strip-track { display: flex; width: max-content; gap: var(--strip-gap); animation: strip-scroll var(--strip-speed) linear infinite; }
.strip-track span { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: var(--strip-size); line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--strip-gap); }
.strip-track span::after { content: ''; width: var(--speed-line-long); height: var(--speed-line-h); background: var(--rush-red); border-radius: var(--speed-line-h); transform: skewX(var(--speed-skew)); }
@keyframes strip-scroll { to { transform: translateX(-50%); } }

/* =========================================================================
   FOUR STEPS
   ========================================================================= */
.steps-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--steps-gap); counter-reset: step; }
.step {
  position: relative; padding: var(--step-pad); border-radius: var(--step-radius); background: #fff;
  border: var(--step-border) solid var(--warm-white-dim); animation: step-glow var(--step-cycle) infinite; display: flex; flex-direction: column; gap: var(--hero-actions-gap);
}
.step:nth-child(1) { animation-delay: 0s; }
.step:nth-child(2) { animation-delay: calc(var(--step-cycle) / 4); }
.step:nth-child(3) { animation-delay: calc(var(--step-cycle) / 2); }
.step:nth-child(4) { animation-delay: calc(var(--step-cycle) * 3 / 4); }
@keyframes step-glow {
  0%, 22%   { border-color: var(--rush-red); box-shadow: 0 var(--btn-shadow-y) 0 var(--rush-red); transform: translateY(calc(var(--btn-press-y) * -1)); }
  27%, 100% { border-color: var(--warm-white-dim); box-shadow: 0 0 0 transparent; transform: none; }
}
.step-num { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: var(--step-num-size); line-height: 0.8; color: var(--rush-red); }
.step h3 { color: var(--midnight); }
.step p { color: var(--neutral); font-size: var(--small-size); line-height: var(--body-leading); }
.step p b { color: var(--midnight); font-size: calc(var(--small-size) + 2px); display: block; margin-bottom: var(--speed-line-gap); line-height: 1.35; }
.step-visual { height: var(--step-visual-h); border-radius: calc(var(--step-radius) - var(--step-border)); background: var(--midnight); position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; }

/* mini visuals */
.sv-scan .bar { width: 62%; height: 54%; border-radius: var(--btn-small-pad-y); background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 7px, #fff 7px 9px, transparent 9px 14px, #fff 14px 18px, transparent 18px 21px); opacity: 0.9; }
.sv-scan .beam { position: absolute; left: 14%; right: 14%; height: var(--speed-line-h); background: var(--rush-yellow); box-shadow: 0 0 22px var(--rush-yellow); border-radius: var(--speed-line-h); animation: beam 2.2s ease-in-out infinite; }
@keyframes beam { 0%, 100% { top: 22%; } 50% { top: 70%; } }
.sv-build { align-content: center; gap: var(--speed-line-gap); padding: 0 var(--hero-actions-gap); width: 100%; }
.sv-build .row { width: 100%; display: flex; align-items: center; gap: var(--chip-gap); background: var(--midnight-soft); border-radius: var(--speed-line-h); padding: var(--speed-line-gap) var(--chip-gap); font-weight: 700; font-size: var(--small-size); opacity: 0; transform: translateX(calc(var(--hero-actions-gap) * -1)); animation: row-in var(--step-cycle) infinite; }
.sv-build .row b { color: var(--rush-yellow); font-family: var(--font-display); font-style: italic; font-size: calc(var(--h3-size) * 0.7); line-height: 1; min-width: 1.2em; }
.sv-build .row:nth-child(1) { animation-delay: 0s; }
.sv-build .row:nth-child(2) { animation-delay: 0.5s; }
.sv-build .row:nth-child(3) { animation-delay: 1s; }
@keyframes row-in { 0%, 3% { opacity: 0; transform: translateX(calc(var(--hero-actions-gap) * -1)); } 8%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sv-send .whoosh { display: flex; flex-direction: column; gap: var(--speed-line-gap); align-items: flex-end; animation: whoosh 3s ease-in-out infinite; }
.sv-send .whoosh i { display: block; height: var(--speed-line-h); border-radius: var(--speed-line-h); background: var(--rush-yellow); }
.sv-send .whoosh i:nth-child(1) { width: var(--speed-line-long); }
.sv-send .whoosh i:nth-child(2) { width: var(--speed-line-mid); }
.sv-send .whoosh i:nth-child(3) { width: var(--speed-line-short); }
.sv-send .chip { position: absolute; bottom: var(--hero-actions-gap); font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; background: var(--rush-red); padding: var(--speed-line-gap) var(--chip-gap); border-radius: var(--speed-line-h); font-size: var(--small-size); }
@keyframes whoosh { 0% { transform: translateX(-70%); opacity: 0; } 25%, 70% { transform: none; opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
.sv-done .check { width: calc(var(--step-visual-h) * 0.4); height: calc(var(--step-visual-h) * 0.4); border-radius: 50%; background: var(--rush-yellow); color: var(--midnight); display: grid; place-items: center; animation: pop 3s ease-in-out infinite; }
.sv-done .check svg { width: 56%; height: 56%; }
.sv-done .lbl { position: absolute; bottom: var(--hero-actions-gap); font-family: var(--font-display); font-style: italic; font-weight: 900; letter-spacing: 0.08em; font-size: var(--small-size); color: var(--rush-yellow); }
@keyframes pop { 0%, 10% { transform: scale(0.6); opacity: 0.3; } 25%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.6); opacity: 0.3; } }

/* =========================================================================
   PROBLEM
   ========================================================================= */
.compare-list { display: grid; gap: var(--compare-gap); }
.compare { display: grid; grid-template-columns: 1fr var(--compare-arrow-size) 1fr; align-items: stretch; gap: var(--compare-gap); }
.compare-card { border-radius: var(--compare-radius); padding: var(--compare-pad); display: flex; flex-direction: column; gap: var(--speed-line-gap); justify-content: center; }
.compare-card small { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); font-size: var(--eyebrow-size); }
.compare-card p { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: var(--h3-size); line-height: var(--h3-leading); text-transform: uppercase; }
.compare-card--before { background: var(--midnight-soft); border: var(--btn-border) dashed rgba(255,255,255,0.28); color: var(--neutral-on-dark); }
.compare-card--before small { color: var(--neutral-on-dark); }
.compare-card--before p { text-decoration: line-through; text-decoration-color: var(--rush-red); text-decoration-thickness: var(--btn-border); }
.compare-card--after { background: var(--rush-red); color: #fff; box-shadow: 0 var(--btn-shadow-y) 0 var(--rush-yellow); }
.compare-card--after small { color: var(--rush-yellow); }
.compare-arrow { display: grid; place-items: center; color: var(--rush-yellow); }
.compare-arrow svg { width: var(--compare-arrow-size); height: var(--compare-arrow-size); }

/* =========================================================================
   FEATURES
   ========================================================================= */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--feature-gap); }
.feature-card { background: #fff; border: var(--card-border) solid var(--warm-white-dim); border-radius: var(--feature-radius); padding: var(--feature-pad); display: flex; flex-direction: column; gap: var(--hero-actions-gap); }
.feature-icon { width: var(--feature-icon); height: var(--feature-icon); border-radius: var(--feature-icon-radius); background: var(--rush-red); color: var(--rush-yellow); display: grid; place-items: center; transform: skewX(var(--speed-skew)); }
.feature-icon svg { width: 54%; height: 54%; transform: skewX(calc(var(--speed-skew) * -1)); }
.feature-card h3 { color: var(--midnight); }
.feature-lede { font-weight: 700; color: var(--rush-red); }
.feature-card ul { display: grid; gap: var(--feature-list-gap); color: var(--neutral); font-size: var(--small-size); }
.feature-card li { position: relative; padding-left: calc(var(--speed-line-long) / 6); }
.feature-card li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: calc(var(--speed-line-long) / 8); height: var(--speed-line-h); border-radius: var(--speed-line-h); background: var(--rush-yellow); transform: skewX(var(--speed-skew)); box-shadow: 0 0 0 var(--rule-width) var(--rush-red); }

/* =========================================================================
   TICKET + SCANNER
   ========================================================================= */
.split { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ticket-col-gap); }
.split-copy h2 { margin-bottom: var(--hero-tag-gap); }
.split-copy p { font-size: var(--hero-sub-size); color: var(--neutral-on-dark); max-width: var(--hero-sub-measure); }
.split-copy .eyebrow { margin-bottom: var(--hero-eyebrow-gap); }
.split-copy .btn { margin-top: var(--hero-actions-top); }
.ticket-wrap { display: grid; justify-items: center; }
.ticket {
  position: relative; width: var(--ticket-width); max-width: 100%;
  background: #fff; color: #1a1a1a; padding: var(--ticket-pad-y) var(--ticket-pad-x);
  font-family: var(--font-mono); font-size: var(--ticket-size); line-height: var(--ticket-leading);
  transform: rotate(var(--ticket-tilt));
  filter: drop-shadow(0 var(--ticket-shadow-y) var(--ticket-shadow-blur) rgba(0,0,0,0.55));
}
.ticket::before, .ticket::after { content: ''; position: absolute; left: 0; right: 0; height: var(--ticket-tooth); background: linear-gradient(135deg, transparent 50%, #fff 50%) 0 0 / calc(var(--ticket-tooth) * 2) var(--ticket-tooth), linear-gradient(225deg, transparent 50%, #fff 50%) 0 0 / calc(var(--ticket-tooth) * 2) var(--ticket-tooth); }
.ticket::before { top: calc(var(--ticket-tooth) * -1 + 1px); transform: scaleY(-1); }
.ticket::after { bottom: calc(var(--ticket-tooth) * -1 + 1px); }
.ticket pre { font: inherit; white-space: pre; overflow: hidden; }
.ticket .t-brand { display: block; text-align: center; font-weight: 800; letter-spacing: 0.12em; }
.ticket .t-foot { display: block; text-align: center; font-weight: 800; letter-spacing: 0.08em; }

.chips { display: flex; flex-wrap: wrap; gap: var(--chip-gap); margin-top: var(--hero-actions-top); }
.chip { display: inline-flex; align-items: center; gap: var(--chip-gap); padding: var(--chip-pad-y) var(--chip-pad-x); border-radius: var(--btn-radius); background: var(--midnight-soft); border: var(--btn-border) solid var(--rush-red); font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: var(--chip-size); line-height: 1; }
.chip svg { width: var(--chip-size); height: var(--chip-size); color: var(--rush-yellow); }

/* =========================================================================
   PRICING
   ========================================================================= */
.price-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--price-grid-gap); }
.price-card { position: relative; width: var(--price-card-width); max-width: 100%; border-radius: var(--price-card-radius); padding: var(--price-card-pad); background: #fff; border: var(--btn-border) solid var(--warm-white-dim); text-align: center; display: flex; flex-direction: column; gap: var(--speed-line-gap); }
.price-card--featured { background: var(--rush-red); color: #fff; border-color: var(--midnight); box-shadow: 0 var(--btn-shadow-y) 0 var(--midnight); }
.price-label { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); font-size: var(--eyebrow-size); color: var(--neutral); }
.price-card--featured .price-label { color: var(--rush-yellow); }
.price { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: var(--price-size); line-height: 0.95; }
.price sup { font-size: 0.45em; vertical-align: 0.9em; margin-right: 0.04em; }
.price-per { color: var(--neutral); font-weight: 600; font-size: var(--small-size); }
.price-card--featured .price-per { color: #FFD9D0; }
.price-badge { align-self: center; margin-top: var(--speed-line-gap); padding: var(--price-badge-pad-y) var(--price-badge-pad-x); border-radius: var(--btn-radius); background: var(--rush-yellow); color: var(--midnight); font-weight: 800; font-size: var(--small-size); }
.price-equiv { font-size: var(--small-size); color: #FFD9D0; }
.price-card .btn { margin-top: auto; }
.price-card .price-per { margin-bottom: var(--hero-actions-gap); }
.included { max-width: var(--page-max-width); margin: var(--section-head-gap) auto 0; }
.included h3 { text-align: center; margin-bottom: var(--hero-actions-top); }
.included ul { display: grid; grid-template-columns: repeat(var(--price-list-cols), 1fr); gap: var(--price-list-gap) var(--price-list-col-gap); max-width: var(--section-head-measure); margin: 0 auto; }
.included li { display: flex; align-items: center; gap: var(--chip-gap); font-weight: 600; }
.included li::before { content: ''; flex: none; width: var(--price-check-size); height: var(--price-check-size); border-radius: 50%; background: var(--rush-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD52A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat; }
.seriously { text-align: center; margin: var(--section-head-gap) auto 0; max-width: var(--section-head-measure); }
.seriously h3 { color: var(--rush-red); margin-bottom: var(--hero-actions-gap); }
.seriously p { color: var(--neutral); }
.seriously p b { color: var(--midnight); }
.fine-print { margin-top: var(--hero-actions-top); text-align: center; font-size: var(--small-size); color: var(--neutral); max-width: var(--section-head-measure); margin-inline: auto; }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.cta { position: relative; overflow: hidden; text-align: center; padding: var(--cta-pad-y) 0; background: radial-gradient(120% 120% at 50% 0%, var(--rush-red) 0%, var(--rush-red-deep) 100%); color: #fff; }
.cta h2 { font-size: clamp(var(--h2-size-min), 9vw, var(--cta-h2-size-max)); margin-bottom: var(--hero-tag-gap); text-shadow: 0 var(--btn-shadow-y) 0 rgba(28,11,5,0.55); }
.cta p { font-size: var(--hero-sub-size); color: #FFE9E2; max-width: var(--hero-sub-measure); margin: 0 auto var(--hero-actions-top); }
.cta .speed-lines { margin-top: var(--hero-actions-top); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: var(--midnight); color: var(--neutral-on-dark); padding: var(--footer-pad-y) 0; font-size: var(--small-size); }
.footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hero-actions-top); }
.footer a { text-decoration: none; color: #fff; font-weight: 600; }
.footer a:hover { color: var(--rush-yellow); }
.footer-links { display: flex; gap: var(--footer-link-gap); }
.footer-tag { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; color: var(--rush-yellow); letter-spacing: 0.04em; }

/* =========================================================================
   PRIVACY / 404
   ========================================================================= */
.legal { background: var(--warm-white); padding: var(--legal-pad-top) 0 var(--section-pad-y); }
.legal-inner { max-width: var(--legal-max-width); margin: 0 auto; padding: 0 var(--page-side-pad); }
.legal h1 { color: var(--midnight); font-size: clamp(var(--h2-size-min), var(--h2-size-fluid), var(--h2-size-max)); margin-bottom: var(--speed-line-gap); }
.legal .updated { color: var(--neutral); font-size: var(--small-size); margin-bottom: var(--hero-actions-top); }
.legal h2 { font-size: var(--legal-h2-size); line-height: var(--h3-leading); margin: var(--legal-h2-top) 0 var(--legal-p-gap); color: var(--rush-red); }
.legal p, .legal li { margin-bottom: var(--legal-p-gap); }
.legal ul { list-style: none; margin-bottom: var(--legal-p-gap); }
.legal li { position: relative; padding-left: calc(var(--speed-line-long) / 5); }
.legal li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: calc(var(--speed-line-long) / 8); height: var(--speed-line-h); border-radius: var(--speed-line-h); background: var(--rush-red); transform: skewX(var(--speed-skew)); }
.legal a { color: var(--rush-red); font-weight: 600; }
.legal-summary { background: #fff; border: var(--btn-border) solid var(--rush-red); border-radius: var(--btn-radius); padding: var(--legal-card-pad); box-shadow: 0 var(--btn-shadow-y) 0 var(--rush-red); margin-bottom: var(--legal-p-gap); }
.legal-summary p:last-child { margin-bottom: 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--small-size); margin-bottom: var(--legal-p-gap); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--btn-small-pad-y) var(--speed-line-gap); border-bottom: var(--rule-width) solid var(--warm-white-dim); }
.legal th { font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral); }
.table-scroll { overflow-x: auto; }
.notfound { text-align: center; }
.notfound .hero-sub { margin: 0 auto; }
.notfound .hero-actions { justify-content: center; }

/* =========================================================================
   RESPONSIVE (numbers repeat the --bp-* knobs; @media can't read variables)
   ========================================================================= */
@media (max-width: 1000px) { /* --bp-wide */
  .hero-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .ticket-wrap { justify-items: start; }
  .ticket { transform: none; }
  .steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) { /* --bp-tablet */
  .features-grid { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { display: none; }
  .compare { grid-template-columns: 1fr; }
  .compare-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 600px) { /* --bp-phone */
  .steps-list { grid-template-columns: 1fr; }
  .included ul { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .footer-content { flex-direction: column; align-items: flex-start; }
  .ticket-wrap { justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track, .step, .sv-scan .beam, .sv-build .row, .sv-send .whoosh, .sv-done .check { animation: none; }
  .sv-build .row { opacity: 1; transform: none; }
}

.cta .fine-print { color: #FFD9D0; }
.cta .fine-print a { color: #fff; font-weight: 700; }