/* Brand typefaces: keep these paths relative to this CSS file. WOFF2 is preloaded in each page. */
@font-face{font-family:Avenir;src:url('../fonts/AvenirNext/AvenirNextLTPro-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Avenir;src:url('../fonts/AvenirNext/AvenirNextLTPro-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
/* Shared layout, navigation, learning cards, practice exercise and business sections. */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:#182142;background:#ffffff;font:17px/1.6 Avenir,'Arial',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #ff6c43;outline-offset:5px}.wrap{max-width:1280px;margin:auto;padding:0 48px}
/* Sticky site header. */
header{position:sticky;top:0;z-index:10;background:#fffffff5;border-bottom:1px solid #e0e5f3;backdrop-filter:blur(12px)}.nav{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:16px;line-height:1.15;font-size:17px}.brand img{width:114px;height:auto}.pipe{font-size:38px;font-weight:400;color:#b8bfd8}.brand b{font-weight:700}nav{display:flex;align-items:center;gap:28px;font-size:15px}nav a:hover,.text-link:hover{color:#c00084}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 24px;background:#0047ff;color:white;border-radius:7px;font-weight:700;font-size:16px;transition:background .2s,transform .2s}.button:hover{background:#e00098;color:#ffffff;transform:translateY(-2px)}.small{padding:13px 18px;font-size:14px}.menu{display:none}
/* Homepage introduction. */
.hero{background:#f0f4ff;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:45px;align-items:center;padding-top:80px;padding-bottom:70px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.8px;line-height:1.6;margin:0 0 24px}.dot{display:inline-block;width:7px;height:7px;background:#0047ff;border-radius:50%;margin-right:7px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,5.2vw,72px);letter-spacing:-3.5px;line-height:1.07;margin-bottom:28px}h2{font-size:clamp(34px,3.6vw,48px);letter-spacing:-1.8px;line-height:1.13;margin-bottom:25px}h3{line-height:1.3;letter-spacing:-.6px}.underline{position:relative;z-index:0;white-space:nowrap}.underline:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:12px;background:#f5a9dc;z-index:-1;border-radius:60%}.intro{font-size:19px;max-width:500px;line-height:1.65;color:#59627b}.actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:30px}.text-link{background:none;border:0;padding:0;font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:5px}.hero-foot{display:flex;gap:22px;margin-top:45px;font-size:13px;color:#59627b}.hero-foot span:before{content:'✓';margin-right:8px}
/* Decorative message illustration. */
.art{position:relative;min-height:450px;display:flex;align-items:center;justify-content:center}.orbit{border:1px solid #c9d6fc;border-radius:50%;position:absolute;width:460px;height:460px}.orbit-two{width:340px;height:340px;background:#e0e9ff}.message{z-index:1;background:#ffffff;border:1px solid #d6def2;border-radius:17px;width:360px;padding:25px 30px;transform:rotate(-6deg);box-shadow:0 25px 50px #30412a14}.message-bar{display:flex;gap:10px;align-items:center;font-size:9px;letter-spacing:1px;color:#68718b}.mail-icon{font-size:25px}.message h3{font-size:26px;margin:25px 0 13px}.message p{font-size:13px;color:#68718b}.fake-link{font-size:13px;border:1px dashed #e299d0;color:#9e146e;background:#fff0fa;padding:12px;border-radius:6px;margin-top:20px}.message-label{font-size:8px;letter-spacing:1.5px;margin-top:18px;color:#707a99}.pause{display:flex;align-items:center;gap:15px;background:#0047ff;color:white;border-radius:12px;padding:18px 23px;position:absolute;bottom:24px;right:0;z-index:2;transform:rotate(3deg);box-shadow:0 12px 20px #0047ff26}.pause>span:first-child{font-size:33px;color:#ffc4ec}.pause b{font-size:16px}.pause small{display:block;font-size:12px;color:#e0e9ff}.tick{background:#ffc4ec;color:#0047ff;border-radius:50%;padding:0 7px}.spark{position:absolute;color:#e00098;font-size:70px;z-index:2}.spark-one{top:0;right:0}.spark-two{bottom:10px;left:0;font-size:50px}.art-note{position:absolute;bottom:-24px;left:34%;font-size:11px;letter-spacing:1px}
/* Security awareness definition. */
.intro-band{background:#0047ff;color:#ffffff;padding:47px 0}.band-grid{display:grid;grid-template-columns:.65fr 1.1fr 1.1fr;gap:40px;align-items:center}.band-grid .eyebrow{color:#ffc4ec;margin:0}.band-grid h2{font-size:28px;margin:0;letter-spacing:-.7px}.band-grid>p:last-child{font-size:15px;color:#e0e9ff;margin:0}.section{padding-top:90px;padding-bottom:90px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px;gap:30px}.section-heading p:last-child{font-size:15px;color:#68718b}
/* Seven learning categories. */
.habit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.habit{padding:26px;border:1px solid #dce3f3;border-radius:12px;background:white;align-self:start;min-height:290px}.habit-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.icon{display:inline-flex;align-items:center;justify-content:center;background:#edf2ff;border-radius:11px;width:44px;height:44px;font-size:27px}.number{font-size:11px;color:#6a7491}.habit .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:12px}.habit h3{font-size:24px;margin-bottom:25px}.habit summary{list-style:none;font-size:13px;font-weight:bold;display:flex;justify-content:space-between;border-top:1px solid #e4e9f6;padding-top:16px}.habit summary::-webkit-details-marker{display:none}.habit summary span{font-size:18px}.habit details[open] summary span{transform:rotate(45deg)}.habit ul{padding-left:18px;font-size:14px;color:#59627b}.habit li+li{margin-top:15px}.last-card{background:#f7e3f5;border:0;min-height:290px}.last-card .icon{background:none;margin-bottom:15px}.last-card h3{margin-bottom:12px}.last-card p{font-size:14px}.status{margin:10px 0 0;font-size:12px!important}
/* Interactive scam exercise. */
.challenge{background:#101b45;color:#f4f7ee;padding:85px 0}.challenge-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:100px}.challenge .eyebrow{color:#ffa5e2}.challenge p{color:#d5ddf6}.challenge h3{font-size:18px;margin:30px 0 20px}.answers{display:grid;gap:11px}.answers button{display:flex;align-items:center;text-align:left;gap:18px;background:#1c2a59;border:1px solid #526291;color:white;border-radius:7px;padding:16px;font-size:14px}.answers button span:first-child{flex:1}.answers button:hover{border-color:#ffa5e2}.answers button.selected{border:2px solid #ffa5e2}.answers button.wrong{border-color:#ffacdd}#feedback:not(:empty){padding:17px;border-left:3px solid #ffa5e2;background:#1c2a59;margin-top:18px;font-size:15px}.signs{background:#edf2ff;color:#0047ff;border-radius:120px 120px 14px 14px;padding:60px 40px 30px}.signs>.eyebrow{color:#0047ff;text-align:center}.signs>div{position:relative;padding:0 0 20px 43px;border-bottom:1px solid #cdd7f3;margin-bottom:20px}.signs h3{font-size:21px;margin:0 0 8px}.signs p{font-size:14px;color:#59627b;margin:0}.signs span{position:absolute;left:0;top:2px;font-size:12px;color:#68718b}.signs .signs-note{font-size:12px;text-align:center}
/* Local learning checklist. */
.start-panel{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:#f0f4ff;border-radius:15px;padding:50px}.start-panel p{font-size:15px;color:#59627b}.progress-label{margin:28px 0 5px;font-size:12px!important}progress{width:100%;height:7px;accent-color:#0047ff}.checklist{display:flex;flex-direction:column;justify-content:center;gap:20px}.checklist label{display:flex;align-items:start;gap:14px;font-size:16px;cursor:pointer}.checklist input{margin-top:5px;accent-color:#0047ff;width:21px;height:21px;flex-shrink:0}.checklist input:checked+span{text-decoration:line-through;color:#697595}.checklist button{align-self:start;margin:10px 0 0 35px;font-size:13px}
/* About the free initiative. */
.about{background:#edf2ff}.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:75px}.about-grid p{font-size:17px}
/* Footer navigation. */
footer{padding:65px 0 25px;background:#ffffff}.footer-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr 1fr;gap:35px}.footer-grid h3{font-size:14px;letter-spacing:0;margin-bottom:23px}.footer-grid a:not(.brand){display:block;font-size:13px;margin:12px 0;color:#59627b}.footer-grid a:hover{text-decoration:underline}.footer-grid p{font-size:14px;color:#59627b;margin-top:25px}.footer-brand img{width:90px}.footer-brand{font-size:14px;gap:10px}.footer-bottom{border-top:1px solid #dce3f3;margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;gap:25px;font-size:10px;color:#68718b}.skip{position:fixed;top:-100px;padding:15px;background:white;z-index:50}.skip:focus{top:0}@media(min-width:1500px){.hero-grid{padding-top:100px;padding-bottom:100px}}@media(max-width:1050px){.wrap{padding-left:28px;padding-right:28px}nav{gap:17px}nav .small{display:none}.hero-grid{gap:15px}h1{font-size:54px}.art{transform:scale(.88)}.habit-grid{grid-template-columns:repeat(2,1fr)}.challenge-grid{gap:45px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
/* Mobile layout. */
@media(max-width:700px){.nav{min-height:83px}.brand img{width:85px}.brand{font-size:13px;gap:10px}.pipe{font-size:30px}.menu{display:block;border:1px solid #c6d2be;border-radius:6px;background:none;padding:7px 10px;font-size:12px}nav{display:none;position:absolute;top:83px;left:0;right:0;background:#ffffff;padding:25px;border-bottom:1px solid #d2ddcb;flex-direction:column;align-items:start}nav.open{display:flex}.hero-grid{grid-template-columns:1fr;padding-top:45px;padding-bottom:35px}h1{font-size:48px;letter-spacing:-2.5px}.hero .eyebrow{font-size:9px}.intro{font-size:17px}.actions{gap:22px}.hero-foot{margin-top:30px}.art{min-height:410px;transform:scale(.9);margin:0 -20px}.orbit{width:360px;height:360px}.orbit-two{width:270px;height:270px}.message{width:300px;padding:24px}.message h3{font-size:23px}.pause{right:0;bottom:0}.spark-one{right:10px;top:8px}.art-note{display:none}.band-grid,.challenge-grid,.about-grid,.start-panel{grid-template-columns:1fr;gap:30px}.band-grid{gap:22px}.intro-band{padding:35px 0}.band-grid h2 br{display:none}.section{padding-top:55px;padding-bottom:55px}.section-heading{display:block;margin-bottom:30px}h2{font-size:35px}.habit-grid{gap:12px}.habit{padding:20px;min-height:275px}.habit h3{font-size:21px}.habit .eyebrow{font-size:9px}.habit summary{font-size:12px;gap:5px}.habit-top{margin-bottom:23px}.challenge{padding:55px 0}.signs{border-radius:60px 60px 12px 12px;padding:40px 28px 25px}.start-panel{padding:30px 24px}.footer-grid{gap:30px 20px}.footer-bottom{flex-direction:column;gap:10px}.footer-brand{flex-wrap:wrap}.footer-brand .pipe{display:none}.footer-brand span:last-child{flex-basis:100%;margin-top:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Business referrals and quotation requests */

/* Business referrals and quotation requests. */
.business{background:#101b45;color:#fff}.business .eyebrow{color:#ffa5e2}.business .section-heading>p{color:#d5ddf6}.business-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.business-card{display:flex;flex-direction:column;align-items:flex-start;padding:38px;background:#1c2a59;border:1px solid #435384;border-radius:14px}.business-icon{display:grid;place-items:center;width:48px;height:48px;background:#334578;color:#ffb4e6;border-radius:12px;font-size:29px;margin-bottom:24px}.business-card h3{font-size:28px;max-width:440px}.business-card>p:not(.eyebrow){color:#d5ddf6;max-width:450px}.business-card .button{margin-top:auto}.business-card small{display:block;margin-top:20px;font-size:12px;color:#c5cfea;line-height:1.6;max-width:430px}.quote-card{background:#f1f4ff;color:#182142;border-color:#f1f4ff}.quote-card .eyebrow{color:#0047ff}.quote-card>p:not(.eyebrow){color:#59627b}.quote-card .business-icon{background:#e0e7ff;color:#0047ff}.business-meeting{margin-top:20px;font-size:14px;font-weight:bold;text-decoration:underline;text-underline-offset:5px}.button:hover{color:#fff}.pause .tick{color:#101b45}.last-card .text-link{color:#182142}@media(max-width:700px){.business-grid{grid-template-columns:1fr}.business-card{padding:28px}.business-card h3{font-size:25px}}

/* Accessibility: preserve visible focus, readable body copy and usable embedded forms. */
p,li,label{font-size:max(1em,17px)}.quote-embed{padding:48px 0}.provider-frame{min-height:240px;padding:24px;border:1px solid #dce3f3;border-radius:14px;background:#fff}.error-hero{min-height:65vh;text-align:center;padding:90px 24px;background:#f0f4ff}.error-hero h1{font-size:clamp(80px,18vw,180px);color:#0047ff}.error-hero p{max-width:620px;margin:20px auto}.error-hero .actions{justify-content:center}.business .quote-embed h3{color:white}.provider-status{color:#182142!important}

/* Keep the quotation card close to the width of the embedded form. */
.quote-embed .provider-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* Enlarge the header logo on desktop while preserving the smaller layouts. */
@media (min-width: 1051px) {
  .nav .brand img {
    width: 170px;
    flex-shrink: 0;
  }
}

/* The quotation section sits between the dark business section and the about section. */
.quotation-section {
  background: linear-gradient(135deg, #f3f7ff 0%, #e7efff 100%);
  color: #13264a;
}
.quotation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.quotation-intro {
  padding-block: clamp(0px, 2vw, 24px);
}
.quotation-intro .eyebrow { color: #0047ff; }
.quotation-intro h2 { margin-bottom: 16px; }
.quotation-intro > p:not(.eyebrow), .quotation-steps span, .quotation-form > p {
  color: #415270;
}
.quotation-steps {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
  counter-reset: quotation-step;
}
.quotation-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: #ffffffa6;
  border: 1px solid #d4e0f7;
  border-radius: 12px;
  counter-increment: quotation-step;
}
.quotation-steps li::before {
  content: counter(quotation-step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 50%;
  color: #0047ff;
  background: #e6eeff;
  font-weight: 700;
}
.quotation-form {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  margin-inline: auto;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid #d4e0f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 35px #16356a14;
}
.quotation-form h3 { margin: 0 0 8px; color: #13264a; }
.quotation-form .provider-frame {
  min-height: 0;
  padding: 0;
  border: 0;
}
.quotation-form .provider-frame .text-link { color: #0047c9; }
.quotation-form .pipedriveWebForms iframe { max-width: 100%; }
@media (max-width: 800px) {
  .quotation-grid { grid-template-columns: minmax(0, 1fr); }
}
