/* www.exono.me v4 local review build. Layout: one reading column for guides, wider grids for hubs; brand green #31B28B, one primary CTA per page. */
:root{
  --bg:#f6f8f7; --surface:#fff; --ink:#14302a; --muted:#566b65; --line:#dbe4e0;
  --accent:#31B28B; --accent-ink:#0f6b4f; --accent-soft:#e2f4ec; --warn-soft:#fff4d6; --warn-ink:#7a5a00;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.6 var(--f-body)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:var(--accent-ink)}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(32px,4.6vw,52px);margin:.2em 0 .25em}
h2{font-size:clamp(23px,2.6vw,30px);margin:1.8em 0 .5em}
h3{font-size:19px;margin:1.4em 0 .4em}
p,li{max-width:72ch}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
table{border-collapse:collapse;width:100%;background:var(--surface);font-size:15px;margin:1em 0}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--accent-soft)}
.tablewrap{overflow-x:auto;margin:1em 0}.tablewrap>table{margin:0}
.tablewrap.scrolls{background:linear-gradient(90deg,var(--surface) 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,var(--surface) 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(20,48,42,.18),transparent) 0 0/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(20,48,42,.18),transparent) 100% 0/12px 100% no-repeat scroll,var(--surface)}
.tablewrap.scrolls>table{background:transparent}

#c-form input,#c-form select{height:48px}

/* review bar */
.review{background:var(--warn-soft);color:var(--warn-ink);font-size:13px;padding:6px 20px;text-align:center}
.review a{color:var(--warn-ink)}

