/* Screen-fit sections (js/fit-sections.js, 2026-09-29): a section taller than the room under the header becomes pages that
   slide sideways, each exactly as tall as the room. Only ever applied where a screen can hold a section (landscape, 900px+). */
.fit-paged, .fit-tight { min-height: 0 !important; }
.fit-paged { --fit-h: 600px; padding-block: clamp(14px, calc(2.6svh / var(--egz, 1)), 36px) !important; }
.fit-paged .fit-head-tight, .fit-paged :is(.section-header, .sp-head, .head) { margin-bottom: clamp(10px, calc(1.6svh / var(--egz, 1)), 22px) !important; }
.fit-paged > :is(.container, .container-lg, .wrap, div) { position: relative; }
.fit-body {
    height: var(--fit-h);
    columns: 1; column-gap: 0; column-fill: auto;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}
/* every column is a snap point (CSS Overflow 5, Chromium 135+); older browsers settle on a page in js/fit-sections.js */
.fit-body::column { scroll-snap-align: start; }
/* a list that is itself the body (its items are the pages' content) keeps its own bullets and indent but not a margin above and below the page */
:is(ul, ol, dl).fit-body { display: block !important; margin-block: 0; }   /* columns need a block: the wrapper div it replaces was one */
/* the sidebar of a sidebar + content section keeps its place and is as tall as a page at most */
.fit-side { position: static !important; max-height: var(--fit-h) !important; overflow-y: auto; align-self: start; }
.fit-body::-webkit-scrollbar { display: none; }
.fit-body:focus-visible { outline: 2px solid var(--copper-ink, #FF7A45); outline-offset: 4px; }
/* a plan card is never split: it goes whole to the next page (break-inside), and a page break falls between two cards, never inside one.
   A wrapper that holds cards is not itself a card - it is what the pages are cut from. */
.fit-body :is(.plan-card, .pricing-card, .price-card, [class*="plan"]:not(:has(.plan-card, .pricing-card, .price-card))) { break-inside: avoid-column; break-inside: avoid; }
/* whole blocks stay whole across a page break */
.fit-body :is(li, tr, article, figure, details, dt, dd, [class*="card"], [class*="step"], [class*="item"], [class*="tile"], img, video, pre, blockquote, form, [class*="scroll"]:has(> table)) { break-inside: avoid; }
.fit-body > * { margin-top: 0; }
.fit-nav { display: flex; align-items: center; justify-content: center; gap: 14px; height: 56px; }
.fit-nav button {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); background: transparent;
    color: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
.fit-nav button:hover:not(:disabled) { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.fit-nav button:disabled { opacity: .35; cursor: default; }
.fit-nav button:focus-visible { outline: 2px solid var(--copper-ink, #FF7A45); outline-offset: 2px; }
.fit-count { min-width: 64px; text-align: center; font: 600 13px/1 var(--font-mono, monospace); color: inherit; }
@media (prefers-reduced-motion: reduce) { .fit-body { scroll-behavior: auto; } }

/* step 1: a section that is only a little too tall is tightened, not paged */
.fit-tight { padding-block: clamp(14px, calc(2.6svh / var(--egz, 1)), 36px) !important; }
.fit-tight :is(.section-header, .sp-head, .head) { margin-bottom: clamp(10px, calc(1.6svh / var(--egz, 1)), 22px) !important; }
.fit-tight :is(h2) { font-size: clamp(1.4rem, calc(3.8svh / var(--egz, 1)), 2.6rem) !important; margin-bottom: clamp(4px, calc(1svh / var(--egz, 1)), 12px) !important; }
.fit-tight :is(.lede, .section-header p, .sp-head p) { font-size: clamp(14px, calc(2svh / var(--egz, 1)), 18px) !important; }
.fit-tight [class*="card"], .fit-tight li { padding-block-start: clamp(10px, calc(1.8svh / var(--egz, 1)), 24px); }

/* step 2: dense */
.fit-dense :is(th, td) { padding-block: clamp(4px, calc(.9svh / var(--egz, 1)), 12px) !important; font-size: clamp(13px, calc(1.6svh / var(--egz, 1)), 14.5px) !important; line-height: 1.3 !important; }
.fit-dense li, .fit-dense dd, .fit-dense dt { padding-block: clamp(2px, calc(.6svh / var(--egz, 1)), 8px) !important; font-size: clamp(13px, calc(1.7svh / var(--egz, 1)), 15px) !important; line-height: 1.35 !important; }
.fit-dense p { font-size: clamp(13px, calc(1.8svh / var(--egz, 1)), 16px) !important; line-height: 1.45 !important; margin-block: clamp(4px, calc(.8svh / var(--egz, 1)), 12px) !important; }
.fit-dense [class*="card"], .fit-dense [class*="step"], .fit-dense article { padding: clamp(10px, calc(1.6svh / var(--egz, 1)), 20px) !important; gap: clamp(6px, calc(1svh / var(--egz, 1)), 14px) !important; }
.fit-dense h3, .fit-dense h4 { font-size: clamp(14px, calc(2.1svh / var(--egz, 1)), 19px) !important; margin-block: clamp(2px, calc(.5svh / var(--egz, 1)), 8px) !important; }
.fit-dense :is(.grid, [class*="grid"]) { gap: clamp(8px, calc(1.4svh / var(--egz, 1)), 20px) !important; }

/* step 3: the content block is scaled down whole (js/fit-sections.js sets zoom on it) */
.fit-scale { transform-origin: top left; }

/* a block in a page that is not on screen yet is never waiting for a scroll-reveal: the observer cannot see inside a sideways scroller,
   so what the page hid until it was seen is shown, and its offset (which also counted as height) is gone */
.fit-body :is(.reveal, [class*="reveal-"], .stagger-children > *), .fit-body .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
.fit-measure [style*="transform"] { transform: none !important; }

/* a table taller than the room: a frame as tall as the room, the header row stays in view (js/fit-sections.js sets max-height) */
.fit-frame { overflow: auto !important; overscroll-behavior: auto; }
.fit-frame:focus-visible { outline: 2px solid var(--copper-ink, #FF7A45); outline-offset: 2px; }
.fit-frame thead th { position: sticky; top: 0; z-index: 2; background: var(--surface, Canvas); }
.fit-body.fit-js-snap { scroll-snap-type: none; }
/* right-to-left: the page count reads 2 / 4 whole, and the arrows point the way the pages travel */
.fit-count { direction: ltr; unicode-bidi: isolate; }
.fit-nav:dir(rtl) button { transform: scaleX(-1); }