/* Leo AI whitepaper system
   Sheet: 800 x 600 pt landscape (4:3), the same sheet as the Salesforce reference PDF.
   Theme: the live leo-ai.io landing page (Ramp-derived gold on ink and white, plus the
   cocoa "window over bloom" kit). Every colour is a token below, so a Leo Mono version
   is a token swap, not a rewrite.
   Export: Chrome > Print > Save as PDF. The @page rule fixes the paper size and margins,
   and print-color-adjust keeps every fill, so no dialog settings need changing. */

@page { size: 800pt 600pt; margin: 0; }

:root{
  --bg:#ffffff; --panel:#f6f6f4; --cream:#f7f7f5; --ink:#15171c; --ink2:#2b2e35;
  --grey:#5d626b; --muted:#8b909a; --hair:#e6e7ea; --hair2:#dcdee1;
  --acc:#F2A93B; --acc-deep:#E0982B; --acc-tint:#FDF0D6; --acc-line:#F6E2B0;
  --base:#291525; --base-dark:#1B0E18; --surface:#3A1C30; --muted-dark:#C8B2BF;
  --accent:#FFB07A; --accent-deep:#FF9E5E; --accent-tint:#FFE2CC; --wash:#FFFBF7;
  --ok:#1f8f4e; --li:#F2A93B; --yt:#FF8A4E; --ig:#E055A6;
  --sans:'Schibsted Grotesk',sans-serif; --mono:'Spline Sans Mono',monospace;
  --mx:52pt;
}

*{box-sizing:border-box;}
html{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
body{margin:0; background:#e7e6e2; color:var(--ink); font-family:var(--sans);
  font-size:10pt; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0; list-style:none;}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}

/* ---------- screen chrome (never printed) ---------- */
.toolbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:10px 22px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--hair);
  font-size:13px; line-height:1.3;}
.toolbar .wm{height:13px;}
.toolbar .tb-title{font-weight:600;}
.toolbar .tb-meta{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.02em;}
.toolbar .tb-key{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--grey);}
.toolbar .tb-spacer{margin-left:auto;}
.toolbar a.tb-link{font-size:12.5px; font-weight:500; color:var(--ink2);}
.toolbar button{font:600 13px var(--sans); color:var(--ink); background:var(--acc); border:1px solid var(--acc);
  border-radius:10px; padding:9px 16px; cursor:pointer;}
.toolbar button:hover{background:var(--acc-deep); border-color:var(--acc-deep);}
.stack{padding:30px 0 60px;}
.page{position:relative; width:800pt; height:600pt; margin:0 auto 30px; background:var(--bg);
  overflow:hidden; break-after:page; page-break-after:always;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 30px 60px -38px rgba(0,0,0,.45);}
