/* Hailbright Ltd — site styles. Mobile-first. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F5F7F6;
  --surface: #FFFFFF;
  --mist: #E7EEEB;
  --ink: #13221F;
  --ink-2: #4A5B57;
  --line: #CFDAD6;
  --spruce: #1E5A4C;
  --on-spruce: #FFFFFF;
  --link: #1E5A4C;
  --band: #1E5A4C;
  --band-ink: #F2F7F5;
  --band-ink-2: #C3D9D2;
  --amber: #C8871A;
  --taken: #1E5A4C;
  --missed: #C8871A;
  --live-bg: #DCEFE4;
  --live-ink: #1F6A3F;
  --dev-bg: #F6EAD3;
  --dev-ink: #86540A;
  --plan-bg: transparent;
  --plan-ink: #4A5B57;
  --focus: #C8871A;

  --mint: #DDECE6;
  --mint-2: #BCD6CC;
  --bezel: #13221F;
  --bezel-edge: transparent;
  --screen: #FFFFFF;
  --chip-bg: #FFFFFF;
  --shadow: 0 22px 44px -22px rgba(19, 34, 31, 0.45);
  --c-swim: #3A7CC3;
  --c-piano: #C2527A;
  --c-beav: #C8871A;
  --c-school: #7A5FC4;
  --c-foot: #2F8A57;
  --font: "Familjen Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 70rem;
  --gutter: clamp(16px, 5vw, 40px);
  --radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1917;
    --surface: #16231F;
    --mist: #1A2A26;
    --ink: #E6EEEB;
    --ink-2: #A3B3AE;
    --line: #2A3B36;
    --spruce: #7CC2AE;
    --on-spruce: #0F1917;
    --link: #8FD0BD;
    --band: #173F36;
    --band-ink: #F2F7F5;
    --band-ink-2: #B5CFC7;
    --amber: #E0A23A;
    --taken: #7CC2AE;
    --missed: #E0A23A;
    --live-bg: #183A2A;
    --live-ink: #8FDBAE;
    --dev-bg: #3A2C12;
    --dev-ink: #F0C470;
    --plan-ink: #A3B3AE;
    --mint: #15302A;
    --mint-2: #24473F;
    --bezel: #040908;
  --bezel-edge: #34524A;
    --bezel-edge: #34524A;
    --screen: #16231F;
    --chip-bg: #1A2A26;
    --shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.75);
    --c-swim: #78AEEA;
    --c-piano: #EB8BAE;
    --c-beav: #E0A23A;
    --c-school: #A992F2;
    --c-foot: #5EC48E;
    --focus: #E0A23A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1917;
  --surface: #16231F;
  --mist: #1A2A26;
  --ink: #E6EEEB;
  --ink-2: #A3B3AE;
  --line: #2A3B36;
  --spruce: #7CC2AE;
  --on-spruce: #0F1917;
  --link: #8FD0BD;
  --band: #173F36;
  --band-ink: #F2F7F5;
  --band-ink-2: #B5CFC7;
  --amber: #E0A23A;
  --taken: #7CC2AE;
  --missed: #E0A23A;
  --live-bg: #183A2A;
  --live-ink: #8FDBAE;
  --dev-bg: #3A2C12;
  --dev-ink: #F0C470;
  --plan-ink: #A3B3AE;
  --mint: #15302A;
  --mint-2: #24473F;
  --bezel: #040908;
  --screen: #16231F;
  --chip-bg: #1A2A26;
  --shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.75);
  --c-swim: #78AEEA;
  --c-piano: #EB8BAE;
  --c-beav: #E0A23A;
  --c-school: #A992F2;
  --c-foot: #5EC48E;
  --focus: #E0A23A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.12; margin: 0; text-wrap: balance; font-weight: 650; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--surface); color: var(--ink); padding: 8px 12px; z-index: 10;
}
.skip:focus { left: 16px; top: 16px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 650; font-size: 1.25rem; letter-spacing: -0.01em;
}
.brand svg { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: clamp(14px, 3vw, 28px); }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 340px) { .nav a[href="#about"] { display: none; } }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 18px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 0.98rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn.primary { background: var(--spruce); border-color: var(--spruce); color: var(--on-spruce); }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Hero */
.hero { padding-block: clamp(32px, 6vw, 72px) clamp(44px, 7vw, 88px); overflow: clip; }
.hero h1 { font-size: clamp(2.3rem, 5.8vw, 4rem); letter-spacing: -0.03em; font-weight: 650; margin-bottom: clamp(18px, 3vw, 36px); }
.hero-grid { display: grid; gap: clamp(20px, 4vw, 40px); align-items: center; }
.hero-copy { display: grid; gap: 24px; align-content: center; }
.lede { font-size: clamp(1.1rem, 2.4vw, 1.28rem); color: var(--ink-2); max-width: 36rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.live { background: var(--live-ink); }
.dot.dev { background: var(--amber); }
.dot.ready { background: var(--spruce); }

.app-cards { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 34rem; }
.app-card {
  display: grid; gap: 6px; align-content: start; height: 100%;
  padding: 14px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.app-card:hover { transform: translateY(-3px); border-color: var(--spruce); box-shadow: var(--shadow); text-decoration: none; }
.app-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--spruce); }
.app-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-card b { font-size: clamp(1.08rem, 2.3vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.app-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-visual { --off: 0.66; }
}

/* Hero visual: three app screens fanned out, with the scattered sources around them */
.hero-visual {
  --pw: min(41vw, 236px);
  --off: 0.62;
  position: relative;
  height: calc(var(--pw) * 2.06 + 72px);
  max-width: 100%;
}
.orb {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--pw) * 2.5); aspect-ratio: 1; max-width: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--mint) 0 58%, transparent 71%);
}
.orb::before {
  content: ""; position: absolute; inset: -14%;
  background-image: radial-gradient(var(--mint-2) 1.3px, transparent 1.6px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  opacity: 0.8;
}

.phone {
  position: absolute; left: 50%; top: 50%;
  width: var(--pw); aspect-ratio: 9 / 18.5; max-width: 100%;
  padding: calc(var(--pw) * 0.035);
  background: var(--bezel);
  border-radius: calc(var(--pw) * 0.16);
  box-shadow: 0 0 0 1px var(--bezel-edge), var(--shadow);
  container-type: inline-size;
}
.p-front { z-index: 3; transform: translate(-50%, -50%); }
.p-left  { z-index: 2; transform: translate(calc(-50% - var(--pw) * var(--off)), calc(-50% + var(--pw) * 0.1)) rotate(-8deg) scale(0.88); }
.p-right { z-index: 1; transform: translate(calc(-50% + var(--pw) * var(--off)), calc(-50% + var(--pw) * 0.1)) rotate(8deg) scale(0.88); }

.screen {
  height: 100%; overflow: hidden;
  background: var(--screen); color: var(--ink);
  border-radius: calc(var(--pw) * 0.125);
  padding: 8cqw 6.5cqw 6cqw;
  display: flex; flex-direction: column; gap: 3.6cqw;
  font-size: 5.4cqw; line-height: 1.25;
}
.scr-top { display: flex; justify-content: space-between; align-items: center; font-size: 5cqw; }
.scr-app { display: inline-flex; align-items: center; gap: 2cqw; font-weight: 700; }
.scr-app::before { content: ""; width: 5.4cqw; height: 5.4cqw; border-radius: 1.6cqw; background: var(--spruce); }
.scr-app.t::before { background: var(--amber); }
.scr-app.h::before { background: transparent; border: 1.5px solid var(--ink-2); }
.scr-time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scr-title { font-size: 9.5cqw; font-weight: 700; letter-spacing: -0.02em; margin-top: 1.5cqw; }

.scr-item { display: grid; grid-template-columns: 12cqw 1fr; gap: 2.5cqw; padding: 3.4cqw; background: var(--paper); border-radius: 4cqw; }
.scr-item .d { font-weight: 700; color: var(--spruce); font-size: 5cqw; }
.scr-item b { display: block; font-size: 5.4cqw; font-weight: 650; }
.scr-item small { display: block; font-size: 4.6cqw; color: var(--ink-2); }
.scr-tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: 3.5cqw; border-top: 1px solid var(--line); }
.scr-tabs i { width: 7cqw; height: 7cqw; border-radius: 2.2cqw; background: var(--line); }
.scr-tabs i.on { background: var(--spruce); }

