/* Existing zokie.dev brand: keep identity separate from layout exploration. */
@font-face {font-family:'Bricolage Grotesque';src:url('assets/fonts/bricolage-grotesque.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face {font-family:Figtree;src:url('assets/fonts/figtree.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face {font-family:'Fragment Mono';src:url('assets/fonts/fragment-mono.woff2') format('woff2');font-weight:400;font-display:swap}
:root {--ink:#ece8df;--muted:#a8a399;--line:#26241f;--paper:#0c0b0a;--blue:#9aa3ff;--display:'Bricolage Grotesque',sans-serif;--mono:'Fragment Mono',monospace;font-family:Figtree,ui-sans-serif,system-ui,sans-serif}
#landing-root main { max-width: none; margin: 0; }
#landing-root .site-footer nav a { color: var(--muted); }
body,.site-header,.hero,.closing {background:var(--paper);color:var(--ink)}
h1,h2,h3,.brand,.faq summary {font-family:var(--display);color:var(--ink);font-weight:600}
.brand {font-weight:700}
h1,h1>span,.closing h2 {color:var(--ink)}
.hero-copy>p,.hero-note,.hero-actions>.text-link,.workspace-label,.workspace figcaption,.connections>p,.model-logos .more-models,.kicker,.step-title>span,.section-heading>p,.anywhere-copy>p:not(.kicker),.availability,.illustration-label,.details-grid p,.faq>div>p:not(.kicker),details>p,.closing .kicker,.closing>p:not(.kicker),.closing-note,.site-footer>span,.site-footer small {color:var(--muted)}
.site-header nav a,.sign-in {color:var(--muted)}
.site-header nav a:hover,.sign-in:hover {color:var(--ink)}
.site-header,.closing {border-color:var(--line)}
.button {background:#ece8df;color:#0c0b0a;box-shadow:none}
.button:hover {background:#d9d5cc}
.eyebrow {background:#1a1917;border-color:#2a2823;color:#c8c4ba}
.status-dot,.eyebrow .status-dot {background:#7edba6}
.cloud {display:none}
.workspace img {box-shadow:0 0 0 1px #2a2823,0 20px 65px #0004}
.workspace-label,.kicker,.step-title>span,.tag,.branch-note,.review-count,.code-line,.illustration-label,code {font-family:var(--mono)}
.demo,.phone,.approval {background:#121110;border-color:#2a2823;color:var(--ink)}
.anywhere {background:#121110}
.orbit {border-color:#26241f}
.phone {border-color:#3a372f}
.island,.home-indicator {background:#ece8df}
.floating-note {background:#1a1917;border-color:#3a372f;color:var(--ink)}
.mini-bar,.board-row,.agent-row,.review-footer,.phone-tabs,.phone-task {border-color:#26241f}
.mini-bar>span,.board-row small,.agent-row small,.phone-task small,.phone-task>span:last-child,.branch-note,.review-footer,.phone-tabs,.approval-heading {color:#a8a399}
.phone-tabs b {color:#ece8df}
.tag {color:#c8c4ba;border-color:#3a372f}
.agent-icon {background:#1a1917;border-color:#3a372f;color:#e0a84a}
.mini-bar .live-indicator,.mini-bar .review-count,.check-row {color:#7edba6}
.review-count>span {color:#e07a6a}
.removed {background:#2e1d19;color:#e07a6a}
.added {background:#17231f;color:#7edba6}
.merge-label {background:#17231f;color:#7edba6}
.phone-task.selected {background:#292318}
.approval code,.deny {background:#1a1917;color:#d9d5cc}
.approve {background:#ece8df;color:#0c0b0a}
.feature-icon {color:#a8a399}
summary>span {color:#a8a399}
.skip {background:#ece8df;color:#0c0b0a}
a:focus-visible,summary:focus-visible {outline-color:#9aa3ff}
::selection {background:#3a372f;color:#ece8df}

/* A quiet star field and planetary horizon in Zokie's warm neutrals. */
.hero {
  isolation: isolate;
  background: var(--paper);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 800px;
  background:
    url("assets/hero-space.svg") center top / max(100%, 1100px) auto no-repeat,
    radial-gradient(ellipse 60% 32% at 50% 24%, #6552392e, transparent 85%),
    radial-gradient(ellipse 35% 30% at 5% 25%, #65523924, transparent 85%),
    radial-gradient(ellipse 38% 28% at 96% 43%, #81736320, transparent 85%);
  mask-image: linear-gradient(#000 0 65%, transparent 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 125%;
  height: 560px;
  left: -12.5%;
  top: 355px;
  border-radius: 50%;
  border-top: 1px solid #d9b58138;
  box-shadow: 0 -28px 90px -28px #d7aa704d, 0 -4px 24px -8px #f0c88145;
  background: radial-gradient(ellipse 36% 22% at 50% 0, #e8bd7833, transparent 100%);
  pointer-events: none;
}
@media (max-width: 600px) {
  .hero::before { background-size: 850px auto, auto, auto, auto; }
  .hero::after { top: 400px; width: 180%; left: -40%; }
}
@media (max-width: 380px) {
  .hero::after { top: 425px; }
}
@media (max-width: 360px) {
  .hero::after { top: 480px; }
}

.founding-note { margin-top: 22px; }
@media (max-width: 600px) {
  .founding-note { margin-top: 14px; }
}

/* Reserve each line so the CTA stays put while the platform changes. */
#hero-title { font-size: 44px; line-height: 1.16; letter-spacing: -1.7px; }
#hero-title > span { display: block; margin: 0; }
.headline-lead, .headline-switch { min-height: 1.16em; }
.headline-switch { overflow: hidden; }
.headline-active { display: block; }
@media (max-width: 600px) {
  #hero-title { font-size: 32px; letter-spacing: -1px; }
  .headline-lead { min-height: 2.32em; }
}
@media (max-width: 360px) {
  #hero-title { font-size: 29px; }
  .headline-switch { min-height: 2.32em; }
}

.founding-note strong {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: #e0c08a;
  font-size: 12px;
  font-weight: 500;
}
.founding-note strong > img {
  flex: 0 0 15px;
  width: 15px;
  height: 17px;
}
.founding-note small {
  display: block;
  max-width: 340px;
  margin: 2px auto 0;
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 950px) {
  .site-header .sign-in { display: flex; }
  .site-header .header-actions { gap: 12px; }
}
@media (max-width: 600px) {
  .site-header .sign-in { font-size: 12px; }
  .site-header .header-actions { gap: 8px; }
  .site-header nav a[href='/pricing/'] { margin-right: 4px; }
}