:root {
      /* Surfaces — light cool-blue → deep navy (user-chosen combination) */
      --sand:        #F0F5FA;  /* page base (light cool-blue) */
      --sand-2:      #FAFCFE;  /* raised cards */
      --mist:        #E1EAF3;  /* alternating pale-blue band */
      /* Depth — blues that deepen down the page */
      --deep:        #122540;  /* deep navy (deep band / footer) */
      --ocean:       #1B4A85;  /* mid blue (free band) */
      --teal:        #1E7FD4;  /* primary accent (links/CTAs) */
      --teal-bright: #3DA0F0;  /* hover / highlight */
      /* Brand echo (personal-best dot only) */
      --pulse:       #34D058;
      /* Text */
      --ink:         #122540;
      --ink-soft:    #4F6B85;
      --on-deep:     #E8F1FB;
      --on-deep-soft:#9DBEE0;

      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;

      --t-mega: clamp(2.1rem, 6.5vw, 5.5rem);
      --t-h1:   clamp(2rem, 4.5vw, 3.5rem);
      --t-h2:   clamp(1.25rem, 2vw, 1.6rem);
      --t-lead: clamp(1.15rem, 1.6vw, 1.4rem);
      --t-body: 1.0625rem;
      --t-small: 0.9rem;

      --measure: 1080px;
      --r-lg: 28px;
      --r-md: 16px;
      --r-pill: 999px;
      --shadow: 0 18px 40px rgba(11, 42, 58, 0.10);
      --shadow-lg: 0 30px 70px rgba(11, 42, 58, 0.22);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--sand);
      color: var(--ink);
      font-size: var(--t-body);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    h1, h2, h3 { overflow-wrap: break-word; }

    /* ---------- Bands ---------- */
    .band { width: 100%; }
    .band--sand  { background: var(--sand); }
    .band--mist  { background: var(--mist); }
    .band--deep  { background: var(--deep); color: var(--on-deep); }
    .band--ocean { background: var(--ocean); color: var(--on-deep); }
    .inner {
      max-width: var(--measure); margin: 0 auto;
      padding: clamp(4rem, 9vw, 8rem) 2rem;
    }
    .measure { max-width: 680px; }

    /* ---------- Nav ---------- */
    nav {
      position: fixed; top: 0; width: 100%; z-index: 100;
      transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
      border-bottom: 1px solid transparent;
    }
    nav.scrolled {
      background: rgba(252, 250, 246, 0.85);
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      border-bottom-color: rgba(11, 42, 58, 0.08);
      box-shadow: 0 4px 20px rgba(11, 42, 58, 0.04);
    }
    .nav-inner {
      max-width: var(--measure); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      height: 64px; padding: 0 2rem;
    }
    .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
    .nav-brand img { width: 32px; height: 32px; border-radius: 9px; }
    .nav-links { display: flex; gap: 1.75rem; }
    .nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s; }
    .nav-links a:hover { color: var(--teal); }
    .lang-toggle {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: inherit; font-size: 0.82rem; font-weight: 700;
      color: var(--ink-soft); background: rgba(18, 37, 64, 0.06);
      border: 1px solid rgba(18, 37, 64, 0.12); border-radius: var(--r-pill);
      padding: 5px 12px; cursor: pointer; letter-spacing: 0.02em;
      transition: background 0.2s, border-color 0.2s;
    }
    .lang-toggle:hover { border-color: var(--teal); }
    .lang-toggle .sep { color: rgba(18, 37, 64, 0.25); font-weight: 400; }
    .lang-toggle [data-lang] { color: var(--ink-soft); opacity: 0.55; transition: opacity 0.2s, color 0.2s; }
    .lang-toggle [data-lang].active { color: var(--teal); opacity: 1; }
    .lang-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

    /* ---------- Buttons / badges ---------- */
    .store-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .badge-link { display: inline-block; transition: transform 0.2s; }
    .badge-link:hover { transform: translateY(-2px); }
    .badge-link img { display: block; }
    /* Match visible pill heights: Apple SVG pill fills its box; Google PNG pill is 67.2% of its image.
       Google height = Apple height / 0.672 so the visible pills are equal. */
    .badge-apple img  { height: 48px; }
    .badge-google img { height: 71px; }

    /* ---------- Hero ---------- */
    .hero-inner {
      padding-top: clamp(8rem, 16vh, 11rem);
      padding-bottom: clamp(4rem, 9vw, 7rem);
      text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
    .hero-icon {
      width: 104px; height: 104px; border-radius: 24px;
      margin-bottom: 2rem; box-shadow: var(--shadow-lg);
    }
    .hero-inner h1 {
      font-size: var(--t-mega); font-weight: 800;
      letter-spacing: -0.03em; line-height: 1.02;
      max-width: 16ch; margin-bottom: 1.4rem;
    }
    .hero-inner h1 .lead-line { display: block; }
    .hero-inner h1 .accent { color: var(--teal); display: block; margin-top: 0.2em; }
    .hero-inner .lead {
      font-size: var(--t-lead); color: var(--ink-soft);
      max-width: 34ch; margin-bottom: 2.4rem; line-height: 1.5;
    }
    .pulse-row { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 2.2rem; color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; }
    .pulse-dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--pulse);
      box-shadow: 0 0 0 0 rgba(52, 208, 88, 0.5);
      animation: pulse 2.2s infinite;
    }
    @keyframes pulse {
      0%   { box-shadow: 0 0 0 0 rgba(52, 208, 88, 0.5); }
      70%  { box-shadow: 0 0 0 10px rgba(52, 208, 88, 0); }
      100% { box-shadow: 0 0 0 0 rgba(52, 208, 88, 0); }
    }

    /* ---------- Eyebrow / headings ---------- */
    .eyebrow {
      text-transform: uppercase; letter-spacing: 0.14em;
      font-size: 0.78rem; font-weight: 700; color: var(--teal);
      margin-bottom: 1rem;
    }
    .band--deep .eyebrow, .band--ocean .eyebrow { color: var(--teal-bright); }
    h2.big {
      font-size: var(--t-h1); font-weight: 800;
      letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 1.2rem;
    }
    .section-lead { font-size: var(--t-lead); color: var(--ink-soft); line-height: 1.5; }
    .band--deep .section-lead, .band--ocean .section-lead { color: var(--on-deep-soft); }
    p + p { margin-top: 1rem; }

    /* ---------- The Shift: three metrics ---------- */
    .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
    .metric h3 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
    .metric p { color: var(--ink-soft); font-size: 0.95rem; }
    .metric .num { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.6rem; }

    /* ---------- Capability beats ---------- */
    .beat {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 6vw, 5rem); align-items: center;
    }
    .beat--reverse .beat-media { order: 2; }
    .beat-copy .num {
      font-size: 0.95rem; font-weight: 800; color: var(--teal);
      letter-spacing: 0.05em; margin-bottom: 0.8rem;
    }
    .beat-copy h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 1rem; }
    .beat-copy p { color: var(--ink-soft); font-size: var(--t-body); }
    .band--deep .beat-copy p { color: var(--on-deep-soft); }
    .beat-media { display: flex; justify-content: center; }
    .phone {
      width: 268px; max-width: 80%;
      border-radius: 36px; padding: 8px;
      background: linear-gradient(160deg, #163a5c, #0a2138);
      box-shadow: var(--shadow-lg);
    }
    .band--deep .phone { background: linear-gradient(160deg, #1c4a78, #0a1d33); box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
    .phone img { width: 100%; border-radius: 28px; display: block; }

    /* ---------- Deep-water band media ---------- */
    .deep-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
    .deep-list { list-style: none; margin-top: 1.6rem; }
    .deep-list li { padding: 0.55rem 0 0.55rem 1.8rem; position: relative; color: var(--on-deep-soft); }
    .deep-list li::before { content: "›"; position: absolute; left: 0; color: var(--teal-bright); font-weight: 700; font-size: 1.1rem; line-height: 1.5; }
    .deep-list strong { color: var(--on-deep); font-weight: 600; }

    /* ---------- How-to ---------- */
    .howto + .howto { margin-top: clamp(3rem, 7vw, 5rem); }
    .howto-layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
    .howto-single { max-width: 760px; }
    .phone-frame { width: 268px; max-width: 100%; border-radius: 36px; padding: 8px; background: linear-gradient(160deg, #163a5c, #0a2138); box-shadow: var(--shadow-lg); }
    .phone-frame video { width: 100%; border-radius: 28px; display: block; aspect-ratio: 9/16; object-fit: cover; background: #000; }
    .steps { list-style: none; padding: 0; counter-reset: step; }
    .steps li {
      counter-increment: step; position: relative;
      padding: 0.85rem 0 0.85rem 3rem; color: var(--ink-soft);
      font-size: 0.97rem; line-height: 1.5;
      border-bottom: 1px solid rgba(11, 42, 58, 0.08);
    }
    .steps li:last-child { border-bottom: none; }
    .steps li::before {
      content: counter(step); position: absolute; left: 0; top: 0.8rem;
      width: 2rem; height: 2rem; border-radius: 50%;
      background: var(--teal); color: #fff;
      font-weight: 700; font-size: 0.9rem;
      display: flex; align-items: center; justify-content: center;
    }
    .steps li strong { color: var(--ink); display: block; margin-bottom: 0.15rem; font-weight: 700; }

    /* ---------- Free ---------- */
    .free-inner { text-align: center; }
    .free-inner h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 1.2rem; }
    .free-inner .section-lead { max-width: 32ch; margin: 0 auto 2.5rem; }
    .free-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; max-width: 760px; margin: 0 auto; text-align: left; }
    .free-list li { color: var(--on-deep-soft); font-size: 0.95rem; display: flex; align-items: center; gap: 9px; }
    .free-list li::before { content: "\2713"; color: var(--pulse); font-weight: 800; }

    /* ---------- Panels (legal/support) ---------- */
    .panel {
      background: var(--sand-2); border: 1px solid rgba(11, 42, 58, 0.07);
      border-radius: var(--r-md); padding: clamp(1.5rem, 4vw, 2.5rem);
      max-width: 760px; margin: 0 auto;
    }
    .panel + .panel { margin-top: 1.5rem; }
    .panel h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.02em; color: var(--ocean); margin-bottom: 1.2rem; }
    .panel h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 1.4rem; margin-bottom: 0.4rem; }
    .panel p, .panel li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
    .panel ul { padding-left: 1.4rem; margin: 0.5rem 0; }
    .panel li { margin-bottom: 0.25rem; }
    .panel strong { color: var(--ink); }
    .legal-note {
      font-size: 0.85rem; color: var(--ink-soft); font-style: italic;
      background: var(--mist); border-left: 3px solid var(--teal);
      padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem;
    }
    .legal-note:empty { display: none; }

    /* ---------- FAQ accordion ---------- */
    .faq { margin-top: 1.5rem; border-top: 1px solid rgba(18, 37, 64, 0.10); }
    .faq-item { border-bottom: 1px solid rgba(18, 37, 64, 0.10); }
    .faq-item summary {
      list-style: none; cursor: pointer;
      position: relative; display: block;
      padding: 1.05rem 2.5rem 1.05rem 0.25rem;
      font-size: 1.02rem; font-weight: 700; color: var(--ink);
      transition: color 0.2s;
    }
    .faq-item summary sub, .faq-item summary sup { font-weight: 700; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: var(--teal); }
    .faq-item summary::after {
      content: ""; position: absolute; top: 50%; right: 4px;
      width: 10px; height: 10px;
      border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
      transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease;
    }
    .faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
    .faq-item summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
    .faq-a { padding: 0 0.25rem 1.15rem; }
    .faq-a p { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.7; margin: 0; }
    @media (prefers-reduced-motion: reduce) {
      .faq-item summary::after { transition: none; }
    }
    .back-link { color: var(--teal); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
    .back-link:hover { text-decoration: underline; }
    .panel a { color: var(--teal); text-decoration: none; font-weight: 600; }
    .panel a:hover { text-decoration: underline; }

    /* ---------- Footer ---------- */
    footer { text-align: center; padding: 3rem 2rem; }
    footer p { color: var(--on-deep-soft); font-size: var(--t-small); }
    footer p + p { margin-top: 0.5rem; }
    footer a { color: var(--teal-bright); text-decoration: none; }
    footer a:hover { text-decoration: underline; }

    /* ---------- Reveal ---------- */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
    .reveal.in { opacity: 1; transform: none; }

    /* ---------- Focus ---------- */
    a:focus-visible, video:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

    /* ---------- Responsive ---------- */
    @media (max-width: 860px) {
      .beat, .deep-grid, .howto-layout { grid-template-columns: 1fr; }
      .beat--reverse .beat-media { order: 0; }
      .beat-media, .howto-layout > .phone-frame { margin: 0 auto; }
      .metrics { grid-template-columns: 1fr; gap: 1.8rem; }
    }
    @media (max-width: 720px) {
      .nav-inner { padding: 0 1.25rem; height: 58px; }
      /* Section links don't fit on a phone — hide them; keep brand + language toggle.
         The page is a single scroll, so the anchor links aren't essential here. */
      .nav-links a { display: none; }
      .nav-links { gap: 0; }
      .nav-brand span.full { display: inline; }
      .lang-toggle { font-size: 0.8rem; padding: 5px 11px; }
      .inner { padding: clamp(3rem, 12vw, 4rem) 1.5rem; }
      .badge-apple img  { height: 42px; }
      .badge-google img { height: 62px; }
      .phone, .phone-frame { width: 220px; }
      .hero-inner { padding-top: clamp(6.5rem, 14vh, 8rem); }
      .hero-inner h1 { max-width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { opacity: 1; transform: none; transition: none; }
      .pulse-dot { animation: none; }
    }