/* kosa8.com — shared stylesheet.
   House style follows azmx.ai / kal0.dev / anz33.com: dark terminal ground,
   one amber accent for action, one cyan for links, monospace for anything the
   user would actually type. Everything is inlineable and loads no fonts, so
   the strict CSP in _headers holds. */
:root {
  --bg: #0B0E11;
  --panel: #12161B;
  --panel-2: #171C22;
  --line: #222A32;
  --line-2: #2C3641;
  --ink: #DDE4EA;
  --ink-2: #A7B2BC;
  --muted: #77838D;
  --amber: #FFB454;
  --cyan: #56C7DB;
  --ok: #7FD962;
  --warn: #E8825A;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
  --wrap: 68rem;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
       line-height: 1.62; font-size: 1.02rem; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255,180,84,.25); }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4rem; }
p { max-width: 40rem; color: var(--ink-2); font-size: 1.04rem; }
h1,h2,h3 { color: var(--ink); }
h2 { font-family: var(--sans); font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.22;
     letter-spacing: -.022em; margin: 0 0 1rem; font-weight: 600; max-width: 22ch; text-wrap: balance; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
/* Generous vertical rhythm. Anthropic's pages breathe — sections are
   separated by space rather than rules, and nothing feels crowded. */
section { padding: 6rem 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) { section { padding: 3.8rem 0; } }
section > .wrap > p { margin-bottom: 1.1rem; }
.lead { font-size: 1.1rem; color: var(--ink-2); }
.eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
           text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; }

/* nav */
nav { display: flex; align-items: center; gap: 1.4rem; padding: 1.15rem 0; flex-wrap: wrap;
      border-bottom: 1px solid var(--line); }
.logo { font-family: var(--mono); font-weight: 700; font-size: 1.12rem; color: var(--ink);
        letter-spacing: -.02em; }
.logo b { color: var(--amber); }
nav .links { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap;
             font-family: var(--mono); font-size: .78rem; }
nav .links a { color: var(--muted); }
nav .links a:hover, nav .links a[aria-current="page"] { color: var(--amber); text-decoration: none; }
@media (max-width: 720px) { nav { gap: .6rem; } nav .links { margin-left: 0; gap: .8rem 1rem; } }

/* hero */
header.hero { padding: 6rem 0 4rem; }
@media (max-width: 720px) { header.hero { padding: 3.4rem 0 2.6rem; } }
h1 { font-family: var(--sans); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12;
     margin: 0 0 1.3rem; letter-spacing: -.032em; font-weight: 600; text-wrap: balance; max-width: 17ch; }
h1 .a { color: var(--amber); }
.sub { color: var(--ink-2); font-size: 1.16rem; line-height: 1.6; margin: 0 0 2rem; max-width: 34rem; }
.cta-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.cta { font-family: var(--mono); font-size: .86rem; padding: .68rem 1.15rem; border-radius: 3px;
       border: 1px solid var(--line-2); color: var(--ink); }
.cta.primary { background: var(--amber); border-color: var(--amber); color: #14100A; font-weight: 700; }
.cta:hover { text-decoration: none; filter: brightness(1.1); }
.note { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-top: .8rem; }
.pill { display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
        text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn);
        border-radius: 2px; padding: .16rem .5rem; margin-bottom: 1rem; }

/* terminal */
.term { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
        overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.5); margin: 2.2rem 0; }
.term-bar { display: flex; gap: .4rem; padding: .6rem .85rem; border-bottom: 1px solid var(--line);
            background: var(--panel-2); align-items: center; }
.term-bar i { width: .66rem; height: .66rem; border-radius: 50%; background: var(--line-2); }
.term-bar .t { margin-left: .55rem; font-family: var(--mono); font-size: .66rem; color: var(--muted);
               letter-spacing: .1em; text-transform: uppercase; }
.term pre { margin: 0; padding: 1rem 1.1rem 1.15rem; font-family: var(--mono); font-size: .76rem;
            line-height: 1.75; overflow-x: auto; color: var(--ink); white-space: pre; }
.c-dim { color: var(--muted); } .c-amb { color: var(--amber); }
.c-cyn { color: var(--cyan); } .c-ok { color: var(--ok); } .c-bad { color: var(--warn); }

/* grids and cards */
.grid { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
        padding: 1.5rem 1.6rem; }
.card h3 { font-family: var(--sans); font-size: .98rem; font-weight: 600; color: var(--ink);
           margin: 0 0 .5rem; letter-spacing: -.01em; }
.card p { margin: 0; font-size: .94rem; line-height: 1.58; color: var(--muted); max-width: none; }

/* stat tiles */
.num { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.35rem 1.4rem; }
.num .v { font-family: var(--sans); font-size: 2rem; color: var(--ink); font-weight: 600;
          line-height: 1.05; letter-spacing: -.03em; }
.num .v small { font-size: .78rem; }
.num .k { font-size: .86rem; color: var(--muted); margin-top: .45rem; line-height: 1.45; }

/* tables */
table { border-collapse: collapse; width: 100%; margin-top: 1.1rem; font-size: .9rem; }
th, td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
     color: var(--muted); font-weight: 600; }
td.yes { color: var(--ok); } td.no { color: var(--muted); }
.scroll-x { overflow-x: auto; }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 1.6rem; }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
        padding: 1.15rem 1.15rem 1.35rem; display: flex; flex-direction: column; }
.tier.feat { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255,180,84,.18); }
.tier h3 { font-family: var(--mono); font-size: .82rem; color: var(--muted); letter-spacing: .08em;
           text-transform: uppercase; margin: 0 0 .5rem; }
