/* components part 7 of 7 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@media(max-width:760px){
  .vs-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .vs-cols>.vs-card{scroll-snap-align:start}}@media(max-width:700px){
  .cardgrid.four{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .cardgrid.four>.mini{scroll-snap-align:start}
  .timeline{grid-auto-columns:80%}}@media(max-width:900px){
  .cardgrid.ind{grid-template-columns:repeat(3,1fr);grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto;overflow-x:visible;gap:14px 10px;padding-bottom:0}
  .cardgrid.ind .mini.svc{flex-direction:column;text-align:center;gap:10px;padding:14px 8px}
  .cardgrid.ind .mini.svc .svc-img{width:100%;height:auto;max-width:104px}
  .cardgrid.ind .mini.svc .svc-body{text-align:center}
  .cardgrid.ind .mini.svc h3{font-size:14px;line-height:1.2}
  .cardgrid.ind .mini.svc p,.cardgrid.ind .mini.svc .svc-more{display:none}}
/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.card img,.mini.svc .svc-img,.mini.why .why-img{transition:none}}

/* live colour switcher */
body.mono .btn-p{background:var(--ink);border-color:var(--ink)}
body.mono .btn-p:hover{background:#000;border-color:#000}
body.mono .ba-knob svg{color:var(--ink)}
.note{position:fixed;right:12px;bottom:12px;max-width:330px;z-index:210;background:var(--white);border:1px solid var(--hair);color:var(--muted);font-size:10.5px;letter-spacing:.02em;line-height:1.4;text-align:center;padding:9px 13px;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.1)}


/* ---------------------------------------------------------------- legal pages
   A long numbered document is scanned, not read top to bottom, so the layout is a
   sticky contents rail beside a single measure-width column. Everything else is
   tokens and the existing .wrap/.head components — the only genuinely new thing
   here is the rail. */
.lg-wrap{padding-block:clamp(30px,4vw,54px) clamp(52px,7vw,96px)}
.lg-head{max-width:var(--measure);margin-bottom:clamp(26px,3.4vw,40px)}
.lg-head h1{margin:0 0 14px}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px}
.lg-tag{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
        color:var(--muted);background:var(--grey);border-radius:999px;padding:6px 12px}
.lg-grid{display:grid;grid-template-columns:220px minmax(0,1fr);
         gap:clamp(24px,4vw,64px);align-items:start}
.lg-toc{position:sticky;top:96px;font-size:13px;line-height:1.5}
.lg-toc h2{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.11em;
           text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.lg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lg-toc a{display:block;padding:4px 0;color:var(--muted);text-decoration:none;
          border-left:2px solid transparent;padding-left:10px;margin-left:-12px;
          transition:color .15s,border-color .15s}
.lg-toc a:hover,.lg-toc a:focus-visible{color:var(--ink);border-color:var(--accent)}
.lg-doc{max-width:var(--measure)}
.lg-doc .intro{font-size:clamp(16px,1.15vw,17.5px);line-height:1.65;color:var(--ink);
               padding-bottom:clamp(20px,2.6vw,30px);margin-bottom:clamp(16px,2.4vw,28px);
               border-bottom:1px solid var(--hair)}
.lg-doc section{scroll-margin-top:96px;margin-bottom:clamp(26px,3.4vw,38px)}
.lg-doc h2{font-size:clamp(18px,1.5vw,21px);margin:0 0 10px;letter-spacing:-0.01em}
.lg-doc h2 .n{color:var(--accent);font-variant-numeric:tabular-nums;margin-right:8px}
.lg-doc p{margin:0 0 12px;line-height:1.68;color:var(--muted)}
.lg-doc ul{margin:0 0 12px;padding-left:20px;color:var(--muted)}
.lg-doc li{margin-bottom:7px;line-height:1.6}
.lg-doc strong{color:var(--ink);font-weight:700}
/* Links inherit the accent from the design system rather than the parent theme's pink. */
.lg-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
          text-decoration-thickness:1px}
.lg-doc a:hover,.lg-doc a:focus-visible{color:var(--ink)}
.lg-id{margin-top:clamp(28px,3.6vw,42px);padding:clamp(18px,2.2vw,26px);
       background:var(--grey);border-radius:3px}
.lg-id dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.lg-id dt{color:var(--muted);font-weight:600}
.lg-id dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}@media(max-width:900px){
  .lg-grid{grid-template-columns:1fr}
  .lg-toc{position:static;border-bottom:1px solid var(--hair);padding-bottom:18px}
  .lg-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .lg-toc a{border-left:0;padding-left:0;margin-left:0}}