/* aarvisystems.com (task 0.14). Same colours and font as the app (task
   2.15): made for older eyes, large text, high contrast. Green means
   all good, amber means a limit to know about. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #F6F4EF;
  --bg-alt: #ECE8E0;
  --card: #FFFFFF;
  --text: #1B1F24;
  --muted: #3F4750;
  --border: #DAD6CE;
  --accent: #0B6B5C;
  --accent-hover: #08493F;
  --on-accent: #FFFFFF;
  --ok-bg: #E3F2EE;
  --warn: #9A4A00;
  --warn-bg: #FDEBD3;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --bg-alt: #1A1D22;
    --card: #1C2026;
    --text: #F1F3F5;
    --muted: #C3CBD3;
    --border: #2E343C;
    --accent: #6FD3BC;
    --accent-hover: #9BE3D2;
    --on-accent: #0B1F1B;
    --ok-bg: #10302A;
    --warn: #F2B266;
    --warn-bg: #3A2710;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.3rem; color: var(--text); max-width: 40em; }
.small { font-size: 1rem; color: var(--muted); }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 2rem; } }
.narrow { max-width: 46rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--card); padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* Header and footer */
.top { border-bottom: 1px solid var(--border); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.35rem; }
.brand svg { color: var(--accent); }
.top nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.top nav a { color: var(--text); font-weight: 700; padding: 0.5rem 0; }

.foot { border-top: 1px solid var(--border); background: var(--bg-alt); margin-top: 2rem; }
.foot-in { padding-top: 2rem; padding-bottom: 2rem; }
.foot-in > p:first-child { max-width: 44em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem; font-weight: 700; }
.foot nav a { padding: 0.25rem 0; overflow-wrap: anywhere; }

/* Sections */
.hero { padding: 3.5rem 0 3rem; }
.band { padding: 3rem 0; }
.band.alt { background: var(--bg-alt); }
.two { display: grid; gap: 2rem 3rem; }
@media (min-width: 52rem) { .two { grid-template-columns: 1fr 1fr; } }

.status {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--warn-bg); color: var(--text);
  border: 2px solid var(--warn); border-radius: 999px;
  padding: 0.35rem 1rem; font-weight: 700; font-size: 1rem;
}
.status .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--warn); flex: none; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.6rem 1.4rem;
  border: 2px solid var(--accent); border-radius: 0.9rem;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; text-decoration: none; overflow-wrap: anywhere; text-align: center;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button.ghost { background: transparent; color: var(--accent); }
.button.ghost:hover { background: var(--ok-bg); color: var(--accent); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.5rem; }
.card p:last-child { margin-bottom: 0; }
.card.warn { border: 2px solid var(--warn); background: var(--warn-bg); }

.flow, .limits { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .flow { grid-template-columns: repeat(3, 1fr); }
  .limits { grid-template-columns: repeat(2, 1fr); }
}
.icon { width: 3rem; height: 3rem; color: var(--accent); margin-bottom: 0.75rem; }

.gestures { margin: 0 0 1rem; }
.gestures div { display: grid; gap: 0.15rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
@media (min-width: 30rem) { .gestures div { grid-template-columns: 11rem 1fr; } }
.gestures dt { font-weight: 700; }
.gestures dd { margin: 0; }

.ticks { padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 2rem; margin-bottom: 0.75rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.45em;
  width: 0.9rem; height: 0.5rem; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg);
}

