:root{
    --bg:#04070d; --surface:#0c1420; --surface-2:#111d2e; --surface-3:#18293e;
    --line:#22384f; --line-soft:#152438;
    --ink:#eaf3fd; --ink-2:#9fb6cf; --ink-3:#647d95;
    --cyan:#4ec2f0; --cyan-2:#7ad8ff; --deep:#1f7fb0;
    /* the blue of the A in the logo: cyan at the top, royal blue at the foot */
    --logo-a:#3a9bf4; --logo-a-top:#5fd2fb; --logo-a-foot:#1d63e8;
    --research:#5ec8d8; --eng:#7ee08a; --qa:#e8c46a; --critic:#e2865f;
    --memory:#a98ce0; --learning:#6fd5b0; --danger:#e2685f;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
    --r:14px; --max:1140px;

    /* surfaces, named once so a theme can repaint them */
    --panel:var(--panel);        /* cards, tables, details */
    --panel-solid:#0c1420;             /* floors and plans */
    --code:var(--code);                    /* code and log blocks */
    --tile:var(--tile);                    /* video placeholders */
    --on-accent:#031019;               /* text on a cyan button */
    --shade:rgba(0,0,0,.55);           /* shadows */
    --head-bg:var(--head-bg);         /* the sticky bar */
    --grid-a:var(--grid-a);   /* the blueprint grid */
    --grid-b:var(--grid-b);
    --fade:var(--fade);           /* the vignette */
  }

  /* ------------------------------------------------ the light palette */
  [data-theme="light"]{
    --bg:#f4f7fb; --surface:#ffffff; --surface-2:#eef3f9; --surface-3:#e2eaf4;
    --line:#cbd8e6; --line-soft:#dfe7f1;
    --ink:#0d1a28; --ink-2:#3d5368; --ink-3:#6a7f93;
        --cyan:#1d7fae; --cyan-2:#2ea3d8; --deep:#125b80;
    --logo-a:#1b6fd6; --logo-a-top:#3ba6e8; --logo-a-foot:#1348b8;
    --research:#2b8b9c; --eng:#2f9448; --qa:#a8771a; --critic:#b45a33;
    --memory:#6f4fb0; --learning:#2a8c73; --danger:#b8362c;
    --panel:rgba(255,255,255,.92);
    --panel-solid:#ffffff;
    --code:#eef3f9;
    --tile:#e6edf6;
    --on-accent:#ffffff;
    --shade:rgba(20,40,70,.16);
    --head-bg:rgba(244,247,251,.86);
    --grid-a:rgba(29,127,174,.05);
    --grid-b:rgba(29,127,174,.06);
    --fade:rgba(244,247,251,.9);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--sans);
    -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
  }
  /* layered background: aurora + grid + vignette, all CSS, no images */
  body::before,body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:-2}
  body::before{
    background:
      radial-gradient(760px 520px at 78% -6%, rgba(78,194,240,.20), transparent 62%),
      radial-gradient(680px 460px at 4% 10%, rgba(111,213,176,.10), transparent 60%),
      radial-gradient(900px 700px at 50% 110%, rgba(169,140,224,.10), transparent 62%);
    animation:drift 26s ease-in-out infinite alternate;
  }
  body::after{
    background:
      linear-gradient(var(--grid-a) 1px, transparent 1px) 0 0/38px 38px,
      linear-gradient(90deg, var(--grid-b) 1px, transparent 1px) 0 0/38px 38px,
      radial-gradient(1200px 700px at 50% 20%, transparent 40%, var(--fade) 100%);
    mask-image:linear-gradient(180deg,#000 0 72%,transparent 100%);
  }
  @keyframes drift{to{transform:translate3d(-26px,18px,0) scale(1.05)}}
  a{color:inherit}
  img{max-width:100%; display:block}
  .wrap{width:min(var(--max),92vw); margin:0 auto}
  h1,h2,h3,h4{line-height:1.13; margin:0 0 12px; letter-spacing:-.022em}
  h1{font-size:clamp(32px,5vw,58px); font-weight:840}
  h2{font-size:clamp(25px,3.4vw,40px); font-weight:790}
  h3{font-size:18.5px; font-weight:720}
  p{margin:0 0 14px; color:var(--ink-2)}
  .lead{font-size:clamp(16px,1.9vw,19px)}
  .eyebrow{font:600 11px/1 var(--mono); letter-spacing:.25em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px}
  .center{text-align:center; max-width:66ch; margin:0 auto 38px}
  .center p{margin-inline:auto}
  .note{font:12.5px/1.6 var(--mono); color:var(--ink-3)}
  .muted{color:var(--ink-3)}

  /* ---------------- nav ---------------- */
  header{position:sticky; top:0; z-index:60; background:var(--head-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)}
  /* .bar{display:flex; align-items:center; gap:16px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
  .brand img{height:34px; width:auto; max-width:120px; object-fit:contain}
  .brand b{font:800 15px/1 var(--mono); letter-spacing:.18em; white-space:nowrap}
  .brand b span{color:var(--cyan)} */
    .bar{display:flex; align-items:center; gap:16px; height:78px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
  /* the logo file already contains the words "DAVE AI OFFICE", so it carries
     the name on its own -- the text beside it only repeated it */
  .brand img{height:75px; width:auto; max-width:230px; object-fit:contain}
  .brand b{display:none}
  .brand b span{color:var(--cyan)}
  @media(max-width:620px){
    .bar{height:66px}
    .brand img{height:40px; max-width:170px}
  }
  nav{margin-left:auto; display:flex; align-items:center; gap:18px}
  nav a{color:var(--ink-2); text-decoration:none; font-size:14px}
  nav a:hover{color:var(--ink)}
  .ico{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); color:var(--ink-2); flex:none}
  .ico:hover{border-color:var(--cyan); color:var(--cyan); background:rgba(78,194,240,.08)}
  .ico svg{width:17px; height:17px; fill:currentColor; display:block}
  @media(max-width:900px){nav .hide-sm{display:none}}
  @media(max-width:520px){.brand b{display:none}}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px;
    border-radius:11px; font:660 14.5px/1 var(--sans); text-decoration:none; cursor:pointer;
    border:1px solid var(--line); background:var(--surface-2); color:var(--ink); transition:.16s ease}
  .btn:hover{border-color:var(--cyan); transform:translateY(-1px)}
  .btn.primary{background:linear-gradient(180deg,var(--cyan-2),var(--deep)); color:var(--on-accent);
    border-color:transparent; font-weight:780; box-shadow:0 12px 34px -16px rgba(78,194,240,.9)}
  .btn.primary:hover{filter:brightness(1.07)}
  .btn.small{padding:8px 14px; font-size:13px}

  .page{display:none}
  .page.on{display:block}

  /* ---------------- hero + acronym ---------------- */
  .hero{padding:54px 0 26px; text-align:center}
  .acronym{display:flex; justify-content:center; gap:clamp(10px,3.4vw,40px); flex-wrap:wrap; margin:6px 0 26px}
  .ltr{text-align:center; opacity:0; transform:translateY(16px) scale(.94); transition:.55s cubic-bezier(.2,.8,.2,1)}
  .ltr.on{opacity:1; transform:none}
  .ltr b{
    display:block; font:900 clamp(44px,9vw,104px)/1 var(--mono); letter-spacing:.02em;
    background:linear-gradient(180deg,#eaf7ff,var(--cyan) 62%,var(--deep));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 6px 26px rgba(78,194,240,.42));
  }
  .ltr span{display:block; margin-top:6px; font:600 clamp(10px,1.5vw,13px)/1 var(--mono);
    letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3)}
  .ltr.on span{color:var(--ink-2)}
  .hero h1,.hero .lead,.hero .hero-cta,.hero .note,.hero .badges{
    opacity:0; transform:translateY(12px); transition:.7s ease}
  body.lit .hero h1,body.lit .hero .lead,body.lit .hero .hero-cta,
  body.lit .hero .note,body.lit .hero .badges{opacity:1; transform:none}
  body.lit .hero .lead{transition-delay:.12s}
  body.lit .hero .hero-cta{transition-delay:.22s}
  body.lit .hero .note{transition-delay:.3s}
  body.lit .hero .badges{transition-delay:.38s}
  .hero .lead{max-width:62ch; margin:0 auto 24px}
  .hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:12px}
  .badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}
  .badge{display:flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--line-soft);
    border-radius:10px; background:var(--panel); font-size:12.5px; color:var(--ink-2)}
  .badge b{color:var(--ink); font-size:13px}
  .pill{display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px;
    border:1px solid var(--line); background:var(--panel); font:12px/1 var(--mono);
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
  .pill i{width:7px; height:7px; border-radius:50%; background:var(--eng); box-shadow:0 0 9px var(--eng)}

  /* ---------------- videos ---------------- */
  .shots{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
  @media(max-width:880px){.shots{grid-template-columns:1fr}}
  .shot{background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; overflow:hidden}
  .shot .frame{position:relative; aspect-ratio:16/10; display:grid; place-items:center;
    background:repeating-linear-gradient(45deg,var(--tile) 0 12px,var(--surface-2) 12px 24px)}
    /* contain, not cover: cover crops the recording into the 16/10 frame and
     cuts the right-hand dock off. The frame is given the video's own shape
     in JS once its metadata loads, so there are no black bars either. */
  .shot video{width:100%; height:100%; object-fit:contain; background:#000}
  .shot .slot{text-align:center; padding:22px}
  .shot .slot b{display:block; font:700 13px/1.4 var(--mono); color:var(--ink-2); letter-spacing:.14em}
  .shot .slot span{font:12px/1.6 var(--mono); color:var(--ink-3)}
  .shot .tagline{padding:14px 16px; border-top:1px solid var(--line-soft); font-size:14px; color:var(--ink-2)}
  .shot .tagline b{color:var(--ink)}
  .kbd{display:inline-block; padding:2px 7px; border:1px solid var(--line); border-radius:6px;
    font:11.5px var(--mono); color:var(--ink-2); background:var(--code)}

  /* ---------------- numbers ---------------- */
  .band{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-soft);
    border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
  @media(max-width:860px){.band{grid-template-columns:1fr 1fr 1fr}}
  @media(max-width:520px){.band{grid-template-columns:1fr 1fr}}
  .band div{background:var(--panel); padding:18px 14px; text-align:center}
  .band b{display:block; font:800 22px/1.1 var(--mono); color:var(--ink)}
  .band span{font-size:12.5px; color:var(--ink-3)}

  /* ---------------- compact live floor ---------------- */
  .floor{background:linear-gradient(180deg,var(--panel-solid),var(--panel-solid));
    border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 34px 80px -50px var(--shade)}
  .floor-top{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
  .floor-top b{font:600 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
  .dot{width:8px; height:8px; border-radius:50%; background:var(--eng); box-shadow:0 0 9px var(--eng)}
  .counter{margin-left:auto; display:flex; gap:14px; font:11.5px/1 var(--mono); color:var(--ink-3)}
  .counter b{color:var(--cyan)}
  .desks{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  @media(max-width:620px){.desks{grid-template-columns:1fr 1fr}}
  .desk{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:10px;
    padding:9px 10px; transition:.22s ease; position:relative; overflow:hidden}
  .desk[data-on="true"]{border-color:var(--who); background:var(--surface-3)}
  .desk .who{display:flex; align-items:center; gap:6px; font:700 12.5px/1.2 var(--sans)}
  .desk .who i{width:7px; height:7px; border-radius:50%; background:var(--who); flex:none}
  .desk .who em{margin-left:auto; font:400 10px/1 var(--mono); font-style:normal; color:var(--ink-3)}
  .desk .role{font:10.5px/1.3 var(--mono); color:var(--ink-3); margin-top:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .desk .act{font:10.5px/1.3 var(--mono); color:var(--who); margin-top:6px; min-height:13px}
  .meter{height:3px; border-radius:2px; background:var(--surface-2); margin-top:6px; overflow:hidden}
  .meter i{display:block; height:100%; width:0; background:var(--who); transition:width .4s linear}
  .log{margin-top:10px; background:var(--code); border:1px solid var(--line-soft); border-radius:10px;
    padding:9px 12px; font:11.5px/1.75 var(--mono); color:var(--ink-2); min-height:74px}
  .log b{color:var(--ink)} .log .ok{color:var(--eng)} .log .warn{color:var(--qa)} .log .dim{color:var(--ink-3)}


    /* ---------------- brains: the three ways to wire keys ---------------- */
  .brains{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative}
  @media(max-width:940px){.brains{grid-template-columns:1fr}}
  .mode{position:relative; padding:24px 22px 22px; border-radius:16px;
    background:linear-gradient(180deg,var(--surface-3),var(--panel-solid));
    border:1px solid var(--line-soft); transition:.2s ease}
  .mode:hover{transform:translateY(-3px); border-color:var(--cyan)}
  .mode::before{content:attr(data-n); position:absolute; top:-14px; left:22px; width:30px; height:30px;
    display:grid; place-items:center; border-radius:9px; font:800 14px/1 var(--mono);
    background:linear-gradient(180deg,var(--cyan-2),var(--deep)); color:var(--on-accent)}
  .mode h3{margin:6px 0 4px; font-size:17.5px}
  .mode .sub{font:11.5px/1.4 var(--mono); color:var(--cyan); letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:10px}
  .mode p{font-size:14px; margin:0 0 12px}
  .wires{display:flex; flex-direction:column; gap:6px; margin-top:auto}
  .wire{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px;
    background:rgba(6,12,22,.8); border:1px solid var(--line-soft); font:11.5px/1 var(--mono); color:var(--ink-2)}
  .wire i{width:7px; height:7px; border-radius:50%; background:var(--w,var(--cyan)); flex:none}
  .wire em{margin-left:auto; font-style:normal; color:var(--ink-3)}
  .rule{margin-top:20px; padding:16px 18px; border-radius:12px; text-align:center;
    background:rgba(78,194,240,.06); border:1px solid rgba(78,194,240,.28);
    font:13px/1.7 var(--mono); color:var(--ink-2)}
  .rule b{color:var(--cyan)}
  .extras{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
  @media(max-width:760px){.extras{grid-template-columns:1fr}}
  .extra{padding:16px 18px; border-radius:12px; background:var(--panel);
    border:1px solid var(--line-soft); font-size:14px; color:var(--ink-2)}
  .extra b{display:block; color:var(--ink); margin-bottom:5px; font-size:14.5px}

    /* ---------------- plus points / honest limits ---------------- */
  .twocol{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media(max-width:880px){.twocol{grid-template-columns:1fr}}
  .panel{border-radius:16px; padding:24px; border:1px solid var(--line-soft);
    background:linear-gradient(180deg,var(--surface-3),var(--panel-solid))}
  .panel.good{border-color:rgba(126,224,138,.34)}
  .panel.limit{border-color:rgba(232,196,106,.30)}
  .panel h3{display:flex; align-items:center; gap:9px; font-size:17px; margin-bottom:4px}
  .panel h3 i{width:10px; height:10px; border-radius:3px; background:var(--eng); flex:none}
  .panel.limit h3 i{background:var(--qa)}
  .panel .why{font:12px/1.6 var(--mono); color:var(--ink-3); margin:0 0 14px}
  .panel ul{list-style:none; padding:0; margin:0}
  .panel li{position:relative; padding:9px 0 9px 24px; font-size:14.5px; color:var(--ink-2);
    border-bottom:1px solid var(--line-soft)}
  .panel li:last-child{border-bottom:0}
  .panel li b{color:var(--ink)}
  .panel li::before{content:"+"; position:absolute; left:0; top:8px; font:700 15px/1.6 var(--mono); color:var(--eng)}
  .panel.limit li::before{content:"–"; color:var(--qa)}
  .verdict{margin-top:16px; text-align:center; font:13px/1.7 var(--mono); color:var(--ink-2);
    padding:15px 18px; border-radius:12px; background:rgba(126,224,138,.05);
    border:1px solid rgba(126,224,138,.22)}
  .verdict b{color:var(--eng)}

    /* ---------------- audit a real job (the replay) ---------------- */
  .replay{background:linear-gradient(180deg,var(--panel-solid),var(--panel-solid));
    border:1px solid var(--line); border-radius:18px; overflow:hidden;
    box-shadow:0 34px 80px -50px var(--shade)}
  .rp-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--panel)}
  .rp-req{font:14px/1.4 var(--mono); color:var(--ink)}
  .rp-toggle{margin-left:auto; display:flex; align-items:center; gap:8px; cursor:pointer;
    font:12px/1 var(--mono); color:var(--ink-3); padding:7px 11px; border-radius:999px;
    border:1px solid var(--line)}
  .rp-toggle:hover{border-color:var(--qa); color:var(--qa)}
  .rp-toggle input{accent-color:var(--qa)}
  .rp-body{display:grid; grid-template-columns:1.05fr 1fr; gap:0}
  @media(max-width:860px){.rp-body{grid-template-columns:1fr}}
  .rp-left{padding:18px; border-right:1px solid var(--line-soft)}
  @media(max-width:860px){.rp-left{border-right:0; border-bottom:1px solid var(--line-soft)}}
  .rp-desks{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  @media(max-width:520px){.rp-desks{grid-template-columns:1fr 1fr}}
  .rp-desk{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:10px;
    padding:10px; transition:.2s ease}
  .rp-desk[data-on="true"]{border-color:var(--who); background:var(--surface-3); transform:translateY(-2px)}
  .rp-desk i{display:block; width:8px; height:8px; border-radius:50%; background:var(--who); margin-bottom:6px}
  .rp-desk b{display:block; font:700 12.5px/1.2 var(--sans)}
  .rp-desk span{font:10.5px/1.3 var(--mono); color:var(--ink-3)}
  .rp-track{margin-top:16px}
  .rp-track input[type=range]{width:100%; accent-color:var(--cyan)}
  .rp-marks{display:flex; gap:5px; margin-top:8px}
  .rp-mark{flex:1; height:5px; border-radius:3px; background:var(--surface-2); cursor:pointer; transition:.2s}
  .rp-mark[data-done="true"]{background:var(--cyan)}
  .rp-mark.v-pass[data-done="true"]{background:var(--eng)}
  .rp-mark.v-fail[data-done="true"]{background:var(--qa)}
  .rp-buttons{display:flex; gap:8px; margin-top:14px}
  .rp-btn{flex:1; padding:9px 12px; border-radius:9px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink-2); font:13px var(--sans); cursor:pointer}
  .rp-btn:hover{border-color:var(--cyan); color:var(--ink)}
  .rp-play{flex:1.3; font-weight:650; color:var(--ink)}
  .rp-right{padding:18px}
  .rp-step{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .rp-num{font:11px/1 var(--mono); letter-spacing:.14em; color:var(--ink-3)}
  .rp-step b{font-size:17px}
  .rp-role{font:11.5px/1 var(--mono); color:var(--ink-3)}
  .rp-did{margin:10px 0 12px; font-size:14.5px}
  .rp-verdict{display:inline-block; padding:6px 11px; border-radius:999px; font:11.5px/1 var(--mono);
    letter-spacing:.1em; border:1px solid var(--line); color:var(--ink-3)}
  .rp-verdict.v-pass{color:var(--eng); border-color:rgba(126,224,138,.45)}
  .rp-verdict.v-fail{color:var(--qa); border-color:rgba(232,196,106,.45)}
  .rp-meters{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0}
  .rp-meters div{background:var(--panel); border:1px solid var(--line-soft);
    border-radius:10px; padding:10px 11px}
  .rp-meters span{display:block; font:10.5px/1 var(--mono); letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-3)}
  .rp-meters b{display:block; font:700 17px/1.3 var(--mono); color:var(--ink)}
  .rp-meters i{font:10.5px/1 var(--mono); font-style:normal; color:var(--ink-3)}
  .rp-out{margin:0; background:var(--code); border:1px solid var(--line-soft); border-radius:10px;
    padding:12px 13px; font:12px/1.7 var(--mono); color:var(--ink-2); min-height:66px; white-space:pre-wrap}
  .rp-foot{padding:14px 18px; border-top:1px solid var(--line-soft); font-size:14px;
    color:var(--ink-2); background:var(--panel)}
  .rp-foot b{color:var(--ink)}

  /* ---------------- sections ---------------- */
  section{padding:66px 0; border-top:1px solid var(--line-soft)}
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media(max-width:940px){.cards{grid-template-columns:1fr 1fr}}
  @media(max-width:640px){.cards{grid-template-columns:1fr}}
  .card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
    padding:20px; transition:.2s ease; position:relative}
  .card:hover{border-color:var(--line); transform:translateY(-3px)}
  .card .tag{display:inline-flex; align-items:center; gap:7px; font:660 11px/1 var(--mono);
    letter-spacing:.15em; text-transform:uppercase; color:var(--c,var(--cyan)); margin-bottom:10px}
  .card .tag i{width:8px; height:8px; border-radius:50%; background:var(--c,var(--cyan))}
  .card p{margin:0; font-size:14.5px}
  .chip{position:absolute; top:15px; right:15px; font:660 10px/1 var(--mono); letter-spacing:.14em;
    text-transform:uppercase; padding:6px 9px; border-radius:999px; border:1px solid var(--line)}
  .chip.free{color:var(--eng); border-color:rgba(126,224,138,.45)}
  .chip.soon{color:var(--qa); border-color:rgba(232,196,106,.45)}

  .tiles{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
  @media(max-width:980px){.tiles{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:620px){.tiles{grid-template-columns:repeat(3,1fr)}}
  .tile{background:var(--panel); border:1px solid var(--line-soft); border-radius:12px;
    padding:15px 8px; text-align:center; transition:.18s ease}
  .tile:hover{border-color:var(--cyan); transform:translateY(-2px)}
  .tile b{display:block; font:700 17px/1 var(--mono); color:var(--cyan); margin-bottom:7px}
  .tile span{font:11.5px/1.3 var(--mono); color:var(--ink-3)}

  .split{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center}
  @media(max-width:940px){.split{grid-template-columns:1fr; gap:24px}}
  pre{margin:0; background:var(--code); border:1px solid var(--line-soft); border-radius:12px; padding:16px;
    overflow:auto; font:12.5px/1.7 var(--mono); color:#cfe4f7}
  pre .k{color:#7fb3ff} pre .s{color:var(--eng)} pre .c{color:var(--ink-3)} pre .f{color:var(--qa)}
  ul.clean{list-style:none; padding:0; margin:0}
  ul.clean li{position:relative; padding:8px 0 8px 27px; color:var(--ink-2); font-size:15px}
  ul.clean li::before{content:""; position:absolute; left:0; top:14px; width:10px; height:10px;
    border-radius:3px; background:var(--eng); opacity:.9}
  ul.clean li.no::before{background:var(--danger)}
  ul.clean li.soon::before{background:var(--qa)}
  ul.clean li b{color:var(--ink)}

  table.tidy{width:100%; border-collapse:collapse; font-size:14.5px; background:var(--panel);
    border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
  table.tidy th,table.tidy td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft)}
  table.tidy th{font:660 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2)}
  table.tidy tr:last-child td{border-bottom:0}
  table.tidy td.n{color:var(--ink-3)}

  /* ---------------- plans ---------------- */
  .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
  @media(max-width:940px){.plans{grid-template-columns:1fr}}
  .plan{background:var(--panel); border:1px solid var(--line-soft); border-radius:18px;
    padding:26px; position:relative; transition:.2s ease}
  .plan:hover{transform:translateY(-3px)}
  .plan.best{border-color:var(--cyan); box-shadow:0 0 0 1px rgba(78,194,240,.22),0 34px 80px -54px rgba(78,194,240,.85)}
  .flag{position:absolute; top:-12px; left:26px; padding:6px 12px; border-radius:999px;
    font:700 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    background:linear-gradient(180deg,var(--cyan-2),var(--deep)); color:var(--on-accent)}
  .flag.warm{background:linear-gradient(180deg,#f3d281,#c79a33); color:#1d1402}
  .plan .kind{font:660 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
  .plan .price{font:800 38px/1.1 var(--sans); margin:12px 0 2px}
  .plan .price small{font:400 14px/1 var(--sans); color:var(--ink-3)}
  .plan .when{font:12px/1.5 var(--mono); color:var(--ink-3); margin-bottom:14px}
  .plan .pitch{font-size:14px; color:var(--ink-2); margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--line-soft)}
  .plan ul{margin:0 0 20px}
  .plan .btn{width:100%}
  .plan .after{margin:10px 0 0; font:11.5px/1.6 var(--mono); color:var(--ink-3); text-align:center}
  .trustrow{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:24px;
    font:12.5px/1 var(--mono); color:var(--ink-3)}
  .trustrow span{display:flex; align-items:center; gap:7px}
  .trustrow i{width:6px; height:6px; border-radius:50%; background:var(--eng)}

  details{background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; padding:15px 19px; margin-bottom:10px}
  details summary{cursor:pointer; font-weight:660; list-style:none}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+"; float:right; color:var(--cyan); font:700 19px/1 var(--mono)}
  details[open] summary::after{content:"–"}
  details p{margin:11px 0 0; font-size:14.5px}

  .cta-box{background:linear-gradient(180deg,var(--panel-solid),var(--panel-solid));
    border:1px solid var(--line); border-radius:20px; padding:44px 26px; text-align:center}

  /* ---------------- documents ---------------- */
  .doc{padding:50px 0 40px}
  .doc h1{font-size:clamp(28px,4vw,42px)}
  .doc h2{font-size:21px; margin:32px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line-soft)}
  .doc p,.doc li{color:var(--ink-2); font-size:15.5px}
  .doc ul{padding-left:20px}
  .doc li{margin:7px 0}
  .doc .stamp{font:12px/1.6 var(--mono); color:var(--ink-3); margin-bottom:24px}
  .callout{background:var(--panel); border:1px solid var(--line-soft); border-left:3px solid var(--qa);
    border-radius:10px; padding:15px 18px; margin:20px 0; font-size:14.5px; color:var(--ink-2)}
  .people{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  @media(max-width:900px){.people{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.people{grid-template-columns:1fr}}
  .person{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:18px; text-align:center}
  .person .av{width:52px; height:52px; margin:0 auto 10px; border-radius:14px; display:grid; place-items:center;
    background:var(--surface-3); font:800 18px/1 var(--mono); color:var(--cyan)}
  .person b{display:block; font-size:14.5px}
  .person span{font:11.5px/1.5 var(--mono); color:var(--ink-3)}

  footer{border-top:1px solid var(--line-soft); padding:38px 0 50px; color:var(--ink-3); font-size:13.5px}
  .fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:26px; margin-bottom:24px}
  @media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
  .fgrid h4{font:660 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
  .fgrid a{display:block; color:var(--ink-2); text-decoration:none; padding:4px 0}
  .fgrid a:hover{color:var(--cyan)}
  .socials{display:flex; gap:10px; margin-top:14px}
  .legal{border-top:1px solid var(--line-soft); padding-top:18px; display:flex; gap:16px; flex-wrap:wrap; align-items:center}

  /* ---------------- theme switch and the phone menu ---------------- */
  .theme-btn,.menu-btn{display:grid; place-items:center; width:34px; height:34px;
    border-radius:9px; border:1px solid var(--line); background:transparent;
    color:var(--ink-2); cursor:pointer; flex:none; font:15px/1 var(--sans)}
  .theme-btn:hover,.menu-btn:hover{border-color:var(--cyan); color:var(--cyan)}
  .menu-btn{display:none}
  @media(max-width:900px){
    .menu-btn{display:grid}
    nav .hide-sm{display:none}
    nav.open{position:fixed; inset:64px 0 auto 0; display:flex; flex-direction:column;
      align-items:stretch; gap:0; padding:10px 6vw 18px; background:var(--head-bg);
      backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
    nav.open .hide-sm{display:block; padding:13px 2px; font-size:16px;
      border-bottom:1px solid var(--line-soft)}
    nav.open .ico,nav.open .theme-btn,nav.open .btn{margin-top:12px}
    nav.open .btn{width:100%}
  }
  @media(max-width:520px){
    .hero{padding:34px 0 18px}
    .acronym{gap:12px}
    .band div{padding:14px 10px}
    section{padding:48px 0}
    .plan{padding:20px}
    .doc{padding:34px 0 30px}
  }

  .reveal{opacity:0; transform:translateY(14px)}
  .reveal.in{opacity:1; transform:none; transition:opacity .6s ease,transform .6s ease}
  .totop{position:fixed; right:18px; bottom:18px; z-index:40; opacity:0; pointer-events:none; transition:.25s}
  .totop.on{opacity:1; pointer-events:auto}
  @media(prefers-reduced-motion:reduce){
    .reveal,.reveal.in,.ltr,.ltr.on,.hero h1,.hero .lead,.hero .hero-cta,.hero .note,.hero .badges{
      opacity:1!important; transform:none!important; transition:none!important}
    body::before{animation:none}
    html{scroll-behavior:auto}
  }


    /* repair: the dark values of these tokens had been overwritten by mistake */
  :root:not([data-theme="light"]){
    --panel:rgba(12,20,32,.86); --code:#060d17; --tile:#091320; --head-bg:rgba(4,7,13,.8);
    --grid-a:rgba(126,224,138,.035); --grid-b:rgba(78,194,240,.045); --fade:rgba(4,7,13,.85);
  }

  /* ---- phone header: room for the logo, theme switch, Download and the menu ---- */
  @media(max-width:620px){
    .bar{gap:10px}
    nav{gap:8px}
    nav:not(.open) .ico{display:none}          /* the social icons live in the footer and the open menu */
    header .btn.small{padding:8px 12px}
  }

  /* ---- the open menu: links stacked, then icons + theme + Download on one row ---- */
  @media(max-width:900px){
    .menu-btn{margin-left:8px}
    nav.open + .menu-btn{margin-left:auto}      /* keep the button on the right while the menu is open */
    nav.open{position:absolute; top:100%; left:0; right:0; bottom:auto; margin:0;
      display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
      padding:6px 6vw 18px; background:var(--bg);
      border-bottom:1px solid var(--line-soft)}
    nav.open .hide-sm{display:block; flex:0 0 100%; padding:12px 2px; font-size:16px;
      border-bottom:1px solid var(--line-soft)}
    nav.open .ico, nav.open .theme-btn{margin-top:8px}
    nav.open .btn{flex:1 1 auto; width:auto; margin-top:8px}
  }

    /* a code block must scroll inside its own box, not stretch the page sideways */
  .split > *{min-width:0}
  pre{max-width:100%}

    /* ======================================================================
     BACKGROUND v3 — one room, one light.
     A cyan ceiling light behind the wordmark, two restrained side glows
     (deep blue left, violet right), a warm lamp that only comes up as you
     reach the lower half, fine grain, and a vignette that keeps the corners
     out of the way of the text. Replaces v2, which had too many colours
     fighting each other.
     ====================================================================== */
  body::before{display:none}                       /* the old aurora */
  .sky{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden;
    background:
      radial-gradient(150% 100% at 50% 0%, #10253f 0%, #081426 38%, #050a14 68%, #05070f 100%);
    }
  .sky i{position:absolute; border-radius:50%; will-change:transform, opacity;
    background:radial-gradient(closest-side, var(--c) 0%, transparent 100%);
    mix-blend-mode:screen; filter:blur(10px);
    animation:sky-float var(--t,50s) ease-in-out infinite alternate}
  /* the ceiling light the wordmark sits under */
  .sky .o1{--c:rgba(94,200,255,.50); width:120vw; height:70vh; left:-10vw; top:-34vh; --t:44s;
    border-radius:50%; opacity:calc(1 - var(--sy,0) * .55)}
  /* deep blue on the left, violet on the right: the room's two walls */
  .sky .o2{--c:rgba(32,110,190,.42); width:70vw; height:70vw; left:-28vw; top:4vh;  --t:56s; animation-delay:-14s}
  .sky .o3{--c:rgba(126,96,214,.38); width:66vw; height:66vw; left:56vw; top:26vh; --t:62s; animation-delay:-26s}
  /* a second cyan, low and wide, so the middle of the page does not go flat */
  .sky .o4{--c:rgba(60,170,230,.30); width:96vw; height:50vw; left:2vw;  top:58vh; --t:50s; animation-delay:-8s}
  /* the warm desk lamp: only really there once you are down the page */
  .sky .o5{--c:rgba(240,170,110,.30); width:44vw; height:44vw; left:60vw; top:70vh; --t:48s; animation-delay:-34s;
    opacity:calc(var(--sy,0) * var(--sy,0) * 1.1)}
  .sky .o6{--c:rgba(150,104,220,.34); width:60vw; height:46vw; left:-16vw; top:78vh; --t:58s; animation-delay:-20s;
    opacity:calc(.25 + var(--sy,0) * .75)}
  @keyframes sky-float{
    0%  {transform:translate3d(0,0,0) scale(1)}
    50% {transform:translate3d(3vw,2.5vh,0) scale(1.08)}
    100%{transform:translate3d(-3vw,-2vh,0) scale(.96)}}
  /* the beam from the ceiling light, very faint, slowly swinging */
  .sky .beam{position:absolute; left:50%; top:-6vh; width:150vw; height:120vh; margin-left:-75vw;
    transform-origin:50% 0; animation:sky-sway 26s ease-in-out infinite alternate;
    background:conic-gradient(from 0deg at 50% 0%,
      transparent 0deg 168deg, rgba(150,225,255,.10) 176deg, rgba(220,244,255,.14) 180deg,
      rgba(150,225,255,.10) 184deg, transparent 192deg 360deg);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
    opacity:calc(1 - var(--sy,0) * .8)}
  @keyframes sky-sway{from{transform:rotate(-5deg)} to{transform:rotate(5deg)}}
  .grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.055; mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

  /* grid and vignette: the grid fades out behind the text, the corners darken */
  body::after{
    background:
      linear-gradient(var(--grid-a) 1px, transparent 1px) 0 0/44px 44px,
      linear-gradient(90deg, var(--grid-b) 1px, transparent 1px) 0 0/44px 44px,
      radial-gradient(120% 80% at 50% 8%, transparent 42%, rgba(3,6,12,.72) 100%);
    mask-image:none}

  /* section dividers: a thread of the agents' colours instead of a grey line */
  section{position:relative; border-top-color:transparent}
  section::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(78,194,240,.5) 24%, rgba(150,104,220,.45) 52%,
      rgba(240,170,110,.35) 78%, transparent)}

  /* light theme: the same room, lit through a window */
  [data-theme="light"] .sky{background:
    radial-gradient(150% 100% at 50% 0%, #ffffff 0%, #eff5fc 42%, #edf0fa 100%)}
  [data-theme="light"] .sky i{mix-blend-mode:multiply; opacity:.38}
  [data-theme="light"] .sky .beam{display:none}
  [data-theme="light"] .grain{mix-blend-mode:multiply; opacity:.04; filter:invert(1)}
  [data-theme="light"] body::after{
    background:
      linear-gradient(var(--grid-a) 1px, transparent 1px) 0 0/44px 44px,
      linear-gradient(90deg, var(--grid-b) 1px, transparent 1px) 0 0/44px 44px}

  @media(prefers-reduced-motion:reduce){ .sky i, .sky .beam{animation:none} }

  /* ---------------- D A V E, cut from metal ---------------- */
  .acronym{perspective:900px; perspective-origin:50% 40%}
  .ltr{position:relative; transform-style:preserve-3d}
  /* the side of the letter: the same glyph behind the face, pushed down-right
     one pixel at a time, so the letter reads as a solid block with a lit top */
  .ltr::before{
    content:attr(data-l); position:absolute; inset:0; z-index:-1;
    font:900 clamp(44px,9vw,104px)/1 var(--mono); letter-spacing:.02em;
    color:#0a1c2e; transform:translateZ(-1px);
    text-shadow:
      1px 1px 0 #0c2439, 2px 2px 0 #0b2136, 3px 3px 0 #0a1f33,
      4px 4px 0 #091c2f, 5px 5px 0 #08192b, 6px 6px 0 #071627,
      7px 7px 0 #061323, 8px 8px 0 #05101f, 9px 9px 0 #040d1a,
      10px 10px 0 #030a16, 11px 12px 18px rgba(0,0,0,.65);
  }
  /* the face: light from above, the brand cyan through the middle, a thin
     bright lip along the top edge */
  .ltr b{
    position:relative;
    background:linear-gradient(176deg,
      #ffffff 0%, #dff4ff 14%, #8fdcff 34%, var(--cyan) 56%, var(--deep) 84%, #0e3f5c 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 2px 0 rgba(255,255,255,.28)) drop-shadow(0 14px 30px rgba(78,194,240,.35));
  }
  /* they land with a small tilt, then settle upright */
  .ltr{transform:translateY(16px) scale(.94) rotateX(26deg); transition:.7s cubic-bezier(.2,.9,.25,1)}
  .ltr.on{transform:rotateX(0deg)}
  .acronym:hover .ltr.on{transform:rotateX(6deg)}
  .ltr.on:hover{transform:rotateX(-6deg) rotateY(-8deg) translateY(-4px) scale(1.04)}
  .ltr span{position:relative; z-index:1}
  [data-theme="light"] .ltr::before{
    color:#b9cde0;
    text-shadow:
      1px 1px 0 #b3c8dd, 2px 2px 0 #adc3d9, 3px 3px 0 #a7bed5, 4px 4px 0 #a1b9d1,
      5px 5px 0 #9bb4cd, 6px 6px 0 #95afc9, 7px 7px 0 #8faac5, 8px 8px 0 #89a5c1,
      9px 9px 0 #83a0bd, 10px 10px 0 #7d9bb9, 11px 12px 18px rgba(40,70,110,.35)}
  [data-theme="light"] .ltr b{
    background:linear-gradient(176deg,#ffffff 0%,#7fc9ea 26%,var(--cyan) 58%,var(--deep) 100%);
    -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 10px 22px rgba(29,127,174,.25))}
  @media(prefers-reduced-motion:reduce){
    .ltr, .ltr.on{transform:none!important; transition:none}
  }
  /* the footer logo sized properly, so the text below it needs no negative pull */
  footer .footer-brand{display:block; margin-bottom:10px}
  footer .footer-brand img{height:54px; width:auto; max-width:200px; object-fit:contain}
  @media(max-width:620px){ footer .footer-brand img{height:44px} }

    /* One video while Pro is still hidden. It used to be capped at 760px --
     a half-width slot left over from when two videos sat side by side. A
     1920-wide screen recording at that size is unreadable, so the single
     video breaks out past the 1140px page column and takes the screen. */
  .shots{justify-content:center}
  .shots:has(> .shot:only-child){
    grid-template-columns:minmax(0,1fr);
    width:min(1510px,72vw);
    margin-left:50%;
    transform:translateX(-50%);
  }
  /* below the breakout width there is nothing to break out of */
  @media(max-width:1240px){
    .shots:has(> .shot:only-child){width:auto; margin-left:0; transform:none}
  }

    /* names, not logos: naming a product you work with is fair use; borrowing
     its mark implies a partnership that does not exist */
  .tiles .tile{padding:18px 10px}
  .tiles .tile span{display:block; font:650 13px/1.3 var(--sans); color:var(--ink-2);
    letter-spacing:.01em}
  .tiles .tile:hover span{color:var(--ink)}

    /* the cut-metal depth is 10px deep, which is fine beside a 104px letter and
     far too much beside a 44px one -- shrink it with the type */
  @media(max-width:620px){
    /* .ltr::before{
      text-shadow:
        1px 1px 0 #0c2439, 2px 2px 0 #0b2136, 3px 3px 0 #0a1f33,
        4px 4px 0 #091c2f, 5px 5px 0 #08192b, 6px 6px 0 #071627,
        7px 8px 12px rgba(0,0,0,.55);
    } */
    .acronym{gap:14px}
    .ltr span{letter-spacing:.14em}
  }
  /* @media(max-width:420px){
    .ltr::before{
            text-shadow:
        1px 1px 0 #0c2439, 2px 2px 0 #0a1f33, 3px 3px 0 #091c2f,
        4px 4px 0 #08192b, 5px 6px 10px rgba(0,0,0,.5);
    }
  } */
    @media(max-width:620px){
    .hero h1 br{display:none}
    .hero h1{font-size:clamp(26px,7.4vw,34px)}
  }
  /* ---------------- download: a manifest, not a card stack ----------------
     The old version was panels inside panels, which is what every product
     page looks like. This one is built from rules and rails: a big version
     block, full-width platform bars, and the changelog on a timeline. */
  .dl-hero{display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap;
    padding:0 0 22px; border-bottom:2px solid var(--line)}
  .dl-big{font:800 clamp(54px,9vw,96px)/0.9 var(--mono); letter-spacing:-.04em; color:var(--ink)}
  .dl-big u{text-decoration:none; color:var(--logo-a)}
  .dl-meta{display:flex; flex-direction:column; gap:5px; padding-bottom:9px}
  .dl-meta span{font:11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}
  .dl-meta b{font:650 15px/1.3 var(--sans); color:var(--ink-2)}

  /* one bar per platform, with a rail that lights up only where it is real */
  .dl-rows{display:flex; flex-direction:column; margin:0 0 20px}
  .dl-row{position:relative; display:flex; align-items:center; gap:16px;
    padding:20px 20px 20px 24px; color:var(--ink); text-decoration:none;
    border-bottom:1px solid var(--line-soft); transition:.18s ease}
  .dl-row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--line); transition:.18s ease}
  .dl-row .os{display:flex; align-items:center; gap:13px; font:650 17px/1 var(--sans)}
  .dl-row .os svg{width:19px; height:19px; fill:currentColor; flex:none; opacity:.75}
  .dl-row .os .gl{font:700 14px/1 var(--mono); width:19px; text-align:center; flex:none; opacity:.75}
  .dl-row em{margin-left:auto; font:12px/1 var(--mono); font-style:normal;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
  .dl-row.ready::before{background:var(--logo-a)}
  .dl-row.ready:hover{background:rgba(58,155,244,.07); padding-left:32px}
  .dl-row.ready:hover em{color:var(--logo-a)}
  .dl-row.ready em::after{content:" ↓"; }
  .dl-row.off{color:var(--ink-3)}

  /* what it needs / first run: plain numbered columns, no boxes */
  .dl-two{display:grid; grid-template-columns:1fr 1fr; gap:46px; margin:42px 0 0}
  @media(max-width:860px){.dl-two{grid-template-columns:1fr; gap:34px}}
  .dl-box h3{font:650 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
    color:var(--logo-a); margin:0 0 18px; padding-bottom:12px;
    border-bottom:1px solid var(--line-soft)}
  .dl-steps{list-style:none; padding:0; margin:0; counter-reset:dl}
  .dl-steps li{position:relative; padding:0 0 16px 32px; font-size:15px; color:var(--ink-2)}
  .dl-steps li:last-child{padding-bottom:0}
  .dl-steps li::before{counter-increment:dl; content:counter(dl,decimal-leading-zero);
    position:absolute; left:0; top:2px; font:700 11px/1.4 var(--mono); color:var(--ink-3)}
  .dl-box .foot{margin:20px 0 0; font-size:14px; color:var(--ink-3)}
  .dl-box .foot a{color:var(--logo-a)}

  /* the changelog, on a line */
  .news-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    margin:60px 0 0; padding-bottom:12px; border-bottom:2px solid var(--line)}
  .news-head h2{margin:0; font-size:22px}
  .news-head a{margin-left:auto; color:var(--logo-a); font-size:14px}
  .news{display:grid; grid-template-columns:160px 1fr; gap:34px; padding:30px 0 10px}
  @media(max-width:760px){.news{grid-template-columns:1fr; gap:16px}}
  .news-when{position:relative}
  .news-when b{display:block; font:800 26px/1 var(--mono); color:var(--ink)}
  .news-when span{display:block; margin-top:7px; font:11px/1 var(--mono);
    letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
  .news-when i{display:inline-block; margin-top:14px; padding:4px 11px; border-radius:3px;
    font:700 10px/1.6 var(--mono); font-style:normal; letter-spacing:.16em;
    text-transform:uppercase; color:var(--on-accent); background:var(--logo-a)}
  /* the vertical rule the entries hang from */
  .news > div:last-child{position:relative; padding-left:28px;
    border-left:1px solid var(--line-soft)}
  @media(max-width:760px){.news > div:last-child{padding-left:18px}}
  .news h4{font:650 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
    color:var(--logo-a); margin:0 0 18px}
  .news h4.later{margin-top:34px; color:var(--qa)}
  .news p{position:relative; font-size:15px; margin:0 0 15px; padding-left:0}
  .news p b{color:var(--ink); display:block; margin-bottom:2px}
  .news ul{list-style:none; padding:0; margin:0}
  .news li{position:relative; padding:0 0 11px 16px; font-size:14.5px; color:var(--ink-2)}
  .news li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:1px;
    background:var(--ink-3)}

      /* the same blue as the A in the logo, so the line ties back to the mark */
  .shot .tagline b.blue{
    background:linear-gradient(180deg,var(--logo-a-top),var(--logo-a) 55%,var(--logo-a-foot));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

/* On the Download page the header button points at the page you are already
   on, and competes with the real rows below it. The nav links stay. */
body:has(#download.on) header .btn.primary { display: none; }

  /* The extrude was a fixed 10px, so at smaller type it read as a slab stuck
     to the side of the letter rather than its edge. In em it scales with the
     font, and each step is darker than the last, so it reads as a wall
     catching less light the further back it goes. */
  .ltr::before{
    text-shadow:
      0.012em 0.012em 0 #0c2439,
      0.024em 0.024em 0 #0b2136,
      0.036em 0.036em 0 #0a1e32,
      0.048em 0.048em 0 #091b2d,
      0.060em 0.060em 0 #081829,
      0.072em 0.072em 0 #071524,
      0.084em 0.084em 0 #06121f,
      0.096em 0.100em 0.14em rgba(0,0,0,.6);
  }
  [data-theme="light"] .ltr::before{
    text-shadow:
      0.012em 0.012em 0 #b3c8dd,
      0.024em 0.024em 0 #abc1d7,
      0.036em 0.036em 0 #a3bad1,
      0.048em 0.048em 0 #9bb3cb,
      0.060em 0.060em 0 #93acc5,
      0.072em 0.072em 0 #8ba5bf,
      0.084em 0.084em 0 #839eb9,
      0.096em 0.100em 0.14em rgba(40,70,110,.32);
  }