/* ============================================================
   The marketing site's own styling. The reset, the type scale and
   the buttons it uses live in marketing/base.css, which every
   surface on this design system loads.
   ============================================================ */

  /* ---------- motion and chrome metrics ---------- */
  /* The redesign's four curves: decelerate on the way in, accelerate on the
     way out, standard for state changes, and one overshoot for a press. */
  :root{
    --dec:cubic-bezier(0,0,.2,1); --acc:cubic-bezier(.4,0,1,1);
    --std:cubic-bezier(.2,0,0,1); --spring:cubic-bezier(.3,1.35,.5,1);
    --nav-h:72px;
  }
  [id]{scroll-margin-top:calc(var(--nav-h) + 12px);}

  /* ---------- header · a bar that turns solid and steps aside ---------- */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);
    border-bottom:1px solid transparent;
    transition:transform 320ms var(--dec), background-color 200ms linear, border-color 200ms linear;
  }
  .nav.is-solid{background:color-mix(in srgb, var(--night-1000) 94%, transparent);border-bottom-color:var(--night-800);}
  .nav.is-hidden{transform:translateY(-100%);transition-timing-function:var(--acc);}
  .nav.menu-open{background:var(--night-1000);border-bottom-color:var(--night-800);}
  .nav-in{height:var(--nav-h);display:flex;align-items:center;gap:32px;}

  .brand{display:flex;align-items:center;gap:10px;color:var(--night-0);white-space:nowrap;}
  .brand-logo{height:28px;width:auto;flex:none;color:var(--night-0);}
  .brand-name{font-family:Archivo,sans-serif;font-weight:600;font-size:16px;letter-spacing:-.03em;}

  .nav-links{display:flex;gap:28px;margin-left:auto;}
  .nav-links a{position:relative;padding:8px 0;color:var(--night-300);font-weight:500;font-size:14.5px;line-height:1;}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right;transition:transform 200ms var(--std);
  }
  .nav-links a:hover{color:var(--night-0);}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}

  .nav-cta{display:flex;gap:10px;align-items:center;}
  .nav-app{background:none;border:0;padding:10px 6px;cursor:pointer;color:var(--night-300);font:500 14.5px/1 Inter,sans-serif;}
  .nav-app:hover{color:var(--night-0);}
  .nav .btn{padding:11px 16px;}

  .nav-menu{
    display:none;width:40px;height:40px;place-content:center;gap:5px;cursor:pointer;
    background:none;border:1px solid var(--night-700);border-radius:var(--r-action);
  }
  .nav-menu span{display:block;width:16px;height:1.5px;border-radius:1px;background:var(--night-0);transition:transform 200ms var(--std);}
  .nav-menu[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
  .nav-menu[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg);}

  .mnav{
    position:absolute;left:0;right:0;top:100%;background:var(--night-1000);border-bottom:1px solid var(--night-800);
    opacity:0;transform:translateY(-6px);transition:opacity 200ms var(--acc), transform 200ms var(--acc);
  }
  .mnav[hidden]{display:none;}
  .mnav.open{opacity:1;transform:none;transition:opacity 200ms var(--dec), transform 320ms var(--dec);}
  .mnav-in{display:grid;padding-block:4px 20px;}
  .mnav a,.mnav button{
    display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--night-800);
    padding:16px 0;cursor:pointer;color:var(--night-0);
    font:600 22px/1.2 Archivo,sans-serif;letter-spacing:-.01em;
  }
  .mnav button,.mnav .mnav-app{border-bottom:0;color:var(--royal-200);}

  @media (max-width:880px){
    .nav-links,.nav-app{display:none;}
    .nav-cta{margin-left:auto;}
    .nav-menu{display:grid;}
    .nav-in{gap:16px;}
  }
  @media (max-width:374px){.nav .brand-name{display:none;}}
  @media (min-width:881px){.mnav{display:none;}}

  /* ---------- generic section ---------- */
  section.band{padding:104px 0;}
  @media (max-width:720px){section.band{padding:72px 0;}}
  .band.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .kicker{color:var(--primary);margin-bottom:20px;}

  /* ---------- contact · /contact ---------- */
  /* The trust band's ground and glow, because this page belongs to the site
     and because a form boxed on white made the form look like the content. */
  .reach{position:relative;background:var(--ground);color:var(--night-0);overflow:hidden;padding:168px 0 112px;}
  .reach .glow{
    position:absolute;right:-16%;top:-18%;width:min(900px,92vw);height:min(900px,92vw);pointer-events:none;
    background:radial-gradient(circle at center, rgba(53,87,238,.22) 0%, rgba(6,9,20,0) 66%);
  }
  .reach-in{position:relative;}
  .reach-head h1{
    font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-weight:600;
    font-size:clamp(38px,5.6vw,66px);line-height:1.02;letter-spacing:-.032em;max-width:14ch;
  }
  .reach-head p{margin-top:20px;color:var(--on-ground-soft);font-size:18px;line-height:29px;max-width:34ch;}
  .reach-grid{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;}

  /* Hairline rows, the device the trust band's claims already use. Not cards:
     these are four routes in a list, not four things of equal weight. */
  .routes{display:flex;flex-direction:column;}
  .route{padding:26px 0;border-top:1px solid var(--line-on-ground);}
  .route:last-child{border-bottom:1px solid var(--line-on-ground);}
  .route:first-child{border-top:0;padding-top:0;}
  .route h2{font-size:17px;font-weight:600;letter-spacing:-.012em;}
  .route-what{margin-top:6px;color:var(--night-400);font-size:14.5px;line-height:22px;max-width:42ch;}
  /* :not(.btn) matters — a bare `.route > a` outranks .btn-on-ground on
     specificity and repainted the WhatsApp button in link colours. */
  .route > a:not(.btn){
    display:inline-block;margin-top:12px;color:var(--on-ground-accent);
    font-size:15.5px;text-decoration:none;border-bottom:1px solid rgba(143,166,255,.35);padding-bottom:2px;
  }
  .route > a:not(.btn):hover{color:var(--night-0);border-bottom-color:var(--night-0);}
  .route-first .btn{margin-top:16px;}
  .route-qr{margin-top:22px;}
  .route-qr .qr-svg{
    display:block;width:112px;height:112px;padding:9px;border-radius:10px;background:var(--night-0);
  }

  /* Underline fields, not boxes: on a dark ground a bordered input reads as a
     hole punched in the page. The label rides up when the field has something
     in it, so nothing is unlabelled while it is being filled. */
  .reach-form-h{font-size:17px;font-weight:600;letter-spacing:-.012em;}
  .reach-form{margin-top:26px;display:flex;flex-direction:column;gap:30px;max-width:44ch;}
  .field{position:relative;}
  .field input,.field textarea{
    width:100%;padding:8px 0 10px;font:inherit;font-size:16.5px;color:var(--night-0);
    background:transparent;border:0;border-bottom:1px solid var(--line-on-ground);border-radius:0;
  }
  .field textarea{resize:vertical;line-height:26px;min-height:96px;}
  .field label{
    position:absolute;left:0;top:8px;color:var(--night-400);font-size:16.5px;pointer-events:none;
    transition:transform .16s var(--ease), font-size .16s var(--ease), color .16s var(--ease);
    transform-origin:left top;
  }
  .field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--on-ground-accent);}
  .field input:focus + label,.field textarea:focus + label,
  .field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
    transform:translateY(-22px);font-size:12.5px;color:var(--night-500);
  }
  .field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-24px);}
  .reach-form .btn{align-self:flex-start;}
  .reach-note{color:var(--night-500);font-size:13.5px;}
  .reach-error{
    padding:12px 14px;background:rgba(53,87,238,.16);border:1px solid var(--night-700);
    border-radius:var(--r-field);color:var(--night-0);font-size:14.5px;line-height:21px;max-width:44ch;
  }
  /* Out of the viewport rather than display:none, which some bots check for. */
  .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  .reach-sent{padding-bottom:132px;}
  .sent-next{margin-top:52px;padding-top:32px;border-top:1px solid var(--line-on-ground);max-width:44ch;}
  .sent-next p{color:var(--night-400);font-size:15.5px;line-height:24px;}
  .sent-next .btn{margin-top:16px;}
  .sent-back{
    display:block;margin-top:28px;color:var(--on-ground-accent);font-size:15.5px;
    text-decoration:none;border-bottom:1px solid rgba(143,166,255,.35);padding-bottom:2px;width:fit-content;
  }
  .sent-back:hover{color:var(--night-0);border-bottom-color:var(--night-0);}

  @media (prefers-reduced-motion:reduce){.field label{transition:none;}}
  @media (max-width:900px){
    .reach{padding:132px 0 80px;}
    .reach-grid{grid-template-columns:minmax(0,1fr);gap:56px;margin-top:56px;}
  }
  @media (max-width:720px){
    /* The QR is the way onto a phone from a laptop. On the phone the button is. */
    .route-qr{display:none;}
  }

  /* ---------- legal · /privacy ---------- */
  /* A measure for reading, not for a landing page: a clause read at 90
     characters a line is a clause read twice. */
  .legal{padding-top:152px;}
  .legal-meta{margin-top:14px;color:var(--faint);font-size:13.5px;}
  .legal-lead{margin-top:24px;color:var(--muted);font-size:17px;line-height:27px;max-width:68ch;}
  .legal-toc{margin-top:48px;padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);max-width:68ch;}
  .legal-toc h2{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
  .legal-toc ol{margin:14px 0 0;padding:0 0 0 2px;list-style:none;columns:2;column-gap:32px;}
  .legal-toc li{margin:0 0 7px;font-size:14.5px;line-height:20px;break-inside:avoid;}
  .legal-toc a{color:var(--night-700);}
  .legal-toc a:hover{color:var(--primary);}
  .legal-body{margin-top:56px;max-width:68ch;}
  .legal-section{scroll-margin-top:110px;}
  .legal-section + .legal-section{margin-top:44px;}
  .legal-section h2{font-size:20px;line-height:26px;letter-spacing:-.018em;}
  .legal-section h3{margin-top:26px;font-size:15.5px;line-height:22px;color:var(--night-800);}
  .legal-section p{margin-top:12px;color:var(--night-700);line-height:27px;}
  .legal-section ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
  .legal-section li{position:relative;padding-left:18px;color:var(--night-700);line-height:25px;}
  .legal-section li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--line-strong);}
  .legal-section a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
  @media (max-width:720px){
    .legal{padding-top:120px;}
    .legal-toc{padding:20px;}
    .legal-toc ol{columns:1;}
  }

  /* ---------- team · /team ---------- */
  /* The header sits over a dark hero on the homepage and starts transparent.
     This page has no hero, so the band clears it by hand. */
  .team-band{padding-top:152px;}
  .team-standfirst{margin-top:16px;color:var(--muted);font-size:17px;line-height:26px;max-width:46ch;}
  .team-list{margin-top:56px;display:flex;flex-direction:column;gap:44px;max-width:900px;}
  .team-member{display:flex;gap:32px;align-items:flex-start;}
  .team-photo{flex:none;width:132px;height:132px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface);}
  .team-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .team-body{min-width:0;}
  .team-body h3{font-size:21px;line-height:26px;letter-spacing:-.02em;}
  .team-body ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .team-body li{display:flex;gap:10px;align-items:flex-start;color:var(--night-700);line-height:24px;}
  .team-body li .dot{margin-top:8px;}
  @media (max-width:720px){
    .team-band{padding-top:120px;}
    .team-member{flex-direction:column;gap:18px;}
    .team-photo{width:104px;height:104px;}
    .team-list{gap:40px;}
  }

  /* ---------- footer · every marketing page, ending on the wordmark ---------- */
  .site-foot{position:relative;background:var(--night-1000);color:var(--night-300);border-top:1px solid var(--night-800);padding-top:64px;overflow:hidden;}
  .foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px;}
  .foot h4{font:500 11px/1 "Chivo Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--night-500);margin-bottom:18px;}
  .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  .foot li a{color:var(--night-300);font-size:14.5px;}
  .foot li a:hover{color:var(--night-0);}
  .foot-brand p{color:var(--night-400);font-size:14.5px;line-height:1.6;max-width:30ch;margin-top:16px;}
  .stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  /* Height only: each badge keeps its vendor's aspect ratio, which may not
     be altered, and the 10px gap clears the free space both require. */
  .store-official{display:block;border-radius:var(--r-field);}
  .store-official img{display:block;height:46px;width:auto;}
  .foot-legal{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:56px;padding-block:22px;border-top:1px solid var(--night-800);font-size:13px;color:var(--night-500);}
  .foot-legal a{color:var(--night-400);}
  .foot-legal a:hover{color:var(--night-0);}
  .foot-legal span:first-child{margin-right:auto;}
  .wordmark{font:600 clamp(52px,12vw,190px)/.8 Archivo,sans-serif;letter-spacing:-.045em;color:var(--night-900);white-space:nowrap;margin-top:24px;margin-bottom:-.12em;user-select:none;text-align:center;}
  @media (max-width:960px){.foot{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1/-1;}}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-delay:0ms!important;}
  }