/* ============================================================
   SETSEBI - app.css
   The register of training practitioners.
   House family: Musika, Mwambo, Shofe, Ndarama, Chinyama,
   Kukweva. Same fonts, same 4px radius, own identity.
   Do not fork the tokens per page.
   ============================================================ */

/* ---- Self-hosted brand fonts (SIL OFL 1.1 - see assets/fonts/OFL.txt) ---- */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('../assets/fonts/Barlow-400.woff') format('woff')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url('../assets/fonts/Barlow-500.woff') format('woff')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('../assets/fonts/Barlow-600.woff') format('woff')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('../assets/fonts/BarlowCondensed-600.woff') format('woff')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('../assets/fonts/BarlowCondensed-700.woff') format('woff')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url('../assets/fonts/BarlowCondensed-800.woff') format('woff')}

:root{
  --s-ink:       #16202B;   /* boardroom ink - bars, headings */
  --s-ink-deep:  #0D141C;
  --s-slate:     #2E3B4A;
  --s-brass:     #C08A2E;   /* action, level codes, the badge strip */
  --s-brass-deep:#8F6417;   /* brass on light ground - AA safe */
  --s-bone:      #F6F1E7;   /* the page */
  --s-card:      #FCFAF5;   /* the leaf */
  --s-grey:      #635E56;
  --s-hair:      #DCD5C7;
  --s-green:     #26694B;   /* verified */
  --s-alert:     #A8382A;

  --s-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --s-body:    'Barlow', Helvetica, Arial, sans-serif;
  --s-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', 'Courier New', monospace;

  --r: 4px;
  --bar: 64px;
  --tabs: 60px;
  --pad: 20px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:var(--s-body); color:var(--s-ink); background:var(--s-bone);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

.mono{ font-family:var(--s-mono); font-weight:500; font-variant-numeric:tabular-nums; }
h1,h2,h3{ font-family:var(--s-display); letter-spacing:-0.01em; margin:0; }
a{ color:var(--s-ink); }
.center{ text-align:center; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Anything that only makes sense in a browser tab. The install button is
   named explicitly: it is generated hidden and shown by script, so the
   class alone was never going to catch it. */
@media (display-mode: standalone){ .web-only, #install{ display:none !important; } }
@media (display-mode: fullscreen){ .web-only, #install{ display:none !important; } }
@media (display-mode: minimal-ui){ .web-only, #install{ display:none !important; } }

.skip{
  position:absolute; left:var(--pad); top:-100px; z-index:100;
  background:var(--s-brass); color:#16202B; text-decoration:none;
  font-family:var(--s-display); font-weight:700; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:11px 16px; border-radius:0 0 var(--r) var(--r);
}
.skip:focus{ top:0; }

/* ---- Header ---------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:50;
  height:calc(var(--bar) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:var(--s-ink);
  display:flex; align-items:center; gap:12px;
  padding-left:var(--pad); padding-right:var(--pad);
}
.bar__back{
  background:none; border:0; color:var(--s-bone);
  font-size:22px; line-height:1; padding:4px 8px 6px; margin-left:-8px;
  cursor:pointer; font-family:var(--s-body);
}
.bar__tag{
  margin-left:auto; padding-left:16px; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(246,241,231,.60);
}
/* The tagline is the first thing to go when the single row runs out of room. */
@media (max-width:1180px){ .bar__tag{ display:none; } }

.lockup{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.lockup__mark{ width:34px; height:34px; display:block; flex:0 0 auto; }
.wordmark{
  font-family:var(--s-display); font-weight:800; font-size:33px;
  color:var(--s-bone); letter-spacing:-0.005em; line-height:1;
  text-transform:lowercase;
}
/* The brass rule under the s - the stamped edge of the badge. */
.wordmark__s{ position:relative; }
.wordmark__s::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.16em;
  height:0.11em; background:var(--s-brass);
}

/* ---- Desktop section nav ---------------------------------
   The nav sits INSIDE the bar, so logo, sections and tagline are one sticky
   row rather than a strip that scrolls away under a bar that does not.
   ----------------------------------------------------------- */
.dnav{ display:none; background:transparent; padding:0; gap:1px;
       margin-left:20px; align-self:stretch; align-items:stretch;
       min-width:0; flex:0 1 auto; }
.dnav__a{
  display:flex; align-items:center; white-space:nowrap;
  color:rgba(246,241,231,.72); text-decoration:none;
  font-family:var(--s-display); font-weight:700; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:0 10px; border-top:3px solid transparent;
  border-bottom:3px solid transparent;
}
.dnav__a:hover{ color:var(--s-bone); }
.dnav__a.is-on{ color:var(--s-bone); border-bottom-color:var(--s-brass); }
@media (min-width:761px){ .dnav{ display:flex; } }

/* Between the phone tabs and a roomy desktop the row is tight, so the nav
   gives up padding before it gives up items. */
@media (min-width:761px) and (max-width:1024px){
  .dnav{ margin-left:12px; }
  .dnav__a{ padding:0 7px; font-size:13.5px; letter-spacing:.02em; }
  .wordmark{ font-size:29px; }
  .lockup__mark{ width:30px; height:30px; }
  /* The items cannot shrink - they are nowrap by design. So the ROW gives
     way, not the page. Without this the bar pushed the document 17px wide
     at 768 and every page scrolled sideways. */
  .dnav{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .dnav::-webkit-scrollbar{ display:none; }
  /* The strapline is the first thing to go when the row is tight. */
  .bar__tag{ display:none; }
}


/* ---- Layout ---------------------------------------------- */
#main{
  max-width:700px; margin:0 auto;
  padding:var(--pad) var(--pad) calc(var(--tabs) + 40px + env(safe-area-inset-bottom));
}
@media (min-width:761px){ #main{ padding-bottom:56px; } }
.view__h{ font-size:34px; font-weight:800; line-height:1.02; margin-bottom:6px; }
.view__sub{ color:var(--s-grey); margin:0 0 22px; font-size:15px; }
.lede{ color:var(--s-grey); font-size:15.5px; margin:0 0 16px; }
.fine{ color:var(--s-grey); font-size:13px; line-height:1.45; margin:8px 0 0; }
.fine a{ color:var(--s-brass-deep); }
.hr{ border:0; border-top:2px solid var(--s-hair); margin:26px 0 22px; }
.block{ margin-bottom:34px; }
.block > p{ margin:0 0 12px; }

.h-rule{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--s-grey); font-family:var(--s-body);
  padding-bottom:8px; border-bottom:2px solid var(--s-hair); margin-bottom:16px;
  display:flex; align-items:baseline; gap:10px;
}
.h-rule__n{ margin-left:auto; font-family:var(--s-mono); font-size:12px; color:var(--s-grey); }

/* ---- Hero ------------------------------------------------ */
.hero{ padding:14px 0 24px; }
.hero h1{ font-size:46px; font-weight:800; line-height:0.96; }
.hero h1 em{ font-style:normal; color:var(--s-brass-deep); }
.hero__sub{ color:var(--s-slate); font-size:16.5px; margin:14px 0 0; max-width:44ch; }
.hero__sub strong{ color:var(--s-ink); font-weight:600; }
.hero__acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }

/* ---- THE DELEGATE BADGE: the signature device -------------
   Every listing carries the badge you are handed at the start
   of a workshop. Brass strip on top with the level code, the
   discipline code stamped under it. It is the one thing the
   register is organised by, so it is the loudest thing on it. */
.badge{
  display:inline-block; flex:0 0 auto; width:62px; text-align:center;
  background:var(--s-ink); color:var(--s-bone);
  border-radius:var(--r); overflow:hidden;
  font-family:var(--s-display); line-height:1;
  align-self:flex-start;
}
.badge__l{
  display:block; background:var(--s-brass); color:#241A05;
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 0 3px;
}
.badge__d{ display:block; font-size:23px; font-weight:800; padding:8px 2px 3px; letter-spacing:.02em; }
.badge__m{
  display:block; font-family:var(--s-mono); font-size:9.5px; font-weight:500;
  color:rgba(246,241,231,.62); padding:0 0 7px; letter-spacing:.08em;
}
.badge--lg{ width:78px; }
.badge--lg .badge__d{ font-size:28px; padding:10px 2px 4px; }
.badge--hole{ position:relative; }
.badge--hole::before{
  content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:16px; height:0; border-top:2px solid rgba(255,255,255,.35); border-radius:2px;
}

/* ---- The register ---------------------------------------- */
.pv__badge{ flex:0 0 auto; display:block; text-decoration:none; }
.pv__t a{ text-decoration:none; color:inherit; }
.pv:hover .pv__t a{ color:var(--s-brass-deep); }

.grp{
  position:sticky; top:calc(var(--bar) + env(safe-area-inset-top)); z-index:20;
  background:var(--s-bone); padding:14px 0 7px;
  font-family:var(--s-display); font-weight:800; font-size:19px;
  letter-spacing:.02em; text-transform:uppercase;
  border-bottom:2px solid var(--s-ink); margin-bottom:2px;
}
@media (min-width:761px){ .grp{ top:0; } }

.pv{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--s-hair);
  text-decoration:none; color:inherit;
}
.pv:hover .pv__t{ color:var(--s-brass-deep); }
.pv__b{ min-width:0; flex:1; }
.pv__t{
  font-family:var(--s-display); font-weight:700; font-size:21px; line-height:1.2;
  margin:0 0 3px; letter-spacing:0;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.pv__head{ font-size:13.5px; color:var(--s-grey); margin:0 0 7px; }
.pv__meta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:12.5px; color:var(--s-slate);
}
.pv__meta span{ display:inline-flex; align-items:center; gap:5px; }
.pv__meta .k{
  font-family:var(--s-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--s-grey);
}
.pv__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }

.tag{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--r);
  background:rgba(22,32,43,.07); color:var(--s-slate);
}
.tag--v{ background:rgba(38,105,75,.13); color:var(--s-green); }
.tag--remote{ background:rgba(192,138,46,.14); color:#7A5512; }
.tag--new{ background:rgba(46,59,74,.10); color:var(--s-slate); }

/* ---- The three public states ------------------------------------------
   Only three exist, and each one has to look like what it is. "Genuine
   post" is the automatic gate: real and contactable, nothing more, so it
   is quiet slate. "Verified" is a person's judgement and the only thing
   allowed to wear the green. "Post not confirmed" is not an error and is
   not styled like one - it is the honest default, and it must be plainly
   legible rather than tucked away, because a reader has to be able to
   tell that nothing has been checked.
   --------------------------------------------------------------------- */
.mark{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--s-body); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r); white-space:nowrap;
}
.mark::before{ content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.mark--v{ color:#1B4E38; background:rgba(38,105,75,.13); }
.mark--v::before{ background:var(--s-green); }
.mark--g{ color:var(--s-slate); background:rgba(46,59,74,.10); }
.mark--g::before{ background:var(--s-slate); }
.mark--n{ color:#6A5320; background:rgba(192,138,46,.14); }
.mark--n::before{ background:transparent; border:1.5px dashed #8F6417; width:8px; height:8px; }

/* ---- The code step ---------------------------------------------------- */
.gate__code{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.code{
  flex:1 1 170px; min-width:0; font-family:var(--s-mono);
  font-size:24px; letter-spacing:.34em; text-align:center;
  padding:10px 12px; border:2px solid var(--s-ink); border-radius:var(--r);
  background:var(--s-bone); color:var(--s-ink);
}
.code::placeholder{ color:rgba(99,94,86,.34); letter-spacing:.34em; }
.code:focus-visible{ outline:2px solid var(--s-brass); outline-offset:2px; }
.code:disabled{ opacity:.55; }
.linkish{
  background:none; border:0; font:inherit; color:var(--s-brass-deep);
  text-decoration:underline; cursor:pointer;
  /* Resend and change-address are standalone controls, not links inside a
     sentence, so they carry the 24px target floor themselves. */
  padding:3px 0; min-height:24px;
}
.linkish:disabled{ opacity:.5; cursor:default; }
.linkish:focus-visible{ outline:2px solid var(--s-brass); outline-offset:2px; border-radius:2px; }

/* ---- The confirmation gate -------------------------------- */
.gate__act{ margin:18px 0 24px; padding:18px 18px 20px; }
.gate__act p{ margin:0 0 14px; }
.gate__act .fine{ margin-top:10px; text-align:center; }
.gate__sum{
  border:1px solid var(--s-hair); border-radius:var(--r);
  background:var(--s-card); overflow:hidden;
}
.gate__row{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 14px; border-bottom:1px solid var(--s-hair);
  font-size:14px; line-height:1.45;
}
.gate__row:last-child{ border-bottom:0; }
.gate__row .k{
  flex:0 0 132px; font-style:normal;
  font-family:var(--s-body); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--s-grey);
}
.gate__row span{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
@media (max-width:520px){
  .gate__row{ display:block; }
  .gate__row .k{ display:block; margin-bottom:2px; }
}

/* ---- Save control ---------------------------------------- */
.save{
  flex:0 0 auto; align-self:flex-start; margin-left:6px;
  background:none; border:1.5px solid var(--s-hair); border-radius:var(--r);
  color:var(--s-grey); cursor:pointer; padding:6px 9px;
  font-family:var(--s-body); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; line-height:1;
}
.save:hover{ border-color:var(--s-slate); color:var(--s-ink); }
.save.is-on{ background:var(--s-ink); border-color:var(--s-ink); color:var(--s-bone); }

/* ---- Filters --------------------------------------------- */
.filters{ margin:0 0 8px; }
.search{
  width:100%; font-family:var(--s-body); font-size:15px;
  background:var(--s-card); border:1.5px solid var(--s-hair);
  border-radius:var(--r); padding:11px 12px; color:var(--s-ink);
}
.sel{
  flex:1 1 150px; min-width:0;
  font-family:var(--s-body); font-size:14px; color:var(--s-ink);
  background:var(--s-card); border:1.5px solid var(--s-hair);
  border-radius:var(--r); padding:9px 10px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--s-grey) 50%),
                   linear-gradient(135deg,var(--s-grey) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:30px;
}
.sel:focus,.inp:focus,.ta:focus,.search:focus{ outline:2px solid var(--s-brass); outline-offset:1px; }
.filters__row{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }

.fgs{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.fg{ flex:0 0 auto; min-width:0; }
.fg__s{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  list-style:none; font-family:var(--s-body);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--s-slate); background:var(--s-card);
  border:1.5px solid var(--s-hair); border-radius:var(--r); padding:9px 12px;
}
.fg__s::-webkit-details-marker{ display:none; }
.fg__s::after{
  content:""; width:0; height:0; margin-left:2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--s-grey);
}
.fg[open] .fg__s{ border-color:var(--s-ink); color:var(--s-ink); }
.fg__n:empty{ display:none; }
.fg__n{
  font-family:var(--s-mono); font-size:10px; font-weight:600; line-height:1;
  background:var(--s-brass); color:#241A05; border-radius:99px; padding:3px 6px;
}
.fg__c{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 2px; width:100%; }
.fg[open]{ flex:1 1 100%; }

.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--s-body); font-size:13.5px; font-weight:500; color:var(--s-ink);
  background:var(--s-card); border:1.5px solid var(--s-hair);
  border-radius:var(--r); padding:7px 10px; line-height:1.1;
}
.chip:hover{ border-color:var(--s-slate); }
.chip__n{
  font-family:var(--s-mono); font-style:normal; font-size:10.5px;
  color:var(--s-grey); letter-spacing:.04em;
}
.chip.is-on{ background:var(--s-ink); border-color:var(--s-ink); color:var(--s-bone); }
.chip.is-on .chip__n{ color:rgba(246,241,231,.62); }
.chip.is-out{ opacity:.4; }

.picks{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.pick{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--s-body); font-size:12.5px; font-weight:600;
  background:rgba(192,138,46,.13); color:var(--s-brass-deep);
  border:1.5px solid rgba(192,138,46,.36); border-radius:var(--r);
  padding:6px 9px; line-height:1.1;
}
.pick i{ font-style:normal; font-size:14px; line-height:1; }
.pick:hover{ background:rgba(192,138,46,.22); }

.filters__state{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12.5px; color:var(--s-grey); padding:2px 0 6px;
}
.clear{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--s-body); font-size:12.5px; font-weight:600;
  color:var(--s-brass-deep); text-decoration:underline;
}

