/* NeuraFlex page. Shared components live in neura.css. */

.nf-hero .phero-grid{align-items:center}
.nf-hero .figrow{margin-top:clamp(56px,7vw,88px)}
.nf-live{padding:24px 24px 18px;box-shadow:0 30px 70px -40px rgba(28,28,26,.35)}
.nf-live .ex-top h3{font-size:18px;max-width:20ch}
.nf-soc{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:12.5px;color:var(--mute)}
.nf-soc-bar{position:relative;height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.nf-soc-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--soc,80%);background:var(--acc-deep);border-radius:4px}
.nf-soc .num{text-align:right;color:var(--ink)}

.nf-wide{padding:30px 30px 22px;grid-template-columns:minmax(0,1fr)}
.nf-wide .ex-top h3{max-width:40ch;font-size:20px}
.nf-wide .ex-top>div:first-child{min-width:0;max-width:100%}
.nf-seg-h{margin-top:16px;transition:opacity .25s}
.nf-wide .seg{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nf-wide .seg::-webkit-scrollbar{display:none}
.nf-expert{margin-top:28px}

/* platform rows */
.nf-tile{padding:24px 24px 18px;grid-template-columns:minmax(0,1fr)}
.nf-media{position:relative;padding:0;overflow:hidden;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center;background:#fbfaf7}
.nf-video{position:absolute;inset:0;display:grid;place-items:center;isolation:isolate;mix-blend-mode:multiply}
.nf-video::after{content:"";position:absolute;inset:0;background:var(--acc-deep);mix-blend-mode:color;pointer-events:none}
.nf-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.08) brightness(1.02)}
.nf-chip{position:absolute;left:18px;bottom:18px;display:grid;gap:2px;background:rgba(251,250,247,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px -18px rgba(28,28,26,.4)}
.nf-chip b{font-weight:500;font-size:14px;letter-spacing:-.01em}

.nf-donut{position:relative;width:min(260px,70%);margin:6px auto 4px;aspect-ratio:1}
.nf-donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.nf-donut circle[data-seg]{transition:stroke-dasharray .6s var(--spring),stroke-dashoffset .6s var(--spring)}
.nf-donut-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.nf-donut-c .num{font-size:38px;letter-spacing:-.04em;line-height:1}
.nf-donut-c small{font-size:12.5px;color:var(--mute);margin-top:6px}
.nf-months button{height:28px;padding:0 12px;font-size:12.5px}


/* case study teaser */
.nf-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;text-decoration:none}
.nf-case-img{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--panel)}
.nf-case-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform .8s var(--ease)}
.nf-case:hover .nf-case-img img{transform:scale(1.03)}
.nf-case-body{display:grid;gap:18px;align-content:start}
.nf-case-h{display:block;font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-.028em;font-weight:500;max-width:16ch}
.nf-case-p{display:block;font-size:16px;color:var(--ink-2);max-width:46ch;line-height:1.6}
.nf-case-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:6px}
.nf-case-figs>span{display:grid;gap:4px;padding:16px 16px 0 0;font-size:13px;color:var(--mute)}
.nf-case-figs>span+span{padding-left:16px;border-left:1px solid var(--rule)}
.nf-case-figs b{font-size:clamp(22px,2.2vw,30px);font-weight:450;letter-spacing:-.03em;color:var(--ink)}
.nf-case-figs>span:first-child b{color:var(--acc-fig)}

.nf-faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start}
.nf-faq .label{display:block;margin-bottom:14px}

/* logos: 8 vendors fill two rows of four */
#integrations .logos img{max-height:28px}
#integrations .logos img.lg{max-height:40px;max-width:110px}

