/* ============================================================
   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.
   ============================================================ */

  /* ---------- header · a floating pill ---------- */
  header.site{
    position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 0;
    transition:padding .3s var(--ease);
  }
  header.site.pinned{padding:12px 0;}
  .navbar{
    display:flex;align-items:center;gap:30px;height:60px;
    width:fit-content;max-width:calc(100% - 48px);margin:0 auto;padding:0 8px 0 24px;
    background:rgba(6,9,20,.72);backdrop-filter:blur(14px);
    border:1px solid var(--line-on-ground);border-radius:var(--r-pill);
    transition:background-color .3s var(--ease), border-color .3s var(--ease);
  }
  header.site.light .navbar{background:rgba(255,255,255,.9);border-color:var(--line);box-shadow:var(--elev-1);}
  .brand{display:flex;align-items:center;gap:10px;color:var(--night-0);transition:color .3s var(--ease);}
  header.site.light .brand{color:var(--ink);}
  .brand-logo{height:28px;width:auto;flex:none;color:var(--night-0);transition:color .3s var(--ease);}
  header.site.light .brand-logo{color:var(--primary);}
  .brand-name{font-family:Archivo,sans-serif;font-weight:600;font-size:16px;letter-spacing:-.03em;}
  nav.main{display:flex;gap:26px;}
  nav.main a{
    color:var(--night-400);font-weight:600;font-size:14px;letter-spacing:-.012em;
    transition:color .2s var(--ease);white-space:nowrap;
  }
  nav.main a:hover{color:var(--night-0);}
  header.site.light nav.main a{color:var(--muted);}
  header.site.light nav.main a:hover{color:var(--ink);}
  .nav-cta{margin-left:4px;}
  header.site .nav-cta .btn{background:var(--night-0);color:var(--royal-800);padding:11px 20px;}
  header.site .nav-cta .btn:hover{background:var(--royal-100);}
  header.site.light .nav-cta .btn{background:var(--primary);color:var(--on-primary);}
  header.site.light .nav-cta .btn:hover{background:var(--primary-hover);}

  .menu-btn{display:none;background:transparent;border:0;cursor:pointer;padding:8px;color:currentColor;}
  .menu-panel{
    position:absolute;top:82px;left:16px;right:16px;z-index:70;
    background:var(--ground);border:1px solid var(--line-on-ground);border-radius:var(--r-sheet);
    padding:14px;display:none;flex-direction:column;gap:2px;box-shadow:var(--elev-2);
  }
  .menu-panel.open{display:flex;}
  .menu-panel a{color:var(--night-0);font-weight:600;font-size:15px;padding:13px 14px;border-radius:var(--r-field);}
  .menu-panel a:hover{background:rgba(255,255,255,.06);}
  .menu-panel .btn{margin-top:8px;justify-content:center;}
  @media (max-width:860px){
    nav.main,.nav-cta{display:none;}
    header.site{padding:12px 0;}
    .navbar{height:52px;gap:18px;padding:0 8px 0 16px;}
    .menu-btn{display:flex;}
  }

  /* ---------- hero — a scroll sequence on the brand ground ---------- */
  .hero{position:relative;background:var(--ground);color:var(--night-0);height:235vh;}
  .hero-stage{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .hero .glow{
    position:absolute;pointer-events:none;
    width:min(1240px,135vw);height:min(1240px,135vw);
    left:50%;top:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle at center, rgba(53,87,238,.34) 0%, rgba(15,44,176,.16) 36%, rgba(6,9,20,0) 68%);
  }
  .hero .glow.two{
    left:auto;right:-22%;top:78%;width:min(680px,80vw);height:min(680px,80vw);transform:translateY(-50%);
    background:radial-gradient(circle at center, rgba(29,62,217,.26) 0%, rgba(6,9,20,0) 66%);
  }
  .hero-inner{position:relative;z-index:1;width:100%;max-width:1240px;padding:0 24px;text-align:center;}
  .bigline{
    /* the headline is centred on the viewport, not on the 1240 container */
    width:100vw;margin-left:calc(50% - 50vw);
    font-family:Archivo,sans-serif;font-weight:600;
    font-size:clamp(46px,9.95vw,240px);line-height:.94;letter-spacing:-.048em;white-space:nowrap;
    background:linear-gradient(96deg,var(--night-0) 16%,var(--royal-200) 94%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    will-change:transform;
  }
  .hero-copy{
    position:absolute;left:0;right:0;top:calc(100% + 44px);padding:0 24px;
    display:flex;flex-direction:column;align-items:center;
    opacity:0;will-change:transform,opacity;
  }
  .hero .sub{color:var(--on-ground-soft);font-size:17px;line-height:26px;max-width:52ch;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center;}
  .hero-note{margin-top:16px;color:var(--night-400);display:flex;align-items:center;gap:8px;justify-content:center;}
  .phone-float{
    position:absolute;left:50%;top:50%;z-index:2;
    transform:translate(-50%,-50%);will-change:transform,opacity;
  }
  .hero-roles{
    margin-top:40px;padding-top:24px;border-top:1px solid var(--line-on-ground);
    width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .hero-roles .overline{color:var(--night-500);}
  .roles{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;}
  .role{display:flex;align-items:center;gap:7px;color:var(--night-200);font-weight:600;font-size:12.5px;letter-spacing:-.005em;}

  /* ---------- hero · the opening sequence ---------- */
  /* Two acts assembling the hero's scroll-zero state: the line arrives on an
     empty ground, then the phone and the pill enter together. Two, not three —
     az-black sampled at 400ms goes from headline-alone to both-settled in one
     step, and never shows one without the other.

     CSS rather than JavaScript for two reasons. The script is deferred, so a
     JS-set start state can paint one frame late — on the largest type on the
     site. And this way the hero still assembles if the script never runs.

     `backwards` is what makes it safe: the fill holds each element at its
     `from` state through its delay, and then RELEASES it when the act ends,
     rather than pinning the `to` state on top of the scroll sequence's inline
     styles for the rest of the page's life. Every `to` below is therefore
     written to equal exactly what heroFrame() sets at p=0, so the handover is
     invisible and heroFrame() itself needed no changes. */
  @keyframes intro-line{
    from{opacity:0;transform:scale(.90);}
    to{opacity:1;transform:scale(1.03);}
  }
  @keyframes intro-glow{
    from{opacity:0;}
    to{opacity:1;}
  }
  /* The fade is over in the first sixth, while the phone is still at the
     bottom edge. Spread across the whole climb it made the device translucent
     exactly as it crossed the headline, and a screenshot you can read the word
     "Network" through does not look like a screen. */
  @keyframes intro-phone{
    from{opacity:0;transform:translate(-50%,-50%) translateY(55vh) scale(.96);}
    15%{opacity:1;}
    to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);}
  }
  @keyframes intro-header{
    from{opacity:0;transform:translateY(-120%);}
    to{opacity:1;transform:translateY(0);}
  }
  .bigline{animation:intro-line 1.6s var(--ease) backwards;}
  /* With the line: a lit stage under an invisible headline reads as a fault. */
  .hero .glow{animation:intro-glow 1.6s var(--ease) backwards;}
  /* One delay and one duration across both, so they leave and land together. */
  .phone-float{animation:intro-phone 1.2s 1.6s var(--ease) backwards;}
  header.site{animation:intro-header 1.2s 1.6s var(--ease) backwards;}

  /* An animation outranks the inline styles heroFrame() writes, so scrolling
     mid-intro would otherwise leave the phone flying in while the page moved
     under it. home.js sets this on the first scroll; dropping the animation
     returns each element to the scroll sequence at its current position. */
  html.intro-done .bigline,
  html.intro-done .hero .glow,
  html.intro-done .phone-float,
  html.intro-done header.site{animation:none;}

  /* reduced motion only: the sequence collapses to a stack */
  .hero.static-hero{height:auto;overflow:hidden;}
  .hero.static-hero .hero-stage{position:static;height:auto;display:block;padding:124px 0 80px;}
  .hero.static-hero .hero-copy{position:static;opacity:1;transform:none;margin-top:36px;}
  .hero.static-hero .phone-float{position:static;transform:none;margin:44px auto 0;display:flex;justify-content:center;}
  .hero.static-hero .hero-inner{display:flex;flex-direction:column;align-items:center;}

  /* the same sequence on a phone, at phone proportions */
  @media (max-width:860px){
    .hero{height:212vh;}
    .hero-stage{padding:0;}
    .bigline{white-space:normal;font-size:clamp(44px,15.5vw,132px);letter-spacing:-.045em;line-height:.96;}
    .phone-float .phone{transform:scale(.66);transform-origin:center;}
    .hero-copy{top:calc(100% + 30px);}
    .hero .sub{font-size:15px;line-height:23px;}
    .hero-actions{margin-top:22px;}
    .hero-roles{margin-top:28px;padding-top:18px;}
    .hero-roles .roles{gap:8px 16px;}
  }

  /* ---------- 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;}

  /* ---------- concept ---------- */
  .concept p.big{
    font-family:Archivo,sans-serif;font-weight:600;
    font-size:clamp(26px,3.7vw,44px);line-height:1.16;letter-spacing:-.03em;max-width:20ch;
  }
  .concept p.big + p.big{margin-top:28px;}
  .concept .w{color:var(--night-200);transition:color .32s var(--ease);}
  .concept .w.lit{color:var(--ink);}
  .concept .w.accent.lit{color:var(--primary);}
  .figures{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;border-top:1px solid var(--line);padding-top:32px;}
  @media (max-width:620px){.figures{grid-template-columns:1fr;gap:28px;}}
  .figures .micro{color:var(--faint);margin-top:10px;}

  /* ---------- features · a phone that stays, text that scrolls past it ---------- */
  .fs-track{position:relative;margin-top:56px;}
  /* The stage is a full-width sticky box at z-index 2, and .fs-flow is slid
     under it by -100vh. Its right-hand column is empty, but it was still
     taking the pointer — so the chapter text underneath could be read and
     not selected. Only the tabs inside it are meant to be clickable; the
     phone is a mock, and the links in it go nowhere. */
  .fs-stage{position:sticky;top:0;height:100vh;overflow:hidden;z-index:2;padding-top:92px;pointer-events:none;}
  .fs-tabs{pointer-events:auto;}
  .fs-stage-in{height:100%;padding-bottom:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;}
  .fs-phone-wrap{display:flex;justify-content:center;perspective:1800px;}
  #features{transition:background-color .5s linear;}
  .fs-phone{
    position:relative;will-change:transform;
    transform:rotateY(14deg) rotateZ(3deg);
    box-shadow:0 4px 10px rgba(10,15,30,.10), 0 40px 80px -30px rgba(10,15,30,.45);
    border-radius:var(--r-sheet);
  }
  .fs-screen{
    position:absolute;inset:0;opacity:0;
    transform:scale(.985);
    transition:opacity .42s var(--ease), transform .55s var(--ease);
    pointer-events:none;
  }
  .fs-screen.on{opacity:1;transform:none;pointer-events:auto;}

  /* the text column scrolls normally, one chapter per screen height */
  .fs-flow{position:relative;z-index:1;margin-top:-100vh;}
  .fs-chapter{height:100vh;padding:92px 0 150px;display:flex;align-items:center;}
  .fs-txt{width:50%;margin-left:50%;padding-left:28px;will-change:opacity;}
  .fs-txt .overline{color:var(--faint);display:flex;align-items:center;gap:10px;}
  .fs-txt h3{font-size:clamp(26px,3.1vw,38px);line-height:1.1;letter-spacing:-.03em;margin:16px 0 16px;max-width:16ch;}
  .fs-txt .lead{color:var(--muted);font-size:17px;line-height:26px;max-width:44ch;}
  .fs-txt ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:44ch;}
  .fs-txt li{display:flex;gap:10px;align-items:flex-start;color:var(--night-700);}
  .fs-txt li .dot{margin-top:8px;}

  .fs-tabs{
    position:absolute;left:50%;transform:translateX(-50%);bottom:50px;display:flex;gap:4px;padding:4px;
    background:rgba(255,255,255,.74);backdrop-filter:blur(12px);border-radius:var(--r-pill);box-shadow:var(--elev-1);
  }
  .fs-ind{
    position:absolute;left:4px;top:4px;height:calc(100% - 8px);width:0;border-radius:var(--r-pill);
    background:var(--night-800);
    transition:transform .46s var(--ease), width .46s var(--ease);
  }
  .fs-tabs button{
    position:relative;z-index:1;
    border:0;background:transparent;cursor:pointer;padding:11px 18px;border-radius:var(--r-pill);
    font-family:Inter,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);transition:color .3s var(--ease);
  }
  .fs-tabs button:hover{color:var(--ink);}
  .fs-tabs button.on{color:var(--night-0);}
  .fs-progress{
    position:absolute;left:50%;transform:translateX(-50%);bottom:36px;width:180px;height:2px;
    background:var(--line);border-radius:var(--r-pill);overflow:hidden;
  }
  .fs-progress i{display:block;height:100%;background:var(--night-800);border-radius:var(--r-pill);width:0;}
  .fs-phone-m{display:none;}

  @media (max-width:960px){
    .fs-track{margin-top:32px;}
    .fs-stage{display:none;}
    .fs-flow{margin-top:0;}
    .fs-chapter{height:auto;display:block;padding:44px 0 0;border-top:1px solid var(--line);margin-top:44px;}
    .fs-chapter:first-child{border-top:0;margin-top:0;padding-top:0;}
    .fs-txt{width:100%;margin-left:0;padding-left:0;opacity:1!important;}
    .fs-tabs,.fs-progress{display:none;}
    .fs-phone-m{display:block;margin-top:28px;}
    .fs-phone-m .phone{width:100%;max-width:320px;margin-inline:auto;}
  }

  /* ---------- app screens · rebuilt from the Figma library ---------- */
  .phone{
    width:300px;height:650px;flex:none;position:relative;overflow:hidden;
    border-radius:var(--r-sheet);background:var(--bg);
    border:1px solid var(--line);box-shadow:var(--elev-2);
  }
  .scr{
    width:390px;height:844px;transform:scale(.76923);transform-origin:top left;
    background:var(--bg);position:relative;display:flex;flex-direction:column;
    font-family:Inter,sans-serif;color:var(--ink);
  }
  .scr-status{height:44px;display:flex;align-items:center;padding:0 20px;font-weight:600;font-size:14px;}
  .scr-top{padding:4px 20px 16px;display:flex;align-items:center;gap:12px;}
  .scr-top h4{font-family:Archivo,sans-serif;font-weight:600;font-size:28px;line-height:29px;letter-spacing:-.032em;}
  .scr-rule{height:1px;background:var(--line);flex:none;}
  .scr-body{flex:1;overflow:hidden;}
  .back{
    width:36px;height:36px;border-radius:var(--r-pill);background:var(--surface);flex:none;
    display:flex;align-items:center;justify-content:center;color:var(--ink);
  }
  .pillcount{
    margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);
    border-radius:var(--r-pill);padding:7px 10px 7px 14px;font-weight:600;font-size:13px;color:var(--night-700);
  }
  .pillcount b{
    background:var(--primary);color:#fff;border-radius:var(--r-pill);
    min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;
  }
  .searchbar{
    margin:0 20px 14px;height:46px;border-radius:var(--r-field);background:var(--surface);
    display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--faint);font-size:14px;
  }
  .searchbar.typed{color:var(--ink);}
  .searchbar .sq{margin-left:auto;color:var(--muted);position:relative;}
  .badge-n{
    position:absolute;top:-8px;right:-8px;background:var(--primary);color:#fff;border-radius:var(--r-pill);
    min-width:17px;height:17px;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
  }
  .chips{display:flex;gap:8px;padding:0 20px 16px;}
  .chip{
    border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:9px 15px;
    font-weight:600;font-size:13px;color:var(--night-800);display:flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .chip.on{background:var(--primary);border-color:var(--primary);color:#fff;}
  .chip.sq{padding:9px 11px;color:var(--muted);}
  .grouplabel{padding:16px 20px 10px;color:var(--faint);}
  .scr .overline{font-size:11px;letter-spacing:.13em;}

  .mcard{
    margin:0 20px 14px;height:290px;border-radius:var(--r-card);overflow:hidden;position:relative;
    background:linear-gradient(158deg,var(--royal-900) 0%,var(--night-1000) 68%);
  }
  .mcard .initials{
    position:absolute;right:-10px;bottom:-34px;font-family:Archivo,sans-serif;font-weight:700;
    font-size:150px;letter-spacing:-.05em;color:rgba(143,166,255,.13);line-height:1;
  }
  .mcard .target{position:absolute;left:16px;top:16px;width:22px;height:22px;border-radius:var(--r-pill);border:2px solid var(--available);display:flex;align-items:center;justify-content:center;}
  .mcard .target i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--available);display:block;}
  .mcard .offering{
    position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:8px;
    background:rgba(6,9,20,.55);border:1px solid var(--night-600);border-radius:var(--r-pill);
    padding:7px 12px;font-weight:600;font-size:12.5px;color:#fff;
  }
  .mcard .who{position:absolute;left:18px;bottom:18px;right:130px;}
  .mcard .who .role{color:var(--royal-200);font-size:13px;}
  .mcard .who .name{font-family:Archivo,sans-serif;font-weight:600;font-size:24px;line-height:26px;letter-spacing:-.03em;color:#fff;margin-top:4px;}
  .mcard .stats{position:absolute;right:18px;bottom:16px;text-align:right;display:flex;flex-direction:column;gap:10px;}
  .mcard .stats b{font-family:Archivo,sans-serif;font-weight:600;font-size:23px;line-height:23px;letter-spacing:-.03em;color:#fff;display:block;}
  .mcard .stats span{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--royal-300);display:block;margin-top:3px;}

  .trow{display:flex;align-items:center;gap:14px;padding:14px 20px;position:relative;}
  .trow.here{background:var(--surface);}
  .trow.here:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);}
  .plaque{width:52px;flex:none;text-align:center;}
  .plaque .box{
    border:1px solid var(--line-strong);border-radius:var(--r-field);padding:6px 0;
    font-family:Archivo,sans-serif;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  }
  .plaque .box small{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:8.5px;letter-spacing:.11em;color:var(--muted);}
  .plaque .box .n{font-size:15px;line-height:17px;}
  .plaque .box.top{background:var(--ground);border-color:var(--ground);color:#fff;}
  .plaque .box.top small{color:var(--royal-300);}
  .plaque .surface{margin-top:5px;font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;}
  .trow .tname{font-family:Archivo,sans-serif;font-weight:600;font-size:17px;line-height:21px;letter-spacing:-.022em;}
  .trow .tmeta{color:var(--muted);font-size:12.5px;margin-top:2px;}
  .going{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--muted);font-size:12.5px;}
  .faces{display:flex;}
  .faces i{width:19px;height:19px;border-radius:var(--r-pill);border:1.5px solid var(--bg);display:block;margin-left:-6px;}
  .faces i:first-child{margin-left:0;}
  .bkmk{margin-left:auto;color:var(--night-300);}

  .offer{padding:16px 20px 18px;}
  .offer .cat{display:flex;align-items:center;gap:8px;font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;}
  .offer h5{font-family:Archivo,sans-serif;font-weight:600;font-size:21px;line-height:25px;letter-spacing:-.028em;margin:10px 0 0;}
  .offer .meta{font-weight:600;font-size:14px;margin-top:10px;}
  .offer .txt{color:var(--muted);font-size:13.5px;line-height:20px;margin-top:8px;}
  .offer .author{display:flex;align-items:center;gap:10px;margin-top:16px;}
  .avatar{
    width:34px;height:34px;border-radius:var(--r-pill);background:var(--royal-400);color:#fff;
    display:flex;align-items:center;justify-content:center;flex:none;
    font-family:Archivo,sans-serif;font-weight:600;font-size:12px;letter-spacing:-.02em;
  }
  .offer .author .nm{font-weight:600;font-size:14px;}
  .offer .author .ago{color:var(--faint);font-size:12.5px;margin-top:1px;}

  .fin-head{background:var(--ground);color:#fff;padding:8px 20px 18px;}
  .fin-head .ttl{display:flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;font-weight:600;font-size:28px;letter-spacing:-.032em;}
  .fin-head .cog{margin-left:auto;color:var(--night-400);}
  .fin-figs{display:flex;gap:24px;margin-top:18px;}
  .fin-figs .lbl{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--royal-300);}
  .fin-figs .val{font-family:Archivo,sans-serif;font-weight:600;font-size:30px;letter-spacing:-.03em;margin-top:6px;}
  .fin-figs .right{margin-left:auto;text-align:right;}
  .fin-figs .right .val{font-size:23px;}
  .bars{display:flex;align-items:flex-end;gap:9px;height:44px;margin-top:18px;}
  .bars i{flex:1;border-radius:3px;background:var(--clay);display:block;}
  .bars i.up{background:var(--available);}
  .months{display:flex;gap:9px;margin-top:8px;font-size:9px;font-weight:600;letter-spacing:.11em;color:var(--night-500);}
  .months span{flex:1;text-align:center;}
  .segs{display:flex;background:var(--surface);border-radius:var(--r-pill);padding:4px;margin:16px 20px 4px;}
  .segs b{flex:1;text-align:center;padding:9px 0;border-radius:var(--r-pill);font-weight:600;font-size:13.5px;color:var(--muted);}
  .segs b.on{background:var(--bg);color:var(--ink);box-shadow:var(--elev-1);}
  .segs b .n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:var(--r-pill);background:var(--pending);color:#fff;font-size:10.5px;margin-left:5px;}
  .fcard{margin:14px 20px 0;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 0 4px;}
  .fcard .cap{padding:0 16px 8px;color:var(--faint);}
  .fline{display:flex;align-items:baseline;gap:12px;padding:9px 16px;border-top:1px solid var(--night-50);}
  .fline:first-of-type{border-top:0;}
  .fline .nm{font-weight:600;font-size:14px;}
  .fline .sub{color:var(--muted);font-size:12px;margin-top:2px;}
  .fline .amt{margin-left:auto;font-family:Archivo,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .amt.pos{color:var(--available);} .amt.neg{color:var(--negative);}
  .fbar{height:6px;border-radius:var(--r-pill);background:var(--night-100);margin-top:8px;overflow:hidden;}
  .fbar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grass);}
  .fbar.spend i{background:var(--royal-500);}

  .th-head{padding:6px 20px 14px;display:flex;align-items:center;gap:12px;}
  .th-head .nm{font-weight:600;font-size:16px;letter-spacing:-.015em;}
  .th-head .on{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;margin-top:2px;}
  .th-head .dots{margin-left:auto;color:var(--muted);letter-spacing:2px;font-size:18px;line-height:1;}
  .th-body{padding:14px 20px 0;display:flex;flex-direction:column;}
  .daypill{align-self:center;background:var(--surface);border-radius:var(--r-pill);padding:6px 13px;font-size:12.5px;color:var(--muted);margin:10px 0 12px;}
  .bub{max-width:80%;border-radius:16px;padding:11px 14px;font-size:14px;line-height:20px;color:var(--ink);}
  .bub.them{background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:6px;}
  .bub.me{background:var(--royal-100);align-self:flex-end;border-bottom-right-radius:6px;}
  .stamp{font-size:11px;color:var(--faint);margin:5px 0 12px;}
  .stamp.r{align-self:flex-end;text-align:right;}
  .composer{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:var(--bg);padding:12px 20px 22px;display:flex;gap:10px;align-items:center;}
  .composer .fld{flex:1;height:44px;border-radius:var(--r-pill);background:var(--surface);display:flex;align-items:center;padding:0 16px;color:var(--faint);font-size:14px;}
  .composer .send{width:42px;height:42px;border-radius:var(--r-pill);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none;}

  /* nav/FloatingBar — Figma node 2514:3802. The radii and the two greys are
     the design's own tokens: a sheet radius rather than a pill, a hairline it
     had and this did not, and --surface behind the active tab. */
  .tabbar{
    position:absolute;left:20px;right:20px;bottom:26px;height:66px;border-radius:var(--r-sheet);
    background:rgba(255,255,255,.95);box-shadow:var(--elev-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-around;padding:0 6px;
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    font-weight:600;font-size:11px;color:var(--faint);padding:6px 8px;border-radius:var(--r-module);
  }
  .tabbar a.on{color:var(--primary);background:var(--surface);}
  .tabbar svg{width:21px;height:21px;}

  /* ---------- 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;}
  }

  /* ---------- trust · dark band, numbered argument + one specimen ---------- */
  .trust{position:relative;background:var(--ground);color:var(--night-0);overflow:hidden;padding:112px 0;}
  .trust .glow{
    position:absolute;right:-14%;top:-10%;width:min(900px,90vw);height:min(900px,90vw);pointer-events:none;
    background:radial-gradient(circle at center, rgba(53,87,238,.22) 0%, rgba(6,9,20,0) 66%);
  }
  .trust-in{position:relative;}
  .trust .overline{color:var(--on-ground-accent);}
  .trust h2{color:var(--night-0);max-width:22ch;margin-top:18px;}
  .trust-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;margin-top:64px;align-items:start;}
  @media (max-width:960px){.trust-grid{grid-template-columns:1fr;gap:48px;}.trust{padding:80px 0;}}

  .args{display:flex;flex-direction:column;}
  .arg{border-top:1px solid var(--night-800);}
  .arg:last-child{border-bottom:1px solid var(--night-800);}
  .arg-btn{
    width:100%;background:transparent;border:0;cursor:pointer;text-align:left;
    display:flex;gap:16px;align-items:baseline;padding:20px 0;
    font-family:Archivo,sans-serif;font-weight:600;font-size:19px;line-height:25px;letter-spacing:-.026em;
    color:var(--night-500);transition:color .25s var(--ease);
  }
  .arg-btn:hover{color:var(--night-200);}
  .arg.open .arg-btn{color:var(--night-0);}
  .arg-n{
    font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.04em;
    color:var(--night-600);width:26px;flex:none;font-variant-numeric:tabular-nums;transition:color .25s var(--ease);
  }
  .arg.open .arg-n{color:var(--on-ground-accent);}
  .arg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease);}
  .arg.open .arg-body{grid-template-rows:1fr;}
  .arg-body > div{overflow:hidden;}
  .arg-body p{
    color:var(--on-ground-soft);font-size:15px;line-height:23px;max-width:46ch;
    padding:0 0 22px 42px;opacity:0;transition:opacity .3s var(--ease);
  }
  .arg.open .arg-body p{opacity:1;}

  /* the specimen: a member is a stack of verified claims */
  .spec{
    background:rgba(255,255,255,.03);border:1px solid var(--night-700);border-radius:var(--r-module);
    padding:26px 26px 20px;
  }
  .spec-head{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--night-700);}
  .spec-head .avatar{width:48px;height:48px;font-size:15px;background:var(--royal-500);}
  .spec-head .nm{display:flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.028em;color:var(--night-0);}
  .spec-head .rl{color:var(--on-ground-soft);font-size:13px;margin-top:4px;display:flex;align-items:center;gap:7px;}
  .claim{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.06);}
  .claim:last-of-type{border-bottom:0;}
  .claim .what{font-weight:600;font-size:14px;color:var(--night-0);}
  .claim .when{color:var(--night-500);font-size:12px;margin-top:3px;font-variant-numeric:tabular-nums;}
  .claim .mk{margin-left:auto;flex:none;}
  .spec-foot{
    margin-top:16px;padding-top:16px;border-top:1px solid var(--night-700);
    color:var(--night-500);font-size:12.5px;line-height:18px;
  }

  /* ---------- testimonials · centred columns, no card ---------- */
  .tm{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 48px;margin-top:64px;}
  @media (max-width:860px){.tm{grid-template-columns:1fr;gap:48px;max-width:38ch;margin-left:auto;margin-right:auto;}}
  .tq{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;}
  .tq .avatar{width:58px;height:58px;font-size:18px;background:var(--royal-400);}
  .tq blockquote{
    margin:22px 0 0;font-family:Archivo,sans-serif;font-weight:600;
    font-size:18px;line-height:26px;letter-spacing:-.022em;color:var(--ink);max-width:30ch;
  }
  .tq blockquote i{font-style:normal;color:var(--night-300);padding:0 2px;}
  .stars{display:flex;gap:4px;color:var(--star);margin-top:18px;}
  .stars svg{width:15px;height:15px;display:block;}
  .tq .nm{display:flex;align-items:center;gap:6px;justify-content:center;font-weight:600;font-size:14px;color:var(--ink);margin-top:18px;}
  .tq .rl{color:var(--muted);font-size:13px;line-height:19px;margin-top:4px;}
  .tq .since{color:var(--faint);margin-top:8px;}

  /* ---------- faq ---------- */
  .faq{max-width:78ch;margin-top:40px;border-top:1px solid var(--line);}
  details{border-bottom:1px solid var(--line);}
  summary{
    list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;gap:16px;
    font-family:Archivo,sans-serif;font-weight:600;font-size:17px;line-height:21px;letter-spacing:-.022em;color:var(--ink);
  }
  summary::-webkit-details-marker{display:none;}
  summary .chev{
    margin-left:auto;flex:none;width:16px;height:16px;color:var(--faint);
    transition:transform .25s var(--ease);
  }
  details[open] summary .chev{transform:rotate(180deg);}
  details .answer{padding:0 32px 24px 0;color:var(--muted);max-width:64ch;}

  /* ---------- final band ---------- */
  .final{position:relative;background:var(--ground);color:var(--night-0);overflow:hidden;padding:104px 0;text-align:center;}
  /* The glow is the band's height rather than a 900px circle, and `closest-side`
     ties the falloff to that height: it reaches zero exactly at the top and
     bottom edges, whatever the viewport. It used to be a circle far taller than
     the band, so `overflow:hidden` sliced it while it still carried ~6% alpha —
     a hard horizontal step sitting right on the footer's border. It shows here
     and nowhere else because `.final` and `footer.site` share one background:
     the cut glow was the only thing marking the seam. Horizontally it still
     reaches 450px, so the wash keeps its width. */
  .final .glow{
    position:absolute;left:50%;top:0;width:min(900px,110vw);height:100%;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(ellipse closest-side at center, rgba(53,87,238,.30) 0%, rgba(6,9,20,0) 100%);
  }
  .final-in{position:relative;}
  .final h2{color:var(--night-0);max-width:18ch;margin:0 auto 20px;}
  .final p{color:var(--on-ground-soft);max-width:52ch;margin:0 auto;font-size:17px;line-height:26px;}
  .final .btn{margin-top:32px;}
  .final .hero-note{margin-top:18px;justify-content:center;color:var(--night-400);}

  /* ---------- footer ---------- */
  footer.site{background:var(--ground);color:var(--night-300);padding:72px 0 40px;border-top:1px solid var(--night-900);}
  .foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px 32px;}
  @media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
  footer.site h5{font-family:Inter,sans-serif;font-weight:600;font-size:11px;line-height:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--night-400);margin:0 0 16px;}
  footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  footer.site ul a{color:var(--night-200);font-size:14px;font-weight:400;}
  footer.site ul a:hover{color:var(--night-0);}
  .foot-brand .brand{color:var(--night-0);}
  .foot-brand .brand-logo{color:var(--night-0);}
  .foot-blurb{color:var(--night-400);margin-top:16px;max-width:34ch;font-size:13px;line-height:20px;}
  .stores{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
  .store{
    display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-on-ground);border-radius:var(--r-field);
    padding:9px 14px;color:var(--night-0);
  }
  .store:hover{border-color:var(--night-400);}
  /* 46px is the hand-built pill's exact height — 1px border + 9px padding +
     11px micro + 15px label + 9px + 1px — so the official badge sits level with
     it rather than near it. Height only: the width follows Apple's aspect ratio,
     which may not be altered. The 10px gap above clears the 1/10-of-height of
     free space the badge requires. */
  .store-official{display:block;border-radius:var(--r-field);}
  .store-official img{display:block;height:46px;width:auto;}
  .store svg{width:16px;height:16px;flex:none;}
  .store span{display:block;}
  .store .micro{color:var(--night-400);}
  .store .label-s{color:var(--night-0);}
  .foot-bottom{
    margin-top:56px;padding-top:24px;border-top:1px solid var(--night-900);
    display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;color:var(--night-500);font-size:12.5px;
  }
  .foot-bottom a{color:var(--night-400);font-size:12.5px;}
  .foot-bottom a:hover{color:var(--night-200);}
  .foot-bottom .sep{margin-left:auto;}

  /* ---------- modal · get the app ---------- */
  .veil{
    position:fixed;inset:0;z-index:100;background:rgba(10,15,30,.62);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
  }
  .veil.open{opacity:1;pointer-events:auto;}
  .modal{
    position:relative;width:100%;max-width:440px;overflow:hidden;
    background:var(--ground);color:var(--night-0);border-radius:var(--r-sheet);
    box-shadow:0 24px 64px -20px rgba(10,15,30,.7);
    padding:48px 40px 40px;text-align:center;
    transform:translateY(12px);opacity:0;transition:transform .26s var(--ease), opacity .26s var(--ease);
  }
  .veil.open .modal{transform:none;opacity:1;}
  .modal .mglow{
    position:absolute;left:50%;top:-34%;width:150%;padding-bottom:150%;transform:translateX(-50%);
    pointer-events:none;
    background:radial-gradient(circle at center, rgba(53,87,238,.34) 0%, rgba(6,9,20,0) 66%);
  }
  .modal-in{position:relative;}
  .modal h3{
    font-family:Archivo,sans-serif;font-weight:600;color:var(--night-0);
    font-size:30px;line-height:33px;letter-spacing:-.032em;max-width:14ch;margin:0 auto;
  }
  .modal .close{
    position:absolute;top:18px;right:18px;z-index:2;
    background:transparent;border:1px solid var(--line-on-ground);cursor:pointer;color:var(--night-300);
    width:34px;height:34px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
    transition:color .18s var(--ease), border-color .18s var(--ease);
  }
  .modal .close:hover{color:var(--night-0);border-color:var(--night-400);}
  .qr{
    width:200px;height:200px;margin:30px auto 0;background:var(--night-0);border-radius:var(--r-card);
    padding:14px;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);
  }
  .qr i{background:transparent;}
  .qr i.on{background:var(--ground);}
  .modal .scan{margin-top:22px;color:var(--on-ground-accent);}
  .modal .foot-note{margin-top:10px;color:var(--night-400);}

  /* ---------- reveal — transform and opacity only ---------- */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-delay:0ms!important;}
    .reveal{opacity:1;transform:none;}
    .concept .w{color:var(--ink);}
    .concept .w.accent{color:var(--primary);}
  }

  /* The hero's screen is an exported image rather than markup — see the comment
     in _hero.html.erb. */

  /* A device, not a rectangle with a hairline. The five phones below hold light
     screens where `.phone`'s 1px border reads as an edge; behind a dark
     screenshot the same border read as a white outline, and no amount of
     recolouring it makes a flat outline look like a handset.

     So the hero's phone gets a real frame: a bezel with thickness, a rim
     lighter than the body the way an aluminium edge catches light, and the
     screen inset within it. Scoped to `.is-shot` — the markup phones want the
     flat treatment they already have. */
  .phone.is-shot{
    padding:7px;border:0;border-radius:42px;
    /* The band is black. The metal is a hairline at the very edge, not a wash
       across the whole bezel — a gradient spread over 11px painted the entire
       band grey, which is a border, not a device. `box-shadow` rather than a
       gradient because a ring is even on all four sides and a linear gradient
       is not. */
    background:#0b0d12;
    box-shadow:0 0 0 1.5px #6f7789, 0 0 0 3px rgba(10,12,18,.9),
               0 30px 70px -20px rgba(0,0,0,.8);
  }

  /* The screen sits in the bezel rather than filling the box, and stops riding
     `.scr`'s 0.76923 transform — 844 x .76923 is 649.2 in a 650 box, and that
     0.8 of a pixel showed as a pale line along the bottom edge. */
  .phone.is-shot .scr{
    position:absolute;inset:7px;width:auto;height:auto;transform:none;
    border-radius:35px;overflow:hidden;background:var(--ground);
  }
  .phone.is-shot .scr-shot{
    display:block;position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;border:0;
  }

  /* The island. Drawn on the frame rather than baked into the export, so it
     stays crisp and the screenshot under it can be replaced without it.
     True black rather than the screen's near-black, or it disappears into the
     very thing it is supposed to sit on. */
  .phone.is-shot::after{
    content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
    width:84px;height:25px;border-radius:999px;background:#000;z-index:2;
    box-shadow:0 0 0 1px rgba(255,255,255,.05);
  }