/* NexPoint User Portal v2: shared styles. Tokens from brand/colors_and_type.css (light canvas). */
:root{
  --font-display:'Montserrat',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
  --bg:#F5F7FA; --bg-alt:#ECEFF3; --surface:#FFFFFF; --surface-input:#FFFFFF;
  --heading:#0E1626;
  --on-surface:#2C3444; --on-surface-var:rgba(44,52,68,.72);
  --outline:rgba(44,52,68,.78); --outline-var:#E3E7ED;
  --border:#E3E7ED; --border-card:#E3E7ED; --border-soft:rgba(14,22,38,.09);
  --blue:#005CC8; --blue-hover:#0066DC; --blue-pressed:#004FAA; --blue-bright:#3D8EEB;
  --green:#8BC53F; --green-deep:#5a8f1d;
  --radius:4px; --radius-lg:8px; --radius-xl:12px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur:200ms;
  --container-max:1360px; --side-pad:clamp(20px,4.5vw,64px); --section-pad:clamp(64px,9vh,120px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--on-surface);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-display)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
::selection{background:rgba(0,92,200,.18);color:#0E1626}
::-webkit-scrollbar{height:6px;width:6px}
::-webkit-scrollbar-thumb{background:rgba(14,22,38,.2);border-radius:9999px}
::-webkit-scrollbar-track{background:transparent}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--side-pad)}

