/*
 * Redesign 2026 — home page sections.
 *
 * Values here are taken from the inline styles in the handoff's
 * `Sharing SMS.dc.html`, which the README names as the source of truth for
 * exact values -- not from the README's prose description of them, which
 * differs in places (column counts, tile treatment, the calculator's sliders).
 *
 * Type is restated on the elements rather than inherited from a wrapper: Naxos
 * styles bare p/h2/h3/li, and a direct rule on an element beats inheritance from
 * however specific a container. Direction-agnostic properties throughout, so
 * Arabic and Urdu mirror without a second sheet.
 */

/* Every auto-fit track is minmax(min(Npx, 100%), 1fr), not minmax(Npx, 1fr).
   A bare minmax floor cannot shrink below itself: on a viewport narrower than
   the floor the track stays at N and the cards push past the container -- the
   "Why us" cards (420px floor) did exactly that at 375px. min() keeps the
   intended column behaviour on wide screens and lets the track collapse on
   narrow ones. */

/* ---------- Section scaffolding ---------- */

/* The page ground, stated explicitly: Naxos sets `section { background: #FFF }`,
   so a section that declares nothing comes out white and the mock's alternation
   between the page ground and the wash disappears. */
.ssr-sec {
	padding: clamp(56px, 8vw, 104px) 0;
	border-bottom: 1px solid var(--ss-hairline-soft);
	background: var(--ss-bg);
}
.ssr-sec--wash { background: var(--ss-wash); }
.ssr-wrap {
	max-width: var(--ss-max-wide);
	margin: 0 auto;
	padding: 0 var(--ss-pad-x);
}

.ssr-kicker {
	font-family: var(--ss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ss-accent-deep);
	margin: 0;
}
.ssr-kicker--warn { color: #9A6B0F; }
.ssr-kicker--sm { font-size: 11px; letter-spacing: .12em; color: var(--ss-muted-2); }
.ssr-kicker--accent { color: var(--ss-accent-deep); }

.ssr-h2 {
	font-family: var(--ss-font-ui);
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 700;
	line-height: var(--ss-lh-h2-tight);
	letter-spacing: -.03em;
	color: var(--ss-ink);
	margin: 16px 0 0;
	text-wrap: balance;
}
.ssr-h2--sm { font-size: clamp(30px, 3.2vw, 42px); line-height: var(--ss-lh-h2-sm); }
.ssr-h2--20ch { max-width: 20ch; }
.ssr-h2--24ch { max-width: 24ch; }
.ssr-h3 {
	font-family: var(--ss-font-ui);
	font-size: 20px;
	font-weight: 600;
	line-height: var(--ss-lh-h3);
	letter-spacing: -.01em;
	color: var(--ss-ink);
	margin: 0;
}
.ssr-lead {
	font-family: var(--ss-font-ui);
	font-size: 17px;
	line-height: var(--ss-lh-base);
	color: var(--ss-body-soft);
	margin: 18px 0 0;
	max-width: 70ch;
	text-wrap: pretty;
}
/* Lead measures vary per section in the mock: 66ch under "How it works",
   70ch elsewhere, none inside a head row. */
.ssr-lead--66ch { max-width: 66ch; }

/* Requirements and Partnership terms use a smaller, quieter lead than the
   section leads above them -- 16px on the muted ink, not 17px on the body ink. */
.ssr-lead--sm { font-size: 16px; color: var(--ss-muted); max-width: none; }
#requirements .ssr-lead--sm { margin-top: 20px; }

.ssr-note {
	font-family: var(--ss-font-ui);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ss-muted);
	margin: 20px 0 0;
	max-width: 80ch;
}
/* The closing note under the Demand grid is a size up from the one under the
   requirements list, and sits further from it. */
.ssr-note--lg { font-size: 16px; line-height: 1.65; margin-top: 28px; }
/* Two sizes of body column in the mock: 17px/gap 20 in "What is Sharing SMS",
   16px/gap 18 in "Our story" and the calculator's worked example. */
.ssr-prose--tight { display: grid; gap: 18px; }
.ssr-prose--tight p {
	font-family: var(--ss-font-ui);
	font-size: 16px;
	line-height: var(--ss-lh-base);
	color: var(--ss-body-soft);
	margin: 0;
	text-wrap: pretty;
}
.ssr-prose--lg { gap: 20px; }
.ssr-prose--lg p { font-size: 17px; }

