/* Features page. Builds on site.css (tokens, nav, buttons, footer); everything here is features-only.
   Layout: a hero, a sticky bar of categories, then one section per category — its title in a sticky
   column on the left, on the right first the spotlights (text + screenshot), then the one-liners in two
   columns. Each category has a tone, taken from the theme tokens. Phones: one column. */

.ft-hero { position: relative; padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(28px, 4vw, 44px); overflow: clip; text-align: center; }
.ft-hero .hero-bg { opacity: .85; }
.ft-hero .wrap { position: relative; }
.ft-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 760; letter-spacing: -0.035em; margin: 14px auto 18px; max-width: 17ch; text-wrap: balance; }
.ft-hero h1 em { font-style: normal; background: var(--prism-line); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-hero .lede { margin: 0 auto; }

/* Tones: one colour per category */
.tone-navy { --tone: var(--navy); }
.tone-green { --tone: var(--green-ink); }
.tone-purple { --tone: var(--purple); }
.tone-info { --tone: var(--info); }
.tone-wait { --tone: var(--wait); }
.tone-violet { --tone: var(--violet); }

/* The category bar: sticks under the nav; the category in view is marked (features.js) */
.ft-jump { position: sticky; top: var(--nav-h); z-index: 30; padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.ft-jump .wrap { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ft-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 650; font-size: 0.92rem;
  transition: border-color .2s ease, background .2s ease, color .2s ease; }
.ft-jump a:hover { text-decoration: none; border-color: var(--tone); }
.ft-jump a svg.ic { width: 17px; height: 17px; color: var(--tone); }
.ft-jump a em { font-style: normal; font-size: 0.75rem; font-weight: 700; color: var(--faint); }
.ft-jump a.on { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, var(--surface)); color: var(--tone); }
.ft-jump a.on em { color: var(--tone); }

/* One category */
.ft-body { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(20px, 3vw, 32px); }
.ft-cat { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: clamp(24px, 4vw, 56px);
  padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--nav-h) + 64px); }
.ft-cat:first-child { border-top: 0; padding-top: 12px; }
.ft-cat-head { position: sticky; top: calc(var(--nav-h) + 86px); align-self: start; }
.ft-cat-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); }
.ft-cat-ic svg.ic { width: 25px; height: 25px; }
.ft-cat-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -0.025em; margin: 18px 0 8px; }
.ft-cat-head p { color: var(--muted); font-size: 1rem; margin: 0; }
.ft-count { display: inline-block; margin-top: 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.ft-cat-body { display: grid; gap: 22px; min-width: 0; }

/* Spotlight: a feature with more to say and a screenshot */
.ft-spot { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(20px, 3vw, 36px); align-items: center;
  padding: clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ft-spot.flip .ft-spot-text { order: 2; }
.ft-spot h3 { font-size: 1.35rem; letter-spacing: -0.015em; margin: 0 0 10px; }
.ft-spot p { color: var(--muted); margin: 0; }
.ft-spot ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ft-spot li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; color: var(--text); }
.ft-spot li svg.ic { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--tone); stroke-width: 2.4; }

/* Screenshot placeholder: the canvas's dot grid, the caption in the middle */
.ft-ph { aspect-ratio: 16 / 10; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--tone) 45%, var(--border));
  background: radial-gradient(color-mix(in srgb, var(--tone) 22%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px,
              color-mix(in srgb, var(--tone) 5%, var(--surface-2));
  display: grid; place-items: center; padding: 18px; text-align: center; }
.ft-ph span { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; max-width: 30ch;
  font-size: 0.86rem; font-weight: 600; color: color-mix(in srgb, var(--tone) 70%, var(--muted)); }
.ft-ph svg.ic { width: 26px; height: 26px; opacity: .8; }

/* A real screenshot in place of the placeholder (data-img in the source) */
.ft-shot { display: block; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }

/* The one-liners: two columns, a tone dot, the name, one sentence */
.ft-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 40px); }
.ft-list li { display: flex; gap: 14px; padding: 16px 4px; border-top: 1px solid var(--border); }
.ft-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 8px; background: var(--tone);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 14%, transparent); }
.ft-list b { display: block; font-weight: 680; color: var(--text); }
.ft-list li span:not(.ft-dot) { display: block; margin-top: 3px; font-size: 0.92rem; color: var(--muted); }

