/* ==========================================================================
   Srusan — Sirus product page and knowledge base
   Author: Sanjay Sivakumar (github.com/SruSanCyborg)
   ========================================================================== */

:root {
  --allow: #1fb26b;
  --verify: #5b8cff;
  --constrain: #ffb020;
  --block: #ff3b2f;
  --cyan: #22c3e6;
  --violet: #7c4dff;
  --grad: linear-gradient(90deg, #1fb26b, #22c3e6 38%, #3d5afe 70%, #7c4dff);
  --term: #0b0b0a;
}

.v-allow { color: var(--allow); }
.v-verify { color: var(--verify); }
.v-constrain { color: var(--constrain); }
.v-block { color: var(--block); }
.q { color: var(--cyan); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav a.is-active span { color: var(--ink); }
.nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); }

/* ---------- Shared bits ---------- */
.crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs i { width: 14px; height: 1px; background: var(--line-2); }
.crumbs span { color: var(--ink-2); }

.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 100px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }

.s-para { color: var(--ink-2); font-size: clamp(15px, 1.15vw, 18px); max-width: 60ch; margin-top: 24px; }
.s-para.small { font-size: 14px; color: var(--muted); }
.s-para code, .term-note code, .docs code:not(pre code) { font-family: var(--f-mono); font-size: .88em; padding: 2px 6px; border-radius: 4px; background: rgba(243, 241, 236, .07); color: var(--ink); }

.term { background: var(--term); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.term .term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; }
.term .term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a28; }
.term .term-bar i:nth-child(1) { background: var(--red); }
.term .term-bar i:nth-child(3) { background: var(--green); }
.term .term-bar span { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term pre { margin: 0; padding: 20px; font-family: var(--f-mono); font-size: clamp(11px, .9vw, 13px); line-height: 1.7; color: var(--ink-2); overflow-x: auto; }
.term pre b { color: var(--ink); font-weight: 500; }
.term-sm pre { padding: 16px 18px; }
.dim { color: #5c5b57; }
.t-p { color: var(--green); }
.t-allow { color: var(--allow); font-style: normal; font-weight: 700; }
.t-verify { color: var(--verify); font-style: normal; font-weight: 700; }
.t-constrain { color: var(--constrain); font-style: normal; }
.t-block { color: var(--block); font-style: normal; font-weight: 700; }

.install { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(243, 241, 236, .03); max-width: 460px; }
.install code { font-family: var(--f-mono); font-size: 15px; color: var(--ink); white-space: nowrap; overflow-x: auto; }
.install .prompt { color: var(--green); margin-right: 6px; }
.copy { flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); transition: background-color .3s, color .3s; }
.copy:hover { background: rgba(243, 241, 236, .08); color: var(--ink); }
.copy svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease-out); }
.copy .ic-done { opacity: 0; transform: scale(.5); color: var(--green); }
.copy.is-done .ic-copy { opacity: 0; transform: scale(.5); }
.copy.is-done .ic-done { opacity: 1; transform: scale(1); }

