:root{
  color-scheme: light;
  --paper:#F5F7FB;
  --sheet:#FFFFFF;
  --sunk:#EDF2FA;
  --ink:#16243C;
  --ink-2:#41567A;
  /* Every hint, caption and placeholder on the site. At #71849F it measured
     3.39-3.82:1 against the backgrounds it actually sits on, which fails AA
     for body text - and this is the colour the site uses for the sentence
     under almost every heading. Darkened until those pairs clear 4.5:1. */
  --ink-3:#5C6F8C;
  --rule:#DEE6F2;
  --rule-2:#EBF0F8;
  /* The *-ink tokens are the TEXT colour for a badge sitting on its own soft
     background. The accent colours themselves are tuned for marks, borders
     and icons, where a lighter value reads better; as small bold text on the
     soft panel they measured 3.0-4.2:1 and failed AA. Two tokens rather than
     one compromise colour that is wrong for both jobs. */
  --verify-ink:#0A6B4A;
  --caution-ink:#8F5411;
  --quiet-ink:#4E6180;
  --verify:#0E8A5F;
  --verify-soft:#DFF3EA;
  --caution:#C9771B;
  --caution-soft:#FCEFDA;
  --lagoon:#1D5FD2;
  --lagoon-soft:#E1EBFC;
  --sun:#F5B31C;
  /* Text that sits ON --sun-soft. It has to flip with the theme: the three
     places that hard-coded #8A5F06 and #A5730A rendered dark brown on a
     near-black panel in dark mode, which is invisible. A saved shortlist
     button that disappears when you save something is a bug you only find
     by looking. */
  --sun-ink:#7A5405;
  --sky:#7FA9F2;           /* the second arch of the mark */
  --sun-soft:#FEF3D6;
  --quiet:#5F7291;
  --quiet-soft:#E9EEF7;
  --c-study:#1D5FD2;
  --c-advisor:#7A4BC4;
  --c-service:#0E8FA8;
  --c-funding:#D98A0B;
  --lift:0 1px 2px rgba(22,36,60,.05), 0 10px 30px -16px rgba(22,36,60,.26);
  --lift-2:0 2px 6px rgba(22,36,60,.07), 0 20px 48px -20px rgba(29,95,210,.3);
  --r:18px;
  --maxw:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0B1220; --sheet:#121C2E; --sunk:#182337;
    --ink:#E9EFF9; --ink-2:#B3C2D8; --ink-3:#8496B0;
    --rule:#26344C; --rule-2:#1C2840;
    --verify:#4FD3A0; --verify-soft:#0D3329; --sky:#5B93F0; --verify-ink:#4FD3A0; --caution-ink:#F0AC5C; --quiet-ink:#98AAC6;
    --caution:#F0AC5C; --caution-soft:#33260F;
    --lagoon:#6BA6FF; --lagoon-soft:#122544;
    --sun:#FFC845; --sun-soft:#33280C; --sun-ink:#FFD470;
    --quiet:#98AAC6; --quiet-soft:#1A2438;
    --c-study:#6BA6FF; --c-advisor:#BFA0F0; --c-service:#57C6DE; --c-funding:#F0AC5C;
    --lift:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -16px rgba(0,0,0,.72);
    --lift-2:0 2px 6px rgba(0,0,0,.5), 0 20px 48px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0B1220; --sheet:#121C2E; --sunk:#182337;
  --ink:#E9EFF9; --ink-2:#B3C2D8; --ink-3:#8496B0;
  --rule:#26344C; --rule-2:#1C2840;
  --verify:#4FD3A0; --verify-soft:#0D3329; --sky:#5B93F0; --verify-ink:#4FD3A0; --caution-ink:#F0AC5C; --quiet-ink:#98AAC6;
  --caution:#F0AC5C; --caution-soft:#33260F;
  --lagoon:#6BA6FF; --lagoon-soft:#122544;
  --sun:#FFC845; --sun-soft:#33280C; --sun-ink:#FFD470;
  --quiet:#98AAC6; --quiet-soft:#1A2438;
  --c-study:#6BA6FF; --c-advisor:#BFA0F0; --c-service:#57C6DE; --c-funding:#F0AC5C;
  --lift:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -16px rgba(0,0,0,.72);
  --lift-2:0 2px 6px rgba(0,0,0,.5), 0 20px 48px -20px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.018em}
p{margin:0}
a{color:var(--lagoon)}
a:hover{color:var(--ink)}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;font-variant-numeric:tabular-nums}
.serif{font-family:"Newsreader", Georgia, "Times New Roman", serif}
.eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.sub{font-size:13.5px;color:var(--ink-3)}
.lede{font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);max-width:62ch}
.hint{font-size:13.5px;color:var(--ink-3)}

/* header ---------------------------------------------------------------- */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap}
.hsearch{flex:1 1 200px;display:flex;align-items:center;gap:8px;min-width:0;max-width:330px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:11px;padding:8px 13px;color:var(--ink-3)}
.hsearch:focus-within{border-color:var(--lagoon);box-shadow:0 0 0 3px var(--lagoon-soft)}
.hsearch input{border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);
  width:100%;min-width:0;padding:0}
.hsearch input:focus{outline:none}
.hsearch input::placeholder{color:var(--ink-3)}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;flex:none;font-family:"Newsreader",Georgia,serif;
  font-size:21.5px;font-weight:600;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--sun);flex:none;
  box-shadow:0 0 0 4px var(--sun-soft)}
nav.main{display:flex;gap:4px;flex-wrap:wrap;font-size:14.5px;font-weight:600}
nav.main a{color:var(--ink-2);text-decoration:none;padding:7px 11px;border-radius:9px}
nav.main a:hover{background:var(--sunk);color:var(--ink)}
nav.main a[aria-current]{background:var(--lagoon-soft);color:var(--lagoon)}

/* hero ------------------------------------------------------------------ */
.hero{padding-block:clamp(34px,6vw,64px) 34px}
h1.big{font-family:"Newsreader",Georgia,serif;font-weight:500;margin-block:6px 20px;
  font-size:clamp(33px,5.6vw,60px);line-height:1.05;max-width:17ch}
h1.big em{font-style:italic;color:var(--lagoon);position:relative;white-space:nowrap}
h1.big em::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.08em;height:.26em;
  background:var(--sun);opacity:.42;border-radius:.14em;z-index:-1}
.hero .lede{margin-top:18px}

.checkbar{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--sheet);border:1px solid var(--rule);border-radius:16px;
  padding:10px 10px 10px 18px;box-shadow:var(--lift);max-width:640px}
.checkbar label{flex:1 1 230px;display:flex;flex-direction:column;gap:1px;min-width:0}
.checkbar .cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.checkbar input{border:0;background:transparent;color:var(--ink);font:inherit;font-size:16.5px;
  padding:3px 0;width:100%;min-width:0}
.checkbar input::placeholder{color:var(--ink-3)}
.checkbar input:focus{outline:none}
.checkbar:focus-within{border-color:var(--lagoon);box-shadow:var(--lift),0 0 0 4px var(--lagoon-soft)}
.btn{display:inline-block;border:0;border-radius:12px;background:var(--lagoon);color:#FFFFFF;
  font:inherit;font-weight:700;font-size:15px;padding:12px 22px;cursor:pointer;white-space:nowrap;
  text-decoration:none;line-height:1.2}
