
/* Sign-up panel — list selection, one CTA, minimal vertical waste */
#signup.su, .su {
  margin: 16px 0 20px;
  padding: 0;
  border: 0;
  background: none;
  scroll-margin-top: 84px;
  color: #edf3e8;
}
.su-panel {
  border: 1px solid rgba(197,255,0,.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18,36,28,.96), rgba(10,18,14,.98));
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  overflow: clip;
}
.su-head {
  display: grid;
  gap: 6px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.su-kicker {
  margin: 0;
  font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c5ff00;
}
.su-head h2 {
  margin: 0;
  font: 800 clamp(22px, 5.5vw, 30px)/1.05 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.03em;
  color: #f4f8ef;
}
.su-lead {
  margin: 0;
  font: 400 13px/1.35 ui-sans-serif, system-ui, sans-serif;
  color: rgba(214,226,205,.78);
}

/* Two equal path tiles — not a weak pill */
.su-path {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px;
}
.su-path-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  color: #d5e2cb;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 54px;
}
.su-path-btn strong {
  font: 800 14px/1.1 ui-sans-serif, system-ui, sans-serif;
  color: #f2f7ea;
}
.su-path-btn span {
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  color: rgba(197,214,186,.7);
}
.su-path-btn[aria-selected="true"],
.su-path-btn[aria-pressed="true"] {
  border-color: rgba(197,255,0,.55);
  background: linear-gradient(160deg, rgba(197,255,0,.16), rgba(197,255,0,.05));
  box-shadow: inset 0 0 0 1px rgba(197,255,0,.2);
}
.su-path-btn[aria-selected="true"] strong { color: #c5ff00; }
body[data-access-path="farm"] .su-path-btn[data-access-path="farm"][aria-selected="true"] {
  border-color: rgba(215,255,105,.55);
  background: linear-gradient(160deg, rgba(215,255,105,.14), rgba(215,255,105,.04));
}
body[data-access-path="farm"] .su-path-btn[data-access-path="farm"][aria-selected="true"] strong { color: #d7ff69; }

.su-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px 8px;
  font: 650 11px/1 ui-sans-serif, system-ui, sans-serif;
  color: rgba(190,205,180,.75);
  letter-spacing: .02em;
}
.su-steps i {
  width: 12px;
  height: 1px;
  background: rgba(197,255,0,.28);
  display: inline-block;
}

/* Plan list — the whole point */
.su-plans {
  display: grid;
  gap: 0;
  margin: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}
.su-plan {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  min-height: 64px;
}
.su-plan:last-child { border-bottom: 0; }
.su-plan:active { background: rgba(255,255,255,.03); }
.su-plan.is-selected {
  background: rgba(197,255,0,.08);
}
body[data-access-path="farm"] .su-plan.is-selected {
  background: rgba(215,255,105,.08);
}
.su-plan[hidden] { display: none !important; }

.su-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(214,226,205,.35);
  display: grid;
  place-items: center;
  justify-self: center;
}
.su-plan.is-selected .su-radio {
  border-color: #c5ff00;
  box-shadow: inset 0 0 0 4px #0c140f, inset 0 0 0 9px #c5ff00;
}
body[data-access-path="farm"] .su-plan.is-selected .su-radio {
  border-color: #d7ff69;
  box-shadow: inset 0 0 0 4px #0c140f, inset 0 0 0 9px #d7ff69;
}
.su-plan-link .su-radio { display: none; }
.su-plan-link { grid-template-columns: 1fr auto; }

