/* Deptho site styles. Bathymetric: layered blue surfaces that get darker as the
   condition gets harder, one teal accent, no shadows. Dark only for now.
   Colors are defined once, here in :root (mirrored in deptho/_theme.py);
   site/test_site.py fails if a hex color appears anywhere else in this file. */
:root {
  color-scheme: dark;

  --abyss: #061018;
  --layer-1: #0A1B27;
  --layer-2: #0C2130;
  --layer-3: #0F2738;
  --layer-4: #13304A;
  --contour: #1B4560;
  --ink: #E6F1F5;
  --ink-muted: #8AA4B2;
  --ink-faint: #6F8C9B;
  --sky: #9CC3D9;
  --signal: #4FD1C5;
  --on-signal: #04141A;
  --series-2: #7AA7FF;
  --drawdown-fill: #1E4A6A;
  --loss: #F2994A;
  --focus: #9CC3D9;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --s12: 48px; --s18: 72px; --s24: 96px; --s28: 112px;
  --r-chip: 4px; --r-ctl: 10px; --r-panel: 16px; --r-pill: 999px;
  --side: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-display);
}
img, svg { display: block; }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}
code { font-family: var(--font-mono); font-size: 0.88em; color: var(--ink); }
p { margin: 0 0 var(--s4); }

/* type scale */
.display-xl { font: 600 76px/1.02 var(--font-display); letter-spacing: -0.035em; margin: 0; }
h1, .display-l { font: 600 34px/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--s4); color: var(--ink); }
h2 { font: 600 34px/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--s4); color: var(--ink); }
h3, .title { font: 600 22px/1.3 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--s2); color: var(--ink); }
.body-l, .lede { font-size: 20px; line-height: 1.55; color: var(--ink-muted); }
.small, .muted.small { font-size: 13px; line-height: 1.45; }
.muted { color: var(--ink-muted); }
.label {
  font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.data { font: 500 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }

/* layout */
.wrap { max-width: calc(1296px + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }
section { padding: var(--s24) 0 0; }
main > section:last-of-type { padding-bottom: var(--s24); }

/* nav + lockup */
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.lockup { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; }
.lockup:hover { text-decoration: none; }
.lockup img { width: 28px; height: 28px; }
.lockup span { font: 600 22px/1 var(--font-display); letter-spacing: -0.02em; }
.nav nav { display: flex; gap: var(--s6); }
.nav nav a { color: var(--ink-muted); font-size: 15px; }
.nav nav a:hover { color: var(--ink); text-decoration: none; }

/* hero */
.hero { position: relative; overflow: hidden; padding: var(--s28) 0 120px; }
.hero .wrap { position: relative; z-index: 1; }
.hero .contour { position: absolute; inset: 0 0 auto auto; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero h1 { max-width: 1180px; margin: var(--s6) 0; text-wrap: balance; }
.hero .lede { max-width: 760px; }
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--layer-3); color: var(--ink); border-radius: var(--r-pill);
  padding: 6px 14px; font-size: 13px; line-height: 1.45;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--signal); }

/* buttons */
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s8); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px;
  border-radius: var(--r-ctl); border: 0; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-primary { background: var(--signal); color: var(--on-signal); font: 600 16px/1 var(--font-display); }
.btn-secondary { background: var(--layer-3); color: var(--ink); font: 400 14px/1 var(--font-mono); }
.btn-secondary.text { font: 600 15px/1 var(--font-display); }

/* section header with caption on the right */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3) var(--s8); margin-bottom: var(--s6); }
.sec-head h2 { margin: 0; max-width: 820px; }
ul + .sec-head, ol + .sec-head, p + .sec-head { margin-top: var(--s12); }
.sec-head .caption { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }

/* depth table: the signature component. Columns darken as conditions get harder. */
.tablewrap { overflow-x: auto; border-radius: var(--r-panel); }
table.depth { width: 100%; border-collapse: collapse; border-spacing: 0; border-radius: var(--r-panel); overflow: hidden; min-width: 560px; }
table.depth th, table.depth td { padding: 14px 18px; text-align: left; border: 0; white-space: nowrap; }
table.depth thead th { font-size: 13px; line-height: 1.45; font-weight: 400; color: var(--ink-muted); }
table.depth .d0 { background: var(--layer-1); }
table.depth .d1 { background: var(--layer-2); }
table.depth .d2 { background: var(--layer-3); }
table.depth .d3 { background: var(--layer-4); }
table.depth td.num { font: 500 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
table.depth td.fail { font-size: 15px; color: var(--ink-muted); }
table.depth td.fail.d1 { color: var(--ink-faint); }
table.depth tr.ours th, table.depth tr.ours td.name { color: var(--signal); font-weight: 600; }
table.depth tr.ours td.hardest { color: var(--signal); }
table.depth tbody th { font-weight: 400; color: var(--ink); }
/* depth cards: the phone layout of a depth table (hardest condition first) */
.depth-cards { display: none; list-style: none; margin: 0; padding: 0; }
.depth-cards li { background: var(--layer-1); border-radius: var(--r-panel); padding: var(--s4); margin: 0 0 var(--s3); }
.depth-cards h3 { font: 600 17px/1.3 var(--font-display); margin: 0 0 var(--s3); }
.depth-cards li.ours h3 { color: var(--signal); }
.depth-cards dl { margin: 0; display: grid; gap: var(--s1); }
.depth-cards dl > div { display: flex; justify-content: space-between; gap: var(--s3); padding: 10px 12px; border-radius: var(--r-ctl); }
.depth-cards dt { font-size: 13px; color: var(--ink-muted); }
.depth-cards dd { margin: 0; font-size: 15px; color: var(--ink-muted); }
.depth-cards .num dd { font: 500 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.depth-cards .fail.d1 dd { color: var(--ink-faint); }
.depth-cards li.ours .hardest dd { color: var(--signal); }
.depth-cards .d1 { background: var(--layer-2); }
.depth-cards .d2 { background: var(--layer-3); }
.depth-cards .d3 { background: var(--layer-4); }
.after-table { margin: var(--s4) 0 0; font-size: 15px; color: var(--ink); max-width: 76ch; }
.sec-head + .after-table { margin: 0 0 var(--s6); }
.hero .real-line { margin: calc(-1 * var(--s2)) 0 0; max-width: 76ch; }
article.bench .break-even { color: var(--ink); }
.hero .hero-sub { margin: var(--s4) 0 0; }
.proof-lead { max-width: 76ch; margin: 0 0 var(--s6); }
.proof-card { margin-top: var(--s6); background: var(--layer-1); border-radius: var(--r-panel); padding: var(--s4) var(--s6); max-width: 820px; }
.proof-card p:last-child { margin: 0; font-size: 17px; color: var(--ink); }
/* "How we measured": native disclosure (keyboard-friendly, works without JS) */
.measured { margin: var(--s3) 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.measured summary { display: inline-block; white-space: nowrap; cursor: pointer; list-style: none; border-radius: var(--r-ctl); padding: 2px 6px; margin-left: -6px; }
.measured summary::-webkit-details-marker { display: none; }
.measured summary::marker { content: ""; }
.measured summary:hover { color: var(--ink); }
.measured summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.measured .info { display: inline-block; vertical-align: -2px; margin-left: 6px; }
.measured-panel { margin-top: var(--s2); max-width: 60ch; background: var(--layer-1); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); }
.page-hero .benefits { list-style: none; padding: 0; margin: 0 0 var(--s4); font-size: 20px; line-height: 1.5; }
.page-hero .benefits li { margin: var(--s1) 0; }
.page-hero .limit { margin-top: var(--s2); }
.eyebrow { margin: 0 0 var(--s3); }
.table-note { margin-top: var(--s3); font-size: 13px; line-height: 1.45; color: var(--ink-muted); max-width: 900px; }

/* plain tables (long-form pages): same header and cell styles, no depth shading */
table.plain { width: 100%; border-collapse: collapse; background: var(--layer-1); border-radius: var(--r-panel); overflow: hidden; margin: var(--s4) 0 var(--s6); }
table.plain th, table.plain td { padding: 12px 16px; text-align: left; border: 0; vertical-align: top; }
table.plain thead th { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
table.plain td { font: 500 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
table.plain tbody tr:hover { background: var(--layer-2); }

/* code */
.code {
  position: relative; background: var(--layer-1); border-radius: var(--r-panel);
  padding: 20px; margin: var(--s4) 0; overflow-x: auto;
}
.plan .code, .two .code { border-radius: var(--r-ctl); }
.code code { display: block; white-space: pre; font: 400 13px/1.75 var(--font-mono); color: var(--ink); padding-right: 64px; }
.code .tk-k { color: var(--signal); }
.code .tk-s { color: var(--sky); }
.code .tk-c { color: var(--ink-muted); }
.copy {
  position: absolute; top: 12px; right: 12px; background: var(--layer-3); color: var(--ink-muted);
  border: 0; border-radius: var(--r-chip); font: 400 12px/1 var(--font-mono); padding: 6px 8px; cursor: pointer;
}
.copy:hover { color: var(--ink); }

/* two-column block */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: start; }
.two > * { min-width: 0; }
.checks { padding-left: 20px; margin: 0; }
.checks li { margin: 0 0 var(--s3); color: var(--ink-muted); }
.checks li strong { color: var(--ink); font-weight: 600; }

/* report screenshot */
.shot { width: 100%; height: auto; border-radius: var(--r-panel); background: var(--layer-1); margin: var(--s6) 0; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.plan { background: var(--layer-1); border-radius: var(--r-panel); padding: 28px; display: flex; flex-direction: column; border: 1px solid transparent; }
.plan.featured { border-color: var(--signal); }
.plan .price { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.plan .amount { font: 600 34px/1.15 var(--font-display); letter-spacing: -0.02em; }
.plan .per { font-size: 13px; color: var(--ink-muted); }
.plan p { color: var(--ink-muted); font-size: 15px; }
.plan .ctas { margin-top: auto; padding-top: var(--s4); }
.plan .btn { height: auto; min-height: 44px; padding: 10px 18px; line-height: 1.3; }
.draft { margin: 0 0 var(--s4); }
.price-note { margin: var(--s4) 0 0; }

/* long-form: guides, terms, benchmarks */
article.wrap { padding-top: var(--s18); padding-bottom: var(--s24); }   /* same top as .page-hero */
article p, article li, article dd { max-width: 68ch; }
article h1 { margin-top: 0; }
article .crumbs + h1, article .draft + h1 { margin-top: var(--s3); }
article h2 { font-size: 22px; line-height: 1.3; margin: var(--s12) 0 var(--s3); }
article h3 { margin-top: var(--s8); }
article.bench { padding-top: 0; }
article.bench h2 { font: 600 34px/1.15 var(--font-display); letter-spacing: -0.02em; margin: var(--s18) 0 var(--s4); }
article.bench > h2:first-child { margin-top: var(--s8); }
article.bench h3 { margin-top: var(--s12); }
article.bench h4 { font: 500 12px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); margin: var(--s6) 0 var(--s2); }
article a { text-decoration: none; }
article a:hover { text-decoration: underline; }
.crumbs { font-size: 13px; margin: 0; }
.guides { padding-left: 20px; }
.guides li { margin: var(--s2) 0; }
.guides.long li { margin: var(--s4) 0; }
.tryit { margin-top: var(--s8); background: var(--layer-1); border-radius: var(--r-panel); padding: var(--s6); }
.tryit .code { background: var(--layer-2); border-radius: var(--r-ctl); }
.faq dt { font-weight: 600; margin-top: var(--s6); }
.faq dd { margin: var(--s1) 0 0; color: var(--ink-muted); }
ol li { margin: var(--s2) 0; }

/* footer */
footer { padding: var(--s12) 0 var(--s18); }
footer .trust { color: var(--ink); font-size: 15px; margin: 0 0 var(--s2); }
footer .muted { font-size: 13px; }


/* inner-page hero (no contour; landing keeps the full hero) */
.hero.page-hero { padding: var(--s18) 0 0; }
.hero.page-hero h1 { margin: 0 0 var(--s4); }

/* visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* phones */
@media (max-width: 640px) {
  :root { --side: 16px; }
  .display-xl { font-size: 48px; }
  h2, .display-l { font-size: 28px; }
  .hero { padding: var(--s18) 0 var(--s18); }
  .hero .contour { display: none; }
  .ctas { flex-direction: column; align-items: stretch; }
  .ctas .btn { width: 100%; }
  .two { grid-template-columns: 1fr; }
  .nav nav { gap: var(--s4); }
  .nav nav a.hide-sm { display: none; }       /* GitHub is in the footer */
  .tablewrap.has-cards { display: none; }
  .depth-cards { display: block; }
  section { padding-top: var(--s18); }
}

/* readable measure for running text inside wide sections */
.wrap > ul li, .wrap > ol li, .faq dt, .faq dd { max-width: 76ch; }
.wrap > p, .wrap > div > p:not(.caption):not(.table-note) { max-width: 76ch; }