/*
 * Homepage scroll chapters (partials/home/features.leaf: .fk-story / .fk-ch).
 *
 * Three ways a chapter renders, and every one is complete:
 *   1. No script, or prefers-reduced-motion: reduce (html has no .fk-motion):
 *      a plain two-column row (one column on phones) showing the FINISHED
 *      state. Elements that only exist mid-sequence (data-until) are hidden.
 *   2. Script + motion, wide and tall viewport (PIN query below): the chapter
 *      is a tall track; .fk-ch__pin sticks for the length of it, and
 *      motion.js maps scroll progress to data-step. [data-at] elements get
 *      .is-on / .is-past and transition between states.
 *   3. Script + motion, narrow or short viewport: no pin. The stage plays its
 *      steps on a timer once it is on screen (motion.js), so a phone never
 *      scroll-jacks.
 * Only transform and opacity animate. Scroll-scrubbed depth uses CSS
 * scroll-driven animations where supported, and is skipped elsewhere.
 *
 * Mockup type is sized in cqi: 1% of the device frame's own width.
 * --fk-st-* / --fk-sm-* names are component-scoped internals, not tokens.
 */

.fk-story {
    --fk-sm-trail: #0f766e;
    --fk-sm-trail-soft: rgba(15, 118, 110, 0.14);
    --fk-sm-map-a: #e8f1ea;
    --fk-sm-map-b: #d5e8dc;
    --fk-sm-map-line: rgba(15, 118, 110, 0.16);
    --fk-sm-route: #e85d04;
    --fk-sm-field: #f1f3f6;
    --fk-sm-wall-a: #1e3a5f;
    --fk-sm-wall-b: #e85d04;
    overflow-x: clip;
}

[data-theme="dark"] .fk-story {
    --fk-sm-trail: #2dd4bf;
    --fk-sm-trail-soft: rgba(45, 212, 191, 0.16);
    --fk-sm-map-a: #10261f;
    --fk-sm-map-b: #0c1f1a;
    --fk-sm-map-line: rgba(45, 212, 191, 0.14);
    --fk-sm-field: #1b2742;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fk-story {
        --fk-sm-trail: #2dd4bf;
        --fk-sm-trail-soft: rgba(45, 212, 191, 0.16);
        --fk-sm-map-a: #10261f;
        --fk-sm-map-b: #0c1f1a;
        --fk-sm-map-line: rgba(45, 212, 191, 0.14);
        --fk-sm-field: #1b2742;
    }
}

/* ---------- Chapter layout (static: no script / reduced motion) ---------- */

.fk-ch {
    position: relative;
}

.fk-ch__pin {
    box-sizing: border-box;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.fk-ch__grid {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: center;
    width: min(100%, 86rem);
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

.fk-ch__copy {
    max-width: 30rem;
}

.fk-ch__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 var(--fk-space-md);
    color: var(--fk-primary-text);
    font-size: var(--fk-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--fk-tracking-eyebrow);
    text-transform: uppercase;
}

.fk-ch__num {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-accent-gradient);
    color: var(--fk-primary-contrast);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
}

.fk-ch__copy h3 {
    margin: 0;
    color: var(--fk-ink);
    font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem);
    font-weight: 700;
    letter-spacing: var(--fk-tracking-tight);
    line-height: 1.08;
    text-wrap: balance;
}

.fk-ch__lead {
    margin: var(--fk-space-md) 0 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-lead);
    line-height: var(--fk-leading-body);
    text-wrap: pretty;
}

.fk-ch__steps {
    display: grid;
    gap: 0.15rem;
    margin: var(--fk-space-lg) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: fk-ch-step;
}

.fk-ch__steps li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.6rem;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-body);
    line-height: 1.45;
}

.fk-ch__steps li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.2rem;
    top: 0.95rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-primary);
}

.fk-ch__steps b {
    margin-inline-end: 0.35rem;
    color: var(--fk-ink);
    font-weight: 700;
}

.fk-ch__steps--status li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline-start: 0;
}

.fk-ch__steps--status li::before {
    display: none;
}

.fk-ch__steps--status .fk-chip {
    flex: none;
    min-width: 6.4rem;
    font-size: 0.8rem;
    text-align: center;
}

.fk-ch__rail {
    display: none;
}

.fk-ch__stage {
    min-width: 0;
}

/* ---------- Stage: devices placed by % of the stage box ---------- */

.fk-st {
    position: relative;
    width: 100%;
    aspect-ratio: 6 / 5;
    margin-inline: auto;
}

.fk-st__glow {
    position: absolute;
    inset: 4% 2%;
    background: var(--fk-accent-glow);
    pointer-events: none;
}

.fk-st__dev,
.fk-st__float,
.fk-st__card,
.fk-st__rank,
.fk-st__plus {
    position: absolute;
    left: var(--x, 0%);
    top: var(--y, 0%);
    z-index: var(--z, 1);
    width: var(--w, auto);
    rotate: var(--r, 0deg);
}

[dir="rtl"] .fk-st__dev,
[dir="rtl"] .fk-st__float,
[dir="rtl"] .fk-st__card,
[dir="rtl"] .fk-st__rank,
[dir="rtl"] .fk-st__plus {
    left: auto;
    right: var(--x, 0%);
}

