/* ============================================================
   Day Zero Founder Tools: interface
   ------------------------------------------------------------
   Loaded after styles.css and inheriting its tokens. The tools are
   an instrument panel rather than a marketing page: hairline
   borders, pale panels, mono labels, almost no motion.
   ============================================================ */

:root {
  /* One label scale for every small uppercase mono label in the tools:
     step rail, breadcrumbs, panel labels, stat labels, card meta and
     tags. They were drifting apart at four different sizes and three
     different colours, which made the tool pages read as if they had
     been built by different people. */
  --tool-label-size: 0.8rem;
  --tool-label-tracking: 0.14em;
  --tool-label-colour: var(--text-soft);
  --tool-label-active: var(--cyan-deep);

  /* Body copy in the tools reads at the same size as body copy on the
     rest of the site. It was set two steps smaller, which made the
     tool pages feel like fine print next to every other page. */
  --tool-text: 1.06rem;
  --tool-text-sm: 1rem;

  /* The teal field, matched to .page-hero, used for every active or
     filled surface. The tools were using navy, which belongs to the
     footer and the deep hero and reads as a different brand here. */
  --tool-fill: #3f7b87;
  --tool-fill-deep: #356973;

  --tool-panel: #fbfbfc;
  --tool-panel-2: #f2f4f6;
  --tool-border: #e3e6ea;
  --tool-border-strong: #cbd2d9;
  --tool-focus: var(--cyan-deep);
  --tool-critical: #a5610f;
  --tool-critical-bg: #fdf5ea;
  --tool-good: #3c7883;
  --tool-radius: 4px;
}

/* ---------- tool hero ----------
   The tool pages carry the same teal field as every other interior
   page. The background, the heading scale and the eyebrow colour all
   come from .page-hero in styles.css; this only adds the breadcrumb,
   the lede and the facts row. Do not give it a background of its own:
   that is what made the tool pages look like a different site. */
.tool-hero .wrap {
  padding-top: clamp(72px, 10vw, 122px);
  padding-bottom: clamp(38px, 5vw, 62px);
  position: relative;
  z-index: 1;
}
.tool-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.tool-hero__lede {
  color: var(--on-dark-soft);
  max-width: 62ch;
  margin-top: 1.15rem;
  font-size: 1.16rem;
  line-height: 1.55;
}
/* One tone for every label in the hero, so the breadcrumb and the
   eyebrow are not two different shades of the same idea. */
