/* ═══════════════════════════════════════════════════════════════════════════
   ValWithProof — product shell
   One chrome for the landing page and for all four features.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── The ValWithProof palette. ────────────────────────────────────────
     Two colours, read off the mark itself (assets/favicon.svg): the navy the
     monogram sits on, and the teal its V is drawn in. Everything below is
     those two, plus the status hues that have to stay distinguishable from
     them.

     What this replaces: the product was running THREE palettes at once. This
     shell was Tailwind blue, the mentor and admin portals were a forest green
     left over from an earlier version, and the founder app had already moved
     to the mark's teal. Three products' worth of colour under one logo, and a
     founder walking from the landing page to a mentor's profile passed through
     all of it.

     Token names and roles are unchanged, which is why moving the entire chrome
     across took no component edits — the same reason the light theme could
     replace the dark one before it. Surfaces still get lighter as they come
     forward, so depth reads the way it did.

     Ink on #FFFFFF: primary 15.4:1, secondary 8.9:1, tertiary 4.6:1.

     One judgement worth stating: --ok below is the brand accent rather than a
     separate green. A teal-green product cannot also own a distinct
     teal-green "success" — two near-identical greens meaning different things
     is worse than one colour meaning both. --warn and --down keep hues of
     their own, because those two DO have to be told apart at a glance. */

  /* surfaces — cool paper, brighter as it comes forward */
  --bg:            #EDF4F3;
  --bg-page:       #F6F9F9;
  --bg-rail:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F2F7F6;
  --surface-hover: #E6F1EF;

  /* lines — alpha over any surface in the stack, as before */
  --line:          rgba(15, 33, 55, .10);
  --line-strong:   rgba(15, 33, 55, .18);

  /* type */
  --text:          #0F2137;
  --text-2:        #3D4F5C;
  --text-3:        #5F727C;

  /* brand — a step darker than the dark theme's, because #2DD4BF on white is
     a decorative colour and not a legible one */
  --brand:         #0E7C70;
  --brand-600:     #0B6A61;
  --indigo:        #0F2137;
  --cyan:          #2DD4BF;
  /* Two gradients, and BOTH are read as text or carry white text across their
     whole length — so the constraint is the LIGHTEST stop, not the average.
     The mark's #2DD4BF is beautiful and is 1.86:1 on white, so it does not
     appear in either of these; it belongs on the dark surfaces where it is
     8.7:1. A gradient whose tail is illegible is a gradient that fades the end
     of every word it is clipped to.
       --grad     runs navy -> accent under `.grad` text: 15.4:1 down to 5.1:1
       --grad-btn carries #fff on a button: 9.4:1 down to 5.1:1 */
  --grad:          linear-gradient(100deg, #0F2137 0%, #0B4F49 46%, #0E7C70 100%);
  --grad-btn:      linear-gradient(120deg, #0B4F49 0%, #0B6A61 52%, #0E7C70 100%);
  /* Elevation, not a halo. A coloured glow belongs on a dark surface; on paper
     it reads as a printing error. */
  --glow:          0 10px 24px -10px rgba(14, 124, 112, .45), 0 1px 2px rgba(15, 33, 55, .07);

  /* status — the 600s, which is where these colours are legible on white */
  --ok:            #0E7C70;
  --warn:          #B45309;
  --down:          #DC2626;

  --rail-w:        264px;
  --top-h:         72px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  /* IBM Plex Sans, with Plex Mono beside it for anything that has to
     line up in columns. Named once here; every document loads the same
     two faces and reads them off these two tokens. */
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* The shell toggles panes with the `hidden` attribute, and several of those
   panes are flex or grid containers. An explicit `display` beats the UA's
   `[hidden] { display: none }`, so state it once here rather than remembering
   it at four call sites. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(14, 124, 112, .22); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── layout ─────────────────────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  transition: grid-template-columns .18s ease;
  /* The row must be stated. Without it the implicit row is `auto`, which sizes
     to max-content — so on a tall page the row grows past 100vh, `overflow:
     hidden` clips the overflow, and the scroll container inside never gets a
     constrained height to scroll within. The page just ends. */
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ── sidebar ────────────────────────────────────────────────────────────── */

/* Collapsed: icons only. The width is the one thing that changes — every rule
   below still applies, so nothing has to be restyled for the narrow state.

   What gets hidden is the WORDS, not the row. `.nav-body` used to be hidden
   wholesale, and because the icon was inside it, collapsing the sidebar left
   five identical empty boxes — the control that is supposed to make the rail
   more usable removed the only thing in it you could navigate by. The icon
   is a direct child of the row now (see describeRail in shell.js) and only
   the label, the description and the price mark stand down. */
body.rail-collapsed .layout { grid-template-columns: 68px 1fr; }
body.rail-collapsed .rail { padding: 20px 10px; align-items: center; }
body.rail-collapsed .brand { font-size: 0; gap: 0; padding: 4px 0 0; justify-content: center; }
body.rail-collapsed .nav-name,
body.rail-collapsed .nav-sub,
body.rail-collapsed .rail-foot { display: none; }
/* The body keeps its box so the status dot inside it still has somewhere to
   be, but it stops claiming the leftover width and pushing the icon off
   centre. */
body.rail-collapsed .nav-body { flex: none; }
/* `align-items: center` on the rail makes every child shrink to its content,
   which left the nav a 34px column floating inside a 68px strip and the icons
   visibly off-centre. The nav takes the full width back and centres its own
   rows; the 13px icon-to-label gap goes with the label. */
body.rail-collapsed .nav { align-self: stretch; }
body.rail-collapsed .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
body.rail-collapsed .nav-item .dot { position: absolute; top: 7px; right: 9px; margin: 0; }
body.rail-collapsed .rail-collapse { transform: rotate(180deg); }

.rail-collapse {
  position: absolute;
  top: 22px; right: 12px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--text-3);
  transition: color .15s ease, background .15s ease, transform .18s ease;
  z-index: 2;
}
.rail-collapse:hover { color: var(--text); background: var(--surface-2); }
body.rail-collapsed .rail-collapse { position: static; margin: 0 auto 4px; }

.rail {
  position: relative;
  background: var(--bg-rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 26px;
  /* min-height: 0 for the same reason as the row above — a grid item defaults
     to min-height: auto and refuses to shrink below its content. */
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  /* And never sideways. At 68px wide anything that does not fit is a bug in
     the collapsed styling, and a horizontal scrollbar inside the sidebar
     hides that bug instead of showing it. */
  overflow-x: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand svg { flex: none; }
.brand-mark { flex: none; border-radius: 8px; display: block; }

.nav { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  position: relative;
}
.nav-item svg { flex: none; opacity: .85; }

/* Each rail item is a name and a line about what it does. The name row keeps
   the dot on its right; the description sits under both, one line, clipped
   rather than wrapped — a rail that reflows as the status text changes is
   worse than one that says slightly less. */
.nav-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nav-top { display: flex; align-items: center; gap: 13px; }
.nav-top .dot { margin-left: auto; }
.nav-sub {
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.35;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item[aria-current='page'] .nav-sub { color: var(--text-2); }
.nav-item:hover .nav-sub { color: var(--text-2); }
.nav-item:hover { background: rgba(15, 33, 55, .04); color: var(--text); }

.nav-item[aria-current='page'] {
  background: linear-gradient(90deg, rgba(14, 124, 112, .13), rgba(14, 124, 112, .04));
  border-color: rgba(14, 124, 112, .28);
  color: var(--brand-600);
  font-weight: 600;
}
.nav-item[aria-current='page'] svg { opacity: 1; color: var(--brand); }

/* the live dot on each feature in the rail */
.dot {
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.dot[data-state='running'] { background: var(--ok); box-shadow: 0 0 0 3px rgba(14, 124, 112, .18); }
.dot[data-state='starting'] { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.dot[data-state='failed'], .dot[data-state='blocked'] { background: var(--down); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }

/* ══ the Experts price mark ═══════════════════════════════════════════════
   One tag, on one nav item. Reports, Prototypes and APIs are free and carry
   nothing — a row of "FREE" badges is three pieces of furniture saying the
   same thing, and the thing they say is the default. Only the item that can
   cost money is marked, so the mark means something.
   ═══════════════════════════════════════════════════════════════════════ */

.nav-tag {
  margin-left: auto; margin-right: 4px;
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
.nav-tag-inr {
  color: var(--brand);
  border: 1px solid rgba(14, 124, 112, .3);
  background: rgba(14, 124, 112, .08);
}
/* The dot claims `margin-left: auto` to push itself right. With a tag in
   front of it that auto margin would push the TAG away from the dot and
   leave a gap in the middle of the row, so on a row that has both, the tag
   takes the auto margin and the dot just sits next to it. */
.nav-item .nav-tag + .dot,
.nav-top .nav-tag + .dot { margin-left: 0; }
.nav-item[aria-current='page'] .nav-tag-inr { background: var(--surface); }
/* Collapsed to a strip of icons, a price mark is a clipped glyph with no row
   to belong to. It stands down with the rest of the labels. */
body.rail-collapsed .nav-tag { display: none; }

.rail-foot {
  margin-top: auto;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.rail-foot b { color: var(--text); font-weight: 600; display: block; margin-bottom: 3px; font-size: 13px; }

/* ── main column ────────────────────────────────────────────────────────── */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-page);
}

.topbar {
  height: var(--top-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 34px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 5;
}

.topnav { display: flex; align-items: center; gap: 34px; }
.topnav a {
  font-size: 15px;
  color: var(--text-2);
  font-weight: 500;
  transition: color .15s ease;
}
.topnav a:hover { color: var(--text); }

/* ── who is signed in ────────────────────────────────────────────────────── */
/* One control, holding the profile and the way out. This corner used to carry
   three unrelated things side by side — a role label, a "Profile 60%" chip
   inserted by profile.js, and a Sign out button — which is three places to
   look for one idea. Same shape as the founder app's and the mentor portal's,
   so the product has one answer to "where are my settings". */

.acct-menu { position: relative; margin-left: 4px; }
.acct-menu > summary { list-style: none; }
.acct-menu > summary::-webkit-details-marker { display: none; }

.acct-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.acct-btn:hover { background: var(--surface-2); border-color: var(--line); }
.acct-menu[open] .acct-btn { background: var(--surface-2); border-color: var(--line); }
.acct-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.acct-ini {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--indigo);
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.acct-who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.acct-who b { font-size: 13px; font-weight: 600; color: var(--text); }
.acct-caret { font-size: 10px; color: var(--text-3); flex: none; }

.who-role {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
/* Under 720px the words come off and the disc stands alone. */
@media (max-width: 720px) { .acct-who, .acct-caret { display: none; } }

.acct-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  min-width: 248px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 38px -14px rgba(15, 33, 55, .3), 0 2px 6px rgba(15, 33, 55, .06);
  padding: 6px;
}
.acct-head { padding: 8px 10px 9px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.acct-head b { display: block; font-size: 13px; color: var(--text); }
.acct-head span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  overflow-wrap: anywhere; }
.acct-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: 0; border-radius: var(--r-sm);
  padding: 7px 10px; cursor: pointer;
}
.acct-item:hover { background: var(--surface-2); }
.acct-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.acct-item-l { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.acct-item-h { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.acct-sep { height: 1px; background: var(--line); margin: 5px 0; }
/* The only destructive item, and the last one. */
.acct-item.danger .acct-item-l { color: var(--down); }
.acct-item.danger:hover { background: rgba(220, 38, 38, .07); }


.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(14, 124, 112, .55), 0 1px 2px rgba(15, 33, 55, .08); }
.btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--surface-hover); border-color: rgba(148, 163, 184, .3); }
.btn-lg { padding: 16px 30px; font-size: 16.5px; border-radius: var(--r-full); }

.view { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }

/* ── hero ───────────────────────────────────────────────────────────────── */
/* Sized against the viewport rather than against a design mock.
   The idea box is the only input in the product, and everything downstream
   depends on it being used — so it has to be on screen the moment the home
   page opens, on a 768px laptop as readily as on a large display. Padding,
   headline and lede all scale with the window; fixed values are what used to
   push the box below the fold on a short screen. */

.hero {
  position: relative;
  padding: clamp(26px, 5vh, 68px) 40px clamp(34px, 6vh, 80px);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 10% auto;
  height: 620px;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(14, 124, 112, .11), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 33, 55, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 33, 55, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

h1 {
  margin: 0 auto clamp(14px, 2.2vh, 24px);
  /* 22ch holds the headline to three lines. At 15ch it wrapped to four, and
     the fourth line alone cost more vertical space than the whole idea box
     label. */
  max-width: 22ch;
  font-size: clamp(31px, calc(2.9vw + 0.9vh), 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.033em;
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 0 auto clamp(18px, 3vh, 34px);
  max-width: 68ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--text-2);
}

/* ── the idea box ───────────────────────────────────────────────────────
   The only input in the product. Everything downstream reads what is typed
   here, which is why it sits in the hero rather than inside any one feature. */

.idea-box {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px -24px rgba(15, 33, 55, .22), 0 1px 2px rgba(15, 33, 55, .05);
  text-align: left;
}

.idea-box .idea-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.idea-box textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.6;
  resize: vertical;
  /* Three lines on a short screen, five on a tall one — it is still the same
     box, it just does not take the fold with it. */
  min-height: clamp(70px, 11vh, 104px);
}
.idea-box textarea::placeholder { color: var(--text-3); }
.idea-box textarea:focus {
  outline: none;
  border-color: rgba(14, 124, 112, .55);
  box-shadow: 0 0 0 3px rgba(14, 124, 112, .13);
}

.idea-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.idea-help { flex: 1; min-width: 200px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.idea-foot .btn { flex: none; }
.idea-foot .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.idea-note {
  max-width: 780px;
  margin: 18px auto 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}
.idea-note b { color: var(--text); font-weight: 600; }

.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── the team ───────────────────────────────────────────────────────────
   Was a panel at the foot of a Reports report; it is company context, so it
   sits at the foot of the home page now. Auto-fit rather than a fixed column
   count, because seven people do not divide evenly into any of them. */

.team-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.team-card {
  padding: 24px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
  transition: border-color .15s ease, transform .15s ease;
}
.team-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.team-avatar,
.team-initials {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin-bottom: 15px;
  display: block;
}
.team-avatar { object-fit: cover; border: 1px solid var(--line-strong); }
.team-initials {
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
}

.team-card h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.team-role {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--brand-600);
}
.team-bio { margin-top: 11px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.team-li {
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-3);
  transition: color .15s ease;
}
.team-li:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════ the idea history ══
   Under the box, because that is where a founder looks for what they wrote
   last time. One row per idea, and the only control that matters on it is the
   switch that decides whether a mentor may read it — so the switch is a
   switch, labelled with what it does rather than with "public".              */

.ideas { max-width: 860px; margin: 0 auto; padding: 0 24px 72px; }
.ideas-hd h2 { font-size: 19px; margin: 0 0 4px; letter-spacing: -.015em; }
.ideas-hd p { margin: 0 0 18px; font-size: 13.5px; color: var(--text-3); line-height: 1.55; }

.idea-row {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.idea-row.on { border-color: rgba(17, 148, 136, .38); background: linear-gradient(0deg, rgba(17,148,136,.035), rgba(17,148,136,.035)), var(--surface); }
.idea-row-top { display: flex; align-items: flex-start; gap: 14px; }
.idea-row h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.idea-when { font-size: 12px; color: var(--text-3); }
.idea-text {
  margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idea-row.open-text .idea-text { -webkit-line-clamp: unset; }
.idea-foot2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.idea-views { font-size: 12.5px; color: var(--text-3); }
.idea-views b { color: var(--text); font-weight: 650; }
.idea-acts { display: flex; gap: 8px; margin-left: auto; }
.idea-mini {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  border-radius: var(--r-full); padding: 6px 12px; font-size: 12.5px; font-weight: 550;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.idea-mini:hover { background: var(--surface-hover); color: var(--text); }
.idea-mini.danger:hover { color: var(--down); border-color: rgba(220, 38, 38, .3); }

/* The consent switch. Deliberately a real switch and not a checkbox in a row
   of buttons: it is the one control here that changes who can see something. */
.idea-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.idea-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.idea-switch .track {
  width: 38px; height: 22px; border-radius: 999px; background: #CBD5D3;
  position: relative; flex: none; transition: background .16s ease;
}
.idea-switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15,33,55,.28);
  transition: transform .16s ease;
}
.idea-switch input:checked + .track { background: var(--brand); }
.idea-switch input:checked + .track::after { transform: translateX(16px); }
.idea-switch input:focus-visible + .track { outline: 2px solid var(--cyan); outline-offset: 2px; }
.idea-switch .lbl { font-size: 12.5px; font-weight: 550; color: var(--text-2); }
.idea-switch input:checked ~ .lbl { color: var(--brand-600); }

/* An offer a mentor made on one idea, sitting on that idea. */
.idea-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(17, 148, 136, .07); border: 1px solid rgba(17, 148, 136, .2);
}
.idea-offer .who { font-size: 13px; flex: 1; min-width: 200px; line-height: 1.5; }
.idea-offer .who b { font-weight: 650; }
.idea-offer .note { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.idea-offer .acts { display: flex; gap: 8px; }
.idea-offer .btn { padding: 7px 14px; font-size: 13px; }
.idea-offer.done { background: var(--surface-2); border-color: var(--line); }

.ideas-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 22px; text-align: center; font-size: 13.5px; color: var(--text-3);
}

@media (max-width: 620px) {
  .ideas { padding: 0 16px 64px; }
  .idea-acts { margin-left: 0; width: 100%; }
  .idea-acts .idea-mini { flex: 1; }
  .idea-offer .acts { width: 100%; }
  .idea-offer .acts .btn { flex: 1; }
}

/* ── content sections ───────────────────────────────────────────────────── */

section.band { padding: 88px 40px; border-top: 1px solid var(--line); }
section.band.alt { background: rgba(15, 33, 55, .035); }

.wrap { max-width: 1120px; margin: 0 auto; }

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: var(--r-full);
  background: rgba(17, 148, 136, .11);
  border: 1px solid rgba(17, 148, 136, .24);
  color: #7FE3D6;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.sub { margin: 0 0 46px; max-width: 62ch; color: var(--text-2); font-size: 17px; line-height: 1.6; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.card {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
a.card:hover { transform: translateY(-3px); border-color: rgba(17, 148, 136, .34); background: var(--surface-2); }

.card-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(17, 148, 136, .13);
  border: 1px solid rgba(17, 148, 136, .22);
  color: var(--cyan);
  margin-bottom: 5px;
}
.card h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.card .meta {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-3);
  border-top: 1px solid var(--line);
}

/* how it works */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
.step {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { margin: 0 0 7px; font-size: 16.5px; font-weight: 650; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* faq */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
details.qa {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
details.qa summary {
  padding: 19px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--text-3); flex: none; line-height: 1; }
details.qa[open] summary::after { content: '\2013'; }
details.qa[open] summary { border-bottom: 1px solid var(--line); }
details.qa p { margin: 0; padding: 17px 22px 21px; color: var(--text-2); font-size: 15px; line-height: 1.65; }

footer.foot {
  padding: 34px 40px 44px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 13.5px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ── framed feature ─────────────────────────────────────────────────────── */

.frame-wrap { height: 100%; display: flex; flex-direction: column; }

/* The feature's contents in the product header. Not a second bar — the same
   .topbar, carrying what the route needs instead of the page anchors. */
.topfeature { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.topfeature .tf-title { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.topfeature .chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font-size: 12.5px; font-weight: 500;
  font-family: inherit; cursor: pointer;
}
.topfeature button.chip:hover,
.topfeature a.chip:hover { color: var(--text); border-color: var(--line-strong); }

/* A framed feature fills the pane and scrolls inside it. The shell's own
   scroller is switched off while one is up, so there is exactly one scrollbar
   on screen rather than one inside another. */
body.framed .view { overflow: hidden; }

iframe.feature {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
  display: block;
}

/* boot / error state shown while a feature is still coming up */
.state {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
}
.state-inner { max-width: 560px; }
.state h3 { margin: 0 0 10px; font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.state p { margin: 0 0 8px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.state code {
  display: block;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: #0B6A61;
  font-family: var(--mono);
  font-size: 13px;
  text-align: left;
  overflow-x: auto;
  white-space: pre;
}
.spinner {
  width: 30px; height: 30px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(148, 163, 184, .18);
  border-top-color: var(--cyan);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── responsive ─────────────────────────────────────────────────────────── */

/* Declared before the media query that overrides it. It used to sit AFTER,
   and only survived on an `!important` that existed to win a fight source
   order should never have started. */
.rail-toggle {
  display: none;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
}

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--rail-w);
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.rail-open .rail { transform: none; box-shadow: 0 0 0 100vmax rgba(15, 33, 55, .38); }

  /* The drawer is always the full rail.

     Collapsing is remembered in localStorage, so a preference set at desk
     width followed the user onto a phone and opened the drawer as a 264px
     panel of icon-only rows with the labels suppressed — the one context
     where there is no width to save and every reason to show the words.
     The narrow layout wins outright here rather than inheriting a
     preference that was about a different screen. */
  body.rail-collapsed .layout { grid-template-columns: 1fr; }
  body.rail-collapsed .rail { padding: 20px 16px; align-items: stretch; }
  body.rail-collapsed .brand { font-size: 19px; gap: 11px; padding: 4px 8px 0; justify-content: flex-start; }
  body.rail-collapsed .nav-name,
  body.rail-collapsed .nav-sub { display: block; }
  body.rail-collapsed .rail-foot { display: block; }
  body.rail-collapsed .nav-tag { display: inline-flex; }
  body.rail-collapsed .nav-body { flex: 1; }
  body.rail-collapsed .nav { align-self: auto; }
  body.rail-collapsed .nav-item { justify-content: flex-start; padding: 10px 13px; gap: 13px; }
  body.rail-collapsed .nav-item .dot { position: static; margin-left: auto; }
  /* Nothing to collapse into, so the control that does it stands down. */
  .rail-collapse { display: none; }

  .topbar { justify-content: space-between; padding: 0 18px; gap: 14px; }
  .topnav { display: none; }
  .rail-toggle { display: grid; }
  /* With the site nav gone there is nothing left to divide from. */
  .acct-menu { margin-left: 0; }
}

@media (max-width: 620px) {
  .hero { padding: clamp(22px, 4vh, 46px) 20px clamp(26px, 5vh, 52px); }
  section.band { padding: 58px 20px; }
  .topfeature { gap: 8px; }
  .topfeature .tf-title { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── a face in the corner ─────────────────────────────────────────────────
   The account disc holds initials until the founder adds a photograph (see
   the profile wizard). Same disc, same size either way — the topbar must not
   reflow the moment a picture appears. */
.acct-ini.has-photo { background: none; overflow: hidden; }
.acct-ini img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }