/* Chival — marketing site stylesheet.
 *
 * Loads AFTER /style.css and only adds what the marketing pages need:
 *   1. a dark-scheme mapping of the shared design tokens
 *   2. components the app stylesheet does not have (ladder, plans, matrix,
 *      demo stage, ROI panel, comparison grid)
 *
 * No external fonts, no CDN, no build step. Works offline.
 */

/* ================================================================= tokens */

:root {
  --m-max: 1120px;
  --m-accent: var(--bolt);
  --m-nv: var(--status-amber);      /* "not verified" ink, light scheme */
  --m-nv-bg: var(--status-amber-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2efe9;          /* body text — deep ink flips to warm paper-light */
    --ink-2: #e4e0d8;
    --ink-3: #d3cec2;
    --ink-soft: #c7c2b8;
    --ink-faint: #9a968c;

    --on-dark-soft: #c7c4d0;
    --on-dark-faint: #9c99a6;

    --bolt: #f2a24c;
    --bolt-light: #f8c78e;
    --bolt-strong: #e0a15a;
    --bolt-ink: #ffb968;      /* on dark surfaces, bolt-ink becomes a light tint */
    --bolt-bg: #3a2c18;

    --paper: #0f0f16;         /* icon-dark page canvas */
    --surface: #191922;
    --canvas: var(--paper);

    --line: #2b2b38;
    --line-soft: #232230;
    --line-strong: #726f82;

    --green: #7fcea0;
    --green-bg: #17301f;
    --status-amber: #f0c069;
    --status-amber-bg: #3a2c10;
    --red: #ff9a8d;
    --red-bg: #3a1a17;

    --m-nv: var(--status-amber);
    --m-nv-bg: var(--status-amber-bg);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }

  /* the app stylesheet hard-codes a few whites / literal ink values */
  .section-alt,
  .btn-secondary,
  .btn-on-dark,
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    background: var(--surface);
    color: var(--ink);
  }

  .site-header,
  .hero,
  .cta-panel,
  .site-footer {
    background: #0b0b11;
  }

  .brand-mark {
    background-color: #0b0b11;
  }

  .btn {
    color: #16161f;
  }

  .btn-secondary,
  .btn-on-dark {
    color: var(--ink);
    border-color: var(--line-strong);
  }

  .btn-secondary:hover,
  .btn-on-dark:hover {
    background: var(--bolt-bg);
  }

  .chip-sent {
    background: #26244a;
    color: #c3c2f5;
  }

  .photo-preview {
    background: #050508;
  }

  .plate {
    background: #050508;
    color: #d8d4c8;
  }

  .plate dt {
    color: var(--ink-faint);
  }
}

/* ============================================================ page chrome */

.m-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.m-nav a {
  color: var(--on-dark-soft);
  font-size: 15px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.m-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.m-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.m-nav a.nav-cta,
.site-nav a.nav-cta {
  background: var(--bolt);
  color: var(--ink);
  font-weight: 600;
}

.m-nav a.nav-cta:hover {
  background: var(--bolt-light);
  color: var(--ink);
}

/* Inside the Menu panel the old horizontal .m-nav row becomes a chunky
 * vertical list of 56px/44px rows (glove-sized tap targets). Because
 * ".m-nav.menu-panel-nav a" (two classes) is MORE specific than the plain
 * ".m-nav a" rule above, every property the row look depends on has to be
 * restated here explicitly — mirrors .menu-panel-nav a in style.css. */
.m-nav.menu-panel-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-wrap: nowrap;
  padding: 6px 0;
}

.m-nav.menu-panel-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 0;
  background: transparent;
}

.m-nav.menu-panel-nav a:hover {
  color: var(--ink);
  background: var(--bolt-bg);
}

.m-nav.menu-panel-nav a[aria-current="page"] {
  color: var(--bolt-ink);
  background: var(--bolt-bg);
}

.m-nav.menu-panel-nav a:focus-visible {
  outline: 2px solid var(--bolt-strong);
  outline-offset: -2px;
}

@media (min-width: 641px) {
  .m-nav.menu-panel-nav a {
    min-height: 44px;
    padding: 10px 20px;
  }
}

.page-hero {
  background: var(--ink);
  color: #fff;
  padding: 56px 0 60px;
}

.page-hero h1 {
  font-size: clamp(28px, 4.4vw, 42px);
  max-width: 20ch;
}

.page-hero p {
  color: var(--on-dark-soft);
  max-width: 62ch;
  font-size: 17px;
  margin: 0;
}

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

.stack > * + * {
  margin-top: 16px;
}

.note {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 8px 0 0;
}

.src {
  font-size: 12.5px;
  color: var(--ink-faint);
  word-break: break-word;
}

.nv {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--m-nv-bg);
  color: var(--m-nv);
  white-space: nowrap;
}

.site-footer .foot-cols {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.site-footer h2,
.site-footer h4 {
  color: var(--on-dark-soft);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  padding: 3px 0;
}

/* ============================================== index: delegation ladder */

.ladder {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 20px;
}

.rung {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--bolt-strong);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.rung:nth-child(1) { border-top-color: var(--line-strong); }
.rung:nth-child(2) { border-top-color: var(--bolt-strong); }
.rung:nth-child(3) { border-top-color: #4d8f6b; }
.rung:nth-child(4) { border-top-color: var(--green); }

.rung-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bolt-bg);
  color: var(--bolt-ink);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.rung h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

.rung p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.rung-gate {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.role-table td:first-child {
  white-space: nowrap;
}

/* ==================================================== pricing: the plans */

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}

.billing-toggle button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.billing-toggle button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.plans {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.plan-featured {
  border-color: var(--bolt-strong);
  box-shadow: var(--shadow-md);
}

.plan h3 {
  font-size: 19px;
  margin-bottom: 2px;
}

.plan .plan-for {
  color: var(--ink-faint);
  font-size: 14px;
  margin-bottom: 16px;
}

.price {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}

.price-per {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-faint);
}

.price-sub {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 6px 0 18px;
  min-height: 38px;
}

.plan-quota {
  font-weight: 600;
  color: var(--bolt-ink);
  margin-bottom: 14px;
}

@media (prefers-color-scheme: dark) {
  .plan-quota {
    color: var(--bolt-ink);
  }
}

.plan ul.plan-feats {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  flex: 1;
}

.plan ul.plan-feats li {
  padding: 6px 0 6px 24px;
  position: relative;
}

.plan ul.plan-feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--green);
  font-weight: 700;
}

