/* OpsOptic landing components. Tokens and shared parts (buttons, nav, footer, page header, reading body) are in site.css.
   Nothing here uses JavaScript: the demos are CSS animations and every one is aria-hidden. */

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:120px 0 64px;}
@media(min-width:900px){ .hero{padding:152px 0 96px;} }
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(70% 46% at 50% -4%,rgba(0,85,254,.62),rgba(0,85,254,.18) 50%,transparent 74%), radial-gradient(40% 30% at 50% 58%,rgba(0,85,254,.16),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(0,85,254,0) 0,rgba(0,85,254,0) 14px,rgba(20,90,255,.34) 44px,rgba(120,170,255,.2) 49px,rgba(0,85,254,.06) 78px,rgba(0,85,254,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); pointer-events:none;}
.hero .copy{max-width:900px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(34px,9vw,60px); line-height:1.08; letter-spacing:-.02em; font-weight:800; color:#fff; text-wrap:balance;}
.hero .lead{margin:24px auto 0; max-width:58ch; font-size:17px; line-height:1.6; color:var(--dtext2);}
@media(min-width:900px){ .hero .lead{font-size:19px;} }
.kw{display:inline-block; font-weight:600; line-height:1.25; padding:1px 8px 2px; margin:0 1px; border-radius:7px; border:1px solid transparent;}
.kw-b{color:#9cc0ff; background:rgba(59,130,246,.2); border-color:rgba(139,180,255,.3);}
.kw-g{color:#5fe0a1; background:rgba(18,183,106,.18); border-color:rgba(95,224,161,.3);}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.hero .actions,.final .actions{justify-content:center;}
@media(max-width:520px){ .actions .btn{width:100%;} }
.hero .pills{justify-content:center;}

/* inline objects in the headline, text supplied by CSS so the h1 stays a plain sentence */
.ob{display:inline-block; position:relative; white-space:nowrap;}
.ob-live{vertical-align:.14em; margin:0 0 0 .28em; height:.62em; padding:0 .42em 0 .36em; border-radius:99px; background:linear-gradient(180deg,#171d2b,#10151f); box-shadow:0 0 0 .03em rgba(139,180,255,.4), 0 0 .9em rgba(0,85,254,.55); display:inline-flex; align-items:center; gap:.3em; font-family:var(--mono); font-weight:700; font-size:.46em; letter-spacing:.08em; color:#fff; line-height:1;}
.ob-live::before{content:""; width:.62em; height:.62em; border-radius:50%; background:var(--live); box-shadow:0 0 0 .22em rgba(18,183,106,.25);}
.ob-live::after{content:"LIVE";}
.ob-bell{vertical-align:-.04em; margin:0 .08em 0 .16em; width:.74em; height:.74em; border-radius:.22em; background:linear-gradient(160deg,#2f7bff,#0055fe); box-shadow:0 .05em .5em rgba(0,85,254,.7), inset 0 .04em .05em rgba(255,255,255,.35);}
.ob-bell::before{content:"1"; position:absolute; top:-.3em; right:-.45em; min-width:1.15em; height:1.15em; padding:0 .25em; display:flex; align-items:center; justify-content:center; border-radius:99px; background:#d92d20; color:#fff; font-family:var(--display); font-weight:800; font-size:.4em; line-height:1; box-shadow:0 0 0 .22em var(--d0);}
.ob-bell::after{content:""; position:absolute; inset:.17em .2em .2em; border-radius:.3em .3em .12em .12em; background:#fff; clip-path:polygon(50% 0,80% 18%,88% 70%,100% 82%,100% 90%,0 90%,0 82%,12% 70%,20% 18%);}
@media(prefers-reduced-motion:no-preference){
  .ob-live::before{animation:livePulse 1.8s ease-in-out infinite;}
  .ob-bell::before{animation:bdPop .5s 1.25s cubic-bezier(.3,1.6,.5,1) both;}
  @keyframes livePulse{50%{box-shadow:0 0 0 .4em rgba(18,183,106,0);}}
  @keyframes bdPop{0%{transform:scale(0);} 100%{transform:scale(1);}}
}

/* the demo in a large rounded frame with a blue rim light */
.hframe{position:relative; margin:64px auto 0; max-width:1040px; border-radius:30px; padding:10px; background:linear-gradient(160deg,rgba(150,190,255,.5),rgba(59,130,246,.22) 40%,rgba(0,85,254,.1)); box-shadow:0 0 0 1px rgba(139,180,255,.18), 0 40px 140px -30px rgba(0,85,254,.65), 0 0 90px -10px rgba(0,85,254,.35); text-align:left;}
.hframe-in{border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#121a2c,#0c111e); border:1px solid rgba(255,255,255,.08);}
.hframe-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--dline);}
.hframe-bar .pill{min-height:30px; padding:0 12px; font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff;}
.hframe-bar .caption{font-size:12.5px; color:rgba(255,255,255,.66);}
.hframe-body{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding:20px 14px 24px; align-items:start;}
@media(min-width:900px){ .hframe-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; padding:28px;} }
@media(max-width:560px){ .hframe{padding:6px; border-radius:24px; margin-top:48px;} .hframe-in{border-radius:19px;} .hframe-bar{padding:12px 14px;} .hframe-bar .caption{display:none;} }

/* dashboard demo */
.dash{background:#0b0f19; border:1px solid var(--dline); border-radius:16px; overflow:hidden; font-size:13px; color:#d7dce8;}
.dash-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--dline);}
.dash-top b{font-family:var(--display); font-size:14px; color:#fff;}
.dash-top .proj{font-family:var(--mono); font-size:11.5px; padding:4px 9px; border-radius:7px; background:#171d2b; border:1px solid var(--dline); color:#cdd5e6;}
.dash-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--dline); border-bottom:1px solid var(--dline);}
.dash-stats > div{background:#0b0f19; padding:11px 14px;}
.dash-stats .k{font-size:11.5px; color:#9aa4ba;}
.dash-stats .v{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em; color:#fff; margin-top:2px; font-variant-numeric:tabular-nums;}
.dash-stats .v.warn{color:#ffb454;}
.feed{display:block; padding:6px 0; min-height:206px;}
.feed li{display:flex; align-items:center; gap:10px; padding:7px 14px; font-family:var(--mono); font-size:12px; line-height:1.35; color:#cdd5e6; opacity:0; transform:translateY(8px); animation:rowIn .5s var(--ease) forwards; animation-delay:calc(.5s + var(--i) * .85s);}
.feed .t{color:#8590a8; flex:none;}
.feed .m{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.feed .s{flex:none; font-weight:700; min-width:32px; text-align:right;}
.s-ok{color:#4ade80;} .s-bad{color:#ff7b72;} .s-warn{color:#ffb454;} .s-rev{color:#fbbf24;} .s-id{color:#7dd3fc;}
.dash-alert{margin:4px 14px 14px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,123,114,.4); background:rgba(217,45,32,.14); color:#ffd2ce; font-size:12.5px; line-height:1.4; opacity:0; transform:translateY(8px); animation:rowIn .5s var(--ease) forwards; animation-delay:5.2s;}
.dash-alert b{color:#fff;}
@keyframes rowIn{to{opacity:1; transform:none;}}

/* terminal demo */
.term{background:#05070b; border:1px solid var(--dline); border-radius:16px; overflow:hidden; font-family:var(--mono); font-size:12px; line-height:1.6; color:#cdd5e6;}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--dline);}
.term-bar i{width:9px; height:9px; border-radius:50%; background:#2a3142;}
.term-bar span{margin-left:8px; color:#8590a8; font-size:11.5px;}
.term-body{padding:12px 14px 16px; min-height:236px; overflow:hidden;}
@media(max-width:560px){ .term{font-size:10.5px;} }
.term-body p{margin:0; white-space:pre; overflow:hidden; text-overflow:ellipsis; opacity:0; animation:rowIn .01s linear forwards; animation-delay:calc(.4s + var(--i) * .85s);}
.term .pr{color:#4ade80;}
.term .cmd{color:#fff;}
.term .g{color:#8590a8;}
.term .c{color:#67e8f9;}
.term .cur{display:inline-block; width:.55em; height:1.05em; vertical-align:-.15em; background:#cdd5e6; margin-left:2px;}
@media(prefers-reduced-motion:no-preference){ .term .cur{animation:blink 1.1s steps(1) infinite;} @keyframes blink{50%{opacity:0;}} }
@media(prefers-reduced-motion:reduce){
  .feed li,.dash-alert,.term-body p{opacity:1; transform:none; animation:none;}
}

/* ---------- light sections ---------- */
.sec h2.title{max-width:22ch;}
.prose{max-width:62ch; font-size:17px; line-height:1.65; color:var(--body);}
.prose p{margin:0 0 14px;}
.prose strong{color:var(--ink); font-weight:650;}
.split2{display:grid; grid-template-columns:minmax(0,1fr); gap:40px;}
.split2>*{min-width:0;}
@media(min-width:900px){ .split2{grid-template-columns:1fr 1fr; gap:72px; align-items:start;} .split2.wide-l{grid-template-columns:1.1fr .9fr;} }

/* the problem: a list of what you open today, struck out by the one feed */
.tabs-today{display:grid; gap:10px; margin-top:8px;}
.tabs-today li{display:flex; align-items:center; gap:12px; min-height:48px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:15px; color:var(--body);}
.tabs-today li::before{content:""; flex:none; width:10px; height:10px; border-radius:3px; background:var(--line-strong);}
.tabs-today li.one{border-color:var(--accent); background:var(--soft); color:var(--ink); font-weight:600;}
.tabs-today li.one::before{background:var(--accent);}

/* how it works */
.steps{counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line);}
.steps li{counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:4px 16px; padding:22px 0; border-bottom:1px solid var(--line);}
.steps li::before{content:counter(s,decimal-leading-zero); grid-row:1 / span 2; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--accent-dk); letter-spacing:.06em; padding-top:4px;}
.steps h3{font-size:19px; letter-spacing:-.02em; color:var(--ink); line-height:1.25;}
.steps p{color:var(--muted); font-size:15.5px; line-height:1.6; max-width:52ch;}
.steps code,.feat code,.rd code,.faq code{font-family:var(--mono); font-size:.88em; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink);}

.code{background:var(--d0); color:#d7dce8; border:1px solid #1d2535; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -40px rgba(10,13,20,.7);}
.code-bar{display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--dline); font-family:var(--mono); font-size:12px; color:#9aa4ba;}
.code pre{margin:0; padding:16px 18px 20px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.65; tab-size:2;}
.code pre:focus-visible{outline:3px solid #fff; outline-offset:-3px;}
.code .k{color:#c4b2ff;} .code .s{color:#86efac;} .code .f{color:#7dd3fc;} .code .c{color:#8590a8;}
.code-note{margin:14px 2px 0; font-size:14px; line-height:1.55; color:var(--muted);}

/* features: hairline rows, two columns, no cards */
.feats{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line);}
@media(min-width:820px){ .feats{grid-template-columns:1fr 1fr; column-gap:56px;} }
.feat{padding:26px 0 28px; border-bottom:1px solid var(--line);}
.feat .tag{display:inline-block; font-family:var(--mono); font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); margin-bottom:12px;}
.feat h3{font-size:21px; line-height:1.2; letter-spacing:-.025em; color:var(--ink); margin-bottom:8px;}
.feat p{color:var(--muted); font-size:15.5px; line-height:1.6; max-width:50ch;}
.feat p + p{margin-top:8px;}

/* the CLI band */
.cli-band .copy h2{color:#fff;}
.cmds{display:grid; gap:0; margin-top:28px; border-top:1px solid var(--dline);}
.cmds li{display:grid; gap:2px 18px; padding:13px 0; border-bottom:1px solid var(--dline);}
@media(min-width:620px){ .cmds li{grid-template-columns:minmax(0,15rem) 1fr; align-items:baseline;} }
.cmds code{font-family:var(--mono); font-size:13px; color:#fff; overflow-wrap:anywhere;}
.cmds span{font-size:14.5px; color:var(--dtext2);}
.band-grid{display:grid; gap:44px; position:relative;}
@media(min-width:960px){ .band-grid{grid-template-columns:1fr 1.05fr; gap:64px; align-items:center;} }
.dark .sub{max-width:52ch;}
.dark.sec{padding:80px 0;}
@media(min-width:900px){ .dark.sec{padding:112px 0;} }

/* audiences */
.aud{display:grid; gap:20px;}
@media(min-width:820px){ .aud{grid-template-columns:1fr 1fr; gap:28px;} }
.aud article{padding:28px 26px; border-radius:20px; border:1px solid var(--line); background:var(--surface);}
.aud article.on{background:var(--soft); border-color:var(--soft-line);}
.aud h3{font-size:21px; letter-spacing:-.025em; color:var(--ink); margin-bottom:8px;}
.aud p{color:var(--body); font-size:15.5px; line-height:1.6;}
.aud ul{margin-top:14px; display:grid; gap:8px;}
.aud li{display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--body);}
.aud li .ico{margin-top:1px; width:18px; height:18px; color:var(--accent-dk);}

/* plans */
.plans{display:grid; gap:18px;}
@media(min-width:900px){ .plans{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch;} }
.plan{display:flex; flex-direction:column; padding:28px 24px; border-radius:22px; border:1px solid var(--line); background:var(--surface);}
.plan.pro{background:var(--d0); color:#fff; border-color:#1d2535;}
.plan h3{font-size:19px; letter-spacing:-.02em;}
.plan .price{font-family:var(--display); font-weight:800; font-size:38px; letter-spacing:-.04em; line-height:1.1; margin:10px 0 2px;}
.plan .price small{font-size:15px; font-weight:600; letter-spacing:0; color:var(--muted);}
.plan.pro .price small{color:var(--dtext2);}
.plan .for{font-size:14.5px; color:var(--muted); line-height:1.5; margin-bottom:18px;}
.plan.pro .for{color:var(--dtext2);}
.plan ul{display:grid; gap:9px; margin-top:auto;}
.plan li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45;}
.plan li .ico{width:17px; height:17px; margin-top:1px; color:var(--accent-dk);}
.plan.pro li .ico{color:var(--accent-on-dark);}
.plans-note{margin-top:22px; max-width:70ch; font-size:14.5px; line-height:1.6; color:var(--muted);}

/* faq */
.faq{max-width:820px;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:14px 2px; font-family:var(--display); font-weight:700; font-size:17.5px; line-height:1.3; letter-spacing:-.015em; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq .pm{position:relative; flex:none; width:22px; height:22px;}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; left:3px; right:3px; top:10px; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s var(--ease);}
.faq .pm::after{transform:rotate(90deg);}
.faq details[open] .pm::after{transform:rotate(0);}
.faq .ans{padding:0 2px 22px; max-width:68ch; font-size:16px; line-height:1.65; color:var(--body);}
.faq .ans p + p{margin-top:10px;}
@media(prefers-reduced-motion:reduce){ .faq .pm::before,.faq .pm::after{transition:none;} }

/* closing band */
.final{text-align:center;}
.final .wrap{position:relative; z-index:1;}
.final::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 120%,rgba(0,85,254,.5),transparent 70%);}
.final h2{font-family:var(--display); font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:-.03em; font-weight:800; max-width:20ch; margin:0 auto; text-wrap:balance;}
.final p{margin:16px auto 0; max-width:54ch; color:var(--dtext2); font-size:17px; line-height:1.6;}
.final .small{font-size:13.5px; color:rgba(255,255,255,.66); margin-top:28px;}

/* inner pages: tables and the two-up spec lists */
.rd .tw table{min-width:560px;}
.rd td code{white-space:nowrap;}
.spec{display:grid; gap:0; border-top:1px solid var(--line); margin:0 0 24px;}
.spec div{display:grid; gap:2px 20px; padding:12px 0; border-bottom:1px solid var(--line);}
@media(min-width:640px){ .spec div{grid-template-columns:200px 1fr;} }
.spec dt{font-weight:650; color:var(--ink); font-size:15px;}
.spec dd{margin:0; color:var(--body); font-size:15px; line-height:1.55;}
.pg .rd .code{margin:0 0 20px;}
.pg .rd .code pre{font-size:13px;}
.next-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px;}
.rd .code code,.code code{background:none; border:0; padding:0; color:inherit; font-size:inherit;}
.cmds code{background:none; border:0; padding:0;}
.term code{background:none; border:0; padding:0;}
.feat a,.sub a,.faq a,.plans-note a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px; background:none;}
.dark .sub a{color:#fff;}