/* Anything with white text on --lagoon needs this: in dark mode --lagoon is a
   LIGHT blue (#6BA6FF), so white-on-lagoon falls to 2.46:1 - technically
   still a button, practically unreadable. The rule originally covered .btn
   alone, and three other elements with the same background were missed. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .rjoin,
:root[data-theme="dark"] .amsg.me,
:root[data-theme="dark"] .adnav a[aria-current="page"]{color:#06130F}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn,
  :root:not([data-theme="light"]) .rjoin,
  :root:not([data-theme="light"]) .amsg.me,
  :root:not([data-theme="light"]) .adnav a[aria-current="page"]{color:#06130F}}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--lagoon);color:var(--lagoon);filter:none}

/* the trust strip - live edition dates, the thing nobody else can show --- */
.registers{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.registers div{background:var(--sheet);padding:14px 16px;display:flex;flex-direction:column}
.registers .c{font-size:14.5px;font-weight:700}
.registers .r{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.registers .e{font-size:13px;color:var(--verify);font-weight:700;margin-top:auto;padding-top:9px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* record card ----------------------------------------------------------- */
.record{margin-top:32px;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--lift);overflow:hidden}
.record .tag{display:block;padding:8px 20px;background:var(--sunk);border-bottom:1px solid var(--rule);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.record .body{padding:22px 22px 24px}
.record h3{font-family:"Newsreader",Georgia,serif;font-size:27px;font-weight:600}
.record .where{margin:3px 0 16px;font-size:14px;color:var(--ink-3)}
.record .src{margin:16px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.55;max-width:74ch}

.badge{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 16px 8px 12px;
  font-size:14px;font-weight:700;background:var(--verify-soft);color:var(--verify-ink);line-height:1.3}
.badge .pip{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.badge.warn{background:var(--caution-soft);color:var(--caution-ink)}
.badge.none{background:var(--quiet-soft);color:var(--quiet-ink)}

.facts{margin:20px 0 0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:11px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.facts div{background:var(--sheet);padding:12px 14px}
.facts dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin:0 0 3px}
.facts dd{margin:0;font-size:15px;font-weight:600}

/* sections -------------------------------------------------------------- */
section{padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sec-head h2{font-family:"Newsreader",Georgia,serif;font-size:clamp(25px,3.3vw,36px);font-weight:500}
.sec-head p{margin-top:8px;color:var(--ink-2);max-width:56ch;font-size:15.5px}

/* lanes - the four entity types, colour-coded so navigation is structural */
.lanes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.lane{position:relative;display:block;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r);padding:20px 20px 18px;text-decoration:none;color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.lane::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:var(--r) 0 0 var(--r);background:var(--hue,var(--lagoon))}
.lane:hover{transform:translateY(-2px);box-shadow:var(--lift-2);border-color:var(--hue,var(--lagoon));color:var(--ink)}
.lane h3{font-size:17px;font-weight:800;margin-bottom:5px}
.lane p{font-size:14px;color:var(--ink-2);line-height:1.5}
.lane .n{display:block;margin-top:13px;font-size:12.5px;font-weight:700;color:var(--hue,var(--lagoon));
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* cards ----------------------------------------------------------------- */
.cats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(286px,1fr))}
.cat{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:18px;
  display:flex;flex-direction:column;gap:11px;transition:box-shadow .16s ease,border-color .16s ease}
.cat:hover{box-shadow:var(--lift);border-color:var(--rule)}
.cat .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cat h3{font-size:16px;font-weight:700;line-height:1.35}
.cat h3 a{text-decoration:none;color:var(--ink)}
.cat h3 a:hover{color:var(--lagoon)}
.cat > p{font-size:14px;color:var(--ink-2);line-height:1.5}
.state{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  padding:4px 8px;border-radius:6px;white-space:nowrap;flex:none}
.state.live{background:var(--verify-soft);color:var(--verify-ink)}
.state.build{background:var(--quiet-soft);color:var(--quiet-ink)}
.state.feat{background:var(--caution-soft);color:var(--caution-ink)}
.sample{margin-top:auto;border-top:1px dashed var(--rule);padding-top:12px}
.sample .lab{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;
  color:var(--ink-3);display:block;margin-bottom:5px}
.sample .val{font-size:15px;font-weight:700;line-height:1.35}
.sample .path{font-size:12px;color:var(--ink-3);margin-top:8px;word-break:break-all}

/* coverage table -------------------------------------------------------- */
.cov-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet)}
table.cov{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
table.cov th,table.cov td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule-2)}
table.cov th{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;background:var(--sunk)}
table.cov tr:last-child td{border-bottom:0}
table.cov td:first-child{font-weight:700}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700}
.pill .pip{width:8px;height:8px;border-radius:50%;flex:none}
.pill.ok{color:var(--verify)}    .pill.ok .pip{background:var(--verify)}
.pill.soon{color:var(--quiet)}   .pill.soon .pip{background:var(--quiet)}

/* claim / quote --------------------------------------------------------- */
.claim{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(24px,4vw,42px);box-shadow:var(--lift)}
.claim blockquote{margin:14px 0 0;font-family:"Newsreader",Georgia,serif;
  font-size:clamp(21px,2.8vw,30px);line-height:1.3;font-weight:400;max-width:28ch}
.claim .cite{margin-top:18px;font-size:14.5px;color:var(--ink-2);max-width:64ch}

/* doors ----------------------------------------------------------------- */
.doors{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(282px,1fr))}
.door{border:1px solid var(--rule);border-radius:var(--r);padding:22px;background:var(--sheet)}
.door h3{font-family:"Newsreader",Georgia,serif;font-size:22px;font-weight:600;margin-bottom:8px}
.door p{margin-bottom:16px;font-size:14.5px;color:var(--ink-2)}

/* breadcrumbs, filters, pager ------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--lagoon)}
.crumbs i{font-style:normal;opacity:.45}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);background:var(--sheet);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink-2)}
.chip:hover{border-color:var(--lagoon);color:var(--lagoon)}
.chip[aria-current="true"]{background:var(--lagoon-soft);border-color:var(--lagoon);color:var(--lagoon);font-weight:700}
.chip .n{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chip[aria-current="true"] .n{color:inherit;opacity:.75}
.count{font-size:14px;color:var(--ink-3);margin-bottom:20px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px}

/* profile extras -------------------------------------------------------- */
.prof-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:20px}
.note{border-left:3px solid var(--sun);background:var(--sun-soft);padding:12px 16px;
  border-radius:0 10px 10px 0;color:var(--ink-2);font-size:14.5px;margin:18px 0}
.note.plain{border-left-color:var(--rule);background:var(--sunk)}
.sticky-act{position:sticky;bottom:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:36px}
.sticky-act .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* footer ---------------------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding-block:36px 46px;font-size:14px;color:var(--ink-3);background:var(--sunk)}
footer .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));margin-bottom:26px}
footer h4{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--lagoon)}
footer .fine{border-top:1px solid var(--rule);padding-top:18px;max-width:80ch;line-height:1.6;font-size:13px}