/* ---- Buttons --------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--s-display); font-weight:700; font-size:17px;
  letter-spacing:.03em; text-transform:uppercase;
  padding:13px 20px; border-radius:var(--r); border:2px solid var(--s-ink);
  background:var(--s-ink); color:var(--s-bone); text-decoration:none;
  cursor:pointer; line-height:1;
}
.btn:hover{ background:var(--s-ink-deep); border-color:var(--s-ink-deep); }
.btn--brass{ background:var(--s-brass); border-color:var(--s-brass); color:#241A05; }
.btn--brass:hover{ background:var(--s-brass-deep); border-color:var(--s-brass-deep); color:#fff; }
.btn--ghost{ background:transparent; color:var(--s-ink); }
.btn--ghost:hover{ background:rgba(22,32,43,.06); }
.btn--wide{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- Cards / panels -------------------------------------- */
.card{
  background:var(--s-card); border:1.5px solid var(--s-hair);
  border-radius:var(--r); padding:18px; margin-bottom:14px;
}
.card h3{ font-size:21px; font-weight:700; margin:0 0 6px; }
.card p{ margin:0 0 10px; font-size:15px; }
.card p:last-child{ margin-bottom:0; }
.card--flag{ border-left:4px solid var(--s-brass); }

.panel{
  background:var(--s-ink); color:var(--s-bone);
  border-radius:var(--r); padding:20px; margin-bottom:20px;
}
.panel h3{ color:#fff; font-size:22px; margin:0 0 8px; }
.panel p{ color:rgba(246,241,231,.82); font-size:15px; margin:0 0 12px; }
.panel p:last-child{ margin-bottom:0; }
.panel a:not(.btn){ color:#fff; }
.panel .btn--brass{ color:#241A05; }

.two-up{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.two-up > *{ flex:1 1 240px; }

.door{
  display:block; text-decoration:none; color:inherit;
  background:var(--s-card); border:1.5px solid var(--s-hair);
  border-left:4px solid var(--s-brass);
  border-radius:var(--r); padding:18px;
}
.door:hover{ border-color:var(--s-slate); border-left-color:var(--s-brass); }
.door h3{ font-size:22px; margin:0 0 6px; }
.door p{ margin:0; font-size:14.5px; color:var(--s-grey); }
.door__k{
  display:block; font-family:var(--s-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--s-brass-deep);
  margin-bottom:6px;
}

/* ---- Level and discipline lists -------------------------- */
.lvl{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--s-hair);
}
.lvl__b{ flex:1; min-width:0; }
.lvl__t{ font-family:var(--s-display); font-weight:700; font-size:21px; margin:0 0 4px; }
.lvl__w{ font-size:14.5px; margin:0 0 6px; }
.lvl__x{ font-size:13.5px; color:var(--s-grey); margin:0; }

.dsc{
  display:block; text-decoration:none; color:inherit;
  padding:14px 0; border-bottom:1px solid var(--s-hair);
}
.dsc:hover .dsc__t{ color:var(--s-brass-deep); }
.dsc__t{
  font-family:var(--s-display); font-weight:700; font-size:20px; margin:0 0 3px;
  display:flex; align-items:baseline; gap:10px;
}
.dsc__n{ margin-left:auto; font-family:var(--s-mono); font-size:11.5px; color:var(--s-grey); }
.dsc__s{ font-size:14px; color:var(--s-grey); margin:0 0 6px; }
.dsc__l{ display:flex; flex-wrap:wrap; gap:5px; }
.lchip{
  font-family:var(--s-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  background:rgba(22,32,43,.07); color:var(--s-slate);
  border-radius:var(--r); padding:3px 6px;
}

/* ---- Detail page ----------------------------------------- */
.det__head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.det__t{ font-size:32px; font-weight:800; line-height:1.03; margin:0 0 6px; }
.det__h{ font-size:14.5px; color:var(--s-grey); margin:0 0 8px; }
.facts{ border-top:2px solid var(--s-ink); margin:0 0 22px; }
.fact{
  display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--s-hair);
  font-size:15px; align-items:baseline;
}
.fact dt{
  flex:0 0 112px; font-family:var(--s-mono); font-size:11px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--s-grey); margin:0;
}
.fact dd{ margin:0; flex:1; min-width:0; }
.prose p{ margin:0 0 12px; font-size:15.5px; }
.prose ul{ margin:0 0 14px; padding-left:20px; font-size:15.5px; }
.prose li{ margin-bottom:5px; }

.cta-strip{
  border-top:2px solid var(--s-ink); border-bottom:2px solid var(--s-hair);
  padding:16px 0 18px; margin:0 0 26px;
}

/* ---- The needs board ------------------------------------- */
.need{
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 0; border-bottom:1px solid var(--s-hair);
}
.need__b{ flex:1; min-width:0; }
.need__r{
  font-family:var(--s-mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--s-brass-deep); margin:0 0 3px;
}
.need__t{ font-family:var(--s-display); font-weight:700; font-size:19px; margin:0 0 4px; }
.need__x{ font-size:14px; color:var(--s-grey); margin:0 0 7px; }

/* ---- Tables ---------------------------------------------- */
/* narrow screens: let a wide table scroll rather than break the layout */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; }
.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 16px; }
.tbl.facts th{ width:38%; color:var(--s-grey); font-weight:600; }
.sits{ margin:0; padding-left:20px; }
.sits li{ margin:0 0 10px; line-height:1.55; }
.sits b{ display:block; font-family:var(--s-display); font-size:17px; letter-spacing:.01em; }
.tbl caption{ text-align:left; font-size:13px; color:var(--s-grey); padding-bottom:8px; }
.tbl th,.tbl td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--s-hair); vertical-align:top; }
.tbl thead th{
  font-family:var(--s-display); font-size:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--s-bone); background:var(--s-ink);
}
.tbl tbody th{ font-weight:600; white-space:nowrap; }

