/* Reboot AV — shared site styles.
   One copy, linked by every page. Duplicating this per page is how a site
   starts looking like two different sites. */

  /* Reboot brand: committed dark — the logo's world */
  :root{
    --ground:#050508;
    --panel:#0E0E16;
    --panel-line:#1E1E2E;
    --ink:#F2F3F8;
    --ink-soft:#9799AE;
    --blue:#2E9BF6;
    --violet:#A02EF0;
    --grad:linear-gradient(100deg,#2E9BF6 0%,#6A5BF2 50%,#A02EF0 100%);
    --go:#2DD4A7;    /* included */
    --stop:#F2566A;  /* not included */
  }
  html{scroll-behavior:smooth;}
  html,body{background:var(--ground);color:var(--ink);margin:0;}
  body{
    font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,44px);}

  /* ---------- nav ---------- */
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 0;
  }
  nav .logo img{height:30px;display:block;}
  .btn{
    display:inline-block;text-decoration:none;font-weight:800;
    font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;background:var(--grad);
    padding:12px 24px;border-radius:999px;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 30px rgba(106,91,242,.45);}
  .btn.ghost{
    background:none;border:1.5px solid var(--panel-line);color:var(--ink);
  }
  .btn.ghost:hover{border-color:var(--violet);box-shadow:none;}

  /* ---------- hero ---------- */
  .hero{
    text-align:center;
    padding:clamp(56px,10vw,120px) 0 clamp(48px,8vw,96px);
    position:relative;overflow:hidden;
  }
  .hero .bgvid{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 30%;
    z-index:0;
  }
  .hero .veil{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(5,5,8,.68) 0%,rgba(5,5,8,.78) 60%,var(--ground) 100%);
  }
  .hero .wrap{position:relative;z-index:2;}
  .hero::before{ /* ambient power glow */
    content:"";position:absolute;left:50%;top:-8%;
    width:min(720px,90vw);height:70%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(106,91,242,.22),rgba(46,155,246,.08) 55%,transparent 75%);
    pointer-events:none;
  }
  .hero .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:26px;
  }
  .power{ /* the logo's power symbol, drawn in CSS */
    width:14px;height:14px;border:2px solid var(--violet);border-radius:50%;
    position:relative;display:inline-block;
    border-top-color:transparent;
    transform:rotate(0deg);
  }
  .power::after{
    content:"";position:absolute;left:50%;top:-5px;
    width:2px;height:8px;background:var(--violet);
    transform:translateX(-50%);border-radius:2px;
  }
  .hero h1{
    font-weight:900;
    font-size:clamp(40px,7vw,84px);
    line-height:1.02;letter-spacing:-.025em;
    margin:0 0 22px;text-wrap:balance;
  }
  .hero h1 .grad{
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.sub{
    font-size:clamp(16px,2vw,20px);color:var(--ink-soft);
    max-width:56ch;margin:0 auto 36px;text-wrap:balance;
  }
  .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .hero .fine{margin-top:18px;font-size:13px;color:var(--ink-soft);letter-spacing:.04em;}

  /* ---------- nav right ---------- */
  .navright{display:flex;align-items:center;gap:clamp(12px,2vw,22px);}
  /* Each tab is the control you would reach for, in its own colour, with the
     label small underneath. Every item is the same width and the same height
     so the row reads as one panel instead of seven loose marks. */
  .navlink{
    color:var(--ink-soft);text-decoration:none;white-space:nowrap;
    display:inline-flex;flex-direction:column;align-items:center;
    min-width:104px;
    font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  /* A fixed row for the control. Without this the taller drawings push their
     own label down and the words stop sharing a line. */
  .navlink .nw{
    width:22px;height:22px;display:block;margin-bottom:6px;
    color:var(--nc);
    transition:transform .16s ease,filter .16s ease;
  }
  .navlink:hover{color:var(--ink);}
  .navlink:hover .nw{transform:translateY(-1px);filter:brightness(1.25);}

  /* Always present, so every tab is exactly as tall as every other. */
  .navlink .navbar{
    display:block;width:26px;height:2px;margin-top:5px;border-radius:2px;
    background:transparent;
  }
  .navlink.on{color:var(--ink);}
  .navlink.on .navbar{background:var(--nc);}
  .navlink.on .nw{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--nc) 70%,transparent));}

  /* Six tabs, a sign-in link and a button do not fit one row below about a
     laptop, and a nav that overflows just hides whatever came last. So the
     links are allowed to wrap and the row they sit on grows instead. Below a
     phone width they take the whole width under the logo and centre. */
  .navright{flex-wrap:wrap;justify-content:flex-end;row-gap:10px;}
  .navlink.on{color:var(--ink);}
  @media (max-width:860px){
    nav{flex-wrap:wrap;gap:12px;}
    nav .logo{flex:0 0 auto;}
    .navright{width:100%;justify-content:flex-start;gap:14px;row-gap:10px;}
  }
  @media (max-width:560px){
    .navright{justify-content:center;gap:12px;}
    .navright .btn{padding:11px 18px;font-size:13px;}
  }

  /* ---------- two doors ----------
     A technician and a company want opposite things from this page, and until
     now both got the same button. */
  .doors{padding:clamp(28px,4vw,48px) 0 clamp(8px,1vw,16px);}
  .doorgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media (max-width:760px){.doorgrid{grid-template-columns:1fr;}}
  .door{
    display:flex;flex-direction:column;gap:8px;
    background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
    padding:clamp(22px,3vw,32px);text-decoration:none;color:inherit;
    position:relative;overflow:hidden;
    transition:border-color .2s ease,transform .2s ease;
  }
  .door:hover{border-color:#3A3A58;transform:translateY(-2px);}
  .door::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.55;}
  .door .kicker{
    font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
    color:var(--ink-soft);
  }
  .door h3{margin:2px 0 0;font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:-.02em;}
  .door h3 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .door p{margin:0;color:var(--ink-soft);font-size:15px;max-width:44ch;}
  .door .go{
    margin-top:10px;font-weight:800;font-size:13.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--blue);
  }
  .door:hover .go{color:var(--violet);}

  /* ---------- pillars ---------- */
  .pillars{padding:clamp(30px,5vw,60px) 0 clamp(50px,7vw,90px);}
  .section-head{
    display:flex;align-items:center;gap:16px;margin-bottom:34px;
  }
  .section-head h2{
    font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink-soft);margin:0;white-space:nowrap;
  }
  .section-head::after{content:"";flex:1;height:1.5px;background:var(--grad);opacity:.5;}
  @media (max-width:620px){
    .section-head{align-items:flex-start;gap:12px;}
    .section-head h2{white-space:normal;}
    .section-head::after{margin-top:9px;}
  }
  .grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  }
  @media (max-width:860px){.grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.grid{grid-template-columns:1fr;}}
  .card{
    background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;
    padding:26px 24px;position:relative;overflow:hidden;
    transition:border-color .2s ease,transform .2s ease;
  }
  .card:hover{border-color:#3A3A58;transform:translateY(-2px);}
  .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2.5px;background:var(--grad);opacity:0;transition:opacity .2s ease;z-index:2;}
  .card:hover::before{opacity:1;}
  .card .bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:.14;filter:saturate(.85);
    transition:opacity .25s ease;z-index:0;pointer-events:none;
  }
  .card:hover .bg{opacity:.34;}
  .card .ic,.card h3,.card p{position:relative;z-index:1;}
  .card p{text-shadow:0 1px 8px rgba(5,5,8,.9);}
  .card .ic{
    font-family:Menlo,Consolas,monospace;font-size:13px;font-weight:700;
    letter-spacing:.1em;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
    display:block;margin-bottom:14px;
  }
  .card h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .card p{margin:0;font-size:14.5px;color:var(--ink-soft);}
  .soon{
    font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    border:1px solid var(--violet);color:var(--violet);
    border-radius:999px;padding:3px 9px;white-space:nowrap;
  }

  /* ---------- video wall band ---------- */
  .band{padding:clamp(10px,2vw,24px) 0 clamp(30px,4vw,52px);}
  .band .tiles{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:14px;
    align-items:stretch;
  }
  @media (max-width:700px){.band .tiles{grid-template-columns:1fr;}}
  .tile{
    position:relative;border-radius:14px;overflow:hidden;
    border:1px solid var(--panel-line);
    background:var(--panel);
    min-height:240px;max-height:420px;
  }
  .tile video,.tile img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  }
  .band figcaption{
    text-align:center;margin-top:16px;
    font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------- free tools ----------
     The only part of this site a stranger might find by searching. Nobody looks
     for "Reboot AV community"; they look for a subnet calculator. */
  .tools{border-top:1px solid var(--panel-line);padding:clamp(48px,7vw,88px) 0;}
  .tools .lead{color:var(--ink-soft);margin:0 0 28px;font-size:15.5px;max-width:56ch;}
  .toolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  @media (max-width:900px){.toolgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.toolgrid{grid-template-columns:1fr;}}
  .tool{
    display:block;text-decoration:none;color:var(--ink);
    background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;
    padding:16px 18px;font-size:15px;font-weight:700;letter-spacing:-.01em;
    transition:border-color .2s ease,transform .2s ease;
  }
  .tool span{display:block;font-weight:400;font-size:13px;color:var(--ink-soft);margin-top:4px;}
  .tool:hover{border-color:var(--violet);transform:translateY(-2px);}
  .tools .after{margin:28px 0 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .tools .after .note{color:var(--ink-soft);font-size:14px;}

  /* ---------- B2B ---------- */
  .b2b{
    border-top:1px solid var(--panel-line);
    padding:clamp(48px,7vw,88px) 0;
  }
  .b2b .inner{
    background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;
    padding:clamp(28px,4.5vw,52px);
    display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;
    position:relative;overflow:hidden;
  }
  .b2b .inner::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);}
  @media (max-width:760px){.b2b .inner{grid-template-columns:1fr;}}
  .b2b .kicker{
    font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink-soft);display:block;margin-bottom:14px;
  }
  .b2b h2{
    font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.02em;
    line-height:1.15;margin:0 0 12px;text-wrap:balance;
  }
  .b2b h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .b2b p{color:var(--ink-soft);margin:0 0 24px;font-size:15.5px;max-width:52ch;}
  .b2b ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .b2b li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--ink-soft);}
  .b2b li::before{content:"⏻";color:var(--blue);font-weight:700;flex:0 0 auto;font-family:system-ui,sans-serif;}
  .b2b li strong{color:var(--ink);font-weight:700;}

  /* ---------- who it's for ---------- */
  .who{
    border-top:1px solid var(--panel-line);
    padding:clamp(48px,7vw,88px) 0;
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;
  }
  @media (max-width:760px){.who{grid-template-columns:1fr;}}
  .who h2{
    font-size:clamp(26px,3.6vw,38px);font-weight:900;letter-spacing:-.02em;
    line-height:1.12;margin:0;text-wrap:balance;
  }
  .who h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .who ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .who li{
    display:flex;gap:14px;align-items:baseline;
    font-size:16px;color:var(--ink-soft);
  }
  .who li::before{
    content:"⏻";color:var(--violet);font-weight:700;flex:0 0 auto;
    font-family:system-ui,sans-serif;
  }
  .who li strong{color:var(--ink);font-weight:700;}

  /* ---------- final CTA ---------- */
  .final{
    text-align:center;
    padding:clamp(56px,9vw,110px) 0;
    position:relative;overflow:hidden;
    border-top:1px solid var(--panel-line);
    background:
      linear-gradient(180deg,var(--ground) 0%,rgba(5,5,8,.8) 40%,rgba(5,5,8,.8) 100%),
      url("media/img-e523104b58.jpg") center/cover no-repeat;
  }
  .final::before{
    content:"";position:absolute;left:50%;bottom:-40%;
    width:min(800px,100vw);height:90%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(160,46,240,.18),transparent 70%);
    pointer-events:none;
  }
  .final h2{
    font-weight:900;font-size:clamp(30px,5vw,56px);letter-spacing:-.02em;
    margin:0 0 14px;text-wrap:balance;
  }
  .final h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .final p{color:var(--ink-soft);margin:0 0 32px;font-size:17px;}

  /* ---------- subpage section ----------
     .section is used on every subpage but had no rule of its own, so a section
     that ended in a button ran straight into the next heading -- the button is
     inline-block and carries no margin. Spacing a section by what happens to be
     inside it only works until something else is inside it. */
  .section{padding-bottom:clamp(30px,4.5vw,56px);}
  .section:first-of-type{padding-top:clamp(30px,4.5vw,56px);}

  /* ---------- course series ----------
     147 courses is too many to lay flat, and a visitor almost always wants one
     series rather than all of them. Each series opens on its own; none is open
     to start, so the page is readable the moment it loads. */
  .serieslist{display:flex;flex-direction:column;gap:8px;margin:0 0 6px;}
  .series{
    background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;
    overflow:hidden;
  }
  .series summary{
    cursor:pointer;list-style:none;
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:15px 18px;font-weight:700;font-size:16px;letter-spacing:-.01em;
  }
  .series summary::-webkit-details-marker{display:none;}
  .series summary:hover{color:var(--ink);}
  .series[open] summary{border-bottom:1px solid var(--panel-line);}
  .series .sname{position:relative;padding-left:20px;}
  .series .sname::before{
    content:"+";position:absolute;left:0;top:-1px;
    color:var(--violet);font-weight:700;
  }
  .series[open] .sname::before{content:"\2013";}
  .series .scount{
    color:var(--ink-faint,var(--ink-soft));font-weight:400;font-size:13px;
    white-space:nowrap;
  }
  .series ul{
    list-style:none;margin:0;padding:12px 18px 16px;
    display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;
  }
  @media (max-width:700px){.series ul{grid-template-columns:1fr;}}
  .series li{font-size:14.5px;line-height:1.45;}
  .series li a{
    color:var(--ink-soft);text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .series li a:hover{color:var(--ink);border-bottom-color:var(--violet);}

  /* ---------- partners ----------
     Every logo arrives in a different state, so each gets the treatment its own
     artwork needs rather than one blanket filter. Flattening everything to white
     was tried first and turned two of them into solid rectangles: a mark drawn
     on an opaque plate has no transparency to flatten around, so the plate goes
     white along with the artwork.
       .white    already white on transparent -- leave it alone
       .inv      black artwork on a white plate -- invert it, then screen the
                 plate (now black) away against the page
       .onblack  white artwork on a black plate -- screen the plate away
       default   colour artwork on transparent -- desaturated and lifted so it
                 sits with the others without losing its shapes */
  .partners{
    border-top:1px solid var(--panel-line);
    padding:clamp(36px,5vw,60px) 0;
  }
  .partners h2{
    margin:0 0 clamp(20px,3vw,30px);
    font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-soft);text-align:center;
  }
  .plogos{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:clamp(26px,5vw,56px);
  }
  .plogo{
    display:flex;align-items:center;justify-content:center;
    height:44px;flex:0 0 auto;
  }
  .plogo img{
    max-height:100%;max-width:150px;width:auto;height:auto;
    object-fit:contain;
    filter:grayscale(1) brightness(1.3);
    opacity:.62;
    transition:opacity .18s ease;
  }
  .plogo.white img{filter:none;opacity:.6;}
  .plogo.inv img{filter:invert(1);mix-blend-mode:screen;opacity:.72;}
  .plogo.onblack img{filter:none;mix-blend-mode:screen;opacity:.8;}
  /* A square mark carries less width than a wordmark at the same height, so it
     is given a little more to sit level with them by eye. */
  .plogo.onblack{height:56px;}
  .plogo img:hover{opacity:1;}
  @media (max-width:520px){
    .plogos{gap:22px 30px;}
    .plogo{height:34px;}
    .plogo.onblack{height:44px;}
  }
  @media (prefers-reduced-motion: reduce){.plogo img{transition:none;}}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--panel-line);
    padding:26px 0 40px;
    display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    font-size:13px;color:var(--ink-soft);letter-spacing:.04em;
  }
  footer img{height:20px;opacity:.85;}

  @media (prefers-reduced-motion: reduce){
    .btn,.card{transition:none;}
  }
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

