/* MerlinXSL site — the MerlinXSL app look (src/main/resources/static/css/theme.css) laid over the
   Automatize layout in site.css: warm paper palette, orange accent, Newsreader headings,
   Instrument Sans text, JetBrains Mono code, 1 px hairlines, pill buttons. site.css stays a verbatim copy. */

@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("../fonts/newsreader-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("../fonts/newsreader-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens (app values, mapped onto the site.css names) ---------- */
:root, html[data-theme="light"] {
  --bg:#f8f4ed; --surface:#fffdf9; --tint:#efe9df; --line:#e4dccf; --ink:#221c15; --muted:#7b6f61;
  --accent:#ea580c; --accent-soft:#ea580c1c; --btn:#ea580c; --btnFg:#ffffff;
  --serif:'Newsreader', Georgia, serif; --display:var(--serif);
  --term-bg:#221c15; --term-fg:#f2ebe1; --term-hi:#f97316;
  --r:8px; color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#17130f; --surface:#1e1914; --tint:#2a231c; --line:#352c23; --ink:#f2ebe1; --muted:#a3927f;
  --accent:#f97316; --accent-soft:rgba(249,115,22,.16); --btn:#f97316; --btnFg:#17130f;
  --term-bg:#0f0c09; --term-fg:#f2ebe1; --term-hi:#f97316;
  color-scheme:dark;
}
body { background:var(--bg); color:var(--ink); }
::selection { background:var(--accent-soft); }

/* ---------- typography: serif headings like the app ---------- */
.h-hero, .h-detail, .h-big, .h-cta, .h-sec { font-family:var(--serif); font-weight:500; }
.h-hero { letter-spacing:-.035em; line-height:.98; }
.h-big { letter-spacing:-.02em; line-height:1.08; }
.h-cta { letter-spacing:-.025em; }
.h-sec { font-size:24px; letter-spacing:-.01em; }
.hero-title .dim { color:var(--accent); font-style:italic; }
.eyebrow { color:var(--accent); }
.stat b { font-family:var(--serif); font-weight:400; font-size:34px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.why .num, .feat .num, .phases .num, .checks li > span:first-child { color:var(--accent); }

/* ---------- brand: orange dot + serif name (app sidebar) ---------- */
.brand { font:500 21px/1 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.brand-mark { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:none; font-size:0; }
html[data-theme="dark"] .brand-mark { box-shadow:none; }

/* ---------- controls: pill buttons, rounded surfaces ---------- */
.btn, .btn-ghost { border-radius:999px; font-weight:600; }
.btn:hover { filter:brightness(1.08); color:var(--btnFg); text-decoration:none; }
.btn-ghost { border-color:var(--line); background:var(--surface); color:var(--ink); }
.btn-ghost:hover { border-color:var(--ink); background:var(--surface); }
.site-nav > a[aria-current="page"], .site-nav > a:hover { color:var(--accent); }
.side-controls button, .side-controls a { border-radius:999px; }
.side-controls button[aria-pressed="true"] { background:var(--accent); color:var(--btnFg); }
.callout { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.mode-bar { border-radius:999px; overflow:hidden; }
.mode-bar > div { background:var(--accent); border-radius:999px; }
.why > div, .phases li { border-top-color:var(--ink); }
.phases li { border-top-width:2px; }
.mock-web { background:var(--surface); border-color:var(--line); border-radius:var(--r); overflow:hidden; }
.mock-acts span { border-radius:999px; border-color:var(--line); }
.mock-acts span:first-child { background:var(--accent); border-color:var(--accent); color:var(--btnFg); }
.mock-term { background:var(--term-bg); color:var(--term-fg); border-color:var(--term-bg); border-radius:var(--r); overflow-x:auto; }
.mock-term .p { color:var(--term-hi); }
.mock-term .c { color:#a3927f; }
.specs div > span:first-child { color:var(--accent); }
.mono { font-size:.92em; }
:focus-visible { outline-color:var(--accent) !important; }

/* ---------- layout additions ---------- */
.phases.five { grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.mock-jobs > div > small { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.tiers-wrap { overflow-x:auto; }
.tiers thead th:not(:first-child) { text-align:right; }
.tiers th, .tiers td { padding-inline-start:16px; }
.tiers th:first-child { padding-inline-start:0; }
.tiers td, .tiers thead th { white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:760px) { .tiers { font-size:13px; } .tiers th, .tiers td { padding-inline-start:10px; } }
.stats.stats-wide { grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); margin-top:14px; }

/* ---------- boxed browser frame around a captured, real MerlinXSL screen (demo + home) ---------- */
.browser { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:0 24px 60px rgba(34,28,21,.12); }
html[data-theme="dark"] .browser { box-shadow:0 24px 60px rgba(0,0,0,.45); }
.browser-bar { display:flex; align-items:center; gap:14px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--tint); }
.browser-dots { display:flex; gap:6px; flex:none; }
.browser-dots i { width:11px; height:11px; border-radius:50%; background:var(--line); }
.browser-dots i:first-child { background:#ff5f57; } .browser-dots i:nth-child(2) { background:#febc2e; } .browser-dots i:nth-child(3) { background:#28c840; }
.browser-url { flex:1; min-width:0; padding:5px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser-jump select { max-width:220px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:12.5px 'Instrument Sans', system-ui, sans-serif; }
@media (max-width:620px) { .browser-jump { display:none; } }

.browser-view { position:relative; overflow:hidden; background:#f8f4ed; }
.screen-frame { position:absolute; left:0; top:0; width:1280px; height:800px; border:0; transform-origin:0 0; pointer-events:none; opacity:0; transition:opacity .18s; background:#f8f4ed; }
.screen-frame.front { opacity:1; }

/* Home: the runtime API explorer, three captured states behind tabs */
.rt-screens { padding:clamp(36px,4vw,56px) 0; border-bottom:1px solid var(--line); }
.rt-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.rt-tab { padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:500 14px 'Instrument Sans', system-ui, sans-serif; cursor:pointer; }
.rt-tab:hover { border-color:var(--ink); }
.rt-tab[aria-selected="true"] { background:var(--accent); border-color:var(--accent); color:var(--btnFg); font-weight:600; }
.rt-tab:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.rt-note { margin:12px 0 0; font-size:12.5px; color:var(--muted); }
.rt-screens .screen-frame { width:1600px; height:1000px; transition:none; }