:root {
  --bg:#080c12;
  --surface:#0f1722;
  --surface-2:#131e2b;
  --line:rgba(157,220,255,.13);
  --line-strong:rgba(157,220,255,.23);
  --blue:#4bb8ff;
  --blue-soft:#9ddcff;
  --text:#f4f7fa;
  --muted:#9aa7b5;
  --muted-2:#7d8b9b;
  --danger:#ff9f9f;
  --radius:24px;
  --shadow:0 30px 80px rgba(0,0,0,.32);
}

* {
  box-sizing:border-box
}

html {
  background:var(--bg);
  color-scheme:dark;
  scroll-behavior:smooth
}

body {
  margin:0;
  background:radial-gradient(circle at 50% -10%,rgba(75,184,255,.09),transparent 36rem),var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}

button,input {
  font:inherit
}

button {
  color:inherit
}

.button-reset {
  border:0;
  background:transparent;
  color:inherit;
  font:inherit
}

.snap-container {
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y proximity;
  scroll-behavior:smooth
}

.panel {
  position:relative;
  min-height:100vh;
  min-height:100svh;
  scroll-snap-align:start;
  overflow:hidden
}

.hero {
  display:grid;
  place-items:center;
  padding:2rem
}

.topbar {
  position:absolute;
  inset:0 0 auto 0;
  width:min(1180px,calc(100% - 4rem));
  margin:0 auto;
  padding:2rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:4
}

.brand {
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.025em
}

.topbar-meta {
  color:var(--muted);
  font-size:.78rem;
  font-weight:550;
  text-transform:uppercase;
  letter-spacing:.12em
}

.hero-content {
  position:relative;
  z-index:3;
  max-width:980px;
  text-align:center
}

.eyebrow {
  color:var(--blue-soft);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.76rem;
  font-weight:700;
  margin-bottom:1.15rem
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  margin-bottom:1.65rem;
  font-size:clamp(3rem,8vw,7.4rem);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:650
}

h1 span {
  color:var(--blue)
}

.hero-copy {
  color:var(--muted);
  font-size:clamp(1.08rem,1.8vw,1.35rem);
  margin-bottom:2.2rem
}

.primary-button {
  border:1px solid rgba(157,220,255,.38);
  border-radius:999px;
  padding:.95rem 1.25rem .95rem 1.4rem;
  background:var(--blue);
  color:#06111a;
  font-weight:750;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  box-shadow:0 14px 35px rgba(75,184,255,.16);
  transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease
}

.primary-button:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(75,184,255,.23);
  filter:brightness(1.04)
}

.primary-button:active {
  transform:translateY(0)
}

.primary-button.full {
  width:100%;
  margin-top:.4rem
}

.primary-button.ghost {
  margin-top:1.35rem;
  background:transparent;
  color:var(--blue-soft);
  border-color:rgba(75,184,255,.38);
  box-shadow:none
}

.primary-button.ghost:hover {
  background:rgba(75,184,255,.07)
}

.microcopy {
  color:var(--muted);
  font-size:.84rem;
  font-weight:500;
  margin-top:1rem;
  margin-bottom:0
}

.scroll-hint {
  position:absolute;
  z-index:4;
  bottom:1.6rem;
  left:50%;
  transform:translateX(-50%);
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  color:var(--muted-2);
  font-size:.74rem;
  cursor:pointer
}

.arrow {
  color:var(--blue);
  font-size:1rem
}

.ambient-grid {
  position:absolute;
  inset:0;
  opacity:.24;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at center,black,transparent 73%)
}

.data-points {
  position:absolute;
  inset:0;
  opacity:.47;
  background-image:radial-gradient(circle at 18% 35%,rgba(157,220,255,.8) 0 1px,transparent 1.6px),radial-gradient(circle at 71% 23%,rgba(75,184,255,.75) 0 1px,transparent 1.6px),radial-gradient(circle at 86% 61%,rgba(157,220,255,.55) 0 1px,transparent 1.6px),radial-gradient(circle at 34% 78%,rgba(75,184,255,.48) 0 1px,transparent 1.6px),radial-gradient(circle at 55% 54%,rgba(157,220,255,.38) 0 1px,transparent 1.6px);
  background-size:230px 220px,270px 250px,320px 290px,300px 280px,360px 340px;
  animation:drift 18s ease-in-out infinite alternate
}

