/* styles.css */

/* ---------- Design tokens ---------- */
:root{
  --paper: #fbfaf7;
  --paper-2: #f7f4ef;
  --ink: #1f2937;

  --teal: #5bb6b0;
  --coral: #ff7f6a;
  --mustard: #f2b77a;
  --peri: #7b8fe4;

  --line: rgba(31,41,55,.18);
  --line-strong: rgba(31,41,55,.32);

  --shadow: 0 10px 30px rgba(31,41,55,.08);
  --radius: 18px;

  --max: 1040px;

  --step--1: clamp(.92rem, .85rem + .25vw, 1.02rem);
  --step-0: clamp(1.02rem, .95rem + .35vw, 1.14rem);
  --step-1: clamp(1.18rem, 1.08rem + .55vw, 1.42rem);
  --step-2: clamp(1.42rem, 1.25rem + .85vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.25vw, 2.55rem);
  --step-4: clamp(2.35rem, 1.95rem + 1.9vw, 3.25rem);

  --lh: 1.55;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  color: var(--ink);
  background: radial-gradient(900px 500px at 20% 0%, rgba(91,182,176,.12), transparent 60%),
              radial-gradient(700px 380px at 90% 16%, rgba(123,143,228,.10), transparent 55%),
              radial-gradient(650px 420px at 10% 70%, rgba(242,183,122,.12), transparent 60%),
              linear-gradient(180deg, var(--paper), var(--paper-2));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: var(--lh);
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

a{ color: inherit; }
strong{ font-weight: 750; }
p{ margin: 0 0 .85rem; }
ul{ margin: .7rem 0 0; padding-left: 1.1rem; }
li{ margin: .35rem 0; }

::selection{
  background: rgba(255,127,106,.25);
}

/* ---------- Accessibility ---------- */
.skip-link{
  position: absolute;
  top: .75rem;
  left: .75rem;
  transform: translateY(-150%);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .5rem .8rem;
  box-shadow: var(--shadow);
  z-index: 50;
}
.skip-link:focus{ transform: translateY(0); outline: none; }

/* ---------- Layout wrappers ---------- */
.page{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.2rem 0 2.8rem;
}

.svg-panel{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ---------- Hero ---------- */
.hero{
  padding: 1.4rem 0 1.2rem;
  border-bottom: 1px solid var(--line);
}

.hero-inner{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: start;
}

.kicker{
  display: inline-block;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(31,41,55,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .65rem;
  margin: 0 0 .7rem;
}

.hero h1{
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .4rem;
}

.subhead{
  font-size: var(--step-1);
  opacity: .9;
  margin: 0 0 1rem;
  max-width: 34ch;
}

.hero-badges{
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-top: .9rem;
}

.badge{
  background: linear-gradient(180deg, rgba(251,250,247,.9), rgba(247,244,239,.9));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .75rem .85rem;
  box-shadow: 0 10px 20px rgba(31,41,55,.06);
}
.badge-top{
  display: block;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75;
  margin-bottom: .25rem;
}
.badge-main{
  display: block;
  font-size: var(--step-0);
  font-weight: 720;
}

.hero-figure{
  margin: 0;
  background: rgba(251,250,247,.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-figure img{
  width: 100%;
  height: auto;
}
.caption{
  font-size: .95rem;
  padding: .75rem .9rem;
  opacity: .88;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(247,244,239,.65), rgba(251,250,247,.65));
}

.share-titles{
  width: min(var(--max), calc(100% - 2rem));
  margin: 1.1rem auto 0;
  background: linear-gradient(180deg, rgba(91,182,176,.10), rgba(251,250,247,.55));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1rem .9rem;
  box-shadow: 0 8px 20px rgba(31,41,55,.05);
}
.share-titles h2{
  margin: 0 0 .5rem;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}
.title-stack{
  margin: 0;
  padding-left: 1.15rem;
  columns: 1;
  column-gap: 1.3rem;
}
.title-stack li{
  break-inside: avoid;
  margin: .35rem 0;
}

/* ---------- Intro ---------- */
.intro{
  padding-top: 1.4rem;
}

.intro-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.intro-text{
  background: rgba(251,250,247,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.05rem .95rem;
  box-shadow: 0 10px 22px rgba(31,41,55,.05);
}
.intro-text h2{
  margin: 0 0 .55rem;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
}
.lede{
  font-size: var(--step-0);
  opacity: .95;
  max-width: 62ch;
}
.intro-bullets{
  margin-top: .7rem;
  padding-left: 1.15rem;
}
.note{
  margin-top: .8rem;
  font-size: var(--step--1);
  opacity: .78;
  border-top: 1px dashed var(--line-strong);
  padding-top: .7rem;
}

.intro-visual{
  background: rgba(251,250,247,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem;
  box-shadow: 0 10px 22px rgba(31,41,55,.05);
}

/* ---------- Micro-stats ---------- */
.microstats{
  margin-top: 1rem;
  background: linear-gradient(180deg, rgba(242,183,122,.13), rgba(251,250,247,.62));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem;
  box-shadow: 0 12px 28px rgba(31,41,55,.06);
}
.microstats h2{
  margin: 0 0 .8rem;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
}

.micro-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.stat{
  background: rgba(251,250,247,.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .75rem .85rem;
}
.stat-top{
  margin: 0 0 .25rem;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .72;
}
.stat-main{
  margin: 0;
  font-size: var(--step-0);
}

.mini-chart{
  margin-top: .9rem;
}

/* ---------- Stages section ---------- */
.stages{
  margin-top: 1.4rem;
}

.section-title{
  font-size: var(--step-3);
  margin: 0 0 .8rem;
  letter-spacing: -0.02em;
}

.stage{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: rgba(251,250,247,.72);
  box-shadow: 0 14px 34px rgba(31,41,55,.06);
  padding: 1.05rem;
  margin: 0 0 1rem;
  position: relative;
  overflow: hidden;
}

/* Soft wash bands per stage */
.stage::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(520px 240px at 10% 15%, rgba(91,182,176,.12), transparent 60%),
    radial-gradient(420px 220px at 90% 10%, rgba(123,143,228,.10), transparent 58%),
    radial-gradient(420px 220px at 18% 86%, rgba(242,183,122,.12), transparent 60%);
  pointer-events:none;
  opacity: .9;
}
.stage-1::before{ background:
  radial-gradient(520px 240px at 18% 20%, rgba(255,127,106,.16), transparent 60%),
  radial-gradient(420px 220px at 85% 18%, rgba(123,143,228,.10), transparent 58%); }
.stage-2::before{ background:
  radial-gradient(520px 240px at 20% 18%, rgba(242,183,122,.18), transparent 62%),
  radial-gradient(420px 220px at 85% 18%, rgba(91,182,176,.10), transparent 58%); }
.stage-3::before{ background:
  radial-gradient(520px 240px at 18% 18%, rgba(91,182,176,.14), transparent 62%),
  radial-gradient(420px 220px at 86% 14%, rgba(242,183,122,.10), transparent 58%); }
.stage-4::before{ background:
  radial-gradient(520px 240px at 20% 16%, rgba(255,127,106,.15), transparent 62%),
  radial-gradient(420px 220px at 86% 14%, rgba(123,143,228,.10), transparent 58%); }
.stage-5::before{ background:
  radial-gradient(520px 240px at 18% 16%, rgba(123,143,228,.12), transparent 62%),
  radial-gradient(420px 220px at 86% 14%, rgba(31,41,55,.06), transparent 58%); }
.stage-6::before{ background:
  radial-gradient(520px 240px at 18% 16%, rgba(91,182,176,.12), transparent 62%),
  radial-gradient(420px 220px at 86% 14%, rgba(123,143,228,.10), transparent 58%); }
.stage-7::before{ background:
  radial-gradient(520px 240px at 18% 16%, rgba(242,183,122,.14), transparent 62%),
  radial-gradient(420px 220px at 86% 14%, rgba(31,41,55,.06), transparent 58%); }
.stage-8::before{ background:
  radial-gradient(520px 240px at 18% 16%, rgba(255,127,106,.12), transparent 62%),
  radial-gradient(520px 240px at 84% 18%, rgba(242,183,122,.12), transparent 62%),
  radial-gradient(520px 240px at 52% 10%, rgba(91,182,176,.10), transparent 62%); }

.stage-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  align-items: start;
}

.stage-text h3{
  margin: 0 0 .35rem;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.stage-num{
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: rgba(251,250,247,.9);
  box-shadow: 0 10px 18px rgba(31,41,55,.06);
  font-weight: 800;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.stage-headline{
  font-size: var(--step-1);
  margin: 0 0 .2rem;
  font-weight: 760;
}
.stage-emotion{
  margin: 0 0 .7rem;
  opacity: .86;
  font-size: var(--step-0);
}

.callouts{
  margin: .5rem 0 0;
  padding-left: 1.15rem;
}
.callouts li{
  margin: .38rem 0;
}

.impact{
  margin-top: .85rem;
  background: rgba(251,250,247,.86);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .7rem .75rem;
}
.impact-line{
  margin: 0 0 .6rem;
  font-size: var(--step--1);
  opacity: .95;
}

.impact-meter{
  position: relative;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(31,41,55,.06);
  overflow: hidden;
}
.impact-fill{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91,182,176,.55), rgba(255,127,106,.55));
}
.impact-scale{
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  opacity: .85;
}

/* Impact levels */
.level-2{ width: 20%; }
.level-4{ width: 40%; }
.level-5{ width: 50%; }
.level-6{ width: 60%; }
.level-7{ width: 70%; }
.level-8{ width: 80%; }
.level-9{ width: 90%; }
.level-reset{
  width: 100%;
  background: linear-gradient(90deg, rgba(91,182,176,.52), rgba(242,183,122,.50), rgba(123,143,228,.42));
}

.psych-tag{
  margin: .75rem 0 0;
  font-size: var(--step--1);
  opacity: .9;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tag{
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(31,41,55,.05);
}

/* Visual side */
.stage-visual{
  background: rgba(251,250,247,.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem;
  box-shadow: 0 12px 26px rgba(31,41,55,.05);
}
.stage-svg{
  width: 100%;
  height: auto;
  display: block;
}

.stage-figure{
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(251,250,247,.9);
}
.stage-figure img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.stage-icon-panel{
  margin-top: .75rem;
}

/* Stage 8: decision block */
.decision h4{
  margin: 0 0 .35rem;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.decision{
  margin-top: .65rem;
  background: rgba(251,250,247,.86);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .75rem .85rem;
}

/* ---------- Summary panel ---------- */
.summary{
  margin-top: 1.35rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(123,143,228,.10), rgba(251,250,247,.72));
  box-shadow: 0 14px 34px rgba(31,41,55,.06);
  padding: 1.05rem;
}
.summary-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  align-items: start;
}
.summary h2{
  margin: 0 0 .55rem;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
}
.summary-bullets{
  margin: .6rem 0 0;
  padding-left: 1.15rem;
}
.summary-takeaway{
  margin-top: .8rem;
  font-size: var(--step-0);
  font-weight: 650;
  opacity: .95;
}
.summary-visual{
  background: rgba(251,250,247,.74);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem;
  box-shadow: 0 12px 26px rgba(31,41,55,.05);
}

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid var(--line);
  padding: 1.2rem 0 2.2rem;
}
.footer-line{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  font-size: var(--step--1);
  opacity: .82;
}

/* ---------- Responsive enhancements ---------- */
@media (min-width: 760px){
  .hero-inner{
    grid-template-columns: 1.05fr .95fr;
    gap: 1.4rem;
    align-items: center;
  }
  .hero-badges{
    grid-template-columns: 1fr 1fr;
  }
  .title-stack{
    columns: 2;
  }

  .intro-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 1.2rem;
  }
  .micro-grid{
    grid-template-columns: 1fr 1fr;
  }

  .stage-grid{
    grid-template-columns: 1.15fr .85fr;
    gap: 1.1rem;
  }
  .stage-8 .stage-grid{
    grid-template-columns: 1fr 1fr;
  }

  .summary-grid{
    grid-template-columns: 1.1fr .9fr;
    gap: 1.1rem;
  }
}

@media (min-width: 1040px){
  .page{ padding-bottom: 3.2rem; }
  .stage{ padding: 1.2rem; }
  .microstats, .summary, .intro-text{ padding: 1.2rem; }
}

/* ---------- Print-friendly tweaks ---------- */
@media print{
  body{
    background: white;
  }
  .hero, .footer{
    border-color: #999;
  }
  .stage, .microstats, .summary, .intro-text, .intro-visual, .share-titles, .hero-figure, .stage-visual, .summary-visual{
    box-shadow: none !important;
  }
  .skip-link{ display: none; }
}