/* Design B shell for standalone utility pages (app hand-off, TestFlight
   opt-in, quick lock). Same light, rounded language as kickr.ca: white
   header with the Kola wordmark, a soft tray behind white rounded cards,
   Tanker headings, pill buttons. Served as-is from public/, no build step. */
@font-face { font-family: 'KB Tanker'; src: url('/fonts/tanker-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'KB Kola'; src: url('/fonts/kola-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'KB Inter'; src: url('/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'KB Inter'; src: url('/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'KB Inter'; src: url('/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'KB Inter'; src: url('/fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --u-ink: #0d1820;
  --u-body: #34474e;
  --u-muted: #5b6d73;
  --u-hair: #e4ebe9;
  --u-soft: #f1f5f3;
  --u-paper: #fefefa;
  --u-green: #075a45;
  --u-green-soft: #e8f3ef;
  --u-lime: #0b7456;
  --u-mint: #47aa86;
  --u-orange: #c4401f;
  --u-orange-soft: #fff1ec;
  --u-display: 'KB Tanker', Impact, 'Arial Narrow Bold', sans-serif;
  --u-text: 'KB Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--u-soft);
  color: var(--u-ink);
  font-family: var(--u-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 2px solid var(--u-green); outline-offset: 3px; }
::selection { background: var(--u-green); color: #fff; }
[hidden] { display: none !important; }

.u-header {
  background: #fff;
  border-bottom: 1px solid var(--u-hair);
  padding: calc(16px + env(safe-area-inset-top)) 22px 16px;
}
.u-logo {
  font-family: 'KB Kola', var(--u-text);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--u-ink);
  text-decoration: none;
}

.u-main {
  flex: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 32px 16px 56px;
}
@media (min-width: 640px) { .u-main { align-content: center; padding: 56px 24px 72px; } }

.u-card {
  width: min(100%, 560px);
  background: #fff;
  border: 1px solid var(--u-hair);
  border-radius: 28px;
  padding: 34px 26px 30px;
  box-shadow: 0 30px 70px -40px rgba(13, 24, 32, .22);
}
.u-card--wide { width: min(100%, 760px); }
@media (min-width: 640px) { .u-card { padding: 44px 40px 40px; } }

.u-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--u-orange);
}
.u-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; flex: none; }

.u-title {
  margin: 0 0 16px;
  font-family: var(--u-display);
  font-weight: 400;
  font-size: clamp(46px, 13vw, 68px);
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--u-ink);
  overflow-wrap: anywhere;
}
.u-title em { font-style: normal; color: var(--u-green); }

.u-card p { margin: 0 0 14px; font-size: 16px; color: var(--u-body); }
.u-card p strong { color: var(--u-ink); }
.u-lede { font-size: 17px !important; }
.u-muted { color: var(--u-muted) !important; font-size: 14px !important; }
.u-small { font-size: 13px !important; color: var(--u-muted) !important; }

.u-list { list-style: none; margin: 18px 0 0; padding: 18px 20px; background: var(--u-soft); border-radius: 20px; }
.u-list li { position: relative; padding-left: 18px; margin: 0 0 10px; font-size: 15px; color: var(--u-body); }
.u-list li:last-child { margin-bottom: 0; }
.u-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 99px; background: var(--u-mint); }
.u-list strong { color: var(--u-ink); }

.u-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.u-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--u-green);
  border-radius: 999px;
  background: var(--u-green);
  color: #fff;
  font: 700 15px/1.2 var(--u-text);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, opacity .14s ease;
}
.u-btn:active { transform: scale(.98); }
.u-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.u-btn--ghost { background: #fff; color: var(--u-ink); border-color: var(--u-hair); }
@media (hover: hover) {
  .u-btn:hover:not([disabled]) { background: #064c3a; }
  .u-btn--ghost:hover:not([disabled]) { background: var(--u-soft); }
}

.u-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; }
.u-link { font-size: 14px; font-weight: 600; color: var(--u-lime); text-decoration: underline; text-underline-offset: 3px; }

.u-note { margin-top: 20px; padding: 16px 18px; border-radius: 18px; font-size: 15px; line-height: 1.5; background: var(--u-soft); color: var(--u-body); }
.u-note--ok { background: var(--u-green-soft); color: var(--u-ink); }
.u-note--err { background: var(--u-orange-soft); color: var(--u-orange); }
.u-note code { font-size: 13px; overflow-wrap: anywhere; }

.u-spinner { width: 26px; height: 26px; margin: 0 0 22px; border-radius: 50%; border: 3px solid var(--u-hair); border-top-color: var(--u-green); animation: u-spin .8s linear infinite; }
@keyframes u-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .u-spinner { animation: none; } .u-btn { transition: none; } }

.u-footer {
  padding: 0 24px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  color: var(--u-muted);
}
.u-footer a { color: var(--u-muted); }