/* Next Truck skin (2026-11-03). Loaded after v3.css (and v3-pages.css on engine pages).
   A calm product-site look in the Next Truck colours: white and cool grey surfaces, hairline
   borders, soft depth, rounded cards, Ink sections, Ember kept for the action and a few small
   accents. The HVAC cue stays quiet: a cool-to-warm temperature line under the key phrase and on
   a few edges, and faint isotherm contours behind the dark hero and closing band.
   It restyles v3's own classes, so any v3 page picks it up with no markup changes. Motion lives
   in nt-motion.js and only runs once it has added html.nt-motion. */

@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #101820;
  --ink-2: #1a2430;
  --ink-3: #2a3542;
  --blue: #B83F00;          /* Ember text: links and small accent text on light (5.6:1) */
  --blue-hi: #FF5A00;       /* Ember: actions, marks, accent text on ink (5.7:1) */
  --ember: #FF5A00;
  --ember-hot: #ff6f1f;
  --ember-ink: #B83F00;
  --ember-wash: #fff3ec;
  --ground: #f5f7f9;
  --tint: #eef1f5;
  --card: #ffffff;
  --rule: #e3e8ee;
  --line: #e3e8ee;
  --text: #1c2530;
  --muted: #5a6573;
  --on-ink: #ffffff;
  --on-ink-muted: #a9b3bf;
  --hair-ink: rgba(255, 255, 255, .09);
  --cool: #6f8fae;
  --thermal: linear-gradient(90deg, var(--cool), #b98a6c 55%, var(--ember));
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 16px;
  --r-sm: 10px;
  --shadow-1: 0 1px 2px rgba(16, 24, 32, .05), 0 1px 1px rgba(16, 24, 32, .03);
  --shadow-2: 0 1px 2px rgba(16, 24, 32, .05), 0 12px 32px -14px rgba(16, 24, 32, .18);
  --shadow-3: 0 2px 4px rgba(16, 24, 32, .06), 0 28px 60px -24px rgba(16, 24, 32, .32);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --isotherms: url("/assets/brand/next-truck/isotherms.svg");
}

/* Type */
body { font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.06; }
h3 { font-weight: 700; letter-spacing: -0.02em; }
.lede { font-size: 1.14rem; line-height: 1.6; }
a { color: var(--ember-ink); }

/* The key phrase: a temperature line, cool to warm */
.sw { background-image: var(--thermal); background-size: 100% 0.09em; background-position: 0 96%; padding-bottom: 0.04em; }
@keyframes draw { from { background-size: 0% 0.09em; } }
html.nt-motion .rv .sw { background-size: 0% 0.09em; transition: background-size 1s var(--ease) .25s; }
html.nt-motion .rv.in .sw { background-size: 100% 0.09em; }

/* Labels: a small status dot, not a stamp */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 500 0.74rem/1.3 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255, 90, 0, .16); flex: none; }
.center .eyebrow { justify-content: center; }
:is(.ink, .hero, .page-head) .eyebrow { color: var(--on-ink-muted); }