a:focus-visible,button:focus-visible,input:focus-visible,.lane:focus-visible{
  outline:2.5px solid var(--lagoon);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:720px){
  .masthead .wrap{gap:9px;padding-block:8px;min-height:0}
  .brand{font-size:16.5px;gap:6px;letter-spacing:-.02em}
  .brand .dot{width:7px;height:7px;box-shadow:0 0 0 3px var(--verify-soft)}
  .hsearch{order:2;flex:1 1 120px;max-width:none;padding:7px 11px;border-radius:10px}
  .hsearch input{font-size:14px}
  nav.main{order:3;gap:2px;font-size:13.5px;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  h1.big{font-size:clamp(30px,8vw,40px)}
  nav.main a{padding:6px 9px;white-space:nowrap}
  .masthead .wrap{padding-block:8px}
}

/* The register ledger. Deliberately plain and a little clinical - it is a
   record, not a badge, and it should read like one. */
.ledger{border:1px solid var(--rule);border-radius:16px;padding:20px;background:var(--sheet);
  max-width:760px}
.ledhead{margin:0 0 16px;font-size:18px;font-weight:650;line-height:1.45}
.ledgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:0 0 4px}
.ledgrid>div{padding:12px 14px;border-radius:12px;background:var(--sunk)}
.ledgrid dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin:0 0 4px}
.ledgrid dd{margin:0;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.ledchange{margin:18px 0 6px;font-size:14px}
.ledlist{margin:0;padding-left:18px;font-size:14.5px;line-height:1.7}
.ledlist strong{font-variant-numeric:tabular-nums}

/* The drawn strip across the top of a result card. Same six patterns, same
   hue, so a card and the page it opens are recognisably the same place. */
.cat{position:relative}
.cat>.cardart{position:absolute;inset:0 0 auto 0;height:74px;border-radius:inherit;
  border-bottom-left-radius:0;border-bottom-right-radius:0;pointer-events:none;
  background-color:color-mix(in srgb,var(--hue) 9%,transparent);opacity:.9;
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.cat.art0>.cardart{background-image:radial-gradient(circle at 84% 8%, color-mix(in srgb,var(--hue) 40%,transparent) 0 30%, transparent 31%)}
.cat.art1>.cardart{background-image:repeating-linear-gradient(115deg, color-mix(in srgb,var(--hue) 22%,transparent) 0 2px, transparent 2px 14px)}
.cat.art2>.cardart{background-image:radial-gradient(circle at 70% 120%, color-mix(in srgb,var(--hue) 36%,transparent) 0 38%, transparent 39%)}
.cat.art3>.cardart{background-image:repeating-radial-gradient(circle at 100% 40%, transparent 0 22px, color-mix(in srgb,var(--hue) 20%,transparent) 22px 24px, transparent 24px 46px)}
.cat.art4>.cardart{background-image:linear-gradient(135deg, color-mix(in srgb,var(--hue) 30%,transparent) 0 38%, transparent 38%)}
.cat.art5>.cardart{background-image:repeating-linear-gradient(0deg, color-mix(in srgb,var(--hue) 16%,transparent) 0 1px, transparent 1px 14px)}
.cat>.headrow,.cat>p,.cat>.sample{position:relative;z-index:1}

/* The hero row is wide; give it the room rather than squeezing it into the
   narrow text column beside the statistics panel. */
.ehead.hero{grid-template-columns:minmax(0,2.1fr) minmax(0,.9fr);align-items:center}
@media (max-width:980px){ .ehead.hero{grid-template-columns:minmax(0,1fr)} }

/* DRAWN COVER ART
   Six patterns, built from gradients so they cost nothing per page - this runs
   on thirty-one thousand institution pages. Each one is picked from a hash of
   the institution's name, so a page looks like itself every time you return,
   and tinted with the hue its kind already uses. It is obviously artwork; it
   could never be mistaken for a photograph of the place, which is the point. */
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.5;background-color:transparent}
@media (prefers-reduced-motion:no-preference){.band::before{transition:opacity .3s}}

.band.art0::before{background-image:
  radial-gradient(circle at 88% 18%, color-mix(in srgb,var(--hue) 34%,transparent) 0 22%, transparent 23%),
  radial-gradient(circle at 96% 62%, color-mix(in srgb,var(--hue) 22%,transparent) 0 14%, transparent 15%)}
.band.art1::before{background-image:
  repeating-linear-gradient(115deg, color-mix(in srgb,var(--hue) 16%,transparent) 0 2px, transparent 2px 15px),
  radial-gradient(circle at 92% 30%, color-mix(in srgb,var(--hue) 26%,transparent) 0 26%, transparent 27%)}
.band.art2::before{background-image:
  radial-gradient(circle at 80% 100%, color-mix(in srgb,var(--hue) 30%,transparent) 0 30%, transparent 31%),
  radial-gradient(circle at 99% 10%, color-mix(in srgb,var(--hue) 20%,transparent) 0 18%, transparent 19%)}
.band.art3::before{background-image:
  repeating-radial-gradient(circle at 100% 50%, transparent 0 34px,
    color-mix(in srgb,var(--hue) 15%,transparent) 34px 36px, transparent 36px 70px)}
.band.art4::before{background-image:
  linear-gradient(135deg, color-mix(in srgb,var(--hue) 24%,transparent) 0 42%, transparent 42%),
  radial-gradient(circle at 90% 78%, color-mix(in srgb,var(--hue) 24%,transparent) 0 20%, transparent 21%)}
.band.art5::before{background-image:
  repeating-linear-gradient(0deg, color-mix(in srgb,var(--hue) 13%,transparent) 0 1px, transparent 1px 18px),
  radial-gradient(circle at 86% 24%, color-mix(in srgb,var(--hue) 28%,transparent) 0 24%, transparent 25%)}

/* A page with the institution's own photograph on it does not need drawn art. */
.band.rich::before{opacity:0}
.band>*{position:relative;z-index:1}

/* THE HOME PAGE ILLUSTRATION */
/* The headline and the drawing sit side by side; the drawing is the thing that
   says "study" before a word is read, so on a phone it goes FIRST and the
   headline follows it. */
.herorow{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.herorow>.herotext{flex:1 1 340px;min-width:0}
.heroart{width:min(360px,34vw);height:auto;flex:0 0 auto}
@media (max-width:980px){
  .herorow{gap:16px}
  .heroart{width:min(300px,62vw);order:-1;margin-inline:auto}
  .herorow>.herotext{flex:1 1 100%}
}

/* The one line on an institution page that is addressed to the institution
   rather than the student. Quiet on purpose. */
.ownerline{font-size:14px;line-height:1.6;color:var(--ink-3);
  padding:14px 16px;border-radius:12px;border:1px dashed var(--rule);max-width:70ch}
.ownerline a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.ownerline a:hover{color:var(--lagoon)}

/* Admin: handing a listing to a paying client. Folded away until needed, so
   the table stays a table. */
.grantcell>summary{cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap;
  padding:6px 10px;border:1px solid var(--rule);border-radius:8px;list-style:none}
.grantcell>summary::-webkit-details-marker{display:none}
.grantcell[open]>summary{border-color:var(--lagoon);color:var(--lagoon)}
.grantform{display:grid;gap:6px;min-width:260px;padding:12px 0 4px}
.grantform .cap{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3)}
.grantform .hint{margin:2px 0 0;font-size:12px;line-height:1.5}
.codeout{display:inline-block;padding:4px 10px;border-radius:8px;font-weight:700;
  letter-spacing:.06em;background:var(--ink);color:var(--paper);font-family:ui-monospace,monospace}

.qnote{margin-top:12px;font-size:15px;color:var(--ink-2)}
.qnote a{margin-left:6px}

.adwarn{margin-top:20px;padding:14px 16px;border-radius:12px;line-height:1.55;
  border:1px solid color-mix(in srgb,var(--caution-ink) 40%,transparent);
  background:color-mix(in srgb,var(--caution-ink) 10%,transparent)}

/* The advisor's invitation under the finder. Deliberately quieter than the
   finder itself: most people know what they want and should not be pushed
   into a chat box, but the ones who do not should see the door. */
.askhero{display:flex;gap:22px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-top:18px;padding:18px 20px;border-radius:16px;
  border:1px solid var(--rule);
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--lagoon) 9%,transparent),
    color-mix(in srgb,var(--c-advisor) 9%,transparent))}
.askhero-l{min-width:240px;flex:1 1 300px}
.aibadge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:var(--paper)}
.askline{margin:10px 0 4px;font-size:18px;font-weight:650}
.asksub{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:46ch}
.askchips{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;flex:1 1 320px}
.askchips button{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;
  cursor:pointer;border:1px solid var(--rule);background:var(--sheet);
  color:var(--ink-2);text-align:left}
