:root{
    --pink:#eb0a44; --ink:#1d1d1f; --muted:#6e6e73; --line:#ececf0;
    --bg:#faf8f7; --soft:#f4f1ef; --green:#2da84e; --amber:#c98a1a; --blue:#2f74d0;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  body{ font-family:"bree",-apple-system,sans-serif; font-weight:400; color:var(--ink); background:var(--bg);
    -webkit-font-smoothing:antialiased; }
  .wordmark{ font-family:"confiteria-script",cursive; font-weight:700; }
  a{ text-decoration:none; color:inherit; }
  .wrap{ max-width:1060px; margin:0 auto; padding:0 40px; }

  html{ scroll-behavior:smooth; }

  /* NAV (logo + links left-aligned · login + primary CTA far right — Stripe/Mollie pattern) */
  nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; padding:15px 40px; background:#fff; border-bottom:1px solid var(--line); }
  nav .wordmark{ font-size:32px; color:var(--pink); line-height:1; margin-right:44px; }
  .nav-links{ display:flex; gap:30px; }
  .nav-links a{ font-weight:600; font-size:15.5px; color:var(--ink); opacity:.82; transition:opacity .15s,color .15s; }
  .nav-links a:hover{ opacity:1; color:var(--pink); }
  .nav-right{ margin-left:auto; display:flex; align-items:center; gap:20px; }
  .nav-right a.login{ font-weight:600; font-size:15.5px; transition:color .15s; }
  .nav-right a.login:hover{ color:var(--pink); }
  .btn-nav-cta{ font-weight:700; font-size:15px; background:var(--pink); color:#fff; border-radius:10px; padding:10px 20px; transition:background .15s; }
  .btn-nav-cta:hover{ background:#c60a3c; }
  .nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
  .nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; }
  .nav-toggle span+span{ margin-top:5px; }
  .mobile-menu{ display:none; }
  @media(max-width:820px){
    .nav-links{ display:none; }
    .nav-right .login{ display:none; }
    .nav-toggle{ display:block; }
    nav{ padding:14px 22px; }
    .mobile-menu.open{ display:flex; flex-direction:column; position:fixed; top:61px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 14px 26px rgba(30,20,25,.10); padding:8px 22px 16px; z-index:49; }
    .mobile-menu.open a{ font-weight:600; font-size:16px; color:var(--ink); padding:13px 2px; border-bottom:1px solid var(--line); }
    .mobile-menu.open a:last-child{ border-bottom:0; color:var(--pink); }
  }

  /* HERO */
  .hero{ background:linear-gradient(135deg,#f0503c 0%,#e83e6e 55%,#ef79a6 100%); color:#fff; padding:70px 40px 82px; text-align:center; }
  .hero .wordmark{ font-size:clamp(84px,14vw,140px); line-height:.9; color:#fff; margin-bottom:6px; }
  .hero h1{ font-weight:800; font-size:clamp(32px,5vw,50px); letter-spacing:-.01em; margin-bottom:16px; }
  .hero p.desc{ font-weight:400; font-size:clamp(17px,2.2vw,21px); max-width:40ch; margin:0 auto 28px; opacity:.94; line-height:1.5; }
  .btn-primary{ background:#fff; color:var(--pink); font-weight:700; font-size:18px; border:0; border-radius:12px; padding:15px 34px; box-shadow:0 8px 24px rgba(0,0,0,.15); display:inline-block; cursor:pointer; font-family:"bree",sans-serif; }
  .hero-note{ display:block; font-weight:400; font-size:14px; opacity:.9; margin-top:14px; }
  .hero-waitlist{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:420px; margin:8px auto 0; }
  .hero-email{ width:100%; border:none; border-radius:12px; padding:15px 18px; font-size:16px; font-family:"bree",sans-serif; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .hero-email::placeholder{ color:#9a9aa0; }
  .hero-waitlist .cf-turnstile{ margin:0 auto; }
  .hero-waitlist .btn-primary{ width:100%; white-space:normal; }
  .hero-sub-error{ color:#fff; font-weight:600; font-size:14px; margin-top:6px; opacity:0; }
  .hero-sub-error.is-visible{ opacity:1; }
  /* Anchor jumps to the waitlist form land clear of the 72px sticky nav (not under it) */
  #waitlist{ scroll-margin-top:96px; }

  /* HIGHLIGHTS */
  .highlights{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:56px 0 8px; }
  .hl{ }
  .hl .dot{ width:40px; height:40px; border-radius:12px; background:rgba(235,10,68,.1); color:var(--pink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; margin-bottom:12px; }
  .hl h3{ font-weight:700; font-size:18px; margin-bottom:6px; }
  .hl p{ font-weight:400; font-size:14.5px; color:var(--muted); line-height:1.5; }

  /* HOW IT WORKS (steps) */
  .howto{ padding:66px 0 8px; scroll-margin-top:78px; }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:42px; }
  .step{ position:relative; text-align:center; }
  .step-num{ width:46px; height:46px; border-radius:50%; background:var(--pink); color:#fff; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; margin:0 auto 15px; position:relative; z-index:1; }
  .step h4{ font-weight:700; font-size:17px; margin-bottom:7px; }
  .step p{ font-size:14px; color:var(--muted); line-height:1.55; max-width:23ch; margin:0 auto; }
  .step:not(:last-child)::after{ content:""; position:absolute; top:23px; left:50%; width:calc(100% + 24px); height:2px; background:var(--line); z-index:0; }
  @media(max-width:800px){ .steps{ grid-template-columns:1fr 1fr; gap:36px 20px; } .step:not(:last-child)::after{ display:none; } }

  /* SHOWCASE ROWS */
  .row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:64px 0; border-top:1px solid var(--line); }
  .row.rev .copy{ order:2; }
  .kicker{ font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--pink); margin-bottom:10px; }
  .row h2{ font-weight:800; font-size:30px; letter-spacing:-.01em; margin-bottom:12px; line-height:1.15; }
  .row p{ font-weight:400; font-size:17px; color:var(--muted); line-height:1.6; }

  /* GENERIC APP-SNAPSHOT FRAME (light) */
  .snap{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 44px rgba(30,20,25,.10); overflow:hidden; }
  .snap-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line); background:#fbfafa; }
  .snap-bar i{ width:10px; height:10px; border-radius:50%; background:#e0dcda; display:inline-block; }
  .snap-bar .sb-title{ margin-left:8px; font-size:12.5px; color:var(--muted); font-weight:600; }
  .snap-body{ padding:20px; }

  /* REAL app screenshots */
  .shot{ border-radius:16px; box-shadow:0 20px 52px rgba(30,20,25,.16); border:1px solid var(--line); overflow:hidden; background:#fff; }
  .shot img{ display:block; width:100%; height:auto; }
  .shot.pay{ max-width:330px; margin:0 auto; border-radius:22px; }
  .shot.pay img{ border-radius:22px; }
  .shotcap{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:12px; font-weight:600; }

  /* CAROUSEL */
  .carousel{ position:relative; }
  .carousel-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .slide{ min-width:100%; scroll-snap-align:center; padding:0 2px; }
  .carousel .shot{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:#fbfafa; }
  .carousel .shot img{ width:100%; height:100%; object-fit:contain; }
  .car-btn{ position:absolute; top:calc(50% - 26px); transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 5px 16px rgba(30,20,25,.16); color:var(--ink); font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; line-height:1; transition:background .15s; }
  .car-btn:hover{ background:var(--soft); }
  .car-btn:disabled{ opacity:.35; cursor:default; }
  .car-prev{ left:10px; } .car-next{ right:10px; }
  .car-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
  .car-dot{ width:8px; height:8px; border-radius:50%; background:#d8d2ce; border:none; cursor:pointer; padding:0; transition:width .2s,background .2s; }
  .car-dot.active{ background:var(--pink); width:22px; border-radius:4px; }
  @media(max-width:800px){ .car-prev{left:6px} .car-next{right:6px} }

  /* pills */
  .pill{ font-weight:600; font-size:11px; letter-spacing:.03em; border-radius:999px; padding:3px 10px; display:inline-block; }
  .pill.paid{ color:var(--green); background:rgba(45,168,78,.12); }
  .pill.sent{ color:var(--blue); background:rgba(47,116,208,.12); }
  .pill.over{ color:#c0392b; background:rgba(192,57,43,.12); }

  /* DASHBOARD snapshot */
  .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
  .stat{ background:var(--soft); border-radius:12px; padding:13px 14px; }
  .stat .lbl{ font-size:12px; color:var(--muted); font-weight:600; }
  .stat .val{ font-size:22px; font-weight:700; margin-top:2px; }
  .stat .val.g{ color:var(--green); } .stat .val.r{ color:#c0392b; }
  .chart{ display:flex; align-items:flex-end; gap:10px; height:96px; padding:8px 4px 0; border-top:1px solid var(--line); }
  .chart .bar{ flex:1; background:linear-gradient(180deg,#f0503c,#e83e6e); border-radius:5px 5px 0 0; opacity:.9; }
  .chart-x{ display:flex; gap:10px; padding:6px 4px 0; }
  .chart-x span{ flex:1; text-align:center; font-size:11px; color:var(--muted); }

  /* INVOICE LIST snapshot */
  .list-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .list-head .t{ font-weight:700; font-size:16px; }
  .list-head .new{ font-size:12.5px; font-weight:600; color:#fff; background:var(--pink); border-radius:8px; padding:6px 12px; }
  .inv-row{ display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; padding:11px 4px; border-top:1px solid var(--line); font-size:14.5px; }
  .inv-row .num{ color:var(--muted); font-weight:600; font-size:13px; }
  .inv-row .cl{ font-weight:600; }
  .inv-row .am{ font-weight:700; text-align:right; }

  /* PAY snapshot */
  .pay{ text-align:center; }
  .pay .plogo{ font-family:"confiteria-script",cursive; font-weight:700; font-size:26px; color:var(--pink); margin-bottom:14px; }
  .pay .from{ font-size:13px; color:var(--muted); font-weight:600; }
  .pay .duelbl{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:14px; }
  .pay .due{ font-size:38px; font-weight:800; letter-spacing:-.01em; margin:2px 0 18px; }
  .pay .paybtn{ display:block; background:var(--pink); color:#fff; font-weight:700; font-size:18px; border-radius:12px; padding:15px; }
  .pay .sec{ font-size:12.5px; color:var(--muted); margin-top:12px; }

  /* SECTION HEADERS (Pricing / About) */
  .section-head{ text-align:center; }
  .kicker.center{ text-align:center; }
  .section-h2{ font-weight:800; font-size:clamp(26px,3.4vw,36px); letter-spacing:-.01em; line-height:1.15; margin:8px auto 12px; max-width:20ch; }
  .section-sub{ color:var(--muted); font-size:17px; max-width:52ch; margin:0 auto; line-height:1.6; }

  /* PRICING */
  .pricing{ padding:78px 0 8px; border-top:1px solid var(--line); scroll-margin-top:78px; }
  .price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:42px auto 0; max-width:700px; align-items:stretch; }
  .price-grid.full{ grid-template-columns:repeat(3,1fr); max-width:none; }
  .plan{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px; display:flex; flex-direction:column; box-shadow:0 12px 32px rgba(30,20,25,.06); }
  .plan.featured{ border:2px solid var(--pink); box-shadow:0 22px 52px rgba(235,10,68,.14); position:relative; }
  .plan-flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--pink); color:#fff; font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:5px 14px; border-radius:999px; white-space:nowrap; }
  .plan-name{ font-weight:700; font-size:16px; color:var(--pink); }
  .plan-price{ font-weight:800; font-size:38px; letter-spacing:-.02em; margin:6px 0 2px; }
  .plan-price span{ font-weight:600; font-size:15px; color:var(--muted); }
  .plan-tag{ font-size:13px; color:var(--muted); margin-bottom:18px; }
  .plan-fee{ font-weight:700; font-size:14.5px; color:var(--pink); margin:3px 0 18px; }
  .soon{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--amber); background:rgba(201,138,26,.14); border-radius:6px; padding:2px 6px; margin-left:5px; vertical-align:middle; white-space:nowrap; }
  .plan-list{ list-style:none; margin:0 0 22px; flex:1; }
  .plan-list li{ font-size:14px; color:var(--ink); padding:7px 0 7px 24px; position:relative; line-height:1.45; }
  /* Ticks are drawn, not typed: some Bree builds draw U+2713 as "\00B9 3" (#1024). */
  .plan-list li::before{ content:""; position:absolute; left:0; top:9px; width:16px; height:16px; background:var(--green); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat; }
  .plan-list li.muted{ color:var(--muted); }
  .plan-list li.muted::before{ content:"\00B7"; color:var(--muted); font-size:18px; top:5px; width:auto; height:auto; background:none; -webkit-mask:none; mask:none; }
  .plan-cta{ display:block; width:100%; text-align:center; background:var(--pink); color:#fff; font-weight:700; font-size:15px; font-family:"bree",sans-serif; border:0; border-radius:11px; padding:12px; cursor:pointer; transition:background .15s; }
  .plan-cta:hover{ background:#c60a3c; }
  .plan-cta.ghost{ background:#fff; color:var(--pink); border:1.5px solid var(--pink); }
  .plan-cta.ghost:hover{ background:rgba(235,10,68,.06); }
  .price-foot{ text-align:center; font-size:13px; color:var(--muted); margin-top:26px; }
  @media(max-width:820px){ .price-grid{ grid-template-columns:1fr; max-width:400px; margin:40px auto 0; } }
  /* struck-through Standard anchor on the Founder price */
  .plan-price .was{ color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(110,110,115,.55); font-weight:700; font-size:23px; margin-right:9px; }
  /* founder spot counter */
  .founder-count{ margin:2px 0 14px; }
  .fc-label{ font-size:13.5px; color:var(--ink); font-weight:700; }
  .fc-joined{ font-size:13.5px; color:var(--ink); font-weight:400; margin-top:4px; }
  /* not-binding reassurance */
  .plan-note-soft{ font-size:12px; color:var(--muted); line-height:1.5; background:var(--soft); border-radius:9px; padding:9px 11px; margin:0 0 16px; }
  /* Founder FULL (sold-out) state — shown when .price-grid.full */
  .standard, .founder-full, .cta-full{ display:none; }
  .price-grid.full .standard{ display:flex; }
  .price-grid.full .founder .plan-flag{ background:var(--muted); }
  .price-grid.full .founder .founder-open{ display:none; }
  .price-grid.full .founder .founder-full{ display:block; }
  .price-grid.full .founder .cta-open{ display:none; }
  .price-grid.full .founder .cta-full{ display:inline; }
  .price-grid.full .founder .plan-cta{ background:var(--soft); color:var(--muted); cursor:default; pointer-events:none; }
  .price-grid.full .founder{ box-shadow:0 12px 32px rgba(30,20,25,.06); }
  .founder-full-tag{ font-weight:800; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--soft); border-radius:8px; padding:9px 10px; text-align:center; margin:2px 0 14px; }

  /* ABOUT */
  .about{ padding:78px 0; border-top:1px solid var(--line); scroll-margin-top:78px; }
  .about-lead{ text-align:center; font-size:18px; color:var(--ink); max-width:62ch; margin:14px auto 0; line-height:1.65; }
  .about-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:46px; }
  .about-point h4{ font-weight:700; font-size:16px; margin-bottom:8px; color:var(--pink); }
  .about-point p{ font-size:15px; color:var(--muted); line-height:1.6; }
  @media(max-width:800px){ .about-points{ grid-template-columns:1fr; gap:24px; } }

  /* FOOTER */
  footer{ text-align:center; padding:46px 40px; border-top:1px solid var(--line); }
  footer .wordmark{ font-size:30px; color:var(--pink); }
  footer .tag{ font-weight:400; color:var(--muted); font-size:15px; margin-top:4px; }

  /* === v2: PHONE FRAME (client pay screen) === */
  .phone{ max-width:250px; margin:0 auto; background:#1d1d1f; border-radius:36px; padding:9px; box-shadow:0 26px 58px rgba(30,20,25,.24); }
  .phone .screen{ border-radius:28px; overflow:hidden; background:#fff; line-height:0; }
  .phone .screen img{ width:100%; display:block; }

  /* === v2: CAROUSEL counter + higher-contrast dots === */
  .car-count{ position:absolute; top:12px; right:12px; background:rgba(29,29,31,.74); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:999px; z-index:3; }
  .car-dot{ background:#c3bdb9; }

  /* === v2: RESERVE modal === */
  .modal-overlay{ position:fixed; inset:0; background:rgba(29,20,25,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
  .modal-overlay.open{ display:flex; }
  .modal{ background:#fff; border-radius:20px; width:100%; max-width:400px; padding:34px 30px 26px; box-shadow:0 30px 70px rgba(30,20,25,.30); position:relative; text-align:center; }
  .modal h3{ font-weight:800; font-size:23px; margin-bottom:6px; }
  .modal .m-plan{ font-size:14.5px; color:var(--muted); margin-bottom:20px; }
  .modal .m-plan b{ color:var(--pink); }
  .modal-form{ display:flex; flex-direction:column; gap:11px; }
  .modal-form input{ border:1px solid var(--line); border-radius:11px; padding:14px 16px; font-size:16px; font-family:"bree",sans-serif; color:var(--ink); }
  .modal-form button{ background:var(--pink); color:#fff; font-weight:700; font-size:16px; border:0; border-radius:11px; padding:14px; cursor:pointer; transition:background .15s; }
  .modal-form button:hover{ background:#c60a3c; }
  .modal .m-note{ font-size:12.5px; color:var(--muted); margin-top:15px; line-height:1.5; }
  .modal-close{ position:absolute; top:13px; right:15px; background:none; border:0; font-size:23px; color:var(--muted); cursor:pointer; line-height:1; }
  .modal .m-done{ display:none; }
  .modal.done .modal-form, .modal.done .m-plan, .modal.done .m-note{ display:none; }
  .modal.done .m-done{ display:block; }
  .tick-i{ vertical-align:-2px; }
  .m-done .m-check{ width:52px; height:52px; border-radius:50%; background:rgba(45,168,78,.14); color:var(--green); font-size:26px; display:flex; align-items:center; justify-content:center; margin:2px auto 15px; font-weight:800; }
  .m-done p{ font-size:15px; color:var(--muted); line-height:1.6; }

  /* === v2: HERO hook + anti-spam === */
  .hero-hook{ display:block; font-weight:700; font-size:15.5px; margin-top:16px; color:#fff; }
  .hero-note{ max-width:44ch; margin-left:auto; margin-right:auto; }

  /* === v2: FOOTER links === */
  .foot-links{ display:flex; gap:22px; justify-content:center; margin-top:18px; }
  .foot-entity{ font-size:13.5px; color:var(--muted); margin-top:18px; line-height:1.6; }
  .foot-links a{ font-size:13.5px; color:var(--muted); font-weight:600; transition:color .15s; }
  .foot-links a:hover{ color:var(--pink); }

  /* === v2: showcase nav anchor === */
  #see{ scroll-margin-top:78px; }

  /* === geo-gate: coming-soon waitlist for unsupported markets === */
  .geo-only{ display:none; }
  body.geo-gate .geo-only{ display:revert; }
  body.geo-gate .hero-normal,
  body.geo-gate .hero-hook,
  body.geo-gate .cta-normal,
  body.geo-gate .nav-links,
  body.geo-gate .btn-nav-cta,
  body.geo-gate .nav-toggle,
  body.geo-gate .mobile-menu,
  body.geo-gate #how,
  body.geo-gate .row,
  body.geo-gate #pricing{ display:none; }
  .geo-picker{ margin:20px auto 0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.92); display:flex; gap:9px; align-items:center; justify-content:center; flex-wrap:wrap; }
  .geo-picker .geo-country{ text-decoration:underline; }
  .geo-select{ font-family:"bree",sans-serif; font-size:13.5px; font-weight:600; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14); color:#fff; border-radius:9px; padding:7px 11px; cursor:pointer; }
  .geo-select option{ color:#1d1d1f; }

  @media(max-width:800px){ .row,.row.rev .copy{grid-template-columns:1fr; order:0} }

/* =====================================================================
   Pre-launch wall refresh (#1014; Supervisor brand review, owner yes 2026-10-22)
   ===================================================================== */
/* The owner's mascot beside the hero text (desktop); above the wordmark (phone) */
.hero{ position:relative; overflow:hidden; }
.hero-cols{ display:flex; align-items:center; justify-content:center; gap:24px; max-width:1180px; margin:0 auto; }
.hero-text{ flex:1 1 560px; min-width:0; }
.hero-art{ flex:0 1 440px; position:relative; height:540px; }
.tb-char{ position:absolute; left:50%; bottom:0; transform:translateX(-46%); width:400px; height:auto; overflow:visible; }
/* The salute arm swings OUTWARD only (away from the head), around the shoulder */
.tb-arm{ transform-box:view-box; transform-origin:262px 280px; animation:waveOut 3.2s ease-in-out infinite; }
@keyframes waveOut{ 0%,70%,100%{ transform:rotate(0deg); } 78%{ transform:rotate(9deg); } 86%{ transform:rotate(2deg); } 94%{ transform:rotate(6deg); } }
.sheet{ position:absolute; z-index:2; width:46px; height:58px; opacity:0; animation:drift 9s linear infinite; }
@keyframes drift{ 0%{ transform:translate(0,0) rotate(0deg); opacity:0; } 12%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translate(-170px,-300px) rotate(-220deg); opacity:0; } }
.bubble{ position:absolute; right:0; top:-6px; background:#fff; color:var(--ink); font-weight:700; font-size:18px; padding:12px 18px;
  border-radius:18px; box-shadow:0 10px 24px rgba(29,29,31,.18); white-space:nowrap; }
.bubble::after{ content:""; position:absolute; right:58px; bottom:-8px; width:16px; height:16px; background:#fff; transform:rotate(45deg); border-radius:3px; }

/* Smaller wordmark: the mascot is the character, "Getting paid, sorted." leads */
.hero .wordmark{ margin:0 0 10px; }
/* The outlined wordmark SVG (#wm sprite), never live Confiteria text (brand rule). */
.wordmark .wm{ display:block; fill:var(--pink); width:104px; height:33px; }
.hero .wordmark .wm{ fill:#fff; width:clamp(176px,20vw,230px); height:auto; aspect-ratio:229.47/72.73; margin:0 auto; }
footer .wordmark .wm{ margin:0 auto; }
.hero .for-who{ font-weight:700; font-size:clamp(19px,2.4vw,24px); line-height:1.35; margin:-4px auto 14px; max-width:32ch; color:#fff; }
.hero-promise{ display:flex; align-items:center; justify-content:center; gap:8px; max-width:46ch; margin:14px auto 0; font-weight:700;
  font-size:15px; line-height:1.45; color:#fff; }
.hero-promise svg{ flex:none; }

/* Custom country picker (owner rule: no native form controls) */
.cc-pick{ position:relative; display:inline-block; }
.cc-btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid #fff; border-radius:9px;
  background:#fff; color:var(--ink); font:600 13.5px "bree",sans-serif; cursor:pointer; }
/* Opens upward: .hero clips overflow for the drifting sheets, and the picker sits at its foot. */
.cc-list{ position:absolute; left:0; bottom:calc(100% + 6px); z-index:60; width:220px; max-height:min(260px,60vh); overflow-y:auto; margin:0; padding:6px;
  list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(29,29,31,.2); text-align:left; }
.cc-list[hidden]{ display:none; }
.cc-list button{ display:block; width:100%; height:38px; padding:0 10px; border:0; border-radius:8px; background:#fff; color:var(--ink);
  font:600 14px "bree",sans-serif; text-align:left; cursor:pointer; }
.cc-list button:hover, .cc-list button[aria-selected="true"]{ background:var(--bg); }
.cc-list button:focus-visible{ background:var(--bg); outline:2px solid var(--pink); outline-offset:-2px; }
.cc-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.cc-list button[aria-selected="true"]{ color:var(--pink); }
.geo-select[hidden]{ display:none; }

/* #1033 White card for the hero small print (owner yes via Supervisor, 2026-10-22).
   Solid white, ink text: every line >=7:1 (ink 16.8, #4a4a50 8.8, error #a3001e 8.15).
   The Founder button is pink with white 18px bold = large text, 4.51:1. Only large
   text stays on the gradient: the headline, the for-who line, and the description
   (now bold, >=18.66px). */
.hero p.desc{ font-weight:700; font-size:clamp(19px,2.2vw,21px); opacity:1; margin-bottom:22px; }
.hero-card{ background:#fff; color:var(--ink); border-radius:20px; padding:22px 22px 18px; max-width:468px; margin:0 auto;
  box-shadow:0 18px 40px rgba(60,10,30,.22); text-align:center; }
.hero-card .hero-waitlist{ margin:0 auto; max-width:none; }
.hero-card .hero-email{ border:1.5px solid var(--muted); box-shadow:none; }
.hero-card .hero-email::placeholder{ color:var(--muted); }
.hero-card .hero-email:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.hero-card .btn-primary{ background:var(--pink); color:#fff; box-shadow:0 8px 20px rgba(235,10,68,.28); }
.hero-card .btn-primary:hover{ background:#c60a3c; }
.hero-card .btn-primary:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.hero-card .hero-promise{ color:var(--ink); }
.hero-card .hero-promise svg{ color:var(--pink); }
.hero-card .hero-hook{ color:var(--ink); }
.hero-card .hero-note{ color:#4a4a50; opacity:1; }
.hero-card .geo-picker{ color:var(--ink); border-top:1px solid var(--line); padding-top:14px; margin-top:16px; }
.hero-card .cc-btn{ border:1.5px solid var(--muted); }
.hero-card .cc-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.hero-card .hero-sub-error{ color:#a3001e; margin-top:10px; }
.hero-card .hero-sub-error:not(.is-visible){ display:none; }

@media (max-width:980px){
  .hero-cols{ flex-direction:column; gap:0; }
  /* phone first screen: the email box and the Founder button show without scrolling */
  .hero{ padding-top:20px; }
  .hero-art{ order:-1; flex:none; width:100%; height:132px; margin-bottom:10px; }
  .tb-char{ width:100px; transform:translateX(-50%); }
  .btn-nav-cta{ white-space:nowrap; font-size:14px; padding:9px 14px; }
  /* Centre the list on the full-width row (the screen), not on the button. */
  .geo-picker{ position:relative; }
  .cc-pick{ position:static; }
  .cc-list{ left:50%; transform:translateX(-50%); width:min(220px, calc(100vw - 32px)); }
  .sheet{ width:30px; height:38px; }
  .bubble{ display:none; }
  .hero .wordmark .wm{ width:190px; }
}
/* Phone nav: full-size wordmark, tight gaps, so the nav fits 320px with no sideways scroll */
@media (max-width:820px){
  /* #1033: keep the email box + whole Founder button on the 390x664 first screen */
  .hero{ padding-left:16px; padding-right:16px; }
  .hero-card{ padding:16px 16px 14px; border-radius:18px; }
  .hero-card .btn-primary{ padding:14px 14px; }
  .hero p.desc{ line-height:1.35; margin-bottom:16px; }
  .hero .for-who{ margin-bottom:10px; }
  nav .wordmark{ margin-right:12px; }
  .nav-right{ gap:12px; }
}
@media (max-width:360px){
  nav{ padding:14px 16px; }
  .nav-right{ gap:6px; }
  .btn-nav-cta{ padding:9px 12px; }
}
/* 320px with the fallback font (before Bree loads) still fits */
@media (max-width:340px){ .btn-nav-cta{ font-size:13px; padding:8px 10px; } }
@media (prefers-reduced-motion:reduce){ .tb-arm, .sheet{ animation:none; } .sheet{ opacity:.9; } }

/* Waitlist confirmation page (#1031): gradient + mascot + ink-on-white card */
.confirm-hero{ min-height:calc(100vh - 64px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:32px 16px 56px; }
.confirm-art{ position:relative; width:160px; height:200px; }
.confirm-art .tb-char{ width:160px; }
.confirm-card{ background:#fff; color:var(--ink); border-radius:20px; padding:26px 24px 22px; max-width:440px; width:100%; text-align:center; box-shadow:0 18px 40px rgba(60,10,30,.22); }
.hero .confirm-title{ font-weight:800; font-size:24px; line-height:1.25; letter-spacing:0; margin-bottom:10px; color:var(--ink); }
@media (max-width:820px){ .confirm-art, .confirm-art .tb-char{ width:120px; } .confirm-art{ height:150px; } .confirm-hero{ justify-content:flex-start; padding-top:28px; } }
.confirm-card p{ font-size:16px; line-height:1.5; color:var(--ink); }
.confirm-back{ display:inline-block; margin-top:18px; background:var(--pink); color:#fff; font-weight:700; font-size:16px; border-radius:11px; padding:12px 22px; text-decoration:none; }
button.confirm-back{ border:0; cursor:pointer; font-family:"bree",sans-serif; }
.confirm-back:hover{ background:#c60a3c; }
.confirm-back:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }