/* Home + Plans extras, loaded AFTER styles.min.css (never on /faq, which keeps
   its original look on purpose):
   1. the page grid  2. gradient ribbons  3. the stats row
   4. real-reviews layout  5. the arrow-slider button on the two big CTAs */

/* ---------- 1. page grid ---------------------------------------------------
   One overlay that lives inside <main>, so it runs from the top of the page to
   the bottom of the last section and stops there (the footer has no grid). It
   sits BEHIND all content. Eight equal columns
   across the content width, square cells, solid rails on the content edges. */
:root{
  --gw: min(1272px, calc(100vw - 20px));   /* rail-to-rail: the 1176px content column plus 48px of air on each side */
  --grid-rail: rgba(244,231,216,.20);
  --grid-cell: rgba(244,231,216,.075);
  --grid-rule: rgba(244,231,216,.14);
}
body::before, body::after{ display:none }          /* the old dashed grid / rails */

main{ position:relative; isolation:isolate }
main > *{ position:relative; z-index:1 }            /* every section sits above the grid */
/* the faint cells fill ONLY the empty side margins, so no line ever touches or
   runs through a card, image, icon or piece of text; the content area stays clean */
main::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0; left:0; right:0;
  background-image:
    linear-gradient(90deg, var(--grid-cell) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-cell) 1px, transparent 1px);
  background-size:calc(var(--gw) / 8) 100%, 100% calc(var(--gw) / 8);
  background-position:calc(50% - var(--gw) / 2) 0, 0 0;
  background-repeat:repeat-x, repeat-y;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(50% - var(--gw) / 2), transparent calc(50% - var(--gw) / 2), transparent calc(50% + var(--gw) / 2), #000 calc(50% + var(--gw) / 2));
          mask-image:linear-gradient(90deg,#000 calc(50% - var(--gw) / 2), transparent calc(50% - var(--gw) / 2), transparent calc(50% + var(--gw) / 2), #000 calc(50% + var(--gw) / 2));
}
main::after{                                         /* the two solid rails */
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0; left:50%; width:var(--gw); transform:translateX(-50%);
  border-left:1px solid var(--grid-rail); border-right:1px solid var(--grid-rail);
}
/* each section starts on a full-width hairline */
.block{ position:relative }
.block::before{ content:""; position:absolute; pointer-events:none; z-index:4 }
.block::before{
  top:0; left:50%; width:100vw; height:1px;
  transform:translateX(-50%);
  background:var(--grid-rule);
}

.block-head::before{ display:none }                 /* its dashed rule would double the hairline */

