/* ==========================================================================
   VisualIQ — visualiq.au
   Brand: navy #021E4F · blue #0079FB · orange #FD7701 (sampled from the logo)
   Type:  Archivo (display) · Public Sans (body) · IBM Plex Mono (metadata)
   ========================================================================== */

/* ---------- tokens: light is the base, both dark states redefine ---------- */
:root {
  --navy-900:#021E4F; --navy-800:#062B66; --navy-700:#0B3D8C;
  --blue:#0079FB;     --blue-600:#0062D6; --blue-050:#E9F2FF;
  --orange:#FD7701;   --orange-600:#D96400; --orange-050:#FFF1E4;

  --paper:#FFFFFF;
  --surface:#F4F7FC;
  --surface-2:#E9F0FA;
  --ink:#021E4F;
  --ink-2:#12336B;
  --muted:#5A719B;
  --line:#DBE4F2;
  --line-strong:#C3D2E9;

  --good:#0E8C5A; --warn:#B26A00; --bad:#C62C3C;

  --shadow-sm:0 1px 2px rgba(2,30,79,.06), 0 1px 3px rgba(2,30,79,.05);
  --shadow-md:0 8px 24px -12px rgba(2,30,79,.24), 0 2px 6px rgba(2,30,79,.06);
  --shadow-lg:0 32px 64px -32px rgba(2,30,79,.38), 0 8px 24px -16px rgba(2,30,79,.20);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  --ff-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1180px;
  --nav-h:72px;

  --logo-invert:0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#040F27;
    --surface:#081A3E;
    --surface-2:#0C2350;
    --ink:#EAF1FF;
    --ink-2:#C6D8F6;
    --muted:#93ABD6;
    --line:#153061;
    --line-strong:#1D3F79;
    --blue-050:#0C2A57;
    --orange-050:#38220C;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px -12px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
    --shadow-lg:0 32px 64px -32px rgba(0,0,0,.8), 0 8px 24px -16px rgba(0,0,0,.5);
    --logo-invert:1;
  }
}
:root[data-theme="dark"] {
  --paper:#040F27;
  --surface:#081A3E;
  --surface-2:#0C2350;
  --ink:#EAF1FF;
  --ink-2:#C6D8F6;
  --muted:#93ABD6;
  --line:#153061;
  --line-strong:#1D3F79;
  --blue-050:#0C2A57;
  --orange-050:#38220C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -12px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg:0 32px 64px -32px rgba(0,0,0,.8), 0 8px 24px -16px rgba(0,0,0,.5);
  --logo-invert:1;
}

