/* omnisense.biz: the public site. Hand-written, no framework, no build step.
   The third member of the Omnisense visual family (design-tokens/README.md on
   the back-office branch): it shares the face (Fira Sans), the navy, the ink
   and the edge rules with the two apps, and borrows the Omnisense app's frame
   (white with navy ink, the light ochre ground) because that is the app a
   client will meet next. The beam's spectrum appears in the logo only.
   Every text colour pair is at least 4.5:1 and every outline 3:1 (measured
   07/10/2026). Sizes and spacing made more compact the same day (the text
   "a bit smaller", the page "a bit denser"). */

/* --- faces: self-hosted, so no visitor's browser contacts a font service */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fira-sans-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fira-sans-400-greek.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fira-sans-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fira-sans-500-greek.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fira-sans-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fira-sans-600-greek.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; }

:root {
  /* from the shared tokens */
  --navy: #1f3b63;        /* Omnisense navy; white on it 11.3:1 */
  --ink: #15181c;
  --ink-2: #4b525c;       /* 7.9:1 on white, 5.5:1 on ochre (measured 07/10) */
  --line: #d9dee4;
  --edge: #6b7380;        /* a control's outline: 4.8:1 on white, 3.3:1 on ochre */
  --focus: #1f5a94;
  --paper: #ffffff;
  --ochre: #e8d5b0;       /* the Omnisense app's page colour */
  --ochre-deep: #d9bf8c;  /* a rule on the ochre band */
  --mist: #f2f4f7;        /* a quiet band between sections */

  --face: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --measure: 70ch;
  --wrap: 1080px;
  --gutter: clamp(16px, 3.5vw, 28px);
  --radius: 6px;
  --section: clamp(28px, 4vw, 52px);   /* the space above and below a section */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: 0.9375rem;          /* 15px */
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
img, svg { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 0.8em; max-width: var(--measure); }
h1, h2, h3 { color: var(--navy); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; margin-bottom: 0.5em; }
h3 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 0.3em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.lead { font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.55; color: var(--ink-2); }
.small { font-size: 0.84rem; color: var(--ink-2); }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 50; background: var(--paper); padding: 8px 12px; }