/* ---------- Hero ---------- */
.s-hero { padding-top: 130px; padding-bottom: clamp(60px, 8vw, 110px); }
.s-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(28px, 4vw, 52px); }
.s-mark { margin: 28px 0 26px; }
.sirus-mark { width: min(100%, 420px); height: auto; overflow: visible; }
.s-title { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(2.3rem, 5vw, 5.4rem); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.s-lede { margin: 28px 0 32px; color: var(--ink-2); max-width: 54ch; font-size: clamp(15px, 1.15vw, 18px); }
.s-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.term-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

.feed { padding: 16px 18px 18px; font-family: var(--f-mono); font-size: clamp(11px, .86vw, 13px); }
.feed-rows { height: 300px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); display: flex; flex-direction: column; justify-content: flex-end; }
.feed-row { display: grid; grid-template-columns: 14px 92px 1fr auto; gap: 10px; align-items: baseline; padding: 4px 0; white-space: nowrap; color: var(--ink-2); }
.feed-row .g { font-weight: 700; }
.feed-row .who { overflow: hidden; text-overflow: ellipsis; }
.feed-row .why { grid-column: 3 / -1; color: #6e6d68; white-space: normal; font-size: .92em; margin-top: -2px; }
.feed-row.r-allow .g, .feed-row.r-allow .t { color: var(--allow); }
.feed-row.r-verify .g, .feed-row.r-verify .t { color: var(--verify); }
.feed-row.r-constrain .g, .feed-row.r-constrain .t { color: var(--constrain); }
.feed-row.r-block .g, .feed-row.r-block .t { color: var(--block); }
.feed-row .t { font-weight: 700; }
.feed-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.feed-sum div { display: flex; flex-direction: column; }
.feed-sum b { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1; }
.feed-sum span { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* ---------- Stats ---------- */
.s-stats { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 32px 20px 32px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; }
.stat > span { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------- Gap ---------- */
.s-gap, .s-verdicts, .s-cap, .s-results, .s-scan, .s-ops, .s-ci { padding-top: clamp(90px, 12vw, 170px); }
.s-quote { margin: 0; font-family: var(--f-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: clamp(2.2rem, 6vw, 6.4rem); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; max-width: 15em; }
.s-gap-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.s-gap-lead { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 20px); }
.fail-cards { display: grid; gap: 12px; }
.fail { position: relative; padding: 24px 24px 24px 120px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.fail-tag { position: absolute; left: 24px; top: 26px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--block); }
.fail h3 { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 20px; text-transform: uppercase; margin-bottom: 6px; }
.fail p { color: var(--ink-2); font-size: 15px; }
.fail-ok { border-color: transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.fail-ok .fail-tag { color: var(--allow); }

/* ---------- Verdicts ---------- */
.flow { margin: clamp(36px, 5vw, 64px) 0 24px; }
.flow-svg { width: 100%; height: auto; overflow: visible; }
.flow-node rect { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1; }
.flow-node text { fill: var(--ink); font-family: var(--f-mono); font-size: 14px; text-anchor: middle; letter-spacing: .04em; }
.flow-node .flow-sub { fill: var(--muted); font-size: 11px; }
.flow-guard rect { stroke: var(--cyan); stroke-width: 1.5; }
.flow-line { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.l-allow { stroke: var(--allow); } .l-verify { stroke: var(--verify); } .l-constrain { stroke: var(--constrain); } .l-block { stroke: var(--block); }
.n-allow rect { stroke: var(--allow); } .n-allow text { fill: var(--allow); font-weight: 700; }
.n-verify rect { stroke: var(--verify); } .n-verify text { fill: var(--verify); font-weight: 700; }
.n-constrain rect { stroke: var(--constrain); } .n-constrain text { fill: var(--constrain); font-weight: 700; }
.n-block rect { stroke: var(--block); } .n-block text { fill: var(--block); font-weight: 700; }
.flow-dot { fill: var(--ink); opacity: 0; }
.verdicts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.verdict { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column; }
.verdict::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: currentColor; }
.verdict-glyph { font-family: var(--f-mono); font-size: 28px; font-weight: 700; line-height: 1; }
.verdict h3 { font-family: var(--f-mono); font-size: 22px; font-weight: 700; letter-spacing: .04em; margin: 18px 0 10px; }
.verdict p { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.verdict code { margin-top: auto; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

/* ---------- Checks ---------- */
.s-checks { margin-top: clamp(90px, 12vw, 170px); padding: clamp(80px, 10vw, 140px) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.check { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); transition: border-color .4s, transform .6s var(--ease-out); }
.check:hover { border-color: var(--line-2); transform: translateY(-4px); }
.check-ic { width: 44px; height: 44px; color: var(--ink); transition: color .4s; }
.check:hover .check-ic { color: var(--cyan); }
.check-n { position: absolute; top: 28px; right: 28px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.check h3 { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: -.02em; margin: 36px 0 8px; }
.check p { color: var(--ink-2); font-size: 15px; }
.check code { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-family: var(--f-mono); font-size: 12px; color: var(--block); }

/* ---------- Injection ---------- */
.s-inject { padding: clamp(90px, 12vw, 170px) 0 0; }
.s-inject-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.s-inject .h2 { font-size: clamp(2rem, 4vw, 4.4rem); }
.inject-steps { margin-top: 36px; counter-reset: st; display: grid; gap: 4px; }
.inject-steps li { counter-increment: st; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; transition: color .5s; }
.inject-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 15px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); transition: color .5s; }
.inject-steps li b { color: var(--ink-2); font-weight: 600; transition: color .5s; }
.inject-steps li.is-on { color: var(--ink-2); }
.inject-steps li.is-on b { color: var(--ink); }
.inject-steps li.is-on::before { color: var(--block); }
.ladder { white-space: normal; }
.ladder .ln { display: block; white-space: pre; min-height: 1.7em; opacity: .12; transition: opacity .5s, background-color .5s; }
.ladder .ln.is-on { opacity: 1; }
.ladder .ln.is-now { background: rgba(243, 241, 236, .04); }
.t-big { font-size: 1.25em; letter-spacing: .08em; }

/* ---------- Near cap ---------- */
.s-cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.meter { padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.meter-track { position: relative; height: 64px; border-radius: 6px; background: rgba(243, 241, 236, .05); margin-top: 96px; }
.meter-zone { position: absolute; top: 0; bottom: 0; left: 90%; right: 0; background: repeating-linear-gradient(135deg, rgba(255, 59, 47, .25) 0 6px, transparent 6px 12px); border-left: 1px dashed var(--block); }
.meter-zone span { position: absolute; bottom: calc(100% + 8px); right: 0; font-family: var(--f-mono); font-size: 11px; color: var(--block); white-space: nowrap; }
.meter-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 99%; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, rgba(31, 178, 107, .25), rgba(255, 176, 32, .5)); transform-origin: left; }
.meter-pin { position: absolute; left: 99%; top: -10px; bottom: -10px; width: 2px; background: var(--ink); }
.meter-pin b, .meter-pin span { position: absolute; right: 8px; white-space: nowrap; font-family: var(--f-mono); font-size: 12px; }
.meter-pin b { top: -76px; color: var(--ink); }
.meter-pin span { top: -58px; color: var(--muted); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.meter-scale span:nth-child(2) { margin-left: auto; margin-right: 4%; }
.meter-out { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }

/* ---------- Results ---------- */
.s-results-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.money-row { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; margin-top: 36px; }
.money-row b { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(1.3rem, 2vw, 2rem); letter-spacing: -.02em; }
.money-row span { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; }
.score-table, .exit-table, .docs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.score-table th { color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.score-table th:first-child, .score-table td:first-child { text-align: left; color: var(--ink-2); }
.score-table td { color: #4d4c48; }
.score-table td.v-allow, .score-table td.v-verify, .score-table td.v-constrain, .score-table td.v-block { font-weight: 700; }
.score-table td.v-allow { color: var(--allow); } .score-table td.v-verify { color: var(--verify); } .score-table td.v-constrain { color: var(--constrain); } .score-table td.v-block { color: var(--block); }
.row-none td { border-top: 1px solid var(--line-2); }
.table-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ---------- Trail ---------- */
.s-trail { margin-top: clamp(90px, 12vw, 170px); padding: clamp(80px, 10vw, 140px) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.chain { margin: clamp(40px, 5vw, 64px) 0 32px; overflow: hidden; }
.chain-track { display: flex; gap: 34px; }
.blk { position: relative; flex: 0 0 auto; width: clamp(130px, 14vw, 180px); padding: 18px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); font-family: var(--f-mono); transition: border-color .4s, background-color .4s; }
.blk + .blk::before { content: ""; position: absolute; right: 100%; top: 50%; width: 34px; height: 1px; background: var(--line-2); transition: background-color .4s; }
.blk span { display: block; font-size: 11px; color: var(--muted); }
.blk b { display: block; margin: 10px 0 8px; font-size: 16px; color: var(--allow); }
.blk b.v-block { color: var(--block); }
.blk code { font-size: 12px; color: var(--ink-2); }
.chain.is-tampered .blk-target { border-color: var(--block); background: rgba(255, 59, 47, .08); }
.chain.is-tampered .blk-target ~ .blk { border-style: dashed; opacity: .45; }
.chain.is-tampered .blk-target ~ .blk::before, .chain.is-tampered .blk-target + .blk::before { background: var(--block); height: 2px; }
.trail-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Scan ---------- */
.s-scan-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; color: var(--ink-2); font-size: 15px; }
.ticks svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; color: var(--allow); }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 8px; font-family: var(--f-mono); font-size: clamp(13px, 1.1vw, 16px); }
.formula span { color: var(--ink); }
.formula i { font-style: normal; color: var(--cyan); }
.scan-out { white-space: pre; }
.rules-strip { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 18px 0; }
.rules-track { display: flex; width: max-content; gap: 12px; }
.rules-track span { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* ---------- Ops ---------- */
.ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.op { padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.op-cmd { font-family: var(--f-mono); font-size: 12px; color: var(--cyan); }
.op b { display: block; margin: 28px 0 6px; font-family: var(--f-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.op h3 { font-family: var(--f-body); font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.op p { color: var(--ink-2); font-size: 14px; }

/* ---------- CI ---------- */
.s-ci-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.exit-table { margin-top: 28px; }
.exit-table td { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.exit-table td:first-child { width: 48px; }
.exit-table code { font-family: var(--f-mono); color: var(--ink); }
.yaml .k { color: var(--cyan); }

/* ---------- Start ---------- */
.s-start { margin-top: clamp(90px, 12vw, 170px); padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); background: radial-gradient(900px 500px at 90% 0%, rgba(61, 90, 254, .12), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(31, 178, 107, .08), transparent 60%); }
.s-start-title { font-family: var(--f-display); font-variation-settings: "wdth" 125; font-weight: 800; font-size: clamp(3rem, 9vw, 10rem); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.s-start-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(48px, 6vw, 90px); align-items: start; }
.tabs { display: inline-flex; padding: 4px; border: 1px solid var(--line-2); border-radius: 100px; margin-bottom: 16px; }
.tabs button { padding: 8px 18px; border-radius: 100px; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); transition: background-color .3s, color .3s; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.cmds { display: grid; gap: 10px; }
.s-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; }
.s-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.s-links a:hover { color: var(--ink); border-color: var(--line-2); }
.s-links svg { width: 18px; height: 18px; }
.demo { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); }
.demo img { width: 100%; height: auto; transition: transform 1s var(--ease-out); }
.demo:hover img { transform: scale(1.03); }
.demo-play { position: absolute; left: 50%; top: 45%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: transform .5s var(--ease-out); }
.demo-play svg { width: 28px; height: 28px; margin-left: 4px; }
.demo:hover .demo-play { transform: scale(1.12); }
.demo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font-size: 13px; color: var(--ink); }

/* ---------- Docs CTA ---------- */
.s-docs-cta { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(60px, 8vw, 120px); }
.docs-cta { display: grid; gap: 24px; padding: clamp(32px, 5vw, 64px); border-radius: 14px; border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; position: relative; overflow: hidden; }
.docs-cta .section-label { margin-bottom: 0; }
.docs-cta-title { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 4.6rem); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; max-width: 16em; }
.docs-cta-go { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.docs-cta-go svg { width: 20px; height: 20px; transition: transform .5s var(--ease-out); }
.docs-cta:hover .docs-cta-go svg { transform: rotate(45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .s-stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .verdicts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .s-hero-grid, .s-gap-grid, .s-inject-grid, .s-cap-grid, .s-results-grid, .s-scan-grid, .s-ci-grid, .s-start-grid { grid-template-columns: 1fr; }
  .checks, .ops { grid-template-columns: 1fr 1fr; }
  .trail-out { grid-template-columns: 1fr; }
  .ladder .ln { opacity: 1; }
}
@media (max-width: 767px) {
  .s-hero { padding-top: 110px; }
  .s-stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat + .stat { padding: 24px 12px 24px 0; border-left: 0; }
  .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .verdicts, .checks, .ops { grid-template-columns: 1fr; }
  .fail { padding: 20px; }
  .fail-tag { position: static; display: block; margin-bottom: 8px; }
  .flow { overflow-x: auto; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .flow-svg { width: 760px; max-width: none; }
  .money-row { grid-template-columns: 1fr; gap: 16px; }
  .feed-row { grid-template-columns: 12px 78px 1fr auto; gap: 8px; }
  .feed-rows { height: 260px; }
  .install code { font-size: 13px; }
  .meter { padding: 22px; }
}

/* Grid items may not grow past the viewport because of a wide <pre> or table. */
.s-hero-grid > *, .s-gap-grid > *, .s-inject-grid > *, .s-cap-grid > *, .s-results-grid > *,
.s-scan-grid > *, .s-ci-grid > *, .s-start-grid > *, .trail-out > *, .verdicts > *, .checks > *, .ops > * { min-width: 0; }

/* ---------- Real CLI recordings (xterm.js) ---------- */
.cast { padding: 14px 14px 16px; background: #0b0b0a; overflow-x: auto; min-height: 120px; }
.cast .xterm { padding: 0; }
.cast .xterm-viewport { overflow: hidden !important; background: #0b0b0a !important; }
.cast .xterm-cursor-layer, .cast .xterm-helper-textarea { display: none; }