/* ---------- App faces, self-hosted ----------
   The app uses Bricolage Grotesque for display and Hanken Grotesk for body
   (HelloMe/app/src/ui/theme.ts). Both are variable, so one file per family
   covers every weight. Refresh them with tools/fetch-fonts.sh. */
  @font-face{
    font-family:'Bricolage Grotesque';
    src:url('/assets/fonts/bricolage-variable.woff2') format('woff2');
    font-weight:400 800;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Hanken Grotesk';
    src:url('/assets/fonts/hanken-variable.woff2') format('woff2');
    font-weight:400 700;font-style:normal;font-display:swap;
  }

  :root{
    /* Surfaces and text: the app's DARK tokens, verbatim (app/src/ui/theme.ts). */
    --bg:#0a0a0f;
    --bg-2:#111116;
    --card:#17171f;
    --card-muted:rgba(255,255,255,0.06);
    --card-border:rgba(255,255,255,0.10);
    --text:#f4f4f6;
    --text-dim:rgba(244,244,246,0.62);
    --text-faint:rgba(244,244,246,0.40);

    /* The app's accent — purple on a near-black stage. There is no coral or
       amber anywhere in the product; --coral is kept as an alias so older rules
       and any inline styles still resolve to the accent instead of breaking. */
    --accent:#b07cff;
    --on-accent:#0a0a0f;
    --accent-glow: rgba(176,124,255,0.35);
    --coral:var(--accent);
    --coral-glow:var(--accent-glow);

    /* Ambient glow blobs, matching the app's bgGlowAccent / bgGlowGreen */
    --glow-accent: rgba(166,107,255,0.18);
    --glow-green: rgba(31,217,138,0.12);

    /* HelloMe status colors — the literal in-app availability signals */
    --green:#1fd98a;
    --purple:#a66bff;
    --red:#ff4d6d;
    --green-glow: rgba(31,217,138,0.35);
    --purple-glow: rgba(166,107,255,0.35);
    --red-glow: rgba(255,77,109,0.35);
    /* glossy top->bottom dot fills, matching the app icon's shading */
    --green-dot: linear-gradient(180deg,#6ae7b4,#149a60);
    --purple-dot: linear-gradient(180deg,#c4a1ff,#7247b3);
    --red-dot: linear-gradient(180deg,#ff8b9f,#b3364c);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  /* ---------- Background ambient blobs ---------- */
  .bg-blobs{position:fixed;inset:0;z-index:-2;overflow:hidden;}
  /* Two blobs, like the app: purple up top-right, green low-left. */
  /* No scale() in the animation: scaling a 130px-blurred surface makes the
     compositor re-rasterise it every frame, which showed up as scroll jank on
     phones. Translation alone is a cheap composited transform. */
  .blob{position:absolute;border-radius:50%;filter:blur(130px);animation:float 18s ease-in-out infinite;
    will-change:transform;transform:translateZ(0);}
  .blob.b1{width:620px;height:620px;background:var(--glow-accent);top:-180px;right:-160px;animation-duration:26s;}
  .blob.b2{width:560px;height:560px;background:var(--glow-green);bottom:-200px;left:-140px;animation-duration:30s;animation-delay:-8s;}
  .blob.b3{display:none;}
  @keyframes float{
    0%,100%{transform:translate3d(0,0,0);}
    33%{transform:translate3d(60px,-40px,0);}
    66%{transform:translate3d(-40px,50px,0);}
  }
  .noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  /* ---------- Nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 6vw;
    background:rgba(10,10,15,0.72);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    transition:padding 0.3s ease;
  }
  .logo{font-size:24px;font-weight:800;letter-spacing:-0.5px;display:flex;align-items:center;gap:8px;}
  .logo-dot{
    position:relative;flex:none;
    width:11px;height:11px;border-radius:50%;
    background:var(--green-dot);box-shadow:0 0 10px var(--green-glow);
    margin-right:30px; /* room for the two dots drawn by the pseudo-elements */
  }
  .logo-dot::before,.logo-dot::after{
    content:"";position:absolute;top:0;
    width:11px;height:11px;border-radius:50%;
  }
  .logo-dot::before{left:15px;background:var(--purple-dot);box-shadow:0 0 10px var(--purple-glow);}
  .logo-dot::after{left:30px;background:var(--red-dot);box-shadow:0 0 10px var(--red-glow);}
  footer .logo-dot{width:9px;height:9px;margin-right:24px;}
  footer .logo-dot::before,footer .logo-dot::after{width:9px;height:9px;}
  footer .logo-dot::before{left:12px;}
  footer .logo-dot::after{left:24px;}
  .nav-links{display:flex;gap:36px;font-size:14px;font-weight:500;color:var(--text-dim);}
  .nav-links a{color:var(--text-dim);text-decoration:none;transition:color 0.2s;}
  .nav-links a:hover{color:var(--text);}
  .nav-cta{
    background:var(--accent);color:var(--on-accent);border:none;padding:10px 22px;border-radius:999px;
    font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;
    font-weight:700;font-size:14px;cursor:pointer;transition:transform 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-glow);}
  .nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;}

  /* ---------- Section Layout ---------- */
  section{padding:140px 6vw;position:relative;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
    color:var(--accent);margin-bottom:20px;
    padding:6px 16px;border:1px solid rgba(176,124,255,0.28);border-radius:999px;
    background:rgba(176,124,255,0.08);
  }
  h1,h2,h3,h4,.logo,.stat-num,.big,.how-num,.step-circle{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;}
  h1,h2,h3{font-weight:700;letter-spacing:-1.2px;line-height:1.05;}
  h2{font-size:clamp(32px,5vw,56px);margin-bottom:18px;}
  .section-sub{color:var(--text-dim);font-size:clamp(16px,2vw,20px);max-width:680px;margin-bottom:60px;}
  /* Green leads: it's the state the whole product is selling — a friend who is
     free. Green holds flat to 58% and purple only arrives at the very end, so the
     50/50 crossover sits near 79%; it used to sit at 30%, i.e. purple owned the
     phrase. Keeping the blend short also shrinks the teal that any green-to-purple
     ramp has to pass through. (Interpolating in oklab was tried and measured: its
     midpoint comes out LESS saturated than sRGB for this pair, so it is not used.) */
  .gradient-text{
    background:linear-gradient(90deg,var(--green) 0%,var(--green) 58%,var(--purple) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh;display:flex;align-items:center;
    padding-top:120px;
    gap:60px;
  }
  .hero-grid{display:grid;grid-template-columns:1fr;gap:60px;align-items:center;width:100%;text-align:center;}
  .hero h1{font-size:clamp(44px,7.5vw,92px);margin-bottom:24px;}
  .hero p.lead{font-size:clamp(17px,2vw,22px);color:var(--text-dim);max-width:640px;margin:0 auto 36px;}
  .hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px;justify-content:center;}
  .btn-primary{
    background:var(--accent);color:var(--on-accent);border:none;
    padding:16px 32px;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer;
    font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;
    box-shadow:0 0 0 0 var(--accent-glow);transition:all 0.25s ease;
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 32px var(--accent-glow);}
  .btn-secondary{
    background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.18);
    padding:16px 32px;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer;
    transition:all 0.25s ease;
  }
  .btn-secondary:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.05);}
  .hero-stats{display:flex;gap:48px;justify-content:center;}
  .hero-stats .stat-num{font-size:32px;font-weight:800;}
  .hero-stats .stat-label{font-size:13px;color:var(--text-dim);margin-top:4px;}
  /* ---------- Marquee ---------- */
  .marquee-wrap{padding:24px 0;border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);overflow:hidden;contain:paint;}
  .marquee{display:flex;gap:60px;white-space:nowrap;animation:scroll 28s linear infinite;width:max-content;
    will-change:transform;backface-visibility:hidden;}
  /* site.js parks the animation while the strip is off-screen */
  .marquee-wrap.offscreen .marquee{animation-play-state:paused;}
  .marquee span{font-size:15px;font-weight:700;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:14px;}
  @keyframes scroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

  /* ---------- Reveal animation ---------- */
  /* Promoted while animating so the browser composites the fade instead of
     repainting it — the status tiles carry four box-shadow layers (one at 58px
     blur) and repainting those per frame stuttered the scroll right where they
     enter. site.js drops will-change again once each element has landed. */
  .reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease;will-change:opacity,transform;}
  .reveal.visible{opacity:1;transform:translateY(0);}
  .reveal.settled{will-change:auto;}

  /* ---------- Problem stats ---------- */
  .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .stat-card{
    background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:40px 32px;
    transition:transform 0.3s ease,border-color 0.3s ease;
  }
  .stat-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.2);}
  .stat-card .big{font-size:clamp(48px,7vw,72px);font-weight:800;letter-spacing:-2px;}
  .stat-card .label{margin-top:10px;font-size:16px;color:var(--text-dim);font-weight:600;}
  .stat-card.red .big{color:var(--red);}
  .stat-card.purple .big{color:var(--purple);}
  .stat-card.green .big{color:var(--green);}
  .problem-quote{margin-top:48px;padding:32px;border-left:3px solid var(--coral);background:rgba(176,124,255,0.06);
    border-radius:0 16px 16px 0;font-size:18px;color:var(--text-dim);max-width:780px;}

  /* ---------- Status cards (Solution) ---------- */
  .status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:80px;}
  /* The app's "Bold" tile: the whole card fills with the status colour. Text is
     the app's near-black onAccent rather than its white, which the tiles use —
     white on these fills sits under 3:1 and this is a page people have to read. */
  /* Lit like the dots in the mark. The tile body is the app's status colour
     exactly (--tile-base) and the shading uses the hue's own light and deep tones
     — the icon generator's +34%-toward-white and x0.66 — so it gains depth without
     going chalky.

     The 3D comes from lighting the edges rather than a bright outline: light wraps
     the top-left, the surface falls away to the bottom-right, and a small specular
     sits where the dots catch it. Both edge treatments reach ~18px, inside the
     30px padding, so they shade the rim of the tile and never the text. The flat
     white top rim is down from 0.30 to 0.12 — that was the ring. */
  .status-card{
    border-radius:24px;padding:34px 30px;border:none;
    position:relative;overflow:hidden;transition:transform 0.3s ease, box-shadow 0.3s ease;
    color:#fff;
    background-color:var(--tile-base);
    background-image:
      radial-gradient(24% 20% at 22% 8%, rgba(255,255,255,0.18), rgba(255,255,255,0) 74%),
      radial-gradient(76% 62% at 18% 0%, var(--tile-light), transparent 60%),
      radial-gradient(104% 88% at 92% 118%, var(--tile-deep), transparent 58%);
    box-shadow:
      0 22px 58px -20px var(--tile-bloom),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 9px 10px 20px -12px rgba(255,255,255,0.28),
      inset -9px -11px 20px -12px var(--tile-edge);
  }
  .status-card:hover{
    transform:scale(1.02);
    box-shadow:
      0 26px 66px -18px var(--tile-bloom),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 9px 10px 20px -12px rgba(255,255,255,0.28),
      inset -9px -11px 20px -12px var(--tile-edge);
  }
  .status-card.green{--tile-base:#1fd98a;--tile-light:rgba(107,230,178,0.50);--tile-deep:rgba(20,143,91,0.78);--tile-edge:rgba(20,143,91,0.85);--tile-bloom:rgba(31,217,138,0.50);}
  .status-card.purple{--tile-base:#a66bff;--tile-light:rgba(196,157,255,0.50);--tile-deep:rgba(110,71,168,0.52);--tile-edge:rgba(110,71,168,0.75);--tile-bloom:rgba(166,107,255,0.50);}
  .status-card.red{--tile-base:#ff4d6d;--tile-light:rgba(255,137,159,0.50);--tile-deep:rgba(168,51,72,0.50);--tile-edge:rgba(168,51,72,0.72);--tile-bloom:rgba(255,77,109,0.50);}
  /* the app's compact status chip: a translucent pill with a dot and the label */
  .status-chip{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
    padding:7px 15px 7px 12px;border-radius:999px;
    background:rgba(255,255,255,0.22);
    font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;
    font-weight:700;font-size:14px;letter-spacing:0.2px;
  }
  .status-chip .chip-dot{width:9px;height:9px;border-radius:50%;background:#fff;opacity:0.95;}
  .status-card h3{font-size:26px;margin-bottom:8px;letter-spacing:-0.6px;}
  .status-card p{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;font-weight:500;font-size:15px;color:rgba(255,255,255,0.94);}

  .how-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .how-card{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:28px;display:flex;gap:18px;align-items:flex-start;}
  .how-num{flex:none;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--accent));
    display:flex;align-items:center;justify-content:center;font-weight:800;color:#06060a;font-size:16px;}
  .how-card p{color:var(--text-dim);font-size:15px;}
  .how-card strong{color:var(--text);}
  .privacy-row{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
  .pill{background:rgba(255,255,255,0.04);border:1px solid var(--card-border);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;color:var(--text-dim);display:flex;align-items:center;gap:8px;}

  /* ---------- Product steps ---------- */
  .product-wrap{display:grid;grid-template-columns:1fr;gap:60px;}
  .step-list{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
  .step{display:flex;gap:20px;align-items:flex-start;}
  .step-circle{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;background:var(--card);}
  .step h4{font-size:20px;margin-bottom:4px;}
  .step p{color:var(--text-dim);font-size:15px;}
  .diff-banner{margin-top:50px;padding:28px 32px;border-radius:20px;
    background:linear-gradient(135deg,rgba(176,124,255,0.09),rgba(31,217,138,0.08));
    border:1px solid var(--card-border);font-size:15px;color:var(--text-dim);}
  .diff-banner strong{color:var(--text);}

  /* ---------- Competition table ---------- */
  .comp-table{width:100%;border-collapse:separate;border-spacing:0 12px;}
  .comp-table tr{background:var(--card);border:1px solid var(--card-border);}
  .comp-table td{padding:22px 28px;border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);}
  .comp-table td:first-child{border-left:1px solid var(--card-border);border-radius:16px 0 0 16px;font-weight:700;width:220px;}
  .comp-table td:last-child{border-right:1px solid var(--card-border);border-radius:0 16px 16px 0;color:var(--text-dim);}
  .comp-table tr.winner{background:linear-gradient(90deg,rgba(176,124,255,0.13),rgba(31,217,138,0.08));}
  .comp-table tr.winner td{border-color:rgba(176,124,255,0.38);}
  .comp-table tr.winner td:first-child{color:var(--coral);}
  .comp-table tr.winner td:last-child{color:var(--text);font-weight:600;}

  /* ---------- Moat ---------- */
  .moat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .moat-card{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:36px;text-align:left;}
  .moat-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:22px;
    background:linear-gradient(135deg,rgba(176,124,255,0.18),rgba(31,217,138,0.16));}
  .moat-card h3{font-size:20px;margin-bottom:10px;}
  .moat-card p{color:var(--text-dim);font-size:15px;}

  /* ---------- Enterprise ---------- */
  .enterprise-section{background:linear-gradient(180deg,transparent,rgba(31,217,138,0.05),transparent);}
  .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px;}
  .pillar-card{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:36px;}
  .pillar-emoji{font-size:36px;margin-bottom:18px;display:block;}
  .pillar-card h3{font-size:21px;margin-bottom:10px;}
  .pillar-card p{color:var(--text-dim);font-size:15px;}
  .diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .diff-card{background:rgba(255,255,255,0.03);border:1px solid var(--card-border);border-radius:16px;padding:24px;text-align:left;}
  .diff-card .tag{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin-bottom:10px;display:block;}
  .diff-card p{font-size:14px;color:var(--text-dim);}

  /* Healthcare tabs */
  .tabs{display:flex;gap:10px;margin-bottom:32px;flex-wrap:wrap;}
  .tab-btn{background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);padding:12px 24px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:all 0.2s;}
  .tab-btn.active{background:var(--text);color:#06060a;border-color:var(--text);}
  .tab-panel{display:none;}
  .tab-panel.active{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .tab-panel li{list-style:none;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 22px;font-size:15px;color:var(--text-dim);}
  .tab-panel li::marker{content:none;}
  .tab-panel li b{color:var(--text);}

  /* Enterprise features accordion */
  .accordion{display:flex;flex-direction:column;gap:14px;}
  .acc-item{background:var(--card);border:1px solid var(--card-border);border-radius:18px;overflow:hidden;}
  .acc-head{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;cursor:pointer;font-weight:700;font-size:17px;}
  .acc-head .plus{font-size:22px;color:var(--text-dim);transition:transform 0.3s ease;}
  .acc-item.open .plus{transform:rotate(45deg);color:var(--coral);}
  .acc-body{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
  .acc-item.open .acc-body{max-height:600px;}
  .acc-body-inner{padding:0 28px 26px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
  .acc-body-inner div{font-size:14px;color:var(--text-dim);padding-left:18px;position:relative;}
  .acc-body-inner div::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);}

  /* ---------- CTA / Final ---------- */
  .final-cta{
    text-align:center;border-radius:32px;
    background:radial-gradient(circle at 50% 0%,rgba(176,124,255,0.15),transparent 60%),var(--card);
    border:1px solid var(--card-border);padding:90px 6vw;
  }
  .final-cta h2{margin-bottom:18px;}
  .final-cta p{color:var(--text-dim);font-size:18px;max-width:560px;margin:0 auto 40px;}
  .founders{margin-top:50px;color:var(--text-dim);font-size:15px;}
  .founders b{color:var(--text);}

  /* ---------- Footer ---------- */
  footer{padding:60px 6vw 40px;border-top:1px solid var(--card-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;color:var(--text-dim);font-size:14px;}
  footer .logo{font-size:18px;}
  .footer-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .privacy-link{color:var(--coral);text-decoration:none;font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid rgba(176,124,255,0.32);background:rgba(176,124,255,0.07);cursor:pointer;transition:background 0.2s,border-color 0.2s;}
  .privacy-link:hover{background:rgba(176,124,255,0.15);border-color:rgba(176,124,255,0.55);}

  /* ---------- Privacy Modal ---------- */
  .pp-overlay{position:fixed;inset:0;z-index:1000;background:rgba(6,6,10,0.85);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
  .pp-overlay.open{opacity:1;pointer-events:all;}
  .pp-modal{position:fixed;inset:0;z-index:1001;overflow-y:auto;pointer-events:none;transition:transform 0.35s ease,opacity 0.35s ease;transform:translateY(32px);opacity:0;}
  .pp-modal.open{transform:translateY(0);opacity:1;pointer-events:all;}
  .pp-inner{max-width:1100px;margin:60px auto 80px;padding:0 6vw;position:relative;}
  .pp-close{position:sticky;top:20px;float:right;z-index:10;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;margin-bottom:-42px;}
  .pp-close:hover{background:rgba(255,255,255,0.1);color:var(--text);}
  .pp-banner{padding:60px 0 48px;border-bottom:1px solid var(--card-border);clear:both;}
  .pp-banner h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:14px;letter-spacing:-1.5px;}
  .pp-meta{color:var(--text-dim);font-size:13px;display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;}
  .pp-layout{display:grid;grid-template-columns:200px 1fr;gap:60px;padding-top:56px;}
  .pp-toc{position:sticky;top:80px;height:fit-content;}
  .pp-toc-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px;display:block;}
  .pp-toc ul{list-style:none;}
  .pp-toc ul li a{display:block;color:var(--text-dim);text-decoration:none;font-size:13px;padding:6px 10px;border-radius:8px;border-left:2px solid transparent;transition:all 0.2s;}
  .pp-toc ul li a:hover{color:var(--text);background:var(--card);border-left-color:var(--coral);}
  .pp-content section{margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--card-border);}
  .pp-content section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
  .pp-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--card-border);}
  .pp-num{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--purple));color:var(--on-accent);font-weight:800;font-size:13px;}
  .pp-content h3.sec-title{font-size:1.2rem;font-weight:800;letter-spacing:-0.3px;}
  .pp-content h4{font-size:14px;font-weight:700;color:var(--coral);margin:22px 0 10px;letter-spacing:0;}
  .pp-content p{color:var(--text-dim);font-size:15px;margin-bottom:14px;line-height:1.75;}
  .pp-content p:last-child{margin-bottom:0;}
  .pp-content ul{list-style:none;margin:0 0 14px;}
  .pp-content ul li{color:var(--text-dim);font-size:14px;padding:9px 0 9px 16px;position:relative;border-bottom:1px solid rgba(255,255,255,0.04);line-height:1.65;}
  .pp-content ul li:last-child{border-bottom:none;}
  .pp-content ul li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--accent));}
  .pp-content ul li strong{color:var(--text);font-weight:600;}
  .pp-callout{background:rgba(176,124,255,0.07);border:1px solid rgba(176,124,255,0.22);border-left:3px solid var(--coral);border-radius:0 12px 12px 0;padding:16px 20px;color:var(--text-dim);font-size:14px;margin:18px 0;line-height:1.7;}
  .pp-contact{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:28px;margin-top:16px;}
  .pp-contact p{margin-bottom:6px;color:var(--text-dim);font-size:14px;}
  .pp-contact .pp-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;}
  .pp-contact a{color:var(--coral);text-decoration:none;font-weight:500;}
  @media(max-width:860px){.pp-layout{grid-template-columns:1fr;}.pp-toc{display:none;}}

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .nav-links{display:none;}
    .nav-toggle{display:block;}
    section{padding:90px 6vw;}
    .hero-grid,.product-wrap,.step-list{grid-template-columns:1fr;gap:40px;}
    .hero{padding-top:140px;min-height:auto;}
    .stat-grid,.status-grid,.moat-grid,.pillar-grid{grid-template-columns:1fr;}
    .diff-grid{grid-template-columns:repeat(2,1fr);}
    .acc-body-inner,.tab-panel.active{grid-template-columns:1fr;}
    .hero-stats{gap:28px;flex-wrap:wrap;}
    .comp-table td:first-child{width:auto;}
  }


  /* ---------- Standalone legal / content pages ---------- */
  body.legal .pp-modal{position:static;opacity:1;transform:none;pointer-events:auto;overflow:visible;z-index:auto;inset:auto;transition:none;}
  body.legal .pp-inner{margin:110px auto 40px;}
  body.legal .pp-close{display:none;}
  body.legal .pp-toc{top:110px;}
  .back-link{color:var(--text-dim);text-decoration:none;font-size:14px;font-weight:600;transition:color .2s;}
  .back-link:hover{color:var(--text);}
  footer a.privacy-link{text-decoration:none;display:inline-block;}


  /* keep wide tables inside their grid column instead of overflowing the page */
  .pp-content{min-width:0;}
  body.legal .pp-inner{max-width:1180px;}
  @media(min-width:1100px){body.legal .pp-layout{grid-template-columns:210px minmax(0,1fr);gap:52px;}}

  /* ---------- Data cards (rendered from tables in the source docs) ---------- */
  .pp-cards{display:flex;flex-direction:column;gap:12px;margin:18px 0 22px;}
  .pp-card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 20px;}
  .pp-card-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--card-border);}
  .pp-card-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:8px 0;}
  .pp-card-row + .pp-card-row{border-top:1px solid rgba(255,255,255,0.04);}
  .pp-card-label{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);opacity:.75;padding-top:3px;line-height:1.5;}
  .pp-card-val{color:var(--text-dim);font-size:14px;line-height:1.7;}
  .pp-card-val strong{color:var(--text);font-weight:600;}
  @media(max-width:720px){.pp-card-row{grid-template-columns:1fr;gap:4px;}}

  /* ---------- Rich content inside legal pages ---------- */
  .pp-content{min-width:0;}
  body.legal .pp-inner{max-width:1180px;}
  @media(min-width:1100px){body.legal .pp-layout{grid-template-columns:210px minmax(0,1fr);gap:52px;}}
  .pp-content ol{margin:0 0 14px 20px;color:var(--text-dim);font-size:14px;line-height:1.7;}
  .pp-content ol li{padding:5px 0;}
  .pp-content ol li strong,.pp-content ol li code{color:var(--text);}
  .pp-content code{background:rgba(255,255,255,0.07);border:1px solid var(--card-border);border-radius:6px;padding:1px 6px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);}
  .pp-content pre{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:16px 18px;overflow-x:auto;margin:16px 0;}
  .pp-content pre code{background:none;border:none;padding:0;}
  .pp-content a{color:var(--coral);text-decoration:none;font-weight:500;}
  .pp-content a:hover{text-decoration:underline;}
  .pp-content h4{font-size:14px;font-weight:700;color:var(--coral);margin:24px 0 10px;}

  .pp-content section{scroll-margin-top:100px;}

  .pp-content section{padding-top:0;padding-left:0;padding-right:0;}

  /* ---------- Links styled as buttons ---------- */
  a.btn-primary,a.btn-secondary,a.nav-cta{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}

  /* ---------- App store badges (hero) ---------- */
  /* Official store badges. Apple's and Google's artwork must be used as supplied
     and never redrawn, so these are their files, unmodified.

     They are not built to the same spec: Apple's SVG is the badge itself, while
     Google's PNG bakes in 41px of clear space around a 564x168 body — 24% of the
     body height, their required ratio. Matching the two canvases would render
     Apple's badge 49% larger than Google's, so --badge-h sets the BODY height and
     the Google canvas is scaled up by 1/0.672 to compensate. */
  .store-row{--badge-h:48px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:12px;}
  .store-badge{display:inline-flex;align-items:center;border-radius:10px;
    transition:transform 0.2s ease,opacity 0.2s ease;}
  .store-badge img{display:block;height:var(--badge-h);width:auto;}
  .store-badge.gplay img{height:calc(var(--badge-h) / 0.672);} /* cancel the baked-in clear space */
  .store-badge:hover{transform:translateY(-2px);}
  .store-badge:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
  .store-note{font-size:13px;color:var(--text-dim);margin-bottom:44px;text-align:center;}

  /* ---------- Sourced stats / fine print ---------- */
  .stat-src{margin-top:14px;font-size:12px;color:var(--text-dim);opacity:0.75;line-height:1.5;}
  .fine-print{margin-top:22px;font-size:12.5px;color:var(--text-dim);opacity:0.7;}
  .diff-banner a{color:var(--coral);text-decoration:none;font-weight:600;}
  .diff-banner a:hover{text-decoration:underline;}
  .diff-card strong{color:var(--text);}

  /* ---------- Roadmap / status banner ---------- */
  .roadmap-banner{border-radius:20px;padding:26px 30px;border:1px solid rgba(176,124,255,0.28);
    background:rgba(176,124,255,0.07);color:var(--text-dim);font-size:15px;line-height:1.7;}
  .roadmap-banner strong{color:var(--text);}
  .roadmap-banner a{color:var(--accent);text-decoration:none;font-weight:600;}
  .roadmap-banner a:hover{text-decoration:underline;}
  .roadmap-tag{display:inline-block;margin-bottom:12px;font-size:11px;font-weight:800;letter-spacing:2px;
    text-transform:uppercase;color:var(--accent);border:1px solid rgba(176,124,255,0.35);
    background:rgba(176,124,255,0.08);border-radius:999px;padding:5px 14px;}

  /* hero stacks buttons -> badges -> note -> stats, so tighten the gap above the badges */
  .hero .hero-buttons{margin-bottom:26px;}

  /* ---------- Small phones ---------- */
  @media (max-width:640px){
    .how-grid,.diff-grid{grid-template-columns:1fr;}
    .hero-stats{gap:22px;}
    .store-row{--badge-h:44px;}
  }
  .stat-src a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px;}
  .stat-src a:hover{color:var(--text);}

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    .blob,.marquee{animation:none;}
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Partner page ---------- */
  .pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .moat-card.track{display:flex;flex-direction:column;}
  .moat-card.track .tag{
    font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--accent);margin-bottom:14px;display:block;
  }
  .moat-card.track h3{font-size:22px;margin-bottom:12px;}
  .moat-card.track > p{margin-bottom:16px;}
  .track-list{list-style:none;margin:0 0 24px;}
  .track-list li{position:relative;padding-left:20px;margin-bottom:10px;font-size:14.5px;color:var(--text-dim);line-height:1.6;}
  .track-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .track-spacer{flex:1;}
  .moat-card.track .btn-primary,.moat-card.track .btn-secondary{padding:13px 22px;font-size:14.5px;width:fit-content;}
  .swatch-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:26px;}
  .swatches{display:flex;gap:10px;}
  .swatch{width:44px;height:44px;border-radius:12px;border:1px solid var(--card-border);position:relative;}
  .swatch span{
    position:absolute;left:0;right:0;top:calc(100% + 7px);text-align:center;
    font-size:10.5px;letter-spacing:0.4px;color:var(--text-dim);white-space:nowrap;
  }
  .swatches{margin-bottom:22px;}
  .asset-links{display:flex;gap:10px;flex-wrap:wrap;}
  @media (max-width:980px){
    .pair-grid{grid-template-columns:1fr;}
  }

  /* ---------- Post-launch download UI ---------- */
  .store-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,124,255,0.5);}
  .cta-fine{color:var(--text-dim);font-size:14px;margin:-18px auto 0;max-width:560px;}
  .cta-fine a{color:var(--accent);text-decoration:none;font-weight:600;}

  /* ---------- Enterprise: HelloMe Live + verticals ---------- */
  .step-card{position:relative;}
  .step-n{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
    font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;font-weight:700;color:var(--on-accent);
    background:linear-gradient(135deg,var(--green),var(--purple));}
  .moat-card.step-card:nth-child(2) .step-n{background:linear-gradient(135deg,var(--purple),var(--accent));}
  .moat-card.step-card:nth-child(3) .step-n{background:linear-gradient(135deg,var(--accent),var(--red));}

  .v-icon{width:26px;height:26px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;flex:none;}
  .v-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
  .v-tag{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-faint);
    border:1px solid var(--card-border);border-radius:999px;padding:4px 10px;}
  .v-tag.live{color:var(--green);border-color:rgba(31,217,138,0.35);background:rgba(31,217,138,0.08);}

  .live-feature{display:grid;grid-template-columns:minmax(0,1.6fr) auto;gap:28px;align-items:center;margin-bottom:56px;
    padding:34px 36px;border-radius:24px;border:1px solid rgba(176,124,255,0.30);
    background:radial-gradient(120% 140% at 0% 0%,rgba(31,217,138,0.10),transparent 55%),
               radial-gradient(120% 140% at 100% 100%,rgba(176,124,255,0.14),transparent 55%),var(--card);}
  .live-feature .v-icon{width:34px;height:34px;color:var(--green);}
  .live-feature h3{font-size:30px;margin-bottom:10px;letter-spacing:-0.8px;}
  .live-feature h3 span,.v-card h3 span{color:var(--accent);}
  .live-feature p{color:var(--text);font-size:17px;max-width:620px;}
  .live-feature .live-feature-note{color:var(--text-dim);font-size:14.5px;margin-top:10px;}
  .live-feature-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
  .live-feature-cta a{text-align:center;justify-content:center;}

  .v-group{margin-top:40px;}
  .v-group-title{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);
    margin-bottom:16px;font-family:'Hanken Grotesk',sans-serif;}
  .v-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
  .v-card{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:24px;
    transition:transform 0.25s ease,border-color 0.25s ease;}
  .v-card:hover{transform:translateY(-3px);border-color:rgba(176,124,255,0.35);}
  .v-card h3{font-size:19px;margin-bottom:8px;letter-spacing:-0.4px;}
  .v-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

  @media (max-width:820px){
    .live-feature{grid-template-columns:1fr;padding:28px 24px;}
    .live-feature-cta{flex-direction:row;flex-wrap:wrap;}
    .live-feature-cta a{flex:1 1 180px;}
  }

  /* ---------- Demo sign-in (served by functions/demo/_middleware.js) ---------- */
  .gate-body{min-height:100vh;display:flex;}
  .gate{margin:auto;width:100%;max-width:460px;padding:48px 20px;display:flex;flex-direction:column;align-items:center;gap:22px;}
  .gate-logo{text-decoration:none;color:var(--text);}
  .gate-card{width:100%;background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:36px 32px;}
  .gate-card h1{font-size:28px;letter-spacing:-0.8px;margin-bottom:10px;}
  .gate-sub{color:var(--text-dim);font-size:14.5px;margin-bottom:24px;}
  .gate-sub a,.gate-msg a{color:var(--accent);}
  .gate-form{display:flex;flex-direction:column;gap:10px;}
  .gate-form label{font-size:13px;font-weight:600;color:var(--text-dim);letter-spacing:0.4px;}
  .gate-form input[type=password]{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--card-border);
    background:var(--card-muted);color:var(--text);font:inherit;font-size:16px;outline:none;}
  .gate-form input[type=password]:focus{border-color:var(--accent);}
  .gate-form button{margin-top:6px;width:100%;}
  .gate-form button[disabled]{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none;}
  .gate-msg{margin-top:6px;font-size:13.5px;color:var(--red);}
  .gate-back{font-size:14px;color:var(--text-dim);text-decoration:none;}
  .gate-back:hover{color:var(--text);}