.page:last-child{break-after:auto; page-break-after:auto;}
@media print{
  body{background:#fff;}
  .toolbar{display:none !important;}
  .stack{padding:0;}
  .page{margin:0; box-shadow:none;}
}

/* ---------- running head, body and foot ---------- */
.pg-head{position:absolute; top:24pt; left:var(--mx); right:var(--mx); height:14pt;
  display:flex; align-items:center; justify-content:space-between;}
.pg-head .wm{height:8.5pt; width:auto;}
.pg-label{font-family:var(--mono); font-size:6.5pt; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
.pg-foot{position:absolute; bottom:19pt; left:var(--mx); right:var(--mx);
  display:flex; align-items:baseline; justify-content:space-between; gap:20pt;
  font-family:var(--mono); font-size:6.5pt; letter-spacing:.04em; color:var(--muted);}
.pg-foot .pg-doc{flex:1; text-align:center;}
.pg-num{color:var(--ink2);}
.pg-body{position:absolute; top:58pt; bottom:50pt; left:var(--mx); right:var(--mx);}
.page.dark{background:var(--ink); color:#fff;}
.page.cocoa{background:var(--base-dark); color:#fff;}
.page.dark .pg-label,.page.cocoa .pg-label,.page.dark .pg-foot,.page.cocoa .pg-foot{color:#8b909a;}
.page.dark .pg-num,.page.cocoa .pg-num{color:#e9e9ec;}
.page.panel{background:var(--panel);}

/* ---------- type ---------- */
.d1{font-size:50pt; line-height:.98; font-weight:700; letter-spacing:-.035em; color:var(--ink);}
.h1{font-size:30pt; line-height:1.02; font-weight:700; letter-spacing:-.03em; color:var(--ink);}
.h2{font-size:18pt; line-height:1.1; font-weight:700; letter-spacing:-.022em; color:var(--ink);}
.h3{font-size:11.5pt; line-height:1.22; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.tone{color:var(--muted);}
.lead{font-size:12.5pt; line-height:1.45; color:var(--grey); letter-spacing:-.005em;}
.body,.body p{font-size:9.6pt; line-height:1.56; color:var(--grey);}
.body p+p{margin-top:7pt;}
.small{font-size:8.4pt; line-height:1.5; color:var(--grey);}
.fine{font-size:6.8pt; line-height:1.5; color:var(--muted);}
strong,.strong{font-weight:700; color:var(--ink);}
.dark .d1,.dark .h1,.dark .h2,.dark .h3,.cocoa .d1,.cocoa .h1,.cocoa .h2,.cocoa .h3,
.dark strong,.cocoa strong{color:#fff;}
.dark .lead,.dark .body,.dark .body p,.dark .small,.cocoa .lead,.cocoa .body,.cocoa .body p,.cocoa .small{color:#b9bdc4;}
.cocoa .lead,.cocoa .body p,.cocoa .small{color:var(--muted-dark);}
.mono{font-family:var(--mono);}
.eyebrow{display:inline-flex; align-items:center; gap:7pt; font-family:var(--mono); font-size:7pt;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.eyebrow .chip{border:.75pt solid var(--hair2); border-radius:5pt; padding:1.5pt 6pt; color:var(--ink);
  background:#fff; font-weight:500; letter-spacing:.04em;}
.dark .eyebrow .chip,.cocoa .eyebrow .chip{background:transparent; color:#fff; border-color:rgba(255,255,255,.25);}
.kicker-num{font-family:var(--mono); font-size:7pt; letter-spacing:.08em; color:var(--acc-deep); font-weight:600;}

/* ---------- logo ---------- */
.lockup{display:flex; align-items:center; gap:7pt;}
.lockup .ic{height:22pt; width:auto;}
.lockup .wm{height:11pt; width:auto;}

/* ---------- buttons, links, chips ---------- */
.btn{display:inline-flex; align-items:center; gap:6pt; font-weight:600; font-size:9pt; border-radius:7.5pt;
  padding:8pt 14pt; border:.75pt solid transparent; white-space:nowrap;}
.btn-gold{background:var(--acc); border-color:var(--acc); color:var(--ink);}
.btn-line{background:#fff; border-color:var(--hair2); color:var(--ink);}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.3); color:#fff;}
.link-arrow{display:inline-flex; align-items:center; gap:5pt; font-weight:600; font-size:8.8pt; color:var(--ink);}
.link-arrow::after{content:"\2192"; color:var(--acc-deep); font-weight:700;}
.pill{display:inline-flex; align-items:center; gap:4pt; font-size:7.3pt; border:.75pt solid var(--hair);
  border-radius:999px; padding:2pt 7pt; background:#fff; color:var(--ink2); white-space:nowrap;}
.pill.auto{background:var(--acc-tint); border-color:transparent; color:var(--acc-deep); font-family:var(--mono); font-weight:600; font-size:6.5pt;}
.pill.ok{color:var(--ok);}

/* placeholder: a metric or quote the team must confirm before this ships */
.tbd{background:var(--acc-tint); outline:.75pt dashed var(--acc-deep); outline-offset:1pt; border-radius:2.5pt;
  padding:0 2pt; color:inherit;}

/* ---------- surfaces ---------- */
.card{background:#fff; border:.75pt solid var(--hair); border-radius:9pt; padding:13pt 14pt;}
.card.soft{background:var(--panel); border-color:var(--hair);}
.card.cream{background:var(--wash); border-color:var(--accent-tint);}
.rule{height:0; border-top:.75pt solid var(--hair);}
.dotgrid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='1.2' cy='1.2' r='.85' fill='%23d3d5d9'/%3E%3C/svg%3E");
  background-size:7.5pt 7.5pt;}
.bloom{background-color:var(--base-dark); background-size:cover; background-position:center; image-rendering:pixelated;}

/* ---------- landing-page "framed" graphic: command bar + bloom + floating window ---------- */
.framed{border:.75pt solid var(--hair2); border-radius:13pt; overflow:hidden; background:#fff;
  box-shadow:0 22pt 44pt -30pt rgba(0,0,0,.42); display:flex; flex-direction:column;}
.framed-bar{display:flex; align-items:center; gap:9pt; padding:7.5pt 11pt; border-bottom:.75pt solid var(--hair); background:#fff;}
.fb-cmd{min-width:0; font-family:var(--mono); font-size:7.6pt; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fb-cmd b{color:var(--muted); font-weight:600; margin-right:5pt;}
/* solid colours, as in the site's hero bar: gradient-clipped text leaves a box artifact in PDF */
.fb-cmd .kw{font-weight:700; color:var(--acc-deep);}
.fb-cmd .str{color:#E055A6;}
.fb-cmd .cmt{color:#A89DA4;}
.fb-btn{margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:6.6pt; color:var(--ink);
  border:.75pt solid var(--hair2); border-radius:5.5pt; padding:3.5pt 8pt; background:var(--cream); white-space:nowrap;}
.framed-body{position:relative; flex:1; display:grid; place-items:center; padding:20pt; overflow:hidden;}

.win{position:relative; background:#fff; border-radius:9pt; border:.75pt solid rgba(255,255,255,.6);
  box-shadow:0 30pt 54pt -22pt rgba(15,6,12,.72), 0 7pt 16pt -7pt rgba(15,6,12,.5); overflow:hidden;}
.win-bar{display:flex; align-items:center; gap:8pt; padding:6pt 10pt; border-bottom:.75pt solid var(--hair); background:#FBF6F2;}
.dots{display:flex; gap:4.5pt;}
.dots i{width:6.5pt; height:6.5pt; border-radius:50%; background:#E7D8E0; display:block;}
.win-url{margin:0 auto; font-family:var(--mono); font-size:6.4pt; color:var(--muted); letter-spacing:.02em;
  padding:1.5pt 9pt; background:#fff; border:.75pt solid var(--hair); border-radius:999px;}
.win-body{padding:11pt 12pt;}
.win .ttl{font-size:13pt; font-weight:700; letter-spacing:-.03em;}
.win .mini-btn{font-size:6.8pt; font-weight:600; background:var(--acc); color:var(--ink); border-radius:5pt; padding:3.5pt 7pt; white-space:nowrap;}
.win .mini-pill{font-size:6.8pt; border:.75pt solid var(--hair2); border-radius:5pt; padding:3pt 7pt; white-space:nowrap; background:#fff;}
.win .mono{font-family:var(--mono);}

/* calendar window */
.cal-head{display:flex; align-items:center; gap:6pt; margin-bottom:8pt;}
.cal-head .ttl{margin-right:auto;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3.5pt;}
.cal-grid .dow{font-family:var(--mono); font-size:5.6pt; color:var(--muted); text-align:center; padding-bottom:1pt;}
.cal-grid .day{position:relative; aspect-ratio:1/0.92; border:.75pt solid var(--hair); border-radius:4pt; padding:2pt 2.5pt; font-family:var(--mono); font-size:5.2pt; color:var(--muted); background:#fff;}
.cal-grid .day .th{position:absolute; left:3pt; right:3pt; bottom:4.5pt; top:9pt; border-radius:2.5pt; background-size:cover; background-position:center 25%;}
.cal-grid .day .bar{position:absolute; left:3pt; right:3pt; bottom:2.2pt; height:1.6pt; border-radius:1pt;}
.cal-legend{display:flex; gap:9pt; margin-top:7pt; font-family:var(--mono); font-size:5.6pt; color:var(--muted);}
.cal-legend i{display:inline-block; width:5pt; height:5pt; border-radius:1.5pt; margin-right:3pt; vertical-align:-.5pt;}
.c-li{background:var(--li);} .c-yt{background:var(--yt);} .c-ig{background:var(--ig);}

/* vertical clip (9:16) */
.clip{position:relative; aspect-ratio:9/16; border-radius:7pt; overflow:hidden; background:#2b2e35 center/cover no-repeat;}
.clip .cap{position:absolute; left:8%; right:8%; bottom:12%; text-align:center; font-weight:800; font-size:7.6pt;
  line-height:1.15; color:#fff; text-transform:uppercase; letter-spacing:-.01em; text-shadow:0 1pt 3pt rgba(0,0,0,.55);}
.clip .cap em{font-style:normal; color:var(--acc);}
.clip .tag{position:absolute; top:6pt; right:6pt; font-family:var(--mono); font-size:5.4pt; color:var(--ink);
  background:var(--acc); border-radius:3pt; padding:1pt 4pt; font-weight:600;}
.clip .tag.dim{background:rgba(255,255,255,.85);}

/* analytics window */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:6pt; margin:6pt 0 8pt;}
.kpi{border:.75pt solid var(--hair); border-radius:6pt; padding:6pt 7pt;}
.kpi .k{font-size:6pt; color:var(--muted); margin-bottom:3pt;}
.kpi .v{font-family:var(--mono); font-size:12pt; color:var(--ink); letter-spacing:-.02em;}
.kpi .d{font-family:var(--mono); font-size:5.6pt; color:var(--ok); margin-top:2pt;}
.tabs{display:flex; gap:12pt; border-bottom:.75pt solid var(--hair); margin-bottom:6pt;}
.tabs span{font-size:6.8pt; color:var(--grey); padding-bottom:4pt; position:relative;}
.tabs span.act{color:var(--ink); font-weight:600;}
.tabs span.act::after{content:""; position:absolute; left:0; right:0; bottom:-.75pt; height:1.2pt; background:var(--ink); border-radius:1pt;}
.rows{display:flex; flex-direction:column; gap:4pt;}
.row{display:flex; align-items:center; gap:7pt; border:.75pt solid var(--hair); border-radius:6pt; padding:5pt 7pt; font-size:6.8pt;}
.row .th{width:20pt; height:14pt; border-radius:3pt; flex:0 0 auto; background:#ddd center/cover;}
.row .grow{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);}
.row .m{font-family:var(--mono); font-size:6.4pt; color:var(--grey); white-space:nowrap;}
.row .m.up{color:var(--ok);}

/* pain-point / tool-sprawl diagram nodes */
.tool{position:absolute; width:118pt; background:#fff; border:.75pt solid var(--hair2); border-radius:7pt;
  box-shadow:0 12pt 22pt -16pt rgba(0,0,0,.35); padding:6pt 7pt; font-size:7pt;}
.tool .tn{display:flex; align-items:center; gap:5pt; font-weight:700; font-size:7.4pt; color:var(--ink);}
.tool .tn i{width:13pt; height:13pt; border-radius:3pt; display:grid; place-items:center; font-style:normal;
  font-size:5.6pt; font-weight:700; color:#fff; flex:0 0 auto;}
.tool .ts{font-family:var(--mono); font-size:5.4pt; color:var(--muted); margin-left:18pt; margin-top:-1pt;}
.tool .ln{height:3pt; border-radius:2pt; background:var(--hair); margin-top:4pt;}
.tool .ln.s{width:60%;}

/* workflow chips (landing "Scale your distribution" card) */
.flow{display:flex; flex-direction:column; gap:6pt;}
.flow .st{display:flex; align-items:center; gap:6pt; font-size:7.6pt; color:var(--ink);}
.flow .st .ic{width:15pt; height:15pt; border:.75pt solid var(--hair2); border-radius:4pt; display:grid; place-items:center; background:#fff; flex:0 0 auto;}
.flow .st .ic svg{width:8pt; height:8pt;}
.chk{display:flex; align-items:center; gap:7pt; border:.75pt solid var(--hair); background:#fff; border-radius:6pt; padding:5.5pt 7pt; font-size:7.6pt;}
.chk .tick{width:10pt; height:10pt; border-radius:3pt; background:var(--ok); display:grid; place-items:center; flex:0 0 auto;}
.chk .tick svg{width:6.5pt; height:6.5pt;}
.chk .pill.auto{margin-left:auto;}

/* stats */
.stats{display:grid; border-top:.75pt solid var(--hair);}
.stat{padding:11pt 14pt 0 0;}
.stat .n{font-family:var(--mono); font-size:30pt; line-height:1; letter-spacing:-.04em; color:var(--ink); font-weight:500;}
.stat .l{font-size:8.2pt; line-height:1.45; color:var(--grey); margin-top:6pt;}
.dark .stats,.cocoa .stats{border-color:rgba(255,255,255,.14);}
.dark .stat .n,.cocoa .stat .n{color:#fff;}
.dark .stat .l{color:#b9bdc4;} .cocoa .stat .l{color:var(--muted-dark);}

/* recurring callout (the Adobe "Experience this" scaffold) */
.callout{border:.75pt solid var(--acc-line); background:#FFFBF2; border-radius:9pt; padding:11pt 13pt;}
.callout .eyebrow{color:var(--acc-deep); font-weight:600;}
.callout .eyebrow::before{content:""; width:5pt; height:5pt; border-radius:50%; background:var(--acc); display:inline-block;}
.callout p{font-size:9pt; line-height:1.5; color:var(--ink2); margin-top:5pt;}

/* quote */
.quote{font-size:15pt; line-height:1.34; letter-spacing:-.015em; color:var(--ink); font-weight:500;}
.dark .quote,.cocoa .quote{color:#fff;}
.who{display:flex; align-items:center; gap:8pt; margin-top:11pt;}
.who .av{width:22pt; height:22pt; border-radius:50%; background:#e3e3e0 center/cover; flex:0 0 auto;}
.who .nm{font-size:8.6pt; font-weight:700; color:var(--ink);}
.who .ti{font-family:var(--mono); font-size:6.6pt; color:var(--muted); margin-top:1pt;}
.dark .who .nm,.cocoa .who .nm{color:#fff;}

/* table of contents */
.toc li{display:grid; grid-template-columns:28pt 1fr auto; align-items:baseline; gap:6pt; padding:6.5pt 0; border-bottom:.75pt solid var(--hair);}
.toc li .no{font-family:var(--mono); font-size:7.4pt; color:var(--acc-deep); font-weight:600;}
.toc li .tt{font-size:12pt; font-weight:600; letter-spacing:-.015em; color:var(--ink);}
.toc li .pp{font-family:var(--mono); font-size:7.4pt; color:var(--muted);}

/* numbered steps */
.stepno{font-family:var(--mono); font-size:7pt; font-weight:600; color:var(--ink); width:17pt; height:17pt; border-radius:50%;
  border:.75pt solid var(--hair2); display:grid; place-items:center; background:#fff; flex:0 0 auto;}
.dark .stepno{background:transparent; color:#fff; border-color:rgba(255,255,255,.3);}

/* photo */
.photo{background:#ddd center/cover no-repeat; border-radius:11pt;}
.ph-cap{position:absolute; left:10pt; bottom:9pt; color:#fff;}
.ph-cap b{display:block; font-size:9pt;}
.ph-cap span{font-family:var(--mono); font-size:6pt; opacity:.85;}

/* logo wall */
.logos{display:grid; border:.75pt solid var(--hair); border-radius:9pt; overflow:hidden;}
.logos div{display:grid; place-items:center; height:44pt; border-right:.75pt solid var(--hair); border-bottom:.75pt solid var(--hair);
  font-weight:700; font-size:11pt; letter-spacing:-.02em; color:#a2a6ae;}
.logos img{height:15pt; width:auto; opacity:.55; filter:grayscale(1);}

/* ---------- agent characters (drawn by assets/agents.js) ---------- */
/* Same fills and strokes as the product crew (app/static/crew-wait.css), without the motion. */
.agent-fig{display:block; width:100%; height:auto; overflow:visible;}
.agent-fig .lc-skin{fill:#FDF0D6; stroke:#15171c; stroke-width:3.2;}
.agent-fig .lc-body{fill:#F2A93B; stroke:#15171c; stroke-width:3.2; stroke-linejoin:round;}
.agent-fig .lc-wht{fill:#ffffff; stroke:#15171c; stroke-width:3;}
.agent-fig .lc-ln{fill:none; stroke:#15171c; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.agent-fig .lc-thick{stroke-width:4.2;}
.agent-fig .lc-thin{stroke-width:2.6;}
.agent-fig .lc-gold{stroke:#E0982B;}
.agent-fig .lc-dot,.agent-fig .lc-ink{fill:#15171c; stroke:none;}
.agent-fig .lc-acc{fill:#F2A93B; stroke:#15171c; stroke-width:2.2;}
.agent-fig .lc-paint{fill:#6FA8DC; stroke:#15171c; stroke-width:2.6; stroke-linejoin:round;}
.agent-fig .lc-paint-s{stroke:#6FA8DC; stroke-width:4;}
.agent-fig .lc-type{font:800 12px 'Schibsted Grotesk',sans-serif; fill:#15171c; letter-spacing:-.04em;}
.agent-fig .lc-shine{fill:#ffffff;}
.agent-fig .lc-shine-ln{stroke:#ffffff; opacity:.85;}
.agent-fig .lc-blush{fill:#ffffff; opacity:.35;}
.agent-fig .lc-drop{stroke:#15171c; stroke-width:3.2; stroke-linejoin:round;}
.agent-fig .lc-screen{fill:#15171c; stroke:#15171c; stroke-width:3.2;}
.agent-fig .lc-pix{fill:#F2A93B;}
.agent-fig .lc-pixln{fill:none; stroke:#F2A93B; stroke-width:3.4; stroke-linecap:round;}
.agent-fig .lc-think{opacity:0;}
.agent-fig .lc-think circle{fill:#E0982B;}
.agent-fig .lc-badge{opacity:0;}
.agent-fig .lc-badge circle{fill:#15171c;}
.agent-fig .lc-badge path{fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;}
.agent-fig[data-pose="thinking"] .lc-core{opacity:.4; filter:grayscale(1);}
.agent-fig[data-pose="thinking"] .lc-think{opacity:1;}
.agent-fig[data-pose="done"] .lc-badge{opacity:1;}

/* ---------- brand logos, drawn from the official files in assets/img/logos ---------- */
.logo{display:inline-block; height:1em; width:auto; vertical-align:-.16em;}
.logo.sm{height:.85em;}