.tool-hero .eyebrow,
.tool-hero__crumbs {
  color: rgba(255, 255, 255, 0.88);
}
.tool-hero__crumbs {
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.tool-hero__crumbs a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.tool-hero__crumbs a:hover { border-bottom-color: #fff; }
.tool-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.6rem;
  margin-top: 2.1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.tool-hero__fact { font-family: var(--mono); font-size: 0.82rem; }
.tool-hero__fact span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  font-size: var(--tool-label-size);
  margin-bottom: 0.35rem;
}
.tool-hero__fact strong { color: #fff; font-weight: 500; }

/* ---------- two-column workbench ---------- */
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
  padding: clamp(38px, 5vw, 64px) 0 clamp(60px, 8vw, 96px);
}
@media (max-width: 1040px) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- step rail ---------- */
.steps {
  display: flex;
  gap: 0;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  overflow: hidden;
  margin-bottom: 1.9rem;
  background: var(--paper);
}
.steps__item {
  flex: 1 1 0;
  border: 0;
  border-right: 1px solid var(--tool-border);
  background: var(--paper);
  padding: 0.9rem 1rem;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: var(--tool-label-colour);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  min-width: 0;
}
.steps__item:last-child { border-right: 0; }
.steps__item:disabled { cursor: not-allowed; opacity: 0.5; }
.steps__item:not(:disabled):not([aria-current="true"]):hover { background: var(--tool-panel); }
/* The step name is the same size and weight in every state; only the
   colour changes, so the rail does not appear to resize as you move
   through it. */
/* The labels wrap rather than truncate. "Team and IP" losing its second
   half to an ellipsis told the reader nothing. */
.steps__item strong {
  display: block;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  font-weight: 500;
  margin-top: 0.3rem;
  overflow-wrap: break-word;
  hyphens: none;
}
.steps { align-items: stretch; }
.steps__item { display: flex; flex-direction: column; }
.steps__item[aria-current="true"] { background: var(--tool-fill); color: rgba(255, 255, 255, 0.86); }
.steps__item[aria-current="true"] strong { color: #fff; }
.steps__item.is-done { color: var(--tool-label-active); }
.steps__item.is-done strong { color: var(--text); }

/* ---------- panels ---------- */
.panel {
  background: var(--paper);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: 1.4rem;
}
.panel--flat { background: var(--tool-panel); }
.panel__head { margin-bottom: 1.4rem; }
.panel__head h2 { font-size: 1.5rem; }
.panel__head h3 { font-size: 1.18rem; }
.panel__head p {
  color: var(--text-soft);
  font-size: var(--tool-text);
  margin: 0.55rem 0 0;
  max-width: 66ch;
}
.panel__label {
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: var(--tool-label-active);
  display: block;
  margin-bottom: 0.75rem;
}

/* ---------- form controls ---------- */
.tool-field { margin-bottom: 1.25rem; }
.tool-field > label,
.tool-field__label {
  display: block;
  font-weight: 500;
  font-size: var(--tool-text);
  color: var(--text);
  margin-bottom: 0.4rem;
}
.tool-field__hint {
  font-size: var(--tool-text-sm);
  color: var(--text-soft);
  margin: 0.35rem 0 0;
  line-height: 1.5;
}
.tool-field__error {
  font-size: var(--tool-text-sm);
  color: var(--tool-critical);
  margin: 0.35rem 0 0;
}
.tool-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
.tool-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.1rem; }
@media (max-width: 620px) { .tool-grid-2, .tool-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Every control is the same height, so inputs, selects and date pickers
   sit on one line instead of one being a pixel or two taller than its
   neighbour. Native date inputs are the usual culprit. */
.workbench input[type="text"],
.workbench input[type="number"],
.workbench input[type="date"],
.workbench select {
  height: 46px;
}
.workbench input[type="text"],
.workbench input[type="number"],
.workbench input[type="date"],
.workbench select,
.workbench textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--tool-text);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--tool-border-strong);
  border-radius: var(--tool-radius);
  padding: 0.62rem 0.75rem;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  -webkit-appearance: none;
  appearance: none;
}
.workbench select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23566074' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 11px;
  padding-right: 2rem;
}
.workbench input:focus,
.workbench select:focus,
.workbench textarea:focus {
  outline: none;
  border-color: var(--tool-focus);
  box-shadow: 0 0 0 3px rgba(82, 144, 155, 0.16);
}
.workbench input.is-invalid { border-color: var(--tool-critical); }
.input-prefixed { position: relative; }
.input-prefixed__symbol {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text-faint);
  pointer-events: none;
}
.input-prefixed input { padding-left: 2.4rem !important; }
.input-suffixed { position: relative; }
.input-suffixed__symbol {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text-faint);
  pointer-events: none;
}
.input-suffixed input { padding-right: 2.2rem !important; }

/* radio / checkbox stacks */
.choice-list { display: grid; gap: 0.5rem; }
.choice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 0.72rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.choice:hover { border-color: var(--tool-border-strong); }
.choice input { margin: 0.22rem 0 0; accent-color: var(--cyan-deep); flex: none; width: auto !important; }
.choice__body { min-width: 0; }
.choice__title { font-weight: 500; font-size: var(--tool-text); display: block; }
.choice__desc { font-size: var(--tool-text-sm); color: var(--text-soft); display: block; margin-top: 0.2rem; line-height: 1.5; }
.choice.is-selected { border-color: var(--cyan-deep); background: rgba(82, 144, 155, 0.05); }
.choice-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice-inline .choice { flex: 1 1 auto; }