.ssr-2col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(32px, 4vw, 56px);
	margin-top: 40px;
}
.ssr-2col--media { gap: clamp(32px, 4vw, 64px); align-items: center; margin-top: 0; }
.ssr-illus { display: block; width: 100%; height: auto; border-radius: var(--ss-r-lg); }

.ssr-headrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(32px, 4vw, 56px);
	align-items: end;
}
/* In the head row the lead is already column-width; the mock puts no measure
   cap on it there, unlike the standalone leads. */
.ssr-headrow .ssr-lead { margin: 0; max-width: none; }
.ssr-headrow--btn {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
}

.ssr-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

/* ---------- Buttons ---------- */

/* Three button sizes in the mock: 17/30 in the hero, 15/24 for section buttons
   ("Full instructions", "All questions"), 9/16 in the header. */
.ssr-btn--lg { font-size: 16px; padding: 17px 30px; border-radius: var(--ss-r-btn); }
.ssr-btn--md { font-size: 15px; padding: 15px 24px; border-radius: var(--ss-r-input); }
.ssr-btn--ghost.ssr-btn--lg { padding: 17px 26px; }
/* The totals button is a full-width block with even padding, not the hero's
   wide pill. */
.ssr-btn--block { width: 100%; padding: 18px; }

/* ---------- Hero ---------- */

.ssr-hero {
	background: var(--ss-bg);
	position: relative;
	padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 88px);
	border-bottom: 1px solid var(--ss-hairline-soft);
	overflow: hidden;
}
.ssr-hero__glow {
	position: absolute;
	top: -260px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 1100px;
	max-width: 150%;
	height: 560px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(124, 63, 212, .10), transparent 70%);
	pointer-events: none;
}
.ssr-hero__inner {
	position: relative;
	max-width: var(--ss-max-wide);
	margin: 0 auto;
	padding: 0 var(--ss-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: clamp(36px, 5vw, 64px);
	align-items: center;
}
.ssr-hero__h1 {
	font-family: var(--ss-font-ui);
	font-size: clamp(44px, 5.4vw, 74px);
	font-weight: 800;
	line-height: var(--ss-lh-h1);
	letter-spacing: -.035em;
	color: var(--ss-ink);
	margin: 26px 0 0;
	text-wrap: balance;
}
.ssr-hero__lead {
	font-family: var(--ss-font-ui);
	font-size: 19px;
	line-height: var(--ss-lh-lead);
	color: var(--ss-body-soft);
	margin: 22px 0 0;
	max-width: 52ch;
	text-wrap: pretty;
}
.ssr-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
.ssr-hero__cta--center { justify-content: center; }
.ssr-hero__media { position: relative; }
.ssr-hero__mediaglow {
	position: absolute;
	inset: 8% 14%;
	background: radial-gradient(60% 50% at 50% 40%, rgba(124, 63, 212, .16), transparent 72%);
	filter: blur(28px);
	pointer-events: none;
}
.ssr-hero__media img {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 265px;
	height: auto;
}

.ssr-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ss-accent-deep);
	background: rgba(124, 63, 212, .07);
	border: 1px solid rgba(124, 63, 212, .22);
	padding: 8px 14px;
	border-radius: var(--ss-r-pill);
	/* The mock's badge wrapped out of its pill in English at 1440px. Room for a
	   second line rather than a fixed height: every other language is longer. */
	max-width: 100%;
}
.ssr-badge__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-success); }

.ssr-ticks { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.ssr-ticks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ss-font-ui);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ss-body);
}
.ssr-tick {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: rgba(14, 143, 110, .11);
	color: var(--ss-success);
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Stats strip ---------- */

/* No vertical padding on the section: the cells' own 32px provides it, and the
   1px gaps over a hairline background are the dividers. The gap-background
   trick only works while the grid has no padding of its own -- padding there
   paints the whole strip and turns the section into a lilac slab. */
/* The page padding sits on the section, never on the grid: the grid's own
   background is what shows through its 1px gaps as the dividers, so padding
   there gets painted too -- a hairline-coloured band down both edges of the
   strip, outside the cells. */
.ssr-stats { padding: 0 var(--ss-pad-x); border-bottom: 1px solid var(--ss-hairline-soft); background: var(--ss-bg); }
.ssr-stats__inner {
	max-width: var(--ss-max-wide);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: 1px;
	background: var(--ss-hairline-soft);
}
.ssr-stat {
	background: var(--ss-bg);
	padding: 32px 24px;
	display: grid;
	grid-template-rows: 44px auto;
	align-content: start;
}
.ssr-stat:first-child { padding-inline-start: 0; }
.ssr-stat__v {
	font-family: var(--ss-font-mono);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--ss-ink);
}
/* Only the last value is nowrap in the mock -- "Android 6+" is the one that
   must not break. The others are short enough to wrap safely when translated. */
