/* niche.css — the design of Gabriel's niche page (content/site/niche-medical-2026-10-13.html), made a
   stylesheet. SOURCE: edit here, then `node website/build-niche.mjs`; website/assets/css/niche.css is
   generated and overwritten by every build.

   EVERY CLASS IS `nx-` PREFIXED AND EVERY ELEMENT RULE IS SCOPED TO `.nx` (the page's <main>). These
   pages also load site.css for the shared header, drawer and footer, and 27 of the page's 44 class
   names (.card .btn .price .msg .step .tag …) already mean something else there — unprefixed, the
   other sheet's properties leak into this design wherever this one does not set them.

   NO INLINE style= ANYWHERE in the sources (the strict CSS contract, design skill): the compiler
   refuses a page carrying one. Every one-off the original page wrote inline is a class below. */

.nx{--nx-card:#121C30;--nx-bg2:#0E1626;--nx-line:#22304A;--nx-ink:#F4F2EC;--nx-muted:#AEB8C9;--nx-soft:#8A96AB;
  --nx-accent:#4FD18B;--nx-accent-ink:#06241A;--nx-warn:#F2B35B;--nx-radius:16px;--nx-max:1120px;
  display:block;color:var(--nx-ink);font-size:17px;line-height:1.6}
.nx a{color:inherit}
.nx-wrap{max-width:var(--nx-max);margin:0 auto;padding:0 20px}
.nx-narrow{max-width:820px}

/* sections — site.css gives every <section> a top border and its own padding; this design draws the
   rule BELOW each section instead, so the top one is cleared rather than doubled. */
.nx section{padding:88px 0;border-top:0;border-bottom:1px solid var(--nx-line)}
.nx-eyebrow{color:var(--nx-accent);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 12px}
.nx-eyebrow.nx-warn{color:var(--nx-warn)}
.nx h1{font-size:clamp(34px,5.4vw,60px);line-height:1.06;letter-spacing:-1.2px;margin:0 0 20px;font-weight:800}
.nx h2{font-size:clamp(27px,3.6vw,40px);line-height:1.15;letter-spacing:-.6px;margin:0 0 16px;font-weight:700}
.nx h3{font-size:20px;line-height:1.3;margin:0 0 8px;font-weight:700}
.nx p{margin:0}
.nx-lead{font-size:20px;color:var(--nx-muted);margin:0 0 28px;max-width:640px}
.nx-muted{color:var(--nx-muted)}
.nx-grid{display:grid;gap:20px}
.nx-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nx-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nx-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.nx-spaced{margin-top:28px}
.nx-gap28{gap:28px}
.nx-gap48{gap:48px}
@media (max-width:980px){.nx-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.nx-g2,.nx-g3,.nx-g4{grid-template-columns:1fr}.nx section{padding:64px 0}}
.nx-card{background:var(--nx-card);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:28px}
.nx-card p{margin:0;color:var(--nx-muted)}

/* buttons */
.nx-btn{display:inline-block;background:var(--nx-accent);color:var(--nx-accent-ink);font-weight:700;text-decoration:none;
  padding:14px 22px;border-radius:12px;border:0;cursor:pointer;font-size:16px;font-family:inherit;line-height:1.3}
.nx-btn:hover{filter:brightness(1.07)}
.nx-btn.nx-ghost{background:transparent;color:var(--nx-ink);border:1px solid var(--nx-line)}
.nx-btn.nx-block{width:100%}
.nx-btn[disabled]{opacity:.6;cursor:default;filter:none}
.nx :focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px}

/* hero */
.nx-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:900px){.nx-hero{grid-template-columns:1fr}}
.nx-pill{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--nx-line);border-radius:999px;padding:6px 14px;
  font-size:14px;color:var(--nx-muted);margin-bottom:20px}
.nx-pill b{color:var(--nx-accent)}
.nx-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nx-fine{font-size:14px;color:var(--nx-soft);margin-top:14px}

