/* ==== assets/css/fpfx-fonts.css ==== */
/* ============================================================
   SELF-HOSTED WEBFONTS
   Was two cross-origin hops — fonts.googleapis.com for the stylesheet
   and fonts.gstatic.com for the files — each costing a DNS lookup and a
   TLS handshake before one glyph could be asked for. Both are gone. The
   files sit on our own origin under the year-long immutable header, and
   index.php preloads the two the first screen needs so they arrive
   BEFORE the first paint rather than swapping in after it. That swap is
   what produced a 0.216 layout shift on slow PageSpeed runs and none at
   all on fast ones — the bimodal result that made the score look random.

   ONE FILE PER FAMILY, NOT ONE PER WEIGHT. Google serves a VARIABLE font
   and returned identical bytes for each weight requested: five copies of
   the same 32 KB Outfit file. Declared here with a weight RANGE, which is
   what a variable font is for.

   Latin subsets only. This site renders no cyrillic or greek, and the
   latin-ext faces were bytes nobody here would ever paint.
   ============================================================ */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/outfit.woff2') format('woff2-variations'),url('/assets/fonts/outfit.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/dm-sans.woff2') format('woff2-variations'),url('/assets/fonts/dm-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2-variations'),url('/assets/fonts/jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ==== assets/css/fpfx.css ==== */
:root {
    --bg: #0d0904;
    --panel: rgba(28,19,9,.72);
    --panel2: rgba(39,27,12,.86);
    --line: rgba(242,215,173,.18);
    --text: #fbf8f3;
    --muted: #bfb7ad;
    --gold: #EEB762;
    --gold-hi: #F3DBB2;
    --gold-dim: #8A6B3A;
    --radius: 28px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--au-body,"DM Sans",system-ui,sans-serif);
    overflow-x: hidden
}

/* ---------------------------------------------------------------------------
   THE PAGE GROUND IS NOT PAINTED HERE.

   A `body:before` used to stand here painting a hue-30 radial at z-index:-5
   whose every stop was IDENTICAL to the one `.au-host` already paints in
   fpfx-aurora.css. It was a duplicate: a second full-viewport composited
   layer drawing the same pixels.

   It also sat in the wrong place to be dithered. A pseudo-element paints
   ABOVE its originating element's own background, negative z-index or not,
   and the ground dither is a background-image on that background — so an
   opaque :before covered the layer that was supposed to smooth it. The
   comment that stood here claimed the dither "resolves" this layer's
   banding; it could not, from underneath.

   Measured A/B on an isolated ground (no content, 1280x900, three columns,
   longest run of one identical 8-bit value):

       without body:before   7px /  9px /  6px      <- shipping
       with    body:before  10px /  9px / 10px

   Honest about the size of it: the win is small, because .au-grain::after
   re-dithers everything from above anyway. The rule is gone because it was
   redundant and mis-layered, not because it was the cause of banding.
   Nothing replaces it — .au-host is the ground on every surface.
   --------------------------------------------------------------------------- */

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

.section {
    position: relative;
    padding: 110px max(5vw, 28px)
}

.center {
    text-align: center;
    max-width: 1050px;
    margin: 0 auto 55px
}

.kicker {
    display: block;
    color: #dfd5c7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 18px
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3,
h4 {
    /* h3/h4 were missing here, so every sub-heading on the marketing pages fell
       back to the body face. The approved Aurora reference puts the display
       face on h1-h4. */
    font-family: var(--au-disp,"Outfit",system-ui,sans-serif);
    /* Was -.055em, the tracking Manrope needed. Outfit is ~6.6% narrower
       per glyph, so it does not need the same correction, and the approved
       Aurora reference (_design/dashboard-preview.html) never tracks a
       heading tighter than -.035em. */
    letter-spacing: -.035em
}

h2 {
    font-size: clamp(44px, 5.4vw, 84px);
    /* Was .98 — a display ratio tuned for Manrope. This bare element rule
       leaks onto every class-styled h2 that sets only font-size (measured:
       .plinth-set-h, .plinth-risk-h, and the legal operator heading), and
       Outfit has a taller line box than Manrope, so .98 cramped them. No
       display-size h2 on any live route takes its line-height from here —
       .fx-head h2 (1.08) and .lg-sec h2 (1.25) shadow it — so raising it
       repairs the small headings at no cost to the display ones. */
    line-height: 1.18;
    margin-bottom: 22px
}

h2 em,
h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #ecc18b, var(--gold));
    -webkit-background-clip: text;
    color: transparent
}

.center>p,
.split-head>p {
    color: var(--muted);
    line-height: 1.75
}

.promo-bar {
    position: relative;
    height: 42px;
    background: linear-gradient(90deg, #bc701f, #d4a123);
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    z-index: 100
}

.promo-track {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: ticker 34s linear infinite
}

.promo-track i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff
}

.promo-timer {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    background: rgba(0, 0, 0, .25);
    height: 100%;
    white-space: nowrap
}

.promo-timer small {
    font-size: 9px
}

.header {
    height: 78px;
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    padding: 0 max(4vw, 24px);
    background: rgba(13,9,4,.62);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

.logo img {
    width: 180px
}

.header nav {
    display: flex;
    gap: 28px;
    margin: auto
}

.header nav a {
    color: #ddd7ce;
    font-size: 14px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 17px 25px;
    border-radius: 12px;
    background: linear-gradient(100deg, #e19b4a, var(--gold));
    font-weight: 800;
    box-shadow: 0 18px 50px rgba(208,145,34,.25);
    border: 0
}

.btn.small {
    padding: 13px 18px
}

.menu {
    display: none
}

.hero {
    min-height: calc(100vh - 120px);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 80px max(5vw, 28px);
    overflow: hidden
}

.hero-motion {
    position: absolute;
    inset: -6% -6% -6% 18%;
    background: radial-gradient(closest-side at 68% 46%, rgba(210,132,40,.30), transparent 72%);
    opacity: .9;
    mix-blend-mode: screen;
    filter: saturate(1.15) contrast(1.02);
    animation: heroGlow 7s ease-in-out infinite alternate
}
.hero-motion:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side at 62% 45%, rgba(229,173,96,.28), transparent 70%);
    mix-blend-mode: screen;
    animation: heroPulse 5.5s ease-in-out infinite alternate
}

.hero-motion:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13,9,4,.92) 0%, rgba(13,9,4,.48) 42%, rgba(13,9,4,.1) 72%), linear-gradient(0deg, #0d0904 0%, transparent 25%)
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, black 30%, transparent)
}

.hero-copy {
    position: relative;
    z-index: 5;
    max-width: 680px
}

.pill {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: rgba(255, 255, 255, .045);
    font-size: 12px
}

.pill b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold)
}

h1 {
    font-size: clamp(70px, 9vw, 138px);
    line-height: .82;
    margin: 30px 0
}

.hero-copy>p {
    max-width: 570px;
    color: #ccc6bd;
    font-size: 18px;
    line-height: 1.7
}

.hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 30px
}

.video-btn {
    border: 0;
    background: transparent;
    color: white
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 50px
}

.hero-stats div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(24,17,8,.58);
    backdrop-filter: blur(12px)
}

.hero-stats strong {
    display: block;
    font-size: 22px
}

.hero-stats span {
    font-size: 11px;
    color: var(--muted)
}

.hero-scene {
    position: relative;
    height: 720px
}

.portal {
    position: absolute;
    left: 13%;
    top: 8%;
    width: 75%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226,173,80,.34), rgba(89,59,21,.12) 45%, transparent 68%);
    filter: drop-shadow(0 0 50px rgba(225,166,72,.42))
}

.portal span {
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(229,181,95,.36);
    border-radius: 50%;
    animation: spin 16s linear infinite
}

.portal span:nth-child(2) {
    inset: 20%;
    animation-direction: reverse
}

.character-rig {
    position: absolute;
    left: 21%;
    bottom: -9%;
    width: 58%;
    z-index: 3
}

.character-rig img {
    width: 100%;
    display: block
}

.character-glow {
    position: absolute;
    filter: blur(10px);
    opacity: .65
}

.character-light {
    position: absolute;
    left: 33%;
    top: 7%;
    width: 34%;
    height: 20%;
    background: radial-gradient(circle, #fff8, transparent 68%);
    mix-blend-mode: screen
}

.hero-coins {
    position: absolute;
    width: 32%;
    right: 2%;
    top: 7%;
    z-index: 4;
    filter: drop-shadow(0 0 25px #de9e32)
}

.payout-card {
    position: absolute;
    z-index: 5;
    width: 190px;
    padding: 16px;
    border: 1px solid rgba(232,195,114,.42);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(55,37,13,.9), rgba(22,15,7,.82));
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35)
}

.payout-card strong {
    font-size: 22px
}

.payout-card span,
.payout-card small,
.payout-card i {
    display: block;
    margin-top: 7px;
    font-size: 9px
}

.payout-card small {
    color: #eacb81
}

.payout-card i {
    text-align: right;
    color: #d8d0c5
}

.p1 {
    left: 0;
    top: 22%
}

.p2 {
    right: 0;
    top: 30%
}

.p3 {
    left: 8%;
    bottom: 16%
}

.p4 {
    right: 5%;
    bottom: 10%
}

.logo-ticker,
.certificate-section {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(16,11,5,.62);
    overflow: hidden
}

.logo-ticker p {
    text-align: center;
    font-size: 10px;
    letter-spacing: .2em;
    color: #afa699;
    padding: 20px 0 4px
}

.ticker-viewport {
    overflow: hidden
}

.ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 50px;
    padding: 24px 0;
    animation: ticker 32s linear infinite
}

.ticker-track span {
    font-weight: 800;
    color: #e1d9cf;
    letter-spacing: .05em
}

.ticker-track i {
    width: 7px;
    height: 7px;
    background: var(--gold-hi);
    transform: rotate(45deg)
}

@keyframes ticker {
    to {
        transform: translateX(-25%)
    }
}

.certificate-section {
    padding: 70px 0
}

.certificate-head,
.split-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 35px;
    padding: 0 max(4vw, 24px)
}

.certificate-head h2 {
    font-size: 48px
}

.live-pulse {
    font-size: 12px
}

.live-pulse i {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 16px #22C55E
}

.certificate-marquee {
    overflow: hidden
}

.certificate-track {
    display: flex;
    width: max-content;
    gap: 18px;
    animation: ticker 50s linear infinite
}

.cert-card {
    width: 430px;
    display: grid;
    grid-template-columns: 1fr 125px;
    gap: 15px;
    align-items: center;
    padding: 18px 18px 18px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(66,46,15,.8), rgba(25,17,8,.8));
    position: relative;
    overflow: hidden
}

.cert-card:before {
    content: "";
    position: absolute;
    inset: -80% auto -80% -20%;
    width: 80px;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, #fff2, transparent);
    animation: shine 4s linear infinite
}

.cert-card img {
    width: 125px
}

.cert-card small,
.cert-card span {
    display: block;
    color: #cec5b9
}

.cert-card strong {
    display: block;
    font-size: 24px;
    margin: 8px 0
}

.cert-card button {
    grid-column: 1/3;
    background: transparent;
    border: 0;
    color: #ebce86;
    text-align: left;
    font-size: 10px;
    font-weight: 800
}

.bento {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    gap: 16px
}

.glass {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(40,28,14,.82), rgba(14,10,5,.72));
    padding: 30px;
    min-height: 310px;
    position: relative;
    overflow: hidden;
    transition: .35s
}

.glass:hover {
    border-color: #e5b05e;
    box-shadow: 0 28px 80px rgba(151,99,25,.25)
}

.glass>span,
.card-copy>span {
    color: #e8c572;
    font-size: 11px
}

.glass h3 {
    font-size: 26px;
    margin: 28px 0 12px
}

.glass p {
    color: var(--muted);
    line-height: 1.65
}

.bento-main {
    grid-row: span 2;
    min-height: 640px;
    display: flex;
    flex-direction: column
}

.visual-terminal {
    margin-top: 24px;
    flex: 1;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #0b0805;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    box-shadow: inset 0 0 80px rgba(135,88,23,.18)
}

.terminal-top {
    position: absolute;
    left: 52px;
    right: 52px;
    bottom: 350px;
    display: flex;
    gap: 6px
}

.terminal-top i {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%
}

.terminal-top b {
    margin-left: auto;
    font-size: 9px;
    color: #867e70
}

.visual-terminal svg {
    width: 100%;
    filter: drop-shadow(0 0 12px #deac35)
}

.terminal-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

.risk-orbit {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 35px auto 0;
    display: grid;
    place-content: center;
    text-align: center;
    background: conic-gradient(var(--gold) 0 36%, #e1994a 36% 58%, #2e251b 58%);
    position: relative
}

.risk-orbit:after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #100c07
}

.risk-orbit b,
.risk-orbit small {
    z-index: 2
}

.risk-orbit b {
    font-size: 34px
}

.speed-core {
    margin: 46px 0 0
}

.speed-core b {
    font-size: 88px;
    background: linear-gradient(#fff, #e9b97b);
    -webkit-background-clip: text;
    color: transparent
}

.speed-core em {
    font-size: 11px
}

.wide {
    grid-column: 2/4;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.asset-orbit {
    position: relative;
    width: 300px;
    height: 260px;
    display: grid;
    place-items: center
}

/* orbit rings that the asset icons ride on */
.asset-orbit:before,
.asset-orbit:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(238,203,148,.28);
    transform: translate(-50%, -50%)
}

.asset-orbit:before {
    width: 250px;
    height: 250px;
    animation: spin 26s linear infinite
}

.asset-orbit:after {
    width: 150px;
    height: 150px;
    border-style: solid;
    border-color: rgba(238,203,148,.16);
    animation: spin 16s linear infinite reverse
}

.asset-orbit>img {
    position: absolute;
    width: 46px;
    height: 46px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(20,14,7,.9);
    border: 1px solid rgba(238,203,148,.35);
    box-shadow: 0 0 18px rgba(226,180,79,.4);
    left: 50%;
    top: 50%;
    transform-origin: center
}

/* each asset sits on a ring and revolves; counter-spin keeps the logo upright */
.asset-orbit>img:nth-child(1) {
    animation: orbit-a 26s linear infinite
}

.asset-orbit>img:nth-child(2) {
    animation: orbit-b 26s linear infinite
}

.asset-orbit>img:nth-child(3) {
    animation: orbit-c 16s linear infinite
}

.orbit-core {
    position: relative;
    z-index: 2;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 25%, #e8b66f, #5d3f16 48%, #150f07 75%);
    box-shadow: 0 0 55px #d28b29, inset 0 0 22px rgba(246,230,199,.2)
}

.orbit-core:after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(232,187,113,.5);
    animation: pulse 3s ease-in-out infinite
}

.orbit-core img {
    width: 50px
}

@keyframes orbit-a {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(125px) rotate(0deg) }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(125px) rotate(-360deg) }
}

@keyframes orbit-b {
    from { transform: translate(-50%, -50%) rotate(140deg) translateX(125px) rotate(-140deg) }
    to   { transform: translate(-50%, -50%) rotate(500deg) translateX(125px) rotate(-500deg) }
}

@keyframes orbit-c {
    from { transform: translate(-50%, -50%) rotate(250deg) translateX(75px) rotate(-250deg) }
    to   { transform: translate(-50%, -50%) rotate(610deg) translateX(75px) rotate(-610deg) }
}

.feature-rail {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feature-rail article {
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(24,17,8,.68)
}

.feature-rail strong {
    font-size: 30px;
    color: #e8c272
}

.feature-rail h3 {
    margin-bottom: 7px
}

.feature-rail p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.plan-builder {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    border: 1px solid var(--line);
    border-radius: 32px;
    overflow: hidden;
    background: rgba(20,14,7,.8);
    box-shadow: 0 40px 110px rgba(0, 0, 0, .45)
}

.plan-controls,
.plan-summary {
    padding: 38px
}

.control-label {
    font-size: 10px;
    letter-spacing: .18em;
    color: #b4aa9e;
    margin: 5px 0 14px
}

.type-tabs,
.size-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.type-tabs button,
.size-tabs button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    color: #e3ddd4;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer
}

.type-tabs button.active,
.size-tabs button.active {
    background: linear-gradient(135deg, #e19545, #ddaa2f);
    color: #fff;
    border-color: transparent
}

.buyer-scene {
    margin: 24px 0;
    min-height: 220px;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 24px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: radial-gradient(circle at 20% 40%, rgba(218,140,36,.25), transparent 50%), rgba(255, 255, 255, .02)
}

.mini-character {
    height: 180px;
    position: relative;
    overflow: hidden
}

.mini-character img {
    height: 250px;
    position: absolute;
    left: 22px;
    top: 4px
}

.mini-character .scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #e1b346;
    box-shadow: 0 0 14px #e1b346;
    animation: scan 3s linear infinite
}

.buyer-scene small {
    color: #e9c878
}

.buyer-scene p,
.buyer-scene li {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.custom-trust {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025)
}

.custom-trust .check {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #1FA652;
    font-weight: 900
}

.custom-trust small {
    display: block;
    color: var(--muted);
    margin-top: 4px
}

.stars {
    margin-left: auto;
    color: #ffc52d;
    letter-spacing: 2px
}

.plan-summary {
    position: relative;
    background: radial-gradient(circle at 95% 0, rgba(221,169,46,.18), transparent 42%)
}

.summary-top {
    display: flex;
    justify-content: space-between
}

.selected-type {
    font-weight: 800
}

.discount-badge {
    background: var(--gold);
    padding: 7px 10px;
    border-radius: 99px;
    font-size: 11px
}

.selected-size {
    font: 800 68px/1 var(--au-disp,"Outfit",system-ui,sans-serif);
    margin: 26px 0 4px
}

.price-row {
    display: flex;
    align-items: end;
    gap: 13px;
    margin: 24px 0
}

.final-price {
    font-size: 50px
}

.original-price {
    font-size: 20px;
    color:var(--muted-2,#AEA8A1)
}

.save-panel {
    margin-left: auto;
    padding: 12px 16px;
    border: 1px solid #d89438;
    border-radius: 14px;
    background: rgba(198,131,37,.16)
}

.save-panel small {
    display: block;
    color: #cfc5b7
}

.save-panel b {
    font-size: 24px;
    color: #e9c97b
}

.phase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 22px 0
}

.phase-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    background: rgba(255, 255, 255, .03)
}

.phase-card h4 {
    margin: 0 0 10px
}

.phase-card div {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    margin: 6px 0
}

.plan-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0
}

.plan-facts span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 10px
}

.checkout-link {
    width: 100%
}

.secure-note {
    text-align: center;
    color: #979083;
    font-size: 10px;
    margin-top: 14px
}

.split-head strong {
    font-size: 64px
}

.split-head strong small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500
}

.rule-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.rule-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(23,16,8,.65)
}

.rule-grid span {
    color: #e8c675
}

.rule-grid p {
    color: var(--muted)
}

.dashboard {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center
}

.dashboard-copy ul {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

.dashboard-copy li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: #d4cdc3
}

.dashboard-stage {
    position: relative;
    min-height: 620px;
    perspective: 1300px
}

.dash-frame {
    position: absolute;
    inset: 30px 0 40px 20px;
    border: 1px solid #c58a3e;
    border-radius: 26px;
    overflow: hidden;
    background: #0d0a07;
    display: grid;
    grid-template-columns: 75px 1fr;
    transform: rotateY(-6deg) rotateX(2deg);
    box-shadow: 0 60px 120px rgba(0, 0, 0, .48), 0 0 60px rgba(206,132,33,.18)
}

.dash-nav {
    background: #120e09;
    border-right: 1px solid var(--line);
    padding: 22px 18px
}

.dash-nav img {
    width: 38px
}

.dash-nav i {
    display: block;
    height: 38px;
    border-radius: 10px;
    background: #291f13;
    margin: 18px 0
}

.dash-content {
    padding: 30px
}

.dash-top {
    display: flex;
    justify-content: space-between
}

.dash-top span {
    color: #4ADE80
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 25px 0
}

.dash-kpis article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025)
}

.dash-kpis small {
    color: var(--muted)
}

.dash-kpis b {
    display: block;
    font-size: 24px;
    margin-top: 8px
}

.dash-chart {
    height: 240px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(rgba(182,118,30,.1), transparent)
}

.dash-chart svg {
    width: 100%;
    height: 100%
}

.dash-chart path {
    fill: none;
    stroke: #deaa33;
    stroke-width: 6;
    filter: drop-shadow(0 0 12px #dda931)
}

.rewards {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 50px;
    align-items: center
}

.mini-stats {
    display: flex;
    gap: 12px
}

.mini-stats span {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    font-size: 10px
}

.mini-stats b {
    display: block;
    font-size: 19px
}

.reward-vault {
    height: 600px;
    position: relative;
    perspective: 1200px
}

.reward-ring {
    position: absolute;
    inset: 8%;
    border: 1px solid #e09e3f;
    border-radius: 50%;
    transform: rotateX(70deg);
    box-shadow: 0 0 70px rgba(225,162,72,.25)
}

.reward-slab {
    position: absolute;
    left: 10%;
    right: 4%;
    height: 135px;
    border: 1px solid #e6ba65;
    border-radius: 24px;
    background: linear-gradient(100deg, rgba(115,74,20,.95), rgba(218,146,36,.8));
    box-shadow: 0 20px 70px rgba(203,135,33,.28);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px
}

.reward-slab i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2ab4d;
    font-size: 30px
}

.reward-slab small {
    padding: 7px 10px;
    border: 1px solid #fff5;
    border-radius: 99px
}

.reward-slab b {
    margin-left: auto;
    font-size: 30px
}

.s1 {
    top: 80px;
    transform: rotate(6deg)
}

.s2 {
    top: 235px
}

.s3 {
    top: 390px;
    transform: rotate(-6deg)
}

.reward-vault>img {
    position: absolute;
    width: 210px;
    right: 0;
    top: 210px
}

.process {
    padding-left: 0;
    padding-right: 0
}

.process-head {
    padding: 0 max(5vw, 28px)
}

.process-pin {
    overflow: hidden;
    padding: 30px 0
}

.process-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 7vw
}

.process-card {
    width: 420px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(43,30,13,.9), rgba(15,10,5,.85));
    overflow: hidden;
    padding-bottom: 30px
}

.process-scene {
    height: 330px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 70%, rgba(221,148,45,.5), transparent 45%), linear-gradient(#1c1308, #060504)
}

.process-scene>img {
    position: absolute;
    height: 370px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%)
}

.process-scene:after {
    content: "";
    position: absolute;
    inset: auto 8% 10% 8%;
    height: 40px;
    border-radius: 50%;
    background: #de9633;
    filter: blur(28px)
}

.holo {
    position: absolute;
    border: 1px solid #e5b15e;
    background: rgba(180,117,34,.14);
    box-shadow: 0 0 25px rgba(223,162,61,.25)
}

.h1 {
    width: 130px;
    height: 80px;
    left: 25px;
    top: 35px;
    transform: rotateY(25deg)
}

.h2 {
    width: 105px;
    height: 145px;
    right: 24px;
    top: 70px
}

.activity {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 9px 16px;
    border-radius: 99px;
    background: #deac33;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em
}

.process-card>span {
    display: block;
    color: #e8c675;
    padding: 24px 28px 0
}

.process-card h3,
.process-card p {
    padding: 0 28px
}

.process-card h3 {
    font-size: 28px;
    margin: 14px 0 9px
}

.process-card p {
    color: var(--muted);
    line-height: 1.65
}

.markets {
    min-height: 760px;
    text-align: center;
    overflow: hidden;
    background: transparent
}

.market-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    overflow: hidden;
    opacity: .72;
    mix-blend-mode: screen
}

/* The `.market-*` section was removed from the marketing page; its CSS, its
   JavaScript and its images all remain unreferenced. This rule is deleted
   rather than left dead because it was the platform's ONLY breach of the
   no-cool-hues rule: `waves.png` still carries the inherited build's blue
   (hues 210-230), and the 38-degree hue rotation here pushed that to 248-268 --
   violet -- while turning the gold parts yellow-green. Nothing rendered it,
   but reusing the class would have. See OUTSTANDING.md section F. */

.market-copy {
    position: relative;
    z-index: 4
}

.market-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.market-links path {
    fill: none;
    stroke: url(#x);
    stroke-width: 2;
    stroke-dasharray: 9 12;
    filter: drop-shadow(0 0 8px #e1b449);
    animation: dash 4s linear infinite
}

.market-universe {
    position: absolute;
    inset: 220px 5% 0;
    z-index: 3
}

.x-core {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 170px;
    height: 170px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid #e5b15d;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #e2a04a, #251a0b 70%);
    box-shadow: 0 0 65px #dc912b
}

.x-core:before,
.x-core:after {
    content: "";
    position: absolute;
    border: 1px solid #e19e44;
    border-radius: 50%;
    inset: -35px;
    animation: spin 12s linear infinite
}

.x-core:after {
    inset: -75px;
    animation-direction: reverse
}

.x-core img {
    width: 75px
}

.market-icon {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    background: rgba(15,11,6,.88);
    box-shadow: 0 0 35px rgba(183,118,30,.22)
}

.market-icon img {
    width: 54%
}

.mi1 {
    left: 13%;
    top: 55%
}

.mi2 {
    left: 25%;
    top: 28%
}

.mi3 {
    left: 40%;
    top: 12%
}

.mi4 {
    right: 23%;
    top: 25%
}

.mi5 {
    right: 10%;
    top: 55%
}

.mi6 {
    left: 7%;
    top: 15%
}

.mi7 {
    right: 4%;
    top: 9%
}

.mi8 {
    left: 31%;
    top: 66%
}

.mi9 {
    right: 34%;
    top: 69%
}

.compare-arena {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center
}

.legacy-stack {
    position: relative;
    height: 510px
}

.legacy-stack article {
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;
    padding: 25px;
    border: 1px solid #948C82;
    border-radius: 20px;
    background: rgba(18,14,10,.88);
    box-shadow: 0 25px 60px #0007
}

.legacy-stack article:nth-child(2) {
    top: 95px;
    transform: scale(.96)
}

.legacy-stack article:nth-child(3) {
    top: 190px;
    transform: scale(.92)
}

.legacy-stack article:nth-child(4) {
    top: 285px;
    transform: scale(.88)
}

.legacy-stack span,
.legacy-stack small {
    display: block;
    color: #868179;
    font-size: 10px
}

.legacy-stack b {
    display: block;
    font-size: 22px;
    margin: 15px 0
}

.versus {
    text-align: center;
    font-weight: 900
}

.fpfx-standard {
    min-height: 500px;
    padding: 40px;
    border: 1px solid #e0ab40;
    border-radius: 30px;
    background: radial-gradient(circle at 80% 20%, rgba(220,160,43,.28), transparent 42%), linear-gradient(145deg, rgba(91,62,22,.9), rgba(27,18,8,.9));
    position: relative
}

.fpfx-standard>img {
    width: 65px
}

.fpfx-standard h3 {
    font-size: 32px
}

.fpfx-standard ul {
    list-style: none;
    padding: 0
}

.fpfx-standard li {
    padding: 17px 0;
    border-bottom: 1px solid #fff2
}

.standard-score {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 120px;
    height: 120px;
    border: 1px solid #e7b66b;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center
}

.standard-score b {
    font-size: 38px
}

.standard-score span {
    font-size: 8px
}

.video-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.video-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(25,18,9,.82);
    padding-bottom: 20px
}

.video-shell {
    height: 400px;
    position: relative;
    background: #100c07
}

.video-shell video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 8px
}

.video-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid #fff4;
    border-radius: 50%;
    background: #08060cb8;
    color: white;
    backdrop-filter: blur(8px)
}

.video-card h3,
.video-card>b,
.video-card>small {
    display: block;
    margin: 12px 18px 0
}

.video-card>b {
    font-size: 25px
}

.video-card>small {
    color: var(--muted)
}

.condition-system {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.condition-system article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: linear-gradient(160deg, rgba(43,31,15,.85), rgba(13,9,5,.8));
    overflow: hidden
}

.condition-visual {
    height: 220px;
    position: relative;
    display: grid;
    place-items: center
}

