/* Group A: Features hub and the seven feature pages (not Automations). Scoped; tokens are the frozen --w-* set. */
.wapi-sec-features:not(.wapi-p-features-automations) {
	--a-gap: clamp(20px, 2.4vw, 32px);
}

/* Hub: one journey group = a split plus a row of link cards */
.wapi-sec-features:not(.wapi-p-features-automations) .w-section[id] { scroll-margin-block-start: 88px; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-split + .w-grid { margin-block-start: clamp(28px, 3vw, 44px) !important; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-split .w-feats { margin-block-start: 8px; gap: 18px; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-split .w-feats > li { padding-inline-start: 18px; border-inline-start: 4px solid var(--w-ink); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-split .w-feats > li:first-child { border-inline-start-color: var(--w-sun); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-split__media .w-shot,
.wapi-sec-features:not(.wapi-p-features-automations) .w-split__media .w-film { inline-size: 100%; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-card__plan { white-space: nowrap; }

/* List items that mix loose text with inline tags (bold lead-in, link, code): the marker stays a marker, the text flows as one block.
   Without this the grid li makes each tag its own grid item and it drops into the 22px marker column, one letter per line. */
.wapi-sec-features:not(.wapi-p-features-automations) .w-list li:has(> :is(strong, b, em, a, code, kbd, abbr, bdi, br)) { display: block; position: relative; padding-inline-start: 34px; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-list li:has(> :is(strong, b, em, a, code, kbd, abbr, bdi, br))::before { position: absolute; inset-inline-start: 0; inset-block-start: 0; }

/* Legacy facts strip: same look as w-checks, a quiet list */
.wapi-sec-features:not(.wapi-p-features-automations) .w-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px var(--a-gap); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-fact { max-inline-size: none; align-items: baseline; }

/* Inbox app: phones stair, a little steeper on wide screens */
.wapi-sec-features:not(.wapi-p-features-automations) .w-phones { gap: var(--a-gap); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-phones > li:nth-child(2) { margin-block-start: 8%; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-phones > li:nth-child(3) { margin-block-start: 16%; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-phones > li:nth-child(4) { margin-block-start: 24%; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-phones h3 { font-size: var(--w-s-h3); }

/* Sequences: order statuses (more steps) and the OTP flow (fewer) */
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--even { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--5 li:last-child::before,
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--3 li:last-child::before,
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--even li:last-child::before { background: var(--w-sun); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq li { min-width: 0; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq li > p:not(.w-seq__when) { max-inline-size: 34ch; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq li:is(.is-done, .is-ok)::before { background: var(--w-sea); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-seq li.is-stop::before { background: var(--w-stone); }

/* 24-hour window reuse (Inbox, Campaigns, Calls) */
.wapi-sec-features:not(.wapi-p-features-automations) .w-window { margin-block: clamp(24px, 3vw, 40px); }
.wapi-sec-features:not(.wapi-p-features-automations) .w-window__bar { min-width: 0; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-window__legend { margin-block-start: 24px; }

/* Plans label and notes inside feature cards */
.wapi-sec-features:not(.wapi-p-features-automations) .w-grid > .w-card { min-width: 0; }
.wapi-sec-features:not(.wapi-p-features-automations) .w-note { max-inline-size: 64ch; }

@media (max-width: 1020px) {
	.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--3 { grid-template-columns: minmax(0, 1fr); gap: 28px 6px; }
}
@media (max-width: 700px) {
	.wapi-sec-features:not(.wapi-p-features-automations) .w-phones > li:nth-child(n) { margin-block-start: 0; }
	.wapi-sec-features:not(.wapi-p-features-automations) .w-phones > li:nth-child(even) { margin-block-start: 14%; }
	.wapi-sec-features:not(.wapi-p-features-automations) .w-seq--5 { grid-template-columns: minmax(0, 1fr); }
	.wapi-sec-features:not(.wapi-p-features-automations) .w-window__bar { block-size: 60px; }
	.wapi-sec-features:not(.wapi-p-features-automations) .w-window__legend { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: hover) and (pointer: fine) {
	.wapi-sec-features:not(.wapi-p-features-automations) .w-split .w-feats > li { transition: border-inline-start-color .2s; }
	.wapi-sec-features:not(.wapi-p-features-automations) .w-split .w-feats > li:hover { border-inline-start-color: var(--w-sun); }
}