/* ============================================================
   DarkGrow — Open Research Collective
   Design system v2 · editorial / laboratory
   ============================================================ */

:root{
  --ink:#0A0B09;
  --surface:#101210;
  --surface-2:#161814;
  --surface-3:#1C1F18;
  --line:#252921;
  --line-soft:#1A1D17;
  --lime:#5BD20F;
  --lime-soft:#A8E86A;
  --lime-dim:#3E7A22;
  --paper:#F2F4ED;
  --paper-dim:#C9CDC0;
  --muted:#8D9285;
  --muted-dim:#666B5E;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1180px;
  --pad:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--paper);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

::selection{background:var(--lime);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:1px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--lime);color:var(--ink);
  padding:12px 20px;font-family:var(--mono);font-size:.8rem;
}
.skip-link:focus{left:8px;top:8px}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ---------- typography primitives ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--lime-dim);
  flex:none;
}

h1,h2,h3{font-weight:400;letter-spacing:-.02em}

.display{
  font-family:var(--serif);
  font-size:clamp(2.6rem,6.2vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.025em;
  color:var(--paper);
}
.display em{
  font-style:italic;
  color:var(--lime-soft);
}

.section-title{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.1;
  letter-spacing:-.02em;
}

.lede{
  color:var(--paper-dim);
  font-size:1.0625rem;
  max-width:62ch;
}

/* ---------- navigation ---------- */

.navbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  background:rgba(10,11,9,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.navbar.is-scrolled{
  background:rgba(10,11,9,.94);
  border-bottom-color:var(--line);
}

.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:66px;
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:11px;
  flex:none;
}
.mark{
  width:26px;height:26px;flex:none;
  color:var(--lime);
  transition:transform .5s var(--ease);
}
.nav-logo:hover .mark{transform:rotate(-8deg)}

.logo-text{
  font-family:var(--sans);
  font-weight:700;
  font-size:.98rem;
  letter-spacing:-.01em;
  color:var(--paper);
}
.logo-text span{color:var(--lime)}

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  font-family:var(--mono);
  font-size:.735rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  padding:9px 13px;
  border-radius:2px;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-links a:hover{color:var(--paper);background:var(--surface-2)}
.nav-links a.active{color:var(--lime)}

.nav-right{display:flex;align-items:center;gap:12px}

.nav-cta{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--lime);
  padding:9px 16px;
  border-radius:2px;
  font-weight:500;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.nav-cta:hover{background:var(--lime-soft);transform:translateY(-1px)}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;height:40px;
  background:none;border:1px solid var(--line);
  border-radius:2px;cursor:pointer;
  padding:0 10px;
}
.nav-toggle span{
  display:block;height:1.5px;width:100%;
  background:var(--paper);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero ---------- */

.hero{
  position:relative;
  padding:150px 0 90px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

/* laboratory graph paper */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,rgba(242,244,237,.038) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,244,237,.038) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 15%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 15%,#000 25%,transparent 78%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  top:-260px;right:-160px;
  width:640px;height:640px;
  background:radial-gradient(circle,rgba(91,210,15,.13) 0%,transparent 68%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  background:rgba(22,24,20,.7);
  color:var(--lime-soft);
  font-family:var(--mono);
  font-size:.685rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:2px;
  margin-bottom:26px;
}
.pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 0 rgba(91,210,15,.6);
  animation:pulse 2.4s infinite;
  flex:none;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(91,210,15,0)}
  100%{box-shadow:0 0 0 0 rgba(91,210,15,0)}
}

.hero .display{margin-bottom:24px}

.hero-sub{
  font-size:1.0625rem;
  color:var(--paper-dim);
  max-width:54ch;
  margin-bottom:34px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:52px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,auto);
  justify-content:start;
  gap:clamp(26px,4vw,56px);
  border-top:1px solid var(--line);
  padding-top:24px;
}
.stat-num{
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1;
  color:var(--paper);
  display:block;
  margin-bottom:6px;
  white-space:nowrap;
}
.stat-num em{font-style:normal;color:var(--lime)}
.stat-num{font-size:1.55rem}
.stat-label{
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
}

/* spec panel */
.spec-panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-radius:3px;
  overflow:hidden;
}
.spec-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.spec-head b{color:var(--lime);font-weight:500}
.spec-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
  padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.74rem;
}
.spec-row:last-child{border-bottom:0}
.spec-row dt{color:var(--muted-dim);letter-spacing:.05em}
.spec-row dd{color:var(--paper);letter-spacing:.02em;text-align:right}
.spec-row dd.hi{color:var(--lime-soft)}
.spec-foot{
  padding:13px 16px;
  background:rgba(91,210,15,.045);
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.08em;
  color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 24px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.btn svg{width:13px;height:13px;flex:none}

.btn-primary{
  background:var(--lime);
  color:var(--ink);
  font-weight:500;
}
.btn-primary:hover{background:var(--lime-soft);transform:translateY(-2px)}

.btn-ghost{
  background:transparent;
  color:var(--paper);
  border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime-soft);transform:translateY(-2px)}

.btn-link{
  background:none;border:0;padding:0;
  color:var(--lime-soft);
  font-family:var(--mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
}
.btn-link svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.btn-link:hover svg{transform:translateX(4px)}

/* ---------- ticker ---------- */

.ticker{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;
  padding:13px 0;
}
.ticker-track{
  display:flex;
  gap:44px;
  width:max-content;
  animation:ticker 46s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
  display:flex;align-items:center;gap:44px;
  white-space:nowrap;
}
.ticker span::after{
  content:"◆";
  color:var(--lime-dim);
  font-size:.5rem;
}
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- generic section ---------- */

.section{padding:92px 0}
.section + .section{border-top:1px solid var(--line)}
.section-alt{background:var(--surface)}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:52px;
}
.section-head > div{max-width:58ch}
.section-head .eyebrow{margin-bottom:16px}

