/* ══════════════════════════════════════════════════════════════════════
   Riptide: Direction A, lifted from the macOS app's own Theme.swift and
   the design reference (design/Riptide macOS Design.html).
   Native Mac: system font, standard window chrome, one teal accent.
   The segment strip is the signature element, as it is in the app.
   Shared by the landing page, privacy policy and terms.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --rt-bg:          #ffffff;  /* Theme.background   */
  --rt-sidebar:     #f7f7f9;  /* Theme.sidebar      */
  --rt-status:      #f1f1f3;  /* Theme.statusBar    */
  --rt-titlebar:    #ececee;  /* window chrome      */
  --rt-line:        #e3e3e5;  /* Theme.line         */
  --rt-track:       #e1e1e4;  /* Theme.track        */
  --rt-ink:         #1d1d1f;  /* Theme.ink          */
  --rt-ink2:        #6e6e73;  /* Theme.ink2         */
  --rt-ink3:        #8e8e93;  /* Theme.ink3         */
  --rt-accent:      #0b7ea8;  /* Theme.accent       */
  --rt-accent-fill: #0b7ea8;  /* Theme.accentFill   */
  --rt-accent-hover:#095f80;
  --rt-on-accent2:  #dcedf6;  /* Theme.onAccent2    */
  --rt-tip-bg:      #f2f7fa;  /* Theme.tipBackground */
  --rt-tip-border:  #dceaf2;  /* Theme.tipBorder    */
  --rt-tip-ink:     #3d6377;  /* Theme.tipInk       */
  --rt-danger:      #c0392b;  /* Theme.danger       */
  --rt-page-a:      #f4f8fa;  /* screenshot background, 160deg */
  --rt-page-b:      #dcebf2;
  --rt-header:      rgba(255, 255, 255, 0.8);
  --rt-window-shadow: 0 40px 120px rgba(8, 60, 90, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  --rt-card-shadow: 0 18px 50px rgba(8, 60, 90, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.1);

  --rt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rt-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Remap the site-wide tokens so the shared header and footer follow Riptide */
  --bg: var(--rt-bg);
  --bg-elevated: var(--rt-sidebar);
  --text: var(--rt-ink);
  --text-muted: var(--rt-ink2);
  --text-faint: var(--rt-ink3);
  --border: var(--rt-line);
  --border-hover: var(--rt-ink3);
  --accent: var(--rt-accent);
  --font-sans: var(--rt-font);
  --radius: 11px;           /* window corner */
  --radius-sm: 8px;         /* Theme.cardRadius */
}

@media (prefers-color-scheme: dark) {
  :root {
    --rt-bg:          #1c1c1e;
    --rt-sidebar:     #242426;
    --rt-status:      #2a2a2c;
    --rt-titlebar:    #2c2c2e;
    --rt-line:        #3a3a3c;
    --rt-track:       #3a3a3c;
    --rt-ink:         #f5f5f7;
    --rt-ink2:        #a1a1a6;
    --rt-ink3:        #7c7c82;
    --rt-accent:      #3fa9de;
    --rt-accent-fill: #0b6c93;
    --rt-accent-hover:#6cc0ea;
    --rt-on-accent2:  #d6eaf4;
    --rt-tip-bg:      #22303a;
    --rt-tip-border:  #2f4654;
    --rt-tip-ink:     #a9cbdd;
    --rt-danger:      #ff6f60;
    --rt-page-a:      #141416;
    --rt-page-b:      #10222c;
    --rt-header:      rgba(28, 28, 30, 0.78);
    --rt-window-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --rt-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  }
}

body {
  font-family: var(--rt-font);
  color: var(--rt-ink);
  background: linear-gradient(160deg, var(--rt-page-a) 0%, var(--rt-page-b) 100%) fixed, var(--rt-page-a);
  -webkit-font-smoothing: antialiased;
}

/* ── Shared chrome ────────────────────────────────────────────────────── */
.site-header { background: var(--rt-header); border-bottom-color: var(--rt-line); }
.site-header .logo,
.site-footer .logo {
  font-family: var(--rt-font); font-weight: 600; letter-spacing: -0.02em;
  background: none; -webkit-text-fill-color: var(--rt-ink); color: var(--rt-ink);
}
.nav-link:hover { color: var(--rt-ink); background: var(--rt-sidebar); }
.site-footer { background: var(--rt-status); border-top: 1px solid var(--rt-line); }
.footer-col h4 { font-weight: 600; letter-spacing: 0.06em; }
.footer-col a:hover { color: var(--rt-accent); }

h1, h2, h3 { font-family: var(--rt-font); }

/* Uppercase run-in caption: QUEUE, TOTAL THROUGHPUT (SectionCaption) */
.rt-caption {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rt-ink3);
}