.ssr-stat:last-child .ssr-stat__v { white-space: nowrap; }
.ssr-stat__l { font-family: var(--ss-font-ui); font-size: 14px; line-height: 1.5; color: var(--ss-muted); }

/* ---------- Tiles (What is Sharing SMS) ---------- */

/* Separate bordered cards with a 16px gap -- not the hairline grid the demand
   section uses. The two blocks look alike in the README and are different in
   the mock. */
.ssr-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 16px;
	align-content: start;
}
.ssr-tiles li {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: 16px;
	padding: 24px;
}
.ssr-tiles .ssr-num {
	font-family: var(--ss-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	color: var(--ss-muted-2);
	display: block;
}
.ssr-tiles li > span:last-child {
	display: block;
	font-family: var(--ss-font-ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ss-ink-soft);
	margin-top: 14px;
}

/* ---------- Numbered hairline grid (Demand) ---------- */

.ssr-numgrid {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 1px;
	background: var(--ss-hairline);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-card);
	overflow: hidden;
}
.ssr-numgrid li {
	background: var(--ss-wash);
	padding: 30px 26px;
}
.ssr-numgrid .ssr-num {
	font-family: var(--ss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--ss-accent);
	display: block;
}
.ssr-numgrid li > span:last-child {
	display: block;
	font-family: var(--ss-font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ss-body);
	margin-top: 16px;
}

/* ---------- Calculator ---------- */

.ssr-calc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: 24px;
	margin-top: 44px;
	align-items: start;
}
.ssr-calc__controls {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-lg);
	padding: clamp(22px, 3vw, 32px);
	display: grid;
	gap: 26px;
}
.ssr-slider__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ssr-slider__top label { font-family: var(--ss-font-ui); font-size: 14px; font-weight: 500; line-height: 1; color: var(--ss-link-idle); }
.ssr-slider__top output { font-family: var(--ss-font-mono); font-size: 16px; font-weight: 500; line-height: 1; color: var(--ss-ink); }
.ssr-slider__rail { position: relative; margin-top: 12px; height: 26px; display: flex; align-items: center; }
.ssr-slider__rail::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 4px;
	border-radius: var(--ss-r-pill);
	background: #E2DBEF;
}
.ssr-slider__fill {
	position: absolute;
	inset-inline-start: 0;
	height: 4px;
	border-radius: var(--ss-r-pill);
	background: var(--ss-accent);
}

/* Naxos sets height/border/background/padding on every input with !important,
   which drew a text-field box around each slider and hid the filled track. A
   more specific selector loses to !important, so the reset carries it too --
   the only !important in this stylesheet, and only to undo the parent's. */
body.ssr .ssr-calc input[type="range"] {
	position: relative;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	padding: 0 !important;
	width: 100%;
	height: 26px !important;
	min-height: 0 !important;
	margin: 0 !important;
	cursor: pointer;
}
body.ssr .ssr-calc input[type="range"]:focus { background: transparent; border: 0; box-shadow: none; }
body.ssr .ssr-calc input[type="range"]:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 4px; }
body.ssr .ssr-calc input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--ss-accent);
	box-shadow: var(--ss-shadow-thumb);
}
body.ssr .ssr-calc input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--ss-accent);
	box-shadow: var(--ss-shadow-thumb);
}
/* Mono and ruled off from the sliders in the mock, not a plain caption. */
.ssr-calc__hint {
	font-family: var(--ss-font-mono);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ss-muted-2);
	margin: 26px 0 0;
	border-top: 1px solid var(--ss-hairline);
	padding-top: 18px;
}