@keyframes drift {
  from {
    transform:translate3d(-.7%,-.4%,0) scale(1)
  }

  to {
    transform:translate3d(.9%,.7%,0) scale(1.018)
  }

}

.calculator-panel,.results-panel,.problem-panel,.atlas-panel,.contribute-panel,.methodology-panel,.closing-panel {
  display:flex;
  align-items:safe center;
  justify-content:center;
  padding:clamp(2.25rem,6vh,5rem) 2rem
}

.calculator-panel::before,.results-panel::before,.contribute-panel::before,.methodology-panel::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 78% 28%,rgba(75,184,255,.08),transparent 24rem),linear-gradient(to bottom,rgba(255,255,255,.015),transparent 30%)
}

.section-shell {
  width:min(1040px,100%);
  position:relative;
  z-index:2
}

.section-heading {
  max-width:650px;
  margin-bottom:2rem
}

.section-heading.wide {
  max-width:820px
}

.problem-panel .section-heading h2,
.methodology-panel .section-heading h2 {
  margin-bottom:1.45rem
}

.section-heading.compact {
  margin-bottom:1.5rem
}

h2 {
  margin-bottom:.7rem;
  font-size:clamp(2.35rem,5vw,4.9rem);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:650
}

.section-heading p,.lead {
  color:var(--muted);
  font-size:1rem;
  line-height:1.65
}

.lead {
  font-size:clamp(1rem,1.7vw,1.18rem)
}

.calculator-card {
  width:min(620px,100%);
  padding:clamp(1.4rem,4vw,2rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(19,30,43,.94),rgba(15,23,34,.92));
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px)
}

.unit-toggle {
  display:inline-flex;
  padding:.25rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  margin-bottom:1.4rem
}

.unit-button {
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  padding:.48rem .8rem;
  cursor:pointer
}

.unit-button.is-active {
  background:rgba(75,184,255,.14);
  color:var(--blue-soft)
}

.field {
  display:block;
  margin-bottom:1.1rem
}

.field>span {
  display:block;
  color:var(--muted);
  font-size:.83rem;
  margin-bottom:.45rem
}

.input-wrap {
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(7,13,20,.55);
  transition:border-color 160ms ease,box-shadow 160ms ease
}

.input-wrap:focus-within {
  border-color:rgba(75,184,255,.55);
  box-shadow:0 0 0 4px rgba(75,184,255,.08)
}

.input-wrap input {
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:1.35rem;
  padding:1rem 0 1rem 1rem
}

.input-wrap input::placeholder {
  color:#4f5b6a
}

.unit-label {
  padding:0 1rem;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem
}

.form-error {
  min-height:1.1rem;
  margin:.25rem 0 .55rem;
  color:var(--danger);
  font-size:.82rem
}

.text-button {
  border:0;
  background:transparent;
  color:var(--blue-soft);
  cursor:pointer;
  padding:0;
  font-size:.84rem
}

#measurement-help {
  display:block;
  margin:1rem auto 0
}

.privacy-note {
  display:block;
  margin-top:1.35rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line)
}

.privacy-note p {
  margin:0;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.5
}

.privacy-note strong {
  color:var(--text);
  font-weight:650
}

.results-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem
}

.result-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,1.8rem);
  background:linear-gradient(180deg,rgba(19,30,43,.9),rgba(12,19,29,.92));
  box-shadow:var(--shadow)
}

.result-topline {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em
}