/* ---- Forms ----------------------------------------------- */
.field{ margin-bottom:16px; }
.field > label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--s-slate); margin-bottom:6px;
}
.req{ color:var(--s-alert); }
.inp,.ta{
  width:100%; font-family:var(--s-body); font-size:15.5px; color:var(--s-ink);
  background:var(--s-card); border:1.5px solid var(--s-hair);
  border-radius:var(--r); padding:11px 12px;
}
.ta{ min-height:110px; resize:vertical; }
.hint{ font-size:12.5px; color:var(--s-grey); margin:5px 0 0; }
.two{ display:flex; gap:12px; flex-wrap:wrap; }
.two > .field{ flex:1 1 190px; }
.err{ color:var(--s-alert); font-size:13px; font-weight:600; margin:6px 0 0; }
.hp{ position:absolute; left:-9999px; }
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.check{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; background:var(--s-card);
  border:1.5px solid var(--s-hair); border-radius:var(--r);
  padding:8px 11px; cursor:pointer;
}
.check input{ accent-color:var(--s-brass); width:17px; height:17px; flex:0 0 auto; margin:0; }

/* ---- States ---------------------------------------------- */
.empty{
  border:2px dashed var(--s-hair); border-radius:var(--r);
  padding:28px 20px; text-align:center; margin:14px 0 20px;
}
.empty h3{ font-size:22px; margin:0 0 8px; }
.empty p{ color:var(--s-grey); font-size:15px; margin:0 0 16px; }

