/* creatyk.com · /funciones and /en/features. Uses the tokens and components of base.css (DESIGN.md has the
   rules); only this area's own rules live here. Owner: the funciones + planes agent.
   Parts: the contents bar (the app's menu), the sticky stories (a real screen held on the night sky), the
   212 tweaks, the Expedition, game mode, Discord, the tools mosaic, Appearance (a page of themes that
   scrolls inside its window), the tagline that lights up word by word, and undo.
   Built on the landing-page-design base: every text carries one of its named styles (heading-*,
   title-*, body-*, caption-*) in the markup, so this file sets no type except inside the rebuilt app
   pieces ([data-ui], the app's own sizes); spacing, radius, colour and motion come from its tokens.
   Motion moves only transform and opacity; with reduced motion everything is in its finished place. */

.is-features {
  --fxnav-h: 48px;
  --fx-top: calc(var(--nav-offset) + var(--fxnav-h) + var(--spacing-200));
  --fx-stage-h: min(calc(100svh - var(--fx-top) - var(--spacing-900)), 760px);
  --fx-ease: var(--ease);
  --fx-hover: var(--dur-hover);
  --fx-move: var(--dur-move);
  --fx-reveal: var(--dur-reveal);
}

/* ── the contents bar: the app's menu, following the reading ─────────────────────────────────── */
.fx-nav { position: sticky; top: var(--nav-offset); z-index: 45; height: var(--fxnav-h); display: flex; justify-content: center; pointer-events: none; }
.fx-nav__bar {
  pointer-events: auto; position: relative; width: fit-content; max-width: 100%; height: 100%; display: flex; align-items: center;
  padding: var(--spacing-50); border-radius: var(--radius-full); border: 1px solid var(--line-2); isolation: isolate;
}
.fx-nav__bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(24, 24, 24, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transition: background-color var(--fx-hover) var(--fx-ease); } /* taste-skill-ignore: the floating nav's own material (B7), so the two bars read as one */
.fx-nav.is-stuck .fx-nav__bar::before { background: rgba(24, 24, 24, 0.86); }
.fx-nav__list { display: flex; align-items: center; gap: var(--spacing-50); margin: 0; padding: 0; list-style: none; }
.fx-nav__link {
  display: inline-flex; align-items: center; gap: var(--spacing-75); height: 38px; padding: 0 var(--spacing-200); border-radius: var(--radius-full);
  color: var(--ink-3); text-decoration: none; white-space: nowrap;
  transition: color var(--fx-hover) var(--fx-ease), background-color var(--fx-hover) var(--fx-ease), transform var(--fx-hover) var(--fx-ease);
}
.fx-nav__link .icon { width: 16px; height: 16px; }
.fx-nav__link[aria-current="true"] { color: var(--ink); background: var(--bg-3); }
.fx-nav__link[aria-current="true"] .icon { color: var(--accent-text); }
.fx-nav__link:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .fx-nav__link:hover { color: var(--ink); background: var(--bg-2); } }
.fx-nav__menu { display: none; }

@media (max-width: 1599px) { .fx-nav__link .icon { display: none; } }

