/* Styles shared by the homepage and the product pages (recovery, the
   problem, scheduled payments, features, security). Moved out of the
   homepage's inline <style> when its sections became their own pages,
   so each page links one file instead of carrying a copy. Same-origin, so
   style-src 'self' already allows it. */
:root {
  --black: #0a0a0a;
  --gray-900: #171717;
  --gray-600: #525252;
  --gray-400: #a3a3a3;
  --gray-200: #e5e5e5;
  --gray-100: #f5f5f5;
  --white: #ffffff;
  --blue: #3b82f6;
  --green: #3b82f6;
  --green-light: #DBEAFE;
  --brand: #1E3A8A;
  --section-tint: #F4F8FF;
  --amber: #B45309;
  --amber-light: #FEF6E7;
  --amber-edge: #F5E0BC;
  --success: #067647;
  --success-light: #ECFDF3;
  --success-edge: #C7EBD6;
  --loss: #B42318;
  --loss-light: #FEF3F2;
}

.section-tint { background: var(--section-tint); }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand); color: var(--white); }
.font-serif { font-family: 'Newsreader', Georgia, serif; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.95); } }
.animate-pulse-dot { animation: pulse-dot 3s ease-in-out infinite; }

@keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.animate-float { animation: gentle-float 4s ease-in-out infinite; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Demo card */
.demo-card {
  max-width: 540px;
  margin: 0 auto;
  border: 1px solid var(--green);
  border-radius: 16px;
  overflow: hidden;
}
.demo-header {
  padding: 12px 20px;
  background: var(--green-light);
  border-bottom: 1px solid var(--green);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--green);
}
.demo-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.demo-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.demo-body { padding: 24px 20px; }

/* Tabs */


/* Protected scenario (from B) */


/* --- recovery explainer: three stages, each in its own tinted box --- */
.explainer-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 6px;
}
.explainer-sub {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: 18px;
}
/* `start`, not `left`: this template is emitted for all 24 locales,
   including Arabic and Hebrew at dir="rtl", where `left` would strand the
   copy on the wrong edge. Same reason for the logical border below. */
.beats { display: grid; gap: 10px; text-align: start; }
.beat {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 16px;
  border-radius: 10px;
  border: 1px solid;
}
.beat-active { background: var(--section-tint); border-color: var(--green-light); }
.beat-quiet  { background: var(--amber-light); border-color: var(--amber-edge); }
.beat-fired  { background: var(--success-light); border-color: var(--success-edge); }
.beat-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid;
}
.beat-mark svg { width: 15px; height: 15px; }
.beat-active .beat-mark { color: var(--blue); border-color: var(--green-light); }
.beat-quiet  .beat-mark { color: var(--amber); border-color: var(--amber-edge); }
.beat-fired  .beat-mark { color: var(--success); border-color: var(--success-edge); }
.beat-state {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.beat-active .beat-state { color: var(--blue); }
.beat-quiet  .beat-state { color: var(--amber); }
.beat-fired  .beat-state { color: var(--success); }
.beat h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 2px;
}
.beat p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.5; }

/* --- two futures: sits ON the tinted section, no card of its own --- */
.futures-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--gray-600);
  max-width: 34em;
  margin: 0 auto 44px;
}
.futures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 660px;
  margin: 0 auto;
  text-align: start;
}
.future { padding: 0 26px; }
/* border-inline-start puts the hairline BETWEEN the two columns in both
   directions. As border-left it sat on the outer edge of the block in
   Arabic and Hebrew, dividing nothing. */