/* Closing call to action: the download card of index.html (site.css .dl-card), only the spacing is ours */
.ft-cta { padding-top: clamp(24px, 4vw, 48px); }

/* Light or dark: one screenshot in both themes. The stage is taller than the screen; while it scrolls past,
   its inner part sticks under the category bar and features.js sets --p from 0 to 1 — the dark layer slides
   up over the light one, and the switch flips half way. The window is sized so switch and window fit the
   screen's height. Each layer has its own website-style window bar (like the hero video's), in its own theme
   whatever the site's theme is. */
.ts { --p: 0; padding: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--border); }
.ts-head { text-align: center; max-width: 640px; margin: 0 auto; }
.ts-head h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.02em; margin: 0; }
.ts-head p { color: var(--muted); margin: 0; }
.ts-stage { height: 180vh; margin-top: 16px; }
.ts-sticky { position: sticky; top: calc(var(--nav-h) + 74px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ts-window { --w: min(100%, calc((100vh - var(--nav-h) - 74px - 70px - 24px - 34px) * 16 / 9));
  position: relative; width: var(--w); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(10, 16, 20, .45); border: 1px solid var(--border); }
.ts-layer img { display: block; width: 100%; height: auto; }
.ts-dark { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); }
.ts-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; }
.ts-bar i { width: 11px; height: 11px; border-radius: 50%; }
.ts-bar span { margin-left: 10px; font-size: 0.78rem; font-weight: 600; }
.ts-light .ts-bar { background: color-mix(in srgb, white 94%, var(--stage)); border-bottom: 1px solid color-mix(in srgb, white 84%, var(--stage)); }
.ts-light .ts-bar i { background: color-mix(in srgb, white 72%, var(--stage)); }
.ts-light .ts-bar span { color: color-mix(in srgb, white 45%, var(--stage)); }
.ts-dark .ts-bar { background: color-mix(in srgb, var(--stage) 92%, white); border-bottom: 1px solid color-mix(in srgb, var(--stage) 80%, white); }
.ts-dark .ts-bar i { background: color-mix(in srgb, var(--stage) 62%, white); }
.ts-dark .ts-bar span { color: color-mix(in srgb, var(--stage) 45%, white); }

/* The switch: sun, a track with a knob, moon. .dark is set by features.js half way through the wipe. */
.ts-switch { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ts-sun, .ts-moon { display: grid; place-items: center; }
.ts-switch svg.ic { display: block; width: 20px; height: 20px; transition: color .35s ease, opacity .35s ease; }
.ts-sun { color: var(--wait); }
.ts-moon { color: var(--faint); opacity: .6; }
.ts-track { position: relative; width: 58px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--wait) 22%, var(--surface-2));
  border: 1px solid var(--border); transition: background .35s ease; }
.ts-track i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: white;
  box-shadow: 0 2px 6px rgba(10, 16, 20, .3); transition: transform .35s cubic-bezier(.2,.75,.25,1); }
.ts-switch.dark .ts-track { background: var(--stage); }
.ts-switch.dark .ts-track i { transform: translateX(28px); }
.ts-switch.dark .ts-sun { color: var(--faint); opacity: .6; }
.ts-switch.dark .ts-moon { color: var(--violet); opacity: 1; }

