@charset "UTF-8";
:root{
  --bg:#0B0F14;
  --panel:#111820;
  --panel-2:#0E141B;
  --border:#1F2B37;
  --text:#E6EDF3;
  --muted:#8CA0B3;
  --muted-2:#5C7188;
  --up:#34D399;
  --warn:#F5B942;
  --down:#F2545B;
  --brand:#4C8DFF;
  --brand-dim:#2A4A85;
  --radius:10px;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono', monospace;}
h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
section{position:relative;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brand);
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px rgba(76,141,255,0.18);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:8px; font-weight:600; font-size:0.95rem;
  cursor:pointer; border:1px solid transparent; transition:all .15s ease;
}
.btn-primary{background:var(--brand); color:#08111F;}
.btn-primary:hover{background:#6BA0FF;}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--muted-2);}
.btn-block{width:100%;}
header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,15,20,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto;}
/* Every real <nav> also carries class="wrap" (index.php, marketing_header_
   minimal.php), and .wrap{padding:0 28px} (below) wins the vertical
   padding above on specificity (0,1,0 beats nav's 0,0,1) — the header
   collapses to the button's own height with zero breathing room at every
   width. nav.wrap's (0,2,0) beats it back without touching .wrap itself,
   which many other sections rely on for its 0-top/bottom padding. */
nav.wrap{padding-top:16px; padding-bottom:16px;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:1.05rem;}
.logo-dot{width:11px; height:11px; border-radius:50%; background:var(--up); box-shadow:0 0 0 3px rgba(52,211,153,0.16); animation:pulse 2.4s ease-in-out infinite;}
.nav-links{display:flex; gap:30px; font-size:0.92rem; color:var(--muted);}
.nav-links a:hover{color:var(--text);}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-cta{display:flex; gap:12px; align-items:center;}
.nav-cta .btn{padding:10px 18px; font-size:0.88rem;}
/* Hamburger toggle for .nav-links (Monitoring/Deployment/Pricing/FAQ) —
   hidden on desktop, shown only ≤980px where .nav-links itself is hidden
   (see that breakpoint below). Three plain CSS bars, no icon font: the
   marketing pages don't load Font Awesome. Animates into an X via
   [aria-expanded="true"], toggled by public/assets/js/marketing.js. */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; padding:6px; background:transparent;
  border:1px solid var(--border); border-radius:8px; cursor:pointer;
}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* The dropdown panel itself — display:none by default and only shown via
   .open (added by marketing.js), and only inside the ≤980px query below,
   so it can never linger visible if the viewport is resized back to
   desktop without the panel being explicitly closed first. */
.mobile-links{display:none; flex-direction:column; gap:2px; background:var(--panel); border-bottom:1px solid var(--border); padding:8px 28px 20px;}
.mobile-links a{padding:12px 4px; color:var(--text); font-size:0.95rem; border-bottom:1px solid var(--border);}
.mobile-links a:last-child{border-bottom:none;}
.mobile-links .btn{margin-top:10px; text-align:center; border-bottom:none;}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,0.16);}
  50%{box-shadow:0 0 0 6px rgba(52,211,153,0.06);}
}
@media (prefers-reduced-motion: reduce){
  .logo-dot, .status-dot, .ping{animation:none !important;}
}
.hero{padding:96px 0 80px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.hero h1{font-size:3.15rem; line-height:1.06; margin-bottom:22px;}
.hero h1 span{color:var(--brand);}
.hero p.lead{font-size:1.12rem; color:var(--muted); max-width:520px; margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; font-size:0.82rem; color:var(--muted-2);}
.hero-tags span{padding:6px 12px; border:1px solid var(--border); border-radius:20px;}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,0.6);
  overflow:hidden;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--panel-2);}