.reference-value {
  color:var(--muted-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}

.percentile {
  margin-top:1rem;
  color:var(--blue);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(3.7rem,7vw,6.5rem);
  line-height:1;
  letter-spacing:-.06em
}

.result-card p {
  min-height:2.9rem;
  margin:.8rem 0 0;
  color:var(--muted);
  line-height:1.45;
  font-size:.9rem
}

.curve-wrap {
  margin-top:1rem;
  border-top:1px solid var(--line);
  padding-top:.7rem
}

.distribution {
  width:100%;
  height:auto;
  overflow:visible
}

.curve {
  fill:none;
  stroke:rgba(157,220,255,.34);
  stroke-width:2
}

.marker {
  stroke:var(--blue);
  stroke-width:1.5;
  stroke-dasharray:4 5;
  opacity:.7
}

.marker-dot {
  fill:var(--blue);
  filter:drop-shadow(0 0 8px rgba(75,184,255,.75))
}

.results-footer {
  margin-top:1.25rem
}

.meaning-copy {
  max-width:720px;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.55;
  margin-top:.7rem
}

.narrative-hook {
  margin-top:2rem;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
  color:var(--muted);
  cursor:pointer;
  text-align:left
}

.narrative-hook strong {
  color:var(--text);
  font-size:clamp(1.2rem,2.2vw,1.75rem);
  letter-spacing:-.025em
}

.problem-panel {
  background:radial-gradient(circle at 16% 26%,rgba(75,184,255,.07),transparent 22rem),linear-gradient(180deg,#080c12,#090e15)
}

.problem-background {
  position:absolute;
  inset:0;
  opacity:.34;
  pointer-events:none
}

.sample {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(157,220,255,.8);
  box-shadow:20px 10px rgba(157,220,255,.28),46px -8px rgba(75,184,255,.22),78px 14px rgba(157,220,255,.2),95px 42px rgba(75,184,255,.25),132px 9px rgba(157,220,255,.22),169px 35px rgba(75,184,255,.18),206px -5px rgba(157,220,255,.22),244px 24px rgba(75,184,255,.24)
}

.cloud-a {
  top:24%;
  left:8%
}

.cloud-b {
  top:58%;
  left:63%;
  transform:scale(1.25)
}

.cloud-c {
  top:80%;
  left:20%;
  transform:scale(.8)
}

.problem-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}

.problem-card {
  min-height:230px;
  padding:1.5rem;
  border-top:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)
}

.card-index {
  display:block;
  color:rgba(75,184,255,.58);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(3.6rem,7vw,6.4rem);
  font-weight:650;
  line-height:.9;
  letter-spacing:-.07em
}

.problem-card h3,.method-card h3 {
  margin:1.65rem 0 .65rem;
  font-size:1.4rem;
  letter-spacing:-.03em
}

.problem-card p,.method-card p {
  color:var(--muted);
  line-height:1.55;
  font-size:.92rem
}

.question-transition {
  margin-top:2.4rem;
  padding:0;
  color:var(--text);
  font-size:clamp(1.2rem,2.5vw,1.8rem);
  letter-spacing:-.03em;
  cursor:pointer;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem
}

.atlas-panel {
  background:radial-gradient(circle at 72% 45%,rgba(75,184,255,.10),transparent 30rem),#070b11
}

.atlas-noise {
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(rgba(157,220,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(157,220,255,.08) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center,black 0 50%,transparent 82%)
}

.atlas-shell {
  display:grid;
  grid-template-columns:.9fr 1.35fr;
  gap:2.5rem;
  align-items:center
}

.atlas-copy h2 {
  font-size:clamp(3rem,7vw,6.5rem);
  margin-bottom:1rem
}

.atlas-subtitle {
  color:var(--muted);
  line-height:1.6;
  max-width:510px
}

.atlas-manifesto {
  margin:2rem 0 1.4rem;
  color:var(--text);
  font-size:clamp(1.35rem,2.5vw,2.2rem);
  line-height:1.15;
  letter-spacing:-.035em
}

.atlas-pill {
  display:inline-flex;
  padding:.5rem .75rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:550
}

.atlas-visual {
  border:1px solid var(--line);
  border-radius:26px;
  padding:1rem;
  background:linear-gradient(180deg,rgba(19,30,43,.86),rgba(8,13,20,.92));
  box-shadow:var(--shadow)
}

.atlas-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.55rem;
  margin-bottom:.8rem
}

.atlas-stats div {
  min-width:0;
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.012)
}

.atlas-stats span {
  display:block;
  color:var(--muted);
  font-size:.74rem;
  font-weight:600;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.055em
}

.atlas-stats strong {
  display:block;
  margin-top:.35rem;
  color:var(--blue-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.2rem
}

.atlas-map {
  position:relative;
  aspect-ratio:1.55/1;
  min-height:280px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:radial-gradient(circle at 62% 42%,rgba(75,184,255,.11),transparent 16rem),rgba(6,11,17,.7)
}

.world-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(157,220,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(157,220,255,.08) 1px,transparent 1px);
  background-size:44px 44px
}

.atlas-dots {
  position:absolute;
  inset:0
}