@media (max-width: 1000px) {
  .ft-cat { grid-template-columns: 1fr; }
  .ft-cat-head { position: static; }
  .ft-spot { grid-template-columns: 1fr; }
  .ft-spot.flip .ft-spot-text { order: 0; }
}
@media (max-width: 640px) {
  .ts-stage { height: 120vh; }
  .ts-bar { height: 24px; padding: 0 10px; gap: 5px; }
  .ts-bar i { width: 8px; height: 8px; }
  .ts-bar span { margin-left: 6px; font-size: 0.68rem; }
  .ft-list { grid-template-columns: 1fr; }
  .ft-jump .wrap { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ft-jump a { flex: none; }
}

/* ---------------------------------------------------------------------------------------------------------
   Added 17.10.2026: counters under the title, wide spotlights and the
   small demos (features.js drives them; without script or with reduced motion each shows its end state). */

.tone-yellow { --tone: var(--yellow); }
.tone-ok { --tone: var(--ok); }

/* Counters under the page title */
.ft-stats { list-style: none; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; max-width: 940px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(24px, 4vw, 52px); }
.ft-stats li { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.ft-stats b { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 780; letter-spacing: -0.035em; line-height: 1.1;
  font-variant-numeric: tabular-nums; background: var(--prism-line); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-stats span { margin-top: 4px; font-size: 0.86rem; color: var(--muted); text-align: center; max-width: 16ch; }

/* A wide spotlight: text above (bullets in their own column), the picture or demo at full width below */
.ft-spot-media { min-width: 0; }
.ft-spot.wide { grid-template-columns: 1fr; align-items: start; }
.ft-spot.wide .ft-spot-text { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: clamp(20px, 3vw, 44px); }
.ft-spot.wide .ft-spot-text h3, .ft-spot.wide .ft-spot-text p { grid-column: 1; }
.ft-spot.wide .ft-spot-text ul { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; align-self: start; }
.ft-spot .ft-shot { box-shadow: var(--shadow); }

/* Calculate: the same canvas before and after; the button cross-fades them */
.fd-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.fd-frame img { display: block; width: 100%; height: auto; }
.fd-frame .fd-after { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.fd-calc.on .fd-after { opacity: 1; }
.fd-total { position: absolute; left: 14px; top: 14px; padding: 8px 13px; border-radius: 10px; font-weight: 750; font-size: 0.92rem;
  color: var(--green-ink); background: color-mix(in srgb, white 82%, var(--green)); border: 1px solid color-mix(in srgb, var(--green) 45%, white);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; }
:root[data-theme='dark'] .fd-total { color: color-mix(in srgb, var(--green) 40%, black); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .fd-total { color: color-mix(in srgb, var(--green) 40%, black); } }
.fd-calc.on .fd-total { opacity: 1; transform: none; transition-delay: .45s; }
.fd-calc-btn { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border: 0; border-radius: 10px; background: var(--green); color: var(--surface); font: inherit; font-weight: 750; cursor: pointer;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--green) 70%, transparent); transition: transform .15s ease, filter .15s ease; }
.fd-calc { position: relative; }
.fd-calc-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.fd-calc-btn svg.ic { width: 18px; height: 18px; }
.fd-calc:not(.on):not(.touched) .fd-calc-btn { animation: fd-pulse 1.8s ease-out infinite; }
@keyframes fd-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* Steps and tabs: one stage, the pictures stacked in it, one shown; the tab in play fills its bar */
.fd-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fd-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 9px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-weight: 680; font-size: 0.92rem; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease; }
.fd-tabs .fd-tab { padding-left: 15px; }
.fd-tab b { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: 0.76rem; background: var(--surface-3); color: var(--muted); transition: inherit; }
.fd-tab:hover { border-color: var(--tone); }
.fd-tab.on { color: var(--tone); border-color: var(--tone); background: color-mix(in srgb, var(--tone) 9%, var(--surface)); }
.fd-tab.on b { background: var(--tone); color: var(--surface); }
.fd-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--tone); }
.fd-tab.on.playing .fd-prog { animation: fd-prog var(--dur, 5s) linear forwards; }
@keyframes fd-prog { to { width: 100%; } }
.fd-stage { display: grid; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(color-mix(in srgb, var(--tone) 16%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--surface-2); }
.fd-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: scale(.985);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s; }
.fd-slide.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fd-slide img { display: block; width: 100%; height: auto; }
.fd-slide figcaption { padding: 12px 16px; font-size: 0.92rem; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); }

