/* ============================================================
   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;

  /* BRAND — cobalt blue (per brand guidelines) */
  --brand:#285CAA;
  --brand-deep:#1E4685;
  --brand-light:#CAE1FF;

  /* 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; }

/* ============================================================
   GLOBAL TYPOGRAPHY SCALE — per brand guidelines
   Hero 60/700/72-88 · H1 44/700/54 · Highlight 14/600/20 (caps)
   Body 16/400/28 · Button 16/600/24 · Disclaimer 12/400/18
   ============================================================ */
.text-hero        { font-size:60px; font-weight:700; line-height:80px; letter-spacing:-0.02em; }
.text-h1           { font-size:44px; font-weight:700; line-height:54px; letter-spacing:-0.02em; }
.text-highlight    { font-size:14px; font-weight:600; line-height:20px; text-transform:uppercase; letter-spacing:0.08em; }
.text-body-std     { font-size:16px; font-weight:400; line-height:28px; }
.text-btn-std      { font-size:16px; font-weight:600; line-height:24px; }
.text-disclaimer   { font-size:12px; font-weight:400; line-height:18px; }
@media (max-width:768px){
  .text-hero { font-size:38px; line-height:46px; }
  .text-h1   { font-size:30px; line-height:38px; }
}

/* Highlight/section badge — brand-blue pill used for section headings */
.section-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand); color:#fff;
  padding:6px 14px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}

/* Highlight box — light brand-blue bounding box for sectioned content */
.highlight-box{
  background:var(--brand-light);
  border-radius:var(--r-lg);
  padding:24px;
}

/* Header nav links — identical font/size, no underline anywhere (incl. hover) */
.header-link{
  font-size:14px; font-weight:500; text-decoration:none !important;
  color:var(--ink-soft);
}
.header-link:hover{ color:var(--brand); text-decoration:none !important; }

/* Detail-page header — all tags/badges on a single, non-wrapping,
   horizontally-scrollable line */
.header-tag-row{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.header-tag-row::-webkit-scrollbar{ height:4px; }
.header-tag-row > *{ flex-shrink:0; }

/* Return-to-top floating button */
.return-to-top{
  position:fixed; right:24px; bottom:24px; z-index:40;
  width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-lg); cursor:pointer; font-size:18px; color:var(--ink);
  transition:opacity .2s ease, transform .2s ease;
}
.return-to-top:hover{ background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px); }

/* Return-to-top — labeled pill variant (with "Return to top" text), used on
   the startup detail page floating stack for both admin/user and investor,
   matching the reference design. */
.return-to-top-labeled{
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-lg); cursor:pointer; font-size:12px; font-weight:700;
  color:var(--ink); letter-spacing:.04em; text-transform:uppercase;
  transition:all .2s ease; white-space:nowrap;
}
.return-to-top-labeled:hover{ background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px); }
.return-to-top-labeled .rtt-icon{ font-size:15px; line-height:1; }

/* Floating button stack — used on the startup detail page (return-to-top + express interest) */
.floating-btn-stack{
  position:fixed; right:24px; bottom:24px; z-index:40;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.floating-btn-stack .return-to-top{ position:static; }
.floating-express-btn{
  box-shadow:var(--sh-lg); text-transform:uppercase; font-size:12px;
  font-weight:700; letter-spacing:.04em; padding:12px 20px;
}
/* Express interest (investor) and Edit startup (admin/user) share this same
   brand-blue color, matching the reference design. */
.floating-btn-brand{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.floating-btn-brand:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.sticky-product-bar{ box-shadow:var(--sh-sm); }

/* Small round floating close button — replaces the old back-button/logo
   header bar on the startup detail page, same in every login. */
.detail-close-btn{
  position:fixed; top:16px; right:24px; z-index:41;
  width:36px; height:36px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-lg); cursor:pointer; font-size:15px; color:var(--muted);
  transition:all .2s ease;
}
.detail-close-btn:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; transform:rotate(90deg); }

/* Fixed top action button — non-Overview tabs on the startup detail page.
   Everything else (name, logo, TRL, tabs) scrolls normally; only this stays
   pinned at the top of the viewport. */
.top-action-fixed{
  position:fixed; top:16px; right:24px; z-index:40;
}
.top-action-fixed .btn{ box-shadow:var(--sh-lg); }

/* Products tab — each product is a full-width slide; horizontal scroll/snap
   navigates between products (via scroll, swipe, or the round nav button),
   while vertical scroll is preserved inside each individual slide. */
