/* Self-hosted fonts (2026-07-06), replacing the Google Fonts CDN link that
   was on every page. Both files are variable fonts, one file per family
   covers every weight below, matching the exact weights previously
   requested from fonts.googleapis.com (Inter 400/500/600/700, Outfit
   600/700, latin subset only, this site is English-only). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/outfit-latin.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-x: hidden;
}

@media (min-width: 701px) {
  html { scrollbar-gutter: stable; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #1c1c1c;
  color: #a0a8b0;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: #8fb3d9; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Sticky header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Nav ── */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 40px;
  min-height: 72px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.nav-brand img.nav-logo { height: 36px; }
.nav-brand img.nav-text { height: 16px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: center;
}

.nav-links a:last-child {
  position: absolute;
  right: 40px;
}

.nav-links a {
  color: #777;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:hover { color: #ccc; text-decoration: none; }
.nav-links a.nav-active { color: #ccc; }

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #999;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s;
  will-change: transform;
  backface-visibility: hidden;
}

.nav-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.active span:nth-child(2) {
  transform: scale(0);
}

.nav-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  border: none;
  text-align: center;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(180deg, #1e5099 0%, #153975 100%);
  color: #ffffff;
  border: 1px solid rgba(58,123,213,0.3);
  box-shadow: 0 2px 6px rgba(21,57,117,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #2260ad 0%, #1a4585 100%);
}

.btn-ghost {
  background: rgba(4,24,58,0.4);
  color: #8fb3d9;
  border: 1px solid rgba(21,57,117,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn-ghost:hover {
  background: rgba(4,24,58,0.6);
  border-color: rgba(21,57,117,0.7);
}

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 32px;
  text-align: left;
  padding: 72px 40px 64px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

.hero-copy,
.hero-visual { position: relative; z-index: 1; }

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the bloom lives inside the visual so it stays centred on the owl, and it
   fades to nothing well inside its own box, so it never meets a section edge */
.hero-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  background: radial-gradient(circle closest-side,
    rgba(56,116,214,0.32) 0%,
    rgba(30,80,153,0.18) 42%,
    rgba(21,57,117,0.06) 72%,
    transparent 100%);
  pointer-events: none;
}

/* Nothing here may carry a mask. mask-clip is border-box, and WebKit applies
   that clip to this wrapper's drop-shadow as well, even with the mask on the
   child. The bottom fade lives in the file's alpha instead of a CSS mask.

   On a cold load (fresh session, no cache) WebKit rasters this wrapper's
   drop-shadow from the border-box it has at first paint and never re-rasters
   once the image finishes decoding, cutting the ~50px glow off in a flat line
   top and bottom. The 60px padding pushes the border-box past that reach; the
   matching negative margin cancels it back out of the surrounding flex
   layout so nothing shifts. box-sizing is border-box globally, so width is
   inflated by 2x the padding to keep the owl itself at its old rendered size. */
.hero-owl-wrap {
  display: block;
  width: min(calc(100% + 120px), 500px);
  padding: 60px;
  margin: -60px;
}

/* the glow only goes on once the owl has been painted, and index.html adds
   .is-lit to do that. applied any earlier, the shadow silhouettes the image box
   instead of its alpha, and iOS Safari keeps that stale raster until a zoom or a
   reload forces a repaint. */
.hero-owl-wrap.is-lit {
  filter: drop-shadow(0 0 34px rgba(74,140,235,0.36));
}

/* The fade that dissolves the artwork's flat bottom crop is baked into the
   file's own alpha (a linear ramp over the bottom 16%, matching the mask this
   replaces). Keep it in the file: a CSS mask here clips the wrapper's glow. */
.hero-owl {
  display: block;
  width: 100%;
  height: auto;
}

.hero-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #aecdf0;
  letter-spacing: 0.5px;
  padding: 6px 18px;
  border: 1px solid rgba(58,123,213,0.55);
  border-radius: 24px;
  background: rgba(30,80,153,0.24);
  margin-bottom: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

.hero h1 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.hero h1 span { color: #7aa2cc; }

.hero p {
  font-size: 18px;
  color: #777;
  margin-bottom: 40px;
  max-width: 520px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 15px;
}

/* ── Hero "works on" browsers ── */
.hero-browsers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 34px;
}

.hero-browsers-label {
  font-size: 12px;
  color: #666;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.hero-browser-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-browser {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.hero-browser-icon {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  display: block;
  transition: opacity 0.25s ease;
}

.hero-browser .bi-mono { opacity: 0.9; }
.hero-browser .bi-color { opacity: 0; }

.hero-browser:hover .bi-mono { opacity: 0; }
.hero-browser:hover .bi-color { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-browser-icon { transition: none; }
}

/* ── Mobile hand-off ──
   Touch-primary devices only. Deliberately not a width query: a narrow laptop
   window would match that and lose its install path.

   Every prominent "Add to Browser" link on the site carries .install-cta, and
   is followed by an .install-note saying where to install instead. Those links
   point at the Chrome Web Store listing, which cannot install anything on a
   phone or an iPad, so on touch they are a guaranteed dead end. Safe to hide
   precisely because this is not a width query: a touchscreen laptop reports a
   fine primary pointer and keeps its button. */
.install-note { display: none; }

@media (pointer: coarse) and (hover: none) {
  .install-cta { display: none !important; }

  /* One component everywhere. This used to be a bordered box with a working
     hand-off button on the homepage and a bare grey sentence on every other
     page, so the pages that most needed a next step were the ones that offered
     none. Same box, same button, same copy, wherever an install button was. */
  .install-note {
    display: block;
    margin: 22px 0;
    padding: 16px 18px;
    background: rgba(143, 179, 217, 0.06);
    border: 1px solid rgba(143, 179, 217, 0.18);
    border-radius: 12px;
    /* No text-align here on purpose. It inherits from whatever section it sits
       in, so it centres inside the centred hero and the centred features band
       and stays left where the surrounding copy is left. Hardcoding left here
       broke the homepage box, which had always been centred by inheritance. */
  }

  /* Qualified with the element on purpose. Page-scoped blocks load after this
     sheet, so a plain `.install-note p` ties with rules like demo.html's
     `.d-final p { margin: 10px auto 0 }` and loses on source order -- which
     zeroed the gap and left the button flush against the text. */
  div.install-note p {
    font-size: 14px;
    color: #9aa3b2;
    line-height: 1.6;
    margin: 0;
  }

  /* The gap lives on the button, not the paragraph's bottom margin, so a page
     that restyles its own paragraphs cannot take it away. */
  div.install-note .install-send { margin-top: 12px; }

  .install-note strong { color: #eef1f6; }

  /* ONLY for the row-flex container on features, where the note has to break
     onto its own line beside a surviving button. This must not be a global
     `flex: 1 0 100%`: flex-grow applies on both axes, and .pricing-card is a
     flex COLUMN, so the note grew to fill the whole card -- 742px tall instead
     of 175px, which is the giant empty box on the pricing page. */
  .fp-cta .install-note { flex-basis: 100%; }
}

/* ── Objection block ──
   No top border. The tint change alone is the section break; a hairline on top
   with nothing matching it at the bottom read as an unfinished edge. */
.ob {
  background: #212229;
}

.ob-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 24px 72px;
}

.ob-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8fb3d9;
  margin: 0 0 14px;
}

.ob-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #eef1f6;
  line-height: 1.15;
  text-wrap: balance;
}

.ob-lead {
  font-size: 16px;
  color: #9aa3b2;
  line-height: 1.7;
  margin-top: 14px;
  max-width: 62ch;
}

.ob-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.ob-half {
  background: #1a1b21;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 18px 20px;
}

.ob-half .ob-h {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 7px;
}

.ob-bad .ob-h { color: #e94560; }

.ob-good { border-color: rgba(94, 214, 166, 0.24); }
.ob-good .ob-h { color: #5ed6a6; }

.ob-half .ob-p {
  font-size: 14px;
  color: #9aa3b2;
  line-height: 1.65;
  margin: 0;
}

.ob-link {
  display: inline-block;
  margin-top: 22px;
  color: #8fb3d9;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.ob-link:hover {
  color: #a7c4e4;
  text-decoration: none;
}

/* ── Steps (1-2-3) ── */
.steps {
  max-width: 1180px;
  margin: 0 auto;
  /* Top padding carries the gap between the tinted objection block above and
     this section. It used to be 20px because the hero ran straight into it. */
  padding: 56px 40px 80px;
  text-align: center;
}

.steps-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  text-wrap: balance;
}

.steps-title span { color: #7aa2cc; }

.steps-sub {
  font-size: 16px;
  color: #777;
  margin-bottom: 46px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}

.step-card {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 30px 24px 26px;
}

.step-num {
  position: absolute;
  top: -17px;
  left: 24px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #1e5099 0%, #153975 100%);
  border: 1px solid rgba(58,123,213,0.4);
  box-shadow: 0 4px 14px rgba(21,57,117,0.5);
}

.step-visual {
  height: 132px;
  border-radius: 12px;
  background: rgba(4,24,58,0.35);
  border: 1px solid rgba(21,57,117,0.35);
  margin: 8px 0 22px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  user-select: none;
}

.step-card h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.step-card > p {
  font-size: 14.5px;
  color: #777;
  line-height: 1.6;
  margin: 0;
}

/* inline link, so the card layout is untouched */
.step-card > p a {
  color: #8fb3d9;
  text-decoration: underline;
  text-decoration-color: rgba(143,179,217,0.35);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.step-card > p a:hover {
  color: #a7c4e4;
  text-decoration-color: rgba(167,196,228,0.75);
}

/* step 1 — install card */
.sv-install {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 12px;
}
.sv-icon { border-radius: 7px; flex-shrink: 0; }
.sv-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sv-meta strong { font-size: 13px; font-weight: 600; color: #e8eef7; }
.sv-meta span { font-size: 11px; color: #6f7f95; }
.sv-btn {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(180deg, #1e5099 0%, #153975 100%);
  border: 1px solid rgba(58,123,213,0.35);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* shared mini browser bar */
.sv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 7px 9px;
}
.sv-dots { display: flex; gap: 4px; flex-shrink: 0; }
.sv-dots i { width: 6px; height: 6px; border-radius: 50%; background: #34415a; }
.sv-url { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); }
.sv-puzzle { display: flex; flex-shrink: 0; color: #7aa2cc; }

/* step 2 — pinned row */
.sv-pin {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(30,80,153,0.16);
  border: 1px solid rgba(58,123,213,0.3);
  border-radius: 8px;
  padding: 8px 10px;
}
.sv-pin-icon { border-radius: 5px; flex-shrink: 0; }
.sv-pin-name { flex: 1; font-size: 12px; color: #e8eef7; }
.sv-pin-btn { display: flex; flex-shrink: 0; color: #7aa2cc; }

/* step 3 — protected window */
.sv-surf { display: flex; flex-direction: column; gap: 12px; }
.sv-shield {
  display: flex;
  justify-content: center;
  color: #5ed6a6;
  filter: drop-shadow(0 0 14px rgba(94,214,166,0.45));
}
.sv-tag {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: #7ce6b8;
  background: rgba(18,50,39,0.9);
  border-radius: 999px;
  padding: 4px 12px;
}

/* trust strip */
.steps-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin-top: 36px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  background: rgba(255,255,255,0.015);
}
.strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #8fa0b8;
}
.strip-item svg { flex-shrink: 0; color: #7aa2cc; }

/* stack the hero before the columns get cramped */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
    padding: 64px 24px 56px;
  }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; margin-top: 10px; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-browsers { align-items: center; }
  .hero-owl-wrap { width: min(calc(70% + 120px), 420px); }
  .hero-visual::before { width: 400px; height: 400px; }
  /* Top padding was 10px, from when the hero ran straight into this section.
     With the tinted objection block above it, that left the 1-2-3 heading
     almost touching the tint edge. */
  .steps { padding: 40px 24px 64px; }
  /* The hero and the steps section both centre at this width, so a
     left-aligned objection block between them was the only thing on the page
     not doing it. Card interiors stay left, since ragged-right reads better
     inside a bordered box. */
  .ob-inner { text-align: center; padding: 48px 24px 52px; }
  .ob-lead { margin-left: auto; margin-right: auto; }
  .ob-half { text-align: left; }
  .steps-title { font-size: 30px; }
  .steps-grid { grid-template-columns: 1fr; gap: 30px; }
  .features-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Features ── */
/* full-bleed band: the change in value separates this section from its
   neighbours, so no hairline rule is needed between it and the family band */
.features {
  padding: 76px 40px 88px;
  background: rgba(255,255,255,0.022);
  text-align: center;
}

.features-title,
.features-sub,
.features-grid {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.features-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  text-wrap: balance;
}

.features-sub {
  font-size: 16px;
  color: #777;
  margin-bottom: 44px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.feature-card:hover {
  border-color: rgba(21,57,117,0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(143,179,217,0.08);
  color: #8fb3d9;
  margin-bottom: 20px;
  border: 1px solid rgba(143,179,217,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/* ── Auth pages ── */
.auth-container {
  max-width: 400px;
  margin: 80px auto 60px;
  padding: 0 20px;
}

.auth-card {
  background: linear-gradient(180deg, #252525 0%, #1f1f1f 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

.auth-card h2 {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 24px;
  text-align: center;
}

.auth-input {
  width: 100%;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px 14px;
  color: #ccc;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
  border-color: #153975;
  box-shadow: 0 0 0 2px rgba(21,57,117,0.25);
}

.auth-input::placeholder { color: #444; }

.auth-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(58,123,213,0.2);
  background: linear-gradient(180deg, #1a4585 0%, #153975 100%);
  color: #ffffff;
  transition: background 0.15s;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}

.auth-btn:hover {
  background: linear-gradient(180deg, #1e4f96 0%, #1a4585 100%);
}

.auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-error {
  background: rgba(233,69,96,0.08);
  border: 1px solid rgba(233,69,96,0.15);
  color: #e94560;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  display: none;
}

.auth-success {
  background: rgba(143,179,217,0.08);
  border: none;
  color: #8fb3d9;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  display: none;
}

.auth-warning {
  background: rgba(234,179,8,0.08);
  border: 1px solid rgba(234,179,8,0.15);
  color: #eab308;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #555;
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #333;
}

.auth-google-btn {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #333;
  background: linear-gradient(180deg, #282828 0%, #222 100%);
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.auth-google-btn:hover {
  background: linear-gradient(180deg, #2e2e2e 0%, #272727 100%);
}

.auth-google-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-footer {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-top: 16px;
}

/* ── Account page ── */
/* ── Account layout (sidebar + content) ── */
.acct-layout {
  display: flex;
  max-width: 860px;
  margin: 80px auto 60px;
  padding: 0 20px;
  gap: 40px;
  min-height: 400px;
}

.acct-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.acct-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: #999;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.acct-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acct-nav-item {
  background: none;
  border: none;
  color: #888;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.acct-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: #bbb;
}

.acct-nav-item.active {
  background: rgba(143,179,217,0.08);
  color: #8fb3d9;
}

.acct-signout {
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  color: #666;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  margin-top: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.acct-signout:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  color: #999;
}

.acct-content {
  flex: 1;
  min-width: 0;
}

.acct-panel {
  display: none;
}

.acct-panel.active {
  display: block;
}

.acct-panel-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.acct-field {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.acct-field-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.acct-field-value {
  font-size: 14px;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-plan-badge {
  font-size: 14px;
  font-weight: 500;
  color: #ccc;
}

.acct-sub-info {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 20px;
}

.acct-upgrade-btn {
  display: inline-block;
  background: linear-gradient(180deg, #1a4585 0%, #153975 100%);
  color: #fff;
  border: 1px solid rgba(58,123,213,0.2);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}

.acct-upgrade-btn:hover {
  opacity: 0.9;
}

.acct-browsers-info {
  font-size: 14px;
  color: #888;
  margin-bottom: 20px;
}

.acct-browsers-badge {
  font-size: 13px;
  color: #9AA0A6;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.acct-browsers-badge.warn {
  color: #e0a94a;
  border-color: rgba(224,169,74,0.3);
  background: rgba(224,169,74,0.08);
}

.acct-browsers-badge.over {
  color: #e94560;
  border-color: rgba(233,69,96,0.3);
  background: rgba(233,69,96,0.08);
}

.acct-browsers-badge-members {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: #888;
}

.acct-browsers-badge-member-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.browser-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.browser-row:last-child { border-bottom: none; }

.browser-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.browser-name {
  font-size: 14px;
  color: #ccc;
  font-weight: 500;
}

.browser-seen {
  font-size: 12px;
  color: #666;
}

.browser-disconnect {
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  color: #888;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.browser-disconnect:hover {
  background: rgba(233,69,96,0.08);
  border-color: rgba(233,69,96,0.3);
  color: #e94560;
}

.browser-current-badge {
  display: inline-block;
  font-size: 11px;
  color: #4ade80;
  margin-left: 8px;
  font-weight: 500;
}

.acct-security-note {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
}

.acct-signout-mobile {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  color: #666;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 32px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.acct-signout-mobile:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  color: #999;
}

/* ── Details section ── */
/* ── Family band (homepage) ── */
.fam {
  padding: 80px 40px 90px;
}

.fam-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .fam-inner { grid-template-columns: 1fr; gap: 32px; }
}

.fam-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7aa2cc;
  margin-bottom: 14px;
}

.fam-copy h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 14px;
  text-wrap: balance;
}

.fam-copy > p {
  font-size: 16px;
  color: #777;
  line-height: 1.7;
  margin-bottom: 26px;
}

.fam-card {
  background: rgba(4,24,58,0.35);
  border: 1px solid rgba(21,57,117,0.4);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: none;
}

.fam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 10px;
}

.fam-head-title { font-size: 14px; font-weight: 700; color: #e8eef7; }
.fam-head-seats { font-size: 12.5px; font-weight: 600; color: #7aa2cc; }

.fam-row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 11px 12px;
}

.fam-av {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0b1526;
  background: #5ed6a6;
}

.fam-av-owner { background: #2a63e6; color: #ffffff; }

.fam-mail {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #dfe7f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fam-mail-muted { color: #8b98ad; }

.fam-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #7ce6b8;
  background: rgba(18,50,39,0.9);
  border-radius: 999px;
  padding: 4px 10px;
}

.fam-tag-owner { color: #9dc0ff; background: rgba(23,45,88,0.9); }

.fam-row-add {
  background: transparent;
  border-style: dashed;
  border-color: rgba(122,162,204,0.3);
}

.fam-plus {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #7aa2cc;
  background: rgba(122,162,204,0.1);
}

/* ── Family section ── */
.family-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 16px;
}

.family-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.family-member-row:last-child { border-bottom: none; }

.family-member-email {
  font-size: 14px;
  color: #ccc;
  flex: 1;
}

.family-member-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 12px;
  text-transform: capitalize;
}

.family-member-status.accepted {
  color: #8fb3d9;
  background: rgba(143,179,217,0.1);
}

.family-member-status.pending {
  color: #d4a853;
  background: rgba(212,168,83,0.1);
}

.btn-resend {
  background: rgba(143,179,217,0.08);
  border: 1px solid rgba(143,179,217,0.2);
  color: #8fb3d9;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 12px;
}

.family-member-row .btn-resend {
  margin-right: 8px;
}

.btn-resend:hover {
  background: rgba(143,179,217,0.14);
}

.btn-remove {
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.btn-remove:hover {
  color: #dc2626;
  background: rgba(220,38,38,0.1);
}

.family-invite-row {
  background: rgba(143,179,217,0.06);
  border: 1px solid rgba(143,179,217,0.12);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.family-invite-row p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
}

.family-invite-actions {
  display: flex;
  gap: 8px;
}

.btn-accept {
  background: linear-gradient(180deg, #1a4585 0%, #153975 100%);
  color: #fff;
  border: 1px solid rgba(58,123,213,0.2);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.btn-decline {
  background: none;
  color: #999;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

#email-status-value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-confirmed {
  color: #4ade80;
}

.email-unconfirmed {
  color: #d4a853;
}

.reset-email {
  color: #999;
  font-size: 14px;
  text-align: center;
  margin: -4px 0 16px;
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.password-form input {
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 12px;
  color: #ccc;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.password-form input:focus {
  border-color: #153975;
  box-shadow: 0 0 0 2px rgba(21,57,117,0.25);
}

.password-form button {
  background: linear-gradient(180deg, #1a4585 0%, #153975 100%);
  color: #fff;
  border: 1px solid rgba(58,123,213,0.2);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 4px;
}

.acct-panel .auth-error,
.acct-panel .auth-success {
  margin-top: 16px;
  margin-bottom: 16px;
}

.family-invite-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.family-invite-form input {
  flex: 1;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 12px;
  color: #ccc;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.family-invite-form input:focus {
  border-color: #153975;
  box-shadow: 0 0 0 2px rgba(21,57,117,0.25);
}

.family-invite-form button {
  background: linear-gradient(180deg, #1a4585 0%, #153975 100%);
  color: #fff;
  border: 1px solid rgba(58,123,213,0.2);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.family-info {
  font-size: 14px;
  color: #9aa0a6;
  line-height: 1.5;
  margin: 0 0 20px;
}

.family-info strong {
  color: #ccc;
}

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 40px;
  color: #444;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1100px;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
}

.footer-links a {
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #999;
}

/* ── Legal pages ── */
.legal-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.legal-container h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.legal-updated {
  color: #555;
  font-size: 13px;
  margin-bottom: 32px;
}

.legal-container h2 {
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
  margin: 28px 0 10px;
}

.legal-container h3 {
  font-size: 15px;
  font-weight: 600;
  color: #999;
  margin: 20px 0 8px;
}

.legal-container p {
  color: #888;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.legal-container ul {
  color: #888;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px 20px;
}

.legal-container strong {
  color: #d0d0d0;
  font-weight: 600;
}

.legal-container a {
  color: #8fb3d9;
  text-decoration: none;
}

.legal-container a:hover {
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .hero h1 { font-size: 34px; }
  .hero { padding: 60px 20px 40px; }
  /* Match the hero's 20px gutter, not the 24px used above this breakpoint,
     or the block's left edge sits 4px inside everything around it. */
  .ob-inner { padding: 44px 20px 48px; }
  .features { padding: 56px 20px 64px; }
  .features-grid { grid-template-columns: 1fr; }
  .features-title { font-size: 27px; }
  .nav { display: flex; justify-content: space-between; padding: 14px 16px; min-height: 60px; }
  .nav-hamburger { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    justify-self: stretch;
    background: rgba(28, 28, 28, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 12px 20px 20px;
    gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .nav-links a:last-child { border-bottom: none; position: static; }
  .hero-actions { flex-direction: column; align-items: center; }
  .fam { padding: 48px 20px 64px; }
  .fam-copy h2 { font-size: 26px; }
  .legal-container { padding: 30px 16px 50px; }
  .auth-container { margin: 60px auto 40px; }
  .acct-layout {
    flex-direction: column;
    margin: 60px auto 40px;
    gap: 0;
  }
  .acct-sidebar {
    width: 100%;
  }
  .acct-sidebar-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .acct-nav {
    flex-direction: row;
    gap: 4px;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .acct-nav-item {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 20px;
  }
  .acct-signout { display: none; }
  .acct-signout-mobile { display: block; }
  .acct-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .acct-field-label { width: auto; }
  .footer {
    padding: 32px 20px;
  }
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
}