/* ── Hero: copy left, a live window right, as in the store art ───────── */
.rt-hero {
  max-width: 1180px; margin: 0 auto; padding: 88px 24px 56px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center;
}
.rt-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.rt-brand img { width: 84px; height: 84px; margin: -6px; }
.rt-brand span { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.rt-hero h1 {
  margin: 0 0 22px; font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.035em; color: var(--rt-ink);
}
.rt-hero .rt-lead { margin: 0 0 28px; font-size: 1.1875rem; line-height: 1.5; color: var(--rt-ink2); max-width: 520px; }
.rt-platform { margin: 14px 0 0; font-size: 13px; color: var(--rt-ink3); }

/* Mac App Store button: a standard filled macOS push button */
.rt-hero .store-btn {
  background: var(--rt-ink); border-color: var(--rt-ink); color: var(--rt-bg);
  border-radius: 10px; padding: 10px 18px;
}
.rt-hero .store-btn:hover { background: var(--rt-accent); border-color: var(--rt-accent); color: #fff; }

/* ── The window mock ──────────────────────────────────────────────────── */
.rt-window {
  background: var(--rt-bg); border-radius: 11px; overflow: hidden;
  box-shadow: var(--rt-window-shadow); font-size: 13px;
}
.rt-titlebar {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  background: var(--rt-titlebar); border-bottom: 1px solid var(--rt-line);
}
.rt-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.rt-dot:nth-child(2) { background: #febc2e; }
.rt-dot:nth-child(3) { background: #28c840; }
.rt-titlebar strong { margin-left: 14px; font-size: 13.5px; font-weight: 600; color: var(--rt-ink); }

.rt-throughput {
  display: flex; align-items: flex-end; gap: 18px; padding: 16px 18px 14px;
  background: var(--rt-sidebar); border-bottom: 1px solid var(--rt-line);
}
.rt-speed { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--rt-accent); font-variant-numeric: tabular-nums; }
.rt-speed small { font-size: 17px; font-weight: 500; letter-spacing: 0; margin-left: 3px; }
.rt-throughput-meta { font-size: 12px; color: var(--rt-ink2); line-height: 1.5; }
.rt-throughput-meta b { font-weight: 400; color: var(--rt-ink); }
.rt-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 40px; min-width: 60px; }
.rt-bars i { flex: 1; background: var(--rt-accent); opacity: 0.35; border-radius: 1px; }
.rt-bars i:nth-last-child(-n+10) { opacity: 0.85; }

.rt-queue { padding: 10px 12px 12px; }
.rt-queue .rt-caption { display: flex; justify-content: space-between; padding: 4px 6px 8px; font-size: 11px; }
.rt-queue .rt-caption span:last-child { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rt-row { padding: 9px 8px 10px; border-radius: 8px; }
.rt-row + .rt-row { margin-top: 2px; }
.rt-row-top, .rt-row-meta { display: flex; justify-content: space-between; gap: 12px; }
.rt-row-top span, .rt-row-meta span { min-width: 0; overflow-wrap: anywhere; }
.rt-row-top { font-size: 13.5px; font-weight: 500; margin-bottom: 7px; color: var(--rt-ink); }
.rt-row-top span:last-child { font-size: 12px; font-weight: 400; color: var(--rt-ink2); }
.rt-row-meta { margin-top: 6px; font-size: 11.5px; color: var(--rt-ink2); font-variant-numeric: tabular-nums; }
.rt-row-meta a, .rt-row-meta em { font-style: normal; color: var(--rt-accent); font-weight: 500; }
.rt-row.is-selected { background: var(--rt-accent-fill); }
.rt-row.is-selected .rt-row-top,
.rt-row.is-selected .rt-row-meta em { color: #fff; }
.rt-row.is-selected .rt-row-top span:last-child,
.rt-row.is-selected .rt-row-meta { color: var(--rt-on-accent2); }
.rt-row.is-failed .rt-row-top span:last-child,
.rt-row.is-failed .rt-row-meta span:first-child { color: var(--rt-danger); }

/* Segment strip: one block per range, filled from the left (SegmentStrip.swift) */
.rt-strip { display: flex; gap: 1px; height: 6px; }
.rt-strip i {
  position: relative; flex: 1; background: var(--rt-track); border-radius: 2px; overflow: hidden;
}
.rt-strip i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: var(--rt-accent); border-radius: 2px;
}
.rt-row.is-selected .rt-strip i { background: rgba(255, 255, 255, 0.26); }
.rt-row.is-selected .rt-strip i::after { background: #fff; }
.rt-row.is-paused .rt-strip i::after { background: var(--rt-ink3); opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
  .rt-strip.is-live i::after { animation: rt-fill var(--d, 6s) linear infinite; }
}
@keyframes rt-fill { from { width: var(--p, 0%); } to { width: 100%; } }

.rt-statusbar {
  display: flex; justify-content: space-between; padding: 8px 16px;
  background: var(--rt-status); border-top: 1px solid var(--rt-line);
  font-size: 11.5px; color: var(--rt-ink2);
}

/* ── Stat chips ───────────────────────────────────────────────────────── */
.rt-facts {
  max-width: 900px; margin: 0 auto; padding: 0 24px 8px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.rt-fact {
  background: var(--rt-bg); border: 1px solid var(--rt-line); border-radius: 999px;
  padding: 7px 16px; font-size: 14px; color: var(--rt-ink2);
}
.rt-fact strong { font-weight: 600; color: var(--rt-accent); font-variant-numeric: tabular-nums; }

/* ── Section heads ────────────────────────────────────────────────────── */
.rt-section-head { max-width: 760px; margin: 0 auto; padding: 72px 24px 26px; text-align: center; }
.rt-section-head .rt-caption { display: block; margin-bottom: 10px; }
.rt-section-head h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; color: var(--rt-ink); }
.rt-section-head p { margin: 0 auto; max-width: 580px; font-size: 1.0625rem; color: var(--rt-ink2); }

/* ── Screenshots ──────────────────────────────────────────────────────── */
.rt-shots {
  max-width: 1280px; margin: 0 auto; padding: 8px 24px 32px;
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rt-shot { flex: 0 0 min(760px, 86vw); margin: 0; scroll-snap-align: center; }
.rt-shot img {
  width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: var(--rt-card-shadow);
}
.rt-shot figcaption { margin-top: 12px; font-size: 14px; color: var(--rt-ink2); text-align: center; }
.rt-shots::-webkit-scrollbar { height: 8px; }
.rt-shots::-webkit-scrollbar-track { background: var(--rt-track); border-radius: 999px; }
.rt-shots::-webkit-scrollbar-thumb { background: var(--rt-accent); border-radius: 999px; }

/* ── Feature grid: FieldBox cards ─────────────────────────────────────── */
.rt-features {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
}
.rt-feature {
  background: var(--rt-bg); border: 1px solid var(--rt-line); border-radius: 11px; padding: 22px 22px 24px;
}
.rt-feature h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--rt-ink); }
.rt-feature p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rt-ink2); }
.rt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; margin-bottom: 14px;
  background: var(--rt-tip-bg); border: 1px solid var(--rt-tip-border); color: var(--rt-accent);
}
.rt-icon svg { width: 19px; height: 19px; }

