/* ==========================================================================
   Solitary Labs — site stylesheet

   The identity is not invented here. It is lifted, value for value, from the
   RideScore app's `RideTheme.swift`, whose blueprint comment states the intent:
   "a marine instrument, not a tech startup" — bridge-at-night ground,
   chart-paper text, mono numerals. Every colour below is one of that file's
   ten constants. The two faces are the app's two bundled faces: Archivo for
   display, IBM Plex Mono for anything that is a label or a number.

   Fonts are SELF-HOSTED (assets/fonts). The site therefore makes zero
   third-party requests, which is both faster and the thing the privacy page
   is able to say truthfully.
   ========================================================================== */

/* --- Faces ------------------------------------------------------------- */

/* Archivo ships from Google Fonts as a single variable file; one @font-face
   covering 100-900 is the whole family, not three downloads of the same bytes. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/Archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexMono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* --- Tokens ------------------------------------------------------------ */

:root {
  /* RideTheme.swift, exactly */
  --abyss:   #070D16;
  --console: #0F1B2C;
  --seam:    #1C3049;
  --chart:   #EFE7D4;
  --dim:     #93A1B5;
  --calm:    #3FBFA8;
  --amber:   #E8B94A;
  --rough:   #E0614D;
  --severe:  #B02A37;
  --guard:   #5FA8E8;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono',
          Menlo, Consolas, monospace;

  --radius: 16px;
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 68ch;
  --shell: 1080px;
}

/* The app is a dark instrument and has no light mode. Declaring the scheme
   stops the browser painting light form controls and scrollbars over it. */
:root { color-scheme: dark; }

/* --- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Ground ------------------------------------------------------------ */

body {
  background: var(--abyss);
  color: var(--chart);
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.004em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Focus and skip link ----------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--calm);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Keep the ring visible on the dark panels too. */
a:focus-visible, button:focus-visible { outline-color: var(--calm); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--calm);
  color: var(--abyss);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

/* --- Type ---------------------------------------------------------------
   The app's habits: Archivo Black for display, mono + uppercase +
   letter-spacing for every label, mono for anything numeric.             */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--chart);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h3 { font-size: clamp(1.12rem, 2.2vw, 1.32rem); letter-spacing: -0.01em; }

p { max-width: var(--measure); }

a {
  color: var(--calm);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 191, 168, 0.38);
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover { color: var(--chart); border-bottom-color: var(--chart); }

/* The instrument micro-label: mono, uppercase, tracked out, dim. */
.label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.lede {
  font-size: clamp(1.02rem, 2.1vw, 1.19rem);
  line-height: 1.62;
  color: var(--chart);
}

.muted { color: var(--dim); }

code, .mono { font-family: var(--mono); font-size: 0.92em; }

/* --- The ramp rule ------------------------------------------------------
   The app's one signature graphic is the score ramp — four categorical inks
   in band order. Used here purely as a rule, with no numbers and no band
   names on it: it is the company's stripe, not a published scale.        */

.ramp {
  height: 3px;
  border: 0;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--calm) 0%,
    var(--calm) 22%,
    var(--amber) 42%,
    var(--rough) 66%,
    var(--severe) 100%
  );
}
.ramp--hero { width: min(320px, 60%); margin-top: 34px; }

/* --- Header ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--seam);
  background: color-mix(in srgb, var(--abyss) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 18px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 0;
  color: var(--chart);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wordmark:hover { color: var(--calm); }
.wordmark svg { flex: none; }

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
}
.nav a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid transparent;
  padding-block: 4px;
}
.nav a:hover { color: var(--chart); border-bottom-color: var(--seam); }
.nav a[aria-current='page'] {
  color: var(--calm);
  border-bottom-color: var(--calm);
}

/* --- Sections ---------------------------------------------------------- */

main { display: block; }

.section { padding-block: clamp(52px, 8vw, 84px); }
.section + .section { border-top: 1px solid var(--seam); }

.section__head { margin-bottom: 30px; }
.section__head .label { margin-bottom: 12px; }

.hero {
  padding-block: clamp(60px, 11vw, 116px) clamp(46px, 7vw, 74px);
}
.hero .label { margin-bottom: 20px; }
.hero p { margin-top: 24px; }

/* --- Panels ------------------------------------------------------------ */

.panel {
  background: var(--console);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 30px);
}

.grid-2 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- Product card ------------------------------------------------------ */

.product { display: flex; flex-direction: column; gap: 16px; }
.product__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.product__name { margin-bottom: 6px; }
.product p { max-width: none; }

