/* styles.css */

:root{
  --bg: #fbfaf8;
  --paper: #ffffff;
  --ink: #1f2a33;
  --muted: #51606c;

  --border: #e7e2db;
  --shadow: 0 10px 26px rgba(19, 28, 34, .06);

  --warm-1:#F7A98B;
  --warm-2:#FBD2B6;
  --warm-wash:#fff4ee;

  --cool-1:#7EB7D6;
  --cool-2:#C9E3F0;
  --cool-wash:#f2f8fb;

  --radius: 18px;
  --radius-sm: 14px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:auto; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background: radial-gradient(1200px 600px at 18% 10%, rgba(247,169,139,.16), transparent 55%),
              radial-gradient(1200px 600px at 82% 6%, rgba(126,183,214,.18), transparent 52%),
              var(--bg);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a{ color: inherit; }
a:focus-visible{ outline: 3px solid rgba(126,183,214,.55); outline-offset: 3px; }

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 14px;
  border-radius: 999px;
  background: var(--paper);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 10;
}
.skip-link:focus{
  left:10px;
}

.wrap{
  width:min(980px, calc(100% - 28px));
  margin-inline:auto;
}

.masthead{
  padding: 34px 0 10px;
  background:
    linear-gradient(135deg, rgba(247,169,139,.18), rgba(126,183,214,.16)),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  border-bottom: 1px solid rgba(231,226,219,.8);
}

.masthead-top{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items:center;
}

.masthead-mark{
  width: 72px;
  height: 72px;
  display:grid;
  place-items:center;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(247,169,139,.16), rgba(126,183,214,.14));
  border: 1px solid rgba(231,226,219,.9);
  box-shadow: 0 10px 18px rgba(19, 28, 34, .05);
}

.masthead-title h1{
  margin:0;
  font-size: clamp(1.9rem, 2.6vw + 1.2rem, 3rem);
  line-height:1.1;
  letter-spacing: -0.02em;
}
.subhead{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, .7vw + .9rem, 1.2rem);
}

.hero-media{
  margin: 18px 0 14px;
  border-radius: var(--radius);
  overflow: clip;
  border:1px solid rgba(231,226,219,.9);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.hero-media img{ width:100%; }

.takeaway-strip{
  margin: 10px 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(247,169,139,.16), rgba(126,183,214,.14)),
    rgba(255,255,255,.75);
  border: 1px solid rgba(231,226,219,.95);
}
.takeaway-strip ul{
  margin:0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
}
.takeaway-strip li{ color: var(--ink); }
.takeaway-strip strong{ font-weight: 750; }

.infographic{
  padding: 18px 0 44px;
}

