/* ============================================================
   WebUp Growth — niche page (rack) styles
   Showcase grid + per-direction live previews.
   Built on the webup.css design system tokens.
   ============================================================ */

/* ---------- niche hero ---------- */
.rack-open{ padding:var(--s10) 0 var(--s8); }
.rack-open-line{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:var(--t-xs); font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint);
  margin-bottom:var(--s6);
}
.rack-open-line a{ color:var(--muted); transition:color .2s var(--ease); }
.rack-open-line a:hover{ color:var(--ink); }
.rack-open-line .pipe{ width:14px; height:1px; background:var(--hair-2); }

.rack-open h1{
  font-size:var(--t-5xl); line-height:1.02; letter-spacing:-.04em;
  margin:0 0 var(--s5); max-width:18ch;
}
.rack-open h1 .num{ color:var(--muted); font-weight:500; }
.rack-open .lede-blurb{
  font-size:var(--t-lg); color:var(--ink-2); line-height:1.5;
  max-width:60ch; margin:0 0 var(--s7);
}
.rack-open .lede-meta{
  display:flex; flex-wrap:wrap; gap:var(--s8);
  padding-top:var(--s6); border-top:1px solid var(--hair); max-width:680px;
}
.rack-open .lede-meta div{ display:flex; flex-direction:column; gap:4px; }
.rack-open .lede-meta .v{ font-size:var(--t-xl); font-weight:600; letter-spacing:-.03em; }
.rack-open .lede-meta .k{ font-size:var(--t-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

/* ---------- showcase grid ---------- */
.showcase{ padding:var(--s7) 0 var(--s9); }
.showcase-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:var(--s6); }
@media (max-width:560px){ .showcase-grid{ grid-template-columns:1fr; gap:var(--s7); } }

.show-item{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .4s var(--ease-2), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.show-item:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); border-color:var(--hair-2); }

/* preview frame */
.show-frame{ display:flex; flex-direction:column; }
/* fake browser chrome removed for a calmer, less skeuomorphic preview */
.show-chrome{ display:none; }
.show-chrome-legacy{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--bg-2);
  border-bottom:1px solid var(--hair);
}
.show-chrome .lights{ display:flex; gap:5px; }
.show-chrome .lights i{ width:9px; height:9px; border-radius:999px; background:var(--hair-2); }
.show-chrome .url{
  display:flex; align-items:center; gap:2px;
  font-size:var(--t-xs); color:var(--muted);
  background:var(--card); border:1px solid var(--hair);
  border-radius:999px; padding:4px 12px; margin:0 auto;
}
.show-chrome .url .lock{ margin-right:5px; color:var(--faint); }
.show-chrome .url .host{ color:var(--ink-2); font-weight:500; }
.show-chrome .badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); color:var(--muted); white-space:nowrap;
}
.show-chrome .badge .d{
  width:6px; height:6px; border-radius:999px; background:var(--faint);
  box-shadow:none;
}
@media (max-width:560px){ .show-chrome .badge{ display:none; } }

.show-port{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3);
  contain:layout paint;
}
.show-port iframe{
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0;
  pointer-events:none;
}
/* decorative scrim + glass hover pill removed — the whole port is already a link */
.show-port-overlay{ display:none; }
.show-port-hover{ display:none; }
.show-port-link{ position:absolute; inset:0; z-index:2; }

/* meta / pick */
.show-meta{ padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); flex:1; }
.show-num{ font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.04em; color:var(--faint); }
.show-id h2{ font-size:var(--t-2xl); letter-spacing:-.03em; }
.show-id .angle{ color:var(--muted); font-size:var(--t-sm); line-height:1.55; margin:8px 0 0; }
.show-id .angle em{ font-style:normal; color:var(--ink); font-weight:550; }

.meta-tags{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--hair); }
.meta-tags .row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--hair);
  font-size:var(--t-sm);
}
.meta-tags .row:last-child{ border-bottom:0; }
.meta-tags .row .k{ color:var(--faint); }
.meta-tags .row .v{ color:var(--ink-2); font-weight:500; }

.pick-block{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:var(--s2); }
.pick-block .ref{ font-size:var(--t-xs); color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
.pick-block .btn{ margin-left:auto; }

/* ---------- compare table ---------- */
.compare{ padding:var(--s9) 0; background:var(--bg-2); border-top:1px solid var(--hair); }
.compare-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s6); flex-wrap:wrap; margin-bottom:var(--s7);
}
.compare-head h2{ font-size:var(--t-3xl); line-height:1.05; margin-top:14px; }
.compare-head h2 em{ font-style:normal; color:var(--muted); }
.compare-head .blurb{ color:var(--muted); font-size:var(--t-base); max-width:44ch; line-height:1.55; }
.compare-head .blurb em{ font-style:normal; color:var(--ink-2); font-weight:500; }

