/* neuropsych-landing.css (NEU-482): the screening landings and the screenings hub.
   Direction D3 "Colour field", picked by the founder on 2026-10-05. Every condition
   owns a soft colour field (--c ink, --field background, set inline per section)
   holding a dot-field drawing of one of its tasks; coming soon shows the same
   drawing as hollow outlines on the neutral field.

   Loads after neuropsych-theme.css (v=8) on pages whose <body> has class
   "np-landing". Part 1 is the candidates' shared base (tokens, nav with the
   Screenings item, buttons, links); its selectors carry an html/.np-landing
   prefix so neither the theme nor the CSS that neuropsych-auth-ui.js injects at
   runtime can override the picked values. Part 2 is D3's own stylesheet,
   verbatim, with its ".d3" scope renamed ".np-landing". Part 3 holds the few
   production-only rules (account menu, the article section kept from NEU-324).
   The hub (NEU-483) uses parts 1 and 2 as they are. */

/* ===================== PART 1: shared base ===================== */
.np-landing{
  --bg:#f8f9fb;--surface:#fff;--surface2:#f1f3f7;--warm:#eef0f5;
  --border:rgba(0,0,0,.07);--border-h:rgba(0,0,0,.12);--rule:rgba(17,24,39,.14);
  --ink:#111827;--text2:#4b5563;--text3:#6b7280;
  --teal:#0e7490;--teal-h:#0c6982;--deep:#0f4c5c;--teal-soft:rgba(14,116,144,.06);
  --r:12px;--r-lg:16px;
  --head:'Plus Jakarta Sans',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --nav-h:52px;
}
html{-webkit-text-size-adjust:100%}
.np-landing{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--nav-h);min-height:100vh}
.np-landing a{color:inherit;text-decoration:none}
.np-landing img,.np-landing svg{display:block;max-width:100%}
.np-landing ul,.np-landing ol{list-style:none}
.np-landing h1,.np-landing h2,.np-landing h3{text-wrap:balance}
.np-landing .wrap{max-width:1100px;margin:0 auto;padding-inline:clamp(20px,5vw,64px)}
.np-landing .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.np-landing :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.np-landing .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* NAV: the live np-bar, plus a Screenings item */
html .np-landing .np-bar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:rgba(248,249,251,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(16px,4vw,32px);font-size:13px}
html .np-landing .np-bar-brand{display:flex;align-items:center;gap:8px;font:700 15px var(--head);letter-spacing:-.01em;color:var(--ink);min-height:44px;justify-self:start}
html .np-landing .np-bar-brand img{width:24px;height:auto}
html .np-landing .np-bar-brand sup{font-size:.5em;font-weight:500;line-height:0;vertical-align:baseline;position:relative;top:-.55em;margin-left:.08em}
html .np-landing .np-bar-center{display:flex;align-items:center;gap:2px;justify-self:center}
html .np-landing .np-bar-center .np-bar-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--text2);font-weight:500;border-radius:6px;white-space:nowrap}
html .np-landing .np-bar-center .np-bar-link:hover{color:var(--ink);background:rgba(0,0,0,.04)}
html .np-landing .np-bar-center .np-bar-link.active{color:var(--teal);font-weight:600}
html .np-landing .np-bar-right{display:flex;align-items:center;gap:8px;justify-self:end}
html .np-landing .np-lang{display:flex;align-items:center;gap:0;margin:0;font-size:12px;font-weight:600;color:var(--text3)}
html .np-landing .np-lang a,html .np-landing .np-lang .active{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:0;border-radius:6px}
html .np-landing .np-lang .active{color:var(--teal)}
html .np-landing #navAuthSlot .nav-signin{min-height:44px;font:600 12px var(--head)!important;color:var(--text2);padding:0 13px!important;border:1px solid var(--border-h);border-radius:100px;background:transparent;white-space:nowrap;cursor:pointer;position:relative}
html .np-landing #navAuthSlot .nav-signin::after{content:'';position:absolute;inset:-4px 0}
html .np-landing .np-menu-toggle{display:none!important}
/* Five links no longer fit one row on phones: the bar wraps into two rows (the NEU-311 pattern),
   at 700px instead of 400px because of the extra item. */
@media(max-width:700px){
  .np-landing{--nav-h:98px}
  html .np-landing .np-bar{height:auto;grid-template-columns:1fr auto;grid-template-rows:52px 44px;row-gap:0;padding:0 12px 2px}
  html .np-landing .np-bar-brand{grid-column:1;grid-row:1}
  html .np-landing .np-bar-right{grid-column:2;grid-row:1}
  html .np-landing .np-bar-center{grid-column:1/-1;grid-row:2;gap:0;position:static;display:flex;flex-direction:row;justify-self:center;padding:0;margin:0;background:none;border:none;box-shadow:none}
  html .np-landing .np-bar-center .np-bar-link{padding:0 8px!important;font-size:13px;line-height:normal}
}

/* BUTTONS (homepage pattern: 12px radius, not pills). The landing CTA carries
   both .btn and .btn-primary (.btn-primary is the cta_click hook); the last two
   rules cancel the theme's .btn-primary shadow and press scale. */
.np-landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:12px;background:var(--teal);color:#fff;font:600 15px var(--head);border:0;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease);white-space:nowrap}
.np-landing .btn:hover{background:var(--teal-h);transform:translateY(-1px)}
.np-landing .btn svg{width:18px;height:18px;flex:none}
.np-landing .btn.btn-primary:hover{box-shadow:none;color:#fff}
.np-landing .btn.btn-primary:active{transform:none}
.np-landing .ico{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.np-landing .tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 14px var(--head);color:var(--teal)}
.np-landing .tlink svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.np-landing .tlink:hover svg{transform:translateX(3px)}
@media(max-width:480px){.np-landing .btn.block-sm{width:100%}}

/* FOOTER: the canonical site footer is styled inline (scripts/site_footer.py); D3 only adds the gap above it. */
.np-landing .np-footer{margin-top:96px}

@media(prefers-reduced-motion:reduce){.np-landing *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ===================== PART 2: D3 "Colour field", verbatim ===================== */
.np-landing{--neutral:#f1f3f7}
.np-landing .lead{font-size:17px;line-height:1.65;color:var(--text2);max-width:60ch}
.np-landing .tlink.muted{color:var(--text2)}
.np-landing .tlink.muted:hover{color:var(--teal)}

/* ---------- hub ---------- */
.np-landing .hub-head{padding-top:60px;padding-bottom:32px}
.np-landing h1{font:800 clamp(38px,5.4vw,56px)/1.04 var(--head);letter-spacing:-.04em;margin-bottom:14px}
.grid-live{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cd{background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:8px;display:flex;flex-direction:column}
.cd-field{background:var(--field);border-radius:var(--r);display:grid;place-items:center;padding:18px}
.cd.live .cd-field{height:236px}
.cd.live .cd-field svg{width:100%;max-width:360px;height:auto}
.cd-body{padding:20px 16px 4px}
.cd h2{font:700 24px/1.2 var(--head);letter-spacing:-.02em}
.cd-desc{font-size:15px;color:var(--text2);margin-top:6px;max-width:46ch}
.cd-meta{font-size:12.5px;color:var(--text2);margin-top:12px}
.cd-note{font-size:13.5px;color:var(--text3);margin-top:3px}
.cd-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin:18px 0 0;padding:0 18px;border-radius:10px;background:var(--field);color:var(--c);font:600 15px var(--head);transition:background .2s var(--ease),color .2s var(--ease)}
.cd-cta svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.cd-cta:hover{background:var(--c);color:#fff}
.cd-cta:hover svg{transform:translateX(3px)}
.grid-soon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.cd.soon .cd-field{background:var(--neutral);height:132px;padding:12px}
.cd.soon .cd-field svg{width:100%;max-width:220px;height:auto;aspect-ratio:16/9}
.cd.soon .cd-body{padding:16px 10px 6px}
.cd.soon h2{font-size:18px;color:var(--text2)}
.cd.soon .cd-desc{font-size:14px;color:var(--text3)}
.cd-status{font-size:13px;font-weight:600;color:var(--text2);margin-top:10px}
.cd.soon .tlink{font-size:13.5px}
.np-landing .pos{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--text2);margin-top:22px;max-width:70ch}
.np-landing .pos svg,.np-landing .posbox>svg{width:18px;height:18px;flex:none;color:var(--teal);margin-top:1px}
.np-landing .bundle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:8px;margin-top:40px}
.bundle-field{background:var(--neutral);border-radius:var(--r);display:grid;place-items:center;padding:16px;min-height:210px}
.bundle-field svg{width:100%;max-width:420px;height:auto}
.bundle-copy{padding:28px 28px 20px;align-self:center}
.np-landing .bundle h2{font:700 24px/1.2 var(--head);letter-spacing:-.02em;margin-bottom:8px}
.np-landing .bundle p{font-size:15px;color:var(--text2);margin-bottom:6px}

@media(max-width:1000px){.grid-soon{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .np-landing .hub-head{padding-top:36px;padding-bottom:24px}
  .np-landing .lead{font-size:16px}
  .grid-live{grid-template-columns:minmax(0,1fr);gap:12px}
  .cd.live .cd-field{height:176px}
  .cd-body{padding:18px 12px 2px}
  .cd h2{font-size:22px}
  .grid-soon{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
  .cd.soon{flex-direction:row;align-items:stretch;gap:4px}
  .cd.soon .cd-field{width:104px;height:auto;min-height:104px;flex:none;padding:0;overflow:hidden;place-items:stretch}
  .cd.soon .cd-field svg{width:100%;height:100%;max-width:none;aspect-ratio:auto}
  .cd.soon .cd-body{padding:8px 8px 2px 12px;min-width:0}
  .cd.soon h2{font-size:17px}
  .cd.soon .cd-desc{font-size:13.5px;margin-top:2px}
  .cd-status{margin-top:6px}
  .np-landing .bundle{grid-template-columns:minmax(0,1fr)}
  .bundle-field{min-height:150px}
  .bundle-copy{padding:18px 12px 8px}
}

/* ---------- landing ---------- */
.np-landing .lhero{background:var(--field);padding:36px 0 64px;border-bottom:1px solid var(--border)}
.np-landing .lhero.soon{background:var(--neutral)}
.lhero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:56px;align-items:center}
.crumb{font-size:12px;color:var(--text2);margin-bottom:10px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--text2);text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
.np-landing .status{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:10px}
.np-landing .lhero h1{font-size:clamp(40px,5.6vw,60px);margin-bottom:16px}
.np-landing .lhero .lead{color:#374151}
.np-landing .lhero .meta{font-size:13px;color:#374151;margin:18px 0 24px}
.np-landing .cta-note{font-size:13px;color:var(--text2);margin-top:12px}
/* NEU-520: the Terms and Privacy links under the start buttons read as links */
.np-landing .cta-note a{text-decoration:underline;text-underline-offset:2px}
.np-landing .cta-note a:hover{color:var(--teal)}
.hero-art{background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:22px 22px 18px}
.hero-art svg{width:100%;height:auto}
.art-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border-h);margin-top:14px;padding-top:12px;font-size:13px;color:var(--text2)}
.art-cap b{font:700 15px var(--head);color:var(--ink)}
.art-cap .mono{font-size:11px;color:var(--text3)}
.np-landing .sec{padding-top:64px}
.np-landing .sec>h2{font:800 28px/1.15 var(--head);letter-spacing:-.03em;margin-bottom:8px}
.sec-lead{font-size:15.5px;color:var(--text2);margin-bottom:20px}
.tks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tks.soon{grid-template-columns:repeat(3,minmax(0,1fr))}
.tk{background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:8px;display:flex;flex-direction:column}
.tk-field{background:var(--field);border-radius:var(--r);height:112px;display:grid;place-items:center;padding:10px}
.tks.soon .tk-field{background:var(--neutral)}
.tk-field svg{width:100%;max-width:180px;height:auto}
.tg-pair{display:flex;gap:10px}
.tg-pair span{width:54px;height:54px;display:grid;place-items:center;background:var(--surface);border-radius:8px;font-size:28px;font-weight:600}
.tg-sum{font-size:26px;font-weight:600;letter-spacing:-.02em}
.tg-small{font-size:16px}
.tk-body{padding:14px 10px 10px}
.tk .n{font-size:12px;color:var(--text3)}
.tk h3{font:700 16px/1.3 var(--head);margin-top:2px}
.tk p{font-size:14px;color:var(--text2);margin-top:4px;line-height:1.5}
.after{font-size:14.5px;color:var(--text2);margin-top:16px}
.np-landing .get{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.get-card{background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:26px 26px 22px;display:flex;flex-direction:column}
.get-card.rep{background:var(--field);border-color:transparent}
.get-card.rep.soon{background:var(--neutral)}
.get-card h3{font:700 18px var(--head);margin-bottom:12px}
.ticks li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--text2);padding:6px 0}
.get-card.rep .ticks li{color:#374151}
.ticks svg{width:17px;height:17px;flex:none;color:var(--c,var(--teal));margin-top:3px}
.get-card:not(.rep) .ticks svg{color:var(--teal)}
.get-card.rep.soon .ticks svg{color:var(--text3)}
.price-line{margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.1);font-size:14.5px;color:#374151}
.get-card .ticks+.price-line{margin-top:16px}
.price-line .amt{font-size:15px;font-weight:600;color:var(--ink)}
.np-landing .who{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.np-landing .who li{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:20px 22px;font-size:15px;color:var(--text2)}
.np-landing .who i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;margin-top:8px}
.is-soon .who i{background:var(--text3)}
.posbox{display:flex;gap:14px;background:var(--neutral);border-radius:var(--r-lg);padding:24px 26px}
.posbox>svg{width:22px;height:22px}
.posbox h2{font:700 18px var(--head);margin-bottom:4px}
.posbox p{font-size:14.5px;color:var(--text2);max-width:70ch}
.np-landing .faq{background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:4px 24px;margin-top:16px}
.faq details+details{border-top:1px solid var(--border-h)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding:10px 0;font:600 16px/1.35 var(--head);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:18px;height:18px;color:var(--text3);flex:none;transition:transform .25s var(--ease)}
.faq details[open] .pm{transform:rotate(45deg)}
.faq details p{font-size:15px;color:var(--text2);padding:0 0 18px;max-width:62ch}
.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 12px}
.rel a{display:flex;flex-direction:column;gap:4px;min-height:44px;height:100%;background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:18px 18px 16px;position:relative}
.rel a::before{content:'';width:10px;height:10px;border-radius:50%;background:#d97706;margin-bottom:10px}
.rel b{font:700 16px var(--head)}
.rel span{font-size:13.5px;color:var(--text2)}
.rel svg{width:16px;height:16px;color:var(--teal);margin-top:8px}

@media(max-width:900px){
  .lhero-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .tks{grid-template-columns:1fr 1fr}
  .rel{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .np-landing .lhero{padding:16px 0 36px}
  .hero-art{padding:16px 16px 12px}
  .np-landing .sec{padding-top:48px}
  .np-landing .sec>h2{font-size:24px}
  .tks,.tks.soon{grid-template-columns:minmax(0,1fr);gap:10px}
  .tk{flex-direction:row;align-items:stretch}
  .tk-field{width:104px;height:auto;min-height:96px;flex:none}
  .tg-pair span{width:34px;height:34px;font-size:18px}
  .tg-sum{font-size:15px}
  .tg-small{font-size:11px}
  .tk-body{padding:10px 8px 8px 14px;min-width:0}
  .np-landing .get,.np-landing .who{grid-template-columns:minmax(0,1fr)}
  .get-card{padding:22px 20px 18px}
  .rel{grid-template-columns:minmax(0,1fr);gap:8px}
  .rel a{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:14px 16px}
  .rel a::before{display:none}
  .rel b{flex:1 1 auto}
  .rel span{order:3;flex-basis:100%}
  .rel svg{order:2;margin-top:0}
  .np-landing .faq{padding:4px 18px}
}

/* ===================== PART 3: production additions ===================== */
/* Account menu (neuropsych-auth-ui.js fills #navAuthSlot), as on the condition landings. */
.np-menu-toggle,.nav-avatar{min-width:44px!important;min-height:44px!important}
.nav-avatar-wrap{position:relative;display:flex;align-items:center}
.nav-avatar{padding:0;font-family:inherit;-webkit-appearance:none;appearance:none}
.nav-dd-item{min-height:44px}

/* About the condition (live landings only): the NEU-324 source-backed article, kept
   below the picked slots in D3's own type scale (.sec h2, .sec-lead, .after, .who). */
.np-landing .article-meta{font-size:13px;color:var(--text2);margin:0 0 4px}
.np-landing .about h3{font:700 18px var(--head);margin-top:32px}
.np-landing .about .who b{color:var(--ink);font-weight:600}
.np-landing .src{margin-top:8px}
.np-landing .src a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--teal);text-decoration:underline;text-decoration-color:rgba(14,116,144,.35);text-underline-offset:3px}