/* the WhatsApp mock */
.nx-phone{background:#0B141A;border:1px solid var(--nx-line);border-radius:24px;padding:18px;max-width:420px;margin-left:auto;width:100%}
@media (max-width:900px){.nx-phone{margin:0 auto}}
.nx-phone-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #1F2C34;margin-bottom:14px;font-size:14px;line-height:1.35}
.nx-online{color:var(--nx-soft);font-size:12px}
.nx-avatar{width:34px;height:34px;border-radius:50%;background:var(--nx-accent);color:var(--nx-accent-ink);display:grid;place-items:center;font-weight:800;flex:none}
.nx-msg{max-width:84%;padding:9px 12px;border-radius:12px;margin:8px 0;font-size:14.5px;line-height:1.45}
.nx-in{background:#202C33}
.nx-out{background:#005C4B;margin-left:auto}
.nx-sys{margin:12px auto;text-align:center;font-size:12.5px;color:var(--nx-warn);background:rgba(242,179,91,.1);
  border:1px dashed rgba(242,179,91,.45);border-radius:10px;padding:7px 10px;max-width:92%}

/* steps */
.nx-step{position:relative;padding-top:52px}
.nx-step-n{position:absolute;top:24px;left:28px;font-weight:800;color:var(--nx-accent);font-size:15px}

/* check lists */
.nx-checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.nx-checks li{padding-left:30px;position:relative;color:var(--nx-muted)}
.nx-checks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:9px;border-left:3px solid var(--nx-accent);
  border-bottom:3px solid var(--nx-accent);transform:rotate(-45deg)}
.nx-checks.nx-no li::before{border:0;width:14px;height:3px;background:var(--nx-warn);top:12px;transform:none}

/* pricing */
.nx-price-card{background:var(--nx-card);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:32px}
.nx-price-card.nx-main{border-color:var(--nx-accent);box-shadow:0 0 0 1px var(--nx-accent) inset}
.nx-price{font-size:44px;font-weight:800;letter-spacing:-1px;margin:6px 0 4px;line-height:1.2}
.nx-price small{font-size:17px;font-weight:600;color:var(--nx-muted)}
.nx-price-note{color:var(--nx-muted);margin:0 0 16px}
.nx-tag{display:inline-block;background:rgba(79,209,139,.12);color:var(--nx-accent);font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px}
.nx-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
.nx-timeline div{padding:18px 20px;border-right:1px solid var(--nx-line)}
.nx-timeline div:last-child{border-right:0}
.nx-timeline b{display:block;font-size:14px;color:var(--nx-accent);text-transform:uppercase;letter-spacing:1px}
@media (max-width:820px){.nx-timeline{grid-template-columns:1fr}.nx-timeline div{border-right:0;border-bottom:1px solid var(--nx-line)}.nx-timeline div:last-child{border-bottom:0}}

/* roadmap */
.nx-road{display:flex;gap:16px;align-items:flex-start}
.nx-road p{margin:0;color:var(--nx-muted)}
.nx-dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--nx-soft);margin-top:7px}
.nx-road.nx-live .nx-dot{background:var(--nx-accent);border-color:var(--nx-accent)}
.nx-status{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--nx-soft)}
.nx-road.nx-live .nx-status{color:var(--nx-accent)}

/* the application form */
.nx-form-card{padding:32px}
@media (max-width:600px){.nx-form-card{padding:22px 18px}}
.nx-lead-sm{color:var(--nx-muted);margin:0 0 28px}
.nx form{display:grid;gap:18px}
.nx label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.nx-hint{font-weight:400;color:var(--nx-soft);font-size:13.5px}
.nx input[type=text],.nx input[type=tel],.nx input[type=email],.nx select,.nx textarea{width:100%;background:var(--nx-bg2);color:var(--nx-ink);
  border:1px solid var(--nx-line);border-radius:10px;padding:12px 14px;font:inherit;font-size:16px}
.nx input:focus,.nx select:focus,.nx textarea:focus{outline:2px solid var(--nx-accent);outline-offset:1px;border-color:transparent}
.nx-opts{display:flex;flex-wrap:wrap;gap:8px}
.nx-opts label{font-weight:500;margin:0;display:flex;gap:8px;align-items:center;background:var(--nx-bg2);border:1px solid var(--nx-line);
  border-radius:999px;padding:8px 14px;cursor:pointer;font-size:15px}
.nx-opts input{accent-color:var(--nx-accent)}
.nx-row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.nx-row2{grid-template-columns:1fr}}
.nx label.nx-consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--nx-muted);margin:0}
.nx-consent input{margin-top:4px;accent-color:var(--nx-accent);flex:none}
.nx-consent a{color:var(--nx-accent)}
.nx-err{color:var(--nx-warn);font-size:14px;min-height:20px}
.nx-err a{color:var(--nx-accent)}
/* A hidden panel must stay hidden whatever display a class gives it: [hidden] is only a UA default,
   and a class rule outranks it (marketing-site fails_when, the help filter). */
.nx-thanks{text-align:center;padding:48px 24px}
.nx-thanks[hidden],.nx form[hidden]{display:none}
.nx-thanks p{color:var(--nx-muted)}
/* The honeypot. Off-screen rather than display:none, because some bots skip display:none fields. */
.nx-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* FAQ */
.nx details{border-bottom:1px solid var(--nx-line);padding:18px 0}
.nx summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.nx summary::-webkit-details-marker{display:none}
.nx summary::after{content:"+";color:var(--nx-accent);font-size:24px;line-height:1}
.nx details[open] summary::after{content:"–"}
.nx details p{color:var(--nx-muted);margin:12px 0 0}

/* ── what the original page did not have: the sector bar, the home niches, the selector ─────────── */

/* The sector bar under the header on a niche page: which sector this page is for, and the way back to
   the selector. The plan's "change" control. */
.nx-sector{border-bottom:1px solid var(--nx-line);background:rgba(14,22,38,.6);font-size:14px}
.nx-sector .nx-wrap{display:flex;gap:10px;align-items:center;min-height:42px;flex-wrap:wrap}
.nx-sector b{color:var(--nx-ink)}
.nx-sector span{color:var(--nx-muted)}
.nx-sector a{color:var(--nx-accent);text-decoration:none;margin-left:auto;font-weight:600}
.nx-sector a:hover{text-decoration:underline}

/* The four niches — the home page's first section, and the no-JS form of the selector. */
.nx-niche{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--nx-card);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);padding:24px;transition:border-color .15s,transform .15s}
.nx-niche:hover{border-color:var(--nx-accent);transform:translateY(-2px)}
.nx-niche h3{margin:0}
.nx-niche p{color:var(--nx-muted);font-size:15px;margin:0}
.nx-niche .nx-go{margin-top:auto;color:var(--nx-accent);font-weight:700;font-size:15px}
.nx-niche-icon{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(79,209,139,.12);color:var(--nx-accent);display:grid;place-items:center}
.nx-niche-icon svg{width:22px;height:22px}

/* The selector itself — a native <dialog>: showModal() gives the focus trap, Escape and the backdrop
   for free, and a closed one is not rendered at all. */
/* margin:auto is restated because site.css resets every margin to 0, which pins a modal dialog to the
   top-left corner instead of centring it (seen on the first render check). */
.nx-pick{margin:auto;border:1px solid var(--nx-line);border-radius:20px;background:#0B1222;color:var(--nx-ink);padding:0;
  width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.nx-pick::backdrop{background:rgba(3,6,14,.78);backdrop-filter:blur(4px)}
.nx-pick-in{padding:28px}
.nx-pick h2{margin:0 0 6px}
.nx-pick-sub{color:var(--nx-muted);margin:0 0 20px}
.nx-pick .nx-grid{gap:12px}
.nx-pick .nx-niche{padding:18px}
.nx-pick-close{display:block;margin:18px auto 0;background:none;border:0;color:var(--nx-muted);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
/* On a phone the four full cards are taller than the screen, so the dialog shows the names only and all
   four (plus "just looking") fit in one view; the descriptions are on the home page under it. */
@media (max-width:600px){.nx-pick-in{padding:20px 16px}.nx-pick .nx-g2{grid-template-columns:1fr}
  .nx-pick .nx-niche{flex-direction:row;align-items:center;padding:14px}.nx-pick .nx-niche p,.nx-pick .nx-niche .nx-go{display:none}
  .nx-pick .nx-niche h3{font-size:17px}}

/* A page that has not had its full copy approved yet carries a hero, the price summary and the form. */
.nx-price-line{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;margin:6px 0 0}
.nx-price-line b{font-size:22px}
.nx-price-line span{color:var(--nx-muted)}
.nx-center{justify-content:center}