:root{
  --bg:#FFFFFF;
  --ink:#000000;
  --text:#1C2230;
  --muted:#5A6474;
  --faint:#8A93A3;
  --line:#E4E8EF;
  --line-2:#D1D7E2;
  --wash:#F4F6FA;
  --wash-2:#ECF0F6;
  --green:#3A6FB5;
  --green-deep:#274E8D;
  --green-soft:#EAF1FA;
  --green-line:#BFD6EF;
  --mint:#D3E9FF;
  --signal:#D3402B;
  --signal-soft:#FBE9E5;
  --amber:#C98A0B;
  --amber-soft:#FBF1D8;
  --dark:#0B0F17;
  --dark-2:#131924;
  --dark-line:#242C3B;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:28px;--r-pill:999px;
  --max:1240px;--nav-h:86px;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(11,15,23,.05);
  --shadow:0 1px 2px rgba(11,15,23,.04),0 12px 32px -14px rgba(11,15,23,.18);
  --shadow-lg:0 2px 4px rgba(11,15,23,.04),0 30px 60px -24px rgba(11,15,23,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
html{background:var(--bg);overflow-x:clip}
body{overflow-x:clip}
body{font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11" 1,"ss03" 1,"tnum" 1}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;margin:0;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.04em;line-height:1}
h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.035em;line-height:1.04}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.25}
h4{font-size:17px;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-left:28px;padding-right:28px}
.lede{font-size:20px;line-height:1.5;color:var(--muted);max-width:60ch;letter-spacing:-.005em}
.small{font-size:14px;line-height:1.5}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.link{color:var(--green-deep);font-weight:500;border-bottom:1px solid var(--green-line);transition:border-color .2s}
.link:hover{border-color:var(--green-deep)}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;letter-spacing:-.01em;transition:transform .2s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#35659E;box-shadow:0 8px 24px -10px rgba(58,111,181,.6)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#222}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--wash)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn .ic{width:16px;height:16px;flex:none}
.btn-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn-arrow:hover svg{transform:translateX(3px)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .25s,background-color .25s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.9)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;height:100%;margin-right:20px}
.brand img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>a,.nav-links>button{position:relative;font-size:14.5px;font-weight:500;color:var(--text);padding:9px 13px;border-radius:var(--r-pill);transition:color .2s,background-color .2s;display:inline-flex;align-items:center;gap:6px}
.nav-links>a:hover,.nav-links>button:hover{color:var(--ink);background:var(--wash)}
.nav-links>a.active{color:var(--ink);background:var(--green-soft)}
.nav-links>button svg{width:14px;height:14px;transition:transform .2s}
.nav-links>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;transition:border-color .2s,background-color .2s}
.icon-btn:hover{background:var(--wash)}
.icon-btn svg{width:18px;height:18px}
.menu-btn{display:none}
/* Mega menu */
.mega{position:absolute;left:0;right:0;top:var(--nav-h);background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:49}
.mega.open{opacity:1;transform:none;pointer-events:auto}
.mega .wrap{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:40px;padding-top:28px;padding-bottom:32px}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mega-item{display:flex;gap:14px;padding:14px;border-radius:var(--r-md);transition:background-color .15s}
.mega-item:hover{background:var(--wash)}
.mega-item .ico{width:38px;height:38px;border-radius:10px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex:none}
.mega-item .ico svg{width:19px;height:19px}
.mega-item b{display:block;font-weight:600;color:var(--ink);font-size:15px;letter-spacing:-.01em}
.mega-item span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px}
.mega-side{border-left:1px solid var(--line);padding-left:32px}
.mega-side small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:12px}
.mega-side a.feat{display:block;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);transition:border-color .2s}
.mega-side a.feat:hover{border-color:var(--ink)}
.mega-side a.feat b{display:block;font-weight:600;color:var(--ink);font-size:15px;line-height:1.3;letter-spacing:-.01em}
.mega-side a.feat span{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.mega-side .cover{aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-bottom:12px;border:1px solid var(--line)}
.drawer{display:none}
@media (max-width:1000px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .mega{display:none}
  .drawer{display:block;position:fixed;inset:var(--nav-h) 0 0 0;background:#fff;z-index:49;padding:12px 28px 40px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);overflow:auto}
  .drawer.open{opacity:1;transform:none;pointer-events:auto}
  .drawer small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:22px 0 6px}
  .drawer a{display:block;padding:12px 0;font-size:19px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);letter-spacing:-.01em}
  .drawer a.btn{display:inline-flex;width:100%;justify-content:center;margin-top:22px;padding:0 24px;font-size:15px;border-bottom:0;color:#fff}
  .drawer .nav-signin{margin-top:6px}
}

/* ---------- Page transitions ---------- */
#app{min-height:70vh}
.page{animation:pageIn .5s var(--ease-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--green);z-index:60;transition:width .1s linear}

/* ---------- Hero ---------- */
.hero{position:relative;padding:76px 0 56px;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:-30%;width:70vw;max-width:980px;aspect-ratio:1;background:radial-gradient(closest-side,rgba(58,111,181,.22),rgba(58,111,181,.06) 55%,transparent 72%);pointer-events:none;filter:blur(20px)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-copy .lede{margin-top:26px;max-width:52ch}
.hero-copy .lede+.lede{margin-top:16px}
.hero-copy .lede-lead{color:var(--ink);font-weight:500}
.hero-actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.hero h1 .accent{color:var(--green-deep)}
.h-line{display:block;white-space:nowrap;opacity:0;transform:translateY(18px);animation:lineIn .9s var(--ease-out) forwards}
.h-line:nth-child(2){animation-delay:.08s}
.hero-copy .lede,.hero-actions,.hero-note{opacity:0;animation:lineIn .9s var(--ease-out) forwards}
.hero-copy .lede{animation-delay:.18s}.hero-actions{animation-delay:.28s}.hero-note{animation-delay:.38s}
@keyframes lineIn{to{opacity:1;transform:none}}

/* Governance lens (hero visual) */
.lens-wrap{position:relative;opacity:0;animation:lensIn 1.1s var(--ease-out) .2s forwards}
@keyframes lensIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.lens{position:relative;aspect-ratio:1/1;max-width:560px;margin:0 auto;border-radius:var(--r-xl);background:linear-gradient(160deg,#FBFDF9 0%,#F3F9EE 60%,#EEF6E8 100%);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.lens-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(11,15,23,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,23,.045) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 78%)}
.lens-sweep{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);border-radius:50%;background:conic-gradient(from 0deg,rgba(58,111,181,0) 0deg,rgba(58,111,181,.05) 40deg,rgba(58,111,181,.34) 78deg,rgba(58,111,181,0) 80deg);animation:sweep 7s linear infinite;will-change:transform}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lens svg{position:absolute;inset:0;width:100%;height:100%}
.lens .ring{fill:none;stroke:rgba(11,15,23,.16);stroke-width:1}
.lens .ring.outer{stroke:rgba(31,122,31,.55);stroke-width:1.4}
.lens .spoke{stroke:rgba(11,15,23,.08);stroke-width:1}
.lens .quad{font-family:var(--font);font-size:11.5px;font-weight:600;fill:var(--muted);letter-spacing:.02em}
.lens .core{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.lens .core-mark{fill:var(--ink)}
.node{cursor:default}
.node circle{fill:#fff;stroke:var(--ink);stroke-width:1.5;transition:r .35s var(--ease),fill .35s,stroke .35s}
.node.lit circle{fill:var(--green);stroke:var(--green-deep);r:7}
.node text{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--ink);opacity:0;transition:opacity .35s;paint-order:stroke;stroke:#F6FAF2;stroke-width:4px;stroke-linejoin:round}
.node.lit text,.node.named text{opacity:1}
.node.named text{fill:var(--muted);font-weight:500}
.node.lit.named text{fill:var(--ink)}
.node .halo{fill:none;stroke:var(--green-deep);stroke-width:1;opacity:0}
.node.lit .halo{animation:halo 1.1s var(--ease-out) forwards}
@keyframes halo{0%{opacity:.8;r:8}100%{opacity:0;r:26}}
.node.flag circle{stroke:var(--signal);fill:#fff}
.node.flag .halo{stroke:var(--signal);animation:haloLoop 1.6s ease-out infinite}
@keyframes haloLoop{0%{opacity:.7;r:8}100%{opacity:0;r:24}}
.node.flag text{opacity:1;fill:var(--signal)}
.node.contained circle{fill:var(--green);stroke:var(--green-deep)}
.node.contained .halo{animation:none;opacity:0}
.node.contained text{fill:var(--green-deep);opacity:1}
.lens .link-line{stroke:rgba(11,15,23,.14);stroke-width:1;stroke-dasharray:3 4}
.lens .link-line.hot{stroke:var(--signal);stroke-dasharray:none;stroke-width:1.2;animation:dashflow 1.2s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-14}}
.lens-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;font-size:12.5px;line-height:1.35;min-width:196px;animation:bob 7s ease-in-out infinite}
.lens-card b{display:block;font-weight:600;color:var(--ink);font-size:13px;letter-spacing:-.01em}
.lens-card span{display:block;color:var(--muted);margin-top:3px}
.lens-card small{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--green-deep)}
.lens-card small i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.lens-card.a{right:18px;top:22px}
.lens-card.b{left:18px;bottom:76px;animation-delay:-3.5s;min-width:0;max-width:228px}
.lens-card.b small{color:var(--amber)}
.lens-card.b small i{background:var(--amber)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lens-status{position:absolute;left:18px;bottom:22px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 12px 7px 9px;font-size:12.5px;font-weight:500;color:var(--text)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green-deep);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green-deep);opacity:0;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media (max-width:980px){.hero{padding:44px 0 32px}.hero-grid{grid-template-columns:1fr;gap:40px}.lens-card{display:none}.h-line{white-space:normal}}

/* ---------- Stats strip ---------- */
.strip{border:0;background:transparent}
.strip>.wrap{background:rgba(255,255,255,.5);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.75);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 40px -18px rgba(39,78,141,.25)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip .st{padding:26px 22px 26px 0;border-right:1px solid var(--line)}
.strip .st:last-child{border-right:0}
.strip .st+.st{padding-left:22px}
.strip b{display:block;font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1}
.strip span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* ---------- Banner carousel (after the numbers strip) ----------
   A stage with three cards: the current one large in the middle, the previous and next smaller and dimmed
   on either side. Every slide is absolutely positioned and moves between the five stations (hidden left,
   previous, current, next, hidden right) by transitioning left/width/opacity, so a change reads as the row
   sliding along. The stage's height is the middle card's height; the sizes are set per breakpoint. */
.banners{position:relative;padding:36px 0 0}
.carousel{position:relative;--side:24%;--gap:2%;--center:48%;overflow:hidden;padding:18px 0 4px}
.carousel .stage{position:relative}
.carousel .slides{position:relative;height:0;padding-bottom:32%}
.carousel .slide{position:absolute;top:50%;width:var(--side);aspect-ratio:3/2;transform:translateY(-50%);border-radius:var(--r-lg);overflow:hidden;background:var(--dark-2);box-shadow:var(--shadow);opacity:.5;cursor:pointer;transition:left .75s var(--ease),width .75s var(--ease),opacity .6s var(--ease),box-shadow .6s var(--ease)}
.carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel .slide.is-prev{left:0}
.carousel .slide.is-active{left:calc(var(--side) + var(--gap));width:var(--center);opacity:1;z-index:2;cursor:default;box-shadow:var(--shadow-lg);border-radius:var(--r-xl)}
.carousel .slide.is-next{left:calc(var(--side) + var(--gap) * 2 + var(--center))}
.carousel .slide.is-left{left:calc(-1 * var(--side) - var(--gap));opacity:0;pointer-events:none}
.carousel .slide.is-right{left:calc(100% + var(--gap));opacity:0;pointer-events:none}
.carousel .slide.is-prev:hover,.carousel .slide.is-next:hover{opacity:.8}
.carousel.single .slide.is-active{left:calc(50% - var(--center) / 2)}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .25s var(--ease),background .2s}
.car-nav svg{width:20px;height:20px}
.car-nav.prev{left:8px}.car-nav.prev svg{transform:rotate(180deg)}
.car-nav.next{right:8px}
.carousel:hover .car-nav,.carousel:focus-within .car-nav,.car-nav:focus-visible{opacity:1}
.car-nav:hover{background:#fff}
.car-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
.car-dots{display:flex;gap:4px}
.car-dots button{position:relative;width:24px;height:24px;border-radius:50%}
.car-dots button::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--line-2);transition:background .2s,transform .2s}
.car-dots button:hover::before{background:var(--muted)}
.car-dots button[aria-current="true"]::before{background:var(--green);transform:scale(1.25)}
.car-pause{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.car-pause:hover{color:var(--ink);border-color:var(--ink)}
.car-pause svg{width:14px;height:14px}
.car-pause svg:last-child{display:none}
.car-pause[aria-pressed="true"] svg:first-child{display:none}
.car-pause[aria-pressed="true"] svg:last-child{display:block}
/* the controls act only once the client script has taken over; until then the first image is shown */
.carousel:not(.ready) .car-nav{display:none}
.carousel:not(.ready) .car-foot{visibility:hidden}
@media (hover:none){.car-nav{opacity:1}}
@media (max-width:1016px){.carousel{--side:20%;--center:56%}.carousel .slides{padding-bottom:37.34%}}
/* a phone shows one card at a time; the neighbours wait just off stage and slide in */
@media (max-width:760px){.banners{padding-top:28px}.carousel{--side:100%;--gap:12px;--center:100%;padding-top:6px}.carousel .slides{padding-bottom:66.67%}
  .carousel .slide{width:100%;opacity:1;border-radius:var(--r-lg)}
  .carousel .slide.is-prev{left:calc(-100% - var(--gap))}.carousel .slide.is-active{left:0;border-radius:var(--r-lg)}.carousel .slide.is-next{left:calc(100% + var(--gap))}
  .carousel .slide.is-left{left:calc(-200% - var(--gap) * 2)}.carousel .slide.is-right{left:calc(200% + var(--gap) * 2)}
  .carousel.single .slide.is-active{left:0}
  .car-nav{width:36px;height:36px}.car-foot{margin-top:14px}}
@media (max-width:860px){.strip .wrap{grid-template-columns:1fr 1fr}.strip .st{border-right:0;padding:20px 0}.strip .st+.st{padding-left:0}.strip .st:nth-child(odd){padding-right:16px}}

/* ---------- Sections ---------- */
.section{padding:104px 0}
.section.tight{padding:72px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:44px}
.section-head p{color:var(--muted);max-width:56ch;margin-top:16px;font-size:18px;line-height:1.5}
.section-head .btn{flex:none}
@media (max-width:760px){.section{padding:64px 0}.section-head{flex-direction:column;align-items:flex-start;gap:16px}}

/* ---------- Story (sticky scroll) ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.story-steps{display:flex;flex-direction:column}
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;opacity:.32;transition:opacity .5s}
.step.active{opacity:1}
.step .n{font-family:var(--display);font-size:13px;font-weight:600;color:var(--green-deep);letter-spacing:.02em;margin-bottom:14px}
.step h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1.08}
.step p{margin-top:16px;color:var(--muted);font-size:17px;max-width:44ch}
.step a{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;color:var(--ink);font-size:15px}
.step a svg{width:16px;height:16px;transition:transform .25s}
.step a:hover svg{transform:translateX(3px)}
.story-visual{position:sticky;top:110px;aspect-ratio:1.08/1;border-radius:var(--r-xl);background:linear-gradient(160deg,#F9FCF6,#EFF5EA);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.scene{position:absolute;inset:0;padding:34px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.scene.show{opacity:1;transform:none;pointer-events:auto}
.mock{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.mock-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink)}
.mock-head span{color:var(--muted);font-weight:500}
.mock-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}
.mock-row:last-child{border-bottom:0}
.mock-row b{display:block;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mock-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:4px 10px;font-size:11.5px;font-weight:600;line-height:1.2}
.pill.g{background:var(--green-soft);color:var(--green-deep)}
.pill.r{background:var(--signal-soft);color:#A8341F}
.pill.a{background:var(--amber-soft);color:#8A5E07}
.pill.n{background:var(--wash-2);color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--wash-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green);border-radius:3px;transition:width 1.2s var(--ease-out)}
.scene.show .bar i{width:var(--w)}
.mini-chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:18px 16px 12px}
.mini-chart div{flex:1;background:var(--ink);border-radius:6px 6px 2px 2px;transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease-out);position:relative}
.mini-chart div.g{background:var(--green)}
.scene.show .mini-chart div{transform:none}
.mini-chart div::after{content:attr(data-l);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.stack{position:relative;height:100%}
.stack .mock{position:absolute;left:0;right:0}
.scene .fx{position:absolute;bottom:34px;left:34px;right:34px}
@media (max-width:900px){.story{grid-template-columns:1fr}.story-visual{position:relative;top:auto;order:-1}.step{min-height:auto;opacity:1;padding:20px 0}}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:16px}
.cell{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .2s}
.cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.cell.w2{grid-column:span 2}
.cell.h2{grid-row:span 2}
.cell .ctext{padding:22px 24px 0;position:relative;z-index:2}
.cell h3{font-size:19px;letter-spacing:-.02em}
.cell p{font-size:14px;color:var(--muted);margin-top:6px;max-width:34ch;line-height:1.45}
.cell .cvis{position:relative;flex:1;margin-top:auto;overflow:hidden}
.cell .go{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;background:var(--wash);display:grid;place-items:center;z-index:3;transition:background-color .2s,transform .3s var(--ease)}
.cell .go svg{width:16px;height:16px}
.cell:hover .go{background:var(--green);transform:translate(2px,-2px)}
/* cell visuals */
.v-rail{position:absolute;left:24px;right:24px;bottom:28px}
.v-rail .axis{height:2px;background:var(--line-2);position:relative;border-radius:2px}
.v-rail .axis i{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 1px var(--ink)}
.v-rail .axis i.f{background:#fff;box-shadow:0 0 0 1.5px var(--green-deep)}
.v-rail .axis i.t{background:var(--green);box-shadow:0 0 0 1.5px var(--green-deep);width:14px;height:14px}
.v-rail .axis i.t::after{content:"Today";position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--green-deep)}
.v-rail .lbls{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--muted)}
.v-list{position:absolute;left:24px;right:24px;top:0;display:flex;flex-direction:column;gap:8px}
.v-list div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:transform .35s var(--ease)}
.v-list div b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-list div span{color:var(--muted);white-space:nowrap}
.cell:hover .v-list div:nth-child(1){transform:translateX(4px)}
.cell:hover .v-list div:nth-child(2){transform:translateX(8px)}
.cell:hover .v-list div:nth-child(3){transform:translateX(12px)}
.v-rings{position:absolute;left:50%;bottom:-70px;transform:translateX(-50%);width:230px;height:230px}
.v-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(11,15,23,.18);transition:transform .6s var(--ease)}
.v-rings i:nth-child(2){inset:34px;border-color:var(--green-deep);border-width:2px}
.v-rings i:nth-child(3){inset:68px;background:#fff;border-color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.cell:hover .v-rings i:nth-child(1){transform:scale(1.06)}
.cell:hover .v-rings i:nth-child(2){transform:scale(.94)}
.v-chips{position:absolute;left:24px;right:24px;bottom:22px;display:flex;flex-wrap:wrap;gap:6px}
.v-chips span{font-size:12px;font-weight:500;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--text);transition:transform .3s var(--ease),background-color .3s}
.cell:hover .v-chips span:nth-child(3n){background:var(--green-soft);border-color:var(--green-line)}
.v-bars{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px}
.v-bars div{display:grid;grid-template-columns:104px 1fr 26px;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.v-bars div b{display:block;height:8px;border-radius:4px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.v-bars div:first-child b{background:var(--signal)}
.cell.in .v-bars div b,.cell:hover .v-bars div b{transform:none}
.v-bars div span{text-align:right;color:var(--ink);font-weight:600}
.v-papers{position:absolute;left:24px;right:24px;bottom:-30px;height:150px}
.v-papers i{position:absolute;left:10%;right:10%;top:0;height:170px;background:#fff;border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-sm);transition:transform .45s var(--ease);padding:14px 16px}
.v-papers i::before{content:"";display:block;height:8px;width:60%;background:var(--ink);border-radius:4px;margin-bottom:10px}
.v-papers i::after{content:"";display:block;height:44px;background:repeating-linear-gradient(0deg,var(--line) 0 2px,transparent 2px 10px);opacity:.9;border-radius:2px}
.v-papers i:nth-child(1){transform:translateY(34px) rotate(-6deg)}
.v-papers i:nth-child(2){transform:translateY(20px) rotate(3deg)}
.v-papers i:nth-child(3){transform:translateY(6px)}
.cell:hover .v-papers i:nth-child(1){transform:translateY(30px) rotate(-10deg)}
.cell:hover .v-papers i:nth-child(2){transform:translateY(14px) rotate(6deg)}
.cell:hover .v-papers i:nth-child(3){transform:translateY(-2px)}
.v-metric{position:absolute;left:24px;right:24px;bottom:22px}
.v-metric b{display:block;font-family:var(--display);font-size:48px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.v-metric b em{font-style:normal;color:var(--green-deep)}
.v-metric span{display:block;font-size:13px;color:var(--muted);margin-top:8px;max-width:30ch}
.v-article{position:absolute;left:24px;right:24px;bottom:0;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:16px 16px 0;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease)}
.cell:hover .v-article{transform:translateY(-6px)}
.v-article b{display:block;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.v-article i{display:block;height:6px;border-radius:3px;background:var(--wash-2);margin-top:10px}
.v-article i:nth-of-type(2){width:80%}
.v-article i:nth-of-type(3){width:60%}
.v-news{position:absolute;left:24px;right:24px;bottom:22px}
.v-news time{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--green-deep)}
.v-news b{display:block;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.015em;line-height:1.35;margin-top:8px}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}.cell.w2{grid-column:span 2}}
@media (max-width:600px){.bento{grid-template-columns:1fr;grid-auto-rows:240px}.cell.w2,.cell.h2{grid-column:span 1;grid-row:span 1}}

/* ---------- Dark band + matrix ---------- */
.band{background:var(--dark);color:#C7CEDC;padding:104px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:-10%;bottom:-40%;width:60vw;max-width:900px;aspect-ratio:1;background:radial-gradient(closest-side,rgba(58,111,181,.18),transparent 70%);pointer-events:none}
.band h2{color:#fff}
.band .section-head p{color:#9AA39C}
.band .wrap{position:relative}
.matrix{border:1px solid var(--dark-line);border-radius:var(--r-lg);overflow:hidden;background:var(--dark-2)}
.matrix table{border-collapse:collapse;width:100%}
.matrix th,.matrix td{padding:0;border-bottom:1px solid var(--dark-line);text-align:left}
.matrix thead th{padding:16px 18px;font-size:13.5px;font-weight:600;color:#fff;border-left:1px solid var(--dark-line);vertical-align:bottom}
.matrix thead th:first-child{border-left:0}
.matrix tbody th{padding:0 18px;font-size:14px;font-weight:500;color:#EDEFEA;white-space:nowrap;width:220px}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix td{border-left:1px solid var(--dark-line);height:60px;position:relative;cursor:default;--mx:50%;--my:50%}
.matrix td::before{content:"";position:absolute;inset:0;background:radial-gradient(160px circle at var(--mx) var(--my),rgba(58,111,181,.16),transparent 70%);opacity:0;transition:opacity .25s}
.matrix td:hover::before{opacity:1}
.cellm{position:absolute;inset:14px 18px;border-radius:5px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.matrix.on .cellm{transform:none}
.cellm.full{background:var(--green)}
.cellm.part{background:linear-gradient(90deg,var(--green) 0 50%,rgba(58,111,181,.22) 50% 100%)}
.cellm.none{background:transparent;border:1px dashed #3A4356}
.matrix td .lbl{position:absolute;left:50%;bottom:8px;transform:translate(-50%,6px);font-size:11.5px;color:#fff;background:#000;border:1px solid var(--dark-line);padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:3}
.matrix td:hover .lbl{opacity:1;transform:translate(-50%,0)}
.matrix-legend{display:flex;gap:22px;margin-top:18px;font-size:13px;color:#9AA39C;flex-wrap:wrap}
.matrix-legend i{display:inline-block;width:22px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:8px}
.matrix-scroll{overflow:auto}
@media (max-width:860px){.matrix tbody th{width:150px;white-space:normal}}

/* ---------- Working groups + events ---------- */
.wg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.group{display:block;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s,border-color .2s}
.group:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.group .ico{width:42px;height:42px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-bottom:16px}
.group .ico svg{width:20px;height:20px}
.group h3{font-size:17px}
.group p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.group small{display:block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--green-deep)}
.events{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.events header{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--ink);font-size:15px}
.events header a{font-size:13.5px;color:var(--green-deep)}
.event{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);transition:background-color .2s}
.event:last-child{border-bottom:0}
.event:hover{background:var(--wash)}
.event .date{text-align:center;border:1px solid var(--line);border-radius:10px;padding:6px 0;background:#fff}
.event .date b{display:block;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1}
.event .date span{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:3px;text-transform:none}
.event h4{font-size:15px}
.event p{font-size:13px;color:var(--muted);margin-top:4px}
.event .meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
@media (max-width:900px){.wg{grid-template-columns:1fr}}
@media (max-width:600px){.groups{grid-template-columns:1fr}}

/* ---------- Lists (news, incidents) ---------- */
.latest{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--line);transition:background-color .2s}
.row:hover h3{color:var(--green-deep)}
.row time,.row .k{font-size:13.5px;color:var(--muted);padding-top:3px}
.row h3{font-size:18px;line-height:1.3;transition:color .2s}
.row p{font-size:14.5px;color:var(--muted);margin-top:6px}
.row .tags{margin-top:10px}
@media (max-width:860px){.latest{grid-template-columns:1fr;gap:40px}}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text);background:var(--wash);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;line-height:1.3}
.tag.green{background:var(--green-soft);border-color:var(--green-line);color:var(--green-deep)}
.tag.red{background:var(--signal-soft);border-color:#F1C9C0;color:#A8341F}
.tag.amber{background:var(--amber-soft);border-color:#EEDDA8;color:#8A5E07}
.tag.ink{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Knowledge feature */
.kb-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}
.kb-feature{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:border-color .2s,transform .35s var(--ease),box-shadow .35s}
.kb-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kb-feature .cover{aspect-ratio:16/9}
.kb-feature .body{padding:26px 28px 28px}
.kb-feature h3{font-size:26px;margin-top:12px;letter-spacing:-.025em}
.kb-feature p{margin-top:12px;color:var(--muted)}
.kb-side .row{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.kb-grid{grid-template-columns:1fr}}

/* CTA */
.cta{position:relative;border-radius:var(--r-xl);background:var(--dark);color:#fff;padding:72px 64px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;overflow:hidden}
.cta::before{content:"";position:absolute;right:-8%;top:-60%;width:620px;aspect-ratio:1;background:radial-gradient(closest-side,rgba(58,111,181,.42),transparent 70%);pointer-events:none}
.cta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 80% 30%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 80% 30%,#000,transparent 70%);pointer-events:none}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff;font-size:clamp(32px,4vw,48px)}
.cta p{margin-top:14px;color:#B6BFCE;max-width:52ch;font-size:17px}
.cta .actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:420px;width:100%}
.cta-sub{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.cta-sub input{flex:1 1 180px;min-width:0;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);padding:0 18px;font:inherit;font-size:14.5px;background:rgba(255,255,255,.08);color:#fff;transition:border-color .2s,background-color .2s}
.cta-sub input::placeholder{color:#8E99AD}
.cta-sub input:focus{outline:none;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.cta-sub .btn{flex:none}
.cta-note{font-size:12.5px;color:#8E99AD;line-height:1.5;margin:0}
.cta-note a{color:#B6BFCE;text-decoration:underline}
.cta-note a:hover{color:#fff}
.cta-done{margin:0;padding:12px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14.5px}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:44px 28px;gap:28px}.cta-side{max-width:none}.cta-sub .btn{width:100%}}

/* ---------- Footer ---------- */
.footer{border-top:1px solid rgba(255,255,255,.8);margin-top:56px;background:rgba(255,255,255,.55);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding:64px 0 48px}
.footer h4{font-size:13.5px;margin-bottom:16px;color:var(--ink);font-family:var(--font);font-weight:600}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 10px}
.footer li a{font-size:14.5px;color:var(--muted);transition:color .15s}
.footer li a:hover{color:var(--ink)}
.footer-brand img{height:36px;width:auto}
.footer-brand p{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:36ch}
.footer-bot{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.footer-bot a{margin-left:18px}
.footer-bot a:hover{color:var(--ink)}
@media (max-width:980px){.footer-top{grid-template-columns:1fr 1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:600px){.footer-top{grid-template-columns:1fr 1fr}}

/* ---------- Collection (library) pages ---------- */
.coll-head{padding:56px 0 32px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.coll-head::before{content:"";position:absolute;right:-10%;top:-60%;width:640px;aspect-ratio:1;background:radial-gradient(closest-side,rgba(58,111,181,.16),transparent 70%);pointer-events:none}
.coll-head .wrap{position:relative}
.coll-head .crumbs{margin-bottom:16px}
.coll-head h1{font-size:clamp(36px,4.6vw,56px)}
.coll-head p{margin-top:14px;color:var(--muted);max-width:64ch;font-size:18px}
.coll-tools{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap}
.search{position:relative;flex:1 1 360px;max-width:640px}
.search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.search input{width:100%;height:50px;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 44px 0 48px;font:inherit;font-size:15.5px;background:#fff;transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--green-soft)}
.search .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:none;align-items:center;justify-content:center;color:var(--muted)}
.search .clear:hover{background:var(--wash);color:var(--ink)}
.search.has .clear{display:inline-flex}
.select{height:50px;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 42px 0 18px;font:inherit;font-size:14.5px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235E655F' stroke-width='1.6'/></svg>") no-repeat right 16px center;-webkit-appearance:none;appearance:none;color:var(--ink)}
.select:focus{outline:none;border-color:var(--ink)}
.coll-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;padding-top:36px;padding-bottom:88px;align-items:start}
.filters{position:sticky;top:92px}
.filters-wrap{max-height:calc(100vh - 116px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.filters-head h2{font-size:15px;letter-spacing:0;font-family:var(--font)}
.filters-head button{font-size:13px;color:var(--green-deep);font-weight:600}
.filters-help{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.45}
.fgroup summary span{display:flex;flex-direction:column;gap:2px}
.fgroup summary small{font-size:12px;font-weight:400;color:var(--faint)}
.fgroup{border-top:1px solid var(--line);padding:14px 0}
.fgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--ink)}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary svg{width:14px;height:14px;transition:transform .2s;color:var(--muted)}
.fgroup[open] summary svg{transform:rotate(180deg)}
.fgroup .opts{margin-top:10px;display:flex;flex-direction:column;gap:2px;overflow:visible}
.opt{display:flex;align-items:center;gap:10px;font-size:14px;padding:5px 6px;margin:0;border-radius:6px;cursor:pointer;color:var(--text);transition:background-color .15s;min-width:0}
.opt>span:first-of-type{min-width:0;overflow-wrap:anywhere}
.opt:hover{background:var(--wash)}
.opt input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;background:#fff;display:grid;place-items:center;flex:none;transition:background-color .15s,border-color .15s}
.opt input::after{content:"";width:9px;height:5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.opt input:checked{background:var(--green);border-color:var(--green)}
.opt input:checked::after{opacity:1}
.opt .n{margin-left:auto;font-size:12.5px;color:var(--faint)}
.opt.zero{opacity:.45}
.results-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px;min-height:32px;flex-wrap:wrap}
.results-bar .active-chips{flex:1 1 auto}
.results-bar .select{margin-left:auto;flex:none;height:38px;font-size:13.5px}
.results-bar .count{font-size:14.5px;color:var(--muted)}
.results-bar .count b{color:var(--ink);font-weight:600}
.active-chips{display:flex;flex-wrap:wrap;gap:6px}
.active-chips .tag{cursor:pointer}
.active-chips .tag:hover{border-color:var(--ink)}
.active-chips .tag svg{width:11px;height:11px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .2s,transform .35s var(--ease),box-shadow .35s;animation:cardIn .5s var(--ease-out) both;animation-delay:calc(var(--i,0)*35ms)}
.card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card .cover{aspect-ratio:16/10;border-bottom:1px solid var(--line)}
.card .cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:17px;line-height:1.3;font-family:var(--font);font-weight:600;letter-spacing:-.015em}
.card p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)}
.card mark,.row mark{background:var(--green-soft);color:inherit;border-radius:2px;padding:0 1px}
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:48px 24px;text-align:center}
.empty h3{font-size:20px}
.empty p{color:var(--muted);margin-top:8px}
.empty .btn{margin-top:18px}
.filters-toggle{display:none}
.sheet-close,.sheet-foot,.filters-backdrop,.fcount{display:none}
@media (max-width:900px){.coll-body{grid-template-columns:minmax(0,1fr);gap:20px}.filters{position:static}.filters-wrap{display:none;max-height:none}.filters-toggle{display:inline-flex;gap:8px}
  .fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green);color:#fff;font-size:12px;font-weight:700}
  /* on a phone the panel is a bottom sheet over the results: the groups stack as accordions in one vertical
     scroll, "Clear all" sits at the top and a "Show N results" button at the bottom closes it */
  .filters.open .filters-backdrop{display:block;position:fixed;inset:0;z-index:79;background:rgba(11,15,23,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .25s var(--ease-out)}
  .filters.open .filters-wrap{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:min(86vh,86dvh);padding:0 0 env(safe-area-inset-bottom);background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(11,15,23,.25);overflow:hidden;animation:sheetUp .32s var(--ease-out)}
  .filters.open.quiet .filters-wrap,.filters.open.quiet .filters-backdrop{animation:none}
  .filters.open .filters-head{position:relative;flex:none;margin:0;padding:22px 16px 12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
  .filters.open .filters-head::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;border-radius:2px;background:var(--line-2);transform:translateX(-50%)}
  .filters.open .filters-head h2{font-size:17px;flex:1}
  .filters.open .filters-head #clearFilters{font-size:14px}
  .filters.open .sheet-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--wash);color:var(--ink)}
  .filters.open .sheet-close svg{width:16px;height:16px}
  .filters.open .fgroups{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 20px}
  .filters.open .fgroup:first-child{border-top:0}
  .filters.open .sheet-foot{display:block;flex:none;padding:12px 20px;border-top:1px solid var(--line);background:#fff}
  .filters.open .sheet-foot .btn{width:100%}
  body.sheet-open{overflow:hidden}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Cover art */
.cover{position:relative;overflow:hidden;background:var(--wash)}
.cover svg{width:100%;height:100%}
.cover .m{transition:transform .5s var(--ease)}
.card:hover .cover .m,.kb-feature:hover .cover .m{transform:translateY(-4px)}

/* ---------- Detail pages ---------- */
/* ---------- Record pages ----------
   Header in two columns: title, summary and tags beside the "At a glance" card. Below, one reading column
   with the body, actions, key dates and sources in the flow, then the Contribute band and related records. */
.detail-head{padding:40px 0 40px;border-bottom:1px solid var(--line)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start}
.detail-title{min-width:0}
.detail-head .lede.sub{margin-top:10px;color:var(--ink);font-weight:500}
.glance{border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);background:rgba(255,255,255,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);overflow:hidden;margin-top:34px}
.glance h3{margin:0;padding:14px 20px 12px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.glance dl{margin:0;padding:4px 20px}
.glance .kv{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.glance .kv:last-child{border-bottom:0}
.glance dt{color:var(--muted)}
.glance dd{margin:0;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.glance dd a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.glance-more{border-top:1px solid var(--line)}
.glance-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:12px 20px;font-size:13.5px;font-weight:600;color:var(--ink);transition:background-color .15s}
.glance-more summary::-webkit-details-marker{display:none}
.glance-more summary:hover{background:var(--wash)}
.glance-more summary small{font-weight:500;color:var(--faint);font-size:12.5px}
.glance-more summary svg{width:14px;height:14px;margin-left:auto;color:var(--muted);transition:transform .2s}
.glance-more[open] summary{border-bottom:1px solid var(--line)}
.glance-more[open] summary svg{transform:rotate(180deg)}
.detail-body{padding:48px 0 48px}
.detail-body .prose{max-width:760px}
.prose .timeline{margin:6px 0 30px 8px}
.prose .timeline li{font-size:15.5px;padding-bottom:16px}
.prose .timeline li b{font-size:15px}
.contrib-band{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:26px 32px;margin-bottom:64px;border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);background:rgba(255,255,255,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.contrib-text h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.contrib-text p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:60ch}
.contrib-actions{display:flex;align-items:center;gap:20px;flex:none;flex-wrap:wrap}
.contrib-actions .link{font-size:14px;color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
@media (max-width:960px){.detail-grid{grid-template-columns:1fr;gap:28px}.glance{margin-top:0}}
@media (max-width:760px){.detail-head{padding:28px 0 28px}.detail-body{padding:32px 0}.contrib-band{flex-direction:column;align-items:flex-start;gap:18px;padding:22px 22px;margin-bottom:48px}.glance .kv{grid-template-columns:112px minmax(0,1fr);gap:10px}}
.crumbs{font-size:13.5px;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 8px;color:var(--faint)}
.detail-head h1{font-size:clamp(32px,4.4vw,54px);margin-top:18px;max-width:22ch;letter-spacing:-.035em;line-height:1.02}
.detail-head .lede{margin-top:18px}
.detail-head .tags{margin-top:22px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;padding-top:44px;padding-bottom:80px;align-items:start}
.prose{max-width:66ch}
.prose p{margin:0 0 18px;font-size:17px;line-height:1.7}
.prose h2{font-size:26px;margin:38px 0 12px;letter-spacing:-.025em}
.prose>h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:6px}
.prose blockquote{margin:24px 0;padding:18px 22px;border-left:3px solid var(--green);background:var(--green-soft);border-radius:0 10px 10px 0;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 32px}
.stat{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 18px;background:#fff}
.stat b{display:block;font-family:var(--display);font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-.04em;line-height:1.05}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}
@media (max-width:600px){.stats{grid-template-columns:1fr}}
.aside{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px}
.facts{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.facts h3{font-size:14px;padding:14px 18px;border-bottom:1px solid var(--line);letter-spacing:0;font-family:var(--font);font-weight:600}
.facts dl{margin:0;padding:6px 18px 10px}
.facts .kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts .kv:last-child{border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;color:var(--ink);font-weight:500}
.facts .cover{aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2);margin-left:6px}
.timeline li{position:relative;padding:0 0 18px 22px;font-size:14.5px}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.timeline li.past::before{background:var(--ink)}
.timeline li.next::before{border-color:var(--green-deep);background:var(--green)}
.timeline li b{display:block;color:var(--ink);font-weight:600}
.timeline li a:hover b{color:var(--green-deep)}
.timeline li span{color:var(--muted)}
.related{padding-bottom:80px}
.related h2{font-size:26px;margin-bottom:22px;letter-spacing:-.025em}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
.pager a{max-width:46%;font-size:14px;color:var(--muted)}
.pager a b{display:block;color:var(--ink);font-weight:600;margin-top:2px}
.pager a:last-child{text-align:right}
.pager a:hover b{color:var(--green-deep)}
@media (max-width:900px){.detail{grid-template-columns:1fr;gap:32px}.aside{position:static}}

/* ---------- Knowledge base + News ---------- */
.kb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.news-month{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;padding:28px 0;border-top:1px solid var(--line)}
.news-month h2{font-size:18px;letter-spacing:-.01em;position:sticky;top:96px;font-family:var(--font);font-weight:600}
.news-item{display:grid;grid-template-columns:70px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}
.news-item time{font-size:13.5px;color:var(--muted);padding-top:4px}
.news-item h3{font-size:19px;line-height:1.3;font-family:var(--font);font-weight:600;letter-spacing:-.015em}
.news-item h3 a:hover{color:var(--green-deep)}
.news-item p{margin-top:6px;color:var(--muted);font-size:15px}
.news-item .tags{margin-top:10px}
@media (max-width:760px){.news-month{grid-template-columns:1fr;gap:12px}.news-month h2{position:static}}
.pill-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.pill-nav button{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 14px;font-size:14px;font-weight:500;color:var(--text);background:#fff;transition:all .2s}
.pill-nav button:hover{border-color:var(--ink)}
.pill-nav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Community page ---------- */
.comm-hero{padding:72px 0 48px;position:relative;overflow:hidden}
.comm-hero::before{content:"";position:absolute;left:40%;top:-50%;width:60vw;max-width:900px;aspect-ratio:1;background:radial-gradient(closest-side,rgba(58,111,181,.18),transparent 70%);pointer-events:none}
.comm-hero .wrap{position:relative}
.comm-hero h1{font-size:clamp(40px,5.4vw,68px);max-width:16ch}
.comm-hero .lede{margin-top:22px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:#fff;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tier.feat{background:var(--dark);color:#fff;border-color:var(--dark)}
.tier.feat h3,.tier.feat .price{color:#fff}
.tier.feat li{color:#C7CEC8}
.tier.feat li i{background:var(--green);color:var(--ink)}
.tier h3{font-size:20px}
.tier .price{font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.04em;margin-top:14px;color:var(--ink);line-height:1}
.tier .price small{font-family:var(--font);font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:6px}
.tier p{margin-top:10px;color:var(--muted);font-size:14px}
.tier.feat p{color:#A6AFC0}
.tier ul{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.tier li{display:flex;gap:10px;font-size:14px;align-items:flex-start;color:var(--text)}
.tier li i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-top:2px}
.tier li i svg{width:10px;height:10px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps3 div{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:#fff}
.steps3 b{display:block;font-family:var(--display);font-size:40px;font-weight:600;color:var(--green-deep);letter-spacing:-.04em;line-height:1}
.steps3 h3{font-size:18px;margin-top:16px}
.steps3 p{font-size:14.5px;color:var(--muted);margin-top:8px}
.coc{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:var(--wash);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px}
.coc ul{margin:0;padding-left:20px;color:var(--text);font-size:15px;line-height:1.6}
@media (max-width:900px){.tiers,.steps3{grid-template-columns:1fr}.coc{grid-template-columns:1fr}}

/* ---------- Signup ---------- */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding-top:64px;padding-bottom:88px;align-items:start}
.signup-copy h1{font-size:clamp(36px,4.6vw,58px)}
.signup-copy .lede{margin-top:20px}
.checklist{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-direction:column;gap:16px}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:16px}
.checklist li i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin-top:1px}
.checklist li i svg{width:12px;height:12px}
.checklist li b{display:block;color:var(--ink);font-weight:600}
.checklist li span{color:var(--muted);font-size:14.5px}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.form h2{font-size:26px;margin-bottom:4px}
.form .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;height:46px;border:1px solid var(--line-2);border-radius:10px;padding:0 14px;font:inherit;font-size:15px;background:#fff;transition:border-color .2s,box-shadow .2s;color:var(--ink)}
.field select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235E655F' stroke-width='1.6'/></svg>") no-repeat right 14px center}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--green-soft)}
.field.err input,.field.err select{border-color:var(--signal)}
.field .msg{display:none;font-size:12.5px;color:var(--signal);margin-top:6px}
.field.err .msg{display:block}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.interests{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:7px 13px;font-size:13.5px;font-weight:500;color:var(--text);background:#fff;transition:all .15s}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--green-deep);outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative;display:block}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;font-size:14px;transition:all .15s}
.seg span b{display:block;font-weight:600;color:var(--ink)}
.seg span small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.seg input:checked+span{border-color:var(--ink);background:var(--green-soft)}
.strength{height:4px;border-radius:2px;background:var(--wash-2);margin-top:8px;overflow:hidden}
.strength i{display:block;height:100%;width:0;background:var(--signal);transition:width .3s var(--ease),background-color .3s}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:20px 0}
.agree input{margin-top:3px;accent-color:var(--green-deep)}
.form .btn{width:100%}
.form .alt{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.success{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .35s}
.success.show{opacity:1;pointer-events:auto}
.success .ring{width:84px;height:84px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin-bottom:22px}
.success .ring svg{width:40px;height:40px}
.success .ring path{stroke:var(--green-deep);stroke-width:3;fill:none;stroke-dasharray:60;stroke-dashoffset:60}
.success.show .ring path{animation:draw .6s var(--ease-out) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h2{font-size:26px}
.success p{color:var(--muted);margin-top:10px;max-width:36ch}
@media (max-width:900px){.signup{grid-template-columns:1fr;gap:40px}}

/* ---------- Global search dialog ---------- */
.gs{position:fixed;inset:0;z-index:70;background:rgba(11,15,23,.4);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:12vh 20px}
.gs.open{display:flex}
.gs-box{width:100%;max-width:660px;background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden;animation:pageIn .25s var(--ease-out);box-shadow:var(--shadow-lg)}
.gs-box .search{max-width:none}
.gs-box .search input{border:0;border-bottom:1px solid var(--line);border-radius:0;height:60px;font-size:17px;box-shadow:none}
.gs-res{max-height:52vh;overflow:auto}
.gs-res a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);align-items:center}
.gs-res a:hover,.gs-res a.sel{background:var(--wash)}
.gs-res b{display:block;font-weight:600;color:var(--ink);font-size:15px}
.gs-res small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.gs-res .k{font-size:12px;color:var(--green-deep);background:var(--green-soft);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.gs-foot{padding:10px 20px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between}
kbd{font:inherit;font-size:11.5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted);background:#fff}

/* ---------- Static pages ---------- */
.static{padding-top:56px;padding-bottom:88px}
.static .prose{margin-top:24px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-size:14px;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:80}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .matrix .cellm{transform:none}
  .h-line,.hero-copy .lede,.hero-actions,.hero-note,.lens-wrap{opacity:1;transform:none}
}

/* ---------- Hero globe ---------- */
.globe-wrap{position:relative;opacity:0;animation:lensIn 1.1s var(--ease-out) .2s forwards}
.globe{position:relative;max-width:520px;margin:0 auto;aspect-ratio:1/1}
.globe svg{width:100%;height:100%}
.globe .spin{animation:globeFloat 7s ease-in-out infinite;transform-origin:50% 50%}
@keyframes globeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.globe .spin{animation:none}}
/* ---------- GoGovern.ai product page keeps the green palette ---------- */
.gg{--green:#7ED957;--green-deep:#1F7A1F;--green-soft:#EAF8E1;--green-line:#BFEAA8;--mint:#C9F2B3}
.gg .btn-primary{color:var(--ink)}
.gg .btn-primary:hover{background:#8EE569;box-shadow:0 8px 24px -10px rgba(126,217,87,.9)}
.gg .hero::before{background:radial-gradient(closest-side,rgba(126,217,87,.22),rgba(126,217,87,.06) 55%,transparent 72%)}
.gg .cta::before{background:radial-gradient(closest-side,rgba(126,217,87,.42),transparent 70%)}
.gg ::selection{background:#7ED957;color:var(--ink)}

/* ---------- Glassmorphism ---------- */
.glass{background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 32px rgba(39,78,141,.14)}
.bg-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0;animation:blobDrift 16s ease-in-out infinite alternate}
.bb1{width:520px;height:520px;right:-140px;top:-80px;background:radial-gradient(circle,var(--mint),transparent 70%)}
.bb2{width:420px;height:420px;left:-160px;bottom:-60px;background:radial-gradient(circle,var(--green-soft),transparent 70%);animation-delay:-6s}
.bb3{width:480px;height:480px;left:30%;top:-120px;background:radial-gradient(circle,var(--mint),transparent 70%);animation-delay:-10s}
.section{position:relative}
.section .wrap{position:relative;z-index:1}
.bento .cell{background:rgba(255,255,255,.6);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-color:rgba(255,255,255,.8)}
.kb-feature,.kb-side .row{position:relative;z-index:1}
.kb-feature{background:rgba(255,255,255,.62);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-color:rgba(255,255,255,.8)}
.mega{background:rgba(255,255,255,.82);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
.gs-box{background:rgba(255,255,255,.78);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%)}
.facts,.events,.form{background:rgba(255,255,255,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.toast{background:rgba(11,15,23,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:900px){ .drawer{background:rgba(255,255,255,.85);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} }
/* ---------- Hero visual ---------- */
.viz-wrap{position:relative;opacity:0;animation:lensIn 1.1s var(--ease-out) .2s forwards}
.viz{position:relative;aspect-ratio:1/1;max-width:560px;margin:0 auto}
.viz-blob{position:absolute;border-radius:50%;filter:blur(56px);opacity:.75;animation:blobDrift 13s ease-in-out infinite alternate}
.viz-blob.a{width:66%;height:66%;left:2%;top:4%;background:radial-gradient(circle,#D3E9FF,transparent 70%)}
.viz-blob.b{width:60%;height:60%;right:-4%;bottom:2%;background:radial-gradient(circle,rgba(58,111,181,.4),transparent 70%);animation-delay:-5s}
.viz-blob.c{width:44%;height:44%;left:34%;top:32%;background:radial-gradient(circle,rgba(39,78,141,.28),transparent 70%);animation-delay:-9s}
@keyframes blobDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(26px,-20px) scale(1.08)}}
.viz-net{position:absolute;inset:6%;width:88%;height:88%}
.viz-net line{stroke:rgba(39,78,141,.3);stroke-width:1.4;stroke-dasharray:5 7;animation:dashflow 2.6s linear infinite}
.viz-net .dot{fill:var(--green-deep)}
.viz-net .halo{fill:rgba(58,111,181,.22);transform-origin:center;transform-box:fill-box;animation:haloPulse 3.2s ease-in-out infinite}
@keyframes haloPulse{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.25);opacity:.9}}
@keyframes dashflow{to{stroke-dashoffset:-24}}
.viz-card{position:absolute;border-radius:16px;padding:13px 15px;font-size:12.5px;line-height:1.4;min-width:210px;max-width:250px;animation:bob 7s ease-in-out infinite;z-index:2}
.viz-card b{display:block;font-weight:600;color:var(--ink);font-size:13px;letter-spacing:-.01em}
.viz-card span{display:block;color:var(--muted);margin-top:3px}
.viz-card small{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--green-deep)}
.viz-card small i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:haloPulse 2.4s ease-in-out infinite}
.viz-card.c1{left:-4%;top:8%}
.viz-card.c2{right:-3%;top:42%;animation-delay:-2.4s}
.viz-card.c3{left:4%;bottom:6%;animation-delay:-4.8s}
@media (max-width:980px){.viz{max-width:440px}.viz-card.c1{left:0}.viz-card.c2{right:0}.viz-card.c3{left:0}}
/* ---------- Row thumbnails ---------- */
.row .thumb{display:block;width:92px;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line);transition:transform .3s var(--ease)}
.row .thumb svg{width:100%;height:100%;display:block}
.row:hover .thumb{transform:translateY(-2px) scale(1.03)}
.row-date{font-size:11.5px;color:var(--muted);margin-top:8px}
/* ---------- Extra motion ---------- */
.group:hover .ico,.mega-item:hover .ico{transform:translateY(-2px) scale(1.06)}
.group .ico,.mega-item .ico{transition:transform .3s var(--ease)}
.st b{transition:transform .3s var(--ease)}
.st:hover b{transform:translateY(-2px)}
.footer li a{display:inline-block;transition:color .15s,transform .2s var(--ease)}
.footer li a:hover{transform:translateX(3px)}
/* ---------- GoGovern hero visual ---------- */
.gg-hero-viz .viz-blob.a{background:radial-gradient(circle,#C9F2B3,transparent 70%)}
.gg-hero-viz .viz-blob.b{background:radial-gradient(circle,rgba(126,217,87,.45),transparent 70%)}
.gg-dash{position:absolute;left:6%;right:6%;top:16%;z-index:1;border-radius:18px;animation:bob 8s ease-in-out infinite}
.gg-hero-viz .viz-card.c2{right:-2%;bottom:8%;top:auto}
@media (prefers-reduced-motion:reduce){.bg-blob,.viz-blob,.viz-card,.viz-net line,.viz-net .halo,.gg-dash{animation:none}}

/* ---------- GoGovern layers & claim ---------- */
.gg-claim{margin-top:22px;background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:26px 30px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.02em}
.gg-layers{display:grid;gap:12px}
.gg-layer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border-radius:var(--r-lg);padding:20px 24px}
.gg-layer h3{font-size:19px}
.gg-layer p{color:var(--muted);font-size:14.5px;margin-top:4px}
.steps3 .pill{display:inline-flex}

/* ================= Glassmorphism v2 ================= */
/* Ambient colour field behind everything, so frosted surfaces have something to blur */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%}
body::before{top:-24vh;right:-14vw;width:68vw;height:68vw;background:radial-gradient(circle,rgba(211,233,255,.45) 0%,rgba(211,233,255,0) 62%);filter:blur(80px);animation:ambient 26s ease-in-out infinite alternate}
body::after{bottom:-28vh;left:-16vw;width:62vw;height:62vw;background:radial-gradient(circle,rgba(58,111,181,.12),transparent 60%);filter:blur(100px);animation:ambient 32s ease-in-out infinite alternate-reverse}
@keyframes ambient{to{transform:translate(3vw,-3vh) scale(1.1) rotate(6deg)}}
/* Floating glass navigation bar */
.nav{height:var(--nav-h);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:12px 14px 0;border-bottom:0}
.nav.scrolled{border-bottom-color:transparent;background:transparent}
.nav>.wrap{height:100%;background:rgba(255,255,255,.52);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.8);border-radius:var(--r-pill);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 28px -12px rgba(39,78,141,.22);padding-left:22px;padding-right:14px;transition:background-color .3s,box-shadow .3s}
.nav.scrolled>.wrap{background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 44px -14px rgba(39,78,141,.32)}
.mega{top:calc(var(--nav-h) + 6px);left:14px;right:14px;background:rgba(255,255,255,.72);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(255,255,255,.8);border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--shadow-lg);overflow:hidden}
.mega .mega-item{opacity:0;transform:translateY(8px)}
.mega.open .mega-item{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.mega.open .mega-item:nth-child(1){transition-delay:30ms}.mega.open .mega-item:nth-child(2){transition-delay:60ms}.mega.open .mega-item:nth-child(3){transition-delay:90ms}.mega.open .mega-item:nth-child(4){transition-delay:120ms}.mega.open .mega-item:nth-child(5){transition-delay:150ms}.mega.open .mega-item:nth-child(6){transition-delay:180ms}
/* Frosted surfaces: consistent inner highlight */
.glass,.bento .cell,.kb-feature,.facts,.events,.form,.gs-box,.gg-layer{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 32px rgba(39,78,141,.12)}
.bento .cell:hover,.kb-feature:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 56px -20px rgba(39,78,141,.3);border-color:rgba(255,255,255,.95)}
.card{background:rgba(255,255,255,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.8)}
.group{background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.8)}
.mock{background:rgba(255,255,255,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.8)}
.coll-head{border-bottom-color:rgba(255,255,255,.7)}
.select,.search input,.field input,.field select{background:rgba(255,255,255,.6)}
/* Motion v2 */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:44%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-primary:hover::after{left:130%}
.cta::before{animation:blobDrift 18s ease-in-out infinite alternate}
.tag{transition:transform .25s var(--ease),background-color .2s,border-color .2s}
a .tag:hover,.tags .tag:hover{transform:translateY(-2px)}
.brand img{transition:transform .35s var(--ease)}
.brand:hover img{transform:translateY(-1px) scale(1.03)}
.icon-btn svg{transition:transform .3s var(--ease)}
.icon-btn:hover svg{transform:scale(1.12)}
.gg-dash .mock-row,.mock-row{transition:background-color .2s}
.gg-dash .mock-row:hover{background:rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){body::before,body::after,.cta::before,.btn-primary::after{animation:none;transition:none}}
@media (max-width:900px){.nav{padding:10px 10px 0}.nav>.wrap{padding-left:16px;padding-right:10px}.mega{left:10px;right:10px}}
body.gg-page::before{background:radial-gradient(circle,rgba(201,242,179,.4) 0%,rgba(201,242,179,0) 62%)}
body.gg-page::after{background:radial-gradient(circle,rgba(126,217,87,.1),transparent 60%)}

/* ---------- Hero image placeholder ---------- */
.img-ph{aspect-ratio:4/3;max-width:560px;margin:0 auto;border-radius:var(--r-xl);border:2px dashed var(--line-2);background:rgba(255,255,255,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;align-content:center;gap:12px;color:var(--faint);text-align:center}
.img-ph svg{width:44px;height:44px}
.img-ph span{font-size:13.5px;font-weight:600;letter-spacing:.01em}
/* ---------- Bento image cards ---------- */
.cell .cimg{flex:1 1 auto;min-height:96px;overflow:hidden;position:relative}
.cell .cimg svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .55s var(--ease)}
.cell:hover .cimg svg{transform:scale(1.05)}
.ctext2{padding:16px 22px 20px}
.ctext2 h3{font-size:24px;letter-spacing:-.025em}
.cell.w2.h2 .ctext2{padding:20px 26px 24px}
.cell.w2.h2 .ctext2 h3{font-size:32px}
.ctext2 p{margin-top:5px;color:var(--muted);font-size:14px;line-height:1.45}

/* ---------- Real imagery ---------- */
.hero-img{max-width:560px;margin:0 auto;border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-lg);opacity:0;animation:lensIn 1.1s var(--ease-out) .2s forwards}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cell .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.cell:hover .cimg img{transform:scale(1.05)}

/* ---------- Contribute ---------- */
.head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.coll-tools .btn-primary{flex:none}

/* ==========================================================
   Loading, empty, error and success states
   ========================================================== */

/* Skeletons: a grey outline of the content that is coming, rather than
   a spinner, so the page keeps its shape and feels quicker. */
.skel{position:relative;overflow:hidden;background:var(--line-2);border-radius:6px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-line{height:11px;margin-bottom:9px}
.skel-line.short{width:42%}
.skel-line.mid{width:68%}
.skel-line.tall{height:15px;margin-bottom:12px}
.skel-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.skel-card .skel-img{height:132px;border-radius:0}
.skel-card .skel-body{padding:16px 18px}
.skel-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-2)}
.skel-row .skel-thumb{width:64px;height:48px;flex:none}
.skel-row .skel-text{flex:1}
.gs-res .skel-row{padding:14px 20px;border-bottom:1px solid var(--line-2)}

/* results being rebuilt after a filter change */
[aria-busy="true"]{opacity:.55;transition:opacity .12s ease}

/* cover photos fade in once decoded, so no half-drawn images */
.cimg img,.cover img,.thumb img{opacity:0;transition:opacity .35s var(--ease)}
.cimg img.ready,.cover img.ready,.thumb img.ready,.no-js .cimg img,.no-js .cover img,.no-js .thumb img{opacity:1}
.cimg,.cover,.thumb{background:var(--line-2)}

/* Empty states: say what happened, then offer the way out. */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:48px 24px;text-align:center}
.empty .empty-ico{width:44px;height:44px;margin:0 auto 16px;border-radius:12px;background:var(--green-soft);
  color:var(--green-deep);display:grid;place-items:center}
.empty .empty-ico svg{width:22px;height:22px}
.empty p{color:var(--muted);margin-top:8px;max-width:46ch;margin-left:auto;margin-right:auto}
.empty .empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.empty .empty-actions .btn{margin-top:0}
.empty .suggest{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.empty .suggest h4{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:10px}
.empty .suggest a{display:block;padding:8px 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2)}
.empty .suggest a:last-child{border-bottom:0}
.empty .suggest a small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.empty .suggest a:hover{color:var(--green-deep)}

/* Not found and other whole-page messages */
.state-page{padding:96px 0 120px;text-align:center}
.state-page .code{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.state-page h1{font-size:clamp(28px,4vw,40px);margin:10px 0 12px;letter-spacing:-.02em}
.state-page .lede{color:var(--muted);max-width:52ch;margin:0 auto}
.state-page .empty-actions{margin-top:26px}
.state-page .suggest{margin-top:34px;text-align:left;max-width:560px;margin-inline:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:#fff}

/* Inline form errors that say how to fix the problem */
.field .msg{display:none;font-size:12.5px;color:var(--signal);margin-top:6px;align-items:flex-start;gap:6px}
.field.err .msg{display:flex}
.field .msg svg{width:14px;height:14px;flex:none;margin-top:1px}
.field.ok input,.field.ok select{border-color:var(--green-line)}
.form-summary{display:block;border:1px solid var(--signal);background:var(--signal-soft);border-radius:var(--r-md);
  padding:0 16px;margin:0 0 18px;font-size:14px;max-height:0;opacity:0;overflow:hidden;border-width:0;transition:max-height .3s var(--ease),opacity .25s,padding .3s,margin .3s}
.form-summary.show{max-height:480px;opacity:1;padding:14px 16px;border-width:1px}
.form-summary.ok{border-color:var(--green-line);background:var(--green-soft)}
.form-summary.ok h4{color:var(--green-deep)}
.form-summary p{margin:6px 0 0;color:var(--ink)}
.form-summary h4{font-size:14px;color:var(--signal);margin-bottom:6px}
.form-summary ol{margin:0;padding-left:18px;color:var(--ink)}
.form-summary a{color:var(--ink);border-bottom:1px solid var(--signal)}

/* Toasts carry their meaning */
.toast{display:flex;align-items:center;gap:9px;max-width:min(520px,calc(100vw - 32px))}
.toast svg{width:16px;height:16px;flex:none}
.toast.ok svg{color:#7BE0A8}
.toast.err{background:var(--signal)}
.toast.err svg{color:#fff}

/* ---------- filter groups with fixed vocabularies ---------- */
.ogroup{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:10px 0 4px}
.ogroup:first-child{padding-top:2px}
.fgroup .more{align-self:flex-start;margin:8px 0 2px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--green-deep);cursor:pointer}
.fgroup .more:hover{text-decoration:underline}

/* ---------- record sections ---------- */
.callout{margin:0 0 26px;padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:8px;background:var(--wash)}
.callout h3{margin:0 0 8px;font-size:15px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.prose ul.links,.facts ul.links{list-style:none;padding:0;margin:0}
.prose ul.links li,.facts ul.links li{margin:0 0 6px;padding:0}
.facts ul.links li{font-size:13px;word-break:break-all}

/* ---------- knowledge-graph connections ---------- */

/* ---------- password fields, sign-in, membership states ---------- */
.pw{position:relative;display:flex;align-items:center}
.pw input{flex:1;padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;border-radius:6px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.pw-toggle:hover,.pw-toggle:focus-visible{color:var(--ink);background:var(--wash);outline:none}
.pw-toggle svg{width:18px;height:18px}
.form.done>*:not(.success){visibility:hidden}
.success{overflow:auto}
.success .req-fields,.done-card .req-fields{margin-top:18px;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;background:#fff;max-width:36ch}
.req-fields h4{font-size:13px;font-family:var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.req-fields ul{margin:0;padding-left:18px;color:var(--ink);font-size:14px;columns:2;column-gap:18px}
.done-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.done-card .ring{width:84px;height:84px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin-bottom:22px}
.done-card .ring svg{width:40px;height:40px}
.done-card .ring path{stroke:var(--green-deep);stroke-width:3;fill:none}
.done-card p{color:var(--muted);margin-top:10px;max-width:38ch}
.login .checklist{display:none}
.nav-signin{font-size:14px;font-weight:500;color:var(--muted);padding:6px 8px;border-radius:8px}
.nav-signin:hover{color:var(--ink);background:var(--wash)}
.member-chip{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;max-width:180px}
.member-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-chip svg{width:18px;height:18px;color:var(--green-deep);flex:none}
.member-chip:hover{border-color:var(--line-2)}
.signout{display:inline-flex;margin:0}
.drawer .member-chip{margin-top:12px;align-self:flex-start}
.drawer .signout{margin-top:10px}
@media (max-width:640px){.nav-tools .nav-signin{display:none}}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 16px 16px;pointer-events:none;transform:translateY(24px);opacity:0;transition:transform .3s var(--ease),opacity .3s}
.cookie.show{transform:none;opacity:1}
.cookie-box{pointer-events:auto;max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:16px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cookie-box p{margin:0;flex:1 1 380px;font-size:14px;color:var(--muted);line-height:1.5}
.cookie-actions{display:flex;gap:8px;flex:none}

/* ---------- uploaded pictures ---------- */
.cover img.up{display:block;width:100%;height:100%;object-fit:cover}
.facts .cover img.up{aspect-ratio:16/9}
.thumb img,.cimg img,.hero-img img{object-fit:cover}

/* ---------- sources, attribution, review badge ---------- */
.prose ul.sources,.sources{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.prose ul.sources li,.sources li{display:flex;flex-direction:column;gap:2px;padding:10px 14px;margin:0;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.prose ul.sources li::before,.sources li::before{content:none}
.sources li a{display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none}
.sources li a:hover .src-url{text-decoration:underline}
.sources .src-host{font-weight:600}
.sources .src-url{display:block;font-size:12px;color:var(--accent,#2F5FA5);overflow-wrap:anywhere}
.report-line{margin-top:14px;font-size:13px}
.attribution{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.tag.review{background:var(--amber-soft,#FFF4DE);color:#8A5A00;border-color:transparent;font-weight:600}
.more{display:flex;justify-content:center;margin:26px 0 6px}
.more .btn .muted{margin-left:6px;font-weight:400}

/* ---------- register listing: a table, not a grid ---------- */
.listing-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.listing{width:100%;border-collapse:collapse;font-size:14px}
.listing thead th{position:sticky;top:0;z-index:1;background:var(--wash);color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.listing th.num,.listing td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.listing tbody tr{border-bottom:1px solid var(--line);transition:background-color .15s}
.listing tbody tr:last-child{border-bottom:0}
.listing tbody tr:hover{background:var(--wash)}
.listing td{padding:14px 16px;vertical-align:top;color:var(--ink)}
.listing td.lead{min-width:280px;max-width:520px}
.listing td.lead a{text-decoration:none;color:var(--ink)}
.listing td.lead .t{display:block;font-weight:600;font-size:15px;line-height:1.35;letter-spacing:-.01em}
.listing td.lead a:hover .t{color:var(--accent,#2F5FA5);text-decoration:underline}
.listing td.lead .s{display:block;margin-top:4px;font-size:13px;color:var(--muted);line-height:1.45}
.listing td.lead .tag.review{margin:6px 0 0;display:inline-block}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.3;background:var(--wash);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
.badge.green{background:var(--green-soft,#E6F4EA);color:var(--green-deep,#1E6B34);border-color:transparent}
.badge.amber{background:var(--amber-soft,#FFF4DE);color:#8A5A00;border-color:transparent}
.badge.red{background:var(--signal-soft,#FDE8E8);color:#A32020;border-color:transparent}
.badge.grey{background:var(--wash);color:var(--muted)}
.listing mark{background:var(--amber-soft,#FFF4DE);padding:0 2px;border-radius:3px}
@media (max-width:820px){
  .listing thead{display:none}
  .listing,.listing tbody,.listing tr,.listing td{display:block}
  .listing tbody tr{padding:14px 16px}
  .listing td{padding:0}
  .listing td.lead{max-width:none;margin-bottom:8px}
  .listing td[data-label]{display:inline-flex;align-items:center;gap:6px;margin:4px 12px 0 0;font-size:13px}
  .listing td[data-label]::before{content:attr(data-label) ':';color:var(--muted)}
  .listing td.num{text-align:left}
}
/* filter options hidden until "Show all" */
.fgroup:not(.expanded) .opt.extra,.fgroup:not(.expanded) .ogroup.extra{display:none}
.more-opts{margin-top:6px;background:none;border:0;padding:4px 6px;color:var(--accent,#2F5FA5);font:inherit;font-size:13px;cursor:pointer;border-radius:6px}
.more-opts:hover{background:var(--wash)}
.hero-figure{margin:0 0 26px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.hero-figure img{display:block;width:100%;height:auto}

/* ---------- Jobs board ---------- */
/* the apply call to action on a job's page, in the reading column above the description */
.apply-band{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;margin:0 0 28px;border:1px solid var(--green-line);border-radius:var(--r-md);background:var(--green-soft)}
.apply-band h3{margin:0 0 4px;font-size:17px;letter-spacing:-.02em}
.apply-band p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.apply-band .btn{flex:none;white-space:nowrap}
.apply-band .btn svg{width:14px;height:14px;margin-left:6px}
@media (max-width:640px){.apply-band{flex-direction:column;align-items:flex-start;gap:14px}}
/* a related filter that has been narrowed by a choice in another filter says so */
.fgroup .fnote{font-size:12px;color:var(--green-deep);background:var(--green-soft);border-radius:6px;padding:4px 8px;margin:0 0 6px;align-self:flex-start}

/* ---------- job application form ---------- */
.apply-band .apply-actions{display:flex;align-items:center;gap:16px;flex:none;flex-wrap:wrap}
.apply-band .apply-actions .link{font-size:14px;color:var(--green-deep);text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;gap:4px}
.apply-band .apply-actions .link svg{width:12px;height:12px}
.apply-band.closed{border-color:var(--line-2);background:var(--wash)}
.jobs-report{margin:-40px 0 56px;font-size:14px}
.apply-form .field{margin-bottom:16px}
.apply-form .field textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink);resize:vertical;min-height:150px;transition:border-color .2s,box-shadow .2s}
.apply-form .field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--green-soft)}
.apply-form .field.err textarea,.apply-form .field.err input[type=file]{border-color:var(--signal)}
.apply-form .field .help{font-size:13px;color:var(--muted);margin:-2px 0 8px;line-height:1.5}
.apply-form .field .opt-label{font-weight:400;color:var(--faint);font-size:12.5px;margin-left:4px}
.apply-form .field input[type=file]{height:auto;padding:10px 14px;font-size:14px;background:var(--wash)}
.apply-form .field.check label{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px;line-height:1.5;cursor:pointer}
.apply-form .field.check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--green)}
.apply-form .field .msg.show{display:flex}
.apply-form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.apply-form{position:relative}
/* the membership card: one message and one call to action */
.cta .btn-lg{height:56px;padding:0 32px;font-size:16px}
.apply-done .success{position:static;padding:24px 8px}

/* footer: profile links */
.footer .social{display:flex;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.footer .social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-2,#d5dbe3);color:var(--ink);background:#fff;transition:color .15s,border-color .15s}
.footer .social a:hover{color:var(--green-deep,#1d4e89);border-color:currentColor}
/* a home picture not yet chosen under Site and SEO settings: a calm block in the site palette */
.img-empty{width:100%;height:100%;min-height:160px;background:linear-gradient(135deg,#dfe7f1,#c4d3e6)}