/* CST BOFU landers - Aug 4 revision */
:root{--ink:#0C070B;--wine:#7E072E;--crimson:#A80038;--hot:#D61246;
--mist:#F4F4F5;--line:#E4E4E7;--slate:#52525B;--snow:#fff;
--box:#26262B;--boxline:#3A3A42;--gold:#FFC107}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:var(--ink);background:var(--snow)}
h1,h2,h3{margin:0 0 .5em;line-height:1.1;letter-spacing:-.02em}
section{padding:72px 24px}
/* Lighter and smaller. At 800/18px the button label read as a solid slab. */
.cta{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
background:var(--crimson);color:#fff;text-decoration:none;font-weight:600;
padding:16px 38px;border-radius:999px;font-size:17px;letter-spacing:.01em}
.cta em{font-style:normal;font-weight:500;font-size:12px;opacity:.88;letter-spacing:.06em;text-transform:uppercase}
.cta:hover{background:var(--wine)}

.bar{display:flex;align-items:center;justify-content:space-between;
padding:16px 24px;background:var(--ink)}
.brand{height:46px;width:auto}
.bar-cta{color:#fff;text-decoration:none;font-weight:700;font-size:14px;
border:1px solid rgba(255,255,255,.35);padding:11px 18px;border-radius:999px}

.hero{background:var(--ink);color:#fff;text-align:center;padding:64px 24px 56px}
.qual{margin:0 0 20px;font-size:13px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#fff;background:rgba(255,255,255,.1);
display:inline-block;padding:8px 18px;border-radius:999px}
/* The V of proofing. Each block below the headline is capped narrower than the
   one above it, so the offer, the proof line and the stars physically converge
   on the button. Before this the stars pinched to 120px and the button widened
   back out, which read as a bowtie rather than a funnel.
   The 1000px cap is load-bearing: at 56px the longest authored line
   ("Find your cybersecurity gaps for FREE") measures 964px, so a 760px cap
   split it mid-phrase and orphaned single words on 3 of 5 landers.
   text-wrap:balance is the safety net if a platform font runs wider. */
/* 600/800, down from 700/900. The heavier pair was reading as a slab - the
   emphasised words in particular were hard to read rather than emphatic. */
/* Size down as well as weight: 86px was reading as a wall rather than a
   headline. */
.offer{font-size:clamp(30px,5vw,56px);font-weight:600;margin:0 auto 16px;max-width:1000px}
.offer b{font-weight:800}
.offer span{display:block;text-wrap:balance}
/* The ad's pain question, restated under the heading. Sized to sit between the
   headline and the proof line so it strengthens the taper instead of breaking it. */
/* The 18px floor left the hook SMALLER than the proof line from 452-692px,
   which inverted the hero order and bulged the V outward. */
.hook{margin:0 auto 14px;max-width:760px;font-size:clamp(20px,2.9vw,25px);
color:#E4DDE1;font-weight:600}
/* 2vw is only 7.8px on a phone, so the old clamp pinned this to its 15px floor
   on every mobile - 1px under body text, which flattened the hero taper. */
.proof{margin:0 auto 16px;max-width:560px;font-size:clamp(16px,4.2vw,19px);
color:#F5C6D2;font-weight:600}
/* text-indent cancels the trailing letter-space so the row stays truly centred */
.stars{color:var(--gold);font-size:44px;letter-spacing:20px;text-indent:20px;
margin:0 0 26px;line-height:1}

/* Scrolling logo strip. flex:0 0 auto matters: a dimensionless SVG collapses
   to zero width without it, which is what hid the Pixelcarve mark. */
.logos{padding:34px 24px;background:var(--mist);text-align:center}
.logos p{margin:0 0 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.logo-mask{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.logo-track:hover{animation-play-state:paused}
.logo-set{display:flex;gap:56px;padding-right:56px;flex:0 0 auto;align-items:center}
/* Normalised on optical width, not height. Capping height alone left the two
   icon-only marks tiny beside six wordmarks, and .85 keeps the lighter marks
   from dissolving once grayscale is applied. */
.logo-track img{height:34px;width:auto;max-width:150px;object-fit:contain;
flex:0 0 auto;opacity:.85;filter:grayscale(1)}
.logo-track img[src*="pixelcarve"],.logo-track img[src*="gofleet"]{height:44px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.formwrap{background:var(--mist);padding-top:8px}
.formcard{max-width:560px;margin:0 auto;background:var(--box);
border:1px solid var(--boxline);border-radius:20px;padding:34px 32px;color:#fff}
.formcard h2{font-size:29px;text-align:center;color:#fff}
.formqual{margin:0 0 8px;text-align:center;font-size:12px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:#F5C6D2}
.formsub{margin:0 0 22px;color:#B6B2BA;text-align:center;font-size:15px}
form label{display:block;margin-bottom:13px;font-weight:600;font-size:14px;color:#EDEBEE}
form input,form select,form textarea{width:100%;margin-top:6px;padding:11px 13px;
border:1px solid var(--boxline);border-radius:10px;font:inherit;font-size:15px;
font-weight:400;background:#fff;color:var(--ink)}
/* --hot on the dark card is 2.89:1, just under the 3:1 non-text floor, because
   the outline paints outside the border-box and mostly sits on the card. */
form input:focus,form select:focus,form textarea:focus{outline:3px solid #FF4D6D;border-color:transparent}
.cta:focus-visible,.bar-cta:focus-visible,form button:focus-visible,
summary:focus-visible{outline:3px solid #FF4D6D;outline-offset:3px}
/* font-family:inherit matters - the UA button rule wins otherwise and the most
   important control on the page renders in Arial while everything else is
   Segoe UI. */
form button{width:100%;margin-top:10px;background:var(--crimson);color:#fff;border:0;
padding:16px;border-radius:999px;font-family:inherit;font-size:17px;font-weight:600;
cursor:pointer}
form button:hover{background:var(--wine)}
form button:disabled{opacity:.6;cursor:default}
/* #3A3A42 on the card is 1.34:1 - below the 3:1 non-text floor, and since the
   ghost button has no fill that border is its only boundary. */
form button.ghost{background:none;border:1px solid #6E6A74;color:#B6B2BA;
font-size:14px;font-weight:600;padding:13px;margin-top:8px}
form button.ghost:hover{background:rgba(255,255,255,.06)}
.fineprint{margin:12px 0 0;font-size:12px;color:#98939C;text-align:center}
.formmsg{margin:10px 0 0;font-size:14px;text-align:center;font-weight:600}
.formmsg.ok{color:#4ADE80}.formmsg.bad{color:#FDA4AF}

/* Half bold, not black. The numbers were reading as a slab. */
/* Explicit steps, not auto-fit. 4 columns need 908px but a 768px iPad only
   offers 720px, so auto-fit dropped to 3 and left "50k+" orphaned on row two.
   2x2 is always balanced. */
.stats{background:var(--ink);color:#fff}
.stat-row{max-width:1080px;margin:0 auto;display:grid;
grid-template-columns:repeat(4,1fr);gap:36px;text-align:center}
/* Floor lowered from 34px: at 34 the stat numbers tied or beat the H1 on
   every phone, so the page had no clear largest element. */
.stat-v{font-size:clamp(26px,4.4vw,52px);font-weight:600;color:#fff;letter-spacing:-.03em}
.stat-l{font-size:17px;font-weight:400;color:#C9C4C7;margin:8px auto 0;
line-height:1.4;max-width:19ch}

/* 1 and 2 on the top row, 3 spanning below, and all of it a size larger. */
.steps{text-align:center}
.steps h2{font-size:clamp(28px,4vw,42px);margin-bottom:40px}
.step-row{max-width:1000px;margin:0 auto 40px;display:grid;
grid-template-columns:repeat(2,1fr);gap:26px;text-align:left}
.step:nth-child(3){grid-column:1/-1}
.step{border:1px solid var(--line);border-radius:18px;padding:32px;background:#fff}
.step-n{width:40px;height:40px;border-radius:50%;background:var(--crimson);color:#fff;
display:grid;place-items:center;font-weight:800;margin-bottom:15px;font-size:18px}
.step h3{font-size:25px}
.step p{margin:0;color:var(--slate);font-size:17px}

.quotes{background:var(--mist);padding-left:0;padding-right:0}
.quotes h2{text-align:center;font-size:clamp(28px,4vw,42px);margin-bottom:40px}
.quote-mask{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.quote-track{display:flex;width:max-content;animation:slide 60s linear infinite}
.quote-track:hover{animation-play-state:paused}
.quote-set{display:flex;gap:24px;padding-right:24px;flex:0 0 auto;align-items:stretch}
.quote{margin:0;background:#fff;border-radius:18px;padding:30px;border:1px solid var(--line);
display:flex;flex-direction:column;width:360px;flex:0 0 auto}
.quote blockquote{margin:0 0 22px;font-size:15px;color:#3F3F46;flex:1}
.quote blockquote::before{content:"\201C";display:block;font-size:52px;line-height:.6;
color:var(--line);margin-bottom:10px}
.quote figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.quote figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center top}
.quote figcaption span{display:flex;flex-direction:column;font-size:13px;color:var(--slate)}
.quote figcaption strong{color:var(--ink);font-size:14px}

.faq h2{text-align:center;font-size:clamp(28px,4vw,42px);margin-bottom:36px}
.faq-list{max-width:780px;margin:0 auto}
/* Padding on <details> is dead space: only the summary line box toggles, which
   was a 27px tap target inside a 63px block that looked clickable. */
details{border-bottom:1px solid var(--line);padding:0}
summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;padding:15px 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--crimson);font-weight:900}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 16px;color:var(--slate);max-width:70ch}

.footcta{background:var(--ink);color:#fff;text-align:center}
.footcta h2{font-size:clamp(26px,4vw,40px);max-width:820px;margin:0 auto 26px}

.ty{background:var(--ink);color:#fff;text-align:center;padding:64px 24px 48px}
.ty h1{font-size:clamp(32px,5vw,54px);font-weight:600}
.tysub{max-width:640px;margin:0 auto 20px;color:#D6D2D8;font-size:17px}
.tysub strong{color:#fff}
/* padding-top:0 let the first child's margin collapse out, so the white card
   sat flush against the dark section above it with no grey gap. */
.calwrap{padding:48px 24px 72px;background:var(--mist)}
.cal{display:block;width:100%;max-width:900px;margin:0 auto;height:760px;border:0;
border-radius:20px;background:#fff}
.calfallback{max-width:640px;margin:0 auto;text-align:center;color:var(--slate);
background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 28px}

footer{background:var(--ink);color:#8E8A8D;text-align:center;padding:36px 24px 44px;font-size:12px}
footer p{margin:6px auto;max-width:70ch}

/* Freezing the animation alone strands 2 of 3 testimonials and 5 of 7 logos
   inside overflow:hidden with no way to reach them. Unwrap into a static
   centred row and drop the duplicate sets instead. */
@media(prefers-reduced-motion:reduce){
.logo-track,.quote-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
.logo-set,.quote-set{flex-wrap:wrap;justify-content:center;padding-right:0}
.logo-set:not(:first-child),.quote-set:not(:first-child){display:none}
.logo-mask,.quote-mask{-webkit-mask-image:none;mask-image:none}}

@media(max-width:960px){.stat-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.step-row{grid-template-columns:1fr}.step:nth-child(3){grid-column:auto}}
/* .hero is a class, so the section{} rule below never reached it and the hero
   kept 24px padding with a 38px clamp floor - the H1 wrapped mid-phrase on
   every phone, which broke the taper on the dominant device. */
@media(max-width:640px){section{padding:52px 18px}.formcard{padding:26px 20px}
.hero{padding:48px 18px 44px}.offer{font-size:clamp(30px,7.6vw,38px);max-width:none}
.stars{font-size:30px;letter-spacing:12px;text-indent:12px}
.bar{padding:12px 16px}.brand{height:34px}.quotes{padding-left:0;padding-right:0}
.quote{width:290px}.cal{height:820px}}
@media(max-width:420px){.stat-row{grid-template-columns:1fr}}
/* Must stay BELOW the 640px star size or the stars grow as the screen shrinks. */
@media(max-width:400px){.stars{font-size:28px;letter-spacing:10px;text-indent:10px}}