/* Saillogger homepage (templates/registration/login.html).
 *
 * DARK-FIRST (owner call, 2026-08-19): the page is the /app dark theme at
 * marketing scale. :root carries the tokens.css [data-theme='dark'] block
 * verbatim under the same --sl-* names (drift stays greppable), plus two
 * marketing-only display stops. Surface ladder: canvas #041426 is the page
 * ground; #0A2033 bands for getting-started / sharing / pricing / footer;
 * ONE wash #0E2740 band (monitoring); raised #12304A only on cards that
 * earn it (pricing). Never gray-black: every dark derives from brand navy.
 *
 * This file is homepage-only. static/css/style.css and screen.css stay
 * untouched: templates/registration/mobile_login.html (the native app's
 * login shell) still consumes their classes.
 */

:root {
  color-scheme: dark;

  /* Brand constants (tokens.css) */
  --sl-brand-500: #145DA0;
  --sl-brand-700: #0B3D6B;
  --sl-navy-900: #051D40;

  /* Type */
  --sl-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --sl-font-display: 'Signika', var(--sl-font-ui);
  --sl-text-xs: 0.75rem;
  --sl-text-sm: 0.875rem;
  --sl-text-md: 1rem;
  --sl-text-lg: 1.1875rem;
  --sl-text-xl: 1.5rem;
  --sl-text-2xl: 2rem;
  /* Marketing display stops: the app ramp tops out at 2xl (32px). Display
   * type is Inter 600 with tight negative tracking (the panel's call);
   * Signika remains the brand face for the wordmark and the modal titles,
   * which are app surfaces, not marketing display. */
  --mk-text-3xl: 2.5rem;
  --mk-text-4xl: 3.5rem;
  --mk-text-5xl: 4.5rem;

  /* Space and shape */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 24px;
  --sl-space-6: 32px;
  --sl-radius-sm: 8px;
  --sl-radius-md: 12px;
  --sl-radius-lg: 16px;
  --sl-radius-full: 999px;
  --sl-touch-target: 44px;
  --sl-topbar-height: 56px;
  --sl-motion-fast: 140ms ease;
  --sl-motion-slow: 260ms ease;
  --mk-section-pad: 96px;

  /* Dark theme (tokens.css [data-theme='dark']) */
  --sl-color-topbar: #0A2033;
  --sl-color-on-topbar: #EAF2F9;
  --sl-color-on-topbar-soft: rgba(234, 242, 249, 0.8);
  --sl-color-topbar-hairline: rgba(234, 242, 249, 0.14);
  --sl-color-canvas: #041426;
  --sl-color-surface: #0A2033;
  --sl-color-raised: #12304A;
  --sl-color-wash: #0E2740;
  --sl-color-ink: #EAF2F9;
  --sl-color-ink-soft: #C0D2E1;
  --sl-color-muted: #93ABC1;
  --sl-color-hairline: rgba(234, 242, 249, 0.14);
  --sl-color-hairline-strong: rgba(234, 242, 249, 0.26);
  --sl-color-link: #7FB3E3;
  --sl-color-link-hover: #A8CCEE;
  --sl-color-action: #7FB3E3;
  --sl-color-action-hover: #A8CCEE;
  --sl-color-on-action: #062138;
  --sl-color-good: #4FB98F;
  --sl-color-good-tint: rgba(79, 185, 143, 0.24);
  --sl-color-danger: #E4837B;
  --sl-color-danger-tint: rgba(228, 131, 123, 0.24);
  --sl-color-neutral-pill: #A7BDD1;
  --sl-color-neutral-pill-tint: rgba(147, 171, 193, 0.24);
  --sl-color-focus: #7FB3E3;
  --sl-color-link-tint: rgba(127, 179, 227, 0.18);
  --sl-color-hover: rgba(234, 242, 249, 0.07);
  --sl-color-scrim: rgba(2, 10, 20, 0.6);
  --sl-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.35);
  --sl-shadow-float: 0 2px 6px rgba(0, 0, 0, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- Base ---------- */

/* Own the box model: the homepage happened to inherit border-box from
 * Bootstrap, but the modern shell loads no Bootstrap, and content-box
 * inflates every min-height + padding control (the oversized masthead
 * pills on the legal pages). */
.home *,
.home *::before,
.home *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--sl-color-canvas);
}