/* KidHub phone: colour-coded clubs */
.c-swim { --cc: var(--c-swim); }
.c-piano { --cc: var(--c-piano); }
.c-beav { --cc: var(--c-beav); }
.c-school { --cc: var(--c-school); }
.c-foot { --cc: var(--c-foot); }
.scr-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.4cqw; text-align: center; font-size: 4.4cqw; font-weight: 700; color: var(--ink-2); }
.scr-days span { display: grid; justify-items: center; align-content: start; gap: 1.2cqw; padding: 2cqw 0 2.2cqw; border-radius: 3cqw; min-height: 11cqw; }
.scr-days span.today { background: var(--spruce); color: var(--on-spruce); }
.scr-days i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--cc); }
.scr-club { display: flex; align-items: center; gap: 3cqw; padding: 2.8cqw 3cqw; border-radius: 4cqw; border-left: 1.6cqw solid var(--cc); background: color-mix(in srgb, var(--cc) 12%, var(--screen)); }
.scr-club .ci { flex: none; width: 9.5cqw; height: 9.5cqw; border-radius: 3cqw; display: grid; place-items: center; background: var(--cc); color: var(--screen); }
.scr-club .ci svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scr-club b { display: block; font-size: 5.4cqw; font-weight: 700; }
.scr-club small { display: block; font-size: 4.1cqw; color: var(--ink-2); }
.scr-ready { display: flex; align-items: center; gap: 2.5cqw; padding: 2.8cqw 3cqw; border-radius: 4cqw; background: var(--live-bg); color: var(--live-ink); font-weight: 700; font-size: 4.7cqw; }
.ok-dot { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--live-ink); color: var(--paper); }
.ok-dot svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scr-ready .ok-dot { width: 7cqw; height: 7cqw; }
.scr-ready .ok-dot svg { width: 4.6cqw; height: 4.6cqw; }