.askchips button:hover{border-color:var(--lagoon);color:var(--lagoon)}
.askchips button:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
.askchips .askmore{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.askchips .askmore:hover{color:#fff;opacity:.92}
@media (max-width:640px){.askhero{padding:16px}.askchips button{flex:1 1 100%}}

/* Admin: the filter tabs above the listings table, and the row signals. */
.adfilt{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.adfx{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--rule);text-decoration:none;font-size:14px;font-weight:600;
  color:var(--ink-2);background:var(--sheet)}
.adfx:hover{border-color:var(--lagoon)}
.adfx.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.adfx .n{font-weight:700;font-size:13px;opacity:.85}
.adfx.on .n{opacity:1}
.pill{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.pill.ok{background:color-mix(in srgb,var(--verify-ink) 14%,transparent);
  color:var(--verify-ink)}
td .warn{color:var(--caution-ink);font-weight:600}
@media (max-width:760px){
  .adfilt{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .adfx{white-space:nowrap}
}

.rgap{display:block;font-weight:400;color:var(--ink-3);margin-top:3px}

/* Side-by-side comparison. The table scrolls sideways on a phone rather than
   reflowing, because a comparison that stacks into four separate lists is no
   longer a comparison - the whole value is reading across one row. The first
   column stays put so you always know which row you are on. */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:22px;
  border:1px solid var(--rule);border-radius:16px;background:var(--sheet)}
table.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
table.cmp th,table.cmp td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
table.cmp thead th{vertical-align:bottom;font-weight:650;line-height:1.3}
table.cmp thead th a{text-decoration:none}
table.cmp thead th a:hover{text-decoration:underline}
table.cmp .ctag{display:block;font-weight:400;font-size:13px;color:var(--ink-3);margin-top:3px}
table.cmp tbody th[scope=row]{font-weight:600;color:var(--ink-2);white-space:nowrap;
  position:sticky;left:0;background:var(--sheet);z-index:1}
table.cmp .rnote{display:block;font-weight:400;font-size:12px;color:var(--ink-3)}
table.cmp tr.split th{background:var(--sunk);font-weight:650;white-space:normal;
  position:static;padding-top:16px}
table.cmp .nil{color:var(--quiet-ink)}
table.cmp .yes{color:var(--verify-ink);font-weight:650}
.lvchip{display:inline-block;padding:3px 9px;margin:0 5px 5px 0;border-radius:999px;
  font-size:12px;font-weight:650;background:color-mix(in srgb,var(--lagoon) 12%,transparent);
  color:var(--lagoon)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmpbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}

/* The live count above the finder results. */
.rcount{font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 12px}

/* How finished a listing is. Colour carries meaning here, so the percentage is
   always written out too - never colour alone. */
.cmeter{border:1px solid var(--rule);border-radius:16px;padding:18px 18px 16px;
  margin:0 0 26px;background:var(--sheet)}
.cmeter .ctop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cmeter .cpct{font-size:26px;font-weight:700;letter-spacing:-.02em;display:block;margin-top:2px}
.cbar{height:10px;border-radius:999px;background:var(--rule);overflow:hidden;margin:14px 0 12px}
.cbar>span{display:block;height:100%;border-radius:999px;transition:width .4s ease}
.cmeter.thin .cbar>span{background:var(--caution-ink)}
.cmeter.part .cbar>span{background:var(--sun-ink,#9A6B00)}
.cmeter.good .cbar>span{background:var(--verify-ink)}
.cmeter.good .cpct{color:var(--verify-ink)}
.chint{font-size:14px;color:var(--ink-3);margin:0 0 6px}
.cmiss{margin:0;padding-left:18px;font-size:14px;line-height:1.65}
.cmiss strong{font-weight:650}
@media (max-width:520px){.cmeter .ctop{align-items:flex-start}.cmeter .ctop .btn{width:100%}}

/* The course list an institution fills in about itself. Twenty collapsed rows
   rather than a hundred loose checkboxes. */
.subjgrid{display:grid;gap:8px}
.subjrow{border:1px solid var(--rule);border-radius:12px;background:var(--sheet)}
.subjrow>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;cursor:pointer;list-style:none;border-radius:12px}
.subjrow>summary::-webkit-details-marker{display:none}
.subjrow>summary:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
.subjrow .sname{font-weight:600}
.subjrow .scount{font-size:13px;color:var(--ink-3);white-space:nowrap}
.subjrow[open]{border-color:var(--lagoon)}
.subjrow[open] .scount{color:var(--lagoon)}
.slevels{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.slevels .lvl{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid var(--rule);border-radius:999px;font-size:14px;cursor:pointer}
.slevels .lvl:has(input:checked){border-color:var(--lagoon);
  background:color-mix(in srgb,var(--lagoon) 10%,transparent);font-weight:600}
.slevels .lvl:focus-within{outline:2px solid var(--lagoon);outline-offset:2px}
@media (max-width:520px){.slevels .lvl{flex:1 1 auto;justify-content:center}}

/* Skip link: off screen until focused, then a solid target at the top left.
   It must sit above the rail, which is why the z-index is high. */
.skip{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none}
.skip:focus{left:0}
main.content:focus{outline:none}

/* ======================================================================
   Visual layer: the marks, the tiles and the hero field.
   The page should look designed before a word of it is read.
   ====================================================================== */

/* The hero sits on a soft field: two wide radial washes in the house hues and
   a hairline grid, all drawn in CSS so nothing is downloaded. It reads as
   depth rather than as a picture, and it survives both themes. */
.hero-field{position:relative;overflow:hidden;isolation:isolate}
.hero-field::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-2;
  background:
    radial-gradient(54rem 32rem at 10% 6%, color-mix(in srgb,var(--lagoon) 17%, transparent), transparent 62%),
    radial-gradient(46rem 26rem at 88% 2%, color-mix(in srgb,var(--sun) 22%, transparent), transparent 62%),
    radial-gradient(40rem 26rem at 66% 62%, color-mix(in srgb,var(--c-service) 12%, transparent), transparent 64%);
  filter:saturate(1.15)}
.hero-field::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px, transparent 1px),linear-gradient(90deg,var(--rule) 1px, transparent 1px);
  background-size:52px 52px;opacity:.28;
  mask-image:radial-gradient(70% 62% at 50% 22%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 22%, #000 25%, transparent 78%)}

/* Marks -------------------------------------------------------------- */
.mark{display:block}
.markbox{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;
  border-radius:15px;background:color-mix(in srgb,var(--hue,var(--lagoon)) 13%, var(--sheet));
  color:var(--hue,var(--lagoon));border:1px solid color-mix(in srgb,var(--hue,var(--lagoon)) 24%, transparent)}
.markbox.sm{width:34px;height:34px;border-radius:10px}
.markbox.lg{width:56px;height:56px;border-radius:16px}

/* Kind tiles: the colourful grid that makes /study/ a picture, not a list. */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.tile{position:relative;display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:var(--ink);
  background:var(--sheet);border:1px solid var(--rule);border-radius:15px;padding:15px 15px 14px;
  overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--hue,var(--lagoon));
  opacity:.95;transform:scaleX(.22);transform-origin:left;transition:transform .22s ease;border-radius:0 4px 0 0}
.tile:hover{transform:translateY(-3px);box-shadow:var(--lift-2);
  border-color:color-mix(in srgb,var(--hue,var(--lagoon)) 45%, var(--rule));color:var(--ink)}
.tile:hover::after{transform:scaleX(1)}
.tile .tt{min-width:0}
.tile h3{font-size:14.5px;font-weight:800;line-height:1.3;letter-spacing:-.005em}
.tile .n{display:block;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--hue,var(--lagoon));
  font-variant-numeric:tabular-nums}
.tile .d{margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tiles{align-items:start}
.tile{min-height:0}
.tiles.even .tile{min-height:136px}

/* A tinted band so each hub page is unmistakably its own category --------- */
.band{background:
    linear-gradient(180deg, color-mix(in srgb,var(--hue,var(--lagoon)) 10%, var(--paper)) 0%, var(--paper) 88%);
  border-bottom:1px solid var(--rule)}
.band.hero-field::before{opacity:.5}
.band .markbox{margin-bottom:14px}

/* Alternating surfaces give the page a rhythm instead of one long sheet. */
section.tint{background:var(--sunk)}

/* Cards gain the mark and a hue edge ------------------------------------- */
.cat{position:relative;overflow:hidden}
.cat.hued::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--hue,var(--lagoon));opacity:.85}
.cat .headrow{display:flex;gap:12px;align-items:flex-start}
.cat .headrow .markbox{margin-top:1px}

/* Stat row ---------------------------------------------------------------- */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:26px}
.stat{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:16px 17px}
.stat .v{font-family:"Newsreader",Georgia,serif;font-size:clamp(26px,3.4vw,34px);font-weight:600;
  line-height:1.05;letter-spacing:-.02em;color:var(--hue,var(--ink))}
.stat .k{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.4}

@media (max-width:520px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .tile{padding:13px;gap:11px}
  .markbox{width:38px;height:38px;border-radius:11px}
  .hero-field::after{background-size:40px 40px}
}


/* ======================================================================
   The finder - the front door. Two questions, one button.
   ====================================================================== */
.finder{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:30px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:18px;padding:11px;
  box-shadow:var(--lift);max-width:860px;position:relative}
.finder::before{content:"";position:absolute;inset:-1px;border-radius:19px;z-index:-1;
  background:linear-gradient(120deg,var(--c-study),var(--c-service),var(--c-funding),var(--c-advisor));
  opacity:.34;filter:blur(9px)}
.finder .fx{flex:1 1 230px;display:flex;flex-direction:column;gap:3px;min-width:0;
  background:var(--sunk);border-radius:12px;padding:9px 14px}
.finder .cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.finder select{border:0;background-color:var(--sunk);font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);
  width:100%;min-width:0;padding:1px 0;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 52%,calc(100% - 6px) 52%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:22px}
/* The option list is drawn by the operating system and inherits nothing, so
   spell out both colours. Without this it is white on white in dark mode. */
select option, select optgroup{background-color:var(--sheet);color:var(--ink);
  font-weight:500;padding:6px 8px}
select:focus option:checked{background-color:var(--lagoon-soft);color:var(--lagoon)}
.finder select:focus{outline:none}
.finder .fx:focus-within{box-shadow:inset 0 0 0 2px var(--lagoon)}
.finder .btn{align-self:stretch;padding-inline:26px}

.namefind{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px;max-width:860px}
.namefind label{flex:0 0 auto}
.namefind input{flex:1 1 230px;min-width:0;background:var(--sheet);border:1px solid var(--rule);
  border-radius:11px;padding:10px 14px;font:inherit;font-size:15px;color:var(--ink)}
.namefind input:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--lagoon-soft)}

/* Destinations ---------------------------------------------------------- */
.dests{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.dest{position:relative;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);
  background:var(--sheet);border:1px solid var(--rule);border-radius:15px;padding:17px 17px 15px;
  overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.dest::before{content:"";position:absolute;inset:auto -30% -60% auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--lagoon) 24%,transparent),transparent 68%);
  opacity:.5;transition:transform .35s ease,opacity .25s ease}
.dest:nth-child(3n+2)::before{background:radial-gradient(circle,color-mix(in srgb,var(--c-service) 26%,transparent),transparent 68%)}
.dest:nth-child(3n+3)::before{background:radial-gradient(circle,color-mix(in srgb,var(--sun) 34%,transparent),transparent 68%)}
.dest:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--lagoon);color:var(--ink)}
.dest:hover::before{transform:scale(1.35);opacity:.8}
.dest .dn{font-size:15.5px;font-weight:800;line-height:1.25;position:relative}
.dest .dc{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;position:relative}

/* Trust panel ----------------------------------------------------------- */
.trust{display:grid;gap:26px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;
  background:var(--sheet);border:1px solid var(--rule);border-radius:18px;padding:clamp(22px,3.5vw,36px);
  box-shadow:var(--lift)}
.trust-t h2{font-size:clamp(23px,3vw,31px);font-weight:500;margin:6px 0 12px}
.trust-t p{color:var(--ink-2);font-size:15.5px;max-width:58ch}
.trust-r{display:grid;gap:9px}
.reg{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:var(--sunk);border-radius:11px;padding:12px 15px}
.rc{font-weight:700;font-size:14.5px}
.re{font-size:12.5px;color:var(--verify);font-weight:700}
@media (max-width:760px){.trust{grid-template-columns:1fr}}