/* ---------- research rows (numbered list) ---------- */

.rows{border-top:1px solid var(--line)}

.row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,1.05fr) 24px;
  gap:clamp(16px,3vw,40px);
  align-items:baseline;
  padding:26px 16px 26px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.row::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--lime);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s var(--ease);
}
.row:hover{background:var(--surface-2);padding-left:16px}
.row:hover::before{transform:scaleY(1)}

.row-num{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted-dim);
  letter-spacing:.08em;
  padding-top:.35em;
}
.row h3{
  font-family:var(--serif);
  font-size:1.42rem;
  line-height:1.2;
  letter-spacing:-.015em;
}
.row p{
  color:var(--muted);
  font-size:.925rem;
  line-height:1.6;
}
.row-arrow{
  color:var(--muted-dim);
  transition:color .3s var(--ease),transform .3s var(--ease);
  align-self:center;
}
.row-arrow svg{width:15px;height:15px}
.row:hover .row-arrow{color:var(--lime);transform:translate(3px,-3px)}

/* ---------- discussion list ---------- */

.discuss-head{
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 150px 110px;
  gap:clamp(14px,3vw,32px);
  padding:0 16px 12px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:.645rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
}
.discuss-head span:nth-child(3),
.discuss-head span:nth-child(4){text-align:right}

.thread{
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 150px 110px;
  gap:clamp(14px,3vw,32px);
  align-items:center;
  padding:20px 16px 20px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.thread::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--lime);
  transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease);
}
.thread:hover{background:var(--surface-2);padding-left:16px}
.thread:hover::before{transform:scaleY(1)}

.thread-avatar{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface-3);
  display:grid;place-items:center;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--lime-soft);
  letter-spacing:.02em;
}
.thread-title{
  display:block;
  font-size:.975rem;
  font-weight:500;
  letter-spacing:-.005em;
  color:var(--paper);
  margin-bottom:3px;
  transition:color .25s var(--ease);
}
.thread:hover .thread-title{color:var(--lime-soft)}
.thread-sub{
  display:block;
  font-family:var(--mono);
  font-size:.695rem;
  color:var(--muted-dim);
  letter-spacing:.03em;
}
.thread-author{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted);
  text-align:right;
  letter-spacing:.03em;
}
.thread-replies{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted-dim);
  text-align:right;
  letter-spacing:.03em;
}
.thread-replies b{color:var(--lime);font-weight:500}

/* ---------- instrumentation cards ---------- */

.instr-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.instr{
  background:var(--surface);
  padding:30px 26px 26px;
  display:flex;
  flex-direction:column;
  transition:background .3s var(--ease);
}
.instr:hover{background:var(--surface-2)}

.instr-tag{
  font-family:var(--mono);
  font-size:.645rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.instr-tag .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--lime-dim);
}
.instr-icon{
  width:34px;height:34px;
  color:var(--lime-soft);
  margin-bottom:18px;
}
.instr h3{
  font-family:var(--serif);
  font-size:1.32rem;
  line-height:1.2;
  margin-bottom:10px;
}
.instr p{
  color:var(--muted);
  font-size:.895rem;
  line-height:1.6;
  margin-bottom:22px;
  flex:1;
}
.instr-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line-soft);
  padding-top:16px;
}
.instr-price{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--paper);
  letter-spacing:.02em;
}
.instr-price small{
  display:block;
  font-size:.6rem;
  color:var(--muted-dim);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:3px;
}

/* ---------- quote / principle block ---------- */

.pullquote{
  border-left:2px solid var(--lime);
  padding:6px 0 6px 30px;
  max-width:74ch;
}
.pullquote p{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.6vw,1.95rem);
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--paper);
}
.pullquote cite{
  display:block;
  margin-top:18px;
  font-family:var(--mono);
  font-style:normal;
  font-size:.685rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
}

/* ---------- CTA ---------- */

.cta{
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 130% at 50% 130%,rgba(91,210,15,.14) 0%,transparent 70%),
    var(--surface);
  text-align:center;
  padding:96px 0;
}
.cta .display{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:18px}
.cta p{
  color:var(--muted);
  max-width:52ch;
  margin:0 auto 34px;
}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */

.footer{
  border-top:1px solid var(--line);
  background:var(--ink);
  padding:66px 0 26px;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.8fr));
  gap:clamp(28px,4vw,56px);
  padding-bottom:48px;
  border-bottom:1px solid var(--line);
}
.footer-brand p{
  color:var(--muted);
  font-size:.905rem;
  max-width:34ch;
  margin-top:16px;
}
.footer-brand .nav-logo{margin-bottom:4px}

.footer-col h4{
  font-family:var(--mono);
  font-size:.645rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
  font-weight:400;
  margin-bottom:16px;
}
.footer-col li{margin-bottom:10px}
.footer-col a{
  color:var(--paper-dim);
  font-size:.885rem;
  transition:color .25s var(--ease);
}
.footer-col a:hover{color:var(--lime)}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-top:24px;
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.06em;
  color:var(--muted-dim);
}
.footer-bottom a{color:var(--muted-dim)}
.footer-bottom a:hover{color:var(--lime)}

/* ---------- inner page hero ---------- */