/* ================= pages other than the home page ================= */

nav a.logo{display:block;}
.lead{color:var(--ink-soft);font-size:15.5px;max-width:60ch;margin:0 0 26px;}
.note{
  color:var(--ink-soft);font-size:14px;max-width:70ch;margin:26px 0 0;
  border-left:2px solid var(--panel-line);padding-left:16px;line-height:1.6;
}

/* ---------- page hero (no video) ---------- */
.pagehero{
  padding:clamp(34px,6vw,76px) 0 clamp(30px,5vw,56px);
  position:relative;overflow:hidden;border-bottom:1px solid var(--panel-line);
}
.pagehero::before{
  content:"";position:absolute;left:50%;top:-30%;
  width:min(760px,95vw);height:140%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(106,91,242,.18),rgba(46,155,246,.06) 55%,transparent 72%);
  pointer-events:none;
}
.pagehero .wrap{position:relative;z-index:1;}
.pagehero h1{
  font-weight:900;font-size:clamp(32px,5.4vw,58px);line-height:1.04;
  letter-spacing:-.025em;margin:18px 0;text-wrap:balance;max-width:18ch;
}
.pagehero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pagehero .sub{font-size:clamp(16px,1.9vw,19px);color:var(--ink-soft);max-width:58ch;margin:0 0 30px;}
.pagehero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- membership levels ---------- */
.levels{border-top:1px solid var(--panel-line);padding:clamp(44px,6vw,80px) 0;}
.levelgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){.levelgrid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.levelgrid{grid-template-columns:1fr;}}
.level{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;
  padding:22px 20px;position:relative;overflow:hidden;
}
.level::before{content:"";position:absolute;inset:0 0 auto 0;height:2.5px;background:var(--grad);opacity:.5;}
.level h3{margin:0 0 2px;font-size:19px;font-weight:800;letter-spacing:-.01em;}
.level .price{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.level ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.level li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:var(--ink);}
/* Something a level does NOT include should read as absent, not as a warning. */
.level li.no{color:var(--ink-soft);}
/* The mark is the power symbol the brand draws everywhere else, not the "⏻"
   character -- that rendered thin and pale, and differently on every machine.
   Green means the level includes it; red means it does not. */
