:root{--bg:#fafafa;--fg:#1a1a1a;--muted:#6b6b6b;--accent:#4c6fe6;--accent-dark:#2849c2;--accent-light:#7f9cff;--brand:#0443ff;--accent-bg:#ecf1ff;--accent-bg-soft:#f7f9ff;--primary:#4c6fe6;--card:#ffffff;--border:#ececed;--serif:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;--sans:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;--maxw:64rem}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:46rem;margin:0 auto}

em,.it{font-style:italic}
.blue{color:var(--primary)}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.05;letter-spacing:-.025em;color:var(--fg);overflow-wrap:break-word}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.4vw,2.85rem);line-height:1.1;letter-spacing:-.02em;color:var(--fg);overflow-wrap:break-word}
h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.18;letter-spacing:-.01em}
p{color:color-mix(in oklab,var(--fg) 88%,transparent)}
.muted{color:var(--muted)}
strong,b{font-weight:600;color:var(--fg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.9rem;font-weight:500;padding:.78rem 1.75rem;border-radius:9999px;transition:opacity .15s,transform .15s,background .15s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--primary);color:oklch(0.985 0.008 85)}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid color-mix(in oklab,var(--fg) 20%,transparent)}
.btn-ghost:hover{background:color-mix(in oklab,var(--fg) 5%,transparent)}

/* header */
header{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in oklab,var(--border) 70%,transparent);background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(10px)}
.hrow{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.brand{font-family:var(--sans);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--fg);flex:none}
.brand b{color:var(--primary);font-weight:800}
nav.main{display:none;align-items:center;gap:1.35rem;font-size:.82rem;color:var(--muted)}
nav.main a{transition:color .15s;white-space:nowrap}
nav.main a:hover{color:var(--fg)}
nav.main a.ext{color:var(--primary)}
@media(min-width:1040px){nav.main{display:flex}}

/* hero */
.hero{text-align:center;padding:5.5rem 1.5rem 3.5rem;border-bottom:1px solid var(--border);background:oklch(0.984 0.009 95)}
.hero .eyebrow{display:block;margin-bottom:1.6rem}
.hero h1{max-width:17ch;margin:0 auto 1.5rem}
.hero .sub{font-size:1.12rem;color:var(--muted);max-width:48ch;margin:0 auto}
.hero .sub a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* stats */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:0;max-width:52rem;margin:3rem auto 0}
.stat{flex:1;min-width:9rem;padding:0 1.5rem;text-align:left}
.stat+.stat{border-left:1px solid var(--border)}
.stat .num{font-family:var(--serif);font-style:italic;font-size:2rem;line-height:1;color:var(--fg);margin-bottom:.5rem}
.stat .lbl{font-size:.78rem;color:var(--muted);line-height:1.4}
@media(max-width:560px){.stats{flex-direction:column;max-width:18rem;gap:1.3rem}.stat{padding:0;text-align:center}.stat+.stat{border-left:none}}

/* generic section */
section.block{padding:4.5rem 0;border-bottom:1px solid var(--border)}
.head{margin-bottom:2.2rem}
.head .eyebrow{display:block;margin-bottom:1rem}
.head h2{max-width:22ch}
.lede{font-size:1.06rem;color:color-mix(in oklab,var(--fg) 85%,transparent);max-width:62ch;margin-top:1.4rem}
.prose{max-width:46rem}

/* alignement cohérent : colonne lecture 46rem centrée, grilles 60rem centrées */
section.block>.wrap>.head,
section.block>.wrap>.prose,
section.block>.wrap>.cal,
section.block>.wrap>.shot,
section.block>.wrap>.code,
section.block>.wrap>.steps,
section.block>.wrap>.tbl,
section.block>.wrap>.ctablock,
section.block>.wrap>p{max-width:46rem;margin-left:auto;margin-right:auto}
section.block>.wrap>.engines,
section.block>.wrap>.guidemap,
section.block>.wrap>.metrics,
section.block>.wrap>.stack{max-width:60rem;margin-left:auto;margin-right:auto}

