/* Symantec CBX LP — built from Figma rhQIUAD0FzfNuRg17KbD8j node 366:3 (1920 wide). Spec: figma/SPEC.md */

@font-face{font-family:'Arrow Display';src:url('/assets/fonts/ArrowDisplayVF_W_Wght.woff2') format('woff2-variations'),url('/assets/fonts/ArrowDisplayVF_W_Wght.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --black:#000;
  --white:#fff;
  --blue:#0069aa;          /* buttons + icons (Arrow Pacific Blue) */
  --blue-hover:#0084d5;
  --blue-active:#004e7f;
  --hero-from:#006490;     /* 366:9 gradient, left -> right */
  --hero-to:#14254c;
  --rule:#595d6c;          /* 366:28 dividers, peak at 48.558% */
  --container:1140px;      /* x 390 -> 1530 on the 1920 frame */
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--black);font-family:'Arrow Display',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:400;font-size:16px;line-height:28px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:500;font-size:40px;line-height:56px}
h3{font-weight:500;font-size:22px;line-height:28px;letter-spacing:-.22px}
a{color:inherit}

.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-width:210.25px;height:51.31px;padding:0 35px;border-radius:4px;background:var(--blue);color:var(--white);font-weight:500;font-size:18px;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .15s ease}
.btn:hover{background:var(--blue-hover)}
.btn:active{background:var(--blue-active)}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:2px;box-shadow:0 0 0 4px var(--blue)}

/* header — 366:7, 100 tall, lockup 407x49.5 */
.site-header{background:var(--black);height:100px;display:flex;align-items:center}
.lockup{width:407px;height:auto}

/* hero — 366:9, 500 tall; photo 366:10 runs from x1130 (= 50% + 170) to the right edge */
.hero{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--hero-from),var(--hero-to));color:var(--white)}
.hero__inner{position:relative;z-index:1;min-height:500px;padding-top:69px;padding-bottom:69px}
.hero__inner > *{max-width:672px}
.eyebrow{display:flex;align-items:center;gap:8.6px;letter-spacing:1.28px;margin-bottom:18px}
.hero h1{margin-bottom:16px}
.hero__body{max-width:637px;margin-bottom:25px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px 24px} /* 2nd CTA added per Jene, 7 Oct (not in Figma) */
.hero__photo{position:absolute;top:0;bottom:0;left:calc(50% + 170px);right:0}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}

/* intro — 366:12, white, 948 wide centred group */
.intro{padding:73px var(--gutter) 82px}
.intro__inner{max-width:968px;margin:0 auto;display:grid;grid-template-columns:505px 443px;justify-content:start;align-items:start} /* group x476 = centre - 9.77; body at x981 */
.intro__head img{margin-bottom:22px}
.intro h2{max-width:505px}
.intro__inner > p{padding-top:16px}

/* key advantages — 366:11 band (852 tall) + 366:26 rows */
.advantages{background:#e9e9e9 url('/assets/img/advantages-bg.jpg') center/cover no-repeat;padding:82px 0 48px}
.advantages h2{max-width:1056px;margin:0 auto 61px;padding-left:5px}
.adv-list{list-style:none;margin:0 auto;padding:0;max-width:1056px}
.adv-list li{position:relative;display:grid;grid-template-columns:104px 444px 500px;align-items:start;padding:30px 4px 36px} /* icon x436, h3 x540 (w388), p x984; divider 97 below row top */
.adv-list li:first-child{padding-top:0}
.adv-list li + li::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(89,93,108,0),var(--rule) 48.558%,rgba(89,93,108,0))}
.adv-list h3{padding-top:6px;max-width:388px}
.adv-list p{font-size:15.5px;line-height:26px;padding-top:9px}

/* demo CTA — 366:70, 90 above/below, photo 561x423.5 at the container's right edge */
.demo{padding:90px 0}
.demo__inner{display:flex;align-items:center;justify-content:space-between;gap:48px}
.demo__copy{max-width:505px}
.demo__copy h2{margin-bottom:16px}
.demo__copy p{max-width:447px;margin-bottom:34px}
.demo__photo{width:561px;aspect-ratio:561/423.5;object-fit:cover;flex:none}

/* footer — 366:80, 194.5 tall */
.site-footer{background:var(--black);color:var(--white);font-size:14px;line-height:28px;padding:35px 0 45px}
.site-footer__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.copyright{margin-top:33px}
.legal{display:flex;flex-direction:column;align-items:flex-end;gap:10.75px;padding-top:9.5px;text-align:right}
.legal a{text-decoration:none}
.legal a:hover{text-decoration:underline}

/* ---------- below the 1920 design: responsive calls ---------- */
@media (max-width:1240px){
  .intro__inner{grid-template-columns:1fr 1fr;gap:48px}
  .adv-list li{grid-template-columns:40px minmax(0,1fr) minmax(0,1.2fr);column-gap:40px}
}

/* hero copy (672) would run under the photo (starts at 50% + 170) below ~1100: stack */
@media (max-width:1100px){
  .hero__inner{min-height:0}
  .hero__inner > *{max-width:none}
  .hero h1,.hero__body{max-width:672px}
  .hero__photo{position:static;width:100%;height:min(440px,63.3vw)} /* 790:500, capped */
}

@media (max-width:1024px){
  .demo__inner{flex-direction:column;align-items:flex-start}
  .demo__photo{width:100%;max-width:720px}
}

/* tablet portrait: intro + advantage rows stack so headings keep the design's line breaks */
@media (max-width:900px){
  .intro__inner{grid-template-columns:1fr;gap:20px}
  .intro__inner > p{padding-top:0;max-width:640px}
  .adv-list li{grid-template-columns:40px minmax(0,1fr);column-gap:20px;row-gap:4px;padding:24px 0}
  .adv-list li p{grid-column:2;padding-top:0;max-width:640px}
  .adv-list h3{padding-top:7px}
}

@media (max-width:760px){
  :root{--gutter:20px}
  h1,h2{font-size:30px;line-height:40px}
  h3{font-size:20px;line-height:26px}
  .site-header{height:72px}
  .lockup{width:260px}
  .hero__inner{padding-top:48px;padding-bottom:48px}
  .intro{padding:56px var(--gutter)}
  .advantages{padding:56px 0 48px}
  .advantages h2{margin-bottom:28px;padding-left:0}
  .adv-list li{column-gap:16px}
  .demo{padding:56px 0}
  .demo__inner{gap:32px}
  .demo__copy p{margin-bottom:28px}
  .site-footer{padding:32px 0}
  .site-footer__inner{flex-direction:column;gap:24px}
  .copyright{margin-top:20px}
  .legal{align-items:flex-start;text-align:left;padding-top:0;gap:4px}
}