/* Privacy policy */
.prose h2 { margin-top: 2rem; }
.prose ul:not(.ticks) { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.5rem; }
.table { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 1.05rem; }
th, td { text-align: left; vertical-align: top; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { background: var(--bg-alt); }

/* On a phone, each row of a table stacks instead of scrolling sideways. */
@media (max-width: 40rem) {
  table { min-width: 0; }
  thead { position: absolute; left: -999px; }
  tr { display: block; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); }
  tbody tr:last-child { border-bottom: 0; }
  th, td { display: block; padding: 0.15rem 0; border: 0; }
  td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* ------------------------------------------------------------------
   Life and motion (task 0.14 follow-up). CSS only: the site has no
   JavaScript (see _headers). Every animation sits behind
   prefers-reduced-motion: no-preference, so people who ask their
   device for less motion get a still page that says the same thing.
   ------------------------------------------------------------------ */

:root { --sos: #B3261E; --on-sos: #FFFFFF; --ok: #0B6B5C; --shadow: 0 1px 2px rgb(27 31 36 / 6%), 0 8px 24px rgb(27 31 36 / 8%); }
@media (prefers-color-scheme: dark) {
  :root { --sos: #C4372E; --ok: #4FC3A9; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%); }
}

/* Hero: text beside the picture, on a soft glow */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  z-index: -1;
}
.hero::after {
  content: ""; position: absolute; inset: auto auto -30% -15%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--warn) 14%, transparent), transparent);
  z-index: -1;
}
.hero-in { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .hero-in { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }
.hero-art { max-width: 34rem; width: 100%; justify-self: center; }

/* The picture */
.art { width: 100%; height: auto; overflow: visible; }
.art .link line { stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0.6; }
.art-label { fill: var(--muted); font-size: 15px; font-weight: 700; }
.art-small { fill: var(--text); font-size: 14px; font-weight: 700; }
.art .cord { fill: none; stroke: var(--muted); stroke-width: 3; }
.art .pendant { fill: var(--card); stroke: var(--text); stroke-width: 3; }
.art .press { fill: var(--sos); }
.art .ring { fill: none; stroke: var(--sos); stroke-width: 3; opacity: 0; }
.art .phone { fill: var(--card); stroke: var(--text); stroke-width: 3; }
.art .screen { fill: var(--bg); }
.art .tick-bg { fill: var(--ok); }
.art .tick { fill: none; stroke: var(--card); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art .alert-bg { fill: var(--sos); }
.art .alert-text { fill: var(--on-sos); font-size: 12px; font-weight: 700; }
.art .ok-bg { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 2; }
.art .ok-text { fill: var(--text); font-size: 12px; font-weight: 700; }
.art .dot { fill: var(--sos); opacity: 0; }
/* Still picture: the alert has arrived. */
.art .ok { opacity: 0; }
.art .ring, .art .dot, .art .fam { transform-box: fill-box; transform-origin: center; }

/* The step numbers and the marks on the limits */
.num {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.6rem;
}
.flow .card { position: relative; }
.flow .icon { position: absolute; top: 1.4rem; right: 1.4rem; width: 2.75rem; height: 2.75rem; margin: 0; opacity: 0.9; }
@media (min-width: 52rem) {
  .flow li:not(:last-child)::after {
    content: ""; position: absolute; top: 2.65rem; right: -0.85rem; width: 0.7rem; height: 0.7rem;
    border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); transform: rotate(45deg);
  }
}
.marks .card { position: relative; padding-left: 4.25rem; }
.marks .card::before {
  content: "!"; position: absolute; left: 1.4rem; top: 1.45rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--warn); color: var(--card); font-weight: 700; font-size: 1.15rem;
}