.icon-core {
    width: 115px;
    height: 115px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(145deg, #e19747, #ddaa31);
    box-shadow: 0 0 50px rgba(221,154,43,.34)
}

.condition-visual i {
    position: absolute;
    border: 1px solid #e09e42;
    border-radius: 50%;
    inset: 20px;
    animation: spin 12s linear infinite
}

.condition-visual i:nth-child(2) {
    inset: 48px;
    animation-direction: reverse
}

.condition-visual i:nth-child(3) {
    width: 10px;
    height: 10px;
    background: #fff;
    left: 25px;
    top: 90px;
    box-shadow: 0 0 15px #fff
}

.condition-system article>span {
    color: #e8c572
}

.condition-system h3 {
    font-size: 24px
}

.condition-system p {
    color: var(--muted);
    line-height: 1.6
}

.condition-system article>b {
    font-size: 10px;
    color: #e8c572
}

.expo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.expo-grid article {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(22,16,8,.72)
}

.expo-visual {
    height: 360px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, #9c6a22, transparent 60%)
}

.expo-visual img {
    height: 420px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.expo-visual span {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 10px;
    letter-spacing: .15em
}

.expo-grid h3,
.expo-grid p {
    margin-left: 20px
}

.expo-grid p {
    color: var(--muted)
}

.testimonial-wall {
    columns: 3;
    column-gap: 16px
}

.testimonial-wall article {
    break-inside: avoid;
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(24,17,9,.72)
}

.testimonial-wall article:nth-child(2n) {
    padding-block: 38px
}

.testimonial-wall div {
    display: flex;
    align-items: center;
    gap: 12px
}

.testimonial-wall div span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e19848, #deab32)
}

.testimonial-wall p {
    font-size: 18px;
    line-height: 1.55;
    margin: 20px 0
}

.testimonial-wall small {
    color: #a49c8f
}

.community-card {
    max-width: 1400px;
    margin: auto;
    min-height: 600px;
    border: 1px solid var(--line);
    border-radius: 34px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    padding: 55px;
    background: radial-gradient(circle at 72% 45%, rgba(205,135,35,.22), transparent 37%), rgba(21,15,8,.72)
}

.network-visual {
    height: 500px;
    position: relative
}

.network-globe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 32% 25%, #e6b365, #875716 43%, #181007 72%);
    box-shadow: inset -45px -40px 65px #040302, 0 0 90px rgba(222,155,55,.42)
}

.network-globe:after {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 1px solid #f1daa8;
    animation: pulse 3s ease-in-out infinite
}

.network-globe img {
    width: 85px;
    filter: drop-shadow(0 0 18px #fff)
}

.network-visual svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #d8922a;
    opacity: .6
}

.city {
    position: absolute;
    width: 80px;
    height: 44px;
    border: 1px solid #e4b059;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1b1207;
    font-style: normal;
    font-size: 10px;
    box-shadow: 0 0 25px rgba(225,168,70,.18)
}

.city em {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px #fff
}

.c1 {
    left: 17%;
    top: 22%
}

.c2 {
    right: 20%;
    top: 18%
}

.c3 {
    right: 8%;
    top: 50%
}

.c4 {
    right: 28%;
    bottom: 10%
}

.c5 {
    left: 20%;
    bottom: 14%
}

.c6 {
    left: 5%;
    top: 52%
}

.faq {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 70px
}

.faq-list {
    border-top: 1px solid var(--line)
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-item button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    background: transparent;
    border: 0;
    color: white;
    text-align: left;
    font-weight: 700
}

.faq-item p {
    display: none;
    color: var(--muted);
    line-height: 1.7;
    padding: 0 0 20px
}

.faq-item.open p {
    display: block
}

.faq-item.open i {
    transform: rotate(45deg)
}

.final-cta {
    min-height: 720px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 60px
}

.cta-character {
    position: absolute;
    height: 650px;
    left: -30px;
    bottom: -90px
}

.cta-coins {
    position: absolute;
    width: 240px;
    right: 6%;
    top: 30px
}

.cta-rings {
    position: absolute;
    inset: 0
}

.cta-rings i {
    position: absolute;
    border: 1px solid rgba(228,173,86,.25);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 780px;
    height: 360px;
    animation: spin 18s linear infinite
}

.cta-rings i:nth-child(2) {
    width: 980px;
    height: 500px;
    animation-direction: reverse
}

.cta-rings i:nth-child(3) {
    width: 1200px;
    height: 650px
}

.final-cta>div:last-child {
    position: relative;
    z-index: 3
}

.final-cta h2 {
    font-size: clamp(58px, 7vw, 110px)
}

