/* =========================================
   FFA FRONT-END CSS (ELEMENTOR PROOF)
   Direct port of the approved HTML prototype
   ========================================= */

/* 1. FULL-BLEED SCOPING
   Only the container that actually holds the assessment loses its padding, so
   the dark panel spans the widget edge to edge. The rest of the page keeps its
   own spacing. :has() handles a shortcode dropped into any widget; the explicit
   selector covers the dedicated Elementor widget on browsers without :has(). */
.elementor-widget-franchise-fit-assessment > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-widget-container:has(> .ffa-root),
.elementor-widget:has(> .elementor-widget-container > .ffa-root) > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}
.ffa-root {
    max-width: 100%;
    width: 100%;
}

.ffa-root {
    /* CSS Variables */
    --yellow: #FFD810 !important;
    --yellow-dim: #C9AA0B !important;
    --ink: #0B0B0B !important;
    --ink-2: #131313 !important;
    --ink-3: #1B1B1B !important;
    --text: #FFFFFF !important;
    --muted: rgba(255,255,255,.58) !important;
    --line: rgba(255,255,255,.13) !important;
    --line-2: rgba(255,255,255,.26) !important;
    --font-display: 'Abril Fatface', Georgia, 'Times New Roman', serif !important;
    --font-body: 'Avenir Next', 'Avenir', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --fs-body: 22px !important;
    --radius: 4px !important;
    --maxw: 1000px !important;

    /* Base Container */
    color-scheme: dark !important;
    background: var(--ink) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
}

/* Global resets inside the root */
.ffa-root *, .ffa-root *::before, .ffa-root *::after { box-sizing: border-box !important; }
.ffa-root img { max-width: 100% !important; height: auto !important; }

.ffa-root p, .ffa-root h1, .ffa-root h2, .ffa-root h3, .ffa-root h4, .ffa-root h5, .ffa-root h6 {
    margin: 0 !important; padding: 0 !important; color: var(--text) !important; font-family: var(--font-body) !important;
}

.ffa-root button, .ffa-root input, .ffa-root select, .ffa-root textarea {
    font-family: inherit !important; font-size: inherit !important; color: inherit !important;
    background: none !important; border: none !important; padding: 0 !important; margin: 0 !important;
    outline: none !important; box-shadow: none !important; border-radius: 0 !important;
    text-transform: none !important; letter-spacing: normal !important;
}
.ffa-root button { cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; }

/* 2. AMBIENT BACKGROUND & PROGRESS */
/* Changed from fixed to absolute so it stays inside the widget/modal */
.ffa-root .ffa-bg, .ffa-root .bg {
    position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;
}
.ffa-root .ffa-bg::before, .ffa-root .bg::before {
    content: "" !important; position: absolute !important; inset: 0 !important;
    background: radial-gradient(900px 620px at 78% -8%, rgba(255,216,16,.13), transparent 62%),
                radial-gradient(760px 520px at 8% 106%, rgba(255,216,16,.07), transparent 60%) !important;
}
.ffa-root .ffa-bg::after, .ffa-root .bg::after {
    content: "" !important; position: absolute !important; inset: 0 !important; opacity: .5 !important;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px) !important;
    background-size: 88px 88px !important;
    mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 78%) !important;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 78%) !important;
}

.ffa-root .ffa-rail, .ffa-root .rail {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important; background: rgba(255,255,255,.08) !important; z-index: 40 !important;
}
.ffa-root .ffa-rail-fill, .ffa-root .rail-fill {
    height: 100% !important; width: 0 !important; background: var(--yellow) !important;
    transition: width .5s cubic-bezier(.22,1,.36,1) !important; box-shadow: 0 0 18px rgba(255,216,16,.5) !important;
}

/* 3. SHELL & LAYOUT (Fixes the height issue) */
.ffa-root .ffa-shell, .ffa-root .shell {
    position: relative !important; z-index: 2 !important; min-height: 100vh !important;
    display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
.ffa-root .ffa-topbar, .ffa-root .topbar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 16px !important; padding: 26px clamp(20px,5vw,60px) 0 !important; width: 100% !important; box-sizing: border-box !important;
}
.ffa-root .ffa-logo, .ffa-root .mark { height: 30px !important; width: auto !important; display: block !important; flex: none !important; }
.ffa-root .ffa-counter, .ffa-root .counter {
    font-size: 13px !important; letter-spacing: .22em !important; text-transform: uppercase !important;
    color: var(--muted) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important;
}
.ffa-root .ffa-counter b, .ffa-root .counter b { color: var(--yellow) !important; font-weight: 700 !important; }

