/* ==========================================================================
   CUSTOMER DESIGN SYSTEM
   The approved green homepage, promoted out of page scope into shared
   semantic tokens. Values are identical to what the homepage already used,
   so promoting them changes nothing visually.

   Legacy sheets (tokens.css / site-dark.css / site.css) are still loaded and
   untouched; this layer coexists with them until routes migrate one by one.
   ========================================================================== */

:root{
  /* --- colour ---------------------------------------------------------- */
  --brand-green:var(--vp-brand-green, #75FB8A);
  --accent-yellow:var(--vp-accent-yellow, #FFEB52);
  --premium-gold:var(--vp-premium-gold, #F2B01E);
  --band-purple:var(--vp-band-purple, #BDB2FF);
  --band-cyan:var(--vp-band-cyan, #6BDCFF);
  --premium-gold-soft:var(--vp-premium-gold-soft, #FFF3CF);
  --ink-900:#000;
  --surface-white:#fff;
  --surface-shell:#f4f2ec;
  --muted-ink:rgba(0,0,0,.55);

  /* platform identities (artwork panels) */
  --pf-twitch:#A970FF; --pf-youtube:#FFEB52; --pf-kick:#7BEE6B;

  /* --- borders ---------------------------------------------------------- */
  --border-control:2px;
  --border-card:1.76px;
  --border-panel:2.5px;

  /* --- hard offset shadows --------------------------------------------- */
  --shadow-small:2px 3px 0 var(--ink-900);
  --shadow-control:3px 4px 0 var(--ink-900);
  --shadow-card:4px 5px 0 var(--ink-900);
  --shadow-panel:6px 8px 0 var(--ink-900);

  /* --- spacing ---------------------------------------------------------- */
  --space-xs:6px; --space-sm:10px; --space-md:16px; --space-lg:26px; --space-xl:40px;

  /* --- typography ------------------------------------------------------- */
  /* Config first, this build's own face as the fallback. The fallback is the
     approved value verbatim, so a surface with no config renders exactly as
     it did before typography became editable. */
  --type-display:var(--vp-font-display,'Epilogue', system-ui, sans-serif);
  --type-ui:var(--vp-font-body,'Be Vietnam Pro', system-ui, sans-serif);
  --type-heading:italic 900 clamp(22px,2.4vw,30px)/1.1 var(--type-display);
  --type-body:italic 500 .95rem/1.5 var(--type-ui);
  --type-label:italic 800 12px/1 var(--type-ui);
  --type-price:italic 900 20px/1 var(--type-ui);

  /* --- motion ----------------------------------------------------------- */
  --motion-fast:.12s;
  --motion-medium:.3s;
  --motion-panel:.38s;
  --ease-physical:cubic-bezier(.22,1,.36,1);
}

/* The chrome and the approved homepage were authored against --sm-* names.
   They are kept as aliases of the semantic tokens so both resolve everywhere
   and neither surface changes visually. */
:root{
  --sm-green:var(--brand-green);
  --sm-yellow:var(--accent-yellow);
  --sm-gold:var(--premium-gold);
  --sm-gold-soft:var(--premium-gold-soft);
  --sm-ink:var(--ink-900);
  --sm-panel:var(--surface-white);
  --sm-shell:var(--surface-shell);
  --sm-bd:var(--border-control);
  --sm-sh-sm:var(--shadow-small);
  --sm-sh:var(--shadow-control);
  --sm-sh-md:var(--shadow-card);
  --sm-sh-lg:var(--shadow-panel);
  --sm-ui:var(--type-ui);
  --sm-display:var(--type-display);
}

/* Any customer surface opts in with data-surface="customer". The homepage
   already paints itself; this makes the same ground available elsewhere. */
[data-surface="customer"]{
  background:var(--brand-green);
  color:var(--ink-900);
  font-family:var(--type-ui);
}

/* --------------------------------------------------------------------------
   PRIMITIVES — the reusable pieces of the approved language.
   Named c-* so they cannot collide with the legacy sheets.
   -------------------------------------------------------------------------- */

/* physical button */
.c-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface-white); color:var(--ink-900);
  border:var(--border-control) solid var(--ink-900); border-radius:10px;
  box-shadow:var(--shadow-control);
  padding:9px 16px; font:italic 800 15px/1 var(--type-ui);
  cursor:pointer; transition:transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}
.c-btn:hover{ transform:translate(1px,1px); box-shadow:var(--shadow-small); }
.c-btn:active{ transform:translate(3px,4px); box-shadow:0 0 0 var(--ink-900); }
.c-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-yellow), 0 0 0 5px var(--ink-900); }
.c-btn--green{ background:var(--brand-green); }
.c-btn--lg{ padding:12px 22px; font-size:18px; }

/* price badge */
.c-price{
  display:inline-flex; align-items:baseline; gap:2px;
  font:var(--type-price); background:var(--accent-yellow); color:var(--ink-900);
  border:var(--border-control) solid var(--ink-900); border-radius:9px;
  box-shadow:var(--shadow-small); padding:6px 10px;
}
.c-price--premium{ background:linear-gradient(180deg, var(--accent-yellow), var(--premium-gold)); }
.c-price small{ font:italic 800 10px/1 var(--type-ui); letter-spacing:.04em; }

/* "From $x" tag */
.c-tag{
  display:inline-block; font:var(--type-label);
  background:var(--accent-yellow); border:var(--border-control) solid var(--ink-900);
  border-radius:6px; padding:4px 7px; box-shadow:var(--shadow-small);
}

/* panel */
.c-panel{
  background:var(--surface-white);
  border:var(--border-panel) solid var(--ink-900); border-radius:20px;
  box-shadow:var(--shadow-panel);
}

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


/* ==========================================================================
   SHARED PURCHASE SURFACE
   Boost Station shell, tier control, readout, slider, trust list, premium
   treatment and CTAs. Extracted from the homepage sheet verbatim so the
   homepage is unchanged; service pages consume the same rules.
   ========================================================================== */
/* ------------------------------ boost station ----------------------------- */
.sm-station{
  width:100%; min-width:330px; max-width:392px; margin:6px 0 10px;
  background:#fff; border:2.5px solid var(--sm-ink); border-radius:20px;
  box-shadow:var(--sm-sh-lg); padding:15px 16px 14px;
  display:flex; flex-direction:column; gap:12px; text-align:left;
  animation:sm-swap .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sm-swap{ from{ opacity:0; transform:translateY(10px) scale(.985) } to{ opacity:1; transform:none } }
.sm-st-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sm-st-title{ display:inline-flex; align-items:center; gap:7px; font:italic 900 13px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.06em; }
.sm-st-pf{ font:italic 800 10.5px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.09em; opacity:.5; }
.sm-row{ display:flex; gap:8px; }
.sm-pill{
  flex:1; padding:9px 8px; border:var(--sm-bd) solid var(--sm-ink); border-radius:999px; cursor:pointer;
  font:italic 900 12.5px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.05em;
  transition:background .2s, color .2s; background:#fff; color:var(--sm-ink);
}
.sm-pill[aria-selected="true"]{ background:var(--sm-ink); color:#fff; }
.sm-pill-sm{ font-size:11px; padding:7px 8px; }
.sm-tiers{ display:flex; padding:4px; background:var(--sm-shell); border:var(--sm-bd) solid var(--sm-ink); border-radius:14px; gap:4px; }
.sm-tier{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 6px;
  border-radius:10px; cursor:pointer; transition:background .2s, box-shadow .2s, opacity .2s;
  border:var(--sm-bd) solid transparent; background:transparent; opacity:.5;
}
.sm-tier[aria-selected="true"]{ border:var(--sm-bd) solid var(--sm-ink); background:#fff; box-shadow:var(--sm-sh-sm); opacity:1; }
.sm-tier .t{ font:italic 900 13.5px/1.1 var(--sm-ui); text-transform:uppercase; letter-spacing:.03em; }
.sm-tier .s{ font:italic 500 11.5px/1.2 var(--sm-ui); }
.sm-readout{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.sm-qty{ display:flex; align-items:baseline; gap:7px; }
.sm-qty .n{ font:italic 900 clamp(26px,3vw,34px)/1 var(--sm-ui); letter-spacing:-.03em; }
.sm-qty .u{ font:italic 800 10.5px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.11em; opacity:.6; }
.sm-price-wrap{ display:flex; align-items:center; gap:8px; }
.sm-was{ font:italic 600 13px/1 var(--sm-ui); opacity:.45; }
.sm-price{
  font:italic 900 20px/1 var(--sm-ui); background:var(--sm-yellow);
  border:var(--sm-bd) solid var(--sm-ink); border-radius:9px; box-shadow:var(--sm-sh-sm); padding:6px 10px;
}
.sm-price .per{ font:italic 800 10px/1 var(--sm-ui); letter-spacing:.04em; }
.sm-slider{ display:flex; flex-direction:column; gap:7px; }
input.sm-range{ -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; margin:0; display:block; }
input.sm-range::-webkit-slider-runnable-track{ height:16px; border:var(--sm-bd) solid var(--sm-ink); border-radius:999px; background:var(--sm-green); }
input.sm-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:26px; margin-top:-7px;
  border:var(--sm-bd) solid var(--sm-ink); border-radius:7px; background:var(--sm-yellow); box-shadow:2px 2px 0 var(--sm-ink);
}
input.sm-range::-moz-range-track{ height:16px; border:var(--sm-bd) solid var(--sm-ink); border-radius:999px; background:var(--sm-green); }
input.sm-range::-moz-range-thumb{ width:22px; height:26px; border:var(--sm-bd) solid var(--sm-ink); border-radius:7px; background:var(--sm-yellow); box-shadow:2px 2px 0 var(--sm-ink); }
input.sm-range:focus-visible{ outline:3px solid var(--sm-ink); outline-offset:3px; }
.sm-ends{ display:flex; justify-content:space-between; font:italic 800 10.5px/1 var(--sm-ui); letter-spacing:.09em; opacity:.55; }
.sm-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font:italic 600 11.5px/1 var(--sm-ui); opacity:.75; }
.sm-meta .promo{ color:#0a8a2f; font-weight:800; opacity:1; }
.sm-actions{ display:flex; gap:9px; }
.sm-add, .sm-buy{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:12px 10px; border:var(--sm-bd) solid var(--sm-ink); border-radius:11px;
  box-shadow:var(--sm-sh); cursor:pointer;
  font:italic 900 13.5px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.04em;
  transition:transform .12s, box-shadow .12s;
}
.sm-add{ background:var(--sm-green); }
.sm-buy{ background:#fff; }
.sm-add:hover, .sm-buy:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--sm-ink); }
.sm-add:active, .sm-buy:active{ transform:translate(3px,4px); box-shadow:0 0 0 var(--sm-ink); }
.sm-foot{ margin:2px 0 0; padding-top:10px; border-top:var(--sm-bd) dashed rgba(0,0,0,.25); font:italic 500 11.5px/1.4 var(--sm-ui); opacity:.7; }


.sm-trust{ display:flex; flex-direction:column; justify-content:center; margin:-8px 0; }
.sm-trust-row{ display:flex; align-items:center; gap:12px; margin:8px 0; font:italic 500 .95rem/1.5 var(--sm-ui); }
.sm-check{
  flex:none; width:20px; height:20px; background:#fff; border:1.34px solid var(--sm-ink);
  box-shadow:2px 2.5px 0 var(--sm-ink); border-radius:1.5px;
  display:inline-flex; align-items:center; justify-content:center;
}
.sm-trust-row b{ font-weight:800; }


/* ==========================================================================
   PREMIUM TIER
   Restrained: gold appears on the tier control, the price tag edge and the
   benefit markers. The panel, layout and geometry are unchanged — same
   product, higher tier.
   ========================================================================== */
/* the home page's gold aliases follow the shared Premium token */
body[data-page="home"]{
  --sm-gold:var(--premium-gold, #F2B01E);
  --sm-gold-soft:var(--premium-gold-soft, #FFF3CF);
}

/* selected Premium control earns a warm face and a gold keyline */
.sm-tier[aria-selected="true"]{ background:#fff; }
.sm-station.is-premium .sm-tier[aria-selected="true"]{
  background:linear-gradient(180deg, #FFF7E0, #FFE9A8);
  box-shadow:2px 3px 0 var(--sm-ink);
}
.sm-tier .t{ display:inline-flex; align-items:center; gap:5px; }
.sm-tier-star{ opacity:.45; transition:opacity .2s; }
.sm-tier[aria-selected="true"] .sm-tier-star{ opacity:1; }

/* price keeps its yellow tag; Premium deepens it a step rather than recolouring */
.sm-station.is-premium .sm-price{
  background:linear-gradient(180deg, var(--sm-yellow), var(--sm-gold));
  box-shadow:2px 3px 0 var(--sm-ink);
}
/* the slider track reads the tier too, at the same weight as before */
.sm-station.is-premium input.sm-range::-webkit-slider-runnable-track{ background:var(--sm-gold-soft); }
.sm-station.is-premium input.sm-range::-moz-range-track{ background:var(--sm-gold-soft); }
.sm-station.is-premium input.sm-range::-webkit-slider-thumb{ background:var(--sm-gold); }
.sm-station.is-premium input.sm-range::-moz-range-thumb{ background:var(--sm-gold); }

/* benefit list: gold stars replace checkboxes, with a quiet tier caption */
.sm-trust-tier{
  display:inline-flex; align-self:flex-start; align-items:center; gap:7px; margin:0 0 10px;
  font:italic 900 11.5px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.09em;
  padding:5px 10px; border:var(--sm-bd) solid var(--sm-ink); border-radius:999px;
  background:var(--sm-gold-soft); box-shadow:2px 2.5px 0 var(--sm-ink);
  animation:sm-trust-in .26s cubic-bezier(.22,1,.36,1) both;
}
.sm-trust.is-premium .sm-check{
  background:transparent; border:0; box-shadow:none; width:auto; height:auto;
}
.sm-trust.is-premium .sm-trust-row{ font-weight:500; }
.sm-trust.is-premium .sm-trust-row b{ font-weight:800; }

@media (prefers-reduced-motion: reduce){ .sm-trust-tier{ animation:none; } }

/* trust list swap between quality levels — one short, staggered beat */
.sm-trust-row{ animation:sm-trust-in .26s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i,0) * 26ms); }
@keyframes sm-trust-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (max-width:560px){ .sm-station{ min-width:0; } }
@media (prefers-reduced-motion: reduce){
  .sm-trust-row{ animation:none; }
  .sm-station{ animation:none; }
}

/* ==========================================================================
   CART DRAWER + FOOTER — migrated out of site.css onto the shared tokens so
   the whole customer journey speaks one visual language (§34, §46).
   ========================================================================== */

/* ------------------------------ cart drawer ------------------------------ */
.drawer .scrim{ background:rgba(0,0,0,.42); backdrop-filter:none; }
.drawer .panel{
  background:var(--surface-shell);
  border-left:var(--border-panel) solid var(--ink-900);
  box-shadow:-8px 0 0 rgba(0,0,0,.16);
}
.drawer-h{
  background:var(--brand-green); color:var(--ink-900);
  border-bottom:var(--border-panel) solid var(--ink-900); padding:15px 20px;
}
.drawer-h h3{ font:italic 900 1.02rem/1 var(--type-ui); text-transform:uppercase; letter-spacing:.05em; }
.drawer-h .chip{
  background:var(--surface-white); color:var(--ink-900);
  border:var(--border-control) solid var(--ink-900); box-shadow:var(--shadow-small);
  font:italic 800 .74rem/1 var(--type-ui);
}
.drawer-h .btn{ background:var(--surface-white); color:var(--ink-900); border:var(--border-control) solid var(--ink-900); }
.drawer-f{ border-top:var(--border-panel) solid var(--ink-900); background:var(--surface-white); }

.ci{
  background:var(--surface-white); border:var(--border-control) solid var(--ink-900);
  border-radius:14px; box-shadow:var(--shadow-small);
}
.ci:nth-child(odd){ transform:none; }   /* the drawer is a receipt, not a poster */
.ci .nm{ font:italic 900 .84rem/1.2 var(--type-ui); text-transform:none; }
.ci .stepper{ background:var(--surface-shell); border:var(--border-control) solid var(--ink-900); border-radius:10px; }
.ci .stepper button{ color:var(--ink-900); }
.ci .stepper button:hover{ background:var(--accent-yellow); color:var(--ink-900); }
.ci .stepper .v{ font:italic 800 .8rem/1 var(--type-ui); }
.ci .chin{ border-width:2px; box-shadow:none; }
/* a premium line item carries the same gold mark it had on the buy page */
.ci[data-tier="premium"]{ background:linear-gradient(180deg,#FFFBF0,#FFF4D6); }

.rec{ border:2.5px dashed var(--ink-900); border-radius:12px; background:var(--surface-white); }
.rec:hover{ background:var(--accent-yellow); border-style:solid; }
.rec .why{ opacity:.62; font-weight:600; }
.sumrow{ font-weight:600; }
.sumrow .mono{ font-weight:800; }
.sumrow.tot{ font:italic 900 1rem/1 var(--type-ui); border-top:3px dashed var(--ink-900); }
.upsell-t{
  font:italic 800 .72rem/1 var(--type-ui); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-900); display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.upsell-t::after{
  content:''; flex:1; height:3px;
  background:repeating-linear-gradient(90deg, var(--ink-900) 0 8px, transparent 8px 14px);
}

/* --------------------------------- footer -------------------------------- */
.ftr{
  background:var(--ink-900); color:var(--surface-white);
  border-top:var(--border-panel) solid var(--ink-900); margin-top:var(--space-section);
  padding-block:clamp(30px,3.6vw,46px) 24px;
}
.ftr h5{ font:italic 900 .68rem/1 var(--type-ui); color:var(--accent-yellow);
  text-transform:uppercase; letter-spacing:.09em; }
.ftr li a{ color:rgba(255,255,255,.72); font-weight:600; font-size:.79rem; padding:3px 0; }
.ftr li a:hover{ color:var(--accent-yellow); }
.ftr .chip-line{
  background:transparent; color:var(--surface-white); border-color:var(--surface-white);
  box-shadow:2px 2px 0 rgba(255,255,255,.22);
}
.ftr .pmk-s{ background:var(--surface-white) !important; color:var(--ink-900) !important;
  border-color:var(--surface-white); box-shadow:none; }
.ftr-bot{ margin-top:26px; padding-top:16px; }
.ftr-bot p, .ftr-bot .faint{ color:rgba(255,255,255,.55); }

/* The wordmark keeps its construction on the dark footer — same offset layer,
   same ink stroke — only the two colours swap so it stays legible. */
.ftr-mark{ display:inline-block; font-size:1.35rem; text-decoration:none; }
.ftr-mark .sm-word::before{ color:var(--brand-green); -webkit-text-stroke-color:var(--brand-green); }
.ftr-mark .sm-word span{ color:var(--surface-white); }
.ftr-mark .sm-word .b-green,
.ftr-mark .sm-word .b{ color:var(--brand-green); }

/* ==========================================================================
   SHARED CUSTOMER SECTIONS — migrated out of site.css.
   These appear on more than one customer route (homepage, info, checkout),
   so they belong to the shared system rather than to a page. Values are the
   ones the approved build already showed; only the tokens changed, from the
   old --ink/--paper/--yellow set to the semantic customer tokens.
   ========================================================================== */

/* ------------------------------ section heads ---------------------------- */
.kicker{
  font:italic 800 .66rem/1 var(--type-ui); color:var(--ink-900);
  letter-spacing:.08em; text-transform:uppercase;
}
.kicker::before{ background:var(--ink-900); height:3px; }
.sec-head{ margin-bottom:clamp(16px,2vw,26px); max-width:none; }
.sec-head h2{
  margin-top:7px; text-transform:uppercase; line-height:1;
  font-size:clamp(1.4rem,1.1rem + 1.5vw,2.25rem);
}
.sec-head h2 .hl{
  display:inline-block; padding:0 .18em; border-radius:6px;
  background:var(--accent-yellow); box-shadow:3px 3px 0 var(--ink-900);
  transform:rotate(-.6deg);
}
.sec-head .lead{ margin-top:9px; max-width:52ch; font-size:.86rem; opacity:.72; }

/* --------------------------------- ticker -------------------------------- */
.ticker{
  background:var(--ink-900); padding:8px 0;
  border-block:var(--border-panel) solid var(--ink-900);
}
.tick-item{ color:var(--surface-white); font-weight:600; font-size:.74rem; }
.tick-item b{ color:var(--accent-yellow); font-weight:800; font-style:italic; }
.tick-item .when{ color:rgba(255,255,255,.5); }
.tick-item .pmk-s{ box-shadow:none; border-color:var(--surface-white); }

/* ------------------------------- how it works ---------------------------- */
/* the rail is a sequence: steps sit close, the section boundary separates */
.how-rail{ gap:clamp(10px,1.3vw,16px); }
.how-step{
  position:relative; padding:15px 15px 16px;
  background:var(--surface-white); border:var(--border-control) solid var(--ink-900);
  border-radius:12px; box-shadow:var(--shadow-small);
}
.how-step::before,.how-step::after{ display:none; }
.how-step:nth-child(odd){ transform:rotate(-.7deg); }
.how-step:nth-child(even){ transform:rotate(.6deg); }
.how-step .n{
  position:absolute; top:-13px; left:12px; width:29px; height:29px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--brand-green); color:var(--ink-900);
  border:var(--border-control) solid var(--ink-900); box-shadow:2px 2px 0 var(--ink-900);
  font:italic 900 .72rem/1 var(--type-ui);
}
.how-step h4{ margin:11px 0 5px; text-transform:uppercase; font-size:.85rem; }
.how-step p{ font-weight:500; font-size:.78rem; line-height:1.5; opacity:.72; }

/* -------------------------------- trust grid ----------------------------- */
.trust-grid{ gap:clamp(10px,1.4vw,15px); }
.trust-cell{
  padding:16px 16px 17px;
  background:var(--surface-white); border:var(--border-control) solid var(--ink-900);
  border-radius:11px; box-shadow:var(--shadow-small);
}
.trust-cell::before{ display:none; }
.trust-cell:nth-child(odd){ transform:rotate(-.5deg); }
.trust-cell:nth-child(even){ transform:rotate(.5deg); }
.trust-cell:first-child{ background:var(--accent-yellow); }
.trust-cell .ic{
  width:34px; height:34px; margin-bottom:11px; border-radius:9px;
  background:var(--surface-white); color:var(--ink-900);
  border:var(--border-control) solid var(--ink-900); box-shadow:2px 2px 0 var(--ink-900);
}
.trust-cell .ic svg{ width:15px; height:15px; }
.trust-cell h4{ margin-bottom:5px; text-transform:uppercase; font-size:.82rem; }
.trust-cell p{ font-weight:500; font-size:.78rem; line-height:1.55; opacity:.72; }

/* --------------------------------- reviews ------------------------------- */
.rev-rail{ gap:11px; }
.rev-card{
  position:relative; flex-basis:min(290px,80vw); padding:15px;
  background:var(--surface-white); border:var(--border-control) solid var(--ink-900);
  border-radius:10px; box-shadow:var(--shadow-small);
}
.rev-rail .rev-card:nth-child(odd){ transform:rotate(-1deg); }
.rev-rail .rev-card:nth-child(even){ transform:rotate(.9deg); }
/* a strip of tape across the top edge */
.rev-card::before{
  content:''; position:absolute; top:-9px; left:50%;
  transform:translateX(-50%) rotate(-2deg); width:64px; height:16px;
  background:rgba(255,235,82,.85); border:2px solid rgba(0,0,0,.28);
}
.rev-card p{ margin:9px 0 12px; font-weight:500; font-size:.79rem; line-height:1.55; opacity:.82; }
.rev-card .badge{ transform:rotate(2deg); }

/* -------------------------------- CTA band ------------------------------- */
.cta-band{
  background:var(--ink-900); color:var(--surface-white);
  border:var(--border-panel) solid var(--ink-900); border-radius:20px;
  box-shadow:var(--shadow-panel); transform:rotate(-.4deg);
}
.cta-band h2{
  text-transform:uppercase; color:var(--surface-white); -webkit-text-stroke:0;
  text-shadow:3px 3px 0 var(--brand-green);
}
.cta-band p{ color:rgba(255,255,255,.68); font-weight:500; font-size:.84rem; }

/* ---------------------------------- blog --------------------------------- */
.blog-card{
  background:var(--surface-white); border:var(--border-panel) solid var(--ink-900);
  border-radius:16px; box-shadow:var(--shadow-small);
}
.blog-card:hover{
  transform:translate(-2px,-3px) rotate(-.4deg); box-shadow:var(--shadow-card);
}

/* FAQ heads read as reference material, so they align left */
#faq .sec-head{ margin-inline:0; text-align:left; }
#faq .sec-head .kicker{ justify-content:flex-start; }

/* ------------------------- catalog grid (cartridges) ---------------------- */
/* Shown on the homepage and on info routes, so it is shared. The geometry is
   unchanged from the approved build; the surface moves off the old cream. */
.prod-grid{ gap:clamp(11px,1.5vw,16px); }
.prod-card{
  padding:0; overflow:visible;
  background:var(--surface-white); border:var(--border-control) solid var(--ink-900);
  border-radius:12px; box-shadow:var(--shadow-small);
}
.prod-card::before{ display:none; }
.prod-card:nth-child(3n+1){ transform:rotate(-.6deg); }
.prod-card:nth-child(3n+2){ transform:rotate(.5deg); }
.prod-card:hover{
  transform:translate(-2px,-4px) rotate(0); box-shadow:var(--shadow-card);
}
.prod-card .top{
  margin:0; padding:9px 13px; border-radius:10px 10px 0 0;
  background:var(--pc); color:#fff;
  border-bottom:var(--border-control) solid var(--ink-900);
}
.prod-card[data-pc="kick"] .top{ color:var(--ink-900); }
.prod-card .top .strong{
  font:italic 900 .8rem/1.2 var(--type-ui); text-transform:uppercase;
  text-shadow:1.5px 1.5px 0 rgba(0,0,0,.45);
}
.prod-card[data-pc="kick"] .top .strong{ text-shadow:none; }
.prod-card .top .xs{ color:inherit; opacity:.9; font-weight:700; }
.prod-card .top .pmk{ background:var(--surface-white) !important; color:var(--ink-900); }
.prod-card .top .chip-pf{
  position:relative; top:-18px; right:-6px; margin-bottom:-16px;
  height:21px; padding-inline:8px; transform:rotate(4deg);
  background:var(--accent-yellow); color:var(--ink-900); border-color:var(--ink-900);
  font:italic 900 .58rem/1 var(--type-ui);
}
.prod-card > p, .prod-card .prices, .prod-card ul,
.prod-card > .btn, .prod-card > span.btn{ margin-inline:13px; }
.prod-card > p{ margin-top:10px; font-weight:500; font-size:.77rem; line-height:1.5; opacity:.72; }
.prod-card .prices{ margin-block:11px; gap:7px; }
.prod-card .pr{
  padding:7px 9px; background:var(--surface-shell);
  border:var(--border-control) solid var(--ink-900); border-radius:8px;
  box-shadow:2px 2px 0 var(--ink-900);
}
.prod-card .pr .t{ font:italic 800 .54rem/1 var(--type-ui); letter-spacing:.05em; opacity:.6; }
/* Premium price chip carries the same gold as every other Premium surface */
.prod-card .pr.prem{ background:var(--premium-gold-soft); border-color:var(--ink-900); }
.prod-card .pr.prem .t{ color:#8A5E00; opacity:1; }
.prod-card .pr .v{ font:italic 900 .9rem/1 var(--type-ui); }
.prod-card ul{ gap:5px; padding-top:10px; }
.prod-card li{ font-weight:600; font-size:.75rem; opacity:.82; }
.prod-card li svg{ color:var(--ink-900); }
/* six full-width yellow CTAs competed with the page's one primary action, so
   the card CTA stays physical but quiet — yellow returns on hover */
.prod-card > span.btn{
  margin-bottom:13px; --h:34px; font-size:.72rem;
  background:var(--surface-shell); border-color:var(--ink-900);
  box-shadow:2px 2px 0 var(--ink-900);
}
.prod-card:hover > span.btn{ background:var(--accent-yellow); box-shadow:3px 3px 0 var(--ink-900); }

.plan-name{
  display:inline-block; margin-top:4px; padding:2px 8px; border-radius:5px;
  background:var(--ink-900); color:var(--accent-yellow);
  font:italic 800 .56rem/1 var(--type-ui); letter-spacing:.06em; text-transform:uppercase;
}
/* fallback states when admin has configured one or zero packages */
.single-pkg{
  display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 12px;
  border:2px dashed rgba(0,0,0,.28); border-radius:9px;
  font-size:.74rem; font-weight:600; opacity:.7;
}
.single-pkg svg{ width:14px; height:14px; }
/* recurring cart lines must never read as one-time */
.chip-rec{
  height:20px; font-size:10px;
  background:var(--premium-gold); color:var(--ink-900); border-color:var(--ink-900);
}

@media (max-width:720px){
  .sec-head .lead{ font-size:.82rem; }
}

/* ----------------------------------- FAQ ---------------------------------- */
/* Used on the homepage and the FAQ info route. Left-aligned like every other
   section — the centred version read as a template. */
.faq{ margin-inline:0; max-width:720px; border-top:none; }
.faq .faq-i:first-child{ margin-top:2px; }
.faq-i{
  margin-bottom:8px; overflow:hidden;
  background:var(--surface-white); border:var(--border-control) solid var(--ink-900);
  border-radius:10px; box-shadow:var(--shadow-small);
}
.faq-i[data-open="true"]{ background:var(--surface-white); }
.faq-q{
  padding:12px 15px; text-transform:none;
  font:italic 900 .85rem/1.3 var(--type-ui);
}
.faq-q:hover{ color:var(--ink-900); background:var(--surface-shell); }
.faq-q .pm{
  width:23px; height:23px; border-radius:7px;
  background:var(--accent-yellow); border:2px solid var(--ink-900);
  box-shadow:2px 2px 0 var(--ink-900);
}
.faq-i[data-open="true"] .pm{ background:var(--ink-900); color:var(--accent-yellow); }
.faq-a p{ padding:0 15px 15px; font-weight:500; font-size:.79rem; line-height:1.6; opacity:.75; }

/* -------------------------- long-form info pages -------------------------- */
.info-head h1{ text-transform:uppercase; }
.prose{ opacity:.85; }
.prose h3{
  color:var(--ink-900); text-transform:uppercase; opacity:1;
  font:italic 900 1.05rem/1.2 var(--type-display);
}

/* ------------------------------ rating stars ------------------------------
   The Rating primitive is rendered on the homepage, the Service Page and the
   Buy Page, so it lives in the shared system rather than in home.css.
   -------------------------------------------------------------------------- */
.sm-stars{ display:flex; align-items:center; gap:4px; }

/* last catalog-card overrides, moved out of site.css */

/* final catalog-card overrides, moved out of site.css */
/* Hierarchy: six full-width yellow CTAs in the catalog were competing with
   the one primary action on the page. The card CTA is a secondary route into
   the same flow, so it stays physical but quiet — yellow returns on hover. */
.prod-card > span.btn{
  background:var(--panel); border-color:var(--ink);
  font-size:.72rem; --h:34px; box-shadow:2px 2px 0 var(--ink);
}
/* the platform strip in each card header is identity, not a label —
   keep the "Hot" flag from shouting louder than the product name */
.prod-card .top .chip-pf{ font-size:.58rem; height:21px; padding-inline:8px; top:-18px; margin-bottom:-16px; }