/* 01 Collect: Mac at the back, iPad left, iPhone and Android in front. */
.fk-st--collect .fk-st__dev--mac { --x: 19%; --y: 1%; --w: 81%; --z: 1; }
.fk-st--collect .fk-st__dev--pad { --x: 0%; --y: 38%; --w: 50%; --z: 2; }
.fk-st--collect .fk-st__dev--phone { --x: 45%; --y: 30%; --w: 23.5%; --z: 3; --r: -2deg; }
.fk-st--collect .fk-st__dev--android { --x: 73%; --y: 36%; --w: 23%; --z: 4; --r: 2deg; }

/* 02 Vote: one large iPhone with vote chips around it. */
.fk-st--vote .fk-st__dev--phone { --x: 31%; --y: 2%; --w: 38%; --z: 2; }
.fk-st--vote .fk-st__float--a { --x: 0%; --y: 18%; --z: 3; }
.fk-st--vote .fk-st__float--b { --x: 66%; --y: 66%; --z: 3; }
.fk-st--vote .fk-st__float--c { --x: 3%; --y: 70%; --z: 3; }
.fk-st--vote .fk-st__rank { --x: 70%; --y: 14%; --w: 30%; --z: 3; }
.fk-st--vote .fk-st__plus { --x: 26%; --y: 23%; --z: 4; }

/* 03 Triage: Mac admin at the back, iPad and iPhone in front. */
.fk-st--triage .fk-st__dev--mac { --x: 6%; --y: 0%; --w: 94%; --z: 1; }
.fk-st--triage .fk-st__dev--pad { --x: 0%; --y: 50%; --w: 46%; --z: 2; --r: -1.5deg; }
.fk-st--triage .fk-st__dev--phone { --x: 75%; --y: 36%; --w: 23.5%; --z: 3; --r: 2deg; }

/* 04 Notify: Mac and iPhone with banners, Slack and email cards in front. */
.fk-st--notify .fk-st__dev--mac { --x: 0%; --y: 2%; --w: 80%; --z: 1; }
.fk-st--notify .fk-st__dev--phone { --x: 75%; --y: 10%; --w: 24%; --z: 2; --r: 2deg; }
.fk-st--notify .fk-st__card--slack { --x: 3%; --y: 57%; --w: 44%; --z: 3; --r: -1.5deg; }
.fk-st--notify .fk-st__card--mail { --x: 42%; --y: 63%; --w: 44%; --z: 4; --r: 1.5deg; }

/* ---------- Status chips (real FeedbackKit statuses only) ---------- */