.ffa-root .ffa-stage-wrap, .ffa-root .stage-wrap {
    flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    padding: clamp(28px,5vw,56px) clamp(20px,5vw,60px) clamp(40px,6vw,72px) !important; width: 100% !important; box-sizing: border-box !important;
}
.ffa-root .ffa-stage, .ffa-root .stage { width: 100% !important; max-width: var(--maxw) !important; margin: 0 auto !important; }

.ffa-root .ffa-screen, .ffa-root .screen { animation: ffa-rise .52s cubic-bezier(.22,1,.36,1) both !important; }
@keyframes ffa-rise {
    from { opacity: 0 !important; transform: translateY(22px) !important; }
    to { opacity: 1 !important; transform: none !important; }
}

/* 4. TYPOGRAPHY */
.ffa-root .ffa-eyebrow, .ffa-root .eyebrow {
    font-size: 12px !important; letter-spacing: .3em !important; text-transform: uppercase !important;
    color: var(--yellow) !important; font-weight: 700 !important; margin: 0 0 18px !important;
}
.ffa-root .ffa-q-title, .ffa-root .q-title {
    font-family: var(--font-display) !important; font-size: clamp(34px,5.4vw,60px) !important;
    line-height: 1.06 !important; letter-spacing: -.015em !important; margin: 0 0 14px !important; color: var(--text) !important;
}
.ffa-root .ffa-q-help, .ffa-root .q-help {
    font-size: 17px !important; color: var(--muted) !important; margin: 0 0 34px !important; max-width: 64ch !important; line-height: 1.45 !important;
}