.preview{
  background:var(--s-brass); color:#241A05;
  font-size:12.5px; font-weight:600; letter-spacing:.03em;
  padding:8px var(--pad); text-align:center;
}
.preview strong{ font-weight:700; }

.note{
  font-size:13px; color:var(--s-grey); border-left:3px solid var(--s-hair);
  padding:2px 0 2px 12px; margin:0 0 16px;
}

/* ---- Steps ----------------------------------------------- */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{ counter-increment:s; position:relative; padding-left:44px; margin-bottom:18px; }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--s-mono); font-size:13px; font-weight:600;
  color:var(--s-brass-deep); letter-spacing:.04em;
  border-bottom:2px solid var(--s-brass); padding-bottom:2px;
}
.steps b{ display:block; font-family:var(--s-display); font-weight:700; font-size:19px; margin-bottom:2px; }
.steps span{ font-size:14.5px; color:var(--s-grey); }

/* ---- The test list (six checks) -------------------------- */
.test{ list-style:none; margin:0 0 18px; padding:0; counter-reset:t; }
.test li{
  counter-increment:t; position:relative; padding-left:40px;
  margin-bottom:14px; font-size:15px;
}
.test li::before{
  content:counter(t,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font-family:var(--s-mono); font-size:12px; font-weight:600; color:var(--s-brass-deep);
}
.test b{ font-weight:600; }

/* ---- Digest ---------------------------------------------- */
.dg__no{
  font-family:var(--s-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--s-brass-deep); margin:0 0 4px;
}
.dg__t{ font-family:var(--s-display); font-weight:800; font-size:26px; line-height:1.08; margin:0 0 10px; }
.dg__s{
  font-family:var(--s-display); font-weight:700; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; margin:22px 0 10px; padding-bottom:6px;
  border-bottom:2px solid var(--s-ink);
}

/* ---- Footer ---------------------------------------------- */
.foot{
  border-top:2px solid var(--s-hair); margin-top:34px; padding-top:18px;
  font-size:13px; color:var(--s-grey);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:2px 10px; margin-bottom:12px; }
/* 24px minimum hit area - the label is 21px tall, so the padding does the work */
.foot__nav a{
  color:var(--s-slate); text-decoration:none; font-weight:600; font-size:13.5px;
  display:inline-flex; align-items:center; min-height:24px; padding:2px 4px; margin:0 -4px;
}
.foot__nav a:hover{ color:var(--s-brass-deep); }
.foot p{ margin:0 0 6px; line-height:1.5; }

/* ---- Bottom tabs ----------------------------------------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:calc(var(--tabs) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--s-ink); display:flex; align-items:stretch;
}
.tab{
  flex:1; display:flex; align-items:center; justify-content:center;
  color:rgba(246,241,231,.60); text-decoration:none;
  font-family:var(--s-display); font-weight:700; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;
  border-top:3px solid transparent; text-align:center; padding:0 4px;
}
.tab.is-on{ color:var(--s-bone); border-top-color:var(--s-brass); }
@media (min-width:761px){
  .tabs{ display:none; }
  html{ --tabs:0px; }
}

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---- Focus ----------------------------------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
.chip:focus-visible,.check:focus-visible{
  outline:2px solid var(--s-brass); outline-offset:2px; border-radius:2px;
}

/* ---- Print ----------------------------------------------- */
@media print{
  .bar,.dnav,.tabs,.cta-strip,.filters,.preview,.save{ display:none !important; }
  body{ background:#fff; }
  #main{ padding:0; max-width:none; }
}


/* ---- Illustration -------------------------------------------------------
   Drawn in the same four primitives as the delegate badge - flat rectangles,
   circles, polygons, hairlines - in the locked palette only. Decorative:
   every scene is alt="" because the heading beside it already says the thing.
   ------------------------------------------------------------------------ */
.art{ display:block; width:100%; height:auto; }
.art--hero{ margin:4px 0 26px; }
.art--band{ margin:2px 0 26px; }
.art--mid{ max-width:560px; margin:2px auto 26px; }
.art--spot{ max-width:300px; margin:0 0 12px; }
.art--spot-c{ max-width:300px; margin:8px auto 24px; }
.door .art--spot{ max-width:none; width:82%; }
@media (min-width:761px){
  .art--hero{ margin:8px 0 34px; }
  .art--band{ margin:4px 0 32px; }
  .door .art--spot{ width:70%; }
}

/* ---- Section skeletons --------------------------------------------------
   One page should not be eight of the same shape stacked. Three variants,
   each earned by the kind of content it carries: .block is the default
   run of prose, .block--inset is an aside or an exclusion, .block--split
   side-heads a section on wide screens.
   ------------------------------------------------------------------------ */
.block--inset{
  background:var(--s-card); border:2px solid var(--s-hair);
  border-left:4px solid var(--s-brass); border-radius:var(--r);
  padding:18px 18px 4px; margin-bottom:30px;
}
.block--inset .h-rule{ border-top:0; padding-top:0; margin-top:0; }
@media (min-width:761px){
  .block--split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:0 30px; }
  .block--split > .h-rule{ grid-column:1; margin-bottom:0; align-self:start; }
  .block--split > *:not(.h-rule){ grid-column:2; }
  .block--split > .h-rule{ border-top:2px solid var(--s-ink); }
}

/* ---- Clause documents ---------------------------------------------------
   Terms and privacy are read by clause and referred to by number, so the
   number is content. Side-headed on wide screens, stacked on narrow.
   ------------------------------------------------------------------------ */
.doc{ counter-reset:cl; }
.doc__c{ counter-increment:cl; position:relative; margin-bottom:26px; }
.doc__c > .h-rule::before{
  content:counter(cl); font-family:var(--s-mono); font-size:12px;
  color:var(--s-brass-deep); margin-right:10px; font-weight:600;
}
@media (min-width:761px){
  .doc__c{ display:grid; grid-template-columns:184px minmax(0,1fr); gap:0 28px; }
  .doc__c > .h-rule{
    grid-column:1; grid-row:1; border-top:2px solid var(--s-ink);
    margin:0; align-self:start; display:block;
  }
  .doc__c > .h-rule .h-rule__n{ display:block; margin:2px 0 0; }
  .doc__c > *:not(.h-rule){ grid-column:2; }
  .doc__c > *:nth-child(2){ margin-top:14px; }
}


/* ---- Selection and focus ------------------------------------------------ */
::selection{ background:rgba(192,138,46,.30); color:var(--s-ink); }
a:focus-visible, .btn:focus-visible, .door:focus-visible, .pv:focus-visible,
.dsc:focus-visible, .save:focus-visible, .tab:focus-visible, .dnav__a:focus-visible,
.pick:focus-visible, .clear:focus-visible, summary:focus-visible{
  outline:2px solid var(--s-brass); outline-offset:2px; border-radius:2px;
}

/* ---- Motion -------------------------------------------------------------
   Applied by script only, and only when the reader has not asked for less
   motion - so with JS off, or reduced motion on, nothing is ever hidden.
   One gesture, used once per section: a short rise as it arrives.
   ------------------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(10px); will-change:opacity, transform; }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .38s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform .38s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}
.btn, .chip, .save, .pick, .clear, .fg__s{
  transition:background-color .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.door, .pv, .dsc, .lvl, .need, .foot__nav a, .dnav__a{
  transition:border-color .16s ease-out, color .16s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}


/* ---- Target size -------------------------------------------------------
   A link sitting inside a sentence is exempt from the 24px floor - it moves
   with the text and cannot be padded without breaking the line. A link that
   is the whole content of a table cell or a list row is not inline text: it
   is a control, and it gets padded to clear the floor.
   ------------------------------------------------------------------------ */
.tbl th a, .tbl td a{ display:inline-block; padding:4px 0; }
.dsc__t a, .pv__tags a{ display:inline-block; padding:3px 0; }
/* A link that ends a card or a list row is a control, not running text. */
.fine > a, .lvl__x > a{ display:inline-block; padding:5px 0; }
.block > p > a:only-child{ display:inline-block; padding:5px 0; }

/* ==========================================================================
   THE DESKTOP SHELL
   --------------------------------------------------------------------------
   Everything above this point is the phone layout, and it is correct for a
   phone. On a wide screen it was wrong: #main capped at 700px meant the whole
   site sat in a thin central ribbon with the dark header and nav running full
   bleed either side of nothing.

   The fix is not "make it wider" - a 1180px line of prose is worse than a
   700px one. The page widens and gains a structure: a sticky rail carrying
   the page heading, and the content beside it. Reading measure is protected
   at the paragraph, which is where measure actually lives.
   ========================================================================== */

:root{ --wide:1180px; --rail:300px; --gut:72px; }

@media (min-width:1080px){

  #main{ max-width:var(--wide); }

  /* ---- The rail ---------------------------------------------------------
     Pages that have a heading get two columns. The heading sits in the rail
     and stays put while the content scrolls, so you always know what page
     you are on - the thing a 700px ribbon gave you for free by being short. */
  #main.is-rail{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gut);
    align-items:start;
  }
  #main.is-rail > *{ grid-column:2; min-width:0; }
  #main.is-rail > .ph{
    grid-column:1; grid-row:1 / span 200;
    position:sticky; top:28px; align-self:start;
  }
  #main.is-rail > .foot{ grid-column:1 / -1; margin-top:16px; }

  .ph .view__h{ font-size:40px; line-height:0.98; text-wrap:balance; }
  .ph .view__sub{ font-size:15px; margin-bottom:0; max-width:34ch; }
  .ph::after{
    content:""; display:block; width:44px; height:3px;
    background:var(--s-brass); margin-top:18px;
  }

  /* Measure lives on the paragraph, not on the page. */
  #main.is-rail p, #main.is-rail li{ max-width:70ch; }
  #main.is-rail .ph p{ max-width:34ch; }
  #main.is-rail .pv__d, #main.is-rail .dsc__s,
  #main.is-rail .door p, #main.is-rail .card p{ max-width:none; }

  /* ---- Home hero --------------------------------------------------------
     The room illustration was pushed below the fold by a stacked layout. On
     a wide screen it belongs beside the headline, which is also what stops
     the headline from running to an orphan word. */
  .hero-split{
    display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.18fr);
    column-gap:56px; align-items:center; padding-top:8px;
  }
  .hero-split__art{ min-width:0; }
  .hero-split .art--hero{ margin:0; }
  .hero{ padding:0 0 8px; }
  .hero h1{ font-size:58px; text-wrap:balance; }
  .hero__sub{ font-size:17px; max-width:38ch; }

  /* ---- Grids that were stranded single-column --------------------------- */
  #disciplines{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; }
  .two-up{ gap:22px; }
  .art--mid{ max-width:620px; }
  .art--band{ max-width:none; }

  /* The register reads better with air between the badge and the entry. */
  .pv{ gap:20px; padding:19px 0; }
  .filters{ margin-bottom:14px; }

  /* The provider rail leads with the badge - the signature device is the
     first thing you see, at the size it deserves. */
  .ph--det .det__head{ display:block; }
  .ph--det .badge{ margin-bottom:14px; }
  .ph--det .det__t{ font-size:34px; line-height:1.02; }
  .ph--det .det__h{ font-size:15px; margin-top:6px; }
  .ph--det .mark{ margin-top:12px; }
}