.level li .power{
  flex:0 0 auto;width:12px;height:12px;border-width:2px;
  position:relative;top:2px;
}
.level li .power::after{top:-4px;width:2px;height:6px;}
.level li.yes .power{border-color:var(--go);border-top-color:transparent;}
.level li.yes .power::after{background:var(--go);}
.level li.no .power{border-color:var(--stop);border-top-color:transparent;}
.level li.no .power::after{background:var(--stop);}

/* ---------- how to join ---------- */
.steps{border-top:1px solid var(--panel-line);padding:clamp(44px,6vw,80px) 0;}
.steplist{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:16px;max-width:70ch;}
/* The number is positioned, not a grid cell. As a grid, every loose run of text
   in the item became its own cell and the sentence broke apart down the number
   column the moment a <b> was used. */
.steplist li{
  counter-increment:s;position:relative;padding-left:38px;
  font-size:16px;color:var(--ink-soft);line-height:1.55;
}
.steplist li::before{
  content:counter(s);position:absolute;left:0;top:0;
  font-family:Menlo,Consolas,monospace;font-size:13px;font-weight:700;line-height:1.75;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.steplist b{color:var(--ink);font-weight:700;}

/* ---------- founding members ---------- */
.founding{border-top:1px solid var(--panel-line);padding:clamp(44px,6vw,80px) 0;}
.founding .inner{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;
  padding:clamp(26px,4vw,48px);position:relative;overflow:hidden;
}
.founding .inner::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);}
.founding .kicker{font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:14px;}
.founding h2{font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0 0 12px;text-wrap:balance;}
.founding h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.founding p{color:var(--ink-soft);margin:0 0 24px;font-size:15.5px;max-width:62ch;}

