/* Case-study pages (nexo-assist/). Loaded after site.css and reuses its tokens, header, sheets and evidence grids. */

/* ---------- page frame: a flat drawing sheet ---------- */
body.case{background-color:var(--ink);background-image:linear-gradient(rgba(var(--line-rgb),.045) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--line-rgb),.045) 1px,transparent 1px);background-size:32px 32px}
.case main{max-width:1200px;margin:0 auto;padding:calc(var(--hdr) + 56px) var(--gr) 64px var(--gl)}
.case .sheet,.case .sheet.big{width:auto}
.case .sheet p{max-width:72ch}
.case .nav a{font-size:13.5px;padding:8px 8px}
@media (min-width:901px) and (max-width:1280px){.case .brand small{display:none}}
/* Nexo Assist (the Axon page shares this sheet and keeps the two rules above): eight sections; below 1200px the
   case-study menu folds into the Menu button, as the home does below 900px */
.case:not(.axon-case) .nav a{font-size:14px;padding:8px 7px;white-space:nowrap}
@media (min-width:901px) and (max-width:1199px){
  .case:not(.axon-case) .nav{position:fixed;top:var(--hdr);left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px var(--gr) 16px var(--gl);background:var(--ink);border-bottom:1px solid var(--line);display:none}
  .nav-open .case:not(.axon-case) .nav{display:flex}
  .case:not(.axon-case) .nav a{padding:16px 0;font-size:20px;border-top:1px solid var(--line)}
  .case:not(.axon-case) .hdr-tools{margin-left:auto}
  .case:not(.axon-case) .menu-btn{display:inline-flex}
}
@media (min-width:901px) and (max-width:1480px){.case:not(.axon-case) .brand small{display:none}}

