/* ==========================================================================
   Surface Scratch Repair — page-specific styles (a sub-page of Scratch &
   Gouge Repair, linked from its Surface Scratches card). Loads after
   styles.css and reuses its tokens, buttons, eyebrows, header, footer and
   contact form. Everything here is prefixed .ss-; the only unprefixed rules
   are the shared .sfr-ba slider styles, which every page that uses the
   slider defines for itself.
   ========================================================================== */

/* The comp runs its bands nearly edge to edge, like the other gelcoat and
   hull sub-pages: the card grid's 1760px frame, not .container. */
.ss-wide{
  max-width:1760px;
  margin-inline:auto;
  padding-inline:clamp(18px,2.6vw,44px);
}
.ss-eyebrow{
  color:var(--icon-blue);
  font-size:0.7188rem;
  letter-spacing:2px;
  margin-bottom:10px;
}
.ss-eyebrow i{background:var(--icon-blue);width:32px;}

/* ---------- Hero ----------
   One photo (ss-hero.jpg, "Same Boats. New Beginnings." baked in at its top
   right) covering the right of the band, feathered into the navy on its left.
   The copy is indented past the eyebrow's rule, as in the comp, and the trust
   row runs across a darker strip along the bottom. */
.ss-hero{
  --ss-indent:50px;                 /* eyebrow rule (36px) + its gap (14px) */
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 38%,#0B3A66 100%);
}
.ss-hero-img{
  position:absolute;top:0;right:0;
  width:64%;height:100%;
  object-fit:cover;
  object-position:right center;     /* the tagline lives at the right edge */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
}
.ss-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(0,22,46,.74) 0%,
    rgba(0,22,46,.52) 36%,
    rgba(0,22,46,0) 56%);
}
.ss-hero-waves{
  position:absolute;left:0;bottom:0;
  width:46%;height:48%;
  fill:none;
  stroke:rgba(94,205,250,.1);
  stroke-width:1.5;
  pointer-events:none;
}
.ss-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(34px,3.4vw,62px);
  padding-bottom:clamp(28px,2.8vw,50px);
}
.ss-hero-content{max-width:700px;padding-left:var(--ss-indent);}
.ss-hero-eyebrow{
  margin-left:calc(-1 * var(--ss-indent));
  margin-bottom:14px;
  font-size:0.75rem;
  letter-spacing:2.2px;
}
.ss-hero-eyebrow i{width:36px;}
.ss-hero h1{
  font-size:clamp(2rem,3.05vw,3.25rem);
  letter-spacing:-1.2px;
  line-height:1.04;
  color:#fff;
  margin-bottom:16px;
}
.ss-hero h1 .accent{color:var(--accent);}
.ss-hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(0.9375rem,1.05vw,1.0625rem);
  line-height:1.5;
  max-width:500px;
  margin-bottom:24px;
}
.ss-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.ss-trust-bar{
  position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(0,26,54,.8) 0%,rgba(0,20,42,.94) 100%);
  border-top:1px solid rgba(94,205,250,.14);
}
.ss-trust{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:14px 24px;
  padding-block:clamp(14px,1.3vw,20px);
  padding-left:calc(var(--pad) + var(--ss-indent));
}
.ss-trust li{display:flex;align-items:center;gap:12px;color:#fff;}
.ss-trust-icon{flex:none;display:flex;color:var(--accent);}
.ss-trust strong{display:block;font-family:var(--font-head);font-size:0.8438rem;line-height:1.25;}
.ss-trust small{display:block;font-size:0.75rem;line-height:1.3;color:rgba(255,255,255,.75);}

/* ---------- Intro: copy + four benefits | before/after slider ---------- */
.ss-intro{
  background:
    radial-gradient(ellipse at 12% 0%, rgba(94,205,250,.1), transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
}
.ss-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,3vw,56px);
  padding-block:clamp(26px,2.4vw,42px);
}
.ss-intro-copy{padding-left:clamp(0px,1.4vw,28px);}
.ss-intro h2{
  font-size:clamp(1.5rem,2vw,2.1875rem);
  letter-spacing:-.8px;
  line-height:1.12;
  margin-bottom:12px;
}
.ss-intro h2 .accent{color:var(--icon-blue);}
.ss-intro-copy > p{
  font-size:clamp(0.9063rem,1vw,1rem);
  line-height:1.6;
  color:var(--gray-text);
  max-width:680px;
}
.ss-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(20px,2vw,32px);
}
.ss-benefits li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.9vw,16px);
}
.ss-benefits li + li{border-left:1px solid #DCE8F3;}
.ss-benefit-icon{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.ss-benefits strong{font-family:var(--font-head);font-size:0.875rem;line-height:1.25;color:var(--navy);margin-bottom:6px;}
.ss-benefits small{font-size:0.7813rem;line-height:1.45;color:var(--gray-text);max-width:150px;}

/* ---------- Shared slider (script.js binds every .sfr-ba) ----------
   Each image is one half of the comp's pair plus its mirror, so at rest the
   seam sits on the handle and the frame matches the comp. */
.sfr-ba{
  position:relative;
  aspect-ratio:296/102;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(0,38,75,.6);
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.sfr-ba:focus-visible{outline:2px solid var(--icon-blue);outline-offset:3px;}
.sfr-ba-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.sfr-ba-after{clip-path:inset(0 0 0 50%);}
.sfr-ba-line{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.3);
  pointer-events:none;
}
.sfr-ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  pointer-events:none;
}
.sfr-ba-handle svg{display:block;}
.sfr-ba-tag{
  position:absolute;bottom:10px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:0.6875rem;
  letter-spacing:1.1px;
  padding:5px 20px;
  border-radius:5px;
  pointer-events:none;
}
.sfr-ba-tag-before{left:10px;background:rgba(0,22,46,.9);color:#fff;}
.sfr-ba-tag-after{right:10px;background:var(--icon-blue);color:#fff;}

/* The intro's single, larger slider. */
.ss-ba-lg{
  aspect-ratio:447/271;
  border-radius:12px;
  box-shadow:0 24px 44px -28px rgba(0,38,75,.6);
}
.ss-ba-lg .sfr-ba-handle{width:clamp(40px,3vw,52px);height:clamp(40px,3vw,52px);}
.ss-ba-lg .sfr-ba-tag{
  bottom:clamp(12px,1.2vw,20px);
  font-size:clamp(0.75rem,.85vw,0.875rem);
  padding:clamp(7px,.6vw,10px) clamp(22px,2.4vw,44px);
  border-radius:6px;
}
.ss-ba-lg .sfr-ba-tag-before{left:clamp(12px,1.2vw,20px);}
.ss-ba-lg .sfr-ba-tag-after{right:clamp(12px,1.2vw,20px);}

/* ---------- Process band ----------
   Worker photo bleeding off the left edge with a chevron on its trailing side
   (a thin accent rule follows the chevron), then copy and four step cards.
   The section's right padding reproduces .ss-wide's content edge. */
.ss-process{
  display:grid;
  grid-template-columns:clamp(260px,31%,640px) minmax(0,1fr);
  padding-right:max(clamp(18px,2.6vw,44px), calc((100% - 1760px) / 2 + clamp(18px,2.6vw,44px)));
  background:
    radial-gradient(ellipse at 85% 0%, rgba(28,148,220,.16), transparent 60%),
    linear-gradient(100deg,var(--navy) 0%,#062F5A 55%,var(--navy-2) 100%);
}
.ss-process-photo{
  position:relative;
  background:rgba(94,205,250,.85);
  clip-path:polygon(0 0, calc(100% - 44px) 0, 100% 47%, calc(100% - 34px) 100%, 0 100%);
}
.ss-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:35% 30%;
  clip-path:polygon(0 0, calc(100% - 46px) 0, calc(100% - 2px) 47%, calc(100% - 36px) 100%, 0 100%);
}
.ss-process-body{
  padding:clamp(28px,2.6vw,46px) 0 clamp(30px,2.8vw,48px) clamp(22px,2.6vw,50px);
}
.ss-process-eyebrow{
  color:rgba(255,255,255,.88);
  font-size:0.7188rem;
  letter-spacing:2.2px;
  margin-bottom:10px;
}
.ss-process h2{
  color:#fff;
  font-size:clamp(1.5rem,2vw,2.1875rem);
  letter-spacing:-.8px;
  margin-bottom:10px;
}
.ss-process h2 .accent{color:var(--accent);}
.ss-process-body > p{
  color:rgba(255,255,255,.88);
  font-size:clamp(0.875rem,.98vw,1rem);
  line-height:1.55;
  max-width:560px;
  margin-bottom:clamp(20px,2vw,30px);
}
.ss-steps{
  --step-gap:clamp(28px,2.6vw,48px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px var(--step-gap);
}
.ss-step{
  position:relative;
  padding:clamp(14px,1.1vw,20px) clamp(14px,1.1vw,20px) clamp(16px,1.3vw,22px);
  border:1px solid rgba(94,205,250,.2);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);
}
/* Arrow between cards, centred in the gap. */
.ss-step + .ss-step::before{
  content:"";
  position:absolute;
  left:calc(-.5 * var(--step-gap) - 12px);
  top:50%;
  width:22px;height:22px;
  margin-top:-11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.9;
}
.ss-step-top{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.ss-step-num{
  flex:none;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--icon-blue);
  box-shadow:0 0 0 4px rgba(28,148,220,.22);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.0625rem;
  display:flex;align-items:center;justify-content:center;
}
.ss-step-icon{display:flex;color:var(--accent);}
.ss-step h3{color:#fff;font-size:0.9688rem;letter-spacing:-.2px;margin-bottom:6px;}
.ss-step p{color:rgba(255,255,255,.8);font-size:0.8438rem;line-height:1.5;}

/* ---------- Before & after ---------- */
.ss-results{
  background:linear-gradient(180deg,var(--light-bg) 0%,#F8FBFE 100%);
}
.ss-results-inner{padding-block:clamp(24px,2.2vw,38px);}
.ss-results-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 40px;
  flex-wrap:wrap;
  margin-bottom:clamp(14px,1.4vw,22px);
  padding-inline:clamp(0px,1.4vw,28px);
}
.ss-results h2{
  font-size:clamp(1.4375rem,1.9vw,2.0625rem);
  letter-spacing:-.8px;
  line-height:1.12;
  margin-bottom:8px;
}
.ss-results-copy p{
  font-size:clamp(0.875rem,.98vw,0.9688rem);
  line-height:1.55;
  color:var(--gray-text);
  max-width:560px;
}
.ss-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,28px);
  padding-inline:clamp(0px,1.4vw,28px);
}

/* ---------- Related gelcoat services ---------- */
.ss-related{
  background:linear-gradient(180deg,#F8FBFE 0%,var(--light-bg) 100%);
  border-top:1px solid #E6EFF7;
}
.ss-related-inner{
  display:grid;
  grid-template-columns:minmax(0,38%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(20px,2vw,36px);
  row-gap:18px;
  padding-block:clamp(22px,2vw,36px);
}
.ss-related-copy{padding-left:clamp(0px,1.4vw,28px);}
.ss-related h2{
  font-size:clamp(1.375rem,1.75vw,1.9375rem);
  letter-spacing:-.7px;
  line-height:1.15;
  margin-bottom:10px;
}
.ss-related-copy p{
  font-size:clamp(0.875rem,.98vw,0.9688rem);
  line-height:1.55;
  color:var(--gray-text);
  max-width:560px;
}
.ss-related-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,.8vw,14px);
}
.ss-rel-card{
  display:flex;flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid #E6EFF7;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 26px -18px rgba(0,38,75,.5);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ss-rel-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,38,75,.55);}
.ss-rel-card:focus-visible{outline:2px solid var(--icon-blue);outline-offset:3px;}
.ss-rel-card img{width:100%;aspect-ratio:98/65;object-fit:cover;}
.ss-rel-body{display:block;padding:12px 12px 14px;}
.ss-rel-card h3{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:0.875rem;
  letter-spacing:-.2px;
  line-height:1.25;
  margin-bottom:6px;
}
.ss-rel-card h3 svg{flex:none;color:var(--icon-blue);}
.ss-rel-card small{display:block;font-size:0.7813rem;line-height:1.45;color:var(--gray-text);}
.ss-rel-help{
  align-items:center;justify-content:center;
  text-align:center;
  padding:16px 14px;
  background:linear-gradient(180deg,#EAF4FD 0%,#E2EEFB 100%);
  border-color:#DCEAF8;
}
.ss-rel-help-icon{
  width:46px;height:46px;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
  box-shadow:0 6px 14px -8px rgba(0,38,75,.45);
}
.ss-rel-help h3{display:block;font-size:0.9063rem;}
.ss-rel-help-arrow{color:var(--icon-blue);margin:2px 0 8px;}

/* ---------- Why choose us + FAQ ----------
   copy | checklist | FAQ, the FAQ set off by a rule. Questions use native
   <details>, so they work without script. */
.ss-why{background:#fff;border-top:1px solid #E6EFF7;}
.ss-why-inner{
  display:grid;
  grid-template-columns:minmax(0,28%) minmax(0,1fr) minmax(0,37%);
  align-items:center;
  column-gap:clamp(20px,2.6vw,48px);
  padding-block:clamp(22px,2.2vw,38px);
}
.ss-why-copy{padding-left:clamp(0px,1.4vw,28px);}
.ss-why h2{
  font-size:clamp(1.4375rem,1.8vw,1.9375rem);
  letter-spacing:-.7px;
  line-height:1.1;
  margin-bottom:10px;
}
.ss-why-copy p{font-size:0.875rem;line-height:1.55;color:var(--gray-text);}
.ss-checks{display:grid;gap:clamp(10px,.9vw,14px);}
.ss-checks li{display:flex;align-items:center;gap:12px;font-size:clamp(0.875rem,.95vw,0.9688rem);line-height:1.35;color:#2A4560;}
.ss-checks li::before{
  content:"";flex:none;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--icon-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/13px;
}
.ss-faq{
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(20px,2.6vw,48px);
  padding-right:clamp(0px,1.4vw,28px);
  border-left:1px solid #DCE7F1;
}
.ss-faq h2{font-size:clamp(1.1875rem,1.35vw,1.5rem);letter-spacing:-.4px;margin-bottom:12px;}
.ss-faq-list{display:grid;gap:8px;}
.ss-faq details{background:#fff;border:1px solid #DCE7F1;border-radius:6px;}
.ss-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 16px;
  font-size:0.875rem;
  font-weight:500;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}
.ss-faq summary::-webkit-details-marker{display:none;}
.ss-faq summary::after{
  content:"";flex:none;
  width:13px;height:13px;
  background:
    linear-gradient(var(--icon-blue),var(--icon-blue)) center/13px 2px no-repeat,
    linear-gradient(var(--icon-blue),var(--icon-blue)) center/2px 13px no-repeat;
  transition:transform .2s ease;
}
.ss-faq details[open] summary::after{transform:rotate(45deg);}
.ss-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.ss-faq details p{padding:0 16px 14px;font-size:0.875rem;line-height:1.6;color:var(--gray-text);}

/* ---------- Closing CTA band ----------
   ss-cta-bg.jpg is the comp's band with the copy painted out: bow on the
   left, skyline on the right. The copy starts just past the bow. */
.ss-cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;}
.ss-cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;
}
.ss-cta-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;flex-wrap:wrap;
  gap:18px clamp(24px,3vw,56px);
  padding-block:clamp(24px,2.2vw,40px);
  padding-left:max(var(--pad),24%);
  padding-right:var(--pad);
}
.ss-cta h2{color:#fff;font-size:clamp(1.375rem,1.9vw,2.0625rem);letter-spacing:-.6px;margin-bottom:6px;}
.ss-cta p{font-size:clamp(0.9063rem,1vw,1.0313rem);color:rgba(255,255,255,.9);}
.ss-cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ==========================================================================
   Responsive — widest first (see BUILDING-SERVICE-PAGES.md §7: equal
   specificity, so the later block wins).
   ========================================================================== */

@media (max-width:1680px){
  /* Related: the copy moves above the cards so all five keep their titles on
     one line (below ~1680 "Dock Rash & Scuffs" wraps beside the copy). */
  .ss-related-inner{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:1240px){
  /* Intro stacks: below here the benefit titles break onto a third line. */
  .ss-intro-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .ss-intro-media{max-width:760px;margin-left:clamp(0px,1.4vw,28px);}
  .ss-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-step:nth-child(3)::before{display:none;}
  /* Why: copy | checklist on top, the FAQ full width below. */
  .ss-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:24px;}
  .ss-faq{
    grid-column:1 / -1;
    border-left:0;border-top:1px solid #DCE7F1;
    padding:22px clamp(0px,1.4vw,28px) 0;
  }
}

@media (max-width:1100px){
  /* Related: the comp's thumbnails are small, so rather than blowing them up
     in tall cards, each card becomes a row — thumbnail left, text right. */
  .ss-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-rel-card{flex-direction:row;}
  .ss-rel-card img{flex:none;width:clamp(104px,30%,150px);height:auto;aspect-ratio:auto;align-self:stretch;}
  .ss-rel-body{align-self:center;}
  .ss-rel-help-item{grid-column:1 / -1;}
  .ss-rel-help{flex-direction:column;}
}

@media (max-width:1024px){
  .ss-hero-img{width:100%;-webkit-mask-image:none;mask-image:none;}
  .ss-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.74) 60%, rgba(0,22,46,.45) 100%);
  }
  .ss-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:clamp(24px,6vw,64px);}
  .ss-process{grid-template-columns:minmax(0,1fr);padding-right:0;}
  .ss-process-photo{clip-path:none;background:none;aspect-ratio:2.4/1;}
  .ss-process-photo img{clip-path:none;}
  .ss-process-body{padding-inline:var(--pad);}
  .ss-cta-bg{opacity:.45;}
  .ss-cta-inner{padding-left:var(--pad);}
}