.page-hero{
  padding:132px 0 56px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  top:-260px;right:-120px;
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(91,210,15,.09) 0%,transparent 70%);
  pointer-events:none;
}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero .display{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:18px}
.page-hero .lede{font-size:1.0rem}
.page-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:0}

/* ---------- content blocks ---------- */

.prose{max-width:70ch}
.prose p{color:var(--paper-dim);margin-bottom:20px;font-size:.99rem}
.prose p:last-child{margin-bottom:0}
.prose h3{
  font-family:var(--serif);
  font-size:1.6rem;
  margin:38px 0 14px;
  letter-spacing:-.015em;
}
.prose h3:first-child{margin-top:0}

.card{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:3px;
  padding:30px clamp(22px,3vw,34px);
}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.grid-2 > *{background:var(--surface);padding:28px clamp(20px,3vw,30px)}
.grid-2 h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:10px}
.grid-2 p{color:var(--muted);font-size:.9rem;line-height:1.62}

.fact-list{border-top:1px solid var(--line);margin-top:8px}
.fact{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.fact dt{
  font-family:var(--mono);
  font-size:.685rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted-dim);
  padding-top:.2em;
}
.fact dd{color:var(--paper-dim)}

/* ---------- form ---------- */

.form-grid{display:grid;gap:18px}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:9px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--paper);
  font-family:var(--sans);
  font-size:.95rem;
  padding:13px 15px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238D9285' stroke-width='1.6'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:13px;
  padding-right:38px;
  cursor:pointer;
}
.field textarea{resize:vertical;min-height:132px}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted-dim)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--lime);
  background:var(--surface-2);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.05em;
  color:var(--muted-dim);
  line-height:1.7;
}

/* ---------- banner ---------- */

.notice{
  border:1px solid var(--line);
  border-left:2px solid var(--lime);
  background:var(--surface-2);
  padding:18px 22px;
  font-size:.9rem;
  color:var(--paper-dim);
  border-radius:2px;
}
.notice strong{color:var(--lime-soft);font-weight:500}

/* ---------- reveal on scroll ---------- */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */

@media (max-width:1024px){
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:44px}
  .spec-panel{max-width:520px}
  .instr-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .nav-links{
    position:fixed;
    inset:66px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    padding:10px 16px 20px;
    transform:translateY(-130%);
    transition:transform .4s var(--ease);
    z-index:999;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{
    padding:14px 10px;
    border-bottom:1px solid var(--line-soft);
    font-size:.8rem;
  }
  .nav-links li:last-child a{border-bottom:0}
  .nav-toggle{display:flex}
  .nav-cta{display:none}

  .row{grid-template-columns:40px minmax(0,1fr) 20px;row-gap:8px}
  .row p{grid-column:2/4}
  .discuss-head{display:none}
  .thread{grid-template-columns:40px minmax(0,1fr);row-gap:6px}
  .thread-author,.thread-replies{grid-column:2;text-align:left}
  .thread-replies{color:var(--muted-dim)}
  .instr-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px}
  .section{padding:70px 0}
}

@media (max-width:560px){
  :root{--pad:18px}
  .hero{padding:118px 0 62px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:22px}
  .field-row{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;gap:4px}
  .footer-top{grid-template-columns:1fr}
  .cta{padding:70px 0}
  .display{font-size:clamp(2.1rem,9vw,2.9rem)}
}

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

/* ============================================================
   Product / commerce components
   ============================================================ */

.instr-tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.02rem;
  line-height:1.35;
  color:var(--lime-soft);
  margin-bottom:12px;
}

.instr-price s{
  color:var(--muted-dim);
  font-size:.75em;
  margin-left:6px;
}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:2px;
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--surface-2);
}
.badge-lime{border-color:rgba(91,210,15,.4);color:var(--lime-soft);background:rgba(91,210,15,.07)}

/* ---------- kit contents checklist ---------- */

.kit-list{border-top:1px solid var(--line)}
.kit-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.kit-tick{
  width:18px;height:18px;flex:none;
  border:1px solid var(--lime-dim);
  border-radius:2px;
  display:grid;place-items:center;
  color:var(--lime);
}
.kit-tick svg{width:11px;height:11px}
.kit-item strong{font-weight:500;font-size:.95rem;display:block}
.kit-item span{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}
.kit-qty{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted-dim);
  letter-spacing:.06em;
  white-space:nowrap;
}

/* ---------- numbered steps ---------- */

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  counter-reset:step;
}
.step{
  background:var(--surface);
  padding:28px 24px;
  position:relative;
  transition:background .3s var(--ease);
}
.step:hover{background:var(--surface-2)}
.step::before{
  counter-increment:step;
  content:"0" counter(step);
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.13em;
  color:var(--lime);
  margin-bottom:16px;
}
.step h3{
  font-family:var(--serif);
  font-size:1.22rem;
  line-height:1.25;
  margin-bottom:9px;
}
.step p{color:var(--muted);font-size:.875rem;line-height:1.6}
.step .step-note{
  display:block;
  margin-top:12px;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.07em;
  color:var(--muted-dim);
  text-transform:uppercase;
}

/* ---------- do / don't comparison ---------- */