.atlas-dot {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(157,220,255,.58);
  opacity:0;
  animation:dotReveal 900ms ease forwards;
  box-shadow:0 0 8px rgba(75,184,255,.25)
}

@keyframes dotReveal {
  from {
    opacity:0;
    transform:scale(.2)
  }

  to {
    opacity:1;
    transform:scale(1)
  }

}

.atlas-axis {
  position:absolute;
  color:var(--muted);
  font-size:.72rem;
  font-weight:550;
  text-transform:uppercase;
  letter-spacing:.07em
}

.x-axis {
  bottom:.65rem;
  left:50%;
  transform:translateX(-50%)
}

.y-axis {
  top: 0;
  bottom: 0;
  left: 0.55rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
}

.y-axis span {
  display: block;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: center;
}


/* The marker appears only after a VirIndex has been calculated. */
.atlas-user-marker {
  --user-x: 50%;
  --user-y: 50%;
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.atlas-user-marker.is-visible {
  opacity: 1;
}

.atlas-user-dot {
  position: absolute;
  left: var(--user-x);
  top: var(--user-y);
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--blue);
  box-shadow:
    0 0 0 5px rgba(75, 184, 255, 0.12),
    0 0 24px rgba(75, 184, 255, 0.8);
  transform: translate(-50%, -50%);
  transition:
    left 700ms cubic-bezier(0.22, 1, 0.36, 1),
    top 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atlas-user-label {
  position: absolute;
  left: var(--user-x);
  top: var(--user-y);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(75, 184, 255, 0.28);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.92);
  color: var(--blue-soft);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  transition:
    left 700ms cubic-bezier(0.22, 1, 0.36, 1),
    top 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atlas-user-label strong {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
}

.atlas-user-guide {
  position: absolute;
  background: rgba(75, 184, 255, 0.18);
  transition:
    left 700ms cubic-bezier(0.22, 1, 0.36, 1),
    top 700ms cubic-bezier(0.22, 1, 0.36, 1),
    width 700ms cubic-bezier(0.22, 1, 0.36, 1),
    height 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atlas-user-guide-x {
  left: 8%;
  top: var(--user-y);
  width: calc(var(--user-x) - 8%);
  height: 1px;
}

.atlas-user-guide-y {
  left: var(--user-x);
  top: var(--user-y);
  width: 1px;
  height: calc(92% - var(--user-y));
}

.atlas-features {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:-.2rem
}

.atlas-features span {
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:.56rem .82rem;
  color:#aab6c3;
  font-size:.78rem;
  font-weight:550
}

.atlas-close {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.atlas-close p {
  color:var(--muted);
  margin-bottom:.3rem
}

.atlas-close strong {
  font-size:clamp(1.25rem,2vw,1.7rem);
  letter-spacing:-.03em
}

.contribution-shell {
  max-width:860px
}

.survey-card {
  border:1px solid var(--line);
  border-radius:26px;
  padding:clamp(1.4rem,4vw,2rem);
  background:linear-gradient(180deg,rgba(19,30,43,.88),rgba(10,17,25,.92));
  box-shadow:var(--shadow)
}

.survey-progress {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:2rem
}

.survey-progress-track {
  height:4px;
  flex:1;
  background:rgba(255,255,255,.06);
  border-radius:999px;
  overflow:hidden
}

.survey-progress-fill {
  width:16.66%;
  height:100%;
  background:var(--blue);
  transition:width 220ms ease
}

.survey-progress span {
  color:var(--muted);
  font-size:.78rem;
  font-weight:550;
  white-space:nowrap
}

.survey-stage {
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.survey-question {
  font-size:clamp(1.55rem,3.4vw,2.6rem);
  line-height:1.08;
  letter-spacing:-.04em;
  margin-bottom:1.5rem;
  max-width:760px
}

.survey-note {
  color:var(--muted);
  line-height:1.55;
  font-size:.86rem;
  margin-top:-.7rem;
  margin-bottom:1.3rem;
  max-width:680px
}

.survey-options {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem
}

.survey-option {
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:rgba(255,255,255,.018);
  color:var(--text);
  padding:.78rem 1rem;
  cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease,transform 160ms ease
}

.survey-option:hover {
  border-color:rgba(75,184,255,.6);
  background:rgba(75,184,255,.07);
  transform:translateY(-1px)
}

.survey-option.is-selected {
  background:rgba(75,184,255,.14);
  border-color:rgba(75,184,255,.62);
  color:var(--blue-soft)
}

.survey-next {
  margin-top:1.4rem
}


.survey-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.45rem
}

.survey-nav .survey-next,
.survey-nav .survey-submit {
  margin-top:0
}

.survey-review h3 {
  font-size:clamp(1.8rem,3.4vw,2.7rem);
  letter-spacing:-.045em;
  margin-bottom:1rem
}

.survey-review-list {
  display:grid;
  gap:.65rem;
  max-height:330px;
  overflow:auto;
  padding-right:.35rem
}

.survey-review-row {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(140px,.75fr);
  gap:1rem;
  align-items:start;
  padding:.85rem 0;
  border-bottom:1px solid var(--line)
}

.survey-review-row span {
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45
}

.survey-review-row strong {
  color:var(--text);
  font-size:.86rem;
  line-height:1.45;
  font-weight:650
}

.survey-submit-status {
  min-height:1.25rem;
  margin-top:.9rem;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45
}

.survey-submit-status.is-info {
  color:var(--blue-soft)
}

.survey-submit-status.is-error {
  color:#ffb1b1
}

.survey-submit.is-loading {
  cursor:wait
}

.survey-finish h3 {
  font-size:clamp(2rem,4vw,3.6rem);
  letter-spacing:-.05em;
  margin-bottom:.8rem
}

.survey-finish p {
  color:var(--muted);
  line-height:1.6;
  max-width:650px
}

.prototype-badge {
  display:inline-flex;
  margin-top:1rem;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5rem .75rem;
  color:var(--muted-2);
  font-size:.72rem
}

.method-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem
}

.method-card {
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.015)
}

.method-label {
  color:var(--blue-soft);
  text-transform:uppercase;
  letter-spacing:.105em;
  font-size:.74rem;
  font-weight:700
}

.method-card h3 {
  margin-top:1.4rem
}

.method-note {
  margin-top:1.2rem;
  padding:1.25rem 1.35rem;
  border-left:2px solid var(--blue);
  background:rgba(75,184,255,.035)
}

.method-note p {
  margin:0;
  color:var(--muted);
  line-height:1.6
}

.method-note-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem
}

