/**
* Conversion pages — /for-gardeners and /become-a-licensee.
*
* These two pages have one job each and they are the only pages on the site allowed to
* break the SP2024 template's rhythm. Everything here is scoped under .sp-offer so the
* rest of the site is untouched, and everything is built from the existing brand values
* rather than a new palette:
*
* #3B462E dark green surfaces, headings
* #577038 mid green secondary text on tint, borders
* #84F000 lime the single action colour — used for CTAs and nothing else
* #F4F8EF tint alternating band background
*
* The discipline that matters most on both pages: lime means "click this". It is never
* used for decoration, so on any given screen the eye has exactly one place to go.
*/
.sp-offer {
--sp-dark: #3B462E;
--sp-mid: #577038;
--sp-lime: #84F000;
--sp-tint: #F4F8EF;
--sp-ink: #141417;
--sp-muted: #6b7280;
--sp-line: #e3e8dd;
--sp-radius: 14px;
--sp-shadow: 0 18px 40px rgba(59, 70, 46, .10);
color: var(--sp-ink);
font-family: 'Josefin Sans', sans-serif;
}
/* ---------------------------------------------------------------------------
Header.
header-2 (.main-header.style-two) is position:absolute, because on a licensee
page it overlays a photographic hero. These pages open on a solid dark panel
instead, so the header is returned to normal flow and given the same dark
surface — otherwise the nav sits on top of the headline and the dark nav text
lands on dark green.
Applied via bodyClass rather than an ancestor of .sp-offer, because the header
is rendered outside the page content.
--------------------------------------------------------------------------- */
.sp-offer-page .main-header.style-two { position: relative; }
.sp-offer-page .main-header.style-two .header-lower { background: #3B462E; }
.sp-offer-page .main-header.style-two .main-menu .navigation > li > a { color: #fff; }
.sp-offer-page .main-header.style-two .main-menu .navigation > li:hover > a,
.sp-offer-page .main-header.style-two .main-menu .navigation > li.current > a { color: #84F000; }
/* The dark logo is unreadable on the dark bar; the white one ships already. */
.sp-offer-page .main-header.style-two .header-lower .logo img { content: url("../images/logo-white.webp"); }
/* The nav CTA is the page's own offer on these pages, so it gets the action colour. */
.sp-offer-page .main-header.style-two .btn-box .theme-btn.btn-one {
background: #84F000;
color: #3B462E;
border-color: #84F000;
}
.sp-offer-page .main-header.style-two .btn-box .theme-btn.btn-one:hover {
background: transparent;
color: #84F000;
}
/* ---------------------------------------------------------------------------
Bands. Every section is one of three surfaces, alternating down the page so
the reader always knows a new idea has started.
--------------------------------------------------------------------------- */
.sp-offer .sp-band {
position: relative;
padding: 80px 0;
}
.sp-offer .sp-band--tint { background: var(--sp-tint); }
.sp-offer .sp-band--dark { background: var(--sp-dark); color: #fff; }
.sp-offer .sp-band--tight { padding: 52px 0; }
.sp-offer .sp-band--dark h2,
.sp-offer .sp-band--dark h3,
.sp-offer .sp-band--dark h4 { color: #fff; }
.sp-offer .sp-wrap {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.sp-offer .sp-wrap--narrow { max-width: 820px; }
/* ---------------------------------------------------------------------------
Type. Oswald for anything that has to be read at a glance; the headline sizes
are deliberately larger than the rest of the site — this is a sales page and
the first line has to win on its own.
--------------------------------------------------------------------------- */
.sp-offer h1,
.sp-offer h2,
.sp-offer h3,
.sp-offer .sp-display {
font-family: 'Oswald', sans-serif;
font-weight: 600;
color: var(--sp-dark);
letter-spacing: -.01em;
}
/* text-wrap:balance keeps a place name from being orphaned onto its own line when
the manual
and the natural wrap disagree — "Cardiff / North" reads badly and
the area name is the whole point of the headline. Ignored by older browsers, which
simply get the manual break. */
.sp-offer h1 { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; margin: 0 0 22px; text-wrap: balance; }
.sp-offer h2 { font-size: clamp(27px, 3.6vw, 44px); line-height: 1.14; margin: 0 0 20px; text-wrap: balance; }
.sp-offer h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; margin: 0 0 12px; }
.sp-offer p { font-size: 17px; line-height: 1.68; margin: 0 0 18px; }
.sp-offer .sp-lead { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; }
.sp-offer .sp-small { font-size: 14px; color: var(--sp-muted); }
.sp-offer .sp-band--dark .sp-small { color: rgba(255, 255, 255, .62); }
.sp-offer .sp-centre { text-align: center; }
/* An eyebrow above a heading — the section's job in three words. */
.sp-offer .sp-eyebrow {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sp-mid);
margin-bottom: 14px;
}
.sp-offer .sp-band--dark .sp-eyebrow { color: var(--sp-lime); }
.sp-offer .sp-hl { color: var(--sp-lime); }
.sp-offer .sp-strike { text-decoration: line-through; opacity: .55; }
/* ---------------------------------------------------------------------------
Hero.
--------------------------------------------------------------------------- */
.sp-offer .sp-hero {
position: relative;
background: var(--sp-dark);
color: #fff;
padding: 74px 0 68px;
overflow: hidden;
}
/* A single soft lime glow behind the headline. Enough to stop a flat dark slab
reading as a 2014 template, cheap enough to cost nothing. */
.sp-offer .sp-hero::before {
content: "";
position: absolute;
top: -220px;
right: -160px;
width: 620px;
height: 620px;
background: radial-gradient(circle, rgba(132, 240, 0, .17) 0%, rgba(132, 240, 0, 0) 68%);
pointer-events: none;
}
.sp-offer .sp-hero > * { position: relative; }
.sp-offer .sp-hero h1 { color: #fff; }
.sp-offer .sp-hero .sp-lead { color: rgba(255, 255, 255, .82); max-width: 60ch; }
/* ---------------------------------------------------------------------------
Status pill — the area's live state, straight from the database.
--------------------------------------------------------------------------- */
.sp-offer .sp-pill {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 16px 8px 13px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
margin-bottom: 22px;
border: 1px solid transparent;
}
.sp-offer .sp-pill::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px rgba(132, 240, 0, .18);
}
.sp-offer .sp-pill--open {
background: rgba(132, 240, 0, .13);
border-color: rgba(132, 240, 0, .38);
color: var(--sp-lime);
}
.sp-offer .sp-pill--warn {
background: rgba(255, 176, 32, .14);
border-color: rgba(255, 176, 32, .4);
color: #ffb020;
}
.sp-offer .sp-pill--closed {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .24);
color: rgba(255, 255, 255, .75);
}
.sp-offer .sp-pill--closed::before { box-shadow: none; }
/* ---------------------------------------------------------------------------
Buttons. Lime is the only action colour on these pages.
--------------------------------------------------------------------------- */
.sp-offer .sp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--sp-lime);
color: var(--sp-dark) !important;
font-family: 'Oswald', sans-serif;
font-size: 19px;
font-weight: 600;
letter-spacing: .01em;
padding: 19px 38px;
border: 0;
border-radius: 10px;
cursor: pointer;
text-align: center;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
box-shadow: 0 10px 26px rgba(132, 240, 0, .28);
}
.sp-offer .sp-cta:hover {
background: #93ff10;
color: var(--sp-dark) !important;
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(132, 240, 0, .36);
}
.sp-offer .sp-cta:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
.sp-offer .sp-cta--ghost {
background: transparent;
color: #fff !important;
border: 2px solid rgba(255, 255, 255, .38);
box-shadow: none;
}
.sp-offer .sp-cta--ghost:hover {
background: rgba(255, 255, 255, .08);
color: #fff !important;
box-shadow: none;
}
/* Reassurance directly under a button, where the hesitation actually happens. */
.sp-offer .sp-cta-note {
font-size: 14.5px;
margin: 14px 0 0;
color: rgba(255, 255, 255, .7);
}
.sp-offer .sp-band .sp-cta-note { color: var(--sp-muted); }
.sp-offer .sp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* ---------------------------------------------------------------------------
Proof strip under the hero.
--------------------------------------------------------------------------- */
.sp-offer .sp-proof {
display: flex;
flex-wrap: wrap;
gap: 14px 34px;
margin-top: 38px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.sp-offer .sp-proof li {
list-style: none;
font-size: 15px;
color: rgba(255, 255, 255, .8);
display: flex;
align-items: baseline;
gap: 9px;
}
.sp-offer .sp-proof li::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sp-lime);
flex: none;
}
/* ---------------------------------------------------------------------------
Stat tiles — the arithmetic, made unmissable.
--------------------------------------------------------------------------- */
.sp-offer .sp-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 18px;
}
.sp-offer .sp-stat {
background: #fff;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
padding: 30px 26px;
box-shadow: var(--sp-shadow);
}
.sp-offer .sp-band--dark .sp-stat {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .13);
box-shadow: none;
}
.sp-offer .sp-stat b {
display: block;
font-family: 'Oswald', sans-serif;
font-size: clamp(34px, 4.6vw, 48px);
line-height: 1;
font-weight: 600;
color: var(--sp-dark);
margin-bottom: 10px;
}
.sp-offer .sp-band--dark .sp-stat b { color: var(--sp-lime); }
.sp-offer .sp-stat span { display: block; font-size: 15.5px; line-height: 1.5; color: var(--sp-muted); }
.sp-offer .sp-band--dark .sp-stat span { color: rgba(255, 255, 255, .72); }
/* ---------------------------------------------------------------------------
Before / after. The single most persuasive element on the listing page:
the reader sees their own listing as it is, and as it would be.
--------------------------------------------------------------------------- */
.sp-offer .sp-vs {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 22px;
}
.sp-offer .sp-vs-arrow {
align-self: center;
font-size: 30px;
color: var(--sp-mid);
opacity: .5;
}
.sp-offer .sp-vs-col > h4 {
font-family: 'Oswald', sans-serif;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sp-muted);
margin: 0 0 12px;
}
.sp-offer .sp-vs-col--after > h4 { color: var(--sp-mid); }
/* The card itself, drawn to match the real directory listing exactly. */
.sp-offer .sp-card {
position: relative;
border-radius: var(--sp-radius);
padding: 28px 30px;
height: 100%;
background: #fff;
border: 1px solid var(--sp-line);
}
.sp-offer .sp-card--free {
border-style: dashed;
background: #fbfcfa;
}
.sp-offer .sp-card--featured {
background: var(--sp-dark);
border-color: var(--sp-dark);
box-shadow: 0 20px 44px rgba(59, 70, 46, .26);
}
.sp-offer .sp-card-tag {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sp-lime);
margin-bottom: 8px;
}
.sp-offer .sp-card-name {
font-family: 'Oswald', sans-serif;
font-size: 23px;
font-weight: 500;
line-height: 1.25;
margin: 0 0 6px;
color: var(--sp-dark);
word-break: break-word;
}
.sp-offer .sp-card--featured .sp-card-name { color: #fff; }
.sp-offer .sp-card-line {
font-size: 16px;
margin: 0 0 4px;
color: #fff;
display: flex;
align-items: center;
gap: 9px;
}
.sp-offer .sp-card-line i { color: var(--sp-lime); font-size: 14px; width: 16px; }
.sp-offer .sp-card-note { margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--sp-muted); }
.sp-offer .sp-card--featured .sp-card-note { color: rgba(255, 255, 255, .66); }
.sp-offer .sp-card-empty {
margin: 10px 0 0;
font-size: 14.5px;
line-height: 1.55;
color: #9aa295;
font-style: italic;
}
/* ---------------------------------------------------------------------------
Slot meter — a hard cap of featured places per area, drawn honestly.
--------------------------------------------------------------------------- */
.sp-offer .sp-slots {
display: flex;
gap: 10px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.sp-offer .sp-slot {
flex: 1 1 0;
min-width: 0;
border-radius: 9px;
padding: 14px 12px;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 13px;
letter-spacing: .07em;
text-transform: uppercase;
border: 2px solid var(--sp-line);
background: #fff;
color: var(--sp-muted);
}
.sp-offer .sp-slot--taken {
background: var(--sp-dark);
border-color: var(--sp-dark);
color: rgba(255, 255, 255, .7);
}
.sp-offer .sp-slot--open {
border-color: var(--sp-lime);
background: rgba(132, 240, 0, .1);
color: var(--sp-dark);
font-weight: 600;
}
/* ---------------------------------------------------------------------------
Comparison table — what it costs to be found / to start a branded business.
--------------------------------------------------------------------------- */
.sp-offer .sp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-offer .sp-table {
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border-radius: var(--sp-radius);
overflow: hidden;
box-shadow: var(--sp-shadow);
}
.sp-offer .sp-table th,
.sp-offer .sp-table td {
padding: 17px 20px;
text-align: left;
font-size: 16px;
border-bottom: 1px solid var(--sp-line);
vertical-align: middle;
}
.sp-offer .sp-table thead th {
font-family: 'Oswald', sans-serif;
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: var(--sp-mid);
border-bottom: 0;
white-space: nowrap;
}
.sp-offer .sp-table tbody tr:last-child td { border-bottom: 0; }
.sp-offer .sp-table td:first-child { font-weight: 600; color: var(--sp-dark); }
.sp-offer .sp-table tr.is-us td {
background: rgba(132, 240, 0, .12);
font-weight: 700;
color: var(--sp-dark);
border-bottom-color: rgba(132, 240, 0, .3);
}
.sp-offer .sp-table tr.is-us td:first-child { box-shadow: inset 5px 0 0 var(--sp-lime); }
/* ---------------------------------------------------------------------------
Value stack. Each line carries what the piece would cost separately, then the
total is struck through and the real price stated underneath.
--------------------------------------------------------------------------- */
.sp-offer .sp-stack {
list-style: none;
margin: 0 0 26px;
padding: 0;
background: #fff;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
box-shadow: var(--sp-shadow);
overflow: hidden;
}
.sp-offer .sp-stack li {
display: flex;
gap: 18px;
align-items: baseline;
justify-content: space-between;
padding: 17px 26px;
border-bottom: 1px solid var(--sp-line);
font-size: 16.5px;
}
.sp-offer .sp-stack li:last-child { border-bottom: 0; }
.sp-offer .sp-stack li strong { color: var(--sp-dark); font-weight: 600; }
.sp-offer .sp-stack li span {
flex: none;
font-family: 'Oswald', sans-serif;
color: var(--sp-muted);
white-space: nowrap;
}
.sp-offer .sp-stack li.is-total {
background: var(--sp-tint);
font-size: 18px;
}
.sp-offer .sp-stack li.is-total span { color: var(--sp-dark); font-size: 21px; }
/* ---------------------------------------------------------------------------
Price card.
The struck-through usual price has to be unmistakably struck and unmistakably
NOT what the reader pays. Read cold, "£197 now, £997 later" lands as a threat
of a future charge to them — so the usual price is shown first, crossed out and
greyed, the founding price is shown second at full size in the action colour,
and a locked-forever line closes it off. The order matters: anchor, offer,
reassurance, in that sequence.
--------------------------------------------------------------------------- */
.sp-offer .sp-was {
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sp-offer .sp-was-label {
display: block;
font-family: 'Oswald', sans-serif;
font-size: 12.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .5);
margin-bottom: 10px;
}
.sp-offer .sp-was-figure {
display: block;
font-family: 'Oswald', sans-serif;
font-size: clamp(24px, 3.4vw, 32px);
line-height: 1.24;
font-weight: 500;
color: rgba(255, 255, 255, .58);
text-decoration: line-through;
text-decoration-thickness: 3px;
text-decoration-color: rgba(255, 106, 106, .85);
}
.sp-offer .sp-was-figure small {
display: block;
font-size: clamp(16px, 2.1vw, 20px);
font-weight: 400;
}
.sp-offer .sp-now-label {
display: block;
font-family: 'Oswald', sans-serif;
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sp-lime);
margin-bottom: 6px;
}
/* The promise that defuses the whole objection. Boxed so it reads as a term of
the deal rather than as marketing padding. */
.sp-offer .sp-lock {
margin-top: 22px;
padding: 14px 18px;
border: 1px solid rgba(132, 240, 0, .35);
background: rgba(132, 240, 0, .08);
border-radius: 10px;
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, .88);
}
.sp-offer .sp-lock strong { color: var(--sp-lime); }
/* The price itself. */
.sp-offer .sp-price {
text-align: center;
padding: 34px 26px;
background: var(--sp-dark);
border-radius: var(--sp-radius);
color: #fff;
}
.sp-offer .sp-price b {
display: block;
font-family: 'Oswald', sans-serif;
font-size: clamp(48px, 8vw, 76px);
line-height: 1;
font-weight: 600;
color: var(--sp-lime);
}
.sp-offer .sp-price em { display: block; font-style: normal; font-size: 17px; color: rgba(255, 255, 255, .76); margin-top: 10px; }
/* ---------------------------------------------------------------------------
Founder block. The whole offer rests on him being a real person.
--------------------------------------------------------------------------- */
.sp-offer .sp-founder {
display: grid;
grid-template-columns: 190px 1fr;
gap: 34px;
align-items: center;
}
.sp-offer .sp-founder-photo {
width: 190px;
height: 190px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(132, 240, 0, .3);
}
/* Placeholder ring for when there is no photo in place yet. */
.sp-offer .sp-founder-photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .06);
border-style: dashed;
color: rgba(255, 255, 255, .5);
font-size: 13px;
text-align: center;
padding: 20px;
line-height: 1.5;
}
.sp-offer .sp-founder blockquote {
margin: 0;
font-size: clamp(19px, 2.3vw, 24px);
line-height: 1.52;
color: #fff;
font-weight: 300;
}
.sp-offer .sp-founder cite {
display: block;
margin-top: 20px;
font-style: normal;
font-family: 'Oswald', sans-serif;
font-size: 16px;
color: var(--sp-lime);
}
.sp-offer .sp-founder cite small { display: block; color: rgba(255, 255, 255, .6); font-size: 14px; margin-top: 3px; }
/* ---------------------------------------------------------------------------
Product screenshots. The licence page's job is demonstration, not description.
--------------------------------------------------------------------------- */
.sp-offer .sp-shots {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 26px;
}
.sp-offer .sp-shot {
background: #fff;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
overflow: hidden;
box-shadow: var(--sp-shadow);
display: flex;
flex-direction: column;
}
.sp-offer .sp-shot--wide { grid-column: 1 / -1; }
/* Browser chrome, so a screenshot reads as a real screen and not a graphic. */
.sp-offer .sp-shot-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 11px 14px;
background: var(--sp-tint);
border-bottom: 1px solid var(--sp-line);
}
.sp-offer .sp-shot-bar i {
width: 10px;
height: 10px;
border-radius: 50%;
background: #d5dccb;
flex: none;
}
.sp-offer .sp-shot-bar span {
margin-left: 8px;
font-size: 12.5px;
color: var(--sp-muted);
font-family: 'Oswald', sans-serif;
letter-spacing: .04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sp-offer .sp-shot img { display: block; width: 100%; height: auto; }
.sp-offer .sp-shot-cap { padding: 22px 26px 26px; }
.sp-offer .sp-shot-cap h3 { margin-bottom: 8px; font-size: 20px; }
.sp-offer .sp-shot-cap p { margin: 0; font-size: 15.5px; color: var(--sp-muted); line-height: 1.6; }
/* Empty frame for a screenshot or video that is not recorded yet. */
.sp-offer .sp-shot-todo {
display: flex;
align-items: center;
justify-content: center;
min-height: 230px;
background: repeating-linear-gradient(45deg, #f7f9f4, #f7f9f4 12px, #f1f4ec 12px, #f1f4ec 24px);
color: var(--sp-muted);
font-size: 14.5px;
text-align: center;
padding: 30px;
line-height: 1.6;
}
/* ---------------------------------------------------------------------------
Numbered steps — what actually happens next, with timings.
--------------------------------------------------------------------------- */
.sp-offer .sp-steps { counter-reset: sp-step; list-style: none; margin: 0; padding: 0; }
.sp-offer .sp-steps li {
position: relative;
counter-increment: sp-step;
padding: 0 0 30px 74px;
border-left: 2px solid var(--sp-line);
margin-left: 24px;
}
.sp-offer .sp-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.sp-offer .sp-steps li::before {
content: counter(sp-step);
position: absolute;
left: -25px;
top: -4px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--sp-lime);
color: var(--sp-dark);
font-family: 'Oswald', sans-serif;
font-size: 21px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.sp-offer .sp-steps h3 { margin-bottom: 6px; font-size: 21px; }
.sp-offer .sp-steps p { margin: 0; color: var(--sp-muted); font-size: 16px; }
.sp-offer .sp-steps .sp-when {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 12.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sp-mid);
margin-bottom: 4px;
}
/* ---------------------------------------------------------------------------
Who it's for / who it isn't. Qualification raises desire; it does not cost leads.
--------------------------------------------------------------------------- */
.sp-offer .sp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sp-offer .sp-fit-col {
background: #fff;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
padding: 30px 32px;
}
.sp-offer .sp-fit-col--no { background: #fbfcfa; }
.sp-offer .sp-fit-col ul { list-style: none; margin: 0; padding: 0; }
.sp-offer .sp-fit-col li {
position: relative;
padding: 0 0 14px 32px;
font-size: 16.5px;
line-height: 1.55;
}
.sp-offer .sp-fit-col li:last-child { padding-bottom: 0; }
.sp-offer .sp-fit-col li::before {
position: absolute;
left: 0;
top: 1px;
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
font-weight: 900;
font-size: 15px;
}
.sp-offer .sp-fit-col--yes li::before { content: "\f00c"; color: var(--sp-mid); }
.sp-offer .sp-fit-col--no li::before { content: "\f00d"; color: #c6ccbe; }
/* ---------------------------------------------------------------------------
Benefit list — outcomes, one per line, used inside the offer sections.
--------------------------------------------------------------------------- */
.sp-offer .sp-gets { list-style: none; margin: 0; padding: 0; }
.sp-offer .sp-gets li {
position: relative;
padding: 0 0 20px 42px;
font-size: 17px;
line-height: 1.6;
}
.sp-offer .sp-gets li:last-child { padding-bottom: 0; }
.sp-offer .sp-gets li::before {
content: "\f00c";
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
top: 2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(132, 240, 0, .18);
color: var(--sp-mid);
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.sp-offer .sp-band--dark .sp-gets li::before { background: rgba(132, 240, 0, .18); color: var(--sp-lime); }
.sp-offer .sp-gets li strong { color: var(--sp-dark); }
.sp-offer .sp-band--dark .sp-gets li strong { color: #fff; }
/* ---------------------------------------------------------------------------
Guarantee panel.
--------------------------------------------------------------------------- */
.sp-offer .sp-guarantee {
display: grid;
grid-template-columns: 88px 1fr;
gap: 26px;
align-items: start;
background: #fff;
border: 2px solid var(--sp-lime);
border-radius: var(--sp-radius);
padding: 34px 36px;
box-shadow: var(--sp-shadow);
}
/*
* Doubles as an icon seal (fallback, no photo on disk) and a round founder photo — the
* guarantee text is already written in Ben's own voice ("email me and I will refund
* it"), so a real face here makes the promise read as personal rather than corporate
* small print. flex-centering only matters for the icon variant; the img variant fills
* the circle with object-fit and ignores it.
*/
.sp-offer .sp-guarantee-seal {
width: 88px;
height: 88px;
border-radius: 50%;
background: rgba(132, 240, 0, .16);
color: var(--sp-mid);
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
flex: none;
}
.sp-offer img.sp-guarantee-seal {
object-fit: cover;
border: 3px solid rgba(132, 240, 0, .4);
}
.sp-offer .sp-guarantee h3 { margin-bottom: 10px; }
.sp-offer .sp-guarantee p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------------
FAQ. so it works with JavaScript off and needs no plugin.
--------------------------------------------------------------------------- */
.sp-offer .sp-faq { max-width: 820px; margin: 0 auto; }
.sp-offer .sp-faq details {
background: #fff;
border: 1px solid var(--sp-line);
border-radius: 11px;
margin-bottom: 12px;
overflow: hidden;
}
.sp-offer .sp-faq details[open] { border-color: var(--sp-mid); }
.sp-offer .sp-faq summary {
cursor: pointer;
padding: 21px 56px 21px 26px;
font-family: 'Oswald', sans-serif;
font-size: 18.5px;
font-weight: 500;
color: var(--sp-dark);
position: relative;
list-style: none;
}
.sp-offer .sp-faq summary::-webkit-details-marker { display: none; }
.sp-offer .sp-faq summary::after {
content: "+";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
line-height: 1;
color: var(--sp-mid);
}
.sp-offer .sp-faq details[open] summary::after { content: "\2013"; }
.sp-offer .sp-faq summary:focus-visible { outline: 3px solid var(--sp-mid); outline-offset: -3px; }
.sp-offer .sp-faq .sp-faq-body { padding: 0 26px 24px; }
.sp-offer .sp-faq .sp-faq-body p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------------
Form panel.
--------------------------------------------------------------------------- */
.sp-offer .sp-form {
background: #fff;
border-radius: var(--sp-radius);
padding: 38px 40px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
/*
* The form panel is a white card that sits on the dark band, so it has to undo the
* band's inherited white text or the heading and the helper line are white on white.
* Same for any light card dropped onto a dark band later — hence the .sp-card reset
* alongside it rather than a one-off fix here.
*/
.sp-offer .sp-band--dark .sp-form,
.sp-offer .sp-band--dark .sp-card:not(.sp-card--featured) { color: var(--sp-ink); }
.sp-offer .sp-band--dark .sp-form h3,
.sp-offer .sp-band--dark .sp-card:not(.sp-card--featured) h3 { color: var(--sp-dark); }
.sp-offer .sp-band--dark .sp-form .sp-small,
.sp-offer .sp-band--dark .sp-card:not(.sp-card--featured) .sp-small { color: var(--sp-muted); }
.sp-offer .sp-band--dark .sp-form .sp-eyebrow,
.sp-offer .sp-band--dark .sp-card:not(.sp-card--featured) .sp-eyebrow { color: var(--sp-mid); }
/* And the reverse: a note under a button on a dark band must not fall back to the
muted grey meant for light ones. */
.sp-offer .sp-band--dark .sp-cta-note { color: rgba(255, 255, 255, .7); }
.sp-offer .sp-form h3 { margin-bottom: 6px; }
.sp-offer .sp-form .default-form .form-group { margin-bottom: 16px; }
.sp-offer .sp-form input[type="text"],
.sp-offer .sp-form input[type="email"],
.sp-offer .sp-form textarea,
.sp-offer .sp-form select {
width: 100%;
border: 1px solid #dfe6e6;
border-radius: 9px;
padding: 14px 18px;
font-size: 16px;
background: #fff;
color: var(--sp-ink);
}
.sp-offer .sp-form textarea { min-height: 108px; resize: vertical; }
.sp-offer .sp-form input:focus,
.sp-offer .sp-form textarea:focus,
.sp-offer .sp-form select:focus {
outline: none;
border-color: var(--sp-mid);
box-shadow: 0 0 0 3px rgba(87, 112, 56, .14);
}
.sp-offer .sp-form .sp-cta { width: 100%; }
.sp-offer .sp-form .sp-area-picker label { color: var(--sp-dark); }
/* ---------------------------------------------------------------------------
Business picker — /upgrade-listing.
One full-width button per business, styled to look pressable rather than like a
form control, because the action really is that direct: pick the name, land on
Stripe. No radio buttons, no separate submit — the row itself is the button.
--------------------------------------------------------------------------- */
.sp-offer .sp-pick { display: flex; flex-direction: column; gap: 10px; }
.sp-offer .sp-pick-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
background: #fff;
border: 2px solid var(--sp-line);
border-radius: 11px;
padding: 18px 22px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.sp-offer .sp-pick-item:hover,
.sp-offer .sp-pick-item:focus-visible {
border-color: var(--sp-lime);
background: var(--sp-tint);
transform: translateX(2px);
}
.sp-offer .sp-pick-item:focus-visible { outline: 3px solid var(--sp-mid); outline-offset: 2px; }
.sp-offer .sp-pick-name {
font-family: 'Oswald', sans-serif;
font-size: 17.5px;
font-weight: 500;
color: var(--sp-dark);
}
.sp-offer .sp-pick-go {
flex: none;
display: inline-flex;
align-items: center;
gap: 9px;
font-family: 'Oswald', sans-serif;
font-size: 14.5px;
font-weight: 600;
letter-spacing: .02em;
color: var(--sp-mid);
white-space: nowrap;
}
@media (max-width: 575px) {
.sp-offer .sp-pick-item { flex-direction: column; align-items: flex-start; gap: 10px; }
.sp-offer .sp-pick-go { align-self: flex-end; }
}
/* ---------------------------------------------------------------------------
Sticky CTA bar. Shown once the hero button is gone, hidden again at the close.
--------------------------------------------------------------------------- */
.sp-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(59, 70, 46, .97);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(132, 240, 0, .28);
padding: 13px 20px;
transform: translateY(110%);
transition: transform .28s ease;
}
.sp-sticky-cta.is-visible { transform: translateY(0); }
.sp-sticky-cta .sp-sticky-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.sp-sticky-cta strong {
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 1.3;
}
.sp-sticky-cta small { display: block; color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 400; }
.sp-sticky-cta .sp-cta { padding: 13px 28px; font-size: 17px; flex: none; box-shadow: none; }
/* ---------------------------------------------------------------------------
Nearby areas, when this one is gone.
--------------------------------------------------------------------------- */
.sp-offer .sp-nearby { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sp-offer .sp-nearby a {
display: block;
background: #fff;
border: 1px solid var(--sp-line);
border-radius: 11px;
padding: 17px 20px;
color: var(--sp-dark);
font-family: 'Oswald', sans-serif;
font-size: 17px;
transition: all .2s ease;
}
.sp-offer .sp-nearby a:hover { border-color: var(--sp-mid); transform: translateY(-2px); color: var(--sp-mid); }
.sp-offer .sp-nearby a small { display: block; font-family: 'Josefin Sans', sans-serif; font-size: 13px; color: var(--sp-muted); }
/* ---------------------------------------------------------------------------
Two-column split used for hero + form and copy + visual.
--------------------------------------------------------------------------- */
.sp-offer .sp-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
.sp-offer .sp-split--top { align-items: start; }
.sp-offer .sp-rule { border: 0; border-top: 1px solid var(--sp-line); margin: 46px 0; }
.sp-offer .sp-band--dark .sp-rule { border-top-color: rgba(255, 255, 255, .14); }
.sp-offer .sp-mt { margin-top: 38px; }
.sp-offer .sp-mb { margin-bottom: 38px; }
/* ---------------------------------------------------------------------------
Responsive.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
.sp-offer .sp-split { grid-template-columns: 1fr; gap: 34px; }
.sp-offer .sp-founder { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 24px; }
.sp-offer .sp-band { padding: 60px 0; }
.sp-offer .sp-hero { padding: 54px 0 50px; }
}
@media (max-width: 767px) {
.sp-offer .sp-vs { grid-template-columns: 1fr; gap: 16px; }
.sp-offer .sp-vs-arrow { transform: rotate(90deg); justify-self: center; }
.sp-offer .sp-fit { grid-template-columns: 1fr; }
.sp-offer .sp-form { padding: 28px 24px; }
.sp-offer .sp-cta { width: 100%; padding: 17px 24px; font-size: 18px; }
.sp-offer .sp-cta-row { flex-direction: column; align-items: stretch; }
.sp-offer .sp-guarantee { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; }
.sp-offer .sp-guarantee-seal { margin: 0 auto; }
.sp-offer .sp-steps li { padding-left: 60px; margin-left: 20px; }
.sp-offer .sp-slots { flex-direction: column; }
/* The bar is the only CTA on a phone once it appears, so it carries the price. */
.sp-sticky-cta .sp-sticky-inner { gap: 12px; }
.sp-sticky-cta strong { font-size: 15px; }
.sp-sticky-cta .sp-cta { padding: 12px 20px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
.sp-offer .sp-cta,
.sp-offer .sp-nearby a,
.sp-sticky-cta { transition: none; }
.sp-offer .sp-cta:hover,
.sp-offer .sp-nearby a:hover { transform: none; }
}