/* ---------- home ----------
   The logo file is a lockup on its own black plate, which shows as a box
   against the page. The mark on its own is the same symbol, drawn in CSS, and
   it scales and recolours with the page instead of fighting it. */
nav .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
nav .logo .power{width:22px;height:22px;border-width:3px;}
nav .logo .power::after{top:-7px;width:3px;height:11px;}
nav .logo .name{font-weight:800;letter-spacing:-.02em;font-size:17px;}
nav .logo:hover .power{border-color:var(--blue);}
nav .logo:hover .power::after{background:var(--blue);}

/* ---------- the spotlight ----------
   The beam sweeps, and the silhouette is masked BY the beam, so a shape is
   only lit while the light is actually on it. Two layers, same animation,
   same timing -- if they ever drift apart the shape lights up in the dark. */
.pagehero{--beam:0%;}
@keyframes sweep{
  0%   {--beam:6%;}
  50%  {--beam:94%;}
  100% {--beam:6%;}
}
@property --beam{syntax:'<percentage>';inherits:true;initial-value:50%;}

.pagehero::before{
  left:0;right:0;width:auto;transform:none;
  background:
    radial-gradient(ellipse 70% 130% at var(--beam) 16%,
      rgba(106,91,242,.34),rgba(46,155,246,.12) 42%,rgba(46,155,246,.05) 68%,transparent 100%),
    linear-gradient(90deg,rgba(46,155,246,.05),rgba(106,91,242,.07),rgba(46,155,246,.05));
  animation:sweep 19s ease-in-out infinite;
}

