/* ----------------------------------------------------------------------------
   Orthoticon — public landing page.

   Self-contained on purpose, the same way Orthoticon.Learn is: this folder has
   to be servable (or openable) on its own, so it carries its own copy of the
   design tokens rather than reaching into the app's stylesheet. The values are
   the app's — Clinical White and Clinical Blue — so the page and the product
   read as one thing.

   Deliberately says nothing about what the app does. It is a placeholder while
   the product is finished, not a feature page.
---------------------------------------------------------------------------- */

:root {
  --bg: #eef2f6;
  --ink: #172029;
  --muted: #5d6b78;
  --line: #e3e9f0;
  --panel: #ffffff;
  --panel-sunken: #f4f7fb;
  --accent: #1f74c4;
  --accent-quiet: #e4eff9;
  --accent-ink: #0f4c86;
  --accent-shadow: rgba(31, 116, 196, 0.22);
  --hover-border: #b7c3cf;
  --hover-bg: #eef5fb;
}

:root[data-theme="dark"] {
  --bg: #171c22;
  --ink: #e7edf2;
  --muted: #93a1ad;
  --line: #2a323b;
  --panel: #1f262e;
  --panel-sunken: #242c35;
  --accent: #5aa8ec;
  --accent-quiet: #1b3450;
  --accent-ink: #bcdcf8;
  --accent-shadow: rgba(90, 168, 236, 0.30);
  --hover-border: #3a444f;
  --hover-bg: #22303d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a { color: inherit; }

/* ---- Header: nothing but the theme switch, same key as the app ---- */
.top {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px 0;
}

.theme-toggle {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--ink);
}

/* ---- The card ---- */
.stage {
  display: grid;
  place-items: center;
  padding: 32px 20px 48px;
}

.card {
  width: min(560px, 100%);
  padding: 44px 40px 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(23, 32, 41, 0.04), 0 12px 32px rgba(23, 32, 41, 0.06);
  text-align: center;
}

:root[data-theme="dark"] .card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* The insole outline the app's start-up loader draws, at landing size, so the
   first thing a visitor sees is the same mark the product opens with. */
.mark {
  width: 64px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}

.mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1250" normalizes the outline, so the dash maths below survives
     the shape being swapped. Same trick as .load-insole in the app. */
  stroke-dasharray: 1250;
  animation: insole-draw 3.4s ease-in-out infinite;
}

@keyframes insole-draw {
  0%   { stroke-dashoffset: 1250; }
  42%  { stroke-dashoffset: 0; }
  58%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1250; }
}

.wordmark {
  margin: 0;
  font-size: 40px;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* "Ortho" in the accent, the rest in ink — the split the loader word uses. */
.wordmark span { color: var(--accent); }

.tagline {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--accent-quiet);
  box-shadow: inset 0 0 0 1px var(--accent-shadow);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

.blurb {
  max-width: 40ch;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.contact {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.contact a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.contact a:hover { border-bottom-color: currentColor; }

/* ---- Footer ---- */
.foot {
  padding: 0 20px 24px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 480px) {
  .card { padding: 34px 24px 30px; }
  .wordmark { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .mark path { animation: none; stroke-dashoffset: 0; }
  .status .dot { animation: none; }
}