/* Shared styles for ClarityOps feature detail pages — matches the live website */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: "Inter", sans-serif; background: #f8f8fb; color: #0a0a0a; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; }
.mono { font-family: "JetBrains Mono", monospace; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(8,12,18,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.07); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-weight: 900; font-size: 22px; letter-spacing: -0.045em; white-space: nowrap; color:#fff; }
.logo span.o { color: #768a7e; }
.nav-right { display:flex; align-items:center; gap:24px; }
.back { font-size: 13px; color: rgba(255,255,255,0.45); transition: color 0.2s; }
.back:hover { color: #fff; }
.cta-btn { height: 38px; padding: 0 18px; background: #768a7e; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s; flex-shrink: 0; display: inline-flex; align-items: center; gap:8px; }
.cta-btn:hover { background: #5f7368; }

/* Hero */
.hero { background: #080c12; padding: 92px 28px 0; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset:0;
  background-image:linear-gradient(rgba(118,138,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(118,138,126,.06) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(circle at 28% 0%,#000,transparent 72%); pointer-events:none; }
.hero-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.breadcrumb { font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 22px; letter-spacing: 0.05em; }
.breadcrumb a { color: rgba(255,255,255,0.35); transition: color 0.2s; }
.breadcrumb a:hover { color: #768a7e; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(118,138,126,0.12); border: 1px solid rgba(118,138,126,0.25); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #9fb0a6; margin-bottom: 22px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.03; color: #fff; max-width: 17ch; }
.hero p.sub { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.55); max-width: 600px; margin-top: 22px; }
.hero-cta { margin-top: 32px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn-ghost { height:50px; padding:0 22px; display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,0.16); border-radius:7px; color:rgba(255,255,255,0.85); font-size:14px; font-weight:600; transition:.2s; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.4); color:#fff; }
.hero .cta-btn { height:50px; padding:0 26px; font-size:14px; border-radius:7px; }

/* Screenshot window */
.shot-wrap { max-width: 1080px; margin: 56px auto -90px; padding: 0 28px; position: relative; z-index: 3; }
.win { background:#fff; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.8),0 16px 40px -20px rgba(0,0,0,.55); transition:transform .35s ease, box-shadow .35s ease; }
.shot-wrap:hover .win { transform:translateY(-5px); box-shadow:0 60px 120px -38px rgba(0,0,0,.85),0 18px 44px -20px rgba(0,0,0,.6); }
.win-bar { display:flex; align-items:center; gap:9px; padding:12px 16px; background:#0e141b; border-bottom:1px solid rgba(255,255,255,0.05); }
.win-bar i { width:11px; height:11px; border-radius:50%; background:#2b343e; display:block; }
.win-url { margin-left:10px; display:flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:12px; color:rgba(255,255,255,0.5); }
.win-url svg { width:12px; height:12px; }
.win img { display:block; width:100%; height:auto; }

/* Content */
.content { max-width: 1200px; margin: 0 auto; padding: 150px 28px 40px; }
.lede-row { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:start; padding-bottom:64px; border-bottom:1px solid #e4e4ec; }
.lede-row .kick { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.16em; color:#768a7e; font-weight:600; }
.lede-row h2 { margin-top:12px; font-size:clamp(24px,2.8vw,32px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.lede-row p { font-size:16px; line-height:1.75; color:#475569; }
.lede-row p + p { margin-top:16px; }

/* Feature grid */
.feat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; padding:64px 0; }
.feat { background:#fff; border:1px solid #e8e8ef; border-radius:14px; padding:26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feat:hover { transform:translateY(-4px); box-shadow:0 22px 46px -28px rgba(8,12,18,.34); border-color:#d3dad5; }
.feat .fi { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(118,138,126,0.12); color:#5f7368; margin-bottom:18px; transition:background .2s ease, color .2s ease; }
.feat:hover .fi { background:#768a7e; color:#fff; }
.feat .fi .ms { font-family:'Material Symbols Outlined'; font-size:22px; }
.feat h3 { font-size:17px; font-weight:700; letter-spacing:-.02em; color:#0a0a0a; }
.feat p { margin-top:9px; font-size:14px; line-height:1.6; color:#5b6470; }

/* What you see list */
.see { padding:8px 0 64px; border-bottom:1px solid #e4e4ec; }
.see .kick { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.16em; color:#768a7e; font-weight:600; }
.see h2 { margin-top:12px; font-size:clamp(22px,2.5vw,28px); font-weight:800; letter-spacing:-.03em; margin-bottom:24px; }
.see-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
.see li { list-style:none; display:flex; gap:12px; align-items:center; font-size:15px; line-height:1.45; color:#3a414a; padding:11px 0; border-bottom:1px solid #eef0f3; }
.see li .ms { font-family:'Material Symbols Outlined'; font-size:15px; color:#5f7368; flex:none; width:26px; height:26px; border-radius:50%; background:rgba(118,138,126,.13); display:grid; place-items:center; }

/* Cross-links */
.more { padding:64px 0 8px; }
.more .kick { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.16em; color:#768a7e; font-weight:600; margin-bottom:22px; }
.more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.more-card { background:#fff; border:1px solid #e8e8ef; border-radius:12px; padding:20px 22px; transition:.18s; display:flex; flex-direction:column; gap:7px; }
.more-card:hover { transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(8,12,18,.4); border-color:#d4d8e0; }
.more-card .mc-t { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; letter-spacing:-.01em; color:#0a0a0a; }
.more-card .mc-t .ms { font-family:'Material Symbols Outlined'; font-size:19px; color:#768a7e; }
.more-card .mc-d { font-size:13px; line-height:1.5; color:#6b727a; }
.more-card .mc-go { margin-top:4px; font-size:12.5px; font-weight:600; color:#768a7e; display:inline-flex; align-items:center; gap:6px; }

/* CTA + footer */
.cta-block { background: #080c12; padding: 84px 28px; text-align: center; margin-top:40px; }
.cta-block h2 { font-size: clamp(28px,4vw,46px); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-bottom: 16px; }
.cta-block p { font-size: 16px; color: rgba(255,255,255,0.5); margin-bottom: 32px; }
.cta-block .cta-btn { height: 52px; padding: 0 32px; font-size: 15px; border-radius: 8px; }

.site-footer { background: #080c12; padding: 72px 28px 32px; border-top: 1px solid rgba(255,255,255,0.07); }
.site-footer .sf-inner { max-width: 1180px; margin: 0 auto; }
.sf-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sf-brand .sf-label { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.sf-brand p { margin-top: 14px; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.55); }
.sf-brand a { color: inherit; transition: color 0.2s; }
.sf-brand a:hover { color: #768a7e; }
.sf-col h4 { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.35); margin-bottom: 18px; }
.sf-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: -0.01em; transition: color 0.2s; margin-bottom: 12px; }
.sf-col a:hover { color: #fff; }
.sf-bottom { padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.sf-bottom p { font-size: 12px; color: rgba(255,255,255,0.3); letter-spacing: -0.01em; }
.sf-bottom .sf-made { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.05em; }

@media (max-width: 900px) {
  .lede-row { grid-template-columns: 1fr; gap:28px; }
  .feat-grid, .more-grid { grid-template-columns: 1fr; }
  .see-cols { grid-template-columns:1fr; }
  .sf-cols { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
}
@media (max-width: 560px) {
  .nav-inner { padding: 0 16px; gap: 12px; }
  .nav-right { gap:14px; }
  .hero { padding: 72px 18px 0; }
  .shot-wrap { padding:0 18px; margin-bottom:-50px; }
  .content { padding: 90px 18px 40px; }
  .sf-brand { grid-column: 1 / -1; }
}

/* Scroll reveal */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
[data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
}