@media (max-width: 1039px) {
  .fx-nav__list { display: none; }
  .fx-nav__bar { width: calc(100% - 2 * var(--gutter)); padding: 0 var(--spacing-200); }
  .fx-nav__menu { display: block; position: static; width: 100%; }
  .fx-nav__summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); height: var(--fxnav-h);
    list-style: none; cursor: pointer; border-radius: var(--radius-8); color: var(--ink);
  }
  .fx-nav__summary::-webkit-details-marker { display: none; }
  .fx-nav__now { display: inline-flex; align-items: center; gap: var(--spacing-100); min-width: 0; }
  .fx-nav__now-icon { display: grid; place-items: center; color: var(--accent-text); }
  .fx-nav__now-icon .icon { width: 18px; height: 18px; }
  .fx-nav__chev { width: 18px; height: 18px; color: var(--ink-3); transform: rotate(90deg); transition: transform var(--fx-move) var(--fx-ease); }
  .fx-nav__menu[open] .fx-nav__chev { transform: rotate(-90deg); }
  .fx-nav__drop {
    position: absolute; top: calc(100% + var(--spacing-75)); left: 0; right: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-50); margin: 0;
    list-style: none; border-radius: var(--radius-16);
    background: var(--bg-1); border: 1px solid var(--line-2);
  }
  .fx-nav .fx-nav__drop { padding: var(--spacing-75); }
  .fx-nav__drop-link {
    display: flex; align-items: center; gap: var(--spacing-100); min-height: 48px; padding: 0 var(--spacing-100); border-radius: var(--radius-8); /* inner: 16 less its 8 inset */
    color: var(--ink-2); text-decoration: none;
    transition: color var(--fx-hover) var(--fx-ease), background-color var(--fx-hover) var(--fx-ease), transform var(--fx-hover) var(--fx-ease);
  }
  .fx-nav__drop-link .icon { width: 18px; height: 18px; color: var(--ink-3); }
  .fx-nav__drop-link[aria-current="true"] { background: var(--bg-3); color: var(--ink); }
  .fx-nav__drop-link[aria-current="true"] .icon { color: var(--accent-text); }
  .fx-nav__drop-link:active { transform: scale(0.98); }
  @media (prefers-reduced-motion: no-preference) {
    .fx-nav__menu[open] .fx-nav__drop { animation: fx-drop var(--fx-move) var(--fx-ease); }
  }
}
@keyframes fx-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 420px) { .fx-nav__drop { grid-template-columns: minmax(0, 1fr); } }

/* anchors land under the header and the contents bar */
.fx-chapter[id] { scroll-margin-top: calc(var(--fxnav-h) + var(--spacing-400) - var(--gap-section)); }
.fx-step[id], .fx-tweaks, .fx-measure, .fx-tile[id] { scroll-margin-top: calc(var(--fxnav-h) + var(--spacing-300)); }

/* ── shared pieces ───────────────────────────────────────────────────────────────────────────── */
.fx-h4 { display: flex; align-items: center; gap: var(--spacing-100); }
.fx-h4 .icon { width: 20px; height: 20px; color: var(--accent-text); }
.fx-note { margin-top: var(--spacing-400); display: flex; gap: var(--spacing-100); align-items: flex-start; max-width: 64ch; color: var(--ink-2); }
.fx-note > .icon { width: 18px; height: 18px; margin-top: var(--spacing-50); color: var(--accent-text); }
.fx-figure { display: grid; gap: var(--spacing-75); }
.fx-figure__n { color: var(--ink); }
.fx-figure__label { max-width: 32ch; color: var(--ink-2); }
.fx-checks { margin-top: var(--spacing-75); }
/* the plan a feature needs: the chip colours of base.css, at a readable size */
.fx-plan { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--spacing-100); border-radius: var(--radius-full); white-space: nowrap; }
.fx-plan { background: var(--bg-3); }
.fx-plan--free { color: var(--ok); }
.fx-plan--nova { background: var(--button); color: #fff; }
.fx-plan--quasar { color: var(--gold); }
.fx-caption { margin-top: var(--spacing-200); color: var(--ink-3); }
/* screenshots sit on a tone step here: the app window's 1 px light, no shadow */
.is-features .shot--window { box-shadow: var(--frame-line); }
.fx-narrow-only { display: none; }

/* ── the sticky stories: steps on one side, a real screen held on the night sky on the other ─── */
.fx-story { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); column-gap: var(--spacing-700); }
.fx-story--flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
.fx-story__steps { grid-column: 1; grid-row: 1; margin: 0; list-style: none; }
/* room after the last step, so the held screen stays until it has been read (beats ol[class] of base.css) */
.fx-story .fx-story__steps { padding: 0 0 40svh; }
.fx-story__media { grid-column: 2; grid-row: 1; position: relative; }
.fx-story--flip .fx-story__steps { grid-column: 2; }
.fx-story--flip .fx-story__media { grid-column: 1; }
.fx-story__sticky {
  position: sticky; top: var(--fx-top); height: calc(100svh - var(--fx-top));
  display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-200);
}
.fx-stage { position: relative; isolation: isolate; height: var(--fx-stage-h); border-radius: var(--radius-24); background: var(--bg-1); overflow: clip; }
.fx-stage__sky { z-index: -1; }
.fx-panel { position: absolute; inset: var(--spacing-200); display: grid; place-items: center; margin: 0; }
/* the levels and the Home screen are wide: a letterbox stage, so they fill it */
[data-fx-story="optimize"] .fx-stage { height: min(var(--fx-stage-h), 440px); }
/* two pieces of one screen, one above the other (the driver and its manual guide) */
.fx-stack { display: grid; gap: var(--spacing-100); justify-items: center; }
.fx-stack__tall img { max-height: calc(var(--fx-stage-h) - var(--spacing-400) - 152px); } /* 152: the driver card (140) and the gap */
/* nested corners: the stage (24) less its inset (16) */
.fx-held { width: fit-content; max-width: 100%; margin: 0; }
.fx-held, .fx-held img { border-radius: var(--radius-8); }
.fx-held img { width: auto; max-width: 100%; max-height: calc(var(--fx-stage-h) - var(--spacing-400)); }
.fx-story__count { text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.fx-step { margin-top: 46svh; }
.fx-step:first-child { margin-top: 12svh; }
.fx-step__text { max-width: 440px; transition: opacity var(--fx-move) var(--fx-ease); }
.fx-story--flip .fx-step__text { margin-left: auto; }
.js .fx-step:not(.is-active) .fx-step__text { opacity: 0.5; }
.fx-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-75) var(--spacing-200); }
.fx-step__p { margin-top: var(--spacing-100); color: var(--ink-2); }
.fx-step__note { margin-top: var(--spacing-200); color: var(--ink-3); }
.fx-step__inline { display: none; }