.panel-head .dots{display:flex; gap:6px;}
.panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--border);}
.panel-title{font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--muted); letter-spacing:0.06em;}
.panel-body{padding:8px;}
.site-row{
  display:grid; grid-template-columns:14px 1fr auto auto; gap:14px; align-items:center;
  padding:13px 12px; border-radius:8px;
}
.site-row:hover{background:var(--panel-2);}
.status-dot{width:9px; height:9px; border-radius:50%; position:relative;}
.status-dot.up{background:var(--up);}
.status-dot.warn{background:var(--warn);}
.status-dot.up::after, .status-dot.warn::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:inherit; opacity:0.35; animation:ping 2.2s ease-out infinite;
}
@keyframes ping{0%{transform:scale(0.6); opacity:0.45;} 100%{transform:scale(2.1); opacity:0;}}
.site-name{font-size:0.92rem; font-weight:500;}
.site-name small{display:block; color:var(--muted-2); font-family:'IBM Plex Mono'; font-size:0.72rem; margin-top:2px;}
.site-metric{font-family:'IBM Plex Mono'; font-size:0.8rem; color:var(--muted); text-align:right; white-space:nowrap;}
.badge{font-family:'IBM Plex Mono'; font-size:0.7rem; padding:3px 8px; border-radius:5px; font-weight:600; letter-spacing:0.03em;}
.badge.up{color:var(--up); background:rgba(52,211,153,0.12);}
.badge.warn{color:var(--warn); background:rgba(245,185,66,0.12);}
.panel-foot{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border);}
.panel-foot div{padding:14px 18px; text-align:center; border-right:1px solid var(--border);}
.panel-foot div:last-child{border-right:none;}
.panel-foot .num{font-family:'IBM Plex Mono'; font-size:1.15rem; font-weight:600; color:var(--text);}
.panel-foot .lbl{font-size:0.72rem; color:var(--muted-2); margin-top:2px;}
/* Longhand top/bottom only — never the `padding` shorthand. Four sections
   in index.php (Problem, How it works, Stats, FAQ) put this class on the
   same div as .wrap (class="wrap section"), rather than nesting .wrap
   inside a <section class="section">. A shorthand `padding` here would
   reset all four sides on that shared div, silently wiping out .wrap's
   horizontal padding since this rule sits later in the file — which is
   exactly what left FAQ/Problem/How-it-works/Stats text flush against the
   viewport edge on narrow screens while sections using the two-element
   pattern (Pricing, Hero, Features) kept their gutter. */
.section{padding-top:88px; padding-bottom:88px;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:2.1rem; margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:1.02rem;}
.band{background:var(--panel-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.problem-card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px;
  display:flex; gap:12px; align-items:flex-start;
}
.problem-card .x{color:var(--down); font-family:'IBM Plex Mono'; font-weight:600; flex-shrink:0;}
.problem-card p{font-size:0.9rem; color:var(--muted);}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:26px;
  transition:border-color .15s ease;
}
.feature-card:hover{border-color:var(--brand-dim);}
.feature-icon{
  width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(76,141,255,0.1); color:var(--brand); margin-bottom:18px;
}
.feature-card h3{font-size:1.06rem; margin-bottom:8px;}
.feature-card p{font-size:0.88rem; color:var(--muted); margin-bottom:14px;}
.status-line{font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--up); display:flex; align-items:center; gap:6px;}
.status-line::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--up);}
/* Edge fade signals there's more to scroll to — without it, the strip
   (5 nodes + arrows, ~800px) just gets clipped mid-node at the container's
   padding with nothing suggesting it's scrollable at all. */