/* ---------- hero ---------- */
.cs-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cs-back{margin:0 0 28px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cs-back a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.cs-back a:hover{color:var(--fg);border-color:var(--fg)}
.cs-title{margin:0;font:780 clamp(56px,10vw,152px)/.86 var(--display);font-stretch:78%;letter-spacing:-.03em}
.cs-role{margin:18px 0 0;font:620 clamp(19px,2vw,26px)/1.25 var(--display);font-stretch:88%;color:var(--fg)}
.cs-hero .lede{max-width:52ch}
.cs-meta{display:grid;grid-template-columns:1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.cs-meta div{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:12px 14px;background:rgba(var(--ink2-rgb),.9)}
.cs-meta dt{font:500 10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.cs-meta dd{margin:0;font-size:15px;line-height:1.45;color:var(--fg)}
.cs-meta dd.mono{font:500 12px/1.6 var(--mono);color:var(--cyan)}

/* ---------- sections ---------- */
.cs-sec{margin-top:112px}
.cs-sec>header{margin-bottom:28px}
.cs-h2{margin:0;font:780 clamp(40px,5.6vw,84px)/.92 var(--display);font-stretch:78%;letter-spacing:-.03em}
.cs-h2:focus{outline:none}
.cs-intro{max-width:64ch;margin:16px 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--fg-2)}
.cs-h3{margin:0;font:760 clamp(26px,2.6vw,36px)/1 var(--display);font-stretch:82%;letter-spacing:-.02em}
.cs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cs-list{margin:14px 0 0;padding:0 0 0 18px;color:var(--fg-2)}
.cs-list li{margin-top:8px;padding-left:4px}
.cs-list li::marker{color:var(--mute);font-family:var(--mono);font-size:12px}
.cs-list b{color:var(--fg);font-weight:650}
.cs-list code,.cs code{font:500 .86em/1 var(--mono);color:var(--cyan);overflow-wrap:anywhere}
.cs-note{margin-top:16px!important;font:500 11px/1.6 var(--mono);letter-spacing:.03em;color:var(--mute)!important}
.cs-note a{color:var(--fg-2)}
.case .shot img{aspect-ratio:16/9}
/* As imagens descem para o pé de cada coluna: os dois lados terminam alinhados. */
.cs-side{display:flex;flex-direction:column}
.cs-side .cs-list{margin-bottom:20px}
.cs-side .cs-list + .shot{margin-top:auto}

/* ---------- architecture: 3D view + steps ---------- */
.arch{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.arch-view{position:sticky;z-index:5;top:calc(var(--hdr) + 16px);height:min(660px,calc(100vh - var(--hdr) - 32px));min-height:420px;overflow:hidden;border:1px solid var(--line-2);background:var(--ink);touch-action:pan-y}
html:not(.js) .arch-view{display:none}
.arch-view::before,.arch-view::after{content:"";position:absolute;z-index:3;width:14px;height:14px;pointer-events:none}
.arch-view::before{left:6px;top:6px;border-left:1px solid var(--fg);border-top:1px solid var(--fg)}
.arch-view::after{right:6px;bottom:6px;border-right:1px solid var(--fg);border-bottom:1px solid var(--fg)}
#archGl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#archGl:active{cursor:grabbing}
#archLabels{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.al{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s ease;white-space:nowrap;pointer-events:none}
.al>span{display:block;transform:translate(calc(-50% + var(--dx,0px)),calc(-100% - 16px));padding:3px 7px;border-left:1px solid var(--line-2);background:rgba(var(--ink-rgb),.8);font:500 10.5px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.04em;color:var(--fg)}
/* leader: a dot on the roof of the box and a hairline up to the label */
.al:not(.t-edge):not(.t-note):not(.t-tool)::before{content:"";position:absolute;left:-2px;top:-2px;width:5px;height:5px;background:var(--fg);box-shadow:0 0 6px rgba(var(--cyan-rgb),.8)}
.al:not(.t-edge):not(.t-note):not(.t-tool)::after{content:"";position:absolute;left:0;top:-16px;width:1px;height:16px;background:var(--fg-2)}
.al.t-accent::before{background:var(--accent)!important}
.al em{display:block;font-style:normal;font-size:9.5px;color:var(--mute)}
.al.t-accent>span{border-left-color:var(--accent)}
.al.t-dash>span{border-left:1px dashed var(--fg-2);color:var(--fg-2)}
.al.t-tool>span{padding:2px 5px;transform:translate(calc(-50% + var(--dx,0px)),calc(-100% - 6px));background:rgba(var(--ink-rgb),.72);font-size:9.5px;color:var(--tool)}
.al.t-edge>span{transform:translate(-50%,-50%);border:0;background:rgba(var(--ink-rgb),.86);font-size:9px;color:var(--cyan)}
.al.t-note>span{transform:translate(-50%,-50%);border:1px dashed var(--line-2);color:var(--fg-2);font-size:9.5px}
.arch-plan{position:absolute;inset:0;display:none;padding:12px}
.arch-plan svg{display:block;width:100%;height:100%}
.mode-2d .arch-plan{display:block}
.mode-2d #archGl,.mode-2d #archLabels,.mode-2d .arch-hud{display:none}
.arch-hud{position:absolute;left:12px;bottom:10px;z-index:2;margin:0;font:500 9.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);pointer-events:none}
.arch-hud b{color:var(--fg);font-weight:600}
.arch-swipe{display:none;margin:8px 0 0;font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.arch-steps{list-style:none;margin:0;padding:0;counter-reset:st}
.arch-steps li{border-left:1px solid var(--line-2);padding:4px 0 18px 18px;position:relative}
.arch-steps li::before{content:"";position:absolute;left:-4px;top:16px;width:7px;height:7px;background:var(--ink);border:1px solid var(--fg-2)}
.arch-steps li.on{border-left-color:var(--cyan)}
.arch-steps li.on::before{background:var(--cyan);border-color:var(--cyan)}
.arch-steps button{display:flex;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:8px 0;border:0;background:none;color:var(--fg-2);font:700 21px/1.15 var(--display);font-stretch:85%;text-align:left;cursor:pointer}
.arch-steps button span{font:500 10px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.arch-steps button:hover,.arch-steps li.on button{color:var(--fg)}
.arch-steps li.on button span{color:var(--cyan)}
.arch-steps p{margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--fg-2)}
.arch-steps li:not(.on) p{color:var(--mute)}
html:not(.js) .arch-steps li p,.no-steps .arch-steps li p{color:var(--fg-2)}
.arch-steps code{font-size:.84em}
.arch-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font:500 10px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.arch-key li{display:flex;align-items:center;gap:8px}
.k-dep{width:26px;height:1px;background:var(--fg)}
.k-dash{width:26px;height:0;border-top:1px dashed var(--fg-2)}
.k-ai{width:9px;height:9px;border:1px solid var(--accent)}
.k-flow{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.mode-2d .k-flow,.mode-2d .k-flow-li,.rm .k-flow-li{display:none}

/* 2D plan (svg) */
.pl-box{fill:rgba(var(--glass-rgb),.06);stroke:var(--plan);stroke-width:.35}
.pl-box.t-bright{stroke:var(--bright);fill:rgba(var(--bright-rgb),.08)}
.pl-box.t-accent{stroke:var(--accent);fill:rgba(var(--accent-rgb),.08)}
.pl-box.t-dash{stroke:var(--fg-2);stroke-dasharray:1.4 1.1;fill:none}
.pl-edge{fill:none;stroke:var(--plan);stroke-width:.3}
.pl-edge.t-dep{stroke:var(--bright);stroke-width:.4}
.pl-edge.t-accent{stroke:var(--accent)}
.pl-edge.t-dash{stroke:var(--fg-2);stroke-dasharray:1.4 1.1}
.pl-txt{font:500 2.4px var(--mono);fill:var(--fg)}
.pl-sub{font:500 1.9px var(--mono);fill:var(--mute)}
.pl-etxt{font:500 1.9px var(--mono);fill:var(--cyan)}
.arch-plan g{transition:opacity .3s}
.arch-plan g.dim{opacity:.22}

/* ---------- product ---------- */
.cs-side .cs-h3 small{display:block;margin-bottom:8px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* ---------- video ---------- */
.vid{margin:0;border:1px solid var(--line-2);background:var(--ink-2)}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.vid figcaption{padding:10px 12px;border-top:1px solid var(--line);font:500 10px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.vid figcaption a{color:var(--fg-2)}
.chap-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:20px 0 0;padding:0;background:var(--line);border:1px solid var(--line)}
.chap-list li{background:var(--ink-2)}
.chap-list button,.chap-list .row{display:grid;grid-template-columns:44px 1fr;gap:10px;width:100%;min-height:44px;padding:10px 12px;border:0;background:none;color:var(--fg-2);font:500 14px/1.35 var(--display);text-align:left}
.chap-list button{cursor:pointer}
.chap-list button:hover{color:var(--fg);background:rgba(var(--line-rgb),.06)}
.chap-list time{font:500 11px/1.6 var(--mono);color:var(--cyan)}

/* ---------- decisions ---------- */
.dec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dec .sheet{display:flex;flex-direction:column}
.dec .dec-n{margin:0 0 12px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dec .sh-fact{margin-top:auto!important}
.dec .sh-links{margin-top:14px}

/* ---------- the case in 60 seconds, right under the hero ---------- */
.cs-60{margin-top:56px}
.s60-h{margin:0 0 14px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.s60-h i{display:inline-block;width:7px;height:2px;margin-right:8px;vertical-align:middle;background:var(--accent)}
.s60{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.s60>div{padding:16px 18px 18px;background:rgba(var(--ink2-rgb),.94)}
.s60 dt{margin:0 0 8px;font:650 16px/1.3 var(--display);color:var(--fg)}
.s60 dd{margin:0;font-size:15px;line-height:1.5;color:var(--fg-2)}
.s60 dd span{color:var(--fg);font-weight:600}
.s60 dd a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(var(--cyan-rgb),.35)}
.s60 dd a:hover{border-color:var(--cyan)}
@media (pointer:coarse),(max-width:900px){.s60 dd a{padding-block:16px}}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.proof>div{display:flex;flex-direction:column;padding:18px 18px 16px;background:rgba(var(--ink2-rgb),.94)}
.proof dt{order:2;margin-top:8px;font:650 16px/1.3 var(--display);color:var(--fg)}
.proof dd{margin:0}
.proof dd.n{order:1;font:760 clamp(34px,3.4vw,52px)/1 var(--display);font-stretch:80%;letter-spacing:-.02em;color:var(--fg)}
.proof dd.n small{font-size:.5em;letter-spacing:0;color:var(--fg-2)}
.proof dd.d{order:3;margin-top:6px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.proof dd.s{order:4;margin-top:auto;padding-top:12px;font:500 10.5px/1.5 var(--mono);letter-spacing:.02em}
.proof dd.s a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(var(--cyan-rgb),.35);overflow-wrap:anywhere}
.proof dd.s a:hover{border-color:var(--cyan)}
.proof .live{box-shadow:inset 0 2px 0 var(--accent)}
.asof{display:inline-block;margin:0 0 16px;padding:6px 10px;border:1px dashed var(--line-2);font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.asof i{display:inline-block;width:7px;height:2px;margin-right:8px;vertical-align:middle;background:var(--accent)}

/* ---------- delivery ---------- */
.pipe-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0;font:500 12px/1.3 var(--mono)}
.pipe-row span{padding:6px 10px;border:1px solid var(--line-2);color:var(--fg)}
.pipe-row span.dash{border-style:dashed;color:var(--fg-2)}
.pipe-row i{font-style:normal;color:var(--mute)}
.badge{display:inline-flex;margin-top:14px;padding:5px 9px;border:1px solid var(--line-2);font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.badge.dash{border-style:dashed;color:var(--fg-2)}
.badge.ok{border-color:var(--cyan);color:var(--cyan)}

/* ---------- open items ---------- */
.open{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.open li{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.open b{font:650 17px/1.35 var(--display);color:var(--fg)}
.open p{margin:0;color:var(--fg-2)}

/* ---------- phones: the evidence and the open items fold behind a summary row (case.js closes them below 760px) ---------- */
.fold>summary{display:none}

.cs-end{margin-top:112px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- small screens ---------- */
@media (max-width:1100px){
  .cs-hero{grid-template-columns:1fr;gap:28px}
  .proof,.s60{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chap-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .arch{grid-template-columns:1fr;gap:0}
  .arch-view{top:var(--hdr);height:46svh;min-height:300px;margin:0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl));border-left:0;border-right:0}
  .arch-steps{padding-top:20px}
  .arch-steps li{min-height:30svh}
  .arch-steps li:last-child{min-height:0;padding-bottom:24px}
  .cs-two,.dec{grid-template-columns:1fr}
  /* 2D on a phone: the plan keeps a readable size and scrolls sideways inside its frame */
  .mode-2d .arch-view{position:relative;top:auto;height:auto;min-height:0;overflow-x:auto;touch-action:auto}
  .mode-2d .arch-plan{position:relative;inset:auto;width:620px;padding:12px}
  .mode-2d .arch-plan svg{height:auto}
  .mode-2d .arch-steps li{min-height:0}
  .mode-2d .arch-swipe{display:block}
  .open li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:760px){
  .case main{padding-top:calc(var(--hdr) + 32px)}
  .cs-sec{margin-top:80px}
  .cs-60{margin-top:40px}
  .proof,.s60{grid-template-columns:1fr}
  .fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;border:1px solid var(--line-2);background:rgba(var(--ink2-rgb),.94);font:620 16px/1.3 var(--display);color:var(--fg);cursor:pointer;list-style:none}
  .fold>summary::-webkit-details-marker{display:none}
  .fold>summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--accent)}
  .fold[open]>summary{margin-bottom:12px}
  .fold[open]>summary::after{content:"\2212"}
  .fold>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  .chap-list{grid-template-columns:1fr}
  .cs-meta div{grid-template-columns:1fr;gap:2px}
  .al>span{font-size:9.5px;padding:2px 5px}
  .al em{display:none}
}

/* ---------- screenshot zoom (a native <dialog>: Esc closes, focus stays inside) ---------- */
.case:not(.axon-case) .shot a[href$=".webp"]{cursor:zoom-in}
dialog.zoom{width:min(1600px,96vw);max-width:none;max-height:94vh;margin:auto;padding:0;border:1px solid var(--line-2);background:var(--ink);color:var(--fg);overflow:visible}
dialog.zoom::backdrop{background:rgba(var(--ink-rgb),.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog.zoom figure{margin:0}
dialog.zoom img{display:block;width:100%;height:auto;max-height:calc(94vh - 48px);object-fit:contain;background:var(--ink-2)}
dialog.zoom figcaption{padding:10px 14px;font:500 12px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.zoom-x{position:absolute;right:-1px;top:-46px;width:44px;height:44px;padding:0;justify-content:center;font:400 24px/1 var(--display);text-transform:none}
@media (prefers-reduced-motion:no-preference){dialog.zoom[open]{animation:zoomIn .28s cubic-bezier(.2,.8,.2,1)}@keyframes zoomIn{from{opacity:0;transform:scale(.97)}}}
/* phones: the image keeps a readable size and pans sideways inside the dialog */
@media (max-width:760px){dialog.zoom{width:100vw;max-height:100vh}.zoom-x{top:auto;bottom:calc(100% + 6px)}dialog.zoom .zoom-pan{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}dialog.zoom img{width:auto;max-width:none;height:min(62vh,560px);max-height:none}}

/* ---------- legibility: support text at 12px or more, links at 14px or more (Nexo Assist only; the Axon page shares this sheet) ---------- */
.case:not(.axon-case) :is(.callout,.cs-meta dt,.arch-steps button span,.arch-key,.arch-hud,.cs-side .cs-h3 small,.shot figcaption,.vid figcaption,
  .chap-list time,.dec .dec-n,.sheet .sh-fact,.asof,.badge,.foot,.tgl,.menu-btn){font-size:12px}
.case:not(.axon-case) .cs-note{font-size:13px}
.case:not(.axon-case) .cs-note code{font-size:1em}
.case:not(.axon-case) :is(.cs-back,.cs-note a,.proof dd.s,.vid figcaption a,.foot a,.skip){font-size:14px}
.case:not(.axon-case) .cs-back{letter-spacing:.04em}
.case:not(.axon-case) .proof dd.s a{overflow-wrap:anywhere}