/* ══════════════════════════════════════════════════════════════
   TANREN LANDING PAGE STYLES
   Separate from main app styles to avoid contamination
   ══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Theme Variables ── */
[data-theme="dark"]{
  --bg:#0B0B0B;
  --bg2:#111;
  --bg3:#181818;
  --fg:#E8E8E8;
  --fg2:#999;
  --fg3:#555;
  --red:#FF2D2D;
  --red-dim:rgba(255,255,255,.04);
  --red-mid:rgba(255,255,255,.07);
  --border:#222;
  --nav-bg:rgba(11,11,11,.9);
  --z1:#6CBFB0;
  --z2:#2E9E82;
  --z3:#D4A843;
  --z4:#FF2D2D;
  --z5:#FF1A1A;
  --cite-bg:#141414;
  --img-overlay:rgba(11,11,11,.6);
}

[data-theme="light"]{
  --bg:#F0F0F0;
  --bg2:#E6E6E6;
  --bg3:#DADADA;
  --fg:#111;
  --fg2:#555;
  --fg3:#999;
  --red:#D41D1D;
  --red-dim:rgba(0,0,0,.04);
  --red-mid:rgba(0,0,0,.07);
  --border:#CCC;
  --nav-bg:rgba(240,240,240,.92);
  --z1:#4AA090;
  --z2:#1E8E72;
  --z3:#C09030;
  --z4:#D41D1D;
  --z5:#C01010;
  --cite-bg:#E8E8E8;
  --img-overlay:rgba(240,240,240,.65);
}

/* ── Base ── */
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Mono',monospace;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s,color .4s;
  font-size:13px;
}

/* ── Theme Toggle ── */
.tt{
  width:32px;
  height:32px;
  border:1px solid var(--border);
  background:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--fg2);
  font-size:.8rem;
  transition:.3s;
}
.tt:hover{border-color:var(--red);color:var(--red)}
.tt svg{flex-shrink:0}
[data-theme="dark"] .ts{display:block}
[data-theme="dark"] .tm{display:none}
[data-theme="light"] .ts{display:none}
[data-theme="light"] .tm{display:block}

/* ── Navigation ── */
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  padding:.9rem 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--nav-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:all .4s;
}
.nl{
  font-family:'Instrument Serif',serif;
  font-size:1.4rem;
  color:var(--fg);
  display:flex;
  align-items:baseline;
  gap:.5rem;
}
.nl span{
  font-family:'IBM Plex Mono',monospace;
  font-size:.55rem;
  color:var(--fg3);
  letter-spacing:.1em;
}
.nri{display:flex;align-items:center;gap:1.5rem}
.nri a{
  color:var(--fg3);
  text-decoration:none;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  transition:color .3s;
}
.nri a:hover{color:var(--fg)}
.btn-r{
  background:var(--red);
  color:#fff;
  border:0;
  padding:.5rem 1.3rem;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
  transition:.3s;
}
.btn-r:hover{opacity:.85;transform:translateY(-1px)}

/* ── Utility ── */
.container{max-width:1400px;margin:0 auto}
.grid-s{padding:0 2.5rem;border-top:1px solid var(--border)}
.grid-s-inner{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:0;
}
.gs-left{
  border-right:1px solid var(--border);
  padding:3.5rem 2.5rem 3.5rem 0;
}
.gs-left .lab{
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.8rem;
}
.gs-left h2{
  font-family:'Instrument Serif',serif;
  font-size:1.8rem;
  font-weight:400;
  line-height:1.15;
  margin-bottom:.8rem;
}
.gs-left p{font-size:.75rem;line-height:1.7;color:var(--fg2)}
.gs-right{padding:3.5rem 0 3.5rem 2.5rem}

