/* ==========================================================================
   SpinePrep — site styles. Clinical "scanner console" identity built from the
   logo palette (navy #152D51 · teal #2B8090 · orange #F47F18).
   Theming keys off Material's [data-md-color-scheme]: default = light, slate = dark.
   ========================================================================== */

/* ---- design tokens ---------------------------------------------------- */
:root,
[data-md-color-scheme="default"] {
  --sp-bg:#eef2f7; --sp-surface:#ffffff; --sp-surface-2:#e6edf4; --sp-panel:#0c1a30;
  --sp-ink:#12233f; --sp-muted:#5b6f8a; --sp-line:#d6def0;
  --sp-brand:#152D51; --sp-teal:#1f6f7f; --sp-teal-br:#2B8090; --sp-warm:#e5720c;
  --sp-band:#14294a;
  --lg-spine:#152D51; --lg-teal:#2B8090; --lg-warm:#F47F18;
  --sp-shadow:0 1px 2px rgba(18,35,63,.06),0 12px 30px -14px rgba(18,35,63,.22);

  /* Material palette override (whole site) */
  --md-primary-fg-color:#152D51;
  --md-primary-fg-color--dark:#0d1f3a;
  --md-primary-bg-color:#ffffff;
  --md-accent-fg-color:#1f6f7f;
  --md-typeset-a-color:#1f6f7f;
}
[data-md-color-scheme="slate"] {
  --sp-bg:#081221; --sp-surface:#0e1c31; --sp-surface-2:#0b1728; --sp-panel:#060f1c;
  --sp-ink:#e9f1fa; --sp-muted:#93a8c2; --sp-line:#203852;
  --sp-brand:#0b1a30; --sp-teal:#37a7bb; --sp-teal-br:#45b9cd; --sp-warm:#ff9a3c;
  --sp-band:#0b1a30;
  --lg-spine:#7fa8d8; --lg-teal:#45b9cd; --lg-warm:#ff9a3c;
  --sp-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.6);

  --md-primary-fg-color:#0b1a30;
  --md-accent-fg-color:#45b9cd;
  --md-typeset-a-color:#45b9cd;
  --md-default-bg-color:#081221;
}

/* ---- global niceties -------------------------------------------------- */
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body, html { overflow-x:hidden; }

.tx-skip-link{
  position:absolute; top:-3rem; left:.5rem; z-index:1000;
  background:var(--sp-teal-br); color:#04141a; padding:.6rem 1rem; border-radius:8px;
  font-weight:600; transition:top .15s ease;
}
.tx-skip-link:focus{ top:.5rem; }
:focus-visible{ outline:2px solid var(--sp-teal-br); outline-offset:3px; border-radius:6px; }

/* header brand wordmark */
.tx-brand-spine{ color:#fff; font-weight:700; }
.tx-brand-prep{ color:var(--sp-teal-br); font-weight:700; }
[data-md-color-scheme="slate"] .tx-brand-spine{ color:#e9f1fa; }
.md-header__button.md-logo img{ height:1.7rem; width:auto; }
/* keep only the branded wordmark; hide Material's plain default title */
.md-header__title:not(.tx-header__title--custom){ display:none; }
.tx-header__title--custom{ font-weight:700; }

/* ==========================================================================
   Landing page — full-bleed inside Material's content column
   ========================================================================== */
.md-content:has(.tx-landing){ max-width:none; }
.md-content:has(.tx-landing) .md-content__inner{ margin:0; padding:0; max-width:none; }
.md-content:has(.tx-landing) .md-content__inner::before{ display:none; }
.md-main:has(.tx-landing) .md-main__inner{ margin-top:0; }
.md-grid:has(.tx-landing){ max-width:none; }

.tx-landing{
  color:var(--sp-ink);
  font-size:17px; line-height:1.6;
  background:var(--sp-bg);
}
.tx-landing :where(h1,h2,h3){ margin:0; color:var(--sp-ink); letter-spacing:-.02em; line-height:1.12; text-wrap:balance; }
.tx-landing :where(p){ margin:0; }
.tx-landing a{ text-decoration:none; }
.tx-landing img{ max-width:100%; }
.sp-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
.sp-accent{ color:var(--sp-teal-br); }
.sp-eyebrow{
  font-family:var(--md-code-font,monospace); font-weight:600; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sp-teal-br);
}

/* ---- hero ---- */
.sp-hero{ border-bottom:1px solid var(--sp-line); background:var(--sp-bg); }
.sp-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px;
  align-items:center; padding:72px 24px 64px; }