.future-good { border-inline-start: 1px solid var(--gray-200); }
@media (max-width: 640px) {
  .futures { grid-template-columns: 1fr; }
  .future { padding: 0; }
  .future-good {
    border-inline-start: 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 26px;
    padding-top: 26px;
  }
}
.future-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.future-bad  .future-label { color: var(--loss); }
.future-good .future-label { color: var(--success); }
.future h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--black);
  margin-bottom: 10px;
}
.future-chain { display: grid; gap: 8px; }
.future-chain li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.future-chain .glyph { font-size: 0.7rem; line-height: 1.9; }
.future-bad  .future-chain .glyph { color: var(--loss); }
.future-good .future-chain .glyph { color: var(--success); }
.future-outcome {
  margin-top: 16px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
}
.future-bad  .future-outcome { background: var(--loss-light); color: var(--loss); }
.future-good .future-outcome { background: var(--success-light); color: var(--success); }
.problem-close { max-width: 30em; margin: 0 auto; }
.problem-close h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 16px;
}
.problem-close p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gray-600);
}
.problem-close p + p { margin-top: 16px; }

/* Patent banner */
.patent-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(13, 110, 87, 0.08);
  color: var(--brand);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.patent-banner svg { width: 14px; height: 14px; }

/* ── the close, flanked by the app's two states ─────────────────────
   The phones sit either side of the paragraph that turns the corner from
   "lost forever" to "Cache changes that", so the layout makes the same
   argument the copy does. This block steps outside the section's 720px
   column to fit three tracks. */
.close-screens {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 272px;
  gap: 40px;
  align-items: center;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--gray-200);
}
/* Source order is the reading order: paragraph, then the two states.
   Three-track layout places each item by column rather than reordering
   them, so what a screen reader hears matches what everyone else sees. */
.close-screens .problem-close { grid-column: 2; grid-row: 1; }
.close-screens .state-off     { grid-column: 1; grid-row: 1; }
.close-screens .state-on      { grid-column: 3; grid-row: 1; }
/* Below three tracks the argument still reads top to bottom: the
   paragraph first, then the two states side by side under it. */
@media (max-width: 1040px) {
  .close-screens {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
  }
  /* Stacked, the DOM order is already correct, so nothing is placed
     or reordered here. */
  .close-screens .problem-close,
  .close-screens .state-off,
  .close-screens .state-on { grid-column: auto; grid-row: auto; }
  .close-screens .problem-close { max-width: 34em; }
}
.screen-fig { margin: 0; text-align: center; }
.screen-state {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; margin-bottom: 10px;
}
.state-off .screen-state { color: var(--loss); }
.state-on  .screen-state { color: var(--success); }

/* Both phones are one device, so both are the same height. The quieter
   state simply has empty screen below its cards, exactly as the app does,
   which is also what pins the tab bar to the bottom edge. */