/* segmented control */
.segmented {
  display: inline-flex;
  border: 1px solid var(--tool-border-strong);
  border-radius: var(--tool-radius);
  overflow: hidden;
}
.segmented button {
  border: 0;
  background: var(--paper);
  padding: 0.55rem 1.1rem;
  font-family: var(--sans);
  font-size: var(--tool-text-sm);
  color: var(--text-soft);
  cursor: pointer;
  border-right: 1px solid var(--tool-border);
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { background: rgba(82, 144, 155, 0.12); color: var(--cyan-deep); }
.segmented button[aria-pressed="true"] { background: var(--cyan); color: #fff; }

/* ---------- buttons ---------- */
.tool-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--tool-border);
}
.tool-actions .spacer { margin-left: auto; }
/* Buttons behave the way they do everywhere else on the site: a light
   button with a cyan edge that fills cyan on hover. The tools had solid
   teal buttons with no fill transition, which read as a different
   component set. Matching .btn-ghost in styles.css. */
.btn-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--tool-text-sm);
  border-radius: 2px;
  padding: 0.72rem 1.3rem;
  border: 1px solid var(--tool-border-strong);
  background: var(--paper);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-tool:hover { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.btn-tool:active { transform: translateY(1px); }
.btn-tool[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-tool[disabled]:hover { background: var(--paper); color: var(--text); border-color: var(--tool-border-strong); }

/* The primary action carries the cyan edge and label from the start, and
   fills on hover in the same way. */
.btn-tool--primary { background: transparent; border-color: var(--cyan); color: var(--cyan-deep); }
.btn-tool--primary:hover { background: var(--cyan); color: #fff; border-color: var(--cyan); }

.btn-tool--ghost { border-color: transparent; background: transparent; color: var(--cyan-deep); padding-inline: 0.4rem; }
.btn-tool--ghost:hover { background: transparent; color: var(--ink); border-color: transparent; }
.btn-tool--danger { color: var(--tool-critical); }
.btn-tool--danger:hover { background: var(--copper-deep); color: #fff; border-color: var(--copper-deep); }
.btn-tool--sm { font-size: 0.94rem; padding: 0.5rem 0.9rem; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- live summary rail ---------- */
.rail { position: sticky; top: 92px; }
@media (max-width: 1040px) { .rail { position: static; } }
.rail__card {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--paper);
  overflow: hidden;
}
.rail__head {
  background: var(--tool-fill);
  color: #fff;
  padding: 0.9rem 1.15rem;
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
}
.rail__body { padding: 1.15rem; }
.rail__empty { color: var(--text-soft); font-size: var(--tool-text-sm); }
.stat { padding: 0.7rem 0; border-bottom: 1px solid var(--tool-border); }
.stat:last-child { border-bottom: 0; }
.stat__label {
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: var(--tool-label-colour);
  display: block;
  margin-bottom: 0.25rem;
}
.stat__value { font-family: var(--display); font-size: 1.65rem; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.stat__value--sm { font-size: 1.24rem; }
.stat__note { font-size: var(--tool-text-sm); color: var(--text-soft); margin-top: 0.2rem; line-height: 1.5; }
.stat--emphasis .stat__value { color: var(--cyan-deep); }

/* mobile sticky result bar */
.result-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--tool-fill);
  color: #fff;
  padding: 0.7rem var(--gutter);
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -6px 24px rgba(9, 16, 30, 0.18);
}
.result-bar__label {
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  display: block;
}
.result-bar__value { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
@media (max-width: 1040px) {
  .result-bar.is-active { display: flex; }
  body.has-result-bar { padding-bottom: 72px; }
}

/* ---------- data tables ---------- */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--tool-border); border-radius: var(--tool-radius); }
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--tool-text-sm); min-width: 620px; }
table.data-table th,
table.data-table td { padding: 0.72rem 0.9rem; text-align: left; border-bottom: 1px solid var(--tool-border); vertical-align: middle; }
table.data-table thead th {
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--tool-panel-2);
  font-weight: 500;
  white-space: nowrap;
}
table.data-table td.num, table.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.96rem; }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table tfoot td { background: var(--tool-panel-2); font-weight: 600; border-top: 1px solid var(--tool-border-strong); }
table.data-table .row-muted td { color: var(--text-faint); }
table.data-table input, table.data-table select { padding: 0.5rem 0.6rem !important; font-size: 1rem; }
.cell-actions { display: flex; gap: 0.3rem; }
.icon-btn {
  border: 1px solid var(--tool-border);
  background: var(--paper);
  border-radius: var(--tool-radius);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-soft); font-size: 0.9rem; line-height: 1;
}
.icon-btn:hover { border-color: var(--tool-border-strong); color: var(--ink); }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 2px;
  background: var(--tool-panel-2);
  color: var(--text-soft);
  white-space: nowrap;
}
.tag--founder { background: rgba(82, 144, 155, 0.14); color: var(--cyan-deep); }
.tag--investor { background: rgba(20, 32, 58, 0.09); color: var(--ink); }
.tag--pool { background: rgba(222, 138, 44, 0.16); color: var(--copper-deep); }
.tag--employee { background: rgba(60, 120, 131, 0.12); color: var(--tool-good); }