/* ---------------------------------- base --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:var(--ff-display);color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(2.35rem,5.2vw,3.55rem);font-weight:800}
h2{font-size:clamp(1.95rem,3.8vw,2.85rem);font-weight:700}
h3{font-size:clamp(1.18rem,1.9vw,1.42rem);font-weight:700;line-height:1.25}
h4{font-size:1.02rem;font-weight:700;line-height:1.3}
p{margin:0}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.section{padding-block:clamp(64px,8vw,112px)}
.section--tight{padding-block:clamp(44px,5vw,72px)}
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:62ch}
.lede--center{margin-inline:auto}
.mono{font-family:var(--ff-mono)}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* brand device: the slash from MANAGE / ORGANISE / FIND */
.eyebrow{
  font-family:var(--ff-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 14px;
}
.eyebrow::before{content:"/";color:var(--orange);font-weight:500}

/* --------------------------------- buttons -------------------------------- */
.btn{
  --btn-bg:var(--blue); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ff-body);font-size:.97rem;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:var(--r-pill);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;text-decoration:none;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn--lg{padding:17px 30px;font-size:1.03rem}
.btn--sm{padding:9px 16px;font-size:.87rem}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bd:var(--blue);--btn-fg:var(--blue-600)}
.btn--quiet{--btn-bg:transparent;--btn-fg:var(--muted);--btn-bd:transparent;padding-inline:10px}
.btn--quiet:hover{--btn-fg:var(--ink)}
.btn--accent{--btn-bg:var(--orange)}
.btn--accent:hover{--btn-bg:var(--orange-600)}
.btn--block{width:100%}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ---------------------------------- chrome -------------------------------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease, background .2s ease;
}
.nav[data-stuck="true"]{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:30px;width:auto}
.brand:hover{text-decoration:none}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1 1 auto}
.nav__links a{
  color:var(--ink-2);font-size:.95rem;font-weight:500;padding:9px 13px;border-radius:var(--r-pill);
  transition:background .18s ease,color .18s ease;
}
.nav__links a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__demo-short{display:none}
.iconbtn{
  width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.iconbtn:hover{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.iconbtn svg{width:18px;height:18px}
.nav__toggle{display:none}
.theme-dark-only{display:none}
:root[data-theme="dark"] .theme-dark-only{display:block}
:root[data-theme="dark"] .theme-light-only{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-dark-only{display:block}
  :root:not([data-theme="light"]) .theme-light-only{display:none}
}

@media (max-width:900px){
  .nav__toggle{display:inline-grid}
  .nav__links{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);padding:12px 20px 20px;margin:0;
    box-shadow:var(--shadow-md);
  }
  .nav__links[hidden]{display:none}
  .nav__links a{padding:12px 14px;font-size:1.02rem}
  .nav__actions .btn--ghost{display:none}
  /* Except the demonstration, which is the one button on this bar a phone
     visitor is most likely to want — they are far less likely to be signing
     in to an account than somebody at a desk. It also loses its border and a
     little padding here, so the bar does not end up with two buttons of equal
     weight fighting for a 390px line. */
  .nav__actions .nav__demo{
    display:inline-flex;border-color:transparent;padding-inline:8px;
    font-size:.9rem;
  }
  /* The short label takes over. The full phrase is still what a screen reader
     announces, from the aria-label, because "demo" on its own is a word rather
     than an instruction. */
  .nav__demo-long{display:none}
  .nav__demo-short{display:inline}
}

/*
 * The narrow end of the bar.
 *
 * Measured rather than guessed: at 390px the row came to 427px and the primary
 * button was being cut off the right-hand edge. It was already within a pixel
 * or two of the edge before the demo button was added, so this is the width
 * that was always going to be the problem and the demo button is only what
 * found it. The gap tightens, the wordmark comes down a few pixels, and
 * everything fits with room to spare.
 */
@media (max-width:460px){
  .nav__actions{gap:6px}
  .brand img{height:26px}
  .nav__demo{padding-inline:6px}
  /* The wrap padding is 20px a side; at this width the two together are worth
     more as room for the buttons than as margin. */
  .nav__in{padding-inline:12px}
  .btn--sm{padding:8px 12px}
}

.footer{background:var(--surface);border-top:1px solid var(--line);padding-block:64px 40px}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.footer__grid h4{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px}
.footer__grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer__grid a{color:var(--ink-2);font-size:.95rem}
.footer__grid a:hover{color:var(--blue-600)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.87rem}
.footer .brand img{height:28px}
.footer__blurb{color:var(--muted);font-size:.95rem;max-width:34ch;margin-top:16px}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ---------------------------------- hero ---------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,96px)}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:70%;z-index:-1;
  background:
    radial-gradient(52% 60% at 22% 30%, color-mix(in srgb,var(--blue) 18%, transparent), transparent 70%),
    radial-gradient(40% 50% at 82% 12%, color-mix(in srgb,var(--orange) 13%, transparent), transparent 72%);
  filter:blur(8px);
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(32px,4vw,64px);align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr;gap:40px}}
.hero h1 .hl{
  background:linear-gradient(103deg,var(--blue) 0%,var(--navy-700) 58%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-theme="dark"] .hero h1 .hl{background:linear-gradient(103deg,#5FB0FF 0%,#9FCBFF 70%);-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1 .hl{background:linear-gradient(103deg,#5FB0FF 0%,#9FCBFF 70%);-webkit-background-clip:text;background-clip:text}}
.hero__lede{margin-top:20px;font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--muted);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-family:var(--ff-mono);font-size:.78rem;color:var(--muted)}
.hero__meta span{display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%, transparent)}

/* the wordmark strapline, rebuilt as a live control */
.pillbar{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1.5px solid var(--line);
  border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--shadow-sm);flex-wrap:wrap}