.plan ul.plan-feats li.no::before {
  content: "—";
  color: var(--ink-faint);
}

.checkout-state {
  font-size: 13.5px;
  margin-top: 10px;
  min-height: 20px;
}

.checkout-state.err {
  color: var(--red);
}

.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 640px;
}

.matrix th,
.matrix td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.matrix thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.matrix tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 34%;
}

.matrix td {
  color: var(--ink-soft);
}

.matrix tr.group th {
  background: var(--line-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.yes {
  color: var(--green);
  font-weight: 700;
}

.no {
  color: var(--ink-faint);
}

details.faq {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

details.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

details.faq summary::-webkit-details-marker {
  display: none;
}

details.faq summary::after {
  content: "+";
  color: var(--ink-faint);
  font-weight: 700;
}

details.faq[open] summary::after {
  content: "–";
}

details.faq p {
  color: var(--ink-soft);
  margin: 12px 0 0;
  font-size: 15px;
}

/* ============================================================ demo stage */

.demo-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--status-amber-bg);
  color: var(--status-amber);
  border-bottom: 1px solid rgba(138, 92, 16, 0.3);
  font-size: 13.5px;
  font-weight: 650;
  padding: 10px 0;
}

.demo-banner .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.demo-banner .dot-warn {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-amber);
  display: inline-block;
  flex: none;
}

.demo-shell {
  padding: 24px 0 72px;
}

.demo-rail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.demo-rail button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.demo-rail button[aria-current="step"] {
  background: var(--bolt);
  border-color: var(--bolt);
  color: var(--ink);
}

.demo-rail button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.demo-device {
  max-width: 640px;
  margin: 0 auto;
}

.fake-photo {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--canvas);
  padding: 22px;
  text-align: center;
  margin-bottom: 16px;
}

.plate {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: left;
  background: var(--ink);
  color: #ece7db;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 14px;
}

.plate dt {
  color: var(--on-dark-soft);
}

.plate dd {
  margin: 0;
}

.opt-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.opt {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.opt[aria-pressed="true"] {
  border-color: var(--bolt-strong);
  background: var(--bolt-bg);
  color: var(--bolt-ink);
  font-weight: 600;
}

.redacted {
  font-family: var(--mono);
  background: repeating-linear-gradient(
    45deg,
    var(--line-soft),
    var(--line-soft) 6px,
    var(--line) 6px,
    var(--line) 12px
  );
  color: transparent;
  border-radius: 4px;
  padding: 0 10px;
  user-select: none;
}

.tier-pick {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 18px;
}

.tier-opt {
  text-align: left;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  cursor: pointer;
}

.tier-opt[aria-pressed="true"] {
  border-color: var(--bolt-strong);
  box-shadow: 0 0 0 3px var(--bolt-bg);
}

.tier-opt .tier-key {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bolt-ink);
  font-weight: 700;
}

.tier-opt .tier-total {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}

.tier-opt p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.ladder-track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ladder-track li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.ladder-track .lvl {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--line-soft);
  color: var(--ink-faint);
}

.ladder-track li.at .lvl {
  background: var(--bolt);
  color: var(--ink);
}

.ladder-track li.done .lvl {
  background: var(--green-bg);
  color: var(--green);
}

.ladder-track strong {
  display: block;
  font-size: 15px;
}

.ladder-track span.why {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ======================================================= ROI calculator */

.roi-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 980px) {
  .roi-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.roi-out {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 18px;
}

.roi-out .metric .value {
  font-size: 24px;
}

.assump {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 520px;
}

.assump th,
.assump td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.assump thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}

.assump code,
.steps-list code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-word;
}

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}

.steps-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.steps-list .sv {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

.src-badge {
  font-size: 12px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bolt-bg);
  color: var(--bolt-ink);
}

/* ======================================================= compare table */

.cmp-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 940px;
}

table.cmp th,
table.cmp td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

table.cmp thead th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

table.cmp thead th.us {
  color: var(--bolt-ink);
}

table.cmp tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 190px;
}

table.cmp td {
  color: var(--ink-soft);
}

table.cmp col.us-col {
  background: var(--bolt-bg);
}

.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 14px;
}

.honest {
  border-left: 3px solid var(--status-amber);
  background: var(--status-amber-bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}

.honest h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.honest p:last-child {
  margin-bottom: 0;
}

.src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}

.src-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  word-break: break-word;
}

@media (max-width: 700px) {
  .page-hero {
    padding: 40px 0 44px;
  }

  .plan {
    padding: 22px;
  }
}

/* Touch targets in the footer.
 *
 * The links sat at 19px tall — under the 24x24 CSS-pixel minimum in WCAG
 * 2.5.8, and genuinely fiddly for a service manager tapping one-handed on a
 * phone. Padding rather than a height change so the visual rhythm of the
 * column is unchanged on desktop, where a mouse makes it a non-issue. */
@media (max-width: 720px) {
  .site-footer .foot-cols a {
    display: inline-block;
    padding: 7px 0;
    min-height: 24px;
  }
}