/* ============================================================
   FitAi — the bdevents chassis (Exam Ready / Poriksha Ready), FitAi's identity.

   SHARED with the family, on purpose: the 8/12/18/24 radii, the shadow ramp,
   control heights, and the section anatomy of poriksha-ready/public.css. These
   apps live on one install and should read as kin.

   FitAi's OWN:
     Colour  orchid #B733D6 (hue ~292). The identity register keeps one hue per
             app so a reviewer never sees two submissions wearing one colour;
             215° off ghuri's olive, 66° off Exam Ready's magenta.
     Ground  #FAF7FD on violet-tinted ink #180B22, not the family's cool
             grey-blue #FAFAFB / #0E1015.
     Mark    a ring with rungs in it (.fai-brand__mark) — the ladder this app
             actually is; not the family's rounded-square tile, not ghuri's
             compass.
     Display Anek Bangla on headings — see the block at the END of this file.
     Motif   the climb: a stepped dashed path with a marker travelling it behind
             the hero, and a drifting row of the movement patterns.

   No data-reveal (the family has it): it leaves sections at opacity:0 in
   full-page captures, which is how Exam Ready's own screenshots come out blank.
   ============================================================ */
:root {
    --fai-brand: #B733D6; --fai-brand-600: #9A27BE; --fai-brand-700: #7C2496;
    --fai-brand-50: #FBF4FE; --fai-brand-100: #F0DAF9;
    /* TWO ramps, and the split is a contrast rule, not a taste one.
       --fai-grad is DECORATIVE (mark, step numbers, avatars, hero glow): its
       light end #C95BE0 is 3.5:1 on white and carries no text at all.
       --fai-grad-btn is for anything with white text ON it (primary buttons,
       the footer band). Its lightest stop #A32ECB is 5.5:1 against white, so
       even 15px 600-weight labels clear WCAG AA with room to spare. Putting
       white text on the decorative ramp is the mistake this split exists to
       stop; it shipped once in a sibling and had to be fixed live. */
    --fai-grad: linear-gradient(135deg, #C95BE0 0%, #A32ECB 50%, #6B1A8A 100%);
    --fai-grad-btn: linear-gradient(135deg, #A32ECB 0%, #8E2BAA 55%, #6B1A8A 100%);
    --fai-grad-soft: linear-gradient(135deg, #FDF8FF 0%, #F7EBFD 100%);
    --fai-ink: #180B22; --fai-ink-2: #2A1637; --fai-text: #2F2338; --fai-muted: #6E6478;
    --fai-border: #ECE4F0; --fai-border-2: #F4EEF7; --fai-bg: #FAF7FD; --fai-bg-2: #F3ECF8; --fai-card: #FFFFFF;
    --fai-ok: #16A34A; --fai-ok-bg: #F0FDF4; --fai-warn: #D97706; --fai-warn-bg: #FFFBEB; --fai-bad: #DC2626;
    --fai-info: #2563EB; --fai-info-bg: #EFF6FF;
    /* Anek Bangla is FitAi's display face. Exam Ready sets every heading in
       Hind Siliguri 700 and ghuri in Tiro Bangla; a third headline face is the
       clearest non-colour signal that these are three apps on one chassis.
       Anek's flat terminals and tight counters read as effort, which is what
       this app sells. */
    --fai-font-disp: 'Anek Bangla', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
    --fai-font-ui: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', system-ui, sans-serif;
    --fai-font-text: 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', system-ui, sans-serif;
    --fai-font-en: 'Inter', system-ui, -apple-system, sans-serif;
    --fai-r-sm: 8px; --fai-r: 12px; --fai-r-lg: 18px; --fai-r-xl: 24px;
    --fai-shadow-sm: 0 1px 2px rgba(15,18,30,.06);
    --fai-shadow: 0 4px 18px -6px rgba(15,18,30,.10);
    --fai-shadow-md: 0 12px 32px -10px rgba(15,18,30,.14);
    --fai-shadow-lg: 0 28px 56px -16px rgba(15,18,30,.18);
    --fai-ring: 0 0 0 3px rgba(183,51,214,.18);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--fai-bg); }
body.fai-shell { margin: 0; font-family: var(--fai-font-text); color: var(--fai-text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
/* `a:not(.fai-btn)` — and the :not() is the whole point.
   `body.fai-shell a` is (0,1,1); `.fai-btn--primary` is (0,1,0). So the shell's
   link colour BEAT the button's own `color:#fff` and every anchor-shaped
   primary button on the landing rendered brand-on-brand-gradient: measured
   1.5:1, i.e. unreadable. It shipped that way in the chassis and nobody caught
   it because it still looks like styled text in a screenshot — it took reading
   getComputedStyle on the live page.
   #B733D6 is 4.44:1 on the page ground, one notch short of AA for body text,
   so real links take the 700. */
body.fai-shell a:not(.fai-btn) { color: var(--fai-brand-700); }
body.fai-shell img { max-width: 100%; height: auto; }
.fai-mono { font-family: var(--fai-font-en); font-variant-numeric: tabular-nums; font-weight: 600; }
.fai-disp { font-family: var(--fai-font-disp); font-weight: 700; letter-spacing: -.015em; }

.fai-grad { background: var(--fai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fai-icon, .fai-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ===== atoms ===== */
.fai-eyebrow, .fai-lp__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--fai-brand-50); color: var(--fai-brand-700); font-family: var(--fai-font-ui); font-weight: 600; font-size: 12px; letter-spacing: .02em; border: 1px solid var(--fai-brand-100); margin: 0 0 12px; }
.fai-eyebrow .fai-icon, .fai-lp__eyebrow .fai-icon { color: var(--fai-brand); }
.fai-chip, .fai-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--fai-bg-2); color: var(--fai-ink-2); font-family: var(--fai-font-ui); font-weight: 600; font-size: 12px; }
.fai-pill--brand { background: var(--fai-brand); color: #fff; }
.fai-stamp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--fai-brand-50); color: var(--fai-brand-700); font-family: var(--fai-font-ui); font-weight: 600; font-size: 11.5px; white-space: nowrap; vertical-align: middle; }
.fai-stamp--ok { background: var(--fai-ok-bg); color: var(--fai-ok); }
.fai-confirm { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #78350F; font-family: var(--fai-font-ui); font-size: 11.5px; font-weight: 600; vertical-align: middle; }

.fai-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 18px; min-height: 44px; border-radius: var(--fai-r-sm); border: 1px solid transparent; font-family: var(--fai-font-ui); font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s; text-decoration: none; }
.fai-btn:hover { transform: translateY(-1px); }
.fai-btn:active { transform: translateY(0); }
.fai-btn:focus-visible { outline: none; box-shadow: var(--fai-ring); }
.fai-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 44px; }
.fai-btn--lg { padding: 14px 22px; font-size: 16px; min-height: 50px; }
.fai-btn--block { width: 100%; }
.fai-btn--primary { background: var(--fai-grad-btn); color: #fff; box-shadow: 0 6px 16px -4px rgba(183,51,214,.45); }
.fai-btn--primary:hover { box-shadow: 0 10px 22px -6px rgba(183,51,214,.55); color: #fff; }
.fai-btn--ghost { background: #fff; color: var(--fai-ink-2); border-color: var(--fai-border); }
.fai-btn--ghost:hover { background: var(--fai-bg); border-color: var(--fai-ink-2); color: var(--fai-ink); }
.fai-btn--link { background: transparent; color: var(--fai-muted); border: none; padding: 6px 0; font-weight: 500; font-size: 13px; min-height: 44px; }
.fai-btn--link:hover { color: var(--fai-brand); transform: none; }
.fai-btn--danger { background: var(--fai-bad); color: #fff; }
.fai-btn--danger:hover { background: #991B1B; color: #fff; }
.fai-btn[disabled] { opacity: .55; cursor: default; transform: none; }

/* ===== forms ===== */
.fai-field { margin: 0 0 12px; }
.fai-label, .fai-field > label { display: block; font-family: var(--fai-font-ui); font-weight: 600; font-size: 13px; color: var(--fai-ink-2); margin: 0 0 6px; }
.fai-input, .fai-select, .fai-textarea { width: 100%; padding: 12px 14px; min-height: 46px; border: 1px solid var(--fai-border); border-radius: var(--fai-r-sm); font-family: var(--fai-font-text); font-size: 15px; line-height: 1.4; color: var(--fai-ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.fai-input:focus, .fai-select:focus, .fai-textarea:focus { outline: none; border-color: var(--fai-brand); box-shadow: var(--fai-ring); }
.fai-input--otp { font-family: var(--fai-font-en); font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 700; }
.fai-input-prefix { display: flex; align-items: stretch; border: 1px solid var(--fai-border); border-radius: var(--fai-r-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; background: #fff; }
.fai-input-prefix:focus-within { border-color: var(--fai-brand); box-shadow: var(--fai-ring); }
.fai-input-prefix span { display: inline-flex; align-items: center; padding: 0 12px; background: var(--fai-bg-2); color: var(--fai-muted); font-family: var(--fai-font-en); font-size: 14px; border-right: 1px solid var(--fai-border); }
.fai-input-prefix .fai-input { border: none; box-shadow: none !important; border-radius: 0; }
.fai-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fai-seg__opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--fai-border); border-radius: var(--fai-r-sm); cursor: pointer; background: #fff; }
.fai-seg__opt:has(input:checked) { border-color: var(--fai-brand); background: var(--fai-brand-50); }
.fai-seg__opt input { accent-color: var(--fai-brand); }
.fai-row { display: flex; gap: 10px; align-items: center; }
.fai-row > * { flex: 1; }
.fai-msg { margin-top: 12px; min-height: 20px; font-size: 14px; color: var(--fai-bad); }
.fai-msg.is-ok { color: var(--fai-ok); }
.fai-note { font-size: 13px; color: var(--fai-muted); margin: 8px 0 0; line-height: 1.55; }
.fai-empty { color: var(--fai-muted); font-size: 14px; margin: 12px 0; }

/* ===== shell: sidebar (white, hairline) + mobile toggle, like the family ===== */
.fai-app-main { min-height: 100vh; padding: 28px 16px 80px; background: var(--fai-bg); }
body.fai-has-sidebar .fai-app-main--with-sidebar { padding-left: 264px; padding-right: 32px; }
body.fai-shell:not(.fai-has-sidebar) .fai-app-main { padding: 0; }
.fai-wrap { max-width: 960px; margin: 0 auto; }
.fai-head { margin: 0 0 18px; }
.fai-head h1 { font-family: var(--fai-font-ui); font-weight: 700; font-size: clamp(24px, 3vw, 32px); color: var(--fai-ink); margin: 8px 0 4px; letter-spacing: -.015em; }
.fai-head p { color: var(--fai-muted); margin: 0; font-size: 14.5px; }
.fai-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 30; background: #fff; border-right: 1px solid var(--fai-border-2); display: flex; flex-direction: column; transition: transform .25s ease; }
.fai-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 18px; border-bottom: 1px solid var(--fai-border-2); }
.fai-sidebar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fai-ink); flex: 1; }
/* a CIRCLE, not the family's 9px rounded square — the mark is the fastest tell */
.fai-brand__mark { width: 34px; height: 34px; border-radius: 50%; background: var(--fai-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(183,51,214,.55); flex: none; }
.fai-sidebar__brandname { font-family: var(--fai-font-ui); font-weight: 700; font-size: 16px; }
.fai-sidebar__close { background: transparent; border: 1px solid var(--fai-border); width: 44px; height: 44px; border-radius: 8px; color: var(--fai-muted); cursor: pointer; display: none; align-items: center; justify-content: center; }
.fai-sidebar__close:hover { color: var(--fai-bad); border-color: var(--fai-bad); }
.fai-sidebar__nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.fai-sidebar__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: 10px; text-decoration: none; color: var(--fai-text); font-size: 14px; font-family: var(--fai-font-ui); font-weight: 500; transition: all .12s; }
.fai-sidebar__item:hover { background: var(--fai-bg); color: var(--fai-ink); }
.fai-sidebar__item.is-active { background: var(--fai-brand-50); color: var(--fai-brand-700); font-weight: 600; }
.fai-sidebar__item.is-active .fai-sidebar__ic { color: var(--fai-brand); }
.fai-sidebar__ic { display: inline-flex; color: var(--fai-muted); }
.fai-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--fai-border-2); }
.fai-sidebar__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--fai-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fai-font-ui); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.fai-sidebar__userinfo { flex: 1; min-width: 0; font-size: 13px; color: var(--fai-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fai-sidebar__logout { background: transparent; border: 1px solid var(--fai-border); width: 44px; height: 44px; border-radius: 8px; color: var(--fai-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; }
.fai-sidebar__logout:hover { color: var(--fai-bad); border-color: var(--fai-bad); }
.fai-sidebar__toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 40; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--fai-border); box-shadow: var(--fai-shadow); color: var(--fai-ink); cursor: pointer; align-items: center; justify-content: center; }
.fai-sidebar__overlay { display: none; position: fixed; inset: 0; background: rgba(15,18,30,.45); z-index: 25; }
.fai-sidebar__overlay.is-on { display: block; }
.fai-bottomnav { display: none; } /* the family navigates by the drawer, not tabs */
@media (max-width: 900px) {
    .fai-sidebar { transform: translateX(-100%); box-shadow: var(--fai-shadow-lg); }
    .fai-sidebar.is-open { transform: translateX(0); }
    .fai-sidebar__close { display: inline-flex; }
    .fai-sidebar__toggle { display: inline-flex; }
    body.fai-has-sidebar .fai-app-main--with-sidebar { padding-left: 16px; padding-right: 16px; padding-top: 72px; }
}
.fai-shell__home { position: fixed; right: 14px; bottom: 14px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--fai-border); box-shadow: var(--fai-shadow); color: var(--fai-muted); font-family: var(--fai-font-en); font-size: 12px; text-decoration: none; }
.fai-shell__home:hover { color: var(--fai-brand); border-color: var(--fai-brand-100); }

/* ===== in-app components (Exam Ready dashboard language) ===== */
.fai-card { background: var(--fai-card); border: 1px solid var(--fai-border-2); border-radius: var(--fai-r-lg); padding: 20px 22px; box-shadow: var(--fai-shadow-sm); margin-bottom: 14px; }
.fai-card h2 { font-family: var(--fai-font-ui); font-weight: 600; font-size: 16px; color: var(--fai-ink); margin: 0 0 10px; }
.fai-card--ink { box-shadow: var(--fai-shadow-md); border-color: var(--fai-border); }
.fai-card--warn { background: var(--fai-warn-bg); border-color: #FCD34D; color: #78350F; }
.fai-card--warn h2 { color: #78350F; }
/* Two-step unsubscribe confirm (account screen). It is in the PAGE and not a
   window.confirm(), because the browser dialog draws its own OK / Cancel in the
   DEVICE language — a Bangla question came back with two English buttons on the
   one cancel path BDApps requires. NOT .fai-confirm: that name is already a
   pill/chip above. */
.fai-unsub-confirm { margin-top: 12px; }
.fai-unsub-confirm p { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.fai-gate { text-align: center; padding: 32px 20px; max-width: 440px; margin: 40px auto; }
.fai-gate .fai-btn { margin-top: 12px; }
.fai-list { display: flex; flex-direction: column; gap: 10px; }
.fai-grid { display: grid; gap: 12px; }
@media (min-width: 820px) { .fai-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fai-rule { height: 1px; background: var(--fai-border-2); }
.fai-perf { border-top: 1px solid var(--fai-border-2); }
.fai-bar { height: 8px; background: #F4EEF7; border-radius: 999px; overflow: hidden; }
.fai-bar__fill { height: 100%; background: var(--fai-brand); border-radius: 999px; transition: width .6s ease; }

/* the trip card = the family's primary action card with a gradient header */
.fai-ticket { background: #fff; border: 1px solid var(--fai-brand-100); border-radius: var(--fai-r-lg); box-shadow: var(--fai-shadow); overflow: hidden; margin-bottom: 14px; }
.fai-ticket__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: var(--fai-grad-btn); color: #fff; font-family: var(--fai-font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.fai-ticket__bar .fai-mono { color: rgba(255,255,255,.9); font-weight: 500; }
.fai-ticket__body { padding: 16px 18px; background: var(--fai-grad-soft); }
.fai-ticket__title { font-family: var(--fai-font-ui); font-weight: 700; font-size: 24px; line-height: 1.2; margin: 0; color: var(--fai-ink); letter-spacing: -.015em; }
.fai-ticket__sub { font-size: 14px; color: var(--fai-muted); margin: 4px 0 0; }
.fai-ticket__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 18px; }
.fai-ticket__k { display: block; font-family: var(--fai-font-ui); font-size: 11.5px; color: var(--fai-muted); font-weight: 600; margin-bottom: 2px; }
.fai-ticket__v { display: block; font-family: var(--fai-font-en); font-size: 18px; font-weight: 700; color: var(--fai-ink); letter-spacing: -.01em; }
.fai-ticket__k.is-hard, .fai-ticket__v.is-hard { color: var(--fai-brand-700); }
.fai-ticket__foot { padding: 0 18px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--fai-muted); }
.fai-big { font-family: var(--fai-font-en); font-size: 28px; font-weight: 700; color: var(--fai-ink); letter-spacing: -.02em; line-height: 1.1; }
.fai-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* day tabs = the family's pill tabs */
.fai-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--fai-bg-2); padding: 4px; border-radius: 999px; margin: 0 0 14px; width: fit-content; max-width: 100%; }
.fai-tabs__t { padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--fai-muted); font-size: 13.5px; font-family: var(--fai-font-ui); font-weight: 500; cursor: pointer; transition: all .15s; }
.fai-tabs__t:hover { color: var(--fai-ink); }
.fai-tabs__t.is-on { background: #fff; color: var(--fai-ink); box-shadow: var(--fai-shadow-sm); font-weight: 600; }
.fai-tabs .fai-btn { margin-left: 6px; }

/* timeline */
.fai-tl { background: #fff; border: 1px solid var(--fai-border-2); border-radius: var(--fai-r-lg); padding: 4px 18px; margin: 0 0 12px; }
.fai-tl__row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fai-border-2); align-items: flex-start; }
.fai-tl__row:last-child { border-bottom: 0; }
.fai-tl__t { font-family: var(--fai-font-en); width: 52px; flex: none; font-weight: 600; color: var(--fai-ink); font-variant-numeric: tabular-nums; padding-top: 1px; }
.fai-tl__txt { font-size: 14.5px; flex: 1; min-width: 0; color: var(--fai-text); }
.fai-tl__txt small { display: block; color: var(--fai-muted); font-size: 12.5px; }
.fai-tl__row.is-hard { background: var(--fai-brand-50); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.fai-tl__row.is-hard .fai-tl__t { color: var(--fai-brand-700); }
.fai-tl__row.is-done .fai-tl__txt { color: var(--fai-muted); text-decoration: line-through; }
.fai-tl__box { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--fai-border); border-radius: 6px; flex: none; margin-top: 1px; background: #fff; cursor: pointer; padding: 0; transition: all .12s; }
.fai-tl__box::after { content: ""; position: absolute; inset: -11px; }
.fai-tl__box.is-on { background: var(--fai-brand); border-color: var(--fai-brand); box-shadow: 0 2px 6px -2px rgba(183,51,214,.5); }

/* action tiles = dashboard action cards */
.fai-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
@media (min-width: 820px) { .fai-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fai-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--fai-card); border: 1px solid var(--fai-border-2); border-radius: var(--fai-r-lg); text-decoration: none; color: var(--fai-ink); transition: transform .15s, box-shadow .2s, border-color .15s; min-height: 110px; }
.fai-tile:hover { transform: translateY(-3px); box-shadow: var(--fai-shadow); border-color: var(--fai-brand-100); color: var(--fai-ink); }
.fai-tile .fai-icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--fai-brand-50); color: var(--fai-brand-700); margin-bottom: 4px; }
.fai-tile strong { font-family: var(--fai-font-ui); font-weight: 600; font-size: 15.5px; }
.fai-tile small { font-size: 13px; color: var(--fai-muted); }

/* checklist + money rows */
.fai-check { background: #fff; border: 1px solid var(--fai-border-2); border-radius: var(--fai-r-lg); padding: 4px 18px; margin: 0 0 12px; }
.fai-check__row { display: flex; gap: 12px; align-items: center; padding: 12px 0; min-height: 48px; border-bottom: 1px solid var(--fai-border-2); cursor: pointer; }
.fai-check__row:last-child { border-bottom: 0; }
.fai-check__row span { flex: 1; font-size: 14.5px; }
.fai-check__row.is-done span { color: var(--fai-muted); text-decoration: line-through; }
.fai-money { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--fai-border-2); }
.fai-money:last-child { border-bottom: 0; }
.fai-money__l { flex: 1; font-size: 14.5px; min-width: 0; }
.fai-money__l small { display: block; color: var(--fai-muted); font-size: 12.5px; }
.fai-money__v { font-family: var(--fai-font-en); font-weight: 600; font-size: 14px; width: 74px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.fai-money__v.is-dim { color: var(--fai-muted); }
.fai-money input { width: 84px; min-height: 40px; padding: 6px 10px; font-size: 14px; font-family: var(--fai-font-en); text-align: right; border: 1px solid var(--fai-border); border-radius: var(--fai-r-sm); }
.fai-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fai-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.fai-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 10px); background: var(--fai-ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; max-width: 90vw; box-shadow: var(--fai-shadow-md); }
.fai-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* accordion (bank pages + FAQ) */
.fai-acc { background: #fff; border: 1px solid var(--fai-border-2); border-radius: var(--fai-r); margin: 0 0 10px; overflow: hidden; }
.fai-acc summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--fai-font-ui); font-weight: 600; font-size: 15.5px; color: var(--fai-ink); }
.fai-acc summary::-webkit-details-marker { display: none; }
.fai-acc summary::after { content: "+"; font-family: var(--fai-font-en); color: var(--fai-muted); font-size: 18px; transition: transform .2s; }
.fai-acc[open] summary::after { transform: rotate(45deg); color: var(--fai-brand); }
.fai-acc__body { padding: 0 20px 18px; font-size: 14.5px; color: var(--fai-text); line-height: 1.65; }
.fai-acc__body p { margin: 0 0 8px; }
.fai-card.fai-acc { padding: 0 !important; }
.fai-card.fai-acc .fai-acc__body { padding: 0 20px 18px; }

