/* OCHITO V2 shared stylesheet — evolved from v1 index.html design system */
:root{--ink:#0d1117;--body:#3d444d;--muted:#6b7480;--line:#e4e8ee;--soft:#f6f8fa;--green:#1f883e;--gbright:#36e859;--gblock:#36e859;--cyan:#2ed9ff;--cyandeep:#0969da;--dark:#0d1117;--dtext:#e6edf3;--dmuted:#9da7b3;--dline:#2d333b;--darkink:#04120a}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--body);font-family:'Outfit',sans-serif;line-height:1.65;font-size:16.5px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.mono{font-family:'JetBrains Mono',monospace}
.dots{background-image:radial-gradient(circle,#dde3ea 1.2px,transparent 1.2px);background-size:26px 26px}
mark{background:var(--gblock);color:var(--darkink);padding:2px 12px;font-weight:800;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.slabel{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.05em;color:var(--muted);font-weight:700}
.slabel b{color:var(--green)}
/* nav */
nav{position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:1.2rem;text-decoration:none;letter-spacing:-.01em;flex:none}
.nav-links{display:flex;gap:20px;align-items:center;flex-wrap:nowrap}
.nav-links a{color:var(--body);text-decoration:none;font-size:.93rem;font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.quiet{color:var(--muted);font-size:.85rem}
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:800;padding:13px 26px;border-radius:10px;text-decoration:none;font-size:1rem;transition:transform .12s,box-shadow .12s;border:0;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(31,136,62,.28)}
.btn.small{padding:9px 18px;font-size:.9rem}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:#b9c2cd;box-shadow:0 8px 24px rgba(13,17,23,.08)}
.btn.dark{background:var(--ink);color:#fff}
/* hero */
.hero{padding:76px 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kchip{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;letter-spacing:.05em;background:var(--ink);color:var(--gbright);padding:7px 14px;border-radius:7px;margin-bottom:22px}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1.1;font-weight:800;color:var(--ink);letter-spacing:-.025em;margin-bottom:22px}
.sub{font-size:1.16rem;color:var(--body);max-width:560px;margin-bottom:30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.cta-note{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--muted);margin-top:16px}
.cta-note b{color:var(--green)}
/* trust strip */
.strip{background:var(--dark);color:var(--dtext);padding:24px 0}
.strip-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
.strip .s{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--dmuted)}
.strip .s b{color:var(--gbright)}
/* sections */
section{padding:88px 0}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:12px 0 16px;line-height:1.14}
h3{color:var(--ink)}
.lead{font-size:1.12rem;max-width:660px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* dark terminal mock */
.mockstack{position:relative}
.mock{background:var(--dark);border-radius:16px;box-shadow:0 34px 90px rgba(13,17,23,.3);overflow:hidden}
.mock.tilt{transform:rotate(1.2deg)}
.mock-bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid var(--dline)}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:var(--dline);display:block}
.mock-bar i:first-child{background:#f85149}.mock-bar i:nth-child(2){background:#d29922}.mock-bar i:nth-child(3){background:#36e859}
.mock-bar span{margin-left:8px;color:var(--dmuted);font-family:'JetBrains Mono',monospace;font-size:.68rem;align-self:center}
.mock-body{padding:20px 22px 22px;color:var(--dtext);position:relative}
.mock-body .mlabel{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--dmuted)}
.mock-body .mlabel b{color:var(--gbright)}
.mock-body h3{font-size:1.05rem;font-weight:800;margin:4px 0 14px;color:#fff}
.ochi-peek{position:absolute;width:150px;right:-26px;top:-70px;transform:rotate(-6deg);filter:drop-shadow(0 12px 24px rgba(13,17,23,.25))}
/* operating loop rail */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;counter-reset:loop}
.loop .stage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;position:relative;counter-increment:loop}
.loop .stage::before{content:"0" counter(loop);font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;color:var(--gbright);background:var(--ink);border-radius:6px;padding:3px 8px;display:inline-block;margin-bottom:10px}
.loop .stage h3{font-size:1rem;margin-bottom:6px}
.loop .stage p{font-size:.88rem;color:var(--muted)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:44px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 16px 40px rgba(13,17,23,.09);transform:translateY(-2px)}
.card .when{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;color:var(--green);letter-spacing:.06em}
.card h3{font-size:1.1rem;margin:8px 0}
.card p{font-size:.94rem}
.card p.outcome{margin-top:10px;font-size:.85rem;color:var(--green);font-weight:600}
.card.dark{background:var(--dark);border-color:var(--dark)}
.card.dark h3{color:#fff}
.card.dark p{color:var(--dmuted)}
.card.dark .when{color:var(--gbright)}
/* qa checklist */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:36px}
.qa-item{font-family:'JetBrains Mono',monospace;font-size:.76rem;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:10px 13px;color:var(--body)}
.qa-item::before{content:"✓ ";color:var(--green);font-weight:700}
.qa-item.prob::before{content:"– ";color:#c2432c;font-weight:700}
/* fence */
.fence{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.fence .side{border-radius:16px;padding:28px;border:1.5px solid var(--line)}
.fence .side.yes{border-color:var(--gbright);background:#f2fbf4}
.fence .side.no{background:var(--soft)}
.fence h3{font-size:1.05rem;margin-bottom:12px}
.fence ul{list-style:none}
.fence li{padding:6px 0 6px 26px;position:relative;font-size:.95rem}
.fence .yes li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.fence .no li::before{content:"✕";position:absolute;left:0;color:#c2432c;font-weight:800}
/* terminal steps */
.termsteps{background:var(--dark);border-radius:18px;padding:34px;margin-top:44px;color:var(--dtext);font-family:'JetBrains Mono',monospace}
.tline{padding:10px 0;font-size:.92rem;border-bottom:1px solid #1b212a;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.tline:last-child{border:none}
.tline .p{color:var(--gbright);font-weight:700;white-space:nowrap}
.tline .c{color:var(--dmuted);font-family:'Outfit',sans-serif;font-size:.95rem}
.tline .ok{color:var(--gbright)}
/* numbered process (how it works) */
.steps{margin-top:44px}
.step{display:grid;grid-template-columns:80px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line)}
.step:last-child{border:none}
.step .n{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--gbright);background:var(--ink);border-radius:10px;height:52px;width:64px;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{font-size:.97rem;max-width:640px}
.step ul{margin:10px 0 0 18px;font-size:.92rem;color:var(--muted)}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;max-width:900px;margin:44px auto 0}
.plan{border-radius:18px;padding:34px;text-align:left;background:#fff;border:1.5px solid var(--line);position:relative}
.plan.hot{background:var(--dark);border-color:var(--dark);color:var(--dmuted)}
.plan.hot h3,.plan.hot .price{color:#fff}
.plan.hot li{color:var(--dtext)}
.plan .tag{position:absolute;top:-13px;left:30px;background:var(--gblock);color:var(--darkink);font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;padding:5px 12px;border-radius:999px}
.plan h3{font-size:1.12rem}
.plan .price{font-size:2.7rem;font-weight:800;color:var(--ink);margin:12px 0 0}
.plan .price small{font-size:1rem;font-weight:500;opacity:.65}
.plan .per{font-family:'JetBrains Mono',monospace;font-size:.72rem;margin:4px 0 20px;opacity:.85}
.plan ul{list-style:none;margin:0 0 26px}
.plan li{padding:7px 0 7px 26px;position:relative;font-size:.95rem}
.plan li::before{content:"■";position:absolute;left:0;color:var(--gbright);font-size:.7rem;top:11px}
.plan .btn{width:100%;text-align:center}
/* comparison table */
.compare{width:100%;border-collapse:collapse;margin-top:44px;font-size:.95rem}
.compare th{text-align:left;padding:14px;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--ink)}
.compare td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.compare td:first-child{font-weight:700;color:var(--ink);width:30%}
/* faq */
.faq{max-width:720px;margin:40px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:1.02rem;list-style:none}
.faq summary::after{content:"+";float:right;color:var(--green);font-weight:800;font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;font-size:.97rem}
/* FAQ on dark bands: questions must be light, never inherit ink */
.band .faq summary,.final .faq summary{color:#fff}
.band .faq summary::after,.final .faq summary::after{color:var(--gbright)}
.band .faq p,.final .faq p{color:var(--dmuted)}
.band .faq details,.final .faq details{border-bottom-color:var(--dline)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.faq summary::after{float:none;flex:none}
.faq summary::-webkit-details-marker{display:none}
/* forms */
.formcard{max-width:760px;margin:44px auto 0;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:36px;text-align:left;box-shadow:0 24px 60px rgba(13,17,23,.07)}
.formcard label{display:block;font-weight:700;font-size:.9rem;margin:18px 0 6px;color:var(--ink)}
.formcard input,.formcard select,.formcard textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.formcard textarea{min-height:90px;resize:vertical}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(54,232,89,.18)}
.formcard .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.formnote{font-size:.85rem;color:var(--muted);margin-top:14px}
.checkline{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:.9rem}
.checkline input{width:auto;margin-top:4px}
/* prose (legal, about) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:1.5rem;margin-top:44px}
.prose h3{font-size:1.1rem;margin:28px 0 8px}
.prose p,.prose li{font-size:.98rem}
.prose ul{margin:10px 0 10px 22px}
.prose .updated{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--muted)}
/* dark band */
.band{background:var(--dark);color:var(--dtext)}
.band h2{color:#fff}
.band .lead{color:var(--dmuted)}
.band .slabel{color:var(--dmuted)}
.band .slabel b{color:var(--gbright)}
/* final cta */
.final{background:var(--dark);color:var(--dtext);text-align:center;position:relative;overflow:hidden}
.final h2{color:#fff}
.final .lead{color:var(--dmuted);margin:0 auto 28px}
.final img{width:120px;position:absolute;opacity:.9}
/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 36px;color:var(--muted);font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.foot-grid h4{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--ink);margin-bottom:12px}
.foot-grid a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
.foot-grid a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:22px}
footer .brandline{max-width:300px;font-size:.9rem}
/* breadcrumbs */
.crumbs{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
/* page hero (subpages) */
.phero{padding:56px 0 30px}
.phero h1{font-size:clamp(2rem,4vw,2.9rem)}
@media(max-width:960px){.loop{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.ochi-peek{width:110px;top:-50px;right:0}.nav-links a:not(.btn){display:none}section{padding:60px 0}.mock.tilt{transform:none}.fence{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.step{grid-template-columns:56px 1fr}.formcard .row2{grid-template-columns:1fr}}
@media(max-width:560px){.loop{grid-template-columns:1fr}}