.ring { position: relative; width: 64cqw; aspect-ratio: 1; max-width: 100%; margin: 1cqw auto 2cqw; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.4; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 93 100; }
.ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 4.4cqw; color: var(--ink-2); }
.ring b { display: block; font-size: 12cqw; color: var(--ink); letter-spacing: -0.03em; line-height: 1.05; }
.scr-row { display: flex; align-items: center; gap: 3cqw; padding: 3.2cqw 3.6cqw; background: var(--paper); border-radius: 4cqw; }
.scr-row span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scr-row b { flex: 1; font-weight: 650; }
.scr-row i { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; border: 1.5px solid var(--line); }
.scr-row i.ok { background: var(--spruce); border-color: var(--spruce); }

.tile { display: grid; gap: 0.8cqw; padding: 3.6cqw 4cqw; background: var(--paper); border-radius: 4cqw; }
.tile small { font-size: 4.4cqw; color: var(--ink-2); }
.tile b { font-size: 7cqw; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.spark { display: flex; align-items: flex-end; gap: 1.6cqw; height: 9cqw; margin-top: 1cqw; }
.spark i { flex: 1; background: var(--spruce); opacity: 0.75; border-radius: 1cqw; }
.spark i:nth-child(1) { height: 55%; }
.spark i:nth-child(2) { height: 70%; }
.spark i:nth-child(3) { height: 48%; }
.spark i:nth-child(4) { height: 62%; }
.spark i:nth-child(5) { height: 52%; }
.spark i:nth-child(6) { height: 45%; }

.chip-float {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 8px;
  background: var(--chip-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
}
.chip-float svg { width: 16px; height: 16px; fill: none; stroke: var(--spruce); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c1 { top: 3%; left: 0; }
.c2 { top: 0; right: 3%; }
.c3 { bottom: 15%; left: 0; }
.c4 { bottom: 3%; right: 2%; }
@media (min-width: 600px) {
  .chip-float { font-size: 0.85rem; padding: 8px 14px 8px 10px; gap: 8px; }
  .chip-float svg { width: 18px; height: 18px; }
}

/* Load moment: the screens fan out from a stack, the dose ring fills, then everything floats gently. */
@media (prefers-reduced-motion: no-preference) {
  .p-left  { animation: fan-left 0.9s cubic-bezier(.2, .8, .2, 1) 0.15s both, float 7s ease-in-out 1.2s infinite; }
  .p-right { animation: fan-right 0.9s cubic-bezier(.2, .8, .2, 1) 0.15s both, float 7s ease-in-out 2.4s infinite; }
  .p-front { animation: float 7s ease-in-out 0.6s infinite; }
  .ring-fg { animation: ring-fill 1.6s cubic-bezier(.2, .8, .2, 1) 0.7s both; }
  .chip-float { animation: drift 7s ease-in-out infinite; }
  .c2 { animation-delay: -2s; }
  .c3 { animation-delay: -4s; }
  .c4 { animation-delay: -5.5s; }
  .app-card { animation: rise 0.7s cubic-bezier(.2, .8, .2, 1) both; }
  .app-cards li:nth-child(2) .app-card { animation-delay: 0.1s; }
  .app-cards li:nth-child(3) .app-card { animation-delay: 0.2s; }
  .toast .bell svg { animation: ring-bell 5s ease-in-out 1s infinite; transform-origin: 50% 20%; }
}
@keyframes fan-left  { from { transform: translate(-50%, -50%) rotate(0deg) scale(0.9); } }
@keyframes fan-right { from { transform: translate(-50%, -50%) rotate(0deg) scale(0.9); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes ring-fill { from { stroke-dasharray: 0 100; } }
@keyframes rise { from { transform: translateY(10px); } }
@keyframes ring-bell { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: 14deg; } 94% { rotate: -12deg; } 97% { rotate: 6deg; } }

/* Sections */
.section { padding-block: clamp(48px, 9vw, 96px); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 5vw, 48px); max-width: 40rem; }
.section-head h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.section-head p { color: var(--ink-2); font-size: 1.08rem; }

/* Products */
.products { display: grid; gap: 0; }
.product {
  display: grid; gap: 24px;
  padding-block: clamp(28px, 5vw, 44px);
  border-top: 1px solid var(--line);
}
.product:first-child { border-top: 0; padding-top: 0; }
.product-text { display: grid; gap: 16px; align-content: start; }
.product-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.product h3 { font-size: clamp(1.7rem, 4.6vw, 2.2rem); letter-spacing: -0.02em; }
.product-line { font-size: 1.12rem; max-width: 34rem; }
.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 34rem; }
.points li { position: relative; padding-left: 22px; color: var(--ink-2); }
.points li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--spruce);
}
.note {
  font-size: 0.95rem; color: var(--ink); max-width: 34rem;
  padding: 10px 14px; background: var(--mist); border-radius: 8px;
}

