/* ============================================================
   SiteFX · effect pages
   One page per effect, on the homepage's layout: scenes in a row
   on desktop, swipe panels on phones, stacked for reduced motion.
   Long content stays out of the way of the fit rule the same way
   the homepage's does: a panel grows wider, never taller, and the
   track simply carries on. Loaded only on these pages.
   ============================================================ */
html.is-horizontal .fxp-sec { width: auto; min-width: 100vw; }
.fxp-row { display: grid; gap: var(--s-6); min-width: 0; }
.fxp-row .scene-head { margin-bottom: 0; }
html.is-horizontal .fxp-row { grid-template-columns: clamp(330px, 30vw, 480px) auto; height: 100%; align-items: center; column-gap: clamp(32px, 4vw, 72px); }
.scene-head .doc-controls { margin-top: var(--s-2); }

/* Intro */
.fxp-intro { display: grid; align-content: start; align-content: safe center; }
.fxp-intro-in { display: grid; gap: var(--s-5); min-width: 0; container-type: inline-size; }
.fxp-intro h1 { margin: 0; font: 800 min(9.8cqi, 96px)/.92 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.fxp-intro-row, .fxp-intro-copy { display: grid; gap: var(--s-5); min-width: 0; }
.fxp-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fxp-intro .readouts-doc { margin: 0; }
/* Readouts here hold words as well as numbers, so they run smaller than on the policy page. */
.fxp-intro .readouts-doc b { font-size: clamp(19px, 2.5vw, 36px); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 760px) { .fxp-intro .readouts-doc li { padding: var(--s-4); } }
html.is-horizontal .fxp-intro h1 { font-size: min(7.4cqi, 12.4dvh, 128px); }
html.is-horizontal .fxp-intro-in { gap: clamp(10px, 2.4dvh, 32px); }
html.is-horizontal .fxp-intro-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; column-gap: clamp(32px, 4vw, 72px); }
html.is-horizontal .fxp-intro-copy { gap: clamp(12px, 2.4dvh, 24px); }
html.is-horizontal .fxp-intro .doc-lede { font-size: clamp(14px, min(1.3vw, 2.5dvh), 20px); line-height: 1.45; }
html.is-horizontal .fxp-intro .readouts-doc li { padding: clamp(12px, 2.2dvh, 24px) clamp(12px, 1.2vw, 20px); gap: 8px; }
html.is-horizontal .fxp-intro .readouts-doc b { font-size: clamp(14px, min(1.4vw, 3.2dvh), 28px); }

/* Live panels: big type, one idea each */
/* The colour sits on a plate, so the header and HUD always keep their own ground. */
.demo-panel { display: grid; }
.demo-plate { display: grid; align-content: start; align-content: safe center; justify-items: start; gap: var(--s-4); min-width: 0; min-height: 100%; padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 64px); background: var(--bg); color: var(--fg); border: 1px solid var(--rule); container-type: inline-size; box-sizing: border-box; }
html.is-horizontal .demo-panel { width: min(78vw, 1200px); padding-inline: clamp(6px, .6vw, 10px); border-left: 0; }
html.is-horizontal .demo-plate { height: 100%; padding-block: clamp(14px, 3dvh, 32px); }
.demo-plate .label { margin: 0; color: var(--fg-2); }
.demo-big { margin: 0; font: 800 min(9.4cqi, 16dvh, 128px)/.96 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.demo-note { margin: 0; max-width: 46ch; font-size: clamp(15px, min(1.3vw, 2.6dvh), 20px); line-height: 1.5; color: var(--fg-2); }
.fxp-touch { display: none; margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--fg); }
@media (max-width: 1023px), (max-height: 599px), (hover: none) { .fxp-touch { display: block; } }