.pillbar button{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.pillbar button:hover{color:var(--ink)}
.pillbar button[aria-pressed="true"]{background:var(--navy-900);color:#fff}
:root[data-theme="dark"] .pillbar button[aria-pressed="true"]{background:var(--blue);color:#02132F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pillbar button[aria-pressed="true"]{background:var(--blue);color:#02132F}}
.pillbar .sep{color:var(--orange);font-family:var(--ff-mono);padding-inline:2px;user-select:none}

/* ------------------------------- light table ------------------------------ */
.lt{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.lt__bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.lt__dots{display:flex;gap:6px}
.lt__dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong);display:block}
.lt__url{
  flex:1;font-family:var(--ff-mono);font-size:.76rem;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lt__search{display:flex;gap:10px;align-items:center;padding:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lt__field{position:relative;flex:1 1 220px;min-width:0}
.lt__field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.lt__field input{
  width:100%;font-family:var(--ff-body);font-size:.92rem;color:var(--ink);
  padding:11px 12px 11px 36px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
}
.lt__field input:focus{outline:none;border-color:var(--blue);background:var(--paper);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 16%, transparent)}
.swatches{display:flex;gap:6px;align-items:center}
.swatch{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(2,30,79,.14);transition:transform .16s ease,border-color .16s ease}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-pressed="true"]{border-color:var(--ink);transform:translateY(-2px)}
.lt__count{font-family:var(--ff-mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.lt__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  padding:2px;max-height:430px;overflow:auto;
}
@media (max-width:560px){.lt__grid{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;margin:0;background:var(--surface);aspect-ratio:4/3;overflow:hidden;cursor:pointer;border:0;padding:0;display:block;width:100%;text-align:left}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06)}
.tile figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;
  background:linear-gradient(transparent,rgba(2,15,40,.9));
  color:#fff;font-family:var(--ff-mono);font-size:.66rem;line-height:1.45;
  opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;
}
.tile:hover figcaption,.tile:focus-visible figcaption{opacity:1;transform:none}
.tile__tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.tile__tags b{background:rgba(255,255,255,.18);border-radius:4px;padding:1px 5px;font-weight:500}
.tile[data-hit="false"]{display:none}
.lt__empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:.95rem;grid-column:1/-1;background:var(--paper)}
.lt__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-size:.72rem;color:var(--muted);background:var(--surface);flex-wrap:wrap}

/* --------------------------------- pillars -------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:840px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--paper);padding:34px 30px;display:flex;flex-direction:column;gap:12px}
.pillar__k{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:500}
.pillar p{color:var(--muted);font-size:.98rem}
.pillar ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pillar li{display:flex;gap:9px;align-items:flex-start;font-size:.93rem;color:var(--ink-2)}
.pillar li svg{flex:0 0 auto;width:16px;height:16px;margin-top:4px;color:var(--blue)}

/* -------------------------------- features -------------------------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.feature+.feature{margin-top:clamp(56px,7vw,104px)}
.feature--flip .feature__media{order:-1}
@media (max-width:900px){.feature,.feature--flip{grid-template-columns:1fr}.feature--flip .feature__media{order:0}}
.feature h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.feature p{color:var(--muted);margin-top:14px}
.feature__list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.feature__list li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem}
.feature__list b{font-weight:600;color:var(--ink)}
.feature__list svg{flex:0 0 auto;width:18px;height:18px;margin-top:4px;color:var(--blue)}
.panel{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--surface);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.panel__body{padding:18px}

/* upload panel */
.up{display:flex;flex-direction:column;gap:12px}
.up__row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center}
.up__thumb{width:34px;height:34px;border-radius:7px;object-fit:cover}
.up__name{font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up__bar{height:5px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;margin-top:5px}
.up__bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--blue),var(--navy-700))}
.up__state{font-family:var(--ff-mono);font-size:.72rem;color:var(--muted);white-space:nowrap}
.up__state[data-ok="true"]{color:var(--good)}
.up__sum{display:flex;justify-content:space-between;gap:10px;font-family:var(--ff-mono);font-size:.72rem;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:12px;flex-wrap:wrap}