/* Cards and buttons */
.card { box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.button { transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }

.big { font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 700; line-height: 1; color: var(--accent); margin-bottom: 0.4rem; }
.big span { font-size: 0.35em; color: var(--muted); }

/* The closing band */
.cta { background: var(--accent); color: var(--on-accent); }
.cta h2, .cta .lead { color: var(--on-accent); }
.cta .button { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.cta .button:hover { background: transparent; color: var(--on-accent); }
.cta + .foot { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .status .dot { animation: breathe 2.4s ease-in-out infinite; }

  .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(27 31 36 / 8%), 0 16px 36px rgb(27 31 36 / 12%); }
  .button:hover { transform: translateY(-2px); }

  /* The picture plays an alert, every 9 s */
  .art .ring { animation: ring 9s ease-out infinite; }
  .art .ring2 { animation-delay: 0.35s; }
  .art .press { animation: press 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .art .dot1 { animation: dot1 9s ease-in-out infinite; }
  .art .dot2 { animation: dot2 9s ease-in-out infinite; }
  .art .dot3 { animation: dot3 9s ease-in-out infinite; }
  .art .sent { animation: sent 9s ease infinite; }
  .art .alert { animation: alert 9s ease infinite; }
  .art .ok { animation: ok 9s ease infinite; }
  .art .fam { animation: buzz 9s ease-in-out infinite; }

  /* Sections rise into view as you scroll (reveal.js adds .reveal-on
     to <html>, then .in to each part as it comes into view). Without
     the script, nothing here applies and everything is visible. */
  .reveal-on :is(.band h2, .band .lead, .card, .gestures > div, .ticks li, .big, .cta .button, .prose table) {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .reveal-on :is(.band h2, .band .lead, .card, .big, .cta .button, .prose table):not(.in) {
    opacity: 0; transform: translateY(2rem);
  }
  .reveal-on :is(.gestures > div, .ticks li):not(.in) { opacity: 0; transform: translateX(-1.5rem); }
  .reveal-on .big:not(.in) { transform: scale(0.85); }
  .reveal-on .card.in:hover { transform: translateY(-4px); }

  /* The hero comes in once, on load */
  .hero-text > * { animation: rise 0.7s ease-out both; }
  .hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .hero-text > :nth-child(3) { animation-delay: 0.16s; }
  .hero-text > :nth-child(4) { animation-delay: 0.24s; }
  .hero-art { animation: rise 0.9s 0.2s ease-out both; }
}

@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.55; } }

@keyframes press { 0%, 4%, 12%, 100% { transform: scale(1); } 7% { transform: scale(0.8); } }
@keyframes ring {
  0%, 6% { opacity: 0; transform: scale(1); }
  8% { opacity: 0.8; transform: scale(1); }
  22% { opacity: 0; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(2.1); }
}
@keyframes dot1 {
  0%, 10% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; transform: translate(0, 0); }
  24% { opacity: 1; transform: translate(84px, 10px); }
  26%, 100% { opacity: 0; transform: translate(84px, 10px); }
}
@keyframes sent { 0%, 24% { opacity: 0; } 28%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot2 {
  0%, 29% { opacity: 0; transform: translate(0, 0); }
  31% { opacity: 1; transform: translate(0, 0); }
  43% { opacity: 1; transform: translate(100px, -80px); }
  45%, 100% { opacity: 0; transform: translate(100px, -80px); }
}
@keyframes dot3 {
  0%, 29% { opacity: 0; transform: translate(0, 0); }
  31% { opacity: 1; transform: translate(0, 0); }
  43% { opacity: 1; transform: translate(100px, 68px); }
  45%, 100% { opacity: 0; transform: translate(100px, 68px); }
}
@keyframes alert { 0%, 43% { opacity: 0; } 46%, 68% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes ok { 0%, 68% { opacity: 0; } 71%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes buzz {
  0%, 45%, 54%, 100% { transform: rotate(0); }
  47% { transform: rotate(-2.5deg); }
  49% { transform: rotate(2.5deg); }
  51% { transform: rotate(-1.5deg); }
}

/* ------------------------------------------------------------------
   Coming-soon page (task 0.18): what main publishes while
   site.config.json has "comingSoon": true.
   ------------------------------------------------------------------ */
.soon-body { min-height: 100vh; display: grid; place-items: center; position: relative; overflow-x: hidden; }
.soon-body::before {
  content: ""; position: fixed; inset: -30% -20% auto auto; width: 80vmax; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
}
.soon-body::after {
  content: ""; position: fixed; inset: auto auto -35% -25%; width: 70vmax; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--warn) 12%, transparent), transparent);
}
.soon { max-width: 38rem; padding: 3rem 1rem; text-align: center; display: grid; justify-items: center; }
.soon h1 { font-size: clamp(2.75rem, 10vw, 4.5rem); margin: 0.25em 0 0.3em; }
.soon .lead { margin-inline: auto; }
.soon .status { margin-top: 1.5rem; }
.soon .small { margin-top: 2.5rem; }
.soon-mark { position: relative; width: 5.5rem; height: 5.5rem; color: var(--accent); }
.soon-mark svg { position: relative; width: 100%; height: 100%; }
.soon-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .soon-ring { animation: soon-pulse 3.2s ease-out infinite; }
  .soon-ring2 { animation-delay: 1.6s; }
  .soon > * { animation: rise 0.8s ease-out both; }
  .soon > :nth-child(2) { animation-delay: 0.1s; }
  .soon > :nth-child(3) { animation-delay: 0.18s; }
  .soon > :nth-child(4) { animation-delay: 0.26s; }
  .soon > :nth-child(n+5) { animation-delay: 0.34s; }
}
@keyframes soon-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }