/* nxtGrid components for the multi-page release */

/* Header: dropdown navigation */
nav.main{align-items:center}
nav.main > a, .dd > button{padding:8px 12px;border-radius:6px;text-decoration:none;font:500 .94rem var(--f-sans);color:var(--ink-2);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
nav.main > a:hover, .dd > button:hover, .dd > button[aria-expanded="true"]{background:var(--bg-2);color:var(--ink)}
nav.main > a[aria-current="page"], .dd.cur > button{color:var(--blue)}
.dd{position:relative}
.dd > button svg{width:12px;height:12px;transition:transform .2s}
.dd > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 6px);left:-8px;min-width:320px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:grid;gap:2px;z-index:50}
.dd-panel a{display:grid;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none}
.dd-panel a:hover,.dd-panel a:focus-visible{background:var(--blue-50)}
.dd-panel b{font-weight:600;font-size:.93rem;color:var(--ink)}
.dd-panel span{font-size:.82rem;color:var(--muted)}
.dd-panel a[aria-current="page"] b{color:var(--blue)}

.h-right .btn-ghost{display:inline-flex}
@media (max-width:1100px){nav.main,.h-right .h-phone{display:none}.menu-btn{display:inline-flex}}
@media (max-width:1100px) and (min-width:981px){.menu-btn{display:inline-flex}}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{padding:13px 4px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.mnav summary::after{content:"+";color:var(--blue);font-weight:400}
.mnav details[open] summary::after{content:"–"}
.mnav details a{display:block;padding:9px 14px;border:0;font-weight:400;color:var(--ink-2)}
.mnav .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mnav .row .btn{margin:0}

/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.84rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs span[aria-hidden]{color:var(--line-2)}

/* Page hero with visual */
.phero.split .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:56px}
.phero.split .txt{display:grid;gap:18px;align-content:start;min-width:0}
.phero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
@media (max-width:980px){.phero.split .wrap{grid-template-columns:1fr;gap:36px}}

/* Illustrative visual card */
.vis{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;min-width:0}
.vis-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:.9rem;background:linear-gradient(#fff,#FAFBFE)}
.vis-body{padding:14px 16px}
.vis svg{display:block;width:100%;height:auto}
.vis figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 16px 14px;font:400 .76rem var(--f-mono);color:var(--muted)}
.vis figcaption i{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle;border-radius:2px}
.tag.synth{white-space:normal}
.hbar{display:grid;grid-template-columns:72px 1fr 52px;gap:10px;align-items:center;font-size:.84rem;padding:6px 0}
.hbar .t{height:10px;background:var(--bg-2);border-radius:5px;position:relative;overflow:hidden}
.hbar .t i{position:absolute;inset:0 auto 0 0;background:var(--blue);border-radius:5px}
.hbar .t i.low{background:var(--warn)}
.hbar b{font:500 .82rem var(--f-mono);text-align:right}
.mini-rows{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.84rem}
.mini-rows li{display:flex;justify-content:space-between;gap:10px}
.mini-rows b{font:500 .82rem var(--f-mono)}

/* Feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{padding:26px;display:grid;gap:12px;align-content:start}
.feat .ic{width:42px;height:42px;border-radius:10px;background:var(--blue-50);border:1px solid var(--blue-100);display:grid;place-items:center;color:var(--blue)}
.feat .ic svg{width:21px;height:21px}
.feat p{color:var(--muted);font-size:.96rem}
.feat a.more{color:var(--blue);font-weight:600;font-size:.9rem;text-decoration:none}
@media (max-width:980px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.feat-grid{grid-template-columns:1fr}}

/* Notes and badges */
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--blue-100);background:var(--blue-50);border-radius:var(--r);font-size:.93rem;color:var(--ink-2)}
.note svg{width:18px;height:18px;flex:none;color:var(--blue);margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 .74rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#FFF3DC;color:#8A5300;border:1px solid #F5D9A3}
.foot-note{font-size:.84rem;color:var(--muted);margin-top:18px}

/* FAQ (shared) */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:1.04rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:64ch}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:20px}}

/* Related links */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related a{padding:20px 22px;display:grid;gap:6px;text-decoration:none;transition:border-color .2s,transform .2s}
.related a:hover{border-color:var(--blue);transform:translateY(-2px)}
.related b{font-weight:600}
.related span{font-size:.9rem;color:var(--muted)}
.related .go{color:var(--blue);font-weight:600;font-size:.86rem}
@media (max-width:860px){.related{grid-template-columns:1fr}}