/* tag panel */
.tagcloud{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-family:var(--ff-mono);font-size:.74rem;padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
}
.tag--ai{border-color:color-mix(in srgb,var(--blue) 45%,transparent);background:var(--blue-050);color:var(--blue-600)}
.tag--conf::after{content:attr(data-conf);color:var(--muted);margin-left:6px;font-size:.92em}
.exif{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-family:var(--ff-mono);font-size:.76rem}
.exif dt{color:var(--muted)}
.exif dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* map panel */
.mapbox{position:relative;aspect-ratio:16/11;background:
  linear-gradient(180deg,#DCE8F6,#CBDCEF);overflow:hidden}
:root[data-theme="dark"] .mapbox{background:linear-gradient(180deg,#0A2148,#071733)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mapbox{background:linear-gradient(180deg,#0A2148,#071733)}}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-100%);display:grid;place-items:center;cursor:pointer}
.pin i{display:block;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--blue);box-shadow:0 2px 6px rgba(2,30,79,.4);border:2px solid #fff}
.pin[data-cluster] i{width:26px;height:26px;border-radius:var(--r-pill);transform:none;display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:.68rem;color:#fff;font-style:normal;background:var(--navy-800)}
.pin--accent i{background:var(--orange)}
.pin:hover::after{
  content:attr(data-label);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  background:var(--navy-900);color:#fff;font-family:var(--ff-mono);font-size:.68rem;padding:4px 8px;border-radius:6px;white-space:nowrap
}

/* ------------------------------ how it works ------------------------------ */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:28px;border-top:2px solid var(--line)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:-2px;left:0;padding-top:8px;border-top:2px solid var(--orange);
  font-family:var(--ff-mono);font-size:.76rem;color:var(--orange);font-weight:500;
}
.step h3{margin-top:6px;font-size:1.08rem}
.step p{color:var(--muted);font-size:.94rem;margin-top:8px}

/* --------------------------------- pricing -------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.plan--feature{border-color:var(--blue);box-shadow:var(--shadow-lg);position:relative}
.plan--feature::before{
  content:"Most organisations start here";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--blue);color:#fff;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;
}
.plan__name{font-family:var(--ff-display);font-weight:700;font-size:1.24rem}
.plan__price{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.plan__price b{font-family:var(--ff-display);font-size:2.5rem;font-weight:800;letter-spacing:-.03em}
.plan__price--quote b{font-size:1.7rem}
.plan__price span{color:var(--muted);font-size:.9rem}
.plan__note{color:var(--muted);font-size:.9rem}
.plan ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--ink-2)}
.plan li svg{flex:0 0 auto;width:16px;height:16px;margin-top:4px;color:var(--good)}
.plan .btn{margin-top:auto}

/* -------------------------------- security -------------------------------- */
.band{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band .eyebrow{color:#9CC4F5}
.band p{color:#B9CCE8}
.band::after{
  content:"";position:absolute;inset:auto -20% -60% 40%;height:120%;
  background:radial-gradient(45% 45% at 50% 50%, rgba(0,121,251,.35), transparent 70%);pointer-events:none;
}
.band__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;z-index:1}
@media (max-width:900px){.band__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.band__grid{grid-template-columns:1fr}}
.band__item h4{color:#fff;margin-bottom:8px}
.band__item p{font-size:.93rem}
.band__item svg{width:22px;height:22px;color:var(--orange);margin-bottom:12px}

/* ----------------------------------- faq ---------------------------------- */
.faq{max-width:840px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--ff-display);font-weight:600;font-size:1.06rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq p{color:var(--muted);padding-bottom:22px;max-width:70ch}

/* ----------------------------------- cta ---------------------------------- */
.cta{
  border-radius:var(--r-xl);padding:clamp(36px,5vw,64px);text-align:center;color:#fff;
  background:linear-gradient(118deg,var(--navy-900) 0%,var(--navy-800) 46%,var(--blue-600) 100%);
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.cta h2{color:#fff}
.cta p{color:#C2D6F2;margin:16px auto 0;max-width:54ch}
.cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45)}
.cta .btn--ghost:hover{--btn-bd:#fff;--btn-fg:#fff;background:rgba(255,255,255,.1)}
.cta__fine{font-family:var(--ff-mono);font-size:.74rem;color:#9FBEE4;margin-top:18px}

/* ================================== forms ================================= */
.auth{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px)}
@media (max-width:1000px){.auth{grid-template-columns:1fr}}
.auth__main{padding:clamp(24px,4vw,56px) 0 72px}
.auth__aside{
  background:var(--navy-900);color:#fff;padding:clamp(28px,4vw,48px);position:relative;overflow:hidden;
}
@media (max-width:1000px){.auth__aside{display:none}}
.auth__aside h3{color:#fff;font-size:1.3rem}
.auth__aside p{color:#B9CCE8;font-size:.96rem;margin-top:10px}
.aside__quote{margin-top:auto;border-left:2px solid var(--orange);padding-left:16px;color:#D6E4F7;font-size:.95rem}
.aside__list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:16px}
.aside__list li{display:flex;gap:12px;align-items:flex-start;color:#CFE0F6;font-size:.95rem}
.aside__list svg{width:18px;height:18px;color:var(--orange);flex:0 0 auto;margin-top:4px}
.aside__flow{display:flex;flex-direction:column;height:100%}
/* The mark at the top of that column.

   It had its size in an inline style — height:30px, width:auto — and came out
   four times too wide. A flex column stretches its children across the cross
   axis, which here is the horizontal one, so `width:auto` resolved to the full
   width of the panel while the height stayed where it was told: 450x133 drawn
   at 424x30. align-self is what opts one child out of that stretch.

   The size lives here rather than in the markup so that the next person to
   move this image does not have to rediscover any of it. */
.aside__mark{align-self:flex-start;height:30px;width:auto}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);padding:clamp(22px,3vw,34px);
}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.legend{font-size:.9rem;font-weight:600;color:var(--ink)}
.field .hint{font-size:.82rem;color:var(--muted)}
.input,.select,.textarea{
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:13px 14px;width:100%;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.textarea{min-height:110px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A719B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 15%, transparent)}
.input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 12%, transparent)}
.input::placeholder{color:color-mix(in srgb,var(--muted) 75%, transparent)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row--3{grid-template-columns:1.4fr .8fr .8fr}
@media (max-width:620px){.row,.row--3{grid-template-columns:1fr}}
.err{font-size:.84rem;color:var(--bad);display:flex;gap:6px;align-items:center}
.err svg{width:14px;height:14px;flex:0 0 auto}
.field--ok .input{border-color:color-mix(in srgb,var(--good) 60%, transparent)}

/* domain field */
.domain{display:flex;align-items:stretch;border:1.5px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;background:var(--paper);
  transition:border-color .18s ease, box-shadow .18s ease}
.domain:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 15%, transparent)}
.domain input{border:0;border-radius:0;flex:1;min-width:0;font-family:var(--ff-mono);font-size:.98rem;padding:13px 14px;background:transparent;color:var(--ink)}
.domain input:focus{outline:none;box-shadow:none}
.domain__suffix{display:flex;align-items:center;padding:0 14px;background:var(--surface);border-left:1px solid var(--line);
  font-family:var(--ff-mono);font-size:.93rem;color:var(--muted);white-space:nowrap}
.avail{display:flex;align-items:center;gap:7px;font-size:.86rem;font-family:var(--ff-mono)}
.avail[data-state="checking"]{color:var(--muted)}
.avail[data-state="free"]{color:var(--good)}
.avail[data-state="taken"]{color:var(--bad)}
.spinner{width:13px;height:13px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--blue);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* password meter */
.meter{display:flex;gap:5px;margin-top:8px}
.meter i{flex:1;height:4px;border-radius:var(--r-pill);background:var(--surface-2);transition:background .25s ease}
.meter[data-score="1"] i:nth-child(-n+1){background:var(--bad)}
.meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.meter[data-score="3"] i:nth-child(-n+3){background:#3E9E55}
.meter[data-score="4"] i{background:var(--good)}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:8px;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-family:var(--ff-mono);font-size:.72rem;padding:7px 8px;border-radius:var(--r-sm)}
.pw-toggle:hover{color:var(--ink);background:var(--surface)}

/* choices, toggles */
.choices{display:grid;gap:12px}
.choices--2{grid-template-columns:1fr 1fr}
@media (max-width:620px){.choices--2{grid-template-columns:1fr}}
.choice{
  position:relative;border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:16px 16px 16px 46px;cursor:pointer;
  transition:border-color .18s ease, background .18s ease;background:var(--paper);display:block;
}
.choice:hover{border-color:var(--blue)}
.choice input{position:absolute;left:16px;top:18px;width:18px;height:18px;accent-color:var(--blue)}
.choice b{display:block;font-size:.97rem}
.choice span{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}
.choice:has(input:checked){border-color:var(--blue);background:var(--blue-050)}
.choice:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}

.switchrow{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--line)}
.switchrow:last-child{border-bottom:0}
.switchrow b{display:block;font-size:.98rem}
.switchrow span{display:block;color:var(--muted);font-size:.87rem;margin-top:3px;max-width:52ch}
.switch{position:relative;flex:0 0 auto;width:46px;height:27px}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-strong);transition:background .2s ease;pointer-events:none;display:block}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(2,30,79,.35);transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.switch input:checked + i{background:var(--blue)}
.switch input:checked + i::after{transform:translateX(19px)}
.switch input:focus-visible + i{outline:3px solid var(--blue);outline-offset:3px}

.check{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--ink-2)}
.check input{width:19px;height:19px;accent-color:var(--blue);flex:0 0 auto;margin-top:2px}

/* stepper */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:26px;flex-wrap:wrap}
.stepper__i{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--muted);font-weight:500}
.stepper__i b{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--ff-mono);font-size:.72rem;background:var(--surface-2);color:var(--muted);border:1.5px solid transparent;
}
.stepper__i[data-state="current"]{color:var(--ink)}
.stepper__i[data-state="current"] b{background:var(--blue);color:#fff}
.stepper__i[data-state="done"] b{background:color-mix(in srgb,var(--good) 16%, transparent);color:var(--good);border-color:color-mix(in srgb,var(--good) 40%, transparent)}
.stepper__l{flex:1;height:1.5px;background:var(--line);margin-inline:12px;min-width:16px}
@media (max-width:760px){.stepper__i span{display:none}.stepper__l{margin-inline:6px}}

/* wizard rail */
.wiz{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.wiz{grid-template-columns:1fr}}
.rail{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:2px}
@media (max-width:900px){.rail{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:8px}}
.rail__i{
  display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-md);
  color:var(--muted);font-size:.93rem;border:1.5px solid transparent;background:transparent;text-align:left;width:100%;
  font-family:var(--ff-body);cursor:default;
}
.rail__i b{display:block;color:inherit;font-weight:600}
.rail__i small{display:block;font-size:.8rem;opacity:.85}
.rail__i[data-state="current"]{background:var(--paper);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.rail__i[data-state="done"]{color:var(--ink-2)}
.rail__mark{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;margin-top:2px;
  background:var(--surface-2);color:var(--muted);font-family:var(--ff-mono);font-size:.68rem}
.rail__i[data-state="current"] .rail__mark{background:var(--blue);color:#fff}
.rail__i[data-state="done"] .rail__mark{background:var(--good);color:#fff}
.rail__i svg{width:12px;height:12px}
@media (max-width:900px){.rail__i{white-space:nowrap;width:auto}.rail__i small{display:none}}

.formfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.formfoot .grow{flex:1}

/* review list */
.review{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.94rem;margin:0}
.review dt{color:var(--muted)}
.review dd{margin:0;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.review dd.mono{font-family:var(--ff-mono);font-weight:400;font-size:.9rem}

/* invite rows */
.invite{display:grid;grid-template-columns:1fr 170px 42px;gap:10px;align-items:center}
@media (max-width:620px){.invite{grid-template-columns:1fr 1fr;grid-template-areas:"e e" "r x"}
  .invite .invite__e{grid-area:e}.invite .invite__r{grid-area:r}.invite .invite__x{grid-area:x;justify-self:start}}
.linkbtn{background:none;border:0;color:var(--blue-600);font-family:var(--ff-body);font-size:.92rem;font-weight:600;cursor:pointer;padding:6px 2px}
.linkbtn:hover{text-decoration:underline}

/* drop zone */
.drop{
  border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:26px;text-align:center;
  background:var(--surface);transition:border-color .18s ease,background .18s ease;cursor:pointer;display:block;
}
.drop:hover,.drop[data-over="true"]{border-color:var(--blue);background:var(--blue-050)}
.drop svg{width:26px;height:26px;color:var(--muted);margin-bottom:8px}
.drop b{display:block;font-size:.95rem}
.drop span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.drop img{max-height:56px;width:auto;margin:0 auto 10px}

/* swatch picker */
.colors{display:flex;gap:10px;flex-wrap:wrap}
.colorpick{width:38px;height:38px;border-radius:var(--r-md);border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(2,30,79,.15)}
.colorpick[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px rgba(2,30,79,.15),0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}

/* callouts */
.note{
  display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:var(--r-md);
  background:var(--blue-050);border:1px solid color-mix(in srgb,var(--blue) 26%, transparent);font-size:.92rem;color:var(--ink-2);
}
.note svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--blue-600)}
.note--accent{background:var(--orange-050);border-color:color-mix(in srgb,var(--orange) 34%, transparent)}
.note--accent svg{color:var(--orange-600)}

/* success */
.done{text-align:center;max-width:560px;margin-inline:auto}
.done__mark{width:74px;height:74px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--good) 14%, transparent);color:var(--good)}
.done__mark svg{width:34px;height:34px}
.spacebadge{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:.95rem;
  padding:12px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
}