.compare-table{ border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.compare-row{
  display:grid; grid-template-columns:48px 1.1fr 1.4fr 1.5fr; gap:var(--s4); align-items:center;
  padding:16px var(--s5); border-bottom:1px solid var(--hair);
  font-size:var(--t-sm);
}
.compare-row:last-child{ border-bottom:0; }
.compare-row.head{ background:var(--bg-2); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
.compare-row .num{ color:var(--faint); font-weight:500; }
.compare-row .name{ font-size:var(--t-lg); font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.compare-row .name em{ font-style:normal; color:var(--accent); }
.compare-row .tag{ color:var(--muted); }
.compare-row .who{ color:var(--ink-2); }
@media (max-width:760px){
  .compare-row{ grid-template-columns:36px 1fr; gap:6px 12px; padding:14px var(--s4); }
  .compare-row .tag, .compare-row .who{ grid-column:2; }
  .compare-row.head{ display:none; }
}

/* ---------- launch ---------- */
.launch{ padding:var(--s9) 0 var(--s10); }
.launch-inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; }
@media (max-width:900px){ .launch-inner{ grid-template-columns:1fr; gap:var(--s7); } }
.launch h2{ font-size:var(--t-4xl); line-height:1.05; margin:14px 0 12px; }
.launch h2 em{ font-style:normal; color:var(--muted); }
.launch .blurb{ color:var(--muted); font-size:var(--t-lg); max-width:42ch; line-height:1.5; margin:0 0 var(--s6); }
.launch .blurb em{ font-style:normal; color:var(--ink-2); font-weight:500; }

.pick-list{ display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.pick-list a{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  min-height:44px; padding:15px var(--s5); border-bottom:1px solid var(--hair);
  transition:background .2s var(--ease);
}
.pick-list a:last-child{ border-bottom:0; }
.pick-list a:hover{ background:var(--bg-2); }
.pick-list .num{ font-size:var(--t-xs); color:var(--faint); font-weight:500; letter-spacing:.04em; }
.pick-list .name{ font-size:var(--t-base); font-weight:500; }
.pick-list .name em{ font-style:normal; font-weight:600; }
.pick-list .arw{ display:inline-flex; color:var(--muted); transition:transform .3s var(--ease-2), color .2s var(--ease); }
.pick-list a:hover .arw{ transform:translate(3px,-3px); color:var(--accent); }

/* form */
.launch-form{
  background:var(--bg-2); border:1px solid var(--hair);
  border-radius:var(--radius-lg); padding:var(--s6);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.span-2{ grid-column:1 / -1; }
.field label{ font-size:var(--t-xs); font-weight:500; color:var(--muted); letter-spacing:.02em; }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:var(--t-sm); color:var(--ink);
  background:var(--card); border:1px solid var(--hair-2);
  border-radius:var(--radius-sm); padding:11px 13px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{ min-height:84px; resize:vertical; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s5); }
.form-foot .note{ font-size:var(--t-xs); color:var(--faint); }

/* ---------- sticky text bar ---------- */
body.has-textbar{ padding-bottom:96px; }
.text-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; padding:0 clamp(16px,4vw,24px) 16px; pointer-events:none; }
.text-bar-inner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  width:100%; max-width:var(--container-w); margin-inline:auto;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border:1px solid var(--hair-2); border-radius:999px;
  padding:9px 9px 9px 18px; box-shadow:var(--shadow);
  pointer-events:auto;
}
.text-bar .label{ display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); color:var(--ink-2); font-weight:500; }
.text-bar .live{ width:6px; height:6px; border-radius:999px; background:var(--faint); box-shadow:none; }
.text-bar .pipe{ width:1px; height:18px; background:var(--hair-2); }
.text-bar .pick{ font-size:var(--t-sm); color:var(--muted); }
.text-bar .pill{
  display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  font-size:var(--t-sm); font-weight:500; color:#fff; background:var(--ink);
  min-height:44px; border-radius:999px; padding:11px 18px;
  transition:background .25s var(--ease), transform .25s var(--ease-2);
}
.text-bar .pill:hover{ background:#000; transform:translateY(-1px); }
.text-bar .pill .arw svg{ width:12px; height:12px; }
@media (max-width:620px){
  .text-bar .pick, .text-bar .pipe{ display:none; }
  body.has-textbar{ padding-bottom:84px; }
}