body.home {
  margin: 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-text-md);
  line-height: 1.6;
  color: var(--sl-color-ink);
  background: var(--sl-color-canvas);
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps these base rules at single-class specificity so component
 * rules below can override them without arms races. */
.home :where(a) {
  color: var(--sl-color-link);
  text-decoration: none;
}

.home :where(a):hover {
  color: var(--sl-color-link-hover);
}

/* The app's global focus ring: an inner gap in the local surface keeps the
 * ring legible on dark grounds. */
.home :focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--sl-color-surface),
    0 0 0 4px var(--sl-color-focus);
  border-radius: var(--sl-radius-sm);
}

.home :where(img) {
  max-width: 100%;
  height: auto;
}

.container-sl {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sl-space-5);
}

.section {
  padding-block: var(--mk-section-pad);
}

/* Band ladder: canvas is the default ground; a band change always carries
 * its hairline (on dark, separators do the work shadows cannot). */
.band-surface {
  background: var(--sl-color-surface);
  border-top: 1px solid var(--sl-color-hairline);
  border-bottom: 1px solid var(--sl-color-hairline);
}

.band-wash {
  background: var(--sl-color-wash);
  border-top: 1px solid var(--sl-color-hairline);
  border-bottom: 1px solid var(--sl-color-hairline);
}

.band-line {
  border-top: 1px solid var(--sl-color-hairline);
}

/* ---------- Type ---------- */

.eyebrow {
  display: block;
  margin-bottom: var(--sl-space-3);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-color-link);
}

.section-title {
  margin: 0 0 var(--sl-space-4);
  font-family: var(--sl-font-ui);
  font-size: var(--mk-text-3xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sl-color-ink);
}

.section-lead {
  max-width: 68ch;
  margin: 0 0 var(--sl-space-5);
  font-size: var(--sl-text-lg);
  line-height: 1.55;
  color: var(--sl-color-ink-soft);
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--sl-space-6);
}

/* ---------- Buttons ---------- */

.btn-sl,
.btn-sl-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-2);
  min-height: 48px;
  /* Block padding only shows itself if a label ever wraps (narrow phones,
   * text-only zoom); one-line geometry is unchanged under min-height. */
  padding: 8px var(--sl-space-5);
  border: none;
  border-radius: var(--sl-radius-full);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--sl-motion-fast), color var(--sl-motion-fast),
    border-color var(--sl-motion-fast);
}

/* The one filled control on the page: the app's dark action pairing. */
.btn-sl {
  background: var(--sl-color-action);
  color: var(--sl-color-on-action);
}

.btn-sl-ghost {
  background: transparent;
  border: 1px solid var(--sl-color-hairline-strong);
  color: var(--sl-color-ink);
}

/* Hover only where hover exists: iOS applies :hover on first tap and the
 * pill would sit stuck in its hover fill after the modal closes. */
@media (hover: hover) {
  .btn-sl:hover {
    background: var(--sl-color-action-hover);
    color: var(--sl-color-on-action);
  }
  .btn-sl-ghost:hover {
    background: var(--sl-color-hover);
    color: var(--sl-color-ink);
  }
}

/* Pressed: an instant 1px settle reads as contact (deliberately not in the
 * transition list). */
.btn-sl:active {
  background: var(--sl-color-action-hover);
  transform: translateY(1px);
}

.btn-sl-ghost:active {
  background: var(--sl-color-hover);
  transform: translateY(1px);
}

/* The global focus ring must never reshape a pill. */
.btn-sl:focus-visible,
.btn-sl-ghost:focus-visible {
  border-radius: var(--sl-radius-full);
}