@media (max-width:980px){
  .nf-case,.nf-faq{grid-template-columns:minmax(0,1fr)}
  .nf-faq{gap:28px}
}
@media (max-width:600px){
  .nf-wide,.nf-tile,.nf-live{padding:20px 18px 16px}
  .nf-wide .ex-top>div:first-child{width:100%}
  .nf-case-figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nf-case-figs>span{padding-right:8px}
  .nf-case-figs>span+span{padding-left:10px}
  .nf-case-figs b{font-size:21px}
  .seg button{padding:0 11px;font-size:12.5px}
  #integrations .logos{--n:4!important}
  #integrations .logos>div{padding:12px}
  #integrations .logos img{max-height:20px;max-width:64px}
}

/* ---------- modules: six exhibits of one illustrative site, each its own chart (static/js/neuraflex.js).
   Power provisioning leads at full width; the rest sit in pairs and one wide row. Each chart draws in
   when it arrives. Chart frames have fixed heights, so nothing moves when a chart builds. ---------- */
.nfx{display:grid;gap:20px}
.nfx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.nfx-ex{scroll-margin-top:40px;padding:30px 30px 22px;gap:20px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,opacity .6s var(--ease)}
.nfx-ex.act{transform:translateY(-3px);box-shadow:0 1px 0 rgba(28,28,26,.03),0 26px 50px -30px rgba(28,28,26,.28);background:#fbfaf7}
.nfx-ex.in.shown.act{transform:translateY(-3px)}
.nfx-ex .nfx-h{font-size:clamp(20px,1.65vw,23px);line-height:1.2;letter-spacing:-.018em;max-width:30ch;text-wrap:balance}
.nfx-p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.nfx-ex .ex-top{gap:28px}
.nfx-ex .stat small{max-width:20ch;text-align:right;line-height:1.35}
.nfx-ex .stat .v .u{font-size:.4em;letter-spacing:-.01em}
.nfx .chart{height:var(--ch,400px);min-width:0}
.nfx .chart svg{width:100%;height:100%;display:block}
.nfx-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:start}
.nfx-note{font-size:12px;color:var(--mute);white-space:nowrap}
.nfx .ex-foot{border-top:1px solid var(--rule);padding-top:14px}

/* lead and wide rows: copy in a column beside a large chart */
.nfx-lead,.nfx-wide{grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:clamp(32px,4vw,56px);row-gap:20px;align-items:stretch}
.nfx-lead{background:var(--white);padding:40px 40px 28px;box-shadow:0 1px 0 rgba(28,28,26,.03),0 40px 80px -50px rgba(28,28,26,.32);--ch:clamp(500px,40vw,580px)}
.nfx-lead.act{background:var(--white)}
.nfx-wide{--ch:380px}
.nfx-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.nfx-lead .nfx-h{font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.028em;max-width:13ch}
.nfx-wide .nfx-h{font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.024em;max-width:14ch}
.nfx-lead .nfx-p{font-size:16px}
.nfx-copy .stat{justify-items:start;margin-top:auto;padding-top:12px}
.nfx-copy .stat small{text-align:left}
.nfx-fig{display:grid;gap:16px;min-width:0;align-content:start}
.nfx-pair .nfx-ex{--ch:380px}

.mod-spec{margin:0;display:grid}
.mod-spec>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--rule)}
.mod-spec>div:last-child{border-bottom:1px solid var(--rule)}
.mod-spec dt{font-size:12.5px;color:var(--mute)}
.mod-spec dd{margin:0;font-size:13.5px;color:var(--ink)}