.ssr-calc__totals { display: grid; gap: 16px; }
.ssr-total {
	background: linear-gradient(160deg, rgba(124, 63, 212, .10), rgba(124, 63, 212, .03));
	border: 1px solid rgba(124, 63, 212, .26);
	border-radius: var(--ss-r-lg);
	padding: clamp(22px, 3vw, 32px);
}
.ssr-total__v {
	font-family: var(--ss-font-mono);
	font-size: clamp(44px, 5vw, 62px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ss-ink);
	margin: 14px 0 0;
}
.ssr-total__sub { font-family: var(--ss-font-ui); font-size: 15px; line-height: 1.5; color: var(--ss-body-soft); margin: 10px 0 0; }
.ssr-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; }
.ssr-fig {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-card);
	padding: 24px;
}
.ssr-fig__v { font-family: var(--ss-font-mono); font-size: 28px; font-weight: 500; line-height: 1; color: var(--ss-ink); margin: 12px 0 0; }
.ssr-fig__v--pos { color: var(--ss-success); }
.ssr-unit { font-size: .8em; }

.ssr-example {
	margin-top: 24px;
	background: var(--ss-wash);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-lg);
	padding: clamp(22px, 3vw, 32px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}
.ssr-example__label {
	font-family: var(--ss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ss-accent-deep);
	white-space: nowrap;
	margin: 0;
}
.ssr-2col--media .ssr-prose--tight { margin-top: 24px; }
.ssr-example .ssr-prose--tight { gap: 14px; }
.ssr-example .ssr-prose--tight p { font-size: 16px; line-height: 1.65; }
/* The mock sets the closing sentence apart -- weight 500 on the darker ink. */
.ssr-example .ssr-prose--tight p:last-child { font-weight: 500; color: var(--ss-ink-soft); }

/* ---------- How it works ---------- */

.ssr-cards3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	margin-top: 44px;
	align-items: stretch;
}
.ssr-card {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-lg);
	padding: clamp(24px, 3vw, 30px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(25, 18, 35, .03);
}
/* H3 rides tighter inside a card header than it does standing alone:
   1.2 there, 1.3 in the advantage cards. */
.ssr-card__head .ssr-h3 { line-height: var(--ss-lh-h3-tight); }
.ssr-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ss-accent-tint);
}
.ssr-chip {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(124, 63, 212, .25);
	background: rgba(124, 63, 212, .07);
	color: var(--ss-accent-deep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ss-font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}
.ssr-card__intro {
	font-family: var(--ss-font-ui);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ss-muted);
	margin: 20px 0 0;
}
/* margin-block-start:auto pins the closing line to the card's bottom edge, so
   cards of different list lengths still line up. */
.ssr-card__foot {
	font-family: var(--ss-font-ui);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ss-muted);
	margin: auto 0 0;
	padding-top: 20px;
}
.ssr-card__foot em { font-style: italic; }
.ssr-dots { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.ssr-dots li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.ssr-dots li > span:last-child {
	font-family: var(--ss-font-ui);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ss-body);
}
.ssr-dot { margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-accent); }

/* ---------- Requirements / partnership lists ---------- */

.ssr-reqs {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--ss-hairline);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-card);
	overflow: hidden;
}
.ssr-split .ssr-reqs { margin-top: 0; }
.ssr-req {
	background: var(--ss-surface);
	padding: 22px clamp(18px, 3vw, 26px);
	display: flex;
	gap: 16px;
	align-items: flex-start;
	font-family: var(--ss-font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ss-body);
}
.ssr-sec--wash .ssr-req { background: var(--ss-wash); }
/* The partnership list sits in a narrower column than the requirements one, and
   the mock tightens its side padding to match: 24px against 26px. */
.ssr-reqs--tight .ssr-req { padding-inline: clamp(18px, 3vw, 24px); }
.ssr-req .ssr-tick { margin-top: 2px; }
.ssr-req--warn {
	background: var(--ss-warning-wash);
	color: var(--ss-warning-text);
	font-weight: 500;
	padding-block: 24px;
	box-shadow: inset 4px 0 0 var(--ss-warning);
}
.ssr-sec--wash .ssr-req--warn { background: var(--ss-warning-wash); }
:root:lang(ar) .ssr-req--warn, :root:lang(ur) .ssr-req--warn { box-shadow: inset -4px 0 0 var(--ss-warning); }
.ssr-warn {
	flex: none;
	margin-top: 1px;
	width: 22px;
	height: 22px;
	border-radius: var(--ss-r-chip);
	background: var(--ss-warning);
	color: #fff;
	font-family: var(--ss-font-ui);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Seven steps ---------- */

.ssr-steps {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: 20px;
}
.ssr-step {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-card);
	padding: 26px;
	display: grid;
	grid-template-rows: auto 170px auto;
	gap: 18px;
	align-content: start;
}
.ssr-step img { display: block; width: 100%; height: 170px; object-fit: contain; }
.ssr-step .ssr-num { font-family: var(--ss-font-mono); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ss-accent); }
.ssr-step > span:last-child { font-family: var(--ss-font-ui); font-size: 16px; line-height: 1.55; color: var(--ss-body); }