/* ---------- Masthead ---------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--sl-color-topbar);
  border-bottom: 1px solid var(--sl-color-topbar-hairline);
  padding-top: env(safe-area-inset-top, 0px);
}

.mast-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-4);
  min-height: var(--sl-topbar-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  text-decoration: none;
}

.brand-logo {
  height: 26px;
  width: auto;
}

.brand-word {
  font-family: var(--sl-font-display);
  font-weight: 700;
  font-size: var(--sl-text-lg);
  color: var(--sl-color-on-topbar);
  letter-spacing: 0.01em;
}

.mast-nav {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
}

.mast-link {
  font-size: var(--sl-text-sm);
  font-weight: 500;
  color: var(--sl-color-on-topbar-soft);
}

.mast-link:hover {
  color: var(--sl-color-on-topbar);
}

/* Masthead controls hold the app's 44px touch floor at every width. */
.mast-login {
  min-height: var(--sl-touch-target);
  padding: 8px var(--sl-space-4);
  font-size: var(--sl-text-sm);
}

.mast-cta {
  min-height: var(--sl-touch-target);
  padding: 8px var(--sl-space-4);
  font-size: var(--sl-text-sm);
}

/* ---------- Hero ---------- */

/* Top-of-page gradient (topbar surface melting into canvas) plus the page's
 * ONE radial glow, brand-500 at low alpha, anchoring the product panel. */
.hero {
  overflow-x: clip;
  background:
    radial-gradient(56rem 30rem at 78% 42%, rgba(20, 93, 160, 0.35),
      transparent 70%),
    linear-gradient(180deg, var(--sl-color-surface) 0%,
      var(--sl-color-canvas) 640px);
}

/* The hero leaves the container: copy aligns to the container's left edge,
 * the media panel runs to the viewport's right edge. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-block: 72px 88px;
  padding-left: max(var(--sl-space-5), calc(50vw - 576px));
}

.hero-title {
  margin: 0 0 var(--sl-space-4);
  font-family: var(--sl-font-ui);
  font-size: var(--mk-text-5xl);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--sl-color-ink);
}

.hero-lead {
  max-width: 56ch;
  margin: 0 0 var(--sl-space-5);
  font-size: var(--sl-text-lg);
  line-height: 1.55;
  color: var(--sl-color-ink-soft);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  margin-bottom: var(--sl-space-3);
}

.hero-terms {
  margin: 0 0 var(--sl-space-4);
  font-size: var(--sl-text-sm);
  color: var(--sl-color-muted);
}

.hero-login {
  margin: 0;
  font-size: var(--sl-text-sm);
  color: var(--sl-color-ink-soft);
}

.hero-login a {
  color: var(--sl-color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Product shots sit flat in their own environment: dark panel, hairline,
 * dark float shadow. No bezel art, no tilt. */
.frame-browser {
  overflow: hidden;
  border-radius: var(--sl-radius-lg);
  border: 1px solid var(--sl-color-hairline);
  box-shadow: var(--sl-shadow-float);
  background: var(--sl-color-surface);
}

.frame-browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* The chrome-free chart panel: opens at the copy's right, bleeds off the
 * viewport edge; the status card is pinned to the crop's top-left so wider
 * viewports reveal more chart, never crop the card. */
.hero-media {
  height: clamp(400px, 38vw, 560px);
  overflow: hidden;
  border: 1px solid var(--sl-color-hairline-strong);
  border-right: 0;
  border-radius: var(--sl-radius-lg) 0 0 var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-float);
  background: var(--sl-color-surface);
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* ---------- How it works (photo-less: the steps are the structure) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ruled columns: a hairline and a text ordinal do the disc's old job in the
 * app's own label grammar (no badge furniture). */
.step {
  border-top: 1px solid var(--sl-color-hairline);
  padding-top: var(--sl-space-4);
}

.step-ord {
  display: block;
  margin-bottom: var(--sl-space-3);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--sl-color-link);
}

.step h3 {
  margin: 0 0 var(--sl-space-1);
  font-size: var(--sl-text-lg);
  font-weight: 600;
  color: var(--sl-color-ink);
}