/* progress bar (email verify) */
.mailcard{max-width:540px;margin-inline:auto;text-align:center}
.mailcard__icon{width:82px;height:82px;border-radius:22px;margin:0 auto 24px;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-600);border:1px solid color-mix(in srgb,var(--blue) 24%,transparent)}
.mailcard__icon svg{width:38px;height:38px}
.mailcard code{font-family:var(--ff-mono);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 8px;font-size:.92rem}
.resend{font-size:.9rem;color:var(--muted);margin-top:18px}

/* utility */
.muted{color:var(--muted)}
.small{font-size:.88rem}
.mt-sm{margin-top:10px}.mt-md{margin-top:20px}.mt-lg{margin-top:34px}
.divider{height:1px;background:var(--line);border:0;margin:26px 0}
.tiny-legal{font-size:.8rem;color:var(--muted);max-width:60ch}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.grid-2{grid-template-columns:1fr}}
.logo-adapt{filter:invert(var(--logo-invert)) hue-rotate(calc(var(--logo-invert) * 180deg))}

.panel__media{aspect-ratio:16/9;width:100%;object-fit:cover;max-width:100%}

/* ------------------------------ context menu ------------------------------
   A still of the right-click menu, for the panel beside "Nobody needs training
   to use it". Drawn rather than screenshotted so it reads in both themes and
   at any width, and so the greyed item can carry its own explanation — which
   is the point being made about it.
   Decoration: the list is aria-hidden and the prose beside it says the same
   thing, so nothing here is the only copy of anything.                       */
