/* CST BOFU landers - Sept 10 redesign to the approved comp.
   Content is unchanged from the Aug 4 revision. What changed is the visual
   system: a serif display face, a teal accent on the offer, cream proof bands
   instead of black, and the three how-it-works cards rendered as a coloured
   trio rather than white boxes.

   All twelve landers share this file and are structurally identical, so the
   redesign lands on every one of them from here. Two things are done in CSS
   that look like markup changes and are not, because the brief was design only:
     - the form heading and its pill sit outside the dark card. The card colour
       moved from .formcard to the <form> inside it, so the heading is left on
       the light section without moving a tag.
     - the pill reads above the heading. #step1 is a flex column and .formqual
       takes order:-1, rather than reordering the source. */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Lora:wght@400;500;600;700&display=swap");

:root{
  --ink:#0B0A0C;            /* hero, footer, third step card */
  --wine:#7E072E;
  --crimson:#B0003A;        /* the one accent that asks for a click */
  --hot:#D61246;
  --teal:#8EDCE6;           /* the offer, and only the offer */
  --cream:#F9F7F1;          /* proof bands: stats and testimonials */
  --paper:#FFFFFF;          /* the form section: near white, not cream */
  --mist:#F4F4F5;
  --line:#E6E1D8;
  --slate:#57534E;
  --snow:#fff;
  --box:#17161A;            /* the form card itself */
  --boxline:#33313A;
  --gold:#FFC107;
  --serif:Lora,Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.65 var(--sans);
color:var(--ink);background:var(--snow);
-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased}
/* Display type is the serif; running text stays on the sans. */
h1,h2,h3{margin:0 0 .5em;line-height:1.14;letter-spacing:-.01em;
font-family:var(--serif);font-weight:500}
section{padding:76px 24px}

/* The button is a rectangle now, and the scarcity line sits under it rather
   than inside the fill. It is positioned rather than moved in the markup, so
   the anchor still owns it; the margin below reserves the space it vacates. */
