/* Altrovia website mockups, v2 — built on the product's own "Interface foundations"
   (Altrovia design system canvas, Final design, oai.css): Apps SDK greys, pill controls,
   soft tiles with a hairline, tabular figures, one link blue. Inter is the site's face. */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/woff2/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); }

:root {
  --f: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bg: #ffffff; --panel: #f9f9f9; --soft: #f3f3f3; --soft2: #ececec;
  --hov: rgba(13,13,13,.05); --sel: rgba(13,13,13,.075);
  --line: rgba(13,13,13,.10); --lines: rgba(13,13,13,.06); --ctl: rgba(13,13,13,.18);
  --ink: #0d0d0d; --ink2: #5d5d5d; --ink3: #6f6f6f; --ink4: #9b9b9b;
  --acc: #0169cc; --acc-soft: rgba(2,133,255,.10); --ring: #0169cc;
  --fill: #0d0d0d; --fill-h: #303030; --on-fill: #ffffff;
  --ok: #008635; --ok-soft: rgba(4,184,76,.12); --dev: #0285ff; --dev-soft: rgba(2,133,255,.10);
  --sh3: 0 4px 12px -4px rgba(0,0,0,.10); --sh4: 0 12px 32px -8px rgba(0,0,0,.14);
  --backdrop: rgba(249,249,249,.78);
}
:root[data-theme="dark"] {
  --bg: #212121; --panel: #181818; --soft: #2f2f2f; --soft2: #383838;
  --hov: rgba(255,255,255,.06); --sel: rgba(255,255,255,.09);
  --line: rgba(255,255,255,.12); --lines: rgba(255,255,255,.07); --ctl: rgba(255,255,255,.22);
  --ink: #f3f3f3; --ink2: #b4b4b4; --ink3: #a3a3a3; --ink4: #6e6e6e;
  --acc: #4aa8ff; --acc-soft: rgba(2,133,255,.18); --ring: #0285ff;
  --fill: #f3f3f3; --fill-h: #dcdcdc; --on-fill: #0d0d0d;
  --ok: #3fd07c; --ok-soft: rgba(4,184,76,.16); --dev: #2e9bff; --dev-soft: rgba(2,133,255,.18);
  --sh3: 0 4px 12px -4px rgba(0,0,0,.4); --sh4: 0 16px 40px -10px rgba(0,0,0,.6);
  --backdrop: rgba(24,24,24,.78);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font-family: var(--f); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page frame */
.wrap { width: min(1100px, 100% - 48px); margin-inline: auto; }
.section { padding: 72px 0; }
.section + .section { padding-top: 0; }

/* type — the product's scale */
.display { margin: 0; font: 600 clamp(36px, 5vw, 56px)/1.05 var(--f); letter-spacing: -0.035em; text-wrap: balance; }
h1.t { margin: 0; font: 600 28px/1.2 var(--f); letter-spacing: -0.025em; text-wrap: balance; }
h2.h { margin: 0; font: 600 20px/1.3 var(--f); letter-spacing: -0.015em; }
h3.s { margin: 0; font: 600 16px/1.3 var(--f); letter-spacing: -0.012em; }
.sub { color: var(--ink2); font-size: 16px; line-height: 1.5; max-width: 62ch; margin: 0; }
.cap { color: var(--ink2); font-size: 14px; margin: 0; }
.meta { color: var(--ink3); font: 400 12px/1.35 var(--f); }
.fig { font: 600 30px/1 var(--f); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.link { color: var(--acc); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 2px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* controls */
.btn { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 14px/1 var(--f); cursor: pointer; white-space: nowrap; transition: background-color 120ms ease, transform 160ms var(--ease); }
.btn:active { transform: scale(.97); }
.btn-p { background: var(--fill); color: var(--on-fill); } .btn-p:hover { background: var(--fill-h); }
.btn-o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ctl); } .btn-o:hover { background: var(--hov); }
.btn-s2 { background: var(--soft); color: var(--ink); } .btn-s2:hover { background: var(--soft2); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--soft); }
.seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font: 500 14px/1 var(--f); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(13,13,13,.08); }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .seg button[aria-pressed="true"] { background: #454545; box-shadow: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--soft);
  font: 500 12px/1 var(--f); color: var(--ink2); white-space: nowrap; }