.panel{
  margin: 18px 0;
  background: var(--paper);
  border: 1px solid rgba(231,226,219,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: visible;
}

.panel-head{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(231,226,219,.85);
  background:
    linear-gradient(135deg, rgba(247,169,139,.10), rgba(126,183,214,.08)),
    rgba(255,255,255,.9);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.panel-head h2{
  margin:0;
  font-size: clamp(1.3rem, 1.4vw + 1rem, 1.85rem);
  letter-spacing: -0.01em;
  line-height:1.2;
}
.panel-lede{
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 70ch;
}

.hook .stat-strip{
  padding: 14px 18px 18px;
}

.stat-strip{
  display:grid;
  gap: 12px;
}

.stat{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(231,226,219,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
}

.stat-icon{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(247,169,139,.18), rgba(126,183,214,.14));
  border: 1px solid rgba(231,226,219,.95);
  color: rgba(31,42,51,.78);
}
.stat p{ margin:0; color: var(--ink); }
sup{ font-size: .72em; vertical-align: super; }

.compare{
  padding-bottom: 6px;
}

.compare-legend{
  padding: 12px 18px 6px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 18px;
  align-items:center;
  color: var(--muted);
}

.legend-left, .legend-right{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231,226,219,.9);
  background: rgba(255,255,255,.7);
}

.legend-left .dot, .legend-right .dot{
  width: 12px; height:12px; border-radius: 99px;
  border: 1px solid rgba(31,42,51,.18);
}
.legend-left .dot{
  background: linear-gradient(180deg, var(--warm-1), var(--warm-2));
}
.legend-right .dot{
  background: linear-gradient(180deg, var(--cool-1), var(--cool-2));
}

.compare-row{
  margin: 10px 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(231,226,219,.95);
  background: rgba(255,255,255,.92);
}

.row-head{
  padding: 14px 14px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(231,226,219,.88);
  background:
    linear-gradient(135deg, rgba(247,169,139,.08), rgba(126,183,214,.06)),
    rgba(255,255,255,.88);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.row-head h3{
  margin:0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.row-icon{
  width: 48px;
  height: 48px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(247,169,139,.16), rgba(126,183,214,.14));
  border: 1px solid rgba(231,226,219,.95);
  color: rgba(31,42,51,.78);
}

.split{
  display:grid;
  gap: 10px;
  padding: 12px 12px 14px;
}

.side{
  border-radius: var(--radius);
  padding: 12px 12px 12px;
  border: 1px solid rgba(231,226,219,.92);
}

.side.left{
  background: linear-gradient(180deg, rgba(255,244,238,.92), rgba(255,255,255,.78));
  border-color: rgba(243,197,178,.7);
}
.side.right{
  background: linear-gradient(180deg, rgba(242,248,251,.92), rgba(255,255,255,.78));
  border-color: rgba(188,215,230,.8);
}

.quote{
  margin: 0 0 10px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.kicker{
  margin: 0 0 8px;
  color: rgba(31,42,51,.82);
}

.side ul{
  margin:0;
  padding-left: 18px;
  display:grid;
  gap: 6px;
  color: rgba(31,42,51,.92);
}

.micro{
  margin: 10px 0 0;
  color: var(--muted);
}
.mechanism{
  margin: 10px 0 0;
  color: rgba(31,42,51,.86);
}
.quote-quiet{
  font-style: italic;
  border-left: 3px solid rgba(126,183,214,.35);
  padding-left: 10px;
}

.aggregate{
  padding-bottom: 10px;
}

.aggregate-grid{
  padding: 14px 18px 18px;
  display:grid;
  gap: 14px;
}

.meter{
  border-radius: var(--radius);
  border: 1px solid rgba(231,226,219,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  padding: 10px;
}

.cost-list{
  border-radius: var(--radius);
  border: 1px solid rgba(231,226,219,.95);
  background: linear-gradient(180deg, rgba(242,248,251,.7), rgba(255,255,255,.78));
  padding: 14px;
}
.cost-list ul{
  margin:0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
}
.pull-quote{
  margin: 14px 0 0;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(247,169,139,.14), rgba(126,183,214,.12));
  border: 1px solid rgba(231,226,219,.92);
  font-weight: 760;
  letter-spacing: -0.01em;
}

.reframe{
  padding-bottom: 6px;
}
.reframe-grid{
  padding: 14px 18px 18px;
  display:grid;
  gap: 14px;
  align-items:start;
}

.reframe-media{
  margin:0;
  border-radius: var(--radius);
  overflow: clip;
  border:1px solid rgba(231,226,219,.95);
  box-shadow: 0 10px 18px rgba(19, 28, 34, .05);
  background: var(--paper);
}
.reframe-media img{ width:100%; }

.reframe-questions{
  margin:0;
  padding-left: 20px;
  display:grid;
  gap: 10px;
}

.reframe-questions li{
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(231,226,219,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
}
.reframe-questions strong{
  display:block;
  letter-spacing: -0.01em;
}
.hint{
  display:block;
  color: var(--muted);
  margin-top: 6px;
}

.closing-strip{
  padding: 0 18px 18px;
}
.closing-line{
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(231,226,219,.95);
  background: linear-gradient(135deg, rgba(247,169,139,.14), rgba(126,183,214,.12));
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sources{
  padding-bottom: 6px;
}
.source-list{
  margin: 0;
  padding: 12px 22px 14px 34px;
  color: rgba(31,42,51,.92);
}
.source-list li{ margin: 10px 0; }
.source-note{ color: var(--muted); }

.version{
  margin: 0 18px 18px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(231,226,219,.95);
  background: rgba(255,255,255,.78);
  color: rgba(31,42,51,.92);
}
.version p{ margin: 6px 0; }

/* Progressive enhancement (optional reveal) */
.js .panel,
.js .compare-row{
  transform: translateY(6px);
  opacity: .98;
  transition: transform 420ms ease, opacity 420ms ease;
}
.js .is-visible{
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .js .panel,
  .js .compare-row{
    transition: none;
    transform:none;
    opacity:1;
  }
}

/* Responsive upgrades */
@media (min-width: 820px){
  .stat-strip{
    grid-template-columns: repeat(3, 1fr);
  }
  .split{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .aggregate-grid{
    grid-template-columns: 1.05fr .95fr;
    align-items:start;
  }
  .reframe-grid{
    grid-template-columns: .9fr 1.1fr;
    align-items:start;
  }
}

/* Print-friendly */
@media print{
  body{
    background: #fff;
  }
  .panel, .hero-media, .masthead-mark, .stat, .compare-row, .meter, .cost-list, .version{
    box-shadow: none !important;
  }
  .skip-link{ display:none; }
}