/* Data pathway diagram */
.pathway{display:grid;grid-template-columns:1.15fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
.pw{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:8px;align-content:start;min-width:0}
.pw.core{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.pw .k{font:500 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pw b{font-weight:600;font-size:.98rem}
.pw span{font-size:.84rem;color:var(--muted)}
.pw .chips{display:flex;flex-wrap:wrap;gap:5px}
.pw .chips em{font-style:normal;font:500 .72rem var(--f-mono);background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--ink-2)}
.pw-arrow{display:grid;place-items:center;color:var(--blue);padding:0 6px}
.pw-arrow svg{width:22px;height:22px}
@media (max-width:1100px){.pathway{grid-template-columns:1fr}.pw-arrow{padding:6px 0}.pw-arrow svg{transform:rotate(90deg)}}
.pathway-note{font-size:.84rem;color:var(--muted);margin-top:14px}

/* Steps (onboarding) */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:2px solid var(--blue);counter-reset:s}
.steps div{padding:18px 16px 0 0;display:grid;gap:6px;align-content:start}
.steps div+div{padding-left:16px;border-left:1px solid var(--line)}
.steps .n{font:500 .78rem var(--f-mono);color:var(--blue)}
.steps b{font-weight:600}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr 1fr;row-gap:20px}.steps div:nth-child(4){padding-left:0;border-left:0}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps div,.steps div+div{padding-left:0;border-left:0}}