.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.compare-col{background:var(--surface);padding:28px clamp(20px,3vw,30px)}
.compare-col.no{border-top:2px solid #C4553A}
.compare-col.yes{border-top:2px solid var(--lime)}
.compare-col h3{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-size:.72rem;
  font-family:var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:18px;
  color:var(--muted);
}
.compare-col.no h3 .cmp-mark{color:#C4553A}
.compare-col.yes h3 .cmp-mark{color:var(--lime)}
.cmp-mark{font-size:1rem;line-height:1}
.compare-col p{color:var(--paper-dim);font-size:.9rem;line-height:1.65}
.compare-col p + p{margin-top:12px}

/* ---------- status / progress ---------- */

.status-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.status-cell{background:var(--surface);padding:22px 24px}
.status-cell dt{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
  margin-bottom:8px;
}
.status-cell dd{
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--paper);
  line-height:1.1;
}
.status-cell dd small{
  display:block;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.08em;
  color:var(--muted-dim);
  margin-top:6px;
  text-transform:uppercase;
}

/* ---------- table ---------- */

.spec-table{width:100%;border-collapse:collapse;font-size:.9rem}
.spec-table th{
  text-align:left;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
  font-weight:400;
  padding:0 16px 12px 0;
  border-bottom:1px solid var(--line);
}
.spec-table td{
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--line);
  color:var(--paper-dim);
  vertical-align:top;
}
.spec-table td:first-child{color:var(--paper);font-weight:500;white-space:nowrap}
.spec-table td:last-child{font-family:var(--mono);font-size:.8rem;color:var(--lime-soft);text-align:right;white-space:nowrap}

/* crops table: compact rows, notes column wraps */
.spec-table--crops{min-width:880px;table-layout:fixed}
.spec-table--crops th:nth-child(1){width:15%}
.spec-table--crops th:nth-child(2){width:15%}
.spec-table--crops th:nth-child(3){width:8%}
.spec-table--crops th:nth-child(4){width:8%}
.spec-table--crops th:nth-child(5){width:6%}
.spec-table--crops th:nth-child(6){width:7%}
.spec-table--crops th:nth-child(7){width:41%}
.spec-table--crops td{
  vertical-align:top;
  padding:9px 14px 9px 0;
  line-height:1.42;
}
.spec-table--crops th{padding:0 14px 9px 0}
.spec-table--crops td:first-child{white-space:normal;font-size:.855rem}
.spec-table--crops td:nth-child(2){font-style:normal}
.spec-table--crops td:last-child{
  font-family:var(--sans);
  font-size:.785rem;
  color:var(--muted);
  text-align:left;
  white-space:normal;
  line-height:1.45;
}
.spec-table--crops td:nth-child(2){font-size:.83rem}

/* ---------- figure / citation ---------- */

.cite{
  font-family:var(--mono);
  font-size:.685rem;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--muted-dim);
  border-left:1px solid var(--line);
  padding-left:18px;
}
.cite b{color:var(--paper-dim);font-weight:400}

/* ---------- media ---------- */

@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .status-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .status-strip{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .spec-table td{font-size:.85rem}
  .spec-table td:first-child{white-space:normal}
}

/* ============================================================
   Photography: hero + hardware grid
   ============================================================ */

.hero-photo{position:relative;padding:150px 0 84px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:.42;
  filter:saturate(.9) contrast(1.05);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,11,9,.55) 0%,rgba(10,11,9,.80) 55%,rgba(10,11,9,.96) 100%),
    radial-gradient(ellipse 70% 80% at 25% 40%,rgba(10,11,9,.72) 0%,transparent 75%);
  pointer-events:none;
}
.hero-photo .hero-inner{position:relative;z-index:2}
.hero-photo::before,.hero-photo::after{display:none}

/* hardware grid */
.hgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.hcard{
  background:var(--surface);
  margin:0;
  display:flex;
  flex-direction:column;
  transition:background .3s var(--ease);
}
.hcard:hover{background:var(--surface-2)}
.hcard img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--line);
  filter:saturate(.92);
  transition:filter .4s var(--ease),transform .6s var(--ease);
}
.hcard:hover img{filter:saturate(1.05);transform:scale(1.015)}
.hcard figcaption{padding:20px 20px 24px;flex:1}
.hcard h3{
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.25;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.hcard p{color:var(--muted);font-size:.855rem;line-height:1.58}

/* wide feature image */
.feature-img{
  width:100%;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:var(--surface);
}
.feature-img img{width:100%;display:block}

@media (max-width:1024px){
  .hgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .hgrid{grid-template-columns:1fr}
  .hero-photo{padding:118px 0 58px}
  .hero-bg{object-position:60% 40%}
}

/* ---------- add-on feature block ---------- */

.addon{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.addon-media{
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(91,210,15,.07) 0%, transparent 70%),
    linear-gradient(160deg,#171A16,#101210);
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,38px);
  min-height:320px;
}
.addon-media img{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 98%);
}
.addon-body{padding:clamp(24px,3.4vw,44px);background:var(--surface)}
.addon-title{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.15;
  letter-spacing:-.015em;
  margin:14px 0 6px;
}
.addon-tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.06rem;
  color:var(--lime-soft);
  margin-bottom:16px;
}
.addon-desc{color:var(--muted);font-size:.93rem;line-height:1.68;max-width:52ch}
.addon-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* product photo card */
.instr-photo{padding-top:0}
.instr-photo-img{
  margin:0 calc(-1 * clamp(22px,3vw,34px)) 22px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(91,210,15,.06) 0%, transparent 72%),
    linear-gradient(170deg,#171A16,#101210);
  display:grid;place-items:center;
  padding:32px 24px 24px;
  border-bottom:1px solid var(--line);
}
.instr-photo-img img{
  width:100%;
  max-width:186px;
  height:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
}

@media (max-width:820px){
  .addon{grid-template-columns:1fr}
  .addon-media{min-height:240px;padding:26px}
  .addon-media img{max-width:300px}
}

/* ---------- grower notes ---------- */

.note-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.note-grid:empty{display:none}