footer {
    position: relative;
    padding: 80px max(5vw, 28px) 30px;
    border-top: 1px solid var(--line);
    background: #0A0806
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.socials a {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 11px
}


.promo-modal,
.exit-modal {
    position: fixed;
    z-index: 1000;
    background: linear-gradient(145deg, #2f2110, #0e0a05);
    border: 1px solid #e1a94a;
    border-radius: 26px;
    box-shadow: 0 35px 120px #000;
    display: none
}

.promo-modal {
    width: min(760px, 92vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: 280px 1fr;
    overflow: hidden;
    padding: 0
}

.promo-modal.show {
    display: grid
}

.modal-character {
    height: 430px;
    background: radial-gradient(circle, #b57a25, transparent 65%);
    overflow: hidden
}

.modal-character img {
    height: 500px;
    transform: translateX(-20px)
}

.promo-modal>div:last-of-type {
    padding: 45px 35px
}

.promo-modal span,
.exit-modal span {
    color: #e9c97b;
    font-size: 11px;
    letter-spacing: .15em
}

.promo-modal h2 {
    font-size: 42px;
    margin: 14px 0
}

.promo-modal p,
.exit-modal p {
    color: var(--muted);
    line-height: 1.6
}

.coupon-box {
    display: flex;
    justify-content: space-between;
    border: 1px dashed #e6b862;
    border-radius: 12px;
    padding: 14px;
    margin: 22px 0
}

.coupon-box button {
    background: transparent;
    border: 0;
    color: white
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #130e07;
    color: white;
    z-index: 3
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: #000b;
    z-index: 999
}

.modal-backdrop.show {
    display: block
}

.exit-modal {
    right: 25px;
    bottom: 25px;
    width: min(420px, calc(100vw - 30px));
    padding: 30px
}

.exit-modal.show {
    display: block
}

.exit-modal>img {
    width: 150px;
    float: right
}

.exit-modal h2 {
    font-size: 40px;
    margin: 10px 0
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes float {
    50% {
        transform: translateY(-14px)
    }
}

@keyframes shine {
    to {
        left: 120%
    }
}

@keyframes scan {
    from {
        top: 0
    }

    to {
        top: 100%
    }
}

@keyframes pulse {
    50% {
        transform: scale(1.2);
        opacity: .3
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: -42
    }
}

@keyframes heroGlow {
    to {
        filter: saturate(1.5) brightness(1.15)
    }
}

@media(max-width:1050px) {
    .header nav {
        display: none
    }

    .hero,
    .dashboard,
    .rewards,
    .faq,
    .community-card {
        grid-template-columns: 1fr
    }

    .hero-scene {
        height: 620px
    }

    .bento {
        grid-template-columns: 1fr 1fr
    }

    .bento-main {
        grid-row: auto
    }

    .wide {
        grid-column: 1/3
    }

    .plan-builder {
        grid-template-columns: 1fr
    }

    .feature-rail,
    .condition-system,
    .video-proof-grid {
        grid-template-columns: 1fr 1fr
    }

    .community-card {
        gap: 30px
    }

    .dashboard-stage {
        min-height: 580px
    }
}

@media(max-width:700px) {
    .section {
        padding: 80px 20px
    }

    .promo-timer {
        display: none
    }

    .header {
        height: 68px
    }

    .logo img {
        width: 145px
    }

    .header-actions .login {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 70px
    }

    .hero h1 {
        font-size: 72px
    }

    .hero-scene {
        height: 500px;
        margin-top: 30px
    }

    .character-rig {
        width: 72%;
        left: 14%
    }

    .payout-card {
        width: 145px;
        padding: 11px
    }

    .payout-card strong {
        font-size: 16px
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr
    }

    .certificate-head,
    .split-head {
        align-items: flex-start;
        flex-direction: column
    }

    .cert-card {
        width: 330px;
        grid-template-columns: 1fr 95px
    }

    .cert-card img {
        width: 95px
    }

    .bento,
    .feature-rail,
    .rule-grid,
    .condition-system,
    .expo-grid,
    .video-proof-grid {
        grid-template-columns: 1fr
    }

    .wide {
        grid-column: auto;
        display: block
    }

    .asset-orbit {
        width: 100%
    }

    .plan-controls,
    .plan-summary {
        padding: 24px
    }

    .buyer-scene {
        grid-template-columns: 110px 1fr
    }

    .mini-character img {
        left: 0
    }

    .selected-size {
        font-size: 52px
    }

    .phase-grid {
        grid-template-columns: 1fr
    }

    .dashboard {
        gap: 20px
    }

    .dashboard-stage {
        min-height: 500px
    }

    .dash-frame {
        inset: 20px 0;
        grid-template-columns: 50px 1fr
    }

    .dash-content {
        padding: 16px
    }

    .dash-kpis {
        grid-template-columns: 1fr
    }

    .dash-kpis article:nth-child(n+2) {
        display: none
    }

    .rewards {
        gap: 20px
    }

    .reward-vault {
        height: 500px
    }

    .reward-slab {
        left: 0;
        right: 0;
        height: 110px;
        padding: 15px
    }

    .reward-slab b {
        font-size: 18px
    }

    .process-card {
        width: 330px
    }

    .market-icon {
        width: 58px;
        height: 58px
    }

    .x-core {
        width: 115px;
        height: 115px
    }

    .compare-arena {
        grid-template-columns: 1fr
    }

    .legacy-stack {
        height: 430px
    }

    .versus {
        padding: 20px
    }

    .testimonial-wall {
        columns: 1
    }

    .community-card {
        padding: 28px
    }

    .network-visual {
        height: 420px
    }

    .network-globe {
        width: 220px;
        height: 220px
    }

    .final-cta {
        min-height: 620px
    }

    .cta-character {
        height: 470px;
        left: -100px;
        opacity: .5
    }

    .cta-coins {
        width: 150px
    }

    .promo-modal.show {
        display: block
    }

    .modal-character {
        display: none
    }

    .promo-modal>div:last-of-type {
        padding: 40px 25px
    }
}

/* ============================================================
   FPFX NEXTGEN v6 — ENHANCEMENTS
   Galaxy background · animated dashboards · lightning markets
   marquee testimonials · figma-matched reward cards · network
   ============================================================ */

/* ---- crisp animated neon ribbons layered over the hero ---- */
@keyframes heroPulse{from{opacity:.35;transform:scale(1)}to{opacity:.85;transform:scale(1.08)}}

/* ============ generic premium card hover shimmer ============ */
.glass::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-18deg);transition:.7s;pointer-events:none;z-index:4}
.glass:hover::before{left:130%}

/* ============ 01 · animated live analytics terminal ============ */
.visual-terminal{position:relative}
.chart-live{position:relative;width:100%;height:100%}
.chart-live svg{width:100%;height:100%;overflow:visible}
.chart-grid line{stroke:rgba(242,215,173,.10);stroke-width:1}
.chart-area{fill:url(#fpfxArea);opacity:0;animation:areaFade 1.2s ease .8s forwards}
@keyframes areaFade{to{opacity:.55}}
.chart-line{fill:none;stroke:url(#fpfxLine);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px #deac35);stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawLine 2.6s ease forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.chart-dot{fill:#fff;filter:drop-shadow(0 0 8px #e8c472);opacity:0;animation:dotIn .4s ease 2.4s forwards}
.chart-dot-ring{fill:none;stroke:#e8c472;stroke-width:2;transform-origin:center;transform-box:fill-box;
  opacity:0;animation:dotIn .4s ease 2.4s forwards, ping 1.8s ease-out 2.6s infinite}
@keyframes dotIn{to{opacity:1}}
@keyframes ping{0%{r:4;opacity:.9}100%{r:16;opacity:0}}
.chart-bars rect{fill:url(#fpfxBar);opacity:.5;transform-origin:bottom;transform-box:fill-box;
  animation:barPump 2.4s ease-in-out infinite}
.chart-bars rect:nth-child(2n){animation-delay:.3s}
.chart-bars rect:nth-child(3n){animation-delay:.6s}
.chart-bars rect:nth-child(4n){animation-delay:.9s}
@keyframes barPump{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.chart-scan{stroke:rgba(255,255,255,.35);stroke-width:1;animation:scanX 3.2s linear infinite}
@keyframes scanX{from{transform:translateX(0)}to{transform:translateX(520px)}}
.terminal-metrics b{position:relative;padding-left:14px}
.terminal-metrics b::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 10px #22C55E;transform:translateY(-50%);animation:pulse 1.6s ease-in-out infinite}
.count[data-count]{font-variant-numeric:tabular-nums}

/* ---- 02 risk orbit + 03 speed core micro-motion ---- */
.risk-orbit{animation:spin 28s linear infinite}
.risk-orbit b,.risk-orbit small{animation:spin 28s linear infinite reverse}
.speed-core b{position:relative}
.glass:hover .risk-orbit{filter:drop-shadow(0 0 22px rgba(225,177,70,.5))}

/* ================ RULE TRANSPARENCY hover FX ================ */
.rule-grid article{position:relative;overflow:hidden;cursor:default;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s,background .4s}
.rule-grid article::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(120deg,#e19b4a,#dda92d,#8A6B3A);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.rule-grid article::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;top:-40%;right:-20%;
  background:radial-gradient(circle,rgba(225,177,70,.22),transparent 70%);opacity:0;transition:opacity .45s}
.rule-grid article:hover{transform:translateY(-8px);background:rgba(38,26,12,.8);
  box-shadow:0 26px 60px rgba(194,128,32,.28)}
.rule-grid article:hover::before{opacity:1}
.rule-grid article:hover::after{opacity:1}
.rule-grid span{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.14em;
  transition:transform .4s;position:relative;z-index:2}
.rule-grid article:hover span{transform:translateX(4px)}
.rule-grid h3{transition:color .35s;position:relative;z-index:2}
.rule-grid article:hover h3{color:#fff}
.rule-grid p{position:relative;z-index:2}
.rule-grid article .rule-arrow{position:absolute;right:24px;bottom:22px;font-size:18px;color:#e8c675;
  opacity:0;transform:translateX(-8px);transition:.4s;z-index:2}
.rule-grid article:hover .rule-arrow{opacity:1;transform:translateX(0)}

/* ============ THE FPFX COMMAND CENTER — working dash ============ */
.dash-top span{position:relative;padding-left:16px}
.dash-top span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 12px #4ADE80;transform:translateY(-50%);animation:pulse 1.4s ease-in-out infinite}
.dash-chart{position:relative;overflow:hidden}
.dash-chart svg{overflow:visible}
.dash-area{fill:url(#dashArea);opacity:0;animation:areaFade 1.4s ease 1s forwards}
.dash-chart path.dash-line{stroke:url(#dashLine);stroke-width:5;stroke-dasharray:1500;stroke-dashoffset:1500;
  animation:drawLine 3s ease .3s forwards}
.dash-live-dot{fill:#fff;opacity:0;animation:dotIn .4s ease 3.1s forwards}
.dash-live-ring{fill:none;stroke:#e8c472;stroke-width:2;opacity:0;
  animation:dotIn .4s ease 3.1s forwards,ping 1.8s ease-out 3.3s infinite}
.dash-grid line{stroke:rgba(242,215,173,.08)}
.dash-kpis b{font-variant-numeric:tabular-nums}

/* ================ REWARDS — matched to figma cards ================ */
.reward-vault{height:auto;min-height:560px;display:flex;flex-direction:column;justify-content:center;gap:24px;
  perspective:1400px;padding:20px 0}
.reward-ring{display:none}
.reward-vault>img{display:none}
.reward-slab{position:relative;left:auto;right:auto;top:auto;height:auto;width:100%;
  transform:none;padding:26px 30px;gap:22px;border-radius:24px;
  border:1px solid rgba(236,205,139,.45);
  background:linear-gradient(120deg,rgba(190,123,40,.34),rgba(92,60,21,.5));
  backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(172,111,28,.32),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;overflow:hidden}
.reward-slab::before{content:"";position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(160px 120px at 12% 30%,rgba(236,205,139,.28),transparent 70%);pointer-events:none}
.reward-slab:nth-child(1){transform:rotate(1.6deg) translateX(3%)}
.reward-slab:nth-child(2){transform:rotate(-1deg) translateX(-2%);z-index:2}
.reward-slab:nth-child(3){transform:rotate(1.4deg) translateX(1%)}
.reward-slab:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 34px 80px rgba(223,157,57,.5)}
.reward-slab .rw-coin{width:62px;height:62px;min-width:62px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;font-weight:900;position:relative;
  background:radial-gradient(circle at 34% 28%,#efd49b,#dd962c 55%,#855616);
  box-shadow:0 0 26px rgba(231,183,105,.6),inset 0 -6px 12px rgba(0,0,0,.3),inset 0 4px 8px rgba(255,255,255,.35);
  animation:coinBob 3.4s ease-in-out infinite}
.reward-slab:nth-child(2) .rw-coin{animation-delay:.4s}
.reward-slab:nth-child(3) .rw-coin{animation-delay:.8s}
@keyframes coinBob{50%{transform:translateY(-7px) rotate(6deg)}}
.reward-slab .rw-body{flex:1;display:flex;flex-direction:column;gap:8px}
.reward-slab .rw-tag{align-self:flex-start;padding:5px 12px;border:1px solid rgba(255,255,255,.35);
  border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.18em;background:rgba(0,0,0,.2)}
.reward-slab .rw-amount{font-family:var(--au-disp,"Outfit",system-ui,sans-serif);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.reward-slab .rw-amount .cents{font-size:20px;opacity:.8}
.reward-float{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#eabd80,#855616 60%,#312310);
  box-shadow:0 0 22px rgba(228,169,87,.5);display:grid;place-items:center}
.reward-float img{width:52%;filter:drop-shadow(0 0 6px rgba(255,255,255,.4))}
.reward-float.rf1{width:66px;height:66px;right:-14px;top:8%;animation:float 4s ease-in-out infinite}
.reward-float.rf2{width:54px;height:54px;right:6%;bottom:6%;animation:float 5s ease-in-out infinite .6s}

/* ============ HOW WE OPERATE — revamped step scenes ============ */
.process-scene{height:280px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(220,143,40,.35),transparent 60%),linear-gradient(#20160a,#0c0804)}
.process-scene>img{display:none}
.process-scene .holo,.process-scene .activity+.holo{display:none}
.step-viz{position:relative;width:190px;height:190px;display:grid;place-items:center}
.step-viz .ring{position:absolute;border-radius:50%;border:1px solid rgba(236,199,139,.32)}
.step-viz .ring.r-a{inset:0;animation:spin 18s linear infinite}
.step-viz .ring.r-b{inset:26px;border-style:dashed;border-color:rgba(236,199,139,.22);animation:spin 12s linear infinite reverse}
.step-viz .core{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(60,41,18,.9),rgba(22,15,8,.9));border:1px solid rgba(236,199,139,.4);
  box-shadow:0 0 40px rgba(222,154,53,.35),inset 0 0 24px rgba(180,115,30,.3);position:relative;z-index:2}
.step-viz .core svg{width:44px;height:44px;stroke:#efd49b;fill:none;stroke-width:1.7;
  filter:drop-shadow(0 0 6px #e4bc5a)}
.step-viz .orbdot{position:absolute;width:14px;height:14px;border-radius:50%;background:#e2b750;
  box-shadow:0 0 14px #e2b750;top:50%;left:50%;margin:-7px;animation:stepOrbit 6s linear infinite}
.step-viz .orbdot.d2{background:#e8ad72;box-shadow:0 0 14px #e8ad72;animation-duration:9s;animation-delay:-3s}
@keyframes stepOrbit{from{transform:rotate(0) translateX(92px) rotate(0)}to{transform:rotate(360deg) translateX(92px) rotate(-360deg)}}
.step-viz .spark{position:absolute;inset:0}
.step-viz .spark i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7;
  animation:twk 2.4s ease-in-out infinite}
.step-viz .spark i:nth-child(1){left:12%;top:20%}
.step-viz .spark i:nth-child(2){right:10%;top:30%;animation-delay:.6s}
.step-viz .spark i:nth-child(3){left:20%;bottom:16%;animation-delay:1.1s}
.step-viz .spark i:nth-child(4){right:18%;bottom:22%;animation-delay:1.6s}
@keyframes twk{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.2)}}
.process-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s,box-shadow .5s}
.process-card:hover{transform:translateY(-8px);border-color:#e5b05e;box-shadow:0 30px 70px rgba(163,106,27,.3)}
.process-card:hover .step-viz .core{box-shadow:0 0 60px rgba(229,178,96,.55),inset 0 0 24px rgba(180,115,30,.3)}
.process-card .activity{background:linear-gradient(100deg,#e19b4a,#deac33)}

/* ============ GLOBAL MARKET ACCESS — lightning strikes ============ */
.market-links path{stroke:url(#x);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:0;filter:drop-shadow(0 0 6px #e4a756);
  opacity:0;animation:strike 3.4s ease-in-out infinite}
.market-links path:nth-child(1){animation-delay:0s}
.market-links path:nth-child(2){animation-delay:.35s}
.market-links path:nth-child(3){animation-delay:.7s}
.market-links path:nth-child(4){animation-delay:1.05s}
.market-links path:nth-child(5){animation-delay:1.4s}
.market-links path:nth-child(6){animation-delay:1.75s}
.market-links path:nth-child(7){animation-delay:2.1s}
.market-links path:nth-child(8){animation-delay:2.45s}
.market-links path:nth-child(9){animation-delay:2.8s}
@keyframes strike{
  0%,92%{opacity:0}
  4%{opacity:1;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #e1b449)}
  7%{opacity:.2}
  10%{opacity:1;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #e4a756)}
  22%{opacity:.85}
  40%{opacity:.35;filter:drop-shadow(0 0 6px #e4a756)}
  60%{opacity:.7}
  100%{opacity:0}}
.market-icon{transition:transform .4s,box-shadow .4s;z-index:4}
.market-icon:hover{transform:scale(1.12);box-shadow:0 0 40px rgba(228,183,87,.6)}
.x-core{z-index:5}
.x-core::before{border-color:rgba(231,189,105,.4)}

/* ============ BUILT FOR PROFESSIONAL EXECUTION — animated ============ */
.condition-system article{position:relative;overflow:hidden;transition:transform .45s,border-color .45s,box-shadow .45s}
.condition-system article:hover{transform:translateY(-8px);border-color:#e5b05e;box-shadow:0 28px 66px rgba(185,121,30,.3)}
.condition-visual{height:190px}
.cond-anim{position:relative;width:150px;height:150px;display:grid;place-items:center}
.cond-anim .halo{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(228,171,87,.28),transparent 62%);animation:pulse 3s ease-in-out infinite}
.cond-anim .ring2{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(236,199,139,.35);
  animation:spin 14s linear infinite}
.cond-anim .ring2::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 14px #fff;top:-5px;left:50%;margin-left:-5px}
.cond-anim .chip{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;position:relative;z-index:2;
  background:linear-gradient(150deg,#e19747,#ddaa31);box-shadow:0 0 44px rgba(221,154,43,.4)}
.cond-anim .chip svg{width:42px;height:42px;stroke:#fff;fill:none;stroke-width:1.8}
/* mini animated candlesticks for "fast execution" */
.cond-anim.exec .chip{background:linear-gradient(150deg,#5f3e16,#160f07)}
.cond-anim .mini-bars{display:flex;gap:5px;align-items:flex-end;height:44px}
.cond-anim .mini-bars i{width:6px;border-radius:3px;background:linear-gradient(#e8c472,#e19b4a);
  animation:barPump 1.6s ease-in-out infinite}
.cond-anim .mini-bars i:nth-child(2){animation-delay:.2s}
.cond-anim .mini-bars i:nth-child(3){animation-delay:.4s}
.cond-anim .mini-bars i:nth-child(4){animation-delay:.6s}
.cond-anim .mini-bars i:nth-child(5){animation-delay:.8s}

/* ================ TESTIMONIALS — dual marquee rows ================ */
.testimonial-wall{columns:auto;column-gap:0;display:flex;flex-direction:column;gap:18px;
  overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-row{display:flex;gap:18px;width:max-content}
.tm-row.left{animation:marqL 46s linear infinite}
.tm-row.right{animation:marqR 52s linear infinite}
.testimonial-wall:hover .tm-row{animation-play-state:paused}
@keyframes marqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.testimonial-wall article{break-inside:auto;margin:0;flex:0 0 380px;width:380px;padding:26px;
  border:1px solid var(--line);border-radius:20px;background:rgba(24,17,9,.72);
  transition:transform .4s,border-color .4s,box-shadow .4s}
.testimonial-wall article:hover{transform:translateY(-6px);border-color:#e5b05e;box-shadow:0 22px 50px rgba(176,115,29,.28)}
.testimonial-wall article:nth-child(2n){padding-block:26px}
.tm-stars{color:#ffbf47;font-size:13px;letter-spacing:2px;margin-top:6px}

/* ================ THE FPFX NETWORK — animated network ================ */
.network-visual{height:520px;position:relative}
.net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:250px;height:250px;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 28%,#e6b166,#875716 44%,#160f06 74%);
  box-shadow:inset -40px -36px 60px #040302,0 0 100px rgba(222,155,55,.5)}
.net-core img{width:78px;filter:drop-shadow(0 0 20px #fff);animation:float 4s ease-in-out infinite}
.net-core::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px solid rgba(240,217,165,.5);
  animation:pulse 3.4s ease-in-out infinite}
.net-core::before{content:"";position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle,rgba(239,212,156,.35),transparent 68%);animation:pulse 2.6s ease-in-out infinite}
.net-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(227,166,83,.18)}
.net-orbit.o1{width:360px;height:360px;animation:spin 40s linear infinite}
.net-orbit.o2{width:470px;height:470px;animation:spin 60s linear infinite reverse}
.net-node{position:absolute;padding:8px 14px;border-radius:99px;border:1px solid #e4b059;
  background:rgba(22,15,7,.9);font-size:11px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 0 22px rgba(228,171,87,.35);transform:translate(-50%,-50%);z-index:3;white-space:nowrap}
.net-node small{display:block;font-size:8px;font-weight:600;color:#d6be9a;letter-spacing:.04em}
.net-node::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 10px #22C55E;transform:translateY(-50%);animation:pulse 1.6s ease-in-out infinite}
.net-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.net-link{stroke:url(#netGrad);stroke-width:1.4;fill:none;opacity:.4}
.net-packet{fill:#fff;filter:drop-shadow(0 0 6px #e8c472)}
@keyframes netTravel{from{offset-distance:0%}to{offset-distance:100%}}

/* keep the reduced-motion crowd comfortable */
@media(prefers-reduced-motion:reduce){
  .hero-art-ribbon img,.hero-art-ribbon::after,.hero-art-sheen,.chart-line,.dash-chart path.dash-line,.market-links path,
  .tm-row.left,.tm-row.right{animation:none!important}
  .chart-line,.dash-chart path.dash-line{stroke-dashoffset:0}
}

/* responsive polish for the reworked blocks */
@media(max-width:1050px){
  .reward-vault{min-height:auto}
  .network-visual{height:460px}
  .net-orbit.o2{width:400px;height:400px}
}
@media(max-width:700px){
  .testimonial-wall article{flex-basis:300px;width:300px}
  .reward-slab .rw-amount{font-size:26px}
  .net-core{width:180px;height:180px}
  .net-orbit.o1{width:250px;height:250px}
  .net-orbit.o2{width:320px;height:320px}
  .step-viz{width:150px;height:150px}
  .hero-art{opacity:.62}
}


/* ============================================================
   HERO ART — figma ribbon artwork + character action pose
   Infinite, seamless (0% == 100%), GPU-only transforms.
   GSAP owns .character-rig's transform, so the character's
   "action" is animated on its INNER layers to avoid conflict.
   ============================================================ */
.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-art-aura{position:absolute;right:6%;top:44%;width:52%;height:74%;transform:translateY(-50%);
  background:radial-gradient(closest-side,rgba(228,169,87,.30),rgba(170,104,30,.12) 52%,transparent 74%);
  filter:blur(12px);mix-blend-mode:screen;
  animation:artAura 9s ease-in-out infinite;will-change:transform,opacity}
@keyframes artAura{0%,100%{opacity:.62;transform:translateY(-50%) scale(1)}
  50%{opacity:.95;transform:translateY(-50%) scale(1.07)}}

/* --- the ribbon artwork: sits right, blended onto the black galaxy --- */
.hero-art-ribbon{position:absolute;right:-6%;top:50%;width:78%;transform:translateY(-50%);
  perspective:1600px;perspective-origin:58% 50%;filter:saturate(1.1) contrast(1.03)}
.hero-art-ribbon img{display:block;width:100%;height:auto;
  transform-style:preserve-3d;transform-origin:58% 50%;
  animation:ringRevolve 40s linear infinite;will-change:transform;backface-visibility:visible}
/* The artwork is a pair of interlocked rings. Precessing its plane — spin the
   frame, tilt, then unspin — sweeps the surface normal around a cone, so the
   rings orbit one another instead of drifting. 0% and 100% are identical. */
@keyframes ringRevolve{
  0%     {transform:rotateZ(0deg) rotateX(21deg) rotateZ(-0deg)}
  6.25%  {transform:rotateZ(22.5deg) rotateX(21deg) rotateZ(-22.5deg)}
  12.5%  {transform:rotateZ(45deg) rotateX(21deg) rotateZ(-45deg)}
  18.75% {transform:rotateZ(67.5deg) rotateX(21deg) rotateZ(-67.5deg)}
  25%    {transform:rotateZ(90deg) rotateX(21deg) rotateZ(-90deg)}
  31.25% {transform:rotateZ(112.5deg) rotateX(21deg) rotateZ(-112.5deg)}
  37.5%  {transform:rotateZ(135deg) rotateX(21deg) rotateZ(-135deg)}
  43.75% {transform:rotateZ(157.5deg) rotateX(21deg) rotateZ(-157.5deg)}
  50%    {transform:rotateZ(180deg) rotateX(21deg) rotateZ(-180deg)}
  56.25% {transform:rotateZ(202.5deg) rotateX(21deg) rotateZ(-202.5deg)}
  62.5%  {transform:rotateZ(225deg) rotateX(21deg) rotateZ(-225deg)}
  68.75% {transform:rotateZ(247.5deg) rotateX(21deg) rotateZ(-247.5deg)}
  75%    {transform:rotateZ(270deg) rotateX(21deg) rotateZ(-270deg)}
  81.25% {transform:rotateZ(292.5deg) rotateX(21deg) rotateZ(-292.5deg)}
  87.5%  {transform:rotateZ(315deg) rotateX(21deg) rotateZ(-315deg)}
  93.75% {transform:rotateZ(337.5deg) rotateX(21deg) rotateZ(-337.5deg)}
  100%   {transform:rotateZ(360deg) rotateX(21deg) rotateZ(-360deg)}}
/* counter-revolving companion glow — gives the second ring its own orbit,
   so the pair reads as revolving around each other rather than in lockstep */
.hero-art-ribbon::after{content:"";position:absolute;inset:6% 4%;
  background:radial-gradient(closest-side at 58% 48%,rgba(231,190,105,.20),transparent 68%);
  mix-blend-mode:screen;pointer-events:none;transform-origin:58% 50%;
  animation:ringRevolve 40s linear infinite reverse;will-change:transform}

/* --- travelling light sheen across the ribbon (clipped to the artwork) --- */
.hero-art-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side at 58% 50%,#000 42%,transparent 78%);
  mask:radial-gradient(closest-side at 58% 50%,#000 42%,transparent 78%)}
.hero-art-sheen::before{content:"";position:absolute;top:-30%;left:-45%;width:34%;height:160%;
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.16) 42%,rgba(246,230,199,.28) 50%,rgba(255,255,255,.16) 58%,transparent);
  transform:skewX(-14deg);mix-blend-mode:screen;
  animation:artSheen 9s cubic-bezier(.45,0,.2,1) infinite;will-change:transform,opacity}
@keyframes artSheen{
  0%{transform:translateX(-40%) skewX(-14deg);opacity:0}
  6%{opacity:.85}
  40%{opacity:.7}
  55%{transform:translateX(300%) skewX(-14deg);opacity:0}
  100%{transform:translateX(-40%) skewX(-14deg);opacity:0}}

/* ---------- CHARACTER: the idle "action" loop ---------- */
/* bottom origin keeps the feet planted while the body breathes */
.character-body{transform-origin:52% 100%;
  animation:charBreathe 5.6s ease-in-out infinite;will-change:transform,filter}
@keyframes charBreathe{
  0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 18px rgba(227,172,86,.34))}
  50%{transform:scale(1.014) rotate(.45deg);filter:drop-shadow(0 0 30px rgba(232,193,113,.52))}}
/* aura behind the figure throbs on a different period so it never looks mechanical */
.character-glow{transform-origin:52% 100%;
  animation:charAura 4.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes charAura{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.05)}}
/* key light drifting over the figure = the sense of "doing something" */
.character-light{animation:charKey 6.8s ease-in-out infinite;will-change:transform,opacity}
@keyframes charKey{
  0%,100%{opacity:.45;transform:translate3d(0,0,0) scale(1)}
  35%{opacity:.9;transform:translate3d(-8%,3%,0) scale(1.12)}
  70%{opacity:.62;transform:translate3d(6%,-2%,0) scale(.95)}}

/* subtle pointer parallax (JS sets --px/--py) — depth without motion sickness */
.hero-art-ribbon{transform:translateY(-50%) translate3d(calc(var(--px,0)*14px),calc(var(--py,0)*10px),0)}
.character-rig{--rigx:calc(var(--px,0)*-7px);--rigy:calc(var(--py,0)*-5px)}

@media(prefers-reduced-motion:reduce){
  .hero-art-aura,.hero-art-ribbon img,.hero-art-ribbon::after,.hero-art-sheen::before,
  .character-body,.character-glow,.character-light{animation:none!important}
  .hero-art-sheen::before{opacity:0}
}
@media(max-width:900px){
  .hero-art-ribbon{right:-18%;width:118%;opacity:.72}
  .hero-art-aura{right:-6%;width:82%}
}

/* ============================================================
   FINAL POLISH 6.3 — smooth motion, premium loader, offers
   ============================================================ */
:root{--motion-smooth:var(--au-ease,cubic-bezier(.2,.8,.3,1))}
img{image-rendering:auto}
.hero-art-ribbon,.hero-art-ribbon img,.character-rig,.payout-card,.process-track{transform-style:preserve-3d;backface-visibility:hidden;-webkit-font-smoothing:antialiased}
.hero-art-ribbon{will-change:transform}
.hero-art-ribbon img{animation:ribbonDrift 18s var(--motion-smooth) infinite alternate!important;will-change:transform,filter;filter:saturate(1.08) contrast(1.04) brightness(1.02)}
.hero-art-ribbon::after{animation:ribbonGlow 11s ease-in-out infinite!important}
@keyframes ribbonDrift{
  0%{transform:translate3d(-.35%,.15%,0) scale(1.012) rotateZ(-.15deg)}
  50%{transform:translate3d(.45%,-.35%,0) scale(1.022) rotateZ(.12deg)}
  100%{transform:translate3d(-.1%,.32%,0) scale(1.015) rotateZ(-.08deg)}
}
@keyframes ribbonGlow{0%,100%{opacity:.42;transform:scale(.99)}50%{opacity:.78;transform:scale(1.025)}}
.hero-art-sheen::before{animation-duration:12s!important}
.character-body,.character-glow,.character-light,.hero-coins,.payout-card{will-change:transform,opacity}

/* Risk ring rotates independently; 10% and MAX LOSS remain perfectly still. */
.risk-orbit{background:#100c07;animation:none!important;isolation:isolate;overflow:hidden}
.risk-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--gold) 0 36%,#e1994a 36% 58%,#2e251b 58%);animation:riskSpin 12s linear infinite;z-index:-2}
.risk-orbit::after{z-index:-1}
.risk-orbit b,.risk-orbit small{animation:none!important;transform:none!important;position:relative}
@keyframes riskSpin{to{transform:rotate(360deg)}}

/* Important phase information is larger and easier to scan. */
.phase-grid{gap:14px;margin:28px 0 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.phase-card{padding:20px 20px 18px;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(175,114,30,.075));box-shadow:inset 0 1px rgba(255,255,255,.04);transition:border-color .35s var(--motion-smooth),transform .35s var(--motion-smooth),background .35s}
.phase-card:hover{transform:translateY(-3px);border-color:rgba(229,178,96,.55);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(207,136,35,.12))}
.phase-card h4{font-size:16px;margin-bottom:14px;color:#fff}
.phase-card div{font-size:13px;margin:9px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055)}
.phase-card div:last-child{border-bottom:0;padding-bottom:0}
.phase-card div b{color:#fff;font-size:13px}
@media(min-width:1150px){.phase-grid:has(.phase-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Prevent hover transforms from fighting the pinned horizontal ScrollTrigger. */
.process-track{will-change:transform}
.process-card{transform:translateZ(0);contain:paint;transition:border-color .4s,box-shadow .4s!important}
.process-card:hover{transform:translateZ(0)!important;box-shadow:0 28px 70px rgba(163,106,27,.28)}
.process-pin{overscroll-behavior:contain;transform:translateZ(0)}


/* Multiple-offer marquee and copy feedback */
.promo-bar{height:44px;background:linear-gradient(90deg,#9e5e1a,#b37a1d 46%,#d4a223);box-shadow:0 8px 32px rgba(187,124,30,.18)}
.promo-track{gap:22px;animation-duration:48s;will-change:transform;padding-left:22px}
.promo-item{display:inline-flex;align-items:center;gap:8px}
.promo-item strong{color:#fff}.promo-item small{display:inline-flex;gap:5px;align-items:center;color:#f7e8d0;font-size:9px;letter-spacing:.12em}.promo-item time{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.inline-code{padding:4px 7px;border:1px dashed rgba(255,255,255,.55);border-radius:6px;background:rgba(0,0,0,.12)}
.copy-inline{position:relative;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:7px;height:26px;min-width:30px;cursor:pointer;transition:.25s}
.copy-inline:hover,.copy-inline.copied{background:#fff;color:#ad701c;transform:translateY(-1px)}
.copy-inline em{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%) translateY(4px);padding:5px 8px;border-radius:6px;background:#0d0803;color:#fff;font-style:normal;font-size:9px;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 24px #000;z-index:20}
.copy-inline:hover em,.copy-inline.copied em{opacity:1;transform:translateX(-50%) translateY(0)}
.pricing-coupon{display:flex;align-items:center;gap:9px}.pricing-copy{background:rgba(224,161,63,.12);border:1px solid rgba(230,181,100,.3)}

/* Multi-offer modal */
.promo-modal{width:min(900px,94vw);grid-template-columns:minmax(250px,330px) 1fr;background:linear-gradient(145deg,rgba(49,33,13,.98),rgba(5,4,3,.99));backdrop-filter:blur(22px)}
.modal-character{height:520px;position:relative;background:radial-gradient(circle at 50% 42%,rgba(226,166,78,.55),transparent 58%),#0d0904}
.modal-character img{height:570px;position:absolute;left:50%;bottom:-70px;transform:translateX(-50%);mix-blend-mode:screen}
.modal-orbit{position:absolute;left:50%;top:42%;width:230px;height:230px;border:1px solid rgba(232,187,113,.45);border-radius:50%;transform:translate(-50%,-50%);animation:spin 18s linear infinite}
.modal-orbit::after{content:"";position:absolute;inset:24px;border:1px dashed rgba(232,187,113,.28);border-radius:50%;animation:spin 10s linear infinite reverse}
.offer-panel{padding:38px 36px!important;min-width:0}.offer-panel h2{font-size:38px}.offer-carousel{position:relative;min-height:250px;margin-top:18px}.offer-card{position:absolute;inset:0;padding:22px;border:1px solid rgba(230,181,101,.26);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(187,122,31,.08));opacity:0;visibility:hidden;transform:translateX(28px) scale(.98);transition:.5s var(--motion-smooth)}.offer-card.active{opacity:1;visibility:visible;transform:none}.offer-card>small{color:#f5e1c1;font-size:10px;letter-spacing:.14em}.offer-card>strong{display:block;font:800 42px/1 var(--au-disp,"Outfit",system-ui,sans-serif);margin:9px 0;background:linear-gradient(90deg,#fff,#e5bd61);-webkit-background-clip:text;color:transparent}.offer-card p{margin-bottom:12px}.offer-time{display:flex;justify-content:space-between;padding:9px 0;color:#b1a99c;font-size:10px}.offer-time time{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}.offer-card .coupon-box{margin:8px 0 0}.offer-dots{display:flex;gap:7px;margin:14px 0 20px}.offer-dots button{width:22px;height:4px;border:0;border-radius:8px;background:#584b38;transition:.3s}.offer-dots button.active{width:42px;background:linear-gradient(90deg,#e19b4a,#dda92d)}
.copy-code{cursor:pointer}.copy-code.copied{color:#4ADE80!important}

/* General interaction quality */
.btn,.glass,.rule-grid article,.condition-system article,.faq-item,.cert-card{transition-timing-function:var(--motion-smooth)!important}
@media(max-width:700px){.promo-modal{grid-template-columns:1fr}.modal-character{display:none}.offer-panel{padding:34px 22px!important}.phase-grid{grid-template-columns:1fr}.promo-item small{display:none}}
.exit-code-line{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.exit-code{color:#eac97c}

/* Offer grid + reliable coupon layout — v6.4 */
.promo-modal{width:min(1180px,96vw);max-height:min(90vh,860px);grid-template-columns:minmax(240px,330px) minmax(0,1fr);overflow:hidden}
.offer-panel{overflow:auto;max-height:min(90vh,860px);scrollbar-width:thin;scrollbar-color:rgba(227,174,85,.55) transparent}
.offer-panel>p{max-width:680px}
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 22px;align-items:stretch}
.offer-grid .offer-card{position:relative;inset:auto;display:flex;flex-direction:column;min-width:0;min-height:270px;padding:22px;opacity:1;visibility:visible;transform:none;box-sizing:border-box;overflow:hidden}
.offer-grid .offer-card p{flex:1;overflow-wrap:anywhere}
.offer-grid .offer-time{gap:12px;align-items:center}
.offer-grid .coupon-box{display:flex;width:100%;min-width:0;box-sizing:border-box;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;padding:0 0 0 15px}
.offer-grid .coupon-box b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-grid .coupon-box button{flex:0 0 auto;white-space:nowrap;max-width:46%;padding-inline:14px}
.offer-time time,.promo-item time,.pricing-expiry time{font-variant-numeric:tabular-nums;white-space:nowrap}
.offer-time .expired,.pricing-expiry .expired{color:#edda91}
.pricing-offer-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:8px 0 4px}
.pricing-offer-row .pricing-coupon{margin:0}
.pricing-expiry{display:flex;align-items:center;gap:9px;margin:0;padding:8px 11px;border:1px solid rgba(228,177,92,.26);border-radius:10px;background:rgba(177,117,29,.09)}
.pricing-expiry[hidden]{display:none!important}
.pricing-expiry span{color:#a89c8b;font-size:9px;letter-spacing:.12em}
.pricing-expiry time{color:#fff;font-size:11px;font-weight:800}
@media(max-width:920px){.promo-modal{grid-template-columns:1fr;width:min(720px,95vw)}.modal-character{display:none}.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.offer-grid{grid-template-columns:1fr}.offer-panel{padding:30px 18px!important}.offer-panel h2{font-size:30px}.offer-grid .offer-card{min-height:240px}.promo-item time{font-size:9px}}


/* ===================================================================
   v6.3 — MOBILE / RESPONSIVE FIXES
   =================================================================== */

/* --- 1. Runaway zoom-out and the phantom gutter on the right ---------
   `overflow-x:hidden` on <body> alone does NOT clip: the overflow
   propagates up to the viewport, so the page stayed 512px wide on a
   390px phone. The browser then zoomed out to fit, which is what showed
   the empty strip on the right. Clipping on <html> is the actual fix.
   `clip` rather than `hidden` so no scroll container is created and
   position:sticky keeps working. ------------------------------------- */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;width:100%}


/* --- 2. THE FPFX NETWORK: orbit rings pushed past the viewport ------ */
.network-visual{overflow:hidden}
@media(max-width:700px){
  .net-orbit.o1{width:230px;height:230px}
  .net-orbit.o2{width:290px;height:290px}
  .net-core{width:150px;height:150px}
  .net-node{font-size:10px;padding:6px 10px}
  .net-node small{font-size:7px}
}
@media(max-width:400px){
  .net-orbit.o1{width:195px;height:195px}
  .net-orbit.o2{width:240px;height:240px}
}

/* --- 3. HOW WE OPERATE: cards were unswipeable on mobile -------------
   The pinned horizontal scroll is a GSAP matchMedia block gated at
   (min-width:901px). Below that nothing ran, so the track just
   overflowed and was clipped — no drag, no scrollbar, no way to reach
   cards 2-5. Under 900px it becomes a native scroll-snap carousel,
   which also feels correct on touch. ---------------------------------- */
@media(max-width:900px){
  .process-pin{height:auto!important;transform:none!important}
  .process-track{
    width:auto;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-left:5vw;
    padding:4px 5vw 22px;
    transform:none!important;      /* defeat any stale GSAP transform */
    cursor:grab;
    scrollbar-width:none;
  }
  .process-track::-webkit-scrollbar{display:none}
  .process-track:active{cursor:grabbing}
  .process-card{
    scroll-snap-align:center;
    flex:0 0 min(300px,82vw);
    width:min(300px,82vw);
  }
  /* a hint that there is more to the right */
  .process-head{position:relative}
  .process-head::after{
    content:"Swipe for more →";
    display:block;margin-top:10px;
    font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    color:rgba(242,215,173,.55);font-weight:700;
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .process-track{scroll-behavior:auto}
}

/* --- 4. Modals: were taller than the screen with no way to scroll ---- */
@media(max-width:700px){
  .promo-modal{
    width:min(500px,94vw);
    max-height:88vh;
    max-height:88dvh;              /* dodges mobile browser chrome */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:1fr;
    border-radius:20px;
  }
  /* the artwork panel eats the whole screen on a phone — trim it */
  .promo-modal .promo-visual,
  .promo-modal>figure,
  .promo-modal>img{max-height:150px;object-fit:cover}
  .promo-modal .promo-body,
  .promo-modal>div:last-child{padding:22px 20px 26px}
  .promo-modal h3,.promo-modal h2{font-size:22px;line-height:1.2}
  .modal-close{right:10px;top:10px;width:38px;height:38px}  /* 38px ≥ tap target */

  .exit-modal{
    right:12px;left:12px;bottom:12px;
    width:auto;
    max-height:80vh;max-height:80dvh;
    overflow-y:auto;
    padding:22px 20px;
  }
  .exit-modal h3{font-size:20px}
  .modal-orbit{display:none}       /* decorative, and it overflowed */
}
@media(max-width:400px){
  .promo-modal .promo-visual,.promo-modal>figure,.promo-modal>img{max-height:110px}
}

/* --- 5. Marquees and tickers: clip at the section, not the viewport -- */
.promo-strip,.ticker,.certificate-strip,.testimonial-wall{overflow:hidden;max-width:100vw}

/* --- 6. Tap targets and text sizing on small screens ----------------- */
@media(max-width:700px){
  .btn,.fpfx-btn,button,.nav a{min-height:44px}          /* WCAG 2.5.5 */
  .copy-inline{min-width:44px;min-height:44px}
  input,select,textarea{font-size:16px}                /* stops iOS auto-zoom */
  h1{font-size:clamp(34px,10vw,52px);line-height:1.05}
  h2{font-size:clamp(26px,7.5vw,38px);line-height:1.12}
  .section{padding-left:20px;padding-right:20px}
  .hero-copy{padding-right:8px}
}

/* --- 7. Tables and wide blocks scroll instead of stretching the page - */
@media(max-width:700px){
  .rule-grid,.condition-system,.bento{grid-template-columns:1fr!important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* --- 8. Respect the notch --------------------------------------------- */
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* --- 9. Consent banner ------------------------------------------------ */
.fpfx-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
  display:none;gap:14px;align-items:center;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;
  background:rgba(32,21,10,.97);border:1px solid rgba(236,199,139,.34);
  box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);
}
.fpfx-consent.show{display:flex}
.fpfx-consent p{margin:0;flex:1 1 280px;font-size:13px;line-height:1.55;color:#ddcbb6}
.fpfx-consent a{color:#e8c472}
.fpfx-consent .fpfx-consent-actions{display:flex;gap:9px;flex-wrap:wrap}
.fpfx-consent button{
  padding:11px 18px;border-radius:10px;border:1px solid rgba(236,199,139,.34);
  background:transparent;color:#faf1e6;font:700 13px/1 inherit;cursor:pointer;min-height:44px;
}
.fpfx-consent button.primary{background:linear-gradient(100deg,#e19b4a,#dda92d);border-color:transparent;color:#fff}
@media(max-width:620px){
  .fpfx-consent{left:10px;right:10px;bottom:10px;padding:16px}
  .fpfx-consent .fpfx-consent-actions{width:100%}
  .fpfx-consent .fpfx-consent-actions button{flex:1}
}

/* --- 10. Tap targets on tablet too, not just phones -------------------
   The 44px rule was scoped to 700px, so tablets kept 13-26px controls.
   Inline links inside prose are exempt: padding them out would wreck
   the line rhythm, and they are not primary controls. ----------------- */
@media(max-width:900px){
  /* Every control gets the 44px target. */
  .btn,.fpfx-btn,button,.video-btn,.play-toggle,.mute-toggle,
  .copy-inline,.login,.nav a,.footer-nav a,.modal-close{
    min-height:44px;
  }
  /* ...but only SINGLE-LABEL controls get centred with inline-flex. A button
     whose content is a stack (.fx-opt: index, title, description, discount
     badge) is a card, not a label: making it a flex ROW laid its four children
     side by side and pushed them straight out of a 111px grid cell, cutting the
     discount badge off every plan and size button below 900px. Card buttons
     opt out here and set their own display. */
  .btn,.fpfx-btn,button:not(.fx-opt),.video-btn,.play-toggle,.mute-toggle,
  .copy-inline,.login,.nav a,.footer-nav a,.modal-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .copy-inline{min-width:44px}
  /* standalone links get a hit area without shifting the layout */
  .nav a,.footer-nav a,.login{padding:10px 12px}
}

/* Discount chips on programme and balance selectors */
.type-tabs button,.size-tabs button{position:relative;overflow:visible}
.program-offer-chip,.plan-offer-chip{position:absolute;top:-10px;right:-8px;z-index:4;padding:4px 7px;border-radius:999px;background:linear-gradient(135deg,#e19b4a,#dba724);color:#fff;font:800 9px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.04em;box-shadow:0 7px 20px rgba(219,167,36,.34);border:1px solid rgba(255,255,255,.28);white-space:nowrap;font-style:normal}
.size-tabs button.active .plan-offer-chip,.type-tabs button.active .program-offer-chip{background:linear-gradient(135deg,#22C55E,#EEB762);box-shadow:0 7px 20px rgba(34,197,94,.26)}


/* v8.5.1 — premium selector discount chips */
.type-tabs .type-tab,
.size-tabs > button{position:relative!important;overflow:visible!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;isolation:isolate}
.type-tabs .type-tab > .program-offer-chip,
.size-tabs > button > .plan-offer-chip{position:absolute!important;top:-12px!important;right:-10px!important;left:auto!important;bottom:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:max-content!important;height:22px!important;padding:0 8px!important;margin:0!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:999px!important;background:linear-gradient(135deg,#e1b344 0%,#e19d45 52%,#8A6B3A 100%)!important;box-shadow:0 8px 24px rgba(223,159,56,.38),inset 0 1px 0 rgba(255,255,255,.22)!important;color:#fff!important;font-family:var(--au-disp,"Outfit",system-ui,sans-serif)!important;font-size:9px!important;font-weight:800!important;font-style:normal!important;line-height:1!important;letter-spacing:.07em!important;text-transform:uppercase!important;white-space:nowrap!important;pointer-events:none!important;transform:none!important;z-index:30!important}
.type-tabs .type-tab > .program-offer-chip::before,
.size-tabs > button > .plan-offer-chip::before{content:'✦';margin-right:4px;font-size:8px;opacity:.95}
.type-tabs .type-tab.active > .program-offer-chip,
.size-tabs > button.active > .plan-offer-chip{background:linear-gradient(135deg,#22C55E 0%,#EEB762 100%)!important;box-shadow:0 8px 24px rgba(224,142,62,.32),inset 0 1px 0 rgba(255,255,255,.28)!important}
@media(max-width:700px){.type-tabs .type-tab > .program-offer-chip,.size-tabs > button > .plan-offer-chip{top:-9px!important;right:-5px!important;height:19px!important;padding:0 6px!important;font-size:8px!important}}

/* FPFX phase cards restoration v8.5.2 */
.phase-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 24px;overflow:visible!important;opacity:1!important;visibility:visible!important;height:auto!important}
.phase-section-head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:2px;padding:0 2px}
.phase-section-head span{font-size:14px;font-weight:800;color:#fff;letter-spacing:.02em}
.phase-section-head small{font-size:11px;color:rgba(235,216,188,.62)}
.phase-card{display:block!important;min-height:0;padding:18px;border:1px solid rgba(229,178,97,.22);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(175,114,30,.08));box-shadow:inset 0 1px rgba(255,255,255,.04),0 12px 34px rgba(28,19,7,.18)}
.phase-card-top{display:flex!important;align-items:center;gap:10px;padding-bottom:12px!important;margin:0 0 10px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.phase-card-top span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#e09d43,#dba724);color:#fff!important;font-size:10px!important;font-weight:900}
.phase-card-top h4{margin:0!important;font-size:15px;color:#fff}
.phase-card>div:not(.phase-card-top){display:flex;justify-content:space-between;gap:12px;margin:8px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px}
.phase-card>div:last-child{border-bottom:0;padding-bottom:0}
.phase-card>div span{color:rgba(229,210,184,.68)}
.phase-card>div b{color:#fff;font-size:12px}
.phase-empty{grid-column:1/-1;padding:18px;border:1px dashed rgba(230,179,99,.3);border-radius:15px;background:rgba(139,93,24,.07);display:flex;flex-direction:column;gap:5px}
.phase-empty b{color:#fff}.phase-empty span{font-size:12px;color:rgba(231,214,190,.65)}
@media(min-width:1150px){.phase-grid:has(.phase-card:nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.phase-grid{grid-template-columns:1fr}.phase-section-head{align-items:flex-start;flex-direction:column;gap:3px}}


/* FPFX pricing recovery v8.5.3 */
.type-tabs,.size-tabs{display:flex!important;flex-wrap:wrap!important;column-gap:10px!important;row-gap:20px!important;overflow:visible!important;padding-top:13px!important;padding-right:8px!important}
.type-tabs .type-tab,.size-tabs>button{position:relative!important;min-height:46px!important;padding:0 18px!important;overflow:visible!important}
.type-tabs .type-tab>.program-offer-chip,.size-tabs>button>.plan-offer-chip{top:-13px!important;right:-5px!important;transform:translateY(-2px)!important}
.plan-summary .pricing-offer-row{margin-top:16px!important;min-height:34px!important}
.plan-summary .pricing-coupon{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;color:rgba(247,236,220,.78)!important}
.plan-summary .pricing-coupon b{color:#fff!important;padding:6px 10px!important;border:1px solid rgba(229,181,98,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.035)!important}
.phase-grid{display:grid!important;opacity:1!important;visibility:visible!important;max-height:none!important;min-height:120px!important;margin-top:24px!important}
.promo-modal.show{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.modal-backdrop.show{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
@media(max-width:700px){.type-tabs,.size-tabs{row-gap:18px!important}.type-tabs .type-tab,.size-tabs>button{padding:0 14px!important}.type-tabs .type-tab>.program-offer-chip,.size-tabs>button>.plan-offer-chip{right:0!important}}

/* ============================================================
   FPFX PUBLIC UI HOTFIX 8.7.0
   Stable responsive header, creative mobile navigation and
   connected Help Center CTA. Tracking selectors are untouched.
   ============================================================ */

/* ----- Header: stable geometry on every desktop width ----- */
.header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(22px,3vw,52px);
    min-width:0;
    height:78px;
    padding-inline:clamp(22px,4vw,72px);
    isolation:isolate;
}
.header .logo{
    display:flex;
    align-items:center;
    min-width:0;
    flex:0 0 auto;
    position:relative;
    z-index:2;
}
.header .logo img{
    display:block;
    width:clamp(148px,11.5vw,184px);
    height:auto;
    max-width:none;
}
.header-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,1.7vw,31px);
    margin:0;
    min-width:0;
}
.header-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:10px 0;
    white-space:nowrap;
    color:#ddd7ce;
    font-size:clamp(12px,.92vw,14px);
    transition:color .25s ease,transform .25s ease;
}
.header-nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:4px;
    height:1px;
    background:linear-gradient(90deg,#e2a04a,#dfad39);
    transition:right .3s cubic-bezier(.22,.61,.36,1);
}
.header-nav a:hover,
.header-nav a:focus-visible{
    color:#fff;
    transform:translateY(-1px);
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after{right:0}
.header-help-link{
    padding:8px 12px!important;
    border:1px solid rgba(230,177,98,.28);
    border-radius:999px;
    background:rgba(188,124,34,.10);
}
.header-help-link::after{display:none}
.header-help-link span{font-size:11px;color:#edd192}
.header-actions{
    justify-self:end;
    min-width:max-content;
}
.header-actions .btn.small{white-space:nowrap}
.menu{
    position:relative;
    z-index:102;
    display:none;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:48px;
    height:44px;
    padding:0 13px;
    border:1px solid rgba(230,179,103,.30);
    border-radius:13px;
    color:#fff;
    background:linear-gradient(145deg,rgba(142,95,31,.28),rgba(24,16,7,.84));
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 36px rgba(0,0,0,.22);
    cursor:pointer;
    transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.menu:hover,.menu:focus-visible{border-color:rgba(232,187,111,.68);transform:translateY(-1px)}
.menu-label{font:700 10px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.menu-lines{width:18px;height:15px;display:block;position:relative}
.menu-lines i{
    display:block;
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#fff;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),top .35s,opacity .2s;
}
.menu-lines i:first-child{top:3px}
.menu-lines i:last-child{top:10px;width:13px;left:5px}
.menu[aria-expanded="true"] .menu-lines i:first-child{top:7px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-lines i:last-child{top:7px;left:0;width:18px;transform:rotate(-45deg)}

/* ----- Creative mobile navigation ----- */
.mobile-menu-shell{
    position:fixed;
    inset:0;
    z-index:1000;
    visibility:hidden;
    pointer-events:none;
}
.mobile-menu-shell.is-open{visibility:visible;pointer-events:auto}
.mobile-menu-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(2,1,0,.76);
    backdrop-filter:blur(9px);
    opacity:0;
    transition:opacity .35s ease;
}
.mobile-menu-shell.is-open .mobile-menu-backdrop{opacity:1}
.mobile-menu-panel{
    position:absolute;
    top:8px;
    right:8px;
    bottom:8px;
    width:min(430px,calc(100vw - 16px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(229,178,98,.34);
    border-radius:27px;
    background:
      radial-gradient(circle at 78% 14%,rgba(223,161,60,.22),transparent 32%),
      radial-gradient(circle at 10% 84%,rgba(226,153,80,.18),transparent 34%),
      linear-gradient(155deg,#221709 0%,#0f0a04 60%,#0A0806 100%);
    box-shadow:-34px 0 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
    transform:translate3d(105%,0,0) scale(.985);
    transition:transform .48s cubic-bezier(.22,.75,.18,1);
}
.mobile-menu-shell.is-open .mobile-menu-panel{transform:translate3d(0,0,0) scale(1)}
.mobile-menu-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.55;
    background-image:
      radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.6px),
      radial-gradient(circle,rgba(237,203,146,.75) 0 1px,transparent 1.5px);
    background-size:92px 92px,137px 137px;
    background-position:22px 14px,65px 48px;
    mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.mobile-menu-head{
    position:relative;
    z-index:1;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu-head img{width:154px;height:auto;display:block}
.mobile-menu-close{
    width:43px;height:43px;position:relative;border:1px solid rgba(255,255,255,.13);border-radius:13px;
    background:rgba(255,255,255,.045);cursor:pointer;transition:background .25s,border-color .25s;
}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{background:rgba(225,164,72,.14);border-color:rgba(231,183,105,.45)}
.mobile-menu-close i{position:absolute;left:12px;top:20px;width:18px;height:2px;border-radius:2px;background:#fff}
.mobile-menu-close i:first-child{transform:rotate(45deg)}
.mobile-menu-close i:last-child{transform:rotate(-45deg)}
.mobile-menu-body{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    overflow:auto;
    overscroll-behavior:contain;
    padding:24px 20px 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(227,172,85,.4) transparent;
}
.mobile-menu-eyebrow{
    margin:0 0 12px;
    color:#aa9b87;
    font:700 10px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);
    letter-spacing:.18em;
    text-transform:uppercase;
}
.mobile-menu-nav{display:grid;gap:7px}
.mobile-menu-nav a{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 24px;
    align-items:center;
    min-width:0;
    padding:13px 14px;
    border:1px solid transparent;
    border-radius:13px;
    background:rgba(255,255,255,.025);
    color:#fbf6ef;
    transition:background .25s,border-color .25s,transform .25s;
}
.mobile-menu-nav a:hover,.mobile-menu-nav a:focus-visible{
    background:rgba(223,157,58,.11);
    border-color:rgba(229,175,93,.27);
    transform:translateX(3px);
}
.mobile-menu-nav small{color:#99876e;font:700 10px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.08em}
.mobile-menu-nav span{font:700 clamp(16px,4.5vw,19px)/1.2 var(--au-disp,"Outfit",system-ui,sans-serif)}
.mobile-menu-nav i{justify-self:end;color:#e8b86f;font-style:normal}
.mobile-help-feature{
    position:relative;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 24px;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:16px;
    overflow:hidden;
    border:1px solid rgba(232,188,114,.36);
    border-radius:17px;
    background:linear-gradient(135deg,rgba(219,142,38,.25),rgba(123,80,24,.10));
    box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.mobile-help-feature::before{
    content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-50px;top:-80px;
    background:radial-gradient(circle,rgba(227,181,82,.28),transparent 70%);pointer-events:none
}
.mobile-help-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#e19b4a,#deab31);font:800 22px/1 var(--au-disp,"Outfit",system-ui,sans-serif);color:#fff;box-shadow:0 12px 25px rgba(215,145,35,.24)}
.mobile-help-feature>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.mobile-help-feature small{color:#ebc586;font:700 9px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.15em}
.mobile-help-feature b{margin-top:5px;color:#fff;font:700 14px/1.3 var(--au-disp,"Outfit",system-ui,sans-serif)}
.mobile-help-feature em{margin-top:3px;color:#b7ab9a;font:500 11px/1.35 var(--au-body,"DM Sans",system-ui,sans-serif);font-style:normal}
.mobile-help-feature>i{justify-self:end;color:#eccd89;font-style:normal}
.mobile-menu-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;margin-top:18px}
.mobile-menu-actions>a{min-height:48px;border-radius:13px}
.mobile-login{display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);color:#fff;font-weight:700;background:rgba(255,255,255,.035)}
.mobile-menu-actions .btn{padding:13px 14px;font-size:13px;gap:9px}
.mobile-menu-foot{
    position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,.07);color:#80796d;font-size:10px
}
.mobile-menu-foot a{color:#e2d0b5;text-align:right}
body.mobile-menu-open{overflow:hidden;touch-action:none}

/* ----- Homepage Help Center CTA ----- */
.helpdesk-cta{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
    gap:clamp(38px,6vw,88px);
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    padding-top:clamp(90px,9vw,145px);
    padding-bottom:clamp(90px,9vw,145px);
    border-top:1px solid rgba(255,255,255,.045);
    border-bottom:1px solid rgba(255,255,255,.045);
    background:
      radial-gradient(circle at 14% 36%,rgba(221,145,45,.14),transparent 33%),
      radial-gradient(circle at 88% 58%,rgba(222,173,53,.10),transparent 34%),
      linear-gradient(180deg,rgba(15,10,4,.70),rgba(4,3,2,.92));
}
.helpdesk-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.helpdesk-backdrop::before{
    content:"";position:absolute;inset:0;opacity:.28;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:68px 68px;
    mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent)
}
.helpdesk-backdrop i{position:absolute;border:1px solid rgba(229,175,96,.13);border-radius:50%;animation:helpOrbit 16s linear infinite}
.helpdesk-backdrop i:nth-child(1){width:540px;height:540px;right:-120px;top:50%;margin-top:-270px}
.helpdesk-backdrop i:nth-child(2){width:390px;height:390px;right:-45px;top:50%;margin-top:-195px;animation-direction:reverse;animation-duration:21s}
.helpdesk-backdrop i:nth-child(3){width:12px;height:12px;right:188px;top:21%;border:0;background:#f2d8ad;box-shadow:0 0 22px #e4ae57;animation:helpPulse 2.4s ease-in-out infinite}
@keyframes helpOrbit{to{transform:rotate(360deg)}}
@keyframes helpPulse{50%{opacity:.34;transform:scale(.65)}}
.helpdesk-copy{max-width:650px}
.helpdesk-copy h2{margin:18px 0 18px;font-size:clamp(42px,5.2vw,76px);line-height:.98;letter-spacing:-.045em}
.helpdesk-copy h2 em{font-style:normal;background:linear-gradient(90deg,#eabd81,#e3b853);-webkit-background-clip:text;background-clip:text;color:transparent}
.helpdesk-copy>p{max-width:620px;color:#bbb2a5;font-size:clamp(15px,1.2vw,18px);line-height:1.75}
.helpdesk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.helpdesk-link{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#fff;font-weight:750;background:rgba(255,255,255,.035);transition:border-color .25s,background .25s,transform .25s}
.helpdesk-link:hover{border-color:rgba(231,184,106,.48);background:rgba(220,152,45,.10);transform:translateY(-2px)}
.helpdesk-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:35px}
.helpdesk-trust span{display:flex;flex-direction:column;min-width:126px;padding:13px 15px;border-left:1px solid rgba(232,186,114,.28);background:linear-gradient(90deg,rgba(204,142,47,.055),transparent)}
.helpdesk-trust b{color:#fff;font:800 17px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif)}
.helpdesk-trust small{margin-top:3px;color:#878075;font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.helpdesk-options{position:relative;display:grid;gap:13px;min-width:0}
.helpdesk-option{
    position:relative;
    display:grid;
    grid-template-columns:38px 58px minmax(0,1fr) 30px;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:20px 20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:19px;
    background:linear-gradient(145deg,rgba(45,31,14,.88),rgba(20,14,7,.88));
    box-shadow:0 22px 65px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
    transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s,background .35s,box-shadow .35s;
}
.helpdesk-option::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 20%,rgba(231,186,111,.08),transparent 75%);transform:translateX(-45%);transition:opacity .35s,transform .55s}
.helpdesk-option:hover,.helpdesk-option:focus-visible{transform:translateX(-8px);border-color:rgba(230,181,101,.45);background:linear-gradient(145deg,rgba(68,47,19,.95),rgba(24,16,7,.94));box-shadow:0 28px 72px rgba(98,68,23,.24)}
.helpdesk-option:hover::after,.helpdesk-option:focus-visible::after{opacity:1;transform:translateX(35%)}
.helpdesk-option.is-primary{margin-left:-32px;border-color:rgba(230,179,98,.30);background:linear-gradient(145deg,rgba(91,62,21,.88),rgba(27,18,7,.94))}
.helpdesk-option-index{align-self:start;color:var(--muted-2,#AEA8A1);font:700 10px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.1em}
.helpdesk-option-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(232,186,112,.24);border-radius:16px;background:rgba(222,152,49,.09);color:#efcf9a;font:600 24px/1 var(--au-disp,"Outfit",system-ui,sans-serif)}
.helpdesk-option>div{min-width:0}
.helpdesk-option small{color:#d0a969;font:700 9px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.15em}
.helpdesk-option h3{margin:6px 0 5px;color:#fff;font-size:clamp(16px,1.4vw,21px);line-height:1.2}
.helpdesk-option p{margin:0;color:#9e9689;font-size:12px;line-height:1.55}
.helpdesk-option>i{justify-self:end;color:#ebc383;font-style:normal;font-size:17px}

/* ----- Responsive protection: the logo and controls never collide ----- */
@media(max-width:1260px){
    .header{gap:22px;padding-inline:24px}
    .header-nav{gap:18px}
    .header-nav a{font-size:12px}
    .header-help-link{padding-inline:10px!important}
}
@media(max-width:1120px){
    .header{grid-template-columns:auto 1fr;height:74px}
    .header-nav{display:none!important}
    .header-actions{display:flex;justify-content:flex-end}
    .menu{display:inline-flex}
    .helpdesk-cta{grid-template-columns:1fr;gap:52px}
    .helpdesk-copy{max-width:760px}
    .helpdesk-options{max-width:850px;width:100%;margin-inline:auto}
    .helpdesk-option.is-primary{margin-left:0}
}
@media(max-width:700px){
    .header{height:66px;padding-inline:15px;gap:10px}
    .header .logo img{width:clamp(128px,36vw,148px)}
    .header-actions{gap:8px}
    .header-actions .login{display:none}
    .header-actions .btn.small{padding:11px 13px;border-radius:10px;font-size:11px;gap:7px;box-shadow:none}
    .menu{height:42px;min-width:42px;padding-inline:11px;border-radius:11px}
    .menu-label{display:none}
    .mobile-menu-panel{top:5px;right:5px;bottom:5px;width:calc(100vw - 10px);border-radius:23px}
    .mobile-menu-head{height:68px;padding-inline:16px}
    .mobile-menu-head img{width:145px}
    .mobile-menu-body{padding:20px 16px 17px}
    .mobile-menu-foot{padding-inline:16px}
    .helpdesk-cta{padding-inline:20px}
    .helpdesk-copy h2{font-size:clamp(41px,12vw,58px)}
    .helpdesk-actions{align-items:stretch}
    .helpdesk-actions>a{width:100%}
    .helpdesk-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
    .helpdesk-trust span{min-width:0;padding:11px 8px}
    .helpdesk-trust small{font-size:8px}
    .helpdesk-option{grid-template-columns:34px 48px minmax(0,1fr) 20px;gap:10px;padding:16px 13px;border-radius:16px}
    .helpdesk-option-icon{width:46px;height:46px;border-radius:13px;font-size:20px}
    .helpdesk-option p{font-size:11px}
}
@media(max-width:480px){
    .header-actions .btn.small{display:none}
    .header{grid-template-columns:minmax(0,1fr) auto}
    .menu{display:inline-flex}
    .mobile-menu-actions{grid-template-columns:1fr}
    .mobile-menu-foot{align-items:flex-start;flex-direction:column}
    .mobile-menu-foot a{text-align:left}
    .helpdesk-trust{grid-template-columns:1fr}
    .helpdesk-trust span{display:grid;grid-template-columns:60px 1fr;align-items:center}
    .helpdesk-option{grid-template-columns:28px 44px minmax(0,1fr)}
    .helpdesk-option>i{display:none}
    .helpdesk-option h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
    .mobile-menu-panel,.mobile-menu-backdrop,.menu-lines i,.helpdesk-option,.helpdesk-option::after{transition:none!important}
    .helpdesk-backdrop i{animation:none!important}
}


/* ============================================================
   FPFX CHALLENGE SELECTOR + EXIT INTENT v3.4.0
   Responsive option cards for any programme/account count.
   ============================================================ */
.selector-section-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:#fff}
.selector-section-head.balance-head{margin-top:25px}
.selector-section-head>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:1px solid rgba(231,187,111,.34);border-radius:11px;background:linear-gradient(145deg,rgba(225,160,68,.18),rgba(222,173,55,.06));color:#efd2a0;font:800 11px/1 var(--au-disp,"Outfit",system-ui,sans-serif);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.selector-section-head b,.selector-section-head small{display:block}.selector-section-head b{font:800 13px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.01em}.selector-section-head small{margin-top:3px;color:rgba(235,218,194,.58);font-size:10px;line-height:1.4}
.type-tabs.choice-grid,.size-tabs.choice-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:11px!important;padding:0!important;overflow:visible!important}
.type-tabs.choice-grid[data-count="1"],.size-tabs.choice-grid[data-count="1"]{grid-template-columns:minmax(190px,280px)!important}
.type-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(170px,1fr))!important}
.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(150px,1fr))!important}
.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{position:relative!important;min-width:0!important;min-height:82px!important;width:100%!important;display:grid!important;grid-template-columns:31px minmax(0,1fr) 24px!important;align-items:center!important;gap:10px!important;margin:0!important;padding:14px 13px!important;border:1px solid rgba(231,181,107,.2)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(118,78,19,.07))!important;color:#ebe6dd!important;text-align:left!important;overflow:hidden!important;isolation:isolate;box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 28px rgba(14,9,3,.13)!important;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease!important}
.type-tabs.choice-grid .type-tab::before,.size-tabs.choice-grid>button::before{content:"";position:absolute;inset:auto -35% -75% 20%;height:150%;border-radius:50%;background:radial-gradient(circle,rgba(223,162,60,.18),transparent 66%);opacity:0;transform:translateY(15px);transition:.25s;z-index:-1}
.type-tabs.choice-grid .type-tab:hover,.size-tabs.choice-grid>button:hover{transform:translateY(-2px)!important;border-color:rgba(231,184,109,.47)!important;background:linear-gradient(145deg,rgba(226,165,74,.11),rgba(224,177,63,.045))!important;box-shadow:0 16px 38px rgba(123,81,20,.18),inset 0 1px rgba(255,255,255,.07)!important}
.type-tabs.choice-grid .type-tab:hover::before,.size-tabs.choice-grid>button:hover::before,.type-tabs.choice-grid .type-tab.active::before,.size-tabs.choice-grid>button.active::before{opacity:1;transform:none}
.type-tabs.choice-grid .type-tab.active,.size-tabs.choice-grid>button.active{border-color:rgba(227,183,83,.82)!important;background:linear-gradient(145deg,rgba(224,157,65,.24),rgba(221,171,46,.13))!important;box-shadow:0 16px 40px rgba(223,156,59,.2),inset 0 0 0 1px rgba(255,255,255,.07)!important;color:#fff!important}
.selector-order{width:31px;height:31px;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.16);color:rgba(239,218,186,.56);font:800 9px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.05em}
.type-tab.active .selector-order,.size-tabs>button.active .selector-order{border-color:rgba(255,255,255,.2);background:linear-gradient(135deg,#e19e4a,#dda92d);color:#fff;box-shadow:0 7px 18px rgba(221,169,45,.25)}
.selector-main{min-width:0;display:block!important}.selector-main strong,.selector-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selector-main strong{color:inherit;font:800 15px/1.25 var(--au-disp,"Outfit",system-ui,sans-serif)}.selector-main small{margin-top:4px;color:rgba(229,214,193,.55);font:600 9.5px/1.35 var(--au-body,"DM Sans",system-ui,sans-serif)}.active .selector-main small{color:rgba(252,248,238,.68)}
.selector-check{width:22px;height:22px;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:transparent;background:rgba(255,255,255,.025);font-size:11px;font-weight:900}.active .selector-check{border-color:rgba(91,228,155,.3);background:rgba(91,228,155,.13);color:#5BE49B}
.type-tabs.choice-grid .program-offer-chip,.size-tabs.choice-grid .plan-offer-chip{position:absolute!important;top:7px!important;right:8px!important;left:auto!important;bottom:auto!important;transform:none!important;display:inline-flex!important;align-items:center!important;width:auto!important;min-width:0!important;height:19px!important;padding:0 6px!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:7px!important;background:linear-gradient(135deg,#e09542,#deaf37)!important;color:#fff!important;font:800 7.5px/1 var(--au-disp,"Outfit",system-ui,sans-serif)!important;letter-spacing:.045em!important;box-shadow:0 6px 14px rgba(223,155,57,.22)!important;pointer-events:none!important;z-index:4!important}
.type-tabs.choice-grid .program-offer-chip::before,.size-tabs.choice-grid .plan-offer-chip::before{content:""!important;margin:0!important}
.type-tabs.choice-grid .type-tab.active>.program-offer-chip,.size-tabs.choice-grid>button.active>.plan-offer-chip{background:linear-gradient(135deg,#1FA652,#E08E3E)!important;box-shadow:0 6px 14px rgba(34,197,94,.18)!important}
.pricing-offer-row .pricing-coupon{border:1px solid rgba(231,185,111,.17);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.025)}
.pricing-offer-label{color:rgba(236,219,193,.62);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.pricing-coupon .coupon-code{padding:0!important;border:0!important;background:none!important;color:#fff!important;font-size:12px!important}
.exit-modal:not(.exit-band){width:min(420px,calc(100vw - 24px))!important;padding:30px!important;border-radius:24px!important;background:radial-gradient(circle at 85% 0,rgba(224,162,67,.19),transparent 40%),linear-gradient(155deg,#221709,#100b04)!important;border:1px solid rgba(230,183,99,.5)!important;box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.06)!important;text-align:left!important}
.exit-modal:not(.exit-band)>img{position:absolute!important;right:10px!important;top:4px!important;width:142px!important;opacity:.9;pointer-events:none}.exit-modal>span{display:block!important;color:#ebc586!important;font:800 9px/1 var(--au-disp,"Outfit",system-ui,sans-serif)!important;letter-spacing:.17em!important}.exit-modal:not(.exit-band) h2{max-width:280px;margin:10px 0 12px!important;font-size:clamp(29px,4vw,42px)!important;line-height:.98!important;letter-spacing:-.045em!important}.exit-modal:not(.exit-band)>p{max-width:330px;margin:0 0 18px!important;color:rgba(239,229,214,.68)!important;font-size:13px!important;line-height:1.65!important;text-align:left!important}.exit-modal:not(.exit-band)>.btn{margin-top:16px!important;min-width:190px!important}
.exit-modal:not(.exit-band) .exit-auto-offer,.exit-modal:not(.exit-band) .exit-offer-code{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:center;padding:13px 14px;border:1px solid rgba(231,183,106,.25);border-radius:14px;background:linear-gradient(135deg,rgba(224,157,66,.13),rgba(223,176,59,.055));overflow:hidden}.exit-auto-offer::after,.exit-offer-code::after{content:"";position:absolute;right:-22px;top:-35px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(225,178,72,.22),transparent 68%)}
.exit-modal:not(.exit-band) .exit-auto-offer span,.exit-modal:not(.exit-band) .exit-offer-code>span{grid-column:1/-1;color:#c7b293!important;font:800 8px/1 var(--au-disp,"Outfit",system-ui,sans-serif)!important;letter-spacing:.14em!important}.exit-auto-offer b,.exit-offer-code b{color:#fff;font-size:17px;line-height:1.2}.exit-auto-offer small{color:#c5b9a9;font-size:9.5px}.exit-offer-code .copy-inline{justify-self:end;min-height:34px!important}
.exit-modal:not(.exit-band) .exit-offer-time{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}.exit-offer-time span{color:#a8967c!important;font-size:8px!important;font-weight:800;letter-spacing:.1em}.exit-offer-time time{color:#fff;font:800 12px/1 var(--au-mono,"JetBrains Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums}
@media(max-width:1180px){.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(160px,1fr))!important}}
@media(max-width:700px){.selector-section-head{margin-bottom:10px}.selector-section-head.balance-head{margin-top:20px}.type-tabs.choice-grid,.size-tabs.choice-grid,.type-tabs.choice-grid[data-count="2"],.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.type-tabs.choice-grid[data-count="1"],.size-tabs.choice-grid[data-count="1"]{grid-template-columns:1fr!important}.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:74px!important;grid-template-columns:25px minmax(0,1fr) 18px!important;gap:7px!important;padding:12px 9px!important;border-radius:13px!important}.selector-order{width:25px;height:25px;border-radius:8px;font-size:8px}.selector-main strong{font-size:13px}.selector-main small{font-size:8.5px}.selector-check{width:18px;height:18px;border-radius:6px;font-size:9px}.type-tabs.choice-grid .program-offer-chip,.size-tabs.choice-grid .plan-offer-chip{top:5px!important;right:5px!important;height:17px!important;font-size:6.8px!important}.exit-modal{padding:25px 20px!important}.exit-modal>img{width:112px!important;opacity:.72}}
@media(max-width:420px){.type-tabs.choice-grid,.size-tabs.choice-grid,.type-tabs.choice-grid[data-count="2"],.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:1fr!important}.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:68px!important}}

/* FPFX pricing selector refinement v3.4.1 */
.type-tabs.choice-grid,
.size-tabs.choice-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.type-tabs.choice-grid .type-tab,
.size-tabs.choice-grid>button{
  position:relative!important;
  min-width:0!important;
  min-height:74px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  padding:14px 13px!important;
  overflow:visible!important;
  border:1px solid rgba(236,195,136,.22)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(206,133,34,.035))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
  text-align:left!important;
}
.type-tabs.choice-grid .type-tab:hover,
.size-tabs.choice-grid>button:hover{
  border-color:rgba(230,184,103,.58)!important;
  background:linear-gradient(145deg,rgba(226,165,78,.12),rgba(222,172,49,.055))!important;
  transform:translateY(-2px)!important;
}
.type-tabs.choice-grid .type-tab.active,
.size-tabs.choice-grid>button.active{
  border-color:rgba(225,178,69,.9)!important;
  background:linear-gradient(145deg,rgba(221,146,47,.32),rgba(221,171,46,.16))!important;
  box-shadow:0 14px 34px rgba(219,144,37,.22),inset 0 1px rgba(255,255,255,.12)!important;
}
.type-tabs.choice-grid .type-tab.active:after,
.size-tabs.choice-grid>button.active:after{
  content:""!important;
  position:absolute!important;
  inset:auto 13px 0 13px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#e1b244,#e8ae73,transparent)!important;
  box-shadow:0 0 14px rgba(225,178,68,.65)!important;
}
.type-tabs.choice-grid .selector-order,
.size-tabs.choice-grid .selector-order{
  width:34px!important;
  height:34px!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(239,206,157,.18)!important;
  background:rgba(255,255,255,.035)!important;
  color:#b7a58d!important;
  font-size:9px!important;
  font-weight:900!important;
}
.type-tabs.choice-grid .active .selector-order,
.size-tabs.choice-grid>button.active .selector-order{
  border-color:rgba(255,255,255,.18)!important;
  background:linear-gradient(135deg,#e19c44,#deae34)!important;
  color:#fff!important;
}
.type-tabs.choice-grid .selector-main,
.size-tabs.choice-grid .selector-main{min-width:0!important;display:block!important}
.type-tabs.choice-grid .selector-main strong,
.size-tabs.choice-grid .selector-main strong{
  display:block!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  color:#fbf7f2!important;
  font-size:15px!important;
  line-height:1.18!important;
  font-weight:800!important;
}
.type-tabs.choice-grid .selector-main small,
.size-tabs.choice-grid .selector-main small,
.type-tabs.choice-grid .selector-check,
.size-tabs.choice-grid .selector-check{display:none!important}
.type-tabs.choice-grid .program-offer-chip,
.size-tabs.choice-grid .plan-offer-chip{
  top:-8px!important;
  right:9px!important;
  height:20px!important;
  padding:0 8px!important;
  border:1px solid rgba(255,255,255,.26)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#e19648,#dfb038)!important;
  box-shadow:0 8px 20px rgba(220,151,42,.3)!important;
  color:#fff!important;
  font-size:7.5px!important;
  letter-spacing:.045em!important;
}
.type-tabs.choice-grid .type-tab.active>.program-offer-chip,
.size-tabs.choice-grid>button.active>.plan-offer-chip{
  background:linear-gradient(135deg,#22C55E,#E08E3E)!important;
}
@media(max-width:620px){
  .type-tabs.choice-grid,.size-tabs.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:68px!important;padding:12px 10px!important;grid-template-columns:29px minmax(0,1fr)!important;gap:8px!important}
  .type-tabs.choice-grid .selector-order,.size-tabs.choice-grid .selector-order{width:29px!important;height:29px!important;border-radius:9px!important}
  .type-tabs.choice-grid .selector-main strong,.size-tabs.choice-grid .selector-main strong{font-size:13px!important}
}
@media(max-width:390px){.type-tabs.choice-grid,.size-tabs.choice-grid{grid-template-columns:1fr!important}}
/* v2.0.18 Affiliate Network homepage CTA */
.affiliate-home-cta{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);background:radial-gradient(circle at 78% 38%,rgba(222,155,55,.12),transparent 28%)}.affiliate-home-copy{max-width:680px}.affiliate-home-copy h2{font-size:clamp(46px,5vw,76px);line-height:.97;letter-spacing:-.055em;margin:12px 0 20px}.affiliate-home-copy h2 em{font-style:normal;color:#e9bd76}.affiliate-home-copy>p{color:var(--muted,#aaa);line-height:1.75;max-width:650px}.affiliate-home-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.affiliate-home-chips span{font-size:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:#d5c9b9;background:rgba(255,255,255,.025)}.affiliate-home-visual{min-height:500px;position:relative;display:grid;place-items:center}.affiliate-home-visual>img{max-height:485px;max-width:70%;position:relative;z-index:2;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}.affiliate-home-ring{position:absolute;width:430px;height:430px;border:1px solid rgba(229,177,93,.17);border-radius:50%;box-shadow:inset 0 0 60px rgba(223,152,56,.08)}.affiliate-home-visual article{position:absolute;z-index:3;width:190px;padding:14px;border-radius:14px;border:1px solid rgba(232,188,114,.22);background:rgba(24,17,10,.84);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.32)}.affiliate-home-visual article:first-of-type{left:3%;top:24%}.affiliate-home-visual article:last-of-type{right:2%;bottom:20%}.affiliate-home-visual article small,.affiliate-home-visual article span{display:block;color:#b3a695;font-size:9px}.affiliate-home-visual article b{display:block;font-size:20px;margin:5px 0}@media(max-width:900px){.affiliate-home-cta{grid-template-columns:1fr}.affiliate-home-visual{min-height:420px}.affiliate-home-visual>img{max-height:390px}}@media(max-width:560px){.affiliate-home-copy h2{font-size:43px}.affiliate-home-visual{min-height:360px}.affiliate-home-ring{width:310px;height:310px}.affiliate-home-visual article{width:145px;padding:10px}.affiliate-home-visual article:first-of-type{left:-5px}.affiliate-home-visual article:last-of-type{right:-5px}}

/* =====================================================================
   v2.0.23 — certificates, momentum showcase and exhibition visual refresh
   ===================================================================== */
.certificate-head-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.certificate-wall-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid rgba(232,196,114,.28);border-radius:12px;background:rgba(225,155,74,.08);color:#f7f0e7;font-size:11px;font-weight:800;letter-spacing:.02em;transition:.22s}
.certificate-wall-link:hover{transform:translateY(-2px);border-color:rgba(232,196,114,.65);background:rgba(225,155,74,.16)}
.cert-card{width:520px;grid-template-columns:minmax(0,1fr) 176px;padding:18px 18px 14px 22px;gap:14px 18px}
/* Square since the Design B port (1080x1080). This block is currently unreferenced by any template, but a 1.6/1 certificate frame left in the stylesheet is a trap for the next caller. */
.cert-preview-mini{width:176px;aspect-ratio:1/1;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#120c06;position:relative;z-index:1}
.cert-preview-mini svg{display:block;width:100%;height:100%}
.cert-open{grid-column:1/3;display:inline-flex;align-items:center;width:max-content;color:#ebce86;font-size:10px;font-weight:800;letter-spacing:.08em;position:relative;z-index:2}
.cert-open:hover{color:#fff}
.certificate-empty-public{max-width:1400px;margin:0 auto;padding:24px max(4vw,24px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(66,46,15,.48),rgba(25,17,8,.62));display:flex;align-items:center;justify-content:space-between;gap:22px}
.certificate-empty-public b,.certificate-empty-public span{display:block}.certificate-empty-public span{margin-top:7px;color:var(--muted);font-size:13px}.certificate-empty-public a{color:#ebce86;font-weight:800;font-size:12px;white-space:nowrap}

.milestone-showcase{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;max-width:1400px;margin:0 auto}
.milestone-loop-card{position:relative;min-height:620px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#0d0904;box-shadow:0 24px 80px rgba(65,44,15,.34)}
.milestone-loop-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,3,2,.94) 100%);pointer-events:none}
.milestone-loop-card video{width:100%;height:100%;min-height:620px;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.03)}
.milestone-loop-overlay{position:absolute;left:28px;right:28px;bottom:28px;z-index:2;padding:20px 22px;border:1px solid rgba(232,196,114,.2);border-radius:18px;background:rgba(16,11,4,.64);backdrop-filter:blur(18px)}
.milestone-loop-overlay span{display:block;color:#e8c572;font:800 10px/1.2 var(--au-mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.18em}.milestone-loop-overlay b{display:block;font-size:26px;margin:8px 0 4px}.milestone-loop-overlay small{color:var(--muted);font-size:12px}
.milestone-thumb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.milestone-thumb{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(155deg,rgba(41,29,13,.94),rgba(13,9,4,.9));transition:transform .3s var(--motion-smooth),border-color .3s,box-shadow .3s;min-width:0}
.milestone-thumb:hover{transform:translateY(-6px);border-color:rgba(232,196,114,.45);box-shadow:0 24px 60px rgba(129,85,21,.23)}
.milestone-thumb-media{aspect-ratio:16/8.2;overflow:hidden;background:#100a04}.milestone-thumb-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--motion-smooth)}.milestone-thumb:hover img{transform:scale(1.035)}
.milestone-thumb>div:last-child{padding:18px 18px 20px}.milestone-thumb span{color:#e8c572;font-size:9px;font-weight:800;letter-spacing:.16em}.milestone-thumb h3{font-size:18px;margin:7px 0 6px}.milestone-thumb p{color:var(--muted);font-size:12px;line-height:1.55;margin:0}

.expo-grid-generated article{position:relative;overflow:hidden;transition:transform .3s var(--motion-smooth),border-color .3s,box-shadow .3s}.expo-grid-generated article:hover{transform:translateY(-7px);border-color:rgba(232,196,114,.42);box-shadow:0 26px 70px rgba(92,63,22,.28)}
.expo-grid-generated .expo-visual{height:430px;background:#100b05}.expo-grid-generated .expo-visual img{position:static;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .7s var(--motion-smooth)}.expo-grid-generated article:hover .expo-visual img{transform:scale(1.035)}
.expo-grid-generated .expo-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,3,2,.76));pointer-events:none}.expo-grid-generated .expo-visual span{z-index:2;padding:7px 10px;border:1px solid rgba(232,196,114,.28);border-radius:9px;background:rgba(13,9,4,.68);backdrop-filter:blur(10px);font-weight:800}.expo-grid-generated article>small{display:block;margin:18px 20px 0;color:#e8c572;font-size:9px;font-weight:800;letter-spacing:.16em}.expo-grid-generated h3{font-size:23px;margin-top:7px;margin-bottom:0}.expo-grid-generated p{margin-top:6px;margin-bottom:22px}

@media(max-width:1100px){.milestone-showcase{grid-template-columns:1fr}.milestone-loop-card,.milestone-loop-card video{min-height:500px}}
@media(max-width:700px){.certificate-head-actions{justify-content:flex-start}.certificate-empty-public{margin:0 20px;flex-direction:column;align-items:flex-start}.cert-card{width:350px;grid-template-columns:1fr 112px}.cert-preview-mini{width:112px}.milestone-thumb-grid{grid-template-columns:1fr}.milestone-loop-card,.milestone-loop-card video{min-height:360px}.milestone-loop-overlay{left:14px;right:14px;bottom:14px;padding:15px}.milestone-loop-overlay b{font-size:20px}.expo-grid-generated .expo-visual{height:360px}}
@media(prefers-reduced-motion:reduce){.milestone-loop-card video{display:none}.milestone-loop-card{background:url('../images/hotfix-20260816/milestone-trader-progress.webp') center/cover no-repeat}.milestone-thumb,.expo-grid-generated article,.milestone-thumb-media img,.expo-grid-generated .expo-visual img{transition:none!important}}


/* ===================================================================
   POP-UP DIALOGS — welcome + exit intent
   Paired with index.php (markup) and assets/js/fpfx.js (behaviour).
   Aurora only: warm gold on dark-translucent glass, one easing curve,
   no cool hue anywhere in this block.
   =================================================================== */

/* A single running offer is the NORMAL case, not an edge case — an operator
   seeds one promotion at a time. repeat(2,minmax(0,1fr)) left that one card
   sitting in the left half of a 1180px panel with dead space beside it. */
.offer-grid>.offer-card:only-child{grid-column:1/-1}

/* Aurora: every figure is JetBrains Mono. The offer card's countdown was the one
   figure in either dialog still set in DM Sans — .exit-offer-time time already
   carried --au-mono, .offer-time time only ever got tabular-nums. */
.offer-grid .offer-time time{font-family:var(--au-mono,"JetBrains Mono",ui-monospace,monospace)}

/* Body scroll lock. overflow-y only, because html/body already carry
   overflow-x:clip on purpose (v6.3 note above: `hidden` propagated to the
   viewport and broke position:sticky). */
body.fpfx-modal-open{overflow-y:hidden}

/* The action row. Both dialogs now carry an explicit dismiss beside the CTA;
   a close glyph in a corner is not a dismissal a visitor can find in a hurry. */
.modal-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.exit-modal:not(.exit-band) .modal-actions{margin-top:16px}
.exit-modal:not(.exit-band) .modal-actions>.btn{min-width:190px}
.modal-dismiss{
  border:1px solid rgba(238,183,98,.24);
  border-radius:999px;
  background:rgba(13,11,10,.58);          /* dark-translucent glass, never white */
  color:#C9C1B4;
  font:500 12px/1 var(--au-body,"DM Sans",system-ui,sans-serif);
  letter-spacing:.01em;
  padding:11px 18px;
  cursor:pointer;
  transition:color .32s var(--motion-smooth),border-color .32s var(--motion-smooth),background .32s var(--motion-smooth);
}
.modal-dismiss:hover{color:#F3DBB2;border-color:rgba(238,183,98,.5);background:rgba(138,107,58,.16)}

/* Visible focus ring. The dialogs trap Tab, so the ring is the only thing
   telling a keyboard visitor where they are inside the trap. */
.promo-modal :focus-visible,
.exit-modal :focus-visible,
.promo-modal:focus-visible,
.exit-modal:focus-visible{outline:2px solid #EEB762;outline-offset:3px}
.modal-close{cursor:pointer;transition:border-color .3s var(--motion-smooth),color .3s var(--motion-smooth)}
.modal-close:hover{border-color:rgba(238,183,98,.6);color:#F3DBB2}

/* The exit dialog had no height ceiling at all above 700px: on a short laptop
   window it ran off the bottom of the screen with no way to reach the CTA. */
.exit-modal{max-height:calc(100vh - 50px);max-height:calc(100dvh - 50px);overflow-y:auto;overscroll-behavior:contain}
.promo-modal,.exit-modal{scrollbar-width:thin;scrollbar-color:rgba(227,174,85,.55) transparent}

/* The backdrop is shared by both dialogs. It was previously emitted outside
   #promoModal and #exitModal had none at all, which is not survivable once
   aria-modal="true" claims the background is inert. */
.modal-backdrop{background:rgba(5,5,5,.72);backdrop-filter:blur(3px)}

@media(prefers-reduced-motion:reduce){
  /* Two infinite spins. The only rule that stopped them was `display:none`
     inside @media(max-width:900px), so on a desktop with reduce set they ran.
     None of the five reduced-motion blocks earlier in this file reached here. */
  .modal-orbit,.modal-orbit::after{animation:none!important}
  .modal-dismiss,.modal-close{transition:none!important}
}

/* ═══════════ OFFER POP-UP — "THE MARQUEE" ═══════════
   Chosen from four variations on 2026-08-30.

   The inherited shape was a centred TWO-COLUMN dialog: a 280px artwork panel
   beside the offer stack, buttons beneath. That silhouette read as the inherited build's, so
   the split is gone entirely and with it the .modal-character panel — there is
   no artwork column any more. The discount figure IS the composition, set at a
   scale the page cannot ignore, with everything else beneath it as a caption.
   Portrait rather than landscape, which is the visible break.

   Scoped to .promo-marquee so the exit modal keeps the shared base rules it
   still shares with .promo-modal above. */
.promo-modal.promo-marquee{
  width:min(460px,94vw);
  grid-template-columns:none;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(243,196,106,.16),transparent 64%),
    rgba(20,16,13,.94);
  backdrop-filter:blur(22px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.promo-modal.promo-marquee.show{display:block}
.promo-modal.promo-marquee>.offer-panel{padding:34px 30px 26px;text-align:center}

.promo-marquee .pm-eyebrow{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#B4823A}

/* The first offer is the marquee. Any further offers collapse to a compact row
   beneath it rather than repeating the huge figure — the shape is built for one
   headline offer and must not break when a second is running. */
.promo-marquee .offer-grid{display:block;margin:0}
.promo-marquee .offer-card{border:0;background:none;padding:0;margin:0}
.promo-marquee .offer-card+.offer-card{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:11px;text-align:left;flex-wrap:wrap}

.promo-marquee .pm-fig{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:96px;font-weight:700;line-height:.84;letter-spacing:-.04em;margin:14px 0 0;
  background:linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.promo-marquee .offer-card+.offer-card .pm-fig{font-size:30px;margin:0;flex:none}

.promo-marquee .pm-off{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:15px;letter-spacing:.4em;color:#B4823A;margin-top:8px}
.promo-marquee .offer-card+.offer-card .pm-off{font-size:10px;letter-spacing:.2em;margin:0}

.promo-marquee .pm-title{
  display:block;font-family:"Outfit",system-ui,sans-serif;font-size:15px;font-weight:600;
  color:#F5F3F0;margin-top:16px;letter-spacing:-.01em}
.promo-marquee .offer-card+.offer-card .pm-title{margin:0;font-size:13px}
.promo-marquee .pm-desc{margin:8px 0 0;font-size:13px;color:#BCB5AB;line-height:1.55}
.promo-marquee .offer-card+.offer-card .pm-desc{display:none}

.promo-marquee .coupon-box{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;
  border:1px dashed rgba(243,196,106,.42);border-radius:12px;padding:9px 13px;
  background:rgba(243,196,106,.05)}
.promo-marquee .coupon-box b{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;
  letter-spacing:.1em;color:#FFF0CE;font-size:13px}
.promo-marquee .coupon-box span{font-size:11.5px;color:#948C82}
.promo-marquee .copy-code{
  appearance:none;background:none;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;color:#F3C46A;cursor:pointer;
  border:1px solid rgba(243,196,106,.42);border-radius:100px;padding:4px 10px;
  transition:background .3s cubic-bezier(.2,.8,.3,1)}
.promo-marquee .copy-code:hover{background:rgba(243,196,106,.12)}

.promo-marquee .offer-time{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.promo-marquee .offer-time span{letter-spacing:.18em;text-transform:uppercase;color:#948C82}
.promo-marquee .offer-time time{color:#FFF0CE;font-variant-numeric:tabular-nums;font-weight:700}
.promo-marquee .offer-card+.offer-card .offer-time{margin:0 0 0 auto}

.promo-marquee h2{
  font-family:"Outfit",system-ui,sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.02em;margin:18px 0 0;color:#F5F3F0}
.promo-marquee .pm-lede{margin:9px 0 0;font-size:13px;color:#BCB5AB;line-height:1.55}

.promo-marquee .modal-actions{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:11px;align-items:center}
.promo-marquee .modal-actions .btn{width:100%;justify-content:center;text-align:center}
.promo-marquee .modal-dismiss{
  appearance:none;background:none;border:0;color:#948C82;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.promo-marquee .modal-dismiss:hover{color:#BCB5AB}

@media(max-width:520px){
  .promo-marquee .pm-fig{font-size:72px}
  .promo-modal.promo-marquee>.offer-panel{padding:28px 20px 22px}
}

/* ═══════════ EXIT INTENT — "THE INTERCEPTION BAND" ═══════════
   The inherited exit dialog was a floating card bottom-right, 420px wide, with a
   150px illustration floated into it — the inherited build's shape, and the illustration was
   the previous brand's coin render, 100% violet across every saturated pixel.

   Exit intent fires when the cursor leaves through the TOP of the viewport. So
   this sits at the top edge, in the path the cursor is already taking, rather
   than in the opposite corner where it has to be hunted for. Shallow and full
   width, so it intercepts without covering the page the visitor is leaving.

   Three surfaces, three shapes, on purpose: the offer modal is a centred
   portrait marquee, this is a horizontal band, and neither is the other's
   layout rotated. */
/* THE EXIT PANEL IS A CENTRED SQUARE, NOT A BAND.
   It was a full-width strip across the top of the page until 2026-09-04. The
   owner picked the "Dock" variant out of four and asked for it centred, so the
   shape is now a square card in the middle of the viewport.

   THE CLASS NAME `exit-band` IS KEPT ON PURPOSE. Ten rules elsewhere in this
   file are written as `.exit-modal:not(.exit-band)`, and they carry !important.
   Renaming the class would switch all of them ON for this modal and fight every
   rule below. The name is stale; changing it is a bigger job than it looks. */
.exit-modal.exit-band{
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 32px));
  min-height:min(430px,calc(100vh - 48px));
  border-radius:24px;
  border:1px solid rgba(243,196,106,.42);
  background:
    radial-gradient(circle at 86% 4%,rgba(224,162,67,.20),transparent 46%),
    linear-gradient(155deg,#211809,#0C0904 70%);
  box-shadow:0 44px 110px -40px rgba(0,0,0,.96);
  padding:34px 30px;
  overflow:hidden;
  display:none;
  flex-direction:column;justify-content:center;gap:14px;
  text-align:left;
}
.exit-modal.exit-band.show{display:flex}

/* The crest is a watermark, not a logo slot: bled off the corner, barely there,
   and never in front of the copy. */
.exit-band .xb-mark{
  position:absolute;right:-58px;bottom:-46px;width:250px;height:auto;
  flex:none;float:none;object-fit:contain;opacity:.10;pointer-events:none;z-index:0}
/* Stacks the content above the watermark. .modal-close is exempt: it is
   position:absolute and this rule was overriding that, which dropped the
   close button into the flex column and parked it top-LEFT above the copy. */
.exit-band > *:not(.xb-mark):not(.modal-close){position:relative;z-index:1}

.exit-band .xb-say{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;gap:11px}
.exit-band .xb-eyebrow{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#CAA265}
.exit-band h2{
  font-family:"Outfit",system-ui,sans-serif;font-size:clamp(28px,4.4vw,34px);
  font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0;color:#F8F8F8;float:none}
/* Three lines, clamped. The description is context, not the message — it must
   never be the thing that pushes the actions out of a square. */
.exit-band p{margin:0;font-size:13px;color:#AEA8A1;line-height:1.6;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.exit-band .xb-offer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  flex:0 0 auto;min-width:0}
.exit-band .exit-auto-offer,
.exit-band .exit-offer-code{
  display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:100px;
  border:1px dashed rgba(243,196,106,.42);background:rgba(243,196,106,.06);
  margin:0;flex-wrap:wrap;max-width:100%}
.exit-band .exit-auto-offer b,
.exit-band .exit-offer-code b{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:16px;font-weight:700;
  color:#FFF0CE;letter-spacing:.06em}
.exit-band .exit-auto-offer small,
.exit-band .exit-offer-code span{font-size:11px;color:#948C82}
.exit-band .copy-inline{
  appearance:none;background:none;border:1px solid rgba(243,196,106,.42);
  border-radius:100px;padding:4px 10px;color:#F3C46A;cursor:pointer;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px}
.exit-band .exit-offer-time{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.exit-band .exit-offer-time span{letter-spacing:.16em;text-transform:uppercase;color:#948C82}
.exit-band .exit-offer-time time{color:#FFF0CE;font-variant-numeric:tabular-nums;font-weight:700}

.exit-band .modal-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;
  margin:6px 0 0;flex-wrap:wrap}
.exit-band .modal-dismiss{
  appearance:none;background:none;border:0;color:#948C82;font-size:12.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.exit-band .modal-dismiss:hover{color:#BCB5AB}
.exit-band .modal-close{top:12px;right:12px}

/* A 430px square does not belong on a phone. Below 640px it fills the width and
   drops the fixed square minimum, so the card is as tall as its content. */
@media(max-width:640px){
  .exit-modal.exit-band{
    width:calc(100vw - 24px);min-height:0;padding:28px 22px;gap:12px}
  .exit-band h2{font-size:26px}
  .exit-band .xb-mark{width:190px;right:-46px;bottom:-38px}
  .exit-band .modal-actions{width:100%;justify-content:space-between}
}
}


/* ==== assets/css/fpfx-banners.css ==== */
/* FPFX v2.0.21 — shared database-driven banner/theme system */
.fpfx-campaign-group{position:relative;isolation:isolate;width:100%;color:#fff;font-family:var(--au-disp,"Outfit",system-ui,sans-serif)}
.fpfx-campaign-track{position:relative;width:100%}
.fpfx-campaign-banner{position:relative;display:none;align-items:center;gap:18px;width:100%;min-height:58px;padding:13px 20px;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;background:var(--fpfx-banner-bg,linear-gradient(110deg,#5a3a15,#d88623,#d9a423));box-shadow:0 16px 40px rgba(29,19,7,.22);transition:opacity .28s ease,transform .28s ease,border-color .28s ease}
.fpfx-campaign-banner.is-active{display:flex}
.fpfx-campaign-banner::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--fpfx-banner-image,none) center/cover no-repeat;opacity:.42}
.fpfx-campaign-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,7,5,.18),rgba(9,7,5,.62));pointer-events:none}
.fpfx-campaign-art{width:8px;align-self:stretch;flex:0 0 8px;border-radius:999px;background:linear-gradient(180deg,#eed397,#fff 52%,#eab47b);box-shadow:0 0 22px rgba(229,189,96,.52)}
.fpfx-campaign-copy{min-width:0;flex:1 1 auto}
.fpfx-campaign-copy small{display:block;margin-bottom:3px;color:rgba(255,255,255,.7);font-size:9px;line-height:1.2;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.fpfx-campaign-copy strong{display:block;color:#fff;font-size:14px;line-height:1.25;font-weight:900;letter-spacing:-.01em}
.fpfx-campaign-copy p{margin:3px 0 0;color:rgba(255,255,255,.78);font-size:11.5px;line-height:1.42}
.fpfx-campaign-timer{display:grid;gap:2px;min-width:104px;padding:8px 11px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(9,7,5,.32);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fpfx-campaign-timer span{color:rgba(255,255,255,.62);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.fpfx-campaign-timer b{font:800 12px/1.25 var(--au-mono,"JetBrains Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
.fpfx-campaign-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 13px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(13,11,10,.28);color:#fff!important;font-size:10.5px;font-weight:900;white-space:nowrap;text-decoration:none!important;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.fpfx-campaign-cta:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.48)}
.fpfx-campaign-controls{position:absolute;right:9px;bottom:-13px;z-index:6;display:flex;align-items:center;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(13,11,10,.84);box-shadow:0 8px 24px rgba(0,0,0,.3);backdrop-filter:blur(12px)}
.fpfx-campaign-controls button{appearance:none;border:0;background:transparent;color:#fff;min-width:28px;height:26px;border-radius:999px;cursor:pointer;font:800 11px var(--au-disp,"Outfit",system-ui,sans-serif)}
.fpfx-campaign-controls button:hover{background:rgba(255,255,255,.1)}
.fpfx-campaign-controls span{padding:0 4px;color:rgba(255,255,255,.65);font-size:8.5px;font-weight:800;white-space:nowrap}
.fpfx-campaign-group[data-mode="stack"] .fpfx-campaign-track{display:grid;gap:8px}
.fpfx-campaign-group[data-mode="stack"] .fpfx-campaign-banner{display:flex}

/* Compact */
.fpfx-campaign-banner--compact{min-height:44px;padding:9px 16px;border-radius:0;border-left:0;border-right:0;box-shadow:none}
.fpfx-campaign-banner--compact .fpfx-campaign-art{width:4px;flex-basis:4px}
.fpfx-campaign-banner--compact .fpfx-campaign-copy{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fpfx-campaign-banner--compact .fpfx-campaign-copy small{display:none}
.fpfx-campaign-banner--compact .fpfx-campaign-copy p{margin:0}

/* Glow */
.fpfx-campaign-banner--glow{border-color:rgba(232,196,112,.28);box-shadow:0 16px 45px rgba(142,90,23,.2),inset 0 1px rgba(255,255,255,.06)}
.fpfx-campaign-banner--glow::after{background:radial-gradient(500px 120px at 70% 0%,rgba(234,200,125,.18),transparent 62%),linear-gradient(90deg,rgba(9,7,5,.12),rgba(9,7,5,.54))}

/* Feature */
.fpfx-campaign-banner--feature{min-height:78px;padding:16px 20px}
.fpfx-campaign-banner--feature .fpfx-campaign-copy strong{font-size:17px}
.fpfx-campaign-banner--feature .fpfx-campaign-copy p{font-size:12px;max-width:720px}

/* Seasonal */
.fpfx-campaign-banner--seasonal{min-height:86px;padding:17px 22px;border-color:rgba(255,255,255,.2);box-shadow:0 22px 60px rgba(29,19,7,.3)}
.fpfx-campaign-banner--seasonal::before{opacity:.62}
.fpfx-campaign-banner--seasonal::after{background:linear-gradient(90deg,rgba(9,7,5,.82) 0%,rgba(9,7,5,.55) 55%,rgba(9,7,5,.2) 100%)}
.fpfx-campaign-banner--seasonal .fpfx-campaign-copy strong{font-size:18px}

/* Website placement */
.fpfx-campaign-group--website_top{z-index:9998;border-bottom:1px solid rgba(255,255,255,.06)}
.fpfx-campaign-group--website_top .fpfx-campaign-banner{border-radius:0;border-left:0;border-right:0}
.fpfx-campaign-group--website_top .fpfx-campaign-controls{bottom:5px;right:10px}

/* Checkout placement */
.fpfx-campaign-group--checkout{margin:0 0 16px}
.fpfx-campaign-group--checkout .fpfx-campaign-banner{background:var(--fpfx-banner-bg,linear-gradient(110deg,rgba(225,155,74,.2),rgba(221,169,45,.12)));border-color:rgba(232,196,114,.24)}

/* Optional full-site seasonal artwork. Applied only by a website_top banner. */
body.fpfx-campaign-theme::after{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;background-image:var(--fpfx-campaign-theme,none);background-position:center top;background-size:cover;background-repeat:no-repeat;opacity:.26;mix-blend-mode:screen;filter:saturate(.9) contrast(.92)}

@media(max-width:760px){
  .fpfx-campaign-banner{align-items:flex-start;gap:10px;padding:12px 13px;flex-wrap:wrap}
  .fpfx-campaign-banner::before{background-image:var(--fpfx-banner-image-mobile,var(--fpfx-banner-image,none))}
  .fpfx-campaign-art{width:5px;flex-basis:5px;min-height:42px}
  .fpfx-campaign-copy{flex:1 1 calc(100% - 24px)}
  .fpfx-campaign-copy strong{font-size:13px}
  .fpfx-campaign-copy p{font-size:10.5px}
  .fpfx-campaign-timer{min-width:0;flex:1 1 auto;margin-left:15px}
  .fpfx-campaign-cta{margin-left:auto}
  .fpfx-campaign-controls{position:static;width:max-content;margin:-9px 8px 4px auto}
  .fpfx-campaign-banner--compact{padding:9px 11px;flex-wrap:nowrap}
  .fpfx-campaign-banner--compact .fpfx-campaign-copy{display:block}
  .fpfx-campaign-banner--compact .fpfx-campaign-copy p{display:none}
  .fpfx-campaign-banner--feature,.fpfx-campaign-banner--seasonal{min-height:76px}
  body.fpfx-campaign-theme::after{background-image:var(--fpfx-campaign-theme-mobile,var(--fpfx-campaign-theme,none));opacity:.2}
}
@media(prefers-reduced-motion:reduce){.fpfx-campaign-banner,.fpfx-campaign-cta{transition:none!important}.fpfx-campaign-controls{backdrop-filter:none}}

/* ============================================================
   FPFX v2.0.21b — expanded banner visual system
   ============================================================ */

/* Split spotlight */
.fpfx-campaign-banner--split{min-height:116px;padding:14px 18px;display:none;grid-template-columns:minmax(150px,24%) minmax(0,1fr) auto auto;align-items:center;gap:18px}
.fpfx-campaign-banner--split.is-active{display:grid}
.fpfx-campaign-banner--split::before{opacity:.1}
.fpfx-campaign-banner--split .fpfx-campaign-art{width:100%;min-height:86px;align-self:stretch;flex-basis:auto;border-radius:13px;background-image:var(--fpfx-banner-image,linear-gradient(145deg,rgba(255,255,255,.18),rgba(151,96,25,.7)));background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 10px 30px rgba(0,0,0,.22)}
.fpfx-campaign-banner--split .fpfx-campaign-copy strong{font-size:18px}.fpfx-campaign-banner--split .fpfx-campaign-copy p{max-width:650px}

/* Glass panel */
.fpfx-campaign-banner--glass{min-height:78px;background:linear-gradient(135deg,rgba(102,69,25,.52),rgba(28,19,8,.7));border-color:rgba(255,255,255,.2);box-shadow:0 22px 55px rgba(9,7,5,.28),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)}
.fpfx-campaign-banner--glass::after{background:linear-gradient(100deg,rgba(255,255,255,.045),rgba(255,255,255,0) 45%),radial-gradient(420px 120px at 88% 15%,rgba(231,193,105,.14),transparent 70%)}
.fpfx-campaign-banner--glass .fpfx-campaign-art{background:linear-gradient(180deg,#fff,#ebc083 48%,#e5a462)}
.fpfx-campaign-banner--glass .fpfx-campaign-timer,.fpfx-campaign-banner--glass .fpfx-campaign-cta{background:rgba(13,11,10,.18)}

/* Countdown-first */
.fpfx-campaign-banner--countdown{min-height:92px;display:none;grid-template-columns:8px minmax(0,1fr) minmax(180px,auto) auto;gap:18px;background:radial-gradient(560px 180px at 78% 50%,rgba(225,180,70,.2),transparent 70%),var(--fpfx-banner-bg)}
.fpfx-campaign-banner--countdown.is-active{display:grid}
.fpfx-campaign-banner--countdown .fpfx-campaign-copy strong{font-size:17px}
.fpfx-campaign-banner--countdown .fpfx-campaign-timer{min-width:180px;padding:10px 14px;text-align:center;border-color:rgba(255,255,255,.23);background:rgba(9,7,5,.42)}
.fpfx-campaign-banner--countdown .fpfx-campaign-timer span{font-size:9px}.fpfx-campaign-banner--countdown .fpfx-campaign-timer b{font-size:20px;letter-spacing:-.03em}

/* Signal ribbon */
.fpfx-campaign-banner--ribbon{min-height:56px;border-radius:12px;padding:10px 16px 10px 18px;border-color:rgba(227,186,86,.34);background:linear-gradient(100deg,#1d1407 0%,#ab6c1c 54%,#d5a123 100%);box-shadow:0 14px 34px rgba(76,53,18,.24)}
.fpfx-campaign-banner--ribbon::before{opacity:.18}.fpfx-campaign-banner--ribbon::after{background:linear-gradient(90deg,rgba(9,7,5,.06),rgba(9,7,5,.28))}
.fpfx-campaign-banner--ribbon .fpfx-campaign-art{width:5px;flex-basis:5px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.55)}
.fpfx-campaign-banner--ribbon .fpfx-campaign-copy{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.fpfx-campaign-banner--ribbon .fpfx-campaign-copy small{display:none}.fpfx-campaign-banner--ribbon .fpfx-campaign-copy p{margin:0;opacity:.88}
.fpfx-campaign-banner--ribbon .fpfx-campaign-cta{background:#fff;color:#4e3412!important;border-color:#fff}.fpfx-campaign-banner--ribbon .fpfx-campaign-cta:hover{background:#fcf6ed}

/* Center spotlight */
.fpfx-campaign-banner--spotlight{min-height:116px;justify-content:center;text-align:center;padding:18px 24px;background:radial-gradient(480px 150px at 50% 0%,rgba(233,199,122,.24),transparent 72%),linear-gradient(110deg,#1a1106,#593b15 48%,#1d1407)}
.fpfx-campaign-banner--spotlight .fpfx-campaign-art{display:none}.fpfx-campaign-banner--spotlight .fpfx-campaign-copy{flex:0 1 720px}.fpfx-campaign-banner--spotlight .fpfx-campaign-copy strong{font-size:21px}.fpfx-campaign-banner--spotlight .fpfx-campaign-copy p{font-size:12px}
.fpfx-campaign-banner--spotlight .fpfx-campaign-timer{min-width:150px}.fpfx-campaign-banner--spotlight .fpfx-campaign-cta{background:linear-gradient(135deg,#e19b4a,#daa423);border-color:rgba(255,255,255,.2)}

/* Better website-global positioning */
.fpfx-campaign-group--website_top{width:100%}

@media(max-width:760px){
  .fpfx-campaign-banner--split,.fpfx-campaign-banner--countdown{display:none;grid-template-columns:5px minmax(0,1fr);gap:10px}
  .fpfx-campaign-banner--split.is-active,.fpfx-campaign-banner--countdown.is-active{display:grid}
  .fpfx-campaign-banner--split .fpfx-campaign-art{grid-column:1/-1;min-height:120px;width:100%}
  .fpfx-campaign-banner--split .fpfx-campaign-copy,.fpfx-campaign-banner--countdown .fpfx-campaign-copy{grid-column:2}
  .fpfx-campaign-banner--split .fpfx-campaign-timer,.fpfx-campaign-banner--split .fpfx-campaign-cta,.fpfx-campaign-banner--countdown .fpfx-campaign-timer,.fpfx-campaign-banner--countdown .fpfx-campaign-cta{grid-column:2;margin-left:0;width:100%}
  .fpfx-campaign-banner--countdown .fpfx-campaign-timer{min-width:0}
  .fpfx-campaign-banner--ribbon{flex-wrap:wrap}.fpfx-campaign-banner--ribbon .fpfx-campaign-copy{display:block}.fpfx-campaign-banner--ribbon .fpfx-campaign-copy p{margin-top:3px}
  .fpfx-campaign-banner--spotlight{align-items:center}.fpfx-campaign-banner--spotlight .fpfx-campaign-copy strong{font-size:17px}
}


/* ==== assets/css/fpfx-theme.css ==== */
/* ================================================================
   FPFX — brand theme
   Loaded AFTER fpfx.css and overrides its design tokens, so the
   whole platform rebrands from one file rather than page by page.

   The inherited stylesheets were authored around a purple/pink
   palette and hardcode some of it. Tokens are remapped first;
   the literals that could not be tokenised are corrected below.
   ================================================================ */
:root{
  /* --- surfaces: THE LADDER ------------------------------------------------
     Six rungs, every one of them warm (hue 27-34) and none of them crossing a
     neutral. The old ladder started on #050505, which measures hue 0 / sat 0 -
     a pure grey - so the first thing any warm overlay did was drag a neutral
     toward gold and read muddy on the way. Hue is now carried at every rung,
     which is what makes the ramps between them clean.

     Each rung has ONE job. They are not interchangeable, and the gap between
     --bg and --surface is the one that must never close: it is the only thing
     that makes a panel read as a surface lifted off the ground rather than as
     a hole punched in a lit field.

       --bg-void    vignette terminus, modal ground, scrollbar track.
                    NEVER a panel. Nothing is allowed to be darker.
       --bg         the page ground. Everything else is measured from here.
       --bg-2       section bands, header rail, recessed form controls -
                    felt as a change of level, not seen as an edge.
       --surface    the resting panel / card.
       --surface-2  hover, active nav, focused input, popover.
       --surface-3  featured plan, price plinth, certificate mount. ONE step
                    only - this is the top of the ladder, not a highlight.

     Measured separation, old ladder -> new (WCAG ratio, raw-luminance factor):
       bg -> surface          1.072 (x3.44)  ->  1.067 (x2.40)
       surface -> surface-2   1.028 (x1.30)  ->  1.073 (x1.68)   +4.4% ratio
       surface-2 -> surface-3 1.078 (x1.65)  ->  1.118 (x1.70)   +3.7% ratio
       bg -> surface-3        1.188 (x7.38)  ->  1.281 (x6.87)   +7.8% ratio

     Honesty about that table, because the numbers do not all move one way:
     no dark-on-dark ladder reaches the 3:1 UI threshold without a rung turning
     mid-grey, and it is not claimed here. The two rungs that were genuinely
     collapsed - surface/surface-2 at 1.028:1 was a 1.3x luminance step, an
     invisible hover - are the ones that gain. bg -> surface loses 0.005 of
     ratio because the old --bg was near-black; that is paid for many times
     over by the atmosphere ceiling documented in fpfx-aurora.css, which drops
     the RENDERED ground from 7.22x brighter than a resting panel to 2.38x. */
  --bg-void:  #050403;
  --bg:       #0A0806;
  --bg-2:     #0f0c09;
  /* --panel / --panel2 are --surface and --surface-2 at their historic alphas.
     They are kept in step deliberately: a translucent panel that does not
     resolve to its own rung reads as a different component. */
  --panel:    rgba(20,17,12,.74);
  --panel2:   rgba(31,24,18,.88);
  --surface:  #14110c;
  --surface-2:#1f1812;
  --surface-3:#2b2119;

  /* --- lines and type --- */
  --line:     rgba(238,183,98,.16);
  --line-strong:rgba(238,183,98,.42);
  --text:     #F8F8F8;
  /* --- THE CONTRAST FLOOR MOVED, AND IT MOVED UP ---------------------------
     The old values were #8E8A82 (--muted) and #948C82 (--muted-2), and the
     comment here claimed 6.02:1 for the floor. That number was correct and is
     still correct AGAINST A TOKEN GROUND: #948C82 on --au-bg measures 6.024:1.

     It was the wrong backdrop to measure against. Text does not land on the
     token ground; it lands on whatever the atmosphere has painted there. With
     the aurora running at its old .42 opacity the rendered ground measured
     #3f3125, and against THAT:

         --muted   #8E8A82   3.49:1     FAIL AA
         --muted-2 #948C82   3.61:1     FAIL AA, and far below its own floor
         --gold-dim #8A6B3A  2.42:1     FAIL AA

     That is the #635E58 failure - small text vanishing - recurring by a
     different route: the floor passed against the token and failed against
     the pixel. So the atmosphere now has a computed ceiling (#231e15, see
     fpfx-aurora.css) and every type token is proven against THAT, not against
     --bg. Measured worst case for each, across all six rungs, the ceiling,
     and glass resolved over the ceiling:

         --muted   #C4BCB1   8.31:1
         --muted-2 #AEA8A1   6.63:1   <- the floor. Nothing below it, any size.
         --gold-meta #CAA265 6.59:1

     Raising the floor is the correct response to darkening the ground: the
     ground got darker, but it also became a DEFINED text backdrop for the
     first time, so the floor is now measured somewhere real. */
  --muted:    #C4BCB1;
  --muted-2:  #AEA8A1;

  /* --- accents ---
     --gold / --gold-hi / --gold-dim are the Aurora names. Use these
     in any new rule; nothing in this platform should reference a
     colour by a hue name it no longer holds. */
  --gold:     #EEB762;
  --gold-hi:  #F3DBB2;
  /* --gold-dim IS NOT A TEXT COLOUR. Measured against every rung of the
     ladder it fails WCAG AA outright - 4.04:1 on --bg, 3.79:1 on --surface,
     3.16:1 on --surface-3, 3.30:1 on the atmosphere ceiling. It survives here
     for BORDERS, ICON STROKES, SCROLLBAR THUMBS and gradient stops, where no
     contrast minimum applies. Anything that sets it as `color:` is a live
     accessibility defect and must move to --gold-meta. */
  --gold-dim: #8A6B3A;
  /* The readable gold for meta, labels and small print. Same hue family
     (h 37 vs --gold-dim's h 34), 6.59:1 at its worst. */
  --gold-meta:#CAA265;

  /* --- inherited hue names: STILL LOAD-BEARING, but only just ---
     These are not decoration. A surface further up the cascade can declare
     its own --pink/--violet with the ORIGINAL magenta/violet value, and this
     file loads last, so these two declarations are what force it gold.

     Remaining declarer, as of this pass:
       admin/admin.css   --pink: #e8c472   --violet: #e19b4a   (out of scope,
                         recolour-only surface, so it keeps the hue names)

     Cleared since the comment was written:
       portal/verify.php (/certificates) declared --pink: #ff5be0. It now uses
       --accent / --accent-hi and carries no magenta at all, so the
       [style*="#ff5be0"] override further down this file no longer matches
       anything on that route.
       help/assets/css/help.css no longer declares either name.

     Remove these two ONLY after admin/admin.css stops declaring them. */
  --pink:     #EEB762;
  --violet:   #F3DBB2;

  /* --- semantic ---
     Green on a winning figure and red on a loss are the only cool /
     non-gold values Aurora permits. There is deliberately no --info:
     the sky blue it used to hold was a standing invitation to put a
     cool accent on a warm platform. */
  --good:     #22C55E;
  --bad:      #EF4444;

  /* Tighter than the inherited 28px: large radii read as consumer
     software, and this is a financial product. */
  --radius:   18px;

  /* Aurora runs one easing curve everywhere. --motion-smooth is the
     inherited name that dozens of transitions already reference, so
     it is repointed at Aurora's curve rather than replaced. The
     fallback matters: this file also loads on surfaces that do not
     link fpfx-aurora.css (admin, portal/checkout.php). */
  --motion-smooth: var(--au-ease, cubic-bezier(.2,.8,.3,1));
}

/* ================================================================
   Literal overrides — inherited purple/pink that was not tokenised.
   ================================================================ */

/* accent text and links
   The guard on every .legal-body descendant rule below is load-bearing.
   .legal-body is the BODY element on the legal routes, so every piece of
   shared chrome renders inside it, and an unguarded `.legal-body a`
   (0,1,1) outranks each of those components' own single-class rules
   (0,1,0). :where() contributes 0 specificity, so the guard changes which
   elements match and nothing else.

   .plinth — the shared footer. Measured before that guard: 36 plinth
   elements were being claimed by these five rules, including
   .plinth-set-h whose designed .18em tracking was overridden to -.02em.

   .fh / .fh-sheet — the shared header and its mobile bottom sheet. THE
   SAME BUG, LEFT UNFIXED WHEN .plinth WAS ADDED. Measured on /terms and
   on every one of the sixteen help routes: .fh-cta computed
   color:rgb(238,183,98), which is EXACTLY the left stop of its own
   `linear-gradient(100deg,#EEB762,#F3DBB2)` background — a contrast ratio
   of 1.00:1, a "Get funded" button with an invisible label. It was not
   only the button: .fh-login, .fh-help, .fh-aff, .fh-site and .fh-logo
   all measured #EEB762 too, so the whole chrome hierarchy was flattened
   to one colour on those 23 routes while reading correctly on /,
   /affiliates and /certificates. Correct values, restored by this guard:
   .fh-cta rgb(15,13,9) and .fh-login / .fh-help rgb(142,138,130).

   .fpfx-announce — the operator announcement strip, which renders above
   the header on the same 7 legal routes and has the identical defect:
   .fpfx-announce-cta sets color:#0f0d09 (0,1,0) over a gold pill and was
   measured at rgb(238,183,98), 1.00:1 against its own background.

   RAISING SPECIFICITY ON .fh-cta WOULD HAVE BEEN THE WRONG FIX — it
   leaves the other five elements flattened. The defect is that this rule
   claims chrome it does not own; the guard is what says so. */
[style*="#ff5be0"],
.legal-body a:not(:where(.plinth *, .fh *, .fh-sheet *, .fpfx-announce *)),
.legal-side a:not(:where(.plinth *, .fh *, .fh-sheet *, .fpfx-announce *)){ color:var(--gold); }
.legal-body a:not(:where(.plinth *, .fh *, .fh-sheet *, .fpfx-announce *)):hover,
.legal-side a:not(:where(.plinth *, .fh *, .fh-sheet *, .fpfx-announce *)):hover{ color:var(--gold-hi); }

/* panels, cards and rails that hardcoded violet tints */
.legal-hero, .legal-card, .legal-notice, .legal-highlight,
.legal-section, .legal-toc, .legal-side{
  border-color:var(--line) !important;
}
.legal-hero{
  background:
    radial-gradient(760px 380px at 18% -30%, rgba(238,183,98,.15), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg)) !important;
}
.legal-notice{
  background:rgba(238,183,98,.07) !important;
  border-color:var(--line-strong) !important;
}
.legal-highlight b, .legal-highlight strong{ color:var(--gold) !important; }

/* the inherited green used for "verified" states stays semantic,
   but is aligned to the platform's green */
[style*="#2fe3a0"], [style*="#49e1aa"]{ color:var(--good) !important; }

/* selection + focus */
::selection{ background:rgba(238,183,98,.28); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* scrollbar, so even the chrome reads on-brand.
   The track is --bg-void, not --bg-2: a scrollbar gutter is a hole in the
   page, so it belongs on the rung below the ground rather than on the one
   used for section bands. --gold-dim as the thumb is correct - it is a
   graphic, not text, and carries no contrast minimum. */
*{ scrollbar-color:var(--gold-dim) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:var(--bg-void); }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold-dim),#3e3525);
  border-radius:8px; border:2px solid var(--bg-void);
}
*::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ================================================================
   Legal pages: typography for long-form reading.
   These documents are dense and are read under pressure — usually
   right before someone spends money — so measure, rhythm and
   scannability matter more than decoration.
   ================================================================ */
.legal-body{ font-size:.95rem; line-height:1.78; }
/* .fh-sheet-note is a <p> inside the bottom sheet and was being given a
   76ch measure by this rule. Same guard, same reason as the links above:
   a prose measure is for the document, not for the chrome around it. */
.legal-body p:not(:where(.plinth *, .fh *, .fh-sheet *, .fpfx-announce *)){ max-width:76ch; }
.legal-body h2:not(:where(.plinth *)){ letter-spacing:-.02em; }
.legal-body h3:not(:where(.plinth *)){ color:var(--text); letter-spacing:-.015em; }
.legal-body li:not(:where(.plinth *)){ max-width:74ch; }
.legal-body strong:not(:where(.plinth *)),
.legal-body b:not(:where(.plinth *)){ color:var(--text); font-weight:600; }

/* section anchors get a quiet gold rule rather than a heavy header */
.legal-section{ scroll-margin-top:96px; }
.legal-section + .legal-section{ border-top:1px solid var(--line); }

/* the sticky contents rail */
.legal-toc a{
  border-left:2px solid transparent;
  transition:border-color .24s var(--motion-smooth), color .24s var(--motion-smooth),
             background .24s var(--motion-smooth);
}
.legal-toc a:hover{ background:var(--surface); color:var(--text); border-left-color:var(--gold); }
.legal-toc a.is-active{ border-left-color:var(--gold); color:var(--gold); background:var(--surface-2); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ================================================================
   legal.css literal overrides
   The inherited legal stylesheet hardcodes a purple palette on
   class selectors, which outranks the tokenised `body` rule.
   Each selector below mirrors one in legal.css.
   ================================================================ */
body:not(.au-host).legal-body{ background:var(--bg) !important; }

.legal-hero::before{
  background:radial-gradient(circle at 78% 24%, rgba(238,183,98,.16), transparent 62%) !important;
}

/* the two drifting accent dots */
.legal-orbit::before,.legal-orbit::after{
  background:var(--gold) !important;
  box-shadow:0 0 22px rgba(238,183,98,.7) !important;
}
.legal-orbit-two::after{
  background:var(--gold-hi) !important;
  box-shadow:0 0 22px rgba(243,219,178,.6) !important;
}

.legal-highlight{
  border-color:var(--line) !important;
  background:linear-gradient(150deg, rgba(238,183,98,.10), rgba(238,183,98,.02)) !important;
}

.legal-toc{ background:var(--surface) !important; }

.legal-help-card{
  background:linear-gradient(135deg, rgba(238,183,98,.13), rgba(238,183,98,.03)) !important;
  border:1px solid var(--line) !important;
}

.legal-callout{
  background:linear-gradient(140deg, var(--surface-3), var(--surface)) !important;
  border:1px solid var(--line-strong) !important;
}

.legal-section-number{
  border-color:var(--line-strong) !important;
  background:linear-gradient(150deg, rgba(238,183,98,.16), rgba(238,183,98,.04)) !important;
  color:var(--gold) !important;
}

.legal-policy-grid a:hover{
  border-color:var(--line-strong) !important;
  background:var(--surface-2) !important;
}

.rules-program-card{
  border-color:var(--line) !important;
  background:linear-gradient(145deg, var(--surface-2), var(--surface)) !important;
}
.rules-program-head > span{
  background:rgba(238,183,98,.12) !important;
  border-color:var(--line-strong) !important;
  color:var(--gold) !important;
}

/* operator / payment-entity disclosure block */
.legal-operator-note,.legal-entity-note{
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
}


/* ==== assets/css/fpfx-header.css ==== */
/* ================================================================
   FPFX — public header

   A navigation bar, and a second tier the calling surface fills with
   its own strip. On small screens the menu is a bottom sheet instead
   of a full-screen overlay, so the primary action stays within thumb
   reach.

   THE PROOF TICKER RAIL THAT USED TO SIT ABOVE THIS BAR IS GONE, and
   its rules with it: .fh-rail, .fh-rail-track, .fh-rail-set, .fh-rail-i
   and @keyframes fhMarq. The marquee was a WCAG 2.2.2 (Pause, Stop,
   Hide) failure — an infinite 48s translateX(-50%) whose only pause was
   :hover, which no keyboard and no touch screen can reach — and the
   content fitted on one line at every viewport it was measured at, so
   the second pass existed purely to make the loop seamless. The proof
   now prints as a static band below the home page hero, where it is the
   argument being made. See the note in public-header.php.
   ================================================================ */

/* ---------- navigation bar ---------- */
.fh{position:sticky;top:0;z-index:60;background:rgba(5,5,5,.96);
  /* NO backdrop-filter. A sticky blurred bar re-blurs its backdrop on every
     scroll frame, because the content behind it moves every frame — the most
     expensive thing on this page's scroll path. It was blur(16px) under a 90%
     opaque ground and .stuck already raised that to 96%, so the blur was
     paying full price to be invisible. Ground raised to the .stuck value. */
  border-bottom:1px solid rgba(238,183,98,.12);
  transition:box-shadow .3s ease,background .3s ease}
.fh.stuck{background:rgba(5,5,5,.96);box-shadow:0 14px 40px -28px #000}
.fh-in{max-width:1240px;margin:0 auto;padding:0 26px;height:66px;display:flex;align-items:center;gap:26px}
.fh.stuck .fh-in{height:58px}
.fh-in,.fh.stuck .fh-in{transition:height .3s cubic-bezier(.22,.61,.36,1)}

.fh-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.fh-word{display:flex;flex-direction:column;line-height:1.06;font-weight:800;
  /* The wordmark is a logotype: it takes the DISPLAY face, not the inherited
     body face. line-height was .98, which left the box 2px shorter than the
     glyphs - with background-clip:text on the second line that risks shaving
     the gradient. 1.06 contains it. */
  font-family:var(--au-disp,"Outfit",system-ui,sans-serif);
  letter-spacing:-.035em;font-size:.9rem;color:#F8F8F8}
.fh-word em{font-style:normal;background:linear-gradient(100deg,#F3DBB2,#EEB762 46%,#8A6B3A);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.fh-nav{display:flex;gap:4px;margin-right:auto}
@media(max-width:1000px){.fh-nav{display:none}}
.fh-nav a{position:relative;padding:9px 12px;border-radius:8px;font-size:.87rem;color:var(--muted,#C4BCB1);
  text-decoration:none;transition:color .26s ease,background .26s ease}
.fh-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;
  background:linear-gradient(90deg,#EEB762,#F3DBB2);transform:scaleX(0);transform-origin:right;
  transition:transform .34s cubic-bezier(.16,1,.3,1)}
.fh-nav a:hover{color:#F8F8F8}
.fh-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.fh-nav a[aria-current=page]{color:#EEB762}
.fh-nav a[aria-current=page]::after{transform:scaleX(1)}

.fh-act{display:flex;align-items:center;gap:9px;margin-left:auto}
.fh-help{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;
  color:var(--muted,#C4BCB1);text-decoration:none;font-size:.85rem;
  border:1px solid transparent;transition:background-color .28s ease,border-color .28s ease,color .28s ease}
.fh-help:hover{color:#EEB762;border-color:rgba(238,183,98,.28);background:var(--surface,#171109)}
@media(max-width:1180px){.fh-help span{display:none}}
@media(max-width:1000px){.fh-help{display:none}}

.fh-login{padding:9px 15px;border-radius:9px;font-size:.86rem;color:var(--muted,#C4BCB1);text-decoration:none;
  border:1px solid rgba(238,183,98,.15);transition:background-color .28s ease,border-color .28s ease,color .28s ease}
.fh-login:hover{color:#F8F8F8;border-color:rgba(238,183,98,.42);background:var(--surface,#171109)}
@media(max-width:1000px){.fh-in > .fh-act > .fh-login{display:none}}

.fh-cta{position:relative;overflow:hidden;isolation:isolate;padding:10px 20px;border-radius:9px;
  font-size:.86rem;font-weight:700;text-decoration:none;color:#120E06;
  background:linear-gradient(100deg,#EEB762,#F3DBB2);
  box-shadow:0 10px 26px -12px rgba(238,183,98,.7);
  transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.fh-cta span{position:relative;z-index:2}
.fh-cta::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#F3DBB2,#fff3de);
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.fh-cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(238,183,98,.85)}
.fh-cta:hover::before{transform:translateX(0)}

.fh-burger{display:none;width:40px;height:40px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(238,183,98,.18);background:var(--surface,#171109);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
@media(max-width:1000px){.fh-burger{display:flex}}
.fh-burger i{display:block;width:16px;height:1.6px;border-radius:2px;background:#EEB762;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.fh-burger[aria-expanded=true] i:first-child{transform:translateY(3.3px) rotate(45deg)}
.fh-burger[aria-expanded=true] i:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ---------- bottom sheet ---------- */
.fh-scrim{position:fixed;inset:0;z-index:78;background:rgba(3,3,3,.72);
  backdrop-filter:blur(5px);opacity:0;transition:opacity .3s ease}
.fh-scrim.on{opacity:1}
.fh-sheet{position:fixed;left:0;right:0;bottom:0;z-index:79;
  border-top:1px solid rgba(238,183,98,.28);border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#211810,#0A0806);
  box-shadow:0 -30px 70px -30px #000;padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .42s cubic-bezier(.16,1,.3,1);
  max-height:86vh;overflow-y:auto}
.fh-sheet.on{transform:translateY(0)}
.fh-sheet-grab{width:38px;height:4px;border-radius:3px;margin:0 auto 16px;
  background:rgba(238,183,98,.28)}
.fh-sheet-nav{display:flex;flex-direction:column;gap:2px}
.fh-sheet-nav a{display:flex;align-items:center;gap:13px;padding:14px 12px;border-radius:11px;
  color:#c9c4bb;text-decoration:none;font-size:1rem;font-weight:500;
  transition:background .24s ease,color .24s ease}
.fh-sheet-nav a i{font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;color:var(--muted-2,#AEA8A1);flex:none}
.fh-sheet-nav a span{margin-left:auto;color:var(--muted-2,#AEA8A1);transition:transform .26s ease,color .26s ease}
.fh-sheet-nav a:hover,.fh-sheet-nav a:focus-visible{background:var(--surface-3,#2E2116);color:#fff}
.fh-sheet-nav a:hover span{color:#EEB762;transform:translateX(3px)}
.fh-sheet-nav a[aria-current=page]{color:#EEB762;background:var(--surface-3,#2E2116)}
.fh-sheet-foot{margin-top:16px;padding-top:16px;border-top:1px solid rgba(238,183,98,.12)}
.fh-sheet-help{display:block;padding:12px;border-radius:10px;text-align:center;font-size:.88rem;
  color:var(--muted,#C4BCB1);text-decoration:none;border:1px dashed rgba(238,183,98,.28);margin-bottom:12px}
.fh-sheet-help:hover{color:#EEB762;border-color:#EEB762}
.fh-sheet-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fh-sheet-act .fh-login,.fh-sheet-act .fh-cta{display:block;text-align:center;padding:13px}
.fh-sheet-note{margin:14px 0 0;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2,#AEA8A1)}

body.fh-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .fh-sheet,.fh-scrim,.fh-cta,.fh-burger i,
  .fh-site,.fh-site span{transition-duration:.001ms !important}
}

/* ================================================================
   MIRRORED FILE — edit assets/css/fpfx-header.css and copy to
   portal/assets/css/ and help/assets/css/. The cache-buster reads the
   root copy's mtime while the browser fetches the surface copy, so a
   surface-only edit ships behind a version string that disagrees with
   the file.

   VARIANTS
   ----------------------------------------------------------------
   One header, five compositions. `full` is the bar above and needs no
   class of its own — the hook only exists where the markup differs.
   These blocks add nothing but structure: no colour is introduced or
   changed here, every value below is one already used above.
   ================================================================ */

/* The help centre trades its marketing nav row for the one route to
   the affiliate programme it otherwise has nowhere. Styled as a quiet
   text link rather than a second bordered button, so the bar still has
   exactly one primary action. */
.fh-aff{padding:9px 12px;border-radius:9px;font-size:.86rem;color:var(--muted,#C4BCB1);text-decoration:none;
  border:1px solid transparent;transition:background-color .28s ease,border-color .28s ease,color .28s ease}
.fh-aff:hover{color:#EEB762;border-color:rgba(238,183,98,.28);background:var(--surface,#171109)}
@media(max-width:1000px){.fh-aff{display:none}}   /* the sheet carries it */

/* THE LABELLED ROUTE BACK TO THE MAIN SITE — 'desk' and 'auth'.
   ----------------------------------------------------------------
   Same quiet-text treatment as .fh-aff above, for the same reason:
   these are exits, and the bar keeps exactly one primary action. No
   new colour — #8E8A82 at .86rem is body-size text, well clear of the
   #948C82 floor, which is licensed for 10-11px meta only.

   The arrow is decorative and marked aria-hidden in the markup, so the
   accessible name is the words alone. Colour is never the only signal:
   the words say where it goes, and hover, focus and the arrow's nudge
   all fire together. */
.fh-site{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  padding:9px 12px;border-radius:9px;font-size:.86rem;color:var(--muted,#C4BCB1);text-decoration:none;
  border:1px solid transparent;transition:color .28s ease,border-color .28s ease,background .28s ease}
.fh-site span{color:var(--muted-2,#AEA8A1);transition:transform .26s cubic-bezier(.2,.8,.3,1),color .28s ease}
.fh-site:hover,.fh-site:focus-visible{color:#EEB762;border-color:rgba(238,183,98,.28);background:var(--surface,#171109)}
.fh-site:hover span,.fh-site:focus-visible span{color:#EEB762;transform:translate(2px,-2px)}
/* Focus must be visible on a surface that may not set one of its own.
   The portal auth pages have no global :focus-visible rule the way the
   help centre does, and this link is the first tab stop after the
   crest. */
.fh-site:focus-visible{outline:2px solid #EEB762;outline-offset:3px}
/* Below the burger breakpoint the sheet carries the whole marketing
   nav — every row of which is a main-site destination — and the crest
   still links there too, so the bar sheds this rather than crowding a
   360px viewport. Two independent routes remain at every width. */
@media(max-width:1000px){.fh-site{display:none}}

/* The payment page has no nav row and no sheet, so its bar is a crest
   and one link and can sit lower. 'auth' is NOT in this rule any more:
   it now carries the six-item nav and the bottom sheet, so it is the
   'full' bar minus the account actions and takes the same 66px. */
.fh-checkout .fh-in{height:60px}

/* Help is the ONLY link off the payment page. The rules above hide its
   label below 1180px and the link itself below 1000px, which is correct
   when it is one of three actions and wrong when it is the last one
   standing: on a phone it would leave a payment form with no way out at
   all. 'auth' is not in this rule either — it has the sheet, and the
   sheet has .fh-sheet-help. */
.fh-checkout .fh-help{display:inline-flex}
.fh-checkout .fh-help span{display:inline}

/* Tier two — the policy switcher on legal, the search band on the help
   centre — is emitted inside <header> after .fh-in and keeps its own
   stylesheet. It gets no box from here on purpose: this file owns the
   banner, not the strip inside it. What it does get is the sticky
   parent, so those strips must DROP their own `position:sticky` when
   they move in; a sticky child of a sticky parent only travels within
   the parent's box, which is not what either of them means. */


/* ==== assets/css/fpfx-plinth.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   FPFX — THE PLINTH
   The shared public footer rendered by public-footer.php.

   MIRRORED FILE. Each surface serves its own document root, so this file lives
   three times:

     assets/css/fpfx-plinth.css            <- EDIT THIS ONE
     portal/assets/css/fpfx-plinth.css     <- cp
     help/assets/css/fpfx-plinth.css       <- cp

   The cache-buster reads the ROOT copy's mtime while the browser fetches the
   surface copy, so editing a surface copy leaves the version string and the
   file disagreeing. Always edit here, then copy across.

   SELF-SUFFICIENT BY REQUIREMENT
   ------------------------------
   This footer renders on the checkout page, which deliberately does NOT load
   fpfx-aurora.css — a drifting gold mesh behind a payment form is not an
   improvement, and pulling the design system in there would also change the
   page's type stack. So every Aurora token below is consumed through a literal
   fallback, e.g. var(--au-gold,#F3C46A). The file defines no --au-* token of
   its own: where Aurora IS loaded the footer picks up the live values, and
   where it is not it still renders exactly as intended.

   TYPOGRAPHY IS INHERITED, NOT IMPOSED
   ------------------------------------
   No font-family on .plinth. Every surface now resolves its body text to
   DM Sans — fpfx.css:26 and fpfx-checkout.css:42 both read var(--au-body)
   with a literal "DM Sans" fallback for the surfaces that do not load
   fpfx-aurora.css. Inheriting rather than declaring is still the right call:
   it is what kept this file correct through the Inter/Manrope sweep without
   being touched, and it is what will keep it correct through the next one.
   The only family this file names is the monospace chain for the figures and
   meta, which is what makes an index number read as an index number on all
   seven surfaces.

   COLOUR
   ------
   Warm only. No blue, violet or teal. #948C82 (--au-dim) is the contrast floor
   and nothing here is dimmer or smaller than 10px. --muted-2 / #948C82 is used
   by 131 declarations elsewhere in the build and is NOT touched by this file;
   new footer meta starts at the floor instead.

   MOTION
   ------
   One easing curve, cubic-bezier(.2,.8,.3,1), on everything.

   THE SIGNATURE INTERACTIONS NEED NO JAVASCRIPT OF THEIR OWN
   ----------------------------------------------------------
   The hand-off cards carry data-au-panel, which the existing sweep in
   assets/js/fpfx-aurora.js binds. It only sets custom properties: --mx/--my
   for the pointer's position over the card and --edge for the angle from the
   card's centre to the pointer. This file draws both effects from those three.

   NOT data-au-btn as well, even though the card is a link and the growing fill
   is the button's effect. fpfx-aurora.js guards bindPanel (:30) and bindButton
   (:51) with the SAME per-element `data-au-bound` flag and init() (:171) sweeps
   panels first, so an element carrying both attributes silently loses the
   button binding — verified by dispatching pointer events at a card with both:
   --mx and --edge were set, --fx and --fy never were. Hence one attribute and
   one source of truth. Without the script the values fall back to the defaults
   below and the cards degrade to a plain hover, which is the intended
   fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Typed so the edge light can rotate smoothly rather than jumping between
   computed values. Declared identically in fpfx-aurora.css; a second identical
   declaration is a no-op, and it is repeated here because the checkout page
   loads this file without that one. */
@property --edge { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ── ground ───────────────────────────────────────────────────────────────
   `footer{}` in assets/css/fpfx.css sets padding, border and background on the
   bare element (0,0,1). Every one of those is restated here at (0,1,0) so the
   inherited rule cannot reach this component on the pages that load both. */
.plinth{
  position:relative;
  z-index:1;
  padding:0;
  border-top:1px solid var(--au-line,rgba(255,255,255,.10));
  background:var(--au-bg,#0A0806);
  color:var(--au-text,#F5F3F0);
  line-height:1.5;
}
/* A single warm bloom on the top edge, so the band reads as lit from the page
   above rather than as a black box bolted underneath it. */
.plinth::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,
    rgba(243,196,106,.055),rgba(154,90,46,.02) 46%,transparent 72%);
}

/* Local resets. These pages carry four different base stylesheets between
   them; the footer must not inherit a list bullet or an h2 size from any of
   them. */
.plinth ul,.plinth ol{list-style:none;margin:0;padding:0}
.plinth dl,.plinth dd,.plinth p,.plinth h2{margin:0}
.plinth a{text-decoration:none}
.plinth b{font-weight:700}

.plinth-handoff,.plinth-id,.plinth-dir,.plinth-reg,.plinth-base{
  max-width:1240px;margin:0 auto;padding-left:26px;padding-right:26px;
  position:relative;z-index:1;
}

/* ── 1 · hand-off ─────────────────────────────────────────────────────────
   Destinations lead. Three cards on desktop, two on a tablet, one stacked on a
   phone — the tiles are the band that closes the link graph, so they never
   collapse into a list of text links. */
.plinth-handoff{
  padding-top:52px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.plinth-go{
  position:relative;isolation:isolate;overflow:hidden;display:block;
  padding:20px 22px 22px;
  border:1px solid var(--au-line,rgba(255,255,255,.10));
  border-radius:var(--au-rad,18px);
  background:var(--au-glass,rgba(13,11,10,.58));
  -webkit-backdrop-filter:blur(10px) saturate(150%);
          backdrop-filter:blur(10px) saturate(150%);
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             border-color var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
/* The fill grows from the point the pointer is at — which, on the first frame
   of a hover, is the point it crossed the edge. Keyed to --mx/--my, the two
   properties the panel binder actually feeds. */
.plinth-go::before{
  content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);z-index:-1;
  width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(243,196,106,.16),rgba(224,145,60,.08) 48%,rgba(154,90,46,0) 76%);
  transition:width var(--au-slow,.55s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             height var(--au-slow,.55s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
/* The edge lights on the side the cursor is on: a conic gradient rotated to
   face the pointer and masked to 1px, not a uniform border glow. */
.plinth-go::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  pointer-events:none;opacity:0;
  transition:opacity var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
  background:conic-gradient(from var(--edge,0deg),transparent 0deg,
    var(--au-line-hi,rgba(243,196,106,.42)) 26deg,rgba(255,240,206,.85) 46deg,
    var(--au-line-hi,rgba(243,196,106,.42)) 66deg,transparent 96deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.plinth-go:hover,.plinth-go:focus-visible{transform:translateY(-2px)}
.plinth-go:hover::before,.plinth-go:focus-visible::before{width:240%;height:240%}
.plinth-go:hover::after{opacity:1}
.plinth-go:focus-visible{outline:2px solid var(--au-gold,#F3C46A);outline-offset:3px}

.plinth-go-k{
  display:block;margin-bottom:12px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.16em;color:var(--au-dim,#AEA8A1);
}
.plinth-go-t{
  display:block;margin-bottom:6px;
  font-size:1.02rem;font-weight:700;letter-spacing:-.015em;
  color:var(--au-text,#F5F3F0);
}
.plinth-go-d{
  display:block;max-width:34ch;
  font-size:.83rem;line-height:1.55;color:var(--au-muted,#BCB5AB);
}
.plinth-go-arw{
  position:absolute;right:20px;top:18px;font-style:normal;font-size:15px;
  color:var(--au-gold,#F3C46A);
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-go:hover .plinth-go-arw{transform:translate(4px,-4px)}

/* ── 2 · identity ─────────────────────────────────────────────────────────
   One horizontal line: mark, sentence, profiles. Not a 2fr cell heading a
   five-column grid. */
.plinth-id{
  margin-top:42px;padding-top:26px;padding-bottom:26px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;
}
.plinth-mark{display:inline-flex;align-items:center;gap:10px;flex:none}
.plinth-word{
  /* Logotype - display face, and a line-height that actually contains the
     glyphs (was .98, 2px short, which risks shaving the gradient second line). */
  display:flex;flex-direction:column;line-height:1.06;
  font-family:var(--au-disp,"Outfit",system-ui,sans-serif);
  font-weight:800;letter-spacing:-.035em;font-size:.9rem;
  color:var(--au-text,#F5F3F0);
}
.plinth-word em{
  font-style:normal;
  background:var(--au-grad,linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plinth-lede{
  flex:1 1 420px;max-width:74ch;
  font-size:.8rem;line-height:1.62;color:var(--au-muted,#BCB5AB);
}
.plinth-social{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-left:auto;flex:none;
}
/* Scoped one level deeper than assets/css/fpfx-socials.css's own
   `.fpfx-social-links .fpfx-social-link`, so the profiles look the same on all
   seven surfaces whether or not that file happens to be loaded. */
.plinth .plinth-social .fpfx-social-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px;min-height:32px;
  border:1px solid var(--au-line,rgba(255,255,255,.10));
  border-radius:var(--au-pill,100px);
  background:rgba(255,255,255,.04);
  color:var(--au-muted,#BCB5AB);
  font-size:11px;font-weight:600;line-height:1;
  box-shadow:none;
  transition:color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             border-color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             transform var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth .plinth-social .fpfx-social-link:hover,
.plinth .plinth-social .fpfx-social-link:focus-visible{
  transform:translateY(-2px);
  color:var(--au-gold-hi,#FFF0CE);
  border-color:var(--au-line-hi,rgba(243,196,106,.42));
  background:rgba(243,196,106,.08);
  outline:none;
}
.plinth .plinth-social .fpfx-social-mark{
  width:22px;height:22px;flex:0 0 22px;border-radius:var(--au-pill,100px);
  display:inline-grid;place-items:center;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:9px;font-weight:700;letter-spacing:.02em;color:#150F05;
  background:var(--au-grad,linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E));
  box-shadow:none;
}

/* ── 3 · directory ───────────────────────────────────────────────────────
   One wrapping chip rail with inline set labels. It wraps; it never collapses
   into columns, so no set can be pushed off a narrow screen. */
.plinth-dir{
  padding-top:26px;padding-bottom:26px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:flex;flex-direction:column;gap:14px;
}
.plinth-set{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px}
.plinth-set-h{
  flex:none;min-width:104px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
}
.plinth-lnk{
  position:relative;isolation:isolate;overflow:hidden;
  padding:7px 13px;border-radius:var(--au-pill,100px);
  border:1px solid var(--au-line-2,rgba(255,255,255,.06));
  font-size:.81rem;color:var(--au-muted,#BCB5AB);
  transition:color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             border-color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
/* The chip fills from the leading edge rather than lifting or brightening. */
.plinth-lnk::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(243,196,106,.16),rgba(224,145,60,.06));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-lnk:hover,.plinth-lnk:focus-visible{
  color:var(--au-gold-hi,#FFF0CE);
  border-color:var(--au-line-hi,rgba(243,196,106,.42));
  outline:none;
}
.plinth-lnk:hover::before,.plinth-lnk:focus-visible::before{transform:scaleX(1)}

/* ── 4 · disclosure register ─────────────────────────────────────────────
   Full-width bands, not a two-column split.

   This used to be a sidebar layout: facts in a minmax(240px,.85fr) column and
   the risk disclosure in a 1.6fr column beside it. On a 1280px viewport that
   computed to columns of 396.891px and 747.094px with a 44px gap, so
   .plinth-risk-h and .plinth-risk started at left:479 while .plinth-handoff,
   .plinth-id, .plinth-dir, .plinth-reg and .plinth-base all started at
   left:13 (content edge left:39). The heading therefore sat 440px inside the
   footer's own left edge and no sibling agreed with it — that is the reported
   misalignment. It also left ~310px of dead space below the short facts
   column, because the facts stack measured 204px tall against the register's
   514px.

   Facts now run as a horizontal fact row and the risk register spans the full
   container width beneath them, so every band in the footer shares one left
   and one right edge. */
.plinth-reg{
  padding-top:28px;padding-bottom:26px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  align-items:start;
}
.plinth-facts{
  grid-column:1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px 44px;
}
.plinth-facts>div{display:grid;gap:3px}
.plinth-facts dt{
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
}
.plinth-facts dd{font-size:.84rem;font-weight:600;color:var(--au-text,#F5F3F0)}
.plinth-rel{
  grid-column:1;font-size:.78rem;line-height:1.6;color:var(--au-muted,#BCB5AB);
}
/* The heading opens its own band now, so it carries the hairline that the
   column split used to imply. grid-row is left to flow: pinning it to row 1
   is what held it level with the facts in the old sidebar. */
.plinth-risk-h{
  grid-column:1;margin-top:4px;padding-top:18px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--au-gold,#F3C46A);
}
/* Four statements across two columns rather than one 747px-wide stack, so the
   band fills the width it now spans instead of running long and thin. */
.plinth-risk{
  grid-column:1;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 44px;
}
.plinth-risk li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding-left:12px;border-left:1px solid var(--au-line-2,rgba(255,255,255,.06));
}
.plinth-risk-n{
  padding-top:2px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.1em;color:var(--au-dim,#AEA8A1);
}
.plinth-risk p{font-size:.775rem;line-height:1.62;color:var(--au-muted,#BCB5AB)}
.plinth-risk-lite{
  grid-column:1;font-size:.8rem;line-height:1.64;color:var(--au-muted,#BCB5AB);
}
.plinth-risk-lnk{
  color:var(--au-gold,#F3C46A);
  border-bottom:1px solid rgba(243,196,106,.34);
  transition:border-color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-risk-lnk:hover{color:var(--au-gold-hi,#FFF0CE);border-bottom-color:var(--au-gold,#F3C46A)}
.plinth-extra{
  grid-column:1;margin-top:14px;padding-left:12px;
  border-left:2px solid var(--au-line-hi,rgba(243,196,106,.42));
  font-size:.775rem;line-height:1.6;color:var(--au-muted,#BCB5AB);
}

/* ── 5 · baseline ────────────────────────────────────────────────────────
   Three cells, so it cannot read as the inherited two-cell copyright bar. */
.plinth-base{
  padding-top:16px;padding-bottom:24px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:grid;grid-template-columns:1fr auto auto;gap:10px 22px;align-items:center;
}
.plinth-cr{font-size:11px;color:var(--au-dim,#AEA8A1)}
.plinth-note{
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
}
.plinth-top{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
  transition:color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-top i{
  font-style:normal;
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-top:hover{color:var(--au-gold,#F3C46A)}
.plinth-top:hover i{transform:translateY(-3px)}

/* ── density ─────────────────────────────────────────────────────────────
   Compact is for a visitor mid-task — support, sign-in, checkout, the
   certificate wall. Same bands, less air, condensed disclosure. */
.plinth[data-density=compact] .plinth-handoff{padding-top:38px}
.plinth[data-density=compact] .plinth-id{margin-top:30px;padding-top:22px;padding-bottom:22px}
.plinth[data-density=compact] .plinth-dir,
.plinth[data-density=compact] .plinth-reg{padding-top:22px;padding-bottom:22px}
/* With no hand-off band the identity line is the first thing in the footer and
   needs its own top air instead of a rule. */
.plinth[data-density=compact] .plinth-handoff+.plinth-id{margin-top:26px}
.plinth[data-surface=checkout] .plinth-id{margin-top:0;padding-top:34px;border-top:0}

/* ── responsive ──────────────────────────────────────────────────────────
   Tiles 3 -> 2 -> 1, register 2 columns -> 1, chip rail wraps throughout. */
@media (max-width:1040px){
  .plinth-handoff{grid-template-columns:repeat(2,1fr)}
  .plinth-social{margin-left:0;width:100%}
}
@media (max-width:900px){
  /* .plinth-reg is a single column at every width now, so only the two inner
     grids need to collapse: the risk register from two statement columns to
     one, and the fact row from three cells to two. */
  .plinth-risk{grid-template-columns:minmax(0,1fr)}
  .plinth-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Three cells stop fitting well before they stop fitting at all: the
     copyright cell is the flexible one, so it is the one that gets crushed
     to a five-line column while the other two keep their width. Stack here
     rather than at the last possible moment. */
  .plinth-base{grid-template-columns:1fr;gap:12px}
  .plinth-top{justify-self:start}
}
@media (max-width:680px){
  .plinth-handoff,.plinth-id,.plinth-dir,.plinth-reg,.plinth-base{
    padding-left:20px;padding-right:20px;
  }
  .plinth-handoff{grid-template-columns:1fr;padding-top:38px}
  .plinth-set-h{min-width:100%}
  .plinth-facts{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .plinth-go,.plinth-go::before,.plinth-go::after,.plinth-lnk,.plinth-lnk::before,
  .plinth-go-arw,.plinth-top i,.plinth .plinth-social .fpfx-social-link{
    transition-duration:.001ms !important;
  }
  .plinth-go:hover{transform:none}
}


/* ==== assets/css/fpfx-aurora.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   FPFX — AURORA DESIGN SYSTEM
   Approved 2026-08-25 from _design/dashboard-preview.html.

   This is the system layer: tokens, primitives and the two signature
   interactions. It sits ABOVE fpfx-theme.css, which remains the compatibility
   shim remapping the inherited stylesheets' tokens. Nothing here depends on
   that file — a page can load this alone.

   THE ONE RULE THAT MATTERS
   -------------------------
   The aurora has two intensities and they are not interchangeable:

     --aurora-strength: 1      marketing, auth, empty states, certificates
     --aurora-strength: .38    any screen carrying tabular figures

   Full strength puts moving light under small numbers, which is exhausting on
   a page someone opens several times a day. Set the calm value on <body> for
   every portal screen. That single variable is what lets one system serve both
   a landing page and a trading dashboard without becoming two designs.

   Requires: fpfx-aurora.js for the cursor-driven effects. Without it the
   components still render correctly, just without the sheen and edge light —
   they degrade to a plain hover, which is the intended fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --edge { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root{
  /* ── ground and glass ────────────────────────────────────────────────────
     Glass is DARK-translucent, not white. White glass over a drifting aurora
     brightens as the light passes and small text disappears — that was a real
     legibility failure in the first pass, not a theoretical one.

     --au-bg WAS a near-black measuring hue 260 at 27% saturation — it was
     a VIOLET ground under a gold brand, and it is why the shadows on every
     Aurora surface read cool however warm the overlays were. Measured across
     one homepage viewport before this pass: lit areas hue 29, shadows hue
     255-270. The ground is now hue 30 at every rung, so no compositing path
     through this system can produce a cool pixel. That is a structural
     guarantee, not a colour preference. */
  --au-void:      #050403;   /* h30 — vignette terminus. Nothing is darker. */
  --au-bg:        #0A0806;   /* h30 — the ground */
  --au-bg-2:      #100C08;   /* h30 — section band / ground highlight */
  --au-bg-3:      #070504;   /* h20 — ground falloff, between bg and void */
  --au-glass:     rgba(13,11,10,.58);
  --au-glass-2:   rgba(18,15,13,.70);
  --au-line:      rgba(255,255,255,.10);
  --au-line-2:    rgba(255,255,255,.06);
  --au-line-hi:   rgba(243,196,106,.42);

  /* ── type colours ────────────────────────────────────────────────────────
     THE RATIOS BELOW ARE WORST CASES, NOT BEST CASES, AND THAT IS THE POINT.

     The old comment on --au-dim read "6.4:1". It was wrong twice over: the
     measured value of #948C82 on the old --au-bg is 6.024:1, not 6.4, and
     --au-bg was never the backdrop that mattered. Text lands on whatever the
     atmosphere has painted. With the aurora at its old .42 opacity the
     rendered ground measured #4B3119, and #948C82 on that is 3.61:1 — a
     WCAG AA failure that was live on every Aurora surface. It is the same
     failure as the rejected #635E58, reached by a different route: the floor
     passed against the token and failed against the pixel.

     So the atmosphere now has a computed ceiling (see .au-aurora) and every
     value here is proven against the WORST backdrop it can land on — all six
     ladder rungs, the ceiling itself, and --au-glass resolved over the
     ceiling (#18130D), which is the true worst case for text on a panel that
     happens to be sitting over a lit band.

     --au-dim is the FLOOR: never introduce a dimmer value, never use it
     above 11px. */
  --au-text:      #F5F3F0;   /* 18.05:1 on --au-bg · 14.09:1 worst case */
  --au-muted:     #BCB5AB;   /*  9.84:1 on --au-bg ·  7.68:1 worst case */
  --au-dim:       #AEA8A1;   /*  8.49:1 on --au-bg ·  6.63:1 worst — THE FLOOR */

  /* ── gold, warm only ─────────────────────────────────────────────────────
     There is no cool value in this system except --au-up on a winning trade.
     Do not add blue, violet or teal accents. */
  --au-gold:      #F3C46A;
  --au-gold-hi:   #FFF0CE;
  --au-gold-lo:   #B4823A;
  --au-amber:     #E0913C;
  --au-copper:    #9A5A2E;
  --au-grad:      linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E);
  --au-glow:      rgba(243,196,106,.32);

  /* ── semantic ── */
  --au-up:        #5BE49B;
  --au-down:      #FF8A73;

  /* ── type ── */
  --au-disp: "Outfit", system-ui, -apple-system, sans-serif;
  --au-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --au-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── geometry and motion ─────────────────────────────────────────────────
     ONE easing curve across the entire system. Consistency of easing is most
     of what makes an interface feel authored rather than assembled. */
  --au-rad:    18px;
  --au-rad-sm: 12px;
  --au-pill:   100px;
  --au-ease:   cubic-bezier(.2,.8,.3,1);
  --au-fast:   .18s;
  --au-base:   .35s;
  --au-slow:   .55s;

  --aurora-strength: 1;
}

/* ── host ────────────────────────────────────────────────────────────────
   Retrofitting a fixed background into pages that were not built for one has a
   trap: a positioned element at z-index 0 paints ABOVE static block boxes, so
   the aurora would cover the page rather than sit behind it. Lifting every
   direct child of the host onto its own layer fixes it in one rule, without
   touching 82 templates individually.

   Put `class="au-host au-grain"` on <body> and make the two background divs its
   first children. */
.au-host{
  position:relative;
  /* THE PAGE GROUND, AND THE DITHER THAT MAKES IT SHIP-ABLE.

     Four stops, hue 30 at every one of them, so the ramp never crosses a
     neutral on its way down. Worth being precise about why that matters,
     because the usual explanation is wrong: CSS gradients interpolate in
     PREMULTIPLIED ALPHA per css-images-4, so `gradient(gold, transparent)`
     does not desaturate through grey in any current engine. The mud on this
     platform never came from interpolation. It came from stacking four warm
     radials over an opaque base measuring hue 255 at 89% saturation — which
     gave hue 29 where the overlays were thick and hue 255-270 wherever they
     thinned. Warm veneer, violet base, cool shadows. Every stop in this
     stack is now hue 20-30, so no compositing path can produce a cool pixel.

     THE SECOND BACKGROUND LAYER IS THE DITHER.
     Measured, taking a visible band as quantisation edges more than 3px apart:

         OLD  aurora blob @ .42     98 steps / 1000px -> an edge every  10.2px
         OLD  body::before radial   72 steps / 1200px -> an edge every  16.7px
         OLD  scrim vignette         6 steps / 1000px -> an edge every 166.7px
         NEW  strata band @ .12     28 steps / 1100px -> an edge every  39.3px
         NEW  vignette to void       5 steps / 1000px -> an edge every 200.0px

     The new ramps band 3.9x less often AND THEY STILL BAND. So would any
     other stop count: a shallow dark ramp bands by geometry, because 8-bit
     sRGB does not have enough codes between #0A0806 and #261F12. Dither is
     the only thing that removes it.

     WHICH LAYER ACTUALLY DOES THE WORK — measured, and NOT what an earlier
     version of this comment asserted. Isolated ground, no content, 1280x900,
     longest run of one identical 8-bit value down three columns:

         this overlay dither + .au-grain::after     7px /  9px /  6px
         this overlay dither ALONE, grain removed  20px / 33px / 26px

     So .au-grain::after is the layer that breaks the plateaus, and this one
     is a contributor rather than the whole fix. The claim that used to stand
     here — that a single octave is "the only thing" that dithers and that
     .au-grain's three octaves "dither nothing" — is false, and it is the kind
     of false claim that gets the working layer weakened by the next person
     reading it. Both layers ship. Do not lower .au-grain::after's opacity
     without re-running the A/B above; at .022 it is already the quiet end of
     what still clears the plateaus, and it sits ABOVE the content, so raising
     it grains 10-11px type.

     background-blend-mode:overlay, not source-over. Source-over can only
     ADD light, so it lifts the ground as much as it dithers it. Measured
     over #0A0806, for the same 3.4 LSB of dither amplitude:

         source-over @ .022   mean lift 1.95 LSB   ground luminance x1.24
         overlay     @ .5     mean lift 1.16 LSB   ground luminance x1.12

     Overlay is bidirectional and, on a dark backdrop, scales with it — so it
     dithers a bright band peak harder than it dithers the void. Hue measured
     at 30.0 after blending, unchanged.

     The alpha is halved inside the SVG (opacity='.5' on the rect) rather than
     with a wrapper element, because background-blend-mode weights by the
     source layer's own alpha and this keeps it to one paint.

     It lives HERE, on the body background, rather than on a fixed overlay
     div, for a reason that is easy to get wrong: overlay needs an opaque
     backdrop to blend against, and a fixed div at z-index:-1 creates its own
     stacking context, so its blend would only ever reach its own background
     and not the ground. Everything above this — five strata at alpha <=.12
     and a vignette — is translucent, so the dither propagates up through the
     whole stack from the bottom. One layer, dithering all of it.

     background-attachment:fixed is load-bearing on the gradient. Without it
     the gradient box is the whole document — over 12,000px on the homepage —
     and the radial smears into a flat wash. Fixed sizes it to the viewport,
     which is the only place a ground gradient means anything. --au-void
     underneath guarantees the darkest possible pixel before the vignette. */
  background-color:var(--au-void);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(150% 105% at 50% -12%,
      var(--au-bg-2) 0%, var(--au-bg) 42%, var(--au-bg-3) 74%, var(--au-void) 100%);
  background-size:180px 180px, cover;
  background-repeat:repeat, no-repeat;
  background-attachment:fixed, fixed;
  background-blend-mode:overlay, normal;
}

/* The backdrop sits on its own negative layer instead of lifting every sibling.
   The earlier version of this rule set `position:relative` on EVERY direct child
   of the host, which silently overrode `position:fixed` on the mobile nav sheet,
   the nebulae, the grain, the cursor glow, the preloader, the auth field and the
   reading-progress bar — they all dropped into the flow and pushed the page
   down. Keep the aurora behind the content by lowering the aurora, never by
   raising the content. */
.au-host > .au-aurora,
.au-host > .au-scrim{ z-index:-1; }

/* ── the atmosphere: LIQUIDITY STRATA ─────────────────────────────────────
   WHAT THIS REPLACED, AND WHY IT IS A DIFFERENT IDEA RATHER THAN A REPAINT.

   Until this pass the ground of the marketing site was the upstream release's
   star field — a <canvas> painter that was byte-identical to its origin across
   121 lines, whose tint table was three-fifths cool (hue 260 violet, hue 313
   magenta, hue 218 blue). Measured on one homepage viewport at 1280x900:
   31,186 lit canvas pixels, of which 27,553 were cool — 88.35%, with the
   single largest bucket at hue 270. A warm gold brand was painted on top of a
   competitor's violet canvas, which is why the page read as a clone AND why it
   did not read as premium. One cause, both complaints.

   Recolouring that canvas would have left the same object doing the same
   thing. So the object changed:

       points  -> bands          scattered      -> stratified
       omni    -> horizontal     discrete       -> continuous
       canvas  -> compositor     JS every frame -> zero JS

   Horizontality is the visual grammar of a market — depth of book, the tape.
   A star field says outer space. Nothing here scatters, twinkles or streaks.

   THREE PROPERTIES THAT MADE THIS THE RIGHT CALL

   1. At rest it is already finished. The static composition IS the design and
      the drift is a two-to-four-minute modulation on top of it. There is no
      state where the page waits for an animation to become interesting — which
      is also why prefers-reduced-motion and a hidden-tab first paint are
      solved structurally rather than patched. The 0x0-canvas bug cannot recur,
      because there is no canvas: this paints on the first style pass with no
      script involved at all.

   2. It survives --aurora-strength:.38 under figures better than blobs do.
      A drifting radial sweeps a luminance GRADIENT ACROSS a table, so a
      figure's backdrop changes while the eye is on it. A horizontal band
      drifting horizontally under a horizontal table row changes that row's
      backdrop UNIFORMLY — no gradient ever crosses a column of numbers.

   3. It costs less than what it replaced. The star field ran 5.1-8.8ms of
      main-thread work per frame with ~23 createRadialGradient allocations per
      frame and was gated by nothing — not visibility, not intersection. This
      is five composited layers animating transform only: zero main-thread
      cost per frame, zero JavaScript, zero allocations.

   THE CEILING — the rule that stops the inversion recurring.

   The whole failure was that the ground exceeded the panels. The old aurora
   ran at opacity calc(.42 * strength); the approved reference
   (_design/dashboard-preview.html) specifies .16. At marketing strength the
   shipped value was .42 — 2.6x the approved luminance — and it made the
   rendered ground 7.22x BRIGHTER than a resting panel. Panels stopped reading
   as surfaces lifted off a ground and started reading as holes punched in a
   lit field. That inversion is the "not premium".

   So the atmosphere now has a hard, computed ceiling. The brightest pixel any
   band can produce is the .12 stop of the shared gradient below, and the
   per-band opacities are set so the composite of overlapping bands stays at or
   under it:

       ceiling = #F3C46A at effective alpha .12 over --au-bg = #261F12, L=.01436
       old rendered ground #4B3119  L=.03763  =  7.22x a resting panel
       new ceiling         #261F12  L=.01436  =  2.38x a resting panel

   Every type token in this file is proven against that ceiling. Raise the .12
   and you invalidate the contrast matrix — it is a budget, not a taste knob.
   --aurora-strength scales it linearly and is still the one variable that
   turns a landing page into a dashboard. */
.au-aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  opacity:var(--aurora-strength);
}

/* Five bands: ::before is the top stratum, the three <i> are the middle, and
   ::after is the floor. No markup changes on any of the nine surfaces that
   already carry `<div class="au-aurora"><i></i><i></i><i></i></div>`.

   R9 — THE BLUR GOES ON EACH BAND, NEVER ON THE CONTAINER. The old rule put
   filter:blur(86px) on .au-aurora and animated the children inside it. A
   filter makes its subtree rasterise as ONE layer, so animating anything
   within it forces the blurred result to be re-rasterised every frame, on the
   main thread — the single most expensive way to move a blurred shape. With
   the blur on each band, each band is a self-contained blurred layer whose
   transform the compositor moves without repainting anything. */
.au-aurora::before,
.au-aurora::after,
.au-aurora i{
  content:""; position:absolute; display:block;
  left:-34%; width:168%;
  /* One shared gradient, hue carried THROUGH the midpoint rather than allowed
     to desaturate: gold h39 -> amber h31 -> copper h24, alpha falling to zero
     at both ends. Per-band brightness is the element's own opacity, which
     keeps the ceiling arithmetic to one number. */
  background:linear-gradient(90deg,
    rgba(243,196,106,0)    0%,
    rgba(243,196,106,.12) 34%,
    rgba(224,145,60,.095) 58%,
    rgba(154,90,46,.055)  82%,
    rgba(154,90,46,0)    100%);
  /* Vertical falloff. The blur alone leaves a plateau in the middle of a tall
     band and a defined edge at top and bottom; the mask turns each band into a
     stratum with soft boundaries, and — the part that matters numerically —
     cuts the tails that overlap the neighbouring band, which is what keeps the
     composite under the ceiling. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 36%,#000 64%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 36%,#000 64%,transparent 100%);
  filter:blur(78px);
  will-change:transform;
  transform:translate3d(0,0,0);
  animation-name:au-strata;
  animation-timing-function:var(--au-ease);
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
/* Drift amplitude scales off the ONE variable, so the calm intensity is calmer
   in motion as well as in luminance. The keyframes are symmetric about zero,
   which is what makes translate3d(0,0,0) — the resting transform above — the
   exact mid-frame of the animation. That is why reduced motion below can stop
   the animation and be left with a correct composed frame rather than a
   frozen half-drawn one. */
@keyframes au-strata{
  from{ transform:translate3d(calc(-1 * var(--au-amp)),0,0) }
  to  { transform:translate3d(var(--au-amp),0,0) }
}
.au-aurora::before   { top:-8%;    height:32%; opacity:1;   --au-amp:calc(7%   * var(--aurora-strength)); animation-duration:110s }
.au-aurora i:nth-child(1){ top:19%; height:26%; opacity:.70; --au-amp:calc(-6%  * var(--aurora-strength)); animation-duration:140s }
.au-aurora i:nth-child(2){ top:41%; height:28%; opacity:.55; --au-amp:calc(5.5% * var(--aurora-strength)); animation-duration:165s }
.au-aurora i:nth-child(3){ top:63%; height:26%; opacity:.40; --au-amp:calc(-4.5%* var(--aurora-strength)); animation-duration:190s }
.au-aurora::after    { bottom:-8%; height:32%; opacity:.28; --au-amp:calc(4%   * var(--aurora-strength)); animation-duration:230s }

/* Vignette. Corners are where text washed out worst, so they stay dark.
   FOUR STOPS, NOT TWO. The old two-stop ramp produced six quantisation steps
   across 1000px — a visible contour plateau every 167px, which is the single
   most obvious "cheap dark UI" artefact there is. Four stops cut that to a
   step every 200px on a much shorter visible run; the dither below is what
   actually removes it. rgba(5,4,3) is --au-void: the vignette terminates on
   the darkest rung of the ladder, at hue 30. It used to terminate on
   rgba(9,8,11) — hue 260, violet — which is how a warm page ended up with
   cool corners. */
.au-scrim{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(132% 96% at 50% 34%,
    rgba(5,4,3,0) 26%, rgba(5,4,3,.42) 62%, rgba(5,4,3,.72) 84%, rgba(5,4,3,.90) 100%);
}

/* Grain, above the content, for filmic quality only. It does NOT dither —
   numOctaves='3' is correlated low-frequency noise, which is texture. The
   dither is the single-octave layer on .au-host. Conflating the two is why
   this platform was running two full-viewport grain layers and still banding.
   .038 -> .022. At .038 this layer was measurably graining 10-11px type — it
   sits at z-index:98, ABOVE everything, so it lands on the smallest text on
   the page, which is exactly the text with the least contrast to spare. The
   ground now has its own dither underneath, so this layer no longer has to
   carry a job it was never the right texture for. */
.au-grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:98; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── panel ───────────────────────────────────────────────────────────────── */
.au-panel{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--au-rad); padding:20px;
  background:var(--au-glass); border:1px solid var(--au-line);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:transform var(--au-base) var(--au-ease), background var(--au-base);
}
/* Specular sheen tracking the cursor across the glass. */
.au-panel::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(255,240,206,.12), rgba(243,196,106,.04) 42%, transparent 68%);
  transition:opacity var(--au-base);
}
/* The edge lights on the side the cursor is on. A conic gradient rotated to
   face the pointer, masked to 1px — not a uniform border glow. */
.au-panel::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  pointer-events:none; opacity:0; transition:opacity var(--au-base);
  background:conic-gradient(from var(--edge,0deg), transparent 0deg,
    var(--au-line-hi) 26deg, rgba(255,240,206,.85) 46deg,
    var(--au-line-hi) 66deg, transparent 96deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.au-panel:hover{ transform:translateY(-2px); background:var(--au-glass-2); }
.au-panel:hover::before,.au-panel:hover::after{ opacity:1; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.au-btn{
  --fx:50%; --fy:50%; --lift:0px;
  appearance:none; border:0; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center;
  font-family:var(--au-body); font-weight:600; font-size:14px; letter-spacing:-.01em;
  padding:13px 26px; border-radius:var(--au-pill); color:#150F05;
  background:linear-gradient(180deg,#FFE9BC,#F3C46A 42%,#D09E3F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),
             inset 0 -1px 0 rgba(120,80,10,.32),
             0 5px 16px -8px var(--au-glow);
  transform:translateY(var(--lift));
  transition:transform var(--au-base) var(--au-ease), box-shadow var(--au-base),
             color .3s .05s;
}
/* The fill grows from the point the cursor crossed the edge, so entering from
   the left fills left-to-right. fpfx-aurora.js sets --fx/--fy. */
.au-btn::before{
  content:""; position:absolute; left:var(--fx); top:var(--fy); z-index:-1;
  width:0; height:0; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,#FFFBF0,#FFE9BC 55%,#F3C46A);
  transition:width var(--au-slow) var(--au-ease), height var(--au-slow) var(--au-ease);
}
.au-btn:hover::before{ width:260%; height:260%; }
.au-btn:hover{ --lift:-2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(120,80,10,.32),
             0 16px 40px -12px var(--au-glow); }
.au-btn:active{ --lift:0px; }
.au-btn:focus-visible{ outline:2px solid var(--au-gold); outline-offset:3px; }
/* The label must sit above the fill. */
.au-btn__lb{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; }
.au-btn__arw{ transition:transform .4s var(--au-ease); }
.au-btn:hover .au-btn__arw{ transform:translateX(5px); }

.au-btn--ghost{
  background:rgba(255,255,255,.05); color:var(--au-gold-hi);
  border:1px solid var(--au-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.au-btn--ghost::before{ background:radial-gradient(circle,#FFF6E2,#F3C46A 60%,#D9A548); }
.au-btn--ghost:hover{ color:#150F05; }

.au-btn--text{
  background:none; color:var(--au-gold-hi); padding:10px 4px;
  box-shadow:none; border:0; border-radius:0;
}
.au-btn--text::before{ display:none; }
.au-btn--text::after{
  content:""; position:absolute; left:4px; right:4px; bottom:4px; height:1px;
  background:var(--au-grad); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--au-ease);
}
.au-btn--text:hover::after{ transform:scaleX(1); }

/* ── figures ─────────────────────────────────────────────────────────────── */
.au-stat__k{ font-family:var(--au-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--au-muted); }
.au-stat__v{ display:block; margin-top:11px; font-family:var(--au-mono);
  font-weight:700; font-size:30px; line-height:1; font-variant-numeric:tabular-nums;
  background:var(--au-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; }
.au-stat__d{ display:flex; align-items:center; gap:6px; margin-top:9px;
  font-family:var(--au-mono); font-size:11.5px; color:var(--au-muted); }
.au-stat__d--up{ color:var(--au-up); }
.au-stat__d--dn{ color:var(--au-down); }

/* ── progress, with meaning in the colour ────────────────────────────────── */
.au-track{ height:7px; border-radius:var(--au-pill);
  background:rgba(255,255,255,.07); overflow:hidden; }
.au-fill{ height:100%; border-radius:var(--au-pill); position:relative;
  background:var(--au-grad); transform-origin:left; transform:scaleX(var(--p,0));
  animation:au-fill 1.3s var(--au-ease) forwards; }
.au-fill::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:14px;
  border-radius:var(--au-pill);
  background:linear-gradient(90deg,transparent,var(--au-gold-hi)); }
/* Gold = progress toward a goal. Green = a limit with room. Red = a limit
   being consumed. The colour is the message; the label is confirmation. */
.au-fill--ok{ background:linear-gradient(100deg,#9BF0C4,#5BE49B 60%,#2FA771); }
.au-fill--ok::after{ background:linear-gradient(90deg,transparent,#CFFCE4); }
.au-fill--risk{ background:linear-gradient(100deg,#FFC9BC,#FF8A73 60%,#C4503B); }
.au-fill--risk::after{ background:linear-gradient(90deg,transparent,#FFD9CF); }
@keyframes au-fill{ from{ transform:scaleX(0) } to{ transform:scaleX(var(--p,1)) } }

/* ── chart crosshair ─────────────────────────────────────────────────────── */
.au-chart{ position:relative; touch-action:none; }
.au-chart__cross{ stroke:rgba(255,240,206,.34); stroke-width:1; stroke-dasharray:3 4;
  opacity:0; transition:opacity var(--au-fast); }
.au-chart__halo{ fill:rgba(243,196,106,.2); opacity:0; transition:opacity var(--au-fast); }
.au-chart__dot{ fill:#FFF0CE; stroke:var(--au-bg); stroke-width:2.5; opacity:0;
  transition:opacity var(--au-fast); }
.au-chart.is-live .au-chart__cross,
.au-chart.is-live .au-chart__halo,
.au-chart.is-live .au-chart__dot{ opacity:1; }
.au-tip{
  position:absolute; pointer-events:none; z-index:5; opacity:0; white-space:nowrap;
  transform:translate(-50%,-124%) scale(.96); transform-origin:50% 100%;
  transition:opacity var(--au-fast), transform var(--au-fast) var(--au-ease);
  background:rgba(14,12,10,.94); border:1px solid var(--au-line);
  border-radius:10px; padding:9px 12px; backdrop-filter:blur(14px);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
}
.au-chart.is-live .au-tip{ opacity:1; transform:translate(-50%,-134%) scale(1); }

/* ── reduced motion ────────────────────────────────────────────────────────
   A CORRECT STATIC FRAME, NOT A FROZEN ONE.

   The old rule stopped the blob animations and left whatever transform the
   element happened to hold. It was survivable there and it was NOT survivable
   on the homepage, where the ground was a canvas: fpfx.js had no else branch
   for reduced motion and draw() was the only thing that ever painted, so a
   visitor with the preference set got no background at all.

   Here the resting state is the design. The strata keyframes run symmetrically
   from calc(-1 * --au-amp) to --au-amp, so translate3d(0,0,0) — the transform
   already declared on every band — is the exact mid-frame. Cancelling the
   animation lands on a composed frame by construction rather than by luck, and
   the same property is what makes the first paint correct in a hidden or
   backgrounded tab: there is no script, no rAF and no canvas in this
   background, so the first style pass paints the finished composition whether
   or not a frame is ever scheduled. */
@media (prefers-reduced-motion:reduce){
  .au-aurora::before,
  .au-aurora::after,
  .au-aurora i{ animation:none; transform:translate3d(0,0,0); will-change:auto; }
  .au-panel,.au-btn,.au-btn__arw,.au-btn--text::after{ transition-duration:.01ms; }
  .au-fill{ animation:none; transform:scaleX(var(--p,1)); }
}


/* ==== assets/css/fpfx-offers.css ==== */
/* ===========================================================================
   FPFX — offer surfaces
   ---------------------------------------------------------------------------
   TWO strips live here, and they deliberately read DIFFERENT tables so the
   same offer can never be shown twice on one page:

     .fpfx-announce   operator announcements from `banners`, mounted in
                      public-header.php ABOVE the proof rail, on every
                      'full' and 'document' surface.
     .fpfx-offerband  running discount rules from `discount_rules`, mounted in
                      index-body.php directly BELOW the hero, home page only.

   EMPTY IS NOTHING, NOT EMPTY.
   Both are removed at the PHP level when their source has no rows, so neither
   wrapper reaches the document. The `:empty` rules below are a net for the
   case where JS removes the last child, and there is deliberately no
   min-height anywhere in this file: a reserved band with nothing in it is the
   "empty gold stripe" public-header.php already refuses to draw for the rail.

   AURORA. Dark-translucent glass, never white — white glass over the drifting
   aurora brightens as light passes beneath it and small text disappears.
   Gold #EEB762, hairline rgba(255,255,255,.06), text #F8F8F8, meta #948C82
   (the 6:1 contrast floor) at 11px and no smaller. One easing curve.
   =========================================================================== */

:root{
  --fo-ease:cubic-bezier(.2,.8,.3,1);
  --fo-glass:rgba(13,11,10,.58);
  --fo-gold:#EEB762;
  --fo-gold-hi:#F3DBB2;
  --fo-line:rgba(255,255,255,.06);
  --fo-ink:#F8F8F8;
  --fo-meta:#948C82;
}

/* ===========================================================================
   1 · THE ANNOUNCEMENT STRIP
   =========================================================================== */

.fpfx-announce{
  position:relative;
  /* One z-index, declared once. Below the sticky header (100) and far below
     the boot screen (10000), because an offer must never cover either. */
  z-index:5;
  background:var(--fo-glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--fo-line);
  color:var(--fo-ink);
  font-family:'DM Sans',system-ui,sans-serif;
}
.fpfx-announce:empty{display:none!important}
.fpfx-announce[hidden]{display:none!important}

.fpfx-announce-in{
  position:relative;
  max-width:1280px;
  margin-inline:auto;
  padding:0 26px;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:0;              /* never reserve height for an absent offer */
}

/* The slides stack. Only the live one is in flow; the rest are absolute so a
   rotation does not reflow the page beneath. */
.fpfx-announce-i{
  display:none;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  padding:9px 0;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .42s var(--fo-ease),transform .42s var(--fo-ease);
}
.fpfx-announce-i.is-on{display:flex;opacity:1;transform:none}

.fpfx-announce-badge{
  flex:0 0 auto;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#120E06;
  background:linear-gradient(110deg,var(--fo-gold) 0%,var(--fo-gold-hi) 100%);
  border-radius:999px;
  padding:4px 10px;
  line-height:1.2;
}

.fpfx-announce-say{
  min-width:0;
  flex:1 1 auto;
  font-size:13px;
  line-height:1.4;
  color:var(--fo-ink);
  /* The offer TERMS are the point of the strip. They wrap; they are never
     clipped to an ellipsis the way the old top bar clipped them. */
  overflow-wrap:anywhere;
}
.fpfx-announce-say b{font-weight:600;color:var(--fo-gold-hi)}

.fpfx-announce-code{
  flex:0 0 auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--fo-gold);
  border:1px dashed rgba(238,183,98,.45);
  border-radius:6px;
  padding:3px 8px;
}

.fpfx-announce-clock{
  flex:0 0 auto;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-size:11px;
  color:var(--fo-meta);
}
.fpfx-announce-clock time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--fo-gold);
}

.fpfx-announce-cta{
  flex:0 0 auto;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
  color:#120E06;
  background:var(--fo-gold);
  border-radius:999px;
  padding:6px 14px;
  text-decoration:none;
  transition:background .28s var(--fo-ease),transform .28s var(--fo-ease);
}
.fpfx-announce-cta:hover,.fpfx-announce-cta:focus-visible{
  background:var(--fo-gold-hi);
  transform:translateY(-1px);
}

.fpfx-announce-x{
  flex:0 0 auto;
  align-self:center;
  appearance:none;
  background:transparent;
  border:1px solid var(--fo-line);
  border-radius:8px;
  width:26px;height:26px;
  display:grid;place-items:center;
  color:var(--fo-meta);
  cursor:pointer;
  font-size:14px;line-height:1;
  transition:color .28s var(--fo-ease),border-color .28s var(--fo-ease);
}
.fpfx-announce-x:hover,.fpfx-announce-x:focus-visible{color:var(--fo-ink);border-color:rgba(238,183,98,.4)}

/* Dots only exist for more than one offer; the JS never draws them for one. */
.fpfx-announce-dots{flex:0 0 auto;display:flex;gap:5px;align-items:center}
.fpfx-announce-dots button{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:5px;height:5px;border-radius:999px;
  background:rgba(255,255,255,.22);
  transition:background .28s var(--fo-ease),width .28s var(--fo-ease);
}
.fpfx-announce-dots button[aria-current="true"]{background:var(--fo-gold);width:14px}

/* On a phone the strip becomes two rows, not four: the badge and the sentence
   share the first, everything actionable shares the second. Letting each part
   claim its own full-width row pushed the bar past 150px, which is a fifth of
   a phone screen spent on a bar that is not the page. */
@media (max-width:760px){
  .fpfx-announce-in{padding:0 20px;gap:8px}
  .fpfx-announce-i{gap:8px 9px;flex-wrap:wrap;padding:8px 0}
  .fpfx-announce-badge{order:0;font-size:10px;padding:3px 8px}
  .fpfx-announce-say{flex:1 1 60%;order:1;font-size:12px;line-height:1.35}
  .fpfx-announce-code{order:2;font-size:10px;padding:2px 7px}
  .fpfx-announce-clock{order:3;font-size:10px}
  .fpfx-announce-cta{order:4;margin-left:auto;font-size:11px;padding:5px 12px}
  .fpfx-announce-dots{display:none}
  .fpfx-announce-x{width:24px;height:24px}
}

/* ===========================================================================
   2 · THE OFFER BAND, BELOW THE HERO
   ---------------------------------------------------------------------------
   This used to be a full-bleed bar pinned above the header, where its position
   supplied the context. Mid-page it has none, so it carries its own heading —
   and it is inset to the section rhythm with a radius and a hairline all round,
   because a full-bleed gold band between two sections reads as a broken
   section boundary rather than as an offer.
   =========================================================================== */

.fpfx-offerband{
  position:relative;
  z-index:1;
  padding:44px 0 8px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.fpfx-offerband:empty{display:none!important}

.fpfx-offerband-in{
  max-width:1240px;
  margin-inline:auto;
  padding:0 26px;
}

.fpfx-offerband-head{margin:0 0 16px}
.fpfx-offerband-eyebrow{
  display:block;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fo-gold);
  margin:0 0 6px;
}
.fpfx-offerband-h{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:clamp(20px,2.4vw,26px);
  font-weight:700;
  line-height:1.2;
  color:var(--fo-ink);
  margin:0;
}
.fpfx-offerband-sub{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--fo-meta);
  max-width:62ch;
}

.fpfx-offerband-rows{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;
  list-style:none;
  margin:0;padding:0;
}

.fpfx-offer{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  border-radius:16px;
  background:var(--fo-glass);
  border:1px solid var(--fo-line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .32s var(--fo-ease),transform .32s var(--fo-ease);
}
.fpfx-offer:hover{border-color:rgba(238,183,98,.34);transform:translateY(-2px)}

.fpfx-offer-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fpfx-offer-badge{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#120E06;
  background:linear-gradient(110deg,var(--fo-gold) 0%,var(--fo-gold-hi) 100%);
  border-radius:999px;padding:4px 10px;line-height:1.2;
}
.fpfx-offer-title{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:15px;font-weight:600;color:var(--fo-ink);line-height:1.3;
}

/* The terms wrap in full. The old bar set white-space:nowrap with an ellipsis,
   which hid the condition the offer depended on. */
.fpfx-offer-say{
  margin:0;
  font-size:13px;line-height:1.55;
  color:#C9C4BC;
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.fpfx-offer-foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:4px;
}
.fpfx-offer-code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;color:var(--fo-gold);
  border:1px dashed rgba(238,183,98,.45);border-radius:6px;padding:3px 8px;
}
.fpfx-offer-clock{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:11px;color:var(--fo-meta);
}
.fpfx-offer-clock time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:12px;color:var(--fo-gold);
}
.fpfx-offer-cta{
  margin-left:auto;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:600;font-size:12px;
  color:#120E06;background:var(--fo-gold);
  border-radius:999px;padding:7px 15px;text-decoration:none;
  transition:background .28s var(--fo-ease),transform .28s var(--fo-ease);
}
.fpfx-offer-cta:hover,.fpfx-offer-cta:focus-visible{background:var(--fo-gold-hi);transform:translateY(-1px)}

/* The countdown is the reason to act now. It stays on a phone; the old bar
   hid it under 760px, which removed the urgency and kept the noise. */
@media (max-width:760px){
  .fpfx-offerband{padding:32px 0 4px}
  .fpfx-offerband-in{padding:0 20px}
  .fpfx-offer-cta{margin-left:0;width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .fpfx-announce-i,.fpfx-announce-cta,.fpfx-offer,.fpfx-offer-cta{transition:none}
  .fpfx-offer:hover,.fpfx-announce-cta:hover,.fpfx-offer-cta:hover{transform:none}
}