/* CTA propre (sans bloc coloré) */
.ctablock{text-align:center;padding:2.4rem 1.5rem;margin:2.6rem auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ctablock h3{margin-bottom:.7rem}
.ctablock p{color:var(--muted);max-width:38rem;margin:0 auto 1.4rem}
.ctablock .muted{font-size:.85rem;margin-top:1rem}
.prose p{font-size:1.06rem;margin-bottom:1.2rem}
.prose h2{margin:2.4rem 0 1.1rem}
.prose h3{margin:2rem 0 .9rem;color:var(--fg)}

/* arrow list */
.alist{list-style:none;display:grid;gap:.9rem;margin:1.4rem 0}
.alist li{position:relative;padding-left:1.9rem;font-size:1.04rem;color:color-mix(in oklab,var(--fg) 88%,transparent)}
.alist li::before{content:"→";position:absolute;left:0;top:0;color:var(--primary);font-family:var(--serif);font-style:italic;font-size:1.1rem}

/* numbered steps */
.steps{counter-reset:s;list-style:none;display:grid;gap:1.1rem;margin:1.6rem 0}
.steps li{position:relative;padding-left:3rem;font-size:1.05rem;color:color-mix(in oklab,var(--fg) 88%,transparent)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-.15rem;font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--primary);line-height:1}

/* callouts (Notion colors) */
.cal{display:flex;gap:.9rem;border:1px solid var(--border);border-left:3px solid var(--c);border-radius:12px;background:color-mix(in oklab,var(--c) 7%,var(--card));padding:1.3rem 1.4rem;margin:1.8rem 0;--c:var(--primary)}
.cal .ico{font-size:1.25rem;line-height:1.5;flex:none}
.cal .cbody{min-width:0}
.cal .cbody>:first-child{margin-top:0}
.cal .cbody>:last-child{margin-bottom:0}
.cal h3{margin:.1rem 0 .6rem}
.cal p{font-size:1rem}
.cal.blue{--c:oklch(0.55 0.22 260)}
.cal.green{--c:oklch(0.56 0.13 155)}
.cal.red{--c:oklch(0.57 0.19 25)}
.cal.yellow{--c:oklch(0.72 0.12 85)}
.cal.gray{--c:oklch(0.55 0.02 260)}
.cal.purple{--c:oklch(0.55 0.19 300)}
.cal.orange{--c:oklch(0.66 0.16 55)}
.cal .alist{margin:.7rem 0 0}

/* image shot / mockup */
.shot{margin:1.6rem 0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 1px 3px color-mix(in oklab,var(--fg) 6%,transparent)}
.shot .chrome{display:flex;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--muted) 8%,var(--card))}
.shot .chrome span{width:.6rem;height:.6rem;border-radius:50%;background:color-mix(in oklab,var(--muted) 35%,transparent)}
.shot img{display:block;width:100%;height:auto}
.shot .cap{padding:.7rem 1rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--border);text-align:center}
.shot.tall img{max-height:560px;width:auto;max-width:100%;margin:0 auto}

/* portrait */
.portrait{border-radius:12px;overflow:hidden;border:1px solid var(--border);max-width:240px}
.portrait img{display:block;width:100%;height:auto}

/* 2 engines */
.engines{display:grid;gap:1.2rem;margin:1.6rem 0}
@media(min-width:760px){.engines{grid-template-columns:1fr 1fr}}
.engine{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:1.7rem}
.engine .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);font-weight:600}
.engine h3{margin:.55rem 0 .65rem}
.engine p{font-size:.98rem;color:var(--muted);margin:0}