/* ---------- 2. ribbons: bigger, with gradients ---------------------------- */
.marquee-cross{ height:224px }
.marquee{ padding:18px 0; border-width:1.5px }
.marquee:first-child{
  top:30px; transform:rotate(-2.2deg);
  background:linear-gradient(90deg,#c97d24 0%,#f0a44a 35%,#e0912f 65%,#c97d24 100%);
  border-color:rgba(255,214,150,.55);
  box-shadow:0 18px 46px -18px rgba(224,145,47,.55);
}
.marquee-rev{
  top:114px; transform:rotate(2.2deg);
  background:linear-gradient(90deg,#120b06 0%,#2e1c0d 40%,#4a2c10 60%,#120b06 100%);
  border-color:rgba(224,145,47,.6);
  box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
}
.marquee-track span{ font-size:clamp(14px,1.5vw,20px); letter-spacing:.18em; gap:34px; padding-right:34px }
.marquee-track span::after{ width:7px; height:7px }
.marquee:first-child .marquee-track span{ color:#1a0f05 }
.marquee:first-child .marquee-track span::after{ background:#1a0f05 }
.marquee-rev .marquee-track span{
  background:linear-gradient(180deg,#fff1dc 0%,#f0a44a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:760px){
  .marquee-cross{ height:160px }
  .marquee{ padding:12px 0 }
  .marquee:first-child{ top:20px }
  .marquee-rev{ top:78px }
}

/* ---------- 3. stats row (real numbers from /api/public/stats) ------------ */
#stats:not(.ready){ display:none }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; --n:clamp(44px,6vw,88px) }
.stat{ position:relative; text-align:center; padding:6px 12px }
.stat-num{
  display:block; font-family:var(--font-ui); font-weight:600;
  font-size:var(--n); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff1dc 0%,#f0a44a 55%,#c97d24 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{
  display:block; margin-top:14px; font-family:var(--font-ui); font-weight:500;
  font-size:clamp(14px,1.25vw,17px); line-height:1.4; color:var(--ink);
}
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:44px }
}

/* ---------- 4. real reviews ------------------------------------------------ */
#reviews:not(:has(.rev-card)){ display:none }       /* no placeholder cards, ever */
.rev-wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; padding:8px 0 }
.rev-wall .rev-card{ width:auto; min-width:0; margin:0; flex:none }

/* ---------- 5. arrow-slider button, only on the two big CTAs -------------- */
:is(.hero .btn-primary, .picker-cta):has(.btn-icon-r){
  position:relative; overflow:hidden;
  padding-left:72px; padding-right:30px;
  transition:background .18s var(--ease), color .18s var(--ease), padding .38s var(--ease), transform .08s var(--ease);
}
:is(.hero .btn-primary, .picker-cta):has(.btn-icon-r):hover{ padding-left:30px; padding-right:72px }
:is(.hero .btn-primary, .picker-cta) .btn-icon-r{
  position:absolute; top:5px; left:5px;
  width:auto; height:calc(100% - 10px); aspect-ratio:1 / 1; flex:none;
  padding:12px; box-sizing:border-box;
  border-radius:10px;
  background:var(--accent-ink); color:var(--jade);
  transition:left .38s var(--ease), transform .38s var(--ease);
}
:is(.hero .btn-primary, .picker-cta):hover .btn-icon-r{ left:calc(100% - 5px); transform:translateX(-100%) }
@media (prefers-reduced-motion:reduce){
  :is(.hero .btn-primary, .picker-cta):has(.btn-icon-r), :is(.hero .btn-primary, .picker-cta) .btn-icon-r{ transition:none }
}

/* phones: no rails or "+" marks, only the faint cells */
@media (max-width:760px){
  :root{ --gw: calc(100vw - 44px) }
  main::before, main::after{ display:none }
}

/* ---------- 6. plans page: tab strip fitted to the grid -------------------- */
/* The section hairline used to sit right on top of the pills and the strip's own
   rule 22px under them. Now the pills sit centred between the two lines, and the
   three are one equal-width cell each. */
.tabs{
  margin-top:0; padding:22px 0; margin-bottom:34px; gap:12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--grid-rule);
}
.tabs::-webkit-scrollbar{ display:none }
.tab{ flex:0 0 auto; min-width:156px; justify-content:center; padding:10px 20px 10px 15px }
@media (max-width:620px){
  .tabs{ gap:8px }
  .tab{ min-width:0; padding:9px 14px 9px 11px }
}

/* "coming soon" card under the plan cards */
.soon-card{
  position:relative; display:flex; align-items:center; gap:16px; margin-top:22px; padding:18px 22px;
  border:1px dashed rgba(224,145,47,.45); border-radius:var(--r-lg); background:rgba(224,145,47,.05); overflow:hidden;
}
.soon-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 35%, rgba(224,145,47,.10) 50%, transparent 65%);
  transform:translateX(-120%); animation:soonSweep 5.5s var(--slow) infinite;
}
@keyframes soonSweep{ 0%{ transform:translateX(-120%) } 35%,100%{ transform:translateX(120%) } }
.soon-ico{
  flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-md);
  border:1px solid rgba(224,145,47,.45); background:rgba(224,145,47,.1); color:var(--jade);
}
.soon-ico svg{ width:22px; height:22px; animation:soonBob 2.8s ease-in-out infinite }
@keyframes soonBob{ 50%{ transform:translateY(-3px) } }
.soon-copy{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.soon-copy b{ font:600 1.02rem/1.3 var(--font-ui); color:var(--ink) }
.soon-copy span{ color:var(--muted); font-size:.93rem; line-height:1.45 }
.soon-badge{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 11px;
  border:1px solid rgba(224,145,47,.55); border-radius:var(--r-pill); background:rgba(224,145,47,.12); color:var(--jade);
  font:600 11px/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.soon-badge i{ width:7px; height:7px; border-radius:50%; background:var(--jade); animation:pulse 2.4s var(--ease) infinite }
@media (max-width:620px){
  .soon-card{ flex-wrap:wrap; padding:16px }
  .soon-badge{ margin-left:62px }
}
@media (prefers-reduced-motion:reduce){ .soon-card::after, .soon-ico svg, .soon-badge i{ animation:none } }

/* cards must hide the grid behind them, not let it show through */
.rev-card{ background:#171310 }

/* ---------- hero melts into the page ----------------------------------------
   The picture used to stop on a hard edge just above the ribbons. Fade it out over its last stretch
   (the page colour is already underneath), so it reads as an overlay, not a stacked block. */
.hero-bg{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 320px),rgba(0,0,0,.55) calc(100% - 150px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 320px),rgba(0,0,0,.55) calc(100% - 150px),transparent 100%);
}
@media (max-width:720px){
  .hero-bg{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent 100%);
  }
}