/* Report pages: stacked, they fan out when the spotlight comes into view; a page lifts under the pointer */
.fd-pages { position: relative; height: clamp(250px, 30vw, 380px); margin: 6px 0 4px; }
.fd-page { position: absolute; top: 0; left: 50%; width: clamp(130px, 19vw, 230px); height: auto; border-radius: 6px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); transform-origin: 50% 110%; translate: -50% 12px; rotate: 0deg;
  transition: translate 1.1s cubic-bezier(.2,.75,.25,1), rotate 1.1s cubic-bezier(.2,.75,.25,1), scale .3s ease; }
.fd-page.p1 { z-index: 4; } .fd-page.p2 { z-index: 3; } .fd-page.p3 { z-index: 2; } .fd-page.p4 { z-index: 1; }
.ft-spot.in .fd-page.p1, html.no-js .fd-page.p1 { translate: -150% 22px; rotate: -8deg; }
.ft-spot.in .fd-page.p2, html.no-js .fd-page.p2 { translate: -84% 4px; rotate: -2.5deg; }
.ft-spot.in .fd-page.p3, html.no-js .fd-page.p3 { translate: -16% 4px; rotate: 2.5deg; }
.ft-spot.in .fd-page.p4, html.no-js .fd-page.p4 { translate: 50% 22px; rotate: 8deg; }
.ft-spot.in .fd-page.p2 { transition-delay: .06s; } .ft-spot.in .fd-page.p3 { transition-delay: .12s; } .ft-spot.in .fd-page.p4 { transition-delay: .18s; }
.fd-page:hover { scale: 1.05; z-index: 6; }