@media (max-width:820px){
  .ss-why-inner{grid-template-columns:minmax(0,1fr);}
  .ss-why-copy{padding-left:0;}
  .ss-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .ss-hero{--ss-indent:0px;}
  .ss-hero-inner{padding-top:34px;padding-bottom:28px;}
  .ss-hero-eyebrow{font-size:0.6875rem;letter-spacing:1.6px;gap:10px;}
  .ss-hero-eyebrow i{width:24px;}
  .ss-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);letter-spacing:-.7px;}
  .ss-hero h1 br{display:none;}
  .ss-hero-sub{font-size:0.9063rem;margin-bottom:22px;}
  .ss-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.82) 55%, rgba(0,22,46,.72) 100%);
  }
  .ss-hero-actions,.ss-cta-actions{width:100%;gap:10px;}
  .ss-hero-actions .btn,.ss-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .ss-trust{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;}
  .ss-intro h2 br,.ss-why h2 br{display:none;}
  .ss-intro-copy{padding-left:0;}
  .ss-intro-media{margin-left:0;}
  .ss-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .ss-benefits li:nth-child(3){border-left:0;}
  .ss-steps{grid-template-columns:minmax(0,1fr);}
  .ss-step + .ss-step::before{display:none;}
  .ss-results-head{padding-inline:0;}
  .ss-results-head .btn{width:100%;justify-content:center;}
  .ss-ba-grid{grid-template-columns:minmax(0,1fr);padding-inline:0;max-width:520px;}
  .ss-ba-grid .sfr-ba{aspect-ratio:2.4/1;}
  .ss-related-copy{padding-left:0;}
  .ss-related-grid{grid-template-columns:minmax(0,1fr);}
  .ss-faq{padding-inline:0;}
  .ss-cta-bg{opacity:.3;}
}

@media (max-width:400px){
  .ss-trust{grid-template-columns:minmax(0,1fr);}
  .ss-benefits{grid-template-columns:minmax(0,1fr);}
  .ss-benefits li + li{border-left:0;}
}