/* ==========================================================================
DEKA CARE — Warranty Extension Program (page 5318)
Page-scoped: every rule sits under .care-page, so nothing here can reach
another page. Enqueued for 5318 only (functions.php), after pages.css.
Reuses the shipped system rather than inventing one:
- section heads = the .lp-eyebrow / .lp-h2 / .lp-lead pattern (laser.css)
- icon tile = .lp-card__icon — a BRASS glyph on an INK tile. Brass is
the one warm accent and lives only on dark surfaces; the
ink tile IS that dark surface. This is the only way brass
legally appears on a light page.
- ink panel = .lp-impact (brass mono label + brass checklist ticks)
- numbered steps = .ha-steps (home-alt-v2) — ported WHOLESALE, dark band and
all: brass numeral, wordmark, foot pill. Brass is legal
because the band is ink.
Grounds alternate ivory / bone. Dark ink is used exactly three times:
the cost disc, the DEKA Care side of the comparison, and the steps band.
SIX sections, not nine. Content that belongs together shares a row rather
than getting a band of its own — the checklist sits BESIDE the cost disc, and
the comparison carries "what you gain" / "without DEKA Care" beneath it. The
original page paired its content this way; stacking every idea in its own
full-width band is what made the first rebuild feel spread thin. The steps
band's foot pill carries the terminal CTA, so there is no separate CTA band.
========================================================================== */
/* --- Section shells ------------------------------------------------------- */
.care-page .care-section { padding: clamp(72px, 9vw, 120px) 0; background: var(--deka-ivory); }
.care-page .care-section--bone { background: var(--deka-bone); }
.care-page .care-section--ink { background: var(--deka-ink); color: var(--deka-ivory); }
/* --- Section heads (the .lp-eyebrow / .lp-h2 / .lp-lead pattern) ---------- */
.care-page .care-eyebrow {
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--deka-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 10px;
}
.care-page .care-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--deka-ink); }
.care-page .care-h2 {
font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.08; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 16px; text-wrap: balance;
}
/* Emphasis is italic, never colored — ink is already the accent. */
.care-page .care-h2 em { font-style: italic; }
@media (min-width: 1000px) { .care-page .care-h2 { font-size: var(--deka-h2); } }
.care-page .care-lead { font-size: 16px; line-height: 1.7; color: var(--hm-muted, rgba(4, 5, 65, 0.72)); margin-top: 16px; max-width: 60ch; }
.care-page .care-head--center { max-width: 62ch; margin: 0 auto; text-align: center; }
.care-page .care-head--center .care-lead { max-width: none; margin-left: auto; margin-right: auto; }
/* Heads on the ink grounds. */
.care-page .care-section--ink .care-eyebrow { color: var(--deka-brass); }
.care-page .care-section--ink .care-eyebrow::before { background: var(--deka-brass); }
.care-page .care-section--ink .care-h2 { color: var(--deka-ivory); }
.care-page .care-section--ink .care-lead { color: rgba(245, 244, 239, 0.75); }
/* --- Hairline-ruled lists ------------------------------------------------- */
.care-page .care-list { list-style: none; padding: 0; margin: 32px 0 0; max-width: 62ch; }
.care-page .care-list li {
position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--deka-rule);
font-size: 16px; line-height: 1.6; color: var(--deka-ink);
}
.care-page .care-list li:last-child { border-bottom: 0; }
/* Plain: a hairline dash, not a bullet. */
.care-page .care-list--plain li::before {
content: ''; position: absolute; left: 0; top: 26px; width: 14px; height: 1px; background: var(--deka-rule);
}
/* Check: ink tick on a light ground (brass would be a violation here). */
.care-page .care-list--check li::before {
content: ''; position: absolute; left: 0; top: 17px; width: 16px; height: 16px; background: var(--deka-ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Cross: the absence of cover. Shape carries the meaning, not hue. */
.care-page .care-list--x li { color: var(--hm-muted, rgba(4, 5, 65, 0.72)); }
.care-page .care-list--x li::before {
content: ''; position: absolute; left: 0; top: 18px; width: 14px; height: 14px; background: var(--deka-ink); opacity: 0.45;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* --- Cards (the .lp-practice .lp-card lift + icon tile) ------------------- */
.care-page .care-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px; margin-top: clamp(40px, 5vw, 60px);
}
.care-page .care-card {
padding: 30px 26px; border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
border: 1px solid rgba(4, 5, 65, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -20px rgba(4, 5, 65, 0.30);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.care-page .care-card:hover {
transform: translateY(-3px); border-color: rgba(4, 5, 65, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 26px 50px -30px rgba(4, 5, 65, 0.40);
}
.care-page .care-card h3 {
font-family: var(--deka-serif); font-weight: 400; font-size: 20px; letter-spacing: -0.01em;
color: var(--deka-ink); margin-bottom: 8px;
}
.care-page .care-card p { font-size: 14px; line-height: 1.6; color: var(--hm-muted, rgba(4, 5, 65, 0.72)); margin: 0; }
/* The ink tile is the dark surface that licenses the brass glyph. */
.care-page .care-card__icon {
width: 46px; height: 46px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--deka-ink); color: var(--deka-brass);
font-size: 18px; line-height: 1; margin-bottom: 20px;
transition: transform .25s ease;
}
.care-page .care-card:hover .care-card__icon { transform: scale(1.06); }
/* The one line the section is really making. Centred, with hairline bookends —
left-aligned under a full-width strip it just floated with nothing to hold it. */
.care-page .care-pull {
display: flex; align-items: center; justify-content: center;
gap: clamp(16px, 3vw, 34px);
margin: clamp(44px, 5vw, 64px) auto 0; max-width: 64ch;
text-align: center;
font-family: var(--deka-serif); font-style: italic; font-weight: 300;
font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; color: var(--deka-ink);
}
.care-page .care-pull::before,
.care-page .care-pull::after {
content: ''; flex: 1 1 0; max-width: 120px; height: 1px; background: var(--deka-rule);
}
/* --- THE PROGRAM: dark-purple band with the laser lineup bleeding off the right
Reuses the site's sanctioned dark gradient (the .laser-hero overlay: a cobalt
radial glow over an ink linear gradient) rather than inventing a new one. That
cobalt is a GRADIENT GLOW on a dark surface, not an accent colour — it does not
reintroduce the retired brand blue, which is a rule about *emphasis*.
The image gets the same treatment as the steps section's DEKA wordmark: pinned
top-right of the container's content box via a zero-height in-flow wrapper, and
masked so it fades away downward. A photo also needs a LEFT fade the wordmark
doesn't — without it the image would have a hard vertical edge running through
the band — so the two masks are composited with `intersect`.
Everything in this section is LEFT-aligned; the cards and the Included strip
switch to translucent-on-dark, and the brass stays legal because the ground is
dark throughout. */
.care-page .care-program { position: relative; overflow: hidden; }
.care-page .care-program::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 78% 30%, rgba(43, 82, 159, 0.45), transparent 60%),
linear-gradient(180deg, rgba(4, 5, 65, 0.92) 0%, rgba(4, 5, 65, 0.75) 50%, rgba(4, 5, 65, 0.97) 100%);
}
.care-page .care-program > .container { position: relative; z-index: 1; }
/* zero-height in-flow block → its box IS the container's content box, so the
image's right:0 resolves against the inner content at every breakpoint. */
.care-page .care-program-markwrap { position: relative; height: 0; z-index: 0; }
.care-page .care-program-mark {
position: absolute; top: -4%; right: 0;
width: 44%; height: auto; display: block;
opacity: 0.55;
-webkit-mask-image:
linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 55%, transparent 100%),
linear-gradient(to left, #000 40%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 55%, transparent 100%),
linear-gradient(to left, #000 40%, transparent 100%);
mask-composite: intersect;
pointer-events: none; user-select: none;
}
/* keep the real content above the image */
.care-page .care-program .care-head,
.care-page .care-program .care-cards,
.care-page .care-program .care-included,
.care-page .care-program .care-pull { position: relative; z-index: 1; }
/* Left-aligned, and held clear of the image on desktop. */
.care-page .care-program .care-head { max-width: 54ch; margin: 0; text-align: left; }
.care-page .care-program .care-lead { margin-left: 0; margin-right: 0; }
/* Cards on the dark ground: translucent, not the white lifted card. */
.care-page .care-program .care-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--deka-rule-light);
box-shadow: none;
}
.care-page .care-program .care-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(245, 244, 239, 0.28);
box-shadow: none;
}
.care-page .care-program .care-card h3 { color: var(--deka-ivory); }
.care-page .care-program .care-card p { color: rgba(245, 244, 239, 0.72); }
/* the tile is already a dark surface; lift it off the band so it still reads */
.care-page .care-program .care-card__icon {
background: rgba(255, 255, 255, 0.08); color: var(--deka-brass);
}
/* the ink strip would vanish on ink — make it translucent instead */
.care-page .care-program .care-included {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--deka-rule-light);
}
.care-page .care-program .care-pull { color: var(--deka-ivory); }
.care-page .care-program .care-pull::before,
.care-page .care-program .care-pull::after { background: var(--deka-rule-light); }
/* --- "Included": the benefits, as a compact ink strip ---------------------
These were three icon tiles and three titles adrift in a full band of empty
ivory — no structure, nothing to hold the eye. As a dark strip inside the
program section they are dense, legible, and earn a brass tick each. The band
they used to occupy is gone. */
.care-page .care-included {
display: flex; align-items: center; flex-wrap: wrap;
gap: clamp(20px, 3vw, 44px);
margin-top: clamp(40px, 5vw, 56px);
padding: 26px clamp(24px, 3vw, 34px);
border-radius: 18px;
background: var(--deka-ink); color: var(--deka-ivory);
}
.care-page .care-included-label {
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--deka-brass); flex: none;
}
.care-page .care-included ul {
flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
list-style: none; margin: 0; padding: 0;
}
.care-page .care-included li {
display: flex; align-items: center; gap: 12px;
padding: 2px clamp(14px, 2vw, 26px);
font-size: 15px; line-height: 1.4; color: rgba(245, 244, 239, 0.92);
}
/* A hairline between items. In equal 1fr columns a short label left a big hole
before the next tick and the spacing read as slack; the rule makes it structure. */
.care-page .care-included li + li { border-left: 1px solid var(--deka-rule-light); }
.care-page .care-included li::before {
content: ''; flex: none; width: 15px; height: 15px; background: var(--deka-brass);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Standalone sub-head (maintenance checklist, "what you gain", "without"). */
.care-page .care-gain-title {
font-family: var(--deka-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.25; letter-spacing: -0.01em; color: var(--deka-ink); margin: 0;
}
/* --- Paired two-column rows (the original page's rhythm) ------------------ */
/* Checklist left, cost disc right — they belong in one row, not two bands. */
.care-page .care-split {
display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px);
align-items: center;
}
/* "What you gain" beside "Without DEKA Care" — the trade, stated side by side. */
.care-page .care-duo {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px);
margin-top: clamp(48px, 6vw, 76px); padding-top: clamp(40px, 5vw, 56px);
border-top: 1px solid var(--deka-rule);
}
.care-page .care-duo .care-list { margin-top: 20px; }
/* --- The cost disc -------------------------------------------------------- */
/* INFALLIBLY circular, and the content always fits:
1. aspect-ratio:1 over a single-axis inline-size — the height is DERIVED,
never authored, so the box cannot become an oval.
2. The disc is a container (container-type: inline-size); .care-cost-inner
and everything in it is sized in cqi (% of the DISC's width), so the
content scales WITH the circle and can never outgrow it.
The padding MUST NOT live on .care-cost itself. An element cannot query
itself: a cqi padding on the disc resolved against the VIEWPORT instead
(12cqi = 12% of 1440px = 172.8px per side), which crushed the disc's content
box to ~2px — and because child cqi units resolve against the container's
CONTENT box, every font-size then computed to 0px and the disc rendered
completely empty. The inset belongs on the inner wrapper, which CAN legally
query the disc. Do not move it back. */
.care-page .care-cost {
inline-size: clamp(250px, 27vw, 340px);
aspect-ratio: 1;
min-height: 0;
container-type: inline-size;
margin: 0 auto;
border-radius: 50%;
background: var(--deka-ink); color: var(--deka-ivory);
border: 1px solid var(--deka-brass);
box-shadow: 0 30px 60px -34px rgba(4, 5, 65, 0.55);
display: grid; place-items: center;
}
/* 72% of the diameter — the widest square that sits comfortably inside a circle
with room for descenders. Everything below is in cqi, so it all rescales. */
.care-page .care-cost-inner {
inline-size: 72cqi;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
}
.care-page .care-cost-label {
font-family: var(--deka-mono); font-size: 3.4cqi; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--deka-brass);
margin: 0 0 4cqi;
}
.care-page .care-cost-value {
font-family: var(--deka-serif); font-weight: 300; font-size: 9cqi;
line-height: 1.1; letter-spacing: -0.01em; color: var(--deka-ivory);
margin: 0; text-wrap: balance;
}
.care-page .care-cost-note {
font-family: var(--deka-mono); font-size: 2.9cqi; letter-spacing: 0.1em;
text-transform: uppercase; line-height: 1.45;
color: rgba(245, 244, 239, 0.72); margin: 1.6cqi 0 0;
}
.care-page .care-cost-rule {
inline-size: 14cqi; block-size: 1px; background: var(--deka-rule-light);
margin: 4.5cqi 0; flex: none;
}
/* --- Comparison: ink panel vs. bone card ---------------------------------- */
.care-page .care-compare-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 40px);
align-items: stretch; margin-top: clamp(40px, 5vw, 60px);
}
/* The .lp-impact panel: brass mono label, brass ticks, on ink. */
.care-page .care-panel { background: var(--deka-ink); color: var(--deka-ivory); border-radius: 18px; padding: 34px 32px; }
.care-page .care-panel h3 {
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--deka-brass); margin-bottom: 20px;
}
.care-page .care-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.care-page .care-panel li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: rgba(245, 244, 239, 0.9); }
.care-page .care-panel li::before {
content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background: var(--deka-brass);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* The manufacturer's warranty: a flat bone card. The weight difference IS the argument. */
.care-page .care-compare-card { background: var(--deka-bone); border: 1px solid var(--deka-rule); border-radius: 16px; padding: 34px 32px; }
.care-page .care-compare-card h3 {
font-family: var(--deka-serif); font-weight: 400; font-size: 20px; letter-spacing: -0.01em;
color: var(--deka-ink); margin-bottom: 20px;
}
.care-page .care-compare-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.care-page .care-compare-card li {
position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5;
color: var(--hm-muted, rgba(4, 5, 65, 0.72));
}
.care-page .care-compare-card li::before {
content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: var(--deka-ink); opacity: 0.45;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.care-page .care-gain { max-width: 62ch; }
.care-page .care-gain h3 {
font-family: var(--deka-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.25; letter-spacing: -0.01em; color: var(--deka-ink); margin-bottom: 14px;
}
.care-page .care-gain p { font-size: 16px; line-height: 1.75; color: var(--hm-muted, rgba(4, 5, 65, 0.72)); margin: 0; }
.care-page .care-gain strong { font-weight: 500; color: var(--deka-ink); }
/* --- Enrollment steps — PORTED FROM THE HOMEPAGE (.ha-steps, home-alt-v2.css)
Same dark band, same 14px cards on rgba(255,255,255,.03), same serif numeral
with a BRASS period, same description pinned to the card foot, same decorative
DEKA wordmark bleeding off the top-right, same foot pill.
The homepage's brass numeral works here because this band is INK — on the
earlier bone version the brass had to be downgraded to ink to stay legal.
The foot pill carries the page's terminal CTA, so the steps band IS the close
and no separate CTA band is stacked behind it. */
.care-page .care-steps { background: var(--deka-ink); color: var(--deka-ivory); padding: clamp(90px, 10vw, 130px) 0; }
.care-page .care-steps > .container { position: relative; }
/* Zero-height in-flow block, so its box IS the container's content box — the
mark's right:0 / width:50% resolve against the inner content, not the padding
box, and stay correct at every breakpoint. */
.care-page .care-steps-markwrap { position: relative; height: 0; z-index: 0; }
.care-page .care-steps-mark {
position: absolute; top: 0; right: 0;
width: 50%; height: auto; display: block;
opacity: 0.5;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
pointer-events: none; user-select: none;
}
.care-page .care-steps-head,
.care-page .care-steps-grid,
.care-page .care-steps-foot { position: relative; z-index: 1; }
/* Mobile: the markwrap is the container's first child, so top:0 drops the
wordmark exactly where the kicker sits — on a narrow column they collide.
Push it clear. Still absolutely positioned; only the offset changes. */
@media (max-width: 760px) {
.care-page .care-steps-mark { top: 3rem; }
}
.care-page .care-steps-head { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.care-page .care-steps-head .care-eyebrow {
grid-column: 1 / -1;
font-size: 11px; letter-spacing: 0.16em;
color: rgba(245, 244, 239, 0.72);
}
/* the homepage's brass dot, not the hairline dash used on the light sections */
.care-page .care-steps-head .care-eyebrow::before {
width: 7px; height: 7px; border-radius: 999px;
background: var(--deka-brass); flex: none;
}
.care-page .care-steps-head h2 {
font-family: var(--deka-serif); font-weight: 300;
font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.02em;
color: var(--deka-ivory); margin-top: 18px;
}
.care-page .care-steps-head h2 em { font-style: italic; }
/* the rule that runs off to the right of the headline */
.care-page .care-steps-head::after {
content: ''; height: 1px; background: var(--deka-rule-light);
align-self: end; margin-bottom: 16px;
}
.care-page .care-steps-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(40px, 5vw, 64px);
}
.care-page .care-steps .care-step {
display: flex; flex-direction: column; min-height: 240px;
padding: 28px 26px; border: 1px solid var(--deka-rule-light);
border-radius: 14px; background: rgba(255, 255, 255, 0.03);
}
.care-page .care-steps .care-step-no {
font-family: var(--deka-serif); font-weight: 300; font-size: 30px;
color: var(--deka-ivory); letter-spacing: 0.02em;
}
.care-page .care-steps .care-step-no span { color: var(--deka-brass); }
.care-page .care-steps .care-step h3 {
font-family: var(--deka-serif); font-weight: 300; font-size: 22px;
line-height: 1.2; color: var(--deka-ivory); margin-top: 10px;
}
/* description pinned to the card foot */
.care-page .care-steps .care-step p {
margin-top: auto; padding-top: 28px; font-size: 14.5px;
line-height: 1.6; color: rgba(245, 244, 239, 0.72);
}
/* --- Foot pill: the page's close (the homepage's .ha-steps-foot) ----------- */
.care-page .care-steps-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 28px; flex-wrap: wrap; margin-top: clamp(18px, 2vw, 26px);
padding: 16px 16px 16px 26px; border: 1px solid var(--deka-rule-light);
border-radius: 999px; background: rgba(255, 255, 255, 0.03);
}
/* Real clinicians who run these lasers — the homepage's trust stack. */
.care-page .care-steps-foot-lead { display: flex; align-items: center; gap: 18px; }
.care-page .care-avatars { display: flex; flex: none; }
/* portraits are square 150x150 → cover is safe here */
.care-page .care-avatars img {
width: 44px; height: 44px; border-radius: 999px; object-fit: cover;
border: 2px solid var(--deka-ink); display: block;
}
.care-page .care-avatars img + img { margin-left: -20px; }
/* margin:0 — the inherited paragraph bottom-margin offsets the flex centering
and drops the copy low against the avatar stack. */
.care-page .care-steps-foot p { font-size: 15px; line-height: 1.5; color: rgba(245, 244, 239, 0.86); margin: 0; }
.care-page .care-steps-foot p em { font-family: var(--deka-serif); font-style: italic; }
.care-page .care-steps-cta {
display: inline-flex; align-items: center; gap: 14px;
padding: 12px 12px 12px 26px; border-radius: 999px;
background: var(--deka-brass); color: var(--deka-ink);
font-weight: 600; font-size: 14px; white-space: nowrap;
transition: transform .25s ease, filter .25s ease;
}
.care-page .care-steps-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.care-page .care-steps-cta-ico {
width: 34px; height: 34px; border-radius: 999px; flex: none;
background: var(--deka-ink); color: var(--deka-ivory);
display: inline-flex; align-items: center; justify-content: center;
}
/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
.care-page .care-included ul { grid-template-columns: 1fr; gap: 14px; }
.care-page .care-included li { padding-left: 0; }
.care-page .care-included li + li { border-left: 0; }
.care-page .care-split { grid-template-columns: 1fr; }
.care-page .care-duo { grid-template-columns: 1fr; }
.care-page .care-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) { .care-page .care-steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
.care-page .care-program-mark { display: none; }
.care-page .care-program .care-head { max-width: none; }
}
@media (max-width: 760px) {
.care-page .care-steps-head { grid-template-columns: 1fr; }
.care-page .care-steps-head::after { display: none; }
.care-page .care-steps-foot { border-radius: 20px; flex-direction: column; align-items: flex-start; padding: 20px; }
.care-page .care-steps-foot-lead { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 720px) {
.care-page .care-panel,
.care-page .care-compare-card { padding: 28px 24px; }
}
@media (max-width: 600px) {
.care-page .care-steps-grid { grid-template-columns: 1fr; }
.care-page .care-steps .care-step { min-height: 0; }
.care-page .care-steps .care-step p { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.care-page .care-card,
.care-page .care-card__icon,
.care-page .care-steps-cta { transition: none; }
.care-page .care-card:hover { transform: none; }
.care-page .care-card:hover .care-card__icon { transform: none; }
.care-page .care-steps-cta:hover { transform: none; }
}