.status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.live { background: var(--live-bg); color: var(--live-ink); }
.status.dev { background: var(--dev-bg); color: var(--dev-ink); }
.status.ready { background: var(--surface); color: var(--spruce); border: 1px solid var(--mint-2); }
.status.planned { background: var(--plan-bg); color: var(--plan-ink); border: 1px dashed var(--line); }


@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}

/* Example panels */
.example {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  display: grid; gap: 14px; align-content: start;
}
.example figcaption { font-size: 0.85rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 12px; }
.example figcaption span { font-weight: 600; color: var(--ink); }

.week { list-style: none; margin: 0; padding: 0; display: grid; }
.week li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 12px; padding-block: 11px; border-top: 1px solid var(--line); }
.week li:first-child { border-top: 0; padding-top: 2px; }
.week .day { font-weight: 650; color: var(--spruce); font-size: 0.95rem; }
.week .what { display: grid; font-weight: 550; }
.week small { font-size: 0.88rem; color: var(--ink-2); font-weight: 400; }

.dose-score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dose-score .num { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.dose-score .lbl { display: grid; line-height: 1.3; font-weight: 600; }
.dose-score small { color: var(--ink-2); font-weight: 400; font-size: 0.9rem; }
.dose-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.dose-grid li {
  aspect-ratio: 1; max-width: 100%; border-radius: 6px; background: var(--taken);
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 600; color: var(--on-spruce); font-variant-numeric: tabular-nums;
}
.dose-grid li.missed { background: transparent; border: 2px solid var(--missed); color: var(--missed); }
.dose-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; color: var(--ink-2); }
.dose-legend li { display: flex; gap: 8px; align-items: center; }
.dose-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dose-legend .k-taken { background: var(--taken); }
.dose-legend .k-missed { border: 2px solid var(--missed); }
.formula { font-size: 0.88rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 12px; }
.formula b { color: var(--ink); font-weight: 600; }