/* Cursor targets */
.demo-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; min-width: 0; }
.demo-boxes > * { box-shadow: 0 0 0 1px var(--rule); }
.demo-box { display: grid; align-content: start; gap: var(--s-3); min-height: 280px; padding: var(--s-5); background: var(--panel); }
.demo-box h3 { margin: 0; font: 700 clamp(20px, 2vw, 26px)/1.05 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.demo-box p:not(.label) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.demo-box .btn { justify-self: start; margin-top: auto; }
@media (max-width: 860px) { .demo-boxes { grid-template-columns: 1fr; } .demo-box { min-height: 0; } }
html.is-horizontal .demo-boxes { grid-template-columns: repeat(3, clamp(250px, 20vw, 320px)); }
html.is-horizontal .demo-box { min-height: min(100%, 300px); }

/* What it does */
.fxp-does { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; min-width: 0; }
.fxp-does > * { box-shadow: 0 0 0 1px var(--rule); }
.cell-does { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); background: var(--panel); }
.cell-does h3 { margin: 0; font: 700 18px/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.cell-does p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
@media (max-width: 640px) { .fxp-does { grid-template-columns: 1fr; } }
html.is-horizontal .fxp-does { grid-template-columns: repeat(2, clamp(280px, 25vw, 400px)); }
html.is-horizontal .cell-does { padding: clamp(14px, 2.6dvh, 28px) clamp(16px, 1.8vw, 28px); }

/* Code you can read, select and copy */
.fxp-code { margin: 0; padding: var(--s-5); border: 1px solid var(--rule-2); background: var(--panel); color: var(--fg); font: 400 13px/1.7 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; min-width: 0; }
.fxp-code::selection, .fxp-code *::selection { background: var(--accent); color: var(--on-accent); }
/* The prompt runs sideways, a column per block, so it needs no scrolling of its own. */
html.is-horizontal .fxp-prompt { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(300px, 23vw, 360px); padding: 0; font-size: clamp(11.5px, 1.85dvh, 13px); line-height: 1.65; }
html.is-horizontal .fxp-prompt .pc { display: block; padding: clamp(14px, 2.6dvh, 24px); }
html.is-horizontal .fxp-prompt .pc + .pc { border-left: 1px solid var(--rule); }
html.is-horizontal .fxp-prompt .pc + .pc::first-line { color: var(--accent); }

.fxp-pair { display: grid; gap: var(--s-5); min-width: 0; }
.fxp-pair .store-table { min-width: 0; }
html.is-horizontal .fxp-pair { grid-template-columns: clamp(300px, 26vw, 420px) minmax(620px, auto); align-items: center; }
html.is-horizontal .fxp-pair .fxp-code { font-size: clamp(11.5px, 1.85dvh, 13px); padding: clamp(14px, 2.6dvh, 24px); }
html.is-horizontal .fxp-pair .store-table { width: auto; font-size: 13px; }
html.is-horizontal .fxp-pair .store-table th, html.is-horizontal .fxp-pair .store-table td { padding: clamp(6px, 1.2dvh, 12px) 12px; }
@media (max-width: 640px) {
  .fxp-pair .store-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
}

/* Questions: two by two, so the grid never leaves a gap */
.fxp-faq { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .fxp-faq { grid-template-columns: 1fr; } }
html.is-horizontal .fxp-faq { grid-template-columns: repeat(2, clamp(300px, 25vw, 400px)); }
html.is-horizontal .fxp-faq .qa { padding: clamp(12px, 2.2dvh, 24px) clamp(16px, 1.6vw, 24px); }
html.is-horizontal .fxp-faq .qa h3 { font-size: clamp(14px, min(1.15vw, 2.4dvh), 17px); }
html.is-horizontal .fxp-faq .qa p { font-size: clamp(12.5px, min(1vw, 2dvh), 14.5px); line-height: 1.5; }

/* The end of the row: the licence, what else there is, the footer */
.fxp-end { display: grid; align-content: start; align-content: safe center; }
.fxp-end-in { display: grid; gap: var(--s-5); min-width: 0; }
.fxp-buy h2 { margin: var(--s-2) 0; font: 800 clamp(26px, 2.6vw, 44px)/.95 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
html.is-horizontal .fxp-buy h2 { font-size: clamp(22px, min(2.6vw, 5dvh), 44px); }
/* 2 + the rack, so the row never leaves a gap */
.fxp-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; }
.fxp-others > * { box-shadow: 0 0 0 1px var(--rule); }
.fxp-more { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--panel); color: var(--fg); text-decoration: none; }
.fxp-more b { font: 700 19px/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.fxp-more i { font-style: normal; font-size: 14px; color: var(--fg-2); }
@media (max-width: 860px) { .fxp-others { grid-template-columns: 1fr; } }
html.is-horizontal .fxp-more { padding: clamp(12px, 2.4dvh, 24px) clamp(16px, 1.6vw, 24px); }

/* The switch: a first screen going down, the row going sideways, a last screen going down. */
html.is-horizontal main.fxp { height: auto; overflow: visible; }
html.is-horizontal .fxp-track { height: 100vh; height: 100dvh; overflow: hidden; }
html.is-horizontal .fxp-intro { width: 100%; height: 100vh; height: 100dvh; }
html.is-horizontal .fxp-end { width: 100%; height: auto; min-height: 100vh; min-height: 100dvh; border-left: 0; border-top: 1px solid var(--rule); }
/* Phones: every scene is one panel of the deck, as on the homepage. */
html.is-swipe main.fxp { display: flex; }
html.is-swipe .fxp-track, html.is-swipe .fxp-track > .fx-track-inner { display: contents; }

/* These pages are for reading: the rain steps back, and buttons keep a solid ground. */
html:has(main.fxp) .fx-rain.is-page { opacity: .45; }
main.fxp .btn:not(.btn-solid) { background-color: var(--bg); }
/* Phones: the plate has the room, so the type takes it. */
@media (max-width: 1023px) { .demo-big { font-size: min(12cqi, 12dvh, 96px); } }
/* The last mark keeps its tick and number, clear of the HUD's corner; the playhead names it. */
html:has(main.fxp) .fx-rail-mark:last-child span { display: none; }

/* Panels with an effect of their own */
.demo-plate { position: relative; overflow: hidden; }
.demo-plate > * { position: relative; z-index: 1; }
.demo-plate > .demo-stage { position: absolute; inset: 0; z-index: 0; --fx-rain-ink: var(--fg-3); --fx-rain-head: var(--fg); --fx-field-ink: var(--fg); --fx-field-accent: var(--fg); --fx-field-blend: source-over; }
.demo-plate[data-fx-tint="ink"] > .demo-stage { --fx-field-accent: var(--accent); --fx-rain-head: var(--accent); --fx-field-blend: lighter; }
/* The field and rain answer the pointer, so the words let presses through. */
.demo-plate.has-stage > :not(.demo-stage):not(.btn) { pointer-events: none; }
.demo-plate.has-stage .demo-note { color: var(--fg); }
/* Decoded type stays on one line, so it runs a size down. */
.demo-big.demo-one { font-size: min(7.6cqi, 14dvh, 104px); white-space: nowrap; }
@media (max-width: 1023px) { .demo-big.demo-one { font-size: min(9cqi, 10dvh, 80px); } }
.demo-line { display: block; }
/* Marquee bands run to the plate's edges. */
.demo-band { justify-self: stretch; margin-inline: calc(-1 * clamp(20px, 4vw, 64px)); padding-block: .12em; font-size: min(11cqi, 18dvh, 150px) !important; }
.demo-draw { justify-self: stretch; width: 100%; height: auto; max-height: 34dvh; overflow: visible; color: var(--fg); }