/* ── Hero ── */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8rem 2.5rem 4rem;
  position:relative;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-video video,.hero-video img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.18;
  transition:opacity .4s;
}
[data-theme="light"] .hero-video video,[data-theme="light"] .hero-video img{opacity:.12;filter:grayscale(1)}
.hero-video::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,var(--bg) 0%,transparent 30%,transparent 60%,#000 100%);
  pointer-events:none;
  transition:background .4s;
}
[data-theme="light"] .hero-video::after{background:linear-gradient(to bottom,var(--bg) 0%,transparent 30%,transparent 60%,#fff 100%)}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:4rem;
  max-width:1400px;
  margin:0 auto;
  align-items:end;
  width:100%;
  position:relative;
  z-index:2;
}
.hero h1{
  font-family:'Instrument Serif',serif;
  font-size:clamp(4rem,10vw,8rem);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.04em;
  margin-bottom:1.5rem;
}
.hero h1 .it{font-style:italic;color:var(--red)}
.hero-tanren{
  font-size:.75rem;
  font-weight:600;
  line-height:1.7;
  color:var(--fg2);
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.2);
  max-width:480px;
}
[data-theme="light"] .hero-tanren{border-top-color:var(--border)}
#heroRotateWord{
  display:inline-block;
  position:relative;
}
#heroRotateWord::after{
  content:'';
  display:inline-block;
  width:3px;
  height:0.9em;
  background:currentColor;
  margin-left:0.08em;
  vertical-align:baseline;
  animation:cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}
.hero-meta{
  display:flex;
  gap:3rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.2);
}
[data-theme="light"] .hero-meta{border-top-color:var(--border)}
.hm-item .hm-val{font-size:1.8rem;font-weight:700;line-height:1}
.hm-item .hm-lbl{
  font-size:.5rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fg3);
  margin-top:.3rem;
}
.hero-right{
  border-left:1px solid rgba(255,255,255,.2);
  padding-left:2.5rem;
}
[data-theme="light"] .hero-right{border-left-color:var(--border)}
.hero-right p{
  font-size:.8rem;
  line-height:1.8;
  color:var(--fg2);
  margin-bottom:2rem;
}
.hero-right .btn-r{width:100%;text-align:center;padding:.7rem}
.hero-right .sub{
  display:block;
  margin-top:.8rem;
  font-size:.55rem;
  color:var(--fg3);
  letter-spacing:.08em;
}

/* ── Image band ── */
.img-band{
  height:400px;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--border);
}
.img-band img,.img-band video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.img-band .overlay{
  position:absolute;
  inset:0;
  background:var(--img-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .4s;
}
.img-band .overlay-text{text-align:center}
.img-band .overlay-text h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:.5rem;
}
.img-band .overlay-text h2 .it{font-style:italic;color:var(--red)}
#bandTypedWord::after{
  content:'';
  display:inline-block;
  width:3px;
  height:0.85em;
  background:var(--red);
  margin-left:0.05em;
  vertical-align:baseline;
  animation:cursor-blink 1s step-end infinite;
  opacity:0;
}
#bandTypedWord.typing::after{opacity:1}
.img-band .overlay-text p{font-size:.7rem;color:var(--fg2);letter-spacing:.08em}

