/* AgentGuard Burn · burn.css · Oct 3 2026, showcase Oct 7 2026
   Replaces site.css, visual-pass.css and real-output.css on /burn, /es/burn and /pt-br/burn. Fonts: burn-fonts.css.
   Brand: background #07101E, text #E6EEF3, muted #94A3B0, teal #2ABCB4.
   Georgia for headlines and figures, DM Sans for all text, JetBrains Mono only for commands, Burn's real output
   and the capture labels. No CSS animations; the one video is a real capture and stops under reduced motion
   (burn.js). No hover styles on anything that is not a link or a button. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#07101E;color:#E6EEF3;font:400 16px/1.55 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,pre,figure{margin:0}
a{color:#E6EEF3;text-decoration:underline;text-decoration-color:rgba(230,238,243,.35);text-underline-offset:4px}
a:hover{text-decoration-color:#E6EEF3}
code,pre{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
button{font:inherit;color:inherit}
strong{font-weight:600}
/* A hyphenated word ("sub-agents", "re-reads") stays on one line instead of breaking at its hyphen. */
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid #2ABCB4;outline-offset:2px}
.wrap{width:min(100% - 40px,1120px);margin-inline:auto}

/* Header: wordmark and language control only. Site navigation lives in the footer. */
.top{border-bottom:1px solid rgba(255,255,255,.07)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:26px;height:26px;display:block}
.brand b{font-weight:inherit;color:#2ABCB4}
.brand sup{font-size:.55em;line-height:0;vertical-align:super;margin-left:2px}
.lang{display:flex;gap:14px;font-size:13px}
.lang a{color:#94A3B0;text-decoration:none}
.lang a:hover,.lang a[aria-current]{color:#E6EEF3}

/* First screen */
.hero{display:grid;gap:20px;padding:28px 0 48px}
.hero-text{display:grid;gap:12px}
h1{font:400 38px/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.02em;text-wrap:balance}
.lede{font-size:17px;line-height:1.5;text-wrap:pretty}
.proof{background:#0C1828;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px 12px}
.proof-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;font-size:14px;line-height:1.4;padding-bottom:10px}
.proof-head span{color:#94A3B0}
.fig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.fig strong{font:400 44px/1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:#2ABCB4}
.fig span{font-size:16px;line-height:1.4}
.proof-note{font-size:13px;line-height:1.45;color:#94A3B0;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.hero-act{display:grid;gap:12px}
.privacy{font-size:15px;line-height:1.5}
.hint{font-size:15px;line-height:1.5;color:#94A3B0}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:8px;border:1px solid transparent;font:600 16px/1 'DM Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-p{background:#2ABCB4;color:#07101E}
.btn-p:hover{background:#3ECCC4}
.btn-s{background:transparent;color:#E6EEF3;border-color:rgba(230,238,243,.3)}
.btn-s:hover{border-color:rgba(230,238,243,.65)}
.btn.phone-only{width:100%}
.cmd{display:flex;align-items:center;gap:12px;background:#0C1828;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 8px 8px 16px}
.cmd code{flex:1;min-width:0;font-size:15px;line-height:1.5;padding:8px 0;overflow-wrap:anywhere}
.cmd .btn{min-height:40px;padding:0 16px;font-size:15px}

/* Sections: a heading, then plain text separated by space or a rule */
/* minmax(0,1fr) columns here and in .body: an open output block scrolls inside its own box instead of
   widening the section past a phone screen. */
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:44px 0 48px;border-top:1px solid rgba(255,255,255,.07)}
h2{font:400 28px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.015em;text-wrap:balance}
h3{font:600 17px/1.35 'DM Sans',system-ui,sans-serif}
.body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:680px}
.body p{text-wrap:pretty}
.body h3{margin-top:10px}
.rows{display:grid}
.row{display:grid;grid-template-columns:minmax(118px,auto) minmax(0,1fr);gap:2px 18px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.row:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.row dt{font:400 30px/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em}
.row dd{line-height:1.45}
.out{font-size:12.5px;line-height:1.6;white-space:pre;overflow-x:auto;overflow-wrap:normal;background:#0C1828;border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:16px 18px;margin-bottom:12px}
.out .wrapline{white-space:pre-wrap}
.src{font-size:13px;line-height:1.5;color:#94A3B0}
.src a{color:#94A3B0}
.src code{font-size:12px}
.cmdrow{display:grid;gap:10px;padding:18px 0;border-top:1px solid rgba(255,255,255,.08)}
.cmdrow:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.cmdrow p{color:#94A3B0}
.end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:40px 0 56px;border-top:1px solid rgba(255,255,255,.07)}
.end .cmd{flex:1 1 320px;max-width:520px}
.end a{color:#94A3B0}

/* /burn first screen, Oct 7 2026: the headline and its second line, then the lede, one action per device and
   the privacy line. (.hero above stays for /burn/next and the link preview card.) */
.intro{display:grid;gap:18px;padding:28px 0 44px}
.h1-line{display:block;color:#2ABCB4}
.intro-side{display:grid;gap:16px}

/* See it work: real captures, each in a window, with a dated capture label and one line under it. Terminal
   text never shrinks below reading size: on a narrow screen the window scrolls sideways inside itself. */
.show-head{display:grid;gap:10px;max-width:680px}
.show-head p{color:#94A3B0;text-wrap:pretty}
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.shot{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.win{background:#0B0F14;border:1px solid rgba(255,255,255,.13);border-radius:12px;overflow:hidden}
.win-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;background:#151B23;border-bottom:1px solid rgba(255,255,255,.07)}
.win-bar .dot{flex:none;width:11px;height:11px;border-radius:50%;background:#FF5F57}
.win-bar .dot:nth-child(2){background:#FEBC2E}
.win-bar .dot:nth-child(3){background:#28C840}
.win-title{flex:1;min-width:0;padding-right:48px;text-align:center;font-size:12px;color:#94A3B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.win-scroll img{display:block;max-width:none;height:auto}
.shot-line .win-scroll{background:#010304;padding:14px 4px 10px}
.shot-line img{width:708px}
.shot-pane img{width:100%;min-width:560px}
.win .out{margin:0;border:0;border-radius:0;background:#0B0F14}
.clip{display:block;width:100%;height:auto;aspect-ratio:864/1080;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#07101E}
figcaption{display:grid;gap:6px}
.cap-label{font:500 12px/1.45 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:#94A3B0}
.cap{font-size:17px;line-height:1.45;text-wrap:pretty}
.cap-note{font-size:15px;line-height:1.5;color:#94A3B0}
.cap-note a{color:#E6EEF3}

/* Footer */
.foot{border-top:1px solid rgba(255,255,255,.07);padding:32px 0 44px;font-size:13px;line-height:1.5;color:#94A3B0}
.foot .wrap{display:grid;gap:16px}
.foot nav,.foot .langs{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot a{color:#94A3B0;text-decoration:none}
.foot a:hover{color:#E6EEF3}
.foot sup{font-size:.75em;line-height:0;vertical-align:super;color:#E6EEF3}

@media (max-width:899.98px){.desktop-only{display:none !important}}
/* Below 390px the wordmark and the three language links are scaled down to stay on one row inside the screen,
   and below 375px each finding's figure sits above its sentence, so a long figure ("7.6 mil millones") and an
   unbreakable number ("(7,610,368,479).") never share one narrow row. */
@media (max-width:389.98px){.top .wrap{gap:10px}.brand{font-size:16px;gap:7px}.brand img{width:22px;height:22px}.lang{gap:9px;font-size:12px}}
@media (max-width:374.98px){.row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:339.98px){.lang{gap:7px;font-size:11px}}
@media (min-width:900px){
.phone-only{display:none !important}
.top .wrap{height:64px}
.brand{font-size:21px}.brand img{width:28px;height:28px}
.lang{font-size:14px;gap:18px}
.hero{grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-areas:"text proof" "act proof" "priv proof";grid-template-rows:auto auto 1fr;gap:22px 72px;align-items:start;padding:88px 0 96px}
.hero-text{grid-area:text;gap:18px}
.proof{grid-area:proof;align-self:center;padding:22px 26px 20px}
.hero-act{grid-area:act;gap:14px;margin-top:8px;max-width:560px}
.privacy{grid-area:priv}
h1{font-size:60px;line-height:1.04}
.lede{font-size:19px;max-width:32ch}
.proof-head{font-size:15px}
.fig{padding:16px 0}
.fig strong{font-size:58px}
.fig span{font-size:17px}
.sec{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px 64px;padding:72px 0 80px}
h2{font-size:32px}
.row dt{font-size:34px}
.end{padding:56px 0 72px}
.foot{padding:40px 0 56px;font-size:14px}
.intro{gap:30px;padding:80px 0 72px}
.intro h1{font-size:64px;line-height:1.04}
.intro-side{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:16px 72px;align-items:start}
.intro .lede{grid-area:1/1/2/2;max-width:32ch}
.intro .privacy{grid-area:2/1/3/2;max-width:52ch}
.intro .hero-act{grid-area:1/2/3/3;margin-top:0;max-width:none}
.show{grid-template-columns:minmax(0,1fr);gap:36px}
.shots{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 48px;align-items:start}
.shot-line{grid-column:1/-1}
.shot-line img{width:814px}
.shot-video{grid-column:1;grid-row:2/span 2;position:sticky;top:24px}
.shot-pane,.shot-why{grid-column:2}
.shot-pane img{min-width:0}
}