/* the held screen changes: the next one rises in, the last one leaves upwards */
.js .fx-panel {
  z-index: 1; opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.98);
  transition: opacity var(--fx-move) var(--fx-ease), transform var(--fx-reveal) var(--fx-ease), visibility 0s linear var(--fx-move);
}
.js .fx-panel.is-past { transform: translateY(-24px) scale(0.98); }
.js .fx-panel.is-active { z-index: 2; opacity: 1; visibility: visible; transform: none; transition: opacity var(--fx-reveal) var(--fx-ease), transform var(--fx-reveal) var(--fx-ease), visibility 0s; }
/* the four levels share one picture: only the highlight moves, without a dip between them */
.js .fx-panel--still, .js .fx-panel--still.is-past { transform: none; }
.js .fx-panel--still:not(.is-active) { transition: opacity 0s linear 450ms, visibility 0s linear 450ms; }
.js .fx-panel--still.is-active { transition: opacity 450ms var(--fx-ease), visibility 0s; }

/* the four level cards in fx-lv-row (1079×262): the one being read is lit, the others wait */
.fx-lv { position: relative; }
.fx-lv__card { position: absolute; top: 27.6%; height: 69.6%; width: 23.8%; border-radius: var(--radius-8); background: rgba(0, 0, 0, 0.6); }
.fx-lv__card--1 { left: 0.2%; }
.fx-lv__card--2 { left: 25.3%; }
.fx-lv__card--3 { left: 50.7%; }
.fx-lv__card--4 { left: 76%; }
.fx-lv[data-on="1"] .fx-lv__card--1, .fx-lv[data-on="2"] .fx-lv__card--2,
.fx-lv[data-on="3"] .fx-lv__card--3, .fx-lv[data-on="4"] .fx-lv__card--4 { background: transparent; outline: 2px solid var(--violet-400); outline-offset: -1px; }