/* Buttons */
.btn { min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--ember); color: var(--ink); font: 650 0.98rem/1 var(--sans); letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(16, 24, 32, .2), 0 8px 20px -10px rgba(255, 90, 0, .55); transition: background .2s, transform .2s var(--ease), box-shadow .2s; }
.btn:hover { background: var(--ember-hot); border-color: transparent; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 4px rgba(16, 24, 32, .2), 0 14px 28px -12px rgba(255, 90, 0, .6); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--rule); box-shadow: var(--shadow-1); }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #cfd6de; box-shadow: var(--shadow-2); }
:is(.ink, .hero, .page-head) .btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--hair-ink); box-shadow: none; }
:is(.ink, .hero, .page-head) .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .16); }
.top-cta .btn { min-height: 40px; padding: 0 16px; font-size: 0.9rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.textlink { font-weight: 650; }

/* Ink grounds: plain, deep, quiet */
.ink, .hero, .page-head { background-color: var(--ink); background-image: none; color: var(--on-ink-muted); }
.ground { background-color: var(--ground); background-image: none; }
.section.ink { overflow: hidden; }
.section { border-top: 1px solid transparent; }
.section.ground { border-top-color: var(--rule); border-bottom: 1px solid var(--rule); }

/* Header: dark glass with a hairline, and a temperature line along the bottom edge */
.top { background-color: rgba(16, 24, 32, .97); background-image: none; border-bottom: 1px solid var(--hair-ink); }
@supports (backdrop-filter: blur(10px)) { .top { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--thermal); opacity: 0; transition: opacity .3s; }
.top.scrolled { background-color: rgba(16, 24, 32, .9); }
.top.scrolled::after { opacity: .7; }
.nav { gap: 30px; }
.nav a { font: 500 0.93rem/1 var(--sans); letter-spacing: -0.005em; color: rgba(255, 255, 255, .74); padding: 8px 0; background-image: none !important; transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.top-cta .tel { font-weight: 600; color: rgba(255, 255, 255, .86); }
.menu-btn { border-radius: var(--r-sm) !important; border-color: var(--hair-ink) !important; }
@media (max-width: 920px) {
  .top.open .nav { background: var(--ink); border-bottom: 1px solid var(--hair-ink); }
  .top.open .nav a { border-bottom-color: var(--hair-ink); font-size: 1rem; }
}

/* Hero: isotherms drifting behind the headline, the form as a clean card */
.hero { position: relative; overflow: hidden; padding: 96px 0 104px; }
.hero::before, .final::before { content: ""; position: absolute; inset: -10% -5%; background: var(--isotherms) center / cover no-repeat; opacity: .9; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(80% 70% at 30% 40%, #000 20%, transparent 80%); }
.hero > .wrap, .final > .wrap { position: relative; z-index: 1; }
html.nt-motion .hero::before { animation: nt-drift 26s ease-in-out infinite alternate; }
@keyframes nt-drift { from { transform: translate3d(-1.5%, 0, 0); } to { transform: translate3d(1.5%, -1%, 0); } }
.hero .lede { color: #c9d1da; }
.mini { border-top: 1px solid var(--hair-ink); }
.mini li { border-bottom: 1px solid var(--hair-ink); font-weight: 550; color: #fff; }
.mini li::before { content: counter(m); width: 28px; height: 28px; border: 1px solid var(--hair-ink); border-radius: 8px; background: rgba(255, 255, 255, .04); color: #fff; font: 600 0.78rem var(--mono); }
.mini .tagfree { background: rgba(255, 90, 0, .14); color: #ffb08a; border: 1px solid rgba(255, 90, 0, .35); border-radius: 999px; font-weight: 600; letter-spacing: 0.06em; }
.mini .tagpaid { color: var(--on-ink-muted); }
.facts li { font-weight: 500; color: #dfe4ea; }
.facts li::before { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--ember); }

/* Cards: white, hairline, soft depth */
.card-form { border: 1px solid var(--rule); border-radius: 20px; background: #fff; box-shadow: var(--shadow-3); padding: 32px; }
.hero .card-form { border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.card-form h2 { font-size: 1.55rem; }
.card-form .got li { font-weight: 550; }
.card-form .got li::before { background: var(--ember); }
.steps-dots i { height: 3px; border-radius: 3px; background: var(--tint); }
.steps-dots i.on { background: var(--thermal); }
.field > span { font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea { border: 1px solid #d7dde4; border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255, 90, 0, .14); }

.mistake, .tool, .fit-box, .panel, .bucket, .offer, .plan, .report, .sample a, .answer-first, .post-card, .vs-card {
  border: 1px solid var(--rule); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.mistake:hover, .tool:hover, .panel:hover, .sample a:hover, .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #d6dce3; }
.mistake { padding: 32px; }
.mistake .num { width: 44px; height: 44px; border-radius: 12px; background: var(--ember-wash); color: var(--ember-ink); font: 700 1rem var(--mono); }
.mistake .cost { border-left: 2px solid var(--ember); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--ground); }
.fixbox { border-radius: 12px; background: var(--ground); border: 1px solid var(--rule); }
.fixbox.free { background: var(--ink); border-color: var(--ink); }
.fixbox .label { border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--rule); font-weight: 600; }
.fixbox.free .label { background: rgba(255, 90, 0, .16); color: #ffb08a; border-color: rgba(255, 90, 0, .4); }

/* The nine tools: a feature grid */
.tool .k { display: inline-flex; align-items: center; gap: 7px; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tool .k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cool); }
.tool:nth-child(n+4) .k::before { background: #b98a6c; }
.tool:nth-child(n+6) .k::before { background: var(--ember); }

/* The free fix: the phone */
.phone { border: 1px solid var(--hair-ink); border-radius: 38px; background: #0b1117; box-shadow: 0 0 0 6px #121a23, 0 0 0 7px var(--hair-ink), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.phone .bar { background: var(--ink-3); }
.bubble { border-radius: 18px; }
.bubble.out { background: var(--ember); color: var(--ink); font-weight: 500; }
.bubble.in { background: #1e2a36; }
.terms-list li { border-bottom: 1px solid var(--hair-ink); font-weight: 600; }
.terms-list li::before { background: var(--ember); }
.terms-list li span { font-weight: 400; }
html.nt-motion .phone .missed, html.nt-motion .phone .bubble { opacity: 0; transform: translateY(8px); }
html.nt-motion .phone.play .missed, html.nt-motion .phone.play .bubble { opacity: 1; transform: none; transition: opacity .45s ease, transform .5s var(--ease); }
.phone .typing { display: flex; gap: 4px; width: 50px; padding: 12px; margin: 0 0 10px auto; border-radius: 18px 18px 6px 18px; background: var(--ember); }
.phone .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: nt-dot 1s infinite ease-in-out; }
.phone .typing i:nth-child(2) { animation-delay: .15s; }
.phone .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nt-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Cards on ink */
.step, .pbox, .ink .panel { border: 1px solid var(--hair-ink); border-radius: var(--r); background: rgba(255, 255, 255, .025); box-shadow: none; }
.ink .panel:hover { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, .16); }
.step { padding: 30px; transition: border-color .3s; }
.step:hover { border-color: rgba(255, 255, 255, .18); }
.step .n { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 90, 0, .14); color: #ffb08a; border: 1px solid rgba(255, 90, 0, .35); font-weight: 600; }
.step .when { color: var(--on-ink-muted); }
.pbox h3 { color: #ffb08a !important; }
.timeline { border-top: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--thermal); }
.timeline div::before { background: #fff; border: 2px solid var(--ember); }

/* Fit, trio, panels */
.fit-box { padding: 30px; }
.fit-box li::before { background: var(--ember); }
.fit-box.no { background: var(--ground); box-shadow: none; }

/* The sample report: a product card */
.report { box-shadow: var(--shadow-3); overflow: hidden; }

/* Offer and plan */
.offer, .plan { box-shadow: var(--shadow-2); overflow: hidden; }
.offer-top { background: var(--ink); }
.counter i { border-radius: 8px; background: var(--ember); }
.offer-col + .offer-col { border-left: 1px solid var(--rule); background: var(--ground); }
.offer-col h4 { color: var(--muted); }
.line { border-bottom-color: var(--rule); }
.total b, .price-row strong { font-family: var(--display); letter-spacing: -0.03em; }
.total b { color: var(--ink); }
.offer-foot { border-top: 1px solid var(--rule); background: #fff; }
.plan-side { background: var(--ink); }
.plan .tag { border-radius: 999px; background: var(--ember-wash); color: var(--ember-ink); font-weight: 600; }
.plan-main li::before { background: var(--ember); }
.price-row { border-bottom-color: var(--hair-ink); }
@media (max-width: 860px) { .offer-col + .offer-col { border-left: 0; border-top: 1px solid var(--rule); } }

/* Gallery, Dan, FAQ */
.sample a { overflow: hidden; }
.dan img { border-radius: 20px; border: 1px solid var(--hair-ink); }
.dan .verse-note { border-left: 2px solid var(--ember); }
.faq { border-top-color: var(--rule); }
.faq details { border-bottom-color: var(--rule); }
.faq summary { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; align-items: center; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background:
  linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat, #fff; transition: transform .3s var(--ease), background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }

/* Closing band and footer */
.final { position: relative; overflow: hidden; }
.foot { background-color: var(--ink); background-image: none; border-top: 1px solid var(--hair-ink); }
.foot h4 { color: #fff; }
.foot a { color: var(--on-ink-muted); }
.verse { border-top-color: var(--hair-ink); }

/* Engine pages (v3-pages.css) and long-form */
.page-head { position: relative; overflow: hidden; }
.crumbs a:hover { text-decoration-color: var(--ember); }
.area-facts { color: #ffb08a; }
.toc a { border-color: var(--hair-ink); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s; }
.toc a:hover { border-color: rgba(255, 90, 0, .5); background: rgba(255, 90, 0, .06); }
.toc a::before { color: #ffb08a; }

/* /systems/: one block per tool */
.tblock .num { width: 44px; height: 44px; border-radius: 12px; background: var(--ember-wash); color: var(--ember-ink); font-weight: 700; }
.tblock .note { border-left: 2px solid var(--ember); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tblock dl { border-top: 1px solid var(--rule); }
.tblock dt { color: var(--muted); }
.checks li::before { background: var(--ember); }
.report dd { font-family: var(--display); }
.report .r-top { background: var(--ink); }

/* Cookie banner (inline styles from analytics.js) */
#tk-consent-banner { background: rgba(16, 24, 32, .96) !important; border-top: 1px solid var(--hair-ink) !important; --focus: var(--ember) !important; font-family: var(--sans) !important; }
#tk-consent-banner a { color: #ffb08a !important; }
#tk-consent-banner button { border-radius: var(--r-sm) !important; font-family: var(--sans) !important; font-weight: 600 !important; }
#tk-consent-banner button:first-child { background: transparent !important; border: 1px solid rgba(255, 255, 255, .2) !important; color: #fff !important; }
#tk-consent-banner button:last-child { background: var(--ember) !important; border-color: var(--ember) !important; color: var(--ink) !important; }

/* Scroll reveals (only once nt-motion.js has run) */
html.nt-motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
html.nt-motion .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .mistake:hover, .tool:hover, .panel:hover, .sample a:hover, .post-card:hover { transform: none; }
  .phone .typing i { animation: none; opacity: .7; }
}

/* Engine page pills and markers */
.area-links a, .filter-chip { border: 1px solid var(--rule); background: #fff; color: var(--ink); box-shadow: var(--shadow-1); font-weight: 550; transition: border-color .2s, box-shadow .2s; }
.area-links a:hover, .filter-chip:hover { border-color: #cfd6de; box-shadow: var(--shadow-2); }
.filter-chip[aria-pressed="true"], .filter-chip.on, .filter-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.prose ul > li::before, .vs-body ul > li::before, .pbox li::before, .bucket li::before, .group-head .group-dot { border: 0; border-radius: 50%; width: 7px; height: 7px; background: var(--ember); }

/* The big name above the footer line (Dan, 2026-11-03): type, cool to warm. Decorative and
   aria-hidden; the logo lockup above it stays the brand mark. The gradient leans toward the
   pointer when nt-motion.js sets --fx. */
.foot .wrap { container-type: inline-size; }
.foot-mark { margin: 56px 0 0; font: 800 clamp(3rem, 17vw, 14rem)/0.82 var(--display); letter-spacing: -0.065em; text-align: center; white-space: nowrap;
  background: linear-gradient(90deg, #4c6680 0%, #4a5560 calc(var(--fx, 50%) - 30%), #5a5048 var(--fx, 50%), #7a5634 calc(var(--fx, 50%) + 40%), #8e5a2c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; padding-bottom: 0.06em; }
.foot-mark + .verse { margin-top: 28px; }
@supports (font-size: 1cqw) { .foot-mark { font-size: 21cqw; } }
@media (max-width: 600px) { .foot-mark { margin-top: 40px; } }
.foot-tag { margin: 6px 0 0; text-align: center; font: 600 clamp(0.95rem, 1.6vw, 1.15rem)/1.3 var(--display); letter-spacing: -0.01em; color: #c9b39f; }
.foot-tag + .verse { margin-top: 32px; }

/* The free-fix window (nt-fix.js). A native dialog: centred card on wide screens, a sheet that
   rises from the bottom on phones. */
dialog.fx { width: min(540px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--text); }
dialog.fx::backdrop { background: rgba(9, 13, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.fx-open { overflow: hidden; }
.fx-wrap { position: relative; }
.fx-card { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; margin: 0; padding: 30px 30px 22px; border-radius: 22px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.fx-k { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fx-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255, 90, 0, .16); }
.fx-card h2 { font-size: 1.55rem; margin: 0 0 6px; padding-right: 36px; }
.fx-card .sub { font-size: 0.93rem; margin: 0 0 16px; }
.fx-preview { margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--ground); border: 1px solid var(--rule); }
.fx-preview span { display: block; margin-bottom: 7px; font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fx-preview p { margin: 0 0 0 auto; max-width: 90%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--ember); color: #1b0d03; font-size: 0.9rem; line-height: 1.4; }
.fx-preview b { font-weight: 700; }
.fx-preview:not(.typed) b { opacity: .7; }
.fx-card .steps-dots { margin-bottom: 14px; }
.fx-card .field { margin-bottom: 12px; }
.fx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 14px 0 0 !important; font-size: 0.8rem; }
.fx-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.fx-close span, .fx-close span::after { display: block; width: 14px; height: 1.6px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.fx-close span::after { content: ""; transform: rotate(90deg); }
.fx-close:hover { background: var(--ground); border-color: #cfd6de; }
.fx-close:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
dialog.fx[open] .fx-wrap { animation: fx-in .38s var(--ease); }
dialog.fx[open]::backdrop { animation: fx-fade .3s ease; }
@keyframes fx-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes fx-fade { from { opacity: 0; } }
@media (max-width: 560px) {
  dialog.fx { width: 100vw; margin: auto 0 0; }
  .fx-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .fx-card .row2 { grid-template-columns: 1fr; }
  @keyframes fx-in { from { transform: translateY(40px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { dialog.fx[open] .fx-wrap, dialog.fx[open]::backdrop { animation: none; } }