/* KidHub planner example */
.planner { gap: 16px; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wk-day {
  display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 1px;
  min-height: 124px; padding: 8px 3px 5px; border-radius: 12px;
  background: var(--paper); text-align: center;
}
.wk-day.today { background: var(--mint); box-shadow: inset 0 0 0 2px var(--spruce); }
.wd { font-size: 0.72rem; font-weight: 600; color: var(--ink-2); }
.dn { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev {
  align-self: end; width: 100%;
  display: grid; justify-items: center; gap: 2px;
  padding: 6px 2px 5px; border-radius: 9px; border-top: 3px solid var(--cc);
  background: color-mix(in srgb, var(--cc) 16%, var(--surface));
}
.ev svg { width: 18px; height: 18px; fill: none; stroke: var(--cc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev b { font-size: 0.68rem; font-weight: 700; line-height: 1.1; }
.ev small { font-size: 0.66rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ev.c-school { border-top-style: dashed; }
.ev-free { align-self: end; padding-bottom: 8px; font-size: 0.66rem; color: var(--ink-2); }
@media (max-width: 480px) { .ev b { display: none; } .wk { gap: 4px; } .wk-day { min-height: 104px; } .clubs { grid-template-columns: 1fr; } }

.clubs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.club { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; border-left: 4px solid var(--cc); background: color-mix(in srgb, var(--cc) 10%, var(--surface)); }
.club .ci { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--cc); color: var(--screen); }
.club .ci svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.club b { display: block; font-size: 0.95rem; }
.club small { display: block; font-size: 0.8rem; color: var(--ink-2); line-height: 1.35; }
.kit { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 0.74rem; font-weight: 600; }
.kit::before { content: "Bring: "; font-weight: 500; color: var(--ink-2); }

.toast { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--ink); color: var(--paper); }
.toast b { display: block; font-size: 0.92rem; }
.toast small { display: block; font-size: 0.82rem; opacity: 0.8; }
.toast .bell { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--amber); color: #13221F; }
.toast .bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast .ok-dot { margin-left: auto; width: 28px; height: 28px; background: var(--live-bg); color: var(--live-ink); }
.toast .ok-dot svg { width: 16px; height: 16px; }

/* HealthHub feature panel */
.product.hh { grid-template-columns: 1fr; }
.hh-panel { display: grid; background: var(--mint); border-radius: 22px; overflow: hidden; }
.hh-text { display: grid; gap: 18px; align-content: start; padding: clamp(22px, 4.5vw, 48px); }
.hh-intro { color: var(--ink-2); max-width: 36rem; }
.hh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: step; }
.hh-steps li {
  counter-increment: step;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--surface); font-size: 0.88rem; font-weight: 600;
}
.hh-steps li::before {
  content: counter(step);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--spruce); color: var(--on-spruce); font-size: 0.74rem;
}
.hh-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hh-features li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--surface); border-radius: 14px; }
.hh-features b { font-weight: 650; }
.hh-features p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.45; margin-top: 2px; }
.ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--mint); color: var(--spruce); }
.ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hh .note { background: var(--surface); }
@media (min-width: 560px) { .hh-features { grid-template-columns: 1fr 1fr; } }

