/* Group C: pricing, install, videos, about, contact, support, account, faq, changelog. Scoped to their body classes. Tokens come from wapi-layout.css; nothing new on :root. */

/* ---------- Pricing: compare table (scroll box, sticky first column on phones), setup row on mist ---------- */
.wapi-p-pricing .w-scroll { outline-offset: 2px; max-inline-size: 100%; }
.wapi-p-pricing .w-scroll:focus-visible { outline: 3px solid var(--w-ink); }
.wapi-p-pricing .w-table { min-inline-size: 720px; }
.wapi-p-pricing .w-table thead th { position: sticky; inset-block-start: 0; z-index: 2; }
.wapi-p-pricing .w-table th:first-child, .wapi-p-pricing .w-table td:first-child { min-inline-size: 11rem; }
.wapi-p-pricing .w-table th small, .wapi-p-pricing .w-table td small { display: block; font-weight: 400; font-size: var(--w-s-small); opacity: .85; }
.wapi-p-pricing .w-table tbody th[scope="row"] { text-align: start; }
@media (max-width: 720px) {
	.wapi-p-pricing .w-scroll { margin-inline: calc(var(--w-gut, 16px) * -1); padding-inline: var(--w-gut, 16px); scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
	.wapi-p-pricing .w-table { min-inline-size: 600px; }
	.wapi-p-pricing .w-table th:first-child, .wapi-p-pricing .w-table td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; min-inline-size: 8.5rem; max-inline-size: 9.5rem; background: var(--w-mist); box-shadow: 1px 0 0 var(--w-stone); }
	.wapi-p-pricing .w-table thead th:first-child { z-index: 3; background: var(--w-ink); }
	.wapi-p-pricing .w-table .w-group th, .wapi-p-pricing .w-table tr.w-group td:first-child { background: var(--w-stone); }
}
.wapi-p-pricing #setup { background: var(--w-mist); }
.wapi-p-pricing :is(.w-section--mist, .w-mist) #setup { background: var(--w-paper); }
.wapi-p-pricing #setup { scroll-margin-block-start: 96px; margin-block-start: 24px; padding: clamp(20px, 3vw, 32px); }
.wapi-p-pricing #setup .w-addon__text > * + * { margin-block-start: 8px; }
.wapi-p-pricing .w-paybox { background: var(--w-mist); padding: 20px 24px; }

/* ---------- Install: duration strip and the numbered steps with crops ---------- */
.wapi-p-install .w-facts, .wapi-p-install .w-duration { padding-block: 20px; border-block: 2px solid var(--w-ink); margin-block: 28px 0; }
.wapi-p-install .w-fact strong, .wapi-p-install .w-duration strong { font-family: var(--w-f-display); font-weight: 650; }
.wapi-p-install .w-howto { max-inline-size: 860px; }
.wapi-p-install .w-howto > li { --w-how-in: 60px; }
.wapi-p-install .w-howto > li > :is(h3, h2) { scroll-margin-block-start: 96px; }
.wapi-p-install .w-howto .w-shot { max-inline-size: 640px; }
.wapi-p-install .w-howto .w-shot__crop { max-inline-size: 100%; }
.wapi-p-install .w-howto code, .wapi-p-install .w-howto kbd { padding: 1px 6px; background: var(--w-mist); font-size: .92em; overflow-wrap: anywhere; }
.wapi-p-install .w-section--mist .w-howto code { background: var(--w-paper); }
@media (max-width: 720px) { .wapi-p-install .w-howto > li { --w-how-in: 48px; } }

/* ---------- Videos: tour on the left, short clips in a grid ---------- */
.wapi-p-videos .w-tour__grid { align-items: center; }
.wapi-p-videos .w-tour__video { min-inline-size: 0; }
.wapi-p-videos .w-tour__video video { aspect-ratio: 16 / 9; object-fit: cover; }
.wapi-p-videos :is(.w-grid, .w-films):has(> .w-film, > * > .w-film) { gap: clamp(20px, 3vw, 40px); align-items: start; }
.wapi-p-videos .w-film { display: grid; gap: 12px; }
.wapi-p-videos .w-film video { aspect-ratio: 16 / 9; object-fit: cover; }
.wapi-p-videos .w-film--phone video { aspect-ratio: 9 / 19.5; }
.wapi-p-videos .w-film figcaption, .wapi-p-videos .w-film .w-cap { font-size: var(--w-s-small); color: var(--w-ink-2); }
.wapi-p-videos .w-film h3 { font-size: var(--w-s-lead); }
.wapi-p-videos #clips { scroll-margin-block-start: 96px; }
.wapi-p-videos #tour { scroll-margin-block-start: 96px; }

/* ---------- About and contact: calm text pages, contact choices as plain cards ---------- */
.wapi-p-about .w-split__text > * + * { margin-block-start: 14px; }
.wapi-p-about .w-split__media { align-self: center; }
.wapi-p-contact .w-card, .wapi-p-contact .w-note { min-inline-size: 0; }
.wapi-p-contact .w-card a:not(.w-btn) { overflow-wrap: anywhere; font-weight: 600; }
.wapi-p-contact .w-grid { gap: clamp(12px, 2vw, 24px); }