.note{
  background:var(--surface);
  padding:clamp(20px,2.6vw,28px);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background .3s var(--ease);
}
.note:hover{background:var(--surface-2)}

.note-head{display:flex;align-items:center;gap:12px}
.note-avatar{
  width:36px;height:36px;flex:none;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface-3);
  display:grid;place-items:center;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--lime-soft);
  letter-spacing:.02em;
}
.note-who{display:flex;flex-direction:column;line-height:1.3}
.note-handle{font-size:.92rem;font-weight:500;color:var(--paper)}
.note-date{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--muted-dim)}

.note-crop{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--lime-soft);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.note-day{
  color:var(--muted-dim);
  letter-spacing:.06em;
}

.note-body{
  color:var(--paper-dim);
  font-size:.925rem;
  line-height:1.68;
  flex:1;
}

.note-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.badge-ai{
  border-color:rgba(91,210,15,.45);
  color:var(--lime-soft);
  background:rgba(91,210,15,.07);
}

/* empty state */
.note-empty{
  border:1px dashed var(--line);
  border-radius:3px;
  background:var(--surface);
  padding:clamp(34px,5vw,64px) clamp(22px,4vw,48px);
  text-align:center;
}
.note-empty-inner{max-width:52ch;margin:0 auto}
.note-empty h3{
  font-family:var(--serif);
  font-size:1.5rem;
  margin-bottom:12px;
  letter-spacing:-.015em;
}
.note-empty p{
  color:var(--muted);
  font-size:.93rem;
  line-height:1.68;
  margin-bottom:22px;
}

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

/* ---------- grower notes ---------- */

.note-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.note-grid:empty{display:none}

.note{
  background:var(--surface);
  padding:clamp(20px,2.4vw,26px);
  display:flex;
  flex-direction:column;
  gap:13px;
  transition:background .3s var(--ease);
}
.note:hover{background:var(--surface-2)}
.note-is-sample{background:linear-gradient(180deg,rgba(196,85,58,.045),var(--surface))}

.note-head{display:flex;align-items:center;gap:11px}
.note-avatar{
  width:34px;height:34px;flex:none;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface-3);
  display:grid;place-items:center;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--lime-soft);
  letter-spacing:.02em;
}
.note-who{display:flex;flex-direction:column;line-height:1.3}
.note-handle{
  font-size:.86rem;font-weight:500;color:var(--paper);
  font-family:var(--mono);letter-spacing:.02em;
}
.note-date{font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;color:var(--muted-dim)}

.note-crop{
  font-family:var(--mono);
  font-size:.69rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--lime-soft);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.note-day{color:var(--muted-dim);letter-spacing:.06em}

/* readings strip */
.note-readings{
  display:flex;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
}
.note-readings span{
  flex:1;
  background:var(--ink);
  padding:9px 8px;
  text-align:center;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-dim);
  white-space:nowrap;
}
.note-readings b{
  display:block;
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--paper);
  margin-bottom:3px;
  text-transform:none;
}

.note-body{
  color:var(--paper-dim);
  font-size:.905rem;
  line-height:1.65;
  flex:1;
}

.note-issue{
  font-size:.845rem;
  line-height:1.6;
  color:var(--muted);
  border-left:2px solid #C4553A;
  padding-left:12px;
}
.note-issue span{
  display:block;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#C4553A;
  margin-bottom:4px;
}

.note-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px}
.badge-ai{
  border-color:rgba(91,210,15,.45);
  color:var(--lime-soft);
  background:rgba(91,210,15,.07);
}
.badge-sample{
  border-color:rgba(196,85,58,.5);
  color:#E0855F;
  background:rgba(196,85,58,.09);
}

/* sample banner */
.note-banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid rgba(196,85,58,.4);
  border-left:2px solid #C4553A;
  background:rgba(196,85,58,.06);
  border-radius:2px;
  padding:16px 20px;
  margin-bottom:26px;
  font-size:.895rem;
  line-height:1.62;
  color:var(--paper-dim);
}
.note-banner strong{color:#E0855F;font-weight:500}

/* empty state */
.note-empty{
  border:1px dashed var(--line);
  border-radius:3px;
  background:var(--surface);
  padding:clamp(34px,5vw,64px) clamp(22px,4vw,48px);
  text-align:center;
}
.note-empty-inner{max-width:52ch;margin:0 auto}
.note-empty h3{
  font-family:var(--serif);
  font-size:1.5rem;
  margin-bottom:12px;
  letter-spacing:-.015em;
}
.note-empty p{
  color:var(--muted);
  font-size:.93rem;
  line-height:1.68;
  margin-bottom:22px;
}

@media (max-width:1000px){
  .note-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .note-grid{grid-template-columns:1fr}
}

/* ---------- capped feature image ---------- */

.feature-img--capped{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}
.feature-img--capped img{
  width:100%;
  height:auto;
  max-height:400px;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}
.feature-img figcaption{
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.06em;
  color:var(--muted-dim);
  padding:12px 16px;
  border-top:1px solid var(--line);
  background:var(--surface);
}

/* keep the hero-adjacent photo from ever dominating on tall screens */
@media (max-width:820px){
  .feature-img--capped{max-width:100%}
  .feature-img--capped img{max-height:280px}
}

/* ---------- crop card grid ---------- */

.crop-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.crop-tab{
  font-family:var(--mono);
  font-size:.665rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--line);
  border-radius:2px;
  padding:8px 14px;
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.crop-tab span{
  font-size:.6rem;
  color:var(--muted-dim);
  letter-spacing:.04em;
}
.crop-tab:hover{color:var(--paper);border-color:var(--lime-dim)}
.crop-tab.is-on{
  color:var(--ink);
  background:var(--lime);
  border-color:var(--lime);
  font-weight:500;
}
.crop-tab.is-on span{color:rgba(10,11,9,.65)}

.crop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}