.arch-strip{
  display:flex; align-items:center; gap:0; overflow-x:auto; padding-bottom:8px;
}
.arch-node{
  flex:0 0 auto; background:var(--panel); border:1px solid var(--border); border-radius:9px;
  padding:14px 18px; font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--text); text-align:center; min-width:130px;
}
.arch-node span{display:block; color:var(--muted-2); font-size:0.68rem; margin-top:3px;}
.arch-arrow{flex:0 0 auto; color:var(--muted-2); padding:0 10px; font-size:1rem;}
.deploy-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.deploy-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:32px;}
.deploy-card .tag{font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--brand); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;}
.deploy-card h3{font-size:1.3rem; margin-bottom:12px;}
.deploy-card p{color:var(--muted); font-size:0.92rem; margin-bottom:20px;}
.deploy-card ul{list-style:none;}
.deploy-card li{font-size:0.88rem; color:var(--text); padding:8px 0; border-top:1px solid var(--border); display:flex; gap:10px;}
.deploy-card li:first-child{border-top:none;}
.deploy-card li::before{content:"✓"; color:var(--up); font-weight:600; flex-shrink:0;}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.stat{background:var(--panel); padding:30px 20px; text-align:center;}
.stat .num{font-family:'IBM Plex Mono'; font-size:2rem; font-weight:600; color:var(--brand);}
.stat .lbl{font-size:0.82rem; color:var(--muted); margin-top:6px;}
/* auto-fit/minmax instead of a hardcoded repeat(3,1fr) — renders
   identically as 3 equal columns today (exactly 3 self-serve plans), but
   won't leave an orphaned 3+1 desktop row if a 4th plan is ever made
   self-serve again. */
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; align-items:stretch;}
.price-card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px 24px;
  display:flex; flex-direction:column;
}
.price-card.featured{border-color:var(--brand); background:linear-gradient(180deg, rgba(76,141,255,0.06), var(--panel) 40%); position:relative;}
.featured-tag{
  position:absolute; top:-12px; left:24px; background:var(--brand); color:#08111F; font-size:0.68rem;
  font-family:'IBM Plex Mono'; font-weight:600; padding:4px 10px; border-radius:6px; letter-spacing:0.04em;
}
.price-card h3{font-size:1.1rem; margin-bottom:6px;}
.price-card .desc{font-size:0.82rem; color:var(--muted); margin-bottom:20px; min-height:36px;}
.price-amount{font-family:'IBM Plex Mono'; font-size:2.1rem; font-weight:600; margin-bottom:2px;}
.price-amount span{font-size:0.95rem; color:var(--muted); font-weight:400;}
.price-sub{font-size:0.75rem; color:var(--muted-2); margin-bottom:22px; font-family:'IBM Plex Mono';}
.price-card ul{list-style:none; margin-bottom:24px; flex-grow:1;}
.price-card li{font-size:0.85rem; padding:7px 0; display:flex; gap:9px; color:var(--text);}
.price-card li::before{content:"–"; color:var(--muted-2); flex-shrink:0;}
.price-card li.included::before{content:"✓"; color:var(--up);}
.faq-list{max-width:800px;}
.faq-item{border-bottom:1px solid var(--border); padding:22px 0;}
.faq-item h4{font-size:1rem; margin-bottom:8px; display:flex; justify-content:space-between; cursor:pointer;}
.faq-item p{font-size:0.9rem; color:var(--muted); max-width:680px;}
.cta-final{
  background:linear-gradient(135deg, #0E1620, #10192B); border:1px solid var(--border); border-radius:18px;
  padding:60px; text-align:center; margin:0 auto;
}
.cta-final h2{font-size:2rem; margin-bottom:12px;}
.cta-final p{color:var(--muted); margin-bottom:28px;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
footer{border-top:1px solid var(--border); padding:44px 0 30px;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
.foot-links{display:flex; flex-wrap:wrap; gap:12px 28px; font-size:0.85rem; color:var(--muted);}
.foot-links a:hover{color:var(--text);}
.foot-note{font-size:0.78rem; color:var(--muted-2); margin-top:24px;}
.foot-note a{text-decoration:underline; text-underline-offset:2px;}
.foot-note a:hover{color:var(--text);}
.auth-shell{min-height:100vh; padding:48px 20px; display:flex; align-items:center; justify-content:center;}
.auth-card{width:min(100%, 520px); background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -25px rgba(0,0,0,0.6);}
.auth-header{padding:28px 28px 12px;}
.auth-body{padding:0 28px 28px;}
.auth-form{display:grid; gap:14px;}
/* min-width:0 matters here specifically because of the reCAPTCHA widget
   below: .field is a grid item (child of .auth-form's display:grid), and
   grid items — like flex items — default to min-width:auto, which
   refuses to shrink a track below its content's intrinsic width. Without
   this, that default propagates the recaptcha iframe's fixed ~304px all
   the way up through .field regardless of what width/max-width the
   widget's own container sets, defeating its overflow-x:auto scroll
   fallback entirely. Harmless for every other field (a plain text input
   already shrinks fine on its own). */
.field{display:flex; flex-direction:column; gap:8px; min-width:0;}
.field label{font-size:0.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; font-family:'IBM Plex Mono';}
.field input, .field select, .field textarea{width:100%; border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:8px; padding:12px 14px; font:inherit;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--brand);}
/* Only the contact form uses a textarea today — vertical-only resize so a
   long resize drag can't widen it past the card and reintroduce the same
   horizontal-overflow class of bug already fixed elsewhere on these pages. */
.field textarea{resize:vertical; min-height:120px;}
.auth-links{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:16px; font-size:0.92rem; color:var(--muted);}
.auth-links a:not(.btn){color:var(--brand);}
.auth-note{margin-top:12px; font-size:0.84rem; color:var(--muted);}
/* Safety net, not just a narrow-phone fix: reCAPTCHA's 'normal' widget is
   a fixed ~304px iframe that mathematically cannot fit inside EVERY
   phone's content width with real padding (e.g. a 320px-wide screen has
   ~280px of card content to work with even at this file's most
   aggressive padding trim below) — no amount of CSS changes that number.
   Without this, an overflow that small would be silently clipped by
   .auth-card's own overflow:hidden (needed for its rounded corners) and
   the last few px of the checkbox would be genuinely unreachable. Giving
   the widget its OWN bounded, scrollable box instead means the worst
   case on any device is "scroll a few px sideways to reach it," never
   "part of it doesn't exist" — same pattern as this app's .table-responsive
   elsewhere, applied to a single small widget instead of a table.
   min-width:0 is required, not decorative — this div is a flex item
   (child of .field{display:flex}), and flex items default to
   min-width:auto, which refuses to shrink below the content's own
   intrinsic width (304px) no matter what max-width says. Without it,
   max-width:100%/overflow-x:auto silently do nothing and the div just
   grows to fit its child anyway — verified via a real headless-browser
   measurement, not assumed. */
/* overflow-y:hidden is required, not decorative, even though this widget
   never needs vertical scrolling: per the CSS overflow spec, setting only
   overflow-x to a non-visible value forces the browser to compute the
   unset overflow-y as 'auto' too (never 'visible') — so without this, a
   stray few px of vertical space below the reCAPTCHA iframe (it's an
   inline-level replaced element, and its default vertical-align:baseline
   leaves a small descender gap beneath it, the same classic gap bug as an
   <img> inside a div) makes an unwanted vertical scrollbar appear
   alongside the intended horizontal one. */
[data-recaptcha-widget]{max-width:100%; overflow-x:auto; overflow-y:hidden; min-width:0;}
.form-alert{border-radius:8px; padding:12px 14px; font-size:0.88rem; margin-bottom:16px; border:1px solid transparent;}
.form-alert-success{background:rgba(52,211,153,0.1); border-color:rgba(52,211,153,0.3); color:var(--up);}
.form-alert-error{background:rgba(242,84,91,0.1); border-color:rgba(242,84,91,0.3); color:var(--down);}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:2.5rem;}
  .problem-grid, .feature-grid{grid-template-columns:repeat(2,1fr);}
  .deploy-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-links.open{display:flex;}
  /* Verified via a real headless-browser render: index.php's nav-cta
     ("Sign in" + "Start free trial") kept fighting the logo and the new
     hamburger for space here and the button wrapped onto 2 lines,
     overlapping the logo text. #mobileNavPanel already duplicates both
     links, so once the hamburger takes over there's no need to also keep
     squeezing them into the top bar — simpler to just show logo +
     hamburger only. marketing_header_minimal.php's .nav-cta-minimal
     ("Back to home", no hamburger of its own) is deliberately exempt. */
  .nav-cta:not(.nav-cta-minimal){display:none;}
}
@media (max-width: 620px){
  .wrap{padding:0 20px;}
  .hero{padding:56px 0 50px;}
  .hero h1{font-size:2.05rem;}
  .problem-grid, .feature-grid, .pricing-grid{grid-template-columns:1fr;}
  /* .featured-tag sits at top:-12px, protruding above its card's own top
     edge — fine with room to spare at the 3-across desktop layout, but
     once cards stack into a single column the 16px gap barely clears it
     from the card above. A bit more gap here only, so the tag never
     visually touches the previous card. */
  .pricing-grid{gap:32px;}
  .panel-foot{grid-template-columns:1fr; }
  .panel-foot div{border-right:none; border-top:1px solid var(--border);}
  .panel-foot div:first-child{border-top:none;}
  .cta-final{padding:40px 24px;}
  .site-row{grid-template-columns:10px 1fr auto; }
  .site-row .site-metric.ssl-col{display:none;}
  /* index.php's .nav-cta is already fully hidden at <=980px (above) once
     the hamburger takes over. marketing_header_minimal.php's pages (no
     hamburger) keep their .nav-cta-minimal ("Back to home") visible and
     unchanged at every width — nothing further needed here for either. */
  .auth-links{flex-direction:column; align-items:flex-start; gap:8px;}
  /* .stats-row's divider lines come from its 1px grid gap showing the
     panel's border color through — that trick keeps working unchanged
     when the 3 columns become 1 stacked column, so no other override is
     needed here. Without this, each of the 3 cells is squeezed to ~65px
     of usable text width and labels like "monitoring types in one
     platform" get clipped (overflow:hidden on .stats-row). */
  .stats-row{grid-template-columns:1fr;}
}
/* Nothing below 620px was ever addressed before this — a 360px phone and
   a 619px phablet rendered byte-identical CSS. This tier scales down the
   vertical rhythm/type that stayed desktop-sized regardless of how narrow
   the viewport got. */