/* the NVIDIA profile, rebuilt from the app with its 17 values */
[data-ui].fx-nv { width: min(100%, 560px); padding: var(--spacing-200); border-radius: var(--radius-16); background: var(--ui-bg); border: 1px solid var(--ui-line); font-size: 12px; line-height: 16px; text-align: left; }
[data-ui] .fx-nv__title { display: flex; align-items: baseline; gap: var(--spacing-100); font-size: 16px; line-height: 24px; font-weight: 700; }
[data-ui] .fx-nv__count { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ui-accent-text); letter-spacing: -0.03em; }
[data-ui] .fx-nv__sub { margin-top: var(--spacing-50); color: var(--ui-soft); }
[data-ui] .fx-nv__list { margin: var(--spacing-100) 0 0; display: grid; gap: var(--spacing-25); }
[data-ui] .fx-nv__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--spacing-100); padding: var(--spacing-50) var(--spacing-75); border-radius: var(--radius-6); background: var(--ui-card); }
[data-ui] .fx-nv__row dt { color: var(--ui-ink); }
[data-ui] .fx-nv__row dd { margin: 0; color: var(--ui-accent-text); font-weight: 600; }
[data-ui] .fx-nv__btns { margin-top: var(--spacing-100); display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
.fx-nv--held { max-height: calc(var(--fx-stage-h) - var(--spacing-400)); overflow: hidden; }

/* ── 212 tweaks ─────────────────────────────────────────────────────────────────────────────── */
.fx-tweaks { margin-top: var(--spacing-900); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-700); align-items: start; }
.fx-tweaks__lead { margin-top: var(--spacing-200); max-width: 60ch; color: var(--ink-2); }
.fx-tweaks__p { margin-top: var(--spacing-200); max-width: 60ch; color: var(--ink-2); }
.fx-tweaks__search { margin-top: var(--spacing-300); display: flex; gap: var(--spacing-100); align-items: flex-start; color: var(--ink-2); }
.fx-tweaks__search .icon { width: 18px; height: 18px; margin-top: var(--spacing-50); color: var(--accent-text); }
[data-ui].fx-menu { margin: var(--spacing-400) 0 0; padding: var(--spacing-75); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-25); border-radius: var(--radius-16); background: var(--ui-bg); border: 1px solid var(--ui-line); }
[data-ui] .fx-menu__item { display: flex; align-items: center; gap: var(--spacing-100); padding: var(--spacing-75); border-radius: var(--radius-8); font-size: 14px; line-height: 20px; color: var(--ui-ink); }
[data-ui] .fx-menu__item .icon { width: 18px; height: 18px; color: var(--ui-soft); }
[data-ui].fx-risks { margin: var(--spacing-300) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
[data-ui] .fx-risk { padding: var(--spacing-50) var(--spacing-75); border-radius: var(--radius-6); font: 600 12px/16px var(--mono); letter-spacing: 0.04em; } /* taste-skill-ignore: the app's own risk labels */
[data-ui] .fx-risk { background: var(--bg-3); }
[data-ui] .fx-risk--0 { color: var(--ok); }
[data-ui] .fx-risk--1 { color: var(--warn); }
[data-ui] .fx-risk--2 { color: #fb923c; } /* the app's own orange for High */
[data-ui] .fx-risk--3 { color: var(--danger); }

/* ── splits: a screen beside its text ───────────────────────────────────────────────────────── */
.fx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-700); align-items: center; }
#expedition .fx-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
#discord .fx-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fx-split .section-head { margin-bottom: var(--spacing-400); }
.fx-split__media { min-width: 0; }
.fx-split__media .shot--window { width: 100%; }

/* the Expedition's five steps */
.fx-route { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-50); }
.fx-route__step { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--spacing-200); padding: var(--spacing-75) 0; align-items: baseline; }
.fx-route__name { position: relative; padding-left: var(--spacing-200); color: var(--ink); }
.fx-route__name::before { content: ""; position: absolute; left: 0; top: var(--spacing-75); width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--violet-400); }
.fx-route__text { color: var(--ink-2); }

/* ── game mode: one large screen that settles into place, and its numbers ───────────────────── */
.fx-gm { display: flex; justify-content: center; }
.fx-gm__shot { max-width: 1004px; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .fx-gm[data-scrub] .fx-gm__shot { transform: scale(calc(0.9 + var(--p) * 0.1)); }
}
.fx-facts { margin: var(--spacing-700) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-400); }
.fx-fact__v { color: var(--ink); }
.fx-fact__t { margin: var(--spacing-75) 0 0; color: var(--ink-2); }