.crop-card{
  background:var(--surface);
  padding:20px 22px 0;
  display:flex;
  flex-direction:column;
  transition:background .3s var(--ease);
}
.crop-card:hover{background:var(--surface-2)}
.crop-card[hidden]{display:none}

.crop-card-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:3px;
}
.crop-card h3{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--paper);
  line-height:1.3;
}
.crop-days{
  font-family:var(--mono);
  font-size:.79rem;
  color:var(--lime-soft);
  white-space:nowrap;
  flex:none;
}
.crop-days small{
  display:block;
  font-size:.55rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-dim);
  text-align:right;
  margin-top:1px;
}
.crop-species{
  font-style:italic;
  font-size:.775rem;
  color:var(--muted-dim);
  margin-bottom:9px;
}
.crop-note{
  font-size:.815rem;
  line-height:1.52;
  color:var(--muted);
  margin-bottom:16px;
  flex:1;
}
.crop-stats{
  display:flex;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  margin:0 -22px;
}
.crop-stats > div{
  flex:1;
  background:var(--ink);
  padding:8px 10px;
  display:flex;
  align-items:baseline;
  gap:7px;
}
.crop-stats dt{
  font-family:var(--mono);
  font-size:.575rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
}
.crop-stats dd{
  font-family:var(--mono);
  font-size:.755rem;
  color:var(--paper-dim);
}

@media (max-width:960px){
  .crop-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .crop-grid{grid-template-columns:1fr}
  .crop-stats{margin:0 -22px}
}

/* ============================================================
   Forum
   ============================================================ */

.forum-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.forum-search{
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--paper);
  font-family:var(--sans);
  font-size:.88rem;
  padding:11px 15px;
  min-width:250px;
  transition:border-color .25s var(--ease);
}
.forum-search::placeholder{color:var(--muted-dim)}
.forum-search:focus{outline:none;border-color:var(--lime)}

/* categories */
.forum-cats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.forum-cat{
  background:var(--surface);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-height:118px;
  transition:background .3s var(--ease);
  position:relative;
}
.forum-cat:hover{background:var(--surface-2)}
.forum-cat::after{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--lime);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.forum-cat:hover::after{transform:scaleY(1)}
.forum-cat-name{
  font-size:.95rem;font-weight:600;color:var(--paper);
  letter-spacing:-.005em;
}
.forum-cat-desc{
  font-size:.795rem;line-height:1.5;color:var(--muted);flex:1;
}
.forum-cat-count{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lime-dim);
}

/* thread list */
.forum-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}

.forum-list{
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:var(--surface);
}
.thread-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 130px 110px;
  gap:16px;
  align-items:center;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
  position:relative;
}
.thread-row:last-child{border-bottom:0}
.thread-row:hover{background:var(--surface-2)}
.thread-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--lime);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.thread-row:hover::before{transform:scaleY(1)}

.thread-row .thread-avatar{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-3);
  display:grid;place-items:center;font-family:var(--mono);
  font-size:.68rem;color:var(--lime-soft);
}
.thread-main{min-width:0}
.thread-main .thread-title{
  display:block;font-size:.925rem;font-weight:500;
  color:var(--paper);line-height:1.35;margin-bottom:3px;
  transition:color .25s var(--ease);
}
.thread-row:hover .thread-title{color:var(--lime-soft)}
.thread-main .thread-sub{
  display:block;font-family:var(--mono);font-size:.645rem;
  letter-spacing:.06em;color:var(--muted-dim);
}
.pill-pinned{
  font-family:var(--mono);font-size:.545rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);
  border:1px solid rgba(91,210,15,.4);border-radius:2px;
  padding:2px 6px;margin-right:8px;vertical-align:1px;
}
.thread-cat{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-dim);
  text-align:right;
}
.thread-nums{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;
  color:var(--muted-dim);text-align:right;line-height:1.5;
}
.thread-nums b{color:var(--lime-soft);font-weight:500}
.thread-nums span{display:block;font-size:.58rem;color:var(--muted-dim)}

.forum-empty{
  padding:40px 20px;text-align:center;color:var(--muted);
  font-size:.9rem;
}

/* ---------- thread view ---------- */
.thread-back{
  display:inline-block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:26px;transition:color .25s var(--ease);
}
.thread-back:hover{color:var(--lime)}

.thread-header{padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.thread-cat-tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime-soft);
  display:inline-block;margin-bottom:14px;
}
.thread-header h1{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.14;letter-spacing:-.02em;
  margin-bottom:12px;
}
.thread-byline{
  font-family:var(--mono);font-size:.655rem;letter-spacing:.07em;
  color:var(--muted-dim);
}

.post{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.post-op{
  background:linear-gradient(90deg,rgba(91,210,15,.035),transparent 45%);
  border-left:2px solid var(--lime);
  padding-left:22px;
  margin-left:-22px;
}
.post-side{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.post-avatar{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-3);
  display:grid;place-items:center;font-family:var(--mono);
  font-size:.74rem;color:var(--lime-soft);
}
.post-author{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
  color:var(--paper-dim);word-break:break-word;
}
.post-meta{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dim);
  margin-bottom:11px;
}
.post-text{
  font-size:.945rem;line-height:1.72;color:var(--paper-dim);
}