.chip {
  flex: none;
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip--soon { color: var(--amber); }

/* The readout block — the app's spec rows: mono key, mono value, hairline. */
.readout { margin-top: 4px; border-top: 1px solid var(--seam); }
.readout div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--seam);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.readout dt { color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
.readout dd { color: var(--chart); text-align: right; }

/* --- Prose (support / privacy) ----------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--seam);
  font-size: clamp(1.28rem, 2.8vw, 1.6rem);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 30px; }
.prose ul { display: grid; gap: 11px; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  max-width: var(--measure);
}
/* A tick mark, not a bullet — the same hairline vocabulary as the app. */
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--calm);
}
.prose strong { color: var(--chart); font-weight: 600; }

.note {
  border-left: 2px solid var(--guard);
  background: var(--console);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  color: var(--dim);
  font-size: 0.95rem;
}
.note strong { color: var(--chart); }
.note p { max-width: none; }
.note > * + * { margin-top: 10px; }

/* --- Contact ----------------------------------------------------------- */

.contact { display: grid; gap: 14px; }
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.contact__row .label { min-width: 150px; }
.contact a {
  font-family: var(--mono);
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  word-break: break-word;
}

/* --- Footer ------------------------------------------------------------ */

.colophon {
  border-top: 1px solid var(--seam);
  padding-block: 36px 46px;
  color: var(--dim);
  font-size: 0.9rem;
}
.colophon .shell { display: grid; gap: 18px; }
.colophon__legal {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.colophon__legal strong { color: var(--chart); font-weight: 600; }
.colophon nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.colophon nav a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom-color: transparent;
}
.colophon nav a:hover { color: var(--calm); border-bottom-color: var(--calm); }

/* --- Page head (support / privacy) ------------------------------------- */

.pagehead { padding-block: clamp(44px, 7vw, 72px) 34px; }
.pagehead .label { margin-bottom: 16px; }
.pagehead p { margin-top: 18px; }
.pagehead .ramp { width: 200px; margin-top: 28px; }

/* --- Small screens ----------------------------------------------------- */

@media (max-width: 560px) {
  body { font-size: 16px; }
  .masthead .shell { padding-block: 14px; }
  .nav ul { gap: 16px; }
  .nav a { font-size: 11px; letter-spacing: 0.09em; }
  .product__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .readout div { flex-direction: column; gap: 3px; align-items: flex-start; }
  .readout dd { text-align: left; }
  .contact__row .label { min-width: 0; }
}

/* --- Print -------------------------------------------------------------
   The privacy policy and the support page are documents people print or
   save to PDF; on paper the bridge-at-night ground is just a lot of ink. */

@media print {
  .masthead, .skip, .ramp { display: none; }
  body { background: #fff; color: #111; font-size: 11pt; }
  h1, h2, h3, .prose strong, .colophon__legal strong { color: #000; }
  a { color: #000; border-bottom: 0; }
  .label, .muted, .note, .colophon, .colophon__legal { color: #333; }
  .note, .panel { border: 1px solid #999; background: #fff; }
  .prose ul li::before { background: #000; }
}

/* --- One utility, so the pages carry no inline `style` attributes -------
   With none, the Content-Security-Policy in `_headers` can say
   `style-src 'self'` with no 'unsafe-inline' escape hatch at all.        */

.mt { margin-top: 18px; }

/* --- Footer, after the 2026-09-10 revision -----------------------------
   The footer is now ONE ordinary line — company, location — over a row of
   links and the contact address. No filing plate, no registration number.
   It should read quiet: this is the bottom of the page, not a disclosure. */

.colophon__legal {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.8;
}



/* --- Shared chrome: the same top bar and footer as the home page ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.wordmark{font-family:var(--display,"Archivo",sans-serif);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:#EFE7D4;display:inline-flex}
.wordmark svg{display:none}
.bar nav{display:flex;gap:22px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em}
.bar nav a{text-decoration:none;color:#93A1B5;border-bottom:1px solid transparent;padding-bottom:2px}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:#EFE7D4;border-bottom-color:#1C3049}
footer.colophon{border-top:1px solid #1C3049;margin-top:64px;padding:22px 0 44px;display:flex;flex-wrap:wrap;gap:8px 26px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.05em;color:#93A1B5}
footer.colophon a{color:#93A1B5;text-decoration:none;border-bottom:1px solid #1C3049}
footer.colophon a:hover{color:#EFE7D4;border-bottom-color:#5FA8E8}