/* ============================================================
   Deeptech Access — "Pulse" theme
   Sleek, modern, minimal. Single-font Inter. Pure black text.
   Warm cream background. Emerald primary, coral accent for soft+bold.
   Inspired by Linear, Notion, Vercel, and modern fintech aesthetics.
   ============================================================ */

:root{
  /* Backgrounds & neutrals */
  --ivory:#FAFAF7;
  --paper:#FFFFFF;
  --ink:#000000;
  --ink-soft:#1F2937;
  --muted:#6B7280;
  --line:#E5E7EB;
  --line-soft:#F3F4F6;

  /* PRIMARY — emerald (cool, calm) */
  --emerald:#059669;
  --emerald-deep:#047857;
  --emerald-soft:#ECFDF5;
  --emerald-soft-edge:#6EE7B7;

  /* SCIENTIFIC — sky cyan (electric blue) */
  --cyan:#0EA5E9;
  --cyan-deep:#0369A1;
  --cyan-soft:#E0F2FE;
  --cyan-edge:#7DD3FC;

  /* ACCENT — coral (bold contrast) — legacy --violet variable name */
  --violet:#F97316;
  --violet-deep:#C2410C;
  --violet-soft:#FFF7ED;
  --violet-edge:#FDBA74;

  /* SUCCESS — green */
  --green:#16A34A;
  --green-deep:#15803D;
  --green-soft:#DCFCE7;
  --green-edge:#86EFAC;

  /* WARNING — amber */
  --gold:#D97706;
  --gold-soft:#FEF3C7;
  --gold-soft-edge:#FCD34D;

  /* DANGER — red */
  --crimson:#DC2626;
  --crimson-soft:#FEE2E2;
  --crimson-soft-edge:#FCA5A5;

  /* SECTOR PALETTE */
  --sec-life:#DB2777;   --sec-life-bg:#FCE7F3;   --sec-life-edge:#F9A8D4;
  --sec-engin:#2563EB;  --sec-engin-bg:#DBEAFE;  --sec-engin-edge:#93C5FD;
  --sec-comp:#7C3AED;   --sec-comp-bg:#EDE9FE;   --sec-comp-edge:#C4B5FD;
  --sec-env:#16A34A;    --sec-env-bg:#DCFCE7;    --sec-env-edge:#86EFAC;
  --sec-food:#D97706;   --sec-food-bg:#FEF3C7;   --sec-food-edge:#FCD34D;
  --sec-indu:#EA580C;   --sec-indu-bg:#FFEDD5;   --sec-indu-edge:#FDBA74;
  --sec-other:#525252;  --sec-other-bg:#F5F5F5;  --sec-other-edge:#D4D4D4;

  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-pill:9999px;

  --sh-sm:0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 14px -2px rgba(0,0,0,.06);
  --sh-lg:0 16px 40px -16px rgba(0,0,0,.14);
  --sh-xl:0 30px 70px -30px rgba(0,0,0,.30);
  --sh-inset:inset 0 1px 2px rgba(0,0,0,.04);
  --sh-emerald:0 6px 20px -6px rgba(5,150,105,.45);
}