.step p {
  margin: 0;
  color: var(--sl-color-ink-soft);
}

/* ---------- Features: one container, hairline rows ----------
 * The app's list grammar (and the FAQ's): rows hug their own content, so
 * the inflated-box voids of the rejected bento are structurally impossible.
 * Rows are inert content, never links: no hover, no cursor, no chevron. */

.feature-list {
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-card);
  overflow: hidden;
}

.feature-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) minmax(0, 400px);
  column-gap: var(--sl-space-5);
  align-items: center;
  padding: var(--sl-space-5);
}

.feature-row + .feature-row {
  border-top: 1px solid var(--sl-color-hairline);
}

.feature-name {
  display: flex;
  align-items: baseline;
  gap: var(--sl-space-3);
  margin: 0;
  font-size: var(--sl-text-md);
  font-weight: 600;
  color: var(--sl-color-ink);
}

.feature-name i {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--sl-color-link);
}

.feature-row p {
  margin: 0;
  font-size: var(--sl-text-md);
  line-height: 1.55;
  color: var(--sl-color-ink-soft);
  max-width: 58ch;
}

/* Rows without a fragment let the copy run into the third column. */
.feature-row.no-fragment p {
  grid-column: 2 / -1;
}

.feature-row .ui-fragment {
  justify-self: end;
  width: 100%;
  max-width: 400px;
  margin-top: 0;
}

/* ---------- UI fragments (decorative-but-true, aria-hidden, inert) ---------- */

.ui-fragment {
  pointer-events: none;
  margin-top: auto;
}

/* One app list row (the logbook's own recipe). */
.ui-row {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-4);
  background: var(--sl-color-wash);
  border: 1px solid var(--sl-color-hairline);
  border-radius: var(--sl-radius-md);
}

.ui-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-row-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sl-text-sm);
  font-weight: 600;
  color: var(--sl-color-ink);
}

.ui-row-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sl-text-xs);
  color: var(--sl-color-muted);
}

.ui-row-figures {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ui-row-figure {
  display: block;
  font-size: var(--sl-text-md);
  font-weight: 600;
  color: var(--sl-color-ink);
}

.ui-row-figure .ui-row-unit {
  font-size: var(--sl-text-xs);
  font-weight: 500;
  color: var(--sl-color-muted);
}

.ui-row-date {
  display: block;
  font-size: var(--sl-text-xs);
  color: var(--sl-color-muted);
}

.ui-row .fa-angle-right {
  color: var(--sl-color-muted);
  font-size: var(--sl-text-xs);
}

/* The app's neutral status pill, verbatim state from the demo boat. */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  padding: 4px 12px;
  border-radius: var(--sl-radius-full);
  background: var(--sl-color-neutral-pill-tint);
  color: var(--sl-color-neutral-pill);
  font-size: var(--sl-text-sm);
  font-weight: 600;
}

/* The ledger: the logbook deep dive's media is the component itself. */
.ledger {
  width: 100%;
  max-width: 440px;
  padding: 0;
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-card);
  overflow: hidden;
  pointer-events: none;
}

.ledger .ui-row {
  background: transparent;
  border: none;
  border-radius: 0;
}

.ledger .ui-row + .ui-row {
  border-top: 1px solid var(--sl-color-hairline);
}

/* ---------- Deep dives ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-3);
  margin: 0 0 var(--sl-space-5);
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  gap: var(--sl-space-3);
  align-items: baseline;
  color: var(--sl-color-ink-soft);
}

.checks .fa-check {
  flex: 0 0 auto;
  color: var(--sl-color-link);
  font-size: var(--sl-text-sm);
}

.split-media {
  display: flex;
  justify-content: center;
}

/* Phone screenshots: the darkest ladder step reads as hardware, one keyline
 * separates it from the band. */