/* header */
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;color:var(--ink);text-decoration:none;flex:none}
.logo img{height:28px;width:auto}
nav.main{display:flex;align-items:center;gap:18px;flex:1;flex-wrap:wrap}
nav.main>a,.menu summary{color:var(--ink);text-decoration:none;font-weight:500;cursor:pointer}
.menu{position:relative}.menu summary{list-style:none}.menu summary::after{content:" ▾";color:var(--muted)}
.menu[open] .drop{display:grid}
.drop{display:none;position:absolute;top:34px;left:-12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:290px;max-width:calc(100vw - 40px);box-shadow:0 12px 30px rgba(20,48,42,.12);gap:2px}
.drop a{display:grid;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.drop a:hover{background:var(--accent-soft)}.drop span{color:var(--muted);font-size:14px}
.actions{display:flex;gap:10px;flex:none}
.navbtn,.m-only{display:none}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:14px 22px;border-radius:10px;border:2px solid var(--accent)}
.btn:hover{background:#289a77}
.btn.ghost{background:transparent;color:var(--accent-ink)}
.btn.sm{padding:8px 14px;font-size:14.5px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:22px 0}
.cta-row .note{color:var(--muted);font-size:14.5px;max-width:60ch}

/* page parts */
.crumbs{font-size:14px;color:var(--muted);padding-top:18px}.crumbs a{color:var(--muted)}
main{padding-bottom:56px}
main>:last-child,main>:nth-last-child(1 of :not(script,style,link)){margin-bottom:0}
.hero{padding:28px 0 8px}
.sub{font-size:20px;color:var(--muted);margin:0 0 14px;max-width:62ch}
.what{background:var(--surface);border-left:4px solid var(--accent);padding:12px 16px;border-radius:0 10px 10px 0;color:var(--ink)}
.answer{font-size:18.5px}
.proof{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;margin:22px 0}
.proof figcaption{font-size:14px;color:var(--muted);padding:10px 4px 2px}
.proof figcaption .label{display:inline-block;margin-right:8px;vertical-align:1px}
.label{font:600 12px/1 var(--f-body);text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.label.demo{background:#ecebf8;color:#4d47a0}.label.ill{background:var(--warn-soft);color:var(--warn-ink)}.label.pending{background:#eef1f0;color:var(--muted)}
.label.pilot{background:#e3eefb;color:#1f5a96}
.ph{border:2px dashed var(--line);border-radius:12px;padding:28px 20px;color:var(--muted);background:repeating-linear-gradient(45deg,transparent,transparent 10px,#f0f4f2 10px,#f0f4f2 20px);font-size:15px;max-width:900px;margin:18px 0}
.ph b{color:var(--ink)}
.strip{margin:28px 0}.strip h2{font-size:18px;margin:0 0 10px;color:var(--muted)}
.strip-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.strip a{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);display:grid;gap:4px}
.strip a:hover{border-color:var(--accent)}.strip span{color:var(--muted);font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.card h3{margin-top:0}
.card img{border-radius:8px;border:1px solid var(--line);margin-bottom:10px}
.gcard{text-decoration:none;color:var(--ink);display:grid;gap:6px}.gcard:hover{border-color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.steps>div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.steps h3{margin-top:0;font-size:17px}.steps ol{padding-left:20px;margin:0}
.can,.modes,.agent{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:36px 0}
.can>:first-child,.modes>:first-child,.agent>:first-child{margin-top:0}.can>:last-child,.modes>:last-child,.agent>:last-child{margin-bottom:0}
.can ul{padding-left:20px}.can li{margin:8px 0}
.mode-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tag{display:inline-block;font:600 13px var(--f-body);color:var(--accent-ink);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.fine,.legend{font-size:14px;color:var(--muted)}
.callout{background:var(--warn-soft);border-radius:12px;padding:14px 18px;margin:20px 0}
.callout p{margin:.3em 0}
.attrib{font-style:italic;color:var(--muted)}
.byline{font-size:14px;color:var(--muted)}
.missing{color:#b00020;font-weight:600}
.editor{border-top:1px dashed var(--line);margin-top:48px;padding-top:12px;font-size:14px;color:var(--muted)}
@media (min-width:861px){.sitemap td:first-child{white-space:nowrap}}
@media (max-width:599px){.sitemap tr>:nth-child(2):not(:last-child){display:none}.sitemap code{overflow-wrap:anywhere}}
.st{font:600 12px var(--f-body);padding:3px 8px;border-radius:999px;white-space:nowrap}
.st.approved{background:var(--accent-soft);color:var(--accent-ink)}.st.draft{background:var(--warn-soft);color:var(--warn-ink)}.st.kept{background:#eef1f0;color:var(--muted)}.st.redirect{background:#ecebf8;color:#4d47a0}

/* footer */
footer.site{background:#10251f;color:#cfe0da;padding:40px 0 24px;margin-top:0}
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
footer .cols div{display:grid;gap:6px;align-content:start}
footer a{color:#cfe0da;text-decoration:none;font-size:15px}footer a:hover{color:#fff}
footer b{color:#fff;margin-bottom:4px}
footer .fine{color:#93aaa2;margin-top:28px}

@media (max-width:860px){
  .strip-row,.mode-row{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* L-01/L-02/L-03: collapsed header below 860px */
  .bar{flex-wrap:nowrap;gap:12px;min-height:60px}
  .navbtn{display:inline-flex;align-items:center;justify-content:center;order:3;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;flex:none}
  .navbtn span,.navbtn span::before,.navbtn span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
  .navbtn span::before,.navbtn span::after{content:"";position:absolute;left:0}.navbtn span::before{top:-6px}.navbtn span::after{top:6px}
  header.open .navbtn span{background:transparent}header.open .navbtn span::before{top:0;transform:rotate(45deg)}header.open .navbtn span::after{top:0;transform:rotate(-45deg)}
  .actions{order:2;margin-left:auto}.actions .ghost{display:none}
  nav.main{display:none}
  header.open .bar{flex-wrap:wrap}
  header.open nav.main{display:grid;order:4;flex:0 0 100%;gap:0;padding:4px 0 12px;max-height:calc(100vh - 90px);overflow-y:auto}
  header.open nav.main>a,header.open .menu summary{display:block;padding:12px 4px;border-top:1px solid var(--line)}
  header.open .m-only{display:block}
  .menu .drop{position:static;min-width:0;max-width:none;box-shadow:none;border:0;padding:0 0 6px 10px;background:transparent}
  .menu .drop a{padding:8px 10px}
}
@media (max-width:560px){
  .cards,.cards.four{grid-template-columns:minmax(0,1fr)}
  .agent .btn{display:block;text-align:center;padding:12px 14px;font-size:15.5px}
  .can,.modes,.agent{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.diagram{margin:22px 0}
.zoom{display:block;cursor:zoom-in}
.diagram img{width:100%;aspect-ratio:var(--ar,3/2);object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.gcard>img{width:100%;aspect-ratio:1512/806;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:8px;background:#fff}
.gcard>img[src$=".png"]{object-fit:contain;padding:8px}
.gcard>.label{justify-self:start}
.gcard h3,.gcard p{margin:0}
.gcard .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gcard{align-content:start}.gcard>.label{align-self:start}

/* /api/ (legacy v3 doc inside the v4 frame), L-17/L-18/L-19 */
.apidoc .label{background:none;padding:0;border-radius:0;line-height:inherit;font-family:inherit}
.apidoc .endpoint-header{flex-wrap:wrap}.apidoc .path{overflow-wrap:anywhere;min-width:0}
.apidoc main{min-width:0}
.apidoc table{display:block;max-width:100%;overflow-x:auto}.apidoc pre{max-width:100%;overflow-x:auto}
@media (max-width:860px){main.legacy .apidoc main{padding-left:0;padding-right:0}}
/* Offering-type icon badges (same icons and colors as the v3 Product page) */
.ot-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;font-size:12px;vertical-align:middle;margin-right:8px;flex-shrink:0}
.ot-green{background:#f0fdf4;color:#16a34a}.ot-orange{background:#fff7ed;color:#ea580c}.ot-purple{background:#faf5ff;color:#9333ea}.ot-blue{background:#eff6ff;color:#2563eb}
.ot-indigo{background:#eef2ff;color:#4338ca}.ot-teal{background:#f0fdfa;color:#0d9488}.ot-amber{background:#fffbeb;color:#d97706}.ot-fuchsia{background:#fdf4ff;color:#c026d3}
.ot-sky{background:#f0f9ff;color:#0284c7}.ot-slate{background:#f8fafc;color:#64748b}
.int-icon{font-size:1.3em;vertical-align:-2px;margin-right:9px}.int-logo{vertical-align:-4px;margin-right:9px}
.icon--stripe{color:#635bff}.icon--ga{color:#f9ab00}.icon--azure{color:#0078d4}.icon--shopify{color:#95bf47}.icon--api{color:var(--accent)}
h3 .label{margin-left:6px;vertical-align:middle;font-size:11px}
.ot-rose{background:#fff1f2;color:#e11d48}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:start;margin-top:8px}
.demo-grid .meetings-iframe-container{min-height:680px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:860px){.demo-grid{grid-template-columns:minmax(0,1fr)}}

/* QA regression fixes 2026-11-12 */
.card>:last-child{margin-bottom:0}
.demo-stack{display:grid;gap:20px;max-width:1000px}
.demo-stack .meetings-iframe-container{min-height:0;overflow:hidden}
.form-status{margin:0;font-size:16px;min-height:1.4em}
.form-status.ok{background:var(--accent-soft);color:var(--accent-ink);border-radius:10px;padding:12px 14px;font-weight:600}
.form-status.err{color:#b42318;font-weight:600}
#c-form [aria-invalid="true"]{border-color:#b42318!important;outline:2px solid #fde2e0}
#c-form button[disabled]{opacity:.6;cursor:progress}
.founder{display:flex;align-items:center;gap:20px;max-width:760px}
.founder img{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.founder p{margin:0}
@media (max-width:520px){.founder{flex-direction:column;align-items:flex-start}}
.proof.narrow img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.proof.narrow figcaption{text-align:left}
td .no{color:var(--muted);font-weight:600}