/* Bound numbers: a report paragraph; changing the model changes its figures and lapses the release */
.fd-bound { display: grid; gap: 14px; }
.fd-doc { padding: 22px 24px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-left: 4px solid var(--tone); }
.fd-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-weight: 750; }
.fd-doc p { margin: 0; color: var(--text); line-height: 1.7; }
.fd-badge { font-size: 0.75rem; font-weight: 750; padding: 4px 10px; border-radius: 999px; transition: background .4s ease, color .4s ease;
  background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.fd-bound.stale .fd-badge { background: color-mix(in srgb, var(--wait) 16%, var(--surface)); color: var(--wait); }
.fd-v { padding: 1px 5px; border-radius: 5px; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--tone) 14%, transparent); transition: background .5s ease; }
.fd-v.flash { background: color-mix(in srgb, var(--wait) 34%, transparent); }
.fd-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.fd-switch span { margin-right: 6px; }
.fd-switch button { padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.fd-switch button.on { border-color: var(--tone); color: var(--tone); background: color-mix(in srgb, var(--tone) 9%, var(--surface)); }
.fd-note { margin: 0; font-size: 0.8rem; color: var(--faint); }

/* An external agent at work: its terminal, and the rows its changes leave in PrismLCA's audit log */
.fd-term { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: start; }
.fd-term-win { border-radius: 14px; overflow: hidden; background: var(--stage); border: 1px solid var(--stage-line);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--navy) 70%, transparent); }
.fd-term-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--stage-2); }
.fd-term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--stage-line); }
.fd-term-bar span { margin-left: 10px; font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--stage-text) 60%, var(--stage)); }
.fd-term-body { padding: 18px 20px 6px; min-height: 380px; font: 500 0.82rem/1.6 var(--mono); color: var(--stage-text); }
.fd-term .fd-l { margin: 0 0 13px; transition: opacity .45s ease, transform .45s ease; }
.fd-term.armed .fd-l { opacity: 0; transform: translateY(6px); }
.fd-term.armed .fd-l.shown { opacity: 1; transform: none; }
.fd-caret, .fd-dot { color: var(--green); }
.fd-call.run .fd-dot { animation: fd-blink .7s steps(2) infinite; }
@keyframes fd-blink { 50% { opacity: .2; } }
.fd-call b { color: white; font-weight: 700; }
.fd-args { color: color-mix(in srgb, var(--stage-text) 62%, var(--stage)); }
.fd-res { display: inline-block; padding-left: 1.1em; color: color-mix(in srgb, var(--stage-text) 70%, var(--stage)); }
.fd-answer { color: white; }
.fd-audit { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.fd-audit-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fd-audit-head svg.ic { width: 16px; height: 16px; color: var(--tone); }
.fd-audit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-audit li { margin: 0; padding: 9px 11px; border-radius: 9px; background: var(--surface-2); font-size: 0.86rem; color: var(--text); }
.fd-audit li span { display: block; margin-bottom: 2px; font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }

@media (max-width: 1000px) {
  .ft-spot.wide .ft-spot-text { grid-template-columns: 1fr; }
  .ft-spot.wide .ft-spot-text ul { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .fd-term { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fd-calc-btn { right: 10px; bottom: 10px; padding: 8px 13px; font-size: 0.88rem; }
  .fd-total { left: 8px; top: 8px; padding: 5px 9px; font-size: 0.78rem; }
  .fd-term-body { min-height: 0; font-size: 0.74rem; padding: 14px 14px 4px; }
  .fd-pages { height: 210px; }
  .fd-page { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-slide, .fd-frame .fd-after, .fd-total, .fd-page, .fd-term .fd-l { transition: none; }
  .fd-calc-btn { animation: none !important; }
}

/* Eight categories: the bar stays one row on a laptop screen */
@media (min-width: 641px) {
  .ft-jump .wrap { gap: 6px; flex-wrap: nowrap; max-width: none; }
  .ft-jump a { padding: 7px 11px 7px 10px; gap: 6px; font-size: 0.86rem; white-space: nowrap; }
  .ft-jump a svg.ic { width: 15px; height: 15px; }
}
@media (min-width: 641px) and (max-width: 1240px) {
  .ft-jump .wrap { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .ft-jump a { flex: none; }
}

/* A spotlight screenshot is as wide as its width attribute (build_features.py: its CSS size or data-width), centred */
.ft-spot .ft-shot { margin: 0 auto; }

/* The step story: its pictures at most at their own size (2x captures about 640–760 CSS px wide), centred */
.fd-steps .fd-stage { max-width: 600px; margin: 0 auto; }
.fd-steps .fd-tablist { justify-content: center; }

/* Eurostat: the assistant's lookup as a result card; the bars are <progress> (no inline styles), features.js
   lets them grow from 0 when the card comes into view */
.fd-euro { padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.fd-euro-call { margin: 0 0 4px; font: 500 0.82rem/1.5 var(--mono); color: var(--muted); }
.fd-euro-call b { color: var(--text); }
.fd-euro-call .fd-dot { color: var(--green); }
.fd-euro-total { margin: 0 0 14px; font-size: 0.88rem; color: var(--muted); }
.fd-euro-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fd-euro-rows li { display: grid; grid-template-columns: 8.5em 1fr 4em; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.fd-euro-rows li > span { font-weight: 650; font-size: 0.92rem; }
.fd-euro-rows em { font-style: normal; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; color: var(--tone); }
.fd-euro-rows small { grid-column: 2 / 4; font-size: 0.78rem; color: var(--faint); }
.fd-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border: 0; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--tone) 12%, var(--surface-2)); }
.fd-bar::-webkit-progress-bar { background: color-mix(in srgb, var(--tone) 12%, var(--surface-2)); border-radius: 6px; }
.fd-bar::-webkit-progress-value { background: var(--tone); border-radius: 6px; }
.fd-bar::-moz-progress-bar { background: var(--tone); border-radius: 6px; }
.fd-euro-note { margin: 14px 0 6px; font-size: 0.85rem; color: var(--text); }
.fd-euro-src { margin: 0; font-size: 0.76rem; color: var(--faint); }