.phone {
  width: 100%; max-width: 272px; margin: 0 auto;
  border: 7px solid #101114; border-radius: 34px; background: var(--white);
  box-shadow: 0 18px 40px -18px rgba(16, 17, 20, 0.45);
  overflow: hidden; text-align: start;
  aspect-ratio: 9 / 19.3; display: flex; flex-direction: column;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px 5px; font-size: 0.5rem; font-weight: 600; color: #3f3f46;
}
.phone-status .sigs { display: flex; gap: 3px; align-items: center; }
.phone-status .sigs i {
  display: block; width: 5px; height: 5px; border-radius: 1px;
  background: #3f3f46; opacity: 0.75; font-style: normal;
}
.phone-body {
  padding: 6px 10px 0; display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 0;
}
.pbanner {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  position: relative; color: var(--white);
  border-radius: 9px; padding: 9px 12px; font-size: 0.6rem; font-weight: 600;
}
.pbanner img { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
/* Both colours are the app's own status tokens: error for the set-up
   call to action, success for the live state. */
.pbanner-off { background: #EF4444; }
.pbanner-on  { background: #34C759; }
/* Only the set-up banner carries the "+". */
.pbanner-off::after {
  content: "+"; position: absolute; inset-inline-end: 11px;
  font-size: 0.8rem; font-weight: 400; line-height: 1;
}
/* The app's PulseDot: a 10px circle of #A6F0C6 against a 22px chip, kept
   to the same proportion here. The halo and the pulse are the site's own
   idiom for a live state, reusing the keyframes the hero card already
   defines. */
.pbanner-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #A6F0C6;
  box-shadow: 0 0 0 3px rgba(166, 240, 198, 0.28);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .animate-pulse-dot, .animate-float { animation: none; }
}
/* The Recovery Wallet row the app shows above the cards once a recovery
   exists: label plus gear, then the wallet itself. */
.ppicker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px; margin-top: 2px;
}
.ppicker-head p { font-size: 0.55rem; color: #6B7280; }
.ppicker-head svg { width: 11px; height: 11px; color: #4B5563; }
.ppicker {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #4B5563; border-radius: 13px;
  padding: 7px 9px; background: var(--white);
}
.ppicker-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: #7C6CE4; flex-shrink: 0;
}
.ppicker-name { flex: 1; min-width: 0; }
.ppicker-name p { font-size: 0.575rem; font-weight: 500; color: #1F2937; }
.ppicker-name .addr { font-size: 0.5rem; font-weight: 400; color: #9CA3AF; }
.ppicker > svg { width: 10px; height: 10px; color: #4B5563; flex-shrink: 0; }
.pcard { border: 1px solid #E5E7EB; border-radius: 11px; overflow: hidden; }
.pcard-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px;
}
.pcard-head h4 { font-size: 0.6rem; font-weight: 500; color: #4B5563; }
.pcard-head::after { content: "+"; font-size: 0.8rem; color: #64748B; line-height: 1; }
.pcard-body {
  border-top: 1px solid #EFF1F4; padding: 16px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.pcard-body svg { width: 34px; height: 34px; color: #6A7290; }
.pcard-body p { font-size: 0.575rem; color: #6B7280; }
.prow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 11px; border-top: 1px solid #EFF1F4;
}
.prow:first-child { border-top: 0; }
.prow p { font-size: 0.575rem; color: #374151; }
.prow .val { font-size: 0.575rem; font-weight: 500; color: var(--brand); }
.prow-ico { display: flex; align-items: center; gap: 8px; }
.prow-ico svg { width: 16px; height: 16px; color: #6A7290; flex-shrink: 0; }
.ptabs {
  display: flex; justify-content: space-between; background: var(--brand);
  border-radius: 11px; padding: 7px 6px; margin: auto 0 8px;
}
.ptab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ptab .chip {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.ptab.on .chip { background: rgba(255, 255, 255, 0.18); }
.ptab .chip svg { width: 11px; height: 11px; color: var(--white); }
.ptab .lbl { font-size: 0.45rem; color: var(--white); font-weight: 500; }
.phome {
  height: 3px; width: 64px; border-radius: 2px; background: #111;
  opacity: 0.75; margin: 0 auto 7px;
}

/* ── Scene cards ───────────────────────────────────────────────────
   The launch story as scroll-driven cards. Each scene is a full-height
   panel pinned to the top of the window; the next one slides up over it
   as you scroll. Content sits in the nav's own column (1100px, 24px in),
   so it lines up with the logo and the language picker at every width —
   the thing a fixed-size video could only manage at one.

   Everything is visible without JavaScript. With it (assets/js/scenes.js,
   same-origin, so no CSP hash), each scene's content reveals as it
   arrives and the figure counts up. Reduced motion gets the still page:
   no reveals, no count, and the panels scroll normally instead of
   stacking. The recovery card's title is the homepage's <h1>; the other
   titles are <p>, so no heading comes before it. */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 72px 0;
  box-shadow: 0 -20px 40px -26px rgba(10, 10, 10, 0.32);
}
.scene:first-child { box-shadow: none; }
/* Stacking is opted into by the script, which gives each scene the `top`
   that pins it only once its whole height has scrolled into view: 0 for a
   scene that fits the window, negative for one taller than it (a short
   laptop, a phone on its side). A plain `top: 0` pins a tall scene early
   and the next one covers its lower half before it is ever seen. Without
   the script the scenes simply scroll, so nothing can be hidden. */
.js-scenes .scene { position: sticky; }
.scene-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.scene-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  text-wrap: balance;
}
.scene-title b { font-weight: 400; color: var(--brand); }
.scene-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}

/* 1 — the figure */
.scene-hook { background: var(--black); text-align: center; }
.scene-est {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.scene-figure {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2.6rem, 10vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 18px;
}
.scene-caption {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  color: var(--gray-400);
  margin-top: 28px;
}
.scene-caption b { font-weight: 500; color: var(--white); }
/* thin arrow under the caption: tells people the page scrolls. Decorative
   (aria-hidden). It reveals like the rest of the card; the drift runs on the
   <svg> so it never fights the reveal's transform on the wrapper, and only
   for people who have not asked for reduced motion. */
.scene-cue {
  width: 16px;
  height: 48px;
  margin: 44px auto 0;
  color: var(--gray-400);
}
.scene-cue svg { display: block; width: 100%; height: 100%; }
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .scene-cue svg { animation: cue-drift 2.4s ease-in-out infinite; }
}

/* 2 — recovery */
.scene-recovery { background: var(--section-tint); }
.scene-recovery .scene-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 48px;
  align-items: center;
}
.scene-card { margin: 0; background: var(--white); width: 100%; }
.scene-card-body { padding: 34px 32px 32px; text-align: center; }
.scene-shield {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.scene-shield svg { width: 30px; height: 30px; }
.scene-card-body .scene-card-heading {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.6rem; font-weight: 400; color: var(--black);
}
.scene-card-body p {
  font-size: 0.95rem; color: var(--gray-600);
  line-height: 1.5; margin-top: 10px;
}
.scene-timer {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--gray-200); text-align: left;
}
.scene-timer-key { font-size: 0.85rem; color: var(--gray-600); white-space: nowrap; }
.scene-timer-val {
  font-size: 1.5rem; font-weight: 600; color: var(--brand);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 3 — the app. Source order is slogan first (the reading order); the
   grid places the phones either side of it, as close-screens does. */
.scene-screens { background: var(--white); }
.scene-screens .scene-inner {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 272px;
  gap: 40px;
  align-items: center;
}
.scene-screens .scene-slogan { grid-column: 2; grid-row: 1; text-align: center; }
.scene-screens .state-off { grid-column: 1; grid-row: 1; }
.scene-screens .state-on { grid-column: 3; grid-row: 1; }
.scene-pill {
  display: inline-block;
  margin-top: 26px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(30, 58, 138, 0.08);
  color: var(--brand);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* 4 — the statement */
.scene-statement { background: var(--section-tint); text-align: center; }

/* The old fifth card, "More than a wallet.", is now the footer. */

/* reveals — only once the script has opted in, so no-JS readers and
   crawlers always see the finished page */
.js-scenes .scene [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js-scenes .scene.is-in [data-reveal] { opacity: 1; transform: none; }

.scene-screens .phone { width: 272px; max-width: none; }
@media (max-width: 900px) {
  .scene-recovery .scene-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .scene-card { max-width: 460px; margin: 0 auto; }
  .scene-timer-val { font-size: 1.25rem; }
  .scene-screens .phone { zoom: 0.8; }
  .scene-screens .scene-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 16px;
  }
  .scene-screens .scene-slogan { grid-column: 1 / -1; grid-row: 1; }
  .scene-screens .state-off { grid-column: 1; grid-row: 2; }
  .scene-screens .state-on { grid-column: 2; grid-row: 2; }
}
/* each step keeps a phone inside half the screen, gutters included */
@media (max-width: 600px) { .scene-screens .phone { zoom: 0.62; } }
@media (max-width: 420px) { .scene-screens .phone { zoom: 0.55; } }
@media (max-width: 360px) { .scene-screens .phone { zoom: 0.47; } }

/* On the homepage the footer sits inside the scene stack, so it slides up
   over the last card the way the old closing card did. It is positioned
   (see the footer's `relative`) so it paints above the sticky cards. */
.scenes > footer { box-shadow: 0 -20px 40px -26px rgba(10, 10, 10, 0.32); }