/* ═══════════════════════════════════════════════════════════════════════
   OMNISCIENT WEBSITE · BASE
   Shared by every page: tokens, reset, type, buttons, tags, header with the Product and Resources menus,
   the phone menu, footer, reading pages and scroll reveals. The home page adds assets/home.css.
   Tokens match the app's src/app/globals.css. Rules: docs/brand.md in the app repo.
   The calm style shared with Claritia (Claritia brand v3): a warm off-white page, white cards and windows lifted by
   soft ring shadows, round buttons, corners that grow with the size of the thing, Inter for every word and green as
   the one accent (about 5% of a view). The primary button is dark gray. Headings are one tone.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Text */
  --ink: #0f0f0f;
  --ink-2: #333333;
  --muted: #6c6c6d;
  --faint: #a3a3a3;
  --light: #c4c4c4;

  /* Surfaces: a warm off-white page, white cards */
  --page: #fafaf5;
  --panel: #ffffff;
  --tint: #f5f5f5;
  --hover: #f2f2ee;
  --pressed: #ebebe4;
  --solid: #242421;

  /* Hairlines, and the soft ring around raised things */
  --line: #ebebeb;
  --line-light: #f2f2f2;
  --line-strong: #d4d4d4;
  --rail: #ebebe4;

  /* The primary action is dark gray */
  --brand: #333333;
  --brand-hover: #1f1f1f;
  --brand-soft: #f2f2f2;
  --brand-halo: #c9eadb;
  --brand-flash: #e3f4ec;
  --brand-on-dark: #a3a3a3;

  /* Green is the one accent: the Point, live lines, scores, won numbers, focus. About 5% of a view. Shared with Claritia. */
  --signal: #0c8c5e;
  --signal-strong: #0a7a52;
  --signal-text: #086444;
  --signal-soft: #e3f4ec;
  --signal-line: #c9eadb;
  --mint: #18e299;

  /* Status and object colors: a soft fill with a deep text */
  --green: #086444;
  --green-soft: #e3f4ec;
  --orange: #9a3412;
  --orange-soft: #ffe9cc;
  --red: #a8201a;
  --red-soft: #fde8e8;
  --purple: #5429d6;
  --purple-soft: #e9e3fd;
  --sky: #1e4f9a;
  --sky-soft: #e2effd;
  --turquoise: #0b6f69;
  --turquoise-soft: #e0f6f4;

  /* Otto: near-black body, white eyes */
  --o-body: #242421;
  --o-eye: #ffffff;
  --o-pupil: #0f0f0f;
  --o-beak: #a3a3a3;

  /* Corners grow with the size of the thing */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-lg: 12px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* Shadows: a 1px ring plus soft layers */
  --frame: #e5e5e5;
  --sh-rest: 0 4px 4px -12px rgba(0,0,0,.02), 0 12px 12px -6px rgba(0,0,0,.02), 0 6px 6px -3px rgba(0,0,0,.02), 0 3px 3px -1.5px rgba(0,0,0,.02), 0 1px 1px -.5px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.06);
  --sh-chip: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06);
  --sh-outline: 0 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.16);
  --sh-primary: 0 0 0 1px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.4), 1px 4px 8px rgba(0,0,0,.12);
  --sh-focus: 0 0 0 1px #0c8c5e, 0 1px 3px rgba(0,0,0,.16), 0 0 0 3px rgba(12,140,94,.18);
  --shadow-pop: 0 12px 32px -6px rgba(0,0,0,.12), 0 0 0 1px rgba(111,107,107,.1), 0 1px 3px rgba(63,70,75,.1);
  --shadow-heavy: 0 0 0 1px rgba(0,0,0,.04), 0 6px 6px -3px rgba(0,0,0,.04), 0 12px 12px -6px rgba(0,0,0,.03), 0 24px 48px -16px rgba(0,0,0,.18);

  /* Motion: three speeds, two curves */
  --fast: 150ms;
  --normal: 280ms;
  --slow: 560ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-h: 64px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01";
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { background: var(--page); color: var(--ink); font-size: 15px; }
body { min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul, menu { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: 600; }
code, kbd, pre { font-family: var(--mono); font-size: 1em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--signal-line); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r-xs); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout */
.site { display: flex; flex-direction: column; min-height: 100vh; background: var(--page); }
.site-main { flex: 1; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .wrap { padding-inline: 32px; } }