*, *::before, *::after { box-sizing:border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, figure { margin:0; padding:0; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; }
input, select, textarea, button { font-family:inherit; font-size:100%; color:inherit; }

html, body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings:"cv11","ss01";
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.font-display {
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing:-0.025em;
  font-weight:700;
}
.font-mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.font-sans { font-family:'Inter', ui-sans-serif, system-ui, sans-serif; }

#root { position:relative; z-index:1; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--ivory); }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:var(--r-sm); }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ============================================================
   FORM FIELDS — refined modern with gradient focus
   ============================================================ */
.field {
  width:100%; padding:.65rem .9rem; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.875rem; color:var(--ink); outline:none;
  transition:all .2s;
  box-shadow:var(--sh-inset);
}
.field:hover:not(:disabled):not(:focus) {
  border-color:#9CA3AF; background:#FCFCFC;
}
.field:focus {
  border-color:var(--emerald);
  box-shadow:0 0 0 4px rgba(5,150,105,.12), var(--sh-inset);
  background:linear-gradient(180deg, #FBFEFC 0%, #FFFFFF 100%);
}
.field:disabled { background:var(--line-soft); color:var(--muted); cursor:not-allowed; }

select.field {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
  background-size:10px; padding-right:2rem;
}
textarea.field { resize:vertical; min-height:80px; }

.field-label {
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:.4rem; display:block;
}

.form-section {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.4rem 1.6rem;
  transition:border-color .2s;
}
.form-section:hover { border-color:#D1D5DB; }
.form-section + .form-section { margin-top:1rem; }
.form-section-title {
  display:flex; align-items:center; gap:.7rem;
  font-size:.88rem; font-weight:600; color:var(--ink);
  margin-bottom:1.2rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.form-section-title::before {
  content:''; width:3px; height:16px;
  background:linear-gradient(180deg, var(--emerald), var(--cyan));
  border-radius:2px;
}
.form-section-hint {
  font-size:.72rem; color:var(--muted); font-weight:400; margin-left:auto;
  text-transform:none; letter-spacing:0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; font-size:.85rem; font-weight:500;
  border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; transition:all .2s; letter-spacing:.005em;
  text-decoration:none; white-space:nowrap;
}
.btn-primary {
  background:var(--ink); color:#fff; border-color:var(--ink);
  box-shadow:var(--sh-sm);
}
.btn-primary:hover {
  background:var(--emerald); border-color:var(--emerald);
  box-shadow:var(--sh-emerald);
  transform:translateY(-1px);
}
.btn-emerald {
  background:linear-gradient(135deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color:#fff; border-color:var(--emerald-deep);
  box-shadow:var(--sh-emerald);
}
.btn-emerald:hover {
  background:linear-gradient(135deg, var(--emerald-deep) 0%, #064E3B 100%);
  box-shadow:0 8px 24px -4px rgba(5,150,105,.50);
  transform:translateY(-1px);
}
.btn-ghost { background:var(--paper); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--ink); box-shadow:var(--sh-sm); }
.btn-danger { background:#fff; color:var(--crimson); border-color:var(--crimson-soft-edge); }
.btn-danger:hover { background:var(--crimson); color:#fff; border-color:var(--crimson); }

.act-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem; font-size:.78rem; font-weight:500;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink-soft); border-radius:var(--r-sm);
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.act-btn:hover {
  border-color:var(--ink); color:var(--ink);
  background:var(--line-soft); transform:translateY(-1px);
  box-shadow:var(--sh-sm);
}
.act-btn .act-icon {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; line-height:1;
}
.act-btn.act-edit:hover { border-color:var(--emerald); color:var(--emerald-deep); background:var(--emerald-soft); }
.act-btn.act-preview:hover { border-color:var(--cyan); color:var(--cyan-deep); background:var(--cyan-soft); }
.act-btn.act-publish {
  border-color:var(--emerald-soft-edge); color:var(--emerald-deep); background:var(--emerald-soft);
}
.act-btn.act-publish:hover {
  background:var(--emerald); color:#fff; border-color:var(--emerald);
  box-shadow:var(--sh-emerald);
}
.act-btn.act-unpublish {
  border-color:var(--gold-soft-edge); color:var(--gold); background:var(--gold-soft);
}
.act-btn.act-unpublish:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
.act-btn.act-delete {
  color:var(--crimson); border-color:var(--crimson-soft-edge); background:#fff;
}
.act-btn.act-delete:hover {
  background:var(--crimson); color:#fff; border-color:var(--crimson);
  box-shadow:0 4px 12px -2px rgba(220,38,38,.40);
}

.card-action-row {
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line);
  background:var(--ivory);
}
.card-action-btn {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.75rem .35rem; font-size:.75rem; font-weight:500;
  background:transparent; color:var(--ink-soft);
  border:none; border-right:1px solid var(--line);
  cursor:pointer; transition:all .2s; white-space:nowrap; position:relative;
}
.card-action-btn:last-child { border-right:0; }
.card-action-btn:hover { background:var(--paper); color:var(--ink); }
.card-action-btn .card-action-icon { font-size:1rem; line-height:1; display:inline-flex; align-items:center; }
.card-action-btn.active-watch {
  color:var(--emerald-deep); background:var(--emerald-soft); font-weight:600;
}
.card-action-btn.active-watch:hover { background:var(--emerald); color:#fff; }
.card-action-btn.active-interest {
  color:#fff; background:var(--crimson); font-weight:600;
}
.card-action-btn.active-interest:hover { background:#991B1B; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md); transition:all .25s;
}
.card-hover { cursor:pointer; }
.card-hover:hover {
  border-color:var(--emerald-soft-edge); transform:translateY(-3px);
  box-shadow:var(--sh-lg);
}
.card-elev { box-shadow:var(--sh-md); }
.card-tinted {
  background:linear-gradient(180deg, var(--paper) 0%, var(--ivory) 100%);
}

.sector-strip { height:3px; flex-shrink:0; }
.sector-strip.sec-life   { background:linear-gradient(90deg, #F472B6, var(--sec-life)); }
.sector-strip.sec-engin  { background:linear-gradient(90deg, #60A5FA, var(--sec-engin)); }
.sector-strip.sec-comp   { background:linear-gradient(90deg, #A78BFA, var(--sec-comp)); }
.sector-strip.sec-env    { background:linear-gradient(90deg, #34D399, var(--sec-env)); }
.sector-strip.sec-food   { background:linear-gradient(90deg, #FBBF24, var(--sec-food)); }
.sector-strip.sec-indu   { background:linear-gradient(90deg, #FB923C, var(--sec-indu)); }
.sector-strip.sec-other  { background:linear-gradient(90deg, #A3A3A3, var(--sec-other)); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .6rem; font-size:.7rem; font-weight:500; letter-spacing:.01em;
  border:1px solid; line-height:1.4; border-radius:var(--r-sm);
  white-space:nowrap;
}
.badge-ink     { background:var(--ink); color:#fff; border-color:var(--ink); }
.badge-em      { background:var(--emerald-soft); color:var(--emerald-deep); border-color:var(--emerald-soft-edge); }
.badge-gold    { background:var(--gold-soft); color:#92400E; border-color:var(--gold-soft-edge); }
.badge-line    { background:transparent; color:var(--ink-soft); border-color:var(--line); }
.badge-crim    { background:var(--crimson-soft); color:var(--crimson); border-color:var(--crimson-soft-edge); }
.badge-violet  { background:var(--violet-soft); color:var(--violet-deep); border-color:var(--violet-edge); }
.badge-cyan    { background:var(--cyan-soft); color:var(--cyan-deep); border-color:var(--cyan-edge); }
.badge-green   { background:var(--green-soft); color:var(--green-deep); border-color:var(--green-edge); }

.badge.sec-life   { background:var(--sec-life-bg);  color:var(--sec-life);  border-color:var(--sec-life-edge); }
.badge.sec-engin  { background:var(--sec-engin-bg); color:var(--sec-engin); border-color:var(--sec-engin-edge); }
.badge.sec-comp   { background:var(--sec-comp-bg);  color:var(--sec-comp);  border-color:var(--sec-comp-edge); }
.badge.sec-env    { background:var(--sec-env-bg);   color:var(--sec-env);   border-color:var(--sec-env-edge); }
.badge.sec-food   { background:var(--sec-food-bg);  color:var(--sec-food);  border-color:var(--sec-food-edge); }
.badge.sec-indu   { background:var(--sec-indu-bg);  color:var(--sec-indu);  border-color:var(--sec-indu-edge); }
.badge.sec-other  { background:var(--sec-other-bg); color:var(--sec-other); border-color:var(--sec-other-edge); }

.badge-dot { padding-left:.5rem; }
.status-dot {
  width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:.1rem;
  background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.4);
}
.dot-live    { color:var(--green); }
.dot-pending { color:var(--gold); }
.dot-off     { color:var(--muted); }
.dot-error   { color:var(--crimson); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.rise    { animation:rise .5s ease both; }
.rise-d1 { animation-delay:.06s; }
.rise-d2 { animation-delay:.12s; }
.rise-d3 { animation-delay:.18s; }
.rise-d4 { animation-delay:.24s; }

@keyframes pulse-dot {
  0%, 100% { box-shadow:0 0 0 0 rgba(22,163,74,.4); }
  50%      { box-shadow:0 0 0 6px rgba(22,163,74,0); }
}
.pulse-live .status-dot { animation:pulse-dot 2s ease-in-out infinite; }

@keyframes pop-in {
  from { opacity:0; transform:scale(0.96) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.pop-in { animation:pop-in .25s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ============================================================
   BULLETS — six styles
   ============================================================ */
.bul-arrow li, .bul-dash li, .bul-diamond li, .bul-dot li, .bul-check li, .bul-plus li {
  padding-left:1.25rem; position:relative; margin-bottom:.4rem;
}
.bul-arrow li::before   { content:'▸'; position:absolute; left:0; color:var(--emerald); font-weight:700; }
.bul-dash li::before    { content:'—'; position:absolute; left:0; color:var(--gold); }
.bul-diamond li::before { content:'◆'; position:absolute; left:0; color:var(--violet); font-size:.65rem; top:.35rem; }
.bul-dot li::before     { content:'•'; position:absolute; left:0; color:var(--cyan); font-weight:700; }
.bul-check li::before   { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }
.bul-plus li::before    { content:'＋'; position:absolute; left:0; color:var(--sec-life); font-weight:700; font-size:.85rem; top:.05rem; }

/* ============================================================
   TABS — modern pill segmented control
   ============================================================ */
.tab-pills {
  display:inline-flex;
  background:var(--line-soft); padding:4px;
  border-radius:var(--r-pill); gap:2px;
  border:1px solid var(--line);
  box-shadow:var(--sh-inset);
  flex-shrink:0; max-width:100%;
}
.tab-pills.tab-pills-scroll { overflow-x:auto; max-width:100%; }
.tab-pills.tab-pills-scroll::-webkit-scrollbar { height:0; }

/* Free vs Paid feature comparison table on landing page */
.access-table { border-collapse:collapse; width:100%; }
.access-table th { letter-spacing:.05em; text-transform:uppercase; font-size:.72rem; }
.access-table td { vertical-align:middle; }
.access-table tr:nth-child(even) td:first-child { background:rgba(0,0,0,.012); }
.access-table tbody tr:hover { background:var(--line-soft); }

.tab-pill {
  padding:.5rem 1rem; font-size:.8rem; font-weight:500;
  background:transparent; color:var(--muted);
  border:none; border-radius:var(--r-pill); cursor:pointer;
  white-space:nowrap; transition:all .2s;
  display:inline-flex; align-items:center; gap:.4rem;
}
.tab-pill:hover:not(.active) { color:var(--ink); }
.tab-pill.active {
  background:var(--paper); color:var(--ink);
  box-shadow:var(--sh-sm); font-weight:600;
}
.tab-pill .tab-count {
  font-size:.7rem; padding:.05rem .35rem;
  background:var(--line); color:var(--muted);
  border-radius:var(--r-sm); font-weight:500;
}
.tab-pill.active .tab-count {
  background:var(--emerald-soft); color:var(--emerald-deep);
}

.tab-btn {
  padding:.65rem 1.1rem; font-size:.8rem; font-weight:500; letter-spacing:.04em;
  border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer;
  transition:all .15s; text-transform:uppercase; background:transparent;
  white-space:nowrap;
}
.tab-btn.active { color:var(--emerald); border-bottom-color:var(--emerald); }
.tab-btn:hover  { color:var(--ink); }

/* ============================================================
   READINESS BAR
   ============================================================ */
.trl-bar { height:10px; background:var(--line-soft); position:relative; overflow:hidden; border-radius:999px; }
.trl-fill { height:100%; background:linear-gradient(90deg, var(--emerald) 0%, var(--emerald-deep) 100%); transition:width .4s ease; }

.trl-segments { display:flex; gap:3px; height:14px; }
.trl-seg { flex:1; background:var(--line-soft); border-radius:2px; transition:background .25s ease; }
.trl-segments[data-tier="early"]  .trl-seg.on { background:linear-gradient(180deg, #FBBF24, #B45309); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.trl-segments[data-tier="mid"]    .trl-seg.on { background:linear-gradient(180deg, var(--cyan), var(--cyan-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.trl-segments[data-tier="mature"] .trl-seg.on { background:linear-gradient(180deg, var(--emerald), var(--emerald-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }

.tier-label {
  font-size:.65rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:.1rem .4rem; border-radius:var(--r-sm);
  display:inline-block;
}
.tier-label.early  { background:var(--gold-soft); color:#92400E; }
.tier-label.mid    { background:var(--cyan-soft); color:var(--cyan-deep); }
.tier-label.mature { background:var(--emerald-soft); color:var(--emerald-deep); }

/* ============================================================
   HERO + LAYOUT — soft multi-color gradients
   ============================================================ */
.hero-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:end; }
@media (max-width:768px) { .hero-grid { grid-template-columns:1fr; gap:2rem; } }

.gradient-section {
  background:
    radial-gradient(1200px 500px at 90% -5%, rgba(249,115,22,.08), transparent 50%),
    radial-gradient(800px 400px at 5% 30%, rgba(14,165,233,.07), transparent 50%),
    radial-gradient(900px 400px at 50% 100%, rgba(5,150,105,.10), transparent 50%);
}

.h-rule {
  display:flex; align-items:center; gap:.75rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.h-rule::before {
  content:''; width:1.5rem; height:2px;
  background:linear-gradient(90deg, var(--emerald), var(--cyan));
  border-radius:1px;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  z-index:50; display:flex; align-items:center; justify-content:center; padding:1rem;
  animation:rise .2s ease both;
}
.modal {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); max-width:760px; width:100%; max-height:88vh;
  overflow-y:auto; box-shadow:var(--sh-xl);
}
.modal-lg { max-width:1100px; }

/* ============================================================
   STARTUP DETAIL POPUP
   ============================================================ */
.startup-popup {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg);
  max-width:1200px; width:96vw; max-height:94vh;
  display:flex; flex-direction:column;
  overflow:hidden; box-shadow:var(--sh-xl);
  position:relative;
  animation:pop-in .3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Auth popup — login + join applicant modals */
.auth-modal {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg);
  max-width:480px; width:100%; max-height:92vh;
  overflow-y:auto; box-shadow:var(--sh-xl);
  position:relative;
  animation:pop-in .25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-modal-wide { max-width:540px; }
.auth-modal-head {
  padding:1.75rem 2rem .5rem;
  background:linear-gradient(135deg, rgba(5,150,105,.06) 0%, rgba(14,165,233,.06) 100%);
  border-bottom:1px solid var(--line);
}
.auth-modal-body { padding:1.5rem 2rem 1.75rem; }
.auth-tab-row {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  background:var(--line-soft); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:3px; margin-bottom:1.25rem;
}
.auth-tab-btn {
  padding:.55rem .5rem; font-size:.72rem; font-weight:500;
  background:transparent; color:var(--muted); border:none;
  border-radius:var(--r-sm); cursor:pointer; transition:all .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.auth-tab-btn.active {
  background:var(--paper); color:var(--ink);
  box-shadow:var(--sh-sm); font-weight:600;
}
.auth-tab-btn:not(.active):hover { color:var(--ink); }
.auth-demo-card {
  text-align:left; font-family:'JetBrains Mono', monospace;
  padding:.5rem .65rem; border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer; transition:all .15s;
  background:var(--paper); width:100%;
}
.auth-demo-card:hover {
  border-color:var(--emerald); background:var(--emerald-soft);
}
.popup-close-btn {
  position:absolute; top:1rem; right:1rem; z-index:20;
  width:2.4rem; height:2.4rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--paper);
  border:1px solid var(--line); cursor:pointer;
  font-size:1.1rem; color:var(--muted);
  transition:all .2s;
  box-shadow:var(--sh-sm);
}
.popup-close-btn:hover {
  background:var(--crimson); color:#fff; border-color:var(--crimson);
  transform:rotate(90deg);
  box-shadow:0 6px 16px -4px rgba(220,38,38,.40);
}
.popup-head {
  padding:1.75rem 2rem .5rem; flex-shrink:0;
  background:linear-gradient(180deg, var(--paper) 0%, #FCFCFC 100%);
}
.popup-tabs {
  padding:.85rem 2rem;
  background:var(--ivory);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  overflow-x:auto;
}
.popup-body {
  padding:1.75rem 2rem 2.25rem;
  overflow-y:auto;
  flex:1;
  background:var(--ivory);
}
@media (max-width:640px){
  .popup-head { padding:1rem 1rem .25rem; }
  .popup-tabs { padding:.7rem 1rem; }
  .popup-body { padding:1rem; }
  .popup-close-btn { top:.5rem; right:.5rem; width:2rem; height:2rem; font-size:1rem; }
  .startup-popup { width:100vw; height:100vh; max-height:100vh; max-width:100vw; border-radius:0; }
}

/* ============================================================
   CHIPS, MISC
   ============================================================ */
.chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; background:var(--emerald-soft); color:var(--emerald-deep);
  font-size:.72rem; border:1px solid var(--emerald-soft-edge); border-radius:var(--r-sm);
  cursor:pointer;
}
.chip-x { cursor:pointer; font-weight:700; color:var(--emerald); }

.deco-num {
  font-family:'Inter', sans-serif; font-weight:300;
  background:linear-gradient(135deg, var(--line) 0%, var(--line-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:5rem; line-height:1;
}

.gate {
  background:repeating-linear-gradient(45deg, var(--gold-soft) 0 12px, #FFFBEB 12px 24px);
  border:1px dashed var(--gold-soft-edge); border-radius:var(--r-md);
  padding:1.5rem; text-align:center; color:#92400E; font-size:.85rem;
}

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.doc-frame {
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md); min-height:420px; padding:2rem; user-select:none;
}
.doc-frame::after {
  content:'CONFIDENTIAL · DEEPTECH ACCESS'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter', sans-serif; font-weight:700;
  font-size:2.2rem; color:rgba(5,150,105,.07);
  pointer-events:none; transform:rotate(-22deg); letter-spacing:.3em;
}
@media print { .doc-frame { display:none !important; } }

.doc-frame-pdf {
  position:relative; height:600px; background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-md);
  user-select:none; overflow:hidden;
}
.doc-frame-pdf iframe { width:100%; height:100%; border:0; display:block; background:#fff; }
.doc-frame-pdf::after {
  content:'CONFIDENTIAL · DEEPTECH ACCESS'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter', sans-serif; font-weight:700;
  font-size:2.4rem; color:rgba(5,150,105,.13);
  pointer-events:none; transform:rotate(-22deg); letter-spacing:.3em; z-index:2;
}
@media print { .doc-frame-pdf { display:none !important; } }

.upload-zone {
  border:2px dashed var(--line); background:var(--ivory);
  border-radius:var(--r-md); padding:1.75rem 1rem; text-align:center;
  cursor:pointer; transition:all .2s;
}
.upload-zone:hover { border-color:var(--emerald); background:var(--emerald-soft); }
.upload-zone-active { border-color:var(--emerald); background:var(--emerald-soft); transform:scale(1.01); }
.upload-icon {
  font-family:'Inter', sans-serif; font-size:1.75rem; font-weight:300;
  color:var(--emerald); margin-bottom:.4rem; line-height:1;
}
.upload-text   { font-size:.9rem; font-weight:500; color:var(--ink); }
.upload-helper { font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.upload-filled {
  border:1px solid var(--emerald-soft-edge); background:var(--emerald-soft);
  border-radius:var(--r-md); padding:.85rem 1rem;
}
.upload-pdf-icon {
  width:2.5rem; height:2.5rem; background:var(--crimson); color:#fff;
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:.7rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  letter-spacing:.05em; border-radius:var(--r-sm);
}

.readiness-block { padding-top:.25rem; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Logo gradient — emerald → cyan (cool, professional, fresh) */
.logo-mark {
  background:linear-gradient(135deg, var(--emerald) 0%, var(--cyan) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  box-shadow:var(--sh-emerald);
}

/* Header / nav portal logo — transparent PNG, blends with portal background */
.portal-logo {
  background:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.portal-logo img {
  width:auto; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain;
  display:block;
}

/* -------------- MOBILE HAMBURGER MENU --------------
   Desktop default: hide the toggle, show nav inline.
   Mobile (<=768px): hide nav by default, show toggle.
     - Toggle click adds .open to the actions container, which
       drops it down as a vertical panel anchored to the header. */
.header-menu-toggle { display:none !important; }
.header-link        { display:inline; }

@media (max-width:768px){
  /* Show hamburger ONLY on mobile / small screens */
  .header-menu-toggle { display:inline-flex !important; padding:.4rem .65rem; font-size:1.15rem; line-height:1; }

  /* Hide the row of links/buttons by default on mobile */
  .header-actions {
    display:none !important;
  }
  /* When the .open class is set: show as a dropdown panel */
  .header-actions.open {
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:.4rem !important;
    position:absolute;
    top:100%; right:1rem;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:.65rem;
    min-width:240px;
    z-index:50;
  }
  .header-actions.open .header-link {
    display:block;
    padding:.55rem .8rem;
    margin:0 !important;
    border-radius:var(--r-sm);
    color:var(--ink-soft);
  }
  .header-actions.open .header-link:hover {
    background:var(--line-soft);
    color:var(--ink);
  }
  .header-actions.open .btn {
    width:100%;
    justify-content:flex-start;
    text-align:left;
  }
}

/* Startup logo image — uploaded by users via ImageUpload widget */
.startup-logo-img {
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm);
}
.startup-logo-img img {
  width:100%; height:100%; object-fit:contain; display:block;
  background:#FFFFFF;
}

.stat-card {
  padding:1rem 1.25rem; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md);
}
.stat-num {
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:1.875rem; line-height:1;
  background:linear-gradient(135deg, var(--ink) 0%, var(--emerald) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.block { display:block; }
.inline { display:inline; }
.inline-block { display:inline-block; }
.flex { display:flex; }
.inline-flex { display:inline-flex; }
.grid { display:grid; }
.hidden { display:none; }

.relative { position:relative; }
.absolute { position:absolute; }
.fixed    { position:fixed; }
.sticky   { position:sticky; }

.inset-0  { top:0; right:0; bottom:0; left:0; }
.top-0    { top:0; }
.left-0   { left:0; }
.right-0  { right:0; }
.bottom-6 { bottom:1.5rem; }
.left-1\/2 { left:50%; }
.right-3  { right:.75rem; }
.-top-2   { top:-.5rem; }
.-top-4   { top:-1rem; }
.-right-4  { right:-1rem; }
.-right-20 { right:-5rem; }
.-bottom-20 { bottom:-5rem; }

.z-10  { z-index:10; }
.z-20  { z-index:20; }
.z-30  { z-index:30; }
.z-50  { z-index:50; }
.z-\[100\] { z-index:100; }

.flex-1     { flex:1 1 0%; }
.flex-col   { flex-direction:column; }
.flex-row   { flex-direction:row; }
.flex-wrap  { flex-wrap:wrap; }
.shrink-0   { flex-shrink:0; }
.items-start    { align-items:flex-start; }
.items-center   { align-items:center; }
.items-end      { align-items:flex-end; }
.justify-start  { justify-content:flex-start; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.justify-end    { justify-content:flex-end; }

.grid-cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.col-span-2  { grid-column:span 2 / span 2; }
.col-span-3  { grid-column:span 3 / span 3; }

.gap-1   { gap:.25rem; }
.gap-1\.5 { gap:.375rem; }
.gap-2   { gap:.5rem; }
.gap-3   { gap:.75rem; }
.gap-4   { gap:1rem; }
.gap-5   { gap:1.25rem; }
.gap-6   { gap:1.5rem; }
.gap-8   { gap:2rem; }
.gap-10  { gap:2.5rem; }
.gap-x-4 { column-gap:1rem; }
.gap-x-8 { column-gap:2rem; }
.gap-y-1 { row-gap:.25rem; }
.gap-y-3 { row-gap:.75rem; }

.p-2  { padding:.5rem; }
.p-3  { padding:.75rem; }
.p-4  { padding:1rem; }
.p-5  { padding:1.25rem; }
.p-6  { padding:1.5rem; }
.p-7  { padding:1.75rem; }
.p-12 { padding:3rem; }

.px-3 { padding-left:.75rem; padding-right:.75rem; }
.px-5 { padding-left:1.25rem; padding-right:1.25rem; }
.px-6 { padding-left:1.5rem; padding-right:1.5rem; }
.py-1   { padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5 { padding-top:.375rem; padding-bottom:.375rem; }
.py-2   { padding-top:.5rem; padding-bottom:.5rem; }
.py-2\.5 { padding-top:.625rem; padding-bottom:.625rem; }
.py-3  { padding-top:.75rem; padding-bottom:.75rem; }
.py-4  { padding-top:1rem; padding-bottom:1rem; }
.py-6  { padding-top:1.5rem; padding-bottom:1.5rem; }
.py-8  { padding-top:2rem; padding-bottom:2rem; }
.py-10 { padding-top:2.5rem; padding-bottom:2.5rem; }
.py-12 { padding-top:3rem; padding-bottom:3rem; }
.py-16 { padding-top:4rem; padding-bottom:4rem; }
.py-20 { padding-top:5rem; padding-bottom:5rem; }

.pt-2 { padding-top:.5rem; }
.pt-4 { padding-top:1rem; }
.pt-5 { padding-top:1.25rem; }
.pt-6 { padding-top:1.5rem; }
.pb-3 { padding-bottom:.75rem; }

.mt-0\.5 { margin-top:.125rem; }
.mt-1  { margin-top:.25rem; }
.mt-2  { margin-top:.5rem; }
.mt-3  { margin-top:.75rem; }
.mt-4  { margin-top:1rem; }
.mt-5  { margin-top:1.25rem; }
.mt-6  { margin-top:1.5rem; }
.mt-8  { margin-top:2rem; }
.mt-10 { margin-top:2.5rem; }
.mt-12 { margin-top:3rem; }

.mb-1 { margin-bottom:.25rem; }
.mb-2 { margin-bottom:.5rem; }
.mb-3 { margin-bottom:.75rem; }
.mb-4 { margin-bottom:1rem; }
.mb-6 { margin-bottom:1.5rem; }
.\!mb-0 { margin-bottom:0 !important; }

.ml-12 { margin-left:3rem; }
.ml-auto { margin-left:auto; }
.mr-3 { margin-right:.75rem; }
.mr-4 { margin-right:1rem; }
.mx-auto { margin-left:auto; margin-right:auto; }

.space-y-2 > * + * { margin-top:.5rem; }
.space-y-3 > * + * { margin-top:.75rem; }
.space-y-4 > * + * { margin-top:1rem; }
.space-y-5 > * + * { margin-top:1.25rem; }
.space-y-6 > * + * { margin-top:1.5rem; }
.space-y-8 > * + * { margin-top:2rem; }

.w-full { width:100%; }
.w-3    { width:.75rem; }
.w-9    { width:2.25rem; }
.w-12   { width:3rem; }
.w-14   { width:3.5rem; }
.w-20   { width:5rem; }
.w-24   { width:6rem; }
.w-96   { width:24rem; }

.min-w-0           { min-width:0; }
.min-w-\[180px\]   { min-width:180px; }
.min-w-\[900px\]   { min-width:900px; }

.max-w-xs   { max-width:20rem; }
.max-w-sm   { max-width:24rem; }
.max-w-md   { max-width:28rem; }
.max-w-xl   { max-width:36rem; }
.max-w-2xl  { max-width:42rem; }
.max-w-3xl  { max-width:48rem; }
.max-w-7xl  { max-width:80rem; }
.max-w-\[1400px\] { max-width:1400px; }

.h-3   { height:.75rem; }
.h-9   { height:2.25rem; }
.h-12  { height:3rem; }
.h-14  { height:3.5rem; }
.h-20  { height:5rem; }
.h-24  { height:6rem; }
.h-96  { height:24rem; }
.min-h-screen   { min-height:100vh; }
.min-h-\[40px\] { min-height:40px; }
.max-h-72       { max-height:18rem; }

.border          { border-width:1px; border-style:solid; border-color:var(--line); }
.border-t        { border-top-width:1px; border-top-style:solid; border-top-color:var(--line); }
.border-b        { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.border-r        { border-right-width:1px; border-right-style:solid; border-right-color:var(--line); }
.border-l-4      { border-left-width:4px; border-left-style:solid; border-left-color:var(--emerald); }
.border-dashed   { border-style:dashed; }
.rounded-full    { border-radius:9999px; }

.border-\[var\(--ink\)\]      { border-color:var(--ink); }
.border-\[var\(--line\)\]     { border-color:var(--line); }
.border-\[var\(--line-soft\)\] { border-color:var(--line-soft); }
.border-\[\#C9DBD2\]          { border-color:var(--emerald-soft-edge); }
.border-\[\#E1C98A\]          { border-color:var(--gold-soft-edge); }
.border-l-\[var\(--emerald\)\] { border-left-color:var(--emerald); }

.bg-white                       { background-color:#fff; }
.bg-\[var\(--ivory\)\]          { background-color:var(--ivory); }
.bg-\[var\(--paper\)\]          { background-color:var(--paper); }
.bg-\[var\(--ink\)\]            { background-color:var(--ink); }
.bg-\[var\(--emerald\)\]        { background-color:var(--emerald); }
.bg-\[var\(--emerald-soft\)\]   { background-color:var(--emerald-soft); }
.bg-\[var\(--gold\)\]           { background-color:var(--gold); }
.bg-\[var\(--gold-soft\)\]      { background-color:var(--gold-soft); }
.bg-\[var\(--line-soft\)\]      { background-color:var(--line-soft); }
.bg-\[var\(--ivory\)\]\/80      { background-color:rgba(250,250,247,.85); }
.bg-\[var\(--emerald\)\]\/15    { background-color:rgba(5,150,105,.15); }
.bg-\[var\(--crimson\)\]        { background-color:var(--crimson); }
.border-\[var\(--crimson\)\]    { border-color:var(--crimson); }

.text-white                       { color:#fff; }
.text-\[var\(--ink\)\]            { color:var(--ink); }
.text-\[var\(--ink-soft\)\]       { color:var(--ink-soft); }
.text-\[var\(--ivory\)\]          { color:var(--ivory); }
.text-\[var\(--muted\)\]          { color:var(--muted); }
.text-\[var\(--emerald\)\]        { color:var(--emerald); }
.text-\[var\(--emerald-deep\)\]   { color:var(--emerald-deep); }
.text-\[var\(--emerald-soft\)\]   { color:var(--emerald-soft); }
.text-\[var\(--gold\)\]           { color:var(--gold); }
.text-\[var\(--crimson\)\]        { color:var(--crimson); }
.text-\[var\(--line-soft\)\]      { color:var(--line-soft); }

.text-xs   { font-size:.75rem;  line-height:1rem; }
.text-sm   { font-size:.875rem; line-height:1.25rem; }
.text-lg   { font-size:1.125rem; line-height:1.6rem; }
.text-xl   { font-size:1.25rem;  line-height:1.7rem; }
.text-2xl  { font-size:1.5rem;   line-height:1.95rem; }
.text-3xl  { font-size:1.875rem; line-height:2.25rem; }
.text-4xl  { font-size:2.25rem;  line-height:2.5rem; }
.text-5xl  { font-size:3rem;     line-height:1; }
.text-\[10px\]  { font-size:10px; line-height:1.4; }
.text-\[11px\]  { font-size:11px; line-height:1.4; }
.text-\[12px\]  { font-size:12px; line-height:1.4; }
.text-\[44px\]  { font-size:44px; line-height:1.05; }

.font-light    { font-weight:300; }
.font-medium   { font-weight:500; }
.font-semibold { font-weight:600; }
.italic        { font-style:italic; }
.uppercase     { text-transform:uppercase; }
.underline     { text-decoration:underline; }

.text-left   { text-align:left; }
.text-center { text-align:center; }
.text-right  { text-align:right; }

.tracking-tight  { letter-spacing:-.025em; }
.tracking-wide   { letter-spacing:.025em; }
.tracking-wider  { letter-spacing:.05em; }
.tracking-\[0\.18em\] { letter-spacing:.18em; }
.tracking-\[0\.2em\]  { letter-spacing:.2em; }
.tracking-\[0\.22em\] { letter-spacing:.22em; }

.leading-tight     { line-height:1.25; }
.leading-snug      { line-height:1.375; }
.leading-relaxed   { line-height:1.625; }
.leading-\[1\.02\] { line-height:1.02; }
.leading-\[1\.05\] { line-height:1.05; }

.cursor-pointer { cursor:pointer; }
.opacity-50     { opacity:.5; }
.transition-all { transition-property:all; transition-duration:.15s; }
.overflow-hidden  { overflow:hidden; }
.overflow-x-auto  { overflow-x:auto; }
.overflow-y-auto  { overflow-y:auto; }
.whitespace-nowrap { white-space:nowrap; }
.backdrop-blur     { backdrop-filter:blur(8px); }
.blur-3xl          { filter:blur(64px); }

.-translate-x-1\/2 { transform:translateX(-50%); }

.hover\:bg-\[var\(--ivory\)\]:hover     { background-color:var(--ivory); }
.hover\:bg-white:hover                  { background-color:#fff; }
.hover\:border-\[var\(--ink\)\]:hover   { border-color:var(--ink); }
.hover\:text-\[var\(--ink\)\]:hover     { color:var(--ink); }
.hover\:text-\[var\(--emerald\)\]:hover { color:var(--emerald); }

@media (min-width:768px){
  .md\:block       { display:block; }
  .md\:flex        { display:flex; }
  .md\:inline      { display:inline; }
  .md\:inline-flex { display:inline-flex; }
  .md\:flex-row    { flex-direction:row; }
  .md\:items-center { align-items:center; }
  .md\:justify-end  { justify-content:flex-end; }
  .md\:text-right   { text-align:right; }
  .md\:text-4xl     { font-size:2.25rem; line-height:2.5rem; }
  .md\:text-5xl     { font-size:3rem; line-height:1; }
  .md\:text-\[68px\] { font-size:68px; line-height:1.02; }
  .md\:py-28        { padding-top:7rem; padding-bottom:7rem; }
  .md\:grid-cols-2  { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3  { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .md\:grid-cols-4  { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .md\:grid-cols-5  { grid-template-columns:repeat(5, minmax(0,1fr)); }
  .md\:grid-cols-\[1fr\,1fr\,auto\] { grid-template-columns:1fr 1fr auto; }
  .md\:grid-cols-\[auto\,1fr\,auto\] { grid-template-columns:auto 1fr auto; }
  .md\:col-span-2 { grid-column:span 2 / span 2; }
  .md\:col-span-3 { grid-column:span 3 / span 3; }
}

@media (min-width:1024px){
  .lg\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (min-width:1280px){
  .xl\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .xl\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (max-width:640px){
  /* Header: keep buttons tappable but compact */
  header .btn { padding:.45rem .7rem; font-size:.78rem; }
  header .gap-2 { gap:.35rem; }

  /* Hero typography */
  .text-\[44px\] { font-size:30px; line-height:1.1; }
  .md\:text-\[68px\] { font-size:30px; line-height:1.1; }

  /* Modals fill the viewport better on mobile */
  .modal { max-height:94vh; max-width:96vw; border-radius:var(--r-md); }

  /* Tabs, inputs, cards */
  .tab-pill { padding:.4rem .7rem; font-size:.74rem; }
  .stat-num { font-size:1.5rem; }
  .max-w-\[1400px\] { padding-left:1rem; padding-right:1rem; }
  .form-section { padding:1rem 1.1rem; }

  /* Standard container padding shrinks on small screens */
  .max-w-7xl, .max-w-6xl, .max-w-5xl { padding-left:1rem; padding-right:1rem; }

  /* Cards inside grids get less padding */
  .card.p-7 { padding:1.25rem; }
  .card.p-6 { padding:1rem; }

  /* Hero stat strip — keep 3 columns but smaller text */
  .grid.grid-cols-3 { gap:1rem; }
  .font-display.text-3xl { font-size:1.5rem; }
  .font-display.text-2xl { font-size:1.25rem; }

  /* Section padding shrinks */
  section { padding-top:2.5rem; padding-bottom:2.5rem; }
  .py-20 { padding-top:3rem; padding-bottom:3rem; }
  .py-28 { padding-top:3rem; padding-bottom:3rem; }
  .mt-12 { margin-top:2rem; }

  /* Tables: ensure horizontal scroll on small screens */
  table { min-width:560px; }
  .overflow-x-auto { -webkit-overflow-scrolling:touch; }

  /* Admin sidebar / nav tabs */
  .admin-nav { flex-wrap:wrap; gap:.25rem; }

  /* Auth modal demo presets shrink */
  .auth-demo-card { font-size:11px; }

  /* Featured card on hero shouldn't overflow */
  .ml-12 { margin-left:0 !important; }

  /* Hide all 'mobile-hide' AND non-essential desktop-only chips */
  .mobile-hide { display:none !important; }
}

@media (max-width:480px){
  /* Even tighter compaction on phones */
  header .gap-3 { gap:.3rem; }
  header .btn { padding:.4rem .55rem; font-size:.72rem; }

  /* Brand wordmark hides on tiniest screens — keep only the logo image */
  .portal-logo + .leading-tight { display:none; }

  /* Hero stats stack to 2 columns under 480px */
  .grid.grid-cols-3.max-w-md { grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
  .grid.grid-cols-3.max-w-md > :nth-child(3) { grid-column:1 / -1; }

  /* Buttons in hero CTA stack */
  .mt-8.flex.flex-wrap.gap-3 .btn { width:100%; justify-content:center; }

  /* Admin tab pills wrap, stay tappable */
  .admin-tab { padding:.4rem .6rem; font-size:.72rem; }
}

.break-words { overflow-wrap:break-word; word-break:break-word; }

/* Admin deck card — compact single-row action buttons (Edit/View/Publish/Delete) */
.deck-actions { display:flex; gap:.4rem; width:100%; }
.deck-actions .act-btn {
  flex:1 1 0; min-width:0; justify-content:center;
  padding:.42rem .3rem; font-size:.72rem; gap:.28rem;
}
.deck-actions .act-btn .act-label {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.deck-actions .act-btn .act-icon { font-size:.85rem; flex-shrink:0; }





/* Product picture — shown top-centre between name and TRL in the detail
   view, styled as a soft background-like element (moderate size). */
.product-pic-wrap { align-self:center; min-width:0; }
.product-pic-bg {
  width: 200px;            /* fixed target width, sits in the middle gap */
  max-width: 100%;         /* shrinks to the space available between name and TRL */
  height: 110px;           /* fixed, background-like band */
  object-fit: contain;
  border-radius: 12px;
  padding: 6px;
  background: var(--paper, #faf8f3);
  border: 1px solid var(--line, #e7e2d6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  opacity: 0.97;
}