.method-read-button {
  flex:0 0 auto;
  font-weight:650;
  white-space:nowrap
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
  margin-top:1.3rem
}

.closing-panel {
  background:radial-gradient(circle at 50% 50%,rgba(75,184,255,.09),transparent 26rem),#070b10
}

.closing-content {
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px
}

.closing-brand {
  color:var(--blue-soft);
  margin-bottom:2rem
}

.closing-line {
  font-size:clamp(3rem,7vw,6.6rem);
  margin-bottom:1.4rem
}

.closing-line span {
  color:var(--blue)
}

.closing-content>p {
  color:var(--muted);
  margin-bottom:2rem;
  font-size:1.05rem
}

.closing-meta {
  margin-top:2.5rem;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem
}

.closing-meta span {
  padding:.42rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted-2);
  font-size:.72rem
}

.closing-content small {
  display:block;
  margin-top:2rem;
  color:#536171
}

.closing-orbit {
  position:absolute;
  border:1px solid rgba(75,184,255,.09);
  border-radius:50%
}

.orbit-a {
  width:620px;
  height:620px
}

.orbit-b {
  width:880px;
  height:880px
}

.progress-dots {
  position:fixed;
  z-index:10;
  right:1.25rem;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:.65rem
}

.dot {
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#3c4957;
  cursor:pointer;
  transition:transform 160ms ease,background 160ms ease
}

.dot.is-active {
  transform:scale(1.45);
  background:var(--blue)
}

dialog.measure-dialog {
  width:min(760px,calc(100% - 2rem));
  max-width:760px;
  max-height:min(88vh,820px);
  margin:auto;
  border:1px solid var(--line-strong);
  border-radius:24px;
  background:#0d1621;
  color:var(--text);
  box-shadow:0 36px 110px rgba(0,0,0,.58);
  padding:0;
  overflow:hidden
}

dialog.measure-dialog::backdrop {
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(5px)
}