/* ── Method rows ── */
.mr{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:1.5rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
.mr:last-child{border:none}
.mr:hover{background:rgba(128,128,128,.08)}
.mr-num{
  font-family:'Instrument Serif',serif;
  font-size:2rem;
  color:var(--fg3);
  line-height:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.mr-num svg{width:24px;height:24px;margin-top:.2rem}
.mr h3{font-size:.8rem;font-weight:700;letter-spacing:.02em;margin-bottom:.3rem}
.mr p{font-size:.7rem;line-height:1.7;color:var(--fg2)}

/* ── Research section ── */
.research{padding:4rem 2.5rem;border-top:1px solid var(--border)}
.research-inner{max-width:1400px;margin:0 auto}
.research-hd{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0;
  margin-bottom:2.5rem;
}
.research-hd .rh-left{padding-right:2.5rem;border-right:1px solid var(--border)}
.research-hd .rh-right{padding-left:2.5rem;display:flex;align-items:flex-end}
.research-hd .lab{
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.8rem;
}
.research-hd h2{
  font-family:'Instrument Serif',serif;
  font-size:1.8rem;
  font-weight:400;
  line-height:1.15;
}
.research-hd p{font-size:.75rem;line-height:1.7;color:var(--fg2)}

/* ── Infographic: Zone distribution ── */
.infographic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  margin-bottom:3rem;
}
.info-card{
  border:1px solid var(--border);
  padding:2rem;
  transition:border-color .4s;
}
.info-card:hover{border-color:var(--red-mid)}
.ic-title{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.model-toggle{
  display:flex;
  gap:0;
  border:1px solid var(--border);
}
.model-btn{
  padding:.35rem .7rem;
  font-size:.55rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:transparent;
  border:none;
  color:var(--fg3);
  cursor:pointer;
  transition:all .2s;
}
.model-btn:hover{color:var(--fg)}
.model-btn.active{
  background:var(--red);
  color:#fff;
}
.ic-subtitle{font-size:.65rem;color:var(--fg3);margin-bottom:1rem}

/* SVG charts */
.chart-wrap{margin:1rem 0}
svg text{font-family:'IBM Plex Mono',monospace}

/* ── Zone donut ── */
.donut-chart{display:flex;align-items:center;gap:2rem}
.donut-chart svg circle[id^="donut-"]{
  transition:stroke-dasharray .8s ease-out,stroke-dashoffset .8s ease-out;
}
.donut-chart:not(.animated) svg circle[id^="donut-"]{
  stroke-dasharray:0 346 !important;
}
.donut-legend{display:flex;flex-direction:column;gap:.5rem}
.dl-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.65rem;
  color:var(--fg2);
}
.dl-dot{width:8px;height:8px;flex-shrink:0}
.dl-item strong{color:var(--fg);font-weight:700}

/* ── Bar chart ── */
.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:140px;
  padding-top:10px;
}
.bar-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  flex:1;
  height:100%;
}
.bar-fill{
  width:100%;
  min-height:4px;
  border-radius:1px 1px 0 0;
  transition:height .6s ease-out;
}
.bar-chart:not(.animated) .bar-fill{
  height:0 !important;
}
.bar-col:nth-child(1) .bar-fill{transition-delay:0s}
.bar-col:nth-child(2) .bar-fill{transition-delay:.03s}
.bar-col:nth-child(3) .bar-fill{transition-delay:.06s}
.bar-col:nth-child(4) .bar-fill{transition-delay:.09s}
.bar-col:nth-child(5) .bar-fill{transition-delay:.12s}
.bar-col:nth-child(6) .bar-fill{transition-delay:.15s}
.bar-col:nth-child(7) .bar-fill{transition-delay:.18s}
.bar-col:nth-child(8) .bar-fill{transition-delay:.21s}
.bar-col:nth-child(9) .bar-fill{transition-delay:.24s}
.bar-col:nth-child(10) .bar-fill{transition-delay:.27s}
.bar-col:nth-child(11) .bar-fill{transition-delay:.30s}
.bar-col:nth-child(12) .bar-fill{transition-delay:.33s}
.bar-col:nth-child(13) .bar-fill{transition-delay:.36s}
.bar-col:nth-child(14) .bar-fill{transition-delay:.39s}
.bar-col:nth-child(15) .bar-fill{transition-delay:.42s}
.bar-col:nth-child(16) .bar-fill{transition-delay:.45s}
.bar-col:nth-child(17) .bar-fill{transition-delay:.48s}
.bar-col:nth-child(18) .bar-fill{transition-delay:.51s}
.bar-col:nth-child(19) .bar-fill{transition-delay:.54s}
.bar-col:nth-child(20) .bar-fill{transition-delay:.57s}
.bar-label{
  font-size:.5rem;
  color:var(--fg3);
  font-weight:600;
  margin-top:4px;
  flex-shrink:0;
}
.bar-legend{
  display:flex;
  gap:1.2rem;
  margin-top:.8rem;
  font-size:.55rem;
  color:var(--fg2);
}
.bar-legend span{display:flex;align-items:center;gap:.3rem}
.bl-dot{width:8px;height:8px;border-radius:1px;flex-shrink:0}

/* ── Research citations ── */
.cite-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  margin-bottom:2.5rem;
  transition:background .4s;
}
.cite-card{
  background:var(--bg);
  padding:1.8rem;
  transition:background .4s;
}
.cite-card:hover{background:rgba(128,128,128,.08)}
.cite-year{
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--red);
  margin-bottom:.6rem;
}
.cite-title{font-size:.72rem;font-weight:700;line-height:1.5;margin-bottom:.5rem}
.cite-authors{font-size:.6rem;color:var(--fg3);margin-bottom:.6rem;font-style:italic}
.cite-finding{font-size:.65rem;line-height:1.7;color:var(--fg2)}
.cite-journal{font-size:.5rem;color:var(--fg3);margin-top:.6rem;letter-spacing:.05em}