/* Mock UI pieces */
.wo{display:grid;gap:10px;font-size:.88rem}
.wo .row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wo .k{color:var(--muted)}
.wo .track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.wo .track span{font:500 .72rem var(--f-mono);text-align:center;padding:6px 4px;border-radius:6px;background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.wo .track span.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.wo .track span.done{background:var(--blue-50);color:var(--blue-ink);border-color:var(--blue-100)}
.wo .ev{display:flex;gap:8px;flex-wrap:wrap}
.wo .ev em{font-style:normal;font-size:.78rem;border:1px dashed var(--line-2);border-radius:6px;padding:4px 8px;color:var(--ink-2)}
.roles{width:100%;border-collapse:collapse;font-size:.84rem}
.roles th,.roles td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:center}
.roles th:first-child,.roles td:first-child{text-align:left}
.roles thead th{font:500 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.roles .y{color:var(--ok);font-weight:700}.roles .n{color:var(--line-2)}.roles .r{color:var(--warn);font-weight:600}

/* Audience cards */
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.aud .card{padding:24px;display:grid;gap:8px;align-content:start}
.aud p{color:var(--muted);font-size:.95rem}
@media (max-width:980px){.aud{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.aud{grid-template-columns:1fr}}

/* Resource cards */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.res-grid a{padding:28px;display:grid;gap:10px;text-decoration:none;transition:border-color .2s,transform .2s}
.res-grid a:hover{border-color:var(--blue);transform:translateY(-2px)}
.res-grid .k{font:500 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.res-grid p{color:var(--muted)}
@media (max-width:760px){.res-grid{grid-template-columns:1fr}}

/* Guide article */
.guide{max-width:74ch;font-size:1.05rem;line-height:1.75;color:var(--ink-2)}
.guide h2{font-size:1.5rem;margin:38px 0 12px}
.guide p{margin:0 0 16px}
.guide .formula{font:500 1rem var(--f-mono);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 16px;overflow-x:auto;color:var(--ink)}
.guide .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font:400 .82rem var(--f-mono);color:var(--muted);margin-top:6px}

/* Empty state (case studies) */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:40px;display:grid;gap:12px;justify-items:start;background:var(--bg-2)}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flow span{font-size:.88rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px}
.flow i{color:var(--blue);font-style:normal}

/* Problem visual */
.converge{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.converge .src{display:grid;gap:8px}
.converge .src span{font-size:.9rem;border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px;color:var(--ink-2)}
.converge .one{border-radius:12px;background:var(--navy);color:#fff;padding:22px;display:grid;gap:6px}
.converge .one b{font-size:1.05rem}
.converge .one span{font-size:.86rem;color:rgba(232,238,251,.75)}
.converge svg{width:28px;height:28px;color:var(--blue)}
@media (max-width:640px){.converge{grid-template-columns:1fr}.converge svg{transform:rotate(90deg);justify-self:center}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:32px}}

/* Console: expandable issues */
.issues li{padding:0;display:block}
.issues button.iss{all:unset;box-sizing:border-box;display:grid;grid-template-columns:3px 1fr auto 18px;gap:14px;align-items:center;width:100%;padding:11px 16px 11px 0;cursor:pointer}
.issues button.iss:hover{background:#FAFBFE}
.issues button.iss:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.issues .chev{width:14px;height:14px;color:var(--muted);transition:transform .2s}
.issues button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.iss-d{margin:0 16px 12px 17px;padding:12px 14px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.8rem}
.iss-d dt{color:var(--muted);font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding-top:1px}
.iss-d dd{margin:0;color:var(--ink)}
.c-hint{padding:8px 16px;font-size:.76rem;color:var(--muted);border-top:1px solid var(--line);background:#FAFBFE}

/* Loop: clickable steps */
.loop .lstep{all:unset;box-sizing:border-box;position:relative;display:grid;gap:12px;align-content:start;padding-right:24px;cursor:pointer;text-align:left}
.loop .lstep:focus-visible .dot{outline:2px solid var(--blue);outline-offset:3px}
.loop .lstep[aria-selected="true"] .dot{background:var(--blue);color:#fff;box-shadow:0 0 0 7px var(--blue-50)}
.loop .lstep:first-child .dot{background:#fff;color:var(--blue)}
.loop .lstep:first-child[aria-selected="true"] .dot{background:var(--blue);color:#fff}
.loop-detail{margin-top:28px;padding:20px 22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:1rem;color:var(--ink-2);max-width:820px}
.loop-detail b{color:var(--ink)}

/* Calculator v2 */
.calc .basis{display:grid;grid-template-columns:1fr 120px;gap:8px}
.calc .err{font-size:.8rem;color:var(--crit);min-height:1em}
.calc input[aria-invalid="true"]{border-color:var(--crit)}
.calc-actions{display:flex;gap:10px;flex-wrap:wrap}
.calc-actions .btn{height:40px;font-size:.88rem}
.calc-note{font-size:.84rem;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.calc-note b{color:var(--ink-2)}

/* Forms v2 */
.radio-row{display:flex;flex-wrap:wrap;gap:8px}
.radio-row label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:500;color:var(--ink)}
.radio-row input{width:auto;margin:0;accent-color:var(--blue)}
.radio-row label:has(input:checked){border-color:var(--blue);background:var(--blue-50);color:var(--blue-ink)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.opt{font-weight:400;color:var(--muted)}
.phone-row{display:grid;grid-template-columns:96px 1fr;gap:8px}

/* Footer: five columns */
footer.site .wrap.fgrid{grid-template-columns:1.5fr repeat(4,1fr)}
@media (max-width:980px){footer.site .wrap.fgrid{grid-template-columns:1fr 1fr 1fr}footer.site .wrap.fgrid>div:first-child{grid-column:1/-1}}
@media (max-width:560px){footer.site .wrap.fgrid{grid-template-columns:1fr 1fr}}
.callcard .note-l{font-size:.92rem;color:rgba(232,238,251,.75)}
.callcard .row .btn{flex:1 1 auto}
.phero .crumbs{margin-bottom:4px}
.phero .ctas{display:flex;flex-wrap:wrap;gap:12px}
ul.issues > li{display:block;padding:0}
/* Portfolio card (platform page) */
.pf{list-style:none;margin:0;padding:0;display:grid}
.pf li{display:grid;grid-template-columns:3px 22px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.pf li:last-child{border-bottom:0}
.pf .sev{align-self:stretch;border-radius:2px}
.pf .sev.crit{background:var(--crit)}.pf .sev.warn{background:var(--warn)}.pf .sev.ok{background:var(--ok)}
.pf svg{width:18px;height:18px;color:var(--blue)}
.pf .w{min-width:0;font-weight:500}
.pf small{display:block;font-weight:400;color:var(--muted);font-size:.78rem;margin-top:2px}
.pf .v{text-align:right;font:500 .84rem var(--f-mono);white-space:nowrap}
.pf .v small{font-family:var(--f-sans);font-size:.72rem}
.tag{font:500 .68rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:3px 7px;white-space:nowrap}
.st{display:inline-block;font-size:.7rem;font-weight:600;padding:1px 8px;border-radius:999px;margin-left:4px;vertical-align:1px}
.st.prog{background:#FFF3DC;color:#8A5300}.st.sched{background:var(--blue-50);color:var(--blue-ink)}.st.done{background:#DDF5EA;color:#0A6B45}.st.alert{background:#FDE7E3;color:#A42A19}
.msg-u{justify-self:end;max-width:80%;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px 12px 2px 12px;font-size:.92rem}
.msg-a{max-width:100%;display:grid;gap:12px;background:#fff;border:1px solid var(--line);padding:14px 16px;border-radius:12px 12px 12px 2px;font-size:.9rem;color:var(--ink-2)}
.msgs{display:grid;gap:14px}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) 2fr auto;gap:10px;align-items:center;font-size:.82rem}
.bar .track{height:8px;background:var(--bg-2);border-radius:4px;overflow:hidden}
.bar .fill{height:100%;background:var(--blue);border-radius:4px}
.bar b{font:500 .8rem var(--f-mono);color:var(--crit)}
header.site .mnav .wrap{display:grid;height:auto;align-items:stretch;gap:0;padding-block:8px 18px;max-height:calc(100vh - 110px);overflow-y:auto}
.mnav > .wrap > a{padding:13px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.c-top{flex-wrap:wrap}
@media (max-width:520px){.c-top .tag{font-size:.6rem}}

/* invisible bridge so the pointer can travel from the menu button into the panel */
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd-panel a{padding:12px 14px}
.doc > *{min-width:0} .legaltext table{min-width:520px}