.guide-scroll {
  max-height:min(88vh,820px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(1.35rem,3vw,2rem)
}

.guide-header {
  padding-right:2.5rem;
  margin-bottom:1.35rem
}

.guide-header .eyebrow {
  margin-bottom:.7rem
}

.guide-header h3 {
  margin:0 0 .65rem;
  font-size:clamp(1.85rem,4vw,2.55rem);
  line-height:1;
  letter-spacing:-.045em
}

.guide-header p,
.guide-section p,
.guide-measurement p,
.guide-privacy p {
  color:var(--muted);
  line-height:1.62
}

.guide-header p {
  max-width:62ch;
  margin-bottom:0
}

.guide-key {
  display:grid;
  gap:.28rem;
  padding:1rem 1.05rem;
  margin-bottom:1.15rem;
  border:1px solid rgba(75,184,255,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(75,184,255,.09),rgba(75,184,255,.025))
}

.guide-key span,
.guide-tool-label,
.guide-privacy>span {
  color:var(--blue-soft);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.11em;
  text-transform:uppercase
}

.guide-key strong {
  font-size:1rem;
  line-height:1.35
}

.guide-section {
  padding:1.1rem 0;
  border-top:1px solid var(--line)
}

.guide-section h4,
.guide-measurement h4 {
  margin:0 0 .55rem;
  font-size:1.03rem;
  letter-spacing:-.015em
}

.guide-section p,
.guide-measurement p {
  margin:0
}

.guide-section p+p,
.guide-measurement p+p {
  margin-top:.7rem
}

.guide-tools {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
  margin:.8rem 0 1rem
}

.guide-tools>div {
  display:grid;
  gap:.22rem;
  padding:.82rem .9rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.018)
}

.guide-tools strong {
  font-size:.92rem
}

.guide-measurement {
  display:grid;
  grid-template-columns:2.15rem 1fr;
  gap:.9rem;
  padding:1.2rem 0;
  border-top:1px solid var(--line)
}

.guide-step {
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border:1px solid rgba(75,184,255,.32);
  border-radius:50%;
  background:rgba(75,184,255,.08);
  color:var(--blue-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;
  font-weight:750
}

.guide-measurement strong,
.guide-caution strong {
  color:var(--text)
}

.guide-rule {
  display:inline-flex;
  margin-top:.8rem;
  padding:.5rem .68rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:#b5c2cf;
  background:rgba(255,255,255,.02);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;
  line-height:1.35
}

.guide-caution {
  margin-top:.05rem
}

.guide-caution h4::before {
  content:"◇";
  margin-right:.48rem;
  color:var(--blue)
}

.guide-limitations {
  border-bottom:1px solid var(--line)
}

.guide-privacy {
  display:grid;
  gap:.35rem;
  margin-top:1.1rem;
  padding:1rem 1.05rem;
  border-radius:16px;
  background:rgba(157,220,255,.045)
}

.guide-privacy p {
  margin:0;
  font-size:.86rem
}

.guide-done {
  width:100%;
  margin-top:1.1rem
}

.dialog-close {
  position:absolute;
  z-index:3;
  top:.9rem;
  right:1rem;
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(13,22,33,.9);
  color:var(--muted);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  transition:border-color 160ms ease,color 160ms ease,background 160ms ease
}

.dialog-close:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
  color:var(--text)
}

body.dialog-open .snap-container {
  overflow:hidden
}

.methodology-dialog {
  max-width:820px
}

.methodology-scroll {
  max-height:min(88vh,850px)
}

.reference-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin:.95rem 0 1rem
}

.reference-stat {
  display:grid;
  gap:.22rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.018)
}

.reference-stat span,
.equation-box span {
  color:var(--muted-2);
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase
}

.reference-stat strong {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.35rem;
  color:var(--text)
}

.reference-stat small {
  color:var(--blue-soft);
  font-size:.75rem
}

.equation-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin:.95rem 0 1rem
}

.equation-box {
  display:grid;
  gap:.35rem;
  padding:1rem;
  border:1px solid rgba(75,184,255,.2);
  border-radius:15px;
  background:rgba(75,184,255,.045)
}

