on the nav
============================================================ */
/* ---- Nav: glassmorphism white capsule ----------------------
Replaces the canonical light theme's solid bone fill with a
frosted white capsule so the nav picks up the warm tones of
the page behind it (hero photography, beige cards). */
.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav,
.mkt-nav-wrap[data-nav-theme="light"][data-nav-stuck] .mkt-nav {
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border-color: rgba(255, 255, 255, 0.65);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 10px 32px -16px rgba(14, 15, 12, 0.10),
0 2px 8px -4px rgba(14, 15, 12, 0.06);
}
/* ---- Benefit cards: light beige body, no border, no fade ---
Replaces the canonical platinum-gray with a warm ivory tone
that aligns with the light hero palette. The 2px white border
reads as a stroke on light pages so it's stripped. The dark
gradient overlay at the bottom of the card photo (used to
anchor logos on busy photographs) is also removed since the
new card images are lighter and don't need it. */
/* How-it-works step cards keep the light beige */
.mkt-how__step {
background: #f3f2eb;
border: none;
}
/* Benefit cards: white fill with soft elevation, sitting on the
page's light-beige bg. Shorter photo area so the card reads as
a landscape banner rather than a portrait block. */
.mkt-benefit-card {
background: #ffffff;
border: none;
box-shadow:
0 1px 2px rgba(14, 15, 12, 0.04),
0 12px 32px -12px rgba(14, 15, 12, 0.12);
transition: box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mkt-benefit-card__visual {
height: 240px;
}
/* Inner photo scales on card hover; container clips so only the
image grows, not the whole card. */
.mkt-benefit-card__bg {
transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.mkt-benefit-card:hover {
box-shadow:
0 2px 6px rgba(14, 15, 12, 0.06),
0 28px 56px -16px rgba(14, 15, 12, 0.22);
}
.mkt-benefit-card:hover .mkt-benefit-card__bg {
transform: scale(1.05);
}
}
@media (prefers-reduced-motion: reduce) {
.mkt-benefit-card,
.mkt-benefit-card__bg { transition: none; }
.mkt-benefit-card:hover .mkt-benefit-card__bg { transform: none; }
}
/* Footer: horizontal layout — "At no cost" inline with "for Veteran
Strong members" instead of stacked. Restyled to match the wireframe
(mixed case, larger weight, no uppercase tracking). */
.mkt-benefit-card__price {
flex-direction: row;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
/* ============================================================
Graphic benefit card (.mkt-benefit-card__visual--graphic)
Rob (email, 2026-08-03): "can we try to go with a graphic treatment,
we will have gen jones video and the commercials will convey plenty of
people and veterans... by the time they get to the site, they should be
ready to become a member." So the photography leaves the benefit cards
and the panel becomes brand-forward: partner mark + icon on an olive
field, with the detail on roll-over instead of always-on.
============================================================ */
.mkt-benefit-card__visual--graphic {
height: 318px;
display: grid;
place-items: center;
gap: 20px;
background: var(--vs-olive, #4a5d3a);
/* Faint radial sunburst — the same device as the protection medals, so
the panel reads as crafted rather than a flat colour block. */
background-image:
repeating-conic-gradient(from 0deg at 50% 46%,
rgba(255, 255, 255, 0.016) 0deg 4deg, transparent 4deg 16deg),
radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, 0.085), transparent 66%);
isolation: isolate;
}
/* The photo + its scrim have no job in the graphic variant. */
.mkt-benefit-card__visual--graphic .mkt-benefit-card__bg,
.mkt-benefit-card__visual--graphic::after { display: none; }
/* Lockup — icon over the partner mark, centred. Both shift up and fade as
the roll-over panel comes in. */
.mkt-benefit-card__lockup {
display: grid;
justify-items: center;
gap: 20px;
padding: 0 28px;
transition:
transform 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
opacity 260ms ease;
}
.mkt-benefit-card__mark {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.mkt-benefit-card__mark svg { width: 30px; height: 30px; }
/* The partner mark sits in normal flow here (the photo variant absolutely
positions it bottom-left), so the positioning + halo are reset. */
.mkt-benefit-card__visual--graphic .mkt-benefit-card__logo-img {
position: static;
bottom: auto;
left: auto;
max-width: 100%;
object-position: center;
filter: none;
}
/* Roll-over — "what you get", sliding up over the panel. Additive detail:
the card's summary line stays in the body, so nothing essential is
hover-only. */
.mkt-benefit-card__reveal {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 32px;
background: linear-gradient(180deg, rgba(29, 35, 22, 0.94) 0%, rgba(22, 26, 16, 0.98) 100%);
transform: translateY(101%);
transition: transform 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
z-index: 3;
}
.mkt-benefit-card__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
width: 100%;
}
.mkt-benefit-card__list li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 14px;
align-items: start;
font-family: var(--vs-font-body);
font-size: var(--vs-mkt-small, 18px);
line-height: 1.4;
color: #ffffff;
}
.mkt-benefit-card__list svg { width: 22px; height: 22px; color: var(--vs-mkt-platinum, #d8d3c5); margin-top: 1px; }
@media (hover: hover) and (pointer: fine) {
.mkt-benefit-card:hover .mkt-benefit-card__reveal { transform: translateY(0); }
.mkt-benefit-card:hover .mkt-benefit-card__lockup {
transform: translateY(-16px);
opacity: 0;
}
}
/* No hover to roll over: show the detail in place, below the lockup. */
@media (hover: none), (pointer: coarse) {
.mkt-benefit-card__visual--graphic { height: auto; padding: 32px 0; }
.mkt-benefit-card__reveal {
position: static;
inset: auto;
transform: none;
background: none;
padding: 4px 28px 0;
}
.mkt-benefit-card__list li { color: rgba(255, 255, 255, 0.92); }
}
@media (prefers-reduced-motion: reduce) {
.mkt-benefit-card__reveal,
.mkt-benefit-card__lockup { transition: none; }
}
/* Value box — full-width card footer that reads as a structural part
of the card (like the photo at the top), not a floating box. Solid
olive band, large white FREE pill on the left, value statement to
its right. Inherits the card's bottom-rounded corners. */
.mkt-benefit-card__valuebox {
margin-top: auto;
padding: 22px 28px;
background: var(--vs-olive, #4a5d3a);
color: #ffffff;
display: flex;
align-items: center;
/* Pastel #53/#56 — the band is just the word FREE, centered; the
supporting line (and its divider) were retired. */
justify-content: center;
gap: 16px;
}
/* Pastel #33 — FREE is the band's headline (big display type, no pill). */
.mkt-benefit-card__tier {
flex-shrink: 0;
display: inline-flex;
align-items: center;
/* Graphik medium — tier labels are no longer Stratum anywhere (round 3). */
font-family: var(--vs-font-body, sans-serif);
font-size: var(--vs-mkt-h4, 40px);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
color: #ffffff;
}
/* .mkt-benefit-card__valuetext retired (Pastel #53/#56) — the band shows
only the centered FREE. */
.mkt-benefit-card__price-main {
font-size: 17px;
font-weight: 700;
text-transform: none;
letter-spacing: normal;
color: var(--vs-ink);
}
.mkt-benefit-card__price-sub {
margin: 0;
font-size: 15px;
color: var(--vs-ink-muted);
}
/* "How it works" — clean white bg. */
.mkt-how {
background: #ffffff;
}
/* "Your no-cost benefits" — bottom-up gradient of the same warm
tint that used to live on the How-it-works section, fading from
tinted at the bottom to transparent at the top. */
.mkt-benefits--section {
background: linear-gradient(0deg, rgba(243, 238, 224, 0.85) 0%, rgba(243, 238, 224, 0) 100%);
}
/* Bottom gradient overlay on the benefit-card photo — darker than
canonical so partner logos read crisply against busy photos. */
.mkt-benefit-card__visual::after {
background: linear-gradient(to top,
rgba(14, 15, 12, 0.85) 0%,
rgba(14, 15, 12, 0.55) 35%,
rgba(14, 15, 12, 0.20) 65%,
rgba(14, 15, 12, 0) 100%);
}
/* ---- "How it works" step numerals: editorial Stratum --------
Replaces the heavy black filled pill with a refined display
numeral in deep olive, anchored by a thin hairline accent. */
.mkt-how__num {
width: auto;
height: auto;
background: none;
border-radius: 0;
color: var(--vs-olive-deep);
font-family: var(--vs-font-display);
font-weight: 500;
font-size: 56px;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(63, 74, 42, 0.22);
display: inline-block;
place-items: unset;
align-self: flex-start;
min-width: 44px;
}
/* ---- Our Mission banner -------------------------------------
Wide rounded panel anchoring the brand story. Portrait sits on
the right column (sourced as
![]()
so it can be art-directed
with object-position). Dark veil gradient fades from left to
right, giving the text on the left a near-solid dark surface
for full readability and letting the photo fade in to the right. */
.mkt-mission {
padding: 64px 16px 96px;
background: transparent;
}
.mkt-mission__panel {
position: relative;
width: 100%;
max-width: 1520px;
margin: 0 auto;
min-height: clamp(480px, 60vh, 620px);
border-radius: 20px;
overflow: hidden;
isolation: isolate;
background: #1a2618;
color: #ffffff;
}
/* Footer bg — align with the benefit-card light beige so the
page closes on the same warm tone as the cards above. Keep the
canonical gradient fade so the footer eases into the page from
transparent rather than having a hard top edge. */
.mkt-footer {
background: linear-gradient(180deg, #f3f2eb 0%, rgba(243, 242, 235, 0) 100%);
}
/* FAQ section — match the mission panel's 1520px outer width
and drop the canonical 100px horizontal inner padding so the
visible content (title + accordion) spans the full 1520px. */
.mkt-have-q__inner {
max-width: 1520px;
padding: 80px 0;
}
/* --framed (home-2): align the FAQ to the Exclusive Partnership section
instead of the full-bleed mission width — same 1720px cap + matching
horizontal gutters (100 / 40 / 16 by breakpoint, mirroring .mkt-vs-fox). */
.mkt-have-q__inner--framed {
max-width: 1720px;
padding-left: 100px;
padding-right: 100px;
}
@media (max-width: 1280px) {
.mkt-have-q__inner--framed { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 768px) {
.mkt-have-q__inner--framed { padding-left: 16px; padding-right: 16px; }
}
.mkt-mission__bg {
position: absolute;
inset: 0;
background-image: url('../img/home/our-mission-chairman3.jpg');
background-size: cover;
background-position: center;
z-index: 0;
}
.mkt-mission__veil {
position: absolute;
inset: 0;
/* Darken only the left third where the text reads; leave the
subject + grounds on the right fully visible. */
background: linear-gradient(
90deg,
rgba(14, 20, 16, 0.85) 0%,
rgba(14, 20, 16, 0.70) 25%,
rgba(14, 20, 16, 0.35) 45%,
rgba(14, 20, 16, 0.08) 60%,
rgba(14, 20, 16, 0) 75%
);
pointer-events: none;
z-index: 1;
}
.mkt-mission__copy {
position: relative;
z-index: 3;
padding: clamp(72px, 8vw, 112px) clamp(32px, 7vw, 120px);
max-width: 720px;
display: flex;
flex-direction: column;
gap: 28px;
}
.mkt-mission__eyebrow {
line-height: var(--vs-mkt-overline-lh);
font-family: var(--vs-font-body);
font-weight: var(--vs-mkt-overline-weight);
/* Pastel #238/#246 — was 12px, "still too small". */
font-size: var(--vs-mkt-overline);
letter-spacing: var(--vs-mkt-overline-ls);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.mkt-mission__body {
font-family: var(--vs-font-body);
font-weight: 400;
font-size: clamp(20px, 1.6vw, 28px);
line-height: 1.45;
color: rgba(255, 255, 255, 0.94);
margin: 0;
max-width: 580px;
}
.mkt-mission__pullquote {
font-family: var(--vs-font-body);
font-weight: 700;
font-size: clamp(22px, 1.8vw, 30px);
line-height: 1.3;
color: #ffffff;
margin: 16px 0 0;
max-width: 520px;
}
/* Pastel #239/#247 — two lines (name + branch/rank, then title) so the
attribution can carry real size instead of one cramped 14px line. */
.mkt-mission__attr {
display: grid;
gap: 4px;
font-family: var(--vs-font-body);
font-size: var(--vs-mkt-small);
line-height: 1.35;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.82);
margin: 24px 0 0;
}
.mkt-mission__attr-name { font-weight: 600; }
.mkt-mission__attr-role { color: rgba(255, 255, 255, 0.7); }
.mkt-mission__attr-rule {
display: block;
width: 32px;
height: 1px;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.5);
}
@media (max-width: 880px) {
.mkt-mission__photo {
width: 100%;
height: 50%;
top: auto;
bottom: 0;
object-position: 50% 12%;
}
.mkt-mission__veil {
background: linear-gradient(
180deg,
rgba(26, 38, 24, 0.96) 0%,
rgba(26, 38, 24, 0.78) 40%,
rgba(26, 38, 24, 0.2) 100%
);
}
.mkt-mission__panel { min-height: 720px; }
}
/* ---- Partner logo marquee -----------------------------------
Continuous horizontal scroll of partner logos. Uniform soft-gray
silhouette across all logos (brightness(0) → black, then opacity
reduces to gray) so every brand reads as the same visual family.
Track holds the logo set duplicated; animation moves -50%,
producing a seamless infinite loop. */
.mkt-logo-strip {
padding: 56px 0;
background: transparent;
overflow: hidden;
}
/* Pastel #313 — the ticker now carries only brands that haven't gone live
yet, so it needs to say so. Static label above the moving track; Li is
fine with "Coming soon" repeating lower on the page where the categories
are described in full. */
.mkt-logo-strip__label {
margin: 0 0 32px;
text-align: center;
color: var(--vs-mkt-army-green, #4a5b2d);
}
.mkt-logo-strip__viewport {
/* Mask the edges so logos fade in / out smoothly. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
overflow: hidden;
}
.mkt-logo-strip__track {
display: flex;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
width: max-content;
animation: mkt-logo-strip-scroll 48s linear infinite;
}
@keyframes mkt-logo-strip-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.mkt-logo-strip__track { animation: none; }
}
.mkt-logo-strip__item {
flex: 0 0 auto;
padding: 0 56px;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.mkt-logo-strip__item img {
display: block;
height: 34px;
width: auto;
max-width: 220px;
object-fit: contain;
/* Uniform near-black silhouette across every brand (Pastel #32 —
darker shade approved over the earlier warm beige). brightness(0)
flattens each mark to black (alpha preserved); the opacity softens
it just off pure black so it doesn't outweigh the ink headlines.
Every brand ends up the EXACT same shade so visual weight only
varies with shape. */
filter: brightness(0);
opacity: 0.82;
transition: opacity 240ms ease;
}
/* Per-brand height calibration. Default is 34px (set above). Wide
wordmarks render shorter so they don't dominate horizontally;
stacked / badge marks render taller so they balance the visual
mass of a wordmark. Matched by src so both the original and
aria-hidden duplicate set pick up the same calibration. */
.mkt-logo-strip__item img[src*="card-fox"] { height: 40px; }
.mkt-logo-strip__item img[src*="card-afba"] { height: 40px; }
.mkt-logo-strip__item img[src*="coursera-wordmark"] { height: 24px; }
.mkt-logo-strip__item img[src*="auto-nation"] { height: 28px; }
.mkt-logo-strip__item img[src*="housing-adt"] { height: 30px; }
/* ---- Coming soon carousel (.mkt-soon) ------------------------
Full-width marquee of grayed-out, brand-free benefit-category
cards under the FREE benefits row on /home. Same duplicate-track
technique as .mkt-logo-strip (the second set is cloned by the
inline script in home.html); slow linear scroll, pauses on
hover, and degrades to a manual swipe strip when the visitor
prefers reduced motion. */
.mkt-soon {
padding: 96px 0 104px;
overflow: hidden;
}
.mkt-soon .mkt-benefits__head {
margin-bottom: 56px;
}
.mkt-soon__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
overflow: hidden;
}
.mkt-soon__track {
display: flex;
align-items: stretch;
gap: 24px;
margin: 0;
padding: 4px 0;
list-style: none;
width: max-content;
animation: mkt-soon-scroll 80s linear infinite;
}
.mkt-soon__viewport:hover .mkt-soon__track {
animation-play-state: paused;
}
@keyframes mkt-soon-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 12px)); }
}
@media (prefers-reduced-motion: reduce) {
.mkt-soon__track { animation: none; width: auto; }
.mkt-soon__viewport {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
/* No animation → no need for the cloned second set. */
.mkt-soon__track > [aria-hidden="true"] { display: none; }
}
.mkt-soon-card {
flex: 0 0 360px;
display: flex;
flex-direction: column;
background: #faf9f5;
border: 1px solid var(--vs-line, #e4e0d6);
border-radius: var(--radius-card, 16px);
overflow: hidden;
}
.mkt-soon-card__visual {
position: relative;
height: 200px;
overflow: hidden;
}
.mkt-soon-card__visual img {
width: 100%;
height: 100%;
object-fit: cover;
/* The gray-out: these benefits aren't live yet. */
filter: grayscale(1) brightness(1.04);
opacity: 0.85;
}
.mkt-soon-card__chip {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
border-radius: var(--radius-pill, 999px);
background: rgba(20, 22, 16, 0.78);
color: #f5f3ee;
font-size: var(--vs-mkt-tiny, 14px);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mkt-soon-card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mkt-soon-card__title {
margin: 0;
font-size: var(--vs-mkt-h7, 22px);
font-weight: 500;
letter-spacing: -0.3px;
line-height: 1.2;
color: var(--vs-ink-muted, #5c5e58);
}
.mkt-soon-card__text {
margin: 0;
font-size: var(--vs-mkt-small, 16px);
line-height: 1.5;
color: var(--vs-ink-muted, #5c5e58);
opacity: 0.85;
}
@media (max-width: 640px) {
.mkt-soon { padding: 64px 0 72px; }
.mkt-soon-card { flex-basis: 300px; }
.mkt-soon-card__visual { height: 168px; }
}
/* ---- Meaningful card (services grid) ------------------------
Card body picks up the home-2 light beige instead of pure white.
Border stripped to match the no-stroke aesthetic of home-2. The
__visual photo area has its own background, so swapping the
card-level bg only affects the body section underneath. */
.mkt-meaningful-card {
background: #f3f2eb;
border: none;
}
/* ---- Services side-by-side panel bg -------------------------
Canonical .mkt-more__split uses var(--vs-bg) = #ede8da, which
reads as a warm tan that clashes with the home-2 beige. Align
it to the same #f3f2eb used elsewhere on the light pages. */
.mkt-more__split {
background: #f3f2eb;
}
/* ---- Concierge panel photo crop -----------------------------
Canonical object-position: center right crops the face off the
top. Anchor to upper-right so the head stays visible. */
.mkt-concierge__photo {
object-position: 70% 18%;
}
/* ---- mkt-more brand logos -----------------------------------
Canonical sizes them to max-height: 48px and tints them pure
white via brightness(0) invert(1). On the bright photo
backgrounds (especially Education's library shot with its
overexposed windows), pure-white logos disappear into the
highlights. Three fixes:
1. Larger cap so they read at a glance (48 → 64px).
2. Wider max-width so wide wordmarks aren't cramped.
3. Heavier drop-shadow halo so they survive bright sections.
Per-brand calibration is left to canonical aspect-ratio rules. */
.mkt-more__brand {
min-height: 140px;
padding: 28px 12px;
}
.mkt-more__brand img {
max-height: 72px;
max-width: 100%;
filter:
brightness(0) saturate(100%) invert(100%)
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
opacity: 1;
}
/* Stronger scrim under the brand row — applied as a pseudo-element
on the photo container so the canonical category photo URLs stay
intact. Anchored to the bottom band where the logos sit. */
.mkt-more__visual { position: relative; }
.mkt-more__visual::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 180px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
z-index: 1;
}
.mkt-more__visual > .mkt-more__brands,
.mkt-more__visual > .mkt-more__tabs { position: relative; z-index: 2; }
/* ---- "Built around you" fox-card: image instead of solid black
Restores the standard image-card behaviour on the canonical
--note modifier (which deliberately blacks the card). Pages
using this card must supply the image at the canonical asset
path below. */
.mkt-vs-fox-card--note {
background: #1d2017;
}
.mkt-vs-fox-card--note .mkt-vs-fox-card__media {
background-image: url('../img/home/vs-fox-built-around-you.png');
background-size: cover;
background-position: center;
}
.mkt-vs-fox-card--note::after {
display: block;
}
.mkt-vs-fox-card--note .mkt-vs-fox-card__overlay {
inset: auto 0 0 0;
justify-content: flex-end;
}
/* ============================================================
Concierge feature (home-2 light) — replaces the old two-card
"Built around you" + "Your Account Concierge" row. One section:
concierge photo on the left, copy + CTA on the right. Width
matches the sibling FAQ section (1520px / 100px gutters).
============================================================ */
.mkt-concierge-feature__wrap {
max-width: 1520px;
margin: 96px auto 0;
background: #f3f2eb;
border-radius: 20px;
padding: 40px;
}
.mkt-concierge-feature {
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
gap: 48px;
align-items: center;
}
.mkt-concierge-feature__visual {
position: relative;
overflow: hidden;
border-radius: 16px;
aspect-ratio: 3 / 2;
background: #1d2017;
}
.mkt-concierge-feature__media {
position: absolute;
inset: 0;
background-image: url('../img/home/vs-fox-concierge.png');
background-size: cover;
background-position: center;
transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.mkt-concierge-feature__visual:hover .mkt-concierge-feature__media {
transform: scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.mkt-concierge-feature__media { transition: none; }
.mkt-concierge-feature__visual:hover .mkt-concierge-feature__media { transform: none; }
}
.mkt-concierge-feature__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 540px;
}
.mkt-concierge-feature__title {
margin: 16px 0 20px;
font-size: 36px;
line-height: 1.15;
letter-spacing: -0.6px;
font-weight: 600;
color: var(--vs-ink, #1d2017);
}
.mkt-concierge-feature__body {
margin: 0 0 32px;
font-size: 18px;
line-height: 1.55;
color: var(--vs-ink-muted, #4a4d44);
max-width: 48ch;
}
@media (max-width: 1280px) {
.mkt-concierge-feature__wrap { margin-top: 64px; padding: 48px; }
.mkt-concierge-feature { gap: 48px; }
}
@media (max-width: 960px) {
.mkt-concierge-feature__wrap { margin-top: 48px; padding: 32px; border-radius: 16px; }
.mkt-concierge-feature {
grid-template-columns: 1fr;
gap: 24px;
}
.mkt-concierge-feature__copy { max-width: 100%; }
.mkt-concierge-feature__title { font-size: 28px; }
.mkt-concierge-feature__visual { aspect-ratio: 16 / 10; }
}
/* ============================================================
Footer — light variant overrides. Newsletter swapped to the
right (cols now first child on the left). Legal links row
gains CA Privacy + "Your Privacy Choices" toggle.
============================================================ */
.mkt-footer__cols {
justify-content: flex-start;
}
.mkt-footer__privacy-choices {
display: inline-flex;
align-items: center;
gap: 8px;
}
.mkt-footer__privacy-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.mkt-footer__privacy-icon svg {
display: block;
}