/* Step seven is a full-width tinted panel with the image beside the copy, not
   another card in the run. */
.ssr-step--feature {
	grid-column: 1 / -1;
	background: linear-gradient(120deg, rgba(124, 63, 212, .10), rgba(124, 63, 212, .02));
	border-color: rgba(124, 63, 212, .24);
	grid-template-rows: none;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 24px;
	align-items: center;
	align-content: stretch;
}
.ssr-step--feature > div { display: grid; gap: 14px; }
.ssr-step--feature .ssr-num { color: var(--ss-accent-deep); }
.ssr-step__lead {
	font-family: var(--ss-font-ui);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ss-ink);
}

/* ---------- Why us ---------- */

.ssr-adv {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 20px;
}
.ssr-adv__i {
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-lg);
	padding: clamp(24px, 3vw, 32px);
	display: grid;
	gap: 16px;
	align-content: start;
	box-shadow: 0 1px 2px rgba(25, 18, 35, .03);
}
.ssr-adv__i .ssr-num { font-family: var(--ss-font-mono); font-size: 12px; font-weight: 500; line-height: 1; color: var(--ss-accent); }
.ssr-adv__i p {
	font-family: var(--ss-font-ui);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ss-body-soft);
	margin: 0;
	text-wrap: pretty;
}

/* ---------- FAQ preview ---------- */

.ssr-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}
.ssr-faq__side { position: sticky; top: 104px; }
.ssr-faq__side .ssr-btn { margin-top: 26px; }
.ssr-faq__list {
	display: grid;
	gap: 1px;
	background: var(--ss-hairline);
	border: 1px solid var(--ss-hairline);
	border-radius: var(--ss-r-card);
	overflow: hidden;
}
.ssr-faq__list details { background: var(--ss-wash); }
.ssr-faq__list summary {
	padding: 22px clamp(18px, 3vw, 28px);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-family: var(--ss-font-ui);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ss-ink);
}
.ssr-faq__list summary::-webkit-details-marker { display: none; }
.ssr-chev { flex: none; color: var(--ss-accent); font-size: 20px; line-height: 1; transition: transform .2s; }
.ssr-faq__list details[open] .ssr-chev { transform: rotate(45deg); }
.ssr-faq__list details > div {
	padding: 0 clamp(18px, 3vw, 28px) 26px;
	display: grid;
	gap: 14px;
	max-width: 80ch;
}
.ssr-faq__list details p {
	font-family: var(--ss-font-ui);
	font-size: 16px;
	line-height: var(--ss-lh-base);
	color: var(--ss-muted);
	margin: 0;
}

/* ---------- Closing CTA ---------- */

.ssr-cta {
	padding: clamp(56px, 8vw, 96px) var(--ss-pad-x);
	border-top: 1px solid var(--ss-hairline-soft);
	background-color: var(--ss-bg);
	background-image: radial-gradient(80% 130% at 50% 0%, rgba(124, 63, 212, .10), transparent 65%);
	text-align: center;
}
.ssr-cta__inner { max-width: 760px; margin: 0 auto; }
/* The closing headline runs a touch larger than the section H2s, and its lead is
   18px on a 48ch measure rather than the 17px/70ch used up the page. */
.ssr-cta .ssr-h2 { font-size: clamp(32px, 3.8vw, 50px); margin: 0; }
.ssr-cta .ssr-lead {
	font-size: 18px;
	line-height: var(--ss-lh-lead);
	max-width: 48ch;
	margin: 20px auto 0;
}
.ssr-cta .ssr-hero__cta { margin-top: 34px; }
.ssr-cta .ssr-btn--solid { padding: 18px 32px; }
.ssr-cta .ssr-btn--ghost { padding: 18px 28px; }