/* Compact tiles for the subject grid ------------------------------------ */
.tiles.compact{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.tiles.compact .tile{min-height:0;align-items:center;padding:12px 13px}
.tiles.compact .markbox{width:36px;height:36px;border-radius:11px}
.tiles.compact h3{font-size:13.8px}

/* Ambient motion: the hero field drifts. It never moves content, never
   hides anything, and stops entirely for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .hero-field::before{animation:drift 34s ease-in-out infinite alternate}
  @keyframes drift{
    0%  {transform:translate3d(0,0,0) scale(1)}
    50% {transform:translate3d(-2.5%,1.5%,0) scale(1.06)}
    100%{transform:translate3d(2%,-1%,0) scale(1.03)}
  }
  .markbox{transition:transform .18s ease}
  .tile:hover .markbox,.lane:hover .markbox{transform:scale(1.08) rotate(-3deg)}
}

@media (max-width:620px){
  .finder{padding:9px;gap:8px;border-radius:15px}
  .finder .fx{flex-basis:100%}
  .finder .btn{width:100%}
  .namefind input{flex-basis:100%}
  .namefind .btn{width:100%}
  .dests{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
}



/* The verified mark - small, calm, and the only place the register appears
   on a student-facing page. */
.vrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.vmark{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;line-height:1.3}
.vmark.ok{background:var(--verify-soft);color:var(--verify-ink)}
.vmark.warn{background:var(--caution-soft);color:var(--caution-ink)}
.vmark.none{background:var(--quiet-soft);color:var(--quiet-ink)}
.vmark svg{flex:none}

.phead{display:flex;gap:16px;align-items:flex-start;margin-top:6px}
.pacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* The register detail is available but folded away: a student who wants the
   evidence can open it; everyone else gets the tick and moves on. */
.rdetail{background:var(--sheet);border:1px solid var(--rule);border-radius:13px;padding:14px 18px}
.rdetail summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none}
.rdetail summary::-webkit-details-marker{display:none}
.rdetail summary::before{content:"\203A";display:inline-block;margin-right:9px;color:var(--ink-3);
  transition:transform .18s ease;font-size:17px;line-height:1}
.rdetail[open] summary::before{transform:rotate(90deg)}
@media (max-width:520px){.phead{gap:12px}.phead .markbox.lg{width:44px;height:44px;border-radius:13px}}



/* The hero composition ---------------------------------------------------- */
.herowrap{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.herotext{min-width:0}
.orbit{display:none}
@media (min-width:1000px){
  .herowrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:center}
  .orbit{display:block;justify-self:center;width:min(348px,100%)}
  .orbit svg{width:100%;height:auto;display:block;overflow:visible}
}
@media (prefers-reduced-motion: no-preference){
  .orbit .spin{animation:orb 64s linear infinite}
  .orbit .spin.slow{animation-duration:104s}
  .orbit .spin.rev{animation-duration:84s;animation-direction:reverse}
  @keyframes orb{to{transform:rotate(360deg)}}
}



/* The search forms span the full hero width rather than being squeezed into
   the text column: the finder is the front door. */
.findwrap{padding-bottom:clamp(26px,4vw,40px);margin-top:-6px}
.findwrap .finder{margin-top:0;max-width:none}
.findwrap .namefind{max-width:none}
@media (min-width:1000px){ .findwrap .finder .fx{flex:1 1 300px} }



/* A friendly first step for a reader who does not know where to begin. */
.starters{margin-top:16px;font-size:14.5px;color:var(--ink-2);max-width:72ch}
.starters a{color:var(--lagoon);text-decoration:none;font-weight:600;
  border-bottom:2px solid var(--sun);padding-bottom:1px}
.starters a:hover{color:var(--ink);border-bottom-color:var(--lagoon)}



/* Structure: sections read as defined blocks rather than one long scroll.
   Each carries a tag chip, and tinted ones sit inside a rounded panel. */
.sec-head .eyebrow{display:inline-block;background:var(--lagoon-soft);color:var(--lagoon);
  padding:5px 12px;border-radius:999px;letter-spacing:.1em;margin-bottom:12px}
section.tint .sec-head .eyebrow{background:var(--sun-soft);color:var(--sun-ink)}
:root[data-theme="dark"] section.tint .sec-head .eyebrow,
:root:not([data-theme="light"]) section.tint .sec-head .eyebrow{color:var(--sun)}

section.tint{background:var(--sunk);border-top:1px solid var(--rule)}
section.panel > .wrap > .inner{background:var(--sheet);border:1px solid var(--rule);
  border-radius:24px;padding:clamp(22px,3.6vw,40px);box-shadow:var(--lift)}

.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-top:20px}
.stat{position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:16px;
  padding:16px 17px;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--hue,var(--lagoon))}
.stat .v{font-family:"Newsreader",Georgia,serif;font-size:clamp(25px,3.2vw,33px);font-weight:600;
  line-height:1.05;letter-spacing:-.02em;color:var(--hue,var(--ink))}
.stat .k{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.4}

/* The destination cards get a visible number badge so the grid reads as data,
   not decoration. */
.dest .dc{font-weight:600}



/* ======================================================================
   SHAPE. The page was a stack of rectangles; these give it edges, curves
   and weight so it reads as a designed thing rather than a document.
   ====================================================================== */

/* Curved separators between bands. Drawn with a radius on the section itself
   so there is no extra markup and nothing to go wrong at any width. */
section.tint{position:relative;border-radius:40px 40px 0 0;margin-top:-1px;border-top:0}
section.tint + section{border-radius:40px 40px 0 0;background:var(--paper);margin-top:-40px;
  position:relative;z-index:1;border-top:0;padding-top:clamp(48px,6vw,72px)}
@media (max-width:700px){
  section.tint, section.tint + section{border-radius:28px 28px 0 0}
  section.tint + section{margin-top:-28px}
}

/* Soft shapes behind the bands: big circles, clipped, in the house hues. */
section{position:relative;overflow:hidden}
section.tint::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-190px;top:-230px;pointer-events:none;
  background:radial-gradient(circle at 34% 34%, color-mix(in srgb,var(--sun) 30%,transparent), transparent 66%)}
section.tint::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  left:-180px;bottom:-220px;pointer-events:none;
  background:radial-gradient(circle at 60% 40%, color-mix(in srgb,var(--lagoon) 24%,transparent), transparent 66%)}
section > .wrap{position:relative;z-index:2}

/* Cards get real weight: thicker edge, bigger radius, a lift on hover. */
.cat,.tile,.dest,.stat,.door,.lane,.record,.rdetail,.cov-wrap,.trust{border-width:1.5px}
.cat{border-radius:18px;padding:20px}
.tile{border-radius:18px}
.dest{border-radius:18px}
.lane{border-radius:20px;padding:22px}
.door{border-radius:22px;padding:26px}

/* The section heading gets a rule that starts in the accent and fades out -
   a shape, not a border. */
.sec-head{padding-bottom:18px;border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--lagoon) 0,var(--rule) 22%,transparent 70%) 1}
section.tint .sec-head{border-image:linear-gradient(90deg,var(--sun) 0,var(--rule) 22%,transparent 70%) 1}

/* A full-bleed call to action with a shape of its own, to close the page. */
.cta{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,5vw,52px);
  background:linear-gradient(135deg, var(--lagoon) 0%, #1747A8 58%, #123A8C 100%);color:#fff}
.cta::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  right:-140px;top:-190px;background:radial-gradient(circle,rgba(245,179,28,.5),transparent 62%)}
.cta::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  left:-130px;bottom:-170px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 66%)}
.cta > *{position:relative;z-index:2}
.cta h2{font-family:"Newsreader",Georgia,serif;font-size:clamp(26px,3.6vw,40px);font-weight:500;
  color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.88);font-size:16px;max-width:56ch;margin-top:14px}