.su-plan-main { display: grid; gap: 2px; min-width: 0; }
.su-plan-name {
  font: 750 14px/1.15 ui-sans-serif, system-ui, sans-serif;
  color: #f3f8eb;
}
.su-plan-desc {
  font: 500 12px/1.25 ui-sans-serif, system-ui, sans-serif;
  color: rgba(190,205,180,.72);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.su-plan-price {
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}
.su-plan-price b {
  font: 800 16px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: #fff;
}
.su-plan-price small {
  font: 650 10px/1 ui-sans-serif, system-ui, sans-serif;
  color: rgba(190,205,180,.7);
  letter-spacing: .04em;
}
.su-plan.is-selected .su-plan-price b { color: #c5ff00; }
body[data-access-path="farm"] .su-plan.is-selected .su-plan-price b { color: #d7ff69; }

/* Farm extras — compact 2-col */
.su-farm {
  margin: 10px 10px 0;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(215,255,105,.18);
  background: rgba(20,28,16,.9);
}
.su-farm[hidden] { display: none !important; }
.su-farm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.su-farm-row:last-of-type { margin-bottom: 6px; }
.su-field, .su-field-out {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
}
.su-field span, .su-field-out span {
  font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(190,205,180,.65);
}
.su-field input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font: 800 18px/1.1 ui-sans-serif, system-ui, sans-serif;
  padding: 0;
  outline: none;
}
.su-field-out output {
  font: 800 16px/1.1 ui-sans-serif, system-ui, sans-serif;
  color: #d7ff69;
}
.su-farm-note {
  margin: 0;
  font: 500 11px/1.35 ui-sans-serif, system-ui, sans-serif;
  color: rgba(190,205,180,.65);
}

/* Sticky-feeling CTA inside panel */
.su-cta-bar {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.2));
}
.su-cta {
  appearance: none;
  border: 0;
  border-radius: 12px;
  min-height: 48px;
  padding: 12px 16px;
  background: #c5ff00;
  color: #102016;
  font: 800 15px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
  cursor: pointer;
  width: 100%;
}
.su-cta:active { transform: translateY(1px); }
body[data-access-path="farm"] .su-cta { background: #d7ff69; }
.su-foot {
  margin: 0;
  text-align: center;
  font: 500 11px/1.3 ui-sans-serif, system-ui, sans-serif;
  color: rgba(190,205,180,.62);
}
.su-foot .linkish {
  appearance: none;
  border: 0;
  background: none;
  color: #c5ff00;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

@media (min-width: 720px) {
  .su-panel { border-radius: 20px; }
  .su-head {
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 18px 18px 12px;
  }
  .su-lead { max-width: 42ch; justify-self: end; text-align: right; }
  .su-path, .su-steps, .su-cta-bar { padding-left: 18px; padding-right: 18px; }
  .su-plans, .su-farm { margin-left: 18px; margin-right: 18px; }
  .su-plan { padding: 14px 16px; min-height: 70px; }
  .su-plan-name { font-size: 15px; }
  .su-plan-price b { font-size: 18px; }
  .su-path-btn { min-height: 60px; padding: 12px 14px; }
  .su-path-btn strong { font-size: 15px; }
}

/* Kill collisions with old signup rules */
#signup.su { max-width: none; border-top: 0; }
#signup.su h2 { margin: 0; }

/* Access picker refinement: one deliberate decision, not a wall of cards. */
.su-panel { position:relative; isolation:isolate; border-color:rgba(197,255,0,.26); background:linear-gradient(135deg,#172820 0%,#0d1712 56%,#101914 100%); }
.su-panel::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; z-index:-1; background:linear-gradient(#c5ff00,rgba(197,255,0,.08) 65%,transparent); }
.su-head { padding:18px 18px 12px; }
.su-head h2 { font-size:clamp(27px,6vw,38px); letter-spacing:-.045em; }
.su-lead { max-width:48ch; font-size:13px; color:rgba(226,235,218,.72); }
.su-path { padding:8px 18px 14px; gap:7px; }
.su-path-btn { min-height:58px; border-radius:9px; padding:10px 12px; background:rgba(255,255,255,.025); }
.su-path-btn strong { font-size:15px; }
.su-path-btn span { font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.su-path-btn[aria-selected="true"] { background:rgba(197,255,0,.10); }
.su-steps { margin:0 18px 10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); justify-content:space-between; font-size:10px; text-transform:uppercase; }
.su-steps i { flex:1; max-width:46px; opacity:.8; }
.su-plans { margin:0 18px; border-radius:10px; background:rgba(0,0,0,.19); }
.su-plan { min-height:62px; padding:11px 13px; grid-template-columns:20px 1fr auto; }
.su-plan.su-plan-link { grid-template-columns:1fr auto; }
.su-plan-name { font-size:14px; letter-spacing:-.01em; }
.su-plan-desc { font-size:11px; }
.su-plan-price b { font-size:16px; }
.su-cta-bar { padding:14px 18px 18px; margin-top:0; }
.su-cta { min-height:52px; border-radius:8px; text-transform:uppercase; letter-spacing:.07em; font-size:12px; }
@media (min-width:760px) {
  .su-panel { display:block; }
  .su-head { border-right:0; }
  .su-path { grid-template-columns:repeat(2,minmax(0,1fr)); border-right:0; }
  .su-steps { margin:0 20px 10px; }
  .su-plans { margin:0 20px 16px; }
  .su-farm { margin:0 20px 16px; }
  .su-cta-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid rgba(255,255,255,.07); }
  .su-cta { width:auto; min-width:220px; order:2; }
  .su-foot { text-align:left; }
}

/* Mobile navigation is product-first: access and login, not a compressed
   desktop sitemap.  The full explore menu remains available below. */
@media (max-width:700px) {
  header[role], .app > header { height:58px; }
  .app > header nav { gap:8px; }
  .app > header .plain-story,
  .app > header .story-link,
  .app > header .header-radio { display:none!important; }
  .app > header .header-trial { display:inline-flex; padding:8px 10px; font-size:10px; white-space:nowrap; }
  .app > header .login { padding:8px 10px!important; font-size:10px; white-space:nowrap; }
  .access-bar { min-height:36px; }
  .access-bar > div > a { display:none; }
  .flavour-bar { display:none!important; }
  main { justify-content:flex-start!important; padding-top:14px!important; }
}
