/* CyberCalm Scanner hero: [cybercalm_scanner_hero]. Plain HTML in the theme; heading font comes from the theme.
   Rules for h1/p/a start with "body .ccs-hero" to outrank the theme's post-content styles (see guide.css). */

.ccs-hero{
  --ccs-hero-bg:#0d0d0d;
  /* Same column as .ccs-guide: same max width, same left edge. */
  max-width:880px;margin:0 auto;padding:88px 0 72px;
  background:var(--ccs-hero-bg);color:#fff;
  /* Full-width background without leaving the content column: the border image fills the box
     and extends 100vmax to the left and right (outset), in one layer, so there is no seam.
     An outset is not scrollable overflow, so there is no horizontal scroll, also with a classic
     (Windows-style) scrollbar. */
  border-image:linear-gradient(var(--ccs-hero-bg),var(--ccs-hero-bg)) fill 0/0/0 100vmax;
}
.ccs-hero *,.ccs-hero *::before,.ccs-hero *::after{box-sizing:border-box}

.ccs-hero__eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;color:#8fb2ff;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
body .ccs-hero h1.ccs-hero__title{font-size:clamp(36px,6vw,60px);line-height:1.05;letter-spacing:-.03em;font-weight:800;color:#fff;margin:0 0 24px;padding:0;max-width:none}
.ccs-hero__intro{margin:0 0 40px}
body .ccs-hero .ccs-hero__intro p{font-size:18px;line-height:1.6;color:#bdbdbd;margin:0 0 12px;text-wrap:pretty}
body .ccs-hero .ccs-hero__intro p:last-child{margin-bottom:0}
body .ccs-hero .ccs-hero__intro a{color:#8fb2ff;font-weight:600;text-decoration:underline}

@media (max-width:600px){
  .ccs-hero{padding:56px 0 48px}
  body .ccs-hero .ccs-hero__intro p{font-size:17px}
  .ccs-hero__intro{margin-bottom:28px}
}