/* ============================================================
   LANDING — Exam Ready anatomy
   ============================================================ */
.fai-lp { font-family: var(--fai-font-text); color: var(--fai-text); background: var(--fai-bg); }
.fai-lp__in { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.fai-lp__in--narrow { max-width: 760px; }

.fai-lp__nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--fai-border-2); }
.fai-lp__navin { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 20px; max-width: 1140px; margin: 0 auto; }
.fai-lp__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fai-ink); min-height: 44px; }
.fai-lp__brand b { font-family: var(--fai-font-ui); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.fai-lp__links { display: flex; gap: 22px; }
.fai-lp__links a { font-family: var(--fai-font-ui); font-size: 14px; color: var(--fai-text); text-decoration: none; padding: 6px 4px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.fai-lp__links a:hover { color: var(--fai-brand); }
@media (max-width: 768px) { .fai-lp__links { display: none; } }

.fai-lp__hero { padding: 60px 0 80px; background: radial-gradient(60% 40% at 12% 0%, rgba(255,79,136,.10) 0%, transparent 60%), radial-gradient(40% 30% at 100% 10%, rgba(36,12,80,.08) 0%, transparent 60%), var(--fai-bg); }
.fai-lp__herogrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.fai-lp__h1 { font-family: var(--fai-font-ui); font-weight: 700; font-size: clamp(34px, 5vw, 54px); line-height: 1.12; letter-spacing: -.02em; color: var(--fai-ink); margin: 16px 0 18px; }
.fai-lp__h1 .fai-grad { padding-right: 4px; }
.fai-lp__sub { font-size: 17px; color: var(--fai-text); max-width: 540px; margin: 0 0 26px; line-height: 1.6; }
.fai-lp__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.fai-lp__price { display: flex; align-items: flex-start; gap: 8px; margin-top: 28px; color: var(--fai-muted); font-size: 13px; }
.fai-lp__price .fai-icon { color: var(--fai-ok); margin-top: 2px; }
.fai-lp__price strong { color: var(--fai-ink); }

/* hero mock: the family's window-chrome device, showing a real day-1 plan */
.fai-lp__ticketwrap { position: relative; }
/* position:relative is load-bearing — the route SVG is absolutely positioned in
   the same wrapper, so a STATIC card paints underneath it and the plane flies
   across the card face. Relative puts the card on top and the route reads as
   passing behind it, which is the whole point of the motif. */
.fai-heromock { position: relative; background: #fff; border-radius: var(--fai-r-xl); border: 1px solid var(--fai-border); box-shadow: var(--fai-shadow-lg); overflow: hidden; transform: rotate(-1.5deg); }
.fai-heromock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--fai-bg-2); border-bottom: 1px solid var(--fai-border-2); }
.fai-heromock__bar span { width: 10px; height: 10px; border-radius: 50%; background: #d6dae3; display: inline-block; }
.fai-heromock__bar span:nth-child(1) { background: #ff6259; }
.fai-heromock__bar span:nth-child(2) { background: #ffbd2e; }
.fai-heromock__bar span:nth-child(3) { background: #2cca3f; }
.fai-heromock__bar small { margin-left: auto; font-family: var(--fai-font-en); color: var(--fai-muted); font-size: 11px; }
.fai-heromock__body { padding: 22px 22px 18px; }
.fai-heromock__pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--fai-brand-50); color: var(--fai-brand-700); font-family: var(--fai-font-ui); font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.fai-heromock__q { font-family: var(--fai-font-ui); font-size: 17px; font-weight: 600; color: var(--fai-ink); margin: 0 0 14px; line-height: 1.4; }
.fai-heromock__opts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.fai-heromock__opts li { display: flex; gap: 10px; align-items: baseline; border: 1px solid var(--fai-border); border-radius: var(--fai-r-sm); padding: 10px 14px; font-size: 14px; color: var(--fai-text); }
.fai-heromock__opts li .fai-mono { color: var(--fai-ink); font-size: 13px; flex: none; width: 46px; }
.fai-heromock__opts li.is-pick { border-color: var(--fai-brand); background: var(--fai-brand-50); color: var(--fai-brand-700); font-weight: 600; box-shadow: 0 0 0 3px rgba(183,51,214,.10); }
.fai-heromock__opts li.is-pick .fai-mono { color: var(--fai-brand-700); }
.fai-heromock__foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--fai-muted); }
.fai-heromock__time { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fai-font-en); font-variant-numeric: tabular-nums; }
.fai-heromock__btn { color: var(--fai-brand); font-weight: 600; }
.fai-floater { position: absolute; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: var(--fai-shadow-md); display: inline-flex; align-items: center; gap: 6px; font-family: var(--fai-font-ui); font-size: 13px; font-weight: 600; color: var(--fai-ink-2); border: 1px solid var(--fai-border-2); }
.fai-floater .fai-icon { color: var(--fai-brand); }
/* Floaters ride the card's CORNERS. At 8%/12% they sat over the itinerary rows
   and covered the text they were meant to annotate. */
.fai-floater--1 { top: -18px; left: -14px; animation: fai-float 6s ease-in-out infinite; }
.fai-floater--2 { bottom: -18px; right: -8px; animation: fai-float 7s ease-in-out infinite reverse; }
@keyframes fai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) {
    .fai-lp__herogrid { grid-template-columns: 1fr; gap: 40px; }
    .fai-lp__hero { padding: 36px 0 60px; }
    .fai-heromock { transform: none; }
    .fai-floater--1 { top: -10px; left: 8px; }
    .fai-floater--2 { bottom: -10px; right: 8px; }
}