.ctxmenu{
  display:flex;flex-direction:column;align-self:start;min-width:230px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  box-shadow:var(--shadow-md);padding:5px;overflow:hidden;
}
.ctxmenu span{
  display:block;padding:7px 11px;border-radius:var(--r-sm);
  font-size:.9rem;color:var(--ink-2);
}
.ctxmenu span:first-child{background:var(--surface-2);color:var(--ink);font-weight:600}
/* Dimmed rather than merely recoloured: in the dark theme --muted sits close
   enough to --ink-2 that a greyed row read as a live one, which is the one
   thing this picture must not say. */
.ctxmenu .is-off{color:var(--muted);opacity:.7}
.ctxmenu .is-off i{
  display:block;font-style:normal;font-family:var(--ff-mono);
  font-size:.68rem;color:var(--muted);margin-top:2px;
}

/* =============================================================================
   Public site — additions for the PHP build
   ===========================================================================*/

/* the brand device, used as a separator in running text */
.slash{color:var(--orange);font-family:var(--ff-mono)}

/* lists that became real lists */
.stepper{list-style:none;margin:0 0 26px;padding:0}
.stepper__l{flex:1;height:1.5px;background:var(--line);margin-inline:12px;min-width:16px;list-style:none}
.rail{list-style:none;margin:0;padding:0}
.rail__i{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-md);
  color:var(--muted);font-size:.93rem;border:1.5px solid transparent}
