/* huru atoms: small reusable pieces extracted from "huru Identity Board 2".
   Values are the board's own. No page layout lives here; sections are composed from these.
   Not yet rendered or visually checked. See DESIGN.md. */

:root {
  --bg: #F5F6F8;
  --navy: #0B1437;
  --ink: var(--navy);
  --muted: #4A557C;
  --muted-2: #8D97B8;
  --rule: #C4CBDD;
  --tone: #E2E7F1;
  --tone-hi: #F3F5FA;
  --accent: #12B5A6;
  --band-from: #0E1A4A;
  --band-to: #070D26;
  --band-ink: #F5F6F8;
  --band-muted: #8794C2;
  --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --r-card: 10px;   /* Refined corners, chosen Oct 2026 (was 20px) */
  --r-panel: 14px;  /* Refined corners, chosen Oct 2026 (was 28px) */
  --r-pill: 999px;
  --gutter: 48px;
  --hover-shadow: 0 10px 24px rgba(74, 85, 124, .32);
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-display); line-height: 1.45; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; margin: 0; }
h1, h2 { line-height: .9; letter-spacing: -.065em; }
h3 { line-height: 1; letter-spacing: -.045em; }
.soft { color: var(--muted-2); font-weight: 500; }
.lead { font-size: 17px; color: var(--muted); max-width: 22.5rem; }

/* dot: teal, tiny */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* tag */
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--rule); padding: 9px 16px; border-radius: var(--r-pill); }

/* buttons: hover reverses the colours and adds a lighter drop shadow */
.btn { display: inline-block; text-decoration: none; font-size: 15px; font-weight: 500; padding: 15px 26px; border-radius: var(--r-pill); border: 1px solid var(--navy); color: var(--navy); background: transparent; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.btn.solid { background: var(--navy); color: var(--bg); }
.btn.solid:hover, .btn.solid:focus-visible { background: var(--bg); color: var(--navy); box-shadow: var(--hover-shadow); }
.btn:not(.solid):hover, .btn:not(.solid):focus-visible { background: var(--navy); color: var(--bg); box-shadow: var(--hover-shadow); }

/* THE PILL: the supplied Clic EEG sensor outline, horizontal, 2.2585:1.
   Inline assets/clic-sensor-pill-horizontal.svg once in the page (it defines #sensorPill). */
:root { --pill-ar: 2.2585; --bleed: 25%; }
.pill-stage, .pill-photo, .edge-chip { aspect-ratio: var(--pill-ar); clip-path: url(#sensorPill); }

/* pill stage: pale lilac with a lit centre */
.pill-stage { background: radial-gradient(47% 68% at 40% 40%, var(--tone-hi) 0%, transparent 100%), var(--tone); }

/* large pills enter from one side and are cut flat by the page edge.
   The parent section must clip overflow (overflow: clip). Size the pill from the section width. */
.bleed-right { position: absolute; right: 0; transform: translateX(var(--bleed)); }
.bleed-left  { position: absolute; left: 0;  transform: translateX(calc(-1 * var(--bleed))); }

/* photo pill: on the pale tone, never navy */
.pill-photo { position: relative; overflow: hidden; background: var(--tone); }
.pill-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 28%; }

/* rounded photo with a pale pill stage behind it (photos that do not suit the pill crop) */
.photo-frame { position: relative; border-radius: var(--r-panel); overflow: hidden; background: var(--tone); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* product chip: a whole pill with the sensor image, name label and teal dot. No border, no shadow. */
.edge-chip { position: absolute; z-index: 3; width: 360px; display: flex; align-items: center; gap: 20px; padding: 0 28px 0 24px; background: var(--tone); color: var(--navy); }
.edge-chip img { width: 158px; height: auto; flex: none; }
.edge-chip b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.edge-chip .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* sensor: floating product shadow */
.sensor-float { height: auto; filter: drop-shadow(0 26px 22px rgba(11, 20, 55, .28)); }

/* call-out: hairline ending in a teal dot, then h3 and a short paragraph */
.call { display: flex; flex-direction: column; gap: 14px; }
.call .line-row { display: flex; align-items: center; gap: 12px; }
.call .line-row i { flex: 1; height: 1px; background: var(--rule); }
.call .line-row .end { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.call h3 { font-size: 38px; }
.call p { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }
/* left of product: dot at the right end (default). right of product: use .call.right */
.call.right .line-row { flex-direction: row-reverse; }

/* data section: on the lilac, navy text, charts multiplied onto it */
.data-band { border-radius: var(--r-panel); background: var(--tone); color: var(--navy); padding: 48px 40px; display: flex; flex-direction: column; gap: 44px; }
.data-band .soft { color: var(--muted); }
.data-band .tag { border-color: color-mix(in srgb, var(--navy) 35%, var(--tone)); }
/* chart: its own card (the image carries its rounded border) with the teal glow */
.data-band .chart img { display: block; width: min(100%, 1180px); height: auto; margin: 0 auto; border-radius: var(--r-card); box-shadow: 0 5px 14px -2px rgba(18, 181, 166, .85), 0 1px 4px rgba(18, 181, 166, .6); }
/* filled cards: colours reverse on hover, lighter-navy shadow, no teal */
.data-card { background: var(--tone-hi); color: var(--navy); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; transition: background .2s, color .2s, box-shadow .2s; }
.data-card .num { align-self: flex-start; font-size: 12px; font-weight: 600; background: var(--navy); color: var(--tone); padding: 6px 12px; border-radius: var(--r-pill); transition: background .2s, color .2s; }
.data-card h3 { font-size: 38px; }
.data-card p { font-size: 14px; color: var(--muted); margin-top: 10px; transition: color .2s; }
.data-card:hover { background: var(--navy); color: var(--bg); box-shadow: var(--hover-shadow); }
.data-card:hover .num { background: var(--bg); color: var(--navy); }
.data-card:hover p { color: var(--band-muted); }
/* unfilled case-study cards: lighter shadow only */
.case-card { transition: box-shadow .2s; }
.case-card:hover { box-shadow: var(--hover-shadow); }

/* hero headline only: teal gradient on the second phrase, solid teal full stop. Not used on any other headline. */
.hero-grad { background: linear-gradient(100deg, #8D97B8 0%, #5FA9B8 38%, #12B5A6 72%, #0B7F76 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 10px 22px rgba(18, 181, 166, .40)); }
.hero-grad .fstop { -webkit-text-fill-color: var(--accent); color: var(--accent); }

/* footer / CTA band: the only dark navy surface */
.cta-band { border-radius: var(--r-panel); background: linear-gradient(180deg, var(--band-from), var(--band-to)); color: var(--band-ink); padding: 48px 40px; }
.cta-band .soft { color: var(--band-muted); }
.cta-band .tag { border-color: rgba(255, 255, 255, .3); }
.cta-band .btn.solid { background: var(--bg); color: var(--navy); border-color: var(--bg); }
.cta-band .btn.solid:hover { background: transparent; color: var(--bg); box-shadow: 0 10px 24px rgba(135, 148, 194, .28); }

/* "Image needed" label for stand-in photos */
.need { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; background: rgba(245, 246, 248, .92); color: var(--navy); font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill); }