.tier .price { font-family: var(--mono); font-size: 1.75rem; font-weight: 700; line-height: 1.05; }
.tier .price small { font-size: .68rem; color: var(--muted); font-weight: 400; }
.tier .who { font-size: .8rem; color: var(--muted); margin: .5rem 0 .85rem; min-height: 2.6em; }
.tier ul { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .84rem; }
.tier li { padding: .24rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.tier li:first-child { border-top: 0; }
.tier li b { color: var(--amber); font-family: var(--mono); }
.tier .cta { margin-top: auto; text-align: center; }

/* callout */
.callout { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--warn);
           border-radius: 5px; padding: 1.1rem 1.3rem; margin-top: 1.4rem; }
.callout strong { font-family: var(--mono); font-size: .88rem; color: var(--warn); }
.callout ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; }
.callout li { margin-bottom: .35rem; }
.callout.ok { border-left-color: var(--ok); }
.callout.ok strong { color: var(--ok); }

code.inline { font-family: var(--mono); font-size: .86em; background: var(--panel-2);
              border: 1px solid var(--line); border-radius: 3px; padding: .08rem .34rem; color: var(--ink); }

/* command reference */
.cmd { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.cmd:last-child { border-bottom: 0; }
.cmd code { font-family: var(--mono); font-size: .86rem; color: var(--amber); }
.cmd span { display: block; font-size: .88rem; color: var(--muted); margin-top: .2rem; }

footer { border-top: 1px solid var(--line); padding: 2.4rem 0 3.4rem; color: var(--muted); font-size: .86rem; }
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-bottom: 1.8rem; }
@media (max-width: 760px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
.fgrid h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
            color: var(--muted); margin: 0 0 .6rem; font-weight: 600; }
.fgrid a { display: block; padding: .16rem 0; color: var(--ink-2); font-size: .86rem; }
.fgrid a:hover { color: var(--amber); text-decoration: none; }

/* Utility classes replacing inline style attributes.
   The CSP is style-src 'self' with no 'unsafe-inline', so a style="" attribute
   is blocked outright — it rendered locally and silently broke in production.
   Anything presentational lives here instead. */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.6rem; }
.fineprint { max-width: 44rem; font-size: .82rem; }

/* ---- split hero: copy left, live terminal right (anz33/kal0 pattern) ---- */
.hero-split { display: grid; grid-template-columns: 1.02fr 1fr; gap: 3.6rem; align-items: center;
              padding: 5.5rem 0 4rem; }
@media (max-width: 940px) { .hero-split { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 2.2rem; } }

/* ---- fork tree: the one diagram that explains the product ---- */
.tree { display: grid; grid-template-columns: auto 1fr; gap: 0 1.8rem; align-items: center;
        background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
        padding: 2rem 2.1rem; margin-top: 2.2rem; }
@media (max-width: 700px) { .tree { grid-template-columns: 1fr; gap: .8rem; } }
.trunk { font-family: var(--mono); font-size: .78rem; color: var(--ink); background: var(--panel-2);
         border: 1px solid var(--line-2); border-left: 3px solid var(--amber); border-radius: 4px;
         padding: .7rem .9rem; }
.trunk em { display: block; font-style: normal; color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.branches { display: grid; gap: .5rem; }
.branch { font-family: var(--mono); font-size: .74rem; padding: .5rem .75rem; border-radius: 4px;
          border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
          display: flex; gap: .7rem; align-items: baseline; }
.branch b { color: var(--cyan); font-weight: 600; }
.branch .r { margin-left: auto; font-size: .7rem; }
.branch.win { border-color: var(--ok); }
.branch.win .r { color: var(--ok); }
.branch.lose .r { color: var(--warn); }

/* ---- snapshot: command + what it produced ---- */
.snap { margin-top: 1.4rem; }
.snap h3 { font-family: var(--mono); font-size: .88rem; color: var(--amber); margin: 0 0 .25rem; }
.snap > p { margin: 0 0 .5rem; font-size: .9rem; }
.outcome { display: flex; gap: .55rem; align-items: baseline; font-size: .84rem; color: var(--ink-2);
           background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ok);
           border-radius: 4px; padding: .55rem .8rem; margin-top: -.6rem; }
.outcome b { color: var(--ok); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
             text-transform: uppercase; }

/* ---- comparison strip on the landing page ---- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .versus { grid-template-columns: 1fr; } }
.versus > div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.2rem; }
.versus h3 { font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
             margin: 0 0 .7rem; color: var(--muted); }
.versus ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.versus li { padding: .28rem 0; color: var(--ink-2); }
.versus li::before { content: "—  "; color: var(--muted); }
.versus.keep { border-color: var(--amber); }
.versus .keep li::before { content: "✓  "; color: var(--ok); }

/* ---- step list ---- */
.steps { counter-reset: s; margin-top: 2.2rem; display: grid; gap: 1.35rem; max-width: 40rem; }
.step { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.step::before { content: counter(s); font-family: var(--mono); font-size: .72rem; color: var(--amber);
                border: 1px solid var(--line-2); border-radius: 50%; width: 1.6rem; height: 1.6rem;
                display: grid; place-items: center; }
.step p { margin: 0; font-size: .92rem; }
.step b { color: var(--ink); font-family: var(--mono); font-size: .86rem; }

/* Alternating rhythm: text and terminal swap sides down the page, which is
   what stops a long page reading as one undifferentiated column. */
.alt { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; align-items: center; }
.alt.flip > *:first-child { order: 2; }
@media (max-width: 940px) { .alt { grid-template-columns: 1fr; gap: 1.6rem; }
                            .alt.flip > *:first-child { order: 0; } }
.alt .term { margin: 0; }
.alt h2 { margin-top: 0; }