/* A wider tier still: hold the measure, let the illustration breathe. */
@media (min-width:1500px){
  :root{ --wide:1280px; --rail:330px; }
  .hero h1{ font-size:64px; }
}

/* Between the phone and the rail: use the width, keep one column. */
@media (min-width:761px) and (max-width:1079px){
  #main{ max-width:820px; }
  .hero h1{ font-size:52px; text-wrap:balance; }
}

/* ==========================================================================
   VERSION 1.1 - THE TWO LAYOUTS
   --------------------------------------------------------------------------
   Up to 1.0 this was one responsive layout that reflowed. From 1.1 the phone
   and the desktop are two different things, because they are two different
   jobs.

   PHONE (up to 760px) - an APP. Bottom tabs, one column, and the filter head
   travels with you so the register can always be narrowed without scrolling
   back up. Nothing sits in a margin, because there is no margin.

   DESKTOP (1080px and up) - a REGISTER ROOM. The filters are not hidden
   behind pills, they stand open in the rail where you can read the whole
   shape of the register at once, and the results are a card grid rather
   than a stack of full-width rows.

   The tier between them (761-1079) stays one column at 820px. It is a small
   laptop or a landscape tablet, and it is honest about being neither.
   ========================================================================== */

/* ---- PHONE ONLY ---------------------------------------------------------- */
@media (max-width:760px){

  /* The filter pills follow the list. On a phone the register runs long and
     the controls were only at the top - you had to scroll back up to change
     anything. Only the PILL ROW travels: the search box, the sort and the
     count stay at the top where they were. Making the whole filter block
     sticky cost a third of the screen for the entire scroll, which is worse
     than the problem it solves. */
  .filters{
    position:sticky; top:calc(var(--bar) + env(safe-area-inset-top)); z-index:22;
    background:var(--s-bone);
    margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding:0 var(--pad);
  }
  /* Once it reaches the header the block sheds everything but the pills, so
     it costs two rows of screen instead of a third of the phone. The class is
     set by an observer - with no script the filters simply do not travel,
     which is exactly how they behaved before. */
  .filters.is-stuck{
    border-bottom:2px solid var(--s-hair); padding-bottom:2px;
    /* Open the discipline facet and seventeen chips arrive. Bounded, or a
       stuck block taller than the screen buries the list behind it. */
    max-height:calc(100vh - var(--bar) - var(--tabs) - 24px); overflow-y:auto;
  }
  .filters.is-stuck .search,
  .filters.is-stuck .filters__row,
  .filters.is-stuck .filters__state{ display:none; }
  .filters.is-stuck .fgs{ margin:8px 0 7px; }
  /* Cards run to the edge of the glass. A phone has no margins to give away. */
  .pv{ margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); padding-left:var(--pad); padding-right:var(--pad); }
  .pv:active{ background:rgba(22,32,43,.04); }
  /* Group headings sit below the travelling pill row, not under it. */
  .grp{ top:calc(var(--bar) + 96px + env(safe-area-inset-top)); }
}

