/* AI Business Brain · Air Quality Edition (bosslevel.biz/air), built from the
   Real Estate Edition's styles; air-only additions are at the end of the file.
   Boss Level palette from the brand bible, in the AI Business Brain page's type.
   Illustrations are night scenes, so the panels that hold them (.night) stay
   dark in both themes; everything else follows the visitor's theme. */

:root{
  color-scheme:dark;
  --bg:#050508;--panel:#101016;--panel-2:#16161d;--line:#26262f;
  --ink:#f8f5ef;--soft:#d9d4cb;--muted:#9a9285;
  --orange:#ff4400;--orange-text:#ff5a1f;--gold:#ffb300;--night:#020206;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Manrope',Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Consolas,'Courier New',monospace;
  --radius:18px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f2ec;--panel:#fffdf8;--panel-2:#f0ebe2;--line:#1410141c;
  --ink:#141014;--soft:#3d3742;--muted:#5f5964;--orange-text:#c2410c;
}
.night{
  --panel:#101016;--panel-2:#16161d;--line:#26262f;--ink:#f8f5ef;--soft:#d9d4cb;--muted:#a39b8e;--orange-text:#ff5a1f;
  color-scheme:dark;background:var(--night);color:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body.re{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
.visually-hidden,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--orange);color:#140803;font-weight:700}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{width:min(1280px,calc(100% - 64px));margin-inline:auto}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- type ---------- */
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
h1 em,h2 em{font-style:normal;color:var(--orange)}
:root[data-theme="light"] :not(.night)>h2 em,:root[data-theme="light"] .hero h1 em{color:var(--orange-text)}
h2{font-size:clamp(40px,4.8vw,74px);max-width:28ch}
h2.split em{display:block}
h3{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
p{color:var(--muted)}
.kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-text);margin-bottom:18px}
.label{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text)}
.sub{font-size:18px;max-width:62ch;margin-top:20px}
.footnote{margin-top:28px;font-size:15px}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;border:0;background:var(--orange);color:#140803;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 30px -10px #ff4400aa,inset 0 1px 0 #ffffff55;transition:transform .2s,box-shadow .25s,background .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px #ff4400cc,inset 0 1px 0 #ffffff66;background:#ff5a1f}
.button.small{padding:11px 18px;font-size:13px}
.button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.button.ghost:hover{border-color:var(--orange);color:var(--orange-text)}
.text-link{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:15px;color:var(--ink);border-bottom:1px solid transparent}
.text-link:hover{color:var(--orange-text);border-color:currentColor}