/* measure performance, under the GPU story */
.fx-measure { margin-top: var(--spacing-700); padding: var(--spacing-400); border-radius: var(--radius-16); background: var(--bg-1); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--spacing-400); align-items: start; }
.fx-measure__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-400); }
.fx-measure__item p { color: var(--ink-2); }
.fx-measure__plan { margin-top: var(--spacing-100); }

/* ── Discord: three real pieces of its page, a little offset ────────────────────────────────── */
.fx-pair { display: grid; gap: var(--spacing-200); justify-items: start; }
.fx-pair__item { width: min(100%, 500px); }
.fx-pair__item--2 { margin-left: 25%; }
.fx-pair__item--3 { margin-left: 8%; }

/* ── the tools mosaic ────────────────────────────────────────────────────────────────────────── */
.fx-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-200); }
.fx-tile { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; padding: var(--spacing-400); border-radius: var(--radius-16); background: var(--bg-1); }
.fx-tile--cleanup { grid-column: span 7; }
.fx-tile--programs { grid-column: span 5; grid-row: span 2; }
.fx-tile--repair { grid-column: span 7; }
.fx-tile--processes { grid-column: span 6; }
.fx-tile--network { grid-column: span 6; }
.fx-tile__p { max-width: 56ch; color: var(--ink-2); }
.fx-tile__shot { margin-top: var(--spacing-75); }
.fx-tile .shot { width: 100%; }
.fx-tile .shot--crop { padding: var(--spacing-100); }
.fx-figure--tile { margin-bottom: var(--spacing-75); }
[data-ui].fx-programs { margin-top: var(--spacing-75); display: grid; gap: var(--spacing-200); }
[data-ui] .fx-programs__name { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-soft); }
[data-ui] .fx-programs__group ul { margin: var(--spacing-75) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-50); }
[data-ui] .fx-programs__group li { padding: var(--spacing-50) var(--spacing-75); border-radius: var(--radius-6); background: var(--ui-raised); font-size: 12px; line-height: 16px; color: var(--ui-ink); }
[data-ui].fx-grades { margin-top: var(--spacing-75); padding: var(--spacing-200); border-radius: var(--radius-12); background: var(--ui-bg); border: 1px solid var(--ui-line); }
[data-ui] .fx-grades__title { font-size: 14px; line-height: 20px; font-weight: 700; }
[data-ui] .fx-grades__list { margin: var(--spacing-100) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-75); }
[data-ui] .fx-grade { display: grid; justify-items: center; gap: var(--spacing-50); padding: var(--spacing-100) var(--spacing-50); border-radius: var(--radius-8); background: var(--ui-card); text-align: center; }
[data-ui] .fx-grade__g { font-size: 20px; line-height: 28px; font-weight: 700; }
[data-ui] .fx-grade__r { font-size: 12px; line-height: 16px; color: var(--ui-soft); }
[data-ui] .fx-grade--0 .fx-grade__g, [data-ui] .fx-grade--1 .fx-grade__g { color: var(--ok); }
[data-ui] .fx-grade--2 .fx-grade__g { color: #bef264; }
[data-ui] .fx-grade--3 .fx-grade__g { color: #fde047; }
[data-ui] .fx-grade--4 .fx-grade__g, [data-ui] .fx-grade--5 .fx-grade__g { color: var(--danger); }

/* ── Appearance: the page of themes scrolls inside its window as you pass ───────────────────── */
.fx-pan-wrap { margin: 0; }
.fx-pan { height: min(640px, 72svh); }
.fx-pan__img { width: 100%; height: auto; border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fx-pan[data-scrub] .fx-pan__img { transform: translateY(calc((min(640px, 72svh) - 100%) * clamp(0, (var(--p) - 0.18) / 0.64, 1))); }
}
#appearance .fx-figure { margin: var(--spacing-75) 0 var(--spacing-300); }
.fx-look { margin-top: var(--spacing-400); display: grid; gap: var(--spacing-200); }

/* ── the tagline, word by word ──────────────────────────────────────────────────────────────── */
.fx-tagline { padding-top: var(--gap-section); text-align: center; }
.fx-tagline__text { max-width: 680px; margin-inline: auto; color: var(--ink); text-wrap: balance; }
.fx-tagline.is-armed .fx-w { opacity: 0.3; transition: opacity var(--fx-reveal) var(--fx-ease); }
.fx-tagline.is-armed .fx-w.is-on { opacity: 1; }

/* ── undo: a band of the real History, the four ways back, and what is not undone ───────────── */
.fx-band { display: grid; gap: var(--spacing-200); justify-items: center; }
.fx-band .shot--window { width: min(100%, 1010px); }
.fx-undo { margin: var(--spacing-700) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-400) var(--spacing-700); }
.fx-undo__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--spacing-200); align-items: start; }
.fx-undo__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-12); background: var(--accent-soft); color: var(--accent-text); }
.fx-undo__icon .icon { width: 20px; height: 20px; }
.fx-undo__title { display: block; color: var(--ink); }
.fx-undo__text { display: block; margin-top: var(--spacing-50); max-width: 52ch; color: var(--ink-2); }
.fx-undo__not { margin-top: var(--spacing-600); max-width: 760px; padding: var(--spacing-300); border-radius: var(--radius-16); background: var(--bg-1); }
.fx-undo__not p { margin-top: var(--spacing-75); max-width: 64ch; color: var(--ink-2); }
.fx-undo__more { margin-top: var(--spacing-200); }