.fk-chip {
    display: inline-block;
    padding: 0.18em 0.62em;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-chip-bg);
    color: var(--fk-chip-fg);
    font-size: 0.78em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.fk-chip--pending { --fk-chip-bg: rgba(100, 116, 139, 0.16); --fk-chip-fg: #334155; }
.fk-chip--approved { --fk-chip-bg: rgba(37, 99, 235, 0.14); --fk-chip-fg: #1d4ed8; }
.fk-chip--progress { --fk-chip-bg: rgba(234, 88, 12, 0.16); --fk-chip-fg: #9a3412; } /* 5.6:1 on its tint; #c2410c was 4.0:1 */
.fk-chip--testflight { --fk-chip-bg: rgba(8, 145, 178, 0.16); --fk-chip-fg: #155e75; } /* 5.7:1 on its tint; #0e7490 was 4.2:1 */
.fk-chip--completed { --fk-chip-bg: rgba(22, 163, 74, 0.16); --fk-chip-fg: #166534; }
.fk-chip--rejected { --fk-chip-bg: rgba(220, 38, 38, 0.12); --fk-chip-fg: #b91c1c; }

[data-theme="dark"] .fk-chip--pending { --fk-chip-bg: rgba(148, 163, 184, 0.18); --fk-chip-fg: #e2e8f0; }
[data-theme="dark"] .fk-chip--approved { --fk-chip-bg: rgba(59, 130, 246, 0.22); --fk-chip-fg: #bfdbfe; }
[data-theme="dark"] .fk-chip--progress { --fk-chip-bg: rgba(249, 115, 22, 0.22); --fk-chip-fg: #fed7aa; }
[data-theme="dark"] .fk-chip--testflight { --fk-chip-bg: rgba(34, 211, 238, 0.18); --fk-chip-fg: #a5f3fc; }
[data-theme="dark"] .fk-chip--completed { --fk-chip-bg: rgba(34, 197, 94, 0.2); --fk-chip-fg: #bbf7d0; }
[data-theme="dark"] .fk-chip--rejected { --fk-chip-bg: rgba(248, 113, 113, 0.2); --fk-chip-fg: #fecaca; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fk-chip--pending { --fk-chip-bg: rgba(148, 163, 184, 0.18); --fk-chip-fg: #e2e8f0; }
    :root:not([data-theme="light"]) .fk-chip--approved { --fk-chip-bg: rgba(59, 130, 246, 0.22); --fk-chip-fg: #bfdbfe; }
    :root:not([data-theme="light"]) .fk-chip--progress { --fk-chip-bg: rgba(249, 115, 22, 0.22); --fk-chip-fg: #fed7aa; }
    :root:not([data-theme="light"]) .fk-chip--testflight { --fk-chip-bg: rgba(34, 211, 238, 0.18); --fk-chip-fg: #a5f3fc; }
    :root:not([data-theme="light"]) .fk-chip--completed { --fk-chip-bg: rgba(34, 197, 94, 0.2); --fk-chip-fg: #bbf7d0; }
    :root:not([data-theme="light"]) .fk-chip--rejected { --fk-chip-bg: rgba(248, 113, 113, 0.2); --fk-chip-fg: #fecaca; }
}

/* A chip set stacks every state in one grid cell, so a status change
   cross-fades in place without moving its neighbours. */
.fk-chipset,
.fk-sm-vbtn {
    display: inline-grid;
    justify-items: start;
}

.fk-chipset > *,
.fk-sm-vbtn > * {
    grid-area: 1 / 1;
}

/* ---------- Screen mockups ---------- */

.fk-sm {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--fk-device-screen);
    color: var(--fk-ink);
    line-height: 1.25;
    text-align: start;
}

.fk-sm b,
.fk-sm small,
.fk-sm i,
.fk-sm span {
    font-style: normal;
}

.fk-sm--phone {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding: 15cqi 5cqi 6cqi;
    font-size: 4.7cqi;
}

.fk-sm--pad {
    font-size: 2.4cqi;
}

.fk-sm--mac {
    font-size: 1.8cqi;
}

/* Shared rows */
.fk-sm-row,
.fk-sm-card {
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr);
    gap: 0.7em;
    align-items: center;
}

.fk-sm-row {
    padding-block: 0.6em;
    border-bottom: 1px solid var(--fk-hairline);
}

.fk-sm-row__t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
    min-width: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fk-sm-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    padding: 0.35em 0.2em;
    border: 1px solid var(--fk-hairline);
    border-radius: 0.6em;
    background: var(--fk-surface-raised);
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1.1;
}

.fk-sm-vote::before {
    content: "";
    width: 0;
    height: 0;
    margin-bottom: 0.2em;
    border-inline: 0.32em solid transparent;
    border-bottom: 0.38em solid var(--fk-primary-text);
}

.fk-sm-seg {
    display: inline-flex;
    gap: 0.2em;
    padding: 0.2em;
    border-radius: 0.6em;
    background: var(--fk-sm-field);
    font-size: 0.85em;
    font-weight: 600;
}

.fk-sm-seg i {
    padding: 0.25em 0.8em;
    border-radius: 0.45em;
    color: var(--fk-text-muted, var(--fk-ink-soft));
}

.fk-sm-seg .is-sel {
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.fk-sm-kicker {
    color: var(--fk-primary-text);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fk-sm-label {
    margin-top: 0.3em;
    color: var(--fk-ink-soft);
    font-size: 0.8em;
    font-weight: 600;
}

/* iPhone form (Collect) */
.fk-sm-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 0.4em;
    font-size: 0.88em;
}

.fk-sm-nav span {
    color: var(--fk-sm-trail);
}

.fk-sm-nav b {
    font-weight: 700;
}

.fk-sm-nav__go {
    justify-self: end;
    font-weight: 700;
}

.fk-sm-field {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    padding: 0.55em 0.7em;
    border-radius: 0.7em;
    background: var(--fk-sm-field);
}

.fk-sm-field small {
    color: var(--fk-ink-soft);
    font-size: 0.72em;
    font-weight: 600;
}

.fk-sm-field--area span {
    color: var(--fk-ink-soft);
    font-size: 0.9em;
    line-height: 1.35;
}

.fk-sm-type {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
}

.fk-sm-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}

.fk-sm-cats i {
    padding: 0.3em 0.65em;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-pill);
    font-size: 0.78em;
    font-weight: 600;
}

.fk-sm-cats .is-sel {
    border-color: transparent;
    background: var(--fk-sm-trail);
    color: #ffffff;
}

.fk-sm-btn {
    margin-top: auto;
    padding: 0.75em;
    border-radius: 0.8em;
    background: var(--fk-sm-trail);
    color: #ffffff;
    font-weight: 700;
    text-align: center;
}

/* Android list (Collect) */
.fk-sm--material {
    gap: 0.5em;
    padding-top: 12cqi;
    background: var(--fk-surface-alt);
}

.fk-sm-appbar {
    padding-bottom: 0.3em;
    font-size: 1.3em;
}

.fk-sm-card {
    padding: 0.65em;
    border-radius: 0.9em;
    background: var(--fk-surface-raised);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.fk-sm-fab {
    position: absolute;
    right: 6cqi;
    bottom: 7cqi;
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 0.9em;
    background: var(--fk-sm-trail);
    color: #ffffff;
    font-size: 1.2em;
    font-weight: 700;
    box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.35);
}

/* Trailmate map (Collect: iPad, Mac) */
.fk-sm-map {
    position: relative;
    overflow: hidden;
    background:
        repeating-radial-gradient(circle at 34% 46%, transparent 0 1.5em, var(--fk-sm-map-line) 1.5em 1.62em),
        repeating-radial-gradient(circle at 78% 18%, transparent 0 1.2em, var(--fk-sm-map-line) 1.2em 1.3em),
        linear-gradient(160deg, var(--fk-sm-map-a), var(--fk-sm-map-b));
}

.fk-sm-map__route {
    position: absolute;
    left: 18%;
    top: 26%;
    width: 52%;
    height: 46%;
    border: 0.4em dashed var(--fk-sm-route);
    border-color: transparent var(--fk-sm-route) var(--fk-sm-route) transparent;
    border-radius: 60% 40% 55% 45%;
    rotate: -18deg;
}

.fk-sm-map__pin {
    position: absolute;
    left: 64%;
    top: 62%;
    width: 1.1em;
    height: 1.1em;
    border: 0.3em solid #ffffff;
    border-radius: 50%;
    background: var(--fk-sm-route);
    box-shadow: 0 0 0 0.5em rgba(232, 93, 4, 0.22);
}

.fk-sm--pad.fk-sm--trail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44%;
}

.fk-sm-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 3.6cqi 2.6cqi;
    border-inline-start: 1px solid var(--fk-hairline);
    background: var(--fk-surface-raised);
}

.fk-sm-sheet__title,
.fk-sm-panel__title {
    font-size: 1.35em;
    letter-spacing: -0.02em;
}

.fk-sm-sheet .fk-sm-seg {
    align-self: flex-start;
    margin-bottom: 0.2em;
}

/* Mac window (Collect, Triage) */
.fk-sm-win {
    display: grid;
    grid-template-columns: 21% minmax(0, 1fr) 34%;
    height: 100%;
}

.fk-sm--admin .fk-sm-win {
    grid-template-columns: 21% minmax(0, 1fr);
}

.fk-sm-win__side {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 2.4cqi 1.6cqi;
    border-inline-end: 1px solid var(--fk-hairline);
    background: var(--fk-surface-alt);
}

.fk-sm-win__side b {
    margin-bottom: 0.5em;
    font-size: 1.15em;
    letter-spacing: -0.02em;
}

.fk-sm-win__side span {
    padding: 0.35em 0.6em;
    border-radius: 0.45em;
    color: var(--fk-ink-soft);
}

.fk-sm-win__side .is-current {
    background: var(--fk-sm-trail-soft);
    color: var(--fk-sm-trail);
    font-weight: 700;
}

.fk-sm--admin .fk-sm-win__side .is-current {
    background: var(--fk-primary-soft);
    color: var(--fk-primary-text);
}

.fk-sm-win__dots {
    display: flex;
    gap: 0.35em;
    margin-bottom: 1em;
}

.fk-sm-win__dots i {
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    background: #ff5f57;
}

.fk-sm-win__dots i + i { background: #febc2e; }
.fk-sm-win__dots i + i + i { background: #28c840; }

.fk-sm-panel {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    padding: 2.6cqi 1.8cqi;
    border-inline-start: 1px solid var(--fk-hairline);
    background: var(--fk-surface-raised);
}

/* Admin table (Triage) */
.fk-sm-table {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2.6cqi 2.4cqi;
}

.fk-sm-table__bar {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: 1.1em;
}

.fk-sm-table__bar b {
    font-size: 1.7em;
    letter-spacing: -0.03em;
}

.fk-sm-sample {
    padding: 0.25em 0.7em;
    border: 1px dashed var(--fk-primary-text);
    border-radius: var(--fk-radius-pill);
    color: var(--fk-primary-text);
    font-size: 0.85em;
    font-weight: 700;
}

.fk-sm-sort {
    margin-inline-start: auto;
    padding: 0.3em 0.7em;
    border-radius: 0.5em;
    background: var(--fk-surface-alt);
    color: var(--fk-ink-soft);
    font-weight: 600;
}

.fk-sm-sort::after {
    content: " \2193";
}

.fk-sm-table__head,
.fk-sm-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5em 5.5em 7.4em;
    gap: 0.8em;
    align-items: center;
    padding: 0.75em 0.6em;
}

.fk-sm-table__head {
    color: var(--fk-ink-soft);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fk-sm-table__row {
    border-top: 1px solid var(--fk-hairline);
    font-weight: 500;
}

.fk-sm-table__row > span:first-child {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fk-sm-table__row.is-lead {
    border-radius: 0.6em;
    border-top-color: transparent;
    background: var(--fk-primary-soft);
}

.fk-sm-table__row.is-lead + .fk-sm-table__row {
    border-top-color: transparent;
}

/* Detail view (Triage iPad and iPhone, Notify Mac) */
.fk-sm--detail {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.fk-sm--pad.fk-sm--detail {
    gap: 0.45em;
    padding: 4cqi 5.5cqi;
}

.fk-sm--pad.fk-sm--detail .fk-sm-log__row {
    padding-block: 0.3em;
}

.fk-sm-detail__t {
    font-size: 1.6em;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.fk-sm-detail__d {
    color: var(--fk-ink-soft);
    line-height: 1.4;
}

.fk-sm-detail__meta {
    display: flex;
    align-items: center;
    gap: 0.7em;
}

.fk-sm-detail__meta .fk-chip {
    font-size: 0.9em;
}

.fk-sm-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5em;
    padding: 0.7em;
    border-radius: 0.9em;
    background: var(--fk-sm-field);
}

.fk-sm-picker .fk-chip {
    padding-block: 0.45em;
    font-size: 0.85em;
    text-align: center;
}

.fk-sm-ph {
    color: var(--fk-ink-soft);
    font-size: 0.9em;
}

.fk-sm-log {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.fk-sm-log__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7em;
    align-items: center;
    padding: 0.45em 0;
    border-bottom: 1px solid var(--fk-hairline);
    color: var(--fk-ink-soft);
}

.fk-sm-log__row b {
    color: var(--fk-ink);
}

.fk-sm-log__dot {
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: var(--fk-ink-soft);
}

.fk-sm-log__dot--approved { background: #2563eb; }
.fk-sm-log__dot--progress { background: #ea580c; }
.fk-sm-log__dot--testflight { background: #0891b2; }

.fk-sm-log__row { --from: translate3d(-8%, 0, 0); }

.fk-sm-comment {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: 0.65em 0.75em;
    border-radius: 0.8em;
    background: var(--fk-sm-field);
    font-size: 0.9em;
}

.fk-sm-comment span {
    color: var(--fk-ink-soft);
}

.fk-sm--phone.fk-sm--detail .fk-sm-nav span:first-child::before {
    content: "\2039  ";
}

.fk-sm--phone.fk-sm--detail .fk-sm-nav span {
    color: var(--fk-primary-text);
}

/* Vote list (Vote) */
.fk-sm--votes {
    gap: 0.6em;
    background: var(--fk-surface-alt);
}

.fk-sm-large {
    font-size: 1.75em;
    letter-spacing: -0.03em;
}

.fk-sm--votes .fk-sm-seg {
    align-self: flex-start;
}

.fk-sm-vcard {
    display: grid;
    grid-template-columns: 2.9em minmax(0, 1fr);
    gap: 0.75em;
    /* The vote button sits centred against the text column, like the
       request rows on the other boards (.fk-sm-row, .fk-sm-card). */
    align-items: center;
    padding: 0.75em;
    border-radius: 1em;
    background: var(--fk-surface-raised);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.fk-sm-vcard__t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25em;
    min-width: 0;
}

.fk-sm-vcard__t b {
    letter-spacing: -0.01em;
}

.fk-sm-vcard__t span:not(.fk-chip) {
    color: var(--fk-ink-soft);
    font-size: 0.82em;
    line-height: 1.3;
}

.fk-sm-vbtn {
    justify-items: center;
    align-content: end;
    padding: 0.45em 0.2em 0.5em;
    border: 1px solid var(--fk-hairline);
    border-radius: 0.75em;
    background: var(--fk-surface);
    font-weight: 700;
}

.fk-sm-vbtn::before {
    content: "";
    grid-area: 1 / 1;
    align-self: start;
    width: 0;
    height: 0;
    border-inline: 0.36em solid transparent;
    border-bottom: 0.42em solid var(--fk-ink-soft);
}

.fk-sm-vbtn__n {
    padding-top: 0.75em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fk-sm-vcard.is-lead .fk-sm-vbtn {
    border-color: transparent;
    background: var(--fk-accent-gradient);
    color: var(--fk-primary-contrast);
}

.fk-sm-vcard.is-lead .fk-sm-vbtn::before {
    border-bottom-color: var(--fk-primary-contrast);
}

/* Lock screen and banners (Notify) */
.fk-sm--lock {
    align-items: center;
    padding-top: 17cqi;
    background:
        radial-gradient(120% 70% at 20% 0%, rgba(255, 184, 48, 0.9), transparent 60%),
        radial-gradient(120% 80% at 100% 100%, rgba(232, 93, 4, 0.85), transparent 60%),
        linear-gradient(180deg, var(--fk-sm-wall-a), #0b1220);
    color: #ffffff;
}

.fk-sm-lock__date {
    font-size: 1em;
    font-weight: 600;
    opacity: 0.85;
}

.fk-sm-lock__time {
    margin-bottom: 0.5em;
    font-size: 4.2em;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.fk-sm-banner {
    display: flex;
    align-items: center;
    gap: 0.6em;
    box-sizing: border-box;
    width: 100%;
    padding: 0.7em;
    border-radius: 1.1em;
    background: rgba(245, 245, 247, 0.82);
    color: #0b1220;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fk-sm-banner__icon {
    flex: none;
    width: 2.2em;
    height: 2.2em;
    border-radius: 0.55em;
    background: url("/images/feedbackkit-logo-icon-96.webp") center / cover, var(--fk-accent-gradient);
}

.fk-sm-banner__body {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    min-width: 0;
    font-size: 0.88em;
    line-height: 1.25;
}

.fk-sm-banner__body b {
    font-size: 0.9em;
}

.fk-sm--desk {
    background:
        radial-gradient(80% 90% at 85% 10%, rgba(255, 184, 48, 0.75), transparent 60%),
        radial-gradient(90% 90% at 0% 100%, rgba(232, 93, 4, 0.6), transparent 60%),
        linear-gradient(160deg, var(--fk-sm-wall-a), #0b1220);
}

.fk-sm-menubar {
    display: flex;
    justify-content: space-between;
    padding: 0.4em 1.2em;
    background: rgba(11, 18, 32, 0.35);
    color: #ffffff;
    font-size: 0.95em;
}

.fk-sm-desk__win {
    position: absolute;
    left: 8%;
    top: 14%;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    width: 52%;
    box-sizing: border-box;
    padding: 1.6em 1.8em 2em;
    border-radius: 1em;
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
}

.fk-sm-desk__win .fk-sm-win__dots {
    margin-bottom: 0.6em;
}

.fk-sm-banner--mac {
    position: absolute;
    right: 2.2%;
    top: 9%;
    width: 38%;
    font-size: 1.1em;
}

/* Floating vote chips and the ranking card (Vote) */
.fk-st__float {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem 0.5rem 0.5rem;
    border: 1px solid var(--fk-glass-border);
    border-radius: var(--fk-radius-pill);
    background: var(--fk-glass-bg);
    color: var(--fk-ink);
    font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.9rem);
    white-space: nowrap;
    box-shadow: var(--fk-shadow-xl);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.fk-st__float b {
    color: var(--fk-primary-text);
}

.fk-st-avatar {
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
}

.fk-st-avatar--1 { background: #0f766e; }
.fk-st-avatar--2 { background: #4f46e5; }
.fk-st-avatar--3 { background: #c2410c; }

.fk-st__plus {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--fk-accent-gradient);
    color: var(--fk-primary-contrast);
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: var(--fk-shadow-glow);
}

.fk-st__rank {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-sizing: border-box;
    padding: 0.9rem 1rem;
    border: 1px solid var(--fk-glass-border);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-glass-bg);
    color: var(--fk-ink);
    box-shadow: var(--fk-shadow-xl);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.fk-st__rank-k {
    color: var(--fk-ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fk-st__rank b {
    font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem);
}

.fk-st__rank-bar {
    height: 0.4rem;
    overflow: hidden;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-hairline);
}

.fk-st__rank-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fk-accent-gradient);
    transform-origin: left center;
}

[dir="rtl"] .fk-st__rank-bar i {
    transform-origin: right center;
}

.fk-st__rank-n {
    color: var(--fk-ink-soft);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Slack and email cards (Notify) */
.fk-st__card {
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
    font-size: clamp(0.62rem, 0.5rem + 0.35vw, 0.82rem);
    line-height: 1.4;
    box-shadow: var(--fk-shadow-xl);
}

.fk-st__card p {
    margin: 0;
}

.fk-st-slack__head {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.7em 1em;
    border-bottom: 1px solid var(--fk-hairline);
    background: #3f0e40;
    color: #ffffff;
}

.fk-st-slack__hash {
    opacity: 0.7;
    font-weight: 700;
}

.fk-st-slack__msg {
    display: flex;
    gap: 0.75em;
    padding: 0.85em 1em 1em;
}

.fk-st-slack__bot {
    flex: none;
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.5em;
    background: url("/images/feedbackkit-logo-icon-96.webp") center / cover, var(--fk-accent-gradient);
}

.fk-st-slack__text {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}

.fk-st-slack__who {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.fk-st-slack__who span {
    padding: 0 0.35em;
    border-radius: 0.25em;
    background: var(--fk-surface-alt);
    color: var(--fk-ink-soft);
    font-size: 0.8em;
    font-weight: 600;
}

.fk-st-slack__h {
    font-size: 1.15em;
    font-weight: 800;
}

.fk-st-slack__quote {
    padding-inline-start: 0.7em;
    border-inline-start: 3px solid var(--fk-hairline);
}

.fk-st-slack__quote s,
.fk-st-mail__move s {
    color: var(--fk-ink-soft);
}

.fk-st-mail__bar {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.6em 0.9em;
    border-bottom: 1px solid var(--fk-hairline);
    background: var(--fk-surface-alt);
    font-weight: 600;
}

.fk-st-mail__dots {
    display: flex;
    gap: 0.3em;
}

.fk-st-mail__dots i {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--fk-hairline);
}

.fk-st-mail__subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fk-st-mail__hero {
    padding: 0.8em 1em;
    background: var(--fk-accent-gradient);
    color: var(--fk-primary-contrast);
    font-size: 1.1em;
    font-weight: 800;
}

.fk-st-mail__body {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    padding: 0.9em 1em 1.1em;
}

.fk-st-mail__title {
    font-size: 1.15em;
    font-weight: 800;
}

.fk-st-mail__move {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.fk-st-mail__move b {
    padding: 0.15em 0.7em;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-accent-gradient);
    color: var(--fk-primary-contrast);
}

/* ---------- Static state: hide mid-sequence elements ---------- */

/* Without motion only the finished state shows: a chip or counter that a
   later step replaces (data-until) is removed, so nothing is read twice. */
html:not(.fk-motion) .fk-story [data-until],
html:not(.fk-motion) .fk-story .fk-st__plus {
    display: none;
}

/* ---------- Motion: step states ---------- */

html.fk-motion .fk-story [data-at],
html.fk-motion .fk-story [data-until] {
    transition:
        transform 1s var(--fk-ease-out) var(--d, 0ms),
        opacity 0.7s var(--fk-ease-out) var(--d, 0ms);
}

html.fk-motion .fk-story [data-at]:not(.is-on) {
    opacity: 0;
    transform: var(--from, translate3d(0, 10%, 0) scale(0.96));
}

html.fk-motion .fk-story .is-past {
    opacity: 0;
    transform: var(--out, translate3d(0, -60%, 0));
}

/* Devices enter from different sides and tilts, then settle on --r. */
.fk-st__dev--mac { --from: translate3d(0, 12%, 0) scale(0.84); }
.fk-st__dev--pad { --from: translate3d(-30%, 16%, 0) rotate(-9deg) scale(0.92); }
.fk-st__dev--phone { --from: translate3d(0, 34%, 0) rotate(-7deg); }
.fk-st__dev--android { --from: translate3d(46%, 18%, 0) rotate(11deg); }
.fk-st--vote .fk-st__dev--phone { --from: translate3d(0, 18%, 0) scale(0.9); }
.fk-st--triage .fk-st__dev--phone,
.fk-st--notify .fk-st__dev--phone { --from: translate3d(40%, 10%, 0) rotate(9deg); --d: 120ms; }

.fk-st__float { --from: translate3d(0, 60%, 0) scale(0.7); }
.fk-st__float--b,
.fk-st__float--c { --d: 140ms; }
.fk-st__rank { --from: translate3d(20%, 0, 0) scale(0.9); }
.fk-st__plus { --from: translate3d(0, 80%, 0) scale(0.4); --d: 260ms; }
.fk-st__card--slack { --from: translate3d(-12%, 40%, 0) rotate(-6deg) scale(0.9); }
.fk-st__card--mail { --from: translate3d(12%, 40%, 0) rotate(6deg) scale(0.9); }
.fk-sm-vcard { --from: translate3d(0, 50%, 0) scale(0.94); }
.fk-sm-vcard + .fk-sm-vcard { --d: 120ms; }
.fk-sm-banner { --from: translate3d(0, -140%, 0) scale(0.9); }
.fk-sm-banner + .fk-sm-banner { --d: 0ms; }
.fk-sm-banner--mac { --from: translate3d(115%, 0, 0); --d: 200ms; }
.fk-chipset > *,
.fk-sm-vbtn > * { --from: translate3d(0, 70%, 0); --out: translate3d(0, -70%, 0); }

html.fk-motion .fk-story .fk-st__plus.is-on {
    animation: fk-st-plus 1.4s var(--fk-ease-out) 0.3s both;
}

@keyframes fk-st-plus {
    0% { opacity: 0; transform: translate3d(0, 60%, 0) scale(0.5); }
    25% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.1); }
    70% { opacity: 1; transform: translate3d(0, -40%, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(0, -90%, 0) scale(0.9); }
}

/* The ranking bar grows when the card appears. */
.fk-st__rank-bar i {
    transition: transform 1.2s var(--fk-ease-out) 0.35s;
}

html.fk-motion .fk-story .fk-st__rank:not(.is-on) .fk-st__rank-bar i {
    transform: scaleX(0.15);
}

/* The vote button pulses when the reader's vote lands. */
html.fk-motion .fk-story .fk-sm-vbtn__n--next.is-on {
    animation: fk-st-pop 0.6s var(--fk-ease-spring) both;
}

@keyframes fk-st-pop {
    0% { transform: scale(0.6); }
    100% { transform: scale(1); }
}

/* The title types itself in: a field-coloured cover slides off the text one
   character at a time (transform only), with the caret on its edge. */
html.fk-motion .fk-story .fk-sm-type::after {
    content: "";
    position: absolute;
    inset: 0;
    border-inline-start: 0.12em solid var(--fk-sm-trail);
    background: var(--fk-sm-field);
    transform: translateX(101%);
}

html.fk-motion .fk-story [data-at]:not(.is-on) .fk-sm-type::after {
    transform: translateX(0);
}

html.fk-motion .fk-story [data-at].is-on .fk-sm-type::after {
    animation: fk-st-type 1.1s steps(12, end) 0.55s both;
}

@keyframes fk-st-type {
    from { transform: translateX(0); }
    to { transform: translateX(101%); }
}

/* Odometer counters (built by story.js): each digit is a reel of 0-9 that
   rolls from data-odo-from to the final value when its card appears. */
.fk-odo.is-built {
    display: inline-flex;
    overflow: hidden;
    height: 1em;
    line-height: 1;
}

.fk-odo__d {
    display: block;
    height: 1em;
    overflow: hidden;
}

.fk-odo__reel {
    display: flex;
    flex-direction: column;
    transform: translate3d(0, calc(var(--to, 0) * -1em), 0);
    transition: transform 1.4s var(--fk-ease-out) calc(var(--i, 0) * 70ms + 200ms);
}

.fk-odo__reel span {
    display: block;
    height: 1em;
}

html.fk-motion .fk-story [data-at]:not(.is-on) .fk-odo__reel {
    transform: translate3d(0, calc(var(--from, 0) * -1em), 0);
}

/* ---------- Motion: progress rail and step list ---------- */

html.fk-motion .fk-ch__rail {
    display: block;
    height: 3px;
    max-width: 16rem;
    margin-top: var(--fk-space-lg);
    overflow: hidden;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-hairline);
}

html.fk-motion .fk-ch__rail span {
    display: block;
    height: 100%;
    background: var(--fk-accent-gradient);
    transform: scaleX(var(--fk-story-progress, 0));
    transform-origin: left center;
}

[dir="rtl"] .fk-ch__rail span {
    transform-origin: right center;
}

html.fk-motion .fk-ch__steps li::before {
    background: var(--fk-hairline);
    transform: scale(0.8);
    transition: transform var(--fk-duration-base) var(--fk-ease-spring), background-color var(--fk-duration-base);
}

html.fk-motion .fk-ch__steps li.is-done::before {
    background: var(--fk-primary);
    transform: scale(0.8);
}

html.fk-motion .fk-ch__steps li.is-current::before {
    background: var(--fk-primary);
    transform: scale(1.35);
}

html.fk-motion .fk-ch__steps li {
    transition: color var(--fk-duration-base);
}

html.fk-motion .fk-ch__steps li.is-current {
    color: var(--fk-ink);
}

html.fk-motion .fk-ch__steps--status li .fk-chip {
    transition: transform var(--fk-duration-base) var(--fk-ease-spring);
}

html.fk-motion .fk-ch__steps--status li.is-current .fk-chip {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--fk-chip-fg);
}

/* ---------- Motion + wide/tall viewport: pinned chapters ---------- */

@media (min-width: 1024px) and (min-height: 640px) {
    html.fk-motion .fk-ch {
        height: 210svh;
    }

    html.fk-motion .fk-ch__pin {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        height: 100svh;
        padding-top: 4.5rem;
        padding-bottom: 1.5rem;
    }

    html.fk-motion .fk-st {
        width: min(100%, calc((100svh - 8rem) * 1.2));
    }

    html.fk-motion .fk-st__dev,
    html.fk-motion .fk-st__card {
        will-change: transform, opacity;
    }

    /* Scroll-scrubbed depth: the stage grows in as the chapter arrives,
       devices drift at different depths while it is pinned, and the stage
       recedes as it scrolls away. Browsers without scroll-driven animations
       skip this and keep the stepped transitions only. */
    @supports (animation-timeline: view()) {
        html.fk-motion .fk-ch {
            view-timeline-name: --fk-ch;
        }

        html.fk-motion .fk-st {
            animation: fk-st-depth linear both;
            animation-timeline: --fk-ch;
            animation-range: entry 0% exit 100%;
        }

        html.fk-motion .fk-st__dev {
            animation: fk-st-drift linear both;
            animation-timeline: --fk-ch;
            animation-range: contain 0% contain 100%;
        }

        html.fk-motion .fk-st__dev--phone,
        html.fk-motion .fk-st__dev--android {
            --depth: 2.4;
        }

        html.fk-motion .fk-ch__copy {
            animation: fk-ch-copy linear both;
            animation-timeline: --fk-ch;
            animation-range: entry 40% exit 90%;
        }
    }
}

@keyframes fk-st-depth {
    0% { scale: 0.88; opacity: 0.35; }
    30% { scale: 1; opacity: 1; }
    72% { scale: 1; opacity: 1; }
    100% { scale: 0.92; opacity: 0; }
}

@keyframes fk-st-drift {
    from { translate: 0 calc(var(--depth, 1) * 1.6%); }
    to { translate: 0 calc(var(--depth, 1) * -1.6%); }
}

@keyframes fk-ch-copy {
    0% { opacity: 0; translate: 0 2.5rem; }
    22% { opacity: 1; translate: 0 0; }
    78% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 -2rem; }
}

/* ---------- Narrow viewports: stacked, never pinned ---------- */

@media (max-width: 1023px) {
    .fk-ch__pin {
        padding-block: clamp(2rem, 7vw, 3.5rem);
    }

    .fk-ch__grid {
        grid-template-columns: 1fr;
        gap: var(--fk-space-lg);
    }

    .fk-ch__copy {
        max-width: 40rem;
    }

    .fk-st {
        max-width: 40rem;
        aspect-ratio: 1 / 1.02;
    }

    .fk-st--collect .fk-st__dev--mac { --x: 12%; --y: 0%; --w: 88%; }
    .fk-st--collect .fk-st__dev--pad { --x: 0%; --y: 33%; --w: 58%; }
    .fk-st--collect .fk-st__dev--phone { --x: 40%; --y: 31%; --w: 30%; }
    .fk-st--collect .fk-st__dev--android { --x: 70%; --y: 38%; --w: 29%; }

    .fk-st--vote .fk-st__dev--phone { --x: 25%; --y: 0%; --w: 47%; }
    .fk-st--vote .fk-st__float--a { --x: 0%; --y: 15%; }
    .fk-st--vote .fk-st__float--b { --x: 52%; --y: 80%; }
    .fk-st--vote .fk-st__float--c { --x: 0%; --y: 64%; }
    .fk-st--vote .fk-st__rank { --x: 66%; --y: 30%; --w: 34%; }
    .fk-st--vote .fk-st__plus { --x: 17%; --y: 22%; }

    .fk-st--triage .fk-st__dev--mac { --x: 0%; --y: 0%; --w: 100%; }
    .fk-st--triage .fk-st__dev--pad { --x: 0%; --y: 50%; --w: 58%; }
    .fk-st--triage .fk-st__dev--phone { --x: 66%; --y: 36%; --w: 31%; }

    .fk-st--notify .fk-st__dev--mac { --x: 0%; --y: 0%; --w: 90%; }
    .fk-st--notify .fk-st__dev--phone { --x: 67%; --y: 12%; --w: 31%; }
    .fk-st--notify .fk-st__card--slack { --x: 0%; --y: 56%; --w: 56%; }
    .fk-st--notify .fk-st__card--mail { --x: 40%; --y: 70%; --w: 58%; }
}

@media (max-width: 639px) {
    .fk-ch__steps li {
        font-size: var(--fk-font-small);
        padding-block: 0.3rem;
    }

    .fk-st__float {
        padding: 0.3rem 0.6rem 0.3rem 0.3rem;
        font-size: 0.66rem;
    }

    .fk-st__float span:last-child b {
        display: block;
    }

    .fk-st__rank {
        padding: 0.55rem 0.6rem;
        gap: 0.2rem;
    }

    .fk-st__rank-k {
        font-size: 0.56rem;
    }

    .fk-st__rank b {
        font-size: 0.78rem;
    }

    .fk-st__rank-n {
        font-size: 0.66rem;
    }

    .fk-st__plus {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .fk-st__card {
        font-size: 0.56rem;
        border-radius: var(--fk-radius-md);
    }
}

/* ---------- Reduced motion ---------- */

/* motion.js drops html.fk-motion under reduce, which already removes every
   hidden state, pin and scroll-driven animation above. This block covers the
   few animations that are not scoped to html.fk-motion. */
@media (prefers-reduced-motion: reduce) {
    .fk-story *,
    .fk-story *::before,
    .fk-story *::after {
        animation: none !important;
        transition: none !important;
    }
}