/* --- buttons: every button outlined, the main one filled */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--edge); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font: 500 0.95rem/1 var(--face); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--mist); text-decoration: none; }
.btn-main { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-main:hover { background: #16304f; }

/* --- the top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 30px; }
.brand > span { display: block; line-height: 1.15; }
.brand b { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; letter-spacing: 0.06em; }
.brand > span > span { display: block; font-size: 0.74rem; color: var(--ink-2); }
.lang { display: inline-flex; border: 1.5px solid var(--edge); border-radius: var(--radius); overflow: hidden; font-size: 0.84rem; }
.lang a { padding: 5px 9px; color: var(--ink); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--navy); color: #fff; }
.top .btn { min-height: 36px; padding: 0 12px; font-size: 0.9rem; }
@media (max-width: 560px) { .top .btn { display: none; } .brand > span > span { display: none; } }

/* --- the opening: the claim on the left, a call on the right */
.hero { padding: clamp(24px, 3.5vw, 44px) 0 clamp(32px, 4.5vw, 56px); }
.hero .wrap { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero .wrap > div:first-child { padding-top: 16px; }
}
.hero h1 { margin-bottom: 0.45em; }
.hero .lead { margin-bottom: 1.3em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.beta-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 3px 11px 3px 5px; border: 1.5px solid var(--ochre-deep); border-radius: 999px;
  background: #faf3e4; color: var(--ink); font-size: 0.85rem;
}
.beta-tag strong { background: var(--navy); color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 600; font-size: 0.8rem; }

/* the call: the page's one bold element. An interview as it sounds,
   written down: who speaks and what. */
.call { position: relative; background: var(--paper); border: 1.5px solid var(--navy); border-radius: 10px; box-shadow: 8px 8px 0 var(--ochre); }
.call-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.call-head img { width: 32px; height: 32px; flex: none; }
.call-who { line-height: 1.25; }
.call-who b { display: block; color: var(--navy); font-weight: 600; }
.call-who span { font-size: 0.8rem; color: var(--ink-2); }
.call-state { margin-left: auto; padding: 1px 9px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.78rem; color: var(--ink-2); }
.turns { list-style: none; margin: 0; padding: 4px 16px 8px; }
.turn { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.turn:last-child { border-bottom: 0; }
.turn .who { display: block; font-size: 0.76rem; font-weight: 600; color: var(--ink-2); margin-bottom: 1px; }
.turn.ai .who { color: var(--navy); }
.turn p { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.turn.person { padding-left: 20px; }
.turn.person p { color: var(--ink-2); }
.call-foot { margin: 0; padding: 8px 16px 11px; font-size: 0.78rem; color: var(--ink-2); border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .js .turn { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; }
  .js .turn.shown { opacity: 1; transform: none; }
}

/* --- sections */
section { padding: var(--section) 0; }
.band-mist { background: var(--mist); }
.band-ochre { background: var(--ochre); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy h2, .band-navy h3, .band-navy a { color: #fff; }
.band-navy p { color: #e3e9f1; }
.section-head { max-width: 720px; margin-bottom: clamp(14px, 2vw, 22px); }
.section-head p:last-child { margin-bottom: 0; }

/* beta: what the word means here */
.beta { display: grid; gap: 18px; }
@media (min-width: 860px) { .beta { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; } }
.beta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.beta li { border-left: 3px solid var(--ochre); padding: 1px 0 1px 13px; color: #e3e9f1; }
.beta li b { color: #fff; font-weight: 600; }

/* how it works: a real sequence, so it is numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.steps li { counter-increment: step; padding: 16px 18px 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: 0.85rem; }
.steps p { margin: 0; color: var(--ink-2); }

/* today and not yet: honest columns */
.two { display: grid; gap: 18px; }
@media (min-width: 820px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.checklist li { position: relative; padding-left: 24px; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; }
.checklist.done li::before { background: var(--navy); }
.checklist.todo li::before { border: 2px solid var(--edge); }

/* try it */
.tryit { display: grid; gap: 20px; }
@media (min-width: 880px) { .tryit { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; } }
.tryit-panel { background: var(--paper); border: 1.5px solid var(--navy); border-radius: 10px; padding: clamp(14px, 2.4vw, 22px); }
.tryit-panel p:last-child { margin-bottom: 0; }
.tryit-panel iframe { display: block; width: 100%; height: 560px; border: 0; }
.tryit-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tryit-facts li { padding-left: 16px; position: relative; }
.tryit-facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--navy); border-radius: 2px; }
.notice { border-left: 3px solid var(--navy); padding: 2px 0 2px 12px; color: var(--ink-2); }

/* why: the heading on the left, the reasoning on the right */
.why { display: grid; gap: 10px; }
@media (min-width: 860px) { .why { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 36px; } }
.why h2 { margin-bottom: 0; }

/* contact and the foot */
.contact { display: grid; gap: 14px; align-items: center; }
@media (min-width: 820px) { .contact { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; } }
.contact p:last-child { margin-bottom: 0; }
.foot { padding: 20px 0 26px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-2); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; }

/* --- the "before you try" window: the try-it explained again, opened by
   every "try" button. The text is copied in from the try-it
   section by site.js, so it is written once. */
.dialog { width: min(100% - 32px, 540px); max-height: calc(100dvh - 32px); padding: 0; border: 1.5px solid var(--navy); border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 8px 8px 0 var(--ochre); }
.dialog::backdrop { background: rgba(21, 24, 28, 0.5); }
.dialog-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dialog-head img { width: 28px; height: 28px; }
.dialog-head h2 { margin: 0; font-size: 1.15rem; }
.dialog-body { padding: 14px 16px 4px; overflow-y: auto; }
.dialog-body h2 { display: none; }   /* the section's own heading; the window has one */
.dialog-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px 14px; }

/* --- the data-protection page: a document, read top to bottom */
.doc { padding: clamp(22px, 4vw, 44px) 0; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(1.55rem, 3vw, 2.05rem); margin-bottom: 0.35em; }
.doc h2 { font-size: 1.12rem; margin: 1.5em 0 0.4em; }
.doc ul { padding-left: 1.2em; max-width: var(--measure); margin: 0 0 0.8em; }
.doc li { margin-bottom: 0.3em; }