:root{
    --app:#0f141a; --nav:#0a0e13; --panel:#161c24; --panel-alt:#18202a;
    --band:#1b232c; --strip:#131920; --field:#101720;
    --rule:#252e3a; --rule-soft:#1e2630; --border:#2b3641; --border-lit:#3c4a58;
    --ink:#dbe3ec; --ink2:#a9b6c4; --ink3:#8fa1b3; --muted:#7a8899; --faint:#5b6878;
    --accent:#4d9bff; --accent-dim:#1c2f46; --on-accent:#08101a; --sel:#16283e;
    --good:#4fb883; --warn:#d98a4a; --bad:#e0776b; --master:#b98ae0;
    --sans:'Barlow','Segoe UI','Noto Sans',system-ui,sans-serif;
    --cond:'Barlow Semi Condensed','Barlow','Segoe UI',sans-serif;
    --gut:clamp(18px,4vw,56px);
    --logo:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABgFBMVEWbn6SfcOAAAAANFiOsePBClf0DChX5+flBxY71jjH6kjIIERwTGygWHCcnKTENFiMPGCRVW2QRGSUVIzNF0pZrRicZNVnp6eoOFiMwabK3gP4uKk42eMpbRodkS5SOZsoWNjchSHg/wYsUK0c4ODhOOCYADSAZIS0nVY49iuo5pntJOnJ5WK4cUEYnalfV1tgaJi4oKjI2OU4+uYatai0bSUIzl3FNU11aYGiBXboAAD8qdV1FS1RVVVVkaXGSWyvMei7bgS8cOmM+NGM7QkwhXE0vh2m7cS24ur3ExcgdHSkfQ3Ezcbw8hN1ISEhRQXxJov9Bv4tucniqrbHAhP////8ZQz4hHyIqKlUpMDskToJbQCpBj/GeYiyfb+Cfcd8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB1biytAAAAYHRSTlP//wD9///+//////5GMv7Njf9w/v///v+t///+//////7///8H//4r/////v////8XDv//////////BP//A////////////////xX///8H////////Af//Bv/////////qtqPuAAAEdUlEQVR42p2YCVfiSBDH2elQhDSESMKtgygiIAsCHuN4jjNec997737/b7FVnYR0Oh0Gp94Tkyf1q39VX9VmnqTac+2japknS2y3UHaccmF32XfSAd1yiQVWKncfDyigOwBwjj+IKDwSMHXIvdpvrK83Oi4hnOljACL89no2sD6DVBE6wO8Unvezka1vCxHd1QDFePhABCcRxRUA38oU/s+sYh8HVdSgEZFZJXw2O2h0trkY0eJyAIWHjur+d59GlDFOH+Vv6YBiHf3dRPi3LsDh7XA+H55uJiqR+WH4bAdg88j0TDTPHFMxy1rAOQ2e+1Z1xxFkY/TdMoV5QxJR72oAdUyxM1D9cfg2jzxTtjHnEmEBcBhnDV34m0V0YVumd4QT01EBBfRfT4bn7NQzP8UEmFveEL9ciAPOSwzU+O+qQCN/M49nYJpz7xZY6TwGKDCoKv4NJvyx6qemijC/QyghE1ZQETC4Bh5sJ1RGFXAErC4D3jPuDjThA8N5NIyLmLu81JUAu0oGnUX4EMHGnzx5KHA27EuAIpNn4ABXP4CY/aECNPdWBhwC25UAhRgAB99eOz5emwUEmNGbLeWxZf4KrBgHvInyR79ajuyVIMAr8TJhNB7pgKgGbwD+EC65NR/wzH+zOYNNX4QGII1CFcCuyYA18VKzQRRzAYjXQJoHBMglATkbYOMD+CK8hAIG1xGA2/oU4OnXUSAiCYgkEECbAgIMw9hDEXPvMAHAEg1+rAABBorY1IxCpRLuhqk1CABG24XxTRJgYZX7K6RABMZcngTkd/A4fadJIQFobtAfkgDrHyxx4+P1AnDhAz77AJeFAMNAARpA3nqBIjq0EU2Ezz2tJ4CHYCpHACFBoyBvWZeMVjJ88SVk8EhxM/7zF5AUtLUKLBJxZfcQcOE75WoPD7Xg8RkCRiHAYDwFgB8VSnySU2zC0Wfhb7RACyBC3rqze3CmAnBpw0YEeBkH7AZFpDrgr3xFJBGKpwdKoGWkAnBL2xGAQIN1wOBYymJypvhTCvJy3se1kF8ACJX/C9jne6Ghdn+BQ8M3ZH8q4lQ+F7AvuYqKEIoAd3Z2NsOhxK+PmrL/SfxceI6tgSiC8A0MZ1VPbMc0L1r/xeLjmg6bhEAB5sBe+N5WCKFZ1RNHkyJfrKbgWFiczg6V0VqUcSFCHConTQXQis73EPCaURJiOksqLMtG+b8o7pRAaao2GLQt7uSDsQyH48qGhHzhz4rJFocIvx0Eafj+ByRf8W62UT8r6Lo0sbNW8lENKz2YJcI/5TH/WJsn2kT7IEjhQCf/3xmOar2Y2qlSp9jbuby7urvErcVWq9+kUyHWJSZaXWqVez1xoDNd9XiiWVab7fOymDqtjZHR1FUvcXHJaK8LvNX+mqgei1cv/cLRdaix2lP8X1L1Xq94ZxJXJrsd5dA8SVZv6aVr35GXUNP4wLn2vrPk3ihmFdsbtdvt0R6Fd7qPvHju18UNhfsfj754hhMzvPq+/7nL95Qu387PXr5T/hOg2v/r1Yt9Zyv9CAAAAABJRU5ErkJggg==);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--app); color:var(--ink);
    font-family:var(--sans); font-size:16px; line-height:1.55;
    font-variant-numeric:tabular-nums;
  }
  a{color:var(--accent); text-decoration:none}
  a:hover{color:#7fb8ff; text-decoration:underline}
  h1,h2,h3,h4{margin:0; font-family:var(--cond); font-weight:700; line-height:1.05}
  p{margin:0}
  ul,ol{margin:0; padding:0; list-style:none}
  figure{margin:0}
  .wrap{max-width:1360px; margin:0 auto; padding-inline:var(--gut)}
  .lbl{font-family:var(--cond); font-weight:600; text-transform:uppercase;
       letter-spacing:.16em; font-size:11.5px; color:var(--muted)}
  .rule{height:1px; background:var(--rule); border:0; margin:0}

  /* ---------- title bar ---------- */
  .titlebar{position:sticky; top:0; z-index:40; background:var(--nav);
    border-bottom:1px solid var(--rule)}
  .titlebar .wrap{display:flex; align-items:center; gap:14px; height:46px}
  .brand{display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; color:var(--ink)}
  .brand .dom{font-family:var(--cond); font-size:11.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--faint); padding-left:10px; white-space:nowrap;
    border-left:1px solid var(--rule)}
  .tnav{margin-left:auto; display:flex; align-items:center; gap:18px}
  .tnav a{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
    font-size:12px; font-weight:600; color:var(--ink2); text-decoration:none;
    white-space:nowrap}
  .tnav a:hover{color:var(--ink)}
  .btn{display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 20px; white-space:nowrap;
    background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
    border-radius:3px; font-family:var(--cond); font-weight:700; font-size:14px;
    letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
  .btn:hover{background:#6faaff; color:var(--on-accent); text-decoration:none}
  .btn.sm{height:32px; padding:0 14px; font-size:11.5px}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--border-lit)}
  .btn.ghost:hover{background:var(--panel-alt); color:var(--ink)}

  /* ---------- hero ---------- */
  .hero{border-bottom:1px solid var(--rule); background:
    radial-gradient(1100px 460px at 8% -10%, #17222f 0%, rgba(15,20,26,0) 70%),
    var(--app)}
  .hero .wrap{padding-block:clamp(44px,6vw,84px) clamp(34px,4vw,56px)}
  .hero-top{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:clamp(24px,4vw,60px); align-items:end}
  .hero-top .right{padding-bottom:6px}
  .say{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
  .say-lead{margin-top:14px}
  .says{margin-top:10px; color:var(--ink2); max-width:62ch}
  .says b{color:var(--accent); font-weight:600}
  .say-lead em{color:var(--accent); font-style:normal; font-weight:600}
  .eyebrow{display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:20px}
  .eyebrow span{position:relative; padding-left:14px}
  .eyebrow span::before{content:""; position:absolute; left:0; top:.52em; width:6px; height:6px;
    background:var(--accent)}
  h1{font-size:clamp(36px,5.1vw,64px); letter-spacing:-.005em; text-wrap:balance}
  h1 em{font-style:normal; color:var(--accent)}
  .sub{margin-top:22px; font-size:clamp(16.5px,1.35vw,19px); color:var(--ink2); max-width:52ch}
  .cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:30px}
  .cta .note{font-size:14px; color:var(--muted)}

  /* ---------- program window ---------- */
  .win{border:1px solid var(--border); background:var(--panel); border-radius:4px;
    overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55); margin-top:34px}
  .tblwrap{overflow-x:auto}
  .win-bar{display:flex; align-items:center; gap:9px; height:34px; padding:0 12px;
    background:var(--nav); border-bottom:1px solid var(--rule)}
  .win-bar b{font-size:13px; font-weight:600}
  .win-bar .shop{font-family:var(--cond); font-size:10.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--faint)}
  .win-bar .dots{margin-left:auto; color:var(--faint); letter-spacing:.4em; font-size:11px}
  .win-tabs{display:flex; gap:0; background:var(--nav); border-bottom:1px solid var(--rule);
    overflow:hidden}
  .win-tabs span{font-family:var(--cond); text-transform:uppercase; letter-spacing:.15em;
    font-size:11px; font-weight:600; color:var(--muted); padding:11px 13px; white-space:nowrap}
  .win-tabs span.on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}
  .win-filter{display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:var(--panel-alt); border-bottom:1px solid var(--rule)}
  .win-filter .fld{flex:1 1 auto; min-width:0; height:28px; background:var(--field);
    border:1px solid var(--border); border-radius:2px; color:var(--faint);
    font-size:12.5px; padding:4px 9px; overflow:hidden; white-space:nowrap}
  .win-filter .seg{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
    font-size:11px; font-weight:600; color:var(--muted); padding:0 9px}
  .win-filter .seg.on{color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:2px}
  .win-filter .count{margin-left:auto; font-size:11.5px; color:var(--faint); white-space:nowrap}
  table.grid{width:100%; border-collapse:collapse; font-size:13px}
  table.grid th{font-family:var(--cond); text-transform:uppercase; letter-spacing:.15em;
    font-size:10.5px; font-weight:600; color:var(--ink3); background:var(--band);
    text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule);
    border-right:1px solid var(--rule-soft); white-space:nowrap}
  table.grid td{padding:9px 10px; border-bottom:1px solid var(--rule-soft);
    border-right:1px solid var(--rule-soft); color:var(--ink2); white-space:nowrap}
  table.grid tr.sel td{background:var(--sel); color:var(--ink)}
  table.grid td.wo{color:var(--ink); font-weight:600}
  table.grid td.num{text-align:right}
  table.grid td.money{text-align:right; color:var(--ink); font-weight:600}
  .st-warn{color:var(--warn)}
  .st-good{color:var(--good)}
  .flag{color:var(--ink); font-weight:600}
  .flag.dim{color:var(--muted); font-weight:400}
  .win-foot{display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:var(--panel-alt); border-top:1px solid var(--rule)}
  .win-status{display:flex; justify-content:flex-end; gap:14px; padding:5px 12px;
    background:var(--nav); font-size:10.5px; color:var(--good); font-family:var(--cond);
    letter-spacing:.12em; text-transform:uppercase}
  .loop{display:flex; align-items:center; gap:10px; margin-top:12px;
    font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
    font-size:10.5px; color:var(--faint)}
  .loop::before{content:""; width:7px; height:7px; background:var(--accent); flex:none}

  /* ---------- sections ---------- */
  section{border-bottom:1px solid var(--rule)}
  .sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 28px;
    padding-block:clamp(40px,5vw,68px) 26px}
  .sec-head h2{font-size:clamp(26px,3.1vw,40px)}
  .sec-head p{color:var(--ink2); max-width:56ch; font-size:16.5px}
  .num{font-family:var(--cond); font-weight:700}

  .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:clamp(40px,5vw,64px)}
  .tile{background:var(--panel); padding:16px 18px 18px}
  .tile.hot{background:var(--panel-alt); box-shadow:inset 0 0 0 1px var(--accent-dim)}
  .tile .k{font-family:var(--cond); text-transform:uppercase; letter-spacing:.15em;
    font-size:10.5px; font-weight:600; color:var(--ink3)}
  .tile .v{font-family:var(--cond); font-weight:700; font-size:clamp(30px,3.4vw,40px);
    line-height:1.06; margin-top:6px; letter-spacing:-.015em}
  .tile .v.amber{color:var(--warn)} .tile .v.blue{color:var(--accent)} .tile .v.good{color:var(--good)}
  .tile .d{font-size:12.5px; color:var(--muted); margin-top:6px}
  .tile .d b{color:var(--ink2); font-weight:600}

  .bandline{background:var(--band); border-block:1px solid var(--rule)}
  .bandline .wrap{padding-block:18px; display:flex; flex-wrap:wrap; gap:8px 26px;
    align-items:center; font-family:var(--cond); text-transform:uppercase;
    letter-spacing:.15em; font-size:11.5px; color:var(--ink3)}
  .bandline .wrap b{color:var(--warn); font-weight:600}

  .feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule);
    margin-bottom:clamp(40px,5vw,64px)}
  .feat{background:var(--panel); padding:22px 22px 26px}
  .feat:hover{background:var(--panel-alt)}
  .feat h3{font-size:15px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent)}
  .feat .ben{margin-top:10px; font-size:17px; color:var(--ink); font-family:var(--cond);
    font-weight:600; line-height:1.25}
  .feat p{margin-top:9px; font-size:14.5px; color:var(--ink2)}
  .feat ul{margin-top:12px; border-top:1px solid var(--rule-soft); padding-top:10px}
  .feat li{font-size:13px; color:var(--muted); padding:3px 0 3px 14px; position:relative}
  .feat li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:1px;
    background:var(--border-lit)}

  .diffs{border-top:1px solid var(--rule); margin-bottom:clamp(40px,5vw,64px)}
  .diff{display:grid; grid-template-columns:78px minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(16px,3vw,40px); padding:26px 0; border-bottom:1px solid var(--rule); align-items:start}
  .diff .n{font-family:var(--cond); font-weight:700; font-size:38px; color:var(--faint);
    line-height:1; letter-spacing:-.02em}
  .diff h3{font-size:clamp(21px,2.2vw,27px)}
  .diff p{color:var(--ink2); font-size:15.5px}
  .diff .ev{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
    font-size:11px; color:var(--faint); margin-top:12px}
  .diff .ev b{color:var(--ink2)}

  .who{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule)}
  .who{margin-bottom:clamp(40px,5vw,64px)}
  .who article{background:var(--panel); padding:20px}
  .who h3{font-family:var(--cond); font-size:14px; letter-spacing:.15em; text-transform:uppercase}
  .who p{margin-top:8px; font-size:14.5px; color:var(--ink2)}

  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
    background:var(--rule); border:1px solid var(--rule); margin-bottom:26px}
  .step{background:var(--panel); padding:22px}
  .step .n{font-family:var(--cond); font-size:12px; letter-spacing:.2em; color:var(--accent);
    text-transform:uppercase}
  .step h3{margin-top:10px; font-size:20px}
  .step p{margin-top:8px; font-size:14.5px; color:var(--ink2)}
  .price{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center;
    padding:22px 24px; border:1px solid var(--border); background:var(--panel-alt);
    margin-bottom:clamp(40px,5vw,64px)}
  .price p{font-family:var(--cond); font-size:clamp(19px,2.1vw,25px); font-weight:600}
  .price span{color:var(--muted); font-size:14.5px; font-family:var(--sans); font-weight:400}

  details{border-bottom:1px solid var(--rule)}
  details[open]{background:var(--strip)}
  summary{cursor:pointer; list-style:none; padding:18px 44px 18px 0; position:relative;
    font-family:var(--cond); font-size:clamp(17px,1.8vw,21px); font-weight:600; color:var(--ink)}
  summary::-webkit-details-marker{display:none}
  summary::after{content:""; position:absolute; right:10px; top:calc(50% - 1px);
    width:15px; height:2px; background:var(--accent)}
  summary::before{content:""; position:absolute; right:16.5px; top:calc(50% - 8px);
    width:2px; height:16px; background:var(--accent); transition:transform .15s}
  details[open] summary::before{transform:scaleY(0)}
  details .a{padding:0 clamp(0px,6vw,90px) 22px 0; color:var(--ink2); font-size:15.5px; max-width:76ch}
  details .a p + p{margin-top:12px}

  footer{background:var(--nav)}
  /* WRITE TO US. What is left where the dead enquiry form was: one heading,
     one paragraph and one button that works. It borrows .formwrap's frame so
     the section keeps the weight it had on the page. */
  .writeus{max-width:44rem}
  .writeus h3{font-size:clamp(19px,2vw,24px); margin:0 0 10px}
  .writeus p{color:var(--ink2); margin:0 0 18px}
  .writeus .note{display:block; margin-top:14px; font-size:13px; color:var(--faint)}

  .fgrid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));
    gap:28px 40px; padding-block:clamp(40px,5vw,60px) 30px}
  .fgrid h3{font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em;
    font-size:11px; color:var(--muted); font-weight:600; margin-bottom:12px}
  .fgrid li{padding:3px 0}
  .fgrid li a{color:var(--ink2); font-size:14px}
  .fbot{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
    border-top:1px solid var(--rule); padding-block:20px 34px; font-size:13px; color:var(--faint)}
  .fbrand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
  .fbrand b{font-size:18px}

  /* The nav gives things up sooner than it used to. FLEET MANAGEMENT is a
     longer label than FLEET was, and at 1440 the row ran BOOK A WALKTHROUGH
     off the right-hand edge. The domain beside the wordmark goes first
     because it is decoration, then the two deepest links. */
  @media (max-width:1460px){
    .brand .dom{display:none}
  }
  @media (max-width:1360px){
    .tnav a.hideable{display:none}
  }
  @media (max-width:1080px){
    .hero-top{grid-template-columns:minmax(0,1fr)}
    /* .diff HAS THREE CHILDREN - the number, the heading, and a div holding
       the body and the capability line. Narrowing the grid to two columns
       wraps that THIRD child onto a second row, where it lands in column one
       - which is 52px wide. On a phone the body rendered one or two words per
       line for the whole section.

       The rule that was here aimed at `.diff p.body`, and p.body is not a
       grid item: its parent div is, so the rule matched an element the grid
       was not positioning and did nothing at all. Aim at the div. */
    .diff{grid-template-columns:52px minmax(0,1fr)}
    .diff > div{grid-column:2}
  }
  @media (max-width:980px){
    .tnav a.hideable2{display:none}
    .brand .dom{display:none}
  }
  @media (max-width:640px){
    .tnav a:not(.btn){display:none}
    .tnav{gap:0}
    .win-tabs{overflow-x:auto}
    /* On a phone there is no room for a number column at all. One column,
       and the number sits above its heading rather than stealing width from
       it. */
    .diff{grid-template-columns:minmax(0,1fr); gap:6px}
    .diff > div, .diff h3, .diff .n{grid-column:1}
    .diff .n{font-size:24px; margin-bottom:-2px}
  }

  /* ---------- brand mark (one data URI, three placements) ---------- */
  .logo{display:block; flex:none; width:20px; height:20px;
    background:var(--logo) center/contain no-repeat}
  .logo.xs{width:15px; height:15px}
  .logo.lg{width:26px; height:26px}
  button.btn{cursor:pointer; font-family:var(--cond)}

  /* ---------- two-column feature spotlight ---------- */
  .duo{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    gap:clamp(22px,3.2vw,48px); align-items:start; margin-bottom:clamp(40px,5vw,64px)}
  .duo .win{margin-top:0}
  .pitch h3{font-size:15px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent)}
  .pitch .ben{margin-top:12px; font-family:var(--cond); font-weight:600;
    font-size:clamp(19px,2vw,23px); line-height:1.2; color:var(--ink)}
  .pitch p{margin-top:12px; font-size:15.5px; color:var(--ink2)}
  .pitch ul{margin-top:16px; border-top:1px solid var(--rule); padding-top:12px}
  .pitch li{font-size:14.5px; color:var(--ink2); padding:6px 0 6px 16px; position:relative}
  .pitch li b{color:var(--accent); font-weight:600}
  .pitch li::before{content:""; position:absolute; left:0; top:.82em; width:7px; height:1px;
    background:var(--accent)}

  /* ---------- the QR asset plate illustration ---------- */
  .plate{border:1px solid var(--border); background:var(--panel);
    box-shadow:0 24px 60px rgba(0,0,0,.55); padding:clamp(16px,2.2vw,24px)}
  .plate-in{border:1px solid var(--border-lit); background:var(--strip);
    padding:clamp(14px,2vw,20px); display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:clamp(14px,2vw,22px); align-items:center}
  .plate svg{width:clamp(128px,14vw,168px); height:auto; display:block;
    background:#dbe3ec; padding:6px}
  .plate .pk{font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em;
    font-size:10.5px; font-weight:600; color:var(--faint)}
  .plate .pv{font-family:var(--cond); font-weight:700; font-size:clamp(19px,2.1vw,25px);
    line-height:1.1; margin-top:5px; letter-spacing:-.01em}
  .plate .pd{font-size:13px; color:var(--ink2); margin-top:12px}
  .plate .pd b{color:var(--accent); font-weight:600}

  /* ---------- enquiry form ---------- */
  .formwrap{border:1px solid var(--border); background:var(--panel);
    padding:clamp(20px,3vw,30px); margin-bottom:clamp(40px,5vw,64px)}
  .enq{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px 20px}
  .enq .f{display:flex; flex-direction:column; gap:7px; min-width:0}
  .enq .f.wide{grid-column:1/-1}
  .enq label{font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em;
    font-size:11px; font-weight:600; color:var(--muted)}
  .enq input,.enq select,.enq textarea{width:100%; min-height:42px; padding:10px 11px;
    background:var(--field); color:var(--ink); border:1px solid var(--border);
    border-radius:2px; font-family:var(--sans); font-size:15px}
  .enq textarea{min-height:112px; resize:vertical; line-height:1.5}
  .enq input:focus,.enq select:focus,.enq textarea:focus{outline:none; border-color:var(--accent)}
  .enq input::placeholder,.enq textarea::placeholder{color:var(--faint)}
  .enq .act{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center;
    gap:14px 22px; border-top:1px solid var(--rule); padding-top:20px; margin-top:2px}
  .enq .act .note{font-size:14px; color:var(--muted)}
  .enq .act .warn{flex:1 1 100%; font-family:var(--sans); font-size:14.5px; color:var(--warn)}

  @media (max-width:1080px){
    .duo{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:640px){
    .plate-in{grid-template-columns:minmax(0,1fr)}
  }

  /* ================================================================
     ROUND TWO, 30 August: the page could not be navigated.

     Real readers all said the same thing - "too much information, too
     long". It was not the words: round one already cut the prose. It was
     that the page is one continuous scroll of nine full sections, 20,055
     pixels of it at 390px, with NO navigation on a phone at all (the
     rule at 640px hides every link in the sticky bar). So:

       1. a contents block under the hero - one big button per section;
       2. every section body behind a details/summary, the way the FAQ
          already works, so the page reads as an index and opens where you want.

     No JavaScript was added and none is needed. Nothing was deleted: every
     word that was in a section is still in that section, one click away.
     ================================================================ */

  /* every jump target clears the 46px sticky bar */
  section[id], details[id], nav[id]{scroll-margin-top:58px}

  /* ---------- START HERE: the contents block ---------- */
  .start{background:var(--strip)}
  .start .wrap{padding-block:clamp(28px,3.6vw,42px) clamp(34px,4.5vw,58px)}
  .start .hd{margin-bottom:16px}
  .start .hd p{margin-top:8px; color:var(--ink2); font-size:16px; max-width:60ch}
  .jump{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
    background:var(--rule); border:1px solid var(--rule)}
  .jump a{display:block; background:var(--panel); padding:14px 15px 16px;
    color:var(--ink); text-decoration:none}
  .jump a:hover{background:var(--panel-alt); color:var(--ink); text-decoration:none}
  .jump .t{display:flex; align-items:baseline; gap:10px;
    font-family:var(--cond); font-weight:700; font-size:18.5px; line-height:1.14}
  .jump .t::after{content:"\2192"; margin-left:auto; color:var(--accent); font-weight:400}
  .jump .d{margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.4}
  .jump a.go{background:var(--accent-dim)}
  .jump a.go .t{color:var(--accent)}
  .jump a.go:hover{background:#22374f}
  @media (max-width:1080px){ .jump{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (max-width:760px){ .jump{grid-template-columns:repeat(2,minmax(0,1fr))} }

  /* ---------- a section body that opens ---------- */
  .secmore{border-bottom:0; margin-bottom:clamp(40px,5vw,64px)}
  .secmore:not([open]){margin-bottom:clamp(30px,3.6vw,46px)}
  /* the anchor is on .secbody, not on the section element: a browser that
     navigates to a fragment INSIDE a closed details opens it (Chrome 121+,
     Safari 17.2+, Firefox 137+). Older browsers land on the same place with
     the section still closed, which is exactly what they did before. The
     scroll margin is what keeps the h2 and the summary bar on screen. */
  /* measured, not guessed: the distance from the top of an h2 to the top of
     its .secbody is 216-288px at 390 and 145-233px at 1400, plus the 46px
     sticky bar. This lands the heading and the open bar on screen at both. */
  .secbody{scroll-margin-top:clamp(300px,410px - 8vw,360px)}
  .secmore[open]{background:transparent}
  .secmore > summary{padding:15px 48px 16px 16px; border:1px solid var(--border);
    background:var(--panel-alt); font-family:var(--sans); font-weight:400;
    font-size:14.5px; line-height:1.45; color:var(--ink2)}
  .secmore > summary:hover{background:var(--band); color:var(--ink)}
  .secmore > summary b{display:block; font-family:var(--cond); font-weight:700;
    text-transform:uppercase; letter-spacing:.16em; font-size:11.5px;
    color:var(--accent); margin-bottom:6px}
  /* a bar that still says OPEN while it is open is a lie the reader has to
     decode. Both labels are real text in the DOM; CSS shows the right one. */
  .secmore > summary b .c{display:none}
  .secmore[open] > summary b .o{display:none}
  .secmore[open] > summary b .c{display:inline}
  .secmore > summary::after{right:18px}
  .secmore > summary::before{right:24.5px}
  .secmore[open] > summary{border-bottom-width:0}
  .secbody{padding-top:clamp(20px,2.6vw,30px); border:1px solid var(--border);
    border-top:0; padding-inline:clamp(0px,1.6vw,20px)}
  .secbody > :last-child{margin-bottom:clamp(20px,2.6vw,30px)}

  /* ---------- the footer stacks on a phone ----------
     .fgrid was a 1.4fr brand column followed by repeat(auto-fit,minmax(150px,1fr))
     and had NO media query of its own. At phone width auto-fit still packed two
     150px link columns, so the brand column was squeezed to a few dozen pixels:
     the paragraph broke to one word a line and the BOOK A WALKTHROUGH button ran
     out past its own column. Give it explicit column counts instead of trusting
     auto-fit at widths it was never checked at. */
  @media (max-width:1000px){
    .fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 40px}
  }
  @media (max-width:520px){
    .fgrid{grid-template-columns:minmax(0,1fr); gap:30px}
  }

  /* On a phone every link in the sticky bar is hidden. Contents is the one
     that must survive, because it is the way back to the map from anywhere. */
  .tnav a.always{display:inline-flex}
  @media (max-width:640px){
    .tnav{gap:14px}
    .titlebar .wrap{gap:10px}
    .brand .dom{display:none}
  }
  @media (max-width:430px){
    /* the wordmark stays; the button gives up letter-spacing instead */
    .tnav .btn.sm{padding:0 11px; font-size:11px; letter-spacing:.08em}
    .tnav{gap:11px}
  }
  @media (max-width:344px){
    /* below this the three of them will not fit. The mark stays, the word
       goes: on a 320px phone a way to navigate beats a second wordmark. */
    .brand span:not(.logo):not(.dom){display:none}
  }

/* ==========================================================================
   THE SPLIT: what the eleven pages need that one page did not.
   Appended rather than merged so that a diff against the long page's own
   stylesheet stays readable.
   ========================================================================== */

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);
  color:#04121f;padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{left:0}

/* the header is a real navigation now, not a row of in-page jumps */
.titlebar .brand{text-decoration:none;color:inherit}
.tnav a.on{color:var(--ink);border-bottom:2px solid var(--accent);
  padding-bottom:2px}

.crumbs{border-bottom:1px solid var(--rule);background:var(--bg2)}
.crumbs .wrap{display:flex;gap:.6rem;align-items:center;
  padding:10px var(--gut);font:600 11px/1 'Barlow Semi Condensed',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* every inside page opens the same way: one H1, one line under it */
.pagehead{border-bottom:1px solid var(--rule);background:
  linear-gradient(180deg,var(--bg2),var(--bg))}
.pagehead .wrap{padding:52px var(--gut) 40px;max-width:1180px}
.secbody{padding:44px 0 64px}
.secbody > .wrap{max-width:1180px}
@media(max-width:640px){.secbody{padding:28px 0 40px}}
.homeback{display:inline-block;margin:0 0 18px;padding:8px 14px;
  border:1px solid var(--border-lit);border-radius:3px;color:var(--ink);
  font:700 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;background:var(--panel)}
.homeback:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pagehead h1{font:700 clamp(26px,4.2vw,46px)/1.06 'Barlow Semi Condensed',sans-serif;
  letter-spacing:-.01em;margin:0 0 14px;max-width:20ch}
.pagehead p{margin:0;max-width:60ch;color:var(--muted);font-size:1.05rem;
  line-height:1.6}
@media(max-width:640px){.pagehead .wrap{padding:34px var(--gut) 26px}}

/* ---------------------------------------------------------- the new hero -- */
.h2o{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);
  background:
    radial-gradient(1100px 520px at 72% -10%,rgba(58,142,255,.16),transparent 62%),
    radial-gradient(800px 420px at 6% 108%,rgba(58,142,255,.07),transparent 60%),
    var(--bg)}
.h2o::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:64px 64px;opacity:.30;
  -webkit-mask-image:radial-gradient(900px 500px at 60% 0%,#000,transparent 72%);
  mask-image:radial-gradient(900px 500px at 60% 0%,#000,transparent 72%)}
.h2o .wrap{position:relative;padding:76px var(--gut) 0;max-width:1180px}
.h2o .eyebrow{margin:0 0 20px}
.h2o h1{font:700 clamp(34px,6.4vw,74px)/1.02 'Barlow Semi Condensed',sans-serif;
  letter-spacing:-.018em;margin:0;max-width:19ch}
.h2o h1 em{font-style:normal;color:var(--accent)}
/* THE SAME PARAGRAPH, READING THE SAME WAY. It is one <p> and always was,
   so the words already matched - but under a 74px headline at 15px it read
   as a caption, while on a phone it reads as the sentence it is. Given the
   size it has on the phone and a measure that keeps it three lines. */
.h2o .say{margin:26px 0 0;max-width:52ch;font-size:clamp(16.5px,1.35vw,20px);
  line-height:1.55;color:var(--muted)}
.h2o .say b{color:var(--ink);font-weight:600}
.h2o .gloss{margin:14px 0 0;max-width:52ch;color:var(--faint);
  font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.5;
  padding-left:13px;border-left:2px solid var(--accent)}
.h2o .cta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0}
/* THE PHONE AND THE TABLET: words left, the two devices right; stacked on a
   phone with the picture first under the heading. */
/* FLAT #0f141a: the render's floor is lit to exactly this colour, so the
   picture has no edge. A gradient here would show one. */
.apps{border-bottom:1px solid var(--rule);background:#0f141a}
.apps .wrap{max-width:1180px;padding:64px var(--gut);display:grid;
  grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
@media(min-width:1000px){.apps .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.appsk{margin:0;color:var(--muted);font:600 12px/1 var(--cond);
  letter-spacing:.2em;text-transform:uppercase}
.appsh{margin:10px 0 0;font:700 clamp(30px,3.6vw,48px)/1.04 var(--cond);
  letter-spacing:-.01em;color:var(--ink)}
.appsh em{font-style:normal;color:var(--accent)}
.appsp{margin:16px 0 0;max-width:44ch;color:var(--muted);
  font-size:clamp(16px,1.2vw,18px);line-height:1.55}
.appso{margin:22px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.appso span{border:1px solid var(--border-lit);border-radius:3px;
  padding:9px 16px;font:700 13px/1 var(--cond);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:var(--panel)}
.appsimg{display:block;width:100%;height:auto}
@media(max-width:760px){.apps .wrap{padding:40px var(--gut);gap:18px}}

/* ------------------------------------------------ hero backgrounds ------ */
/* BLUEPRINT is the front page. Jesse, 23 September: "can we play with
   different backgrounds for the hero page"; of the frosted glass tried
   first, "I don't like the Liquid Glass"; then, of /hero-lab, "I like the
   blueprint". The words sit straight on the sheet, no panel. /hero-lab
   keeps the others to compare. */
.h2o .h1{font:700 clamp(34px,6.4vw,74px)/1.02 'Barlow Semi Condensed',sans-serif;
  letter-spacing:-.018em;margin:0;max-width:19ch}
.h2o .h1 em{font-style:normal;color:var(--accent)}
@media(min-width:1000px){.h2o .top .h1{font-size:clamp(40px,4.9vw,66px)}}
.h2o .wrap{padding-bottom:76px}
.h2o[class*="bg-"]{background:#0b1016}
.h2o[class*="bg-"]::before{display:none}
.bgfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lablbl{max-width:1180px;margin:0 auto;padding:40px var(--gut) 14px;color:var(--muted)}
.lablbl b{color:var(--ink);font:700 20px var(--cond);margin-right:10px}

/* the grain: three stripe spacings that never line up, so it reads as
   brushing and not as a pattern; darker toward the bottom edge */
.bg-metal{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 2px,transparent 2px 11px),
  radial-gradient(120% 90% at 70% 0%,#26303b,transparent 70%),
  linear-gradient(180deg,#1a222b,#0d1217)!important}
.bg-metal .bgfx::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:46%;
  background:linear-gradient(100deg,transparent,rgba(170,200,240,.06) 38%,rgba(230,240,255,.12) 50%,
    rgba(170,200,240,.06) 62%,transparent);
  animation:sweep 16s ease-in-out infinite}
/* a machined edge where the metal meets the page */
.bg-metal .bgfx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(210,225,245,.28) 30%,rgba(210,225,245,.28) 70%,transparent)}
@keyframes sweep{0%{transform:translateX(-70vw) skewX(-14deg)}100%{transform:translateX(170vw) skewX(-14deg)}}

/* AURORA: slow ribbons of light across the top of the page */
.bg-aurora .bgfx::before,.bg-aurora .bgfx::after{content:"";position:absolute;inset:-40% -20%;
  background:conic-gradient(from 200deg at 50% 50%,transparent 0 20%,rgba(77,155,255,.55) 28%,
    transparent 36%,rgba(47,179,163,.45) 46%,transparent 56%,rgba(224,163,58,.35) 64%,transparent 74%);
  filter:blur(70px);animation:aurora 28s linear infinite;opacity:.7}
.bg-aurora .bgfx::after{animation-duration:47s;animation-direction:reverse;opacity:.45}
@keyframes aurora{to{transform:rotate(360deg)}}

/* BLUEPRINT: a drawing sheet - fine and heavy grid lines, a title block
   corner, and a scan line that runs down it */
.bg-print{background:
  linear-gradient(rgba(150,190,255,.16) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(90deg,rgba(150,190,255,.16) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(rgba(150,190,255,.06) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(150,190,255,.06) 1px,transparent 1px) 0 0/24px 24px,
  radial-gradient(110% 80% at 70% 0%,#123056,transparent 70%),
  #0b1a2e!important}
.bg-print .bgfx::before{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;
  background:linear-gradient(180deg,transparent,rgba(120,180,255,.10) 85%,rgba(160,205,255,.35) 100%);
  animation:scan 9s linear infinite}
.bg-print .bgfx::after{content:"";position:absolute;inset:18px;border:1px solid rgba(150,190,255,.28)}
@keyframes scan{to{transform:translateY(calc(100vh + 240px))}}

@media(prefers-reduced-motion:reduce){
  .bgfx::before,.bgfx::after{animation:none!important}}
@media(max-width:760px){
  .h2o .wrap{padding-bottom:44px}
  .bg-print .bgfx::after{inset:8px}
  .h2o .h1{font-size:clamp(30px,8.6vw,44px);line-height:1.03;max-width:none}}


/* ------------------------------------------------- the paperwork, read -- */
.docs{border-bottom:1px solid var(--rule);background:
  radial-gradient(600px 360px at 30% 50%,rgba(77,155,255,.08),transparent 70%),#0f141a}
.docs .wrap{max-width:1180px;padding:64px var(--gut);display:grid;
  grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
@media(min-width:1000px){.docs .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .docs .docsw{order:2}}
.docfx{display:block;width:100%;height:auto;max-width:100%}
.docfx .sheet{fill:#eef2f6;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.docfx .pt{fill:#2a3440;font:500 12.5px 'Barlow',sans-serif}
.docfx .pbold{font-weight:700;fill:#151a20}
.docfx .pbig{font:700 17px 'Barlow Semi Condensed',sans-serif;fill:#151a20}
.docfx .rule{stroke:#c3ccd7;stroke-width:1}
.docfx .scrib rect{fill:#d5dce5}
.docfx .hl{fill:rgba(77,155,255,.16);stroke:#4d9bff;stroke-width:2.2;opacity:.18;
  animation:dfx-on 10s ease-out infinite both}
.docfx .beam{fill:rgba(77,155,255,.28);opacity:0;
  animation:dfx-beam 10s ease-in-out infinite both}
.docfx .fl{fill:none;stroke:#4d9bff;stroke-width:2.2;stroke-dasharray:420;stroke-dashoffset:420;
  opacity:.9;animation:dfx-draw 10s ease-out infinite both}
.docfx .dc rect{fill:#161c24;stroke:#3c4a58;stroke-width:1.2}
.docfx .dc{opacity:.22;animation:dfx-on 10s ease-out infinite both}
.docfx .dt.m{font-size:24px}
.docfx .dd.m{font-size:22px}
.docfx .spine{stroke-dasharray:470;stroke-dashoffset:470;animation-duration:10s}
.docfx .dc rect{stroke:rgba(77,155,255,.45)}
.docfx .dt{fill:#4d9bff;font:700 15px 'Barlow Semi Condensed',sans-serif;letter-spacing:1.5px}
.docfx .dd{fill:#dbe3ec;font:500 15px 'Barlow',sans-serif}
.docfx .hl1,.docfx .f1,.docfx .d1{animation-delay:.9s}
.docfx .hl2,.docfx .f2,.docfx .d2{animation-delay:2.1s}
.docfx .hl3{animation-delay:2.1s}
.docfx .f3,.docfx .d3{animation-delay:3.1s}
.docfx .hl4,.docfx .f4,.docfx .d4{animation-delay:4.2s}
.docfx .f1,.docfx .f2,.docfx .f3,.docfx .f4{animation-name:dfx-draw}
.docfx .d1,.docfx .d2,.docfx .d3,.docfx .d4{animation-name:dfx-card}
@keyframes dfx-beam{0%{opacity:0;transform:translateY(0)}6%{opacity:1}
  46%{opacity:1;transform:translateY(410px)}52%{opacity:0;transform:translateY(410px)}100%{opacity:0}}
@keyframes dfx-on{0%{opacity:.18}6%{opacity:1}72%{opacity:1}88%{opacity:.18}100%{opacity:.18}}
@keyframes dfx-draw{0%{stroke-dashoffset:420}8%{stroke-dashoffset:0}70%{stroke-dashoffset:0;opacity:.9}
  86%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:420;opacity:0}}
@keyframes dfx-card{0%{opacity:.22;transform:translateX(12px)}9%{opacity:1;transform:none}
  72%{opacity:1}88%{opacity:.22}100%{opacity:.22}}
@media(prefers-reduced-motion:reduce){
  .docfx .hl,.docfx .dc{animation:none;opacity:1}
  .docfx .fl{animation:none;stroke-dashoffset:0}
  .docfx .beam{animation:none}}
@media(max-width:760px){.docs .wrap{padding:40px var(--gut);gap:18px}}
/* THE ERP PICTURE, right of the headline. Two columns only where there is
   room for both at a size the headline can still be read at; below that it
   drops under the paragraph. */
.h2o .top{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:1000px){
  .h2o .top{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:clamp(28px,3.5vw,56px);align-items:center}
  .h2o .top h1{font-size:clamp(40px,4.9vw,66px)}
}
.erp{margin:0;padding:22px 22px 18px;border:1px solid var(--rule);
  border-radius:4px;background:
    radial-gradient(420px 300px at 50% 40%,rgba(77,155,255,.10),transparent 70%),
    linear-gradient(180deg,rgba(22,28,36,.92),rgba(15,20,26,.92))}
.erp .erpk{margin:0;color:var(--muted);font:600 12px/1 var(--cond);
  letter-spacing:.2em;text-transform:uppercase}
.erp .erph{margin:8px 0 0;font:700 clamp(30px,3vw,40px)/1 var(--cond);
  letter-spacing:-.01em;color:var(--ink);text-transform:uppercase}
.erp .erph em{font-style:normal;color:var(--accent)}
.erp svg{display:block;width:100%;height:auto;margin:14px 0 4px}
.erp .ring{fill:none;stroke:var(--border);stroke-width:1;stroke-dasharray:3 6}
.erp .ring2{fill:none;stroke:var(--rule);stroke-width:1}
.erp .spokes line{stroke:var(--accent);stroke-width:1.5;opacity:.55;
  stroke-dasharray:4 5;animation:erpflow 1.6s linear infinite}
@keyframes erpflow{to{stroke-dashoffset:-18}}
@media(prefers-reduced-motion:reduce){.erp .spokes line{animation:none}}
.erp .core{fill:var(--accent-dim);stroke:var(--accent);stroke-width:2}
.erp .corename{fill:var(--ink);font:700 25px var(--cond);letter-spacing:.06em;
  text-anchor:middle}
.erp .coresub{fill:var(--ink3);font:600 9.5px var(--cond);letter-spacing:.18em;
  text-anchor:middle}
.erp .mods rect{fill:var(--panel);stroke:var(--border-lit);stroke-width:1}
.erp .mods text{fill:var(--ink2);font:600 12.5px var(--cond);
  letter-spacing:.09em;text-anchor:middle}
.erp figcaption{color:var(--muted);font-size:14px;line-height:1.5;
  padding-top:12px;border-top:1px solid var(--rule)}
@media(max-width:760px){
  .h2o .top{gap:26px}
  .erp{padding:18px 16px 14px}
  .erp .erph{font-size:30px}
  .erp .mods text{font-size:14.5px;letter-spacing:.05em}
  .erp .coresub{font-size:11px}
}
.h2o .shotwrap{margin:52px 0 0;position:relative}
.h2o .shotwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:64px;background:linear-gradient(180deg,transparent,var(--bg));
  pointer-events:none}
.shot{display:block;width:100%;height:auto;border:1px solid var(--rule);
  border-radius:3px;background:var(--bg2)}
figure.shotfig{margin:0}
figure.shotfig figcaption{margin-top:10px;color:var(--faint);
  font:500 11px/1.5 'Barlow Semi Condensed',sans-serif;letter-spacing:.1em;
  text-transform:uppercase}
@media(max-width:640px){.h2o .wrap{padding:44px var(--gut) 0}
  .h2o .shotwrap{margin-top:32px}}



/* ------------------------------------------------- the contact page -- */
/* The FORM's own styling is in the long page's stylesheet already - .enq,
   .enq .f, .enq .f.wide, .enq .act - written for the enquiry form that was
   deleted when its endpoint turned out to be unwired. This adds only what is
   genuinely new: the two-column page, the address beside the form, and the
   honeypot. Writing a second .enq here is exactly how .fbrand and .steps
   went wrong. */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:48px;align-items:start}
.contact .enq{margin:0}

/* THE HONEYPOT. Hidden from people, left alone by them, filled in by bots.
   Not display:none - some bots skip those - and out of the tab order. */
.enq .f.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.reach .lbl{color:var(--faint);margin:0 0 10px}
.reach .big{margin:0 0 14px;font:700 clamp(19px,2vw,26px)/1.2
  'Barlow Semi Condensed',sans-serif;letter-spacing:.01em}
.reach .big a{color:var(--accent);text-decoration:none}
.reach .big a:hover{text-decoration:underline}
.reach p{color:var(--muted);line-height:1.6;margin:0 0 12px}

@media(max-width:900px){.contact{grid-template-columns:1fr;gap:32px}}

/* ---------------------------------------------------- the second hero -- */
.ask{border-bottom:1px solid var(--rule);background:var(--bg2)}
.ask .wrap{max-width:1180px;padding:56px var(--gut) 52px}
.askshot{position:relative;border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;background:var(--bg)}
/* A BAND, NOT A WHOLE SCREEN. At its natural height the shot is 966px and
   the section became a second full page to scroll past on the way to the
   rest of the site. Cropped to a strip from the top, which is where the
   board's own heading and its first jobs are. */
.askshot img{display:block;width:100%;height:auto;max-height:470px;
  object-fit:cover;object-position:top center}
/* THE SCREENSHOT IS THE BACKDROP, NOT THE SUBJECT. It is dimmed hard and
   desaturated so the sentence over it is the thing being read - a shot at
   full contrast under white text is a picture nobody looks at and a
   sentence nobody can. */
.askshot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,13,18,.80),rgba(9,13,18,.62) 45%,
    rgba(9,13,18,.90));pointer-events:none}
.askover{position:absolute;inset:0;z-index:2;display:flex;
  align-items:center;justify-content:center;padding:24px}
.askq{margin:0;text-align:center;color:var(--ink);
  font:700 clamp(24px,4.4vw,50px)/1.12 'Barlow Semi Condensed',sans-serif;
  letter-spacing:-.01em;text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.75)}
.askp{margin:26px auto 0;max-width:62ch;text-align:center;color:var(--muted);
  font-size:clamp(15px,1.3vw,18px);line-height:1.6}
.askp b{color:var(--ink);font-weight:600}
@media(max-width:760px){
  .ask .wrap{padding:32px var(--gut) 30px}
  .askq{font-size:clamp(21px,6.2vw,30px)}
  .askp{margin-top:18px;font-size:15.5px;text-align:left}
  .askshot img{max-height:330px}
  /* the crop is already small on a phone, so the same scrim buries it -
     lighter, and the board is still a board behind the words */
  .askshot::after{background:linear-gradient(180deg,rgba(9,13,18,.72),
    rgba(9,13,18,.55) 45%,rgba(9,13,18,.86))}
}

/* the one strip of facts under the hero - words, no measurements */
.creds{border-bottom:1px solid var(--rule);background:var(--bg2)}
.creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  padding:0;max-width:1180px;background:var(--rule)}
.creds div{background:var(--bg2);padding:22px 24px}
.creds b{display:block;font:600 12px/1 'Barlow Semi Condensed',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin:0 0 8px}
.creds p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
@media(max-width:900px){.creds .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.creds .wrap{grid-template-columns:1fr}}

/* ------------------------------------- the whole site in one section --
   Brief 094. Jesse, 3 October: "you have these buttons that seperate into
   three different categories and open up screen shots for 8 different
   sections per category and it was all on one page ... if we can possibly
   get the entire website into this one section i want to do that. i dont
   want users to have to go searching around."

   It took the place of the map of eleven buttons. Three category radios
   drive a segmented control; eight item radios in each category drive the
   raised card on the left and the panel on the right. The whole state is
   :checked and the sibling combinator, so there is still no JavaScript.
   The radios are visually hidden, not display:none, so the keyboard still
   reaches them: Tab to a group, arrows to move within it.

   The section is one grid: the eight items in two columns on the left, the
   panel on the right, and it is sized to fit a desktop screen without
   scrolling inside it. Below 1000px the panel drops under the items; on a
   phone the items and panels become one column with the open panel right
   under the item that was tapped (display:contents puts them all in one
   grid, and order interleaves them), because a panel that opened under the
   eighth item would not be on the screen when the first was tapped. */
.whole{padding:52px 0 64px;border-bottom:1px solid var(--rule)}
.whole .wrap{max-width:1180px;padding:0 var(--gut);position:relative}
.whole input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;
  margin:0;pointer-events:none}
.wholelbl{margin:0;color:var(--ink);
  font:600 12px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.15em;
  text-transform:uppercase}
.wholelbl::after{content:"";display:block;width:38px;height:2px;
  background:var(--accent);margin-top:10px}
.wholesub{margin:12px 0 20px;color:var(--muted);font-size:.95rem;line-height:1.5}

/* the three buttons */
.seg{display:inline-flex;gap:4px;padding:4px;margin:0 0 26px;
  background:var(--strip);border:1px solid var(--rule);border-radius:5px}
.seg label{cursor:pointer;padding:13px 30px;border-radius:3px;
  border:1px solid transparent;font:700 13px/1 var(--cond);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;transition:color .12s,background .12s}
.seg label:hover{color:var(--ink)}
#cat-shop:checked~.seg label[for=cat-shop],
#cat-machines:checked~.seg label[for=cat-machines],
#cat-buying:checked~.seg label[for=cat-buying]{background:var(--panel-alt);
  border-color:var(--border-lit);color:var(--accent);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9)}
#cat-shop:focus-visible~.seg label[for=cat-shop],
#cat-machines:focus-visible~.seg label[for=cat-machines],
#cat-buying:focus-visible~.seg label[for=cat-buying]{outline:2px solid var(--accent);
  outline-offset:2px}

/* one category showing at a time */
.cat{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;align-items:start}
#cat-shop:checked~#shop,#cat-machines:checked~#machines,
#cat-buying:checked~#buying{display:grid}

/* the eight items, two columns */
.items{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.item{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 12px;
  align-items:start;padding:14px 14px 13px;border:1px solid transparent;
  border-radius:4px;cursor:pointer;color:var(--ink);
  transition:background .12s,border-color .12s,transform .12s,box-shadow .12s}
.item svg{width:24px;height:24px;grid-row:1/3;margin-top:1px;
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.item b{display:block;font:700 16px/1.2 var(--cond);letter-spacing:.01em}
.item span{display:block;margin-top:3px;color:var(--muted);font-size:.86rem;
  line-height:1.4}
.item:hover{background:var(--strip);border-color:var(--rule)}
/* THE PICKED ITEM IS RAISED, the way the white card is on the page Jesse
   photographed */
.cat>input:nth-of-type(1):checked~.items>.item:nth-child(1),
.cat>input:nth-of-type(2):checked~.items>.item:nth-child(2),
.cat>input:nth-of-type(3):checked~.items>.item:nth-child(3),
.cat>input:nth-of-type(4):checked~.items>.item:nth-child(4),
.cat>input:nth-of-type(5):checked~.items>.item:nth-child(5),
.cat>input:nth-of-type(6):checked~.items>.item:nth-child(6),
.cat>input:nth-of-type(7):checked~.items>.item:nth-child(7),
.cat>input:nth-of-type(8):checked~.items>.item:nth-child(8){
  background:var(--panel-alt);border-color:var(--border-lit);
  transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.95)}
.cat>input:nth-of-type(1):focus-visible~.items>.item:nth-child(1),
.cat>input:nth-of-type(2):focus-visible~.items>.item:nth-child(2),
.cat>input:nth-of-type(3):focus-visible~.items>.item:nth-child(3),
.cat>input:nth-of-type(4):focus-visible~.items>.item:nth-child(4),
.cat>input:nth-of-type(5):focus-visible~.items>.item:nth-child(5),
.cat>input:nth-of-type(6):focus-visible~.items>.item:nth-child(6),
.cat>input:nth-of-type(7):focus-visible~.items>.item:nth-child(7),
.cat>input:nth-of-type(8):focus-visible~.items>.item:nth-child(8){
  outline:2px solid var(--accent);outline-offset:2px}

/* the panel for the picked item */
.panels{min-width:0}
.panel{display:none}
.cat>input:nth-of-type(1):checked~.panels>.panel:nth-child(1),
.cat>input:nth-of-type(2):checked~.panels>.panel:nth-child(2),
.cat>input:nth-of-type(3):checked~.panels>.panel:nth-child(3),
.cat>input:nth-of-type(4):checked~.panels>.panel:nth-child(4),
.cat>input:nth-of-type(5):checked~.panels>.panel:nth-child(5),
.cat>input:nth-of-type(6):checked~.panels>.panel:nth-child(6),
.cat>input:nth-of-type(7):checked~.panels>.panel:nth-child(7),
.cat>input:nth-of-type(8):checked~.panels>.panel:nth-child(8){display:block}
.pic{border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  background:var(--strip)}
.pic img{display:block;width:100%;height:auto}
/* a picture taller than the screens is shown as a screen-shaped crop: the
   tablet and the phone, and the plate window */
.pic.cover{aspect-ratio:1600/966}
.pic.cover img{height:calc(100% - 31px);object-fit:cover;object-position:50% 50%}
.pic.tablet img{object-position:50% 24%}
.pic.phone img{object-position:50% 76%}
.where{display:block;height:31px;padding:8px 12px;border-top:1px solid var(--rule);
  color:var(--faint);font:500 11px/1.4 var(--cond);letter-spacing:.1em;
  text-transform:uppercase}
.panel h3{margin:18px 0 8px;font:700 clamp(20px,2vw,26px)/1.15 var(--cond)}
.panel p{margin:0 0 10px;color:var(--muted);font-size:.95rem;line-height:1.55}
.panel p a{color:var(--accent)}
.panel .more{display:inline-block;margin-top:4px;padding-bottom:3px;
  font:700 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent)}
.panel .more::after{content:"\2192";margin-left:8px}
.panel .more:hover{color:#7fb8ff;border-color:#7fb8ff;text-decoration:none}

@media(max-width:1000px){
  .cat{grid-template-columns:minmax(0,1fr);gap:22px}
}

/* --------------------------------------------------------- screenshots -- */
.gal{padding:8px 0 72px}
.gal .wrap{max-width:1180px;padding:0 var(--gut)}
.gal figure{margin:0 0 56px}
.gal h2{font:700 clamp(20px,2.6vw,30px)/1.1 'Barlow Semi Condensed',sans-serif;
  margin:0 0 8px}
.gal .cap{color:var(--muted);margin:0 0 18px;max-width:66ch;line-height:1.6}
.gal ul{margin:16px 0 0;padding:0 0 0 18px;color:var(--muted);
  columns:2;column-gap:32px}
.gal li{margin:0 0 7px;line-height:1.5;break-inside:avoid}
@media(max-width:700px){.gal ul{columns:1}}

/* ---------------------------------------------------------- the demo -- */
.walk{counter-reset:step;padding:8px 0 40px}
/* THE WRAP IS THE PAGE'S WRAP, and the MEASURE is put on the step. A 900px
   centred container inside an 1180px page put every step 140px to the right
   of the H1 above it, which reads as a mistake rather than as typography. */
.walk .wrap{max-width:1180px;padding:0 var(--gut)}
.walkstep{max-width:860px}
.walkstep{position:relative;border-top:1px solid var(--rule);padding:26px 0 26px 62px}
.walkstep::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:26px;
  font:700 20px/1 'Barlow Semi Condensed',sans-serif;color:var(--accent);
  letter-spacing:.02em}
.walkstep h3{font:700 19px/1.25 'Barlow Semi Condensed',sans-serif;margin:0 0 8px;
  letter-spacing:.01em}
.walkstep p{margin:0 0 10px;color:var(--muted);line-height:1.62}
.walkstep ol,.walkstep ul{margin:10px 0 0;padding-left:20px;color:var(--muted)}
.walkstep li{margin:0 0 8px;line-height:1.55}
.walkstep .look{margin:14px 0 0;padding:12px 14px;border-left:2px solid var(--accent);
  background:var(--bg2);color:var(--ink);font-size:.94rem;line-height:1.55}
.walkstep .look b{color:var(--accent);font-weight:700;
  font:600 11px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin:0 0 6px}
.walkstep code{background:var(--bg3);border:1px solid var(--rule);border-radius:2px;
  padding:1px 6px;font-size:.9em}
@media(max-width:560px){.walkstep{padding-left:0}
  .walkstep::before{position:static;display:block;margin:0 0 6px}}

  .callout{border:1px solid var(--warn);border-left-width:3px;background:
  rgba(214,158,46,.07);padding:16px 18px;margin:0 0 30px;color:var(--ink);
  line-height:1.6;max-width:860px;margin-inline:0 auto}
/* ONLY THE FIRST ONE IS THE LABEL. This was `.callout b`, so a bold phrase in
   the middle of a sentence was turned into an uppercase orange block heading
   and broke the paragraph in half. */
.callout > b:first-child{color:var(--warn);display:block;
  font:600 11px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 8px}
.callout b{color:var(--ink);font-weight:600}


/* ==========================================================================
   THE PHONE, WHICH IS WHERE ALMOST EVERYBODY ARRIVES.

   Jesse, 31 August: "all of the biggest complaints i got was people on
   mobile. almost nobody is looking at this on desktop right off the bat. is
   there a way we can isolate what mobile users see to make it reall really
   good for them while leaving the rich part ... for the desktop?"

   YES, AND NOT WITH A SECOND SITE. m.example.com means two codebases, a split
   between which URL gets linked to and indexed, and a device test that is
   wrong the first time somebody opens it on a tablet. One document, one
   address, and the two devices are given DIFFERENT CONTENT by media query:
   .d-only is desktop, .m-only is the phone, and neither is a rearrangement of
   the other - they are written separately where writing them separately is
   what makes the phone good.

   THE COST is that both are in the file. That is fine here and it is measured:
   a page is a dozen kilobytes and the stylesheet is shared and cached. The one
   thing that must NOT be duplicated is images, because a hidden <img> is still
   fetched - so every screenshot goes through <picture>, and the phone never
   downloads the desktop one.
   ========================================================================== */

.m-only{display:none}
@media(max-width:760px){
  .d-only{display:none !important}
  .m-only{display:block}
  span.m-only,a.m-only{display:inline}
  a.btn.m-only{display:inline-block}
}

/* ---- the chip navigation, phone only ---- */
.mobnav{display:none}
@media(max-width:760px){
  .mobnav{display:block;position:sticky;top:0;z-index:40;
    background:var(--nav);border-bottom:1px solid var(--rule)}
  .mobnav-in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:0 8px}
  .mobnav-in::-webkit-scrollbar{display:none}
  .mobnav a{flex:0 0 auto;padding:13px 12px;white-space:nowrap;
    text-decoration:none;color:var(--muted);
    font:600 12px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.11em;
    text-transform:uppercase;border-bottom:2px solid transparent}
  .mobnav a.on{color:var(--accent);border-bottom-color:var(--accent)}
}

/* ---- the thumb bar, phone only ---- */
.thumbbar{display:none}
@media(max-width:760px){
  .thumbbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;padding:9px 10px;
    background:color-mix(in srgb, var(--nav) 94%, transparent);
    border-top:1px solid var(--rule);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .thumbbar .btn{width:100%;text-align:center;padding:14px 8px;font-size:13px}
  /* nothing may hide under it */
  body{padding-bottom:74px}
  .titlebar .btn.sm{display:none}      /* it is in the thumb bar now */
}

/* ---- phones read one column, with room to tap ---- */
@media(max-width:760px){
  .h2o h1{font-size:clamp(30px,8.6vw,44px);line-height:1.03;max-width:none}
  .h2o .say{font-size:16.5px;line-height:1.55;margin-top:20px}
  /* The thumb bar is fixed to the bottom of the window and carries both
     actions on every screen of every page, so repeating them in the hero
     spent the top of the phone saying the same thing twice. */
  .h2o .cta{display:none}
  .h2o .wrap{padding-top:34px}
  .h2o::before{background-size:44px 44px}
  .h2o .shotwrap{margin-top:28px}
  .h2o .shotwrap::after{display:none}

  .creds .wrap{grid-template-columns:1fr}
  .creds div{padding:16px 18px}

  /* THE WHOLE SITE IN ONE SECTION, on a phone: the three buttons scroll
     sideways like the chip row, the items stack in one column, and the
     panel opens under the item that was tapped. */
  .whole{padding:30px 0 36px}
  .wholelbl{font-size:12.5px}
  .wholesub{margin-bottom:12px}
  .seg{display:flex;gap:0;padding:0 8px;margin:0 calc(-1 * var(--gut)) 16px;
    border:0;border-bottom:1px solid var(--rule);border-radius:0;
    background:transparent;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .seg::-webkit-scrollbar{display:none}
  .seg label{flex:0 0 auto;padding:13px 12px;border:0;border-radius:0;
    border-bottom:2px solid transparent}
  #cat-shop:checked~.seg label[for=cat-shop],
  #cat-machines:checked~.seg label[for=cat-machines],
  #cat-buying:checked~.seg label[for=cat-buying]{background:transparent;
    border-color:transparent;border-bottom-color:var(--accent);box-shadow:none}
  .cat{gap:0}
  .items,.panels{display:contents}
  .items>.item:nth-child(1){order:1}  .panels>.panel:nth-child(1){order:2}
  .items>.item:nth-child(2){order:3}  .panels>.panel:nth-child(2){order:4}
  .items>.item:nth-child(3){order:5}  .panels>.panel:nth-child(3){order:6}
  .items>.item:nth-child(4){order:7}  .panels>.panel:nth-child(4){order:8}
  .items>.item:nth-child(5){order:9}  .panels>.panel:nth-child(5){order:10}
  .items>.item:nth-child(6){order:11} .panels>.panel:nth-child(6){order:12}
  .items>.item:nth-child(7){order:13} .panels>.panel:nth-child(7){order:14}
  .items>.item:nth-child(8){order:15} .panels>.panel:nth-child(8){order:16}
  .item{margin:0 0 6px;padding:13px 14px;border-color:var(--rule);
    background:var(--strip)}
  .item b{font-size:16.5px}
  .cat>input:nth-of-type(1):checked~.items>.item:nth-child(1),
  .cat>input:nth-of-type(2):checked~.items>.item:nth-child(2),
  .cat>input:nth-of-type(3):checked~.items>.item:nth-child(3),
  .cat>input:nth-of-type(4):checked~.items>.item:nth-child(4),
  .cat>input:nth-of-type(5):checked~.items>.item:nth-child(5),
  .cat>input:nth-of-type(6):checked~.items>.item:nth-child(6),
  .cat>input:nth-of-type(7):checked~.items>.item:nth-child(7),
  .cat>input:nth-of-type(8):checked~.items>.item:nth-child(8){
    transform:none;box-shadow:none;margin-bottom:0;
    border-bottom-left-radius:0;border-bottom-right-radius:0}
  .panel{margin:0 0 10px;padding:12px 12px 14px;background:var(--panel-alt);
    border:1px solid var(--border-lit);border-top:0;border-radius:0 0 4px 4px}
  .panel h3{margin-top:14px;font-size:20px}
  .panel p{font-size:.95rem}

  .pagehead h1{font-size:clamp(25px,7.2vw,36px);max-width:none}
  .pagehead p{font-size:1rem}

  .gal figure{margin-bottom:38px}
  .gal .cap{font-size:.97rem}
  .gal ul{columns:1}
  .gal li{margin-bottom:10px}

  .walkstep h3{font-size:18px}
  .walkstep p, .walkstep li{font-size:.97rem}

  /* the crumb is the way back on a phone, so give it a target */
  .crumbs .wrap{padding-top:12px;padding-bottom:12px}
  .crumbs span:last-child{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
}

.shotlink{display:block;text-decoration:none}
.shotlink img{cursor:zoom-in}
/* the gallery's captions are the h2 above the picture, so the hint goes on
   the picture itself there */
.gal figure .shotlink{margin:0}

/* ---- a screenshot on a phone is a DETAIL, and it is framed as one ---- */
.shotdetail{border:1px solid var(--rule);border-radius:3px;
  background:var(--bg2);overflow:hidden}
.shotdetail img{display:block;width:100%;height:auto}

/* ---- ON A PHONE A SCREENSHOT FITS THE SCREEN --------------------------
   It used to keep its own width and scroll sideways, so the text stayed the
   size it was drawn. Jesse: "id like to figure out if we can make the screen
   shot ... fit the page so it does have to scroll right or left to see they
   whole picture ... i understand it might blur the words but lemme see what
   it looks like first."

   So it is scaled to fit. The crops are already the narrowest useful piece
   of each screen - about 790px - so a 390px phone shows them at roughly
   half, and the row text goes soft. What survives at that size is the SHAPE
   of the screen: the columns, the density, the fact that it is a real
   program with real rows in it. The words are on the page beside it.

   image-rendering is left alone deliberately: the browser's smooth downscale
   blurs, but -webkit-optimize-contrast on a half-scaled screenshot aliases
   the text into something worse. */
@media(max-width:760px){
  .shotfig{overflow:visible;border:1px solid var(--rule);border-radius:3px;
    background:var(--bg2)}
  .shotfig picture{display:block}
  .shotfig img.shot{width:100%;max-width:100%;height:auto;
    border:0;border-radius:0}
  .shotfig figcaption{padding:9px 12px;border-top:1px solid var(--rule)}
  .gal figure{overflow:visible;border:1px solid var(--rule);border-radius:3px;
    background:var(--bg2);padding:0}
  .gal figure h2, .gal figure .cap, .gal figure ul{width:auto;
    padding-left:12px;padding-right:12px}
  .gal figure h2{padding-top:14px}
  .gal figure img.shot{width:100%;max-width:100%;border:0;border-radius:0;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .gal figure ul{padding-bottom:14px;padding-left:30px}
  /* nothing to swipe any more */
  .swipe{display:none}
}

/* the footer is the same on eleven pages, so it gets its own rules here */
.foot{border-top:1px solid var(--rule);background:var(--bg2);margin-top:0}
/* NOT .fbrand - the long page already has a .fbrand and it is a flex row for
   the logo and the wordmark, so reusing the name laid this whole column out
   sideways and broke the paragraph to one word a line. Named .fmain, and
   given an explicit display so it cannot happen again. */
.foot .fmain{display:block}
.foot .fmain .brand{margin:0 0 4px}
.foot .fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px;
  padding:52px 24px 36px;max-width:1180px}
.foot .fmain p{color:var(--muted);font-size:.92rem;line-height:1.6;
  margin:12px 0 18px;max-width:34ch}
.foot .lbl{color:var(--faint);margin:0 0 12px}
.foot a{display:block;color:var(--muted);text-decoration:none;
  font-size:.93rem;margin:0 0 9px}
.foot a:hover{color:var(--accent)}
.foot .fmain a.btn{display:inline-block;color:#04121f}
.foot .fend{display:flex;justify-content:space-between;gap:24px;
  padding:18px 24px 40px;max-width:1180px;border-top:1px solid var(--rule);
  color:var(--faint);font-size:.82rem;line-height:1.5}
.foot .fend span:last-child{max-width:56ch;text-align:right}
@media(max-width:1000px){.foot .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot .fgrid{grid-template-columns:1fr;gap:26px;
    padding:34px 18px 24px}
  .foot .fend{flex-direction:column;padding:16px 18px 32px}
  .foot .fend span:last-child{text-align:left}}

/* ------------------------------------------------ annotated screenshots -- */
.annos{display:grid;gap:64px;margin:8px 0 24px}
.anno{margin:0}
.anno-sec h2{font:700 clamp(22px,2.4vw,30px)/1.1 var(--cond);margin:0 0 6px}
.anno-sec .annosub{margin:0 0 18px;color:var(--muted);max-width:60ch}
.annostage{position:relative;width:100%;container-type:inline-size}
.annolines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.annolines path{stroke:var(--accent);stroke-width:2.2;fill:none;opacity:.9}
.annolines circle{fill:var(--accent)}
.annoimg{position:absolute;display:block;line-height:0}
.annoimg img{display:block;width:100%;height:auto;border:1px solid var(--border);
  border-radius:4px;box-shadow:0 24px 50px -28px rgba(0,0,0,.9)}
.annomarks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.annomarks rect{fill:rgba(77,155,255,.07);stroke:var(--accent);stroke-width:4;
  filter:drop-shadow(0 0 6px rgba(77,155,255,.35))}
.annomarks .num circle{fill:var(--accent);stroke:#0f141a;stroke-width:5}
.annomarks .num text{fill:#04121f;font:700 28px var(--cond);text-anchor:middle}
.annolab{position:absolute;margin:0;font:600 1.34cqw/1.28 var(--cond);
  color:var(--ink);letter-spacing:.01em}
.annolab b{display:inline-block;min-width:1.5em;height:1.5em;margin-right:.45em;
  border-radius:50%;background:var(--accent);color:#04121f;text-align:center;
  line-height:1.5em;font-size:.8em;vertical-align:.08em}
.annolab.l{text-align:right}
.annolist{display:none}
.anno figcaption{margin-top:12px;color:var(--faint);font:500 12px/1.5 var(--cond);
  letter-spacing:.1em;text-transform:uppercase;text-align:center}
@media(max-width:760px){
  .annos{gap:44px}
  .annostage{aspect-ratio:auto!important}
  .annolines,.annolab{display:none}
  .annoimg{position:relative;left:auto!important;top:auto!important;width:100%!important}
  .annolist{display:block;margin:16px 0 0;padding:0;list-style:none;counter-reset:n}
  .annolist li{counter-increment:n;position:relative;padding:0 0 12px 38px;
    color:var(--ink);line-height:1.45}
  .annolist li::before{content:counter(n);position:absolute;left:0;top:-1px;
    width:26px;height:26px;border-radius:50%;background:var(--accent);
    color:#04121f;font:700 14px/26px var(--cond);text-align:center}
}