/* guide map */
.guidemap{margin:1.8rem auto;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.gcard{display:flex;align-items:center;gap:1.2rem;padding:1.25rem 1.5rem;transition:background .15s}
.gcard+.gcard{border-top:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.gcard:hover{background:color-mix(in oklab,var(--primary) 4%,transparent)}
.gcard .gn{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--primary);flex:none;width:2.2rem}
.gcard .gbody{flex:1;min-width:0}
.gcard h3{font-size:1.2rem;margin:0 0 .2rem}
.gcard p{font-size:.92rem;color:var(--muted);margin:0}
.gcard .go{font-size:.85rem;color:var(--primary);font-weight:600;flex:none;white-space:nowrap}
@media(max-width:560px){.gcard{flex-wrap:wrap}.gcard .go{width:100%;padding-left:3.4rem}}

/* stack diagram (AIOS) */
.stack{border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden;margin:2rem 0}
.stack-top{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stack-row{display:flex;align-items:baseline;gap:1rem;padding:1.05rem 1.25rem}
.stack-row+.stack-row{border-top:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.stack-row:hover{background:color-mix(in oklab,var(--primary) 4%,transparent)}
.stack-row .snm{font-family:var(--serif);font-size:1.3rem;flex:none;width:9rem;color:var(--primary)}
.stack-row .sd{font-size:.95rem;color:color-mix(in oklab,var(--fg) 85%,transparent)}
@media(max-width:600px){.stack-row{flex-direction:column;gap:.25rem}.stack-row .snm{width:auto;font-size:1.2rem}}

/* metric cards */
.metrics{display:grid;gap:1rem;margin:1.8rem 0}
@media(min-width:680px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:1.4rem}
.metric .mn{font-family:var(--serif);font-style:italic;font-size:2.1rem;color:var(--primary);line-height:1}
.metric .ml{font-size:.92rem;color:var(--muted);margin-top:.6rem}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.96rem;margin:1.4rem 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tbl th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:.8rem 1.1rem;background:color-mix(in oklab,var(--muted) 7%,var(--card));border-bottom:1px solid var(--border)}
.tbl td{padding:.85rem 1.1rem;border-bottom:1px solid color-mix(in oklab,var(--border) 65%,transparent)}
.tbl tr:last-child td{border-bottom:none}

/* centered quote */
.quote{max-width:42rem;margin:2.5rem auto;border:1px solid color-mix(in oklab,var(--primary) 16%,var(--border));border-radius:14px;background:color-mix(in oklab,var(--primary) 6%,var(--card));padding:2.2rem 2rem;text-align:center}
.quote .eyebrow{display:block;margin-bottom:1.1rem}
.quote .q{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.38;color:var(--fg)}
.quote .sub{font-size:.92rem;color:var(--muted);margin-top:1rem}

/* code block (dark) */
.code{margin:1.4rem 0;border:1px solid var(--border);border-radius:12px;background:oklch(0.21 0.04 260);overflow:hidden}
.code-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .8rem .7rem 1.15rem;border-bottom:1px solid color-mix(in oklab,#fff 12%,transparent)}
.code-top .lbl{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in oklab,#fff 65%,transparent);font-weight:600}
.code-copy{font-family:var(--sans);font-size:.72rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:7px;padding:.4rem .85rem;cursor:pointer;transition:opacity .15s;flex:none}
.code-copy:hover{opacity:.85}
.code pre{margin:0;padding:1.1rem 1.2rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;line-height:1.65;color:oklch(0.95 0.01 85);white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.code pre .ph{color:oklch(0.78 0.13 260)}

/* final CTA */
.final{text-align:center;padding:5.5rem 1.5rem;border-top:1px solid var(--border)}
.final .eyebrow{display:block;margin-bottom:1.2rem}
.final h2{max-width:18ch;margin:0 auto 1.2rem}
.final p{color:var(--muted);max-width:44ch;margin:0 auto 2rem;font-size:1.06rem}
.final .actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* back link */
.backlink{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--primary);font-weight:500;margin-top:1rem}

/* footer */
footer{border-top:1px solid var(--border);padding:2.2rem 0}
.frow{display:flex;flex-direction:column;gap:.8rem;justify-content:space-between;align-items:flex-start}
@media(min-width:768px){.frow{flex-direction:row;align-items:center}}
footer .brand{font-size:1rem}
footer .meta{font-size:.82rem;color:var(--muted)}
footer .meta a{color:var(--primary)}

/* ScalAI light theme overrides */
h1,h2{font-weight:800}
h3{font-weight:700}
h1 em,h2 em{font-style:normal;background:linear-gradient(125deg,#4c6fe6,#2849c2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#4c6fe6}
.brand b{color:#0443ff}
.hero{background:linear-gradient(160deg,#f7f9ff 0%,#ffffff 55%,#ecf1ff 100%)}
.btn-primary{background:linear-gradient(125deg,#4c6fe6,#2849c2);color:#fff}
.stat .num,.metric .mn,.gcard .gn,.tcost{font-style:normal;font-weight:800}
.quote .q{font-style:normal}
.final{background:linear-gradient(160deg,#ffffff 0%,#ecf1ff 100%)}
.ctablock{border:0;border-radius:16px;background:linear-gradient(135deg,#4c6fe6,#2849c2);color:#fff}
.ctablock h3{color:#fff}.ctablock p{color:rgba(255,255,255,.92)}
.ctablock .btn-primary{background:#fff;color:#2849c2}