/* ---------- results ---------- */
.result-section { margin-bottom: 2.4rem; }
.result-headline {
  border: 1px solid var(--tool-border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--tool-radius);
  background: var(--tool-panel);
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: 1.6rem;
}
.result-headline__value {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3rem);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.result-headline__caption { color: var(--text-soft); margin: 0.7rem 0 0; max-width: 62ch; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--tool-border);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  overflow: hidden;
}
.stat-grid .stat { background: var(--paper); border-bottom: 0; padding: 1.05rem 1.15rem; }

/* callouts */
.callout {
  border: 1px solid var(--tool-border);
  border-left: 3px solid var(--cyan-deep);
  border-radius: var(--tool-radius);
  padding: 1.05rem 1.25rem;
  background: var(--paper);
  margin-bottom: 0.85rem;
}
.callout h4 { font-family: var(--sans); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0 0 0.35rem; letter-spacing: 0; line-height: 1.4; }
.callout p { margin: 0; font-size: var(--tool-text); color: var(--text-soft); line-height: 1.6; }
.callout--critical { border-left-color: var(--tool-critical); background: var(--tool-critical-bg); }
.callout--critical h4 { color: var(--copper-deep); }
.callout--material { border-left-color: var(--copper); }
.callout--standard { border-left-color: var(--tool-border-strong); }
.callout__level {
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: var(--tool-label-colour);
  display: block;
  margin-bottom: 0.4rem;
}
.callout--critical .callout__level { color: var(--copper-deep); }

/* disclosure */
details.disclosure {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--tool-panel);
  margin-bottom: 0.75rem;
}
details.disclosure > summary {
  cursor: pointer;
  padding: 0.85rem 1.15rem;
  font-weight: 500;
  font-size: var(--tool-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after { content: "+"; font-family: var(--mono); color: var(--text-faint); flex: none; }
details.disclosure[open] > summary::after { content: "\2013"; }
.disclosure__body { padding: 0 1.15rem 1.15rem; font-size: var(--tool-text); color: var(--text-soft); line-height: 1.65; }
.disclosure__body ul, .disclosure__body ol { margin: 0.5rem 0 0; padding-left: 1.15rem; }
.disclosure__body li { margin-bottom: 0.4rem; }
.formula {
  font-family: var(--mono);
  font-size: 0.96rem;
  background: var(--paper);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 0.85rem 1rem;
  margin: 0.7rem 0;
  white-space: pre-wrap;
  color: var(--ink);
  line-height: 1.65;
  overflow-x: auto;
}

/* question list */
.question-list { list-style: none; margin: 0; padding: 0; }
.question-list li { border-top: 1px solid var(--tool-border); padding: 1rem 0; }
.question-list li:first-child { border-top: 0; padding-top: 0; }
.question-list strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.3rem; line-height: 1.45; }
.question-list span { font-size: var(--tool-text); color: var(--text-soft); line-height: 1.6; }

/* ---------- charts ---------- */
.chart { width: 100%; display: block; height: auto; }
.chart-legend { display: grid; gap: 0.45rem; margin-top: 1rem; }
.chart-legend__item { display: flex; align-items: baseline; gap: 0.55rem; font-size: var(--tool-text-sm); }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; position: relative; top: 1px; }
.chart-legend__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend__value { font-family: var(--mono); font-size: 0.94rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.bar-compare { display: grid; gap: 1.1rem; }
.bar-compare__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0.9rem; align-items: center; }
@media (max-width: 620px) { .bar-compare__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }
.bar-compare__label { font-size: var(--tool-text-sm); color: var(--text-soft); }
.bar-track { height: 26px; background: var(--tool-panel-2); border-radius: 2px; display: flex; overflow: hidden; }
.bar-seg { height: 100%; display: flex; align-items: center; padding-inline: 0.4rem; font-family: var(--mono); font-size: 0.68rem; color: rgba(255,255,255,0.94); overflow: hidden; white-space: nowrap; }