.cta .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.cta .btn{background:var(--sun);color:#3A2A02}
.cta .btn:hover{filter:brightness(1.06)}
.cta .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.cta .btn.ghost:hover{border-color:#fff;color:#fff}

/* Markbox becomes a rounded squircle with a soft ring - more shape, less
   flat square. */
.markbox{border-radius:16px;box-shadow:0 0 0 4px color-mix(in srgb,var(--hue,var(--lagoon)) 7%, transparent)}
.markbox.lg{border-radius:20px}



/* ======================================================================
   Louder, younger, still legible at 40. Bigger type, colour-filled cards,
   a bento grid, and an app-style bar on phones.
   ====================================================================== */

/* Type gets weight. Headings go heavier and tighter; the serif keeps the
   warmth so it never reads as a startup landing page. */
h1.big{font-weight:600;letter-spacing:-.03em;line-height:1.02;font-size:clamp(36px,6.2vw,68px)}
.sec-head h2{font-weight:600;letter-spacing:-.025em;font-size:clamp(27px,3.8vw,42px)}
.lede{font-size:clamp(17px,1.8vw,20px);line-height:1.5}

/* Colour-filled destination cards. A grid of white rectangles is the least
   memorable way to show twelve countries. */
.dest.vivid{background:var(--g);border:0;color:#fff;min-height:112px;justify-content:flex-end;
  padding:18px;box-shadow:0 10px 26px -14px rgba(22,36,60,.5)}
.dest.vivid::before{background:radial-gradient(circle,rgba(255,255,255,.28),transparent 66%);opacity:.75}
.dest.vivid .dn{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#fff}
.dest.vivid .dc{font-size:13px;color:rgba(255,255,255,.88);font-weight:600}
.dest.vivid:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 20px 40px -18px rgba(22,36,60,.6);color:#fff}
.dest.vivid:hover::before{transform:scale(1.5);opacity:1}

/* A bento grid: mixed sizes so the eye has somewhere to go. */
.bento{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.bento > *{grid-column:span 1}
.bento > .w2{grid-column:span 2}
.bento > .h2{grid-row:span 2}
@media (max-width:980px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .bento > .w2{grid-column:span 2} }
@media (max-width:560px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .bento > .w2{grid-column:span 2} .bento > .h2{grid-row:span 1} }

/* A filled feature card for the bento: solid colour, white text, big number. */
.feat{position:relative;overflow:hidden;border-radius:20px;padding:22px;color:#fff;
  background:var(--g,linear-gradient(145deg,#1D5FD2,#2E86E0));text-decoration:none;display:flex;
  flex-direction:column;justify-content:space-between;min-height:158px;
  box-shadow:0 12px 30px -16px rgba(22,36,60,.55);transition:transform .18s ease,box-shadow .18s ease}
.feat::after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  right:-80px;bottom:-110px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 64%)}
.feat:hover{transform:translateY(-4px);box-shadow:0 22px 46px -20px rgba(22,36,60,.65);color:#fff}
.feat > *{position:relative;z-index:2}
.feat .ft{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;opacity:.82}
.feat .fv{display:block;font-family:"Newsreader",Georgia,serif;font-size:clamp(30px,4.4vw,46px);font-weight:600;
  line-height:1;letter-spacing:-.025em;margin-top:6px}
.feat .fd{display:block;font-size:14px;font-weight:600;opacity:.92;margin-top:8px;line-height:1.4}
.feat.sun{--g:linear-gradient(145deg,#E19A05,#F5B31C);color:#3A2A02}
.feat.sun .ft,.feat.sun .fd{opacity:.8}
.feat.sun::after{background:radial-gradient(circle,rgba(255,255,255,.4),transparent 64%)}
.feat.plain{background:var(--sheet);color:var(--ink);border:1.5px solid var(--rule);box-shadow:var(--lift)}
.feat.plain::after{display:none}
.feat.plain .ft{color:var(--ink-3);opacity:1}
.feat.plain .fv{color:var(--lagoon)}
.feat.plain .fd{color:var(--ink-2);opacity:1}

/* Pills get bigger and friendlier to the thumb. */
.chip{padding:10px 17px;font-size:14px;border-radius:999px;border-width:1.5px}
.chip .n{font-size:12.5px;font-weight:700}

/* The app bar. Phones only. */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:color-mix(in srgb,var(--sheet) 94%,transparent);backdrop-filter:blur(14px);
    border-top:1.5px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
    text-decoration:none;color:var(--ink-3);font-size:11px;font-weight:700}
  .tabbar a[aria-current]{color:var(--lagoon)}
  .tabbar a[aria-current] svg{transform:translateY(-1px)}
  body{padding-bottom:64px}
  .sticky-act{bottom:64px}
}

/* On a phone the masthead loses the nav row entirely - the bar below does it. */
@media (max-width:760px){
  nav.main{display:none}
  .masthead .wrap{flex-wrap:nowrap}
  .hsearch{order:2;flex:1 1 auto}
}



/* ======================================================================
   APP SHELL. A rail, a command bar, a scrolling content pane. The page
   stops being a document and starts being a piece of software.
   ====================================================================== */
body.app{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh;padding-bottom:0}
body.no-scroll{overflow:hidden}

.rail{display:none}
@media (min-width:1080px){
  .rail{display:flex;flex-direction:column;gap:6px;width:244px;padding:18px 14px;
    background:var(--sheet);border-right:1.5px solid var(--rule);position:sticky;top:0;height:100vh}
  .rlogo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
    font-family:"Newsreader",Georgia,serif;font-size:19px;font-weight:600;line-height:1.05;
    letter-spacing:-.02em;padding:6px 10px 16px}
  .rlogo .smk{flex:none;margin-left:-3px}
  .rail nav{display:flex;flex-direction:column;gap:3px}
  .rail nav a,.rjoin{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
    text-decoration:none;color:var(--ink-2);font-size:14.5px;font-weight:650}
  .rail nav a:hover,.rjoin:hover{background:var(--sunk);color:var(--ink)}
  .rail nav a[aria-current]{background:var(--lagoon-soft);color:var(--lagoon)}
  .rail .ri{display:flex;flex:none}
  .rfoot{margin-top:auto;padding-top:14px;border-top:1.5px solid var(--rule)}
  .rjoin{background:var(--lagoon);color:#fff}
  .rjoin:hover{background:#1747A8;color:#fff}
}
@media (max-width:1079px){ body.app{grid-template-columns:minmax(0,1fr)} }

.pane{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;
  gap:14px;padding:11px 20px;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1.5px solid var(--rule)}
.cmdk{flex:1 1 auto;max-width:440px;display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--sheet);border:1.5px solid var(--rule);border-radius:13px;padding:10px 12px;
  font:inherit;font-size:14.5px;color:var(--ink-3);text-align:left}
.cmdk:hover{border-color:var(--lagoon);color:var(--ink-2)}
.cmdk .ct{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk kbd{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--sunk);
  border:1px solid var(--rule);border-radius:6px;padding:2px 6px;color:var(--ink-3)}
.tcrumb{flex:1;min-width:0;font-size:13px;color:var(--ink-3);overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.tcrumb .crumbs{margin:0}
.tlogin{flex:none;font-size:14px;font-weight:700;text-decoration:none;color:var(--ink-2);
  padding:9px 15px;border-radius:11px;border:1.5px solid var(--rule)}
.tlogin:hover{border-color:var(--lagoon);color:var(--lagoon)}
@media (max-width:760px){ .tcrumb,.cmdk kbd{display:none} .topbar{padding:9px 16px;gap:10px}
  .tlogin{padding:8px 12px;font-size:13.5px} }
/* A flex item will not shrink below its content unless it is told it may, so
   without this the search box holds the bar open and pushes Ask and Sign in
   off the right edge of a phone. */
.cmdk{min-width:0}
.cmdk .ct{min-width:0}
@media (max-width:420px){ .cmdk .ct{font-size:14px} .tlogin{padding:8px 10px;font-size:13px} }

.content{flex:1;min-width:0}
.content > section:first-child{border-top:0}
.content .wrap{max-width:1180px}

/* The palette ---------------------------------------------------------- */
.palette[hidden]{display:none!important}
.palette{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--ink) 42%,transparent);
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 16px 16px}
.pbox{width:min(620px,100%);background:var(--sheet);border:1.5px solid var(--rule);border-radius:20px;
  box-shadow:0 30px 80px -30px rgba(22,36,60,.6);overflow:hidden;display:flex;flex-direction:column;
  max-height:70vh}
.pbox input{border:0;border-bottom:1.5px solid var(--rule);background:transparent;font:inherit;
  font-size:17px;padding:18px 20px;color:var(--ink);width:100%}
.pbox input:focus{outline:none}
.presults{overflow-y:auto;padding:8px}
.pgroup{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3);
  padding:12px 12px 6px}
.pitem{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;
  border-radius:11px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:600}
.pitem:hover,.pitem.on{background:var(--lagoon-soft);color:var(--lagoon)}
.pitem .pk{font-size:12px;color:var(--ink-3);font-weight:600;flex:none}
.pitem:hover .pk,.pitem.on .pk{color:var(--lagoon)}
.pempty{padding:22px 16px;color:var(--ink-3);font-size:14.5px}
.phint{border-top:1.5px solid var(--rule);padding:9px 16px;font-size:12px;color:var(--ink-3)}

/* The coverage chart --------------------------------------------------- */
.chartcard{position:relative;background:var(--sheet);border:1.5px solid var(--rule);border-radius:22px;
  padding:clamp(18px,2.6vw,28px);box-shadow:var(--lift)}
.chartcard h3{font-size:16px;font-weight:800}
.chartcard .csub{font-size:13.5px;color:var(--ink-3);margin-top:3px}
.bars{margin-top:20px;display:grid;gap:9px}
.bar{display:grid;grid-template-columns:132px minmax(0,1fr) 62px;align-items:center;gap:12px;
  text-decoration:none;color:inherit;padding:2px 0;border-radius:8px}
.bar:hover{background:var(--sunk);color:inherit}
.bar .bl{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .bt{height:13px;background:var(--sunk);border-radius:7px;overflow:hidden}
.bar .bf{height:100%;border-radius:7px;background:var(--lagoon);display:block}
.bar:nth-child(1) .bf{background:linear-gradient(90deg,#1D5FD2,#2E86E0)}
.bar .bv{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ctip{position:absolute;pointer-events:none;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:9px;white-space:nowrap;z-index:5}
@media (max-width:560px){ .bar{grid-template-columns:96px minmax(0,1fr) 50px;gap:9px}
  .bar .bl{font-size:12.5px} }

/* Live result strip ---------------------------------------------------- */
#live-results[aria-busy="true"]{opacity:.55;transition:opacity .15s}

/* Tab bar inside the shell -------------------------------------------- */
@media (max-width:1079px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:color-mix(in srgb,var(--sheet) 95%,transparent);backdrop-filter:blur(14px);
    border-top:1.5px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;
    text-decoration:none;color:var(--ink-3);font-size:10.5px;font-weight:700}
  .tabbar a[aria-current]{color:var(--lagoon)}
  .tabbar .tjoin{color:var(--sun)}
  .content{padding-bottom:70px}
}
@media (min-width:1080px){ .tabbar{display:none} }



/* Explore screen ------------------------------------------------------- */
section.pad{padding-block:clamp(30px,4vw,52px);border-top:0}
section.explore{padding:clamp(26px,3.6vw,44px) 0 clamp(22px,3vw,34px);
  background:linear-gradient(180deg, color-mix(in srgb,var(--lagoon) 8%, var(--paper)) 0%, var(--paper) 78%);
  border-bottom:1.5px solid var(--rule);position:relative;overflow:hidden}
section.explore::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  right:-200px;top:-280px;pointer-events:none;
  background:radial-gradient(circle at 40% 40%, color-mix(in srgb,var(--sun) 34%,transparent), transparent 66%)}
.ehead{display:grid;gap:22px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;
  margin-bottom:24px}
@media (max-width:860px){ .ehead{grid-template-columns:minmax(0,1fr)} }
h1.ebig{font-size:clamp(30px,4.4vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1.04;
  margin:6px 0 14px}
.epanel{display:flex;flex-direction:column;gap:3px;background:var(--sheet);border:1.5px solid var(--rule);
  border-radius:18px;padding:17px 19px;box-shadow:var(--lift)}
.ep-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.ep-v{font-size:16px;font-weight:800;color:var(--verify);line-height:1.25}
.ep-d{font-size:12.5px;color:var(--ink-3);margin-top:2px}

.grid2{display:grid;gap:20px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
@media (max-width:980px){ .grid2{grid-template-columns:minmax(0,1fr)} }
.grid2 .dests{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* the finder sits on the explore band */
section.explore .finder{margin-top:0;max-width:none}
section.explore .finder .fx{flex:1 1 210px}



/* ======================================================================
   The study advisor. A docked panel, not a bubble in the corner: it is a
   part of the application, and on a phone it takes the screen properly
   instead of hovering over content the reader is trying to use.
   ====================================================================== */
.task{display:flex;align-items:center;gap:8px;flex:none;cursor:pointer;font:inherit;font-size:14px;
  font-weight:800;padding:9px 15px;border-radius:11px;border:1.5px solid transparent;
  background:linear-gradient(135deg,var(--lagoon),#2E86E0);color:#fff}
.task:hover{filter:brightness(1.08)}
.task svg{flex:none}
@media (max-width:520px){ .task span{display:none} .task{padding:9px 11px} }

.ask[hidden]{display:none!important}
.ask{position:fixed;right:18px;bottom:18px;z-index:150;width:min(420px,calc(100vw - 36px));
  max-height:min(680px,calc(100vh - 36px));display:flex;flex-direction:column;
  background:var(--sheet);border:1.5px solid var(--rule);border-radius:22px;
  box-shadow:0 30px 70px -28px rgba(22,36,60,.55);overflow:hidden}
.ask header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1.5px solid var(--rule);
  background:linear-gradient(135deg, color-mix(in srgb,var(--lagoon) 10%, var(--sheet)), var(--sheet))}
.ask header strong{display:block;font-size:15.5px}
.asub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.aclose{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;
  padding:0 4px;border-radius:8px}
.aclose:hover{color:var(--ink)}
.alog{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.amsg{max-width:92%;font-size:14.5px;line-height:1.5;padding:11px 14px;border-radius:15px;
  white-space:pre-wrap;word-break:break-word}
.amsg.bot{background:var(--sunk);color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.amsg.me{background:var(--lagoon);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.amsg.typing{color:var(--ink-3);font-style:italic}
.amsg a{color:var(--lagoon);font-weight:700}
.amsg.me a{color:#fff}
.achips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.achips button{font:inherit;font-size:13px;font-weight:650;cursor:pointer;background:var(--sheet);
  border:1.5px solid var(--rule);border-radius:999px;padding:8px 13px;color:var(--ink-2);text-align:left}
.achips button:hover{border-color:var(--lagoon);color:var(--lagoon)}
.aform{display:flex;gap:9px;padding:12px 14px;border-top:1.5px solid var(--rule)}
.aform input{flex:1;min-width:0;border:1.5px solid var(--rule);background:var(--paper);border-radius:12px;
  padding:11px 14px;font:inherit;font-size:14.5px;color:var(--ink)}
.aform input:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--lagoon-soft)}
.aform .btn{padding:11px 18px;border-radius:12px}
.afoot{padding:0 16px 14px;font-size:11.5px;color:var(--ink-3);line-height:1.45}

@media (max-width:620px){
  .ask{right:0;left:0;bottom:0;width:100%;max-height:86vh;border-radius:22px 22px 0 0;border-bottom:0}
  body.ask-open{overflow:hidden}
}



/* Shortlist ------------------------------------------------------------- */
.save{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:34px;height:34px;border-radius:10px;border:1.5px solid var(--rule);background:var(--sheet);
  color:var(--ink-3);cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s}
.save:hover{border-color:var(--lagoon);color:var(--lagoon)}
.save[aria-pressed="true"]{border-color:var(--sun);background:var(--sun-soft);color:var(--sun-ink)}
.save[aria-pressed="true"] svg{fill:var(--sun);stroke:var(--sun-ink)}
.save.big{width:auto;height:auto;padding:12px 20px;border-radius:12px;font:inherit;font-weight:700;
  font-size:15px;color:var(--ink)}
.save.big[aria-pressed="true"]{color:var(--sun-ink)}
.savecount{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;border-radius:999px;background:var(--sun);color:#3A2A02;font-size:11.5px;font-weight:800;
  margin-left:auto;font-variant-numeric:tabular-nums}
.savecount[hidden]{display:none}
.saved-empty{padding:34px 0;color:var(--ink-3);font-size:15.5px}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:180;
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:650;padding:11px 18px;
  border-radius:999px;box-shadow:0 14px 34px -16px rgba(0,0,0,.6);pointer-events:none}
.toast[hidden]{display:none}
@media (min-width:1080px){ .toast{bottom:26px} }



.clist{margin:0;padding-left:20px;display:grid;gap:10px;font-size:15.5px;color:var(--ink-2)}
.clist strong{color:var(--ink)}



/* Ad slots. Labelled, boxed, and never mistaken for content - which is both
   an honesty rule and an AdSense policy one. */
.adslot{margin:26px auto;max-width:900px;min-height:100px;display:flex;flex-direction:column;gap:7px;
  padding:14px;border:1.5px dashed var(--rule);border-radius:16px;background:var(--sunk)}
.adlabel{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.adslot ins{display:block;width:100%}

/* Partner cards carry their disclosure on the card, not in a footer. */
.cat .sample .btn.ghost{width:100%;text-align:center}



/* A claimed page ------------------------------------------------------- */
.plogo{width:64px;height:64px;border-radius:16px;object-fit:contain;background:var(--sheet);
  border:1.5px solid var(--rule);padding:7px;flex:none}
.band.rich{padding-top:0}
.cover{height:clamp(160px,26vw,300px);background-size:cover;background-position:center;
  border-bottom:1.5px solid var(--rule)}
.prose p{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin-bottom:14px;max-width:68ch}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery img{width:100%;height:190px;object-fit:cover;border-radius:16px;border:1.5px solid var(--rule);
  background:var(--sunk)}

/* Enquiry form --------------------------------------------------------- */
.enquiry{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--sheet);border:1.5px solid var(--rule);border-radius:20px;padding:22px;
  box-shadow:var(--lift)}
.enquiry label{display:flex;flex-direction:column;gap:5px;min-width:0}
.enquiry label.wide,.enquiry .btn{grid-column:1/-1}
.enquiry .cap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.enquiry input,.enquiry textarea{border:1.5px solid var(--rule);background:var(--paper);border-radius:11px;
  padding:11px 13px;font:inherit;font-size:15px;color:var(--ink);width:100%}
.enquiry input:focus,.enquiry textarea:focus{outline:none;border-color:var(--lagoon);
  box-shadow:0 0 0 3px var(--lagoon-soft)}
.enquiry textarea{resize:vertical;min-height:96px}

/* The upsell on an unclaimed page -------------------------------------- */
.upsell{display:grid;gap:26px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;
  border-radius:26px;padding:clamp(24px,4vw,42px);position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lagoon) 0%,#1747A8 60%,#123A8C 100%);color:#fff}
.upsell::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  right:-150px;top:-190px;background:radial-gradient(circle,rgba(245,179,28,.45),transparent 62%)}
.upsell > *{position:relative;z-index:2}
.upsell h2{font-family:"Newsreader",Georgia,serif;font-size:clamp(25px,3.4vw,36px);font-weight:500;
  color:#fff;margin:12px 0 12px}
.upsell p{color:rgba(255,255,255,.9);font-size:15.5px;max-width:52ch}
.upsell .row{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.upsell .btn{background:var(--sun);color:#3A2A02}
.upsell .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.up-l{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.up-l li{display:grid;gap:3px;background:rgba(255,255,255,.1);border-radius:14px;padding:13px 15px}
.up-l strong{font-size:14.5px;color:#fff}
.up-l span{font-size:13px;color:rgba(255,255,255,.82);line-height:1.45}
@media (max-width:860px){ .upsell{grid-template-columns:1fr} }

/* Pricing -------------------------------------------------------------- */
.prices{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:stretch}
.price{display:flex;flex-direction:column;background:var(--sheet);border:1.5px solid var(--rule);
  border-radius:22px;padding:24px;position:relative;overflow:hidden}
.price.pick{border-color:var(--lagoon);box-shadow:0 0 0 4px var(--lagoon-soft),var(--lift)}
.price .pt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.price .pv{font-family:"Newsreader",Georgia,serif;font-size:clamp(30px,4vw,42px);font-weight:600;
  line-height:1.05;margin:8px 0 4px;letter-spacing:-.02em}
.price .pd{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-bottom:16px}
.price ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;font-size:14px;color:var(--ink-2)}
.price li{display:flex;gap:9px;align-items:flex-start}
/* A real tick, not two crossed gradients: a rotated box with two borders is
   the only way to draw a checkmark in CSS that actually looks like one. */
.price li::before{content:"";flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%;
  background:var(--verify-soft);position:relative}
.price li{position:relative}
.price li::after{content:"";position:absolute;left:5px;top:6px;width:5px;height:9px;
  border:solid var(--verify);border-width:0 2px 2px 0;transform:rotate(43deg)}
.price .btn{margin-top:auto}
.price .tagbest{position:absolute;top:0;right:0;background:var(--sun);color:#3A2A02;font-size:11px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:0 22px 0 14px}



.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--sheet);border:1.5px solid var(--rule);border-radius:16px;padding:16px 20px}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:18px;color:var(--lagoon);font-weight:800}
.faq details[open] summary::before{content:"\2212"}
.faq p{margin-top:11px;font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch}

/* ---------------------------------------------------------------- claiming
   The forms an institution fills in: claiming, signing in, editing its own
   page. These are the only screens on the site a paying customer touches, so
   they get real field styling rather than browser defaults - a claim form
   that looks like a 1998 CGI script does not sell a 499-euro listing. */
.claimform,.editform{max-width:100%}
.fld{margin:0 0 18px}
.lbl{display:block;font-size:13px;font-weight:700;letter-spacing:.01em;
  color:var(--ink-2);margin:0 0 7px}
.inp{width:100%;box-sizing:border-box;border:1.5px solid var(--rule);
  background:var(--sheet);color:var(--ink);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:15.5px;line-height:1.45;
  transition:border-color .14s ease,box-shadow .14s ease}
.inp::placeholder{color:var(--ink-3);opacity:.85}
.inp:focus{outline:none;border-color:var(--lagoon);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lagoon) 18%,transparent)}
textarea.inp{resize:vertical;min-height:100px}
.claimform .row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.claimform .row .inp{flex:1 1 220px}
.editform .fh{font-size:19px;font-weight:600;margin:30px 0 14px;
  padding-top:18px;border-top:1px solid var(--rule-2)}
.editform .fh:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.lockpill{display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sun-ink,var(--caution));
  background:var(--sun-soft);border-radius:999px;padding:4px 9px}

.note.caution{border-left-color:var(--caution);background:var(--caution-soft)}
.note.verify-mark{border-left-color:var(--verify);background:var(--verify-soft)}
.eyebrow.verify-mark{color:var(--verify)}

/* The token a webmaster has to copy exactly. Monospace, selectable, and big
   enough to read off a second monitor. */
.codeblock{display:block;background:var(--sunk);border:1px solid var(--rule);
  border-radius:12px;padding:13px 15px;margin:10px 0 0;overflow-x:auto;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:13.5px;line-height:1.7;color:var(--ink);white-space:pre;
  user-select:all;-webkit-user-select:all}
.codeblock.big{font-size:19px;font-weight:700;text-align:center;white-space:normal}
.proof{border:1px solid var(--rule);border-radius:16px;padding:18px 20px;
  background:var(--sheet)}
.proof p{font-size:15px;color:var(--ink-2);line-height:1.6}
.proof .eyebrow{margin-bottom:8px}

/* The list used for "pick your institution" and "your listings". */
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rlist a{display:flex;align-items:center;gap:13px;text-decoration:none;
  border:1px solid var(--rule);border-radius:14px;padding:12px 14px;
  background:var(--sheet);transition:border-color .14s ease,transform .14s ease}
.rlist a:hover{border-color:var(--lagoon);transform:translateY(-1px)}
.rlist .rmark{flex:none;display:flex}
.rlist .rbody{flex:1;min-width:0}
.rlist .rbody strong{display:block;color:var(--ink);font-size:15.5px;
  font-weight:650;line-height:1.3}
.rlist .rbody .sub{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.rlist .rgo{flex:none;font-size:13px;font-weight:700;color:var(--lagoon)}
@media (max-width:520px){.rlist .rgo{display:none}}

/* The site footer. Quiet, but on every page - see shell.js for why. */
.sfoot{margin-top:56px;padding:30px 0 40px;border-top:1px solid var(--rule);
  background:var(--sunk)}
.sfl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}
.sfl a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.sfl a:hover{color:var(--lagoon);text-decoration:underline}
.sfine{font-size:12.5px;line-height:1.65;color:var(--ink-3);max-width:80ch;margin-top:8px}
@media (max-width:640px){.sfoot{margin-top:38px;padding:24px 0 34px}
  .sfl{gap:8px 16px}.sfl a{font-size:13.5px}}

/* ------------------------------------------------------------------ admin
   Deliberately plain. This is a desk, not a brochure: dense rows, obvious
   buttons, nothing that has to be learned. */
.adnav{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 4px;
  border-bottom:1px solid var(--rule);padding-bottom:10px}
.adnav a{font-size:14px;font-weight:650;text-decoration:none;color:var(--ink-2);
  padding:7px 13px;border-radius:9px}
.adnav a:hover{background:var(--sunk);color:var(--ink)}
.adnav a[aria-current="page"]{background:var(--lagoon);color:#fff}
.adgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.adcard{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:15px 17px;
  display:flex;flex-direction:column;gap:3px}
.adcard .adk{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:800;color:var(--ink-3)}
.adcard .adv{font-family:var(--serif,Georgia,serif);font-size:27px;font-weight:600;
  color:var(--ink);line-height:1.15}
.adcard .ads{font-size:12.5px;color:var(--ink-3)}
.adtab{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.adtab th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;padding:8px 10px;border-bottom:1.5px solid var(--rule)}
.adtab td{padding:10px;border-bottom:1px solid var(--rule-2);vertical-align:top;color:var(--ink)}
.adtab tr:hover td{background:var(--sunk)}
.adtab .sub{color:var(--ink-3);font-size:13px}
.adtab .btn{padding:6px 11px;font-size:13px;border-radius:9px}
.adtab code{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px}

/* The banner on an example listing. Loud on purpose: a demonstration page
   that could be mistaken for a real institution is the one thing this
   showroom must never be. */
.exbar{background:var(--sun-soft);border-bottom:2px solid var(--sun);
  padding:13px 0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.exbar a{color:var(--lagoon);font-weight:650}

.sfl-2{margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--rule)}
.sfl-2 a{font-weight:500;font-size:13px;color:var(--ink-3)}