/* stats strip: real figures only */
.fai-lp__strip { padding: 22px 0; background: var(--fai-ink); color: #fff; }
.fai-lp__striprow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; text-align: center; }
.fai-lp__striprow > div { display: flex; flex-direction: column; gap: 2px; }
.fai-lp__striprow strong { font-family: var(--fai-font-ui); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.fai-lp__striprow span { font-size: 12px; color: rgba(255,255,255,.66); }
@media (max-width: 700px) { .fai-lp__striprow { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 8px 0; } .fai-lp__striprow > div:last-child { grid-column: 1 / -1; } }

.fai-lp__sec { padding: 80px 0; }
.fai-lp__sec--alt { background: var(--fai-bg-2); }
.fai-lp__sechead { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.fai-lp__h2 { font-family: var(--fai-font-ui); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; color: var(--fai-ink); letter-spacing: -.015em; margin: 0 0 8px; }
.fai-lp__sechead p { color: var(--fai-muted); font-size: 16px; margin: 0; }
@media (max-width: 700px) { .fai-lp__sec { padding: 56px 0; } .fai-lp__sechead { margin-bottom: 28px; } }

.fai-lp__stubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fai-lp__stub { background: var(--fai-card); border: 1px solid var(--fai-border-2); border-radius: var(--fai-r-lg); padding: 24px; transition: transform .15s, box-shadow .2s, border-color .15s; }
.fai-lp__stub:hover { transform: translateY(-3px); box-shadow: var(--fai-shadow); border-color: var(--fai-brand-100); }
.fai-lp__stub i { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--fai-brand-50); color: var(--fai-brand-700); border-radius: 12px; margin-bottom: 14px; font-style: normal; }
.fai-lp__stub b { display: block; font-family: var(--fai-font-ui); font-weight: 600; font-size: 17px; color: var(--fai-ink); margin: 0 0 6px; }
.fai-lp__stub p { font-size: 14.5px; color: var(--fai-muted); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .fai-lp__stubs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fai-lp__stubs { grid-template-columns: 1fr; } }

/* destination cards = the family's exam cards */
.fai-lp__places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fai-lp__place { background: linear-gradient(180deg, #fff 0%, var(--fai-brand-50) 100%); border: 1px solid var(--fai-brand-100); border-radius: var(--fai-r-lg); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .2s; }
.fai-lp__place:hover { transform: translateY(-3px); box-shadow: var(--fai-shadow); }
.fai-lp__place header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.fai-lp__place h3 { font-family: var(--fai-font-ui); font-weight: 600; font-size: 20px; margin: 0; color: var(--fai-brand-700); }
.fai-lp__place p { color: var(--fai-muted); font-size: 14px; margin: 0; }
.fai-lp__bullets { list-style: none; padding: 0; margin: 6px 0 4px; display: grid; gap: 6px; }
.fai-lp__bullets li { display: flex; align-items: flex-start; gap: 6px; color: var(--fai-text); font-size: 13.5px; }
.fai-lp__bullets .fai-icon { color: var(--fai-ok); margin-top: 3px; }
.fai-lp__placecta { display: inline-flex; align-items: center; gap: 4px; color: var(--fai-brand); font-family: var(--fai-font-ui); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: auto; min-height: 44px; }
.fai-lp__placecta:hover { gap: 8px; transition: gap .15s; }
.fai-lp__morenote { text-align: center; color: var(--fai-muted); font-size: 14px; margin: 20px 0 0; }
.fai-lp__morenote a { color: var(--fai-brand); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
@media (max-width: 900px) { .fai-lp__places { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fai-lp__places { grid-template-columns: 1fr; } }

.fai-lp__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; margin: 0; }
.fai-lp__steps li { background: #fff; border: 1px solid var(--fai-border-2); border-radius: var(--fai-r-lg); padding: 26px 22px; }
.fai-lp__stepnum { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fai-grad); color: #fff; font-family: var(--fai-font-ui); font-weight: 700; font-size: 16px; margin-bottom: 12px; box-shadow: 0 4px 12px -4px rgba(183,51,214,.5); }
.fai-lp__steps h3 { font-family: var(--fai-font-ui); font-weight: 600; font-size: 18px; color: var(--fai-ink); margin: 0 0 6px; }
.fai-lp__steps p { color: var(--fai-muted); margin: 0; font-size: 14.5px; }
@media (max-width: 800px) { .fai-lp__steps { grid-template-columns: 1fr; } }

/* login CTA */
.fai-lp__sec--cta { background: linear-gradient(180deg, var(--fai-bg) 0%, var(--fai-card) 100%); }
.fai-lp__two { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; }
.fai-lp__ctacopy h2 { font-family: var(--fai-font-ui); font-weight: 700; font-size: clamp(28px, 3.2vw, 38px); color: var(--fai-ink); margin: 0 0 12px; letter-spacing: -.015em; }
.fai-lp__ctacopy p { color: var(--fai-text); font-size: 17px; margin: 0 0 22px; }
.fai-lp__checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fai-lp__checks li { display: flex; align-items: center; gap: 8px; color: var(--fai-text); font-size: 15px; }
.fai-lp__checks .fai-icon { color: var(--fai-ok); flex-shrink: 0; }
@media (max-width: 900px) { .fai-lp__two { grid-template-columns: 1fr; gap: 32px; } }
.fai-lp__login { background: #fff; border: 1px solid var(--fai-border); border-radius: var(--fai-r-xl); padding: 28px; box-shadow: var(--fai-shadow-md); }
.fai-lp__login h2 { font-family: var(--fai-font-ui); font-weight: 700; font-size: 22px; margin: 0 0 4px; color: var(--fai-ink); }
.fai-lp__login > .fai-note:first-of-type { margin: 0 0 16px; color: var(--fai-muted); font-size: 14px; }
.fai-lp__login .fai-label { margin-top: 14px; }
.fai-lp__login .fai-btn--block { margin-top: 14px; }
#fai-welcome-back { background: var(--fai-grad-soft); color: var(--fai-brand-700); border: 1px solid var(--fai-brand-100); border-radius: 10px; padding: 12px 16px; margin: 0 0 12px; font-family: var(--fai-font-ui); font-weight: 700; font-size: 15.5px; text-align: center; }
/* the family login card's two footnotes: a shield line pointing at the FAQ,
   then the charge, centred and quiet (matched to Exam Ready's live card) */
.fai-lp__loginfoot { display: flex; align-items: flex-start; gap: 7px; color: var(--fai-muted); font-size: 12.5px; line-height: 1.55; margin: 16px 0 0; }
.fai-lp__loginfoot .fai-icon { color: var(--fai-ok); flex: none; margin-top: 2px; }
.fai-lp__charge { margin: 10px 0 0; font-size: 12px; color: var(--fai-muted); text-align: center; line-height: 1.55; }
.fai-lp__login .fai-note .fai-icon { color: var(--fai-ok); }
.fai-lp__demo { background: var(--fai-warn-bg); border: 1px solid #FCD34D; padding: 10px 12px; border-radius: 10px; color: #78350F; font-size: 13px; margin: 12px 0 0; }
.fai-lp__demo .fai-mono { background: rgba(0,0,0,.08); padding: 2px 6px; border-radius: 4px; }
.fai-lp__robi { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--fai-r); margin: 14px 0 0; background: var(--fai-info-bg); border: 1px solid #93C5FD; color: #1E3A8A; font-size: 14px; }
.fai-lp__robi .fai-icon { color: var(--fai-info); flex-shrink: 0; }

/* FAQ */
.fai-lp__faq { display: flex; flex-direction: column; gap: 10px; }
.fai-lp__q { background: #fff; border: 1px solid var(--fai-border-2); border-radius: var(--fai-r); overflow: hidden; }
.fai-lp__q summary { list-style: none; cursor: pointer; padding: 16px 20px; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--fai-font-ui); font-weight: 600; font-size: 15.5px; color: var(--fai-ink); }
.fai-lp__q summary::-webkit-details-marker { display: none; }
.fai-lp__chev { color: var(--fai-muted); transition: transform .2s; display: inline-flex; }
.fai-lp__q[open] .fai-lp__chev { transform: rotate(45deg); color: var(--fai-brand); }
.fai-lp__q p { padding: 0 20px 18px; margin: 0; color: var(--fai-text); font-size: 14.5px; line-height: 1.65; }

/* footer band */
.fai-lp__footcta { padding: 64px 0; text-align: center; background: var(--fai-grad); color: #fff; position: relative; overflow: hidden; }
.fai-lp__footcta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 60%); pointer-events: none; }
.fai-lp__footcta .fai-lp__in { position: relative; }
.fai-lp__footcta h2 { font-family: var(--fai-font-ui); font-weight: 700; font-size: clamp(26px, 3.5vw, 36px); margin: 0 0 8px; color: #fff; letter-spacing: -.015em; }
.fai-lp__footcta p { color: rgba(255,255,255,.85); font-size: 16px; margin: 0 0 22px; }
.fai-lp__footcta .fai-btn--primary { background: #fff; color: var(--fai-brand-700); box-shadow: 0 10px 30px -8px rgba(0,0,0,.25); }
.fai-lp__footcta .fai-btn--primary:hover { color: var(--fai-brand-700); }
.fai-lp__foot { padding: 22px 0 28px; }
.fai-lp__foot p { margin: 0; font-size: 12.5px; color: var(--fai-muted); line-height: 1.6; max-width: 760px; }
.fai-lp__foot .fai-mono { font-size: 11.5px; font-weight: 500; }

/* ============================================================
   THE CLIMB — FitAi's own motif. A stepped dashed line rises behind the hero
   mock with a marker travelling it, and the dark strip carries a drifting row
   of the movement patterns this app trains. The shape is the product: every
   rung is a step up, and the line only ever goes one way. Every rule below is
   guarded by the reduced-motion block at the end.
   ============================================================ */
/* The climb, twice corrected and worth recording why.
   1. Tucked inside the card's own column, the card covered all but a few dashes
      and it read as debris.
   2. Spanning the full section, it ran straight through the headline and the
      price line. A background motif that competes with the copy is not a
      background motif.
   So: it lives in the RIGHT-HAND 36% on desktop — the card's side, where the
   only thing it can cross is the card itself — and drops to a shallow band
   along the bottom once the layout stacks. overflow:hidden on the hero keeps
   the stretched SVG from adding page scroll. */
.fai-lp__hero { position: relative; overflow: hidden; }
.fai-lp__route { position: absolute; left: 36%; right: 0; bottom: 0; width: auto; height: 88%; opacity: .75; overflow: visible; pointer-events: none; z-index: 0; }
.fai-lp__hero .fai-lp__in { position: relative; z-index: 1; }
.fai-lp__ticketwrap .fai-heromock { max-width: 452px; margin-left: auto; }
.fai-lp__route path { stroke-dasharray: 7 9; animation: fai-dashrun 2.4s linear infinite; }
@keyframes fai-dashrun { to { stroke-dashoffset: -32; } }
/* offset-path drives the marker along the EXACT same path as the drawn line —
   the two strings must stay identical to the `d` in landing.php or the marker
   floats off the track. Where offset-path is unsupported the marker simply
   rests at the start, which is fine. offset-rotate is pinned to 0deg: the
   marker is a dot, and `auto` would spin it at every corner for nothing. */
.fai-lp__flyer { offset-path: path("M 20 296 L 170 296 L 170 250 L 340 250 L 340 202 L 520 202 L 520 152 L 720 152 L 720 104 L 940 104 L 940 56 L 1180 56"); offset-rotate: 0deg; animation: fai-fly 15s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes fai-fly { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 900px) {
    /* one column: the climb still spans the section, just shallower, and the
       card stops floating right. The path itself is unchanged, so the marker
       needs no second offset-path — the stretch handles it. */
    .fai-lp__route { left: 0; height: 34%; opacity: .6; }
    .fai-lp__ticketwrap .fai-heromock { max-width: none; margin-left: 0; margin-top: 26px; }
}

.fai-lp__convoywrap { position: relative; padding: 14px 0 20px; overflow: hidden; }
.fai-lp__convoywrap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 10px, transparent 10px 22px); }
/* Seamless marquee. TWO identical sets, each forced to at least the viewport
   width, animated by exactly -50% (= one whole set). The min-width is the part
   that matters: with sets narrower than the screen, translating by half the
   content runs the convoy off and leaves the band empty on wide monitors.
   space-around then spreads a short set across the full width instead of
   bunching it at the left. */
.fai-lp__convoy { position: relative; display: flex; align-items: center; width: max-content; animation: fai-convoy 34s linear infinite; }
.fai-lp__convoyset { display: flex; align-items: center; gap: 56px; min-width: 100vw; justify-content: space-around; flex: none; }
@keyframes fai-convoy { to { transform: translateX(-50%); } }
.fai-lp__convoy span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.72); font-family: var(--fai-font-ui); font-size: 13px; white-space: nowrap; }
.fai-lp__convoy .fai-icon { color: #D9A2EC; }
@media (max-width: 700px) { .fai-lp__convoyset { gap: 40px; } .fai-lp__convoy { animation-duration: 26s; } }

/* the pattern badge on a ladder card */
.fai-lp__veh { width: 40px; height: 40px; border-radius: 11px; background: var(--fai-ink); color: #D9A2EC; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fai-lp__place header { gap: 10px; }

/* the dashed connector behind the three steps */
.fai-lp__stepswrap { position: relative; }
.fai-lp__stepswrap::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; height: 2px; background: repeating-linear-gradient(90deg, #DDBDEB 0 9px, transparent 9px 20px); }
@media (max-width: 800px) { .fai-lp__stepswrap::before { display: none; } }
.fai-lp__steps { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .fai-floater, .fai-toast, .fai-sidebar, .fai-btn,
    .fai-lp__route path, .fai-lp__flyer, .fai-lp__convoy { animation: none; transition: none; }
}
@media print { .fai-sidebar, .fai-sidebar__toggle, .fai-shell__home, .fai-lp__nav { display: none !important; } body.fai-has-sidebar .fai-app-main--with-sidebar { padding-left: 0; } }

/* The gradient buttons carry white text, at a specificity the shell cannot
   outrank. Both the landing's anchors and the app's <button>s land here. */
body.fai-shell .fai-btn--primary,
body.fai-shell .fai-btn--primary:hover,
body.fai-shell .fai-btn--primary:focus { color: #fff; }
body.fai-shell .fai-lp__footcta .fai-btn--primary,
body.fai-shell .fai-lp__footcta .fai-btn--primary:hover { color: var(--fai-brand-700); }

/* ============================================================
   THE APP SCREENS — screening, ladders, and the session runner.
   Everything above this line is the family chassis; everything below is what
   FitAi needs that the travel and exam apps never did.
   ============================================================ */

/* ---- the screening (fai-start) ---- */
.fai-start .fai-steps { list-style: none; margin: 0; padding: 0; }
.fai-step { display: none; }
.fai-step.is-open { display: block; }
.fai-src { margin: -4px 0 14px; font-family: var(--fai-font-en); font-size: 12px; line-height: 1.5; color: var(--fai-muted); }

/* One question. The English is the record and is set in the Latin face at full
   contrast; the Bangla under it is the reading aid and is visually secondary —
   that hierarchy is the licence showing through into the design. */
.fai-q { border: 1px solid var(--fai-border); border-radius: var(--fai-r-lg); padding: 14px 14px 10px; margin: 0 0 12px; position: relative; }
.fai-q legend { padding: 0; }
.fai-q__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9px; background: var(--fai-grad); color: #fff; font-family: var(--fai-font-en); font-size: 13px; font-weight: 700; }
.fai-q__en { margin: 6px 0 4px; font-family: var(--fai-font-en); font-size: 13.5px; line-height: 1.5; color: var(--fai-text); }
.fai-q__bn { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--fai-ink-2); font-weight: 500; }
.fai-q__note { margin: 0 0 2px; font-family: var(--fai-font-en); font-size: 12px; color: var(--fai-muted); }
.fai-q__note--bn { font-family: var(--fai-font-text); font-size: 12.5px; margin-bottom: 8px; }
.fai-q.is-missing { border-color: var(--fai-bad); box-shadow: 0 0 0 3px rgba(220,38,38,.08); }

/* Yes/No. Deliberately big: this is answered with a thumb, often by someone
   over fifty, and a mis-tap here changes what the app is allowed to do. */
.fai-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fai-yn label { position: relative; }
.fai-yn input { position: absolute; opacity: 0; width: 0; height: 0; }
.fai-yn span { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1.5px solid var(--fai-border); border-radius: var(--fai-r); background: #fff; font-weight: 600; font-size: 15px; color: var(--fai-text); cursor: pointer; transition: .14s; }
.fai-yn input:checked + span { border-color: var(--fai-brand); background: var(--fai-brand-50); color: var(--fai-brand-700); }
.fai-yn input:focus-visible + span { box-shadow: var(--fai-ring); }

.fai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.fai-chips label.fai-chip { padding: 0; border: 0; background: none; }
.fai-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.fai-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--fai-border); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: var(--fai-text); cursor: pointer; transition: .14s; }
.fai-chip input:checked + span { border-color: var(--fai-brand); background: var(--fai-brand-50); color: var(--fai-brand-700); font-weight: 600; }
.fai-chip input:focus-visible + span { box-shadow: var(--fai-ring); }

.fai-licence { background: var(--fai-bg-2); }
.fai-licence h3 { margin: 0 0 8px; font-size: 14px; }
.fai-licence p { margin: 0 0 6px; font-family: var(--fai-font-en); font-size: 11.5px; line-height: 1.55; color: var(--fai-muted); }

/* ---- the stop panel ----------------------------------------------------
   Printed on the session runner, the safety screen and the screening. Red is
   used NOWHERE else in this app, so the one place it appears is the one place
   it means stop. */
.fai-stop { border: 1.5px solid #FBD5D5; background: #FEF6F6; border-radius: var(--fai-r-lg); padding: 14px 16px; margin: 16px 0; }
.fai-stop h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; color: #A31111; }
.fai-stop ul { margin: 0; padding-left: 20px; }
.fai-stop li { font-size: 14px; line-height: 1.65; color: #4A1B1B; }
.fai-stop__foot { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #A31111; }

/* ---- the ladders (fai-moves) ---- */
.fai-ladder h2 { display: flex; align-items: center; gap: 10px; }
.fai-ladder__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--fai-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fai-rungs { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
/* the rail: what makes a list of exercises read as a ladder */
.fai-rungs::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px; background: var(--fai-border); }
.fai-rung { position: relative; padding: 0 0 16px 40px; }
.fai-rung__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fai-rung__n { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--fai-border); background: #fff; color: var(--fai-muted); display: inline-flex; align-items: center; justify-content: center; font-family: var(--fai-font-en); font-size: 12px; font-weight: 700; }
.fai-rung.is-mine .fai-rung__n { border-color: transparent; background: var(--fai-grad-btn); color: #fff; }
.fai-rung__head b { font-size: 15.5px; }
.fai-rung__load { font-family: var(--fai-font-en); font-size: 11.5px; font-weight: 600; color: var(--fai-muted); background: var(--fai-bg-2); border-radius: 999px; padding: 2px 8px; }
.fai-pill--now { background: var(--fai-brand-50); color: var(--fai-brand-700); border-color: var(--fai-brand-100); }
.fai-rung__body { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; }
.fai-rung__text { flex: 1; min-width: 0; }
.fai-rung__cue { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 4px; font-size: 14px; font-weight: 500; color: var(--fai-brand-700); }
.fai-rung__cue .fai-icon { flex: none; margin-top: 3px; }
.fai-rung__steps { margin: 4px 0 0; padding-left: 18px; }
.fai-rung__steps li { font-size: 13.5px; line-height: 1.6; color: var(--fai-muted); }
.fai-rung__avoid { margin: 6px 0 0; font-size: 12.5px; color: var(--fai-warn); }
.fai-rung__yt { margin: 6px 0 0; font-size: 12.5px; }
.fai-bullets { margin: 0; padding-left: 20px; }
.fai-bullets li { font-size: 14.5px; line-height: 1.7; margin-bottom: 4px; }

/* ---- the session runner ------------------------------------------------
   Designed for a phone lying on the floor, looked at from a plank. Everything
   that matters is enormous and high-contrast; nothing that matters sits at the
   bottom edge, where a hand would be. */
.fai-wrap--runner { padding-bottom: 96px; }
.fai-run { text-align: center; }
.fai-run__step { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--fai-muted); }
.fai-run__name { font-family: var(--fai-font-disp); font-weight: 700; font-size: clamp(26px, 7vw, 38px); line-height: 1.25; margin: 6px 0 2px; color: var(--fai-ink); }
.fai-run__cue { font-size: 16px; font-weight: 500; color: var(--fai-brand-700); margin: 0 0 16px; }
/* the count: the single biggest thing on any screen in this app */
.fai-run__count { font-family: var(--fai-font-en); font-weight: 800; font-size: clamp(64px, 22vw, 116px); line-height: 1; color: var(--fai-ink); font-variant-numeric: tabular-nums; }
.fai-run__of { font-family: var(--fai-font-en); font-size: 15px; font-weight: 600; color: var(--fai-muted); }
.fai-run__ring { position: relative; width: min(240px, 62vw); aspect-ratio: 1; margin: 8px auto 12px; display: grid; place-items: center; }
.fai-run__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fai-run__ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.fai-run__track { stroke: var(--fai-border-2); }
.fai-run__arc { stroke: #A32ECB; transition: stroke-dashoffset .95s linear; }
.fai-run__mid { position: relative; z-index: 1; }
.fai-run__rest { font-family: var(--fai-font-disp); font-weight: 700; font-size: clamp(48px, 16vw, 84px); line-height: 1; color: var(--fai-brand-700); font-variant-numeric: tabular-nums; }
.fai-run__hint { font-size: 14px; color: var(--fai-muted); margin: 0; }
.fai-run__actions { display: grid; gap: 10px; margin: 18px 0 8px; }
.fai-run__actions--2 { grid-template-columns: 1fr 1fr; }
.fai-run__done { min-height: 62px; font-size: 18px; }
.fai-run__list { list-style: none; margin: 18px 0 0; padding: 0; }
.fai-run__list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--fai-r); font-size: 14.5px; color: var(--fai-muted); }
.fai-run__list li.is-now { background: var(--fai-brand-50); color: var(--fai-brand-700); font-weight: 600; }
.fai-run__list li.is-done { color: var(--fai-ok); }
.fai-run__list .fai-mono { margin-left: auto; font-size: 13px; }
/* the count stepper: thumbs, not keyboards — nobody types a number mid-set */
.fai-reps { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 4px; }
.fai-reps button { width: 56px; height: 56px; border-radius: 999px; border: 1.5px solid var(--fai-border); background: #fff; color: var(--fai-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fai-reps button:active { background: var(--fai-bg-2); }
.fai-reps__n { font-family: var(--fai-font-en); font-weight: 800; font-size: 44px; min-width: 84px; font-variant-numeric: tabular-nums; }
.fai-run__voice { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fai-muted); background: none; border: 0; cursor: pointer; padding: 8px; }
.fai-run__voice.is-off { opacity: .55; text-decoration: line-through; }

/* ---- the week strip ---- */
.fai-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 0; }
.fai-week__d { text-align: center; border: 1.5px solid var(--fai-border); border-radius: var(--fai-r); padding: 10px 2px; }
.fai-week__d small { display: block; font-size: 11.5px; color: var(--fai-muted); }
.fai-week__d b { display: block; font-family: var(--fai-font-en); font-size: 15px; margin-top: 3px; }
.fai-week__d.is-planned { border-color: var(--fai-brand-100); background: var(--fai-brand-50); }
.fai-week__d.is-done { border-color: transparent; background: var(--fai-grad-btn); color: #fff; }
.fai-week__d.is-done small { color: rgba(255,255,255,.82); }
.fai-week__d.is-today { box-shadow: var(--fai-ring); }

/* ---- progress ---- */
.fai-prog { display: grid; gap: 10px; }
.fai-prog__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--fai-border); border-radius: var(--fai-r-lg); }
.fai-prog__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--fai-border-2); overflow: hidden; }
.fai-prog__fill { display: block; height: 100%; border-radius: 999px; background: var(--fai-grad-btn); }
.fai-prog__n { font-family: var(--fai-font-en); font-size: 12.5px; font-weight: 700; color: var(--fai-muted); }

/* ---- the fitness profile ------------------------------------------------
   Six axes, four rings, one shape. The same geometry is drawn by PHP on the
   landing (at full marks, as the picture of what "fit" means here) and by JS
   in the app (the user's real one), so the two are visibly one chart. */
.fai-radar { display: block; width: 100%; height: auto; overflow: visible; }
.fai-radar__ring { fill: none; stroke: var(--fai-border); stroke-width: 1; }
.fai-radar__ring:last-of-type { stroke: var(--fai-border); }
.fai-radar__axis { stroke: var(--fai-border-2); stroke-width: 1; }
.fai-radar__poly { fill: rgba(163,46,203,.18); stroke: #A32ECB; stroke-width: 2.2; stroke-linejoin: round; }
.fai-radar__dot { fill: #7C2496; }
.fai-radar__label { font-family: var(--fai-font-ui); font-size: 12px; font-weight: 600; fill: var(--fai-ink-2); }
.fai-fit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(120px, .8fr); gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.fai-fit--mini { grid-template-columns: 200px 1fr; }
.fai-fit__chart { padding: 6px 4px; }
.fai-fit__side { display: flex; flex-direction: column; gap: 2px; }
.fai-fit__label { font-size: 13px; font-weight: 600; color: var(--fai-muted); }
.fai-fit__overall { font-family: var(--fai-font-en); font-weight: 800; font-size: clamp(44px, 12vw, 64px); line-height: 1; color: var(--fai-ink); font-variant-numeric: tabular-nums; }
/* the honesty line under the chart: what the number is and is not.
   Printed on every render; not muted into invisibility. */
.fai-fit__honesty { margin: -6px 0 14px; padding: 0 4px; font-size: 13px; line-height: 1.6; color: var(--fai-text); }
.fai-prog__name { min-width: 120px; display: flex; flex-direction: column; }
.fai-prog__name b { font-size: 14.5px; }
.fai-prog__name small { font-size: 11.5px; color: var(--fai-muted); line-height: 1.4; }
@media (max-width: 480px) { .fai-fit, .fai-fit--mini { grid-template-columns: 1fr; } .fai-fit__side { flex-direction: row; align-items: baseline; gap: 10px; } }

/* the profile inside the landing's window-chrome mock */
.fai-heromock__radar { padding: 6px 10px 2px; }
.fai-heromock__radar .fai-radar__label { font-size: 13px; }
.fai-heromock__score { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 6px; font-size: 13px; color: var(--fai-muted); }
.fai-heromock__score b { font-family: var(--fai-font-en); font-size: 28px; font-weight: 800; color: var(--fai-ink); }

/* ============================================================
   THE DEMO FIGURE — one rigged skeleton, animated per exercise.

   The runner used to show a name, a cue and a number, which is fine if you
   already know what the exercise looks like. Nobody starting from a wall
   push-up does. This is the demonstration, and it runs at the same tempo the
   app is counting, so the figure IS the metronome.

   Markup comes from FAI_Screens::figure_svg() — see that docblock for the rig.
   Everything below is: how it is drawn, which prop shows, and one keyframe set
   per movement pattern.
   ============================================================ */
.fai-fig { width: 100%; max-width: 320px; margin: 0 auto; }
.fai-fig__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Every rotatable joint pivots about its OWN local origin, which the rig has
   already translated into place. Without both of these declarations the
   browser rotates about the viewBox corner and the figure swings off screen. */
.fai-fig .fai-j { transform-box: view-box; transform-origin: 0 0; }

.fai-fig line { stroke-linecap: round; }
/* No joint is ever drawn at exactly 0. A knee at 0 reads as hyperextension and
   a beginner holding a wall-balance for 30 seconds will copy the locked knee.
   Per-exercise rules override this; it only catches what nobody set. */
.fai-fig .fai-fig__kneej--near, .fai-fig .fai-fig__kneej--far { transform: rotate(4deg); }
.fai-fig__torso { stroke: var(--fai-ink); stroke-width: 8.5; }
.fai-fig__thigh { stroke: var(--fai-ink); stroke-width: 7.5; }
.fai-fig__shin  { stroke: var(--fai-ink); stroke-width: 6.5; }
.fai-fig__uarm  { stroke: var(--fai-ink); stroke-width: 5.8; }
.fai-fig__farm  { stroke: var(--fai-ink); stroke-width: 5.2; }
.fai-fig__foot  { stroke: var(--fai-ink); stroke-width: 5; }
.fai-fig__head  { fill: var(--fai-ink); }
.fai-fig__hand  { fill: var(--fai-ink); }
/* the far arm and leg sit behind the body, which is what gives a flat side
   view any depth at all */
.fai-fig__hipj--far, .fai-fig__shoulderj--far { opacity: .42; }

/* props: all in the markup, revealed one at a time by a fai-fig--prop-* class */
.fai-fig__props line { stroke: var(--fai-border); stroke-width: 3.5; stroke-linecap: round; }
.fai-fig__floor { stroke: var(--fai-border-2); stroke-width: 4.5; }
.fai-fig__wall, .fai-fig__table, .fai-fig__chair, .fai-fig__stool, .fai-fig__door, .fai-fig__towel { display: none; }
.fai-fig--prop-wall  .fai-fig__wall  { display: block; }
.fai-fig--prop-table .fai-fig__table { display: block; }
.fai-fig--prop-chair .fai-fig__chair { display: block; }
.fai-fig--prop-stool .fai-fig__stool { display: block; }
.fai-fig--prop-door  .fai-fig__door  { display: block; }
.fai-fig--prop-towel .fai-fig__towel { display: block; stroke: var(--fai-brand); stroke-width: 4; }

/* ---- where the figure sits ---- */
.fai-run__demo { position: relative; margin: 2px auto 6px; max-width: 340px; }
.fai-run__demo .fai-fig { max-height: 34vh; }
.fai-run__demo .fai-fig__svg { max-height: 34vh; }
/* the hold progress bar lives under the figure, so a plank shows time passing
   without stealing the big number's job */
.fai-run__bar { height: 6px; border-radius: 999px; background: var(--fai-border-2); overflow: hidden; margin: 4px auto 0; max-width: 260px; }
.fai-run__barfill { display: block; height: 100%; border-radius: 999px; background: var(--fai-grad-btn); transition: width .95s linear; }

/* on the moves reference page the figure is a thumbnail beside the rung */
.fai-rung__fig { width: 108px; flex: none; }
.fai-rung__fig .fai-fig { max-width: 108px; }
.fai-rung__head--fig { display: flex; gap: 12px; align-items: flex-start; }
@media (max-width: 420px) { .fai-rung__fig { width: 86px; } .fai-rung__fig .fai-fig { max-width: 86px; } }

/* Off until it is on screen. Thirty-two looping figures on one page is real
   work for the cheap Android this app is aimed at, so the moves page starts
   them paused and fitai.js plays only the ones actually in view. */
.fai-rung__fig .fai-j { animation-play-state: paused; }
.fai-rung__fig.is-live .fai-j { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
    /* the pose still teaches; the motion is what we drop */
    .fai-fig .fai-j { animation: none !important; }
    /* ...except a gait frozen at neutral is just a person standing, so the
       walking patterns rest mid-stride instead of at the rig's zero pose */
    .fai-fig--move .fai-fig__hipj--near  { transform: rotate(-46deg); }
    .fai-fig--move .fai-fig__kneej--near { transform: rotate(58deg); }
    .fai-fig--move .fai-fig__hipj--far   { transform: rotate(16deg); }
    .fai-fig--move .fai-fig__kneej--far  { transform: rotate(10deg); }
    .fai-fig--move .fai-fig__shoulderj--near { transform: rotate(20deg); }
    .fai-fig--move .fai-fig__shoulderj--far  { transform: rotate(-26deg); }
}

/* ============================================================
   ONE KEYFRAME SET PER MOVEMENT PATTERN.

   Sign conventions, verified in a browser against the rig:
     .fai-fig__body        + tips the head forward and down (toward the face)
     .fai-fig__hipj-*      NEGATIVE is hip flexion (thigh swings forward)
     .fai-fig__kneej-*     POSITIVE is knee flexion (heel toward the buttock)
     .fai-fig__shoulderj-* NEGATIVE is shoulder flexion (arm swings forward)
     .fai-fig__elbowj-*    NEGATIVE is elbow flexion
     .fai-fig__anklej-*    POSITIVE points the toes down
     .fai-fig__shift       translate in viewBox units, to keep feet planted

   The rig is rooted at the HIP, so any exercise where the feet stay on the
   floor while the hips travel has to translate __shift to compensate. That is
   why a squat moves down and back rather than lifting its own feet off the
   ground.

   Timing: --fig-dur is one full loop and the runner sets it to the rep pace,
   so the figure is the metronome. The lowering half of every rep gets more of
   the cycle than the lifting half, the way a coach actually paces it.
   ============================================================ */

.fai-fig .fai-j { animation-duration: var(--fig-dur, 3s); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .35, 1); }

/* ---------------------------------------------------------------- PUSH ---- */
/* Body held as one plank at --inc; only the elbows work. The whole figure
   dips along the arm line (--dipx/--dipy) so the hands stay on their support
   instead of sliding down it as the elbows bend. */
.fai-fig--push .fai-fig__body { transform: rotate(var(--inc, 70deg)); }
.fai-fig--push .fai-fig__hipj--near, .fai-fig--push .fai-fig__hipj--far { transform: rotate(var(--hipa, 4deg)); }
.fai-fig--push .fai-fig__kneej--near, .fai-fig--push .fai-fig__kneej--far { transform: rotate(var(--kneea, 4deg)); }
.fai-fig--push .fai-fig__shoulderj--near, .fai-fig--push .fai-fig__shoulderj--far { transform: rotate(-90deg); }
.fai-fig--push .fai-fig__neckj { transform: rotate(var(--necka, 8deg)); }
.fai-fig--push .fai-fig__elbowj--near, .fai-fig--push .fai-fig__elbowj--far { animation-name: fai-push-elbow; }
.fai-fig--push .fai-fig__shift { animation-name: fai-push-dip; }
@keyframes fai-push-elbow {
    0%   { transform: rotate(-6deg); }
    55%  { transform: rotate(-86deg); }   /* down, slowly */
    68%  { transform: rotate(-86deg); }   /* the pause at the bottom */
    100% { transform: rotate(-6deg); }    /* press back up */
}
@keyframes fai-push-dip {
    0%   { transform: translate(var(--sx, 0px), var(--sy, 0px)); }
    55%, 68% { transform: translate(calc(var(--sx, 0px) + var(--dipx, 3px)), calc(var(--sy, 0px) + var(--dipy, 9px))); }
    100% { transform: translate(var(--sx, 0px), var(--sy, 0px)); }
}
.fai-fig--push-wall  { --inc: 16deg;  --sx: 30px; --sy: -2px; --dipx: 10px; --dipy: 2px; }
.fai-fig--push-table { --inc: 40deg;  --sx: 12px; --sy: 2px;  --dipx: 8px;  --dipy: 6px; }
.fai-fig--push-knee  { --inc: 66deg;  --sx: -6px; --sy: 34px; --dipx: 4px;  --dipy: 9px; --kneea: 96deg; --hipa: 0deg; }
.fai-fig--push-step  { --inc: 58deg;  --sx: -6px; --sy: 10px; --dipx: 5px;  --dipy: 8px; }
.fai-fig--push-full  { --inc: 74deg;  --sx: -14px; --sy: 18px; --dipx: 3px; --dipy: 9px; }

/* --------------------------------------------------------------- SQUAT ---- */
/* Hips travel back and down while the feet stay planted, the trunk inclines to
   keep the weight over the middle of the foot, and the arms come forward as a
   counterweight. The knee never passes the toe because the shift takes the hip
   backwards, which is the whole point of the movement. */
.fai-fig--squat .fai-fig__body { animation-name: fai-squat-trunk; }
.fai-fig--squat .fai-fig__hipj--near, .fai-fig--squat .fai-fig__hipj--far { animation-name: fai-squat-hip; }
.fai-fig--squat .fai-fig__kneej--near, .fai-fig--squat .fai-fig__kneej--far { animation-name: fai-squat-knee; }
.fai-fig--squat .fai-fig__shoulderj--near, .fai-fig--squat .fai-fig__shoulderj--far { animation-name: fai-squat-arm; }
.fai-fig--squat .fai-fig__shift { animation-name: fai-squat-shift; }
@keyframes fai-squat-trunk { 0%,100% { transform: rotate(4deg); } 50%, 62% { transform: rotate(28deg); } }
@keyframes fai-squat-hip   { 0%,100% { transform: rotate(-4deg); } 50%, 62% { transform: rotate(calc(-1 * var(--depth, 88deg))); } }
@keyframes fai-squat-knee  { 0%,100% { transform: rotate(4deg); } 50%, 62% { transform: rotate(var(--depth, 88deg)); } }
@keyframes fai-squat-arm   { 0%,100% { transform: rotate(-6deg); } 50%, 62% { transform: rotate(-72deg); } }
@keyframes fai-squat-shift {
    0%,100%  { transform: translate(0px, 0px); }
    50%, 62% { transform: translate(calc(-1 * var(--back, 15px)), var(--drop, 20px)); }
}
.fai-fig--sq-chair-high { --depth: 62deg; --drop: 12px; --back: 12px; }
.fai-fig--sq-stool      { --depth: 78deg; --drop: 17px; --back: 14px; }
.fai-fig--sq-to-box     { --depth: 84deg; --drop: 19px; --back: 15px; }
.fai-fig--sq-free       { --depth: 92deg; --drop: 21px; --back: 16px; }
/* the split squat drops straight down, and only the front leg folds */
.fai-fig--sq-split .fai-fig__hipj--far { animation-name: fai-split-hipback; }
.fai-fig--sq-split .fai-fig__kneej--far { animation-name: fai-split-kneeback; }
.fai-fig--sq-split { --depth: 86deg; --drop: 18px; --back: 2px; }
@keyframes fai-split-hipback  { 0%,100% { transform: rotate(24deg); } 50%,62% { transform: rotate(30deg); } }
@keyframes fai-split-kneeback { 0%,100% { transform: rotate(18deg); } 50%,62% { transform: rotate(96deg); } }

/* --------------------------------------------------------------- HINGE ---- */
/* Two different shapes share this ladder, so they are keyed separately:
   the bridges are supine, the standing hinge is upright. */
.fai-fig--hg-bridge, .fai-fig--hg-bridge-1leg { --sup: -92deg; }
.fai-fig--hg-bridge .fai-fig__body, .fai-fig--hg-bridge-1leg .fai-fig__body { animation-name: fai-bridge-body; }
.fai-fig--hg-bridge .fai-fig__shift, .fai-fig--hg-bridge-1leg .fai-fig__shift { animation-name: fai-bridge-rise; }
.fai-fig--hg-bridge .fai-fig__hipj--near, .fai-fig--hg-bridge .fai-fig__hipj--far,
.fai-fig--hg-bridge-1leg .fai-fig__hipj--near { animation-name: fai-bridge-hip; }
.fai-fig--hg-bridge .fai-fig__kneej--near, .fai-fig--hg-bridge .fai-fig__kneej--far,
.fai-fig--hg-bridge-1leg .fai-fig__kneej--near { transform: rotate(110deg); }
.fai-fig--hg-bridge .fai-fig__shoulderj--near, .fai-fig--hg-bridge .fai-fig__shoulderj--far,
.fai-fig--hg-bridge-1leg .fai-fig__shoulderj--near, .fai-fig--hg-bridge-1leg .fai-fig__shoulderj--far { transform: rotate(14deg); }
/* the lifted leg stays straight in the air, which is the whole difficulty */
.fai-fig--hg-bridge-1leg .fai-fig__hipj--far { animation-name: fai-bridge-hip-lift; }
.fai-fig--hg-bridge-1leg .fai-fig__kneej--far { transform: rotate(6deg); }
@keyframes fai-bridge-body { 0%,100% { transform: rotate(-92deg); } 45%,62% { transform: rotate(-107deg); } }
@keyframes fai-bridge-hip  { 0%,100% { transform: rotate(-35deg); } 45%,62% { transform: rotate(-20deg); } }
@keyframes fai-bridge-rise { 0%,100% { transform: translate(-2px, 30px); } 45%,62% { transform: translate(-2px, 18px); } }
/* the free leg stays straight and in line with the trunk — that is the whole
   difficulty of the single-leg version, so it has to be visible */
@keyframes fai-bridge-hip-lift { 0%,100% { transform: rotate(-78deg); } 45%,62% { transform: rotate(-63deg); } }

/* the standing hinge: hips travel back, spine stays long, knees soft */
.fai-fig--hg-hinge .fai-fig__body { animation-name: fai-hinge-body; }
.fai-fig--hg-hinge .fai-fig__hipj--near, .fai-fig--hg-hinge .fai-fig__hipj--far { animation-name: fai-hinge-hip; }
.fai-fig--hg-hinge .fai-fig__kneej--near, .fai-fig--hg-hinge .fai-fig__kneej--far { transform: rotate(14deg); }
.fai-fig--hg-hinge .fai-fig__shoulderj--near, .fai-fig--hg-hinge .fai-fig__shoulderj--far { transform: rotate(6deg); }
.fai-fig--hg-hinge .fai-fig__shift { animation-name: fai-hinge-shift; }
@keyframes fai-hinge-body  { 0%,100% { transform: rotate(3deg); } 50%,64% { transform: rotate(72deg); } }
@keyframes fai-hinge-hip   { 0%,100% { transform: rotate(-3deg); } 50%,64% { transform: rotate(-64deg); } }
@keyframes fai-hinge-shift { 0%,100% { transform: translate(0px,0px); } 50%,64% { transform: translate(-16px, 4px); } }

/* ---------------------------------------------------------------- PULL ---- */
/* Prone Y-T: face down on the floor, arms lifting off it. */
.fai-fig--pl-prone-yt .fai-fig__body { transform: rotate(94deg); }
.fai-fig--pl-prone-yt .fai-fig__shift { transform: translate(-16px, 40px); }
.fai-fig--pl-prone-yt .fai-fig__hipj--near, .fai-fig--pl-prone-yt .fai-fig__hipj--far { transform: rotate(-6deg); }
.fai-fig--pl-prone-yt .fai-fig__shoulderj--near, .fai-fig--pl-prone-yt .fai-fig__shoulderj--far { animation-name: fai-yt-shoulder; }
.fai-fig--pl-prone-yt .fai-fig__elbowj--near, .fai-fig--pl-prone-yt .fai-fig__elbowj--far { animation-name: fai-yt-elbow; }
@keyframes fai-yt-shoulder { 0%,100% { transform: rotate(-184deg); } 50%,62% { transform: rotate(-202deg); } }
@keyframes fai-yt-elbow    { 0%,100% { transform: rotate(-4deg); } 50%,62% { transform: rotate(-16deg); } }

/* Towel row and doorframe row: elbows drive back, chest opens. The towel row
   is isometric, so it only breathes; the door row is a real rep. */
.fai-fig--pull .fai-fig__shift { transform: translate(-10px, 0px); }
.fai-fig--pl-towel-row .fai-fig__shoulderj--near, .fai-fig--pl-towel-row .fai-fig__shoulderj--far { transform: rotate(-74deg); }
.fai-fig--pl-towel-row .fai-fig__elbowj--near, .fai-fig--pl-towel-row .fai-fig__elbowj--far { transform: rotate(-84deg); }
.fai-fig--pl-towel-row { --rest: 2deg; --breath: 1.5deg; }
.fai-fig--pl-towel-row .fai-fig__body { animation-name: fai-breathe; }
.fai-fig--pl-door-row .fai-fig__body { transform: rotate(-16deg); }
.fai-fig--pl-door-row .fai-fig__shift { animation-name: fai-row-shift; }
.fai-fig--pl-door-row .fai-fig__shoulderj--near, .fai-fig--pl-door-row .fai-fig__shoulderj--far { transform: rotate(-88deg); }
.fai-fig--pl-door-row .fai-fig__elbowj--near, .fai-fig--pl-door-row .fai-fig__elbowj--far { animation-name: fai-row-elbow; }
.fai-fig--pl-door-row .fai-fig__hipj--near, .fai-fig--pl-door-row .fai-fig__hipj--far { transform: rotate(2deg); }
@keyframes fai-row-elbow { 0%,100% { transform: rotate(-10deg); } 50%,64% { transform: rotate(-96deg); } }
@keyframes fai-row-shift { 0%,100% { transform: translate(-4px, 0px); } 50%,64% { transform: translate(18px, 0px); } }

/* ---------------------------------------------------------------- CORE ---- */
/* Planks are holds: the only motion is the ribcage breathing, 2 degrees. */
.fai-fig--cr-plank, .fai-fig--cr-plank-knee, .fai-fig--cr-side-plank { --fig-dur: 5s; }
.fai-fig--cr-plank { --rest: 88deg; --breath: 1.5deg; }
.fai-fig--cr-plank .fai-fig__body { animation-name: fai-breathe; }
.fai-fig--cr-plank .fai-fig__shift { transform: translate(-18px, 26px); }
.fai-fig--cr-plank .fai-fig__shoulderj--near, .fai-fig--cr-plank .fai-fig__shoulderj--far { transform: rotate(-96deg); }
.fai-fig--cr-plank .fai-fig__elbowj--near, .fai-fig--cr-plank .fai-fig__elbowj--far { transform: rotate(-84deg); }
.fai-fig--cr-plank .fai-fig__hipj--near, .fai-fig--cr-plank .fai-fig__hipj--far { transform: rotate(2deg); }
.fai-fig--cr-plank .fai-fig__anklej--near, .fai-fig--cr-plank .fai-fig__anklej--far { transform: rotate(-46deg); }

.fai-fig--cr-plank-knee { --rest: 74deg; --breath: 1.5deg; }
.fai-fig--cr-plank-knee .fai-fig__body { animation-name: fai-breathe; }
.fai-fig--cr-plank-knee .fai-fig__shift { transform: translate(-10px, 30px); }
.fai-fig--cr-plank-knee .fai-fig__shoulderj--near, .fai-fig--cr-plank-knee .fai-fig__shoulderj--far { transform: rotate(-88deg); }
.fai-fig--cr-plank-knee .fai-fig__elbowj--near, .fai-fig--cr-plank-knee .fai-fig__elbowj--far { transform: rotate(-82deg); }
.fai-fig--cr-plank-knee .fai-fig__kneej--near, .fai-fig--cr-plank-knee .fai-fig__kneej--far { transform: rotate(88deg); }

/* Side plank read from the side is ambiguous, so it is drawn nearly face-on:
   one arm down to the floor, the body a straight diagonal, top arm on the hip. */
.fai-fig--cr-side-plank { --rest: 88deg; --breath: 1.5deg; }
.fai-fig--cr-side-plank .fai-fig__body { animation-name: fai-breathe; }
.fai-fig--cr-side-plank .fai-fig__shift { transform: translate(-16px, 24px); }
.fai-fig--cr-side-plank .fai-fig__shoulderj--near { transform: rotate(-88deg); }
.fai-fig--cr-side-plank .fai-fig__elbowj--near { transform: rotate(-86deg); }
.fai-fig--cr-side-plank .fai-fig__shoulderj--far { transform: rotate(92deg); }
.fai-fig--cr-side-plank .fai-fig__elbowj--far { transform: rotate(0deg); }
.fai-fig--cr-side-plank .fai-fig__hipj--near, .fai-fig--cr-side-plank .fai-fig__hipj--far { transform: rotate(2deg); }
.fai-fig--cr-side-plank .fai-fig__anklej--near, .fai-fig--cr-side-plank .fai-fig__anklej--far { transform: rotate(-40deg); }

/* Dead bug is a real rep: opposite arm and leg reach away, then come back. */
.fai-fig--cr-deadbug .fai-fig__body { transform: rotate(-90deg); }
.fai-fig--cr-deadbug .fai-fig__shift { transform: translate(-4px, 34px); }
.fai-fig--cr-deadbug .fai-fig__hipj--near { transform: rotate(-90deg); }
.fai-fig--cr-deadbug .fai-fig__kneej--near { transform: rotate(90deg); }
.fai-fig--cr-deadbug .fai-fig__hipj--far { animation-name: fai-db-leg; }
.fai-fig--cr-deadbug .fai-fig__kneej--far { animation-name: fai-db-knee; }
.fai-fig--cr-deadbug .fai-fig__shoulderj--near { animation-name: fai-db-arm; }
.fai-fig--cr-deadbug .fai-fig__shoulderj--far { transform: rotate(-92deg); }
@keyframes fai-db-leg  { 0%,100% { transform: rotate(-90deg); } 50%,60% { transform: rotate(-34deg); } }
@keyframes fai-db-knee { 0%,100% { transform: rotate(90deg); } 50%,60% { transform: rotate(14deg); } }
@keyframes fai-db-arm  { 0%,100% { transform: rotate(-90deg); } 50%,60% { transform: rotate(-172deg); } }

/* ---------------------------------------------------------------- MOVE ---- */
/* Marching and walking: alternating knees, opposite arm swing, a small bob.
   Two legs out of phase is what makes a gait read as a gait. */
.fai-fig--move .fai-fig__body { transform: rotate(3deg); }
.fai-fig--move .fai-fig__shift { animation-name: fai-bob; }
.fai-fig--move .fai-fig__hipj--near { animation-name: fai-march-hip; }
.fai-fig--move .fai-fig__kneej--near { animation-name: fai-march-knee; }
.fai-fig--move .fai-fig__hipj--far { animation-name: fai-march-hip; animation-delay: calc(var(--fig-dur, 3s) / -2); }
.fai-fig--move .fai-fig__kneej--far { animation-name: fai-march-knee; animation-delay: calc(var(--fig-dur, 3s) / -2); }
.fai-fig--move .fai-fig__shoulderj--near { animation-name: fai-march-arm; animation-delay: calc(var(--fig-dur, 3s) / -2); }
.fai-fig--move .fai-fig__shoulderj--far { animation-name: fai-march-arm; }
.fai-fig--move .fai-fig__elbowj--near, .fai-fig--move .fai-fig__elbowj--far { transform: rotate(-64deg); }
@keyframes fai-march-hip  { 0%,100% { transform: rotate(16deg); } 50% { transform: rotate(calc(-1 * var(--lift, 78deg))); } }
@keyframes fai-march-knee { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(var(--kbend, 84deg)); } }
@keyframes fai-march-arm  { 0%,100% { transform: rotate(22deg); } 50% { transform: rotate(-34deg); } }
@keyframes fai-bob        { 0%,100% { transform: translate(0px, 0px); } 50% { transform: translate(0px, -3px); } }
.fai-fig--mv-march     { --lift: 72deg; --kbend: 86deg; --fig-dur: 2s; }
.fai-fig--mv-fast-walk { --lift: 46deg; --kbend: 52deg; --fig-dur: 1.3s; }
/* stepping onto the box: one leg does the work, the body rises */
.fai-fig--mv-step { --lift: 62deg; --kbend: 70deg; --fig-dur: 2.4s; }
.fai-fig--mv-step .fai-fig__shift { animation-name: fai-step-rise; }
@keyframes fai-step-rise { 0%,100% { transform: translate(0px, 0px); } 50%,60% { transform: translate(14px, -13px); } }

/* ------------------------------------------------------------ MOBILITY ---- */
/* All holds. A stretch that bounces is a stretch that injures, so the idle is
   a slow breath and nothing else. */
.fai-fig--mobility { --fig-dur: 5s; }
.fai-fig--mobility .fai-fig__body { animation-name: fai-breathe; }
@keyframes fai-breathe { 0%,100% { transform: rotate(var(--rest, 3deg)); } 50% { transform: rotate(calc(var(--rest, 3deg) + var(--breath, 2deg))); } }

.fai-fig--mb-door-chest { --rest: -4deg; --breath: 2deg; }
.fai-fig--mb-door-chest .fai-fig__shift { transform: translate(6px, 0px); }
.fai-fig--mb-door-chest .fai-fig__shoulderj--near, .fai-fig--mb-door-chest .fai-fig__shoulderj--far { transform: rotate(-104deg); }
.fai-fig--mb-door-chest .fai-fig__elbowj--near, .fai-fig--mb-door-chest .fai-fig__elbowj--far { transform: rotate(-88deg); }
.fai-fig--mb-door-chest .fai-fig__hipj--near { transform: rotate(-26deg); }
.fai-fig--mb-door-chest .fai-fig__kneej--near { transform: rotate(24deg); }
.fai-fig--mb-door-chest .fai-fig__hipj--far { transform: rotate(16deg); }

.fai-fig--mb-chair-tspine { --rest: -12deg; --breath: 2.5deg; }
.fai-fig--mb-chair-tspine .fai-fig__shift { transform: translate(24px, 16px); }
.fai-fig--mb-chair-tspine .fai-fig__hipj--near, .fai-fig--mb-chair-tspine .fai-fig__hipj--far { transform: rotate(-84deg); }
.fai-fig--mb-chair-tspine .fai-fig__kneej--near, .fai-fig--mb-chair-tspine .fai-fig__kneej--far { transform: rotate(86deg); }
.fai-fig--mb-chair-tspine .fai-fig__shoulderj--near, .fai-fig--mb-chair-tspine .fai-fig__shoulderj--far { transform: rotate(-160deg); }
.fai-fig--mb-chair-tspine .fai-fig__elbowj--near, .fai-fig--mb-chair-tspine .fai-fig__elbowj--far { transform: rotate(-118deg); }

.fai-fig--mb-stool-hamstring { --rest: 48deg; --breath: 2deg; }
.fai-fig--mb-stool-hamstring .fai-fig__shift { transform: translate(-16px, 0px); }
.fai-fig--mb-stool-hamstring .fai-fig__hipj--near { transform: rotate(-46deg); }
.fai-fig--mb-stool-hamstring .fai-fig__kneej--near { transform: rotate(4deg); }
.fai-fig--mb-stool-hamstring .fai-fig__hipj--far { transform: rotate(2deg); }
.fai-fig--mb-stool-hamstring .fai-fig__shoulderj--near, .fai-fig--mb-stool-hamstring .fai-fig__shoulderj--far { transform: rotate(-26deg); }

.fai-fig--mb-wall-calf { --rest: 18deg; --breath: 2deg; }
.fai-fig--mb-wall-calf .fai-fig__shift { transform: translate(6px, 0px); }
.fai-fig--mb-wall-calf .fai-fig__shoulderj--near, .fai-fig--mb-wall-calf .fai-fig__shoulderj--far { transform: rotate(-96deg); }
.fai-fig--mb-wall-calf .fai-fig__hipj--near { transform: rotate(-32deg); }
.fai-fig--mb-wall-calf .fai-fig__kneej--near { transform: rotate(40deg); }
.fai-fig--mb-wall-calf .fai-fig__hipj--far { transform: rotate(22deg); }
.fai-fig--mb-wall-calf .fai-fig__kneej--far { transform: rotate(2deg); }

.fai-fig--mb-deep-squat { --rest: 26deg; --breath: 2deg; }
.fai-fig--mb-deep-squat .fai-fig__shift { transform: translate(-6px, 26px); }
.fai-fig--mb-deep-squat .fai-fig__hipj--near, .fai-fig--mb-deep-squat .fai-fig__hipj--far { transform: rotate(-116deg); }
.fai-fig--mb-deep-squat .fai-fig__kneej--near, .fai-fig--mb-deep-squat .fai-fig__kneej--far { transform: rotate(122deg); }
.fai-fig--mb-deep-squat .fai-fig__shoulderj--near, .fai-fig--mb-deep-squat .fai-fig__shoulderj--far { transform: rotate(-80deg); }

/* ------------------------------------------------------------- BALANCE ---- */
/* Standing still is not a still figure: a real balance hold is a constant
   small correction. That sway IS the exercise, so it is the animation. */
.fai-fig--balance { --fig-dur: 4s; }
.fai-fig--balance .fai-fig__body { animation-name: fai-sway; }
.fai-fig--balance .fai-fig__shoulderj--near { transform: rotate(-14deg); }
.fai-fig--balance .fai-fig__shoulderj--far { transform: rotate(10deg); }
@keyframes fai-sway {
    0%, 100% { transform: rotate(-2deg); }
    30%      { transform: rotate(2.5deg); }
    55%      { transform: rotate(-1deg); }
    78%      { transform: rotate(2deg); }
}
.fai-fig--bl-feet-together .fai-fig__hipj--far { transform: rotate(2deg); }
.fai-fig--bl-semi-tandem .fai-fig__hipj--far { transform: rotate(14deg); }
.fai-fig--bl-semi-tandem .fai-fig__hipj--near { transform: rotate(-12deg); }
.fai-fig--bl-tandem .fai-fig__hipj--far { transform: rotate(22deg); }
.fai-fig--bl-tandem .fai-fig__hipj--near { transform: rotate(-20deg); }
/* one leg up, and the arms come out because that is what people actually do */
.fai-fig--bl-single-leg .fai-fig__hipj--far { transform: rotate(-58deg); }
.fai-fig--bl-single-leg .fai-fig__kneej--far { transform: rotate(96deg); }
.fai-fig--bl-single-leg .fai-fig__shoulderj--near { transform: rotate(-38deg); }
.fai-fig--bl-single-leg .fai-fig__shoulderj--far { transform: rotate(30deg); }
.fai-fig--bl-single-leg .fai-fig__elbowj--near, .fai-fig--bl-single-leg .fai-fig__elbowj--far { transform: rotate(-18deg); }

/* ============================================================
   DISPLAY FACE — last, on purpose: these selectors tie with the component
   rules above (0,1,0), so only source order makes them win.
   ============================================================ */
/* Display face on the headings that carry the brand. Body, labels, buttons and
   nav stay on the family's Hind Siliguri so the two apps still read as kin. */
.fai-lp__h1, .fai-lp__h2, .fai-lp__login h2, .fai-lp__ctacopy h2,
.fai-lp__footcta h2, .fai-lp__brand b, .fai-head h1, .fai-ticket__title,
.fai-lp__place h3, .fai-lp__striprow strong, .fai-sidebar__brandname {
    font-family: var(--fai-font-disp); font-weight: 700; letter-spacing: -.015em;
}