/* 5. OPTIONS */
.ffa-root .ffa-opts, .ffa-root .opts { display: grid !important; gap: 12px !important; }
.ffa-root .ffa-opts.ffa-two, .ffa-root .ffa-opts.two, .ffa-root .opts.two { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.ffa-root .ffa-opt, .ffa-root .opt {
    display: flex !important; align-items: center !important; gap: 18px !important; width: 100% !important; text-align: left !important;
    background: var(--ink-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
    padding: 20px 24px !important; transition: border-color .16s, background .16s, transform .16s !important; color: var(--text) !important;
}
.ffa-root .ffa-opt:hover, .ffa-root .opt:hover { border-color: var(--line-2) !important; background: var(--ink-3) !important; transform: translateX(3px) !important; }
.ffa-root .ffa-opt:focus-visible, .ffa-root .opt:focus-visible { outline: 2px solid var(--yellow) !important; outline-offset: 3px !important; }
.ffa-root .ffa-opt .ffa-key, .ffa-root .ffa-opt .key, .ffa-root .opt .key {
    flex: none !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important;
    border: 1px solid var(--line-2) !important; border-radius: 2px !important; font-size: 13px !important; font-weight: 700 !important;
    color: var(--muted) !important; font-variant-numeric: tabular-nums !important; transition: all .16s !important;
}
.ffa-root .ffa-opt .ffa-opt-label, .ffa-root .ffa-opt .label, .ffa-root .opt .label {
    font-size: 19px !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--text) !important;
}
.ffa-root .ffa-opt[aria-pressed="true"], .ffa-root .ffa-opt.is-on, .ffa-root .ffa-opt.ffa-on, .ffa-root .opt.is-on {
    background: var(--yellow) !important; border-color: var(--yellow) !important; color: #000 !important;
}
.ffa-root .ffa-opt.is-on .ffa-key, .ffa-root .ffa-opt.is-on .key, .ffa-root .ffa-opt.ffa-on .ffa-key, .ffa-root .ffa-opt.ffa-on .key, .ffa-root .opt.is-on .key {
    border-color: rgba(0,0,0,.35) !important; color: #000 !important; background: rgba(0,0,0,.08) !important;
}
.ffa-root .ffa-opt.is-on .ffa-opt-label, .ffa-root .ffa-opt.is-on .label, .ffa-root .ffa-opt.ffa-on .ffa-opt-label, .ffa-root .ffa-opt.ffa-on .label, .ffa-root .opt.is-on .label {
    font-weight: 600 !important; color: #000 !important;
}

/* 6. FIELDS */
.ffa-root .ffa-field, .ffa-root .field { display: block !important; margin-bottom: 18px !important; }
.ffa-root .ffa-field .ffa-lab, .ffa-root .ffa-field .lab, .ffa-root .field .lab {
    display: block !important; font-size: 12px !important; letter-spacing: .2em !important; text-transform: uppercase !important;
    color: var(--muted) !important; font-weight: 700 !important; margin-bottom: 9px !important;
}
.ffa-root .ffa-inp, .ffa-root .inp {
    width: 100% !important; background: var(--ink-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
    color: var(--text) !important; font-family: var(--font-body) !important; font-size: 19px !important; padding: 17px 18px !important;
    transition: border-color .16s, background .16s !important; box-sizing: border-box !important;
}
.ffa-root .ffa-inp::placeholder, .ffa-root .inp::placeholder { color: rgba(255,255,255,.3) !important; }
.ffa-root .ffa-inp:focus, .ffa-root .inp:focus { outline: none !important; border-color: var(--yellow) !important; background: var(--ink-3) !important; }
.ffa-root select.ffa-inp, .ffa-root select.inp {
    appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important;
    background-image: linear-gradient(45deg,transparent 50%,var(--yellow) 50%), linear-gradient(135deg,var(--yellow) 50%,transparent 50%) !important;
    background-position: calc(100% - 22px) 26px, calc(100% - 15px) 26px !important; background-size: 7px 7px, 7px 7px !important; background-repeat: no-repeat !important;
}
.ffa-root select.ffa-inp option, .ffa-root select.inp option { background: var(--ink-2) !important; color: var(--text) !important; }
.ffa-root .ffa-grid2, .ffa-root .grid2 { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 0 18px !important; }

.ffa-root .ffa-check, .ffa-root .check {
    display: flex !important; gap: 14px !important; align-items: flex-start !important; cursor: pointer !important;
    margin: 6px 0 26px !important; font-size: 16px !important; color: var(--muted) !important; line-height: 1.4 !important;
}
.ffa-root .ffa-check input, .ffa-root .check input {
    appearance: none !important; -webkit-appearance: none !important; flex: none !important; width: 24px !important; height: 24px !important;
    margin: 0 !important; border: 1px solid var(--line-2) !important; border-radius: 2px !important; background: var(--ink-2) !important;
    cursor: pointer !important; transition: all .15s !important;
}
.ffa-root .ffa-check input:checked, .ffa-root .check input:checked { background: var(--yellow) !important; border-color: var(--yellow) !important; }
.ffa-root .ffa-check input:checked::after, .ffa-root .check input:checked::after {
    content: "" !important; display: block !important; width: 7px !important; height: 13px !important; margin: 2px auto 0 !important;
    border: solid #000 !important; border-width: 0 2.5px 2.5px 0 !important; transform: rotate(43deg) !important;
}
.ffa-root .ffa-check input:focus-visible, .ffa-root .check input:focus-visible { outline: 2px solid var(--yellow) !important; outline-offset: 2px !important; }

/* 7. ACTIONS */
.ffa-root .ffa-actions, .ffa-root .actions { display: flex !important; align-items: center !important; gap: 22px !important; margin-top: 34px !important; flex-wrap: wrap !important; }
.ffa-root .ffa-btn, .ffa-root .btn {
    display: inline-flex !important; align-items: center !important; gap: 14px !important; background: var(--yellow) !important;
    color: #000 !important; border: 1px solid var(--yellow) !important; border-radius: var(--radius) !important; padding: 18px 34px !important;
    font-size: 16px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
    transition: transform .16s, box-shadow .16s, opacity .16s !important; text-decoration: none !important; cursor: pointer !important;
}
.ffa-root .ffa-btn:hover, .ffa-root .btn:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 34px rgba(255,216,16,.26) !important; }
.ffa-root .ffa-btn:disabled, .ffa-root .btn:disabled { opacity: .28 !important; pointer-events: none !important; }
.ffa-root .ffa-btn .ffa-arw, .ffa-root .ffa-btn .arw, .ffa-root .btn .arw {
    display: grid !important; place-items: center !important; width: 26px !important; height: 26px !important;
    border-radius: 50% !important; background: #000 !important; color: var(--yellow) !important; font-size: 13px !important;
}
.ffa-root .ffa-ghost, .ffa-root .ghost {
    background: none !important; border: none !important; color: var(--muted) !important; font-size: 15px !important;
    letter-spacing: .06em !important; padding: 6px 0 !important; text-decoration: none !important; cursor: pointer !important;
}
.ffa-root .ffa-ghost:hover, .ffa-root .ghost:hover { color: var(--yellow) !important; }
.ffa-root .ffa-hint, .ffa-root .hint { font-size: 13px !important; color: rgba(255,255,255,.3) !important; letter-spacing: .06em !important; margin-left: auto !important; }

/* 8. INTRO */
.ffa-root .ffa-intro-title, .ffa-root .intro-title {
    font-family: var(--font-display) !important; font-size: clamp(42px,7.6vw,86px) !important;
    line-height: 1 !important; letter-spacing: -.02em !important; margin: 0 0 22px !important; color: var(--text) !important;
}
.ffa-root .ffa-intro-title em, .ffa-root .intro-title em { font-style: normal !important; color: var(--yellow) !important; }
.ffa-root .ffa-intro-copy, .ffa-root .intro-copy {
    font-size: 20px !important; color: var(--muted) !important; max-width: 60ch !important; margin: 0 0 34px !important; line-height: 1.5 !important;
}
.ffa-root .ffa-facts, .ffa-root .facts {
    display: flex !important; gap: 40px !important; flex-wrap: wrap !important; margin: 38px 0 0 !important; padding-top: 28px !important; border-top: 1px solid var(--line) !important;
}
.ffa-root .ffa-fact .ffa-n, .ffa-root .fact .n { font-family: var(--font-display) !important; font-size: 34px !important; color: var(--yellow) !important; line-height: 1 !important; }
.ffa-root .ffa-fact .ffa-t, .ffa-root .fact .t {
    font-size: 13px !important; letter-spacing: .2em !important; text-transform: uppercase !important;
    color: var(--muted) !important; margin-top: 8px !important; font-weight: 600 !important;
}

/* 9. RESULTS */
.ffa-root .ffa-res-head, .ffa-root .res-head { display: flex !important; gap: clamp(28px,5vw,64px) !important; align-items: center !important; flex-wrap: wrap !important; }
.ffa-root .ffa-dial, .ffa-root .dial { position: relative !important; flex: none !important; width: 210px !important; height: 210px !important; }
.ffa-root .ffa-dial svg, .ffa-root .dial svg { transform: rotate(-90deg) !important; width: 100% !important; height: 100% !important; }
.ffa-root .ffa-dial .ffa-trk, .ffa-root .dial .trk { fill: none !important; stroke: rgba(255,255,255,.1) !important; stroke-width: 10 !important; }
.ffa-root .ffa-dial .ffa-val, .ffa-root .dial .val {
    fill: none !important; stroke: var(--yellow) !important; stroke-width: 10 !important; stroke-linecap: round !important;
    transition: stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1) !important;
}
.ffa-root .ffa-dial .ffa-num, .ffa-root .dial .num { position: absolute !important; inset: 0 !important; display: grid !important; place-content: center !important; text-align: center !important; }
.ffa-root .ffa-dial .ffa-num b, .ffa-root .dial .num b { font-family: var(--font-display) !important; font-size: 58px !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; color: var(--text) !important; }
.ffa-root .ffa-dial .ffa-num i, .ffa-root .dial .num i {
    display: block !important; font-style: normal !important; font-size: 11px !important; letter-spacing: .24em !important;
    text-transform: uppercase !important; color: var(--muted) !important; margin-top: 8px !important; font-weight: 700 !important;
}
.ffa-root .ffa-res-copy, .ffa-root .res-copy { flex: 1 !important; min-width: 270px !important; }
.ffa-root .ffa-tierbadge, .ffa-root .tierbadge, .ffa-root .ffa-badge {
    display: inline-block !important; background: var(--yellow) !important; color: #000 !important; font-size: 12px !important;
    font-weight: 700 !important; letter-spacing: .22em !important; text-transform: uppercase !important; padding: 8px 15px !important;
    border-radius: 2px !important; margin-bottom: 16px !important;
}
.ffa-root .ffa-res-title, .ffa-root .res-title {
    font-family: var(--font-display) !important; font-size: clamp(32px,4.6vw,50px) !important;
    line-height: 1.06 !important; margin: 0 0 14px !important; color: var(--text) !important;
}
.ffa-root .ffa-res-sum, .ffa-root .res-sum { font-size: 19px !important; color: var(--muted) !important; margin: 0 !important; line-height: 1.5 !important; max-width: 52ch !important; }