.hh-photo { position: relative; margin: 0; order: -1; aspect-ratio: 4 / 3; max-width: 100%; min-height: 240px; }
.hh-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 45%; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 16px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  font-size: 0.85rem; line-height: 1.25;
}
.float-card small { display: block; color: var(--ink-2); font-size: 0.74rem; }
.float-card b { display: block; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.float-card .ico { width: 36px; height: 36px; }
.fc1 { top: 14px; left: 14px; }
.fc2 { bottom: 34px; right: 14px; }
.hh-photo figcaption { position: absolute; left: 14px; bottom: 9px; font-size: 0.72rem; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
@media (min-width: 960px) {
  .hh-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hh-photo { order: 0; aspect-ratio: auto; min-height: 100%; }
  .fc1 { top: 28px; left: 24px; }
  .fc2 { bottom: 48px; right: 24px; }
}

/* About */
.about { display: grid; gap: 36px; }
.story { display: grid; gap: 16px; align-content: start; max-width: 38rem; font-size: 1.08rem; }
.signoff {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line);
  font-weight: 600; font-size: 1rem;
}
.signoff svg { width: 28px; height: 28px; flex: none; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--line); }
.principles li { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.principles h3 { font-size: 1.12rem; }
.principles p { color: var(--ink-2); }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; }
}

/* Contact */
.contact { background: var(--band); color: var(--band-ink); padding-block: clamp(48px, 9vw, 88px); }
.contact h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.contact-inner { display: grid; gap: 18px; }
.contact p { color: var(--band-ink-2); max-width: 36rem; font-size: 1.08rem; }
.email {
  color: var(--band-ink); font-weight: 650; text-decoration: none;
  font-size: clamp(1.35rem, 6vw, 2.4rem); letter-spacing: -0.02em;
  overflow-wrap: anywhere; line-height: 1.2;
  border-bottom: 2px solid var(--band-ink-2);
}
.email:hover { border-bottom-color: var(--band-ink); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.contact .btn { border-color: var(--band-ink); color: var(--band-ink); min-height: 42px; }
.contact .btn:hover { background: var(--band-ink); color: var(--band); }
.contact .small { font-size: 0.95rem; }
.contact .small a { color: var(--band-ink); }

/* Footer: engineering-drawing title block */
.site-footer { padding-block: 36px 44px; }
.titleblock {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden;
}
.cell { display: grid; gap: 2px; align-content: start; padding: 10px 12px; background: var(--paper); min-width: 0; }
.cell .k { font-size: 0.78rem; color: var(--ink-2); }
.cell .v { font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cell .v a { color: var(--ink); }
.cell.brand-cell { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 12px; text-align: center; }
.cell.brand-cell svg { width: 64px; height: 64px; flex: none; }
.cell.brand-cell strong { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; }
.cell.wide, .cell.span-sm { grid-column: 1 / -1; }
.legal { margin-top: 16px; font-size: 0.9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legal a { color: var(--ink-2); }

@media (min-width: 760px) {
  .titleblock { grid-template-columns: 1.2fr 1fr 1fr 1.5fr; }
  .cell.brand-cell { grid-column: 1; grid-row: 1 / span 2; }
  .cell.wide { grid-column: 4; grid-row: 1 / span 2; }
  .cell.span-sm { grid-column: auto; }
}

/* Simple pages (privacy, 404) */
.page { padding-block: clamp(40px, 8vw, 80px); display: grid; gap: 18px; max-width: 42rem; }
.page h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.025em; }
.page h2 { font-size: 1.3rem; margin-top: 14px; }
.page p, .page li { color: var(--ink-2); }
.page ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.page .updated { font-size: 0.92rem; }