/* ============================================================
   Methodology page — visual rubric layout.
   Loaded conditionally on the `methodology` page only.
   Tokens come from style.css :root.
   ============================================================ */

/* --- Hero ------------------------------------------------- */
.meth-hero{ padding-bottom:var(--sp-5); position:relative; }
.meth-hero h1{ max-width:none; margin-top:var(--sp-3); }
.meth-hero .lede{ max-width:62ch; }

.meth-hero-art{
  position:relative;
  margin-top:var(--sp-5);
  max-width:760px;
  filter:drop-shadow(0 30px 60px rgba(255,46,136,.18)) drop-shadow(0 12px 24px rgba(0,213,229,.12));
}
.meth-hero-art svg{ width:100%; height:auto; display:block; }

/* Hero stats strip */
.meth-stats{
  margin-top:var(--sp-5);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);
  max-width:920px;
}
.meth-stat{
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:var(--sp-3);
  text-align:left;
  position:relative;
  overflow:hidden;
}
.meth-stat::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--grad-vegas);
  border-radius:4px 0 0 4px;
}
.meth-stat-num{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2rem, 4.5vw, 2.8rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
  line-height:1;
}
.meth-stat-num sup{
  font-size:.45em;
  font-weight:700;
  color:var(--ink-mute);
  margin-left:.15em;
  font-family:var(--font);
}
.meth-stat-lbl{
  display:block;
  margin-top:.4rem;
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-mute);
  font-weight:700;
}
@media(max-width:780px){ .meth-stats{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .meth-stats{ grid-template-columns:1fr; } }

/* --- Section heads --------------------------------------- */
.meth-section-head{ max-width:780px; margin-bottom:var(--sp-5); }
.meth-section-head h2{ margin-top:.4rem; margin-bottom:var(--sp-2); }

/* --- Score-band scale ------------------------------------ */
.meth-scale{
  position:relative;
  margin:var(--sp-5) 0 var(--sp-5);
  padding:0 .5rem;
}
.meth-scale-bar{
  height:14px;
  border-radius:var(--rad-pill);
  background:linear-gradient(90deg,
    #E53860 0%,
    #FF7A1A 18%,
    #F5B921 38%,
    #C7F23C 60%,
    #1FB570 78%,
    #00D5E5 100%);
  box-shadow:0 6px 18px -6px rgba(21,19,28,.25), inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;
  /* Reveal: gradient slides in from left when in view */
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(.4,.7,.3,1) .2s;
}
.meth-scale.is-in .meth-scale-bar{ clip-path:inset(0 0 0 0); }

.meth-scale-marks{ position:relative; height:36px; margin-top:.4rem; }
.meth-scale-mark{
  position:absolute;
  top:0; left:var(--p);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.meth-scale-tick{
  width:2px; height:8px;
  background:var(--ink-mute);
  border-radius:2px;
  opacity:.5;
}
.meth-scale-num{
  font-family:var(--serif);
  font-weight:700;
  font-size:.95rem;
  color:var(--ink-soft);
}

/* Score band cards grid */
.meth-bands{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:var(--sp-2);
}
.meth-band{
  background:#fff;
  border-radius:var(--rad);
  padding:var(--sp-3) var(--sp-2);
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  text-align:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease, box-shadow .25s ease;
}
.meth-bands.is-in .meth-band{ opacity:1; transform:translateY(0); }
.meth-bands.is-in .meth-band:nth-child(1){ transition-delay:.05s; }
.meth-bands.is-in .meth-band:nth-child(2){ transition-delay:.10s; }
.meth-bands.is-in .meth-band:nth-child(3){ transition-delay:.15s; }
.meth-bands.is-in .meth-band:nth-child(4){ transition-delay:.20s; }
.meth-bands.is-in .meth-band:nth-child(5){ transition-delay:.25s; }
.meth-bands.is-in .meth-band:nth-child(6){ transition-delay:.30s; }
.meth-bands.is-in .meth-band:nth-child(7){ transition-delay:.35s; }
.meth-band:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.meth-band::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:var(--band-grad, var(--grad-vegas));
}
.meth-band.b-xx{ --band-grad:var(--grad-cyan); }
.meth-band.b-x { --band-grad:linear-gradient(135deg,#1FB570 0%,#C7F23C 100%); }
.meth-band.b-g { --band-grad:linear-gradient(135deg,#C7F23C 0%,#F5B921 100%); }
.meth-band.b-m { --band-grad:var(--grad-gold); }
.meth-band.b-a { --band-grad:linear-gradient(135deg,#F5B921 0%,#FF7A1A 100%); }
.meth-band.b-b { --band-grad:linear-gradient(135deg,#FF7A1A 0%,#E53860 100%); }
.meth-band.b-p { --band-grad:linear-gradient(135deg,#E53860 0%,#8B3FFF 100%); }

.meth-band-range{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1;
  margin-top:.4rem;
}
.meth-band-label{
  display:block;
  margin:.5rem 0 .4rem;
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink-soft);
  font-weight:800;
}
.meth-band-desc{
  font-size:.83rem;
  line-height:1.45;
  color:var(--ink-mute);
  margin:0;
}

@media(max-width:1100px){
  .meth-bands{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:680px){
  .meth-bands{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:420px){
  .meth-bands{ grid-template-columns:1fr; }
  .meth-scale-marks{ display:none; }
  .meth-scale-bar{ height:18px; }
}

/* --- 8 parameters grid ----------------------------------- */
.meth-params{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);
}
.meth-param{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity:0;
  transform:translateY(16px);
}
.meth-params.is-in .meth-param{ opacity:1; transform:translateY(0); transition:opacity .55s ease var(--d, 0s), transform .55s ease var(--d, 0s), box-shadow .25s ease, border-color .25s ease; }
.meth-params.is-in .meth-param:nth-child(1){ --d:.04s; }
.meth-params.is-in .meth-param:nth-child(2){ --d:.10s; }
.meth-params.is-in .meth-param:nth-child(3){ --d:.16s; }
.meth-params.is-in .meth-param:nth-child(4){ --d:.22s; }
.meth-params.is-in .meth-param:nth-child(5){ --d:.28s; }
.meth-params.is-in .meth-param:nth-child(6){ --d:.34s; }
.meth-params.is-in .meth-param:nth-child(7){ --d:.40s; }
.meth-params.is-in .meth-param:nth-child(8){ --d:.46s; }

.meth-param::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:var(--p-grad, var(--grad-vegas));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.meth-param:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.meth-param:hover::before{ opacity:1; }

.meth-param--games  { --p-grad:var(--grad-hot);  --p-color:var(--hot); }
.meth-param--gift   { --p-grad:var(--grad-gold); --p-color:var(--gold-deep); }
.meth-param--wallet { --p-grad:var(--grad-lime); --p-color:var(--lime-deep); }
.meth-param--phone  { --p-grad:var(--grad-cyan); --p-color:var(--cyan-deep); }
.meth-param--chat   { --p-grad:linear-gradient(135deg,#8B3FFF 0%,#3046FF 100%); --p-color:var(--royal); }
.meth-param--shield { --p-grad:var(--grad-gold); --p-color:var(--gold-deep); }
.meth-param--palette{ --p-grad:var(--grad-hot);  --p-color:var(--hot); }
.meth-param--scale  { --p-grad:var(--grad-cyan); --p-color:var(--cyan-deep); }

.meth-param-icon{
  width:54px; height:54px;
  border-radius:14px;
  background:var(--p-grad);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  margin-bottom:var(--sp-2);
  box-shadow:0 8px 20px -10px var(--p-color);
}
.meth-param--gift .meth-param-icon,
.meth-param--wallet .meth-param-icon,
.meth-param--shield .meth-param-icon{
  color:#3D2A00; /* darker glyph on bright gold/lime gradient */
}
.meth-param-name{
  font-family:var(--serif);
  font-size:1.18rem;
  margin:0 0 .55rem;
  letter-spacing:-.015em;
}
.meth-param-weight{ margin-bottom:var(--sp-2); }
.meth-param-weight-pill{
  display:inline-block;
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--ink-soft);
  background:var(--paper-2);
  padding:.25rem .55rem;
  border-radius:var(--rad-pill);
  margin-bottom:.5rem;
}
.meth-param-bar{
  height:6px;
  background:var(--paper-3);
  border-radius:6px;
  overflow:hidden;
}
.meth-param-bar > span{
  display:block;
  height:100%;
  width:0%;
  background:var(--p-grad);
  border-radius:6px;
  transition:width 1s cubic-bezier(.4,.7,.3,1) .3s;
}
.meth-params.is-in .meth-param-bar > span{ width:var(--w); }
.meth-param-desc{
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.meth-params-foot{ margin-top:var(--sp-4); max-width:60ch; }

@media(max-width:1100px){ .meth-params{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:780px){ .meth-params{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .meth-params{ grid-template-columns:1fr; } }

/* --- 5-step stepper -------------------------------------- */
.meth-stepper{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--sp-3);
  position:relative;
  counter-reset:step;
}
/* Connector line — only horizontal between nodes */
.meth-stepper::before{
  content:"";
  position:absolute;
  top:38px;
  left:10%;
  right:10%;
  height:3px;
  background:linear-gradient(90deg,#FF2E88,#FF7A1A,#F5B921,#C7F23C,#00D5E5);
  border-radius:3px;
  z-index:0;
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.4s cubic-bezier(.4,.7,.3,1) .25s;
}
.meth-stepper.is-in::before{ transform:scaleX(1); }

.meth-step{
  position:relative;
  text-align:center;
  z-index:1;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease calc(var(--i) * .12s + .5s), transform .55s ease calc(var(--i) * .12s + .5s);
}
.meth-stepper.is-in .meth-step{ opacity:1; transform:translateY(0); }

.meth-step-node{
  position:relative;
  width:76px; height:76px;
  margin:0 auto var(--sp-2);
  border-radius:50%;
  background:#fff;
  border:3px solid #fff;
  box-shadow:0 0 0 3px rgba(255,46,136,.0), 0 10px 28px -10px rgba(21,19,28,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  /* Vegas gradient via outline ring (drawn with conic? simpler: linear) */
  background-image:linear-gradient(#fff,#fff), var(--grad-vegas);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  border:3px solid transparent;
}
.meth-step:nth-child(1) .meth-step-node{ color:var(--hot-deep); }
.meth-step:nth-child(2) .meth-step-node{ color:var(--orange); }
.meth-step:nth-child(3) .meth-step-node{ color:var(--gold-deep); }
.meth-step:nth-child(4) .meth-step-node{ color:var(--lime-deep); }
.meth-step:nth-child(5) .meth-step-node{ color:var(--cyan-deep); }
.meth-step-num{
  position:absolute;
  top:-6px; right:-6px;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-family:var(--serif);
  font-weight:800;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(21,19,28,.3);
}
.meth-step-icon{ display:inline-flex; }
.meth-step-title{
  font-family:var(--serif);
  font-size:1.05rem;
  margin:.4rem 0 .4rem;
  letter-spacing:-.01em;
}
.meth-step-desc{
  font-size:.85rem;
  color:var(--ink-mute);
  line-height:1.5;
  margin:0;
  max-width:24ch;
  margin-inline:auto;
}

@media(max-width:880px){
  .meth-stepper{
    grid-template-columns:1fr;
    gap:var(--sp-4);
  }
  .meth-stepper::before{
    left:38px; right:auto; top:10%; bottom:10%;
    width:3px; height:auto;
    background:linear-gradient(180deg,#FF2E88,#FF7A1A,#F5B921,#C7F23C,#00D5E5);
    transform-origin:top center;
    transform:scaleY(0);
  }
  .meth-stepper.is-in::before{ transform:scaleY(1); }
  .meth-step{
    display:grid;
    grid-template-columns:76px 1fr;
    gap:var(--sp-3);
    align-items:start;
    text-align:left;
  }
  .meth-step-node{ margin:0; }
  .meth-step-desc{ max-width:none; margin:.3rem 0 0; }
}

/* --- Paid-placement transparency block ------------------- */
.meth-paid-block{ padding-top:var(--sp-5); }
.meth-paid{
  position:relative;
  border-radius:calc(var(--rad) + 6px);
  padding:var(--sp-5) var(--sp-4);
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(0,213,229,.18), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(255,46,136,.16), transparent 60%),
    linear-gradient(135deg, #FFF8EE 0%, #FFFFFF 50%, #F0FBFC 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease, transform .7s ease;
}
.meth-paid.is-in,
.meth-paid-block .meth-paid.is-in{ opacity:1; transform:translateY(0); }
.meth-paid::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255,46,136,.5) 0%, transparent 60%),
    radial-gradient(2px 2px at 88% 78%, rgba(0,213,229,.5) 0%, transparent 60%),
    radial-gradient(2px 2px at 70% 18%, rgba(199,242,60,.6) 0%, transparent 60%),
    radial-gradient(2px 2px at 22% 80%, rgba(245,185,33,.6) 0%, transparent 60%);
  pointer-events:none;
}

.meth-paid-head{ text-align:center; max-width:760px; margin:0 auto var(--sp-4); position:relative; }
.meth-paid-badge{
  display:inline-block;
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-weight:800;
  background:var(--ink);
  color:#fff;
  padding:.45rem 1rem;
  border-radius:var(--rad-pill);
  box-shadow:0 8px 24px -8px rgba(21,19,28,.5);
}
.meth-paid-head h2{ margin-top:.8rem; }
.meth-paid-tag{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  color:var(--ink-soft);
  margin-top:.5rem;
}

.meth-paid-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
  position:relative;
}
.meth-paid-card{
  background:#fff;
  border-radius:var(--rad);
  padding:var(--sp-4);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  position:relative;
}
.meth-paid-card-icon{
  width:64px; height:64px;
  border-radius:18px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:var(--sp-3);
}
.meth-paid-card--paid .meth-paid-card-icon{
  background:var(--grad-hot); color:#fff;
  box-shadow:0 10px 26px -10px var(--hot);
}
.meth-paid-card--editorial .meth-paid-card-icon{
  background:var(--grad-cyan); color:#fff;
  box-shadow:0 10px 26px -10px var(--cyan-deep);
}
.meth-paid-pill{
  display:inline-block;
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:800;
  padding:.3rem .7rem;
  border-radius:var(--rad-pill);
  background:var(--grad-hot);
  color:#fff;
  margin-bottom:.8rem;
}
.meth-paid-pill--editorial{ background:var(--grad-cyan); }
.meth-paid-card h3{
  font-family:var(--serif);
  font-size:1.4rem;
  margin:0 0 var(--sp-2);
  letter-spacing:-.02em;
}
.meth-paid-card ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.meth-paid-card li{
  position:relative;
  padding-left:1.6rem;
  color:var(--ink-soft);
  line-height:1.55;
}
.meth-paid-card--paid li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  width:1.2rem; height:1.2rem;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  color:var(--hot-deep);
}
.meth-paid-card--editorial li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  width:1.2rem; height:1.2rem;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  color:var(--cyan-deep);
}

.meth-paid-foot{
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px dashed var(--line);
  position:relative;
}
.meth-paid-foot p{
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:78ch;
  margin:0 auto;
  text-align:center;
}

@media(max-width:780px){
  .meth-paid-grid{ grid-template-columns:1fr; }
  .meth-paid{ padding:var(--sp-4) var(--sp-3); }
}

/* --- Editorial quote ------------------------------------- */
.meth-quote-block{ padding-top:var(--sp-5); }
.meth-quote{
  max-width:880px;
  margin:0 auto;
  text-align:center;
  position:relative;
  padding:var(--sp-4) var(--sp-3);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease, transform .7s ease;
}
.meth-quote.is-in{ opacity:1; transform:translateY(0); }
.meth-quote-mark{
  display:inline-block;
  color:var(--hot);
  margin-bottom:var(--sp-2);
  opacity:.85;
}
.meth-quote-mark svg{ display:inline-block; }
.meth-quote blockquote{
  font-family:var(--serif);
  font-size:clamp(1.4rem, 3vw, 2rem);
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 var(--sp-3);
  font-variation-settings:"opsz" 96,"SOFT" 50;
}
.meth-quote blockquote em{
  font-style:italic;
  font-variation-settings:"opsz" 96,"SOFT" 100;
  background:var(--grad-vegas);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.meth-quote figcaption{
  font-size:var(--t-sm);
  color:var(--ink-mute);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:700;
}

/* --- Final CTA ------------------------------------------- */
.meth-cta-block{ padding-bottom:var(--sp-7); }
.meth-cta{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--sp-4);
  align-items:center;
  background:linear-gradient(135deg, #fff 0%, var(--paper-2) 100%);
  padding:var(--sp-5) var(--sp-4);
  border-radius:var(--rad);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.meth-cta::before{
  content:"";
  position:absolute; right:-100px; top:-80px;
  width:300px; height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,46,136,.18), transparent 65%);
  pointer-events:none;
}
.meth-cta h2{ margin-bottom:var(--sp-2); }
.meth-cta-actions{
  display:flex; gap:.8rem; flex-wrap:wrap;
  justify-content:flex-end;
  position:relative;
}
.meth-version{ margin-top:var(--sp-3); text-align:center; font-size:var(--t-sm); }

@media(max-width:780px){
  .meth-cta{ grid-template-columns:1fr; padding:var(--sp-4) var(--sp-3); }
  .meth-cta-actions{ justify-content:flex-start; }
}

/* --- Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .meth-scale-bar{ clip-path:inset(0 0 0 0); transition:none; }
  .meth-stepper::before{ transform:scaleX(1) scaleY(1) !important; transition:none; }
  .meth-band, .meth-param, .meth-step, .meth-paid, .meth-quote{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .meth-param-bar > span{ width:var(--w); transition:none; }
}