/* ---- DESKTOP ------------------------------------------------------------- */
@media (min-width:1080px){

  /* The register room. The rail carries the heading AND the open filters;
     the results sit beside them in their own column. */
  #main.is-reg{ grid-template-rows:auto 1fr; align-items:start; }
  #main.is-reg > .ph{ grid-column:1; grid-row:1; position:static; }
  /* The rail is taller than the screen once seventeen disciplines are in it.
     So the summary controls - search, the undo line, the sort and the count -
     are pinned, and only the facet list scrolls under them. Otherwise the
     last two facets sit below the fold of a sticky element, where no amount
     of page scrolling will ever reach them. */
  #main.is-reg > .filters{
    grid-column:1; grid-row:2; position:sticky; top:24px; align-self:start;
    margin:22px 0 0; max-height:calc(100vh - 48px);
    display:flex; flex-direction:column; min-height:0;
  }
  #main.is-reg .search{ order:1; flex:0 0 auto; }
  #main.is-reg .picks{ order:2; flex:0 0 auto; }
  #main.is-reg .filters__row{ order:3; flex:0 0 auto; }
  #main.is-reg .filters__state{ order:4; flex:0 0 auto; }
  #main.is-reg .fgs{ order:5; flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:8px; }
  #main.is-reg > .col{ grid-column:2; grid-row:1 / span 2; min-width:0; }
  #main.is-reg > .foot{ grid-column:1 / -1; }

  /* Facets stand open in the rail. No pill to press, no panel to expand -
     the whole shape of the register is readable at a glance. */
  #main.is-reg .fgs{ display:block; margin:4px 0 0; }
  #main.is-reg .fg{ display:block; border-top:1px solid var(--s-hair); padding:12px 0 10px; }
  #main.is-reg .fg:first-child{ border-top:0; padding-top:4px; }
  #main.is-reg .fg__s{
    display:flex; width:100%; background:none; border:0; padding:0 0 8px;
    font-size:11.5px; letter-spacing:.13em; color:var(--s-grey); cursor:default;
  }
  #main.is-reg .fg__s::after{ display:none; }
  #main.is-reg .fg[open] .fg__s{ color:var(--s-grey); }
  #main.is-reg .fg__c{ padding:0; gap:5px; }
  #main.is-reg .chip{ font-size:12.5px; padding:5px 8px; }
  #main.is-reg .search{ font-size:14px; padding:9px 10px; }
  #main.is-reg .filters__row{ margin:12px 0 6px; }
  #main.is-reg .sel{ flex:1 1 100%; font-size:13px; }
  #main.is-reg .filters__state{ padding:0 0 10px; border-bottom:2px solid var(--s-hair); margin:0; }
  #main.is-reg .picks{ margin:12px 0 0; }

  /* Results as a card grid. A 1,100px full-width row for one name is a phone
     list stretched; two columns of cards is a register. */
  #main.is-reg #list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  #main.is-reg #list > .grp{ grid-column:1 / -1; position:static; }
  #main.is-reg .pv{
    border:1.5px solid var(--s-hair); border-radius:var(--r);
    background:var(--s-card); padding:15px 15px 14px; gap:13px; align-items:flex-start;
  }
  #main.is-reg .pv:hover{ border-color:var(--s-slate); }
  #main.is-reg #more,
  #main.is-reg .cta-strip,
  #main.is-reg #list ~ *{ grid-column:1 / -1; }
  #main.is-reg .empty{ grid-column:1 / -1; }

  /* The shortlist is the register in miniature, so it is the register's
     layout. Same card, same two columns - a saved listing should not look
     like a different kind of object from the one you saved. */
  #shortlist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  #shortlist > .grp, #shortlist > .empty, #shortlist > p{ grid-column:1 / -1; }
  #shortlist .pv{
    border:1.5px solid var(--s-hair); border-radius:var(--r);
    background:var(--s-card); padding:15px 15px 14px; gap:13px; align-items:flex-start;
  }
  #shortlist .pv:hover{ border-color:var(--s-slate); }
}