.sp-hero h1{ font-size:clamp(32px,4.6vw,52px); font-weight:700; margin-top:16px; }
.sp-lede{ color:var(--sp-muted); font-size:19px; max-width:40ch; margin-top:20px; }
.sp-install{ display:flex; align-items:stretch; border:1px solid var(--sp-line);
  border-radius:11px; background:var(--sp-panel); overflow:hidden; max-width:480px;
  box-shadow:var(--sp-shadow); margin-top:26px; }
.sp-install code{ font-family:var(--md-code-font,monospace); font-size:14.5px;
  color:#dbe7f4; padding:14px 16px; white-space:nowrap; overflow-x:auto; flex:1;
  background:none; border:0; }
.sp-tok{ color:var(--sp-warm); }
.sp-copy{ border:0; border-left:1px solid #1e3350; background:transparent; color:#9fb6d0;
  padding:0 15px; cursor:pointer; font-family:var(--md-code-font,monospace);
  font-size:12px; letter-spacing:.06em; }
.sp-copy:hover{ color:#fff; background:#12233c; }
.sp-subnote{ font-size:13.5px; color:var(--sp-muted); margin-top:10px; }
.sp-cta{ display:flex; gap:13px; margin-top:26px; flex-wrap:wrap; }
.sp-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15.5px;
  padding:12px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer; }
