/* ScoreSifter website — site-specific styles */
/* Companion to kairovo-system.css — load after it */

/* ─── Prose pages (guide, terms, privacy) ─────────────────────────────────── */

.prose-page{max-width:680px;margin:0 auto;padding:64px 40px 120px}
.prose-page .eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 16px;display:block}
.prose-page h1{font-size:clamp(28px,4vw,42px);font-weight:500;letter-spacing:-.02em;margin:0 0 8px;line-height:1.15}
.prose-page .meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-4);letter-spacing:.08em;text-transform:uppercase;margin:0 0 48px;padding-bottom:48px;border-bottom:1px solid var(--rule-soft)}
.prose-page h2{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:40px 0 12px;color:var(--ink)}
.prose-page h3{font-size:17px;font-weight:500;letter-spacing:-.01em;margin:32px 0 10px;color:var(--ink)}
.prose-page p{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0 0 14px;max-width:62ch}
.prose-page ul{color:var(--ink-2);font-size:15px;line-height:1.7;padding-left:20px;margin:0 0 14px}
.prose-page li{margin-bottom:6px}
.prose-page a{color:var(--accent)}

.callout{border:1px solid var(--rule-soft);background:var(--paper-2);padding:16px 20px;margin:24px 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.callout strong{color:var(--ink)}

/* metadata table used in guide */
.meta-table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0 24px}
.meta-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:8px 16px;border-bottom:1px solid var(--rule-soft);font-weight:500}
.meta-table td{padding:12px 16px;border-bottom:1px solid var(--rule-softer);color:var(--ink-2);vertical-align:top;line-height:1.5}
.meta-table td:first-child{font-weight:500;color:var(--ink);white-space:nowrap}
.meta-table tr:last-child td{border-bottom:0}

/* ─── Rename demo (hero widget) ───────────────────────────────────────────── */

.rename-demo{border:1px solid var(--rule-soft);background:#fff;display:flex;flex-direction:column}
.rd__head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule-soft);background:var(--paper-2);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rd__head .ok{color:var(--accent);display:flex;align-items:center;gap:6px}
.rd__head .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rd__rows{display:flex;flex-direction:column;background:#fff}
.rd__row{display:grid;grid-template-columns:1fr 18px 1fr;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule-softer);font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.4}
.rd__row:last-child{border-bottom:0}
.rd__from{color:var(--ink-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent)}
.rd__arrow{color:var(--accent);text-align:center}
.rd__to{color:var(--ink)}
.rd__footer{padding:12px 16px;border-top:1px solid var(--rule-soft);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}

/* ─── Big stat block ──────────────────────────────────────────────────────── */

.big-stat{border-top:1px solid var(--rule-soft);padding:60px 0 48px}
.big-stat__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;align-items:baseline}
.stat__v{font-size:60px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat__v .unit{font-size:20px;color:var(--ink-3);font-weight:400;letter-spacing:0;margin-left:6px}
.stat__k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.stat__lede{color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:40ch}

/* ─── Screenshots strip ───────────────────────────────────────────────────── */

.screenshots{border-top:1px solid var(--rule-soft);padding:72px 0}
.screenshots__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft)}
.ss-frame{background:#fff;display:flex;flex-direction:column}
.ss-frame__bar{padding:10px 14px;border-bottom:1px solid var(--rule-soft);background:var(--paper-2);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:8px}
.ss-frame__bar .dot-row{display:flex;gap:4px}
.ss-frame__bar .dot-row span{width:8px;height:8px;border-radius:50%;background:var(--rule-softer)}
.ss-frame img{width:100%;display:block}
.ss-frame__cap{padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);background:var(--paper-2);border-top:1px solid var(--rule-soft)}

/* ─── Steps (how it works) ────────────────────────────────────────────────── */

/* Override system .steps/.step to support images flush at bottom */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule-soft)}
.step{padding:28px 26px 0;border-right:1px solid var(--rule-softer);display:flex;flex-direction:column;gap:14px;min-height:0}
.step:last-child{border-right:0}
.step__no{font-family:'JetBrains Mono',monospace;font-size:28px;color:var(--accent);font-weight:400;letter-spacing:-.02em;line-height:1}
.step__title{font-size:17px;font-weight:500;letter-spacing:-.01em;margin:0}
.step__body{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.step__img{margin-top:24px;border-top:1px solid var(--rule-softer);display:block;width:100%;background:#fff}

/* ─── Templates grid ──────────────────────────────────────────────────────── */

.templates{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule-soft);border-left:1px solid var(--rule-soft)}
.tpl{border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:24px 26px;background:var(--paper);display:flex;flex-direction:column;gap:10px}
.tpl__name{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tpl__pattern{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-2);line-height:1.5}
.tpl__eg{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-3);padding-top:10px;border-top:1px solid var(--rule-softer)}

/* ─── Support / coffee section ────────────────────────────────────────────── */

.support{border-top:1px solid var(--rule-soft);padding:72px 0}
.support__inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.support__text h2{font-size:clamp(24px,2.8vw,36px);font-weight:500;letter-spacing:-.02em;margin:0 0 16px;line-height:1.15}
.support__text p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 28px;max-width:44ch}
.support__aside{border-left:1px solid var(--rule-soft);padding-left:40px}
.support__aside p{color:var(--ink-3);font-size:13px;line-height:1.6;margin:0 0 20px;max-width:36ch}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media(max-width:1040px){
  .big-stat__grid{grid-template-columns:1fr 1fr;row-gap:28px}
  .templates{grid-template-columns:1fr}
  .rd__row{grid-template-columns:1fr;gap:4px}
  .rd__arrow{text-align:left}
  .support__inner{grid-template-columns:1fr;gap:40px}
  .support__aside{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);padding-top:32px}
  .screenshots__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .steps{grid-template-columns:1fr}
  .prose-page{padding:40px 20px 80px}
}