/* ZoomieLoaf: layout from the R2 design reference; Geist type and a cool, GitHub-like palette. */

@font-face { font-family:"Geist"; font-weight:100 900; font-display:swap; src:url("fonts/geist.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-weight:100 900; font-display:swap; src:url("fonts/geist-mono.woff2") format("woff2"); }

:root {
  --bg:#FFFFFF; --fg:#1F2328; --mut:#59636E; --line:#E1E4E8; --line2:#D1D9E0;
  --panel:#FFFFFF; --soft:#F6F8FA; --sel:#DDF4FF; --dust:#AEB6BF; --inv:#1F2328; --invfg:#FFFFFF;
  --accent:#005FB8; --accent-fg:#FFFFFF; --accent-soft:#DDEBFB; --link:#005FB8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D1117; --fg:#E6EDF3; --mut:#9198A1; --line:#21262D; --line2:#30363D;
    --panel:#161B22; --soft:#161B22; --sel:#1F3A5F; --dust:#484F58; --inv:#E6EDF3; --invfg:#0D1117;
    --accent:#0078D4; --accent-fg:#FFFFFF; --accent-soft:#1B2A40; --link:#4DAAFC;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0D1117; --fg:#E6EDF3; --mut:#9198A1; --line:#21262D; --line2:#30363D;
  --panel:#161B22; --soft:#161B22; --sel:#1F3A5F; --dust:#484F58; --inv:#E6EDF3; --invfg:#0D1117;
    --accent:#0078D4; --accent-fg:#FFFFFF; --accent-soft:#1B2A40; --link:#4DAAFC;
  color-scheme:dark;
}

html { overflow-x:clip; background:var(--bg); }
body {
  margin:0; container:zl / inline-size; overflow-x:clip;
  background:var(--bg); color:var(--fg);
  font:16px/1.6 "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin:0; }
h1, h2 { text-wrap:balance; }
p { text-wrap:pretty; }
code, .mono, kbd { font-family:"Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; }
.mut { color:var(--mut); }
.wrap { max-width:1040px; margin:0 auto; padding-left:24px; padding-right:24px; box-sizing:border-box; }

/* Header */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:18px; padding-bottom:18px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand > a { font-weight:650; font-size:17px; letter-spacing:-0.01em; text-decoration:none; }
.hnav { display:flex; align-items:center; gap:22px; font-size:15px; }
.hnav a { text-decoration:none; }
.hnav a:hover, .hnav a[aria-current="page"] { text-decoration:underline; }
.tgl { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:-8px -10px -8px -6px; padding:0; border:0; border-radius:8px; background:none; color:inherit; cursor:pointer; }
.tgl svg { width:18px; height:18px; }

/* Buttons and links */
.btn { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:8px; background:var(--accent); color:var(--accent-fg); font-weight:600; font-size:15px; text-decoration:none; box-sizing:border-box; }
.btn:hover { opacity:.9; }
.btn.ghost { background:none; color:var(--fg); border:1px solid var(--line2); }
.btn.ghost:hover { border-color:var(--fg); opacity:1; }
.lnk { font-weight:550; font-size:15px; min-height:44px; display:inline-flex; align-items:center; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; }

/* Install command with a copy button */
.cmd { display:inline-flex; align-items:center; max-width:100%; min-height:44px; border:1px solid var(--line2); border-radius:8px; background:var(--panel); box-sizing:border-box; }
.cmd code { padding:0 14px; font-size:13.5px; white-space:nowrap; overflow-x:auto; }
.cmd button { align-self:stretch; padding:0 14px; border:0; border-left:1px solid var(--line); background:none; color:var(--mut); font:inherit; font-size:14px; cursor:pointer; border-radius:0 8px 8px 0; }
.cmd button:hover { color:var(--fg); }

/* Home: intro */
.intro { padding-top:56px; padding-bottom:40px; }
.intro > div { max-width:600px; display:flex; flex-direction:column; gap:12px; }
.intro h1 { font-size:clamp(1.75rem, 1.3rem + 1.6cqw, 2.1rem); line-height:1.2; font-weight:650; letter-spacing:-0.02em; }
.intro .tagline { font-size:17px; font-weight:600; }

/* Product rows */
.products { padding-bottom:32px; }
.prod { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; padding:56px 0; border-top:1px solid var(--line); }
.prod-text { display:flex; flex-direction:column; gap:18px; }
.prod-name { display:flex; align-items:center; gap:14px; }
.prod-name svg { width:44px; height:44px; flex:none; }
.prod-name h2 { font-size:1.5rem; line-height:1.2; font-weight:650; }
.prod-name h2 a { text-decoration:none; }
.prod-name .kind { font-size:14px; color:var(--mut); }
.facts { display:grid; grid-template-columns:88px minmax(0,1fr); gap:6px 16px; font-size:14.5px; line-height:1.5; padding-top:16px; border-top:1px solid var(--line); }
.facts dt { color:var(--mut); }
.icon-bg { fill:var(--fg); }
.icon-bg.accent { fill:var(--accent); }
.icon-fg { stroke:var(--bg); fill:none; }
.icon-fg.thin { stroke-width:1.3; }
.icon-fg.bold { stroke-width:2.3; stroke-linecap:round; }
.icon-fill { fill:var(--bg); }

/* Mock windows */
.frame { background:var(--panel); border:1px solid var(--line2); border-radius:10px; overflow:hidden; font-size:13.5px; }
.frame-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; min-height:38px; border-bottom:1px solid var(--line); color:var(--mut); }
.frame-bar .file { font-size:12px; }
.seg { display:flex; gap:2px; border:1px solid var(--line); border-radius:6px; padding:2px; font-size:11px; }
.seg span { padding:1px 8px; border-radius:4px; }
.seg .on { background:var(--inv); color:var(--invfg); }
.url { flex:1; border:1px solid var(--line); border-radius:6px; padding:1px 10px; font-size:12px; color:var(--mut); }
.mock { padding:28px 36px 32px; display:flex; flex-direction:column; gap:10px; }
.mock.web { padding:26px 36px 30px; gap:12px; }
.mock .doc-title { font-size:22px; font-weight:650; letter-spacing:-0.01em; }
.mock .doc-link { text-decoration:underline; text-underline-offset:3px; color:var(--fg); }
.mock .doc-h { font-size:15px; font-weight:650; margin-top:6px; }
.todos { display:flex; flex-direction:column; gap:5px; }
.todo { display:flex; gap:10px; align-items:center; }
.box { flex:none; width:14px; height:14px; border-radius:3px; border:1.5px solid var(--line2); box-sizing:border-box; }
.box.done { border:0; background:var(--fg); display:inline-flex; align-items:center; justify-content:center; }
.box.done svg { width:10px; height:10px; }
.box.done path { fill:none; stroke:var(--panel); stroke-width:1.8; }
.todo.done span:last-child { text-decoration:line-through; color:var(--mut); }
.tbl { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-top:8px; font-size:13px; }
.tbl span { padding:6px 10px; }
.tbl .th { font-weight:600; background:var(--soft); }
.tbl span:nth-child(even) { border-left:1px solid var(--line); }
.tbl span:nth-child(n+3) { border-top:1px solid var(--line); }
.serif { font-family:Charter, "Iowan Old Style", Georgia, serif; }
.web-title { font-size:21px; font-weight:600; line-height:1.3; }
.web-text { font-size:15px; line-height:1.65; }
.selected { background:var(--sel); box-shadow:0 0 0 2px var(--sel); }
.aibar { align-self:flex-start; display:flex; flex-wrap:wrap; align-items:center; gap:2px; background:var(--inv); color:var(--invfg); border-radius:9px; padding:4px; font-size:12.5px; }
.aibar span { padding:3px 9px; }
.aibar .on { border-radius:6px; background:var(--invfg); color:var(--inv); }
.aibar .key { padding:0 8px; font-size:11px; opacity:.7; }
.answer { border:1px solid var(--line2); border-radius:8px; padding:10px 14px; display:flex; flex-direction:column; gap:4px; max-width:420px; }
.answer b { font-weight:600; }
.answer small { font-size:12px; color:var(--mut); }

/* Product pages */
.phero { padding-top:56px; padding-bottom:48px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.phero .prod-name { flex-direction:column; gap:10px; }
.phero h1 { font-size:clamp(1.75rem, 1.3rem + 1.6cqw, 2.1rem); line-height:1.2; font-weight:650; letter-spacing:-0.02em; max-width:640px; }
.phero p { max-width:560px; color:var(--mut); font-size:17px; }
.phero .actions { justify-content:center; margin-top:8px; }
.phero .small { font-size:14px; color:var(--mut); }
.showcase { padding-bottom:56px; }
.showcase .frame { max-width:960px; margin:0 auto; }
.section { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; padding:48px 0; border-top:1px solid var(--line); }
.section h2 { font-size:1.25rem; line-height:1.3; font-weight:650; letter-spacing:-0.01em; }
.section .lede { margin-top:10px; color:var(--mut); }
.feature-list { display:flex; flex-direction:column; }
.feature-list div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
.feature-list div:first-child { border-top:0; padding-top:0; }
.feature-list dt { font-weight:600; }
.feature-list dd { color:var(--mut); }
.diff { font-size:13px; line-height:1.7; }
.diff .d { display:block; padding:0 16px; white-space:pre; overflow-x:auto; }
.diff .hunk { color:var(--mut); }
.diff .del { background:color-mix(in srgb, #c2410c 12%, transparent); }
.diff .add { background:color-mix(in srgb, #15803d 13%, transparent); }
.diff-body { padding:12px 0; }
.steps { list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:step; }
.steps li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; counter-increment:step; }
.steps li::before { content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid var(--line2); border-radius:50%; font-size:13px; color:var(--mut); }
kbd { font-size:12.5px; border:1px solid var(--line2); border-bottom-width:2px; border-radius:5px; padding:1px 6px; background:var(--panel); }
.where { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.where > div { border:1px solid var(--line2); border-radius:10px; padding:18px 20px; background:var(--panel); display:flex; flex-direction:column; gap:6px; }
.where b { font-weight:650; }
.where p { font-size:15px; color:var(--mut); }

/* Legal pages */
.legal { max-width:680px; padding-top:48px; padding-bottom:56px; }
.legal h1 { font-size:clamp(1.75rem, 1.3rem + 1.6cqw, 2.1rem); line-height:1.2; font-weight:650; letter-spacing:-0.02em; }
.legal .effective { margin:8px 0 28px; color:var(--mut); font-size:15px; }
.legal .lead { font-size:17px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.legal h2 { font-size:1.2rem; font-weight:650; margin:36px 0 8px; }
.legal h3 { font-size:1rem; font-weight:650; margin:22px 0 6px; }
.legal p { margin:0 0 12px; }
.legal ul { padding-left:20px; margin:0 0 12px; }
.legal li + li { margin-top:6px; }
.legal li ul { margin-top:6px; }
.legal .toc { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:15px; padding:16px 0 0; }

/* Footer */
.site-footer { padding-bottom:36px; font-size:14px; color:var(--mut); }
.site-footer > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-top:24px; border-top:1px solid var(--line); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:6px 20px; }

/* Approved header animation: the loaf winds up, zips off right leaving dust, returns from the left. */
.zl-catbtn { position:relative; display:inline-flex; width:34px; height:26px; padding:0; margin:0; border:0; background:none; color:inherit; cursor:pointer; }
.zl-cat { position:absolute; left:0; bottom:0; width:34px; height:26px; overflow:visible; transform-origin:50% 100%; }
.zl-cat g { fill:currentColor; }
.zl-eyed { opacity:0; }
.zl-puff { position:absolute; left:-6px; bottom:-3px; width:44px; height:18px; opacity:0; pointer-events:none; color:var(--dust); transform-origin:50% 100%; }
.zl-puff circle { fill:currentColor; }
.zl-zoom .zl-cat { animation:zl-trip 3s linear both; }
.zl-zoom .zl-eyed { animation:zl-eyes 3s step-end both; }
.zl-zoom .zl-plain { animation:zl-noeyes 3s step-end both; }
.zl-zoom .zl-puff { animation:zl-puff 3s ease-out both; }
/* The eyes open first, the cat holds still for a beat, then winds up and runs. */
@keyframes zl-trip {
  0%, 13% { transform:none; animation-timing-function:ease-out; }
  21% { transform:translateX(-3px) scale(1.14,.84); animation-timing-function:cubic-bezier(.5,0,1,1); }
  25.5% { transform:translateX(5px) scale(1.3,.88); animation-timing-function:cubic-bezier(.6,0,1,.7); }
  39.3% { transform:translateX(calc(100cqw + 80px)) scale(2.4,.7); visibility:visible; }
  39.8%, 72.29% { transform:translateX(calc(100cqw + 80px)) scale(2.4,.7); visibility:hidden; }
  72.3% { transform:translateX(-60cqw) scale(2.4,.7); visibility:visible; animation-timing-function:cubic-bezier(0,.55,.35,1); }
  87.9% { transform:translateX(2px) scale(1.06,.97); animation-timing-function:ease-out; }
  92.2% { transform:translateX(0) scale(1.16,.82); animation-timing-function:ease-in-out; }
  100% { transform:none; }
}
@keyframes zl-eyes { 0% { opacity:0; } 2% { opacity:1; } 96% { opacity:0; } }
@keyframes zl-noeyes { 0% { opacity:1; } 2% { opacity:0; } 96% { opacity:1; } }
@keyframes zl-puff { 0%, 23% { opacity:0; transform:scale(.4); } 27% { opacity:.85; transform:scale(.9); } 52% { opacity:0; transform:translateY(-4px) scale(1.5); } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .zl-zoom .zl-cat, .zl-zoom .zl-eyed, .zl-zoom .zl-plain, .zl-zoom .zl-puff { animation:none; }
}

/* Narrow screens (container queries on the page width, as in the design) */
@container zl (max-width:820px) {
  .prod, .section { grid-template-columns:minmax(0,1fr); gap:28px; padding:40px 0; }
  .where { grid-template-columns:1fr; }
}
@container zl (max-width:560px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .hnav { gap:14px; font-size:14px; }
  .mock, .mock.web { padding:20px 20px 22px; }
  .feature-list div { grid-template-columns:1fr; gap:2px; }
  .cmd code { font-size:12px; padding:0 10px; }
}

/* The only blue: links inside running text. Navigation, buttons and footer stay monochrome. */
.phero a:not(.btn), .section a, .legal a, .prod-text p a { color:var(--link); }

/* The live Margin editor */
.frame.live { line-height:0; }
.frame.live { position:relative; }
.frame.live::before { content:"Loading Margin…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mut); font-size:14px; line-height:1.6; }
.frame.live iframe { position:relative; display:block; width:100%; height:460px; border:0; background:transparent; }
.showcase .frame.live iframe { height:560px; }
.try { margin-top:10px; font-size:13.5px; color:var(--mut); }
.showcase .try { max-width:960px; margin:10px auto 0; }
@container zl (max-width:560px) { .frame.live iframe, .showcase .frame.live iframe { height:480px; } }

/* Geist headings */
.intro h1, .phero h1, .legal h1 { font-weight:600; letter-spacing:-0.035em; }
.prod-name h2, .section h2, .legal h2 { font-weight:600; letter-spacing:-0.02em; }
.prod-name .app-icon { width:44px; height:44px; flex:none; border-radius:10px; }
.phero .app-icon { width:56px; height:56px; border-radius:13px; }