.ffa-root .ffa-panels, .ffa-root .panels {
    display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important;
    gap: 1px !important; background: var(--line) !important; border: 1px solid var(--line) !important; margin: 44px 0 0 !important;
}
.ffa-root .ffa-panel, .ffa-root .panel { background: var(--ink) !important; padding: 28px 26px !important; }
.ffa-root .ffa-panel .ffa-h, .ffa-root .panel .h {
    font-size: 11px !important; letter-spacing: .24em !important; text-transform: uppercase !important;
    color: var(--yellow) !important; font-weight: 700 !important; margin: 0 0 16px !important;
}
.ffa-root .ffa-panel .ffa-v, .ffa-root .panel .v { font-family: var(--font-display) !important; font-size: 27px !important; line-height: 1.2 !important; color: var(--text) !important; }
.ffa-root .ffa-chips, .ffa-root .chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.ffa-root .ffa-chip, .ffa-root .chip { border: 1px solid var(--line-2) !important; border-radius: 2px !important; padding: 9px 13px !important; font-size: 15px !important; color: var(--text) !important; }

.ffa-root .ffa-cta-band, .ffa-root .cta-band {
    margin-top: 44px !important; border: 1px solid var(--line) !important; background: var(--ink-2) !important;
    padding: clamp(28px,4vw,42px) !important; display: flex !important; gap: 28px !important; align-items: center !important;
    justify-content: space-between !important; flex-wrap: wrap !important;
}
.ffa-root .ffa-cta-band h3, .ffa-root .cta-band h3 {
    font-family: var(--font-display) !important; font-size: clamp(24px,3vw,34px) !important;
    margin: 0 0 8px !important; line-height: 1.15 !important; color: var(--text) !important;
}
.ffa-root .ffa-cta-band p, .ffa-root .cta-band p { margin: 0 !important; color: var(--muted) !important; font-size: 17px !important; max-width: 46ch !important; }