/* ── Image split ── */
.img-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
}
.img-split-img{height:400px;overflow:hidden}
.img-split-img img,.img-split-img video{width:100%;height:100%;object-fit:cover}
.img-split-content{
  padding:3.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid var(--border);
}
.img-split-content .lab{
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.8rem;
}
.img-split-content h2{
  font-family:'Instrument Serif',serif;
  font-size:1.8rem;
  font-weight:400;
  line-height:1.15;
  margin-bottom:1rem;
}
.img-split-content p{
  font-size:.75rem;
  line-height:1.8;
  color:var(--fg2);
  margin-bottom:1.5rem;
}

/* ── Stats row ── */
.stats-row{
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.sr-cell{
  padding:2rem;
  border-right:1px solid var(--border);
  text-align:center;
  transition:background .3s;
}
.sr-cell:last-child{border-right:none}
.sr-cell:hover{background:rgba(128,128,128,.08)}
.sr-val{font-size:2rem;font-weight:700;line-height:1;margin-bottom:.3rem}
.sr-val.red{color:var(--red)}
.sr-lbl{
  font-size:.5rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg3);
}

/* ── Timeline infographic ── */
.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--border);
  margin:2rem 0;
}
.tl-phase{
  padding:1.5rem;
  border-right:1px solid var(--border);
  position:relative;
}
.tl-phase:last-child{border-right:none}
.tl-phase::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
}
.tl-phase:nth-child(1)::before{background:var(--z2)}
.tl-phase:nth-child(2)::before{background:var(--z3)}
.tl-phase:nth-child(3)::before{background:var(--z4)}
.tl-phase:nth-child(4)::before{background:var(--z1)}
.tl-weeks{
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--fg3);
  margin-bottom:.5rem;
}
.tl-name{font-size:.75rem;font-weight:700;margin-bottom:.3rem}
.tl-desc{font-size:.6rem;line-height:1.6;color:var(--fg2)}
.tl-focus{
  font-size:.5rem;
  color:var(--red);
  font-weight:700;
  margin-top:.5rem;
  letter-spacing:.05em;
}

/* ── Plan Builder (interactive) ── */
.planner{padding:0 2.5rem;border-top:1px solid var(--border)}
.planner-inner{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:0;
}
.pl-left{
  border-right:1px solid var(--border);
  padding:3.5rem 2.5rem 3.5rem 0;
}
.pl-left .lab{
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.8rem;
}
.pl-left h2{
  font-family:'Instrument Serif',serif;
  font-size:1.8rem;
  font-weight:400;
  line-height:1.15;
  margin-bottom:.8rem;
}
.pl-left>p{font-size:.75rem;line-height:1.7;color:var(--fg2);margin-bottom:2rem}
.pl-right{padding:3.5rem 0 3.5rem 2.5rem}

/* Form controls */
.pl-form{display:flex;flex-direction:column;gap:1.5rem}
.pl-field label{
  display:block;
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fg3);
  margin-bottom:.5rem;
}

/* Segmented buttons */
.seg-group{
  display:flex;
  gap:0;
  border:1px solid var(--border);
  transition:border-color .4s;
}
.seg-btn{
  flex:1;
  padding:.6rem .3rem;
  background:0;
  border:0;
  border-right:1px solid var(--border);
  color:var(--fg2);
  font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  text-align:center;
  transition:all .2s;
}
.seg-btn:last-child{border-right:none}
.seg-btn:hover{background:rgba(128,128,128,.08);color:var(--fg)}
.seg-btn.active{background:var(--red);color:#fff}

/* Range slider */
.pl-range{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--border);
  outline:none;
  border-radius:0;
  cursor:pointer;
  transition:background .4s;
}
.pl-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  background:var(--red);
  border:0;
  cursor:pointer;
}
.pl-range::-moz-range-thumb{
  width:16px;
  height:16px;
  background:var(--red);
  border:0;
  border-radius:0;
  cursor:pointer;
}
.range-labels{display:flex;justify-content:space-between;margin-top:.4rem}
.range-labels span{font-size:.5rem;color:var(--fg3)}
.range-val{font-size:.75rem;font-weight:700;color:var(--fg);margin-left:.5rem}

