/* Lukio Health product page.  Light by default, dark when the device asks for it. */
/* Direction B, product-forward.  One reading column, 720px, left aligned.  One family, Public Sans (the US Web
   Design System face, familiar to government and public health readers), set with tabular figures for data.
   Cool neutral ground, one deep blue accent.  The product is the picture: the session log opens the page as a
   framed working screen, the flow drawing sits on a panel like a schematic, the screenshots sit on quiet mats.
   Type scale: 12 / 13 / 14 / 16 / 18 / 24 / 30 / 48.  Baseline unit 8px. */
:root { color-scheme: light;
  --bg: #f2f4f7; --surface: #ffffff; --surface-2: #e9edf2; --mat: #e3e8ef;
  --ink: #131a26; --ink-2: #444d5e; --ink-3: #626b7f; --line: #d8dde6; --line-2: #b7c0cd;
  --accent: #1d3f9e; --accent-ink: #ffffff; --accent-wash: #e5ebf8; --accent-line: #9fb1de;
  --bezel: #1d2129; --bezel-edge: transparent;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark: the same page at night, following the device's setting. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark;
    --bg: #0f141c; --surface: #161c26; --surface-2: #1d2430; --mat: #1a212c;
    --ink: #e8ecf3; --ink-2: #b6bece; --ink-3: #9099ab; --line: #283142; --line-2: #3b4658;
    --accent: #93abf2; --accent-ink: #0c1425; --accent-wash: #1a2646; --accent-line: #3e5596;
      --bezel: #2b323e; --bezel-edge: #465165;
  }
}

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body {
  --gap-section: 96px; --gap-head: 32px; --gap-block: 40px;
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6;
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.wrap { max-width: 720px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; min-width: 0; }
figcaption { color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }

/* Header: wordmark and three anchors on one hairline. */
.top { border-bottom: 1px solid var(--line); background: var(--surface); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 14px; }
.brand { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand span { color: var(--ink-3); font-weight: 400; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding-block: 6px; }
.top nav a:hover { color: var(--accent); }

/* Sections carry the vertical rhythm; .wrap carries only the gutters. */
.hero { padding-block: 80px var(--gap-section); }
.band { padding-block: 0 var(--gap-section); }
.band h2, .start h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.018em; }
.band h2 { padding-block: 20px 0; border-top: 2px solid var(--ink); margin-bottom: var(--gap-head); }

/* Hero */
.hero h1 { font-size: 3rem; line-height: 1.06; font-weight: 700; letter-spacing: -0.028em; max-width: 17ch; }
.hero .lede { margin-top: 24px; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 20px; border-radius: 6px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border: 1px solid var(--accent); }
.btn--fill { background: var(--accent); color: var(--accent-ink); }
.btn--fill:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--line { color: var(--accent); background: var(--surface); border-color: var(--accent-line); }
.btn--line:hover { background: var(--accent-wash); border-color: var(--accent); }

/* The session log: the product's own working screen, framed like a window. */
.logwrap { margin-top: 64px; }
.log { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.log__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 16px; background: var(--accent); color: var(--accent-ink); font-size: 0.875rem; }
.log__head strong { font-weight: 600; font-size: 0.9375rem; }
.log__scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
th, td { height: 38px; padding: 0 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { height: 34px; font-size: 0.75rem; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-bottom-color: var(--line-2); }
td { color: var(--ink); }
td:first-child { font-weight: 500; }
th.num, td.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
td.sent { color: var(--accent); font-weight: 700; background: var(--accent-wash); }
.log figcaption { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.log figcaption b { color: var(--accent); font-weight: 700; }
/* The AI-assisted note hangs from the log's lower edge on a short leader. */
.read { position: relative; display: flex; gap: 14px; align-items: flex-start; max-width: 360px; margin: 20px 0 0 auto; padding: 14px 16px; background: var(--surface); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 0.875rem; line-height: 1.45; }
.read::before { content: ""; position: absolute; top: -21px; left: 28px; width: 1px; height: 20px; background: var(--accent); }
.read svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
.read > div { min-width: 0; }
.read strong { display: block; font-weight: 600; margin-bottom: 2px; color: var(--ink); }
.read span { color: var(--ink-2); }

/* How it works: the drawing on a schematic panel.  Below 720px the panel scrolls sideways on its own. */
.flow .scroll { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 16px 12px; }
.flow svg { color: var(--ink-3); }
.flow .fl-box { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.25; }
.flow .fl-key { fill: var(--accent); stroke: var(--accent); stroke-width: 1.25; }
.flow .fl-link { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }
.flow .fl-dprp { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 0.5 4.5; stroke-linecap: round; fill: none; }
.flow .fl-label { fill: var(--ink); }
.flow .fl-label .key { fill: var(--accent-ink); }
.flow .fl-note { fill: var(--ink-2); }
.flow .fl-note .dprp { fill: var(--accent); }
.flow figcaption { margin-top: 16px; max-width: 64ch; }

/* Roles and facts: rows with a framed glyph on the left, hairlines between rows. */
.pairs { display: grid; }
.pair { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.pair:first-child { padding-block-start: 4px; }
.pair > div { min-width: 0; }
.pair svg { width: 48px; height: 48px; padding: 7px; box-sizing: border-box; color: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.pair h3 { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.005em; }
.pair .on { color: var(--ink-3); font-size: 0.8125rem; font-weight: 500; line-height: 1.5; margin-top: 2px; }
.pair p { color: var(--ink-2); font-size: 1rem; margin-top: 4px; max-width: 60ch; }
.pair .on + p { margin-top: 6px; }

/* Screenshots: product shots on a quiet mat; the three phones side by side in a wider row at desk width. */
.shots { display: grid; gap: var(--gap-block); }
.wrap--phones { max-width: 1000px; margin-bottom: var(--gap-block); }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.dots { display: none; }
.shot { display: grid; gap: 12px; align-content: start; }
.frame { background: var(--mat); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.frame img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-2); background: var(--surface); }
.shot--wide .frame { padding: 12px; }
.shot--wide .frame img { border-radius: 4px; }
.shot figcaption { padding-inline: 2px; }

/* Getting started */
.start { background: var(--surface); border-top: 1px solid var(--line); padding-block: 80px; }
.start h2 { margin-bottom: 24px; }
.start p { color: var(--ink-2); max-width: 62ch; }
.start p + p { margin-top: 16px; }
.contact { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 32px; }
.contact code { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; min-width: 0; font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 16px; user-select: all; overflow-wrap: anywhere; }
.copy { min-height: 44px; padding-inline: 18px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.copy:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.copy[data-done="true"] { background: var(--accent-wash); color: var(--accent); }

footer { border-top: 1px solid var(--line); }
footer .wrap { padding-block: 24px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--ink-3); font-size: 0.875rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
footer a { color: var(--ink-3); text-decoration: none; }
footer a:hover { color: var(--accent); }

@media (max-width: 719.98px) {
  body { --gap-section: 72px; --gap-head: 24px; }
  .hero { padding-block-start: 56px; }
  .hero h1 { font-size: 2.5rem; }
  .flow .scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .flow .scroll svg { width: 800px; min-width: 800px; max-width: none; }
}
@media (max-width: 559.98px) {
  body { --gap-section: 64px; --gap-block: 32px; }
  .hero { padding-block-start: 40px; }
  .hero h1 { font-size: 2.125rem; line-height: 1.1; letter-spacing: -0.022em; }
  .hero .lede { font-size: 1.0625rem; }
  .logwrap { margin-top: 40px; }
  .band h2, .start h2 { font-size: 1.5rem; }
  th, td { padding: 0 8px; }
  th:first-child, td:first-child { padding-left: 12px; }
  th:last-child, td:last-child { padding-right: 12px; }
  th { white-space: normal; line-height: 1.25; height: 40px; }
  .read { max-width: none; margin-left: 0; }
  .frame { padding: 12px; }
  .shot--wide .frame { padding: 8px; }
  .pair { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .pair svg { width: 40px; height: 40px; padding: 5px; }
  .start { padding-block: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .copy, .top nav a, footer a { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
}

/* Who uses it: the roles grouped under the app each group uses. */
.pairs .group { margin: 0; padding: 28px 0 8px; font-weight: 600; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--ink-3); }
.pairs .group:first-child { padding-top: 16px; }
.pairs .group span { font-weight: 400; color: var(--ink-3); }

/* The phones at full height in a device bezel, so they read at once as a phone. */
.frame--phone { background: var(--bezel); border: 0; border-radius: 40px; padding: 12px; max-width: 300px; margin-inline: auto; box-shadow: 0 0 0 1px var(--bezel-edge), 0 1px 2px rgba(0,0,0,0.12), 0 12px 32px rgba(20,30,45,0.12); }
.frame--phone img { border-radius: 30px; box-shadow: none; }
.shot--phone figcaption { text-align: center; }

/* On a phone: one screen at a time.  Swipe left or right, or let it turn every few seconds; the dots say which one shows. */
@media (max-width: 719.98px) {
  .phones { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phones > .shot { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding-inline: 4px; box-sizing: border-box; }
  .frame--phone { max-width: 280px; }
  .dots { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
  .dot { width: 32px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; border-radius: 16px; }
  .dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--line-2); }
  .dot[aria-current="true"]::before { width: 22px; background: var(--accent); }
}
@media (max-width: 719.98px) and (prefers-reduced-motion: no-preference) {
  .dot::before { transition: width 200ms ease, background-color 200ms ease; }
}