.product-slider{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.product-slider::-webkit-scrollbar{ display:none; }
.product-slide{
  flex:0 0 100%; width:100%; scroll-snap-align:start;
  max-height:72vh; overflow-y:auto; margin:0;
}

/* Round product navigator — same button style both sides: "next" on the
   right (as before), "prev" mirrored on the left, both vertically centered. */
.product-slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--brand); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-lg); cursor:pointer; z-index:5;
  transition:background .2s ease, transform .2s ease;
}
.product-slider-nav-next{ right:12px; }
.product-slider-nav-prev{ left:12px; }
.product-slider-nav:hover{ background:var(--brand-deep); transform:translateY(-50%) scale(1.06); }
.product-slider-nav-icon{ font-size:16px; margin-left:2px; }
.product-slider-nav-icon-prev{ transform:rotate(180deg); margin-left:0; margin-right:2px; }

/* Pagination dots — which product you're on, click to jump */
.product-slider-dots{ display:flex; align-items:center; gap:6px; }
.product-slider-dot{
  width:7px; height:7px; border-radius:50%; padding:0; border:none;
  background:var(--line); cursor:pointer; transition:all .2s ease;
}
.product-slider-dot.active{ background:var(--brand); width:18px; border-radius:4px; }

/* Login dropdown (single "Login" entry point per spec) */
.login-menu-wrap{ position:relative; }
.login-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); padding:6px; z-index:30;
}
.login-menu button{
  display:block; width:100%; text-align:left; padding:10px 12px;
  border-radius:var(--r-sm); font-size:14px; background:transparent; border:none; color:var(--ink);
}
.login-menu button:hover{ background:var(--line-soft); }

/* ============================================================
   TRL COLOR SCALE — consistent across all views
   TRL 1-3 red · TRL 4-6 orange · TRL 7-9 green
   ============================================================ */
.badge-trl-low  { background:var(--crimson-soft); color:var(--crimson);   border-color:var(--crimson-soft-edge); }
.badge-trl-mid  { background:var(--gold-soft);     color:var(--gold);      border-color:var(--gold-soft-edge); }
.badge-trl-high { background:var(--green-soft);    color:var(--green-deep); border-color:var(--green-edge); }
.trl-info-wrap{ position:relative; display:inline-flex; align-items:center; }
.trl-info-tip{
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-lg);
  border-radius:var(--r-sm); padding:10px 12px; font-size:12px; line-height:1.5;
  color:var(--ink-soft); width:220px; z-index:20; text-transform:none; font-weight:400;
}
.trl-info-wrap:hover .trl-info-tip{ display:block; }

/* Portal-based TRL tooltip — rendered directly into <body> with fixed,
   JS-computed coordinates so it always escapes the startup card's
   overflow:hidden (and any other clipping ancestor) and stays fully
   visible on screen, in every login, instead of being cut off. */
.trl-info-tip-portal{
  position:fixed; transform:translateY(-100%);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-lg);
  border-radius:var(--r-sm); padding:10px 12px; font-size:12px; line-height:1.5;
  color:var(--ink-soft); width:240px; z-index:9999; text-transform:none; font-weight:400;
  pointer-events:none;
}
.trl-info-tip-portal::after{
  content:''; position:absolute; top:100%; left:var(--tip-arrow-x, 50%);
  transform:translateX(-50%); border:6px solid transparent;
  border-top-color:var(--paper); margin-top:-1px;
}
/* Flipped variant — opens below the icon when there isn't room above
   (e.g. TRL badge near the top of the viewport) */
.trl-info-tip-portal.flip-below{ transform:translateY(0); }
.trl-info-tip-portal.flip-below::after{
  top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--paper);
  margin-top:0; margin-bottom:-1px;
}

/* ============================================================
   STARTUP CARD — flip states (front: natural, always visible ·
   back: hover — richer detail panel)
   ============================================================ */
.startup-flip-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
  min-height:430px; cursor:pointer;
  /* +30px over the previous 400px — gives the sector-tag row room to wrap
     to a second line (when a tag doesn't fit) without clipping the action
     row beneath it, since front/back are absolutely inset to this height. */
  /* Card is inset only 3% from each side of its grid cell (94% width,
     centered) — kept close to the original full-width card so all content
     fits comfortably; front and back faces both shrink with it since they
     fill the card exactly. */
  width:94%; margin:0 auto;
  box-shadow:var(--sh-sm); transition:box-shadow .2s ease, transform .2s ease;
}
.startup-flip-card:hover{ box-shadow:var(--sh-lg); transform:translateY(-2px); }
@media (max-width:640px){
  /* Full width on phones — single-column grid, no room to spare */
  .startup-flip-card{ width:100%; }
}
.startup-flip-front, .startup-flip-back{
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:1; transition:opacity .18s ease; background:var(--paper);
}
.startup-flip-back{ opacity:0; pointer-events:none; }
.startup-flip-card:hover .startup-flip-front{ opacity:0; pointer-events:none; }
.startup-flip-card:hover .startup-flip-back{ opacity:1; pointer-events:auto; }
/* Uniform, wider rectangle for the logo/image area — same proportions on
   every card regardless of content, per design review. */