/* Generated plan output */
.gen-plan{
  border:1px solid var(--border);
  margin-top:0;
  transition:border-color .4s;
}
.gp-header{
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.4rem .8rem;
  transition:border-color .4s;
}
.gp-header h4{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  flex-shrink:0;
}
.gp-header .gp-sub{
  font-size:.5rem;
  color:var(--fg3);
  letter-spacing:.06em;
  font-weight:500;
}
.gp-header .gp-meta{
  display:flex;
  gap:.8rem;
  align-items:center;
  margin-left:auto;
}
.gp-badge{
  font-size:.5rem;
  font-weight:700;
  color:var(--red);
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--red);
  padding:.15rem .4rem;
}
.gp-stat{font-size:.5rem;color:var(--fg3);letter-spacing:.06em}
.gp-stat strong{color:var(--fg);font-weight:700}
.gp-row{
  display:flex;
  align-items:center;
  padding:.5rem 1.5rem;
  border-bottom:1px solid rgba(128,128,128,.06);
  font-size:.7rem;
  transition:background .15s;
}
.gp-row:last-child{border:none}
.gp-row:hover{background:rgba(128,128,128,.08)}
.gp-day{width:2.5rem;font-weight:700;color:var(--fg)}
.gp-type{
  width:5rem;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gp-desc{flex:1;color:var(--fg2)}
.gp-km{width:3rem;text-align:right;color:var(--fg3);font-size:.6rem}
.gp-zone{font-weight:700;font-size:.55rem;padding:.1rem .35rem;margin-right:.5rem}
.gp-zone.z1{color:var(--z1)}
.gp-zone.z2{color:var(--z2)}
.gp-zone.z3{color:var(--z3)}
.gp-zone.z4{color:var(--z4)}
.gp-zone.rest{color:var(--fg3)}
.gp-foot{
  padding:1rem 1.5rem;
  border-top:1px solid var(--border);
  transition:border-color .4s;
}
.gp-zone-bars{display:flex;height:6px;gap:2px;overflow:hidden}
.gp-zone-bars .zb{transition:flex .4s}
.gp-legend{display:flex;gap:1rem;margin-top:.5rem;flex-wrap:wrap}
.gp-legend span{
  font-size:.5rem;
  color:var(--fg3);
  display:flex;
  align-items:center;
  gap:.3rem;
}
.gp-legend span::before{content:'';width:8px;height:4px;display:inline-block}
.gp-legend .lz1::before{background:var(--z1)}
.gp-legend .lz2::before{background:var(--z2)}
.gp-legend .lz3::before{background:var(--z3)}
.gp-legend .lz4::before{background:var(--z4)}
.gp-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--border);
  margin-top:1rem;
  transition:border-color .4s;
}
.gps-cell{
  padding:.8rem 0;
  text-align:center;
  border-right:1px solid var(--border);
  transition:border-color .4s;
}
.gps-cell:last-child{border-right:none}
.gps-val{font-size:1.2rem;font-weight:700;line-height:1}
.gps-val.red{color:var(--red)}
.gps-lbl{
  font-size:.45rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg3);
  margin-top:.2rem;
}

/* Plan display (static) */
.plan-display{border:1px solid var(--border);padding:2rem;margin-bottom:2rem}
.pd-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.pd-header h4{
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pd-badge{
  font-size:.5rem;
  font-weight:700;
  color:var(--red);
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--red);
  padding:.15rem .4rem;
}
.pd-row{
  display:flex;
  align-items:center;
  padding:.45rem 0;
  border-bottom:1px solid rgba(128,128,128,.06);
  font-size:.7rem;
}
.pd-row:last-child{border:none}
.pd-day{width:2.5rem;font-weight:700;color:var(--fg)}
.pd-desc{flex:1;color:var(--fg2)}
.pd-km{width:3rem;text-align:right;color:var(--fg3);font-size:.6rem}
.pd-zone{font-weight:700;font-size:.55rem;padding:.1rem .35rem;margin-right:.5rem}
.pd-zone.z1{color:var(--z1)}
.pd-zone.z2{color:var(--z2)}
.pd-zone.z3{color:var(--z3)}
.pd-zone.z4{color:var(--z4)}
.zone-bars{display:flex;height:6px;gap:2px;margin-top:1.5rem;overflow:hidden}
.zb.z1{flex:15;background:var(--z1)}
.zb.z2{flex:55;background:var(--z2)}
.zb.z3{flex:15;background:var(--z3)}
.zb.z4{flex:10;background:var(--z4)}
.zb.z5{flex:5;background:var(--z5)}
.zone-legend{display:flex;gap:1rem;margin-top:.6rem}
.zl-item{
  font-size:.5rem;
  color:var(--fg3);
  display:flex;
  align-items:center;
  gap:.3rem;
}
.zl-item::before{content:'';width:8px;height:4px}
.zl-item.z1::before{background:var(--z1)}
.zl-item.z2::before{background:var(--z2)}
.zl-item.z3::before{background:var(--z3)}
.zl-item.z4::before{background:var(--z4)}