.pill.ac { background: var(--acc-soft); color: color-mix(in srgb, var(--acc) 82%, var(--ink)); }
.pill.ok { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.icb { width: 36px; height: 36px; border-radius: 999px; border: 0; background: none; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icb:hover { background: var(--hov); color: var(--ink); }
:where(a, button):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 8px; }

/* surfaces */
.tile { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 20px 22px; background: var(--bg); min-width: 0; }
.tile.flat { background: var(--panel); box-shadow: none; }
a.tile { transition: background-color 120ms ease, box-shadow 120ms ease; }
a.tile:hover { background: var(--panel); }

/* table — the product's list grammar */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { font: 500 12px/1 var(--f); color: var(--ink3); text-align: left; padding: 0 12px 10px; white-space: nowrap; }
.tbl td { padding: 13px 12px; font-size: 14px; vertical-align: middle; border-top: 1px solid var(--lines); }
.tbl tbody tr:first-child td { border-top-color: var(--line); }
.tbl .r { text-align: right; }
.tbl.hv tbody tr { transition: background-color 120ms ease; }
.tbl.hv tbody tr:hover td { background: var(--hov); }
.tbl.hv td:first-child { border-radius: 12px 0 0 12px; padding-left: 10px; }
.tbl.hv td:last-child { border-radius: 0 12px 12px 0; padding-right: 10px; }
.tbl.hv th:first-child { padding-left: 10px; } .tbl.hv th:last-child { padding-right: 10px; }

/* site nav — a floating pill in the product's panel grey, visible on white and on dark */
.nav { position: sticky; top: 12px; z-index: 50; padding: 0 12px; }
.nav-in { width: min(1100px, 100%); margin: 0 auto; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 8px 0 18px;
  border-radius: 999px; background: var(--backdrop); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh3); }
.nav .wm { font: 600 18px/1 var(--f); letter-spacing: -0.025em; }
.nav .wm { justify-self: start; }
.nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.nav ul a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; color: var(--ink2); font-weight: 500; }
.nav ul a:hover { background: var(--hov); color: var(--ink); }
.nav ul a[aria-current="page"] { background: var(--sel); color: var(--ink); }
.nav .end { display: flex; align-items: center; gap: 4px; justify-self: end; position: relative; }
/* phone menu: the nav links, in a panel under the pill */
.menu { display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-p { position: absolute; top: calc(100% + 14px); right: -8px; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), var(--sh4); }
.menu-p a { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 500; color: var(--ink2); }
.menu-p a:hover, .menu-p a[aria-current="page"] { background: var(--hov); color: var(--ink); }

/* footer */
.foot { background: #0d0d0d; color: #f3f3f3; margin-top: 48px; }
:root[data-theme="dark"] .foot { background: #181818; }
.foot .wrap { padding: 96px 0 32px; }
.foot h2 { margin: 0 0 36px; font: 500 clamp(2rem, 4.5vw, 3.25rem)/1.08 var(--f); letter-spacing: -0.022em; max-width: 700px; }
.foot .k { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.foot .mail { display: inline-block; font: 600 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--f); letter-spacing: -0.015em; }
.foot .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 72px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12); color: #b4b4b4; font-size: 13px; }
.foot .row nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot .row a:hover { color: #fff; }
.foot svg.fmark { width: 34px; height: 16px; }

/* mockup label */
.mk { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; gap: 8px; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 999px; background: var(--fill); color: var(--on-fill); font: 500 12px/1 var(--f); box-shadow: var(--sh4); }
.mk a { opacity: .7; } .mk a:hover { opacity: 1; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .nav ul { display: none; }
  .nav-in { display: flex; justify-content: space-between; }
  .menu { display: block; }
  .section { padding: 48px 0; }
}