/* ---------- header ---------- */
.site-header{position:fixed;z-index:40;top:18px;left:28px;right:28px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 20px;border:1px solid #ffffff1f;border-radius:20px;background:#050508cc;backdrop-filter:blur(16px) saturate(1.3);color:#f8f5ef;transition:background .3s,border-color .3s}
:root[data-theme="light"] .site-header{background:#f7f4eecc;border-color:#1410141a;color:#141014}
.site-header .brand{display:flex;align-items:center}
.brand-logo{height:40px;width:auto}
.brand-logo.on-light{display:none}
:root[data-theme="light"] .site-header .brand-logo.on-dark,:root[data-theme="light"] .site-foot .brand-logo.on-dark{display:none}
:root[data-theme="light"] .site-header .brand-logo.on-light,:root[data-theme="light"] .site-foot .brand-logo.on-light{display:block}
.site-header .parent-brand{color:#918d92}
:root[data-theme="light"] .site-header .parent-brand{color:#6b6470}
.parent-brand strong span{color:var(--orange)}
.site-header nav{display:flex;gap:28px}
.site-header nav a{font-size:13px;font-weight:600;opacity:.8}
.site-header nav a:hover{opacity:1;color:var(--orange)}
.nav-end{display:flex;align-items:center;gap:14px}
.theme-toggle{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;cursor:pointer;padding:0}
.theme-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.theme-icon .moon{fill:currentColor;stroke:none;opacity:0}
:root[data-theme="light"] .theme-icon .sun{opacity:0}
:root[data-theme="light"] .theme-icon .moon{opacity:1}
.menu-button{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:0}
.menu-button span{display:block;width:22px;height:1.5px;background:currentColor}
.mobile-menu{display:none}

/* ---------- sections ---------- */
.section{padding:130px 0;position:relative}
.section+.section{border-top:1px solid var(--line)}

/* ---------- 01 hero ---------- */
.hero{position:relative;min-height:min(100svh,1000px);padding:150px 0 40px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 50% 60% at 72% 42%,#ff44002e,transparent 70%),radial-gradient(ellipse 30% 30% at 20% 90%,#ffb30012,transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);gap:24px;align-items:center}
.hero h1{font-size:clamp(54px,6.2vw,100px)}
.hero h1 span,.hero h1 em{display:block}
.hero .lede{font-size:19px;line-height:1.6;max-width:44ch;margin-top:28px;color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:36px}
.hero-art{position:relative;border-radius:28px;background:transparent}
.hero-art img,.hero-art .glow-canvas{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-art img{width:118%;max-width:none;height:auto;margin-left:-9%}
.hero-facts{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.hero-facts span{display:flex;align-items:baseline;gap:12px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hero-facts strong{font-family:var(--display);font-size:clamp(40px,4vw,60px);font-weight:800;line-height:1;color:var(--ink);letter-spacing:0}

/* The illustrations sit on near-black; lighten lets their night sky become
   the page's own, so no panel edge shows in the dark theme. */
.hero-art img,.day-art img,.example-art img,.knowledge-art img,.road img,.close-art{mix-blend-mode:lighten}
:root[data-theme="light"] .hero-art img,:root[data-theme="light"] .day-art img,:root[data-theme="light"] .example-art img,:root[data-theme="light"] .knowledge-art img{mix-blend-mode:normal}

/* dark illustration panels in the light theme */
:root[data-theme="light"] .hero-art,:root[data-theme="light"] .day-art,:root[data-theme="light"] .example-art,:root[data-theme="light"] .knowledge-art{background:var(--night);box-shadow:0 30px 60px -30px #2a1e1a66}
:root[data-theme="light"] .hero-art{overflow:hidden}
:root[data-theme="light"] .hero-art img{width:100%;margin-left:0}

/* glow overlay drawn by realestate.js on [data-glow] images */
.glow-wrap{position:relative}
.glow-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.close .glow-canvas{z-index:-2;object-fit:cover}

/* ---------- cards ---------- */
.cards{display:grid;gap:18px;margin-top:56px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card,.act,.guard,.compare-col,.pack-col{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;isolation:isolate}
.card{padding:30px 28px 32px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.card:hover,.act:hover,.guard:hover{transform:translateY(-4px);border-color:#ff440066}
.card::before,.act::before,.guard::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),#ff44001f,transparent 65%);opacity:0;transition:opacity .35s}
.card:hover::before,.act:hover::before,.guard:hover::before{opacity:1}
.badge{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;flex:none;box-shadow:0 8px 24px -8px #ff4400aa}
.badge .ic{width:21px;height:21px}
.card .badge{margin-bottom:22px}
.card .label{margin-bottom:10px}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:15px}
.cards.four .card h3{font-size:19px}
.closer{margin-top:40px;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.35;color:var(--ink);max-width:48ch}

/* ---------- 03 stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.stat strong{display:block;font-family:var(--display);font-size:clamp(88px,10vw,150px);font-weight:800;line-height:.9;color:var(--ink)}
.stat strong.hot{color:var(--orange)}
.stat figcaption{margin-top:18px;font-size:18px;line-height:1.45;color:var(--soft);max-width:28ch}
.stat cite{display:block;margin-top:14px;font:600 11px/1.4 var(--mono);letter-spacing:.06em;font-style:normal;color:var(--muted)}
.stat cite a{border-bottom:1px solid var(--line)}
.stat cite a:hover{color:var(--orange-text);border-color:currentColor}
.callout{margin-top:56px;padding:24px 28px;border-radius:14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--orange);font-size:18px;color:var(--soft)}
.callout strong{color:var(--ink)}

/* ---------- 04 compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.compare-col{padding:34px 34px 38px}
.compare-col h3{font-size:clamp(24px,2.4vw,32px);margin:14px 0 26px}
.compare-col li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);color:var(--soft)}
.compare-col li .ic{margin-top:3px;width:18px;height:18px}
.generic .label{color:var(--muted)}
.generic li .ic{color:var(--muted)}
.brain{border-color:var(--orange);box-shadow:0 30px 80px -40px #ff440088,inset 0 0 0 1px #ff440033}
.brain li{color:var(--ink)}
.brain li .ic{color:var(--orange)}

/* ---------- 05 flow ---------- */
.flow{margin-top:60px}
.flow-phases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:22px;margin-bottom:18px;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.flow-phases span{display:flex;align-items:center;gap:14px;color:var(--muted)}
.flow-phases span::before,.flow-phases span::after{content:'';flex:1;height:1px;background:currentColor;opacity:.5}
.flow-phases .once{grid-column:1/3}
.flow-phases .daily{grid-column:3/7;color:var(--orange-text)}
.flow-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:22px}
.step{position:relative;padding:26px 18px 24px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .4s,transform .4s,box-shadow .4s}
.step:not(:last-child)::after{content:'';position:absolute;top:50%;right:-17px;width:12px;height:12px;border-top:2.5px solid var(--orange);border-right:2.5px solid var(--orange);transform:translateY(-50%) rotate(45deg)}
.step .badge{margin:0 auto 16px}
.step.setup .badge{background:var(--panel-2);color:var(--soft);box-shadow:none;border:1px solid var(--line)}
.step .label{margin-bottom:8px}
.step.setup .label{color:var(--muted)}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:13.5px;line-height:1.5}
.step.approve{border-color:var(--orange)}
.step.is-live{border-color:var(--orange);transform:translateY(-6px);box-shadow:0 24px 50px -24px #ff4400aa}
.step.is-live .badge{animation:badge-pulse 1.2s ease-out}
@keyframes badge-pulse{0%{box-shadow:0 0 0 0 #ff4400aa}100%{box-shadow:0 0 0 18px #ff440000}}
.flow-loop{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:22px;margin-top:6px}
.flow-loop span{grid-column:2/7;margin-inline:calc((100% - 88px)/10);height:46px;border:1.5px dashed var(--gold);border-top:0;border-radius:0 0 14px 14px;position:relative}
.flow-loop span::before,.flow-loop span::after{content:'';position:absolute;top:-6px;width:9px;height:9px;border-left:1.5px solid var(--gold);border-top:1.5px solid var(--gold);transform:rotate(45deg)}
.flow-loop span::before{left:-5.5px}
.flow-loop span::after{right:-5.5px;display:none}
.flow-loop em{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--bg);font:600 11px/1.2 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
:root[data-theme="light"] .flow-loop span{border-color:#b7791f}
:root[data-theme="light"] .flow-loop em{color:#8a5a0b}
.flow-loop .ic{width:16px;height:16px}

/* ---------- 06 hub ---------- */
.hub{position:relative;display:grid;grid-template-columns:1fr minmax(220px,300px) 1fr;gap:clamp(40px,8vw,130px);align-items:center;margin-top:60px}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hub-lines path{fill:none;stroke:var(--line);stroke-width:1.2}
.hub-lines path.flow-in,.hub-lines path.flow-out{stroke:var(--orange);stroke-width:1.6;stroke-dasharray:4 90;stroke-linecap:round;animation:hub-flow 2.8s linear infinite;opacity:.9}
.hub-lines path.flow-out{animation-delay:-1.4s}
@keyframes hub-flow{to{stroke-dashoffset:-94}}
.hub-col .label{margin-bottom:16px}
.hub-col.inputs .label{color:var(--muted)}
.hub-col.outputs .label{text-align:right}
.hub-col ul{display:grid;gap:12px}
.hub-col li{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:600;font-size:15px}
.hub-col.inputs li .ic{color:var(--muted)}
.hub-col.outputs li{border-color:#ff440055}
.hub-col.outputs li .ic{color:var(--orange)}
.hub-core{position:relative;z-index:1;display:grid;place-items:center}
.core-ring{position:relative;width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:radial-gradient(circle at 50% 40%,#ff44002a,var(--panel) 70%);border:2px solid var(--orange);box-shadow:0 0 0 10px #ff440012,0 0 80px -10px #ff440077}
.core-ring::before{content:'';position:absolute;inset:-18px;border-radius:50%;border:1px dashed #ff440066;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.core-ring img{width:44%;height:auto}
.core-ring strong{font-family:var(--display);font-size:22px;font-weight:800;text-transform:uppercase;line-height:1}

/* ---------- 07 day ---------- */
.day-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.timeline{margin-top:48px;display:grid;gap:6px}
.timeline li{display:grid;grid-template-columns:86px 46px 1fr;gap:18px;align-items:start;padding:16px 0;transition:opacity .4s}
.timeline time{font:600 12px/46px var(--mono);letter-spacing:.08em;color:var(--orange-text);white-space:nowrap}
.timeline li:first-child .badge{background:var(--gold);color:#241400}
.timeline h3{font-size:19px;margin:10px 0 4px}
.timeline p{font-size:15px}
.re-motion .timeline li{opacity:.42}
.re-motion .timeline li.is-now{opacity:1}
.re-motion .timeline li.is-now .badge{box-shadow:0 0 0 6px #ff440026,0 10px 30px -8px #ff4400}
.day-art{position:sticky;top:120px;border-radius:28px;overflow:hidden;border:1px solid #26262f;background:radial-gradient(ellipse 60% 60% at 50% 70%,#ff440016,transparent 70%),var(--night)}
.day-art img{width:100%}
.clock{position:absolute;left:22px;bottom:20px;padding:8px 14px;border-radius:999px;background:#050508cc;border:1px solid #ff440066;font:700 13px/1 var(--mono);letter-spacing:.08em;color:#ffb184;backdrop-filter:blur(8px)}

/* ---------- 08 example ---------- */
.example-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.example-art{border-radius:28px;overflow:hidden;max-width:460px;justify-self:center;border:1px solid #26262f;background:var(--night)}
.example-art img{width:100%}
.pack{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;margin-top:44px}
.pack-col{padding:22px 20px}
.pack-col .label{margin-bottom:14px;color:var(--muted)}
.pack-col li{padding:7px 0;font-size:15px;color:var(--soft);border-top:1px solid var(--line)}
.pack-col li:first-child{border-top:0}
.pack-col.hot{border-color:var(--orange);box-shadow:0 20px 50px -30px #ff4400aa}
.pack-col.hot .label{color:var(--orange-text)}
.pack-col.hot li{color:var(--ink);font-weight:600}
.pack-arrow{align-self:center;color:var(--orange);width:26px;height:26px;stroke-width:3}

/* ---------- 10 first five ---------- */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:56px}
.act{padding:24px 22px 26px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.act header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.act .num{font:600 12px var(--mono);color:var(--muted);letter-spacing:.1em}
.act h3{font-size:20px;min-height:2.5em;margin-bottom:18px}
.act dt{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--orange-text);margin-top:14px}
.act dd{font-size:14.5px;color:var(--soft);margin-top:4px;line-height:1.5}

/* ---------- 11 library ---------- */
.lib-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:48px}
.lib-cats button{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:13.5px;font-weight:600;line-height:1.3;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.lib-cats button strong{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;color:var(--orange);min-width:34px}
.lib-cats button:hover{border-color:#ff440077;transform:translateY(-2px)}
.lib-cats button[aria-pressed="true"]{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,var(--panel));box-shadow:inset 0 -3px 0 var(--orange)}
.lib{margin-top:28px}
.lib-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.lib-search{flex:1 1 360px;display:flex;align-items:center;gap:12px;padding:0 18px;height:54px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.lib-search:focus-within{border-color:var(--orange)}
.lib-search input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;color:var(--ink);font-size:16px}
.lib-modes{display:flex;flex-wrap:wrap;gap:8px}
.lib-modes button{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.lib-modes button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#140803}
.lib-status{margin:18px 0 14px;font-size:14px}
.lib-status strong{color:var(--ink)}
.lib-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lib-item{padding:20px 20px 22px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;animation:lib-in .4s ease both}
@keyframes lib-in{from{opacity:0;transform:translateY(8px)}}
.lib-item header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.lib-item .id{font:600 11px var(--mono);letter-spacing:.1em;color:var(--muted)}
.lib-item h3{font-size:17px}
.lib-item .cat{font-size:12px;color:var(--muted)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{padding:4px 9px;border-radius:999px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);color:var(--soft)}
.tag.first{border-color:var(--orange);color:var(--orange-text)}
.lib-item dl{display:grid;gap:8px;font-size:13.5px;line-height:1.5;margin-top:4px}
.lib-item dt{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text)}
.lib-item dd{color:var(--soft)}
.lib-more{margin:24px auto 0;display:flex}
mark{background:#ff440044;color:inherit;border-radius:3px;padding:0 1px}

/* ---------- 12 knowledge ---------- */
.knowledge-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:44px;counter-reset:area}
.areas li{counter-increment:area;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:14px;font-weight:600;line-height:1.25;transition:border-color .25s,transform .25s}
.areas li::before{content:counter(area,decimal-leading-zero);font:600 11px var(--mono);color:var(--orange-text)}
.areas li:hover{border-color:#ff440077;transform:translateX(3px)}
.knowledge-art{border-radius:28px;overflow:hidden;border:1px solid #26262f;background:radial-gradient(circle at 50% 50%,#ff440018,transparent 65%),var(--night)}
.knowledge-art img{width:100%}
.knowledge-art img,.knowledge-art .glow-canvas{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- 13 guards ---------- */
.guards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.guard{padding:28px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.guard h3{display:flex;align-items:center;gap:16px;font-size:19px;margin-bottom:14px}
.guard p{font-size:15px}

/* ---------- 14 road ---------- */
.road{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:56px;padding:36px 26px 34px;border-radius:28px;border:1px solid #26262f;background:radial-gradient(ellipse 60% 70% at 88% 30%,#ff440022,transparent 70%),var(--night)}
.road::before{content:'';position:absolute;left:26px;right:26px;top:calc(36px + (100% - 70px) * 0 + var(--img-h,150px) - 2px);height:2px;background:#26262f}
.road::after{content:'';position:absolute;left:26px;top:calc(36px + var(--img-h,150px) - 2px);height:2px;width:calc((100% - 52px) * var(--built,1));background:linear-gradient(90deg,#ffb300,#ff4400);box-shadow:0 0 16px #ff4400;transition:width 1.8s cubic-bezier(.4,0,.2,1)}
.road li{text-align:center}
.road img{width:100%;height:auto;aspect-ratio:300/260;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 12%);mask-composite:intersect;transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.road h3{margin-top:18px;font-family:var(--display);font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.road li.live h3{color:var(--orange)}
.road time{display:block;margin-top:4px;font:600 12px var(--mono);letter-spacing:.08em;color:var(--orange-text)}
.road p{margin-top:10px;font-size:14px;line-height:1.5}
.re-motion .road:not(.is-built) img{opacity:.15;transform:translateY(14px);filter:grayscale(1)}
.re-motion .road:not(.is-built){--built:0}
.re-motion .road.is-built li img{transition-delay:calc(var(--i) * .35s)}

/* ---------- 16 close ---------- */
.close{position:relative;min-height:min(56.25vw,860px);display:flex;align-items:center;padding:120px 0;overflow:hidden;isolation:isolate}
.close-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 60%}
.close::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--night) 12%,#020206b3 38%,transparent 62%),linear-gradient(180deg,var(--night),transparent 22%)}
.close-logo{height:54px;width:auto;margin-bottom:34px}
.close h2{font-size:clamp(44px,5vw,80px);max-width:14ch}
.close .lede{margin-top:26px;font-size:22px;line-height:1.45;color:var(--ink);font-weight:600}
.close-url{font:700 clamp(18px,1.6vw,24px) var(--mono);letter-spacing:.02em;color:var(--ink)}
.book-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.alt-book{margin-top:26px;font-size:15px}
.alt-book a{font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.alt-book a:hover{color:var(--orange-text)}
/* ---------- Brain Fit Call: guided evaluation ---------- */
.book-grid{align-items:start}
.book-grid>*{min-width:0}
.book-copy{position:sticky;top:110px}
.fit-rail{display:grid;gap:4px;margin:32px 0 6px;counter-reset:none}
.fit-rail button{width:100%;display:flex;align-items:center;gap:14px;padding:9px 12px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;text-align:left;color:var(--muted);font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.fit-rail button:disabled{cursor:default;opacity:.55}
.fit-rail .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);font:600 11px var(--mono);color:var(--muted);flex:none;transition:all .25s}
.fit-rail li.is-done .n{background:color-mix(in srgb,var(--orange) 18%,transparent);border-color:#ff440066;color:var(--orange-text)}
.fit-rail li.is-done button{color:var(--soft)}
.fit-rail li.is-done button:not(:disabled):hover{background:var(--panel)}
.fit-rail li.is-current button{color:var(--ink);background:var(--panel);border-color:var(--line)}
.fit-rail li.is-current .n{background:var(--orange);border-color:var(--orange);color:#140803;box-shadow:0 0 0 5px #ff440022}
.fit-rail li:nth-child(8){margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}

.fit-card{position:relative;padding:34px 34px 28px;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:0 40px 80px -50px #000}
.fit-top{display:flex;justify-content:space-between;gap:16px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text)}
.fit-time{color:var(--muted)}
.fit-progress{height:4px;margin:14px 0 26px;border-radius:4px;background:var(--line);overflow:hidden}
.fit-progress span{display:block;height:100%;width:var(--p,10%);background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fit-step h3{font-family:var(--display);font-size:clamp(30px,3vw,40px);font-weight:800;text-transform:uppercase;line-height:.95;outline:none}
.fit-intro{margin:10px 0 24px;font-size:15px}
.fit-step.entering{animation:fit-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fit-in{from{opacity:0;transform:translateX(18px)}}
.fit-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
.fit-field{grid-column:1/-1;margin:0;padding:0;border:0;min-width:0}
.fit-field.half{grid-column:auto}
.fit-field>label,.fit-field legend{display:block;padding:0;margin-bottom:10px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.fit-req{color:var(--orange-text);margin-left:2px}
.fit-opt{margin-left:6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fit-field input[type="text"],.fit-field input[type="email"],.fit-field input[type="tel"],.fit-field textarea{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:16px}
.fit-field textarea{resize:vertical;min-height:96px}
.fit-field input:focus,.fit-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px #ff440033}
.fit-chips{display:flex;flex-wrap:wrap;gap:8px}
.fit-chip{position:relative;cursor:pointer}
.fit-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fit-chip span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:600;color:var(--soft);transition:border-color .2s,background .2s,color .2s,transform .2s}
.fit-chip:hover span{border-color:#ff440077;color:var(--ink)}
.fit-chip input:checked+span{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,var(--bg));color:var(--ink)}
.fit-chip input[type="checkbox"]:checked+span::before{content:'';width:10px;height:6px;margin-top:-3px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.fit-chip input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.fit-field.invalid input[type="text"],.fit-field.invalid input[type="email"],.fit-field.invalid input[type="tel"],.fit-field.invalid textarea,.fit-field.invalid .fit-chip span{border-color:#ff8a65}
.fit-error{margin-top:8px;font-size:13px;font-weight:600;color:#ff8a65}
:root[data-theme="light"] .fit-error{color:#c2410c}
.fit-consent label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);cursor:pointer}
.fit-consent input{margin-top:3px;accent-color:var(--orange);width:16px;height:16px;flex:none}
.fit-summary{margin-top:26px;padding:20px 22px;border-radius:16px;border:1px dashed #ff440066;background:color-mix(in srgb,var(--orange) 5%,transparent)}
.fit-summary .label{margin-bottom:12px}
.fit-summary dl{display:grid;gap:8px;margin:0 0 12px}
.fit-summary dl div{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:14px}
.fit-summary dt{font:600 11px/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fit-summary dd{color:var(--ink)}
.fit-summary .text-link{background:none;border:0;padding:0;cursor:pointer;font-size:14px}
.fit-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.fit-nav [data-fit-next],.fit-nav [data-fit-submit]{margin-left:auto}
.fit-nav .button[hidden]{display:none}
.form-status{margin-top:14px;font-size:14px;color:var(--soft);min-height:1.4em}
.form-status[data-error="true"]{color:#ffab91}
:root[data-theme="light"] .form-status[data-error="true"]{color:#c2410c}
.fit-done{padding:30px 6px;text-align:center;outline:none}
.fit-done .badge{margin:0 auto 20px;width:58px;height:58px}
.fit-done h3{font-family:var(--display);font-size:40px;font-weight:800;text-transform:uppercase;line-height:1}
.fit-done p{margin:14px auto 0;max-width:44ch}
.fit-noscript{padding:24px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}

/* ---------- footer ---------- */
.site-foot{padding:40px 0 26px;border-top:1px solid var(--line)}
.foot-top,.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-top .brand-logo{height:34px}
.foot-top>span{font:600 11px var(--mono);letter-spacing:.16em;color:var(--muted)}
.foot-top>a,.foot-bottom a{font:600 11px var(--mono);letter-spacing:.12em}
.foot-top>a:hover,.foot-bottom a:hover{color:var(--orange-text)}
.foot-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font:600 11px var(--mono);letter-spacing:.1em;color:var(--muted)}

/* ---------- reveal ---------- */
.re-motion .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.re-motion .reveal.in{opacity:1;transform:none}
.re-motion .hero-copy>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.re-motion .hero-copy>*:nth-child(2){animation-delay:.08s}
.re-motion .hero-copy>*:nth-child(3){animation-delay:.16s}
.re-motion .hero-copy>*:nth-child(4){animation-delay:.24s}
.re-motion .hero-art{animation:art-in 1.4s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes art-in{from{opacity:0;translate:0 20px}}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .site-header nav{display:none}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .five{grid-template-columns:repeat(3,1fr)}
  .lib-cats{grid-template-columns:repeat(3,1fr)}
  .lib-list{grid-template-columns:repeat(2,1fr)}
  .flow-steps,.flow-phases,.flow-loop{column-gap:16px}
  .step{padding:22px 12px}
  .step:not(:last-child)::after{right:-13px;width:9px;height:9px}
}
@media(max-width:900px){
  .wrap{width:calc(100% - 40px)}
  .section{padding:90px 0}
  .menu-button{display:flex}
  .mobile-menu:not([hidden]){display:flex;flex-direction:column;gap:16px;position:fixed;z-index:39;top:96px;left:12px;right:12px;padding:22px;border-radius:18px;background:#101016f5;border:1px solid #ffffff1f;color:#f8f5ef;font-weight:700}
  :root[data-theme="light"] .mobile-menu:not([hidden]){background:#fffdf8f5;border-color:#1410141c;color:#141014}
  .hero{min-height:0;padding-top:130px}
  .hero-grid,.day-grid,.example-grid,.knowledge-grid,.compare{grid-template-columns:1fr}
  .hero-art{order:-1;margin:0 -10px}
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .cards.three,.stats,.guards{grid-template-columns:1fr}
  .stats{gap:34px}
  .flow-phases,.flow-loop{display:none}
  .flow-steps{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .step:not(:last-child)::after{display:none}
  .hub{grid-template-columns:1fr;gap:28px}
  .hub-lines{display:none}
  .hub-core{max-width:240px;margin:0 auto}
  .hub-col.outputs .label{text-align:left}
  .day-art{position:relative;top:auto;order:-1}
  .pack{grid-template-columns:1fr}
  .pack-arrow{transform:rotate(90deg);justify-self:center}
  .five{grid-template-columns:repeat(2,1fr)}
  .lib-cats{grid-template-columns:repeat(2,1fr)}
  .lib-list{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(2,1fr)}
  .knowledge-art{max-width:420px;justify-self:center;order:-1}
  .road{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding:28px 20px}
  .road li{scroll-snap-align:center}
  .road::before,.road::after{display:none}
  .close{min-height:0;padding:90px 0 300px}
  .close-art{object-position:70% 100%;height:auto;top:auto;bottom:0}
  .close::before{background:linear-gradient(180deg,var(--night) 45%,transparent 80%)}
  .book-grid{grid-template-columns:1fr;gap:32px}
  .book-copy{position:static}
  .fit-rail{display:flex;overflow-x:auto;gap:6px;margin:24px -20px 0;padding:0 20px 6px;scroll-snap-type:x proximity}
  .fit-rail li{flex:none;scroll-snap-align:start}
  .fit-rail li:nth-child(8){margin:0;padding:0;border:0}
  .fit-rail button{padding:6px 10px;font-size:13px;white-space:nowrap}
  .fit-rail .n{width:24px;height:24px}
}
@media(max-width:600px){
  .site-header{top:10px;left:10px;right:10px;height:66px;padding:0 12px;gap:10px}
  .site-header .nav-end .button.small{display:none}
  .brand-logo{height:32px}
  .mobile-menu:not([hidden]){top:84px}
}
@media(max-width:560px){
  .cards.four,.five,.lib-cats{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr}
  .timeline li{grid-template-columns:46px 1fr;gap:14px}
  .timeline time{grid-column:2;line-height:1.2;order:-1}
  .timeline .badge{grid-row:1/span 2}
  .timeline h3{margin-top:2px}
  .fit-card{padding:24px 20px 20px}
  .fit-fields{grid-template-columns:1fr}
  .fit-field.half{grid-column:1/-1}
  .fit-summary dl div{grid-template-columns:1fr;gap:2px}
  .hero-facts span{flex-direction:column;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- air edition additions ---------- */
/* The spec-pack art is landscape, so the example stacks: heading, art, pack. */
.air .example-grid{grid-template-columns:1fr;gap:36px}
.air .example-art{max-width:960px;width:100%}
.air .pack{margin-top:0}
.air .example-grid h2{max-width:none}

/* The featured build: Dynamic's own logo above the demo tabs. */
.air-feature{display:flex;align-items:center;gap:26px;margin-top:34px;padding:20px 26px;border:1px solid color-mix(in srgb,#007ac2 45%,var(--line));border-radius:14px;background:var(--panel);max-width:880px}
.air-feature-logo{width:170px;height:auto;flex:none}
.air-feature-logo.on-dark{display:block}.air-feature-logo.on-light{display:none}
:root[data-theme="light"] .air-feature-logo.on-dark{display:none}
:root[data-theme="light"] .air-feature-logo.on-light{display:block}
.air-feature p{font-size:15px;line-height:1.55;color:var(--soft)}
.air-feature strong{color:var(--ink)}
.air #demo .sub{margin-top:22px}
@media (max-width:760px){
  .air-feature{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px}
  .air-feature-logo{width:140px}
}