.rail__i b{display:block;color:inherit;font-weight:600}
.rail__i small{display:block;font-size:.8rem;opacity:.85}
.footer__grid h2{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:14px}
.pillar h2{font-size:clamp(1.18rem,1.9vw,1.42rem);font-weight:700;line-height:1.25}
.band__item h2{color:#fff;font-size:1.02rem;font-weight:700;margin-bottom:8px}
.feature__list b{font-weight:600;color:var(--ink)}

/* the security page's band sits directly under the nav */
.band--top{padding-top:clamp(48px,6vw,84px)}
.band h1{color:#fff}

/* long-form copy */
.prose h2{font-size:1.2rem;margin-top:34px}
.prose h3{font-size:1.04rem;margin-top:26px}
.prose p{color:var(--muted);margin-top:10px;max-width:70ch}
.prose p strong{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:2px}

/* a value shown but not editable */
.input--static{background:var(--surface);border-style:dashed;color:var(--ink-2);margin:0}

/* the honeypot: reachable by a script, invisible and unreachable to a person */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* flash banner */
.banner{border-radius:var(--r-md);padding:13px 16px;font-size:.95rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink)}
.banner--ok{background:color-mix(in srgb,var(--good) 12%,transparent);
  border-color:color-mix(in srgb,var(--good) 40%,transparent);color:var(--ink)}
.banner--warn{background:var(--orange-050);border-color:color-mix(in srgb,var(--orange) 40%,transparent)}

/* colour picker built from radios */
.colorpick{position:relative;width:38px;height:38px;border-radius:var(--r-md);cursor:pointer;display:block;
  border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(2,30,79,.15)}
.colorpick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.colorpick:has(input:checked){border-color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(2,30,79,.15),0 0 0 3px color-mix(in srgb,var(--ink) 14%,transparent)}
.colorpick:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}

