/* Booked On — marketing site and resource library.

   Same palette as the simulators, so the two halves of the product look like
   one thing. No build step: this file is served as written.

   The palette is the design handover's: a light page, green as the action
   colour, and the dark green-black kept for the bands that frame it — the
   header, the hero and the footer. Every class name is the one the HTML and
   assets/site.js already use; this is a retheme, not a rebuild. */

:root{
  /* surfaces */
  --desk:#f6f7f8;        /* the page */
  --panel:#ffffff;       /* anything raised off it */
  --panel2:#fbfcfc;      /* a card under the cursor */
  --line:#e3e7ea;        /* borders */
  --rule:#eceef0;        /* hairlines */
  --btn-line:#d7dce0;    /* secondary button border */
  --night:#0f1a14;       /* header, hero and footer bands */

  /* text */
  --ink:#12181f;
  --ink-2:#39434d;
  --muted:#5a6572;
  --faint:#8a929b;

  /* accents */
  --green:#0b6e4f;       /* proceed — the action colour */
  --green-dark:#095c42;
  --green-lit:#2fbf71;   /* proceed, on a dark ground */
  --green-bg:#e7f6ee;
  --amber:#e8a13a;
  --amber-ink:#a56a0d;
  --amber-bg:#fdf3e6;
  --red:#d64545;
  --red-ink:#b32f2f;
  --platinum:#5a6572;

  --head:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --shell:760px;
  --wide:1080px;
}

/* A fixed column built for a laptop leaves a big monitor mostly empty and the
   page looking shrunken in the middle of it. The shell widths and the base size
   step up together, so the whole thing scales rather than just getting wider. */
@media (min-width:1700px){
  :root{--shell:850px;--wide:1280px}
  html{font-size:17.5px}
}
@media (min-width:2300px){
  :root{--shell:940px;--wide:1480px}
  html{font-size:19px}
}
@media (min-width:3000px){
  :root{--shell:1040px;--wide:1800px}
  html{font-size:21px}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  margin:0;background:var(--desk);color:var(--ink);
  font-family:var(--body);
  font-size:1rem;line-height:1.55;   /* 1rem, so the steps above actually reach it */
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;display:block}
a{color:var(--ink)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 18px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.02em;line-height:1.18;margin:0}
h1{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:800}
h2{font-size:clamp(1.35rem,3.4vw,1.85rem);font-weight:700}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 14px}
.lede{font-size:1.06rem;color:var(--muted);max-width:60ch}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--night);border-bottom:0}
.nav .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
       font:700 1.06rem var(--head);letter-spacing:-.01em;color:#f3f5f2;white-space:nowrap}
.brand:hover{color:var(--green-lit)}
/* the mark: a signal head with the green aspect lit (assets/brand/mark.svg) */
.brand .logo{width:28px;height:28px;flex:none;display:block}
.nav nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav nav a{text-decoration:none;color:rgba(243,245,242,.75);font:500 .92rem var(--body);
           padding:8px 12px;border-radius:7px}