.frame-phone {
  overflow: hidden;
  width: min(300px, 80%);
  border-radius: 28px;
  border: 8px solid var(--sl-color-canvas);
  outline: 1px solid var(--sl-color-hairline-strong);
  box-shadow: var(--sl-shadow-float);
  background: var(--sl-color-canvas);
}

.frame-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Demo-account figures in the app's own stat-tile recipe. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sl-space-3);
  margin-bottom: var(--sl-space-5);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sl-space-3) var(--sl-space-4);
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline);
  border-radius: var(--sl-radius-md);
  box-shadow: var(--sl-shadow-card);
}

.band-surface .stat-tile {
  background: var(--sl-color-raised);
}

.stat-label {
  font-size: var(--sl-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sl-color-muted);
  white-space: nowrap;
}

.stat-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--sl-text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sl-color-ink);
}

.stat-unit {
  margin-left: 3px;
  font-size: var(--sl-text-xs);
  font-weight: 500;
  color: var(--sl-color-muted);
}

.demo-inline {
  font-size: var(--sl-text-md);
  color: var(--sl-color-ink-soft);
}

.demo-inline a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Quotes ---------- */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-5);
  max-width: 1000px;
  margin-inline: auto;
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-3);
  padding: var(--sl-space-5);
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-card);
}

.quote-card blockquote {
  margin: 0;
  font-size: var(--sl-text-md);
  line-height: 1.65;
  color: var(--sl-color-ink-soft);
}

.quote-card figcaption {
  font-size: var(--sl-text-sm);
  color: var(--sl-color-muted);
}

.quote-card figcaption .quote-boat {
  font-weight: 600;
  color: var(--sl-color-ink);
}

/* ---------- Pricing ---------- */

/* The one raised card on the page: the money card earns the top of the
 * ladder, defined by the only strong-hairline border, not by shouting. */
.price-card {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--sl-space-6);
  text-align: center;
  background: var(--sl-color-raised);
  border: 1px solid var(--sl-color-hairline-strong);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-float);
}

.price-figure {
  font-family: var(--sl-font-ui);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sl-color-ink);
  line-height: 1;
}

.price-figure .price-unit {
  font-family: var(--sl-font-ui);
  font-size: var(--sl-text-md);
  font-weight: 500;
  color: var(--sl-color-muted);
}

.price-note {
  margin: var(--sl-space-2) 0 var(--sl-space-5);
  color: var(--sl-color-ink-soft);
}

.price-facts {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-3);
  margin: 0 0 var(--sl-space-6);
  padding: 0;
  list-style: none;
  text-align: left;
}

.price-facts li {
  display: flex;
  gap: var(--sl-space-3);
  align-items: baseline;
  color: var(--sl-color-ink-soft);
}

/* The page's only green: reassurance where it converts. */
.price-facts .fa-check {
  color: var(--sl-color-good);
  font-size: var(--sl-text-sm);
}

/* The FAQ lives in the user guide; this is the pointer for scanners who
 * reach the bottom of the pricing story with questions. */
.price-aux {
  margin: var(--sl-space-4) 0 0;
  text-align: center;
  font-size: var(--sl-text-sm);
  color: var(--sl-color-muted);
}

/* ---------- Closing + footer ---------- */

/* The typographic close: the page's second (and last) display moment. */
.closing {
  padding-block: 128px;
}

.mantra {
  margin: 0 0 var(--sl-space-6);
  font-family: var(--sl-font-ui);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--sl-color-ink);
}

.footer {
  background: var(--sl-color-surface);
  border-top: 1px solid var(--sl-color-hairline);
  padding-block: var(--sl-space-6);
  padding-bottom: calc(var(--sl-space-6) + env(safe-area-inset-bottom, 0px));
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-5);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-4) var(--sl-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: var(--sl-space-2) 0;
  font-size: var(--sl-text-sm);
  color: var(--sl-color-ink-soft);
}

.footer-links a:hover {
  color: var(--sl-color-ink);
}

/* Official store artwork, untouched, at a 48px tap target (4+40+4). */
.footer-badges {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
}

.footer-badges a {
  display: inline-flex;
  align-items: center;
  padding-block: var(--sl-space-1);
}