/* a switch that is a picture of a switch, not a control */
.switch--static{display:inline-block;position:relative;width:46px;height:27px;flex:0 0 auto}
.switch--static i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-strong);display:block}
.switch--static i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(2,30,79,.35)}
.switch--static[data-on="true"] i{background:var(--blue)}
.switch--static[data-on="true"] i::after{transform:translateX(19px)}

/* small colour chip inside running metadata */
.chip{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px}

/* invitations: three rows, no delete button — an empty row is simply ignored */
.invite{display:grid;grid-template-columns:1fr 170px;gap:10px;align-items:center}
@media (max-width:620px){.invite{grid-template-columns:1fr}}

/* the warning face of the mail card */
.mailcard__icon--warn{background:var(--orange-050);color:var(--orange-600);
  border-color:color-mix(in srgb,var(--orange) 34%,transparent)}

/* the auth split is a section here */
section.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px)}
@media (max-width:1000px){section.auth{grid-template-columns:1fr}}
.auth h1{font-size:clamp(1.9rem,3.6vw,2.5rem)}
.auth__aside h2{color:#fff;font-size:1.3rem}
.auth__aside .aside__list b{color:#fff}
.auth__aside .aside__quote .mono{color:#9FBEE4}

/* the space badge is a link */
a.spacebadge{text-decoration:none;color:var(--ink)}
a.spacebadge:hover{border-color:var(--blue);text-decoration:none}

/* the finished screen */
.done h1{font-size:clamp(1.9rem,3.6vw,2.5rem)}

/* ---------------------------------------------------------------------------
   The holding page.

   It reuses nothing from the marketing layout, because it is shown instead of
   that layout — a maintenance notice wrapped in a navigation bar would offer
   six links to pages that all answer with this same notice.
   --------------------------------------------------------------------------- */
body.maint-page{
  min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
}
@supports (min-height:100dvh){ body.maint-page{min-height:100dvh} }

.maint{max-width:52ch;text-align:center}
/* The wrapper does the spacing and the images are sized without a display
   rule of their own — .theme-dark-only / .theme-light-only decide which is
   drawn, and a display here would sit later in the file and show both. */
.maint__marks{margin:0 0 26px}
.maint__marks img{height:44px;width:auto;max-width:min(260px,80%);
  object-fit:contain;margin-inline:auto;vertical-align:middle}
.maint h1{font-size:clamp(26px,4.5vw,34px);letter-spacing:-.02em;margin:0 0 12px}
.maint__note{color:var(--muted);line-height:1.6;margin:0 0 26px}

.maint__panel{
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:18px 20px;text-align:left;
}
.maint__panel p{margin:0}
.maint__panel p + p{margin-top:8px}
.maint__quiet{color:var(--muted);font-size:14px}
.maint__foot{color:var(--muted);font-size:13.5px;margin:22px 0 0}