@media (max-width:1180px){
  .nfx-body{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:980px){
  .nfx-lead,.nfx-wide{grid-template-columns:minmax(0,1fr)}
  .nfx-lead .nfx-h,.nfx-wide .nfx-h{max-width:22ch}
  .nfx-lead{--ch:520px}
  .nfx-wide{--ch:520px}
  .nfx-copy .stat{margin-top:0;padding-top:0}
  /* on one column the chart comes straight after the claim; the spec rows follow it */
  .nfx-copy{display:contents}
  .nfx-copy .nfx-h{order:1}.nfx-copy .nfx-p{order:2}.nfx-copy .stat{order:3}.nfx-fig{order:4}.nfx-copy .mod-spec{order:5}
  .nfx-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .nfx{gap:14px}
  .nfx-pair{gap:14px}
  .nfx-ex,.nfx-lead{padding:22px 18px 16px;gap:16px}
  .nfx-ex .ex-top{flex-direction:column;gap:12px}
  .nfx-ex .stat{justify-items:start}
  .nfx-ex .stat small{text-align:left}
  .nfx-lead .nfx-h{font-size:26px}
  .nfx-lead{--ch:500px}
  .nfx-pair .nfx-ex{--ch:340px}
  .nfx-wide{--ch:500px}
  .nfx .chart{margin-inline:-4px}
  .nfx-note{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.nfx-ex{transition:none}.nfx-ex.act{transform:none}}
.keys .k-g1{background:rgba(28,28,26,.07)}
.keys .k-g2{background:rgba(28,28,26,.13)}
.keys .k-g3{background:rgba(28,28,26,.21)}
.keys .k-hacc{background:repeating-linear-gradient(135deg,rgba(222,132,79,.85) 0 1.5px,transparent 1.5px 5px);border:1px solid rgba(222,132,79,.6)}
.keys .k-ramp{background:linear-gradient(90deg,rgba(28,28,26,.05),rgba(28,28,26,.5))}
.nfx-alias{position:absolute;top:0;scroll-margin-top:40px}
.nfx-ex{position:relative}

/* who we work with: the problem each audience brings, the answer, and the modules that solve it */
.nf-who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.who{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:1px solid var(--ink)}
.who h3{font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.who p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:32ch}
@media (max-width:980px){.nf-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}}
@media (max-width:600px){.nf-who{grid-template-columns:minmax(0,1fr);gap:32px}.who h3{font-size:28px}}

/* ---------- modules as a scannable list: short title leads, subtitle and result beside it,
   each row opens into its full exhibit ---------- */
/* one panel holds all six: the system */
.mlist2{display:block;position:relative;background:var(--white);border-radius:22px;padding:8px clamp(20px,3vw,40px);box-shadow:0 0 0 1px rgba(28,28,26,.06),0 40px 80px -56px rgba(28,28,26,.35)}
.mlist2 .mrow:last-child{border-bottom:0}
.mrow-p .nfx-ex{background:var(--panel);box-shadow:none}
.mrow{border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 16px)}
.mrow-h{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 28px;gap:32px;align-items:center;padding:26px 4px;-webkit-tap-highlight-color:transparent}
.mrow-t{font-size:clamp(24px,2.3vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.mrow-s{font-size:16px;line-height:1.45;color:var(--ink-2);max-width:52ch}
.mrow-r{font-size:14px;line-height:1.4;color:var(--acc-ink);font-weight:500}
.mrow-h:hover .mrow-t{color:var(--acc-ink)}
.mrow-h:focus-visible{outline:2px solid var(--acc-deep);outline-offset:2px;border-radius:6px}
.mrow-h .li-x{justify-self:end;position:relative;width:16px;height:16px}
.mrow-h .li-x::before,.mrow-h .li-x::after{content:"";position:absolute;left:0;top:7.25px;width:16px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.mrow-h .li-x::after{transform:rotate(90deg)}
.mrow.open .mrow-h .li-x::after{transform:rotate(0)}
.mrow-p{padding:0 0 28px}
.mrow-p>.nfx-ex{margin:0}
.mrow-p .nfx-ex .ex-top{justify-content:flex-end}
@media (max-width:860px){
  .mrow-h{grid-template-columns:minmax(0,1fr) 28px;gap:6px 16px;padding:22px 2px}
  .mrow-t{grid-column:1;grid-row:1}
  .mrow-s{grid-column:1;grid-row:2;font-size:15px}
  .mrow-h .li-x{grid-column:2;grid-row:1}
}


/* the strip that names the whole system; its six markers map to the rows and the open one is lit */
.msys{display:flex;align-items:center;gap:16px;padding:20px 4px 18px;border-bottom:1px solid var(--ink);font-size:13px;color:var(--mute)}
.msys-k{font-weight:600;color:var(--ink);letter-spacing:-.005em}
.msys-t{flex:1;min-width:0}
.msys-d{display:flex;gap:7px}
.msys-d i{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--line);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.msys-d i.on{background:var(--acc-deep);box-shadow:0 0 0 4px rgba(222,132,79,.16)}
@media (max-width:860px){.msys{flex-wrap:wrap;gap:6px 12px}.msys-t{order:3;flex-basis:100%;font-size:12.5px}.msys-d{margin-left:auto}}

/* opened modules stay compact so one never dominates the page */
.mrow-p .nfx-ex{padding:24px 26px 18px;gap:16px}
.mrow-p .nfx-ex,.mrow-p .nfx-lead,.mrow-p .nfx-wide,.mrow-p .nfx-pair .nfx-ex{--ch:300px}
.mrow-p .nfx-lead,.mrow-p .nfx-wide{--ch:340px;grid-template-columns:minmax(0,250px) minmax(0,1fr);background:var(--panel);box-shadow:none}
.mrow-p .nfx-lead .nfx-p,.mrow-p .nfx-p{font-size:14.5px}
.mrow-p .nfx-ex .stat .v{font-size:clamp(34px,3vw,44px)}
@media (max-width:980px){.mrow-p .nfx-lead,.mrow-p .nfx-wide{grid-template-columns:minmax(0,1fr);--ch:300px}}
@media (max-width:600px){
  .mrow-p .nfx-ex{--ch:260px;padding:18px 14px 14px}
  .mrow-p .nfx-lead,.mrow-p .nfx-wide{--ch:330px}
  .mrow-p .ex-foot .keys{display:none}
  .mrow-p .mod-spec{display:none}
}

/* the result clause leads the eye; and an opened module is only as tall as its text: copy left, chart right */
.mrow-s b{font-weight:500;color:var(--ink)}
.mod-spec>div:last-child dd{font-weight:600}
@media (min-width:861px){
  .mrow-p .nfx-pair .nfx-ex,.mrow-p>.nfx-ex:not(.nfx-lead):not(.nfx-wide){display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);grid-template-areas:"body fig" "top fig" "foot foot";column-gap:40px;row-gap:14px;align-items:start;--ch:250px}
  .mrow-p .nfx-ex:not(.nfx-lead):not(.nfx-wide)>.ex-top{grid-area:top;justify-content:flex-start}
  .mrow-p .nfx-ex:not(.nfx-lead):not(.nfx-wide)>.ex-top .stat{justify-items:start}
  .mrow-p .nfx-ex:not(.nfx-lead):not(.nfx-wide)>.ex-top .stat small{text-align:left}
  .mrow-p .nfx-ex:not(.nfx-lead):not(.nfx-wide)>.chart{grid-area:fig;align-self:stretch}
  .mrow-p .nfx-ex:not(.nfx-lead):not(.nfx-wide)>.nfx-body{grid-area:body;grid-template-columns:minmax(0,1fr);gap:14px}
  .mrow-p .nfx-ex:not(.nfx-lead):not(.nfx-wide)>.ex-foot{grid-area:foot}
  .mrow-p .nfx-lead,.mrow-p .nfx-wide{--ch:280px}
}

/* NeuraPlanner teaser after the FAQ: two equal halves centred on each other.
   Left: heading with the key words in accent, lede, two buttons. Right: the hotel illustration. */
.nf-planner.phero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.nf-planner h2{max-width:none}
.nf-planner h2 .acc{color:var(--acc-fig)}
.nf-planner .lede{margin-top:22px}
.nf-planner .ctas{margin-top:28px}
.nf-planner .render{mix-blend-mode:darken}
.nf-planner .render img{filter:brightness(1.045) contrast(1.02)}
@media (max-width:980px){ .nf-planner.phero-grid{grid-template-columns:minmax(0,1fr)} .nf-planner .render{max-width:440px} }