.cta{display:inline-block;position:relative;margin-bottom:30px;
background:var(--crimson);color:#fff;text-decoration:none;font-weight:600;
padding:15px 30px;border-radius:6px;font-size:16px;letter-spacing:.01em;
transition:background .15s ease}
.cta em{position:absolute;left:50%;top:100%;transform:translateX(-50%);
margin-top:9px;white-space:nowrap;font-style:normal;font-weight:500;font-size:12px;
letter-spacing:.01em;text-transform:none;color:#9A9499}
.cta:hover{background:var(--wine)}
/* Three landers have no scarcity line, so they should not reserve room for one. */
.cta:not(:has(em)){margin-bottom:0}
/* On the cream and white bands the caption needs a darker grey to stay legible. */
.steps .cta em{color:var(--slate)}

/* Measured off v5: the mark is 219x41 and the button 161x47, both inset 120px
   in a 1640 frame - that is the same 1400px container the cards use, not a
   fixed side padding. */
.bar{display:flex;align-items:center;justify-content:space-between;
padding:28px max(24px,calc((100% - 1400px) / 2));background:var(--ink)}
/* The mark, not its bounding box. assets/cst-logo-white.svg used to be a
   222x80 box whose artwork only painted a 40.7-unit band, so 49% of any height
   set here was transparent padding and the wordmark rendered at half size -
   which is why it read as tiny. The viewBox is now cropped to the painted band,
   so this height is the height of the mark. */
.brand{height:41px;width:auto}
.bar-cta{color:#fff;text-decoration:none;font-weight:600;font-size:15px;
border:1px solid rgba(255,255,255,.28);padding:11px 20px;border-radius:8px;
transition:border-color .15s ease}
.bar-cta:hover{border-color:rgba(255,255,255,.7)}

.hero{background:var(--ink);color:#fff;text-align:center;padding:60px 24px 40px}
.qual{margin:0 0 26px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:#D8D3D6;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
display:inline-block;padding:8px 18px;border-radius:999px;
line-height:1.5;text-wrap:balance;max-width:calc(100vw - 52px)}
/* The offer is the one serif moment that carries the page, so it is set larger
   and lighter than the old sans headline and the emphasis is colour, not weight.
   The 1000px cap stays: at 56px the longest authored line measures 964px, and a
   tighter cap split it mid-phrase on three of the landers. */
.offer{font-family:var(--serif);font-size:clamp(30px,4.6vw,52px);font-weight:500;
margin:0 auto 30px;max-width:1000px;letter-spacing:-.015em;line-height:1.16}
.offer b{font-weight:600;color:var(--teal)}
.offer span{display:block;text-wrap:balance}
.qual-stars{color:var(--gold);font-size:13px;letter-spacing:.16em;
margin-right:.5em;line-height:1}

.stars{color:var(--gold);font-size:44px;letter-spacing:20px;text-indent:20px;
margin:0 0 26px;line-height:1}

/* The logo strip is part of the hero block now, so it carries the dark ground
   and the marks are knocked back to light grey. brightness(0) flattens each
   mark to solid black first, so invert gives one even grey whatever the source
   artwork was - several of these are dark wordmarks and two are icon-only. */
.logos{padding:8px 24px 46px;background:var(--ink);text-align:center}
.logos p{margin:0 0 26px;font-size:13.5px;letter-spacing:.01em;color:#8E888D}
.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 70s linear infinite}
.logo-track:hover{animation-play-state:paused}
.logo-set{display:flex;gap:64px;padding-right:64px;flex:0 0 auto;align-items:center}
.logo-track img{height:30px;width:auto;max-width:150px;object-fit:contain;
flex:0 0 auto;opacity:.62;filter:grayscale(1) brightness(0) invert(1)}
.logo-track img[src*="pixelcarve"],.logo-track img[src*="gofleet"]{height:38px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* The form section reads light, with the heading on the paper and only the
   fields on the dark card. The faint diagonals echo the brand's line art at an
   opacity that never competes with the form. */
/* Paper that lifts slightly toward the top, with the brand's line art sweeping
   up out of the bottom-left corner. Evenly repeating diagonal stripes were the
   first attempt and were wrong: the comp has a few long arcs on one side, not a
   uniform hatch across the whole band. */
/* The comp puts the CST shield behind this section: the mark blown up far past
   the frame so only part of it shows on the left, at about 5% of the wine.
   Straight ruled lines were the wrong read of it. The geometry below is the
   shield taken from assets/cst-logo-white.svg, not redrawn, so it stays the
   real mark. Ground is pure white, matching the reference exactly. */
.formwrap{background:#fff;padding:70px 24px 76px;position:relative;overflow:hidden}
.formwrap::before{content:"";position:absolute;left:0;top:50%;
transform:translate(-38%,-50%);width:min(150vw,1900px);aspect-ratio:54/70;
pointer-events:none;background-repeat:no-repeat;background-size:contain;
background-position:center;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-8%20-6%2054%2070'%3E%3Cg%20fill='%239B8224'%20fill-opacity='0.0172'%20stroke='%239B8224'%20stroke-opacity='0.066'%20stroke-width='0.16'%3E%3Cpath%20d='M31.3073%2034.8471C33.6943%2032.9959%2035.946%2030.9932%2038.2843%2029.088C38.2464%2031.0853%2038.2085%2033.088%2038.0678%2035.0853C37.7376%2041.1637%2035.5779%2047.2422%2031.4751%2051.7943C27.9785%2055.5453%2023.7565%2058.5819%2019.0908%2060.7145C16.0434%2059.4317%2013.337%2057.521%2010.6415%2055.6319C7.82149%2056.9851%205.03935%2058.4195%202.2085%2059.7456C2.46831%2059.5074%202.98793%2059.0311%203.24774%2058.7984C6.77142%2055.7781%2010.3276%2052.7848%2013.8458%2049.7537C15.6429%2050.7551%2017.2721%2052.0271%2019.0908%2053.0122C24.4873%2050.4249%2029.0556%2045.5589%2030.4521%2039.6428C30.8797%2038.0677%2030.6036%2036.3356%2031.3127%2034.8471'/%3E%3Cpath%20d='M4.31388%2022.0732C9.67788%2020.222%2015.4316%2019.9568%2021.0554%2020.13C25.0771%2020.3357%2029.0825%2020.8661%2032.9742%2021.9324C31.5777%2022.7985%2030.1813%2023.6537%2028.7794%2024.5197C26.7929%2025.5806%2025.0338%2027.2207%2022.8308%2027.7673C17.8836%2027.6753%2012.8118%2027.7295%208.09195%2029.3966C7.37747%2029.5427%207.3883%2030.3167%207.3017%2030.8851C6.91198%2034.1111%207.25298%2037.3749%207.91333%2040.5468C16.3193%2035.6862%2024.7144%2030.8093%2033.1258%2025.9541C36.6332%2024.0109%2040.0108%2021.8458%2043.5777%2020.0055C42.4735%2021.0285%2041.3261%2022.0082%2040.1786%2022.9879C35.9729%2026.5387%2031.7943%2030.1219%2027.594%2033.6834C21.824%2038.6036%2016.0378%2043.5021%2010.2733%2048.4223C9.05542%2049.4615%207.82132%2050.4954%206.60346%2051.5346C4.62781%2048.6983%202.67923%2045.7809%201.55339%2042.4899C0.400479%2039.107%20-0.0433639%2035.5129%20-6.20959e-05%2031.9514C0.173145%2029.2504%200.18397%2026.5116%200.671115%2023.8485C1.69953%2022.95%203.0473%2022.5332%204.30846%2022.0786'/%3E%3C/g%3E%3C/svg%3E")}
.formcard{max-width:560px;margin:0 auto;position:relative;
background:none;border:0;border-radius:0;padding:0;color:var(--ink)}
#step1,#step2{display:flex;flex-direction:column}
/* display:flex above beats the UA [hidden] rule, which shipped the second-step
   form visible on page load. It has to be restated at higher specificity. */
#step1[hidden],#step2[hidden]{display:none}
.formcard h2{font-size:clamp(28px,3.6vw,38px);text-align:center;color:var(--ink);
margin:0 0 10px}
/* order:-1 lifts the qualifier above the heading without touching the source. */
.formqual{order:-1;margin:0 auto 16px;text-align:center;font-size:11.5px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:7px 16px}
.formsub{margin:0 0 26px;color:var(--slate);text-align:center;font-size:15.5px}
/* The card colour lives on the form, which is what leaves the heading outside it. */
.formcard form{background:var(--box);border:1px solid var(--boxline);
border-radius:18px;padding:30px 28px;color:#fff;
box-shadow:0 20px 50px rgba(11,10,12,.18)}
form label{display:block;margin-bottom:15px;font-weight:500;font-size:13.5px;color:#E6E3E8}
form label .hint{display:block;margin-top:4px;font-weight:400;font-size:12.5px;
line-height:1.45;color:#918B95}
form label .fielderr{display:block;margin-top:7px;font-weight:600;font-size:13px;
line-height:1.4;color:#FDA4AF}
.fielderr[hidden]{display:none}
form input[aria-invalid="true"]{border-color:#FF4D6D}
form input,form select,form textarea{width:100%;margin-top:7px;padding:12px 13px;
border:1px solid #E2DFE4;border-radius:8px;font:inherit;font-size:15.5px;
font-weight:400;background:#fff;color:var(--ink)}
form input::placeholder{color:#A9A3AC}
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}
form button{width:100%;margin-top:12px;background:var(--crimson);color:#fff;border:0;
padding:15px;border-radius:6px;font-family:inherit;font-size:16px;font-weight:600;
cursor:pointer;transition:background .15s ease}
form button:hover{background:var(--wine)}
form button:disabled{opacity:.6;cursor:default}
form button.ghost{background:none;border:1px solid #6E6A74;color:#B6B2BA;
font-size:14px;font-weight:500;padding:13px;margin-top:8px}
form button.ghost:hover{background:rgba(255,255,255,.06)}
.fineprint{margin:14px 0 0;font-size:12px;color:#8E8892;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}

/* The proof numbers read as a light band between two dark blocks now, which is
   what stops the page being black from the hero all the way to the steps. */
.stats{background:var(--cream);color:var(--ink);padding:60px 24px}
.stat-row{max-width:1080px;margin:0 auto;display:grid;
grid-template-columns:repeat(4,1fr);gap:36px;text-align:center}
.stat-v{font-family:var(--serif);font-size:clamp(28px,4.2vw,46px);font-weight:500;
color:var(--ink);letter-spacing:-.02em}
.stat-l{font-size:14px;font-weight:400;color:var(--slate);margin:10px auto 0;
line-height:1.45;max-width:19ch}

/* Three across and colour-coded, so the sequence reads as a progression rather
   than three equal boxes. The numeral sits in a squared chip, not a circle. */
.steps{text-align:center;padding-bottom:84px}
.steps h2{font-size:clamp(28px,3.8vw,40px);margin-bottom:44px}
/* Measured off the comp: three equal cards, 451x397 in a 1640 frame, 20px
   apart, each stepped 48px lower than the one before. The stagger is a
   transform, not a margin, because a margin would eat into the grid row and
   leave the three cards different heights - the comp has them identical. */
.step-row{max-width:1400px;margin:0 auto 46px;display:grid;
grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;align-items:stretch;
padding-bottom:96px}
.step{border:0;border-radius:16px;padding:36px 36px 38px;color:#fff;
display:flex;flex-direction:column}
.step:nth-child(1){background:linear-gradient(160deg,#B4023B 0%,#95042F 100%)}
.step:nth-child(2){background:linear-gradient(160deg,#73082A 0%,#2A0F19 62%,#160F14 100%)}
.step:nth-child(3){background:linear-gradient(160deg,#171519 0%,#0E0C06 100%)}
/* The comp's card is 397 tall at 451 wide. Grid stretch keeps the three
   equal; this floor holds that proportion when the copy is short, and
   longer copy on other landers simply grows past it. */
@media(min-width:1001px){.step{min-height:397px}}
.step:nth-child(2){transform:translateY(48px)}
.step:nth-child(3){transform:translateY(96px)}
/* 48px chip, 36px inset, 34px clear before the heading: measured off the comp. */
.step-n{width:48px;height:48px;border-radius:11px;background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22);color:#fff;
display:grid;place-items:center;font-weight:600;margin-bottom:34px;font-size:18px}
.step h3{font-family:var(--serif);font-size:34px;font-weight:500;color:#fff;
margin:0 0 16px;line-height:1.35}
.step p{margin:0;color:rgba(255,255,255,.78);font-size:17px;line-height:1.65}

.quotes{background:var(--cream);padding-left:0;padding-right:0;padding-bottom:84px}
.quotes h2{text-align:center;font-size:clamp(28px,3.8vw,40px);margin-bottom:44px}
.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:14px;padding:30px 28px 26px;
border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,10,12,.04);
display:flex;flex-direction:column;width:360px;flex:0 0 auto}
.quote blockquote{margin:0 0 22px;font-size:14.5px;line-height:1.65;color:#3F3B44;flex:1}
/* The mark is the accent at display size, which is the comp's one flourish here. */
.quote blockquote::before{content:"\201C";display:block;font-family:var(--serif);
font-size:56px;line-height:.72;color:var(--crimson);margin-bottom:8px}
.quote figcaption{display:flex;align-items:center;gap:12px;padding-top:16px}
.quote figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center top}
.quote figcaption span{display:flex;flex-direction:column;font-size:12.5px;color:var(--crimson)}
.quote figcaption strong{color:var(--ink);font-size:14px;font-weight:600}

.faq{padding-top:78px;padding-bottom:84px}
.faq h2{text-align:center;font-size:clamp(28px,3.8vw,40px);margin-bottom:40px}
.faq-list{max-width:800px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:0}
summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;padding:18px 0;
position:relative;padding-right:34px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:16px;
color:var(--crimson);font-weight:400;font-size:20px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 20px;color:var(--slate);max-width:74ch;font-size:15px}

.footcta{background:var(--ink);color:#fff;text-align:center;padding:84px 24px 76px}
.footcta h2{font-family:var(--serif);font-size:clamp(26px,3.8vw,40px);font-weight:500;
max-width:820px;margin:0 auto 32px;line-height:1.2}
.footcta h2 b{font-weight:600;color:var(--teal)}

.ty{background:var(--ink);color:#fff;text-align:center;padding:64px 24px 48px}
.ty h1{font-family:var(--serif);font-size:clamp(32px,5vw,54px);font-weight:500}
.tysub{max-width:640px;margin:0 auto 20px;color:#D6D2D8;font-size:17px}
.tysub strong{color:#fff}
.calwrap{padding:48px 24px 72px;background:var(--paper)}
.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:#807A80;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}
.cta,.bar-cta,form button{transition:none}}

@media(max-width:1000px){.step-row{grid-template-columns:1fr;max-width:620px;padding-bottom:0}
.step:nth-child(2),.step:nth-child(3){transform:none}}
@media(max-width:960px){.stat-row{grid-template-columns:repeat(2,1fr);gap:30px}}
@media(max-width:640px){section{padding:52px 18px}
.formwrap{padding:52px 18px 58px}.formcard form{padding:24px 20px}
.hero{padding:46px 18px 34px}
.bar{padding:14px 16px}.offer{font-size:clamp(30px,7.4vw,38px);max-width:none}
.stars{font-size:30px;letter-spacing:12px;text-indent:12px}
.bar{padding:14px 16px}.brand{height:30px}.bar-cta{font-size:13px;padding:9px 14px}.quotes{padding-left:0;padding-right:0}
.logo-set{gap:44px;padding-right:44px}
.cal{height:820px}}
/* Stepped rather than sliding at phone width: the card is nearly as wide as the
   screen, so a continuous slide can never hold a whole card on screen. This
   advances one card, holds it centred for 4.8s, then moves on. Nine steps of
   1/18 of the track land exactly on -50%, the same seamless loop point the
   desktop marquee uses. */
@media(max-width:640px){
.quote{width:calc(100vw - 32px);max-width:none}
.quote-set{gap:16px;padding-right:16px}
.quote-mask{padding-left:16px}}
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
.quote-track{animation:quote-step 54s infinite}}
@keyframes quote-step{
0%,8.889%{transform:translateX(0)}
11.111%,20%{transform:translateX(-5.556%)}
22.222%,31.111%{transform:translateX(-11.111%)}
33.333%,42.222%{transform:translateX(-16.667%)}
44.444%,53.333%{transform:translateX(-22.222%)}
55.556%,64.444%{transform:translateX(-27.778%)}
66.667%,75.556%{transform:translateX(-33.333%)}
77.778%,86.667%{transform:translateX(-38.889%)}
88.889%,97.778%{transform:translateX(-44.444%)}
100%{transform:translateX(-50%)}}
@media(max-width:420px){.stat-row{grid-template-columns:1fr}}
@media(max-width:400px){.stars{font-size:28px;letter-spacing:10px;text-indent:10px}}