.ffa-root .ffa-legal, .ffa-root .legal { margin-top: 34px !important; font-size: 13px !important; color: rgba(255,255,255,.3) !important; line-height: 1.6 !important; max-width: 78ch !important; }
.ffa-root .ffa-sr, .ffa-root .sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.ffa-root .ffa-hp, .ffa-root .hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.ffa-root .ffa-noscript {
    display: block !important; padding: 40px clamp(20px,5vw,60px) !important;
    color: rgba(255,255,255,.7) !important; font-size: 18px !important; line-height: 1.5 !important;
}

/* 10. MODAL / POPUP SPECIFIC */
.ffa-modal {
    position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: block !important;
    background: var(--ink) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .22s ease !important;
}
.ffa-modal[hidden] { display: none !important; }
.ffa-modal.is-open { opacity: 1 !important; pointer-events: auto !important; }
html.ffa-modal-open, body.ffa-modal-open { overflow: hidden !important; }
.ffa-modal__body { position: absolute !important; inset: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
.ffa-modal .ffa-root, .ffa-modal .ffa-shell { min-height: 100% !important; min-height: 100dvh !important; }
.ffa-modal__close {
    position: fixed !important; top: max(16px, env(safe-area-inset-top)) !important; right: max(16px, env(safe-area-inset-right)) !important;
    z-index: 100010 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 999px !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; cursor: pointer !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease !important;
}
.ffa-modal__close:hover { background: var(--yellow) !important; border-color: var(--yellow) !important; color: #000 !important; transform: rotate(90deg) !important; }

/* 11. RESPONSIVE & ACCESSIBILITY */
@media (max-width: 760px) {
    .ffa-root { --fs-body: 18px !important; }
    .ffa-root .ffa-logo, .ffa-root .mark { height: 24px !important; }
    .ffa-root .ffa-opts.ffa-two, .ffa-root .ffa-opts.two, .ffa-root .opts.two { grid-template-columns: 1fr !important; }
    .ffa-root .ffa-grid2, .ffa-root .grid2 { grid-template-columns: 1fr !important; }
    .ffa-root .ffa-opt, .ffa-root .opt { padding: 17px 18px !important; gap: 14px !important; }
    .ffa-root .ffa-opt .ffa-opt-label, .ffa-root .ffa-opt .label, .ffa-root .opt .label { font-size: 17px !important; }
    .ffa-root .ffa-opt .ffa-key, .ffa-root .ffa-opt .key, .ffa-root .opt .key { display: none !important; }
    .ffa-root .ffa-dial, .ffa-root .dial { width: 160px !important; height: 160px !important; }
    .ffa-root .ffa-dial .ffa-num b, .ffa-root .dial .num b { font-size: 44px !important; }
    .ffa-root .ffa-btn, .ffa-root .btn { width: 100% !important; justify-content: center !important; }
    .ffa-root .ffa-actions, .ffa-root .actions { gap: 14px !important; }
    .ffa-root .ffa-facts, .ffa-root .facts { gap: 26px !important; }
}
@media (hover: none) { .ffa-root .ffa-hint, .ffa-root .hint { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .ffa-root .ffa-screen, .ffa-root .screen { animation: none !important; }
    .ffa-root .ffa-rail-fill, .ffa-root .rail-fill { transition: none !important; }
}