.nav nav a:hover{color:#f3f5f2;background:rgba(255,255,255,.07)}
.nav nav a.here{color:#f3f5f2;background:rgba(255,255,255,.07)}
.nav nav a.cta{background:var(--green-lit);color:var(--night);font-weight:700}
.nav nav a.cta:hover{background:#25a85f;color:var(--night)}
.nav nav a:focus-visible,.brand:focus-visible,.burger:focus-visible{
  outline:2px solid var(--green-lit);outline-offset:2px}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.3);
        color:#f3f5f2;border-radius:8px;padding:8px 12px;font:inherit;font-size:.9rem;cursor:pointer}
@media (max-width:760px){
  .burger{display:block}
  .nav nav{position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;
           gap:2px;background:var(--night);border-bottom:1px solid rgba(255,255,255,.12);
           padding:10px 14px 16px;margin:0;display:none}
  .nav nav.open{display:flex}
  .nav nav a{padding:12px;font-size:1rem}
  .nav nav a.cta{text-align:center;margin-top:6px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
     font-family:var(--body);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;
     border:1.5px solid var(--btn-line);background:transparent;color:var(--ink-2);
     border-radius:9px;padding:11px 18px;white-space:nowrap}
.btn:hover{border-color:var(--faint);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn.go{background:var(--green);border-color:var(--green);color:#fff}
.btn.go:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 13px;font-size:.88rem;border-radius:8px}
.btn.block{width:100%}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* on the dark bands the outlined button has to read against the dark */
.hero .btn:not(.go),.foot .btn:not(.go){border-color:rgba(255,255,255,.3);color:#f3f5f2}
.hero .btn:not(.go):hover,.foot .btn:not(.go):hover{border-color:var(--green-lit);color:var(--green-lit)}
.hero .btn.go,.foot .btn.go{background:var(--green-lit);border-color:var(--green-lit);color:var(--night)}
.hero .btn.go:hover,.foot .btn.go:hover{background:#25a85f;border-color:#25a85f}

/* ---------- badges ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font:600 .72rem var(--mono);
     letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
     border:1px solid var(--line);color:var(--muted);background:var(--desk);white-space:nowrap}
.tag.standard{color:var(--green);border-color:var(--green-bg);background:var(--green-bg)}
.tag.gold{color:var(--amber-ink);border-color:var(--amber-bg);background:var(--amber-bg)}
.tag.platinum{color:#41546a;border-color:#e4e9ef;background:#eef2f6}
.tag.stage{text-transform:none;letter-spacing:0;font-weight:600;font-family:var(--body)}

/* copy that is only true while nothing is locked; tiers.js puts .paywall on <html> */
.paywall .open-only{display:none}
html:not(.paywall) .paywall-only{display:none}
.buy{margin:0}

.hero .tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
           color:rgba(243,245,242,.8)}

/* ---------- hero ---------- */
/* The dark band the handover puts at the top of the landing page. It is the
   same green-black as the header and the footer, so the page reads as one
   thing with a light middle rather than three separate skins. */
.hero{padding:70px 0 58px;border-bottom:0;
      background:var(--night);color:#f3f5f2}
.hero h1,.hero h2,.hero h3{color:#f3f5f2}
.hero a{color:var(--green-lit)}
.hero .lede,.hero .muted{color:rgba(243,245,242,.72)}
.hero .eyebrow{display:inline-flex;align-items:center;color:var(--green-lit);
               font:600 .76rem var(--mono);letter-spacing:.11em;text-transform:uppercase;
               border:1px solid rgba(47,191,113,.4);border-radius:999px;padding:6px 14px;margin:0 0 20px}
.hero h1{max-width:17ch;letter-spacing:-.025em}
.hero .lede{margin:18px 0 26px;font-size:1.12rem}
/* min() on the track floor, so the grid cannot claim a min-content width of
   four full columns and push the page wider than a phone */
.heroStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(142px,100%),1fr));
           gap:18px 26px;margin-top:34px;padding-top:24px;
           border-top:1px solid rgba(255,255,255,.14);max-width:740px}
.heroStats b{display:block;font:700 1.5rem var(--head);font-variant-numeric:tabular-nums;color:#fff}
.heroStats span{color:rgba(243,245,242,.6);font-size:.84rem}

/* On a wide screen the words alone leave half the hero empty, which reads as a
   page pushed off to one side. A panel takes the other half. Below 1000px it is
   hidden rather than stacked — on a phone it would just be a second thing to
   scroll past before the buttons. */
.heroGrid{display:grid;gap:46px;align-items:center}
.heroGrid>*{min-width:0}   /* grid items default to min-width:auto and will not shrink */
.heroPanel{display:none}
@media (min-width:1000px){
  .heroGrid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .heroPanel{display:block}
  /* the text column is half as wide now, so four stats in a row would leave one
     stranded underneath — two by two instead */
  .heroGrid .heroStats{grid-template-columns:repeat(2,1fr)}
}
/* the panel is the day-mode card from the handover, sitting on the dark band */
.heroPanel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
           border-radius:14px;padding:8px 8px 6px;box-shadow:none}
.hp-bar{display:flex;align-items:center;gap:9px;padding:11px 13px 13px;
        border-bottom:1px solid rgba(255,255,255,.12);font-size:.86rem}
.hp-bar b{font:700 .92rem var(--head)}
.hp-bar .clock{margin-left:auto;color:var(--green-lit);font-family:var(--mono);
               font-variant-numeric:tabular-nums;font-size:1rem}
.hp-row{display:flex;gap:11px;align-items:flex-start;padding:13px;
        border-bottom:1px solid rgba(255,255,255,.12)}
.hp-row:last-of-type{border-bottom:0}
.hp-row .lamp{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:6px;
              background:rgba(255,255,255,.2);box-shadow:none}
.hp-row .lamp.on{background:var(--green-lit)}
.hp-row b{display:block;font-weight:600;font-size:.94rem}
.hp-row span{color:rgba(243,245,242,.6);font-size:.81rem}
.hp-row .go{margin-left:auto;background:var(--green-lit);color:var(--night);font-weight:700;
            font-size:.78rem;border-radius:7px;padding:6px 12px;align-self:center}
.hp-foot{padding:12px 13px 10px;color:rgba(243,245,242,.55);font-size:.78rem;
         font-variant-numeric:tabular-nums;border-top:1px solid rgba(255,255,255,.12)}

/* ---------- sections ---------- */
.section{padding:58px 0;border-bottom:1px solid var(--line)}
.section.flat{border-bottom:0}
.sechead{max-width:62ch;margin-bottom:30px}
.sechead h2{margin-bottom:10px}
.sechead p{color:var(--muted);margin:0}

/* ---------- cards ---------- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
      display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--green);background:var(--panel2)}
.card h3{margin:0;font-family:var(--head)}
.card p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.card .cardmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
            color:var(--faint);font-size:.78rem;font-variant-numeric:tabular-nums}
.card.shut{opacity:.86}
.card.shut h3{color:var(--muted)}
.card .more{color:var(--green);font-size:.86rem;font-weight:600}

/* test grid on the landing page */
.tests{display:grid;gap:0;border-top:1px solid var(--line)}
.test{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);
      flex-wrap:wrap}
.test .lamp{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:8px;
            background:var(--btn-line);box-shadow:none}
.test .lamp.on{background:var(--green-lit)}
.test .body{flex:1 1 240px;min-width:0}
.test h3{margin:0 0 2px}
.test p{margin:0;color:var(--muted);font-size:.88rem}
.test .side{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- pricing ---------- */
.plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;
      display:flex;flex-direction:column;gap:14px}
.plan.feature{border-color:var(--green);box-shadow:0 0 0 1px rgba(11,110,79,.2)}
.plan .ribbon{align-self:flex-start}
.plan h3{font-size:1.25rem}
.plan .price{font:700 2.15rem var(--head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .price small{font:500 .86rem var(--body);color:var(--muted);letter-spacing:0}
.plan .why{color:var(--muted);font-size:.9rem;margin:0}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1}
.plan li{display:flex;gap:10px;font-size:.92rem;line-height:1.45;align-items:flex-start}
.plan li:before{content:"";flex:0 0 16px;height:16px;margin-top:3px;border-radius:50%;
                background:var(--green-bg);
                box-shadow:inset 0 0 0 1px rgba(11,110,79,.35)}
.plan li.no{color:var(--faint)}
.plan li.no:before{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}

.ptable{width:100%;border-collapse:collapse;margin-top:14px;font-size:.92rem}
.ptable th,.ptable td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);
                      vertical-align:top}
.ptable th{color:var(--muted);font:600 .78rem var(--mono);text-transform:uppercase;
           letter-spacing:.06em}
.ptable td.y{color:var(--green);font-weight:650}
.ptable td.n{color:var(--faint)}
.ptable tbody th{color:var(--ink);text-transform:none;letter-spacing:0;
                 font:600 .92rem var(--body)}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- notes, faq ---------- */
/* a line of prose the width of an ultrawide is unreadable whatever the type
   size, so the boxed notes keep a measure like everything else. The box itself
   is capped rather than its contents — a note is prose, not a banner. */
.note{max-width:62ch;
      background:var(--amber-bg);border-left:3px solid var(--amber);padding:14px 16px;
      border-radius:0 10px 10px 0;font-size:.92rem;color:#7a5410;margin:20px 0}
.note.quiet{background:var(--panel);border-left-color:var(--line);color:var(--muted)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;
             display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--green);font-size:1.25rem;line-height:1}
.faq details[open] summary:after{content:"−"}
.faq details p{color:var(--muted);font-size:.94rem;margin:0 0 15px;max-width:70ch}

/* ---------- resource hub ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters button{font:600 .82rem var(--body);cursor:pointer;color:var(--ink-2);
                background:transparent;border:1.5px solid var(--btn-line);border-radius:999px;
                padding:8px 14px}
.filters button:hover{color:var(--ink);border-color:var(--faint)}
.filters button.on{background:var(--green);border-color:var(--green);color:#fff}
.libgroup{margin-bottom:34px}
.libgroup h2{margin-bottom:4px}
.libgroup>p{color:var(--muted);font-size:.92rem;margin:0 0 16px;max-width:64ch}

/* ---------- vacancies: the postcode search and the employer directory ---------- */
/* The search is a form that has to stay usable on a phone held in one hand at a
   bus stop, so the fields go full width below 640px rather than shrinking. */
.finder{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--panel);
        border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.finder .field{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.finder label{font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;
              color:var(--muted)}
.finder input,.finder select{font:inherit;font-size:1rem;color:var(--ink);background:var(--desk);
        border:1.5px solid var(--btn-line);border-radius:9px;padding:11px 13px;width:100%}
.finder input:focus-visible,.finder select:focus-visible{outline:2px solid var(--green);
        outline-offset:1px;border-color:var(--green)}
.finder .btn{flex:0 0 auto}
.finder .fnote{flex:1 1 100%;margin:4px 0 0;color:var(--faint);font-size:.82rem;max-width:72ch}
.finder .fnote a{color:var(--muted)}
@media (max-width:640px){
  .finder{padding:16px}
  .finder .field{flex:1 1 100%}
  .finder .btn{width:100%}
}
/* The map. Drawn, not tiled — assets/gb-map.js says why — so it is styled like
   the rest of the page rather than sitting in it like a photograph. It is tall
   and narrow, the shape of the country, so it takes a column of its own beside
   the caption rather than a band across the page. */
.mapwrap{display:flex;gap:30px;align-items:center;justify-content:center;
         margin:22px auto 0;padding:20px 24px;max-width:840px;
         background:var(--panel);border:1px solid var(--line);border-radius:12px}
.mapwrap .map{flex:0 0 auto;width:min(340px,46vw)}
/* hidden, not visible: Ireland runs past the frame and the radius ring can too,
   and both should stop at the edge of the panel like any cropped map */
.mapwrap svg{width:100%;height:auto;display:block;overflow:hidden}
.mapwrap figcaption{flex:1 1 220px;color:var(--muted);font-size:.88rem;line-height:1.55;
                    align-self:center;max-width:46ch}
.mapwrap figcaption b{color:var(--ink)}
.mapwrap figcaption a{color:var(--green)}
@media (max-width:640px){
  .mapwrap{flex-direction:column;align-items:center;padding:16px}
  .mapwrap .map{width:min(260px,62vw)}
  .mapwrap figcaption{text-align:center;flex:0 0 auto}
}
/* The land has to read as land against a white panel, which the page's own
   surface greys are too pale to manage on their own. */
.mland path{fill:#e8edf0;stroke:#9aa5ae;stroke-width:1.2;
            stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mland.neighbour path{fill:#f1f4f5;stroke:#c8d1d7}
.mdot{fill:var(--green);fill-opacity:.55;stroke:var(--panel);stroke-width:1.5;cursor:pointer}
.mdot:hover{fill-opacity:.95}
/* once a postcode is in, the ones you could reach come forward and the rest
   stay on the map rather than vanishing — where the work is not is information too */
.mdot.in{fill:var(--green);fill-opacity:.95}
.mdot.out{fill:var(--faint);fill-opacity:.3}
.mring{fill:rgba(232,161,58,.1);stroke:var(--amber);stroke-width:1.5;stroke-dasharray:5 4;
       vector-effect:non-scaling-stroke}
.mhome{fill:var(--amber);stroke:#fff;stroke-width:2}

.fstate{margin:20px 0 0;color:var(--muted);font-size:.94rem}
.fstate.bad{color:var(--red-ink);max-width:66ch}
.fhead{margin:22px 0 4px}
.fhead p{margin:0;color:var(--ink-2);font-size:.96rem;max-width:72ch}

.emplist{border-top:1px solid var(--line)}
.emp{display:flex;gap:18px;align-items:flex-start;padding:16px 0;
     border-bottom:1px solid var(--line);flex-wrap:wrap}
.emp .empBody{flex:1 1 300px;min-width:0}
.emp h3{margin:0 0 2px}
.emp .empRegion{margin:0;color:var(--muted);font-size:.86rem}
.emp .empNote{margin:7px 0 0;color:var(--ink-2);font-size:.9rem;max-width:72ch}
.emp .empDepots{margin:8px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5}
.emp .empDepots span{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;
                     color:var(--faint);margin-right:6px}
.emp .empSide{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:0 0 auto}
.emp .dist{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;
           background:var(--green-bg);border-radius:999px;padding:5px 11px;white-space:nowrap}
.emp .dist b{color:var(--green);font-weight:700}

/* ---------- article ---------- */
.doc{max-width:var(--shell);margin:0 auto;padding:34px 18px 10px}
.crumbs{font:500 .8rem var(--mono);color:var(--faint);margin:0 0 16px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--green);text-decoration:underline}
.doc header{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:26px}
.doc header h1{font-size:clamp(1.7rem,4.6vw,2.3rem)}
.doc header .lede{margin:14px 0 16px}
.docmeta{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.doc h2{margin:34px 0 10px;font-size:1.3rem}
.doc h3{margin:24px 0 8px}
.doc p,.doc li{font-size:1rem;line-height:1.65}
.doc ul,.doc ol{padding-left:22px;margin:0 0 16px}
.doc li{margin:7px 0}
.doc li::marker{color:var(--faint)}
.doc strong{font-weight:700}
.doc a{color:var(--green);text-decoration-color:rgba(11,110,79,.35);text-underline-offset:3px}
.doc a:hover{color:var(--green-dark)}
.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.spec{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;background:var(--panel);
      border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:20px 0;font-size:.94rem}
.spec dt{color:var(--muted)}
.spec dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.drillcta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--green-bg);
          border:1px solid #bfe6d1;border-left:3px solid var(--green);
          border-radius:0 10px 10px 0;padding:16px 18px;margin:24px 0}
.drillcta div{flex:1 1 230px;min-width:0}
.drillcta b{display:block;font-weight:700}
.drillcta p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.mistakes{list-style:none;padding:0;margin:0 0 16px}
.mistakes li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.mistakes li:before{content:"";flex:0 0 8px;height:8px;margin-top:9px;border-radius:50%;
                    background:var(--red);opacity:.85}
.nextprev{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
          margin:34px 0 10px}
.nextprev a{display:block;padding:15px 17px;border:1px solid var(--line);border-radius:10px;
            text-decoration:none;background:var(--panel)}
.nextprev a:hover{border-color:var(--green)}
.nextprev span{display:block;color:var(--faint);font:600 .72rem var(--mono);text-transform:uppercase;
               letter-spacing:.07em;margin-bottom:4px}
.nextprev b{font-weight:600;font-size:.96rem}

/* ---------- paywall ---------- */
.locked{position:relative}
.gate{background:var(--panel);border:1px solid var(--green);border-radius:12px;
      padding:26px 24px;margin:26px 0;text-align:center}
.gate h3{margin:0 0 8px;font-size:1.15rem}
.gate p{color:var(--muted);font-size:.94rem;max-width:48ch;margin:0 auto 16px}
.gate .btnrow{justify-content:center}
.fade{position:relative;max-height:220px;overflow:hidden;
      -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.tierswitch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel);
            border:1px dashed var(--btn-line);border-radius:10px;padding:12px 14px;margin:22px 0;
            font-size:.86rem;color:var(--muted)}
.tierswitch b{color:var(--ink);font-weight:700}
.tierswitch button{font:600 .82rem var(--body);cursor:pointer;border-radius:8px;
                   border:1.5px solid var(--btn-line);background:transparent;color:var(--ink-2);
                   padding:7px 13px}
.tierswitch button:hover{border-color:var(--faint);color:var(--ink)}
.tierswitch button.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- footer ---------- */
/* the third dark band, closing the page the way the header opens it */
.foot{border-top:0;margin-top:0;padding:48px 0 52px;
      background:var(--night);color:rgba(243,245,242,.62);font-size:.9rem}
.foot .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:28px}
.foot h4{font:600 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;
         color:#f3f5f2;margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot a{color:rgba(243,245,242,.62);text-decoration:none}
.foot a:hover{color:var(--green-lit);text-decoration:underline}
.foot .small{font-size:.82rem;line-height:1.6;max-width:72ch}
.foot .rule{border-top:1px solid rgba(255,255,255,.12);padding-top:22px}

/* The crawlable link block tools/seo.mjs writes into every page. site.js takes
   it out as it appends the real footer, so this is what a reader without
   JavaScript — and anything reading the HTML rather than rendering it — gets
   in place of the header and footer. */
.sitelinks{display:flex;flex-wrap:wrap;gap:8px 20px;padding:30px 22px 34px;
           background:var(--night);font-size:.9rem}
.sitelinks a{color:rgba(243,245,242,.62);text-decoration:none}
.sitelinks a:hover{color:var(--green-lit);text-decoration:underline}

/* .card and friends set their own display, which would otherwise win against
   the hidden attribute the library's filters use. */
[hidden]{display:none !important}