/* Landing + platform page styles (moved from index.html inline). */
/* ── Landing page tokens ── */
:root {
  --c-bg:#ffffff;
  --c-surface:#fafafa;
  --c-border:#e7e7ec;
  --c-border-2:#d0d0d7;
  --c-text:#111114;
  --c-text-2:#4a4a52;
  --c-text-3:#86868f;
  --c-ok:#1a8f4a;
  --font-display:'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono-landing:'JetBrains Mono', ui-monospace, monospace;
  --density: 0.67;
  --max-landing: 1180px;
  --radius-landing: 12px;
}

.landing-page .container { max-width: var(--max-landing); padding: 0 32px; }
/* Header and footer line up with the wider landing layout. */
body:has(.landing-page) .site-header .container,
body:has(.landing-page) .site-footer .container { max-width: var(--max-landing); padding: 0 32px; }

.btn-landing {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:8px;font-weight:600;font-size:15px;
  transition:box-shadow .15s, background .15s; white-space:nowrap;
  text-decoration:none;
}
.btn-landing:hover { text-decoration: none; }
.btn-landing.primary {
  color:#fff;background:var(--c-text);
  box-shadow: 0 1px 2px rgba(17,17,20,.12), 0 2px 8px rgba(17,17,20,.08);
}
.btn-landing.primary:hover { box-shadow:0 4px 14px rgba(17,17,20,.18) }
.btn-landing.ghost { color:var(--c-text);border:1px solid var(--c-border-2);background:transparent }
.btn-landing.ghost:hover { border-color:var(--c-text);background:var(--c-surface) }