/* eyebrow (brand pattern) + labels */
.eyebrow{font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:currentColor;display:inline-block;flex-shrink:0}
.eyebrow--green{color:var(--green)}
.label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(139,197,63,.7)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14px;padding:13px 22px;border-radius:var(--radius);border:none;cursor:pointer;transition:all var(--dur) var(--ease);text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover);box-shadow:0 10px 28px rgba(0,92,200,.35)}
.btn-primary:active{transform:scale(.97);background:var(--blue-pressed)}
.btn-ghost{background:transparent;color:#0E1626;padding:13px 14px}
.btn-ghost:hover{color:var(--blue)}
.btn-outline{background:transparent;border:1px solid rgba(14,22,38,.2);color:#0E1626}
.btn-outline:hover{border-color:rgba(14,22,38,.4);background:rgba(14,22,38,.03)}
/* A disabled button has to look it (audit plan 015). The register form holds
   its submit until the human check and the terms box are both done, and a
   button that stayed full blue through that read as broken: it could be
   pressed and nothing happened. After the variants, so it outranks them. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn-primary:disabled:hover,.btn-primary[disabled]:hover{background:var(--blue);box-shadow:none}
:is(a,button):focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid rgba(14,22,38,.09)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:12px;line-height:0}
.wordmark img{height:52px;width:auto;display:block}
.draft-pill{font:600 10px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(0,92,200,.10);border:1px solid rgba(0,92,200,.20);border-radius:9999px;padding:5px 10px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font:600 12px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:rgba(14,22,38,.6);transition:color var(--dur) var(--ease);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:#0E1626}
.nav-links a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
@media(max-width:1080px) and (min-width:901px){.wordmark img{height:46px}.nav-links{gap:18px}.nav-links a{font-size:11.5px;letter-spacing:.03em}}
@media(max-width:900px){.nav-links a.hide-m{display:none}}
@media(max-width:600px){.nav{height:62px}.nav-links{gap:10px}.draft-pill{display:none}.nav-links>button.btn{display:none}.nav-links .btn{padding:9px 12px;font-size:11px;letter-spacing:0}[data-np-account-slot]{gap:12px}}

/* hub-page hero: copy left, photo right */
.hub-hero{position:relative;padding:clamp(56px,8vh,96px) 0 clamp(48px,7vh,80px)}
.hub-hero .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.hub-hero h1{font:700 clamp(32px,3.8vw,54px)/1.08 var(--font-display);letter-spacing:-.025em;color:#0E1626;margin:0 0 20px}
.hub-hero h1 em{font-style:normal;color:var(--blue)}
.hub-hero .lede{font:400 clamp(15px,1.25vw,17.5px)/1.6 var(--font-body);color:#4A5462;max-width:560px;margin-bottom:30px}
.hub-hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-card);box-shadow:0 24px 64px rgba(14,22,38,.14)}
.hero-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.hero-media .tag{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid rgba(14,22,38,.08);border-radius:9999px;padding:8px 14px;font:600 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#0E1626}
@media(max-width:960px){.hub-hero .grid{grid-template-columns:1fr}.hero-media img{aspect-ratio:16/9}}

/* breadcrumb trail on hub pages */
.crumbs{display:flex;align-items:center;gap:8px;font:500 12.5px/1 var(--font-body);color:var(--on-surface-var);padding:18px 0 0}
.crumbs a{color:var(--on-surface-var)}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{color:rgba(14,22,38,.3)}
.crumbs b{color:#0E1626;font-weight:600}

/* sections */
.section{padding:var(--section-pad) 0}
.section.alt{background:var(--bg-alt);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.section h2{font:600 clamp(26px,3vw,40px)/1.15 var(--font-display);letter-spacing:-.02em;color:#0E1626;margin:0 0 14px;max-width:760px}
.section h2 em{font-style:normal;color:var(--blue)}
.section .sub{font-size:15px;line-height:24px;color:var(--on-surface-var);max-width:640px;margin-bottom:44px}

/* proof band: thin typographic, no boxes */
.proof{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.proof .container{padding-top:clamp(20px,2.6vh,28px);padding-bottom:clamp(20px,2.6vh,28px)}
.stats{display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,26px) clamp(24px,2.8vw,40px)}
.stat{display:flex;align-items:baseline;gap:10px;flex:0 1 auto;max-width:270px}
.stat b{flex:0 0 auto;font:700 clamp(21px,1.9vw,27px)/1 var(--font-display);letter-spacing:-.02em;color:#0E1626}
.stat span{display:block;font-size:12.5px;color:var(--on-surface-var);line-height:1.4}

/* hub chooser cards (landing): image-led */
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media(max-width:860px){.hub-grid{grid-template-columns:1fr}}
.hub-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
a.hub-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 16px 40px rgba(14,22,38,.10)}
.hub-card .media{position:relative;overflow:hidden}
.hub-card .media img{display:block;width:100%;aspect-ratio:16/8.5;object-fit:cover;filter:saturate(.92);transition:transform 400ms var(--ease),filter 400ms var(--ease)}
a.hub-card:hover .media img{transform:scale(1.04);filter:saturate(1)}
.hub-card .status{position:absolute;top:16px;left:16px;font:600 10.5px/1 var(--font-body);letter-spacing:.08em;padding:7px 12px;border-radius:9999px;text-transform:uppercase;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(14,22,38,.08);color:var(--green-deep);display:inline-flex;align-items:center;gap:7px}
.hub-card .status.soon{color:rgba(14,22,38,.75)}
.hub-card .body{display:flex;flex-direction:column;flex:1;padding:24px 26px 22px}
.hub-card h3{font:600 clamp(19px,1.7vw,23px)/1.25 var(--font-display);letter-spacing:-.015em;color:#0E1626;margin:0 0 8px}
.hub-card p{font-size:14px;line-height:21px;color:var(--on-surface-var);margin:0;flex:1}
.hub-card .go{display:inline-flex;align-items:center;gap:7px;font:600 13.5px/1 var(--font-body);color:var(--blue);margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
.hub-card .go svg{transition:transform var(--dur) var(--ease)}
a.hub-card:hover .go svg{transform:translateX(3px)}
.hub-card.soon .media img{filter:saturate(.5) opacity(.85)}
.hub-card.soon h3{color:rgba(14,22,38,.75)}

/* editorial rows (why / pillars): hairline separated, no card wall */
.rows{border-top:1px solid var(--border)}
.row{display:grid;grid-template-columns:44px minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(14px,3vw,40px);align-items:baseline;padding:clamp(20px,2.8vh,28px) 0;border-bottom:1px solid var(--border)}
.row .material-symbols-outlined{font-size:22px;color:var(--blue);position:relative;top:3px}
.row .lead{font:600 clamp(16px,1.5vw,19px)/1.3 var(--font-display);letter-spacing:-.01em;color:#0E1626}
.row p{margin:0;font-size:14.5px;line-height:23px;color:var(--on-surface-var)}
@media(max-width:860px){
  .row{grid-template-columns:32px minmax(0,1fr);gap:10px 16px}
  .row p{grid-column:2}
}

/* steps: hanging-rule sequence */
.steps-head{font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(14,22,38,.62);margin-bottom:26px}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative;padding:24px 0 0}
.step::before{content:"";position:absolute;top:0;left:0;right:calc(-1 * clamp(14px,1.8vw,24px));height:1px;background:var(--border-card)}
.step:last-child::before{right:0}
.step::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.step .n{display:block;font:600 12px/1 var(--font-body);letter-spacing:.14em;margin-bottom:10px;color:var(--blue)}
.step h3{font:600 15.5px/1.3 var(--font-display);color:#0E1626;margin:8px 0 7px}
.step p{font-size:12.5px;line-height:19px;color:var(--on-surface-var)}
@media(max-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(14px,1.8vw,24px)}}
@media(max-width:980px){.steps.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(14px,1.8vw,24px)}}
@media(max-width:640px){
  .steps,.steps.four,.steps.three{grid-template-columns:minmax(0,1fr);gap:0}
  .step{padding:20px 0 20px 26px}
  .step::before{top:0;left:0;right:auto;bottom:0;width:1px;height:auto}
  .step:last-child::before{right:auto}
  .step::after{top:22px;left:-3px}
}

/* network band: typographic region counts */
.net-band{display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,30px) clamp(28px,3.2vw,48px);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:clamp(20px,2.8vh,30px) 0}
.net{display:flex;align-items:baseline;gap:10px}
.net b{font:700 clamp(22px,2vw,28px)/1 var(--font-display);letter-spacing:-.02em;color:#0E1626}
.net span{font:600 11.5px/1.45 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-var)}

/* panel (matcher / forms) */
.panel{border:1px solid var(--border-card);border-radius:var(--radius-xl);background:var(--surface);padding:clamp(24px,3.2vw,40px);box-shadow:0 12px 30px rgba(14,22,38,.06)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;margin-bottom:8px}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.loc-grid{grid-template-columns:1fr}}
.loc-note{font-size:12.5px;color:var(--outline);margin-bottom:26px}

/* capacity cards */
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.cap-grid{grid-template-columns:1fr}}
.cap{border:1px solid var(--border-card);border-radius:var(--radius-xl);background:var(--surface);padding:22px 22px 20px;display:flex;flex-direction:column;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cap:hover{border-color:var(--blue);transform:translateY(-2px)}
.cap h3{font:600 17px/1.3 var(--font-display);letter-spacing:-.01em;color:#0E1626;margin:0 0 16px}
.cap dl{margin:0 0 18px;flex:1}
.cap dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.cap dl div:last-child{border-bottom:none}
.cap dt{color:var(--on-surface-var);font-weight:500}
.cap dd{color:#0E1626;font-weight:600;text-align:right}
.cap .btn{justify-content:center}

/* locked confidential rows */
.locked{margin:20px 0 0;border:1px dashed rgba(14,22,38,.25);border-radius:var(--radius-lg);padding:18px 20px;background:rgba(14,22,38,.03)}
.locked .label{color:var(--blue);display:flex;gap:8px;align-items:center;margin-bottom:10px}
.locked ul{list-style:none}
.locked li{font-size:13.5px;color:var(--outline);padding:7px 0;border-bottom:1px solid rgba(14,22,38,.08);display:flex;justify-content:space-between;gap:12px}
.locked li:last-child{border-bottom:none}
.blurval{filter:blur(5px);user-select:none;color:var(--on-surface-var)}
.locked .note{font-size:12px;color:var(--outline);margin-top:10px}

/* split feature (photo + content) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.split.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media(max-width:960px){.split,.split.rev{grid-template-columns:1fr}}
.split .media{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-card)}
.split .media img{display:block;width:100%;object-fit:cover;aspect-ratio:4/3}

/* checklist */
.benefits{list-style:none;display:flex;flex-direction:column;gap:10px}
.benefits li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:20px;color:var(--on-surface)}
.benefits li .material-symbols-outlined{font-size:17px;color:var(--green-deep);flex-shrink:0;margin-top:2px}

/* chip list (mill: time of change) */
.chip-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.chip-list{grid-template-columns:1fr}}
.chip-list li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:13px 15px;font-size:13px;line-height:19px;color:var(--on-surface)}
.chip-list li .material-symbols-outlined{font-size:17px;color:var(--green-deep);flex-shrink:0;margin-top:1px}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
/* an author display: rule beats the UA's [hidden], so every component the
   pages hide with the attribute has to say so itself */
.field[hidden]{display:none}
.field label{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-var)}
.field input,.field select,.field textarea{background:var(--surface-input);border:1px solid rgba(14,22,38,.18);border-radius:var(--radius);color:var(--on-surface);font-family:var(--font-body);font-size:14.5px;padding:12px 14px;outline:none;transition:border-color var(--dur) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.field textarea{min-height:90px;resize:vertical}
.field ::placeholder{color:rgba(44,52,68,.72)}
.privacy{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:12.5px;color:var(--outline);line-height:19px}
.privacy svg{flex-shrink:0;margin-top:2px}
.success{text-align:center;padding:30px 10px}
.success .ok{width:56px;height:56px;border-radius:50%;background:rgba(139,197,63,.15);border:1px solid var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--green-deep)}
.success h2{margin-bottom:12px}
.success p{color:var(--on-surface-var);font-size:15px;max-width:420px;margin:0 auto}

/* next-hub navigation */
.next-hub{padding:0 0 var(--section-pad)}
.next-hub a{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:24px;border:1px solid var(--border-card);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.next-hub a:hover{border-color:var(--blue);box-shadow:0 16px 40px rgba(14,22,38,.10)}
.next-hub .txt{padding:26px 0 26px 30px}
.next-hub .kicker{font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-var);display:block;margin-bottom:8px}
.next-hub h3{font:600 clamp(18px,1.8vw,24px)/1.25 var(--font-display);color:#0E1626;display:inline-flex;align-items:center;gap:10px}
.next-hub h3 svg{color:var(--blue);transition:transform var(--dur) var(--ease)}
.next-hub a:hover h3 svg{transform:translateX(4px)}
.next-hub img{display:block;width:100%;height:100%;object-fit:cover;min-height:110px}
@media(max-width:640px){.next-hub a{grid-template-columns:1fr}.next-hub img{display:none}}

/* CTA band */
.post{padding:0 0 var(--section-pad)}
.post-inner{border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:clamp(34px,4.2vw,56px) clamp(24px,4vw,48px);background:var(--surface);transition:border-color var(--dur) var(--ease)}
.post-inner:hover{border-color:var(--blue)}
.post h2{font:600 clamp(24px,3vw,38px)/1.15 var(--font-display);letter-spacing:-.02em;color:#0E1626;max-width:640px}
.post p{margin:14px 0 28px;color:var(--on-surface-var);max-width:560px}

/* footer (brand: stays dark) */
.footer{background:#0d0e0f;border-top:1px solid rgba(255,255,255,.06)}
.footer__inner{max-width:var(--container-max);margin:0 auto;padding:clamp(48px,7vh,80px) var(--side-pad) clamp(24px,3vh,40px);display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,3vw,48px)}
.footer__brand img{height:44px;width:auto;display:block;margin-bottom:24px}
.footer__brand p{font:400 14px/22px var(--font-body);color:rgba(194,198,213,.65);margin:0;max-width:280px}
.footer__col h5{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 20px}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer__col a{font:400 14px/1 var(--font-body);color:rgba(194,198,213,.65);transition:color var(--dur) var(--ease)}
.footer__col a:hover{color:#fff}
.footer__contact-mail{font:500 14px/1 var(--font-body);color:#fff}
.footer__contact{display:flex;flex-direction:column;gap:12px}
.footer__socials{display:flex;gap:8px;margin-top:8px}
.footer__socials a{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);color:#fff}
.footer__socials a:hover{background:rgba(0,92,200,.15);border-color:var(--blue)}
.footer__bar{max-width:var(--container-max);margin:0 auto;padding:24px var(--side-pad);border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer__bar span,.footer__bar a{font:400 12px/1.5 var(--font-body);color:rgba(194,198,213,.72)}
.footer__bar span{max-width:700px}
.footer__bar-links{display:flex;gap:24px;flex-shrink:0}
@media(max-width:760px){.footer__inner{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer__inner{grid-template-columns:1fr}}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(8,9,10,.55);backdrop-filter:blur(6px);z-index:100;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:48px 20px}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid rgba(14,22,38,.1);border-radius:14px;max-width:640px;width:100%;padding:40px;position:relative;animation:rise .25s var(--ease);box-shadow:0 24px 64px rgba(14,22,38,.22)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:600px){.modal{padding:26px 20px}}
.close{position:absolute;top:18px;right:18px;background:#EFF2F6;border:1px solid rgba(14,22,38,.1);color:var(--on-surface-var);width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}
.close .material-symbols-outlined{font-size:18px}
.close:hover{color:#0E1626;border-color:rgba(14,22,38,.3)}
.modal .ref{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--outline);margin-bottom:14px}
.modal h2{font:600 25px/1.25 var(--font-display);letter-spacing:-.01em;color:#0E1626;margin:4px 0 10px}
.modal .body{font-size:14.5px;line-height:23px;color:var(--on-surface-var)}
.modal .form-grid{margin-top:24px}
.modal-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:2px;z-index:60;background:linear-gradient(90deg,var(--blue),var(--green));transform-origin:0 50%;width:100%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .scroll-progress{animation:grow-progress auto linear;animation-timeline:scroll(root)}
}
@keyframes grow-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* mobile hub switcher: hubs stay one tap away below 900px */
.hub-switch{display:none}
@media(max-width:900px){
  .hub-switch{display:flex;gap:8px;overflow-x:auto;padding:10px var(--side-pad);background:rgba(255,255,255,.92);border-bottom:1px solid var(--border-soft);-webkit-overflow-scrolling:touch}
  .hub-switch a{flex:0 0 auto;font:600 12px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:rgba(14,22,38,.72);border:1px solid rgba(14,22,38,.18);border-radius:9999px;padding:9px 15px;white-space:nowrap}
  .hub-switch a[aria-current="page"]{background:rgba(0,92,200,.10);border-color:var(--blue);color:var(--blue)}
}

/* ─── Entrances: ported verbatim from the live site (website/index.html), so the portal
   moves in the same language. The pre-state only exists once JS confirms motion is
   welcome, so no-JS and reduced-motion visitors never meet hidden content. ─── */
html.js-motion .enter { transition: opacity 640ms var(--ease), transform 640ms var(--ease); transition-delay: var(--d, 0ms); }
html.js-motion .enter--up    { opacity: 0; transform: translateY(20px); }
html.js-motion .enter--left  { opacity: 0; transform: translateX(-32px); }
html.js-motion .enter--right { opacity: 0; transform: translateX(32px); }
html.js-motion .enter--rise  { opacity: 0; transform: translateY(38px) scale(0.99); }
html.js-motion .enter.is-in  { opacity: 1; transform: none; }
/* cards that lift on hover: hand the transform back once the entrance has landed */
html.js-motion a.hub-card.enter.is-in:hover,
html.js-motion .cap.enter.is-in:hover { transform: translateY(-2px); }

@media(prefers-reduced-motion:reduce){
  html.js-motion .enter { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 additions, Chris review 2026-08-14
   Action before explanation; the two audiences get their own doors and
   their own pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* two big doors: "are you a lab or a clinician? literally two big fat buttons".
   Image on top, words on solid white: a white scrim over bright clinical photography
   erased both, and small text over a picture is exactly what Chris warned about for
   readers in their 40s, 50s and 60s. */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media(max-width:820px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
a.door:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 16px 40px rgba(14,22,38,.10)}
.door__media{overflow:hidden}
.door__media img{display:block;width:100%;aspect-ratio:16/6.2;object-fit:cover;filter:saturate(.92);transition:transform 400ms var(--ease),filter 400ms var(--ease)}
a.door:hover .door__media img{transform:scale(1.04);filter:saturate(1)}
.door__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.6vw,32px)}
.door__kicker{font:600 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:12px}
.door h3{font:600 clamp(22px,2.3vw,30px)/1.15 var(--font-display);letter-spacing:-.02em;color:#0E1626;margin:0 0 10px}
.door p{font-size:14.5px;line-height:22px;color:var(--on-surface-var);margin:0;flex:1;max-width:400px}
.door .go{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-body);color:var(--blue);margin-top:20px;padding-top:18px;border-top:1px solid var(--border-soft)}
.door .go svg{transition:transform var(--dur) var(--ease)}
a.door:hover .go svg{transform:translateX(3px)}

/* sub-page head: find / offer pages open on the action, not on prose */
.page-head{padding:clamp(30px,4.5vh,52px) 0 clamp(20px,2.6vh,32px)}
.page-head h1{font:700 clamp(29px,3.4vw,46px)/1.1 var(--font-display);letter-spacing:-.024em;color:#0E1626;margin:0 0 14px}
.page-head h1 em{font-style:normal;color:var(--blue)}
.page-head .lede{font:400 clamp(14.5px,1.15vw,16.5px)/1.6 var(--font-body);color:#4A5462;max-width:600px}

/* numbered flow on the find pages: step 1 the ask, step 2 the shortlist, step 3 the request */
.flow{display:flex;flex-direction:column;gap:clamp(22px,3vh,36px)}
.flow-step{position:relative;padding-left:clamp(38px,4vw,52px)}
.flow-step::before{counter-increment:flow;content:counter(flow,decimal-leading-zero);position:absolute;left:0;top:2px;font:600 12px/1 var(--font-body);letter-spacing:.12em;color:var(--blue)}
.flow-step::after{content:"";position:absolute;left:9px;top:22px;bottom:calc(-1 * clamp(22px,3vh,36px));width:1px;background:var(--border-card)}
.flow-step:last-child::after{display:none}
.flow{counter-reset:flow}
.flow-step h2{font:600 clamp(19px,1.9vw,25px)/1.25 var(--font-display);letter-spacing:-.015em;color:#0E1626;margin:0 0 6px}
.flow-step .hint{font-size:13.5px;line-height:21px;color:var(--on-surface-var);margin-bottom:18px;max-width:560px}
.flow-step[hidden]{display:none}
@media(max-width:620px){.flow-step{padding-left:26px}.flow-step::after{left:4px}}

/* location recall: we already asked, so we don't ask twice */
.loc-recall{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border:1px solid rgba(0,92,200,.22);background:rgba(0,92,200,.06);border-radius:var(--radius-lg);padding:13px 16px;margin-bottom:24px;font-size:13.5px;color:var(--on-surface)}
.loc-recall .material-symbols-outlined{font-size:18px;color:var(--blue)}
.loc-recall b{font-weight:600;color:#0E1626}
.loc-recall button{background:none;border:none;color:var(--blue);font:600 13px/1 var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.loc-recall button:hover{color:var(--blue-hover)}

/* cross-border flag on a capacity card: distance alone is misleading */
.xborder{display:inline-flex;align-items:center;gap:5px;font:600 9.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(0,92,200,.10);border:1px solid rgba(0,92,200,.20);border-radius:9999px;padding:4px 8px;margin-left:8px;white-space:nowrap}

/* empty / waiting states inside the matcher */
.cap-empty{border:1px dashed rgba(14,22,38,.22);border-radius:var(--radius-xl);padding:clamp(24px,3vw,36px);background:rgba(14,22,38,.02);text-align:center}
.cap-empty p{font-size:14px;line-height:22px;color:var(--on-surface-var);max-width:440px;margin:0 auto 20px}
/* The hero handoff that lived here (the globe launching up the page while the doors
   rose into its frame) was retired on 14 October 2026: the door now swaps its hero for
   the doors sideways, and the rules for that ride inline with hub/index.html. */

/* ═══════════ the four doors ═══════════
   Ported from the main site's own vocabulary rather than invented here: alternating
   svc-row bands for all four hubs, media and body flipping side each time. No card
   boxes: the rule and the space carry the structure. */
.hub-bands{display:grid;gap:clamp(28px,3.4vw,52px)}
.hub-band{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;text-decoration:none}
/* the media always takes the wider column, so a flipped band matches its neighbours
   instead of rendering a visibly smaller image */
.hub-band--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.hub-band--flip .hub-band__media{grid-column:2;grid-row:1}
.hub-band--flip .hub-band__body{grid-column:1;grid-row:1}

.hub-band__media{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--border-card);box-shadow:0 18px 48px rgba(14,22,38,.10)}
.hub-band__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.92);transition:transform 520ms var(--ease),filter 520ms var(--ease)}
.hub-band:hover .hub-band__media img{transform:scale(1.03);filter:saturate(1)}
.hub-band__media .status{position:absolute;top:16px;left:16px}

/* display type at the strength the rest of the page already uses */
.hub-band h3{font:700 clamp(26px,2.6vw,38px)/1.15 var(--font-display);letter-spacing:-.022em;
  color:#0E1626;margin:0 0 14px}
.hub-band p{font:400 clamp(15px,1.15vw,16.5px)/1.62 var(--font-body);color:#4A5462;
  margin:0;max-width:56ch}
.hub-band .go{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 var(--font-body);
  color:var(--blue);margin-top:22px}
.hub-band .go svg{transition:transform var(--dur) var(--ease)}
.hub-band:hover .go svg{transform:translateX(4px)}

/* Education is a waiting list, not a door: the same band, with its list button */
.hub-band--soon .btn{margin-top:22px}

/* the status pill is shared with the bands, so it keeps its own positioning there */
.status{font:600 10.5px/1 var(--font-body);letter-spacing:.08em;padding:7px 12px;
  border-radius:9999px;text-transform:uppercase;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border:1px solid rgba(14,22,38,.08);color:var(--green-deep);
  display:inline-flex;align-items:center;gap:7px}
.status.soon{color:rgba(14,22,38,.75)}

@media(max-width:900px){
  .hub-band{grid-template-columns:minmax(0,1fr);gap:22px}
  .hub-band--flip .hub-band__media,.hub-band--flip .hub-band__body{grid-column:1;grid-row:auto}
  .hub-band__media{order:-1}
}

[data-np-account-slot]{display:inline-flex;align-items:center;gap:28px}
.np-chip{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--font-body);color:var(--on-surface-var);letter-spacing:.02em}
.np-chip__out,.np-chip__link{background:none;border:none;color:var(--blue);font:600 12px/1 var(--font-body);cursor:pointer;padding:4px 0;text-transform:uppercase;letter-spacing:.05em}
.np-chip__link:hover{color:var(--blue-hover)}
/* "Your account" is a destination, not a footnote (audit plan 015): drawn as
   an outline button. Two classes deep so it outranks `.nav-links a`, which
   would otherwise take its padding and give it the nav's underline. */
.np-chip .np-chip__account{display:inline-flex;align-items:center;border:1px solid var(--blue);border-radius:var(--radius);padding:8px 13px;color:var(--blue);background:transparent;transition:background var(--dur) var(--ease)}
.np-chip .np-chip__account:hover{background:rgba(0,92,200,.08);color:var(--blue)}
.np-chip .np-chip__account[aria-current="page"]{background:rgba(0,92,200,.10)}
/* The chip is the person's name, as the link to the account, with Sign out
   beside it (Will, 5 and 6 October 2026; plan 046). The name keeps the
   outline-button look above and its own case: `.nav-links a` would upper-
   case it. On a phone the name is clipped to fit so Sign out, the only
   sign-out control there is, stays on the line; "Your account" is also a
   pill in the hub-switch bar from 900px down. Sign out never wraps. */
.np-chip .np-chip__name{text-transform:none;letter-spacing:.01em;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.np-chip__out{white-space:nowrap}
@media(max-width:600px){.np-chip .np-chip__name{max-width:110px;padding:8px 10px}}

/* Show-password (plan 046): the eye sits inside the field, after the text. */
.np-eye{position:relative;display:block}
.np-eye input{width:100%;box-sizing:border-box;padding-right:44px}
.np-eye__btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;padding:6px;color:var(--on-surface-var);cursor:pointer;border-radius:var(--radius);display:inline-flex;transition:color var(--dur) var(--ease)}
.np-eye__btn:hover{color:var(--blue)}
.np-eye__btn .material-symbols-outlined{font-size:20px;display:block}

.np-steps{display:flex;gap:8px;margin-bottom:22px}
.np-step-dot{width:26px;height:3px;border-radius:9999px;background:var(--border-card)}
.np-step-dot.is-on{background:var(--blue)}
.np-confirm{border:1px solid var(--border-card);border-radius:8px;background:var(--surface);padding:14px 16px;margin:14px 0 6px;font:400 14px/1.6 var(--font-body)}
.np-sign-error{color:#E5484D;font:500 13px/1.4 var(--font-body);margin-top:10px}
.np-terms-tick{display:flex;align-items:flex-start;gap:10px;font:400 13.5px/1.4 var(--font-body);color:var(--on-surface);cursor:pointer}
.np-terms-tick input{margin-top:2px;accent-color:var(--blue)}
.np-terms-tick a{color:var(--blue);font-weight:600}
.terms-scroll{max-height:240px;overflow-y:auto;border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;margin:14px 0;background:var(--bg-alt);font-size:13.5px;line-height:1.6;color:var(--on-surface)}
.terms-scroll h1,.terms-scroll h2,.terms-scroll h3{font:600 14.5px/1.3 var(--font-display);color:#0E1626;margin:12px 0 6px}
.terms-scroll h1:first-child,.terms-scroll h2:first-child,.terms-scroll h3:first-child{margin-top:0}
.terms-scroll p{margin:0 0 10px}
.terms-scroll ul{margin:0 0 10px 18px}
.terms-scroll li{margin-bottom:5px}

/* ═══════════════════════════════════════════════════════════════════════
   Hub v2 (spec 2026-09-03) - the components the listing form, the find flow
   and the dashboard are built from. Tokens only; nothing new is invented
   here that the page above does not already use.
   ═══════════════════════════════════════════════════════════════════════ */

/* type-ahead: a combobox that keeps its popup inside the field it belongs to */
.ta{position:relative;display:flex;flex-direction:column;gap:8px}
.ta-chips{display:flex;flex-wrap:wrap;gap:8px}
.ta-chip{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--font-body);color:#0E1626;background:rgba(0,92,200,.08);border:1px solid rgba(0,92,200,.22);border-radius:9999px;padding:7px 8px 7px 13px}
.ta-chip button{background:none;border:none;color:var(--blue);cursor:pointer;font:600 16px/1 var(--font-body);padding:0 4px;border-radius:9999px}
.ta-chip button:hover{color:var(--blue-pressed)}
.ta-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:5px;list-style:none;padding:6px;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:0 16px 40px rgba(14,22,38,.14);max-height:250px;overflow-y:auto}
.ta-item{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 14px/1.4 var(--font-body);color:var(--on-surface);padding:9px 12px;border-radius:var(--radius);cursor:pointer}
.ta-item:hover,.ta-item.is-active{background:rgba(0,92,200,.08);color:#0E1626}
.ta-item__free{font:600 10px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}

/* a repeating machine row on the listing form */
.mrow{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--surface);padding:18px;margin-bottom:14px}
.mrow .field.full{grid-column:1/-1}
.mrow__rm{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--outline);font:600 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:2px}
.mrow__rm:hover{color:#E5484D}
@media(max-width:600px){.mrow{grid-template-columns:1fr}}

/* something you pick: a chip on a form, or a whole capacity card in the find flow */
.pick{position:relative;display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font-body);color:var(--on-surface);background:var(--surface);border:1px solid var(--border-card);border-radius:9999px;padding:10px 16px;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.pick:hover{border-color:var(--blue)}
.pick.is-on{background:rgba(0,92,200,.10);border-color:var(--blue);color:var(--blue)}
.pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pick input:focus-visible+span{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:4px}
/* plan 045: the fixed "Print +" chip (a statement, not a choice) and the
   cost panel that opens the listing form */
.pick.is-fixed{cursor:default;border-style:solid;background:rgba(0,92,200,.12);color:var(--blue);font-weight:700}
.pick.is-fixed input{display:none}
/* The form panel's top edge sits level with the first lede, which opens the
   left column under the full-width heading (Will, 12 Oct 2026, plan 055). */
.offer-split .lede{margin:0 0 14px}
.offer-split .lede + .benefits,.offer-split .lede + .lede + .benefits{margin-top:22px}
/* a whole shortlist card is the control: .pick's pill shape and row layout
   are undone here, so the card keeps .cap's column and the hidden checkbox
   still drives .is-on */
.cap.pick{display:flex;flex-direction:column;align-items:stretch;text-align:left;border-radius:var(--radius-xl);padding:22px 22px 20px;font:inherit;color:inherit;background:var(--surface)}
.cap.pick.is-on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.cap.pick.is-off{opacity:.5;cursor:not-allowed}
.cap.pick.is-off:hover{border-color:var(--border-card);transform:none}
.cap__head{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cap__num{font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-var)}
.badge-nomatch{display:inline-flex;align-items:center;font:600 10px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#8A5300;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.38);border-radius:9999px;padding:5px 10px;white-space:nowrap}
.cap__tick{display:inline-flex;align-items:center;gap:9px;margin-top:auto;font:600 13px/1.3 var(--font-body);color:var(--blue)}
.cap__tick::before{content:"";width:17px;height:17px;flex:0 0 17px;border:1px solid rgba(14,22,38,.28);border-radius:5px;background:var(--surface)}
.cap.pick.is-on .cap__tick::before{border-color:var(--blue);background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/12px no-repeat}
.pick-summary{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--on-surface)}
.pick-summary li{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border-soft)}
.pick-summary li:last-child{border-bottom:none}
.pick-summary b{font:600 11px/1.5 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-var)}
.pickbar{position:sticky;bottom:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:14px 18px;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:0 -8px 30px rgba(14,22,38,.10);font:600 13.5px/1.4 var(--font-body);color:#0E1626}
.pickbar[hidden]{display:none}
.pickbar__go{display:inline-flex;align-items:center;gap:12px}
.pickbar__dot{color:var(--outline);font-weight:400}

/* where an introduction has got to */
.status-chain{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 2px;padding:0;width:100%}
.status-chain li{position:relative;display:flex;flex-direction:column;gap:9px;padding-right:12px;font:600 11px/1.35 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:rgba(14,22,38,.62)}
.status-chain li::before{content:"";position:relative;z-index:1;width:13px;height:13px;border-radius:50%;border:2px solid rgba(14,22,38,.22);background:var(--surface)}
.status-chain li::after{content:"";position:absolute;top:5.5px;left:13px;right:0;height:2px;background:rgba(14,22,38,.10)}
.status-chain li:last-child::after{display:none}
.status-chain li.is-done{color:var(--on-surface)}
.status-chain li.is-done::before{background:var(--blue);border-color:var(--blue)}
.status-chain li.is-done::after{background:var(--blue)}
.status-chain li.is-current{color:var(--blue)}
.status-chain li.is-current::before{background:#fff;border-color:var(--blue)}
.status-chain li.is-green::before{background:var(--green);border-color:var(--green)}
.status-chain li.is-stop{color:#C2363B}
.status-chain li.is-stop::before{background:#E5484D;border-color:#E5484D}
@media(max-width:640px){
  .status-chain{grid-template-columns:1fr}
  .status-chain li{flex-direction:row;align-items:center;gap:12px;padding:0 0 14px}
  .status-chain li:last-child{padding-bottom:0}
  .status-chain li::after{top:13px;bottom:0;left:5.5px;right:auto;width:2px;height:auto}
}

/* the host's declaration of what an introduction actually turned into */
.decl-table{width:100%;border-collapse:collapse;font-size:13.5px}
.decl-table th{text-align:left;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-var);padding:0 12px 10px 0;border-bottom:1px solid var(--border);white-space:nowrap}
.decl-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--border-soft);color:var(--on-surface);vertical-align:middle}
.decl-table tr:last-child td{border-bottom:none}
.decl-table input,.decl-table select{max-width:160px;background:var(--surface-input);border:1px solid rgba(14,22,38,.18);border-radius:var(--radius);color:var(--on-surface);font-family:var(--font-body);font-size:14px;padding:9px 11px;outline:none;transition:border-color var(--dur) var(--ease)}
.decl-table input:focus,.decl-table select:focus{border-color:var(--blue)}

/* small cards: the hubs and boards a person has not opened yet */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
a.tile:hover{border-color:var(--blue);transform:translateY(-2px)}
.tile h4{font:600 16px/1.3 var(--font-display);letter-spacing:-.01em;color:#0E1626;margin:0}
.tile p{flex:1;margin:0;font-size:13.5px;line-height:20px;color:var(--on-surface-var)}
.tile .go{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font:600 13px/1 var(--font-body);color:var(--blue)}

/* verified first-hand, and nothing else earns this */
.badge-verified{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);background:rgba(139,197,63,.12);border:1px solid rgba(139,197,63,.3);border-radius:9999px;padding:5px 10px;white-space:nowrap}

/* something to put right before you can act: unconfirmed email, listing under review */
.notice-warn{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.4 var(--font-body);color:#8A5300;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.38);border-radius:9999px;padding:7px 13px}
button.notice-warn,a.notice-warn{cursor:pointer}
button.notice-warn:hover,a.notice-warn:hover{background:rgba(245,166,35,.22)}
.notice-warn--block{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border-radius:var(--radius-lg);padding:14px 16px;font-weight:500;font-size:13.5px;line-height:20px}

/* a note under a field: the answer to "why are you asking me this?" */
.np-hint{display:block;margin-top:5px;font:400 12px/1.5 var(--font-body);letter-spacing:0;text-transform:none;color:var(--outline)}
.np-hint[hidden]{display:none}

/* the site map on account creation (plan 046): a search row, the map, then
   the three fields it fills */
.np-map{height:260px;border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;margin:0 0 14px;background:#e9edf2}
.np-map-search{display:flex;gap:8px;margin:0 0 10px}
.np-map-search input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--on-surface);font-family:var(--font-body);font-size:14.5px;padding:12px 14px;outline:none}
.np-map-search input:focus{border-color:var(--blue)}
.np-map-search[hidden]{display:none}
@media(max-width:560px){.np-map{height:200px}}

/* the match maps (plan 052, items 23 and 24): the seeker's shortlist above
   its cards, and the provider's pair on an offer. Pins are numbered as the
   cards are; a same-town pin shows how many sites are there; "You" is the
   seeker's town (or, on an offer, the lab's own). */
.np-map--match{height:340px;margin:0 0 20px}
.np-map--pair{height:220px;margin:12px 0 4px}
.np-map[hidden]{display:none}
@media(max-width:560px){.np-map--match{height:260px}.np-map--pair{height:180px}}
.np-pin-wrap{background:none;border:0}
.np-pin{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 9px;border-radius:9999px;background:var(--blue);color:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(14,22,38,.28);font:700 13px/1 var(--font-display);white-space:nowrap;cursor:pointer}
.np-pin--group{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.np-pin--you{background:#0E1626;font-size:11.5px;letter-spacing:.02em;cursor:default}
.np-pin--ask{background:var(--green-deep);font-size:11.5px;letter-spacing:.02em;cursor:default}
.np-pin--beside{transform:translate(calc(-100% - 20px),-50%)}
.np-pin.is-on{background:var(--green);color:#0E1626;border-color:#fff}
.leaflet-marker-icon:focus-visible .np-pin{outline:3px solid var(--blue-bright);outline-offset:2px}
.np-pop{font-family:var(--font-body);color:#0E1626}
.np-pop__head{margin:0 0 8px;font:600 13.5px/1.35 var(--font-body)}
.np-pop__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.np-pop__list li{display:grid;gap:6px;font-size:12.5px;line-height:1.4;color:var(--on-surface-var)}
.np-pop__go{padding:8px 14px;font-size:12.5px;justify-self:start}

/* the listing form: sections, a wrapping row of pick chips, and the
   read-only face a revision under review is shown in */
.lsec{margin-top:28px}
.lsec:first-child{margin-top:0}
.lsec__h{font:600 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-var);margin-bottom:14px}
.lgroup{display:flex;flex-wrap:wrap;gap:10px}
.lread{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 20px;margin:0;font-size:13.5px;line-height:20px}
.lread dt{color:var(--on-surface-var);font-weight:500}
.lread dd{margin:0;color:#0E1626;overflow-wrap:anywhere}
@media(max-width:560px){.lread{grid-template-columns:1fr;gap:0}.lread dd{margin-bottom:10px}}
.lmach{border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--surface);padding:13px 15px;margin-bottom:10px;font-size:13.5px;line-height:20px;color:var(--on-surface-var);overflow-wrap:anywhere}
.lmach b{color:#0E1626}

/* The wall (one-door register, 2026-09-17): a walled page is hidden until the
   account module has answered; a stranger is redirected before it shows. */
body[data-np-wall]:not([data-np-open]){visibility:hidden}
/* The door's stranger-only lines hide once someone is signed in. */
body[data-np-signed-in] .np-stranger{display:none}
/* And their counterpart (audit plan 015): a line only an account holder sees,
   so the door stops inviting a signed-in visitor to sign in and points them
   at their account instead. */
.np-holder{display:none}
body[data-np-signed-in] .np-holder{display:block}

/* The map's OpenStreetMap credit: present, small and quiet (plan 046, Will's
   ask of 8 Oct). The Leaflet badge is off in site-map.js. */
.np-map .leaflet-control-attribution{font:10px/14px Inter,system-ui,sans-serif;color:#5b6573;background:rgba(255,255,255,.72);padding:1px 5px}
.np-map .leaflet-control-attribution a{color:#5b6573;text-decoration:underline}

/* The door's account-holder line is a button (Will, 12 Oct 2026, plan 055):
   Create your hub account first, the caption beside it, Sign in as a line
   underneath. .np-stranger still hides it for a signed-in visitor. */
.hero-join{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.hero-join .btn-lg{font-size:15px;padding:15px 24px}
.hero-join .np-hint{display:inline;margin:0;font-size:13.5px;color:var(--on-surface-var)}
.hero-join p{flex-basis:100%;margin:0;font-size:13.5px;color:var(--on-surface-var)}

/* Hub landing hero: the two choice cards (plan 055). The door keeps its
   white card and hover; without a picture the body carries it all. */
.hero-choice{display:grid;gap:16px}
.door--row .door__body{padding:clamp(20px,2.2vw,28px)}
.door--row h3{font-size:clamp(20px,1.9vw,24px)}
.door--row p{max-width:none}
/* The world map (hub/assets/world-map.js, plan 055): the card it sits in and
   the two pills under the pick-mode map. index.html carries the same rules
   inline, as it does not load this sheet. */
.wm-card{background:#fff;border:1px solid rgba(14,22,38,.08);border-radius:20px;padding:14px;box-shadow:0 8px 24px rgba(14,22,38,.06)}
.wm-card svg{display:block;width:100%;height:auto}
.wm-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wm-pill{font:600 12px/1 var(--font-body);padding:8px 14px;border-radius:999px;color:var(--blue);background:#fff;border:1px solid rgba(0,92,200,.35);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.wm-pill:hover{border-color:var(--blue)}
.wm-pill.is-on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* The need box on the pair map (plan 055, decision 7): what the seeker asked
   for, pinned open above the Request pin on every provider row, in the
   page's own card rather than Leaflet's. The map is taller than the plain
   pair map so the open box never clips. */
.np-map--need{height:440px}
@media(max-width:560px){.np-map--need{height:400px}}
.np-need-pop .leaflet-popup-content-wrapper{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border-card);box-shadow:0 10px 28px rgba(14,22,38,.14);padding:0}
.np-need-pop .leaflet-popup-content-wrapper{text-align:left}
.np-need-pop .leaflet-popup-content{margin:0;padding:12px 14px 11px;font:400 12.5px/1.45 var(--font-body);color:#0E1626}
.np-need-pop .leaflet-popup-tip-container{margin-top:-1px}
.np-need-pop .leaflet-popup-tip{background:var(--surface);box-shadow:0 3px 6px rgba(14,22,38,.08)}
.np-need{display:block;min-width:196px}
.np-need__head{display:block;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin:0 0 6px}
.np-need__where{display:block;font:600 13.5px/1.3 var(--font-display);color:#0E1626;margin:0 0 8px}
.np-need dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.np-need dt{color:var(--on-surface-var);font-weight:500;white-space:nowrap}
.np-need dd{margin:0;color:#0E1626;font-weight:600;overflow-wrap:anywhere}
.np-need__notes{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--border-soft);color:var(--on-surface);white-space:pre-line}
.np-need__notes b{display:block;font:500 11px/1.6 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-var)}

/* An introduction the reader was sent to (#intro-<id>, from the offer email
   or the Waiting on you list, plan 055): a soft blue outline on that row. */
.acct-row[id]{scroll-margin-top:100px}
.acct-row.is-attention{border-color:rgba(0,92,200,.45);box-shadow:0 0 0 3px rgba(0,92,200,.18),0 8px 22px rgba(0,92,200,.08)}
/* Plan 055, batch C: the listing form's ship map sits above its chips; the
   find page tags its best three cards, and every ranked site is a pin, the
   best three filled, the rest outlined (the shared count pins keep their
   outline unless one of the three is under them). .np-pin.is-on, above,
   still wins for the pin that is picked. */
#shipsToMap{margin-bottom:14px}
.badge-best{display:inline-flex;align-items:center;font:600 10px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#5a8f1d;background:rgba(139,197,63,.10);border:1px solid rgba(139,197,63,.20);border-radius:9999px;padding:5px 10px;white-space:nowrap}
.np-pin--more{background:#fff;color:var(--blue);border-color:var(--blue)}
.np-pin--best{background:var(--blue);color:#fff;border-color:#fff}

/* The hub films (12 October 2026): one short film per hub page, in the overview film's family. */
.film__frame{margin:clamp(20px,3vh,28px) auto 0;max-width:min(860px,calc((100vh - 300px) * 16 / 9));border:1px solid #E3E7ED;border-radius:12px;overflow:hidden;background:#F5F7FA;box-shadow:0 24px 64px rgba(14,22,38,.14)}
.film__video{display:block;width:100%;aspect-ratio:16/9;background:#F5F7FA}
.film__note{margin:12px auto 0;max-width:min(860px,calc((100vh - 300px) * 16 / 9));font-size:13px;line-height:1.5;color:#4A5462;text-align:center}

/* The globe gives way to the film (plan 055, point 6; Will, 12 and 13 October
   2026). The film's frame is the hero's right-hand column from the start, so
   the page never moves; the globe sits over it at the frame's own height,
   then rises and fades, and the film arrives where it stood. Pure CSS, so the
   film is revealed even if the scripts never load; html.np-reveal is set in
   the head, and without it (reduced motion, no script) there is no globe and
   the film simply stands there. One play button: sound is on when it is
   pressed, and the browser's own controls take over from there. */
.hero-reveal{position:relative}
.hero-film{position:relative;margin:0 auto;max-width:none}
.hero-film .film__video{background:#0d1424}
.hero-film__play{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px 14px 18px;border:0;border-radius:9999px;cursor:pointer;background:var(--blue);color:#fff;
  font:600 15px/1 var(--font-body);box-shadow:0 12px 32px rgba(0,92,200,.35);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hero-film__play:hover{background:var(--blue-hover)}
.hero-film__play:active{transform:scale(.97)}
.hero-film__play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-film.is-playing .hero-film__play{display:none}
.hero-globe{display:none}
html.np-reveal .hero-globe{display:block;position:absolute;inset:0;margin:auto;height:100%;max-height:520px;aspect-ratio:1/1;
  border-radius:9999px;background:#0d1424;overflow:hidden;pointer-events:none;
  animation:np-globe-leave 1.2s cubic-bezier(.5,0,.2,1) .7s forwards}
html.np-reveal .hero-globe canvas{display:block;width:100%;height:100%}
html.np-reveal .hero-film{animation:np-film-arrive .9s cubic-bezier(.2,.8,.2,1) 1.25s both}
@keyframes np-globe-leave{
  from{opacity:1;transform:none;visibility:visible}
  to{opacity:0;transform:translate3d(0,-70%,0) scale(.9);visibility:hidden}}
@keyframes np-film-arrive{
  from{opacity:0;transform:translate3d(0,14px,0);visibility:hidden}
  to{opacity:1;transform:none;visibility:visible}}
@media (prefers-reduced-motion:reduce){
  html.np-reveal .hero-globe{display:none;animation:none}
  html.np-reveal .hero-film{animation:none}
}