@media (max-width: 480px){
  .section{padding-top:56px; padding-bottom:56px;}
  .section-head h2{font-size:1.65rem;}
  .cta-final h2{font-size:1.6rem;}
  /* The hero's hardcoded <br> line breaks were tuned for desktop line
     length; forcing the same 3 short lines on a narrow phone leaves
     almost no margin before overflowing, and any future copy edit would
     push it over. Letting the heading wrap naturally here is safer. */
  .hero h1 .soft-break{display:none;}
  /* trial.php's inline "Verify Email"/code-entry rows — min-width:0 on
     the inputs (inline style) already keeps these from overflowing, but
     at the narrowest phones the input still gets uncomfortably thin
     alongside the button. Drop the button to its own line instead. */
  .verify-row{flex-wrap:wrap;}
  .verify-row input{flex-basis:100%;}
  /* reCAPTCHA always renders at Google's 'normal' size now (~304px wide
     — see recaptcha.js), which is wider than this card's usual content
     area once .auth-shell/.auth-body's full padding is subtracted.
     Trimming both here reclaims most of that width without ever needing
     Google's less-reliable 'compact' mode — down to ~336px viewports this
     is a full, comfortable fit; narrower than that, [data-recaptcha-widget]
     above's own scroll box is the honest fallback for the few px it's
     still short by, rather than squeezing every other field in the card
     down to zero padding just to chase the last few pixels. */
  .auth-shell{padding:24px 6px;}
  .auth-header{padding:20px 10px 12px;}
  .auth-body{padding:0 10px 20px;}
}