.startup-flip-img{
  width:100%; height:200px; object-fit:cover; background:var(--line-soft); flex-shrink:0;
}
.startup-flip-front-body{
  padding:14px 16px 10px; display:flex; flex-direction:column; gap:6px;
  flex:1 1 auto; min-height:0; overflow:hidden;
  /* fills remaining height so the action row below stays pinned to the
     card's bottom edge regardless of how much text is above it — content
     itself still packs tightly at the top via the small fixed gap.
     min-height:0 lets THIS block shrink first if space is tight, so the
     stat row / action row after it (flex-shrink:0) never get squeezed
     out and clipped. */
}
.startup-flip-location{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:12px; color:var(--muted); text-align:center;
}
.startup-flip-back-body{ padding:16px; flex:1; overflow-y:auto; }
/* Ask | views·interested — two-column split row on the card back.
   flex-shrink:0 so it (and the action row after it) always render at
   full size — only the body above is allowed to shrink if space is tight. */
.card-stat-row{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-soft);
  flex-shrink:0;
}
.card-stat-cell{
  padding:.6rem .75rem; border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.card-stat-cell:last-child{ border-right:0; }
.card-stat-cell strong{ color:var(--ink); font-weight:600; }
.view-details-pill{
  border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 12px;
  font-size:11px; font-weight:600; background:var(--paper); color:var(--ink);
  white-space:nowrap;
}
.view-details-pill:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

#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-sm { padding:.35rem .75rem; font-size:.78rem; }
.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(3, 1fr); flex-shrink:0;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.card-action-row-2{ grid-template-columns:repeat(2, 1fr); }
.card-action-btn {
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.7rem .3rem; font-size:.72rem; font-weight:500;
  background:var(--paper); color:var(--muted);
  border:none; border-right:1px solid var(--line);
  cursor:pointer; transition:all .2s; white-space:nowrap; position:relative;
  overflow:hidden; text-overflow:ellipsis;
}
.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(--brand); font-weight:600;
}
.card-action-btn.active-interest:hover { background:var(--brand-deep); }

/* ============================================================
   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); }

/* Accordion heading rows — closed by default, brand-blue background per spec */
.access-accordion-heading{
  background:var(--brand) !important; color:#fff; cursor:pointer; font-weight:600;
}
.access-accordion-heading:hover{ background:var(--brand-deep) !important; }
.access-accordion-heading td{ color:#fff; }
.accordion-caret{ display:inline-block; transition:transform .15s ease; font-size:11px; }
.accordion-caret.open{ transform:rotate(90deg); }
.accordion-summary-icon{ color:rgba(255,255,255,.85); }
.access-subrow td:first-child{ color:var(--ink-soft); }
/* Icons move to center on expanded subsections — handled by text-center on cells already */

.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: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 55%, #6E9DDB 100%);
  color:#fff;
}
.gradient-section .text-\[var\(--ink-soft\)\],
.gradient-section .text-\[var\(--muted\)\],
.gradient-section .h-rule { color:rgba(255,255,255,.85); }
.gradient-section .h-rule::before { background:rgba(255,255,255,.6); }
.gradient-section .card { color:var(--ink); }
.gradient-section .card .text-\[var\(--ink-soft\)\],
.gradient-section .card .text-\[var\(--muted\)\] { color:var(--ink-soft); }

.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; }
.py-14 { padding-top:3.25rem; padding-bottom:3.25rem; }   /* 65% of py-20 original (5rem) — an additional 5% cut on top of the earlier 70% */
.py-16-70 { padding-top:2.6rem; padding-bottom:2.6rem; }  /* 65% of py-16 original (4rem) — an additional 5% cut on top of the earlier 70% */

.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\(--brand\)\]          { color:var(--brand); }
.text-\[var\(--brand-light\)\]    { color:var(--brand-light); }
.bg-\[var\(--brand\)\]            { background-color:var(--brand); }
.bg-\[var\(--brand-light\)\]      { background-color:var(--brand-light); }
.border-\[var\(--brand\)\]        { border-color:var(--brand); }
.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),
   full-bleed and evenly divided to match the investor card's action row exactly. */
.deck-actions {
  display:flex; width:100%; margin:0 -1px; flex-shrink:0;
  border-top:1px solid var(--line); background:var(--paper);
}
.deck-actions .act-btn {
  flex:1 1 0; min-width:0; justify-content:center;
  padding:.7rem .3rem; font-size:.72rem; gap:.28rem;
  border-radius:0; border:none; border-right:1px solid var(--line);
  background:var(--paper); color:var(--muted); font-weight:500;
}
.deck-actions .act-btn:last-child { border-right:0; }
.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;
}