/* Tip card: context, not a warning (TipCard) */
.rt-tip {
  max-width: 760px; margin: 18px auto 0; padding: 14px 18px;
  background: var(--rt-tip-bg); border: 1px solid var(--rt-tip-border); border-radius: 8px;
  font-size: 14.5px; line-height: 1.55; color: var(--rt-tip-ink);
}
.rt-tip-wrap { padding: 0 24px; }

/* ── Honest limits list ───────────────────────────────────────────────── */
.rt-limits {
  max-width: 760px; margin: 0 auto; padding: 20px 24px; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 28px;
}
.rt-limits li { position: relative; padding-left: 22px; font-size: 15px; color: var(--rt-ink2); }
.rt-limits li::before { content: "\2715"; position: absolute; left: 0; font-size: 12px; top: 3px; color: var(--rt-ink3); font-weight: 700; }

/* ── Pricing: free vs Pro, as the Pro pane lays it out ────────────────── */
.rt-plans {
  max-width: 900px; margin: 0 auto; padding: 0 24px 104px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px;
}
.rt-plan {
  background: var(--rt-bg); border: 1px solid var(--rt-line); border-radius: 11px; padding: 26px 26px 28px;
}
.rt-plan.is-pro { border-color: var(--rt-accent); box-shadow: var(--rt-card-shadow); }
.rt-plan h3 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--rt-ink); }
.rt-plan .rt-price { margin: 0 0 18px; font-size: 14px; color: var(--rt-ink2); }
.rt-plan .rt-price b { font-size: 17px; color: var(--rt-ink); font-weight: 600; }
.rt-plan ul { list-style: none; margin: 0; padding: 0; }
.rt-plan li { position: relative; padding: 6px 0 6px 26px; font-size: 15px; color: var(--rt-ink); }
.rt-plan li::before {
  content: "\2713"; position: absolute; left: 2px; top: 6px; font-weight: 700; font-size: 13px; color: var(--rt-accent);
}
.rt-plan .rt-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--rt-ink3); }
.rt-badge {
  display: inline-block; margin-bottom: 12px; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--rt-accent) 15%, transparent); color: var(--rt-accent);
  font-size: 11.5px; font-weight: 600;
}

/* ── Legal pages ──────────────────────────────────────────────────────── */
.legal {
  max-width: 760px; margin: 56px auto 96px; padding: 48px 48px 56px;
  background: var(--rt-bg); border-radius: 11px; box-shadow: var(--rt-card-shadow);
}
.legal h1 { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 8px; }
.legal .legal-updated { font-size: 13px; color: var(--rt-ink3); margin: 0 0 36px; }
.legal h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 36px 0 10px; color: var(--rt-ink); }
.legal p, .legal li { color: var(--rt-ink2); font-size: 15.5px; line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--rt-accent); text-decoration: underline; }
.legal a:hover { color: var(--rt-accent-hover); }
.legal .rt-tip { margin: 0 0 8px; max-width: none; }

@media (max-width: 900px) {
  .rt-hero { grid-template-columns: 1fr; padding-top: 64px; gap: 44px; }
}
@media (max-width: 640px) {
  .nav-link { padding: 6px 8px; }
  .rt-bars, .rt-hide-sm { display: none; }
  .rt-throughput { flex-wrap: wrap; }
  .legal { margin: 24px 16px 64px; padding: 32px 22px 40px; }
}