/* vesting timeline */
.timeline { padding: 0.5rem 0; }
.timeline__scrub { width: 100%; margin-top: 1.2rem; accent-color: var(--cyan-deep); }

/* ---------- scenarios ---------- */
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.scenario-card {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 1.05rem 1.15rem;
  background: var(--paper);
}
.scenario-card.is-active { border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(82, 144, 155, 0.12); }
.scenario-card h4 { font-family: var(--sans); font-size: 1.02rem; margin: 0 0 0.6rem; letter-spacing: 0; }
.scenario-card dl { margin: 0 0 0.9rem; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; font-size: var(--tool-text-sm); }
.scenario-card dt { color: var(--text-soft); }
.scenario-card dd { margin: 0; font-family: var(--mono); font-size: 0.94rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- repeatable item cards ---------- */
.item-card {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 0.85rem;
  background: var(--paper);
}
.item-card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.item-card__title { font-family: var(--mono); font-size: var(--tool-label-size); letter-spacing: var(--tool-label-tracking); text-transform: uppercase; color: var(--tool-label-active); }

/* ---------- notices ---------- */
.tool-notice {
  border: 1px solid var(--tool-border);
  background: var(--tool-panel);
  border-radius: var(--tool-radius);
  padding: 1.1rem 1.35rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  font-size: var(--tool-text);
  color: var(--text-soft);
  line-height: 1.62;
  margin-bottom: 1.2rem;
}
.tool-notice strong { color: var(--ink); }
/* Runs the full width of the column rather than stopping halfway, and is
   justified like the rest of the prose on the site. */
.tool-disclaimer {
  border-top: 1px solid var(--tool-border);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  font-size: var(--tool-text-sm);
  color: var(--text-soft);
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}
.tool-disclaimer p:last-child { margin-bottom: 0; }
.related-links { display: grid; gap: 0.6rem; }
.related-links a {
  display: block;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 0.85rem 1.05rem;
  font-size: var(--tool-text);
  color: var(--ink);
  transition: border-color 0.14s ease;
}
.related-links a:hover { border-color: var(--cyan); }
.related-links span { display: block; font-size: var(--tool-text-sm); color: var(--text-soft); margin-top: 0.2rem; }

/* ---------- tools index ---------- */
.tool-group { margin-bottom: clamp(38px, 5vw, 60px); }
.tool-group__head { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem; margin-bottom: 1.6rem; }
.tool-group__head h2 { font-size: 1.5rem; }
.tool-group__head span { font-family: var(--mono); font-size: var(--tool-label-size); letter-spacing: var(--tool-label-tracking); text-transform: uppercase; color: var(--tool-label-colour); margin-left: auto; }
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.tool-card {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
  min-height: 190px;
  background: var(--paper);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.tool-card .btn { align-self: flex-start; }
.tool-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.tool-card--soon { background: var(--tool-panel); }
.tool-card--soon:hover { transform: none; border-color: var(--tool-border); }
.tool-card h3 { font-size: 1.24rem; margin-bottom: 0; line-height: 1.3; }
.tool-card p { font-size: var(--tool-text-sm); color: var(--text-soft); margin: 0; line-height: 1.55; }
.tool-card .btn { margin-top: auto; }
.tool-card p { font-size: var(--tool-text); color: var(--text-soft); margin: 0 0 1.1rem; line-height: 1.6; }
.tool-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--mono);
  font-size: var(--tool-label-size);
  letter-spacing: var(--tool-label-tracking);
  text-transform: uppercase;
  color: var(--tool-label-colour);
  margin: auto 0 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tool-border);
}
.tool-card__soon { font-family: var(--mono); font-size: var(--tool-label-size); letter-spacing: var(--tool-label-tracking); text-transform: uppercase; color: var(--copper-deep); }