.equation-box strong {
  color:var(--blue-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.05rem;
  font-weight:650
}

.methodology-measure-link {
  margin-top:.75rem;
  font-weight:650
}

.methodology-limit-list {
  display:grid;
  gap:.75rem;
  margin:.8rem 0 0;
  padding:0;
  list-style:none
}

.methodology-limit-list li {
  position:relative;
  padding-left:1.15rem;
  color:var(--muted);
  line-height:1.58
}

.methodology-limit-list li::before {
  content:"·";
  position:absolute;
  left:.2rem;
  top:0;
  color:var(--blue);
  font-weight:800
}

.methodology-limit-list strong,
.methodology-version strong,
.source-list strong {
  color:var(--text)
}

.source-list {
  display:grid;
  gap:.75rem;
  margin-top:.8rem
}

.source-list p {
  margin:0;
  padding:.8rem .9rem;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.015);
  color:var(--muted);
  font-size:.84rem;
  line-height:1.5
}

.methodology-version p {
  font-size:.86rem
}

@media(max-width:1100px) and (min-width:761px) {
  .method-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .method-card {
    padding:1.05rem 1.15rem
  }

  .method-card h3 {
    margin-top:.85rem
  }
}

@media(max-width:600px) {
  dialog.measure-dialog {
    width:calc(100% - 1rem);
    max-height:92vh;
    border-radius:20px
  }

  .guide-scroll {
    max-height:92vh;
    padding:1.2rem
  }

  .guide-tools {
    grid-template-columns:1fr
  }

  .reference-grid,
  .equation-grid {
    grid-template-columns:1fr
  }

  .method-note-actions {
    align-items:flex-start;
    flex-direction:column
  }

  .guide-measurement {
    grid-template-columns:1.9rem 1fr;
    gap:.7rem
  }

  .guide-step {
    width:1.9rem;
    height:1.9rem
  }

  .guide-rule {
    border-radius:12px;
    white-space:normal
  }
}


/* -------------------------------------------------- */
/* VIRATLAS — SHORT DESKTOP / LAPTOP VIEWPORTS        */
/* -------------------------------------------------- */

