/* Group B: solutions hub and solution pages. Scoped to .wapi-sec-solutions. Tokens come from wapi-layout.css; nothing new on :root. */

/* ---------- Store pages: the head field with a still scene (w-comp) cut per trade ---------- */
.wapi-sec-solutions .w-headfield__comp { grid-column: 1 / -1; margin-block-start: clamp(8px, 1.6vw, 20px); }
.wapi-sec-solutions .w-headfield__comp > .w-comp { inline-size: 100%; max-inline-size: 980px; margin-inline: auto 0; }
.wapi-sec-solutions .w-comp .w-scene { opacity: 1; visibility: visible; transform: none; filter: none; }
.wapi-sec-solutions .w-comp .w-scene__cap { color: var(--w-sun-ink); }
.wapi-sec-solutions .w-headfield .w-plan-line { margin-block-start: 0; font-weight: 600; }
.wapi-sec-solutions .w-headfield .w-checks { margin-block-start: 0; }

/* ---------- Hub: path links under the lead, then the compact organisations band ---------- */
.wapi-sec-solutions .w-page-head .w-paths { inline-size: 100%; max-inline-size: 760px; margin-block-start: 32px; }
/* the page head lifts every nav child above the h1 (for the crumbs); the path links are a nav too, so put them back after the actions */
.wapi-sec-solutions .w-page-head > .w-wrap > .w-paths { order: 2; }
.wapi-sec-solutions .w-path__d { grid-column: 2; font-size: var(--w-s-small); color: var(--w-ink-2); }
.wapi-sec-solutions .w-path--store::before, .wapi-sec-solutions .w-path--org::before { content: ""; inline-size: 12px; block-size: 12px; align-self: center; }
.wapi-sec-solutions .w-path--store::before { background: var(--w-sun); }
.wapi-sec-solutions .w-path--org::before { background: var(--w-sea); }

.wapi-sec-solutions .w-org { padding-block: clamp(56px, 6vw, 96px); }
.wapi-sec-solutions .w-org__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px clamp(32px, 4vw, 64px); align-items: center; }
.wapi-sec-solutions .w-org__intro { margin-block-start: 14px; }
.wapi-sec-solutions .w-org__points, .wapi-sec-solutions .w-org .w-points { margin-block-start: 28px; gap: 20px 32px; }
.wapi-sec-solutions .w-org__req { margin-block-start: 24px; }
.wapi-sec-solutions .w-org__not { margin-block-start: 14px; }
.wapi-sec-solutions .w-org .w-actions { margin-block-start: 22px; }
.wapi-sec-solutions .w-org__media { position: static; }
.wapi-sec-solutions .w-org__media .w-shot__crop { max-inline-size: 440px; }

/* ---------- "The plan we suggest": two or three tiers typed in content ---------- */
.wapi-sec-solutions .w-tiers { gap: 10px; align-items: stretch; margin-block-start: 28px; }
.wapi-sec-solutions .w-tiers .w-tier { min-block-size: 0; padding: 24px 22px 22px; }
.wapi-sec-solutions .w-tiers .w-tier__for { min-block-size: 0; }
.wapi-sec-solutions .w-tiers .w-tier__foot { padding-block-start: 10px; }
.wapi-sec-solutions .w-tiers .w-tier__mark { font-size: var(--w-s-small); font-weight: 600; margin-block-end: -4px; }
.wapi-sec-solutions .w-tiers + .w-small, .wapi-sec-solutions .w-tiers + p { margin-block-start: 16px; max-inline-size: 60ch; }