/* ---- Install the app -------------------------------------------------
   The control appears on every page. In the desktop rail it must sit AFTER
   the brass rule, and that rule is a ::after pseudo-element, so the header
   becomes a flex column and the rule is ordered ahead of the button. The
   whole thing is hidden until the browser says an install is possible, and
   removed again the moment the app is installed.
   -------------------------------------------------------------------- */
.ph__inst{ margin:16px 0 0; }
.ph__inst .btn{ font-size:15px; padding:10px 15px; }
.foot__inst{ margin:14px 0 16px; }
.foot__inst .btn{ font-size:14px; padding:9px 14px; }
.btn--inst[hidden]{ display:none; }
html.is-installed .ph__inst,
html.is-installed .foot__inst,
html.is-installed .js-install{ display:none !important; }
@media (display-mode:standalone){
  .ph__inst, .foot__inst, .js-install{ display:none !important; }
}
@media (min-width:1080px){
  #main.is-rail>.ph{ display:flex; flex-direction:column; align-items:flex-start; }
  #main.is-rail>.ph::after{ order:1; }
  #main.is-rail>.ph .ph__inst{ order:2; margin-top:18px; }
}

/* ---- Install instructions ------------------------------------------------
   Shown when the browser gives us no install prompt of its own, which is
   every Safari and every Firefox. Three steps and a way out, nothing more.
   -------------------------------------------------------------------- */
.howto{ position:fixed; inset:0; z-index:200; background:rgba(13,20,28,.62);
        display:flex; align-items:center; justify-content:center; padding:var(--pad); }
.howto__box{ background:var(--s-card); border:2px solid var(--s-ink); border-radius:var(--r);
             max-width:420px; width:100%; padding:22px 22px 20px; }
.howto__h{ font-family:var(--s-display); font-weight:800; font-size:28px; line-height:1.05;
           margin:0 0 12px; }
.howto__l{ margin:0 0 14px; padding-left:20px; }
.howto__l li{ margin:0 0 8px; font-size:15.5px; }
.howto__f{ color:var(--s-grey); font-size:14px; margin:0 0 16px; }
.howto__x{ width:100%; }

/* ---- Contact desks -------------------------------------------------------
   A desk number is the thing to reach for on a contact page, so it is set
   large and is the only thing on its line.
   -------------------------------------------------------------------- */
.num{ font-family:var(--s-display); font-weight:700; font-size:29px; letter-spacing:.01em;
      line-height:1.1; margin:.15em 0 .55em; }
.num a{ color:var(--s-ink); text-decoration:none; border-bottom:3px solid var(--s-brass); }
.num a:hover{ color:var(--s-brass-deep); }

/* ==========================================================================
   SETSEBI v1.3 - THE DRAWN LAYER
   Illustration is a co-equal element, never a spot graphic. A hero vector
   fills its side of the section and carries weight against the headline.
   ========================================================================== */

.art-hero{ margin:0 0 30px; }
.art-hero .art--hero{ display:block; width:100%; height:auto; }

/* The old spot scale is retired. Nothing drawn on this site is 300px wide. */
.art--spot{ max-width:none; width:100%; margin:0 0 16px; }
.art--mid{ max-width:none; margin:2px 0 28px; }

/* ---- Scene rows: art in its OWN column beside the text, never stacked ---- */
.scene{ display:block; margin:26px 0; }
.scene__art{ margin:0 0 16px; }
.scene__art img{ display:block; width:100%; height:auto; }
.scene__c > :first-child{ margin-top:0; }

/* ---- Icons: named slots, bespoke, on the drawn language ----------------- */
.ico{ display:block; width:34px; height:34px; flex:0 0 34px; }
.ico--lg{ width:44px; height:44px; flex-basis:44px; }
.icorow{ display:flex; gap:13px; align-items:flex-start; }
.icorow > .ico{ margin-top:2px; }
.icorow__c > :first-child{ margin-top:0; }
.icorow__c > :last-child{ margin-bottom:0; }

.icogrid{ display:grid; gap:20px 22px; margin:18px 0 6px; }
.icogrid .icorow__c h3{
  font-family:var(--s-display); font-weight:700; font-size:17px;
  letter-spacing:.01em; margin:0 0 4px;
}
.icogrid .icorow__c p{ margin:0; font-size:15px; color:var(--s-grey); }

.statband{ display:grid; gap:16px 20px; margin:18px 0 4px; }
.statband .st__n{
  font-family:var(--s-display); font-weight:800; font-size:32px;
  line-height:1; color:var(--s-ink);
}
.statband .st__l{ font-size:13.5px; color:var(--s-grey); margin:3px 0 0; }

@media (min-width:600px){
  .icogrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statband{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1080px){
  .art-hero{ margin:0 0 36px; }
  .icogrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 30px; }
  .statband{ grid-template-columns:repeat(4,minmax(0,1fr)); }

  /* Art gets its own column beside the words. Never underneath them. */
  .scene{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    column-gap:44px; align-items:center; margin:38px 0;
  }
  .scene__art{ margin:0; }
  .scene--flip .scene__art{ order:2; }
  .scene--flip .scene__c{ order:1; }
}

/* ==========================================================================
   THE REGISTER GRID - the rail must stop where the results stop
   Chrome constrains a sticky grid item to the GRID CONTAINER, not to its
   grid area, so a footer inside <main> is fair game for the rail to slide
   over. The footer is now a sibling of <main>. Row two is an intrinsic
   track as well, because a spanning item is ignored when sizing a flexible
   one, which let the results column overflow its own row.
   ========================================================================== */