/* ── Features grid ── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.feat-cell{
  padding:1.5rem;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  transition:background .3s;
}
.feat-cell:nth-child(3n){border-right:none}
.feat-cell:nth-child(n+4){border-bottom:none}
.feat-cell:hover{background:rgba(128,128,128,.08)}
.feat-cell h4{
  font-size:.7rem;
  font-weight:700;
  margin-bottom:.3rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.feat-cell h4 .dot{width:5px;height:5px;background:var(--red);display:inline-block}
.feat-cell p{font-size:.65rem;line-height:1.7;color:var(--fg2)}

/* ── Science Promo Sections ── */
.science-promo{
  padding:5rem 2.5rem;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.science-promo.alt{
  background:var(--bg2);
}
.sp-inner{
  max-width:800px;
  margin:0 auto;
}
.sp-tag{
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:600;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.sp-tag::before{
  content:'';
  width:24px;
  height:1px;
  background:var(--red);
}
.science-promo h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
  margin-bottom:1.2rem;
}
.science-promo h2 .it{
  font-style:italic;
  color:var(--red);
}
.science-promo p{
  font-size:.8rem;
  color:var(--fg2);
  line-height:1.8;
  margin-bottom:1.5rem;
  max-width:600px;
}
.sp-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.7rem;
  font-weight:600;
  color:var(--fg);
  text-decoration:none;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:color .3s;
}
.sp-link:hover{color:var(--red)}
.sp-link span{
  transition:transform .3s;
}
.sp-link:hover span{
  transform:translateX(4px);
}

/* ── CTA ── */
.cta-s{padding:5rem 2.5rem;text-align:center;border-top:1px solid var(--border)}
.cta-s-inner{max-width:700px;margin:0 auto}
.cta-s h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.03em;
  margin-bottom:1rem;
}
.cta-s h2 .it{font-style:italic;color:var(--red)}
.cta-s p{
  font-size:.8rem;
  color:var(--fg2);
  line-height:1.7;
  margin-bottom:2rem;
  max-width:450px;
  margin-left:auto;
  margin-right:auto;
}
.cta-s .btn-r{padding:.8rem 3rem;font-size:.7rem}

/* ── Footer ── */
footer{
  border-top:1px solid var(--border);
  padding:2rem 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1400px;
  margin:0 auto;
  transition:border-color .4s;
}
.ftb{font-family:'Instrument Serif',serif;font-size:.9rem;color:var(--fg3)}
.ftl{display:flex;gap:1.5rem}
.ftl a{
  font-size:.55rem;
  color:var(--fg3);
  text-decoration:none;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  transition:color .3s;
}
.ftl a:hover{color:var(--fg)}

/* ── Dev banner ── */
.dev-banner{
  background:var(--red);
  color:#fff;
  text-align:center;
  padding:.4rem 2.5rem;
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  transition:background .4s;
}
nav{top:22px}