.footer-badges img {
  height: 40px;
  width: auto;
}

.footer-copy {
  margin-top: var(--sl-space-4);
  font-size: var(--sl-text-xs);
  color: var(--sl-color-muted);
}

/* ---------- Modals: dark, the doorway into a dark product ---------- */

.home .modal-content {
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline-strong);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-float);
  color: var(--sl-color-ink);
}

.home .modal-backdrop {
  background-color: rgb(2, 10, 20);
}

.home .modal-header {
  padding: var(--sl-space-5) var(--sl-space-6) 0;
  border: none;
}

.home .modal-title {
  font-family: var(--sl-font-display);
  font-size: var(--sl-text-xl);
  font-weight: 600;
  color: var(--sl-color-ink);
}

.home .modal-body {
  padding: var(--sl-space-4) var(--sl-space-6) var(--sl-space-6);
}

.sl-form label {
  display: block;
  margin: 0 0 var(--sl-space-1);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  color: var(--sl-color-ink-soft);
}

/* The app's input recipe: the input shares the panel's surface and the
 * border carries the edge. */
.sl-form .form-control {
  min-height: 48px;
  margin-bottom: var(--sl-space-4);
  padding: 10px 14px;
  font-size: var(--sl-text-md);
  color: var(--sl-color-ink);
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline-strong);
  border-radius: var(--sl-radius-sm);
  caret-color: var(--sl-color-link);
}

.sl-form .form-control::placeholder {
  color: var(--sl-color-muted);
}

.sl-form .form-control:focus {
  background: var(--sl-color-surface);
  color: var(--sl-color-ink);
  border-color: var(--sl-color-focus);
  box-shadow: 0 0 0 3px var(--sl-color-link-tint);
  outline: none;
}

/* WebKit autofill would flash its pale-yellow fill over the dark input. */
.sl-form .form-control:-webkit-autofill,
.sl-form .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--sl-color-surface) inset;
  -webkit-text-fill-color: var(--sl-color-ink);
}

.sl-form .form-control[readonly] {
  background: var(--sl-color-wash);
  color: var(--sl-color-ink-soft);
}

.sl-form .btn-submit {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: var(--sl-radius-full);
  background: var(--sl-color-action);
  color: var(--sl-color-on-action);
  font: inherit;
  font-weight: 600;
  transition: background var(--sl-motion-fast);
}

.sl-form .btn-submit:hover {
  background: var(--sl-color-action-hover);
  color: var(--sl-color-on-action);
}

.sl-form .btn-submit:disabled {
  opacity: 0.65;
}

.sl-form .form-check {
  margin-bottom: var(--sl-space-4);
}

.sl-form .form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: transparent;
  border: 1px solid var(--sl-color-hairline-strong);
}

/* Bootstrap's white tick would sit at ~1.9:1 on the action fill; the tick
 * carries on-action ink instead. */
.sl-form .form-check-input:checked {
  background-color: var(--sl-color-action);
  border-color: var(--sl-color-action);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23062138' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}

.sl-form .form-check-input:focus {
  border-color: var(--sl-color-focus);
  box-shadow: 0 0 0 3px var(--sl-color-link-tint);
}

.sl-form .form-check-label {
  display: inline;
  margin-left: var(--sl-space-2);
  font-size: var(--sl-text-md);
  font-weight: 400;
  color: var(--sl-color-ink-soft);
}

.form-aux {
  margin-top: var(--sl-space-3);
  font-size: var(--sl-text-sm);
  text-align: center;
}

.form-error {
  display: block;
  margin-bottom: var(--sl-space-3);
  font-size: var(--sl-text-sm);
  color: var(--sl-color-danger);
}

.form-success {
  margin-bottom: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-4);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-color-good-tint);
  color: var(--sl-color-good);
  font-size: var(--sl-text-sm);
  font-weight: 500;
}

.field-hint {
  display: block;
  margin: calc(-1 * var(--sl-space-2)) 0 var(--sl-space-4);
  font-size: var(--sl-text-xs);
  color: var(--sl-color-muted);
}