/* ---------- Organisations: sea page head, points, quiet closing band ---------- */
.wapi-sec-solutions .w-page-head--sea { padding-block-start: clamp(20px, 3vw, 44px); padding-block-end: clamp(56px, 6vw, 96px); }
.wapi-sec-solutions .w-page-head--sea h1 { max-inline-size: 22ch; }
.wapi-sec-solutions .w-page-head--sea .w-lead { color: var(--w-on-sea); max-inline-size: 52ch; margin-block-start: 18px; }
.wapi-sec-solutions .w-page-head--sea .w-actions { margin-block-start: 32px; gap: 12px 14px; }
.wapi-sec-solutions .w-page-head--sea .w-crumbs { color: var(--w-on-sea-2); }
.wapi-sec-solutions .w-page-head--sea a:not(.w-btn) { color: var(--w-on-sea); }
.wapi-sec-solutions .w-page-head--sea .w-plan-line { color: var(--w-on-sea-2); margin-block-start: 18px; }
/* ghost buttons on the sea head: the foundation's on-sea button rule covers .w-sea only, so ink text sat on the sea */
.wapi-sec-solutions .w-page-head--sea :is(.w-btn--ghost, .w-btn--quiet, .w-btn--outline-light) { --w-bg: rgba(255, 255, 255, .14); --w-fg: #fff; }
.wapi-sec-solutions .w-page-head--sea .w-shot__crop { max-inline-size: 520px; }

.wapi-sec-solutions .w-points { gap: 36px clamp(28px, 4vw, 56px); }
.wapi-sec-solutions .w-points > div { border-block-start: 6px solid var(--w-ink); padding-block-start: 16px; min-inline-size: 0; }
.wapi-sec-solutions .w-points dt { margin-block-end: 8px; }
.wapi-sec-solutions .w-points dd { color: var(--w-ink-2); max-inline-size: 46ch; }
.wapi-sec-solutions .w-sea .w-points > div, .wapi-sec-solutions .w-org .w-points > div { border-color: var(--w-sun); }
.wapi-sec-solutions .w-sea .w-points dd, .wapi-sec-solutions .w-org .w-points dd { color: var(--w-on-sea); }

.wapi-sec-solutions .w-cta--quiet { padding-block: clamp(56px, 6vw, 96px); }
.wapi-sec-solutions .w-cta--quiet h2 { max-inline-size: 22ch; }
.wapi-sec-solutions .w-cta--quiet .w-actions { gap: 12px 14px; }
.wapi-sec-solutions .w-cta--quiet .w-cta__tel, .wapi-sec-solutions .w-cta--quiet p { color: var(--w-ink); }

/* ---------- Samples, notes and lists on solution pages ---------- */
.wapi-sec-solutions .w-sample { max-inline-size: 560px; }
.wapi-sec-solutions .w-sample__who { color: var(--w-ink); }
.wapi-sec-solutions .w-split__media .w-sample { max-inline-size: none; }

/* ---------- Click-to-chat comparison table: the box scrolls, the first column stays ---------- */
.wapi-sec-solutions .w-scroll { margin-block-start: 28px; }
.wapi-sec-solutions .w-table { min-inline-size: 560px; font-variant-numeric: normal; } /* words only here: tabular figures widened the commas */
/* the caption is as wide as the table, so on phones its end ran out of the box: wrap it inside the visible width */
.wapi-sec-solutions .w-scroll > .w-table > caption { padding-inline-end: max(0px, 560px - (100vw - 2 * var(--w-gut))); }
.wapi-sec-solutions .w-table thead th:first-child { text-align: start; }
.wapi-sec-solutions .w-table thead th:last-child { background: var(--w-sun); color: var(--w-ink); }
.wapi-sec-solutions .w-table tbody td:last-child { font-weight: 600; background: rgba(255, 255, 255, .6); }
.wapi-sec-solutions .w-table tbody th:first-child, .wapi-sec-solutions .w-table tbody td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--w-mist); max-inline-size: 38vw; }
.wapi-sec-solutions .w-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; }
.wapi-sec-solutions .w-table td:first-child { font-weight: 500; }
.wapi-sec-solutions .w-table .w-yes, .wapi-sec-solutions .w-table .w-no { vertical-align: middle; }

/* ---------- Hover only on real pointers ---------- */
@media (hover: hover) and (pointer: fine) {
	.wapi-sec-solutions .w-path:hover .w-path__d { color: var(--w-ink); }
	.wapi-sec-solutions .w-page-head--sea a:not(.w-btn):hover { text-decoration: underline; text-underline-offset: .3em; }
	.wapi-sec-solutions .w-page-head--sea .w-btn:is(.w-btn--ghost, .w-btn--quiet, .w-btn--outline-light):hover { --w-bg: rgba(255, 255, 255, .22); }
}

/* ---------- Phones and tablets ---------- */
@media (max-width: 1020px) {
	.wapi-sec-solutions .w-org__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.wapi-sec-solutions .w-headfield__comp > .w-comp { margin-inline: 0; }
}
@media (max-width: 600px) {
	.wapi-sec-solutions .w-page-head .w-paths { margin-block-start: 24px; }
	.wapi-sec-solutions .w-points { gap: 28px; }
	.wapi-sec-solutions .w-page-head--sea .w-actions > * { inline-size: 100%; }
	.wapi-sec-solutions .w-table tbody th:first-child, .wapi-sec-solutions .w-table tbody td:first-child { max-inline-size: 44vw; }
}