/* reply form */
.reply-form{
  margin-top:34px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface);
  padding:clamp(20px,3vw,30px);
  display:flex;flex-direction:column;gap:9px;
}
.reply-form label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:8px;
}
.reply-form input,.reply-form textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);
  border-radius:2px;color:var(--paper);font-family:var(--sans);
  font-size:.92rem;padding:12px 14px;resize:vertical;
}
.reply-form input:focus,.reply-form textarea:focus{
  outline:none;border-color:var(--lime);
}
.reply-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.reply-warning{color:#C4553A;opacity:.85;margin-top:8px}
.reply-form .form-note{color:var(--muted-dim)}

@media (max-width:980px){
  .forum-cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .thread-row{grid-template-columns:34px minmax(0,1fr);row-gap:6px}
  .thread-cat{display:none}
  .thread-nums{grid-column:2;text-align:left;display:flex;gap:10px;align-items:baseline}
  .thread-nums span{display:inline}
  .post{grid-template-columns:1fr;gap:12px}
  .post-side{flex-direction:row;align-items:center}
  .post-op{margin-left:0;padding-left:14px}
}
@media (max-width:560px){
  .forum-cats{grid-template-columns:1fr}
}

/* ---------- homepage forum entrance ---------- */

.forum-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 120% at 15% 50%, rgba(91,210,15,.07) 0%, transparent 70%),
    var(--surface);
  padding:clamp(48px,7vw,84px) 0;
}
.forum-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(26px,5vw,60px);
  flex-wrap:wrap;
}
.forum-band-inner > div{max-width:60ch}
.forum-band .eyebrow{margin-bottom:16px}
.forum-band-sub{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.66;
  margin-top:14px;
}
@media (max-width:700px){
  .forum-band-inner .btn{width:100%;justify-content:center}
}

/* ---------- forum as front page ---------- */

.forum-hero{
  padding:118px 0 44px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.forum-hero::before{
  content:"";
  position:absolute;top:-300px;right:-140px;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(91,210,15,.10) 0%,transparent 70%);
  pointer-events:none;
}
.forum-hero-top{
  position:relative;z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(26px,5vw,60px);
  flex-wrap:wrap;
  margin-bottom:32px;
}
.forum-hero-top > div:first-child{max-width:62ch}
.forum-hero .eyebrow{margin-bottom:16px}
.forum-hero .display{margin-bottom:16px}
.forum-hero .lede{font-size:1rem}

.forum-hero-stats{
  display:flex;
  gap:clamp(22px,3.4vw,44px);
  border-left:1px solid var(--line);
  padding-left:clamp(22px,3.4vw,44px);
}
.forum-hero-stats > div{display:flex;flex-direction:column;gap:4px}
.forum-hero-stats b{
  font-family:var(--serif);
  font-size:1.7rem;
  line-height:1;
  color:var(--paper);
  font-weight:400;
}
.forum-hero-stats span{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dim);
}

.forum-hero-actions{
  position:relative;z-index:1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.forum-section{padding:64px 0}
.forum-section .section-head{margin-bottom:36px}

/* shop cross-sell at the bottom of the thread list */
.forum-shop-strip{
  margin-top:34px;
  border:1px solid var(--line);
  border-left:2px solid var(--lime);
  border-radius:3px;
  background:linear-gradient(90deg,rgba(91,210,15,.05),var(--surface) 55%);
  padding:clamp(22px,3vw,30px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.forum-shop-strip h3{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:-.015em;
  margin-bottom:6px;
}
.forum-shop-strip p{
  color:var(--muted);
  font-size:.885rem;
  line-height:1.6;
  max-width:56ch;
}
.forum-shop-strip > div{max-width:60ch}

@media (max-width:820px){
  .forum-hero{padding:100px 0 34px}
  .forum-hero-stats{
    border-left:0;padding-left:0;
    border-top:1px solid var(--line);
    padding-top:20px;
    width:100%;
  }
  .forum-shop-strip .btn{width:100%;justify-content:center}
}

/* ---------- big cross-link buttons ---------- */

.biglink{padding:34px 0 8px}
.biglink .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.biglink-btn{
  background:var(--surface);
  padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"k k" "t arrow" "s arrow";
  align-items:center;
  column-gap:20px;
  row-gap:6px;
  transition:background .3s var(--ease);
  position:relative;
}
.biglink-btn:hover{background:var(--surface-2)}
.biglink-btn::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--lime);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.biglink-btn:hover::before{transform:scaleY(1)}

.biglink-k{
  grid-area:k;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-dim);
}
.biglink-t{
  grid-area:t;
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--paper);
}
.biglink-s{
  grid-area:s;
  font-size:.83rem;
  color:var(--muted);
  line-height:1.5;
}
.biglink-btn svg{
  grid-area:arrow;
  width:20px;height:20px;
  color:var(--muted-dim);
  transition:transform .3s var(--ease),color .3s var(--ease);
}
.biglink-btn:hover svg{color:var(--lime);transform:translateX(4px)}

.biglink-btn--primary{background:linear-gradient(150deg,rgba(91,210,15,.10),var(--surface) 62%)}
.biglink-btn--primary .biglink-t{color:var(--lime-soft)}

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

/* ---------- gene editing page ---------- */

.spec-table--ge{min-width:860px}
.spec-table--ge td:first-child{white-space:normal;font-weight:600}
.spec-table--ge td:nth-child(5){
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--muted);
  line-height:1.5;
  text-align:left;
}
.spec-table--ge .ge-status{
  font-family:var(--mono);
  font-size:.63rem;
  color:var(--lime-soft);
  text-align:right;
  white-space:normal;
  line-height:1.45;
}

