/* Power BI review - page-specific styles.
   The shell comes from ../css/styles.css and .page-head / .prose from ../insights/insights.css.
   This file adds the two priced offers, the steps and the findings list. */

.offers{display:grid;gap:var(--s5);padding-bottom:var(--s8);}
.offer{position:relative;display:flex;flex-direction:column;gap:var(--s4);background:var(--bg);
  border:1px solid var(--line);border-top:3px solid var(--ink);padding:var(--s6);}
.offer.is-primary{border-top-color:var(--accent);box-shadow:var(--shadow-lg);}
.offer .num{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.offer h2{font:700 1.75rem/1.15 var(--display);letter-spacing:-0.03em;color:var(--ink);}
.offer .price{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;}
.offer .price b{font:800 2.75rem/1 var(--font);letter-spacing:-0.05em;color:var(--ink);}
.offer .price span{font:500 0.75rem/1.4 var(--mono);color:var(--ink-3);}
.offer p{margin:0;font-size:0.9375rem;line-height:1.65;color:var(--ink-2);}
.offer ul{display:grid;gap:var(--s2);margin:var(--s2) 0;}
.offer li{font-size:0.9375rem;line-height:1.55;color:var(--ink-2);padding-left:1.3em;position:relative;}
.offer li::before{content:"";position:absolute;left:0;top:0.55em;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.offer .terms{font:500 0.75rem/1.5 var(--mono);color:var(--ink-3);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:auto;}
.offer .button{align-self:flex-start;}
/* Secondary offer: same shape as .button, reads on either theme. */
.button--outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.button--outline:hover{box-shadow:inset 0 0 0 1.5px var(--ink),0 8px 0 rgba(10,9,23,0.18);}
.badge{position:absolute;top:calc(var(--s4) * -1);right:var(--s5);background:var(--accent);color:#241C00;
  font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:3px;}

.band{background:var(--bg-2);border-block:1px solid var(--line);padding:var(--s9) 0;}
.band .h2{margin:var(--s3) 0 var(--s6);max-width:20ch;}

.steps{display:grid;gap:var(--s5);counter-reset:step;}
.step{border-top:1px solid var(--line-2);padding-top:var(--s4);counter-increment:step;}
.step::before{content:"0" counter(step);display:block;font:500 0.75rem/1 var(--mono);color:var(--accent-text);margin-bottom:var(--s3);}
.step h3{font:700 1rem/1.3 var(--font);color:var(--ink);margin-bottom:var(--s2);}
.step p{margin:0;font-size:0.9375rem;line-height:1.6;color:var(--ink-2);}

.findings{padding:var(--s9) 0 var(--s7);}
.findings .h2{margin:var(--s3) 0 var(--s4);max-width:22ch;}
.findings > .wrap > .lede{max-width:62ch;margin-bottom:var(--s6);}
.finding-list{display:grid;gap:var(--s5);}
.finding{border:1px solid var(--line);background:var(--bg);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);}
.finding .num{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.finding h3{font:700 1.125rem/1.3 var(--display);color:var(--ink);}
.finding p{margin:0;font-size:0.9375rem;line-height:1.6;color:var(--ink-2);}
.finding .link-arrow{margin-top:auto;font-size:13px;}

.faq{padding-bottom:var(--s9);}
/* The free checklist, for readers not ready to pay: sits under the priced offers. */
.checklist-alt{margin:calc(var(--s8) * -1 + var(--s5)) auto var(--s8);}
.faq .prose{padding-bottom:0;}

@media (min-width:760px){
  .offers{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .finding-list{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(4,1fr);}
}

/* ---------- scroll-driven story (js/story.js) ----------
   .rep's data-stage (1 to 4) is set by the step crossing mid-screen. No data-stage (no JS) is
   the final, fixed state. Transitions vanish under reduced motion via the global rule. */
.story{padding:var(--s9) 0 var(--s8);}
.story .h2{margin:var(--s3) 0 var(--s6);max-width:20ch;}
.story-grid{display:grid;gap:var(--s5);}
.story-stage{position:sticky;top:96px;z-index:2;}
.rep{position:relative;background:#F8F9F5;color:#0A0917;border-radius:var(--r);padding:18px;
  box-shadow:12px 14px 0 rgba(201,162,39,0.92);display:grid;gap:12px;max-width:560px;}
.rep-bar{display:flex;justify-content:space-between;font:700 13px/1 var(--font);padding-bottom:12px;border-bottom:1px solid rgba(10,9,23,0.15);}
.rep-tag{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#5D6C72;}
.rep-kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;}
.rep-kpi{position:relative;background:#fff;border:1px solid rgba(10,9,23,0.1);border-radius:6px;padding:10px 12px;}
.rep-kpi small,.rep-chart small{display:block;font:600 10px/1.2 var(--font);color:#5D6C72;}
.rep-kpi b{position:relative;display:block;height:30px;margin-top:6px;font:600 26px/30px var(--display);letter-spacing:-0.02em;}
.rep-kpi b span{position:absolute;left:0;top:0;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.rep-kpi .v-old{opacity:0;transform:translateY(-8px);}
.rep-kpi .v-new{opacity:1;color:#168454;}
.rep-chart{position:relative;background:#fff;border:1px solid rgba(10,9,23,0.1);border-radius:6px;padding:10px 12px;}
.rep-bars{display:flex;align-items:flex-end;gap:10px;height:96px;margin-top:8px;}
.rep-bars i{flex:1;height:var(--h);background:#C9D3DF;border-radius:2px 2px 0 0;transition:background .5s var(--ease);}
.rep-table{position:relative;background:#fff;border:1px solid rgba(10,9,23,0.1);border-radius:6px;padding:4px 12px;
  font:600 11px/1 var(--font);font-variant-numeric:tabular-nums;color:#4A5768;}
.rep-table div{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:7px 0;border-top:1px solid rgba(10,9,23,0.08);}
.rep-table div:first-child{border-top:0;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5D6C72;}
.rep-table div span:not(:first-child){text-align:right;}
/* flags: hidden until their stage, red while open, green once fixed */
.flag{position:absolute;right:10px;top:-11px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;
  padding:5px 8px 5px 18px;border-radius:12px;color:#fff;background:#168454;box-shadow:0 4px 10px rgba(10,9,23,0.18);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);}
.flag::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;}
.flag .f-bad{display:none;}
.flag.f3{top:auto;bottom:-11px;}
.rep-stamp{position:absolute;right:22px;bottom:22px;transform:rotate(-8deg);border:3px solid #C9A227;border-radius:8px;padding:6px 12px;
  background:rgba(248,249,245,0.92);font:700 18px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#8A6D14;
  transition:opacity .45s var(--ease),transform .45s var(--ease);}
/* stages 1 to 3: values not yet fixed */
.rep[data-stage="1"] .v-old,.rep[data-stage="2"] .v-old,.rep[data-stage="3"] .v-old{opacity:1;transform:none;}
.rep[data-stage="1"] .v-new,.rep[data-stage="2"] .v-new,.rep[data-stage="3"] .v-new{opacity:0;transform:translateY(8px);}
.rep[data-stage="1"] .rep-stamp,.rep[data-stage="2"] .rep-stamp,.rep[data-stage="3"] .rep-stamp{opacity:0;transform:rotate(-8deg) scale(.6);}
.rep[data-stage="1"] .flag,.rep[data-stage="2"] .f2,.rep[data-stage="2"] .f3{opacity:0;transform:translateY(6px) scale(.8);}
.rep[data-stage="2"] .flag,.rep[data-stage="3"] .flag{background:#B3261E;}
.rep[data-stage="2"] .flag .f-bad,.rep[data-stage="3"] .flag .f-bad{display:inline;}
.rep[data-stage="2"] .flag .f-ok,.rep[data-stage="3"] .flag .f-ok{display:none;}
.rep[data-stage="2"] .k1 .v-old,.rep[data-stage="3"] .k1 .v-old{color:#B3261E;}
.rep[data-stage="3"] .rep-bars i{background:#E7B4AE;}
/* steps */
.story-steps{list-style:none;margin:0;padding:0;}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:var(--s5) 0;
  opacity:.4;transition:opacity .4s var(--ease);}
.story-step.is-active{opacity:1;}
.story-step .num{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);}
.story-step h3{margin:var(--s3) 0 var(--s2);font:700 clamp(22px,2.4vw,30px)/1.2 var(--display);letter-spacing:-0.02em;color:var(--ink);}
.story-step p{margin:0;max-width:44ch;font-size:16px;line-height:1.7;color:var(--ink-2);}
.story-note{margin:var(--s4) 0 0;font-size:14px;color:var(--ink-3);}
@media (max-width:999px){
  .story-stage{top:90px;}
  .rep{max-width:100%;}
  .rep-table{display:none;}
  .rep-bars{height:64px;}
  .story-step{min-height:58vh;background:var(--bg);}
}
@media (min-width:1000px){
  .story-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:var(--s8);align-items:start;}
}