/* ---------- print / PDF ---------- */
@media print {
  .site-header, .site-footer, .tool-actions, .steps, .result-bar,
  .rail, .no-print, .tool-hero__crumbs { display: none !important; }
  .workbench { display: block; padding: 0; }
  .tool-hero { background: #fff !important; color: #000; border-bottom: 1px solid #c9ced4; }
  .tool-hero .wrap { padding-top: 0; padding-bottom: 14px; }
  .tool-hero h1, .tool-hero__lede, .tool-hero__fact strong, .tool-hero .eyebrow { color: #14203a !important; }
  .tool-hero__fact span { color: #566074 !important; }
  .tool-hero__facts { border-top-color: #c9ced4; }
  .tool-hero__glow { display: none !important; }
  body { font-size: 11pt; }
  .panel, .callout, .data-table-wrap, .item-card, .scenario-card { break-inside: avoid; border-color: #c9ced4; }
  details.disclosure { border: 0; background: transparent; }
  details.disclosure > summary { padding-left: 0; font-weight: 600; }
  details.disclosure > summary::after { content: ""; }
  .disclosure__body { padding-left: 0; }
  a[href]::after { content: ""; }
}

/* ---------- holdings editor ----------
   A list of rows rather than a wide table. The three fields a founder
   fills in while thinking sit on one line at any width worth designing
   for; class, date and price open per row, because they belong to the
   reconciliation pass rather than the typing pass. Nothing scrolls
   sideways. */
.holding-list {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  overflow: hidden;
}
.holding { border-bottom: 1px solid var(--tool-border); background: var(--paper); }
.holding:last-of-type { border-bottom: 0; }
.holding.is-open { background: var(--tool-panel); }

.holding__main {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.2fr) auto;
  gap: 0.85rem;
  align-items: end;
  padding: 1rem 1.15rem;
}
.holding__more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 0 1.15rem 1.15rem;
  border-top: 1px dashed var(--tool-border);
  margin-top: -0.2rem;
  padding-top: 1rem;
}
.holding__cell { display: block; min-width: 0; }
.holding__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
  white-space: nowrap;
}
.holding__cell--num input { text-align: right; font-variant-numeric: tabular-nums; }
.holding__actions { display: flex; gap: 0.3rem; padding-bottom: 0.35rem; }
.holding__flag {
  margin: 0;
  padding: 0 1.15rem 0.9rem;
  font-size: var(--tool-text-sm);
  color: var(--copper-deep);
}
.holding-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  background: var(--tool-panel-2);
  border-top: 1px solid var(--tool-border-strong);
  font-size: var(--tool-text);
}
.holding-total strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.06rem; color: var(--ink); }

@media (max-width: 780px) {
  .holding__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .holding__cell--name { grid-column: 1 / -1; }
  .holding__actions { grid-column: 1 / -1; justify-content: flex-end; }
  .holding__more { grid-template-columns: minmax(0, 1fr); }
}

/* The tools index animates in the way every other section of the site
   does. The cards stagger so the group reads as a set rather than
   appearing all at once. */
.tool-group .tool-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1), transform 0.7s cubic-bezier(0.19, 1, 0.22, 1),
    border-color 0.16s ease;
}
.tool-group.in .tool-card { opacity: 1; transform: none; }
.tool-group.in .tool-card:nth-child(2) { transition-delay: 0.07s; }
.tool-group.in .tool-card:nth-child(3) { transition-delay: 0.14s; }
.tool-group.in .tool-card:nth-child(4) { transition-delay: 0.21s; }
.tool-card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .tool-group .tool-card { opacity: 1; transform: none; transition: border-color 0.16s ease; }
}