/* ---------- Support (Fluent Support portal), account and login (EDD blocks): the same form controls as the site ---------- */
.wapi-p-support .fs_portal, .wapi-p-support .fluent_support_portal, .wapi-p-support [class*="fs_"], .wapi-p-account .edd-blocks-form, .wapi-p-account .edd-login, .wapi-p-account [id^="edd_"] { font-family: var(--w-f-body); color: var(--w-ink); }
:is(.wapi-p-support, .wapi-p-account) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"], [type="hidden"]), textarea, select) {
	inline-size: 100%; max-inline-size: 100%; min-block-size: 48px; padding: 10px 14px; border: 0; border-block-end: 2px solid var(--w-edge); border-radius: 0;
	background: var(--w-mist); color: var(--w-ink); font: 500 var(--w-s-body)/1.4 var(--w-f-body); box-shadow: none; outline-offset: 0;
}
:is(.wapi-p-support, .wapi-p-account) textarea { min-block-size: 140px; resize: vertical; }
:is(.wapi-p-support, .wapi-p-account) :is(input, textarea, select):focus-visible { outline: 3px solid var(--w-ink); border-block-end-color: var(--w-ink); }
:is(.wapi-p-support, .wapi-p-account) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--w-ink); inline-size: 18px; block-size: 18px; margin-inline-end: 8px; }
:is(.wapi-p-support, .wapi-p-account) label { font-weight: 600; display: inline-block; margin-block-end: 6px; }
:is(.wapi-p-support, .wapi-p-account) :is(button, input[type="submit"], .edd-submit, .el-button, a.button):not(.w-btn) {
	min-block-size: 48px; padding: 10px 22px; border: 0; border-radius: 0; background: var(--w-ink); color: #fff; font: 600 var(--w-s-body)/1.2 var(--w-f-body); cursor: pointer; text-decoration: none; inline-size: auto;
}
:is(.wapi-p-support, .wapi-p-account) :is(button, input[type="submit"], .edd-submit):not(.w-btn):focus-visible { outline: 3px solid var(--w-ink); outline-offset: 3px; }
:is(.wapi-p-support, .wapi-p-account) :is(button, input[type="submit"], .edd-submit):not(.w-btn):active { transform: scale(.98); }
:is(.wapi-p-support, .wapi-p-account) :is(.edd-alert, .edd_errors, .edd_success, .el-alert) { background: var(--w-stone); border: 0; padding: 14px 18px; margin-block: 16px; color: var(--w-ink); }
:is(.wapi-p-support, .wapi-p-account) a:not(.w-btn, .edd-submit, .el-button) { color: var(--w-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wapi-p-account :is(fieldset, .edd-blocks-form__group) { border: 0; padding: 0; margin: 0 0 20px; min-inline-size: 0; }
.wapi-p-account .edd-blocks-form, .wapi-p-account #edd_login_form { max-inline-size: 520px; background: var(--w-mist); padding: clamp(20px, 3vw, 36px); }
.wapi-p-account table { inline-size: 100%; border-collapse: collapse; font-size: var(--w-s-small); }
.wapi-p-account table :is(th, td) { padding: 10px 12px; text-align: start; border: 0; border-block-end: 2px solid var(--w-paper); background: var(--w-mist); }
.wapi-p-account table thead th { background: var(--w-ink); color: #fff; }
.wapi-p-account :is(.edd_download_file_link, .edd_purchase_receipt_link) { font-weight: 600; }
.wapi-p-support .fs_portal, .wapi-p-support .fluent_support_portal { max-inline-size: 960px; min-inline-size: 0; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
	:is(.wapi-p-support, .wapi-p-account) :is(button, input[type="submit"], .edd-submit):not(.w-btn):hover { background: var(--w-sea); }
}

/* ---------- FAQ: groups, then questions ---------- */
.wapi-p-faq .w-faq { margin-block-start: 20px; }
.wapi-p-faq .w-group { margin-block-start: clamp(32px, 4vw, 56px); }
.wapi-p-faq .w-group:first-child { margin-block-start: 0; }
.wapi-p-faq .w-group > h2, .wapi-p-faq .w-group > h3 { font-size: var(--w-s-h3); scroll-margin-block-start: 96px; }
.wapi-p-faq .w-faq summary { min-block-size: 56px; }
.wapi-p-faq .w-faq details > :not(summary) { overflow-wrap: anywhere; }
.wapi-p-faq nav.w-small, .wapi-p-faq .w-faqnav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block: 24px 0; }

/* ---------- Changelog: one prose column, a rule above each release ---------- */
.wapi-p-changelog .w-prose { max-inline-size: 760px; margin-inline: auto; }
.wapi-p-changelog .w-prose > h2 { padding-block-start: 1.2em; border-block-start: 2px solid var(--w-ink); margin-block-start: 2em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.wapi-p-changelog .w-prose > h2:first-child { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.wapi-p-changelog .w-prose > h2 :is(time, small, span):not(.w-w) { font-size: var(--w-s-small); font-weight: 500; color: var(--w-ink-2); }
.wapi-p-changelog .w-prose > h3 { font-size: var(--w-s-body); text-transform: none; letter-spacing: 0; }
.wapi-p-changelog .w-prose li { overflow-wrap: anywhere; }
.wapi-p-changelog .w-prose code { padding: 1px 6px; background: var(--w-mist); font-size: .92em; }

/* ---------- Motion: only a quiet fade for the scroll box edge, and only when motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
	.wapi-p-pricing .w-scroll { scroll-behavior: smooth; }
	:is(.wapi-p-support, .wapi-p-account) :is(input, textarea, select), :is(.wapi-p-support, .wapi-p-account) :is(button, input[type="submit"]):not(.w-btn) { transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease; }
}