` lines. */
body.page-f-offer .hero__subtitle p:last-child {
margin-bottom: clamp(6px, 1vw, 14px);
}
/* ==========================================================================
Hero — CTA stage with product boxes flanking the offer
Mirrors the legacy offer layout: InstaDoodle box mockups sit left/right
of the chip + button cluster. Dedicated left/right box assets.
========================================================================== */
body.page-f-offer .hero__cta-area {
width: 100%;
max-width: 980px;
margin-top: clamp(12px, 1.5vw, 20px);
}
body.page-f-offer .hero__cta-stage {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 2.2vw, 32px);
width: 100%;
}
body.page-f-offer .hero__cta-main {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
flex: 0 1 auto;
min-width: 0;
}
body.page-f-offer .hero__cta-box {
display: block;
width: clamp(88px, 13vw, 156px);
height: auto;
flex-shrink: 0;
object-fit: contain;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 14px 28px rgba(20, 12, 40, 0.12));
transform: translateY(10%);
}
@media (max-width: 768px) {
body.page-f-offer .hero__cta-box {
width: clamp(72px, 11vw, 96px);
}
body.page-f-offer .hero__cta-stage {
gap: clamp(8px, 1.8vw, 16px);
}
}
@media (max-width: 560px) {
body.page-f-offer .hero__cta-box {
display: none;
}
body.page-f-offer .hero__cta-stage {
gap: 0;
}
}
body.page-f-offer .hero__payment-trust {
display: block;
width: min(100%, 224px);
height: auto;
margin: clamp(2px, 0.4vw, 6px) 0 0;
}
@media (max-width: 480px) {
body.page-f-offer .hero__payment-trust {
width: min(100%, 196px);
}
}
/* ==========================================================================
Hero — primary CTA scale-up
On this checkout-style landing page the hero CTA is THE conversion
action; everything else on the page exists to push the visitor toward
this button. The global `.btn-buy-large` (48px min-height, 14/20/26px
padding, 17.2px text) is sized for a more balanced page where the
button shares attention with surrounding content. Here we want it to
feel ~15% larger and *visually taller* in particular, so it reads
from across the viewport and the click target is generous (Fitts's
law).
Scope is `.hero__cta-area > .btn-buy-large` so we don't accidentally
pump the final-CTA or footer-gift buttons, which carry their own
sizing intent (final-CTA already differentiates itself via section
chrome; footer-gift is intentionally compact via `.site-footer__gift`
overrides in `styles_root.css`).
Numbers:
- `min-height` 48 → 60 (+25%) — adds the requested vertical weight
- vertical `padding` 14 → 20 (+43%) — pushes text further from edges
- horizontal `padding` 20/26 → 28/34 (+~30%) — keeps the pill shape
proportional to the new height
- text 17.2 → 20px (+16%) — readable at this scale without dwarfing
the heading
- icon 16 → 19px (+19%) — keeps the arrow visually balanced with
the larger text.
========================================================================== */
body.page-f-offer .final-cta > .btn-buy-large {
padding: 24px 28px 24px 34px;
min-height: 72px;
}
body.page-f-offer .hero__cta-main > .btn-buy-large {
position: relative;
overflow: visible;
padding: 24px 28px 24px 34px;
min-height: 72px;
}
body.page-f-offer .hero__cta-main > .btn-buy-large .btn-buy-large__hand {
position: absolute;
right: clamp(-6px, -0.6vw, -2px);
bottom: clamp(-13px, -1.27vw, -7px);
width: clamp(35px, 4.16vw, 46px);
height: auto;
pointer-events: none;
user-select: none;
z-index: 2;
animation: heroCtaHandPulse 1.8s ease-in-out infinite;
filter: drop-shadow(0 5px 10px rgba(20, 12, 40, 0.18));
transform-origin: 70% 80%;
}
@keyframes heroCtaHandPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.14);
}
}
@media (prefers-reduced-motion: reduce) {
body.page-f-offer .hero__cta-main > .btn-buy-large .btn-buy-large__hand {
animation: none;
}
}
body.page-f-offer .hero__cta-main > .btn-buy-large .btn-buy-large__text,
body.page-f-offer .final-cta > .btn-buy-large .btn-buy-large__text {
font-size: 20px;
}
body.page-f-offer .hero__cta-main > .btn-buy-large .btn-buy-large__icon,
body.page-f-offer .final-cta > .btn-buy-large .btn-buy-large__icon {
width: 19px;
height: 19px;
}
body.page-f-offer .hero__cta-main > .btn-buy-large .btn-buy-large__icon i,
body.page-f-offer .final-cta > .btn-buy-large .btn-buy-large__icon i {
font-size: 19px;
}
/* On phones the button needs to feel proportional to the smaller hero
text and not eat half the viewport. We trim a notch off the vertical
padding and font-size while keeping the comfortable touch height. */
@media (max-width: 480px) {
body.page-f-offer .final-cta > .btn-buy-large {
padding: 19px 22px 19px 26px;
min-height: 65px;
}
body.page-f-offer .hero__cta-main > .btn-buy-large {
padding: 19px 22px 19px 26px;
min-height: 65px;
}
body.page-f-offer .hero__cta-main > .btn-buy-large .btn-buy-large__text,
body.page-f-offer .final-cta > .btn-buy-large .btn-buy-large__text {
font-size: 18px;
}
}
/* ==========================================================================
Showreel — rating proof under carousel
The rating works harder after the showreel than inside the hero: users
see examples first, then the score confirms other customers liked the
same kind of output. The carousel viewport has internal bottom padding
for card shadows, so the pill is pulled up slightly to sit visually
attached to the reel rather than drifting below it.
========================================================================== */
body.page-f-offer .showreel__rating {
align-self: center;
justify-content: center;
flex-wrap: nowrap;
max-width: 100%;
gap: 14px;
margin-top: clamp(-28px, -2vw, -14px);
margin-bottom: clamp(16px, 2.5vw, 28px);
}
body.page-f-offer .showreel__rating .hero__rating-stars {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 5px 9px 5px 8px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-star) 13%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-star) 18%, transparent);
line-height: 1;
}
body.page-f-offer .showreel__rating .hero__rating-star,
body.page-f-offer .showreel__rating .hero__rating-star-base,
body.page-f-offer .showreel__rating .hero__rating-star-fill {
font-size: var(--text-lg);
line-height: 1;
}
body.page-f-offer .showreel__rating .hero__rating-star,
body.page-f-offer .showreel__rating .hero__rating-star-fill {
color: var(--color-star);
}
body.page-f-offer .showreel__rating .hero__rating-star-base {
color: color-mix(in srgb, var(--color-star) 28%, var(--color-border));
}
body.page-f-offer .showreel__rating .hero__rating-star-partial {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
font-size: var(--text-lg);
line-height: 1;
}
body.page-f-offer .showreel__rating .hero__rating-star-partial .hero__rating-star-fill {
position: absolute;
inset: 0;
width: 90%;
overflow: hidden;
white-space: nowrap;
}
@media (max-width: 420px) {
body.page-f-offer .showreel__rating {
gap: var(--space-2);
padding: 8px 14px 8px 10px;
flex-wrap: wrap;
}
body.page-f-offer .showreel__rating .hero__rating-text {
font-size: var(--text-xs);
}
}
/* ==========================================================================
Generate (DoodleAI demo) — disable scroll-linked 3D tilt
The global `.generate__inner` runs a `perspective(1600px) + rotateX +
translate3d + scale` chain that's driven by a JS-written `--tilt` var
(main_root.js, ~line 611). On this page that effect is heavy on the
viewport because:
- `perspective()` forces a 3D rasterization context for this card AND
every descendant (the entire AI wizard inside), which is expensive
to repaint every scroll frame.
- `will-change: transform` keeps a permanent compositor layer alive.
We can't disable the JS without editing it, but we *can* make its work
inert: zeroing the transform short-circuits the perspective context,
and dropping will-change releases the GPU layer. The JS keeps writing
--tilt every frame — that's cheap (one getBoundingClientRect) and no
longer drives any render work because the CSS stops reading the var.
========================================================================== */
body.page-f-offer .generate__inner {
transform: none;
will-change: auto;
}
/* ==========================================================================
Generate — payment trust image under CTA
Reuses the hero payment badge; keeps it above the gradient noise overlay
and tucked under the CTA like the old guarantee line.
========================================================================== */
body.page-f-offer #ai-demo > .hero__payment-trust {
position: relative;
z-index: 5;
margin: -12px 0 0;
}
body.page-f-offer .showreel,
body.page-f-offer .showreel-promo {
padding-top: clamp(40px, 5vw, 64px);
}
/* Swapped carousels — showreel title section now hosts the 3D art styles
stage; the art-styles heading section now hosts the client showreel. */
body.page-f-offer .showreel-promo {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: 48px;
padding-right: 48px;
position: relative;
z-index: 3;
}
body.page-f-offer .showreel-promo__header {
justify-content: center;
margin-bottom: 0;
}
body.page-f-offer .showreel-promo__header .showreel__title {
text-align: center;
max-width: none;
width: 100%;
margin-bottom: 0;
}
body.page-f-offer .showreel-promo .art-styles-3d__dots {
margin-top: clamp(8px, 1vw, 12px);
margin-bottom: clamp(6px, 0.8vw, 10px);
}
body.page-f-offer .showreel-promo .showreel__rating {
margin-top: clamp(10px, 1.2vw, 16px);
}
body.page-f-offer .showreel-promo .art-styles__header {
max-width: 1080px;
}
body.page-f-offer .showreel--styles__header {
align-items: flex-end;
width: 100%;
}
body.page-f-offer .showreel--styles .showreel__controls {
align-self: flex-end;
flex-shrink: 0;
}
body.page-f-offer .showreel--styles .art-styles__header {
flex: 1 1 auto;
min-width: 0;
max-width: 820px;
margin: 0;
align-items: flex-start;
text-align: left;
}
body.page-f-offer .showreel--styles .art-styles__title {
font-size: clamp(28px, 3.6vw, 46px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
max-width: none;
}
body.page-f-offer .showreel--styles .art-styles__subtitle {
max-width: 720px;
}
@media (max-width: 768px) {
body.page-f-offer .showreel-promo {
padding-left: 24px;
padding-right: 24px;
}
body.page-f-offer .showreel--styles__header {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
body.page-f-offer .showreel--styles .art-styles__header {
align-items: flex-start;
text-align: left;
}
body.page-f-offer .showreel--styles .showreel__controls {
align-self: flex-end;
}
}
@media (max-width: 640px) {
body.page-f-offer .showreel--styles .art-styles__title {
white-space: normal;
}
}
/* ==========================================================================
Samples — 5-thumb grid (was 6) so each tile reads larger
========================================================================== */
body.page-f-offer .samples__thumbs {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
body.page-f-offer .samples__thumb-label {
font-size: clamp(15px, 1.15vw, 17px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (max-width: 1100px) {
body.page-f-offer .samples__thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
body.page-f-offer .samples__thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
Compare — competitor pricing under brand headers
========================================================================== */
body.page-f-offer .compare__brand {
flex-direction: column;
gap: 8px;
min-height: 0;
}
body.page-f-offer .compare__brand-name {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 31px;
}
body.page-f-offer .compare__brand-price {
font-size: clamp(14px, 1.15vw, 16px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.1px;
color: var(--color-text-muted);
white-space: nowrap;
}
body.page-f-offer .compare__brand-price--us {
color: #ffffff;
}
body.page-f-offer .compare__table thead th {
padding-bottom: 20px;
}
body.page-f-offer .compare__feature-title {
display: inline-flex;
align-items: center;
gap: 10px;
}
body.page-f-offer .compare__feature--icon .bouncy-card__title-icon i {
font-size: clamp(20px, 1.8vw, 24px);
}
/* ==========================================================================
Bouncy — inverted heading hierarchy on f-offer
Badge carries the big title weight; the line below reads as supporting
copy (matches `.compare__subtitle` scale).
========================================================================== */
body.page-f-offer .bouncy__badge-wrap {
height: auto;
padding: clamp(10px, 1.2vw, 16px) clamp(18px, 2.2vw, 28px);
}
body.page-f-offer .bouncy__eyebrow {
font-size: clamp(36px, 5vw, 52px);
line-height: 1.05;
letter-spacing: -1.2px;
white-space: nowrap;
}
body.page-f-offer .bouncy__title {
font-size: clamp(16px, 1.7vw, 19px);
font-weight: 500;
line-height: 1.65;
letter-spacing: 0;
color: var(--color-text-muted);
max-width: 62ch;
}
@media (max-width: 640px) {
body.page-f-offer .bouncy__eyebrow {
white-space: normal;
font-size: clamp(28px, 7.5vw, 36px);
}
}
/* Bouncy — AI Text To Video title icon */
body.page-f-offer .bouncy-card__title--icon {
display: inline-flex;
align-items: center;
gap: 10px;
}
body.page-f-offer .bouncy-card__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
}
body.page-f-offer .bouncy-card__title-icon i {
font-size: clamp(26px, 2.4vw, 32px);
background: var(--gradient-pink-orange);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ==========================================================================
Duality — "Simple ↔ Advanced" statement section
A modern bento pair that mirrors `.why-explainer`'s pattern exactly:
sits on the page background (no panel), gradient-border pill eyebrow,
large bold dark title with a `.highlight-pink` gradient on the
contrast word, two equal tinted bento cards below.
Inside each card: a small rotated Gochi "stamp" in a brand accent
color (pink for "Simple", blue for "Advanced") — matching the
`.why-explainer__graph-stat` and `.why-explainer__fact-badge`
stamp pattern — and a centered illustration.
This pattern is *deliberately* the same shell as `.why-explainer`
so the page reads as one design system, not a stack of one-off
sections. Documented in DESIGN.md §5.5.
========================================================================== */
body.page-f-offer .duality {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
/* Top padding intentionally tight so this section visually flows out
of `.hiw` above (we also collapse `.hiw` bottom padding via the
override below). The two sections are conceptually the same story
beat — anything bigger than ~24px starts to read as a structural
break rather than continuous flow. */
padding: clamp(12px, 1.5vw, 20px) clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px);
position: relative;
z-index: 5;
}
/* Collapse the global `.hiw` bottom padding so that section flows
straight into `.duality`. The two sections are conceptually about
the *same* product story (creating videos easily → built for any
skill level), so the wall of whitespace separating them reads as a
structural mistake. We can't touch styles_root.css from here, but
a page-scoped override is enough. */
body.page-f-offer .hiw {
padding-bottom: clamp(8px, 1vw, 16px);
}
body.page-f-offer .duality__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
}
/* --- Bare 2-column grid on the page bg. No panel, no border, no
shadow — the two chrome-less cards inside carry the section's
visual weight on their own. */
body.page-f-offer .duality__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(8px, 1.5vw, 20px);
max-width: 760px;
margin: 0 auto;
width: 100%;
}
/* Card shell: chrome-less. The cards have no visible background,
border, or shadow — they're invisible flex containers that simply
position a Gochi stamp in the top corner and a centered illustration
below. The "card" feel comes from the image + stamp pair, not from
a surrounding box.
`min-height` keeps the two columns visually paired even if image
aspect ratios differ. */
body.page-f-offer .duality__card {
position: relative;
background: transparent;
border: 0;
box-shadow: none;
padding: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 32px) clamp(8px, 1.2vw, 16px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 360px;
}
/* No card-level hover lift — the cards are chrome-less. The
illustration's own scale-up still handles the interactive feedback. */
body.page-f-offer .duality__card:hover {
transform: none;
box-shadow: none;
}
/* --- Gochi "stamp" — rotated playful label in a brand accent.
Matches the rotated-Gochi pattern in `.why-explainer__graph-stat`
(-2deg, blue, 80px) and `.why-explainer__fact-badge` (-4deg, blue,
32px). Positioned absolutely inside the card so it overlays the top
without affecting the image's centering. */
body.page-f-offer .duality__stamp {
position: absolute;
top: clamp(20px, 3vw, 36px);
font-family: var(--font-gochi);
line-height: 1.05;
display: flex;
flex-direction: column;
gap: 2px;
z-index: 2;
pointer-events: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
body.page-f-offer .duality__stamp-lead {
font-size: clamp(22px, 2.4vw, 32px);
}
body.page-f-offer .duality__stamp-tail {
font-size: clamp(18px, 1.9vw, 24px);
opacity: 0.92;
}
/* Card 1 stamp — pink, tilts left. Sits in the top-left of the card. */
body.page-f-offer .duality__stamp--pink {
left: clamp(20px, 3vw, 36px);
color: var(--color-pink);
transform: rotate(-4deg);
text-align: left;
}
/* Card 2 stamp — blue, tilts right. Mirrored to the top-right. The
opposing tilts create a visual "outward" energy that frames the
illustrations between them. */
body.page-f-offer .duality__stamp--blue {
right: clamp(20px, 3vw, 36px);
color: var(--color-blue);
transform: rotate(4deg);
text-align: right;
}
/* --- Illustration container. Centered, with breathing room from the
stamp at the top. The PNG already includes the hand-drawn organic
outline; the wrapper is just a sizing/positioning container.
We constrain by **height**, not width, because the two illustrations
have different aspect ratios (img1: 280×240 ≈ 1.17, img2: 320×240 ≈
1.33). A width-only constraint produces visibly different rendered
heights and one image looks "bigger" than the other. Locking the
height makes both images occupy the same vertical footprint;
widths adapt to each image's natural aspect, which reads as a
balanced pair. */
body.page-f-offer .duality__img {
height: clamp(150px, 19vw, 220px);
margin-top: clamp(32px, 4vw, 56px);
display: flex;
align-items: center;
justify-content: center;
}
body.page-f-offer .duality__img img {
display: block;
width: auto;
height: 100%;
max-width: 100%;
object-fit: contain;
}
/* --- Responsive --------------------------------------------------- */
/* Tablet: keep two columns, tighten card height. */
@media (max-width: 992px) {
body.page-f-offer .duality__card {
min-height: 320px;
}
}
/* Mobile: stack cards vertically. */
@media (max-width: 640px) {
body.page-f-offer .duality {
padding: clamp(40px, 8vw, 64px) 16px;
}
body.page-f-offer .duality__grid {
grid-template-columns: 1fr;
gap: 12px;
max-width: 100%;
}
body.page-f-offer .duality__card {
min-height: 280px;
padding: 24px 16px;
}
}
/* ==========================================================================
Final CTA — copy tweaks
The "(Without agency fees)" subtitle reads as a parenthetical aside,
which dilutes the CTA's urgency. On this offer page we want the
title + button to be the only things in the final CTA cluster.
DOM is preserved so it can be restored with a one-line revert.
========================================================================== */
body.page-f-offer .final-cta__sub {
display: none;
}
body.page-f-offer .final-cta > .hero__payment-trust {
margin: -4px 0 0;
}
/* ==========================================================================
Footer — Disclaimer typography
The offer page carries a much longer legal disclaimer than the rest
of the site. The default global styling (`--text-2xs` ≈ 10px, no
max-width) crams a giant wall of text into a 1200px-wide block,
which reads as visual noise. We:
- Widen the block to match the footer columns so the long legal copy
doesn't become a tall narrow wall.
- Cap the legal block's height because the fixed reveal footer can only
expose one viewport at a time; the disclaimer should not push the
legal/support/explore links out of view.
- Style the heading as a small-caps, letter-spaced section header
("DISCLAIMER") so it doesn't read like just another paragraph.
- Bump paragraph size from 10 → 11px and line-height to 1.7. The
text is still clearly "fine print" but the user can actually read
it if they want to.
- Brighten the inline `` labels so the "Google:" /
"Facebook:" anchors are scannable when skimming.
========================================================================== */
body.page-f-offer .site-footer__disclaimer {
max-width: 1180px;
max-height: clamp(150px, 24vh, 210px);
overflow-y: auto;
overscroll-behavior: contain;
margin-left: auto;
margin-right: auto;
padding-top: 28px;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: var(--footer-muted) transparent;
}
body.page-f-offer .site-footer__disclaimer-title {
margin: 0 0 16px;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--footer-muted);
}
body.page-f-offer .site-footer__disclaimer p {
font-size: 11px;
line-height: 1.7;
color: var(--footer-subtle);
margin: 0 0 12px;
text-align: left;
}
body.page-f-offer .site-footer__disclaimer p:last-child {
margin-bottom: 0;
}
body.page-f-offer .site-footer__disclaimer p strong {
color: var(--footer-muted);
font-weight: 700;
letter-spacing: 0.2px;
}
@media (max-width: 640px) {
body.page-f-offer .site-footer__disclaimer {
padding-left: 4px;
padding-right: 4px;
}
body.page-f-offer .site-footer__disclaimer-title {
letter-spacing: 1.8px;
}
}
/* ==========================================================================
Pricing — heading on one line
Global `.pricing__heading` is `max-width: 600px` (built for a longer
two-line headline). On this page the title is one short clause —
"Pay once, Create forever." — and reads more punchy as a single
line. We:
- Strip the 600px cap so the heading can use the container's full
width on desktop.
- Pin `white-space: nowrap` on the title so the responsive clamp
font-size never wraps, even when `text-wrap: balance` would
otherwise try to balance into two lines.
- Lower the clamp floor from 40px to 24px so the line doesn't
overflow the viewport on small phones; clamp already handles the
intermediate scaling.
The gradient accent span (`.pricing__title-accent`) is untouched —
the gradient-clipped text on the inner span carries over verbatim
regardless of what we do to the parent heading's layout.
========================================================================== */
body.page-f-offer .pricing__heading {
max-width: 100%;
}
body.page-f-offer .pricing__title,
body.page-f-offer .guarantee-section .pricing__title {
white-space: nowrap;
font-size: clamp(24px, 5.5vw, 56px);
}
/* Re-introduce a content cap on the subtitle alone. The title needs
the full container width to fit on one line, but the subtitle is a
long support sentence — without a cap it stretches across the
entire container and reads as a banner of fine print rather than
prose. ~620px keeps the line at a comfortable ~70-80 char read. */
body.page-f-offer .pricing__subtitle {
max-width: 620px;
}
/* ==========================================================================
Section headings — iPhone scale
Several offer-page headings inherit conservative mobile floors from the
shared site stylesheet. On iPhone they read undersized, especially when
surrounded by large cards and product imagery, so the offer page gets a
single mobile type scale for its major section headings. Pricing is also
allowed to wrap on phones instead of shrinking to preserve one line.
========================================================================== */
@media (max-width: 480px) {
body.page-f-offer .pricing__title,
body.page-f-offer .guarantee-section .pricing__title,
body.page-f-offer .testimonials__title,
body.page-f-offer .why-explainer__title,
body.page-f-offer .samples__title,
body.page-f-offer .bonuses__title {
font-size: clamp(34px, 10vw, 40px);
line-height: 1.05;
letter-spacing: -1px;
}
body.page-f-offer .pricing__title,
body.page-f-offer .guarantee-section .pricing__title {
white-space: normal;
text-wrap: balance;
}
body.page-f-offer .pricing__subtitle,
body.page-f-offer .testimonials__subtitle,
body.page-f-offer .why-explainer__subtitle,
body.page-f-offer .samples__subtitle,
body.page-f-offer .bonuses__subtitle {
font-size: 16.5px;
line-height: 1.45;
}
}
/* ==========================================================================
Pricing — Lifetime offer (2-card layout)
--------------------------------------------------------------------------
The global `.pricing` styles assume a 3-card monthly-subscription
layout (Standard / Pro / Agency). This page sells a one-time lifetime
deal with only 2 tiers (Standard B&W vs With Color Support), so we
override the grid to 2 columns and add a `--lifetime` modifier that
restructures the price block (struck-out reg. price + big one-time
price + savings pill) and introduces highlight callouts above the CTA
for "NO MONTHLY FEES" and "Generate Color Elements".
Visual differentiation between the two cards:
- Standard: white surface, hairline border, subtle shadow (inherits
base `.price-card`)
- Color: gradient-brand border (same `--pro`-style treatment from
styles_root.css) + a "Best Value" badge floating above the card.
We do NOT add `.price-card--pro` to the markup because that pulls
in semantically misleading naming; instead we re-paint the
gradient-border recipe on `.price-card--lifetime-color` directly.
Documented in DESIGN.md §5.6.
========================================================================== */
/* 2-column grid override. Caps total grid width at ~960px so each card
stays at a comfortable reading size and the pair sits centered on
wide monitors rather than stretching to the full 1200px container. */
body.page-f-offer .pricing__grid--lifetime {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 960px;
margin-left: auto;
margin-right: auto;
align-items: stretch;
justify-items: stretch;
}
/* Stack to one column on small tablets and phones. Already done by the
global `@media (max-width: 768px)` rule for `.pricing__grid`, but
we re-assert at our local breakpoints to be defensive against
future global edits. */
@media (max-width: 768px) {
body.page-f-offer .pricing {
padding-left: 16px;
padding-right: 16px;
overflow-x: hidden;
}
body.page-f-offer .pricing__inner {
min-width: 0;
}
body.page-f-offer .pricing__grid--lifetime {
grid-template-columns: 1fr;
width: min(100%, 520px);
max-width: 100%;
justify-items: stretch;
}
body.page-f-offer .price-card--lifetime {
width: 100%;
max-width: 100%;
min-width: 0;
}
body.page-f-offer .price-card--lifetime .price-card__desc {
white-space: normal;
text-wrap: balance;
}
}
/* Base lifetime card. The global `.price-card` already gives us
surface bg, rounded corners, border, padding, and flex column
layout — we only need to tighten the inter-section gap because the
lifetime layout has more vertical chunks (eyebrow + price stack +
highlights + CTA + features) than the original 3-section monthly
layout, so the default `--space-7` (32px) gap reads as too airy. */
body.page-f-offer .price-card--lifetime {
gap: var(--space-5);
height: 100%;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* Color card variant — gradient-brand border on white, lifted shadow.
Recipe mirrors the global `.price-card--pro` so the visual rhyme
between "premium tier" and "most-recommended option" carries over
even though the semantic tier name has changed. */
body.page-f-offer .price-card--lifetime-color {
border: 2px solid transparent;
background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
var(--gradient-brand) border-box;
box-shadow: var(--shadow-md);
}
body.page-f-offer .price-card--lifetime-color:hover {
box-shadow: var(--shadow-lg);
}
/* "Best Value" badge — solid purple pill floating above the color
card. Matches the `.price-card__action--solid` "Get InstaDoodle
with Color" CTA below (also solid `--color-purple`) so the badge
and the card's primary action read as belonging to the same
colour family. We inherit the global `.price-card__popular`
solid-purple background but add a soft purple-tinted shadow so
the badge feels lifted off the card edge. */
body.page-f-offer .price-card--lifetime-color .price-card__popular {
box-shadow: none;
}
/* Tighten the gap inside the lifetime card header so the name,
price stack, and description sit as a single visual block. */
body.page-f-offer .price-card--lifetime .price-card__header {
gap: var(--space-3);
}
/* Lifetime card names need more hierarchy than the global subscription
cards. A 15% bump keeps the two plan titles readable without
crowding the price stack below. */
body.page-f-offer .price-card--lifetime .price-card__name {
font-size: calc(var(--text-5xl) * 1.15);
}
/* The lifetime descriptions are short clarifiers, not paragraph copy.
Remove the global 32ch cap so each line can use the full card width. */
body.page-f-offer .price-card--lifetime .price-card__desc {
max-width: none;
white-space: normal;
text-wrap: balance;
}
body.page-f-offer .price-card--lifetime-color .price-card__desc {
white-space: nowrap;
text-wrap: nowrap;
}
/* Standard tier name should read as part of the title, not as a
gradient accent. Keep it the same dark color as "InstaDoodle". */
body.page-f-offer .price-card--lifetime-standard .price-card__tier--standard {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--color-text);
}
/* ---- Price stack ----
Container for the three price elements (old strike, new big, save
pill). Centred so the price column reads as a single visual unit.
`gap` is intentionally small — these three lines belong together
semantically and need to look like one block, not three. */
body.page-f-offer .price-card__price-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: var(--space-3);
}
/* Old price — restyled to echo the big new-price layout below it
(large amount + tiny uppercase suffix), but kept ~20% smaller
so the discount reads as a true "before / after" pair instead of a
throwaway small grey line. The eye lands on the cancelled big number,
then drops to the larger new number and locks on "ONE‑TIME".
To make the cancellation feel intentional (not a typo of a slash),
we ditch `text-decoration: line-through` (only ever horizontal) and
draw the strikeout as a pseudo-element bar, tilted 6deg, across
the whole row. The angle gives "energetic
cancellation" energy that rhymes with the page's hand-drawn vibe.
Colour stays subtle (`--color-text-subtle`) so the *new* price still
visually dominates; the red bar carries the "this is gone" signal. */
body.page-f-offer .price-card__price-old {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin: 0;
position: relative;
color: var(--color-text-subtle);
line-height: 1;
}
body.page-f-offer .price-card__price-old-amount {
display: inline-flex;
align-items: baseline;
font-size: clamp(32px, 4.1vw, 43px);
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
color: var(--color-text-subtle);
}
body.page-f-offer .price-card__price-old-period {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--color-text-subtle);
}
/* Diagonal red strikeout bar drawn across the entire old-price row.
`inset: 0; margin: auto 0` vertically centres a 2px-tall block
within the baseline-aligned flex container — which lands the bar
right through the visual centre of the big amount glyphs (because
the amount dominates the row's content height). Keeping the inset
flush prevents the angled line from running past the right edge of
the number/suffix text. 2px keeps the mark visible without
overpowering the cancelled price; a hairline would visually vanish
at this scale. */
body.page-f-offer .price-card__price-old::after {
content: "";
position: absolute;
inset: 0;
margin: auto 0;
height: 2px;
background: color-mix(in srgb, var(--color-pink) 82%, var(--color-orange) 18%);
border-radius: 2px;
transform: rotate(6deg);
transform-origin: center;
pointer-events: none;
}
/* New big price row — "$37 one-time" laid out inline so the
eye reads it as a single phrase. The big number does the heavy
visual lifting; the "one-time" label is smaller and
muted so it qualifies the number without competing with it. */
body.page-f-offer .price-card--lifetime .price-card__price {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0;
flex-wrap: wrap;
}
body.page-f-offer .price-card__price-amount {
display: inline-flex;
align-items: baseline;
font-size: clamp(48px, 6vw, 64px);
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
color: var(--color-text);
}
/* Re-style the currency mark (`$`) — the global rule sized it for the
monthly $47 layout. With the bigger lifetime number we want the `$`
noticeably smaller than the digits and aligned to the top (superscript
style) so the eye locks on the price. */
body.page-f-offer .price-card--lifetime .price-card__currency {
font-size: 0.55em;
font-weight: 700;
margin-right: 4px;
color: var(--color-text-muted);
transform: translateY(-0.65em);
}
body.page-f-offer .price-card__price-suffix {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--color-text-subtle);
}
/* Keep both lifetime CTAs physically identical. The Color CTA borrows
the big Buy button's visual treatment, but the two pricing buttons
still need to line up as a pair inside the two-card grid. */
body.page-f-offer .price-card--lifetime .price-card__action {
width: 100%;
height: 60px;
min-height: 60px;
padding: 18px 24px;
}
body.page-f-offer .price-card--lifetime .price-card__guarantee,
body.page-f-offer .price-card--lifetime .price-card__guarantee i {
color: var(--color-text);
}
/* ---- Color card CTA — match the big Buy button recipe ----
The Color pricing CTA should feel identical to `.btn-buy-large`:
same CTA gradient, same inset glow, same hover lift, same shadow,
and same icon nudge. The checkout attributes/classes stay intact;
only the visual recipe is mirrored here. */
body.page-f-offer .price-card--lifetime-color .price-card__action--solid {
gap: 10px;
background: var(--gradient-brand-cta);
background-clip: padding-box;
background-size: 200% 200%;
background-position: 0% 50%;
border: 0;
color: var(--color-bg);
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 0.9);
font-size: var(--text-base);
overflow: hidden;
transition:
transform 0.4s var(--easing-standard),
background-position 0.4s var(--easing-standard),
box-shadow 0.4s var(--easing-standard);
}
body.page-f-offer .price-card--lifetime-color .price-card__action--solid:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow:
inset 0 0 10px 0 rgba(255, 255, 255, 0.9),
0 8px 25px -5px rgba(112, 0, 255, 0.35);
}
body.page-f-offer .price-card--lifetime-color .price-card__action--solid:active {
transform: translateY(0);
box-shadow:
inset 0 0 10px 0 rgba(255, 255, 255, 0.9),
0 2px 8px -2px rgba(112, 0, 255, 0.3);
}
body.page-f-offer .price-card--lifetime-color .price-card__action--solid .price-card__action-label {
color: var(--color-bg);
}
body.page-f-offer .price-card--lifetime-color .price-card__action--solid .price-card__action-icon {
width: 19px;
height: 19px;
transition: transform 0.4s var(--easing-standard);
}
body.page-f-offer .price-card--lifetime-color .price-card__action--solid:hover .price-card__action-icon {
transform: translateX(3px);
}
body.page-f-offer .price-card--lifetime-color .price-card__action--solid .price-card__action-icon i {
font-size: 19px;
color: var(--color-bg);
}
/* ---- Standard card CTA — black → purple on hover ----
The global `.price-card__action--outline` is transparent w/ a black
border that *fills* to black on hover. On this page we want the
Standard CTA to feel like a real button at rest (not a ghost
outline), so we paint it solid black at rest, then transition it
to brand purple on hover. The hover purple mirrors the Color
card's `--solid` CTA below — a subtle visual nudge that the Color
tier is the recommended upgrade without saying so in copy.
Border color is set to match the background in each state so the
button reads as a flat fill, not a stroked pill. */
body.page-f-offer .price-card--lifetime-standard .price-card__action--outline {
background: var(--color-text);
border-color: var(--color-text);
color: #fff;
}
body.page-f-offer .price-card--lifetime-standard .price-card__action--outline:hover {
background: var(--color-purple);
border-color: var(--color-purple);
color: #fff;
}
/* ---- Standard card feature icons — dark ----
The user requested dark checkmarks for the Standard tier to
further differentiate it from the premium Color tier (which uses
brand purple icons). We override the inline `--pink` modifier. */
body.page-f-offer .price-card--lifetime-standard .price-card__icon {
color: var(--color-text);
}
/* ==========================================================================
Bonuses — free add-ons below pricing
--------------------------------------------------------------------------
Sits directly after the price cards so the buyer reads "pick a plan" and
immediately sees the extra value included with the lifetime deal. The
artwork already contains each bonus title, so the section chrome stays
simple: a punchy two-line heading and a clean 2-column image grid.
========================================================================== */
body.page-f-offer .bonuses {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 clamp(24px, 4vw, 48px);
position: relative;
z-index: 2;
}
body.page-f-offer .bonuses__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(28px, 4vw, 48px);
}
body.page-f-offer .bonuses__heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
max-width: 680px;
}
body.page-f-offer .bonuses__title {
margin: 0;
font-size: clamp(24px, 5.5vw, 56px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
color: var(--color-text);
text-wrap: balance;
}
body.page-f-offer .bonuses__title-accent {
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.page-f-offer .bonuses__subtitle {
margin: 0;
max-width: 620px;
font-size: var(--text-lg);
font-weight: 500;
line-height: 1.5;
color: var(--color-text-subtle);
text-wrap: balance;
}
body.page-f-offer .bonuses__grid {
width: min(100%, 1040px);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 52px);
}
body.page-f-offer .bonuses__card {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
body.page-f-offer .bonuses__image {
display: block;
width: 94%;
height: auto;
max-width: 490px;
filter: drop-shadow(0 12px 18px rgba(29, 29, 31, 0.08));
}
@media (max-width: 768px) {
body.page-f-offer .bonuses__grid {
grid-template-columns: 1fr;
width: min(100%, 520px);
}
}
/* ---- Featured feature-list item (Color card, first row) ----
The "Generate Color Elements" row in the Color card's
`.price-card__list` carries a trailing `.price-card__details-link`
pill that opens the Color Features modal. We give the host ` physically removes the 6th from the DOM on
desktop so the carousel arrows only cycle through 5. This CSS rule is
a FOUC safety net — it keeps the 6th hidden on desktop in the brief
window between HTML parse and the inline script running.
========================================================================== */
@media (min-width: 769px) {
body.page-f-offer .samples__thumbs > li:nth-child(6) {
display: none;
}
}
/* ==========================================================================
DoodleAI live demo — desktop only.
The interactive `.generate` / #ai-demo block ships a full SVG engine
visualisation plus the ai-wizard runtime (54KB JS + many DOM nodes).
On phones the layout collapses awkwardly and the wizard isn't really
usable on a small screen, so we hide the whole section below 768px to
cut both layout cost and JS work during scroll.
========================================================================== */
@media (max-width: 768px) {
body.page-f-offer .generate {
display: none !important;
}
}