/* COSI public site. Served as a file: the CSP allows no inline style. */
:root{
  --navy:#1F3864; --blue:#2E75B6; --green:#0F8A6B; --amber:#A8650E;
  --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#EDF1F7; --ink:#0E1A30; --ink-2:#44526B; --line:#D6DDE8;
  --hero-bg:#1F3864; --hero-ink:#F3F6FB; --hero-ink-2:#B9C6DC; --panel:#16294B; --panel-line:#2C4470;
  --accent:#2E75B6; --accent-ink:#FFFFFF; --ok:#0F8A6B; --ok-soft:#E3F3EE; --warn-soft:#FBF0E0;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1322; --surface:#111D33; --surface-2:#162440; --ink:#E8EEF7; --ink-2:#A3B1C8; --line:#24375A;
    --hero-bg:#0F1D38; --panel:#0B1730; --panel-line:#27406A;
    --accent:#4A93D6; --ok:#2FB28C; --ok-soft:#10312A; --warn-soft:#3A2A12; --amber:#E0A04A;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1322; --surface:#111D33; --surface-2:#162440; --ink:#E8EEF7; --ink-2:#A3B1C8; --line:#24375A;
  --hero-bg:#0F1D38; --panel:#0B1730; --panel-line:#27406A;
  --accent:#4A93D6; --ok:#2FB28C; --ok-soft:#10312A; --warn-soft:#3A2A12; --amber:#E0A04A;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12}
h3{font-size:20px;line-height:1.25}
p{margin:0}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:8px;font:600 15px/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#0c7a5e}
.btn-ghost{border-color:rgba(255,255,255,.35);color:var(--hero-ink)}
.btn-outline{border-color:var(--line);color:var(--ink);background:var(--surface)}
section{padding-block:88px}
@media (max-width:720px){section{padding-block:64px}}
.sec-head{display:grid;gap:14px;margin-bottom:44px;max-width:760px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--hero-bg);border-bottom:1px solid var(--panel-line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--hero-ink);text-decoration:none;font:700 22px/1 var(--display);letter-spacing:.02em}
.brand svg{flex:none}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--hero-ink-2);text-decoration:none;font-size:14px}
.nav-links a:hover{color:#fff}
.nav .btn{padding:10px 16px;font-size:14px}
@media (max-width:860px){.nav-links{display:none}}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);padding-block:72px 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000 40%,transparent)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}}
.hero .eyebrow{color:#8FC3F0}
.hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;margin:18px 0 22px;font-weight:600}
.hero h1 em{font-style:italic;color:#7FD6B8;font-weight:400}
.hero .lede{color:var(--hero-ink-2)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:18px;font:13px/1.5 var(--mono);color:var(--hero-ink-2)}

.console{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);overflow:hidden;font-size:14px}
.console-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--panel-line);font:12px var(--mono);color:var(--hero-ink-2)}
.console-top .dots{display:flex;gap:6px}
.console-top .dots i{width:9px;height:9px;border-radius:50%;background:#2C4470;display:block}
.console-body{padding:18px;display:grid;gap:14px}
.meter-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.meter-label{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hero-ink-2)}
.meter-val{font:500 15px var(--mono);font-variant-numeric:tabular-nums;color:#fff}
.meter{height:8px;border-radius:99px;background:#223A63;overflow:hidden}
.meter span{display:block;height:100%;width:27%;background:linear-gradient(90deg,#2E75B6,#0F8A6B);border-radius:99px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{border:1px solid var(--panel-line);border-radius:10px;padding:12px}
.tile b{display:block;font:600 22px var(--display);color:#fff}
.tile small{color:var(--hero-ink-2);font-size:12px;line-height:1.35;display:block;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:99px}
.pill-ok{background:rgba(15,138,107,.18);color:#6FD9B6}
.pill-wait{background:rgba(224,160,74,.16);color:#F0BE78}
.pill-lvl{background:rgba(46,117,182,.22);color:#9CC8F2}
.chain{border-top:1px solid var(--panel-line);padding:12px 18px 16px;font:12px/1.9 var(--mono);color:var(--hero-ink-2);height:140px;overflow:hidden;position:relative}
.chain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,var(--panel))}
.chain-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;white-space:nowrap}
.chain-row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;color:#D5DEEC}
.chain-row .h{color:#6FD9B6}
@media (max-width:520px){.tiles{grid-template-columns:1fr 1fr}.tiles .tile:last-child{grid-column:span 2}}

/* facts strip */
.facts{background:var(--surface);border-bottom:1px solid var(--line);padding-block:28px}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.facts li{font-size:14px;color:var(--ink-2);display:grid;gap:4px}
.facts li b{font:600 13px var(--mono);color:var(--ink);letter-spacing:.02em}
@media (max-width:860px){.facts ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts ul{grid-template-columns:1fr}}

/* problem */
.problem .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.problem article{display:grid;gap:10px;padding-top:18px;border-top:2px solid var(--accent)}
.problem article p{color:var(--ink-2)}
@media (max-width:820px){.problem .grid{grid-template-columns:1fr}}

/* features */
.features{background:var(--surface)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.feat{background:var(--surface);padding:28px;display:grid;gap:10px;align-content:start}
.feat .tag{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.feat p{color:var(--ink-2);font-size:15px}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr}}

/* governance */
.gov .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
@media (max-width:960px){.gov .wrap{grid-template-columns:1fr}}
.gov-list{display:grid;gap:18px;margin-top:28px}
.gov-list div{display:grid;grid-template-columns:28px 1fr;gap:12px}
.gov-list svg{margin-top:3px}
.gov-list p{color:var(--ink-2);font-size:15px}
.gov-list b{color:var(--ink)}
.levels{display:grid;gap:12px}
.level{display:grid;grid-template-columns:84px 1fr;gap:18px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.level .num{font:600 44px/1 var(--display);color:var(--navy)}
:root[data-theme="dark"] .level .num{color:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .level .num{color:var(--accent)}}
.level h3{font-size:18px;margin-bottom:6px}
.level p{color:var(--ink-2);font-size:15px}
.level .rule{margin-top:10px;font:12px/1.5 var(--mono);color:var(--ink-2);background:var(--surface-2);padding:8px 10px;border-radius:6px}
.level.l2{border-color:var(--green)}

/* steps */
.steps{background:var(--surface)}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s}
.steps li{display:grid;gap:10px;counter-increment:s}
.steps li::before{content:"Step " counter(s);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.steps li p{color:var(--ink-2)}
@media (max-width:820px){.steps ol{grid-template-columns:1fr}}

/* compare */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:860px;font-size:14px}
th,td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font:600 13px var(--body);background:var(--navy);color:#fff;position:sticky;top:0}
thead th small{display:block;font:400 11px var(--mono);color:#B9C6DC;margin-top:4px}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody td:first-child{font-weight:600;color:var(--ink);width:24%}
td.cosi{background:var(--ok-soft)!important;font-weight:600}
td .y{color:var(--ok);font-weight:700}
td .n{color:var(--ink-2)}
.fine{margin-top:14px;font-size:12px;color:var(--ink-2);max-width:90ch}

/* pricing */
.pricing{background:var(--surface)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
@media (max-width:1060px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:12px;padding:26px 22px;display:flex;flex-direction:column;gap:16px;background:var(--surface)}
.plan.featured{border:2px solid var(--green);box-shadow:0 18px 40px -24px rgba(15,138,107,.55);position:relative}
.plan.featured .badge{position:absolute;top:-12px;left:22px;background:var(--green);color:#fff;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.plan h3{font-size:22px}
.plan .for{font-size:14px;color:var(--ink-2);min-height:42px}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font:600 42px/1 var(--display);font-variant-numeric:tabular-nums}
.price span{color:var(--ink-2);font-size:14px}
.billed{font:12px var(--mono);color:var(--ink-2);min-height:18px}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;flex:1}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:8px;color:var(--ink)}
.plan li::before{content:"";width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--ok-soft);box-shadow:inset 0 0 0 4px var(--ok)}
.plan li.head{grid-template-columns:1fr;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.plan li.head::before{display:none}
.plan .btn{justify-content:center}
.usage{margin-top:28px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding:24px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.usage h3{font-size:18px;margin-bottom:8px}
.usage p,.usage li{color:var(--ink-2);font-size:14px}
.usage ul{margin:0;padding-left:18px;display:grid;gap:6px}
@media (max-width:820px){.usage{grid-template-columns:1fr}}
.partner{margin-top:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:26px;border-radius:12px;background:var(--hero-bg);color:var(--hero-ink)}
.partner p{color:var(--hero-ink-2);max-width:64ch;font-size:15px}
.partner h3{color:#fff;margin-bottom:6px}

/* faq */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--line);padding-block:18px}
summary{cursor:pointer;font:600 17px/1.4 var(--body);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--ink-2);max-width:68ch}

/* cta */
.cta{background:var(--hero-bg);color:var(--hero-ink);text-align:left}
.cta .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}
.cta h2{color:#fff}
.cta p{color:var(--hero-ink-2);margin-top:14px;max-width:56ch}
.contact{background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:22px;display:grid;gap:12px}
.contact label{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hero-ink-2)}
.contact .addr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.contact code{font:500 17px var(--mono);color:#fff;user-select:all;background:#0E1B35;padding:10px 12px;border-radius:8px;flex:1;min-width:0;overflow-wrap:anywhere}
.contact small{color:var(--hero-ink-2);font-size:13px}
footer{background:var(--hero-bg);color:var(--hero-ink-2);border-top:1px solid var(--panel-line);padding-block:28px;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---- static-site additions: everything the CSP would refuse inline ---- */
.meter{margin-top:8px}
.meter span{width:27%}
.gov h2{margin-top:14px}
.gov .lede{margin-top:16px}
.faq .sec-head{margin-bottom:0;align-self:start}
.cta .eyebrow{color:#8FC3F0}
.cta h2{margin-top:14px}
.contact .btn{justify-content:center}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-signin{color:var(--hero-ink-2);text-decoration:none;font-size:14px}
.nav-signin:hover{color:#fff}
@media (max-width:520px){.nav-signin{display:none}}
.yearly{font:12px/1.5 var(--mono);color:var(--ink-2);min-height:36px}
.price-from{font:600 34px/1 var(--display)}
.chain-roll{animation:roll 18s linear infinite}
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.notfound .wrap{display:grid;gap:18px;justify-items:center}

/* Cancellation terms (P1): one readable column. */
.terms{padding-block:56px 72px}
.terms .wrap{max-width:760px}
.terms h1{font-family:"Fraunces",Georgia,serif;font-size:clamp(28px,4vw,40px);line-height:1.15;margin:10px 0 12px}
.terms h2{font-family:"Fraunces",Georgia,serif;font-size:22px;margin:32px 0 10px}
.terms ul{padding-left:20px;margin:0}
.terms li{margin:6px 0;line-height:1.6}
.terms-date{font-family:"IBM Plex Mono",monospace;font-size:13px;opacity:.75}
.terms section{padding-block:0}