/* ── Hero ── */
.hero { padding: calc(72px * var(--density)) 0 calc(96px * var(--density)) }
.hero-grid { display:grid;grid-template-columns: 1.7fr 1fr; gap:48px; align-items:center }
.hero h1 {
  font-family:var(--font-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height:1.02; letter-spacing:-0.04em;
  font-weight:600; margin-bottom:28px; text-wrap:balance;
}
.hero p.lede {
  font-size:21px; line-height:1.45; color:var(--c-text-2);
  max-width:560px; margin-bottom:20px; text-wrap:pretty;
}
.hero-ctas { display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px }
.hero-sub {
  display:flex;align-items:center;gap:12px;
  font-size:15px;color:var(--c-text-2);
}
.hero-sub .dot { width:7px;height:7px;border-radius:50%;background:var(--c-ok);box-shadow:0 0 0 4px rgba(26,143,74,.14) }
.hero-art { position:relative;display:flex;align-items:center;min-width:0;overflow:hidden }


/* ── Section scaffolding ── */
section.block { padding: calc(128px * var(--density)) 0 }
.section-head { margin-bottom:48px;max-width:860px }
.section-head h2 {
  font-family:var(--font-display);
  font-size:clamp(32px, 3.6vw, 48px);
  line-height:1.02;letter-spacing:-0.035em;font-weight:600;
  margin-bottom:22px;text-wrap:balance;
}
.section-head p { font-size:21px;color:var(--c-text-2);max-width:640px;text-wrap:pretty;line-height:1.45 }

/* ── Capability blocks ── */
.cap-list { display:flex;flex-direction:column;gap:0 }
.cap {
  display:grid;grid-template-columns:1fr 1fr;gap:96px;
  padding: calc(96px * var(--density)) 0;
  align-items:start;
}
.cap:last-child { }
.cap.reverse .cap-copy { order:2 }
.cap.reverse .cap-art { order:1 }
.cap h3 {
  font-family:var(--font-display);
  font-size:clamp(26px, 2.8vw, 36px);
  line-height:1.04;letter-spacing:-0.03em;font-weight:600;
  margin-bottom:20px;text-wrap:wrap;
}
.cap p.desc {
  font-size:21px;line-height:1.45;color:var(--c-text-2);max-width:500px;
  text-wrap:pretty;
}
.cap-art {
  aspect-ratio: 1/1;border:1px solid var(--c-border);border-radius:var(--radius-landing);
  background:var(--c-bg);position:relative;overflow:hidden;
}
.cap-art > svg, .cap-art > div { width:100%;height:100% }

/* ── Personas ── */
.who-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px }
.persona {
  padding:36px 32px;border:1px solid var(--c-border);border-radius:var(--radius-landing);
  background:var(--c-bg);display:flex;flex-direction:column;gap:18px;
}
.persona .who-hd { display:flex;align-items:center;gap:16px }
.persona .glyph {
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:#111114;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.persona .glyph svg { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round }
.persona h4 {
  font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.015em;
}
.persona p { color:var(--c-text-2);font-size:16px;line-height:1.5 }

/* ── Final CTA ── */
.cta-block { padding: calc(120px * var(--density)) 0;background:var(--c-bg) }
.cta-inner { text-align:center;max-width:820px;margin:0 auto }
.cta-inner h2 {
  font-family:var(--font-display);font-size:clamp(32px, 3.6vw, 48px);
  line-height:1;letter-spacing:-0.04em;font-weight:600;margin-bottom:22px;text-wrap:balance;
}
.cta-inner p { font-size:21px;line-height:1.45;color:var(--c-text-2);margin-bottom:36px }
.cta-buttons { display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap }

/* ── Responsive ── */
@media (max-width: 900px) {
  .landing-page .container { padding:0 20px }
  body:has(.landing-page) .site-header .container,
  body:has(.landing-page) .site-footer .container { padding:0 20px }
  .hero { padding: 64px 0 56px }
  .hero-grid { grid-template-columns:1fr;gap:40px }
  .hero-art { max-width:100%;margin:0 auto }
  section.block { padding: 54px 0 }
  .cap { grid-template-columns:1fr;gap:40px;padding:43px 0 }
  .cap.reverse .cap-copy { order:1 }
  .cap.reverse .cap-art { order:2 }
  .who-grid { grid-template-columns:1fr;gap:20px }
  .section-head { margin-bottom:32px }
}

/* ── Platform page ── */
.platform-hero { padding-bottom: calc(48px * var(--density)) }
.platform-hero .section-head, .platform-hero p.lede { max-width:none }
.cap[id] { scroll-margin-top:80px }

/* ── Homepage pillar cards + news ── */
.pillar { text-decoration:none;color:inherit }
.pillar:hover { border-color:var(--c-text);text-decoration:none }
.pillar .more { margin-top:auto;font-weight:600;font-size:15px;color:var(--c-text) }
.news-cards .persona h4 { font-size:18px }
.section-foot { margin-top:40px;display:flex;gap:12px;flex-wrap:wrap }

@media (max-width: 900px) {
}


button.btn-landing { border:0;font:inherit;font-weight:600;font-size:15px;cursor:pointer }
.why { padding-bottom:0 }
.section-head p + p { margin-top:12px }
.section-head p a { color:inherit;text-decoration:underline;text-underline-offset:3px }

.why-head { max-width:none;margin-bottom:0 }
.why-head p { max-width:none }
#why-num { font-variant-numeric:tabular-nums }

/* ── Who uses Omabit: icon | team | what for ── */
.who-row + .who-row { border-top:1px solid var(--c-border) }
.who-row {
  display:grid;grid-template-columns:40px minmax(220px, 380px) 1fr;gap:24px;align-items:center;
  padding:20px 0;
}
.who-icon svg { width:32px;height:32px;display:block;fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round }
.who-name { font-size:21px;font-weight:600;color:var(--c-text);line-height:1.3 }
.who-what { font-size:21px;color:var(--c-text-2);line-height:1.45 }
@media (max-width: 900px) {
  .who-row { grid-template-columns:32px 1fr;gap:4px 16px;align-items:start }
  .who-what { grid-column:2 }
}
.why-count b { font-weight:600;color:var(--c-text) }

/* ── Demos: no frame, top-aligned, wider column; all text 21px or larger ── */
.cap.has-demo { grid-template-columns:1fr 1.25fr;gap:64px }
.cap.reverse.has-demo { grid-template-columns:1.25fr 1fr }
.cap-art.demo-pick, .cap-art.demo-compare {
  border:0;border-radius:0;aspect-ratio:auto;overflow:visible;background:none;
  display:block;padding:0;
}
.demo-pick > .dp, .demo-compare > .dc { height:auto }

/* Demo 1: pick an analysis */
.dp { display:flex;flex-direction:column;gap:6px }
.dp-row {
  display:grid;grid-template-columns:32px 1fr auto;gap:0 16px;align-items:start;text-align:left;
  padding:16px 18px;border:1px solid transparent;border-radius:10px;background:none;
  font:inherit;color:inherit;cursor:pointer;white-space:nowrap;
}
.dp-row:hover { border-color:var(--c-border) }
.dp-row.is-on { border-color:var(--c-text) }
.dp-icon { padding-top:3px }
.dp-icon svg, .dc-icon svg { width:26px;height:26px;display:block;fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round }
.dp-q { display:block;font-size:21px;font-weight:600;line-height:1.3 }
.dp-what { display:block;font-size:21px;color:var(--c-text-2);line-height:1.45;margin-top:2px }
.dp-time { font-size:21px;color:var(--c-text-2);visibility:hidden;padding-top:2px }
.dp-row:hover .dp-time { visibility:visible }
.dp-go, .dp-touch {
  margin-top:14px;padding:14px;border-radius:8px;font:inherit;font-size:21px;font-weight:600;cursor:pointer;
  border:1px solid var(--c-text);background:var(--c-text);color:#fff;
}
.dp-touch { margin-top:4px;background:var(--c-bg);color:var(--c-text);border-color:var(--c-border-2);visibility:hidden }
.dp-touch.is-shown { visibility:visible }

/* Demo 2: compare with */
.dc-title { font-family:var(--font-display);font-size:24px;font-weight:600;margin-bottom:8px;line-height:1.3 }
.dc-row { display:flex;align-items:center;gap:16px;padding:14px 0;font-size:21px;color:var(--c-text);cursor:pointer;white-space:nowrap }
.dc-row + .dc-row { border-top:1px solid var(--c-border) }
.dc-row input { position:absolute;opacity:0;pointer-events:none }
.dc-box {
  width:22px;height:22px;flex:none;border:1.5px solid var(--c-border-2);border-radius:4px;
  display:flex;align-items:center;justify-content:center;background:var(--c-bg);
}
.dc-box svg { width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;visibility:hidden }
.dc-row input:checked + .dc-box { background:var(--c-text);border-color:var(--c-text) }
.dc-row input:checked + .dc-box svg { visibility:visible }
.dc-row input:focus-visible + .dc-box { outline:2px solid var(--c-text);outline-offset:2px }

@media (max-width: 900px) {
  .cap.has-demo, .cap.reverse.has-demo { grid-template-columns:1fr }
  .dp-row, .dc-row { white-space:normal }
}

/* ── Minimum text size: nothing below the hero paragraph (21px) ── */
.btn-landing, button.btn-landing { font-size:21px;padding:12px 24px }
.persona h4 { font-size:24px }
.persona p, .pillar .more { font-size:21px }
.news-cards .persona h4 { font-size:24px }
#security .section-head, #security .section-head p { max-width:none }


/* Demo 3: subway map of the files and code behind a result */
.cap-art.demo-trace { border:0;border-radius:0;aspect-ratio:auto;overflow:visible;background:none;display:block;padding:0 }
.demo-trace > .dt { height:auto }
.dt-map { display:flex;align-items:flex-start }
.dt-svg { flex:none;width:90px;height:400px }
.dt-edge { fill:none;stroke:var(--c-border-2);stroke-width:2 }
.dt-dot { fill:var(--c-bg);stroke:var(--c-text);stroke-width:1.5;transform-box:fill-box;transform-origin:center }
.dt-dot.is-sel { fill:var(--c-text);transform:scale(1.6) }
.dt-list { flex:1;min-width:0 }
.dt-row {
  display:flex;align-items:center;gap:16px;height:80px;width:100%;padding:0 14px;
  border:1px solid transparent;border-radius:10px;background:none;font:inherit;color:var(--c-text);text-align:left;
}
.dt-row { cursor:pointer }
.dt-row:hover { border-color:var(--c-border) }
.dt-row.is-on { border-color:var(--c-text) }
.dt-icon { flex:none;width:28px;display:flex;justify-content:center }
.dt-icon svg { width:26px;height:26px;fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round }
.dt-braces { font-family:var(--font-mono-landing);font-size:22px;font-weight:700;letter-spacing:-0.05em;line-height:1 }
.dt-t { display:flex;flex-direction:column;min-width:0;white-space:nowrap }
.dt-name { font-size:21px;font-weight:600;line-height:1.3 }
.dt-file { font-family:var(--font-mono-landing);font-size:21px;color:var(--c-text-2);line-height:1.3 }
.dt-preview {
  margin-top:12px;padding:12px 0 12px 104px;min-height:160px;
  font-family:var(--font-mono-landing);font-size:21px;line-height:1.45;color:var(--c-text);overflow-x:auto;font-variant-ligatures:none;
}
.dt-preview pre { margin:0;font:inherit;white-space:pre }
.dt-preview .ln { display:inline-block;width:2ch;margin-right:1.5ch;text-align:right;color:var(--c-text-3);user-select:none }
.dt-preview table { border-collapse:collapse;font:inherit }
.dt-preview th { text-align:left;font-weight:600;padding:0 28px 4px 0;color:var(--c-text) }
.dt-preview td { padding:0 28px 0 0;color:var(--c-text-2);white-space:nowrap }
@media (max-width: 900px) { .dt-t { white-space:normal } }
.dt-row:focus { outline:none }
.dt-row:focus-visible { border-color:var(--c-text) }

/* Demo 4: one figure, on screen and as submitted */
.cap-art.demo-fig { border:0;border-radius:0;aspect-ratio:auto;overflow:visible;background:none;display:block;padding:0 }
.demo-fig > .df { height:auto }
.df { --fig-font:var(--font-display);--pl:#2f5d9e;--dr:#b03a2e }
.df.is-pdf { --fig-font:"Times New Roman", Times, serif }
.df-switch { display:inline-flex;border:1px solid var(--c-border-2);border-radius:8px;overflow:hidden;margin-bottom:20px }
.df-opt { font:inherit;font-size:21px;padding:8px 18px;border:0;background:var(--c-bg);color:var(--c-text-2);cursor:pointer }
.df-opt.is-on { background:var(--c-text);color:#fff }
.df-title { font-family:var(--fig-font);font-size:21px;line-height:1.35;color:var(--c-text);margin:0 0 8px }
.df.is-pdf .df-title { font-weight:700 }
.df-note { font-family:var(--fig-font);font-size:21px;line-height:1.35;color:var(--c-text);margin:4px 0 0 }
.df-svg { width:100%;height:auto;display:block;font-family:var(--fig-font) }
.df-grid { stroke:var(--c-border);stroke-width:1 }
.df-tick { font-size:21px;fill:var(--c-text-2) }
.df-pl, .df-dr { fill:none;stroke-width:2.5;stroke-linejoin:round }
.df-pl { stroke:var(--pl) } .df-dr { stroke:var(--dr) }
.df-pl-pt { fill:var(--pl) } .df-dr-pt { fill:var(--dr) }
.df-brk { fill:none;stroke:var(--c-text);stroke-width:1.5 }
.df-lab { font-size:21px;font-weight:700 }
.df-lab-pl { fill:var(--pl) } .df-lab-dr { fill:var(--dr) }
.df-msg, .df-note { min-height:calc(2 * 1.35em) }
.df-msg { font-size:21px;line-height:1.35;color:var(--c-text);margin:4px 0 0 }
.df-note { display:none }
.df.is-pdf .df-msg { display:none }
.df.is-pdf .df-note { display:block }
.df-hit { fill:transparent;cursor:pointer }
.df.is-pdf .df-hit { cursor:default }
.df-guide { stroke:var(--c-border-2);stroke-width:1;stroke-dasharray:3 4 }
.df.is-pdf .df-guide { display:none }
.df-pt { transform-box:fill-box;transform-origin:center;transition:none }
.df-pt.is-sel { transform:scale(1.6) }
.df.is-pdf .df-pt.is-sel { transform:none }

/* ── Use-case tabs ── */
.uc-tabs { display:flex;flex-wrap:wrap;gap:8px 36px;margin-bottom:28px;border-bottom:1px solid var(--c-border) }
.uc-tab {
  font:inherit;font-size:21px;font-weight:600;color:var(--c-text-3);background:none;border:0;
  padding:0 0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer;
}
.uc-tab:hover { color:var(--c-text) }
.uc-tab.is-on { color:var(--c-text);border-bottom-color:var(--c-text) }
.uc-panels { display:grid }
.uc-panel { grid-area:1 / 1;visibility:hidden }
.uc-panel.is-on { visibility:visible }

/* ── Data types grid ── */
.dtype-grid { display:grid;grid-template-columns:repeat(4, 1fr) }
.dtype { display:flex;align-items:center;gap:16px;padding:20px 24px 20px 0;font-size:21px;color:var(--c-text) }
.dtype:nth-child(n+5) { border-top:1px solid var(--c-border) }
.dtype svg { width:32px;height:32px;flex:none;fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round }
@media (max-width: 900px) { .dtype-grid { grid-template-columns:repeat(2, 1fr) } .dtype:nth-child(n+3) { border-top:1px solid var(--c-border) } }
.uc-panel h2 { text-wrap:wrap }
.uc-panel p { text-wrap:wrap }
.section-head h2 { text-wrap:pretty }
.cap > * { min-width:0 }
@media (max-width: 600px) {
  .dtype-grid { grid-template-columns:1fr }
  .dtype { padding:12px 0 }
  .dtype:nth-child(n+2) { border-top:1px solid var(--c-border) }
}
/* Section headings and their paragraphs use the full width and fill each line. */
.section-head, .section-head p { max-width:none }
.section-head h2 { text-wrap:wrap }
/* Clickable cards (What Omabit does, News): light grey fill, no outline. */
.who-grid .persona.pillar { background:#f3f3f4;border-color:transparent }
.who-grid .persona.pillar:hover { background:#ececee;border-color:transparent }
.section-foot .btn-landing.ghost { background:#f3f3f4;border-color:transparent }
.section-foot .btn-landing.ghost:hover { background:#ececee;border-color:transparent }

/* ── Platform area tabs (sticky so you can switch while reading a demo) ── */
.pf-bar { position:sticky;top:0;z-index:20;background:var(--c-bg);padding-top:28px;margin-top:8px }
.pf-tabs { margin-bottom:0 }
.pf-note { font-size:21px;color:var(--c-text-2);margin:14px 0 0;padding-bottom:12px }
.df-bar-pl { fill:var(--pl) } .df-bar-dr { fill:var(--dr) }
.df-pt-bar.is-sel { stroke:var(--c-text);stroke-width:2 }
.df.is-pdf .df-pt-bar.is-sel { stroke:none }
/* Tabs spread across the full width in equal thirds. */
.uc-tabs { flex-wrap:nowrap;gap:0 }
.uc-tab { flex:1;text-align:center;padding-bottom:14px }
.pf-bar { padding-bottom:12px }
/* Phones: the page itself never scrolls sideways; on very narrow screens the
   tab row scrolls within itself instead of pushing the page wider. */
.landing-page { overflow-x:clip }
@media (max-width: 400px) {
  .uc-tabs { overflow-x:auto;scrollbar-width:none }
  .uc-tabs::-webkit-scrollbar { display:none }
  .uc-tab { flex:0 0 auto;padding:0 16px 14px }
}