/* ── tablet and phone ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .fx-wide-only { display: none; }
  .fx-narrow-only { display: block; }
  .fx-narrow-only.shot { width: fit-content; max-width: 100%; }
  .fx-story, .fx-story--flip { display: block; }
  .fx-story__media { display: none; }
  .fx-story .fx-story__steps { padding-bottom: 0; }
  .fx-step, .fx-step:first-child { margin-top: var(--spacing-600); }
  .fx-story--flip .fx-step__text { margin-left: 0; }
  .js .fx-step:not(.is-active) .fx-step__text { opacity: 1; }
  .fx-step__inline { display: block; margin-top: var(--spacing-300); width: fit-content; max-width: 100%; }
  .fx-step__inline--ui { width: 100%; }
  [data-ui].fx-nv { width: 100%; }
  .fx-tweaks, .fx-split, #expedition .fx-split, #discord .fx-split { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-600); }
  .fx-tweaks { margin-top: var(--spacing-800); }
  .fx-undo { margin-top: var(--spacing-600); grid-template-columns: minmax(0, 1fr); gap: var(--spacing-300); }
  #expedition .fx-split__media, #appearance .fx-split__media { order: 2; }
  .fx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-400) var(--spacing-300); }
  .fx-measure { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-300); padding: var(--spacing-300); }
  .fx-mosaic { grid-template-columns: minmax(0, 1fr); }
  .fx-pair__item--2, .fx-pair__item--3 { margin-left: 0; }
  .fx-tile--cleanup, .fx-tile--programs, .fx-tile--repair, .fx-tile--processes, .fx-tile--network { grid-column: auto; grid-row: auto; }
}
@media (max-width: 680px) {
  .fx-measure__list { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-300); }
  .fx-tile { padding: var(--spacing-300); }
  .fx-route__step { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-50); }
  [data-ui] .fx-grades__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* left aligned on phones, so the tagline never centres four lines */
  .fx-tagline { text-align: left; }
  .fx-tagline .fx-tagline__text { margin-inline: 0; }
  [data-ui].fx-menu { grid-template-columns: minmax(0, 1fr); }
}
html:not(.js) .fx-story { display: block; }
html:not(.js) .fx-story__media { display: none; }
html:not(.js) .fx-step, html:not(.js) .fx-step:first-child { margin-top: var(--spacing-600); }
html:not(.js) .fx-step__inline { display: block; margin-top: var(--spacing-300); width: fit-content; max-width: 100%; }
html:not(.js) .fx-step__inline--ui { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fx-tagline.is-armed .fx-w { opacity: 1; }
}