/* Shared styles for staffetta.io content pages (home, build).
   The demo page (demo.html) keeps its own self-contained styles. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format('woff2')}
:root{
  --ink:oklch(22% 0.02 264);
  --muted:oklch(52% 0.02 264);
  --faint:oklch(66% 0.015 264);
  --line:oklch(90% 0.012 264);
  --wash:oklch(97% 0.008 264);
  --paper:#ffffff;
  --primary:oklch(56% 0.19 276);
  --primary-soft:oklch(95% 0.025 276);
  --primary-line:oklch(88% 0.03 276);
  --trace:oklch(62% 0.12 190);
  --trace-soft:oklch(95% 0.03 190);
  --ok:oklch(58% 0.14 145);
  --ok-soft:oklch(95% 0.04 145);
  --amber:oklch(70% 0.14 70);
  --amber-soft:oklch(96% 0.04 80);
  --bg:oklch(98% 0.008 90);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Manrope','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --ink:oklch(94% 0.008 264); --muted:oklch(74% 0.015 264); --faint:oklch(58% 0.018 264);
  --line:oklch(32% 0.015 264); --wash:oklch(25% 0.014 264); --paper:oklch(21% 0.014 264);
  --primary:oklch(72% 0.15 276); --primary-soft:oklch(30% 0.065 276); --primary-line:oklch(44% 0.09 276);
  --trace:oklch(74% 0.11 190); --trace-soft:oklch(29% 0.05 190);
  --ok:oklch(72% 0.13 145); --ok-soft:oklch(29% 0.05 145);
  --amber:oklch(78% 0.13 70); --amber-soft:oklch(30% 0.05 70);
  --bg:oklch(16% 0.012 264);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 12% 4%,oklch(93% 0.05 276 / .55),transparent 42%),
    radial-gradient(circle at 92% 12%,oklch(93% 0.05 190 / .5),transparent 40%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme="dark"] body{background:
  radial-gradient(circle at 12% 4%,oklch(32% 0.06 276 / .5),transparent 42%),
  radial-gradient(circle at 92% 12%,oklch(32% 0.05 190 / .42),transparent 40%),
  var(--bg);}
:focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(30px,5.2vw,50px);font-weight:800}
h2{font-size:clamp(23px,3.4vw,32px);font-weight:800}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
p{max-width:64ch}
a{color:var(--primary)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
code,.mono{font-family:var(--mono);font-variant-ligatures:none;font-size:.92em}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.lead{font-size:17px;color:var(--muted);margin-top:14px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.section{padding:72px 0;border-top:1px solid var(--line)}
.section-head{margin-bottom:30px}
.section-head p{margin-top:12px;color:var(--muted);font-size:16px}

/* header */
header.bar{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:oklch(98% 0.008 90 / .82);border-bottom:1px solid var(--line)}
[data-theme="dark"] header.bar{background:oklch(16% 0.012 264 / .85)}
.bar-in{max-width:1060px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mark{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.025em;display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.mark .tld{color:var(--faint);font-weight:700}
.brandmark{display:inline-flex;flex-shrink:0}
.brandmark svg{display:block}
nav.bar-nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav.bar-nav a{font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}
nav.bar-nav a:hover,nav.bar-nav a[aria-current=page]{color:var(--primary)}
.tools{display:flex;align-items:center;gap:8px}
.tool{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;text-decoration:none}
.tool:hover{border-color:var(--primary-line);color:var(--primary)}
.tool.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.tool.primary:hover{filter:brightness(1.08);color:#fff}
[data-theme="dark"] .tool.primary{color:oklch(16% 0.012 264)}
.tool svg{display:block;flex-shrink:0}
@media(max-width:720px){
  nav.bar-nav{order:3;width:100%;margin-left:0;gap:14px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  nav.bar-nav::-webkit-scrollbar{display:none}
  nav.bar-nav a{white-space:nowrap}
  .tools{margin-left:auto}
  .tool .lbl{display:none}
  .section{padding:44px 0}
  h1{font-size:28px}
  h2{font-size:22px}
  .lead{font-size:15.5px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:13px;border:none;background:var(--primary);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;transition:filter .15s ease}
.btn:hover{filter:brightness(1.08)}
[data-theme="dark"] .btn{color:oklch(16% 0.012 264)}
.btn.ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary-line)}
.btn.ghost:hover{background:var(--primary-soft);filter:none}
.btn.sm{padding:9px 14px;font-size:13px;border-radius:10px}
.cta{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card .who{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--trace)}
.card p{color:var(--muted);font-size:14.5px}
.card .go{margin-top:auto;padding-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.card.door{border-width:1.5px}
.card.door:hover{border-color:var(--primary-line)}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--amber-soft);color:var(--ink);border:1px solid var(--line);vertical-align:middle}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips a{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;background:var(--wash)}
.chips a:hover{border-color:var(--primary-line);color:var(--primary)}

.note{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--paper);border-radius:12px;padding:16px 18px;font-size:14.5px;color:var(--muted);max-width:760px}
.note b{color:var(--ink)}

ul.plain{list-style:none;display:flex;flex-direction:column;gap:12px}
ul.plain li{padding-left:22px;position:relative;color:var(--muted);font-size:15px;max-width:68ch}
ul.plain li::before{content:'';position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--trace)}
ul.plain li b{color:var(--ink)}

pre.code{background:var(--wash);border:1px solid var(--line);border-radius:14px;padding:18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink)}
pre.code .k{color:var(--primary)}
pre.code .s{color:var(--trace)}
pre.code .c{color:var(--faint)}
.caption{font-size:12.5px;color:var(--faint);margin-top:8px}

table.t{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.t th,table.t td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--wash)}
table.t tr:last-child td{border-bottom:none}
table.t td:first-child{font-weight:600;white-space:nowrap}
.tablewrap{overflow-x:auto}

footer{padding:44px 0 60px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
footer a{color:var(--muted)}
footer p{margin-bottom:8px;max-width:72ch}
footer .links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
footer .links a{font-weight:600;text-decoration:none}

@media(max-width:720px){nav.bar-nav a.nav-contact{display:none}}