.pagehero .cast{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:78% 88%;
  background-size:auto 48%;
  opacity:.14;
  /* Only lit where the beam is. The mask follows the same --beam the light
     does, so the shape is revealed by the light rather than beside it. */
  -webkit-mask-image:radial-gradient(ellipse 30% 90% at var(--beam) 40%,#000 0 38%,transparent 72%);
          mask-image:radial-gradient(ellipse 30% 90% at var(--beam) 40%,#000 0 38%,transparent 72%);
  animation:sweep 19s ease-in-out infinite;
}

/* A page with nothing to show in the beam simply has no .cast element. */
@media (prefers-reduced-motion: reduce){
  .pagehero::before,.pagehero .cast{animation:none;}
  .pagehero .cast{opacity:.1;}
}
/* On a phone the text uses the whole width, so there is nowhere for a shape to
   stand without being behind a sentence. */
@media (max-width:820px){.pagehero .cast{display:none;}}

/* ---------- the map ---------- */
.mapshot{
  display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--panel-line);
}
.mapsplit{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(22px,4vw,46px);align-items:center;}
@media (max-width:820px){.mapsplit{grid-template-columns:1fr;}}

/* ---------- the road ----------
   Pathfinder is a route between stations, so the picture of it is a route
   being travelled: the line draws itself, and a marker runs the stations in
   order. Drawn rather than filmed, so it costs nothing to load. */
.road{width:100%;height:auto;display:block;}
.road .track{stroke:var(--panel-line);stroke-width:2;fill:none;}
.road .drawn{
  stroke:url(#roadgrad);stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:620;stroke-dashoffset:620;
  animation:draw 7s ease-in-out infinite;
}
@keyframes draw{
  0%   {stroke-dashoffset:620;}
  55%  {stroke-dashoffset:0;}
  88%  {stroke-dashoffset:0;}
  100% {stroke-dashoffset:620;}
}
.road .stop{fill:var(--ground);stroke:var(--panel-line);stroke-width:2;}
.road .car{fill:#fff;}
.road .car{animation:ride 7s ease-in-out infinite;}
@keyframes ride{
  0%   {opacity:0;}
  6%   {opacity:1;}
  80%  {opacity:1;}
  92%  {opacity:0;}
  100% {opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .road .drawn{animation:none;stroke-dashoffset:0;}
  .road .car{animation:none;opacity:1;}
}

/* ---------- vendor marks ----------
   On the live-session cards, so somebody looking for their own software sees it
   before they read anything. Left at the vendors' own colours: a logo recoloured
   to match a host site stops being that company's mark.

   Barco publishes theirs as white type on a red plate, so it is held shorter
   than the Resolume wordmark -- matched by the weight of ink on the page rather
   than by height, or the red block shouts over everything beside it. */
.card .vendor{
  display:block;height:26px;width:auto;margin:0 0 14px;
  opacity:.92;
}
.card .vendor.plate{height:37px;border-radius:3px;}
@media (prefers-reduced-motion: no-preference){
  .card .vendor{transition:opacity .18s ease;}
}
.card:hover .vendor{opacity:1;}

/* ---------- tool widgets ----------
   The hub's card, reproduced here so a tool looks the same wherever it is met.
   Every colour comes from --ac, set per card, because the accent IS how people
   recognise these: the video builder is cyan and the power builder is red. */
.wcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  padding:22px 20px 18px;min-height:210px;
  box-shadow:0 24px 50px -34px rgba(0,0,0,.9);
  transition:transform .2s ease,border-color .2s ease;
}
/* The lit edge along the top. This one line is most of why the hub's cards
   read as equipment rather than as boxes of text. */
.wcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--ac);opacity:.85;
}
.wcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .2s ease;
  background:radial-gradient(420px 150px at 50% -30%,
    color-mix(in srgb,var(--ac) 16%,transparent),transparent 70%);
}
.wcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 55%,transparent);}
.wcard:hover::after{opacity:1;}

.wcard .wico{
  width:48px;height:48px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;line-height:1;margin-bottom:16px;
  background:color-mix(in srgb,var(--ac) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 42%,transparent);
  box-shadow:0 0 26px -6px color-mix(in srgb,var(--ac) 60%,transparent);
}
/* The signal chain in a line. Says what the tool touches before the name does. */
.wcard .wkick{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);margin-bottom:7px;
}
.wcard .wname{
  display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px;
}
.wcard .wsub{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.6;flex:1;}
.wcard .wgo{
  margin-top:14px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);
}

/* Four across like the hub, down to two, then one. A 210px card at phone width
   with four across would be unreadable. */
.toolgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
@media (max-width:1000px){.toolgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.toolgrid{grid-template-columns:1fr;}}

@media (prefers-reduced-motion: reduce){
  .wcard{transition:none;}
  .wcard:hover{transform:none;}
}