/* ---------- Motion ----------
 * Hover/focus micro-transitions only; nothing on this page is hidden,
 * moved, or timed. Content never waits for JavaScript. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .home *,
  .home *::before,
  .home *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
  .hero-title {
    font-size: var(--mk-text-4xl);
    letter-spacing: -0.022em;
    line-height: 1.06;
  }
  .feature-row {
    grid-template-columns: 220px minmax(0, 1fr) minmax(0, 340px);
  }
}

@media (max-width: 991.98px) {
  :root {
    --mk-section-pad: 64px;
  }
  /* minmax(0, 1fr), never bare 1fr: an auto-min track would grow to the
   * ledger rows' nowrap content and widen the phone viewport. */
  .hero-grid,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split.reverse .split-media {
    order: -1;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sl-space-5);
  }
  /* Stacked hero: copy back inside container padding, media bleeds right. */
  .hero-grid {
    padding-block: 48px 64px;
    padding-inline: var(--sl-space-5) 0;
  }
  .hero-copy {
    padding-right: var(--sl-space-5);
  }
  .hero-media {
    height: 440px;
  }
  /* Feature rows: name above copy, fragment below. */
  .feature-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sl-space-3);
  }
  .feature-row.no-fragment p {
    grid-column: auto;
  }
  .feature-row .ui-fragment {
    justify-self: start;
  }
  .quote-grid {
    grid-template-columns: 1fr;
  }
  .split-media {
    justify-content: flex-start;
  }
  .closing {
    padding-block: 96px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --mk-section-pad: 48px;
  }
  .mast-link,
  .mast-cta {
    display: none;
  }
  /* Re-aim the glow so it crowns the phone hero strip. */
  .hero {
    background:
      radial-gradient(90% 36% at 50% 30%, rgba(20, 93, 160, 0.3),
        transparent 70%),
      linear-gradient(180deg, var(--sl-color-surface) 0%,
        var(--sl-color-canvas) 640px);
  }
  .hero-grid {
    padding-top: 32px;
    padding-inline: 0;
    gap: var(--sl-space-6);
  }
  .hero-copy {
    padding-inline: var(--sl-space-5);
  }
  /* Full-bleed strip; the tight phone crop keeps the status card legible. */
  .hero-media {
    height: auto;
    border-radius: 0;
    border-inline: 0;
    border-block: 1px solid var(--sl-color-hairline);
  }
  .hero-media img {
    height: auto;
    aspect-ratio: 1200 / 1000;
  }
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frame-phone {
    width: min(260px, 74%);
  }
  /* Quotes become a swipeable snap row; the next card's peek is the
   * affordance. */
  .quote-grid {
    display: flex;
    gap: var(--sl-space-4);
    overflow-x: auto;
    padding-bottom: var(--sl-space-3);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sl-space-5);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quote-grid::-webkit-scrollbar {
    display: none;
  }
  .quote-card {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: clamp(2.125rem, 10.3vw, 2.5rem);
    letter-spacing: -0.018em;
    line-height: 1.1;
  }
  .hero-lead {
    font-size: var(--sl-text-md);
  }
  .section-title {
    font-size: 1.75rem;
  }
  .mantra {
    font-size: var(--sl-text-2xl);
  }
  .feature-row {
    padding: var(--sl-space-4) var(--sl-space-4);
  }
  /* Two stacked full-width pills with different outcomes: one group, two
   * unmistakable targets. */
  .hero-ctas {
    gap: var(--sl-space-4);
  }
  .hero-ctas .btn-sl,
  .hero-ctas .btn-sl-ghost {
    width: 100%;
  }
  .home .modal-content {
    border-radius: 0;
    border: none;
  }
  .home .modal-fullscreen-sm-down .modal-header {
    padding-top: calc(var(--sl-space-5) + env(safe-area-inset-top, 0px));
  }
  .home .modal-fullscreen-sm-down .modal-body {
    padding-bottom: calc(var(--sl-space-6) + env(safe-area-inset-bottom, 0px));
  }
  .home .modal-body {
    padding-inline: var(--sl-space-5);
  }
  .home .modal-header {
    padding-inline: var(--sl-space-5);
  }
}