/* Type */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 13px; line-height: 19px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.two { color: inherit; }
.display { font-size: clamp(42px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; }
.h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 500; }
.h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--muted); letter-spacing: -0.012em; }
.small { font-size: 13px; color: var(--faint); }
.muted { color: var(--muted); }
.brand { color: var(--brand); }

/* Tags: a soft fill with a deep text, 6px corners */
.tag {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap; letter-spacing: 0;
  background: var(--hover); color: var(--muted);
}
.tag--brand { background: var(--brand-soft); color: var(--brand); }
.tag--green { background: var(--green-soft); color: var(--green); }
.tag--orange { background: var(--orange-soft); color: var(--orange); }
.tag--purple { background: var(--purple-soft); color: var(--purple); }
.tag--sky { background: var(--sky-soft); color: var(--sky); }
.tag--red { background: var(--red-soft); color: var(--red); }
.dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--signal); }
.dot--green { background: var(--green); }

/* Buttons: pills. One dark gray button per view, the rest outlined with a soft ring. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; white-space: nowrap; letter-spacing: -0.01em;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--normal) var(--ease-spring);
}
.btn:active { transform: scale(0.96); }
.btn--lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-primary); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--ghost { background: var(--panel); color: var(--ink); box-shadow: var(--sh-outline); }
.btn--ghost:hover { background: var(--page); }
.btn--white { background: #fff; border-color: #fff; color: var(--ink); }
.btn--white:hover { background: var(--brand-soft); }
.btn--ghost-dark { border: 1px solid rgb(255 255 255 / 0.28); color: #fff; }
.btn--ghost-dark:hover { border-color: #fff; }
.nudge { display: inline-block; transition: transform var(--normal) var(--ease-out); }
.btn:hover .nudge, .more:hover .nudge { transform: translateX(3px); }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand); }
.more:hover { color: var(--brand-hover); }

/* Logo: Otto standing still, and the wordmark */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__word { font-size: 13px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.mark .mark__point { fill: var(--signal); }
.mark { flex-shrink: 0; }

/* ═══ Header ═══ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 250 245 / 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--normal) var(--ease-out);
}
.site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--frame); }
.site-header__in { position: relative; display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.site-header__logo { flex-shrink: 0; }

.site-nav { display: none; flex: 1; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav__trigger, .nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.nav__trigger:hover, .nav__link:hover, .nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--hover); }
.nav__chev { width: 12px; height: 12px; opacity: 0.7; transition: transform var(--normal) var(--ease-out); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* Menus: floating panels centered under the header */
.nav__panel {
  position: absolute; top: calc(100% - 4px); left: 50%; z-index: 60;
  width: min(1100px, calc(100vw - 32px));
  border: 0; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity var(--normal) var(--ease-out), transform var(--normal) var(--ease-out), visibility var(--normal);
}
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__panel--resources { width: min(520px, calc(100vw - 32px)); }
.nav__panel--products { width: min(1080px, calc(100vw - 32px)); }
.menu.menu--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu.menu--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu__card { display: flex; flex-direction: column; gap: 6px; padding: 16px; transition: background-color var(--fast) var(--ease-out); }
.menu__card + .menu__card { border-left: 1px solid var(--line); }
.menu__card:hover, .menu__card:focus-visible { background: var(--hover); }
.menu__card b { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.menu__card small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.menu__tile { width: 100%; height: 72px; margin-bottom: 6px; border-radius: var(--r-sm); box-shadow: var(--sh-chip); display: grid; place-items: center; }
.menu__tile svg { width: 24px; height: 24px; }
.menu__tile.b-gray { background: #f5f5f5; } .menu__tile.b-stone { background: #ebebeb; }
.sheet__group--open { padding-top: 8px; border-bottom: 1px solid var(--line); }

.menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 236px; }
.menu--resources { grid-template-columns: minmax(0, 1fr) 236px; }
.menu__col { padding: 20px 12px 16px; }
.menu__label { display: block; padding: 0 12px 10px; font-size: 12px; font-weight: 500; color: var(--faint); }
.menu__item { display: block; padding: 9px 12px; border-radius: var(--r-sm); transition: background-color var(--fast) var(--ease-out); }
.menu__item:hover { background: var(--hover); }
.menu__item b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.menu__item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.menu__aside { padding: 20px 12px 16px; background: var(--tint); border-left: 1px solid var(--frame); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.menu__aside .menu__label + .menu__link { margin-top: 0; }
.menu__link { display: block; padding: 7px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink); transition: background-color var(--fast) var(--ease-out); }
.menu__link:hover { background: var(--pressed); }
.menu__aside .menu__label:not(:first-child) { margin-top: 18px; }
.menu--resources .menu__col { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 4px; }
.menu--resources .menu__col .menu__label { grid-column: 1 / -1; }

.site-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-actions__signin { display: none; height: 34px; padding: 0 12px; align-items: center; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--muted); transition: color var(--fast); }
.site-actions__signin:hover { color: var(--ink); }
.site-actions__demo { display: none; }
.site-actions .btn { height: 34px; }
/* The smallest phones (320px): the logo, Start free and the menu button share the row without spilling over. */
@media (max-width: 360px) {
  .site-actions { gap: 4px; }
  .site-actions__start { padding-inline: 10px; }
  .site-actions__start .nudge { display: none; }
}

/* Phone menu */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--ink); }
.menu-btn:hover { background: var(--hover); }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .i-close { display: none; }
.site-header.is-open .menu-btn .i-open { display: none; }
.site-header.is-open .menu-btn .i-close { display: block; }
.sheet {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; display: flex; flex-direction: column;
  background: var(--panel); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--normal) var(--ease-out), transform var(--normal) var(--ease-out), visibility var(--normal);
}
.site-header.is-open + .sheet { opacity: 1; visibility: visible; transform: none; }
.sheet__body { flex: 1; padding: 8px 16px 24px; }
.sheet details { border-bottom: 1px solid var(--line); }
.sheet summary { display: flex; align-items: center; justify-content: space-between; height: 52px; font-size: 16px; font-weight: 600; list-style: none; }
.sheet summary svg { width: 14px; height: 14px; color: var(--faint); transition: transform var(--normal) var(--ease-out); }
.sheet details[open] summary svg { transform: rotate(180deg); }
.sheet__group { padding-bottom: 12px; }
.sheet__label { display: block; padding: 10px 0 4px; font-size: 12px; font-weight: 500; color: var(--faint); }
.sheet__group a { display: block; padding: 8px 0; font-size: 15px; color: var(--ink); }
.sheet__plain { display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.sheet__foot { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
.sheet__foot .btn { width: 100%; }

@media (min-width: 640px) {
  .site-actions__signin { display: inline-flex; }
}
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-actions__demo { display: inline-flex; }
  .menu-btn, .sheet { display: none; }
}

/* ═══ Footer ═══ */
.site-footer { border-top: 1px solid var(--rail); background: var(--page); }
.site-footer__in { display: grid; gap: 40px; padding-block: 56px 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer__brand p { max-width: 280px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.site-footer__col h2 { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.site-footer__col h2::before { content: "[ "; } .site-footer__col h2::after { content: " ]"; }
.site-footer__col ul { margin-top: 14px; font-size: 14px; }
.site-footer__col li + li { margin-top: 10px; }
.site-footer__col a { color: var(--muted); transition: color var(--fast); }
.site-footer__col a:hover { color: var(--ink); }
@media (min-width: 768px) { .site-footer__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .site-footer__in { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}
.site-footer__base { border-top: 1px solid var(--frame); }
.site-footer__base-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px; font-size: 13px; color: var(--faint); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__base a:hover { color: var(--ink); }

/* ═══ Reading pages: Privacy, Terms, 404 ═══ */
.reading { width: 100%; max-width: 760px; margin-inline: auto; padding: 56px 16px 80px; }
.reading__title { font-size: 36px; line-height: 1.15; letter-spacing: -0.035em; }
.reading__meta { margin-top: 8px; font-size: 14px; color: var(--muted); }
.reading .prose { margin-top: 40px; }
.reading--center { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 112px; text-align: center; }
.reading--center .reading__title { margin: 0; }
.label-mono { font-size: 13px; font-weight: 500; color: var(--faint); }

.prose h2 { margin: 36px 0 12px; font-size: 19px; letter-spacing: -0.02em; }
.prose h3 { margin: 28px 0 8px; font-size: 16px; }
.prose p, .prose li { font-size: 15px; line-height: 1.7; color: var(--muted); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font-size: 13px; background: var(--hover); padding: 1px 5px; border-radius: var(--r-xs); }
.prose table { width: 100%; margin: 0 0 20px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint); font-weight: 500; }
.prose blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--line-strong); }

/* ═══ Motion: things rise in as they scroll into view ═══ */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 80ms; }
.js .reveal[data-delay="2"] { transition-delay: 160ms; }
.js .reveal[data-delay="3"] { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}