.gene-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.gene-card{
  background:var(--surface);
  padding:24px 22px;
  transition:background .3s var(--ease);
}
.gene-card:hover{background:var(--surface-2)}
.gene-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.gene-head h3{
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  color:var(--lime-soft);
  letter-spacing:.02em;
}
.gene-head span{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-dim);
}
.gene-full{
  font-family:var(--serif);
  font-size:1.02rem;
  color:var(--paper);
  margin-bottom:10px;
  line-height:1.3;
}
.gene-desc{
  font-size:.83rem;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:960px){
  .gene-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .gene-grid{grid-template-columns:1fr}
}

/* ---------- sibling-site link beside the logo ---------- */

.nav-logo{flex:none}

.sitelink{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-left:14px;
  padding:6px 12px 6px 8px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface);
  text-decoration:none;
  flex:none;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.sitelink:hover{border-color:var(--lime-dim);background:var(--surface-2)}
.sitelink img{
  width:22px;height:22px;
  display:block;
  flex:none;
}
.sitelink-txt{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper);
  white-space:nowrap;
}
.sitelink-txt small{
  font-size:.53rem;
  letter-spacing:.12em;
  color:var(--muted-dim);
  margin-top:2px;
}
.sitelink:hover .sitelink-txt{color:var(--lime-soft)}

/* hide the text on tighter screens, keep the icon */
@media (max-width:1180px){
  .sitelink-txt{display:none}
  .sitelink{padding:6px}
}

/* ============================================================
   Ad slots
   ============================================================ */

.ad-slot{
  width:100%;
  margin:22px 0;
  display:block;
}
.ad-slot[data-ad-empty="true"]{margin:18px 0}

.ad-placeholder{
  border:1px dashed var(--line);
  border-radius:3px;
  background:repeating-linear-gradient(
    45deg,
    rgba(242,244,237,.012) 0 10px,
    transparent 10px 20px
  ), var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:22px 16px;
  min-height:inherit;
  text-align:center;
}
.ad-placeholder span{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-dim);
}
.ad-placeholder small{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.1em;
  color:var(--line);
}

.ad-label{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-dim);
  margin-bottom:8px;
  text-align:center;
}

.ad-slot[data-ad="top-leaderboard"]{min-height:90px}
.ad-slot[data-ad="mid-content"]{min-height:250px}
.ad-slot[data-ad="footer-banner"]{min-height:90px}

.ad-slot--feed{margin:0;min-height:280px}
.ad-slot--feed .ad-placeholder{height:100%;min-height:280px}

.ad-slot[data-ad="rail"]{min-height:600px}
@media (max-width:1024px){
  .ad-slot[data-ad="rail"]{display:none}
}

.ad-anchor{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:900;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:6px 10px;
  min-height:56px;
  align-items:center;
  justify-content:center;
}
.ad-anchor .ad-placeholder{
  border:0;background:transparent;padding:4px;min-height:44px;
}
.ad-anchor .ad-placeholder small{display:none}
@media (max-width:768px){
  .ad-anchor[data-ad-empty="false"]{display:flex}
  body{padding-bottom:64px}
}

.with-rail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
@media (max-width:1024px){
  .with-rail{grid-template-columns:1fr}
}

/* ============================================================
   Consent banner
   ============================================================ */

.dgConsent{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1200;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:clamp(18px,2.4vw,26px) 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.55);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.dgConsent--hidden{opacity:0;transform:translateY(100%)}

.dgConsent-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
}
.dgConsent-copy{max-width:66ch}
.dgConsent-copy h2{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  letter-spacing:-.01em;
  margin-bottom:7px;
  color:var(--paper);
}
.dgConsent-copy p{
  font-size:.845rem;
  line-height:1.6;
  color:var(--muted);
}
.dgConsent-copy a{color:var(--lime-soft);text-decoration:underline;text-underline-offset:2px}

.dgConsent-actions{display:flex;gap:9px;flex-wrap:wrap;flex:none}

.dgBtn{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:11px 18px;
  border-radius:2px;
  cursor:pointer;
  border:1px solid var(--line);
  background:transparent;
  color:var(--paper-dim);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
  white-space:nowrap;
}
.dgBtn:hover{border-color:var(--muted);color:var(--paper)}
.dgBtn-primary{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink);
  font-weight:600;
}
.dgBtn-primary:hover{background:var(--lime-soft);border-color:var(--lime-soft);color:var(--ink)}

/* detail panel */
.dgConsent-panel{
  display:none;
  max-width:var(--maxw);
  margin:16px auto 0;
  padding:16px var(--pad) 0;
  border-top:1px solid var(--line);
  flex-direction:column;
  gap:12px;
}
.dgConsent-panel.is-open{display:flex}
.dgOpt{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:.85rem;
  color:var(--paper-dim);
  cursor:pointer;
}
.dgOpt input{margin-top:3px;accent-color:var(--lime);flex:none;width:15px;height:15px}
.dgOpt span{display:block}
.dgOpt b{font-weight:500;display:block;margin-bottom:2px;color:var(--paper)}
.dgOpt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.5}

/* reopen button */
.dgConsent-reopen{
  position:fixed;
  left:14px;bottom:14px;
  z-index:1150;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:9px 13px;
  border-radius:2px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.dgConsent-reopen:hover{color:var(--lime-soft);border-color:var(--lime-dim)}

/* don't let the banner cover the mobile ad anchor */
@media (max-width:768px){
  body.has-ad-anchor .dgConsent{bottom:64px}
  .dgConsent-inner{flex-direction:column;align-items:stretch}
  .dgConsent-actions .dgBtn{flex:1}
}