.sp-btn--primary{ background:var(--sp-teal); color:#fff; }
.sp-btn--primary:hover{ background:var(--sp-brand); color:#fff; }
[data-md-color-scheme="slate"] .sp-btn--primary{ background:var(--sp-teal-br); color:#04141a; }
[data-md-color-scheme="slate"] .sp-btn--primary:hover{ background:#5fc6d8; color:#04141a; }
.sp-btn--ghost{ background:transparent; color:var(--sp-ink); border-color:var(--sp-line); }
.sp-btn--ghost:hover{ border-color:var(--sp-teal-br); color:var(--sp-teal-br); }
@media (prefers-reduced-motion: no-preference){ .sp-btn{ transition:transform .12s ease; } .sp-btn:hover{ transform:translateY(-1px); } }
.sp-works{ display:flex; gap:16px; align-items:center; margin-top:30px; flex-wrap:wrap;
  font-family:var(--md-code-font,monospace); font-size:12px; letter-spacing:.06em; color:var(--sp-muted); }
.sp-works b{ color:var(--sp-ink); font-weight:500; }

.sp-scan{ position:relative; justify-self:end; width:100%; max-width:380px; }
.sp-frame{ position:relative; border:1px solid var(--sp-line); border-radius:16px;
  background:var(--sp-panel); padding:12px; box-shadow:var(--sp-shadow); }
.sp-frame::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(69,185,205,.28); border-radius:11px; pointer-events:none; }
.sp-frame img{ display:block; width:100%; border-radius:8px; }
.sp-cap{ display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--md-code-font,monospace); font-size:11.5px; color:#8fa6c1; letter-spacing:.04em; }
.sp-dot{ color:var(--sp-warm); }
.sp-rail{ position:absolute; left:-30px; top:8px; bottom:8px; width:16px; display:flex;
  flex-direction:column; justify-content:space-between; align-items:center; }
.sp-rail span{ font-family:var(--md-code-font,monospace); font-size:10px; color:var(--sp-muted); }
.sp-rail::before{ content:""; position:absolute; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--sp-teal-br),var(--sp-warm)); border-radius:2px; opacity:.55; }
@media (max-width:900px){ .sp-hero__grid{ grid-template-columns:1fr; gap:38px; } .sp-scan{ justify-self:start; max-width:320px; } .sp-rail{ display:none; } }

/* ---- generic section ---- */
.sp-sec{ padding:72px 0; background:var(--sp-bg); }
.sp-band{ background:var(--sp-surface-2); border-block:1px solid var(--sp-line); }
.sp-head{ max-width:62ch; margin-bottom:38px; }
.sp-head h2{ font-size:clamp(25px,3.1vw,33px); font-weight:700; margin-top:10px; }
.sp-head p{ color:var(--sp-muted); font-size:18px; margin-top:14px; }

/* ---- evidence ---- */
.sp-evidence{ background:var(--sp-band); color:#eaf2fb; border-block:1px solid var(--sp-line); }
.sp-evidence__grid{ padding:38px 24px; display:grid; grid-template-columns:repeat(4,auto) 1fr; gap:34px; align-items:center; }
.sp-n{ font-family:var(--md-code-font,monospace); font-weight:600; font-size:34px; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.sp-l{ font-size:12.5px; color:#9db6d4; letter-spacing:.03em; margin-top:2px; }
.sp-note{ font-size:14.5px; color:#c3d4e8; border-left:2px solid var(--sp-teal-br); padding-left:16px; max-width:34ch; }
@media (max-width:900px){ .sp-evidence__grid{ grid-template-columns:1fr 1fr; gap:24px; } .sp-note{ grid-column:1/-1; } }

/* ---- features ---- */
.sp-grid4{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.sp-card{ background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:14px;
  padding:26px; box-shadow:var(--sp-shadow); }
.sp-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--sp-teal-br) 16%,transparent); color:var(--sp-teal-br); margin-bottom:14px; }
.sp-ic svg{ width:20px; height:20px; }
.sp-card h3{ font-size:19px; font-weight:600; }
.sp-card p{ color:var(--sp-muted); font-size:15.5px; margin-top:9px; }
@media (max-width:720px){ .sp-grid4{ grid-template-columns:1fr; } }

/* ---- pipeline ---- */
.sp-piperail{ display:flex; gap:10px; overflow-x:auto; padding:6px 2px 14px; }
.sp-step{ flex:0 0 auto; min-width:152px; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:11px; padding:14px 15px; position:relative; }
.sp-s{ font-family:var(--md-code-font,monospace); font-size:11px; color:var(--sp-warm); letter-spacing:.08em; }
.sp-t{ font-weight:600; font-size:14.5px; margin-top:5px; }
.sp-d{ font-size:12.5px; color:var(--sp-muted); margin-top:3px; }
.sp-step:not(:last-child)::after{ content:""; position:absolute; right:-10px; top:50%; width:10px; height:2px; background:var(--sp-line); }

/* ---- gallery ---- */
/* tall cord image spans two rows on the left; the wide tSNR/motion stack right */
.sp-gal{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.sp-gal .sp-shot:first-child{ grid-row:span 2; }
.sp-shot{ background:var(--sp-panel); border:1px solid var(--sp-line); border-radius:14px;
  padding:10px; box-shadow:var(--sp-shadow); margin:0; }
.sp-shot img{ display:block; width:100%; border-radius:8px; background:#000; }
.sp-shotcap{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--md-code-font,monospace); font-size:11.5px; color:#93a8c2; padding:9px 4px 3px; letter-spacing:.03em; }
.sp-shotcap b{ color:#dce7f3; font-weight:500; }
@media (max-width:820px){ .sp-gal{ grid-template-columns:1fr; max-width:460px; } .sp-gal .sp-shot:first-child{ grid-row:auto; } }

/* ---- get started ---- */
.sp-paths{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sp-path{ background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:14px; padding:24px; box-shadow:var(--sp-shadow); }
.sp-path h3{ font-size:17px; display:flex; align-items:center; gap:9px; }
.sp-tag{ font-family:var(--md-code-font,monospace); font-size:10.5px; letter-spacing:.06em; color:var(--sp-warm);
  border:1px solid color-mix(in srgb,var(--sp-warm) 45%,transparent); border-radius:20px; padding:2px 9px; }
.sp-path pre{ background:var(--sp-panel); color:#dbe7f4; border-radius:9px; padding:14px; overflow-x:auto;
  font-family:var(--md-code-font,monospace); font-size:13px; margin:14px 0 0; line-height:1.55; border:0; }
.sp-path p{ color:var(--sp-muted); font-size:14px; margin-top:12px; }
@media (max-width:720px){ .sp-paths{ grid-template-columns:1fr; } }

/* ---- cite ---- */
.sp-citebox{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center;
  background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:14px; padding:30px; box-shadow:var(--sp-shadow); }
.sp-citebox h2{ font-size:26px; margin-top:10px; }
.sp-citebox p{ color:var(--sp-muted); margin-top:12px; font-size:15.5px; }
.sp-bib{ background:var(--sp-panel); color:#cfe0f1; border-radius:10px; padding:18px; margin:0;
  font-family:var(--md-code-font,monospace); font-size:12.5px; line-height:1.65; overflow-x:auto; border:0; }
.sp-bib .sp-k{ color:var(--sp-teal-br); } .sp-bib .sp-v{ color:#e9c98a; }
.sp-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.sp-chip{ font-family:var(--md-code-font,monospace); font-size:11.5px; color:var(--sp-muted);
  border:1px solid var(--sp-line); border-radius:20px; padding:5px 11px; }
@media (max-width:820px){ .sp-citebox{ grid-template-columns:1fr; } }

/* ---- scroll reveal ---- */
.sp-reveal{ opacity:0; transform:translateY(14px); }
@media (prefers-reduced-motion: no-preference){ .sp-reveal{ transition:opacity .6s ease, transform .6s ease; } }
.sp-reveal.sp-in{ opacity:1; transform:none; }

/* keep the "made with" footer tidy under the landing */
.md-content:has(.tx-landing) + * .md-footer__inner{ }

/* ==========================================================================
   Refinements pass — button contrast, anchor offset, rail affordance,
   card interactivity, mobile robustness
   ========================================================================== */

/* Buttons: Material's `.md-typeset a` (0,1,1) was overriding button text
   colour (teal on teal). These higher-specificity rules win in both themes. */
.tx-landing a.sp-btn{ text-decoration:none; }
.tx-landing a.sp-btn--primary{ color:#fff; }
.tx-landing a.sp-btn--primary:hover{ color:#fff; }
[data-md-color-scheme="slate"] .tx-landing a.sp-btn--primary,
[data-md-color-scheme="slate"] .tx-landing a.sp-btn--primary:hover{ color:#04141a; }
.tx-landing a.sp-btn--ghost{ color:var(--sp-ink); }
.tx-landing a.sp-btn--ghost:hover{ color:var(--sp-teal-br); }

/* Anchor targets clear the sticky header instead of hiding under it */
.tx-landing section[id]{ scroll-margin-top:84px; }

/* Pipeline rail: scroll snap + a soft right-edge fade that signals "more" */
.sp-piperail{ scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); }
.sp-step{ scroll-snap-align:start; min-width:140px; }
@media (max-width:720px){ .sp-piperail{ -webkit-mask-image:none; mask-image:none; } }

/* Cards feel alive on hover */
.sp-card{ transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
@media (prefers-reduced-motion:no-preference){
  .sp-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--sp-teal-br) 55%,var(--sp-line)); }
}
.sp-shot{ transition:transform .16s ease, box-shadow .16s ease; }
@media (prefers-reduced-motion:no-preference){ .sp-shot:hover{ transform:translateY(-2px); } }

/* Install box: let the command shrink so the COPY button always stays visible */
.sp-install code{ min-width:0; }
.sp-install{ width:100%; }

/* Eyebrow contrast: nudge the mono labels a touch darker on light ground */
[data-md-color-scheme="default"] .sp-eyebrow{ color:#1a6472; }

/* Install box on narrow screens: shrink the command so COPY stays visible */
@media (max-width:520px){
  .sp-install code{ font-size:12.5px; padding:12px; min-width:0; }
  .sp-copy{ padding:0 11px; flex:0 0 auto; }
}