/* ── Waitlist input ── */
.waitlist{display:flex;gap:0;width:100%}
.waitlist input{
  flex:1;
  padding:.65rem .8rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-right:0;
  color:var(--fg);
  font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;
  outline:none;
  transition:all .4s;
}
.waitlist input::placeholder{color:var(--fg3)}
.waitlist input:focus{border-color:var(--red)}
.waitlist .btn-r{flex-shrink:0;white-space:nowrap}
.waitlist.loading .btn-r{opacity:.6;pointer-events:none}
.waitlist.success input,.waitlist.success .btn-r{display:none}
.waitlist-msg{
  display:none;
  padding:.65rem .8rem;
  font-size:.6rem;
  font-family:'IBM Plex Mono',monospace;
  width:100%;
}
.waitlist.success .waitlist-msg{
  display:block;
  background:var(--z1-dim);
  border:1px solid var(--z1);
  color:var(--z1);
}
.waitlist.error .waitlist-msg{
  display:block;
  background:rgba(128,128,128,.08);
  border:1px solid var(--red);
  color:var(--red);
}
.waitlist .btn-r .spinner{
  display:none;
  width:12px;
  height:12px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin-right:.4rem;
}
.waitlist.loading .btn-r .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Language selector ── */
.lang-sel{position:relative}
.lang-btn{
  background:0;
  border:1px solid var(--border);
  color:var(--fg2);
  font-family:'IBM Plex Mono',monospace;
  font-size:.55rem;
  font-weight:600;
  letter-spacing:.06em;
  padding:.35rem .6rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.3rem;
  transition:.3s;
}
.lang-btn:hover{border-color:var(--red);color:var(--fg)}
.lang-btn::after{content:'▾';font-size:.5rem;color:var(--fg3)}
.lang-menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  background:var(--bg);
  border:1px solid var(--border);
  min-width:130px;
  z-index:200;
  display:none;
  flex-direction:column;
  transition:all .4s;
}
.lang-menu.open{display:flex}
.lang-opt{
  padding:.5rem .8rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.55rem;
  font-weight:500;
  color:var(--fg2);
  cursor:pointer;
  border:0;
  background:0;
  text-align:left;
  display:flex;
  align-items:center;
  gap:.5rem;
  transition:all .15s;
  border-bottom:1px solid var(--border);
}
.lang-opt:last-child{border-bottom:none}
.lang-opt:hover{background:rgba(128,128,128,.08);color:var(--fg)}
.lang-opt.active{color:var(--red);font-weight:700}
.lang-native{color:var(--fg3);margin-left:auto;font-size:.5rem}

/* ── Animation ── */
.an{
  opacity:0;
  transform:translateY(18px);
  transition:all .6s cubic-bezier(.25,.46,.45,.94);
}
.an.v{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-right{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:2rem}
  .hero-meta{gap:2rem}
  .grid-s-inner,.research-hd{grid-template-columns:1fr}
  .gs-left,.research-hd .rh-left{border-right:none;border-bottom:1px solid var(--border);padding:2rem 0}
  .gs-right,.research-hd .rh-right{padding:2rem 0}
  .planner-inner{grid-template-columns:1fr}
  .pl-left{border-right:none;border-bottom:1px solid var(--border);padding:2rem 0}
  .pl-right{padding:2rem 0}
  .infographic{grid-template-columns:1fr}
  .cite-grid{grid-template-columns:1fr}
  .img-split{grid-template-columns:1fr}
  .img-split-content{border-left:none;border-top:1px solid var(--border)}
  .stats-row{grid-template-columns:repeat(3,1fr)}
  .sr-cell:nth-child(3){border-right:none}
  .timeline{grid-template-columns:1fr 1fr}
  .tl-phase:nth-child(2){border-right:none}
  .tl-phase:nth-child(3),.tl-phase:nth-child(4){border-top:1px solid var(--border)}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-cell:nth-child(3n){border-right:1px solid var(--border)}
  .feat-cell:nth-child(2n){border-right:none}
}

@media(max-width:600px){
  nav{padding:.6rem 1.2rem}
  .nl span{display:none}
  .nri a{display:none}
  .hero{padding:6rem 1.2rem 3rem}
  .hero h1{font-size:clamp(3rem,12vw,5rem)}
  .hero-meta{flex-wrap:wrap;gap:1.5rem}
  .grid-s,.research,.planner{padding-left:1.2rem;padding-right:1.2rem}
  .feat-grid{grid-template-columns:1fr}
  .feat-cell{border-right:none!important}
  .stats-row{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr}
  .tl-phase{border-right:none!important;border-bottom:1px solid var(--border)}
  .tl-phase:last-child{border-bottom:none}
  .img-band{height:250px}
  .img-split-img{height:250px}
  .science-promo{padding:3rem 1.2rem}
  .cta-s{padding:3rem 1.2rem}
  footer{flex-direction:column;gap:1rem;text-align:center;padding:1.5rem 1.2rem}
  .donut-chart{flex-direction:column}
  [data-theme="light"] .hero-right{border-top-color:var(--border)}
}