/*
    VirAtlas is the densest section of the homepage.
    On shorter desktop screens the chart and the vertical rhythm
    compact slightly so the whole composition remains visible
    and centered within a single viewport.
*/
@media (max-height: 900px) and (min-width: 901px) {
    .atlas-panel {
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
    }

    .atlas-shell {
        column-gap: 2rem;
        row-gap: 0.9rem;
    }

    .atlas-copy h2 {
        margin-bottom: 0.7rem;
        font-size: clamp(2.8rem, 6vw, 5.5rem);
    }

    .atlas-subtitle {
        margin-bottom: 0;
        line-height: 1.45;
    }

    .atlas-manifesto {
        margin: 1.1rem 0 0.9rem;
        font-size: clamp(1.2rem, 2.2vw, 1.8rem);
        line-height: 1.1;
    }

    .atlas-pill {
        padding: 0.42rem 0.68rem;
        font-size: 0.74rem;
    }

    .atlas-visual {
        padding: 0.8rem;
    }

    .atlas-stats {
        gap: 0.45rem;
        margin-bottom: 0.6rem;
    }

    .atlas-stats div {
        padding: 0.6rem;
    }

    .atlas-stats span {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .atlas-stats strong {
        margin-top: 0.2rem;
        font-size: 1.05rem;
    }

    .atlas-map {
        /*
            Do not let the chart height be dictated only by its width:
            that was the main reason page 5 could extend below the viewport.
        */
        aspect-ratio: auto;
        min-height: 0;
        height: clamp(235px, 34vh, 310px);
    }

    .atlas-features {
        gap: 0.42rem;
        margin-top: 0;
    }

    .atlas-features span {
        padding: 0.42rem 0.68rem;
        font-size: 0.73rem;
    }

    .atlas-close {
        padding-top: 0.9rem;
    }

    .atlas-close p {
        margin-bottom: 0.2rem;
        font-size: 0.9rem;
    }

    .atlas-close strong {
        font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    }

    .atlas-close .primary-button {
        margin-top: 0.8rem;
        padding-top: 0.78rem;
        padding-bottom: 0.78rem;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .atlas-panel {
        align-items: flex-start;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .atlas-map {
        height: 220px;
    }

    .atlas-manifesto {
        margin-top: 0.8rem;
        margin-bottom: 0.7rem;
    }

    .atlas-features span {
        padding-top: 0.34rem;
        padding-bottom: 0.34rem;
    }

    .atlas-close {
        padding-top: 0.7rem;
    }
}

@media(max-height:850px) and (min-width:761px) {
  .contribute-panel {
    padding-top:1.6rem;
    padding-bottom:1.6rem
  }

  .contribute-panel .section-heading {
    margin-bottom:1.15rem
  }

  .contribute-panel .section-heading h2 {
    font-size:clamp(2.2rem,4.5vw,4.2rem)
  }

  .survey-card {
    padding:1.35rem
  }

  .survey-progress {
    margin-bottom:1.2rem
  }

  .survey-stage {
    min-height:275px
  }

  .survey-question {
    font-size:clamp(1.35rem,2.8vw,2.25rem);
    margin-bottom:1rem
  }

  .survey-review-list {
    max-height:220px
  }
}

@media(max-height:850px) and (min-width:761px) {
  .calculator-panel,.results-panel {
    padding-top:1.75rem;
    padding-bottom:1.75rem
  }

  .calculator-panel .section-heading,.results-panel .section-heading {
    margin-bottom:1.25rem
  }

  .calculator-panel h2,.results-panel h2 {
    font-size:clamp(2.15rem,4.5vw,4.2rem)
  }

  .calculator-card {
    padding:1.4rem
  }

  .calculator-card .unit-toggle {
    margin-bottom:1rem
  }

  .calculator-card .field {
    margin-bottom:.85rem
  }

  .calculator-card .input-wrap input {
    padding-top:.85rem;
    padding-bottom:.85rem
  }

  .calculator-card #measurement-help {
    margin-top:.8rem
  }

  .calculator-card .privacy-note {
    margin-top:.9rem;
    padding-top:.85rem
  }

  .results-footer {
    margin-top:.9rem
  }

  .narrative-hook {
    margin-top:1.2rem
  }
}

@media(max-height:700px) and (min-width:761px) {
  .calculator-panel,.results-panel {
    align-items:flex-start;
    padding-top:1.25rem;
    padding-bottom:1.25rem
  }

  .calculator-panel .section-shell,.results-panel .section-shell {
    margin-top:auto;
    margin-bottom:auto
  }

  .result-card {
    padding-top:1.15rem;
    padding-bottom:1.15rem
  }

  .percentile {
    font-size:clamp(3.1rem,6vw,5.2rem)
  }

  .curve-wrap {
    margin-top:.7rem;
    padding-top:.5rem
  }
}

@media(max-width:900px) {
  .atlas-shell {
    grid-template-columns:1fr;
    gap:1.4rem
  }

  .atlas-features,.atlas-close {
    grid-column:auto
  }

  .atlas-stats {
    grid-template-columns:repeat(2,1fr)
  }

  .problem-grid {
    grid-template-columns:1fr
  }

  .problem-card {
    min-height:unset
  }

}

@media(max-width:760px) {
  .method-grid {
    grid-template-columns:1fr
  }

  .snap-container {
    scroll-snap-type:y proximity
  }

  .panel {
    min-height:100svh;
    overflow:visible
  }

  .hero,.calculator-panel,.results-panel,.problem-panel,.atlas-panel,.contribute-panel,.methodology-panel,.closing-panel {
    padding-left:1.15rem;
    padding-right:1.15rem
  }

  .topbar {
    width:calc(100% - 2.3rem);
    padding-top:1.25rem
  }

  .topbar-meta,.progress-dots {
    display:none
  }

  h1 {
    font-size:clamp(3rem,15vw,5rem)
  }

  .results-grid {
    grid-template-columns:1fr
  }

  .calculator-panel,.results-panel,.problem-panel,.atlas-panel,.contribute-panel,.methodology-panel {
    align-items:flex-start;
    padding-top:5.5rem;
    padding-bottom:4rem
  }

  .atlas-map {
    min-height:240px
  }

  .survey-stage {
    min-height:360px
  }

  .survey-options {
    flex-direction:column;
    align-items:stretch
  }

  .survey-option {
    width:100%;
    text-align:left
  }

  .closing-line {
    font-size:clamp(2.7rem,13vw,4.8rem)
  }

  .orbit-a {
    width:420px;
    height:420px
  }

  .orbit-b {
    width:660px;
    height:660px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }

}


@media (max-width: 640px) {
  .survey-review-row {
    grid-template-columns:1fr;
    gap:.35rem
  }

  .survey-nav {
    align-items:stretch;
    flex-direction:column-reverse
  }

  .survey-nav>span {
    display:none
  }

  .survey-nav .primary-button {
    width:100%;
    justify-content:center
  }
}