/* ---------- Modern shell (onboarding + legal pages) ----------
 * templates/modern_shell.html: the same dark system serving the pages that
 * are not the homepage. Content is a single readable column. */

.shell-main {
  max-width: 760px;
  margin-inline: auto;
  padding: 56px var(--sl-space-5) 96px;
}

.shell-main.shell-wide {
  max-width: 860px;
}

.shell-title {
  margin: 0 0 var(--sl-space-4);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sl-color-ink);
}

.shell-kicker {
  display: block;
  margin-bottom: var(--sl-space-3);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-color-link);
}

.shell-main p,
.shell-main li {
  color: var(--sl-color-ink-soft);
  line-height: 1.6;
}

.shell-main p {
  margin: 0 0 var(--sl-space-4);
}

.shell-main ol,
.shell-main ul {
  margin: 0 0 var(--sl-space-4);
  padding-left: 22px;
}

.shell-main li {
  margin-bottom: var(--sl-space-2);
}

.shell-main h2,
.shell-main h3,
.shell-main h4 {
  margin: var(--sl-space-6) 0 var(--sl-space-3);
  font-family: var(--sl-font-ui);
  font-weight: 600;
  color: var(--sl-color-ink);
}

.shell-main h2 { font-size: var(--sl-text-xl); }
.shell-main h3 { font-size: var(--sl-text-xl); }
.shell-main h4 { font-size: var(--sl-text-lg); }

.shell-main strong {
  color: var(--sl-color-ink);
}

.shell-main img {
  border-radius: var(--sl-radius-md);
  border: 1px solid var(--sl-color-hairline);
}

/* Instruction screenshots in a wrapping grid. */
.shell-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-3);
  margin: 0 0 var(--sl-space-4);
}

.shell-shots img {
  width: 100%;
  height: auto;
}

/* Device-choice cards on the getting-started hub. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-5);
  margin-block: var(--sl-space-5);
}

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sl-space-4);
  padding: var(--sl-space-5);
  text-align: center;
  background: var(--sl-color-surface);
  border: 1px solid var(--sl-color-hairline);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-card);
}

.choice-card img {
  height: 130px;
  width: auto;
  border: none;
  border-radius: 0;
}

.choice-card .btn-sl,
.choice-card .btn-sl-ghost {
  margin-top: auto;
  width: 100%;
  font-size: var(--sl-text-sm);
  padding-inline: var(--sl-space-3);
}

.choice-note {
  font-size: var(--sl-text-sm);
  color: var(--sl-color-muted);
}

/* The step footer: back is quiet, continue is the lit control. */
.step-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-6);
}

/* Highlighted value (the Collector ID). */
.shell-code {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--sl-radius-sm);
  background: var(--sl-color-wash);
  border: 1px solid var(--sl-color-hairline);
  color: var(--sl-color-ink);
  font-weight: 600;
}

/* Activation wait spinner (no Bootstrap on the shell). */
.shell-spinner {
  width: 34px;
  height: 34px;
  margin-inline: auto;
  border-radius: 50%;
  border: 3px solid var(--sl-color-hairline-strong);
  border-top-color: var(--sl-color-link);
  animation: shell-spin 0.9s linear infinite;
}

@keyframes shell-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .shell-spinner {
    animation: none;
    border-top-color: var(--sl-color-link);
  }
}

/* Bare form controls on shell pages (the modal recipe, outside a modal). */
.sl-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%2393ABC1' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}

@media (max-width: 767.98px) {
  .choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell-main {
    padding-top: var(--sl-space-6);
  }
  .step-nav {
    flex-direction: column-reverse;
  }
  .step-nav .btn-sl,
  .step-nav .btn-sl-ghost {
    width: 100%;
  }
}