@media (min-width:1080px){
  /* Explicit placement. Every child is told its cell, so a runtime-injected
     node can never auto-place itself into a row of its own and stretch the
     grid past the last result. */
  #main.is-reg{ grid-template-rows:auto auto; }
  #main.is-reg > .ph{ grid-column:1; grid-row:1; position:static; }
  #main.is-reg > .art-hero{ grid-column:2; grid-row:1; margin:0 0 22px; }
  #main.is-reg > .filters{ grid-column:1; grid-row:2; max-height:calc(100vh - 56px); }
  #main.is-reg > .col{ grid-column:2; grid-row:2; }
  #main.is-reg > *:not(.ph):not(.art-hero):not(.filters):not(.col){
    grid-column:1 / -1; grid-row:3;
  }
  #main.is-reg{ padding-bottom:8px; }
}
}

/* The site footer now sits outside <main>. Give it back its own measure. */
.foot{ max-width:var(--wide); margin:0 auto; }
@media (min-width:1080px){
  .foot{ padding-top:6px; }
}

/* ---- Drawn empty and error states -------------------------------------- */
.state{ text-align:left; padding:22px 0 6px; }
.state__art{ display:block; width:100%; max-width:420px; height:auto; margin:0 0 14px; }
.state p{ margin:0 0 10px; }

/* ---- Motion: honours the site's single gesture, and reduced-motion ------ */
@media (prefers-reduced-motion:no-preference){
  .art-hero .art--hero{ will-change:auto; }
}

/* Drawn state graphics - an empty state gets a picture, not a bare line. */
.empty .state__i{ display:block; width:44px; height:44px; margin:0 0 12px; }
.steps__c{ display:block; }
.foot__ch .foot__i{ display:inline-block; width:18px; height:18px;
  vertical-align:-3px; margin-right:5px; }

/* A standalone link that IS the whole line is a target, not running text.
   Give it the 24px WCAG 2.5.8 minimum rather than the 21px a line-height
   happens to produce. */
.linkish, .foot__ch a, a[href^="tel:"]{ display:inline-block; padding:2px 0; min-height:24px; }

/* The by-hand install route is drawn, not a wall of text. */
.howto__l--drawn{ list-style:none; padding:0; margin:16px 0; counter-reset:none; }
.howto__l--drawn li{ display:flex; gap:14px; align-items:flex-start; margin:0 0 14px; }
.howto__l--drawn li .ico{ margin-top:1px; }

/* =================================================================
   v1.4.0 - ordering, alignment and density corrections
   ================================================================= */

/* ---- Hero columns start together -------------------------------
   Centring made the art float half a headline lower than the text it
   sits beside. Both columns begin on the same line, on every hero. */
.hero-split { align-items:start; }
#main.is-reg > .ph, #main.is-reg > .art-hero { align-self:start; }
.art-hero { margin-top:0; }

/* The headline held four lines. Give the text column its share of the
   width and it closes to three. */
@media (min-width:1080px){
  .hero-split { grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); column-gap:48px; }
  .hero h1 { font-size:52px; }
  .hero__sub { max-width:46ch; }
}
@media (min-width:1500px){ .hero h1 { font-size:56px; } }

/* ---- The shape of the register, directly under the hero --------- */
.block--band { padding-top:6px; margin-bottom:26px; }
.block--band .statband { margin-top:14px; }

/* ---- How it works: four columns on one row ---------------------- */
.stepcols { list-style:none; margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:26px 22px; counter-reset:sc; }
@media (min-width:600px){ .stepcols { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .stepcols { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 20px; } }
.stepcol { display:flex; flex-direction:column; min-width:0; }
.stepcol__n { font-family:var(--s-mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; color:var(--s-brass-deep); margin-bottom:8px; }
.stepcol__art { display:block; width:100%; height:auto; margin:0 0 12px;
  border:1.5px solid var(--s-hair); border-radius:var(--r); background:var(--s-card); }
.stepcol__t { font-family:var(--s-display); font-weight:700; font-size:18px;
  line-height:1.2; margin-bottom:5px; }
.stepcol__d { font-size:14.5px; color:var(--s-grey); }

/* ---- Featured listings run three to a row ----------------------- */
@media (min-width:760px){
  #featured { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  #featured .pv { border:1.5px solid var(--s-hair); border-radius:var(--r);
    background:var(--s-card); padding:15px; margin:0; border-bottom:1.5px solid var(--s-hair); }
}
@media (min-width:1080px){
  #featured { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* The register itself carries two to a row beside its filter rail. */
@media (min-width:1080px){
  #main.is-reg #list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  #main.is-reg #list .pv { margin:0; }
}

/* ---- Footer: two rows, and the builder line is a link ----------- */
.foot__co { color:inherit; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--s-hair); }
.foot__co:hover { color:var(--s-brass-deep); text-decoration-color:currentColor; }

/* ---- Contact: four desks ---------------------------------------- */
.desks { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:600px){ .desks { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .desks { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.desks .card { margin-bottom:0; }

/* ---- Register pagination ---------------------------------------- */
.pager { display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-top:18px; }
.pager__s { font-family:var(--s-mono); font-size:12px; letter-spacing:.06em;
  color:var(--s-grey); }

/* v1.4.1 - the footer sits outside #main, so it never inherited the phone
   tab-bar clearance and its last row was hidden underneath the tabs. It also
   has to be able to wrap without pushing the page sideways. */
.foot{
  padding-bottom:calc(var(--tabs) + 24px + env(safe-area-inset-bottom));
}
@media (min-width:761px){ .foot{ padding-bottom:32px; } }
.foot__nav{ flex-wrap:wrap; min-width:0; gap:2px 6px; }
/* The -4px side margin was optical alignment, but on a wrapped line it bleeds
   past the container and pushes the page 2px sideways. The padding keeps the
   24px hit area; the tightened gap keeps the spacing looking the same. */
.foot__nav > a{ min-width:0; margin:0; }

/* ================================================================
   v1.4.2 - Why this register as one illustrated row, and the
   plain-sentence heading variant.
   ================================================================ */

/* ---- Why this register: three columns, each with its own scene -- */
.whycols { list-style:none; margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:26px 22px; }
@media (min-width:600px){ .whycols { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .whycols { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 22px; } }
.whycol { display:flex; flex-direction:column; min-width:0; }
.whycol__art { display:block; width:100%; height:auto; margin:0 0 12px;
  border:1.5px solid var(--s-hair); border-radius:var(--r); background:var(--s-card); }
.whycol__t { font-family:var(--s-display); font-weight:700; font-size:20px;
  line-height:1.2; margin-bottom:5px; }
.whycol__d { font-size:14.5px; color:var(--s-grey); }

/* ---- A heading that is a plain sentence, not a tracked rule ----- */
.h-plain { font-family:var(--s-display); font-weight:700; font-size:26px;
  line-height:1.15; letter-spacing:0; text-transform:none;
  color:var(--s-ink); text-align:left; margin:0 0 16px; border:0; padding:0;
  display:block; }
@media (min-width:1080px){ .h-plain { font-size:30px; } }