/* =========================================================
   FAIRPILOT
   Commercial Landing Page
   Phase 2.4
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --bg: #f4f1ee;
    --surface: #ffffff;

    --text: #202020;
    --muted: #706d68;

    --lime: #c7f000;
    --cyan: #10bfe8;
    --coral: #ff574d;

    --container: 1220px;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 38px;
    --radius-pill: 999px;

    --border: 2px solid var(--text);

    --shadow-sm: 4px 4px 0 var(--text);
    --shadow-md: 7px 7px 0 var(--text);

    --transition: 180ms ease;

    --header-height: 82px;
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

button {
    color: inherit;
}

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

::selection {
    background: var(--lime);
    color: var(--text);
}

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}


/* =========================================================
   3. GLOBAL
   ========================================================= */

.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}

.site-main {
    min-height:
        calc(100vh - var(--header-height));
}

.landing-anchor,
#how-it-works,
#features,
#pricing,
#faq {
    scroll-margin-top:
        calc(var(--header-height) + 20px);
}

.section-kicker {
    display: block;

    margin-bottom: 17px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   4. HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    background:
        rgba(244, 241, 238, 0.94);

    border-bottom:
        1px solid rgba(32, 32, 32, 0.12);

    backdrop-filter: blur(16px);
}

.site-header__inner {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    min-height: var(--header-height);

    margin-inline: auto;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* =========================================================
   5. BRAND
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.brand__mark {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);

    border: var(--border);
    border-radius: 50%;

    font-size: 20px;
    font-weight: 950;

    line-height: 1;
}

.brand__name {
    font-size: 23px;
    font-weight: 950;

    letter-spacing: -0.8px;
}


/* =========================================================
   6. DESKTOP NAV
   ========================================================= */

.desktop-nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 26px;
}

.desktop-nav a,
.header-login {
    position: relative;

    font-size: 13px;
    font-weight: 800;
}

.desktop-nav a::after,
.header-login::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: -6px;

    height: 2px;

    background: var(--text);

    transition: right var(--transition);
}

.desktop-nav a:hover::after,
.header-login:hover::after {
    right: 0;
}


/* =========================================================
   7. HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}


/* =========================================================
   8. BUTTONS
   ========================================================= */

.button {
    min-height: 56px;

    padding: 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: var(--border);
    border-radius: var(--radius-pill);

    color: var(--text);

    font-size: 14px;
    font-weight: 900;

    line-height: 1.2;

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.button:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}

.button:active {
    transform: none;
    box-shadow: none;
}

.button--small {
    min-height: 45px;

    padding-inline: 19px;

    font-size: 12px;
}

.button--large {
    min-height: 64px;

    padding-inline: 31px;

    font-size: 14px;
}

.button--lime {
    background: var(--lime);
}

.button--cyan {
    background: var(--cyan);
}

.button--coral {
    background: var(--coral);
}

.button--white {
    background: #ffffff;
}

.button--dark {
    background: var(--text);
    color: #ffffff;
}


/* =========================================================
   9. LANGUAGE
   ========================================================= */

.language-switcher {
    position: relative;
}

.language-switcher__button {
    min-width: 69px;
    min-height: 43px;

    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: transparent;

    border:
        1px solid rgba(32, 32, 32, 0.25);

    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

.language-switcher__arrow {
    transition: transform var(--transition);
}

.language-switcher.is-open
.language-switcher__arrow {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    min-width: 110px;

    padding: 8px;

    display: none;

    background: #ffffff;

    border: var(--border);
    border-radius: 16px;

    box-shadow: var(--shadow-sm);
}

.language-switcher.is-open
.language-menu {
    display: grid;
}

.language-menu a {
    padding: 8px 12px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 900;
}

.language-menu a:hover,
.language-menu a.is-active {
    background: var(--lime);
}


/* =========================================================
   10. MOBILE MENU
   ========================================================= */

.mobile-menu-button {
    width: 48px;
    height: 48px;

    margin-left: auto;

    padding: 0;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    background: var(--lime);

    border: var(--border);
    border-radius: 50%;

    cursor: pointer;
}

.mobile-menu-button span {
    width: 19px;
    height: 2px;

    display: block;

    background: var(--text);
}

.mobile-menu {
    display: none;

    padding:
        5px
        24px
        26px;
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu nav {
    display: grid;

    gap: 5px;
}

.mobile-menu nav > a:not(.button) {
    padding: 15px 4px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.14);

    font-size: 19px;
    font-weight: 850;
}

.mobile-menu .button {
    margin-top: 14px;
}

.mobile-language-list {
    margin-top: 22px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.mobile-language-list a {
    width: 46px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 900;
}

.mobile-language-list a.is-active {
    background: var(--lime);
}


/* =========================================================
   11. FLASH
   ========================================================= */

.flash-wrapper {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin: 20px auto 0;
}

.flash-message {
    padding: 15px 20px;

    border: var(--border);
    border-radius: 15px;

    font-weight: 750;
}

.flash-message--success {
    background: var(--lime);
}

.flash-message--error {
    background: var(--coral);
}

.flash-message--info {
    background: var(--cyan);
}


/* =========================================================
   12. HERO
   ========================================================= */

.landing-hero {
    position: relative;

    overflow: hidden;

    padding-top:
        clamp(60px, 7vw, 105px);
}

.landing-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(480px, 1.05fr);

    align-items: center;

    gap:
        clamp(55px, 7vw, 100px);

    padding-bottom:
        clamp(75px, 9vw, 125px);
}

.landing-hero__content {
    position: relative;

    z-index: 5;
}

.landing-eyebrow {
    margin-bottom: 24px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing-eyebrow__dot {
    width: 13px;
    height: 13px;

    display: inline-block;

    background: var(--coral);

    border: 2px solid var(--text);
    border-radius: 50%;
}

.landing-hero h1 {
    max-width: 690px;

    margin-bottom: 25px;

    font-size:
        clamp(52px, 5.8vw, 88px);

    line-height: 0.94;

    letter-spacing: -0.065em;

    text-wrap: balance;
}

.landing-hero__lead {
    max-width: 610px;

    margin-bottom: 12px;

    font-size:
        clamp(19px, 1.7vw, 23px);

    font-weight: 750;

    line-height: 1.4;
}

.landing-hero__support {
    max-width: 590px;

    margin-bottom: 33px;

    color: var(--muted);

    font-size: 16px;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}

.landing-hero__meta {
    margin-top: 21px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px 17px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   13. PRODUCT PREVIEW
   ========================================================= */

.product-preview-wrapper {
    position: relative;

    width: 100%;
    max-width: 650px;

    margin-inline: auto;

    padding:
        20px
        25px
        30px;
}

.product-preview-decoration {
    position: absolute;

    border: var(--border);

    pointer-events: none;
}

.product-preview-decoration--lime {
    width: 170px;
    height: 170px;

    top: -20px;
    right: -20px;

    background: var(--lime);

    border-radius: 50%;
}

.product-preview-decoration--coral {
    width: 120px;
    height: 120px;

    left: -8px;
    bottom: 5px;

    background: var(--coral);

    border-radius: 30px;

    transform: rotate(13deg);
}

.product-preview {
    position: relative;

    z-index: 2;

    overflow: hidden;

    background: #ffffff;

    border: var(--border);
    border-radius: 30px;

    box-shadow:
        9px 9px 0 var(--text);
}

.product-preview__topbar {
    min-height: 66px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--text);
    color: #ffffff;
}

.product-preview__brand {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 14px;
    font-weight: 900;
}

.product-preview__brand-mark {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 950;
}

.product-preview__avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cyan);
    color: var(--text);

    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}

.product-preview__body {
    padding: 22px;

    background: #f8f7f4;
}


/* =========================================================
   14. PREVIEW CONTENT
   ========================================================= */

.preview-heading {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.preview-heading__label {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.preview-heading strong {
    display: block;

    font-size: 20px;

    letter-spacing: -0.5px;
}

.preview-add-sale {
    min-height: 39px;

    padding: 0 15px;

    background: var(--coral);

    border: 1.5px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 10px;
    font-weight: 950;

    pointer-events: none;
}

.preview-metrics {
    margin-bottom: 14px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.preview-metric {
    padding: 17px;

    border: 1.5px solid var(--text);
    border-radius: 17px;
}

.preview-metric--cyan {
    background: var(--cyan);
}

.preview-metric--lime {
    background: var(--lime);
}

.preview-metric span {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.preview-metric strong {
    display: block;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -1px;
}

.preview-metric small {
    display: block;

    margin-top: 6px;

    font-size: 9px;
    font-weight: 750;
}


/* =========================================================
   15. FAIR PREVIEW
   ========================================================= */

.preview-fair-card {
    margin-bottom: 14px;

    padding: 18px;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 18px;
}

.preview-fair-card__top {
    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.preview-card-label {
    color: var(--muted);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.preview-status {
    padding: 4px 9px;

    background: var(--lime);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    text-transform: uppercase;
}

.preview-fair-card__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.preview-fair-card h3 {
    margin-bottom: 2px;

    font-size: 19px;

    letter-spacing: -0.5px;
}

.preview-fair-card p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 10px;
}

.preview-fair-date {
    max-width: 105px;

    font-size: 11px;

    text-align: right;
}

.preview-calendar {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 7px;
}

.preview-calendar__day {
    padding: 8px 3px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: var(--bg);

    border:
        1px solid rgba(32, 32, 32, 0.35);

    border-radius: 10px;
}

.preview-calendar__day span {
    margin-bottom: 2px;

    color: var(--muted);

    font-size: 6px;
    font-weight: 900;
}

.preview-calendar__day strong {
    font-size: 12px;
}

.preview-calendar__day.is-active {
    background: var(--text);
    color: #ffffff;
}

.preview-calendar__day.is-active span {
    color:
        rgba(255, 255, 255, 0.65);
}


/* =========================================================
   16. SALES PREVIEW
   ========================================================= */

.preview-sales {
    padding: 17px;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 18px;
}

.preview-section-title {
    margin-bottom: 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.preview-section-title strong {
    font-size: 12px;
}

.preview-section-title span {
    color: var(--muted);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.preview-sale-row {
    padding: 10px 0;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 11px;

    border-top:
        1px solid rgba(32, 32, 32, 0.1);
}

.preview-sale-row__icon {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--coral);

    border: 1px solid var(--text);
    border-radius: 50%;

    font-size: 12px;
    font-weight: 950;
}

.preview-sale-row__info strong,
.preview-sale-row__info span,
.preview-sale-row__commission span,
.preview-sale-row__commission strong {
    display: block;
}

.preview-sale-row__info strong {
    font-size: 12px;
}

.preview-sale-row__info span {
    color: var(--muted);

    font-size: 8px;
}

.preview-sale-row__commission {
    text-align: right;
}

.preview-sale-row__commission span {
    color: var(--muted);

    font-size: 7px;

    text-transform: uppercase;
}

.preview-sale-row__commission strong {
    font-size: 11px;
}


/* =========================================================
   17. FLOATING HERO ELEMENTS
   ========================================================= */

.floating-commission-card {
    position: absolute;

    z-index: 4;

    right: -22px;
    bottom: 65px;

    min-width: 145px;

    padding: 17px;

    background: var(--lime);

    border: var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow-sm);

    transform: rotate(3deg);
}

.floating-commission-card span,
.floating-commission-card small {
    display: block;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.floating-commission-card strong {
    display: block;

    margin: 4px 0;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -1px;
}

.floating-sale-badge {
    position: absolute;

    z-index: 4;

    left: -15px;
    top: 145px;

    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background: var(--coral);

    border: var(--border);
    border-radius: 50%;

    box-shadow: var(--shadow-sm);

    font-size: 9px;
    font-weight: 950;

    text-transform: uppercase;

    transform: rotate(-8deg);
}

.floating-sale-badge span {
    display: block;

    margin-bottom: -3px;

    font-size: 26px;

    line-height: 1;
}


/* =========================================================
   18. HERO STRIP
   ========================================================= */

.landing-hero__strip {
    position: relative;

    z-index: 10;

    overflow: hidden;

    background: var(--text);
    color: #ffffff;

    border-top: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
}

.landing-hero__strip-track {
    min-height: 58px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px 18px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.1em;
}

.landing-hero__strip-track span:nth-child(even) {
    color: var(--lime);
}


/* =========================================================
   19. PROBLEM
   ========================================================= */

.problem-section {
    padding:
        clamp(90px, 11vw, 160px)
        0
        clamp(100px, 12vw, 175px);

    background: #ffffff;
}

.problem-heading {
    margin-bottom:
        clamp(60px, 8vw, 100px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    align-items: end;

    gap: 60px;
}

.problem-heading h2 {
    max-width: 780px;

    margin-bottom: 0;

    font-size:
        clamp(48px, 6.2vw, 86px);

    line-height: 0.96;

    letter-spacing: -0.06em;
}

.problem-heading p {
    max-width: 520px;

    margin-bottom: 7px;

    color: var(--muted);

    font-size:
        clamp(17px, 1.6vw, 20px);
}

.problem-board {
    position: relative;

    min-height: 590px;

    background: var(--bg);

    border: var(--border);
    border-radius: var(--radius-xl);

    overflow: hidden;
}

.problem-board::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(32, 32, 32, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 32, 32, 0.055) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    pointer-events: none;
}

.problem-note {
    position: absolute;

    z-index: 3;

    width: 230px;
    min-height: 170px;

    padding: 23px;

    display: flex;
    flex-direction: column;

    border: var(--border);
    border-radius: 22px;

    box-shadow: var(--shadow-sm);
}

.problem-note__icon {
    width: 43px;
    height: 43px;

    margin-bottom: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 50%;

    font-size: 12px;
    font-weight: 950;
}

.problem-note span {
    margin-top: 22px;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.problem-note strong {
    margin-top: 2px;

    font-size: 22px;

    letter-spacing: -0.7px;
}

.problem-note small {
    margin-top: 2px;

    font-size: 10px;
    font-weight: 750;
}

.problem-note--calendar {
    top: 55px;
    left: 65px;

    background: var(--cyan);

    transform: rotate(-4deg);
}

.problem-note--sales {
    top: 75px;
    right: 65px;

    background: var(--coral);

    transform: rotate(5deg);
}

.problem-note--commission {
    left: 100px;
    bottom: 55px;

    background: var(--lime);

    transform: rotate(3deg);
}

.problem-note--countries {
    right: 95px;
    bottom: 55px;

    background: #ffffff;

    transform: rotate(-3deg);
}

.problem-board__center {
    position: absolute;

    z-index: 4;

    top: 50%;
    left: 50%;

    width: 180px;
    height: 180px;

    transform:
        translate(-50%, -50%)
        rotate(-4deg);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 8px;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    text-align: center;
}

.problem-board__center span {
    color: var(--lime);

    font-size: 40px;
    font-weight: 950;

    line-height: 1;
}

.problem-board__center strong {
    max-width: 105px;

    font-size: 12px;

    line-height: 1.2;

    letter-spacing: 0.08em;
}

.problem-line {
    position: absolute;

    z-index: 1;

    height: 2px;

    background: var(--text);

    transform-origin: left center;
}

.problem-line--one {
    width: 310px;

    top: 210px;
    left: 270px;

    transform: rotate(15deg);
}

.problem-line--two {
    width: 330px;

    top: 315px;
    left: 260px;

    transform: rotate(-17deg);
}

.problem-line--three {
    width: 315px;

    top: 305px;
    right: 260px;

    transform: rotate(18deg);
}


/* =========================================================
   20. SOLUTION TRANSITION
   ========================================================= */

.solution-transition {
    padding: 28px 0;

    background: var(--text);
    color: #ffffff;

    text-align: center;
}

.solution-transition .container {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 17px;
}

.solution-transition__arrow {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border-radius: 50%;

    font-size: 20px;
    font-weight: 950;
}

.solution-transition span {
    font-size: 11px;
    font-weight: 950;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   21. SOLUTION
   ========================================================= */

.solution-section {
    padding:
        clamp(100px, 12vw, 175px)
        0;

    overflow: hidden;
}

.solution-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(500px, 1.15fr);

    align-items: center;

    gap:
        clamp(60px, 9vw, 125px);
}

.solution-copy h2 {
    max-width: 610px;

    margin-bottom: 24px;

    font-size:
        clamp(48px, 6vw, 80px);

    line-height: 0.96;

    letter-spacing: -0.06em;
}

.solution-copy p {
    max-width: 540px;

    margin-bottom: 32px;

    color: var(--muted);

    font-size:
        clamp(17px, 1.6vw, 20px);
}

.solution-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-orbit {
    position: relative;

    width: min(100%, 600px);
    aspect-ratio: 1 / 0.9;
}

.solution-orbit::before {
    content: "";

    position: absolute;

    inset: 12%;

    border:
        2px dashed rgba(32, 32, 32, 0.22);

    border-radius: 50%;
}

.solution-core {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width: 200px;
    height: 200px;

    transform:
        translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    box-shadow: var(--shadow-md);
}

.solution-core__mark {
    width: 48px;
    height: 48px;

    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}

.solution-core strong {
    font-size: 24px;

    letter-spacing: -0.8px;
}

.solution-core small {
    margin-top: 4px;

    color:
        rgba(255, 255, 255, 0.6);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.1em;
}

.solution-module {
    position: absolute;

    z-index: 4;

    width: 165px;
    min-height: 125px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    border: var(--border);
    border-radius: 20px;

    box-shadow: var(--shadow-sm);
}

.solution-module span {
    margin-bottom: auto;

    font-size: 9px;
    font-weight: 950;
}

.solution-module strong {
    margin-top: 20px;

    font-size: 20px;
}

.solution-module small {
    font-size: 10px;
    font-weight: 700;
}

.solution-module--fair {
    top: 0;
    left: 4%;

    background: var(--cyan);

    transform: rotate(-4deg);
}

.solution-module--sales {
    top: 8%;
    right: 0;

    background: var(--coral);

    transform: rotate(5deg);
}

.solution-module--commission {
    right: 10%;
    bottom: 0;

    background: var(--lime);

    transform: rotate(-3deg);
}

.solution-connector {
    position: absolute;

    z-index: 2;

    height: 2px;

    background: var(--text);
}

.solution-connector--one {
    width: 150px;

    top: 31%;
    left: 25%;

    transform: rotate(35deg);
}

.solution-connector--two {
    width: 150px;

    top: 35%;
    right: 20%;

    transform: rotate(-30deg);
}

.solution-connector--three {
    width: 145px;

    right: 23%;
    bottom: 26%;

    transform: rotate(42deg);
}


/* =========================================================
   22. HOW IT WORKS
   ========================================================= */

.how-section {
    padding:
        clamp(100px, 12vw, 165px)
        0;

    background: #ffffff;
}

.how-heading {
    max-width: 850px;

    margin-bottom:
        clamp(50px, 7vw, 85px);
}

.how-heading h2 {
    margin-bottom: 0;

    font-size:
        clamp(47px, 6.3vw, 84px);

    line-height: 0.96;

    letter-spacing: -0.06em;
}

.how-steps {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.how-step {
    min-height: 500px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border: var(--border);
    border-radius: var(--radius-lg);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.how-step:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-md);
}

.how-step--cyan {
    background: var(--cyan);
}

.how-step--coral {
    background: var(--coral);
}

.how-step--lime {
    background: var(--lime);
}

.how-step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.how-step__number {
    font-size: 13px;
    font-weight: 950;
}

.how-step__arrow {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 50%;

    font-size: 18px;
    font-weight: 950;
}

.how-step__arrow--done {
    background: var(--text);
    color: #ffffff;
}

.how-step__visual {
    flex: 1;

    min-height: 215px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-fair,
.mini-sale,
.mini-commission {
    width: min(100%, 245px);

    padding: 23px;

    background: #ffffff;

    border: var(--border);
    border-radius: 20px;

    box-shadow: var(--shadow-sm);

    transform: rotate(-3deg);
}

.mini-sale {
    transform: rotate(3deg);
}

.mini-commission {
    background: var(--text);
    color: #ffffff;

    transform: rotate(-2deg);
}

.mini-fair span,
.mini-sale span,
.mini-commission span {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mini-commission span {
    color:
        rgba(255, 255, 255, 0.6);
}

.mini-fair strong,
.mini-sale strong,
.mini-commission strong {
    display: block;

    font-size: 31px;

    line-height: 1;

    letter-spacing: -1px;
}

.mini-fair small,
.mini-sale small,
.mini-commission small {
    display: block;

    margin-top: 9px;

    font-size: 10px;
    font-weight: 800;
}

.how-step h3 {
    margin-bottom: 12px;

    font-size: 29px;

    line-height: 1;

    letter-spacing: -0.04em;
}

.how-step p {
    margin-bottom: 0;

    font-size: 14px;
    font-weight: 600;
}

.how-bottom {
    margin-top: 30px;

    padding: 22px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    background: var(--text);
    color: #ffffff;

    border-radius: var(--radius-pill);
}

.how-bottom span {
    color: var(--lime);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.how-bottom a {
    font-size: 13px;
    font-weight: 900;
}

.how-bottom a:hover {
    color: var(--lime);
}


/* =========================================================
   23. FEATURES / FAIR CALENDAR
   ========================================================= */

.features-section {
    padding:
        clamp(100px, 12vw, 175px)
        0;

    background: var(--bg);

    overflow: hidden;
}

.features-heading {
    margin-bottom:
        clamp(55px, 8vw, 95px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    align-items: end;

    gap: 65px;
}

.features-heading h2 {
    max-width: 780px;

    margin-bottom: 0;

    font-size:
        clamp(48px, 6.3vw, 84px);

    line-height: 0.96;

    letter-spacing: -0.06em;
}

.features-heading__copy p {
    max-width: 510px;

    margin-bottom: 25px;

    color: var(--muted);

    font-size:
        clamp(17px, 1.6vw, 20px);
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.feature-tags span {
    padding: 7px 11px;

    background: #ffffff;

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.08em;
}


/* =========================================================
   24. CALENDAR SHOWCASE
   ========================================================= */

.calendar-showcase {
    position: relative;

    display: grid;

    grid-template-columns:
        185px
        minmax(0, 1fr)
        245px;

    min-height: 680px;

    overflow: hidden;

    background: #ffffff;

    border: var(--border);
    border-radius: 32px;

    box-shadow:
        9px 9px 0 var(--text);
}


/* =========================================================
   25. CALENDAR SIDEBAR
   ========================================================= */

.calendar-sidebar {
    padding:
        25px
        18px;

    display: flex;
    flex-direction: column;

    background: var(--text);
    color: #ffffff;
}

.calendar-sidebar__brand {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 14px;
    font-weight: 900;
}

.calendar-sidebar__brand > span {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 950;
}

.calendar-sidebar__nav {
    margin-top: 55px;

    display: grid;

    gap: 7px;
}

.calendar-sidebar__item {
    padding: 11px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 10px;

    color:
        rgba(255, 255, 255, 0.6);

    font-size: 10px;
    font-weight: 800;
}

.calendar-sidebar__item > span {
    width: 22px;

    text-align: center;

    font-size: 12px;
}

.calendar-sidebar__item.is-active {
    background: var(--lime);
    color: var(--text);
}

.calendar-sidebar__bottom {
    margin-top: auto;

    padding: 14px;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 13px;
}

.calendar-sidebar__bottom span,
.calendar-sidebar__bottom strong {
    display: block;
}

.calendar-sidebar__bottom span {
    color: var(--lime);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.calendar-sidebar__bottom strong {
    margin-top: 4px;

    font-size: 10px;
}


/* =========================================================
   26. CALENDAR APP
   ========================================================= */

.calendar-app {
    min-width: 0;

    padding: 30px;

    background: #faf9f6;
}

.calendar-app__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.calendar-app__eyebrow {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.calendar-app__header h3 {
    margin-bottom: 0;

    font-size: 26px;

    letter-spacing: -0.8px;
}

.calendar-add-fair {
    min-height: 42px;

    padding: 0 16px;

    background: var(--coral);

    border: 1.5px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 9px;
    font-weight: 950;

    pointer-events: none;
}


/* =========================================================
   27. CALENDAR TOOLBAR
   ========================================================= */

.calendar-toolbar {
    margin:
        30px
        0
        15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.calendar-toolbar strong {
    font-size: 10px;

    letter-spacing: 0.12em;
}

.calendar-toolbar button {
    width: 34px;
    height: 34px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--text);
    border-radius: 50%;

    font-weight: 900;

    pointer-events: none;
}


/* =========================================================
   28. FAIR CALENDAR
   ========================================================= */

.fair-calendar {
    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(32, 32, 32, 0.2);

    border-radius: 16px;
}

.fair-calendar__weekdays,
.fair-calendar__grid {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}

.fair-calendar__weekdays {
    background: var(--text);
    color: #ffffff;
}

.fair-calendar__weekdays span {
    padding: 9px 3px;

    text-align: center;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.calendar-day {
    position: relative;

    min-height: 76px;

    padding: 8px;

    border-right:
        1px solid rgba(32, 32, 32, 0.1);

    border-bottom:
        1px solid rgba(32, 32, 32, 0.1);

    font-size: 9px;
    font-weight: 850;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day.is-muted {
    color:
        rgba(32, 32, 32, 0.25);

    background: #fafafa;
}

.calendar-day.has-fair {
    background:
        rgba(16, 191, 232, 0.14);
}

.calendar-day.has-fair > span {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;
}

.calendar-event {
    margin-top: 7px;

    padding: 4px 5px;

    overflow: hidden;

    background: var(--cyan);

    border: 1px solid var(--text);
    border-radius: 5px;

    font-size: 6px;
    font-weight: 950;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.fair-start .calendar-event {
    background: var(--lime);
}

.fair-end .calendar-event {
    background: var(--coral);
}


/* =========================================================
   29. CALENDAR FOOTER
   ========================================================= */

.calendar-app__footer {
    margin-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.calendar-legend {
    display: flex;
    align-items: center;

    gap: 13px;
}

.calendar-legend > span {
    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--muted);

    font-size: 7px;
    font-weight: 900;
}

.legend-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border: 1px solid var(--text);
    border-radius: 50%;
}

.legend-dot--fair {
    background: var(--cyan);
}

.legend-dot--free {
    background: #ffffff;
}

.calendar-hint {
    color: var(--muted);

    font-size: 8px;
}


/* =========================================================
   30. NEXT FAIR PANEL
   ========================================================= */

.next-fair-panel {
    padding: 30px 23px;

    background: var(--cyan);

    border-left: var(--border);
}

.next-fair-panel__label {
    display: block;

    margin-bottom: 25px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.next-fair-panel__date {
    width: 92px;
    height: 92px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background: #ffffff;

    border: var(--border);
    border-radius: 50%;

    box-shadow: var(--shadow-sm);
}

.next-fair-panel__date strong {
    font-size: 35px;

    line-height: 0.9;
}

.next-fair-panel__date span {
    margin-top: 5px;

    font-size: 9px;
    font-weight: 950;
}

.next-fair-panel h3 {
    margin-bottom: 5px;

    font-size: 25px;

    line-height: 1;

    letter-spacing: -0.8px;
}

.next-fair-panel > p {
    margin-bottom: 30px;

    font-size: 11px;
    font-weight: 700;
}

.next-fair-panel__details {
    display: grid;

    gap: 10px;
}

.next-fair-panel__details > div {
    padding-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.25);
}

.next-fair-panel__details span {
    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.08em;
}

.next-fair-panel__details strong {
    font-size: 10px;
}

.next-fair-panel__status {
    margin-top: 30px;

    padding: 11px 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    background: var(--lime);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.07em;
}

.next-fair-panel__status span {
    width: 8px;
    height: 8px;

    background: var(--text);

    border-radius: 50%;
}


/* =========================================================
   31. CALENDAR BENEFITS
   ========================================================= */

.calendar-benefits {
    margin-top: 70px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.calendar-benefit {
    padding: 27px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 20px;

    background: #ffffff;

    border: var(--border);
    border-radius: 22px;
}

.calendar-benefit__number {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}

.calendar-benefit h3 {
    margin-bottom: 9px;

    font-size: 20px;

    line-height: 1.05;

    letter-spacing: -0.5px;
}

.calendar-benefit p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   32. FEATURES CTA
   ========================================================= */

.features-cta {
    margin-top: 25px;

    padding:
        28px
        32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background: var(--text);
    color: #ffffff;

    border-radius: 25px;
}

.features-cta > div > span,
.features-cta > div > strong {
    display: block;
}

.features-cta > div > span {
    margin-bottom: 3px;

    color: var(--lime);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.12em;
}

.features-cta > div > strong {
    font-size:
        clamp(22px, 3vw, 34px);

    letter-spacing: -1px;
}


/* =========================================================
   33. FORMS
   ========================================================= */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    margin-bottom: 8px;

    display: block;

    font-size: 13px;
    font-weight: 850;
}

.form-control {
    width: 100%;
    min-height: 54px;

    padding: 13px 16px;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 14px;

    color: var(--text);

    outline: none;
}

textarea.form-control {
    min-height: 130px;

    resize: vertical;
}

.form-control:focus {
    border-width: 2px;

    box-shadow:
        0 0 0 4px
        rgba(16, 191, 232, 0.16);
}


/* =========================================================
   34. FOOTER
   ========================================================= */

.site-footer {
    padding:
        60px
        0
        25px;

    background: #ffffff;

    border-top:
        1px solid rgba(32, 32, 32, 0.12);
}

.site-footer__inner,
.site-footer__bottom {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}

.site-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 50px;
}

.footer-brand p {
    max-width: 390px;

    margin: 18px 0 0;

    color: var(--muted);

    font-size: 14px;
}

.footer-links {
    display: grid;

    gap: 10px;

    text-align: right;
}

.footer-links a {
    color: var(--muted);

    font-size: 13px;
    font-weight: 700;
}

.footer-links a:hover {
    color: var(--text);
}

.site-footer__bottom {
    margin-top: 45px;

    padding-top: 20px;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(32, 32, 32, 0.12);
}

.site-footer__bottom p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}

.codelab-credit {
    opacity: 0.65;
}

.codelab-credit:hover {
    opacity: 1;
}


/* =========================================================
   35. RESPONSIVE <= 1080
   ========================================================= */

@media (max-width: 1080px) {

    .desktop-nav {
        gap: 17px;
    }

    .desktop-nav a {
        font-size: 12px;
    }

    .landing-hero__grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(430px, 1.1fr);

        gap: 45px;
    }

    .landing-hero h1 {
        font-size:
            clamp(50px, 6vw, 72px);
    }

    .calendar-showcase {
        grid-template-columns:
            155px
            minmax(0, 1fr)
            210px;
    }

    .calendar-app {
        padding: 22px;
    }

    .next-fair-panel {
        padding:
            25px
            18px;
    }
}


/* =========================================================
   36. RESPONSIVE <= 960
   ========================================================= */

@media (max-width: 960px) {

    .desktop-nav,
    .header-actions {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .landing-hero__grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .product-preview-wrapper {
        max-width: 650px;
    }

    .problem-heading,
    .features-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .problem-board {
        min-height: 760px;
    }

    .problem-note--calendar {
        top: 45px;
        left: 8%;
    }

    .problem-note--sales {
        top: 65px;
        right: 8%;
    }

    .problem-note--commission {
        left: 8%;
        bottom: 45px;
    }

    .problem-note--countries {
        right: 8%;
        bottom: 55px;
    }

    .problem-line {
        display: none;
    }

    .solution-grid {
        grid-template-columns: 1fr;

        gap: 80px;
    }

    .solution-copy {
        max-width: 750px;
    }

    .solution-orbit {
        max-width: 600px;
    }

    .how-steps {
        grid-template-columns: 1fr;
    }

    .how-step {
        min-height: 390px;
    }

    .how-step__visual {
        min-height: 180px;
    }


    /* CALENDAR */

    .calendar-showcase {
        grid-template-columns:
            140px
            minmax(0, 1fr);
    }

    .next-fair-panel {
        grid-column: 1 / -1;

        border-top: var(--border);
        border-left: none;

        display: grid;

        grid-template-columns:
            auto
            1fr
            1fr;

        align-items: center;

        gap: 25px;
    }

    .next-fair-panel__label {
        grid-column: 1 / -1;

        margin-bottom: 0;
    }

    .next-fair-panel__date {
        margin-bottom: 0;
    }

    .next-fair-panel > p {
        margin-bottom: 0;
    }

    .next-fair-panel__details {
        grid-column: 1 / -1;

        grid-template-columns:
            repeat(4, 1fr);
    }

    .next-fair-panel__details > div {
        display: block;
    }

    .next-fair-panel__details span,
    .next-fair-panel__details strong {
        display: block;
    }

    .next-fair-panel__details strong {
        margin-top: 3px;
    }

    .next-fair-panel__status {
        grid-column: 1 / -1;

        margin-top: 0;

        width: fit-content;
    }

    .calendar-benefits {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   37. RESPONSIVE <= 650
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --header-height: 70px;
    }

    .container,
    .site-header__inner,
    .site-footer__inner,
    .site-footer__bottom,
    .flash-wrapper {
        width: min(
            calc(100% - 28px),
            var(--container)
        );
    }

    .site-header__inner {
        min-height: var(--header-height);
    }

    .brand__mark {
        width: 36px;
        height: 36px;

        font-size: 17px;
    }

    .brand__name {
        font-size: 20px;
    }

    .mobile-menu {
        padding-inline: 14px;
    }


    /* HERO */

    .landing-hero {
        padding-top: 45px;
    }

    .landing-hero__grid {
        gap: 48px;

        padding-bottom: 65px;
    }

    .landing-eyebrow {
        margin-bottom: 18px;

        font-size: 9px;
    }

    .landing-hero h1 {
        margin-bottom: 21px;

        font-size:
            clamp(45px, 13vw, 65px);

        line-height: 0.94;
    }

    .landing-hero__lead {
        font-size: 18px;
    }

    .landing-hero__support {
        font-size: 15px;
    }

    .landing-hero__actions {
        display: grid;
    }

    .landing-hero__actions .button {
        width: 100%;
    }

    .landing-hero__meta {
        display: grid;

        gap: 5px;
    }


    /* PRODUCT */

    .product-preview-wrapper {
        padding:
            10px
            5px
            35px;
    }

    .product-preview {
        border-radius: 24px;

        box-shadow:
            6px 6px 0 var(--text);
    }

    .product-preview-decoration--lime {
        width: 110px;
        height: 110px;

        top: -18px;
        right: -35px;
    }

    .product-preview-decoration--coral {
        width: 90px;
        height: 90px;

        left: -30px;
    }

    .product-preview__body {
        padding: 14px;
    }

    .preview-heading {
        align-items: center;
    }

    .preview-heading strong {
        font-size: 17px;
    }

    .preview-add-sale {
        min-height: 35px;

        padding-inline: 11px;

        font-size: 8px;
    }

    .preview-metric {
        padding: 13px;
    }

    .preview-metric strong {
        font-size: 23px;
    }

    .preview-fair-card {
        padding: 14px;
    }

    .preview-fair-card__content {
        display: block;
    }

    .preview-fair-date {
        display: block;

        max-width: none;

        margin-top: 8px;

        text-align: left;
    }

    .preview-calendar {
        gap: 4px;
    }

    .preview-sales {
        padding: 13px;
    }

    .floating-commission-card {
        right: -5px;
        bottom: 4px;

        min-width: 125px;

        padding: 13px;
    }

    .floating-commission-card strong {
        font-size: 23px;
    }

    .floating-sale-badge {
        left: -8px;
        top: 170px;

        width: 68px;
        height: 68px;

        font-size: 7px;
    }

    .floating-sale-badge span {
        font-size: 20px;
    }


    /* PROBLEM */

    .problem-section {
        padding:
            80px
            0
            95px;
    }

    .problem-heading {
        margin-bottom: 50px;
    }

    .problem-heading h2 {
        font-size:
            clamp(43px, 12vw, 60px);
    }

    .problem-board {
        min-height: auto;

        padding: 20px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 15px;

        border-radius: 26px;
    }

    .problem-note {
        position: relative;

        inset: auto;

        width: 100%;
        min-height: 155px;

        transform: none;
    }

    .problem-board__center {
        position: relative;

        inset: auto;

        width: 150px;
        height: 150px;

        margin: 15px auto;

        transform: rotate(-3deg);
    }


    /* SOLUTION */

    .solution-section {
        padding:
            85px
            0
            105px;
    }

    .solution-copy h2 {
        font-size:
            clamp(43px, 12vw, 60px);
    }

    .solution-copy .button {
        width: 100%;
    }

    .solution-orbit {
        min-height: 570px;

        aspect-ratio: auto;
    }

    .solution-orbit::before,
    .solution-connector {
        display: none;
    }

    .solution-core {
        top: 50%;

        width: 165px;
        height: 165px;
    }

    .solution-module {
        width: 145px;
        min-height: 110px;

        padding: 16px;
    }

    .solution-module--fair {
        top: 0;
        left: 0;
    }

    .solution-module--sales {
        top: 35px;
        right: 0;
    }

    .solution-module--commission {
        right: 5%;
        bottom: 0;
    }


    /* HOW */

    .how-section {
        padding:
            85px
            0;
    }

    .how-heading h2 {
        font-size:
            clamp(43px, 12vw, 60px);
    }

    .how-step {
        min-height: 430px;

        padding: 23px;
    }

    .how-bottom {
        align-items: flex-start;
        flex-direction: column;

        border-radius: 24px;
    }


    /* FEATURES */

    .features-section {
        padding:
            85px
            0
            100px;
    }

    .features-heading {
        margin-bottom: 50px;
    }

    .features-heading h2 {
        font-size:
            clamp(43px, 12vw, 60px);
    }

    .calendar-showcase {
        display: block;

        min-height: auto;

        border-radius: 24px;

        box-shadow:
            6px 6px 0 var(--text);
    }

    .calendar-sidebar {
        display: none;
    }

    .calendar-app {
        padding: 18px 13px;
    }

    .calendar-app__header h3 {
        font-size: 21px;
    }

    .calendar-add-fair {
        min-height: 37px;

        padding-inline: 11px;

        font-size: 7px;
    }

    .calendar-day {
        min-height: 58px;

        padding: 5px;

        font-size: 7px;
    }

    .calendar-day.has-fair > span {
        width: 19px;
        height: 19px;
    }

    .calendar-event {
        padding: 3px;

        font-size: 5px;
    }

    .calendar-app__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .next-fair-panel {
        display: block;

        padding: 24px 20px;
    }

    .next-fair-panel__label {
        margin-bottom: 20px;
    }

    .next-fair-panel__date {
        margin-bottom: 22px;
    }

    .next-fair-panel > p {
        margin-bottom: 25px;
    }

    .next-fair-panel__details {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }

    .next-fair-panel__status {
        margin-top: 25px;
    }

    .calendar-benefits {
        margin-top: 50px;
    }

    .calendar-benefit {
        padding: 22px;
    }

    .features-cta {
        align-items: flex-start;
        flex-direction: column;

        padding: 25px;

        border-radius: 22px;
    }

    .features-cta .button {
        width: 100%;
    }


    /* FOOTER */

    .site-footer__inner {
        flex-direction: column;
    }

    .footer-links {
        text-align: left;
    }

    .site-footer__bottom {
        flex-direction: column;

        gap: 7px;
    }
}


/* =========================================================
   38. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .preview-metrics {
        grid-template-columns: 1fr;
    }

    .floating-sale-badge {
        display: none;
    }

    .solution-module {
        width: 130px;
    }

    .calendar-day {
        min-height: 52px;
    }

    .calendar-event {
        display: none;
    }
}


/* =========================================================
   39. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 2.5
   SALES + COMMISSION SHOWCASE
   ========================================================= */


/* =========================================================
   40. SALES FEATURE SECTION
   ========================================================= */

.sales-feature-section {
    padding:
        clamp(105px, 13vw, 185px)
        0;

    background: #ffffff;

    overflow: hidden;
}

.sales-feature-heading {
    margin-bottom:
        clamp(60px, 8vw, 100px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    align-items: end;

    gap: 65px;
}

.sales-feature-heading h2 {
    max-width: 820px;

    margin-bottom: 0;

    font-size:
        clamp(48px, 6.4vw, 86px);

    line-height: 0.95;

    letter-spacing: -0.065em;
}

.sales-feature-heading__copy p {
    max-width: 520px;

    margin-bottom: 25px;

    color: var(--muted);

    font-size:
        clamp(17px, 1.6vw, 20px);
}

.sales-feature-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.sales-feature-tags span {
    padding:
        7px
        11px;

    background: var(--bg);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.08em;
}


/* =========================================================
   41. SALE FLOW
   ========================================================= */

.sale-flow {
    position: relative;

    margin-bottom:
        clamp(85px, 10vw, 130px);

    padding:
        clamp(35px, 5vw, 65px);

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        100px
        minmax(0, 1.05fr);

    align-items: center;

    gap: 25px;

    background: var(--bg);

    border: var(--border);
    border-radius: 35px;

    overflow: hidden;
}

.sale-flow::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(32, 32, 32, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 32, 32, 0.045) 1px,
            transparent 1px
        );

    background-size:
        32px
        32px;

    pointer-events: none;
}

.sale-flow__column {
    position: relative;

    z-index: 2;
}

.sale-flow__step {
    display: inline-block;

    margin-bottom: 14px;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 0.12em;
}


/* =========================================================
   42. SALE ENTRY CARD
   ========================================================= */

.sale-entry-card {
    overflow: hidden;

    background: #ffffff;

    border: var(--border);
    border-radius: 25px;

    box-shadow:
        7px 7px 0 var(--text);

    transform: rotate(-1deg);
}

.sale-entry-card__header {
    min-height: 80px;

    padding:
        18px
        21px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: var(--coral);

    border-bottom: var(--border);
}

.sale-entry-card__header span,
.sale-entry-card__header strong {
    display: block;
}

.sale-entry-card__header span {
    margin-bottom: 2px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.sale-entry-card__header strong {
    font-size: 18px;

    letter-spacing: -0.5px;
}

.sale-entry-card__close {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 50%;

    font-size: 20px;
    font-weight: 700;
}

.sale-entry-card__body {
    padding: 24px;
}

.sale-entry-card__body label {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.09em;
}

.sale-amount-field {
    min-height: 78px;

    padding:
        0
        20px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: var(--bg);

    border: 1.5px solid var(--text);
    border-radius: 16px;
}

.sale-amount-field span {
    font-size: 22px;
    font-weight: 900;
}

.sale-amount-field strong {
    font-size:
        clamp(30px, 4vw, 42px);

    line-height: 1;

    letter-spacing: -1.5px;
}

.sale-form-row {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.sale-small-field {
    min-height: 47px;

    padding:
        0
        13px;

    display: flex;
    align-items: center;

    background: #ffffff;

    border:
        1px solid rgba(32, 32, 32, 0.45);

    border-radius: 11px;

    font-size: 10px;
    font-weight: 850;
}

.sale-fair-reference {
    margin-top: 18px;

    padding: 15px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 13px;

    background:
        rgba(16, 191, 232, 0.12);

    border:
        1px solid rgba(32, 32, 32, 0.25);

    border-radius: 13px;
}

.sale-fair-reference > span {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cyan);

    border: 1px solid var(--text);
    border-radius: 50%;

    font-size: 7px;
    font-weight: 950;
}

.sale-fair-reference strong,
.sale-fair-reference small {
    display: block;
}

.sale-fair-reference strong {
    font-size: 12px;
}

.sale-fair-reference small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 8px;
}

.sale-save-button {
    width: 100%;
    min-height: 52px;

    margin-top: 20px;

    background: var(--text);
    color: #ffffff;

    border: none;
    border-radius: var(--radius-pill);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 0.06em;

    pointer-events: none;
}


/* =========================================================
   43. SALE FLOW CONNECTOR
   ========================================================= */

.sale-flow__connector {
    position: relative;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 7px;
}

.sale-flow__connector > span {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);

    border: var(--border);
    border-radius: 50%;

    box-shadow: var(--shadow-sm);

    font-size: 27px;
    font-weight: 950;
}

.sale-flow__connector small {
    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.1em;
}


/* =========================================================
   44. COMMISSION CALCULATION
   ========================================================= */

.commission-calculation-card {
    padding:
        clamp(25px, 4vw, 38px);

    background: var(--text);
    color: #ffffff;

    border: var(--border);
    border-radius: 25px;

    box-shadow:
        7px 7px 0 var(--cyan);

    transform: rotate(1deg);
}

.commission-calc-label {
    display: block;

    margin-bottom: 30px;

    color: var(--lime);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.12em;
}

.commission-equation {
    display: grid;

    grid-template-columns:
        1fr
        auto
        0.8fr
        auto
        1.25fr;

    align-items: center;

    gap: 13px;
}

.commission-equation > div {
    min-width: 0;
}

.commission-equation span,
.commission-equation strong {
    display: block;
}

.commission-equation span {
    margin-bottom: 5px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.08em;
}

.commission-equation strong {
    font-size:
        clamp(22px, 3vw, 34px);

    line-height: 1;

    letter-spacing: -1px;
}

.commission-equation > b {
    color: var(--cyan);

    font-size: 25px;
}

.commission-equation__result {
    padding: 18px;

    background: var(--lime);
    color: var(--text);

    border-radius: 15px;
}

.commission-equation__result span {
    color:
        rgba(32, 32, 32, 0.65);
}

.commission-equation__result strong {
    font-size:
        clamp(28px, 4vw, 42px);
}

.commission-confirmation {
    margin-top: 28px;

    padding-top: 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-top:
        1px solid rgba(255, 255, 255, 0.15);
}

.commission-confirmation > span {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border-radius: 50%;

    font-weight: 950;
}

.commission-confirmation strong,
.commission-confirmation small {
    display: block;
}

.commission-confirmation strong {
    font-size: 11px;
}

.commission-confirmation small {
    margin-top: 2px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 8px;
}


/* =========================================================
   45. SALES DASHBOARD
   ========================================================= */

.sales-dashboard-showcase {
    overflow: hidden;

    background: var(--bg);

    border: var(--border);
    border-radius: 32px;

    box-shadow:
        9px 9px 0 var(--text);
}

.sales-dashboard-topbar {
    padding:
        27px
        30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    background: #ffffff;

    border-bottom: var(--border);
}

.sales-dashboard-kicker {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.sales-dashboard-topbar h3 {
    margin-bottom: 2px;

    font-size:
        clamp(25px, 4vw, 36px);

    line-height: 1;

    letter-spacing: -1px;
}

.sales-dashboard-topbar p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 10px;
}

.sales-dashboard-currency {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);

    border: var(--border);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 950;
}


/* =========================================================
   46. SALES METRICS
   ========================================================= */

.sales-dashboard-metrics {
    padding:
        22px
        25px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}

.sales-stat {
    min-height: 135px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    border: 1.5px solid var(--text);
    border-radius: 18px;
}

.sales-stat span {
    margin-bottom: auto;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.09em;
}

.sales-stat strong {
    display: block;

    margin-top: 20px;

    font-size:
        clamp(23px, 3vw, 32px);

    line-height: 1;

    letter-spacing: -1px;
}

.sales-stat small {
    display: block;

    margin-top: 5px;

    font-size: 8px;
    font-weight: 750;
}

.sales-stat--dark {
    background: var(--text);
    color: #ffffff;
}

.sales-stat--lime {
    background: var(--lime);
}

.sales-stat--cyan {
    background: var(--cyan);
}

.sales-stat--coral {
    background: var(--coral);
}


/* =========================================================
   47. SALES DASHBOARD BODY
   ========================================================= */

.sales-dashboard-body {
    padding:
        0
        25px
        25px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap: 18px;
}


/* =========================================================
   48. SALES LIST
   ========================================================= */

.sales-list-panel {
    overflow: hidden;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 20px;
}

.sales-list-panel__header {
    padding:
        20px
        22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.12);
}

.sales-list-panel__header span,
.sales-list-panel__header strong {
    display: block;
}

.sales-list-panel__header span {
    color: var(--muted);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.09em;
}

.sales-list-panel__header strong {
    margin-top: 2px;

    font-size: 18px;
}

.sales-list-count {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--coral);

    border: 1px solid var(--text);
    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}

.sales-table-head,
.sales-table-row {
    display: grid;

    grid-template-columns:
        0.8fr
        1fr
        0.7fr
        1fr;

    align-items: center;

    gap: 10px;
}

.sales-table-head {
    padding:
        9px
        22px;

    background: var(--text);
    color: #ffffff;
}

.sales-table-head span {
    font-size: 6px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.sales-table-row {
    padding:
        14px
        22px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.1);
}

.sales-table-row span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 750;
}

.sales-table-row strong {
    font-size: 11px;
}

.sales-table-row > *:last-child,
.sales-table-head > *:last-child {
    text-align: right;
}

.sales-list-panel__footer {
    padding:
        15px
        22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    background: var(--bg);
}

.sales-list-panel__footer span {
    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.sales-list-panel__footer strong {
    font-size: 17px;
}


/* =========================================================
   49. COMMISSION SUMMARY
   ========================================================= */

.commission-summary-panel {
    padding: 25px;

    background: var(--lime);

    border: 1.5px solid var(--text);
    border-radius: 20px;
}

.commission-summary-panel__label {
    display: block;

    margin-bottom: 30px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.commission-summary-panel__rate {
    padding-bottom: 17px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.25);
}

.commission-summary-panel__rate span {
    font-size: 7px;
    font-weight: 900;
}

.commission-summary-panel__rate strong {
    font-size: 25px;

    line-height: 1;
}

.commission-summary-panel__earned {
    padding:
        25px
        0;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.25);
}

.commission-summary-panel__earned span,
.commission-summary-panel__earned strong,
.commission-summary-panel__earned small {
    display: block;
}

.commission-summary-panel__earned span {
    font-size: 7px;
    font-weight: 900;
}

.commission-summary-panel__earned strong {
    margin:
        5px
        0;

    font-size:
        clamp(34px, 4vw, 45px);

    line-height: 1;

    letter-spacing: -1.5px;
}

.commission-summary-panel__earned small {
    font-size: 8px;
    font-weight: 750;
}

.commission-progress {
    padding-top: 22px;
}

.commission-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.commission-progress__head span,
.commission-progress__head strong {
    font-size: 7px;
    font-weight: 950;
}

.commission-progress__track {
    height: 10px;

    margin-top: 9px;

    overflow: hidden;

    background:
        rgba(32, 32, 32, 0.15);

    border:
        1px solid rgba(32, 32, 32, 0.5);

    border-radius: var(--radius-pill);
}

.commission-progress__track span {
    width: 50%;
    height: 100%;

    display: block;

    background: var(--text);
}

.commission-summary-panel__message {
    margin-top: 24px;

    padding: 13px;

    display: flex;

    gap: 9px;

    background:
        rgba(255, 255, 255, 0.55);

    border:
        1px solid rgba(32, 32, 32, 0.3);

    border-radius: 12px;
}

.commission-summary-panel__message > span {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    font-size: 9px;
}

.commission-summary-panel__message p {
    margin: 0;

    font-size: 8px;
    font-weight: 750;

    line-height: 1.4;
}


/* =========================================================
   50. CURRENCY FEATURE
   ========================================================= */

.currency-feature {
    margin-top:
        clamp(85px, 10vw, 135px);

    padding:
        clamp(35px, 6vw, 65px);

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(400px, 1.1fr);

    align-items: center;

    gap:
        clamp(50px, 8vw, 100px);

    background: var(--text);
    color: #ffffff;

    border-radius: 32px;
}

.currency-feature .section-kicker {
    color: var(--lime);
}

.currency-feature__copy h3 {
    max-width: 570px;

    margin-bottom: 20px;

    font-size:
        clamp(39px, 5vw, 64px);

    line-height: 0.96;

    letter-spacing: -0.055em;
}

.currency-feature__copy p {
    max-width: 500px;

    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 15px;
}

.currency-feature__cards {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;
}

.currency-card {
    min-height: 200px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    color: var(--text);

    border: var(--border);
    border-radius: 22px;

    box-shadow:
        5px 5px 0 #ffffff;
}

.currency-card--eur {
    background: var(--cyan);

    transform: rotate(-3deg);
}

.currency-card--usd {
    background: var(--lime);

    transform: rotate(3deg);
}

.currency-card span {
    margin-bottom: auto;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 0.1em;
}

.currency-card strong {
    display: block;

    margin-top: 35px;

    font-size:
        clamp(28px, 4vw, 40px);

    line-height: 1;

    letter-spacing: -1px;
}

.currency-card small {
    display: block;

    margin-top: 8px;

    font-size: 8px;
    font-weight: 750;
}

.currency-plus {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--coral);
    color: var(--text);

    border: 2px solid #ffffff;
    border-radius: 50%;

    font-size: 20px;
    font-weight: 950;
}


/* =========================================================
   51. SALES BENEFITS
   ========================================================= */

.sales-benefits {
    margin-top:
        clamp(70px, 9vw, 115px);

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.sales-benefit {
    padding:
        30px
        27px;

    background: var(--bg);

    border: var(--border);
    border-radius: 22px;
}

.sales-benefit > span {
    width: 43px;
    height: 43px;

    margin-bottom: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}

.sales-benefit:nth-child(1) > span {
    background: var(--cyan);
    color: var(--text);
}

.sales-benefit:nth-child(2) > span {
    background: var(--coral);
    color: var(--text);
}

.sales-benefit:nth-child(3) > span {
    background: var(--lime);
    color: var(--text);
}

.sales-benefit h3 {
    margin-bottom: 10px;

    font-size: 24px;

    line-height: 1;

    letter-spacing: -0.7px;
}

.sales-benefit p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   52. SALES CTA
   ========================================================= */

.sales-feature-cta {
    margin-top: 25px;

    padding:
        clamp(30px, 5vw, 48px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    background: var(--coral);

    border: var(--border);
    border-radius: 26px;
}

.sales-feature-cta > div > span {
    display: block;

    margin-bottom: 6px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.12em;
}

.sales-feature-cta h3 {
    max-width: 650px;

    margin-bottom: 0;

    font-size:
        clamp(29px, 4vw, 47px);

    line-height: 0.98;

    letter-spacing: -0.045em;
}

.sales-feature-cta__action {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    flex-direction: column;

    gap: 9px;
}

.sales-feature-cta__action small {
    font-size: 8px;
    font-weight: 850;
}


/* =========================================================
   53. SALES RESPONSIVE <= 960
   ========================================================= */

@media (max-width: 960px) {

    .sales-feature-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .sale-flow {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .sale-flow__connector {
        transform: rotate(90deg);
    }

    .sale-flow__connector small {
        display: none;
    }

    .commission-equation {
        grid-template-columns:
            1fr
            auto
            1fr
            auto
            1.2fr;
    }

    .sales-dashboard-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .sales-dashboard-body {
        grid-template-columns: 1fr;
    }

    .commission-summary-panel {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 20px;
    }

    .commission-summary-panel__label {
        grid-column: 1 / -1;

        margin-bottom: 0;
    }

    .commission-summary-panel__rate {
        align-items: flex-start;
        flex-direction: column;
    }

    .commission-summary-panel__earned {
        padding: 0;

        border-bottom: none;
    }

    .commission-progress,
    .commission-summary-panel__message {
        grid-column: 1 / -1;
    }

    .currency-feature {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .sales-benefits {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   54. SALES RESPONSIVE <= 650
   ========================================================= */

@media (max-width: 650px) {

    .sales-feature-section {
        padding:
            85px
            0
            100px;
    }

    .sales-feature-heading {
        margin-bottom: 50px;
    }

    .sales-feature-heading h2 {
        font-size:
            clamp(43px, 12vw, 60px);
    }

    .sale-flow {
        padding: 20px 14px;

        border-radius: 25px;
    }

    .sale-entry-card {
        border-radius: 20px;

        box-shadow:
            5px 5px 0 var(--text);

        transform: none;
    }

    .sale-entry-card__body {
        padding: 18px;
    }

    .sale-form-row {
        grid-template-columns: 1fr;
    }

    .sale-flow__connector > span {
        width: 55px;
        height: 55px;
    }

    .commission-calculation-card {
        padding: 22px 18px;

        transform: none;

        box-shadow:
            5px 5px 0 var(--cyan);
    }

    .commission-equation {
        grid-template-columns:
            1fr
            auto
            1fr;

        gap: 10px;
    }

    .commission-equation > b:nth-of-type(2) {
        display: none;
    }

    .commission-equation__result {
        grid-column: 1 / -1;

        margin-top: 5px;
    }


    /* DASHBOARD */

    .sales-dashboard-showcase {
        border-radius: 24px;

        box-shadow:
            6px 6px 0 var(--text);
    }

    .sales-dashboard-topbar {
        padding: 22px 18px;
    }

    .sales-dashboard-metrics {
        padding: 15px;

        grid-template-columns: 1fr 1fr;

        gap: 9px;
    }

    .sales-stat {
        min-height: 120px;

        padding: 15px;
    }

    .sales-dashboard-body {
        padding:
            0
            15px
            15px;
    }

    .sales-table-head,
    .sales-table-row {
        grid-template-columns:
            0.8fr
            1fr
            0.7fr
            1fr;

        gap: 5px;
    }

    .sales-table-head {
        padding:
            9px
            12px;
    }

    .sales-table-row {
        padding:
            13px
            12px;
    }

    .sales-table-row span {
        font-size: 7px;
    }

    .sales-table-row strong {
        font-size: 9px;
    }

    .sales-list-panel__footer {
        padding:
            14px
            12px;
    }

    .commission-summary-panel {
        display: block;

        padding: 20px;
    }

    .commission-summary-panel__label {
        margin-bottom: 25px;
    }

    .commission-summary-panel__rate {
        align-items: flex-end;
        flex-direction: row;
    }

    .commission-summary-panel__earned {
        padding:
            22px
            0;

        border-bottom:
            1px solid rgba(32, 32, 32, 0.25);
    }

    .commission-progress,
    .commission-summary-panel__message {
        margin-top: 22px;
    }


    /* CURRENCY */

    .currency-feature {
        padding:
            35px
            20px;

        border-radius: 24px;
    }

    .currency-feature__copy h3 {
        font-size:
            clamp(38px, 11vw, 54px);
    }

    .currency-feature__cards {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .currency-card {
        min-height: 170px;

        transform: none;
    }

    .currency-plus {
        margin-inline: auto;
    }


    /* BENEFITS */

    .sales-benefit > span {
        margin-bottom: 30px;
    }


    /* CTA */

    .sales-feature-cta {
        align-items: flex-start;
        flex-direction: column;

        gap: 30px;

        padding: 26px 22px;
    }

    .sales-feature-cta__action {
        width: 100%;
    }

    .sales-feature-cta__action .button {
        width: 100%;
    }
}


/* =========================================================
   55. SALES RESPONSIVE <= 380
   ========================================================= */

@media (max-width: 380px) {

    .sales-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .sales-table-head span:nth-child(3),
    .sales-table-row > *:nth-child(3) {
        display: none;
    }

    .sales-table-head,
    .sales-table-row {
        grid-template-columns:
            0.8fr
            1fr
            1fr;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 2.7
   STATISTICS & COMMISSION PERFORMANCE
   ========================================================= */


/* =========================================================
   75. STATISTICS SECTION
   ========================================================= */

.statistics-section {
    padding:
        clamp(110px, 14vw, 190px)
        0;

    background: #ffffff;

    overflow: hidden;
}

.statistics-heading {
    margin-bottom:
        clamp(65px, 9vw, 110px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    align-items: end;

    gap: 70px;
}

.statistics-heading h2 {
    max-width: 850px;

    margin-bottom: 0;

    font-size:
        clamp(52px, 7vw, 92px);

    line-height: 0.91;

    letter-spacing: -0.07em;
}

.statistics-heading__copy p {
    max-width: 520px;

    margin-bottom: 25px;

    color: var(--muted);

    font-size:
        clamp(17px, 1.6vw, 20px);
}

.statistics-heading__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.statistics-heading__tags span {
    padding:
        7px
        11px;

    background: var(--bg);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.08em;
}


/* =========================================================
   76. ANALYTICS APPLICATION
   ========================================================= */

.analytics-app {
    overflow: hidden;

    background: var(--bg);

    border: var(--border);
    border-radius: 32px;

    box-shadow:
        10px 10px 0 var(--text);
}

.analytics-app__topbar {
    min-height: 105px;

    padding:
        25px
        30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    background: var(--text);
    color: #ffffff;

    border-bottom: var(--border);
}

.analytics-app__eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--lime);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.12em;
}

.analytics-app__topbar h3 {
    margin: 0;

    font-size:
        clamp(27px, 4vw, 39px);

    line-height: 1;

    letter-spacing: -1px;
}

.analytics-period {
    display: flex;
    align-items: center;

    gap: 15px;
}

.analytics-period strong {
    min-width: 75px;

    text-align: center;

    font-size: 15px;
}

.analytics-period__arrow {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: var(--text);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 950;
}


/* =========================================================
   77. ANALYTICS TOOLBAR
   ========================================================= */

.analytics-toolbar {
    padding:
        18px
        25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: #ffffff;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.18);
}

.analytics-tabs {
    padding: 4px;

    display: flex;

    gap: 3px;

    background: var(--bg);

    border:
        1px solid rgba(32, 32, 32, 0.35);

    border-radius: var(--radius-pill);
}

.analytics-tab {
    min-width: 58px;

    padding:
        8px
        14px;

    text-align: center;

    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;
}

.analytics-tab.is-active {
    background: var(--text);
    color: #ffffff;
}

.analytics-filter {
    display: flex;
    align-items: center;

    gap: 8px;
}

.analytics-filter span {
    color: var(--muted);

    font-size: 7px;
    font-weight: 950;
}

.analytics-filter strong {
    padding:
        7px
        11px;

    background: var(--lime);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
}


/* =========================================================
   78. ANALYTICS METRICS
   ========================================================= */

.analytics-metrics {
    padding:
        24px
        25px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}

.analytics-metric {
    min-height: 155px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    border: 1.5px solid var(--text);
    border-radius: 19px;
}

.analytics-metric__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.analytics-metric__top span {
    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.analytics-metric__top i {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(255, 255, 255, 0.55);

    border:
        1px solid currentColor;

    border-radius: 50%;

    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

.analytics-metric > strong {
    display: block;

    margin-top: auto;

    font-size:
        clamp(27px, 3.3vw, 39px);

    line-height: 1;

    letter-spacing: -1.4px;
}

.analytics-metric > small {
    display: block;

    margin-top: 6px;

    font-size: 8px;
    font-weight: 750;
}

.analytics-metric--dark {
    background: var(--text);
    color: #ffffff;
}

.analytics-metric--lime {
    background: var(--lime);
}

.analytics-metric--cyan {
    background: var(--cyan);
}

.analytics-metric--coral {
    background: var(--coral);
}


/* =========================================================
   79. ANALYTICS GRID
   ========================================================= */

.analytics-grid {
    padding:
        0
        25px
        25px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, 0.55fr);

    gap: 18px;
}

.analytics-panel {
    min-width: 0;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 20px;

    overflow: hidden;
}

.analytics-panel__header {
    min-height: 80px;

    padding:
        19px
        21px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.12);
}

.analytics-panel__header span {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.09em;
}

.analytics-panel__header h4 {
    margin: 0;

    font-size: 18px;

    line-height: 1;
}

.analytics-panel__currency {
    padding:
        7px
        10px;

    background: var(--lime);

    color: var(--text) !important;

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
}


/* =========================================================
   80. SALES BAR CHART
   ========================================================= */

.sales-chart {
    min-height: 330px;

    padding:
        30px
        20px
        22px;

    display: grid;

    grid-template-columns:
        38px
        1fr;

    gap: 10px;
}

.sales-chart__scale {
    height: 250px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: var(--muted);

    font-size: 6px;
    font-weight: 850;
}

.sales-chart__area {
    position: relative;

    height: 280px;
}

.sales-chart__lines {
    position: absolute;

    inset:
        0
        0
        30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    pointer-events: none;
}

.sales-chart__lines span {
    width: 100%;
    height: 1px;

    display: block;

    background:
        rgba(32, 32, 32, 0.09);
}

.sales-chart__bars {
    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    align-items: end;

    gap: 9px;
}

.chart-column {
    height: 100%;

    display: grid;

    grid-template-rows:
        1fr
        25px;

    align-items: end;

    gap: 5px;
}

.chart-column small {
    text-align: center;

    color: var(--muted);

    font-size: 6px;
    font-weight: 950;
}

.chart-bar {
    position: relative;

    width: 100%;
    height: var(--bar-height);

    align-self: end;

    background: var(--cyan);

    border:
        1.5px solid var(--text);

    border-radius:
        8px
        8px
        3px
        3px;

    transition:
        transform 0.2s ease;
}

.chart-bar:hover {
    transform:
        translateY(-4px);
}

.chart-bar--highlight {
    background: var(--lime);
}

.chart-bar span {
    position: absolute;

    left: 50%;
    top: -24px;

    transform:
        translateX(-50%);

    padding:
        4px
        6px;

    white-space: nowrap;

    background: var(--text);
    color: #ffffff;

    border-radius: 5px;

    font-size: 6px;
    font-weight: 900;
}


/* =========================================================
   81. COMMISSION EARNINGS
   ========================================================= */

.analytics-panel--commission {
    background: var(--text);
    color: #ffffff;
}

.analytics-panel--commission
.analytics-panel__header {
    border-color:
        rgba(255, 255, 255, 0.15);
}

.analytics-panel--commission
.analytics-panel__header span {
    color:
        rgba(255, 255, 255, 0.5);
}

.earnings-visual {
    padding:
        35px
        25px
        25px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.earnings-circle {
    width: 205px;
    height: 205px;

    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        conic-gradient(
            var(--lime) 0deg 285deg,
            rgba(255, 255, 255, 0.12)
            285deg 360deg
        );

    border-radius: 50%;
}

.earnings-circle__inner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background: var(--text);

    border-radius: 50%;
}

.earnings-circle__inner span,
.earnings-circle__inner strong,
.earnings-circle__inner small {
    display: block;
}

.earnings-circle__inner span {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.earnings-circle__inner strong {
    margin:
        5px
        0;

    font-size: 30px;

    line-height: 1;
}

.earnings-circle__inner small {
    color: var(--lime);

    font-size: 8px;
    font-weight: 900;
}

.earnings-rate {
    margin-top: 22px;

    text-align: center;
}

.earnings-rate span,
.earnings-rate strong {
    display: block;
}

.earnings-rate span {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 7px;
    font-weight: 950;
}

.earnings-rate strong {
    margin-top: 3px;

    color: var(--lime);

    font-size: 23px;
}

.earnings-breakdown {
    margin:
        0
        20px
        20px;

    padding: 16px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 10px;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 13px;
}

.earnings-breakdown span,
.earnings-breakdown strong {
    display: block;
}

.earnings-breakdown div > span {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 6px;
    font-weight: 950;
}

.earnings-breakdown strong {
    margin-top: 3px;

    font-size: 13px;
}

.earnings-breakdown__arrow {
    color: var(--cyan) !important;

    font-size: 18px !important;
}


/* =========================================================
   82. FAIR PERFORMANCE TABLE
   ========================================================= */

.fair-performance {
    margin:
        0
        25px
        25px;

    overflow: hidden;

    background: #ffffff;

    border: 1.5px solid var(--text);
    border-radius: 20px;
}

.fair-performance__header {
    min-height: 80px;

    padding:
        18px
        22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.12);
}

.fair-performance__header span {
    display: block;

    color: var(--muted);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.09em;
}

.fair-performance__header h4 {
    margin:
        2px
        0
        0;

    font-size: 18px;
}

.fair-performance__count {
    padding:
        7px
        10px;

    background: var(--coral);

    color: var(--text) !important;

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
}

.fair-performance__head,
.fair-performance__row {
    display: grid;

    grid-template-columns:
        minmax(210px, 1.5fr)
        0.8fr
        0.8fr
        0.8fr
        1fr;

    align-items: center;

    gap: 15px;
}

.fair-performance__head {
    padding:
        10px
        22px;

    background: var(--text);
    color: #ffffff;
}

.fair-performance__head span {
    font-size: 6px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.fair-performance__row {
    min-height: 70px;

    padding:
        11px
        22px;

    border-bottom:
        1px solid rgba(32, 32, 32, 0.1);
}

.fair-performance__row:last-child {
    border-bottom: none;
}

.fair-performance__row > span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 750;
}

.fair-performance__row > strong {
    font-size: 11px;
}

.fair-performance__fair {
    display: flex;
    align-items: center;

    gap: 11px;
}

.fair-performance__rank {
    width: 33px;
    height: 33px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--bg);

    border: 1px solid var(--text);
    border-radius: 50%;

    font-size: 7px;
    font-weight: 950;
}

.fair-performance__row:first-of-type
.fair-performance__rank {
    background: var(--lime);
}

.fair-performance__fair strong,
.fair-performance__fair small {
    display: block;
}

.fair-performance__fair strong {
    font-size: 11px;
}

.fair-performance__fair small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 7px;
}

.fair-result {
    height: 8px;

    overflow: hidden;

    background:
        rgba(32, 32, 32, 0.1);

    border-radius: var(--radius-pill);
}

.fair-result span {
    width: var(--result-width);
    height: 100%;

    display: block;

    background: var(--cyan);

    border-radius: inherit;
}

.fair-performance__row:first-of-type
.fair-result span {
    background: var(--lime);
}


/* =========================================================
   83. STATISTICS CURRENCIES
   ========================================================= */

.statistics-currencies {
    margin-top:
        clamp(100px, 12vw, 160px);

    padding:
        clamp(38px, 6vw, 70px);

    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(440px, 1.2fr);

    align-items: center;

    gap:
        clamp(50px, 8vw, 100px);

    background: var(--bg);

    border: var(--border);
    border-radius: 32px;
}

.statistics-currencies__copy h3 {
    max-width: 590px;

    margin-bottom: 20px;

    font-size:
        clamp(43px, 5.5vw, 70px);

    line-height: 0.93;

    letter-spacing: -0.06em;
}

.statistics-currencies__copy p {
    max-width: 520px;

    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
}

.statistics-currencies__visual {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 13px;
}

.stats-currency {
    min-height: 260px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    border: var(--border);
    border-radius: 22px;

    box-shadow: var(--shadow-sm);
}

.stats-currency--eur {
    background: var(--cyan);

    transform: rotate(-2deg);
}

.stats-currency--usd {
    background: var(--lime);

    transform: rotate(2deg);
}

.stats-currency__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.stats-currency__top span {
    font-size: 13px;
    font-weight: 950;
}

.stats-currency__top small {
    font-size: 7px;
    font-weight: 900;
}

.stats-currency__amount {
    margin-top: auto;
}

.stats-currency__amount span,
.stats-currency__amount strong,
.stats-currency__commission span,
.stats-currency__commission strong {
    display: block;
}

.stats-currency__amount span,
.stats-currency__commission span {
    font-size: 7px;
    font-weight: 950;

    letter-spacing: 0.08em;
}

.stats-currency__amount strong {
    margin-top: 5px;

    font-size:
        clamp(28px, 3.5vw, 40px);

    line-height: 1;

    letter-spacing: -1px;
}

.stats-currency__commission {
    margin-top: 20px;

    padding-top: 15px;

    border-top:
        1px solid rgba(32, 32, 32, 0.3);
}

.stats-currency__commission strong {
    margin-top: 3px;

    font-size: 19px;
}

.currency-separator {
    width: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 7px;
}

.currency-separator > span {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--coral);

    border: var(--border);
    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}

.currency-separator small {
    text-align: center;

    font-size: 6px;
    font-weight: 950;

    line-height: 1.2;
}


/* =========================================================
   84. STATISTICS BENEFITS
   ========================================================= */

.statistics-benefits {
    margin-top:
        clamp(70px, 9vw, 110px);

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.statistics-benefits article {
    min-height: 255px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: var(--border);
    border-radius: 21px;
}

.statistics-benefits article > span {
    width: 42px;
    height: 42px;

    margin-bottom: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 950;
}

.statistics-benefits article:nth-child(1) {
    box-shadow:
        inset 0 -7px 0 var(--cyan);
}

.statistics-benefits article:nth-child(2) {
    box-shadow:
        inset 0 -7px 0 var(--coral);
}

.statistics-benefits article:nth-child(3) {
    box-shadow:
        inset 0 -7px 0 var(--lime);
}

.statistics-benefits h3 {
    margin:
        45px
        0
        10px;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -0.9px;
}

.statistics-benefits p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   85. STATISTICS CTA
   ========================================================= */

.statistics-cta {
    margin-top: 25px;

    padding:
        clamp(30px, 5vw, 50px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    background: var(--cyan);

    border: var(--border);
    border-radius: 25px;
}

.statistics-cta > div > span {
    display: block;

    margin-bottom: 7px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.11em;
}

.statistics-cta h3 {
    max-width: 700px;

    margin: 0;

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 0.97;

    letter-spacing: -0.045em;
}


/* =========================================================
   86. RESPONSIVE <= 1050
   ========================================================= */

@media (max-width: 1050px) {

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .analytics-panel--commission {
        min-height: 420px;
    }

    .earnings-visual {
        flex-direction: row;

        gap: 50px;
    }

    .earnings-rate {
        margin-top: 0;
    }

    .statistics-currencies {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .statistics-currencies__copy {
        max-width: 700px;
    }

}


/* =========================================================
   87. RESPONSIVE <= 960
   ========================================================= */

@media (max-width: 960px) {

    .statistics-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .analytics-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .fair-performance__table {
        overflow-x: auto;
    }

    .fair-performance__head,
    .fair-performance__row {
        min-width: 780px;
    }

    .statistics-benefits {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   88. RESPONSIVE <= 650
   ========================================================= */

@media (max-width: 650px) {

    .statistics-section {
        padding:
            90px
            0;
    }

    .statistics-heading {
        margin-bottom: 55px;
    }

    .statistics-heading h2 {
        font-size:
            clamp(49px, 14vw, 67px);
    }


    /* ANALYTICS */

    .analytics-app {
        border-radius: 24px;

        box-shadow:
            6px 6px 0 var(--text);
    }

    .analytics-app__topbar {
        min-height: 90px;

        padding:
            20px
            17px;
    }

    .analytics-period {
        gap: 6px;
    }

    .analytics-period__arrow {
        width: 30px;
        height: 30px;
    }

    .analytics-period strong {
        min-width: 50px;

        font-size: 11px;
    }

    .analytics-toolbar {
        padding:
            13px
            15px;
    }

    .analytics-metrics {
        padding: 15px;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 9px;
    }

    .analytics-metric {
        min-height: 125px;

        padding: 15px;
    }

    .analytics-metric > strong {
        font-size:
            clamp(23px, 8vw, 32px);
    }

    .analytics-grid {
        padding:
            0
            15px
            15px;
    }


    /* CHART */

    .sales-chart {
        min-height: 300px;

        padding:
            28px
            10px
            17px;

        grid-template-columns:
            30px
            1fr;
    }

    .sales-chart__bars {
        gap: 4px;
    }

    .chart-bar span {
        display: none;
    }


    /* EARNINGS */

    .analytics-panel--commission {
        min-height: auto;
    }

    .earnings-visual {
        flex-direction: column;

        gap: 20px;
    }

    .earnings-rate {
        margin-top: 0;
    }


    /* FAIR TABLE */

    .fair-performance {
        margin:
            0
            15px
            15px;
    }

    .fair-performance__header {
        padding:
            17px
            15px;
    }


    /* CURRENCIES */

    .statistics-currencies {
        margin-top: 90px;

        padding:
            35px
            20px;

        border-radius: 24px;
    }

    .statistics-currencies__copy h3 {
        font-size:
            clamp(42px, 12vw, 57px);
    }

    .statistics-currencies__visual {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .stats-currency {
        min-height: 220px;

        transform: none;
    }

    .currency-separator {
        width: auto;

        margin-inline: auto;
    }


    /* BENEFITS */

    .statistics-benefits article {
        min-height: 230px;
    }


    /* CTA */

    .statistics-cta {
        align-items: flex-start;
        flex-direction: column;

        gap: 30px;

        padding:
            27px
            22px;
    }

    .statistics-cta .button {
        width: 100%;
    }

}


/* =========================================================
   89. RESPONSIVE <= 380
   ========================================================= */

@media (max-width: 380px) {

    .analytics-metrics {
        grid-template-columns: 1fr;
    }

    .analytics-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .analytics-filter {
        width: 100%;

        justify-content: space-between;
    }

    .earnings-circle {
        width: 180px;
        height: 180px;
    }

}


/* =========================================================
   FAIRPILOT
   PHASE 2.7 — INDEX.PHP COMPATIBILITY PATCH
   Statistics & Commission Performance
   Aligns the current Block 2.7 HTML with the existing design.
   ========================================================= */

.statistics-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.statistics-tags span {
    padding: 7px 11px;
    background: var(--bg);
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
}

.analytics-toolbar__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--coral);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.analytics-toolbar h3 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1;
    letter-spacing: -1px;
}

.analytics-toolbar__period {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
}

.analytics-toolbar__period span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
}

.analytics-toolbar__period strong {
    font-size: 13px;
}

.analytics-metric {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.analytics-metric > span {
    display: block;
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.analytics-metric > strong {
    display: block;
    margin-top: 18px;
    font-size: clamp(27px, 3vw, 40px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.analytics-metric > small {
    display: block;
    margin-top: 7px;
    font-size: 8px;
    font-weight: 850;
    opacity: .78;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sales-chart {
    min-height: 480px;
    padding: clamp(24px, 4vw, 38px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: var(--border);
    border-radius: 24px;
}

.sales-chart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 35px;
}

.sales-chart__header div > span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.sales-chart__header div > strong {
    display: block;
    font-size: clamp(22px, 3vw, 31px);
    line-height: 1;
    letter-spacing: -1px;
}

.sales-chart__currency {
    padding: 7px 11px;
    background: var(--lime);
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 950;
}

.sales-chart__area {
    min-height: 285px;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(28px, 1fr));
    align-items: end;
    gap: clamp(9px, 1.8vw, 18px);
    padding: 25px 8px 0;
    background-image:
        linear-gradient(to top, rgba(32,32,32,.10) 1px, transparent 1px);
    background-size: 100% 25%;
    border-bottom: 1px solid rgba(32,32,32,.35);
}

.sales-chart__bar {
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
}

.sales-chart__bar > span {
    width: 100%;
    min-height: 12px;
    display: block;
    background: var(--cyan);
    border: 1px solid var(--text);
    border-radius: 10px 10px 3px 3px;
}

.sales-chart__bar.is-highlighted > span {
    background: var(--lime);
}

.sales-chart__bar small {
    display: block;
    text-align: center;
    font-size: 8px;
    font-weight: 950;
}

.sales-chart__footer {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.sales-chart__footer span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
}

.sales-chart__footer strong {
    font-size: 15px;
}

.earnings-card {
    min-height: 480px;
    padding: clamp(25px, 4vw, 38px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--text);
    color: #fff;
    border: var(--border);
    border-radius: 24px;
}

.earnings-card__label {
    margin-bottom: 25px;
    color: var(--lime);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .1em;
}

.earnings-ring {
    width: clamp(165px, 18vw, 210px);
    aspect-ratio: 1;
    margin-bottom: 26px;
    padding: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--lime) 0 30%, rgba(255,255,255,.14) 30% 100%);
}

.earnings-ring__inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--text);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
}

.earnings-ring__inner span {
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 950;
    line-height: 1;
}

.earnings-ring__inner small {
    margin-top: 6px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.earnings-card__value {
    display: block;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.earnings-card__caption {
    margin-top: 8px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
}

.earnings-card__status {
    margin-top: 24px;
    padding: 9px 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 800;
}

.earnings-card__status span {
    color: var(--lime);
    margin-right: 5px;
}

.fair-performance__header > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.fair-performance__header > div > strong {
    display: block;
    font-size: clamp(19px, 2.5vw, 26px);
    line-height: 1.05;
}

.fair-performance__header > span {
    padding: 7px 11px;
    background: var(--cyan);
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 9px;
    font-weight: 950;
}

.statistics-currencies__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.stats-currency > span {
    display: inline-flex;
    margin-bottom: 28px;
    padding: 6px 10px;
    background: rgba(255,255,255,.65);
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 950;
}

.stats-currency > strong {
    display: block;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.stats-currency > small {
    display: block;
    margin-top: 7px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
}

.stats-currency > div {
    margin-top: 30px;
    padding-top: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid rgba(32,32,32,.35);
}

.stats-currency > div span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .07em;
}

.stats-currency > div strong {
    font-size: 20px;
}

.statistics-cta__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.statistics-cta__action small {
    font-size: 9px;
    font-weight: 850;
    opacity: .7;
}

@media (max-width: 960px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .sales-chart,
    .earnings-card {
        min-height: auto;
    }

    .earnings-card {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .statistics-currencies__cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .statistics-tags {
        gap: 6px;
    }

    .analytics-toolbar {
        align-items: flex-start;
    }

    .analytics-toolbar__period {
        flex-shrink: 0;
    }

    .sales-chart {
        padding: 20px 14px;
    }

    .sales-chart__area {
        min-height: 230px;
        gap: 7px;
        padding-left: 0;
        padding-right: 0;
    }

    .sales-chart__bar {
        height: 190px;
    }

    .sales-chart__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .fair-performance__head,
    .fair-performance__row {
        grid-template-columns: minmax(120px, 1.5fr) 1fr 60px 1fr;
        min-width: 560px;
    }

    .fair-performance {
        overflow-x: auto;
    }

    .statistics-currencies__cards {
        grid-template-columns: 1fr;
    }

    .statistics-cta__action {
        width: 100%;
    }

    .statistics-cta__action .button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .analytics-toolbar {
        flex-direction: column;
    }

    .sales-chart__header {
        flex-direction: column;
    }

    .sales-chart__area {
        gap: 5px;
    }

    .sales-chart__bar small {
        font-size: 7px;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 3.1 — USER REGISTRATION
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 80px);
    padding: clamp(55px, 8vw, 110px) 0;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(206, 255, 65, .28),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(71, 216, 255, .22),
            transparent 30%
        ),
        var(--bg);
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, .72fr);
    gap: clamp(45px, 8vw, 110px);
    align-items: center;
}

.auth-back {
    display: inline-flex;
    margin-bottom: 42px;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.auth-back:hover {
    text-decoration: underline;
}

.auth-intro h1 {
    max-width: 680px;
    margin: 15px 0 20px;
    font-size: clamp(48px, 6.8vw, 92px);
    line-height: .92;
    letter-spacing: -4px;
}

.auth-intro__text {
    max-width: 570px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
}

.auth-benefits {
    margin-top: 48px;
    display: grid;
    gap: 14px;
}

.auth-benefit {
    max-width: 570px;
    padding: 18px 0;
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 18px;
    border-bottom: 1px solid rgba(32, 32, 32, .18);
}

.auth-benefit > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 950;
}

.auth-benefit strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.auth-benefit p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.auth-price-note {
    max-width: 570px;
    margin-top: 32px;
    padding: 17px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    background: var(--lime);
    border: var(--border);
    border-radius: 18px;
}

.auth-price-note span,
.auth-price-note strong {
    font-size: 12px;
    font-weight: 950;
}

.auth-price-note small {
    width: 100%;
    font-size: 9px;
    font-weight: 800;
}

.auth-card {
    padding: clamp(27px, 4vw, 45px);
    background: #fff;
    border: var(--border);
    border-radius: 28px;
    box-shadow: 10px 10px 0 var(--text);
}

.auth-card__header {
    margin-bottom: 28px;
}

.auth-card__eyebrow {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: var(--cyan);
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-card__header h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -1.7px;
}

.auth-card__header p {
    margin: 11px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.auth-alert {
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid var(--text);
    border-radius: 14px;
}

.auth-alert--error {
    background: rgba(255, 107, 107, .18);
}

.auth-alert strong {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
}

.auth-alert ul {
    margin: 0;
    padding-left: 18px;
}

.auth-alert li {
    margin: 4px 0;
    font-size: 10px;
    line-height: 1.45;
}

.auth-form {
    display: grid;
    gap: 20px;
}

.form-group {
    display: grid;
    gap: 8px;
}

.form-group label {
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .03em;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.form-label-row span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
}

.form-group input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--text);
    border-radius: 13px;
    outline: none;
    font: inherit;
    font-size: 13px;
    transition:
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.form-group input:focus {
    background: #fff;
    box-shadow: 4px 4px 0 var(--cyan);
    transform: translate(-1px, -1px);
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 78px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    padding: 7px 10px;
    background: transparent;
    color: var(--text);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 950;
    text-transform: uppercase;
}

.password-toggle:hover {
    background: rgba(32, 32, 32, .07);
}

.auth-submit {
    width: 100%;
    min-height: 56px;
    margin-top: 5px;
    justify-content: space-between;
}

.auth-form__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 850;
}

.auth-login {
    margin-top: 28px;
    padding-top: 22px;
    display: flex;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid rgba(32, 32, 32, .15);
    font-size: 10px;
}

.auth-login span {
    color: var(--muted);
}

.auth-login a {
    color: var(--text);
    font-weight: 950;
    text-decoration: none;
}

.auth-login a:hover {
    text-decoration: underline;
}

@media (max-width: 960px) {

    .auth-layout {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin: 0 auto;
    }

    .auth-intro h1 {
        font-size: clamp(46px, 10vw, 76px);
    }

    .auth-intro__text,
    .auth-benefit,
    .auth-price-note {
        max-width: none;
    }
}

@media (max-width: 600px) {

    .auth-page {
        padding: 35px 0 65px;
    }

    .auth-layout {
        gap: 38px;
    }

    .auth-back {
        margin-bottom: 30px;
    }

    .auth-intro h1 {
        letter-spacing: -2.5px;
    }

    .auth-benefits {
        margin-top: 30px;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 20px;
        box-shadow: 6px 6px 0 var(--text);
    }

    .form-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .auth-price-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-login {
        align-items: center;
        flex-direction: column;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 3.2 — LOGIN
   ========================================================= */

.auth-alert--success {
    background: var(--lime);
}

.auth-alert--success {
    font-size: 10px;
    font-weight: 850;
    line-height: 1.5;
}

.auth-login-note {
    max-width: 570px;
    margin-top: 32px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--cyan);
    border: var(--border);
    border-radius: 18px;
}

.auth-login-note span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.auth-login-note strong {
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 960px) {

    .auth-login-note {
        max-width: none;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 3.4 — PRIVATE AREA
   ========================================================= */

.private-page {
    min-height: calc(100vh - 80px);
    padding: clamp(55px, 7vw, 95px) 0;
    background: var(--bg);
}

.private-page__header {
    margin-bottom: 45px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.private-page__header h1 {
    margin: 12px 0 10px;
    font-size: clamp(48px, 7vw, 88px);
    line-height: .92;
    letter-spacing: -4px;
}

.private-page__header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.private-security-card {
    padding: clamp(28px, 5vw, 55px);
    background: var(--cyan);
    border: var(--border);
    border-radius: 26px;
}

.private-security-card__label {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 6px 10px;
    background: var(--text);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.private-security-card h2 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -1.8px;
}

.private-security-card > p {
    max-width: 680px;
    margin: 17px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.private-security-user {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.private-security-user > div {
    padding: 18px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--text);
    border-radius: 15px;
}

.private-security-user span {
    display: block;
    margin-bottom: 5px;
    font-size: 8px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.private-security-user strong {
    font-size: 13px;
}

.dashboard-coming-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.dashboard-coming-grid article {
    min-height: 210px;
    padding: 25px;
    background: #fff;
    border: var(--border);
    border-radius: 20px;
}

.dashboard-coming-grid article:nth-child(1) {
    background: var(--lime);
}

.dashboard-coming-grid article:nth-child(3) {
    background: var(--coral);
}

.dashboard-coming-grid article > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 950;
}

.dashboard-coming-grid h3 {
    margin: 35px 0 9px;
    font-size: 24px;
    letter-spacing: -1px;
}

.dashboard-coming-grid p {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 800px) {

    .private-page__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-coming-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .private-page__header h1 {
        letter-spacing: -2.5px;
    }

    .private-security-user {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 3.5 — DASHBOARD
   ========================================================= */

.dashboard-page {
    min-height: 100vh;
    padding: clamp(50px, 7vw, 90px) 0 100px;
    background: var(--bg);
}


/* HEADER */

.dashboard-header {
    margin-bottom: 35px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.dashboard-header h1 {
    margin: 10px 0 8px;
    font-size: clamp(52px, 8vw, 96px);
    line-height: .9;
    letter-spacing: -5px;
}

.dashboard-header p {
    margin: 0;
    font-size: 13px;
}

.dashboard-header__actions {
    display: flex;
    gap: 10px;
}


/* SUMMARY */

.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.dashboard-stat {
    min-height: 230px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    border: var(--border);
    border-radius: 23px;
}

.dashboard-stat--lime {
    background: var(--lime);
}

.dashboard-stat--white {
    background: #fff;
}

.dashboard-stat--coral {
    background: var(--coral);
}

.dashboard-stat__label {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dashboard-stat__value {
    margin-top: auto;
    font-size: clamp(58px, 7vw, 85px);
    line-height: .85;
    letter-spacing: -4px;
}

.dashboard-stat__meta {
    margin-top: 12px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


/* MONEY */

.dashboard-money {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.dashboard-money strong {
    font-size: clamp(31px, 4vw, 50px);
    line-height: 1;
    letter-spacing: -2px;
}

.dashboard-money span {
    margin-top: 7px;
    font-size: 17px;
    font-weight: 900;
}


/* MAIN GRID */

.dashboard-main-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    gap: 18px;
}

.dashboard-panel {
    padding: clamp(25px, 4vw, 40px);
    background: #fff;
    border: var(--border);
    border-radius: 24px;
}

.dashboard-panel__header {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-panel__eyebrow {
    display: block;
    margin-bottom: 7px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.dashboard-panel h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
    letter-spacing: -1.5px;
}


/* EMPTY */

.dashboard-empty {
    min-height: 210px;
    margin-bottom: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--text);
    border-radius: 18px;
}

.dashboard-empty > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 950;
}

.dashboard-empty h3 {
    margin: 22px 0 8px;
    font-size: 22px;
}

.dashboard-empty p {
    max-width: 430px;
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
}


/* NEXT FAIR */

.next-fair-card {
    min-height: 210px;
    margin-bottom: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--lime);
    border: var(--border);
    border-radius: 18px;
}

.next-fair-card__date {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.next-fair-card h3 {
    margin: 13px 0 6px;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.next-fair-card p {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
}

.next-fair-card__location {
    margin-top: 25px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}


/* ACCOUNT */

.dashboard-account {
    background: var(--cyan);
}

.dashboard-account__data {
    display: flex;
    flex-direction: column;
}

.dashboard-account__data > div {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
}

.dashboard-account__data > div:last-child {
    border-bottom: 0;
}

.dashboard-account__data span {
    display: block;
    margin-bottom: 4px;
    font-size: 8px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.dashboard-account__data strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}


/* QUICK ACTIONS */

.dashboard-actions {
    margin-top: 18px;
    padding: clamp(28px, 5vw, 45px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    background: var(--text);
    color: #fff;
    border-radius: 24px;
}

.dashboard-actions h2 {
    max-width: 500px;
    margin: 10px 0 0;
    font-size: clamp(28px, 4vw, 45px);
    line-height: 1;
    letter-spacing: -1.7px;
}

.dashboard-actions .section-kicker {
    color: #fff;
}

.dashboard-actions__buttons {
    display: flex;
    gap: 10px;
}

.dashboard-action {
    min-width: 145px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    border: 2px solid #fff;
    border-radius: 15px;
    text-decoration: none;
}

.dashboard-action--lime {
    background: var(--lime);
}

.dashboard-action--cyan {
    background: var(--cyan);
}

.dashboard-action > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
}

.dashboard-action strong {
    font-size: 10px;
    text-transform: uppercase;
}


/* TABLET */

@media (max-width: 900px) {

    .dashboard-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-stat {
        min-height: 180px;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .dashboard-page {
        padding-top: 40px;
    }

    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-header h1 {
        letter-spacing: -3px;
    }

    .dashboard-header__actions,
    .dashboard-header__actions .button {
        width: 100%;
    }

    .dashboard-header__actions .button {
        justify-content: center;
    }

    .dashboard-stat {
        min-height: 165px;
    }

    .dashboard-actions__buttons {
        width: 100%;
        flex-direction: column;
    }

    .dashboard-action {
        width: 100%;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 3.6 — AUTHENTICATION TESTS
   ========================================================= */

.auth-test-page {
    min-height: 75vh;
    padding: clamp(55px, 8vw, 100px) 0;
    background: var(--bg);
}


/* HEADING */

.auth-test-heading {
    max-width: 760px;
    margin-bottom: 35px;
}

.auth-test-heading h1 {
    margin: 12px 0;
    font-size: clamp(45px, 7vw, 80px);
    line-height: .92;
    letter-spacing: -4px;
}

.auth-test-heading p {
    max-width: 600px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}


/* SUMMARY */

.auth-test-summary {
    margin-bottom: 18px;
    padding: clamp(25px, 5vw, 45px);
    border: var(--border);
    border-radius: 24px;
}

.auth-test-summary--success {
    background: var(--lime);
}

.auth-test-summary--error {
    background: var(--coral);
}

.auth-test-summary > span {
    display: block;
    margin-bottom: 12px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.auth-test-summary > strong {
    display: block;
    font-size: clamp(55px, 8vw, 90px);
    line-height: .9;
    letter-spacing: -4px;
}

.auth-test-summary p {
    margin: 14px 0 0;
    font-size: 11px;
    font-weight: 800;
}


/* TEST GRID */

.auth-test-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.auth-test-item {
    min-height: 100px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: var(--border);
    border-radius: 17px;
}

.auth-test-item--success {
    background: #fff;
}

.auth-test-item--error {
    background: var(--coral);
}

.auth-test-item__number {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 950;
}

.auth-test-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-test-item strong {
    font-size: 12px;
}

.auth-test-item div > span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}


/* USER */

.auth-test-user {
    margin-top: 18px;
    padding: clamp(25px, 5vw, 40px);
    background: var(--cyan);
    border: var(--border);
    border-radius: 22px;
}

.auth-test-user__grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-test-user__grid > div {
    padding: 16px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--text);
    border-radius: 13px;
}

.auth-test-user__grid span {
    display: block;
    margin-bottom: 5px;
    font-size: 8px;
    font-weight: 950;
    text-transform: uppercase;
}

.auth-test-user__grid strong {
    font-size: 11px;
    overflow-wrap: anywhere;
}


/* ACTIONS */

.auth-test-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}


/* PRIVATE TEST */

.private-test-card {
    padding: clamp(35px, 7vw, 70px);
    background: var(--lime);
    border: var(--border);
    border-radius: 28px;
}

.private-test-card > span {
    display: inline-flex;
    padding: 7px 11px;
    background: var(--text);
    color: #fff;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.private-test-card > strong {
    display: block;
    margin-top: 25px;
    font-size: 10px;
    letter-spacing: .1em;
}

.private-test-card h1 {
    max-width: 750px;
    margin: 10px 0 18px;
    font-size: clamp(40px, 7vw, 76px);
    line-height: .92;
    letter-spacing: -4px;
}

.private-test-card p {
    max-width: 600px;
    margin: 0 0 25px;
    font-size: 13px;
    line-height: 1.6;
}

.private-test-user {
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--text);
    border-radius: 13px;
    font-size: 11px;
}


/* MOBILE */

@media (max-width: 700px) {

    .auth-test-grid {
        grid-template-columns: 1fr;
    }

    .auth-test-user__grid {
        grid-template-columns: 1fr;
    }

    .auth-test-actions {
        flex-direction: column;
    }

    .auth-test-actions .button {
        width: 100%;
        justify-content: center;
    }

    .auth-test-heading h1,
    .private-test-card h1 {
        letter-spacing: -2.5px;
    }
}

/* =========================================================
   FAIRPILOT — PHASE 5.2
   DASHBOARD REAL METRIC CARDS
   ========================================================= */

.dashboard-summary--metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-summary--metrics .dashboard-stat {
    min-width: 0;
    height: 100%;
}

.dashboard-stat__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-stat__currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 6px 9px;
    background: var(--surface);
    border: 2px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .06em;
}

.dashboard-stat__currency--dark {
    background: var(--lime);
    color: var(--text);
}

.dashboard-stat__value--money {
    display: block;
    margin-top: 22px;
    font-size: clamp(27px, 2.4vw, 42px);
    line-height: 1;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
}

.dashboard-stat--cyan {
    background: var(--cyan);
}

.dashboard-stat--dark {
    background: var(--text);
    color: var(--surface);
}

.dashboard-stat--dark .dashboard-stat__label,
.dashboard-stat--dark .dashboard-stat__meta {
    color: var(--surface);
}

@media (max-width: 1180px) {
    .dashboard-summary--metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-summary--metrics .dashboard-stat:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .dashboard-summary--metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-summary--metrics .dashboard-stat:first-child {
        grid-column: auto;
    }

    .dashboard-stat__value--money {
        font-size: clamp(30px, 10vw, 42px);
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 5.3 — NEXT FAIR
   ========================================================= */

.dashboard-next-fair {
    overflow: hidden;
}

.next-fair-card--phase53 {
    min-height: 0;
    margin-bottom: 18px;
    padding: clamp(24px, 4vw, 34px);
    gap: 28px;
}

.next-fair-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.next-fair-card__dates {
    display: flex;
    align-items: center;
    gap: 14px;
}

.next-fair-card__date-block {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.next-fair-card__date-block strong {
    font-size: clamp(30px, 4vw, 44px);
    line-height: .9;
    letter-spacing: -2px;
}

.next-fair-card__date-block span {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
}

.next-fair-card__date-arrow {
    font-size: 24px;
    font-weight: 950;
}

.next-fair-card__number {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 950;
}

.next-fair-card__identity h3 {
    margin: 0 0 7px;
    max-width: 720px;
    font-size: clamp(32px, 5vw, 56px);
    line-height: .95;
    letter-spacing: -2.4px;
}

.next-fair-card__identity p {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
}

.next-fair-card--phase53 .next-fair-card__location {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.next-fair-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(0, 0, 0, .35);
}

.next-fair-card__details > div {
    padding-top: 18px;
}

.next-fair-card__details > div + div {
    padding-left: 22px;
    border-left: 1px solid rgba(0, 0, 0, .35);
}

.next-fair-card__details span {
    display: block;
    margin-bottom: 6px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.next-fair-card__details strong {
    font-size: 18px;
    font-weight: 950;
}

.next-fair-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-empty--next-fair {
    min-height: 315px;
    align-items: flex-start;
}

@media (max-width: 700px) {
    .next-fair-card--phase53 {
        gap: 24px;
    }

    .next-fair-card__top {
        align-items: center;
    }

    .next-fair-card__dates {
        gap: 9px;
    }

    .next-fair-card__date-block {
        display: block;
    }

    .next-fair-card__date-block strong,
    .next-fair-card__date-block span {
        display: block;
    }

    .next-fair-card__date-block span {
        margin-top: 5px;
    }

    .next-fair-card__date-arrow {
        font-size: 18px;
    }

    .next-fair-card__identity h3 {
        letter-spacing: -1.8px;
    }

    .next-fair-card__details {
        grid-template-columns: 1fr;
    }

    .next-fair-card__details > div {
        padding: 15px 0;
    }

    .next-fair-card__details > div + div {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, .25);
    }

    .next-fair-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .next-fair-card__actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 5.4 — QUICK ACTIONS
   ========================================================= */

.dashboard-actions {
    align-items: stretch;
}

.dashboard-actions__intro {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashboard-actions__buttons {
    width: min(100%, 700px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-action {
    min-width: 0;
    min-height: 92px;
    padding: 16px;
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    border: 2px solid #fff;
    box-shadow: none;
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.dashboard-action:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #fff;
}

.dashboard-action--primary {
    grid-column: span 2;
    min-height: 108px;
}

.dashboard-action--white {
    background: #fff;
}

.dashboard-action--coral {
    background: var(--coral);
}

.dashboard-action__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
}

.dashboard-action__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-action__content small {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .11em;
    opacity: .65;
}

.dashboard-action__content strong {
    font-size: 11px;
    line-height: 1.15;
    text-transform: uppercase;
}

.dashboard-action__arrow {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 950;
    transition: transform var(--transition);
}

.dashboard-action:hover .dashboard-action__arrow {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .dashboard-actions__intro,
    .dashboard-actions__buttons {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .dashboard-actions__buttons {
        grid-template-columns: 1fr;
    }

    .dashboard-action--primary {
        grid-column: auto;
        min-height: 100px;
    }

    .dashboard-action {
        width: 100%;
        min-height: 86px;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 5.4 — QUICK ACTIONS DEFINITIVE FIX
   Prevent legacy ".dashboard-action > span" from affecting
   the text/content area.
   ========================================================= */

.dashboard-action > .dashboard-action__content {
    width: auto;
    height: auto;
    min-width: 0;
    display: flex;
    place-items: initial;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    color: inherit;
    border-radius: 0;
    font-size: inherit;
    line-height: normal;
}

.dashboard-action__content strong {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
}

.dashboard-action > .dashboard-action__arrow {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.dashboard-action > .dashboard-action__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

@media (max-width: 600px) {
    .dashboard-action__content strong {
        font-size: 12px;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 5.5 — ACCOUNT STATE
   ========================================================= */

.dashboard-account {
    position: relative;
    overflow: hidden;
}

.dashboard-account::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--text);
}

.dashboard-account.account-state--trial::before {
    background: var(--lime);
}

.dashboard-account.account-state--active::before {
    background: var(--cyan);
}

.dashboard-account.account-state--expired::before {
    background: var(--coral);
}

.dashboard-account__header {
    align-items: flex-start;
}

.dashboard-account__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 190px;
    padding: 7px 11px;
    background: var(--text);
    color: #fff;
    border: 2px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.account-state--trial .dashboard-account__status {
    background: var(--lime);
    color: var(--text);
}

.account-state--active .dashboard-account__status {
    background: var(--cyan);
    color: var(--text);
}

.account-state--expired .dashboard-account__status {
    background: var(--coral);
    color: var(--text);
}

.dashboard-account__access {
    margin-bottom: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, .55);
    border: 2px solid var(--text);
    border-radius: var(--radius-md);
}

.dashboard-account__access-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-account__access-main span {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dashboard-account__access-main strong {
    font-size: 16px;
    font-weight: 950;
    text-align: right;
}

.dashboard-account__access p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.dashboard-account__data--phase55 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-account__data--phase55 > div {
    min-width: 0;
}

.dashboard-account__email {
    overflow-wrap: anywhere;
}

.dashboard-account__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 700px) {
    .dashboard-account__header {
        gap: 14px;
    }

    .dashboard-account__status {
        max-width: 150px;
        font-size: 8px;
    }

    .dashboard-account__access-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .dashboard-account__access-main strong {
        text-align: left;
    }

    .dashboard-account__data--phase55 {
        grid-template-columns: 1fr;
    }

    .dashboard-account__footer .button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   FAIRPILOT
   DASHBOARD ACCESS / SUBSCRIPTION STATUS — STABILIZED
   ========================================================= */

.trial-status-card {
    margin-bottom: 26px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.trial-status-card > div {
    min-width: 0;
}

.trial-status-card__label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trial-status-card strong {
    display: block;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.1;
}

.trial-status-card p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.trial-status-card__badge {
    flex: 0 0 auto;
    max-width: 210px;
    padding: 8px 12px;
    background: var(--lime);
    color: var(--text);
    border: 2px solid var(--text);
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 950;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
}

@media (max-width: 700px) {
    .trial-status-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .trial-status-card__badge {
        max-width: 100%;
    }
}

/* =========================================================
   FAIRPILOT
   PHASE 5.6 — EMPTY STATES
   ========================================================= */


/* ---------------------------------------------------------
   FIRST FAIR / ONBOARDING
   --------------------------------------------------------- */

.dashboard-onboarding {
    margin-bottom: 26px;
    padding: clamp(24px, 4vw, 38px);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;

    background: var(--text);
    color: #fff;

    border: 2px solid var(--text);
    border-radius: var(--radius-lg);
}


.dashboard-onboarding__number {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    background: var(--lime);
    color: var(--text);

    border: 2px solid #fff;
    border-radius: 50%;

    font-size: 12px;
    font-weight: 950;
}


.dashboard-onboarding__content {
    min-width: 0;
}


.dashboard-onboarding .section-kicker {
    color: var(--lime);
}


.dashboard-onboarding h2 {
    margin:
        8px
        0
        10px;

    color: #fff;

    font-size:
        clamp(
            26px,
            4vw,
            42px
        );

    line-height: .95;
    letter-spacing: -1.8px;
}


.dashboard-onboarding p {
    max-width: 620px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    font-size: 12px;
    line-height: 1.6;
}


.dashboard-onboarding__action {
    display: flex;
    justify-content: flex-end;
}


/* ---------------------------------------------------------
   GENERIC EMPTY STATE
   --------------------------------------------------------- */

.dashboard-empty--next-fair {
    position: relative;

    min-height: 280px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding:
        clamp(
            24px,
            4vw,
            36px
        );

    overflow: hidden;
}


.dashboard-empty__icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 24px;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}


.dashboard-empty__number {
    position: absolute;

    top: 22px;
    right: 24px;

    color:
        rgba(
            32,
            32,
            32,
            .18
        );

    font-size: 52px;
    font-weight: 950;
    line-height: 1;
}


.dashboard-empty--next-fair h3 {
    max-width: 460px;

    margin:
        0
        0
        10px;

    font-size:
        clamp(
            25px,
            4vw,
            38px
        );

    line-height: 1;
    letter-spacing: -1.5px;
}


.dashboard-empty--next-fair p {
    max-width: 480px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .dashboard-onboarding {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .dashboard-onboarding__action {
        justify-content: stretch;
    }


    .dashboard-onboarding__action .button {
        width: 100%;
        justify-content: center;
    }


    .dashboard-empty--next-fair {
        min-height: 250px;
    }


    .dashboard-empty__number {
        font-size: 42px;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 5.7 — MOBILE / RESPONSIVE FINAL
   ========================================================= */

/* Evita overflow horizontal em grids e flex */
.dashboard-page,
.dashboard-shell,
.dashboard-main,
.dashboard-grid,
.dashboard-panel,
.dashboard-summary,
.dashboard-stat,
.dashboard-actions,
.dashboard-actions__buttons,
.next-fair-card,
.dashboard-account,
.dashboard-onboarding {
    min-width: 0;
}

.dashboard-page img,
.dashboard-page svg {
    max-width: 100%;
}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-summary--metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-summary--metrics
    .dashboard-stat:first-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .dashboard-page {
        overflow-x: hidden;
    }

    .dashboard-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-actions__intro,
    .dashboard-actions__buttons {
        width: 100%;
        max-width: none;
    }

    .dashboard-onboarding {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .dashboard-onboarding__action {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .dashboard-page {
        width: 100%;
        overflow-x: hidden;
    }


    /* HEADER */

    .dashboard-header,
    .trial-status-card,
    .dashboard-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-header h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }


    /* ACCOUNT / ACCESS STATUS */

    .trial-status-card {
        width: 100%;
    }

    .trial-status-card__badge {
        max-width: 100%;
    }


    /* METRIC CARDS */

    .dashboard-summary--metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-summary--metrics
    .dashboard-stat:first-child {
        grid-column: auto;
    }

    .dashboard-stat {
        width: 100%;
    }

    .dashboard-stat__value,
    .dashboard-stat__value--money {
        max-width: 100%;
        overflow-wrap: anywhere;
    }


    /* MAIN DASHBOARD GRID */

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dashboard-panel {
        width: 100%;
    }


    /* NEXT FAIR */

    .next-fair-card__top {
        align-items: flex-start;
        gap: 16px;
    }

    .next-fair-card__dates {
        flex-wrap: wrap;
    }

    .next-fair-card__identity h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .next-fair-card__details {
        grid-template-columns: 1fr;
    }

    .next-fair-card__details > div + div {
        padding-left: 0;
        border-left: 0;

        border-top:
            1px solid rgba(0, 0, 0, .25);
    }

    .next-fair-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .next-fair-card__actions .button {
        width: 100%;
        justify-content: center;
    }


    /* ACCOUNT STATE */

    .dashboard-account__status {
        max-width: 100%;
    }

    .dashboard-account__access-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-account__access-main strong {
        max-width: 100%;

        text-align: left;

        overflow-wrap: anywhere;
    }

    .dashboard-account__data--phase55 {
        grid-template-columns: 1fr;
    }

    .dashboard-account__data--phase55 strong {
        overflow-wrap: anywhere;
    }

    .dashboard-account__footer {
        justify-content: stretch;
    }

    .dashboard-account__footer .button {
        width: 100%;
        justify-content: center;
    }


    /* QUICK ACTIONS */

    .dashboard-actions__buttons {
        grid-template-columns: 1fr;
    }

    .dashboard-action,
    .dashboard-action--primary {
        width: 100%;
        grid-column: auto;
    }

    .dashboard-action__content {
        min-width: 0;
    }

    .dashboard-action__content strong {
        overflow-wrap: anywhere;
    }


    /* EMPTY STATE / ONBOARDING */

    .dashboard-onboarding {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dashboard-onboarding__action {
        grid-column: auto;
        justify-content: stretch;
    }

    .dashboard-onboarding__action .button {
        width: 100%;
        justify-content: center;
    }

    .dashboard-empty--next-fair {
        min-height: 250px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dashboard-stat,
    .dashboard-panel,
    .trial-status-card,
    .dashboard-onboarding {
        border-radius: var(--radius-md);
    }

    .dashboard-stat__value--money {
        font-size:
            clamp(27px, 10vw, 36px);
    }


    /* NEXT FAIR */

    .next-fair-card__dates {
        gap: 8px;
    }

    .next-fair-card__date-block strong {
        font-size: 28px;
    }

    .next-fair-card__date-arrow {
        font-size: 16px;
    }


    /* QUICK ACTIONS */

    .dashboard-action {
        grid-template-columns:
            34px minmax(0, 1fr) 24px;

        padding: 14px;
    }


    /* EMPTY STATE */

    .dashboard-empty__number {
        font-size: 38px;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 6.1 — FAIRS LIST
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.fairs-page {
    padding-bottom: 60px;
}


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.fairs-section {
    margin-top: 34px;
}


.fairs-section--past {
    margin-top: 52px;
}


/* ---------------------------------------------------------
   SECTION HEADER
   --------------------------------------------------------- */

.fairs-section > .dashboard-panel__header {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.fairs-section > .dashboard-panel__header h2 {
    margin: 5px 0 0;

    font-size:
        clamp(
            25px,
            4vw,
            38px
        );

    line-height: 1;
    letter-spacing: -1.4px;
}


/* ---------------------------------------------------------
   COUNTER
   --------------------------------------------------------- */

.fairs-count {
    min-width: 42px;
    height: 42px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

.fairs-list {
    display: grid;
    grid-template-columns: 1fr;

    gap: 16px;
}


/* ---------------------------------------------------------
   FAIR CARD
   --------------------------------------------------------- */

.fair-list-card {
    padding: 0;

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.fair-list-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


/* ---------------------------------------------------------
   CARD MAIN
   --------------------------------------------------------- */

.fair-list-card__main {
    padding:
        clamp(
            20px,
            3vw,
            28px
        );

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.fair-list-card__main > div:first-child {
    min-width: 0;
}


.fair-list-card h3 {
    margin:
        6px
        0
        4px;

    font-size:
        clamp(
            22px,
            3vw,
            32px
        );

    line-height: 1;

    letter-spacing: -1.1px;

    overflow-wrap: anywhere;
}


.fair-list-card__company {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   DATES
   --------------------------------------------------------- */

.fair-list-card__dates {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-pill);

    white-space: nowrap;
}


.fair-list-card__dates strong {
    font-size: 11px;
    font-weight: 950;
}


.fair-list-card__dates span {
    color: var(--coral);

    font-size: 15px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   CARD FOOTER
   --------------------------------------------------------- */

.fair-list-card__footer {
    padding: 14px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    background: var(--bg);

    border-top: 2px solid var(--text);
}


.fair-list-card__footer p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.fair-list-card__actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* ---------------------------------------------------------
   PAST FAIR
   --------------------------------------------------------- */

.fair-list-card--past {
    opacity: .78;
}


.fair-list-card--past:hover {
    opacity: 1;
}


/* Past fair receives a quieter visual treatment */

.fair-list-card--past
.dashboard-panel__eyebrow {
    color: var(--muted);
}


/* ---------------------------------------------------------
   EMPTY LIST
   --------------------------------------------------------- */

.fairs-empty {
    margin-top: 28px;
}


.fairs-empty-panel {
    overflow: hidden;
}


.fairs-empty-panel
.next-fair-card__actions {
    padding:
        0
        clamp(
            24px,
            4vw,
            36px
        )
        clamp(
            24px,
            4vw,
            36px
        );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .fair-list-card__main {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }


    .fair-list-card__dates {
        align-self: flex-start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .fairs-section {
        margin-top: 28px;
    }


    .fairs-section--past {
        margin-top: 40px;
    }


    .fairs-section
    > .dashboard-panel__header {
        align-items: center;
        flex-direction: row;
    }


    .fair-list-card__main {
        padding: 20px;
    }


    .fair-list-card__dates {
        width: 100%;

        justify-content: center;

        white-space: normal;
    }


    .fair-list-card__footer {
        align-items: stretch;
        flex-direction: column;
    }


    .fair-list-card__actions {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        width: 100%;
    }


    .fair-list-card__actions
    .button {
        width: 100%;

        justify-content: center;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .fairs-count {
        min-width: 36px;
        height: 36px;
    }


    .fair-list-card__dates {
        padding: 11px 12px;

        gap: 7px;
    }


    .fair-list-card__dates strong {
        font-size: 10px;
    }


    .fair-list-card__footer {
        padding: 14px;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 6.2 — CREATE FAIR FORM
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.fair-form-page {
    padding-bottom: 70px;
}


/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.fair-form {
    display: grid;
    gap: 18px;
}


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.fair-form__section {
    position: relative;

    padding:
        clamp(
            24px,
            4vw,
            38px
        );

    display: grid;

    grid-template-columns:
        58px minmax(0, 1fr);

    gap: 26px;

    overflow: hidden;
}


/* ---------------------------------------------------------
   SECTION NUMBER
   --------------------------------------------------------- */

.fair-form__number {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 950;

    line-height: 1;
}


/* Alternate accent on sections */

.fair-form__section:nth-of-type(2)
.fair-form__number {
    background: var(--cyan);
}


.fair-form__section:nth-of-type(3)
.fair-form__number {
    background: var(--coral);
}


.fair-form__section:nth-of-type(4)
.fair-form__number {
    background: var(--lime);
}


.fair-form__section:nth-of-type(5)
.fair-form__number {
    background: var(--cyan);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.fair-form__content {
    min-width: 0;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.fair-form__heading {
    margin-bottom: 24px;
}


.fair-form__heading h2 {
    margin: 5px 0 0;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    line-height: 1;

    letter-spacing: -1.2px;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.fair-form__grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


.fair-form__field--full {
    grid-column: 1 / -1;
}


/* ---------------------------------------------------------
   FIELD
   --------------------------------------------------------- */

.fair-form__field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.fair-form__field label {
    color: var(--text);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.fair-form__field label span {
    color: var(--coral);
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

.fair-form__field input,
.fair-form__field select,
.fair-form__field textarea {
    width: 100%;

    min-height: 50px;

    padding: 13px 15px;

    background: #fff;
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);

    outline: none;

    font: inherit;

    font-size: 14px;
    font-weight: 700;

    transition:
        box-shadow var(--transition),
        transform var(--transition),
        border-color var(--transition);
}


.fair-form__field textarea {
    min-height: 140px;

    resize: vertical;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   FOCUS
   --------------------------------------------------------- */

.fair-form__field input:focus,
.fair-form__field select:focus,
.fair-form__field textarea:focus {
    box-shadow:
        4px 4px 0 var(--text);

    transform:
        translate(
            -1px,
            -1px
        );
}


/* ---------------------------------------------------------
   SELECT
   --------------------------------------------------------- */

.fair-form__field select {
    cursor: pointer;
}


/* ---------------------------------------------------------
   DATE INPUT
   --------------------------------------------------------- */

.fair-form__field
input[type="date"] {
    cursor: pointer;
}


/* ---------------------------------------------------------
   COMMISSION %
   --------------------------------------------------------- */

.fair-form__percentage {
    position: relative;

    display: flex;
    align-items: center;
}


.fair-form__percentage input {
    padding-right: 52px;
}


.fair-form__percentage > span {
    position: absolute;

    right: 15px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 950;

    pointer-events: none;
}


/* ---------------------------------------------------------
   VALIDATION ERROR
   --------------------------------------------------------- */

.fair-form__error {
    display: block;

    margin-top: 2px;

    color: var(--coral);

    font-size: 11px;
    font-weight: 850;

    line-height: 1.4;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.fair-form__actions {
    margin-top: 8px;

    padding-top: 8px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}


/* ---------------------------------------------------------
   OPTIONAL VISUAL EMPHASIS
   --------------------------------------------------------- */

.fair-form__section:first-child {
    border-top:
        6px solid var(--lime);
}


.fair-form__section:nth-of-type(2) {
    border-top:
        6px solid var(--cyan);
}


.fair-form__section:nth-of-type(3) {
    border-top:
        6px solid var(--coral);
}


.fair-form__section:nth-of-type(4) {
    border-top:
        6px solid var(--lime);
}


.fair-form__section:nth-of-type(5) {
    border-top:
        6px solid var(--cyan);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .fair-form__section {
        grid-template-columns:
            48px minmax(0, 1fr);

        gap: 20px;
    }


    .fair-form__number {
        width: 46px;
        height: 46px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .fair-form {
        gap: 14px;
    }


    .fair-form__section {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 20px;
    }


    .fair-form__number {
        width: 44px;
        height: 44px;
    }


    .fair-form__heading {
        margin-bottom: 20px;
    }


    .fair-form__grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .fair-form__field--full {
        grid-column: auto;
    }


    .fair-form__actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .fair-form__actions .button {
        width: 100%;

        justify-content: center;
    }


    /* Create is visually first on mobile */

    .fair-form__actions
    button[type="submit"] {
        grid-row: 1;
    }


    .fair-form__actions
    a {
        grid-row: 2;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .fair-form__section {
        padding: 17px;

        border-radius:
            var(--radius-md);
    }


    .fair-form__field input,
    .fair-form__field select,
    .fair-form__field textarea {
        font-size: 16px;
    }


    .fair-form__percentage > span {
        right: 12px;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 6.3 — VIEW FAIR
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.fair-view-page {
    padding-bottom: 70px;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.fair-view-header h1 {
    margin-top: 10px;
}


.fair-view-header__status {
    margin-top: 14px;
}


/* ---------------------------------------------------------
   STATUS BADGE
   --------------------------------------------------------- */

.fair-status {
    min-height: 32px;

    padding: 7px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid var(--text);
    border-radius: var(--radius-pill);

    color: var(--text);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: .06em;
    line-height: 1;

    text-transform: uppercase;
}


/* Upcoming */

.fair-status--upcoming {
    background: var(--lime);
}


/* In progress */

.fair-status--in_progress {
    background: var(--cyan);
}


/* Past */

.fair-status--past {
    background: var(--bg);
    color: var(--muted);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.fair-view-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.fair-view-card {
    position: relative;

    min-width: 0;

    padding:
        clamp(
            24px,
            4vw,
            34px
        );

    display: grid;

    grid-template-columns:
        52px minmax(0, 1fr);

    gap: 22px;

    overflow: hidden;
}


.fair-view-card--full {
    grid-column: 1 / -1;
}


/* ---------------------------------------------------------
   CARD ACCENTS
   --------------------------------------------------------- */

.fair-view-card:nth-child(1) {
    border-top: 6px solid var(--lime);
}


.fair-view-card:nth-child(2) {
    border-top: 6px solid var(--cyan);
}


.fair-view-card:nth-child(3) {
    border-top: 6px solid var(--coral);
}


.fair-view-card:nth-child(4) {
    border-top: 6px solid var(--lime);
}


.fair-view-card:nth-child(5) {
    border-top: 6px solid var(--cyan);
}


/* ---------------------------------------------------------
   NUMBER
   --------------------------------------------------------- */

.fair-view-card__number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}


.fair-view-card:nth-child(2)
.fair-view-card__number {
    background: var(--cyan);
}


.fair-view-card:nth-child(3)
.fair-view-card__number {
    background: var(--coral);
}


.fair-view-card:nth-child(4)
.fair-view-card__number {
    background: var(--lime);
}


.fair-view-card:nth-child(5)
.fair-view-card__number {
    background: var(--cyan);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.fair-view-card__content {
    min-width: 0;
}


.fair-view-card__content h2 {
    margin: 5px 0 22px;

    font-size:
        clamp(
            23px,
            3vw,
            32px
        );

    line-height: 1;

    letter-spacing: -1px;
}


/* ---------------------------------------------------------
   GENERIC DATA
   --------------------------------------------------------- */

.fair-view-data {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.fair-view-data__item {
    min-width: 0;

    padding: 16px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
}


.fair-view-data__item span,
.fair-view-dates div > span,
.fair-view-commercial > div > span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.fair-view-data__item strong {
    display: block;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   DATES
   --------------------------------------------------------- */

.fair-view-dates {
    display: flex;
    align-items: stretch;

    gap: 12px;
}


.fair-view-dates > div {
    flex: 1;

    padding: 17px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
}


.fair-view-dates > div strong {
    display: block;

    font-size:
        clamp(
            17px,
            2vw,
            22px
        );

    font-weight: 950;
}


.fair-view-dates__arrow {
    align-self: center;

    color: var(--coral);

    font-size: 24px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   COMMERCIAL
   --------------------------------------------------------- */

.fair-view-commercial {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.fair-view-commercial > div {
    min-width: 0;

    padding: 17px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
}


.fair-view-commercial strong {
    display: block;

    color: var(--text);

    font-size:
        clamp(
            22px,
            3vw,
            30px
        );

    font-weight: 950;

    line-height: 1;
}


/* Currency visual accent */

.fair-view-commercial__currency strong {
    color: var(--text);
}


/* Commission visual accent */

.fair-view-commercial__commission {
    position: relative;

    overflow: hidden;
}


.fair-view-commercial__commission::after {
    content: "%";

    position: absolute;

    right: 12px;
    bottom: -10px;

    color: var(--lime);

    font-size: 64px;
    font-weight: 950;

    line-height: 1;

    opacity: .55;

    pointer-events: none;
}


/* ---------------------------------------------------------
   NOTES
   --------------------------------------------------------- */

.fair-view-notes {
    padding: 18px 20px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
}


.fair-view-notes p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
    font-weight: 650;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


.fair-view-notes__empty {
    color: var(--muted) !important;

    font-style: italic;
}


/* ---------------------------------------------------------
   BOTTOM ACTIONS
   --------------------------------------------------------- */

.fair-view-actions {
    margin-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .fair-view-grid {
        grid-template-columns: 1fr;
    }


    .fair-view-card--full {
        grid-column: auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .fair-view-page {
        padding-bottom: 50px;
    }


    .fair-view-card {
        padding: 20px;

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .fair-view-card__number {
        width: 44px;
        height: 44px;
    }


    .fair-view-card__content h2 {
        margin-bottom: 18px;
    }


    .fair-view-data {
        grid-template-columns: 1fr;
    }


    .fair-view-dates {
        flex-direction: column;
    }


    .fair-view-dates__arrow {
        transform: rotate(90deg);

        align-self: center;
    }


    .fair-view-commercial {
        grid-template-columns: 1fr;
    }


    .fair-view-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .fair-view-actions .button {
        width: 100%;

        justify-content: center;
    }


    /* Edit receives priority on mobile */

    .fair-view-actions
    .button--lime {
        grid-row: 1;
    }


    .fair-view-actions
    .button--white {
        grid-row: 2;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .fair-view-card {
        padding: 17px;

        border-radius: var(--radius-md);
    }


    .fair-view-data__item,
    .fair-view-dates > div,
    .fair-view-commercial > div,
    .fair-view-notes {
        padding: 14px;
    }


    .fair-view-commercial__commission::after {
        font-size: 52px;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 6.5 — DELETE FAIR / DANGER ZONE
   ========================================================= */


/* ---------------------------------------------------------
   DANGER ZONE — VIEW FAIR
   --------------------------------------------------------- */

.fair-danger-zone {
    margin-top: 30px;

    padding: 24px;

    background: #fff;

    border: 2px solid var(--coral);
    border-radius: var(--radius-md);
}


.fair-danger-zone__content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.fair-danger-zone h2 {
    margin: 5px 0 8px;

    font-size: 22px;
    font-weight: 950;

    letter-spacing: -.6px;
}


.fair-danger-zone p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 13px;
    font-weight: 650;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   DELETE PAGE
   --------------------------------------------------------- */

.fair-delete-page {
    padding-bottom: 70px;
}


.fair-delete-card {
    max-width: 850px;

    margin: 0 auto;

    padding:
        clamp(
            24px,
            5vw,
            42px
        );

    border-top:
        7px solid var(--coral);
}


/* ---------------------------------------------------------
   DELETE HEADER
   --------------------------------------------------------- */

.fair-delete-card__warning {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 30px;
}


.fair-delete-card__warning h2 {
    margin: 5px 0 0;

    font-size:
        clamp(
            26px,
            4vw,
            38px
        );

    line-height: 1;

    letter-spacing: -1.2px;
}


.fair-delete-card__icon {
    width: 54px;
    height: 54px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    background: var(--coral);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   FAIR SUMMARY
   --------------------------------------------------------- */

.fair-delete-summary {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 24px;
}


.fair-delete-summary > div {
    min-width: 0;

    padding: 16px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
}


.fair-delete-summary span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.fair-delete-summary strong {
    display: block;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   WARNING
   --------------------------------------------------------- */

.fair-delete-warning-text,
.fair-delete-blocked {
    padding: 20px;

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
}


.fair-delete-warning-text {
    background: var(--coral);
}


.fair-delete-blocked {
    background: var(--bg);
}


.fair-delete-warning-text strong,
.fair-delete-blocked strong {
    display: block;

    margin-bottom: 7px;

    font-size: 15px;
    font-weight: 950;
}


.fair-delete-warning-text p,
.fair-delete-blocked p {
    margin: 0;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.fair-delete-actions {
    margin-top: 26px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}


.fair-delete-actions form {
    margin: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fair-danger-zone__content {
        align-items: stretch;
        flex-direction: column;
    }


    .fair-danger-zone__content .button {
        width: 100%;

        justify-content: center;
    }


    .fair-delete-summary {
        grid-template-columns: 1fr;
    }


    .fair-delete-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .fair-delete-actions form {
        width: 100%;
    }


    .fair-delete-actions .button {
        width: 100%;

        justify-content: center;
    }


    .fair-delete-actions form {
        grid-row: 1;
    }


    .fair-delete-actions > a {
        grid-row: 2;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 6.6 — FAIR FILTERS
   VISUAL REFINEMENT
   ========================================================= */


/* ---------------------------------------------------------
   FILTER PANEL
   --------------------------------------------------------- */

.fairs-toolbar {
    margin: 34px 0 42px;
    padding: 0;

    background: var(--surface);

    border: 2px solid var(--text);
    border-radius: var(--radius-lg);

    overflow: hidden;
}


/* ---------------------------------------------------------
   FORM GRID
   --------------------------------------------------------- */

.fairs-filter-form {
    padding: 26px 28px;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.8fr)
        minmax(170px, .8fr)
        minmax(220px, 1fr)
        auto;

    gap: 16px;

    align-items: end;
}


/* ---------------------------------------------------------
   FIELDS
   --------------------------------------------------------- */

.fairs-filter-form__search,
.fairs-filter-form__field {
    min-width: 0;
}


.fairs-filter-form label {
    display: block;

    margin: 0 0 8px;

    color: var(--text);

    font-size: 10px;
    font-weight: 950;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   INPUT / SELECT
   --------------------------------------------------------- */

.fairs-filter-form input,
.fairs-filter-form select {
    width: 100%;
    height: 52px;

    margin: 0;

    padding: 0 16px;

    background: var(--bg);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: var(--radius-sm);

    font-family: inherit;
    font-size: 13px;
    font-weight: 750;

    line-height: 1;

    outline: none;

    box-sizing: border-box;

    transition:
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.fairs-filter-form input::placeholder {
    color: var(--muted);

    opacity: .8;
}


.fairs-filter-form input:hover,
.fairs-filter-form select:hover {
    background: var(--surface);
}


.fairs-filter-form input:focus,
.fairs-filter-form select:focus {
    background: var(--surface);

    box-shadow:
        4px 4px 0 var(--cyan);

    transform: translate(-1px, -1px);
}


/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.fairs-filter-form__search input {
    font-size: 14px;
}


/* ---------------------------------------------------------
   SELECT
   --------------------------------------------------------- */

.fairs-filter-form select {
    cursor: pointer;
}


/* ---------------------------------------------------------
   APPLY BUTTON
   --------------------------------------------------------- */

.fairs-filter-form__actions {
    display: flex;
    align-items: flex-end;
}


.fairs-filter-form__actions .button {
    height: 52px;
    min-width: 120px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   BOTTOM RESULT BAR
   --------------------------------------------------------- */

.fairs-toolbar__bottom {
    min-height: 58px;

    padding: 13px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    background: var(--bg);

    border-top: 2px solid var(--text);
}


/* ---------------------------------------------------------
   RESULT COUNT
   --------------------------------------------------------- */

.fairs-results {
    margin: 0;

    display: flex;
    align-items: center;

    gap: 6px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;
}


.fairs-results strong {
    width: 30px;
    height: 30px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   CLEAR FILTERS
   --------------------------------------------------------- */

.fairs-clear-filters {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--text);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: .04em;

    text-decoration: none;

    text-transform: uppercase;
}


.fairs-clear-filters:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   CURRENT FAIRS
   --------------------------------------------------------- */

.fairs-section--current {
    margin-bottom: 38px;
}


.fair-list-card--current {
    border-top: 6px solid var(--cyan);
}


.fair-list-card--current h3 {
    margin-top: 12px;
}


.fair-list-card__commercial {
    min-height: 30px;

    padding: 5px 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--lime);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 9px;
    font-weight: 950;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   NO RESULTS
   --------------------------------------------------------- */

.fairs-no-results {
    padding: clamp(32px, 6vw, 60px);

    text-align: center;

    border-top: 6px solid var(--coral);
}


.fairs-no-results__icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 18px;

    display: grid;
    place-items: center;

    background: var(--coral);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}


.fairs-no-results h2 {
    margin: 7px 0 10px;

    font-size: clamp(26px, 4vw, 38px);

    letter-spacing: -1px;
}


.fairs-no-results p {
    max-width: 480px;

    margin: 0 auto 22px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 650;

    line-height: 1.6;
}


/* =========================================================
   DESKTOP — SMALLER SCREENS
   ========================================================= */

@media (max-width: 1050px) {

    .fairs-filter-form {
        grid-template-columns:
            minmax(220px, 1.5fr)
            minmax(150px, .8fr)
            minmax(190px, 1fr);
    }


    .fairs-filter-form__actions {
        grid-column: 1 / -1;
    }


    .fairs-filter-form__actions .button {
        width: 100%;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 760px) {

    .fairs-toolbar {
        margin-top: 26px;

        border-radius: var(--radius-md);
    }


    .fairs-filter-form {
        padding: 22px;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .fairs-filter-form__search {
        grid-column: 1 / -1;
    }


    .fairs-filter-form__actions {
        grid-column: 1 / -1;
    }


    .fairs-toolbar__bottom {
        padding:
            13px
            22px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .fairs-toolbar {
        margin:
            22px 0
            30px;
    }


    .fairs-filter-form {
        padding: 18px;

        grid-template-columns: 1fr;

        gap: 16px;
    }


    .fairs-filter-form__search,
    .fairs-filter-form__actions {
        grid-column: auto;
    }


    .fairs-filter-form input,
    .fairs-filter-form select,
    .fairs-filter-form__actions .button {
        height: 50px;
    }


    .fairs-filter-form__actions .button {
        width: 100%;
    }


    .fairs-toolbar__bottom {
        min-height: auto;

        padding: 15px 18px;

        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 6.7 — FAIRS MOBILE OPTIMIZATION
   ========================================================= */


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 760px) {

    /* -----------------------------------------------------
       PAGE
       ----------------------------------------------------- */

    .fairs-page {
        padding-top: 26px;
        padding-bottom: 50px;
    }


    .fairs-page .container {
        width: min(
            calc(100% - 32px),
            var(--container)
        );
    }


    /* -----------------------------------------------------
       PAGE HEADER
       ----------------------------------------------------- */

    .fairs-page .dashboard-header {
        margin-bottom: 26px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 20px;
    }


    .fairs-page .dashboard-header > div:first-child {
        width: 100%;
    }


    .fairs-page .dashboard-header h1 {
        margin-bottom: 8px;

        font-size: clamp(
            48px,
            15vw,
            72px
        );

        line-height: .9;
        letter-spacing: -.055em;
    }


    .fairs-page .dashboard-header p {
        max-width: 100%;

        margin-bottom: 0;

        font-size: 13px;
        line-height: 1.55;
    }


    .fairs-page .dashboard-header__actions {
        width: 100%;
    }


    .fairs-page .dashboard-header__actions .button {
        width: 100%;
        min-height: 52px;

        justify-content: center;
    }


    /* -----------------------------------------------------
       FILTER TOOLBAR
       ----------------------------------------------------- */

    .fairs-toolbar {
        margin:
            0 0
            34px;

        border-radius: 22px;
    }


    .fairs-filter-form {
        padding: 20px;

        display: grid;
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .fairs-filter-form__search,
    .fairs-filter-form__field,
    .fairs-filter-form__actions {
        width: 100%;
        min-width: 0;

        grid-column: auto;
    }


    .fairs-filter-form label {
        margin-bottom: 7px;

        font-size: 9px;
    }


    .fairs-filter-form input,
    .fairs-filter-form select {
        width: 100%;
        height: 50px;

        padding-inline: 14px;

        font-size: 13px;

        border-radius: 12px;
    }


    .fairs-filter-form__actions {
        display: block;
    }


    .fairs-filter-form__actions .button {
        width: 100%;
        height: 50px;
        min-height: 50px;

        justify-content: center;
    }


    /* -----------------------------------------------------
       FILTER RESULT BAR
       ----------------------------------------------------- */

    .fairs-toolbar__bottom {
        min-height: auto;

        padding: 14px 20px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 12px;
    }


    .fairs-results {
        margin: 0;

        font-size: 10px;
    }


    .fairs-results strong {
        width: 28px;
        height: 28px;

        font-size: 10px;
    }


    .fairs-clear-filters {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       FAIR SECTIONS
       ----------------------------------------------------- */

    .fairs-section {
        margin-bottom: 34px;
    }


    .fairs-section .dashboard-panel__header {
        margin-bottom: 14px;

        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        gap: 15px;
    }


    .fairs-section .dashboard-panel__header h2 {
        margin-bottom: 0;

        font-size: 24px;
        line-height: 1.05;

        letter-spacing: -.8px;
    }


    .fairs-section
    .dashboard-panel__eyebrow {
        margin-bottom: 5px;
    }


    .fairs-count {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        display: inline-grid;
        place-items: center;

        border-radius: 50%;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       FAIR LIST
       ----------------------------------------------------- */

    .fairs-list {
        display: grid;

        gap: 14px;
    }


    /* -----------------------------------------------------
       FAIR CARD
       ----------------------------------------------------- */

    .fair-list-card {
        padding: 20px;

        border-radius: 20px;
    }


    .fair-list-card__main {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }


    .fair-list-card__main > div {
        min-width: 0;
    }


    .fair-list-card h3 {
        margin:
            7px 0
            5px;

        font-size: 24px;
        line-height: 1.05;

        letter-spacing: -.7px;

        overflow-wrap: anywhere;
    }


    .fair-list-card__company {
        margin-bottom: 0;

        font-size: 12px;
        line-height: 1.45;
    }


    /* -----------------------------------------------------
       STATUS
       ----------------------------------------------------- */

    .fair-status {
        width: fit-content;

        font-size: 9px;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       DATES
       ----------------------------------------------------- */

    .fair-list-card__dates {
        width: 100%;

        padding: 13px 14px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 8px;

        background: var(--bg);

        border: 2px solid var(--text);
        border-radius: 13px;
    }


    .fair-list-card__dates strong {
        font-size: 11px;

        white-space: nowrap;
    }


    .fair-list-card__dates span {
        flex: 0 0 auto;

        font-size: 12px;
        font-weight: 950;
    }


    /* -----------------------------------------------------
       CARD FOOTER
       ----------------------------------------------------- */

    .fair-list-card__footer {
        margin-top: 17px;
        padding-top: 16px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 14px;
    }


    .fair-list-card__footer > p {
        margin: 0;

        font-size: 11px;
        font-weight: 800;
    }


    /* -----------------------------------------------------
       CARD ACTIONS
       ----------------------------------------------------- */

    .fair-list-card__actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 9px;
    }


    .fair-list-card__actions .button {
        width: 100%;
        min-width: 0;
        min-height: 44px;

        padding-inline: 12px;

        justify-content: center;
    }


    .fair-list-card__commercial {
        grid-column: 1 / -1;

        width: fit-content;

        margin-bottom: 2px;
    }


    /* -----------------------------------------------------
       CREATE / EDIT FORM
       ----------------------------------------------------- */

    .fair-form {
        width: 100%;
    }


    .fair-form__section {
        padding: 20px;

        border-radius: 20px;
    }


    .fair-form__section-header {
        display: flex;
        align-items: flex-start;

        gap: 13px;
    }


    .fair-form__section-number {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        font-size: 10px;
    }


    .fair-form__section-header h2 {
        font-size: 21px;
        line-height: 1.1;
    }


    .fair-form__grid,
    .fair-form__grid--two {
        display: grid;
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .fair-form input,
    .fair-form select,
    .fair-form textarea {
        width: 100%;

        font-size: 16px;
    }


    .fair-form textarea {
        min-height: 130px;
    }


    .fair-form__actions {
        display: flex;
        flex-direction: column;

        gap: 10px;
    }


    .fair-form__actions .button {
        width: 100%;
        min-height: 52px;

        justify-content: center;
    }


    /* -----------------------------------------------------
       FAIR VIEW
       ----------------------------------------------------- */

    .fair-view-page .dashboard-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }


    .fair-view-page
    .dashboard-header__actions {
        width: 100%;
    }


    .fair-view-page
    .dashboard-header__actions .button {
        width: 100%;

        justify-content: center;
    }


    .fair-view-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .fair-view-card {
        padding: 20px;

        border-radius: 20px;
    }


    .fair-view-card h2,
    .fair-view-card h3 {
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       VIEW ACTIONS
       ----------------------------------------------------- */

    .fair-view-actions {
        display: flex;
        flex-direction: column;

        gap: 10px;
    }


    .fair-view-actions .button {
        width: 100%;
        min-height: 50px;

        justify-content: center;
    }


    /* -----------------------------------------------------
       DANGER ZONE
       ----------------------------------------------------- */

    .fair-danger-zone {
        margin-top: 28px;

        border-radius: 20px;
    }


    .fair-danger-zone__content {
        padding: 20px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }


    .fair-danger-zone__content h2 {
        margin-bottom: 7px;

        font-size: 22px;
    }


    .fair-danger-zone__content p {
        margin-bottom: 0;

        font-size: 12px;
        line-height: 1.55;
    }


    .fair-danger-zone__content .button {
        width: 100%;

        justify-content: center;
    }


    /* -----------------------------------------------------
       DELETE PAGE
       ----------------------------------------------------- */

    .fair-delete-page {
        padding-top: 26px;
        padding-bottom: 50px;
    }


    .fair-delete-card {
        padding: 22px;

        border-radius: 20px;
    }


    .fair-delete-card__warning {
        display: flex;
        align-items: flex-start;

        gap: 13px;
    }


    .fair-delete-card__icon {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;
    }


    .fair-delete-summary {
        padding: 16px;

        border-radius: 14px;
    }


    .fair-delete-actions {
        display: flex;
        flex-direction: column;

        gap: 10px;
    }


    .fair-delete-actions .button {
        width: 100%;
        min-height: 52px;

        justify-content: center;
    }


    /* -----------------------------------------------------
       EMPTY / NO RESULTS
       ----------------------------------------------------- */

    .fairs-empty,
    .fairs-no-results {
        padding: 28px 20px;

        border-radius: 20px;
    }


    .fairs-no-results h2 {
        font-size: 27px;
    }


    .fairs-no-results p {
        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
   320px — 480px
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       GLOBAL WIDTH
       ----------------------------------------------------- */

    .fairs-page .container,
    .fair-view-page .container,
    .fair-delete-page .container {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------------------
       PAGE TITLE
       ----------------------------------------------------- */

    .fairs-page .dashboard-header h1 {
        font-size: clamp(
            44px,
            17vw,
            62px
        );
    }


    /* -----------------------------------------------------
       FILTERS
       ----------------------------------------------------- */

    .fairs-toolbar {
        border-radius: 18px;
    }


    .fairs-filter-form {
        padding: 16px;
    }


    .fairs-toolbar__bottom {
        padding: 13px 16px;

        flex-direction: column;
        align-items: flex-start;
    }


    /* -----------------------------------------------------
       FAIR CARDS
       ----------------------------------------------------- */

    .fair-list-card {
        padding: 17px;

        border-radius: 18px;
    }


    .fair-list-card h3 {
        font-size: 22px;
    }


    .fair-list-card__dates {
        padding: 12px;
    }


    .fair-list-card__dates strong {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       ACTION BUTTONS
       ----------------------------------------------------- */

    .fair-list-card__actions {
        grid-template-columns: 1fr;
    }


    .fair-list-card__commercial {
        grid-column: auto;
    }


    .fair-list-card__actions .button {
        min-height: 46px;
    }


    /* -----------------------------------------------------
       FORM CARDS
       ----------------------------------------------------- */

    .fair-form__section,
    .fair-view-card,
    .fair-delete-card {
        padding: 17px;

        border-radius: 18px;
    }


    /* -----------------------------------------------------
       TOUCH FRIENDLY FIELDS
       Prevents unwanted zoom on iPhone
       ----------------------------------------------------- */

    .fair-form input,
    .fair-form select,
    .fair-form textarea,
    .fairs-filter-form input,
    .fairs-filter-form select {
        font-size: 16px;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    .fairs-page .button,
    .fair-view-page .button,
    .fair-delete-page .button {
        min-height: 48px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .fairs-page .container,
    .fair-view-page .container,
    .fair-delete-page .container {
        width: calc(100% - 20px);
    }


    .fairs-page .dashboard-header h1 {
        font-size: 46px;
    }


    .fair-list-card,
    .fair-form__section,
    .fair-view-card,
    .fair-delete-card {
        padding: 15px;
    }


    .fair-list-card__dates {
        align-items: flex-start;
        flex-direction: column;

        gap: 3px;
    }


    .fair-list-card__dates span {
        transform: rotate(90deg);

        margin-left: 5px;
    }


    .fairs-section
    .dashboard-panel__header h2 {
        font-size: 21px;
    }

}

/* =========================================================
   FAIRPILOT — PHASE 7.2
   CREATE SALE — FINAL UI
   ========================================================= */


/* ---------------------------------------------------------
   FORM WRAPPER
   --------------------------------------------------------- */

.sale-form {
    width: 100%;
    max-width: 920px;

    margin: 0;
}


/* ---------------------------------------------------------
   SALE FORM SECTIONS
   --------------------------------------------------------- */

.sale-form .fair-form__section {
    display: block;

    width: 100%;

    margin-bottom: 22px;
    padding: 28px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


/* Individual accent colours */

.sale-form .fair-form__section:nth-of-type(1) {
    border-top: 7px solid var(--lime);
}

.sale-form .fair-form__section:nth-of-type(2) {
    border-top: 7px solid var(--cyan);
}

.sale-form .fair-form__section:nth-of-type(3) {
    border-top: 7px solid var(--coral);
}


/* ---------------------------------------------------------
   SECTION HEADER
   --------------------------------------------------------- */

.sale-form .fair-form__section-header {
    display: flex;
    align-items: center;

    width: 100%;

    margin-bottom: 26px;

    gap: 16px;
}


/* Number */

.sale-form .fair-form__section-number {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    margin: 0;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 950;
}


/* Header text wrapper */

.sale-form .fair-form__section-header > div {
    width: auto;
    min-width: 0;

    display: block;
}


/* Eyebrow */

.sale-form
.fair-form__section-header
.dashboard-panel__eyebrow {
    display: block;

    margin: 0 0 4px;

    font-size: 9px;
    line-height: 1.2;

    letter-spacing: .12em;
    text-transform: uppercase;
}


/* Section title */

.sale-form .fair-form__section-header h2 {
    margin: 0;

    font-size: 26px;
    line-height: 1;

    letter-spacing: -.035em;

    white-space: normal;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.sale-form .fair-form__grid {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 18px;
}


.sale-form .fair-form__grid--two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* ---------------------------------------------------------
   FORM FIELD
   --------------------------------------------------------- */

.sale-form .form-field {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: 8px;
}


/* Label */

.sale-form .form-field > label {
    display: block;

    margin: 0;

    color: var(--text);

    font-size: 10px;
    font-weight: 950;
    line-height: 1.2;

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

.sale-form input,
.sale-form select,
.sale-form textarea {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;

    background: #ffffff;
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 13px;

    outline: none;

    font-family: inherit;
    font-size: 15px;
    font-weight: 750;

    transition:
        box-shadow var(--transition),
        transform var(--transition),
        border-color var(--transition);
}


.sale-form input,
.sale-form select {
    min-height: 52px;

    padding: 0 15px;
}


.sale-form textarea {
    min-height: 130px;

    padding: 15px;

    resize: vertical;

    line-height: 1.5;
}


/* Focus */

.sale-form input:focus,
.sale-form select:focus,
.sale-form textarea:focus {
    box-shadow: 4px 4px 0 var(--cyan);

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   HELP TEXT
   --------------------------------------------------------- */

.sale-form .form-field__help {
    display: block;

    margin: 0;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   FAIR PREVIEW
   --------------------------------------------------------- */

.sale-fair-preview {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 20px;
}


.sale-fair-preview > div {
    min-width: 0;

    padding: 16px 18px;

    background: var(--bg);

    border: 2px solid var(--text);
    border-radius: var(--radius-md);
}


.sale-fair-preview span {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.sale-fair-preview strong {
    display: block;

    font-size: 19px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.sale-form .fair-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;

    margin-top: 30px;

    gap: 12px;
}


.sale-form .fair-form__actions .button {
    min-height: 50px;

    padding-inline: 24px;

    justify-content: center;
}


/* ---------------------------------------------------------
   FORM ERRORS
   --------------------------------------------------------- */

.sales-page .form-errors {
    max-width: 920px;

    margin-bottom: 22px;
    padding: 18px 20px;

    background: #ffffff;

    border: 2px solid var(--coral);
    border-radius: var(--radius-md);

    box-shadow: 4px 4px 0 var(--coral);
}


.sales-page .form-errors strong {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 950;
}


.sales-page .form-errors ul {
    margin: 0;
    padding-left: 18px;
}


.sales-page .form-errors li {
    margin: 4px 0;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 760px) {

    .sale-form {
        max-width: none;
    }


    .sale-form .fair-form__section {
        margin-bottom: 16px;
        padding: 21px;

        border-radius: 20px;
    }


    .sale-form .fair-form__section-header {
        margin-bottom: 22px;

        gap: 13px;
    }


    .sale-form .fair-form__section-number {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .sale-form .fair-form__section-header h2 {
        font-size: 22px;
    }


    .sale-form .fair-form__grid--two {
        grid-template-columns: 1fr;
    }


    .sale-form input,
    .sale-form select,
    .sale-form textarea {
        font-size: 16px;
    }


    .sale-form .fair-form__actions {
        flex-direction: column-reverse;

        margin-top: 22px;
    }


    .sale-form .fair-form__actions .button {
        width: 100%;

        min-height: 52px;

        justify-content: center;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .sale-form .fair-form__section {
        padding: 18px;

        border-radius: 18px;
    }


    .sale-form .fair-form__section-header {
        align-items: center;

        margin-bottom: 20px;
    }


    .sale-form .fair-form__section-number {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        font-size: 9px;
    }


    .sale-form .fair-form__section-header h2 {
        font-size: 20px;
    }


    .sale-fair-preview {
        grid-template-columns: 1fr;
    }


    .sale-form input,
    .sale-form select {
        min-height: 50px;
    }


    .sale-form textarea {
        min-height: 120px;
    }

}

/* =========================================================
   FAIRPILOT — PHASE 7.3
   SALES BY FAIR
   ========================================================= */

.fair-sales-section {
    margin-top: 46px;
    margin-bottom: 46px;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.fair-sales-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 22px;
}


.fair-sales-header > div {
    min-width: 0;
}


.fair-sales-header h2 {
    margin: 5px 0 7px;

    font-size: clamp(30px, 4vw, 48px);
    line-height: .95;

    letter-spacing: -.045em;
}


.fair-sales-header p {
    max-width: 560px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.fair-sales-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 18px;
}


.fair-sales-summary__card {
    min-width: 0;

    padding: 25px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.fair-sales-summary__card--commission {
    background: var(--lime);
}


.fair-sales-summary__card > span {
    display: block;

    margin-bottom: 14px;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.fair-sales-summary__card > strong {
    display: block;

    margin-bottom: 8px;

    font-size: clamp(30px, 4vw, 46px);
    line-height: .95;

    letter-spacing: -.045em;

    overflow-wrap: anywhere;
}


.fair-sales-summary__card > small {
    display: block;

    color: var(--muted);

    font-size: 10px;
    font-weight: 900;
}


/* ---------------------------------------------------------
   SALES LIST
   --------------------------------------------------------- */

.fair-sales-list {
    display: grid;

    gap: 10px;
}


.fair-sale-row {
    display: grid;

    grid-template-columns:
        minmax(120px, .8fr)
        minmax(140px, 1fr)
        minmax(150px, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    padding: 18px 20px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-md);
}


.fair-sale-row__date span,
.fair-sale-row__value span,
.fair-sale-row__commission > span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.fair-sale-row__date strong {
    font-size: 12px;
    font-weight: 950;
}


.fair-sale-row__value strong,
.fair-sale-row__commission strong {
    display: block;

    font-size: 18px;
    font-weight: 950;
}


.fair-sale-row__commission small {
    display: inline-block;

    margin-top: 4px;
    padding: 3px 7px;

    background: var(--lime);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;
}


.fair-sale-row__actions {
    display: flex;

    gap: 8px;
}


/* ---------------------------------------------------------
   EMPTY
   --------------------------------------------------------- */

.fair-sales-empty {
    padding: 34px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    text-align: center;
}


.fair-sales-empty h3 {
    margin: 6px 0 8px;

    font-size: 27px;

    letter-spacing: -.035em;
}


.fair-sales-empty p {
    max-width: 500px;

    margin:
        0 auto
        20px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .fair-sales-section {
        margin-top: 34px;
        margin-bottom: 34px;
    }


    .fair-sales-header {
        flex-direction: column;
        align-items: stretch;

        gap: 17px;
    }


    .fair-sales-header .button {
        width: 100%;
        min-height: 50px;

        justify-content: center;
    }


    .fair-sales-summary {
        grid-template-columns: 1fr;
    }


    .fair-sales-summary__card {
        padding: 21px;

        border-radius: 20px;
    }


    .fair-sale-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding: 18px;

        gap: 17px;
    }


    .fair-sale-row__actions {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding-top: 13px;

        border-top: 1px solid rgba(32, 32, 32, .14);
    }


    .fair-sale-row__actions .button {
        width: 100%;
        min-height: 44px;

        justify-content: center;
    }

}


@media (max-width: 480px) {

    .fair-sales-header h2 {
        font-size: 34px;
    }


    .fair-sales-summary__card > strong {
        font-size: 34px;
    }


    .fair-sale-row {
        grid-template-columns: 1fr;
    }


    .fair-sale-row__date,
    .fair-sale-row__value,
    .fair-sale-row__commission {
        padding-bottom: 12px;

        border-bottom: 1px solid rgba(32, 32, 32, .12);
    }


    .fair-sale-row__actions {
        grid-column: auto;
        grid-template-columns: 1fr;
    }


    .fair-sales-empty {
        padding: 26px 18px;
    }


    .fair-sales-empty .button {
        width: 100%;

        justify-content: center;
    }

}

/* =========================================================
   FAIRPILOT — PHASE 7.4
   VIEW / EDIT SALE
   ========================================================= */

.sale-view-page {
    padding-top: 42px;
    padding-bottom: 80px;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.sale-view-hero {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 24px;
}


.sale-view-hero > div {
    min-width: 0;

    padding: 28px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.sale-view-hero__commission {
    background: var(--lime) !important;
}


.sale-view-hero span {
    display: block;

    margin-bottom: 14px;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.sale-view-hero strong {
    display: block;

    font-size: clamp(34px, 5vw, 56px);
    line-height: .95;

    letter-spacing: -.05em;

    overflow-wrap: anywhere;
}


.sale-view-hero small {
    display: inline-block;

    margin-top: 10px;
    padding: 4px 9px;

    background: var(--surface);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 10px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.sale-view-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.sale-view-card {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 18px;

    padding: 24px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);
}


.sale-view-card--full {
    grid-column: 1 / -1;
}


.sale-view-card__number {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    background: var(--text);
    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}


.sale-view-card h2 {
    margin: 5px 0 18px;

    font-size: 24px;
    line-height: 1.05;

    letter-spacing: -.035em;
}


/* ---------------------------------------------------------
   DATA
   --------------------------------------------------------- */

.sale-view-data {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.sale-view-data > div {
    min-width: 0;

    padding: 14px;

    background: var(--bg);

    border: 1px solid var(--text);
    border-radius: 12px;
}


.sale-view-data span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.sale-view-data strong {
    display: block;

    font-size: 14px;
    font-weight: 950;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   FAIR LINK
   --------------------------------------------------------- */

.sale-view-fair-link {
    display: inline-block;

    margin-top: 16px;

    color: var(--text);

    font-size: 11px;
    font-weight: 950;

    text-decoration: none;
}


.sale-view-fair-link:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   NOTES
   --------------------------------------------------------- */

.sale-view-notes {
    padding: 16px;

    background: var(--bg);

    border-radius: 12px;
}


.sale-view-notes p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;
}


.sale-view-notes__empty {
    color: var(--muted);
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.sale-view-actions {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    margin-top: 28px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .sale-view-page {
        padding-top: 26px;
        padding-bottom: 50px;
    }


    .sale-view-header {
        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }


    .sale-view-header
    .dashboard-header__actions {
        width: 100%;
    }


    .sale-view-header
    .dashboard-header__actions .button {
        width: 100%;

        justify-content: center;
    }


    .sale-view-hero {
        grid-template-columns: 1fr;
    }


    .sale-view-hero > div {
        padding: 22px;

        border-radius: 20px;
    }


    .sale-view-grid {
        grid-template-columns: 1fr;
    }


    .sale-view-card--full {
        grid-column: auto;
    }


    .sale-view-card {
        padding: 20px;

        border-radius: 20px;
    }


    .sale-view-actions {
        flex-direction: column;
    }


    .sale-view-actions .button {
        width: 100%;
        min-height: 50px;

        justify-content: center;
    }

}


@media (max-width: 480px) {

    .sale-view-hero strong {
        font-size: 36px;
    }


    .sale-view-card {
        grid-template-columns: 1fr;
    }


    .sale-view-card__number {
        width: 38px;
        height: 38px;
    }


    .sale-view-data {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   FAIRPILOT — PHASE 7.5
   DELETE SALE
   ========================================================= */


/* ---------------------------------------------------------
   DANGER ZONE — VIEW
   --------------------------------------------------------- */

.sale-danger-zone {
    margin-top: 30px;

    background: rgba(255, 87, 77, .08);

    border: 2px solid var(--coral);
    border-radius: var(--radius-lg);
}


.sale-danger-zone__content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 24px;
}


.sale-danger-zone__content > div {
    min-width: 0;
}


.sale-danger-zone__content h2 {
    margin: 5px 0 7px;

    font-size: 24px;
    line-height: 1;

    letter-spacing: -.035em;
}


.sale-danger-zone__content p {
    max-width: 570px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   DELETE PAGE
   --------------------------------------------------------- */

.sale-delete-page {
    padding-top: 42px;
    padding-bottom: 80px;
}


.sale-delete-card {
    max-width: 920px;

    padding: 28px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


/* ---------------------------------------------------------
   WARNING
   --------------------------------------------------------- */

.sale-delete-card__warning {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding-bottom: 24px;
    margin-bottom: 22px;

    border-bottom: 2px solid var(--text);
}


.sale-delete-card__icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    background: var(--coral);
    color: var(--text);

    border: 2px solid var(--text);
    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}


.sale-delete-card__warning h2 {
    margin: 5px 0 8px;

    font-size: 26px;
    line-height: 1.05;

    letter-spacing: -.035em;
}


.sale-delete-card__warning p {
    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.sale-delete-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 26px;
}


.sale-delete-summary > div {
    min-width: 0;

    padding: 16px;

    background: var(--bg);

    border: 1px solid var(--text);
    border-radius: 13px;
}


.sale-delete-summary span {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.sale-delete-summary strong {
    display: block;

    font-size: 16px;
    font-weight: 950;

    overflow-wrap: anywhere;
}


.sale-delete-summary small {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.sale-delete-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}


.sale-delete-actions form {
    margin: 0;
}


.sale-delete-actions .button {
    min-height: 50px;

    justify-content: center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .sale-danger-zone {
        border-radius: 20px;
    }


    .sale-danger-zone__content {
        flex-direction: column;
        align-items: stretch;

        padding: 20px;

        gap: 18px;
    }


    .sale-danger-zone__content .button {
        width: 100%;
        min-height: 50px;

        justify-content: center;
    }


    .sale-delete-page {
        padding-top: 26px;
        padding-bottom: 50px;
    }


    .sale-delete-card {
        padding: 20px;

        border-radius: 20px;
    }


    .sale-delete-summary {
        grid-template-columns: 1fr;
    }


    .sale-delete-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }


    .sale-delete-actions form {
        width: 100%;
    }


    .sale-delete-actions .button {
        width: 100%;

        min-height: 52px;
    }

}


@media (max-width: 480px) {

    .sale-delete-card {
        padding: 17px;
    }


    .sale-delete-card__warning {
        gap: 13px;
    }


    .sale-delete-card__icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 18px;
    }


    .sale-delete-card__warning h2 {
        font-size: 21px;
    }

}

/* =========================================================
   FAIRPILOT
   SALES INDEX — VISUAL REFINEMENT
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.sales-page {
    padding-top: 34px;
    padding-bottom: 80px;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.sales-page .dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 36px;
}


.sales-page .dashboard-header > div:first-child {
    min-width: 0;
}


.sales-page .dashboard-header h1 {
    margin: 4px 0 8px;

    font-size: clamp(54px, 7vw, 86px);
    line-height: .88;

    letter-spacing: -.065em;
}


.sales-page .dashboard-header p {
    max-width: 520px;

    margin: 0;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
}


.sales-page .dashboard-header__actions {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.sales-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 42px;
}


.sales-summary-card {
    position: relative;

    min-width: 0;
    min-height: 180px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 26px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;
}


/* Total Sales */

.sales-summary-card:first-child {
    background: var(--cyan);
}


/* Commission */

.sales-summary-card:last-child {
    background: var(--lime);
}


.sales-summary-card > span {
    position: relative;
    z-index: 2;

    display: block;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.sales-summary-card > strong {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: 24px;

    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 950;
    line-height: .95;

    letter-spacing: -.05em;
}


.sales-summary-card > small {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: 9px;

    font-size: 10px;
    font-weight: 850;
}


/* EUR / USD values inside summary */

.sales-summary-card__values {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 9px 18px;

    margin-top: 28px;
}


.sales-summary-card__values strong {
    display: block;

    font-size: clamp(30px, 4vw, 48px);
    font-weight: 950;
    line-height: .95;

    letter-spacing: -.045em;
}


.sales-summary-card__values span {
    font-size: 15px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   SALES SECTION
   --------------------------------------------------------- */

.sales-section {
    margin-top: 10px;
}


.sales-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.sales-section__header > div {
    min-width: 0;
}


.sales-section__header h2 {
    margin: 5px 0 0;

    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;

    letter-spacing: -.04em;
}


.sales-count {
    flex: 0 0 auto;

    min-width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0 12px;

    background: var(--text);
    color: #ffffff;

    border: 2px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   SALES LIST
   --------------------------------------------------------- */

.sales-list {
    display: grid;

    gap: 12px;
}


.sale-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(100px, .75fr)
        minmax(180px, 1.5fr)
        minmax(130px, 1fr)
        minmax(150px, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    padding: 20px 22px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.sale-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);
}


/* ---------------------------------------------------------
   CARD DATA
   --------------------------------------------------------- */

.sale-card__date,
.sale-card__fair,
.sale-card__amount,
.sale-card__commission {
    min-width: 0;
}


.sale-card__date span,
.sale-card__fair span,
.sale-card__amount span,
.sale-card__commission span {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.sale-card__date strong {
    display: block;

    font-size: 13px;
    font-weight: 950;
}


.sale-card__fair strong {
    display: block;

    margin-bottom: 3px;

    font-size: 17px;
    font-weight: 950;

    line-height: 1.15;

    overflow-wrap: anywhere;
}


.sale-card__fair small {
    display: block;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
}


.sale-card__amount strong {
    display: block;

    font-size: 20px;
    font-weight: 950;

    letter-spacing: -.025em;
}


.sale-card__commission strong {
    display: block;

    font-size: 18px;
    font-weight: 950;

    letter-spacing: -.02em;
}


.sale-card__commission small {
    display: inline-block;

    margin-top: 5px;
    padding: 3px 8px;

    background: var(--lime);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.sale-card__actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.sale-card__actions .button {
    min-height: 40px;

    padding: 0 14px;

    font-size: 9px;
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.sales-empty {
    padding: 44px 28px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    text-align: center;
}


.sales-empty h2 {
    margin: 6px 0 9px;

    font-size: 30px;

    letter-spacing: -.04em;
}


.sales-empty p {
    max-width: 500px;

    margin: 0 auto 22px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .sale-card {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sale-card__actions {
        grid-column: 1 / -1;

        padding-top: 14px;

        border-top:
            1px solid rgba(32, 32, 32, .14);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .sales-page {
        padding-top: 25px;
        padding-bottom: 55px;
    }


    .sales-page .dashboard-header {
        flex-direction: column;
        align-items: stretch;

        gap: 20px;

        margin-bottom: 28px;
    }


    .sales-page .dashboard-header h1 {
        font-size: 58px;
    }


    .sales-page
    .dashboard-header__actions {
        width: 100%;
    }


    .sales-page
    .dashboard-header__actions .button {
        width: 100%;
        min-height: 52px;

        justify-content: center;
    }


    /* Summary */

    .sales-summary {
        grid-template-columns: 1fr;

        gap: 13px;

        margin-bottom: 34px;
    }


    .sales-summary-card {
        min-height: 150px;

        padding: 22px;

        border-radius: 20px;
    }


    .sales-summary-card__values {
        margin-top: 22px;
    }


    /* Section */

    .sales-section__header {
        align-items: center;
    }


    /* Sale */

    .sale-card {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding: 18px;

        gap: 18px;
    }


    .sale-card__actions {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sale-card__actions .button {
        width: 100%;
        min-height: 44px;

        justify-content: center;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sales-page .dashboard-header h1 {
        font-size: 48px;
    }


    .sales-summary-card__values {
        flex-direction: column;

        align-items: flex-start;
    }


    .sales-section__header h2 {
        font-size: 29px;
    }


    .sale-card {
        grid-template-columns: 1fr;
    }


    .sale-card__date,
    .sale-card__fair,
    .sale-card__amount,
    .sale-card__commission {
        padding-bottom: 12px;

        border-bottom:
            1px solid rgba(32, 32, 32, .12);
    }


    .sale-card__actions {
        grid-column: auto;

        grid-template-columns: 1fr;
    }

}

/* =========================================================
   FAIRPILOT — PHASE 7.7
   DASHBOARD SALES
   ========================================================= */

.dashboard-sales {
    margin-top: 42px;
    margin-bottom: 42px;
}


/* HEADER */

.dashboard-sales__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 20px;
}


.dashboard-sales__header h2 {
    margin: 5px 0 7px;

    font-size: clamp(30px, 4vw, 42px);
    line-height: .95;

    letter-spacing: -.045em;
}


.dashboard-sales__header p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}


.dashboard-sales__header-actions {
    display: flex;
    align-items: center;

    gap: 9px;
}


.dashboard-sales__count {
    min-width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0 12px;

    background: var(--text);
    color: #fff;

    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 950;
}


/* LIST */

.dashboard-sales-list {
    display: grid;

    gap: 10px;
}


.dashboard-sale-row {
    display: grid;

    grid-template-columns:
        minmax(105px, .7fr)
        minmax(190px, 1.5fr)
        minmax(135px, 1fr)
        minmax(145px, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    padding: 19px 20px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.dashboard-sale-row:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);
}


.dashboard-sale-row__date,
.dashboard-sale-row__fair,
.dashboard-sale-row__amount,
.dashboard-sale-row__commission {
    min-width: 0;
}


.dashboard-sale-row__date span,
.dashboard-sale-row__fair span,
.dashboard-sale-row__amount span,
.dashboard-sale-row__commission > span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.dashboard-sale-row__date strong {
    font-size: 12px;
    font-weight: 950;
}


.dashboard-sale-row__fair strong {
    display: block;

    margin-bottom: 3px;

    font-size: 16px;
    font-weight: 950;
}


.dashboard-sale-row__fair small {
    color: var(--muted);

    font-size: 9px;
    font-weight: 750;
}


.dashboard-sale-row__amount strong,
.dashboard-sale-row__commission strong {
    display: block;

    font-size: 18px;
    font-weight: 950;

    letter-spacing: -.02em;
}


.dashboard-sale-row__commission small {
    display: inline-block;

    margin-top: 4px;
    padding: 3px 7px;

    background: var(--lime);

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;
}


/* EMPTY */

.dashboard-sales-empty {
    padding: 40px 25px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    text-align: center;
}


.dashboard-sales-empty__icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0 auto 15px;

    background: var(--cyan);

    border: var(--border);
    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}


.dashboard-sales-empty h3 {
    margin: 0 0 7px;

    font-size: 26px;

    letter-spacing: -.035em;
}


.dashboard-sales-empty p {
    max-width: 490px;

    margin: 0 auto 20px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .dashboard-sales__header {
        align-items: flex-start;
    }


    .dashboard-sale-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dashboard-sale-row__action {
        grid-column: 1 / -1;

        padding-top: 12px;

        border-top:
            1px solid rgba(32, 32, 32, .14);
    }

}


@media (max-width: 760px) {

    .dashboard-sales {
        margin-top: 34px;
        margin-bottom: 34px;
    }


    .dashboard-sales__header {
        flex-direction: column;
        align-items: stretch;
    }


    .dashboard-sales__header-actions {
        display: grid;

        grid-template-columns:
            auto 1fr 1fr;
    }


    .dashboard-sales__header-actions .button {
        width: 100%;

        justify-content: center;
    }


    .dashboard-sale-row {
        padding: 18px;
    }

}


@media (max-width: 520px) {

    .dashboard-sales__header-actions {
        grid-template-columns: 1fr;
    }


    .dashboard-sales__count {
        width: 44px;
    }


    .dashboard-sale-row {
        grid-template-columns: 1fr;
    }


    .dashboard-sale-row__date,
    .dashboard-sale-row__fair,
    .dashboard-sale-row__amount,
    .dashboard-sale-row__commission {
        padding-bottom: 11px;

        border-bottom:
            1px solid rgba(32, 32, 32, .12);
    }


    .dashboard-sale-row__action {
        grid-column: auto;
    }


    .dashboard-sale-row__action .button {
        width: 100%;
        min-height: 44px;

        justify-content: center;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 9 — STATISTICS
   ========================================================= */

.statistics-page {
    padding-top: 34px;
    padding-bottom: 80px;
}


/* =========================================================
   HEADER
   ========================================================= */

.statistics-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 34px;
}


.statistics-header > div {
    min-width: 0;
}


.statistics-header h1 {
    margin: 4px 0 8px;

    font-size: clamp(54px, 7vw, 86px);
    line-height: .88;

    letter-spacing: -.065em;
}


.statistics-header p {
    max-width: 540px;

    margin: 0;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;

    line-height: 1.5;
}


/* =========================================================
   YEAR FILTER
   ========================================================= */

.statistics-year-filter {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 10px;
}


.statistics-year-filter label {
    font-size: 9px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.statistics-year-filter select {
    min-width: 115px;
    height: 48px;

    padding: 0 36px 0 15px;

    background: var(--surface);
    color: var(--text);

    border: var(--border);
    border-radius: var(--radius-pill);

    font: inherit;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.statistics-summary {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-bottom: 46px;
}


.statistics-card {
    min-width: 0;
    min-height: 165px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.statistics-card--lime {
    background: var(--lime);
}


.statistics-card--cyan {
    background: var(--cyan);
}


.statistics-card--coral {
    background: var(--coral);
}


.statistics-card--dark {
    background: var(--text);
    color: #fff;
}


.statistics-card--white {
    background: var(--surface);
}


.statistics-card > span {
    display: block;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.statistics-card > strong {
    display: block;

    margin-top: 20px;

    font-size: clamp(28px, 4vw, 46px);
    font-weight: 950;

    line-height: .95;

    letter-spacing: -.045em;

    overflow-wrap: anywhere;
}


.statistics-card > small {
    display: block;

    margin-top: 9px;

    font-size: 9px;
    font-weight: 850;

    opacity: .75;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.statistics-monthly,
.statistics-fairs {
    margin-top: 45px;
}


.statistics-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.statistics-section-header h2 {
    margin: 5px 0 7px;

    font-size: clamp(29px, 4vw, 42px);

    line-height: .95;

    letter-spacing: -.045em;
}


.statistics-section-header p {
    max-width: 570px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.55;
}


/* =========================================================
   MONTHLY PERFORMANCE
   ========================================================= */

.statistics-month-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 13px;
}


.statistics-month-card {
    padding: 20px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-md);
}


.statistics-month-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 14px;
    margin-bottom: 17px;

    border-bottom:
        1px solid rgba(32, 32, 32, .14);
}


.statistics-month-card__header strong {
    font-size: 20px;
    font-weight: 950;
}


.statistics-month-card__header span {
    padding: 4px 8px;

    background: var(--text);
    color: #fff;

    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;
}


.statistics-month-metric + .statistics-month-metric {
    margin-top: 18px;
}


.statistics-month-metric__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 10px;
}


.statistics-month-metric__top span {
    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
}


.statistics-month-metric__top strong {
    font-size: 15px;
    font-weight: 950;
}


.statistics-month-metric small {
    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 750;
}


/* =========================================================
   BARS
   ========================================================= */

.statistics-bar {
    height: 9px;

    margin-top: 8px;

    background: #e7e4df;

    border: 1px solid var(--text);
    border-radius: var(--radius-pill);

    overflow: hidden;
}


.statistics-bar__fill {
    display: block;

    height: 100%;

    border-radius: inherit;
}


.statistics-bar__fill--eur {
    background: var(--lime);
}


.statistics-bar__fill--usd {
    background: var(--cyan);
}


/* =========================================================
   PERFORMANCE BY FAIR
   ========================================================= */

.statistics-fair-list {
    display: grid;

    gap: 10px;
}


.statistics-fair-row {
    display: grid;

    grid-template-columns:
        minmax(200px, 1.6fr)
        minmax(90px, .6fr)
        minmax(130px, 1fr)
        minmax(130px, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    padding: 19px 20px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.statistics-fair-row:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);
}


.statistics-fair-row__fair {
    min-width: 0;
}


.statistics-fair-row__fair > span,
.statistics-row-label {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.statistics-fair-row__fair strong {
    display: block;

    margin-bottom: 3px;

    font-size: 16px;
    font-weight: 950;

    line-height: 1.15;

    overflow-wrap: anywhere;
}


.statistics-fair-row__fair small {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 750;
}


.statistics-fair-row > div > strong {
    font-size: 15px;
    font-weight: 950;
}


/* =========================================================
   EMPTY
   ========================================================= */

.statistics-empty {
    padding: 42px 25px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    text-align: center;
}


.statistics-empty h3 {
    margin: 0 0 8px;

    font-size: 27px;

    letter-spacing: -.035em;
}


.statistics-empty p {
    max-width: 520px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .statistics-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .statistics-month-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .statistics-fair-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .statistics-fair-row > div:last-child {
        grid-column: 1 / -1;

        padding-top: 12px;

        border-top:
            1px solid rgba(32, 32, 32, .14);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .statistics-page {
        padding-top: 25px;
        padding-bottom: 55px;
    }


    .statistics-header {
        flex-direction: column;
        align-items: stretch;

        gap: 20px;

        margin-bottom: 27px;
    }


    .statistics-header h1 {
        font-size: 56px;
    }


    .statistics-year-filter {
        justify-content: space-between;

        padding: 12px 14px;

        background: var(--surface);

        border: var(--border);
        border-radius: var(--radius-md);
    }


    .statistics-year-filter select {
        min-width: 110px;
    }


    .statistics-summary {
        gap: 12px;

        margin-bottom: 35px;
    }


    .statistics-card {
        min-height: 145px;

        padding: 19px;

        border-radius: 20px;
    }


    .statistics-monthly,
    .statistics-fairs {
        margin-top: 35px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .statistics-header h1 {
        font-size: 47px;
    }


    .statistics-summary {
        grid-template-columns: 1fr;
    }


    .statistics-card {
        min-height: 135px;
    }


    .statistics-card > strong {
        font-size: 34px;
    }


    .statistics-month-grid {
        grid-template-columns: 1fr;
    }


    .statistics-fair-row {
        grid-template-columns: 1fr;
    }


    .statistics-fair-row > div {
        padding-bottom: 11px;

        border-bottom:
            1px solid rgba(32, 32, 32, .12);
    }


    .statistics-fair-row > div:last-child {
        grid-column: auto;

        padding-top: 0;
        padding-bottom: 0;

        border-bottom: 0;
    }


    .statistics-fair-row .button {
        width: 100%;

        min-height: 44px;

        justify-content: center;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 10.1 — ACCOUNT & PROFILE
   ========================================================= */

.account-page {
    padding-top: 34px;
    padding-bottom: 80px;
}


/* =========================================================
   HEADER
   ========================================================= */

.account-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 32px;
}


.account-header > div:first-child {
    min-width: 0;
}


.account-header h1 {
    margin: 4px 0 8px;

    font-size: clamp(54px, 7vw, 86px);
    line-height: .88;

    letter-spacing: -.065em;
}


.account-header p {
    max-width: 540px;

    margin: 0;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;

    line-height: 1.5;
}


.account-header__actions {
    flex: 0 0 auto;
}


/* =========================================================
   STATUS
   ========================================================= */

.account-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 22px 24px;

    margin-bottom: 22px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.account-status--trial {
    background: var(--lime);
}


.account-status--active {
    background: var(--cyan);
}


.account-status--expired {
    background: var(--coral);
}


.account-status--inactive {
    background: var(--surface);
}


.account-status__label {
    display: block;

    margin-bottom: 6px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.account-status strong {
    display: block;

    font-size: 25px;
    font-weight: 950;

    letter-spacing: -.03em;
}


.account-status p {
    margin: 7px 0 0;

    font-size: 11px;
    font-weight: 750;
}


.account-status__badge {
    flex: 0 0 auto;

    padding: 7px 13px;

    background: var(--text);
    color: #fff;

    border-radius: var(--radius-pill);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .08em;
}


/* =========================================================
   ACCOUNT GRID
   ========================================================= */

.account-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.account-panel {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 24px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.account-panel--preferences {
    background: #f8f8f5;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.account-panel__header {
    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(32, 32, 32, .14);
}


.account-panel__header > div {
    display: flex;
    align-items: flex-start;

    gap: 14px;
}


.account-panel__number {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background: var(--lime);

    border: var(--border);
    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}


.account-panel__number--cyan {
    background: var(--cyan);
}


.account-panel__header h2 {
    margin: 4px 0 0;

    font-size: 25px;

    line-height: 1;

    letter-spacing: -.035em;
}


/* =========================================================
   ACCOUNT DATA
   ========================================================= */

.account-data-list {
    flex: 1;

    display: grid;

    margin-top: 4px;
}


.account-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 17px 0;

    border-bottom:
        1px solid rgba(32, 32, 32, .12);
}


.account-data-row:last-child {
    border-bottom: 0;
}


.account-data-row > span {
    flex: 0 0 auto;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.account-data-row > strong {
    min-width: 0;

    font-size: 13px;
    font-weight: 950;

    text-align: right;

    overflow-wrap: anywhere;
}


.account-data-empty {
    color: var(--muted);

    font-weight: 700;
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.account-panel__footer {
    display: flex;
    align-items: center;

    min-height: 58px;

    padding-top: 18px;
    margin-top: auto;

    border-top:
        1px solid rgba(32, 32, 32, .14);
}


.account-coming-next {
    color: var(--muted);

    font-size: 10px;
    font-weight: 750;

    line-height: 1.5;
}


/* =========================================================
   ACCOUNT META
   ========================================================= */

.account-meta {
    margin-top: 22px;

    padding: 25px;

    background: var(--text);
    color: #fff;

    border: 2px solid var(--text);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.account-meta h2 {
    margin: 5px 0 22px;

    font-size: 30px;

    letter-spacing: -.04em;
}


.account-meta .section-kicker {
    color: #fff;
}


.account-meta__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.account-meta__grid > div {
    padding: 17px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: var(--radius-md);
}


.account-meta__grid span {
    display: block;

    margin-bottom: 6px;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
    text-transform: uppercase;

    opacity: .7;
}


.account-meta__grid strong {
    font-size: 14px;
    font-weight: 950;

    text-transform: uppercase;
}


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.account-bottom-actions {
    display: flex;

    margin-top: 22px;
}


/* =========================================================
   EDIT FORM
   ========================================================= */

.account-edit-page .account-header {
    margin-bottom: 28px;
}


.account-form {
    display: grid;

    gap: 18px;
}


.account-form__section {
    display: block;

    width: 100%;

    padding: 25px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    border-top:
        7px solid var(--lime);
}


.account-form__section--info {
    border-top-color: var(--cyan);
}


.account-form__section-header {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 24px;
}


.account-form__section-header > div {
    min-width: 0;
}


.account-form__number {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    background: var(--lime);

    border: var(--border);
    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}


.account-form__number--cyan {
    background: var(--cyan);
}


.account-form__section-header h2 {
    margin: 4px 0 7px;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -.04em;
}


.account-form__section-header p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.55;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.account-form__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.account-field {
    min-width: 0;
}


.account-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.account-field label span {
    color: var(--coral);
}


.account-field input,
.account-field select,
.account-field textarea {
    width: 100%;

    min-height: 50px;

    padding: 0 15px;

    background: #fff;
    color: var(--text);

    border: var(--border);
    border-radius: var(--radius-sm);

    outline: none;

    font: inherit;

    font-size: 13px;
    font-weight: 750;

    transition:
        box-shadow var(--transition),
        transform var(--transition);
}


.account-field textarea {
    min-height: 130px;

    padding-top: 14px;
    padding-bottom: 14px;

    resize: vertical;
}


.account-field input:focus,
.account-field select:focus,
.account-field textarea:focus {
    box-shadow: 4px 4px 0 var(--cyan);
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.account-form__actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    padding-top: 4px;
}


/* =========================================================
   ERRORS
   ========================================================= */

.account-form-errors ul {
    margin: 10px 0 0;
    padding-left: 20px;
}


.account-form-errors li + li {
    margin-top: 5px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .account-grid {
        grid-template-columns: 1fr;
    }


    .account-meta__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .account-page {
        padding-top: 25px;
        padding-bottom: 55px;
    }


    .account-header {
        flex-direction: column;
        align-items: stretch;

        gap: 20px;
    }


    .account-header h1 {
        font-size: 56px;
    }


    .account-header__actions {
        width: 100%;
    }


    .account-header__actions .button {
        width: 100%;

        min-height: 50px;

        justify-content: center;
    }


    .account-status {
        align-items: flex-start;

        padding: 20px;
    }


    .account-panel {
        padding: 20px;

        border-radius: 20px;
    }


    .account-form__section {
        padding: 21px;

        border-radius: 20px;
    }


    .account-form__grid {
        grid-template-columns: 1fr;
    }


    .account-form__actions {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .account-form__actions .button {
        width: 100%;

        min-height: 48px;

        justify-content: center;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .account-header h1 {
        font-size: 48px;
    }


    .account-status {
        flex-direction: column;
    }


    .account-status__badge {
        align-self: flex-start;
    }


    .account-data-row {
        flex-direction: column;
        align-items: flex-start;

        gap: 7px;
    }


    .account-data-row > strong {
        text-align: left;
    }


    .account-meta__grid {
        grid-template-columns: 1fr;
    }


    .account-form__section-header {
        flex-direction: column;
    }


    .account-form__actions {
        grid-template-columns: 1fr;
    }


    .account-bottom-actions .button {
        width: 100%;

        justify-content: center;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 10.2 — PREFERENCES
   ========================================================= */


/* =========================================================
   LANGUAGE OPTIONS
   ========================================================= */

.preferences-language-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}


.preference-option {
    position: relative;

    display: block;

    cursor: pointer;
}


.preference-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.preference-option__content {
    min-height: 100px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    padding: 16px;

    background: #fff;

    border: var(--border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


.preference-option:hover
.preference-option__content {
    transform: translateY(-2px);

    box-shadow: 4px 4px 0 var(--text);
}


.preference-option input:checked
+ .preference-option__content {
    background: var(--lime);

    box-shadow: 4px 4px 0 var(--text);
}


.preference-option input:focus-visible
+ .preference-option__content {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}


.preference-option__content strong {
    font-size: 15px;
    font-weight: 950;

    letter-spacing: -.02em;
}


.preference-option__content small {
    display: inline-flex;

    min-width: 32px;
    min-height: 25px;

    align-items: center;
    justify-content: center;

    padding: 3px 8px;

    background: var(--text);
    color: #fff;

    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .08em;
}


/* =========================================================
   DEFAULTS
   ========================================================= */

.preferences-defaults {
    border-top-color: var(--cyan);
}


.account-field__help {
    display: block;

    margin-top: 8px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    line-height: 1.45;
}


/* =========================================================
   COMMISSION INPUT
   ========================================================= */

.preference-commission-input {
    position: relative;
}


.preference-commission-input input {
    padding-right: 50px;
}


.preference-commission-input > span {
    position: absolute;

    top: 50%;
    right: 16px;

    transform: translateY(-50%);

    font-size: 14px;
    font-weight: 950;

    pointer-events: none;
}


/* =========================================================
   HISTORICAL DATA NOTE
   ========================================================= */

.preference-history-note {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 24px;

    background: var(--text);
    color: #fff;

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.preference-history-note__icon {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    background: var(--coral);
    color: var(--text);

    border: 2px solid #fff;
    border-radius: 50%;

    font-size: 20px;
    font-weight: 950;
}


.preference-history-note .section-kicker {
    color: #fff;

    opacity: .7;
}


.preference-history-note h2 {
    margin: 5px 0 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 950;

    line-height: 1.05;

    letter-spacing: -.035em;
}


.preference-history-note p {
    max-width: 760px;

    margin: 0;

    color: rgba(255, 255, 255, .76);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .preferences-language-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .preferences-language-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .preference-option__content {
        min-height: 90px;
    }


    .preference-history-note {
        padding: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .preferences-language-grid {
        grid-template-columns: 1fr;
    }


    .preference-option__content {
        min-height: 76px;

        flex-direction: row;
        align-items: center;
    }


    .preference-history-note {
        flex-direction: column;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 10.3 — PASSWORD & SECURITY
   ========================================================= */


/* =========================================================
   ACCOUNT SECURITY CARD
   ========================================================= */

.account-security-card {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 20px;

    margin-top: 22px;
    padding: 24px;

    background: var(--lime);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.account-security-card__icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 20px;
    font-weight: 950;
}


.account-security-card__content {
    min-width: 0;
}


.account-security-card__content h2 {
    margin: 4px 0 7px;

    font-size: 24px;
    line-height: 1;

    letter-spacing: -.035em;
}


.account-security-card__content p {
    max-width: 620px;

    margin: 0;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.5;
}


.account-security-card__action {
    flex: 0 0 auto;
}


/* =========================================================
   PASSWORD FORM
   ========================================================= */

.password-form__section {
    border-top-color: var(--lime);
}


.password-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.password-fields
.account-field:first-child {
    grid-column: 1 / -1;

    max-width: 600px;
}


.password-divider {
    grid-column: 1 / -1;

    height: 1px;

    margin: 2px 0 4px;

    background:
        rgba(32, 32, 32, .14);
}


/* =========================================================
   SECURITY NOTE
   ========================================================= */

.password-security-note {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 24px;

    background: var(--cyan);
    color: var(--text);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.password-security-note__icon {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 19px;
    font-weight: 950;
}


.password-security-note h2 {
    margin: 5px 0 8px;

    font-size: 22px;
    font-weight: 950;

    line-height: 1.05;

    letter-spacing: -.035em;
}


.password-security-note p {
    max-width: 720px;

    margin: 0;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .account-security-card {
        grid-template-columns:
            auto minmax(0, 1fr);
    }


    .account-security-card__action {
        grid-column: 1 / -1;

        width: 100%;
    }


    .account-security-card__action .button {
        width: 100%;

        justify-content: center;
    }


    .password-fields {
        grid-template-columns: 1fr;
    }


    .password-fields
    .account-field:first-child {
        grid-column: auto;

        max-width: none;
    }


    .password-divider {
        grid-column: auto;
    }

}


@media (max-width: 520px) {

    .account-security-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 20px;
    }


    .password-security-note {
        flex-direction: column;

        padding: 20px;
    }

}

/* =========================================================
   FAIRPILOT
   TRIAL EXPIRED
   ========================================================= */

.trial-expired-page {
    min-height: calc(100vh - var(--header-height));
    padding: 42px 0 80px;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.trial-expired-card {
    position: relative;

    max-width: 920px;
    margin: 0 auto;

    padding: 42px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);

    overflow: hidden;
}


/*
 * Lime accent at the top of the card
 */

.trial-expired-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 10px;

    background: var(--lime);

    border-bottom: 2px solid var(--text);
}


/* =========================================================
   STATUS
   ========================================================= */

.trial-expired-card__status {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 34px;
}


.trial-expired-card__icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    background: var(--lime);
    color: var(--text);

    border: var(--border);
    border-radius: 50%;

    font-size: 18px;
    font-weight: 950;

    box-shadow: 3px 3px 0 var(--text);
}


.trial-expired-card__badge {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 7px 14px;

    background: var(--coral);
    color: var(--text);

    border: var(--border);
    border-radius: var(--radius-pill);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.trial-expired-card > .section-kicker {
    display: block;

    margin-bottom: 9px;
}


.trial-expired-card h1 {
    max-width: 720px;

    margin: 0 0 18px;

    font-size: clamp(44px, 6vw, 72px);
    font-weight: 950;

    line-height: .95;

    letter-spacing: -.055em;
}


.trial-expired-card__lead {
    max-width: 700px;

    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 650;

    line-height: 1.6;
}


.trial-expired-card__date {
    display: inline-flex;

    gap: 5px;

    margin: 15px 0 0;

    color: var(--muted);

    font-size: 10px;
    font-weight: 750;
}


/* =========================================================
   PRICE
   ========================================================= */

.trial-expired-price {
    display: flex;
    align-items: baseline;

    gap: 10px;

    margin: 32px 0 24px;
}


.trial-expired-price__value {
    font-size: clamp(44px, 6vw, 66px);
    font-weight: 950;

    line-height: .9;

    letter-spacing: -.055em;
}


.trial-expired-price__period {
    color: var(--muted);

    font-size: 12px;
    font-weight: 850;
}


/* =========================================================
   DATA SAFE
   ========================================================= */

.trial-expired-data {
    display: flex;
    align-items: center;

    gap: 16px;

    padding: 20px 22px;

    margin-bottom: 22px;

    background: var(--cyan);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.trial-expired-data__icon {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 18px;
    font-weight: 950;
}


.trial-expired-data strong {
    display: block;

    margin-bottom: 4px;

    font-size: 15px;
    font-weight: 950;
}


.trial-expired-data p {
    margin: 0;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   SUBSCRIPTION
   ========================================================= */

.trial-expired-subscription {
    padding: 25px;

    margin-top: 24px;

    background: var(--text);
    color: #fff;

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.trial-expired-subscription .section-kicker {
    color: var(--lime);
}


.trial-expired-subscription h2 {
    margin: 7px 0 10px;

    color: #fff;

    font-size: 28px;
    font-weight: 950;

    line-height: 1;

    letter-spacing: -.04em;
}


.trial-expired-subscription p {
    max-width: 680px;

    margin: 0;

    color: rgba(255, 255, 255, .75);

    font-size: 11px;
    font-weight: 650;

    line-height: 1.55;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.trial-expired-card__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 26px;
}


.trial-expired-card__actions .button {
    min-width: 190px;

    justify-content: center;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.trial-expired-card__logout {
    margin-top: 25px;
    padding-top: 20px;

    border-top:
        1px solid rgba(32, 32, 32, .14);
}


.trial-expired-card__logout a {
    display: inline-flex;

    color: var(--muted);

    font-size: 10px;
    font-weight: 850;

    text-decoration: none;

    transition:
        color var(--transition);
}


.trial-expired-card__logout a:hover {
    color: var(--coral);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .trial-expired-card {
        max-width: 760px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .trial-expired-page {
        padding: 25px 0 55px;
    }


    .trial-expired-card {
        padding: 32px 22px 25px;

        border-radius: 24px;

        box-shadow: 5px 5px 0 var(--text);
    }


    .trial-expired-card__status {
        margin-bottom: 28px;
    }


    .trial-expired-card__icon {
        width: 52px;
        height: 52px;
    }


    .trial-expired-card h1 {
        font-size: 48px;
    }


    .trial-expired-card__lead {
        font-size: 13px;
    }


    .trial-expired-price {
        margin-top: 27px;
    }


    .trial-expired-price__value {
        font-size: 50px;
    }


    .trial-expired-data {
        align-items: flex-start;

        padding: 18px;
    }


    .trial-expired-subscription {
        padding: 21px;
    }


    .trial-expired-card__actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .trial-expired-card__actions .button {
        width: 100%;
        min-width: 0;

        min-height: 50px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .trial-expired-card {
        padding-left: 18px;
        padding-right: 18px;
    }


    .trial-expired-card__status {
        align-items: flex-start;
    }


    .trial-expired-card h1 {
        font-size: 42px;
    }


    .trial-expired-price {
        flex-direction: column;

        gap: 7px;
    }


    .trial-expired-data {
        flex-direction: column;
    }


    .trial-expired-subscription h2 {
        font-size: 24px;
    }

}

/* =========================================================
   FAIRPILOT — STRIPE TEST
   ========================================================= */

.stripe-test-page {
    min-height: calc(100vh - var(--header-height));
    padding: 42px 0 80px;
}

.stripe-test-card {
    max-width: 850px;
    margin: 0 auto;
    padding: 38px;
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.stripe-test-card h1 {
    margin: 8px 0 12px;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.055em;
}

.stripe-test-card__intro {
    max-width: 620px;
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.6;
}

.stripe-test-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stripe-test-status--success {
    background: var(--lime);
}

.stripe-test-status--error {
    background: var(--coral);
}

.stripe-test-status__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--text);
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 950;
}

.stripe-test-status strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 950;
}

.stripe-test-status p {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.stripe-test-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
}

.stripe-test-data > div {
    padding: 18px;
    background: var(--bg);
    border: var(--border);
    border-radius: var(--radius-md);
}

.stripe-test-data span,
.stripe-test-price-id span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
}

.stripe-test-data strong {
    font-size: 15px;
    font-weight: 950;
}

.stripe-test-price-id {
    margin-top: 14px;
    padding: 18px;
    background: var(--cyan);
    border: var(--border);
    border-radius: var(--radius-md);
}

.stripe-test-price-id code {
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 800;
}

.stripe-test-error {
    margin-top: 16px;
    padding: 18px;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius-md);
}

.stripe-test-error strong,
.stripe-test-error code {
    display: block;
}

.stripe-test-error code {
    margin-top: 8px;
    overflow-wrap: anywhere;
    font-size: 11px;
}

.stripe-test-warning {
    margin-top: 22px;
    padding: 20px;
    background: var(--text);
    color: #fff;
    border: var(--border);
    border-radius: var(--radius-lg);
}

.stripe-test-warning strong {
    color: var(--lime);
    font-size: 13px;
    font-weight: 950;
}

.stripe-test-warning p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    line-height: 1.55;
}

.stripe-test-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

@media (max-width: 760px) {

    .stripe-test-page {
        padding: 25px 0 55px;
    }

    .stripe-test-card {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .stripe-test-data {
        grid-template-columns: 1fr 1fr;
    }

    .stripe-test-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .stripe-test-card__actions .button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    .stripe-test-data {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FAIRPILOT — STRIPE CHECKOUT
   PHASE 11.2
   ========================================================= */

.trial-expired-checkout {
    margin-top: 22px;
}

.trial-expired-checkout__button {
    width: 100%;
    justify-content: center;
}

.trial-expired-checkout__note {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .65);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}


/* =========================================================
   SUBSCRIPTION RESULT
   ========================================================= */

.subscription-result-page {
    min-height: calc(100vh - var(--header-height));
    padding: 48px 0 80px;
}

.subscription-result-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 44px;
    overflow: hidden;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);
}

.subscription-result-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 10px;

    background: var(--lime);
}

.subscription-result-icon {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    margin-bottom: 24px;

    background: var(--lime);
    color: var(--text);

    border: var(--border);
    border-radius: 50%;

    font-size: 25px;
    font-weight: 950;

    box-shadow: var(--shadow-sm);
}

.subscription-result-icon--cancel {
    background: var(--coral);
}

.subscription-result-card h1 {
    margin: 10px 0 16px;

    font-size: clamp(
        40px,
        6vw,
        64px
    );

    line-height: .96;
    letter-spacing: -.05em;
    font-weight: 950;
}

.subscription-result-lead {
    max-width: 560px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
    font-weight: 650;
}

.subscription-result-info {
    margin-top: 24px;
    padding: 18px 20px;

    background: var(--cyan);

    border: var(--border);
    border-radius: var(--radius-md);
}

.subscription-result-info span {
    display: block;

    margin-bottom: 5px;

    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.subscription-result-info strong {
    font-size: 13px;
    font-weight: 900;

    overflow-wrap: anywhere;
}

.subscription-result-processing {
    margin-top: 18px;
    padding: 22px;

    background: var(--text);
    color: #fff;

    border: var(--border);
    border-radius: var(--radius-lg);
}

.subscription-result-processing strong {
    display: block;

    color: var(--lime);

    font-size: 14px;
    font-weight: 950;
}

.subscription-result-processing p {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, .76);

    font-size: 11px;
    line-height: 1.6;
}

.subscription-result-actions {
    display: flex;
    gap: 12px;

    margin-top: 26px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .subscription-result-page {
        padding: 28px 0 60px;
    }

    .subscription-result-card {
        padding: 30px 22px;

        border-radius: 26px;
    }

    .subscription-result-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .subscription-result-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   ACCOUNT — BILLING STATUS
   ========================================================= */

.account-billing-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;

    margin-top: 13px;
}

.account-subscription-status {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 6px 11px;

    border: var(--border);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.account-subscription-status--active {
    background: var(--lime);
    color: var(--text);
}

.account-subscription-status--warning {
    background: var(--coral);
    color: var(--text);
}

.account-subscription-status--inactive {
    background: #fff;
    color: var(--text);
}

.account-subscription-status--trial {
    background: var(--surface);
    color: var(--text);
}

.account-billing-summary__plan,
.account-billing-summary__date {
    font-size: 9px;
    font-weight: 800;
}

.account-billing-summary__date {
    color: var(--muted);
}

@media (max-width: 760px) {

    .account-billing-summary {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   FAIRPILOT — ACCOUNT INDEX
   CONSOLIDATED DESIGN
   ========================================================= */

.account-page {
    padding: 30px 0 80px;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.account-page .account-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 34px;
}

.account-page .account-header > div:first-child {
    max-width: 760px;
}

.account-page .account-header h1 {
    margin: 8px 0 8px;

    font-size: clamp(58px, 8vw, 92px);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 950;
}

.account-page .account-header p {
    max-width: 620px;

    margin: 0;

    color: var(--text);

    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

.account-page .account-header__actions {
    flex: 0 0 auto;
    padding-bottom: 2px;
}


/* =========================================================
   PROFILE CARD
   ========================================================= */

.account-profile-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;

    margin-bottom: 18px;
    padding: 26px 28px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.account-profile-card__avatar {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    background: var(--lime);
    color: var(--text);

    border: var(--border);
    border-radius: 50%;

    font-size: 25px;
    font-weight: 950;

    box-shadow: var(--shadow-sm);
}

.account-profile-card__identity {
    min-width: 0;
}

.account-profile-card__identity h2 {
    margin: 5px 0 4px;

    font-size: 28px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 950;
}

.account-profile-card__identity p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    overflow-wrap: anywhere;
}


/* =========================================================
   MAIN ACCOUNT CARDS
   ========================================================= */

.account-sections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 18px;
}

.account-section-card {
    position: relative;

    min-height: 265px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 26px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.account-section-card:nth-child(1) {
    border-top: 8px solid var(--lime);
}

.account-section-card:nth-child(2) {
    border-top: 8px solid var(--cyan);
}

.account-section-card:nth-child(3) {
    border-top: 8px solid var(--coral);
}

.account-section-card__number {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 950;
}

.account-section-card h2 {
    margin: 7px 0 10px;

    font-size: 25px;
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 950;
}

.account-section-card p {
    max-width: 320px;

    margin: 0 0 24px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
}

.account-section-card .button {
    margin-top: auto;
}


/* =========================================================
   BILLING — PHASE 11.5
   ========================================================= */

.account-billing-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;

    margin-bottom: 18px;
    padding: 27px 28px;

    background: var(--lime);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);
}

.account-billing-card__icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 22px;
    font-weight: 950;
}

.account-billing-card__content {
    min-width: 0;
}

.account-billing-card__content h2 {
    margin: 5px 0 7px;

    font-size: 27px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 950;
}

.account-billing-card__content > p {
    max-width: 600px;

    margin: 0;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}


/* =========================================================
   BILLING STATUS
   ========================================================= */

.account-billing-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-top: 13px;
}

.account-subscription-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 5px 11px;

    background: #fff;

    border: 2px solid var(--text);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.account-subscription-status--active {
    background: var(--text);
    color: var(--lime);
}

.account-subscription-status--warning {
    background: var(--coral);
    color: var(--text);
}

.account-subscription-status--inactive {
    background: #fff;
    color: var(--text);
}

.account-subscription-status--trial {
    background: var(--cyan);
    color: var(--text);
}

.account-billing-summary__plan,
.account-billing-summary__date {
    font-size: 9px;
    font-weight: 850;
}

.account-billing-summary__date {
    color: rgba(32, 32, 32, .65);
}


/* =========================================================
   ACCOUNT INFORMATION
   ========================================================= */

.account-information-card {
    margin-bottom: 18px;
    padding: 30px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.account-information-card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

.account-information-card__header h2 {
    margin: 5px 0 0;

    font-size: 28px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 950;
}

.account-information-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 2px solid var(--text);
    border-left: 2px solid var(--text);
}

.account-information-item {
    min-width: 0;

    padding: 20px;

    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
}

.account-information-item span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .08em;
}

.account-information-item strong {
    display: block;

    font-size: 12px;
    font-weight: 900;

    overflow-wrap: anywhere;
}


/* =========================================================
   SECURITY SUMMARY
   ========================================================= */

.account-security-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;

    padding: 24px 28px;

    background: var(--cyan);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.account-security-summary__icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 950;
}

.account-security-summary h2 {
    margin: 4px 0 5px;

    font-size: 22px;
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 950;
}

.account-security-summary p {
    max-width: 620px;

    margin: 0;

    font-size: 10px;
    line-height: 1.5;
    font-weight: 700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .account-sections-grid {
        grid-template-columns: 1fr;
    }

    .account-section-card {
        min-height: 220px;
    }

    .account-information-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .account-page {
        padding: 24px 0 55px;
    }

    .account-page .account-header {
        align-items: flex-start;
        flex-direction: column;

        margin-bottom: 25px;
    }

    .account-page .account-header h1 {
        font-size: clamp(54px, 17vw, 78px);
    }

    .account-page .account-header__actions,
    .account-page .account-header__actions .button {
        width: 100%;
    }

    .account-page .account-header__actions .button {
        justify-content: center;
    }


    /* PROFILE */

    .account-profile-card {
        grid-template-columns: auto 1fr;

        padding: 22px;
    }

    .account-profile-card__action {
        grid-column: 1 / -1;

        width: 100%;
    }

    .account-profile-card__action .button {
        width: 100%;
        justify-content: center;
    }


    /* ACCOUNT CARDS */

    .account-section-card {
        min-height: auto;

        padding: 22px;
    }


    /* BILLING */

    .account-billing-card {
        grid-template-columns: auto 1fr;

        padding: 22px;
    }

    .account-billing-card__action {
        grid-column: 1 / -1;

        width: 100%;
    }

    .account-billing-card__action .button {
        width: 100%;
        justify-content: center;
    }

    .account-billing-summary {
        align-items: flex-start;
        flex-direction: column;
    }


    /* INFORMATION */

    .account-information-card {
        padding: 22px;
    }

    .account-information-grid {
        grid-template-columns: 1fr;
    }


    /* SECURITY */

    .account-security-summary {
        grid-template-columns: auto 1fr;

        padding: 22px;
    }

    .account-security-summary__action {
        grid-column: 1 / -1;

        width: 100%;
    }

    .account-security-summary__action .button {
        width: 100%;
        justify-content: center;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .account-profile-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .account-billing-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .account-security-summary {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

}

/* =========================================================
   FAIRPILOT — ACCOUNT SUBSCRIPTION
   PHASE 11.5 — FINAL VISUAL FIX
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.subscription-page {
    padding: 30px 0 80px;
}


/* =========================================================
   HEADER
   ========================================================= */

.subscription-page .account-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;

    margin-bottom: 34px;
}

.subscription-page .account-header > div:first-child {
    max-width: 760px;
}

.subscription-page .account-header h1 {
    margin: 8px 0 8px;

    font-size: clamp(58px, 8vw, 92px);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 950;
}

.subscription-page .account-header p {
    margin: 0;

    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

.subscription-page .account-header__actions {
    flex: 0 0 auto;
}


/* =========================================================
   MAIN SUBSCRIPTION CARD
   ========================================================= */

.subscription-management-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 18px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   DARK PLAN HEADER
   ========================================================= */

.subscription-management-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 30px 32px;

    background: var(--text);
    color: #fff;
}

.subscription-management-card__header .section-kicker {
    color: var(--lime);
}

.subscription-management-card__header h2 {
    margin: 7px 0 0;

    color: #fff;

    font-size: 48px;
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 950;
}

.subscription-management-card__header h2 small {
    color: rgba(255, 255, 255, .65);

    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.subscription-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 8px 15px;

    border: 2px solid #fff;
    border-radius: var(--radius-pill);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .08em;
    text-transform: uppercase;

    white-space: nowrap;
}

.subscription-status--active {
    background: var(--lime);
    color: var(--text);
}

.subscription-status--warning {
    background: var(--coral);
    color: var(--text);
}

.subscription-status--inactive {
    background: #fff;
    color: var(--text);
}

.subscription-status--trial {
    background: var(--cyan);
    color: var(--text);
}


/* =========================================================
   SUBSCRIPTION INFORMATION GRID
   ========================================================= */

.subscription-management-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    padding: 8px 30px 26px;
}

.subscription-management-grid > div {
    min-width: 0;

    padding: 22px 18px 22px 0;

    border-bottom:
        1px solid rgba(32, 32, 32, .14);
}

.subscription-management-grid > div:nth-child(3n + 2),
.subscription-management-grid > div:nth-child(3n + 3) {
    padding-left: 20px;
}

.subscription-management-grid span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.subscription-management-grid strong {
    display: block;

    color: var(--text);

    font-size: 14px;
    line-height: 1.4;
    font-weight: 900;

    overflow-wrap: anywhere;
}


/* =========================================================
   MANAGE BILLING
   ========================================================= */

.subscription-management-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin: 0 30px 30px;
    padding: 24px 26px;

    background: var(--lime);

    border: var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.subscription-management-actions > div {
    max-width: 570px;
}

.subscription-management-actions strong {
    display: block;

    margin-bottom: 6px;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 950;
}

.subscription-management-actions p {
    margin: 0;

    font-size: 11px;
    line-height: 1.55;
    font-weight: 700;
}

.subscription-management-actions form {
    flex: 0 0 auto;
}


/* =========================================================
   STRIPE SECURITY CARD
   ========================================================= */

.subscription-security-card {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 25px 28px;

    background: var(--cyan);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.subscription-security-card__icon {
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 18px;
    font-weight: 950;
}

.subscription-security-card > div:last-child {
    min-width: 0;
}

.subscription-security-card h2 {
    margin: 5px 0 7px;

    font-size: 24px;
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 950;
}

.subscription-security-card p {
    max-width: 680px;

    margin: 0;

    font-size: 11px;
    line-height: 1.55;
    font-weight: 700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .subscription-management-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .subscription-management-grid > div,
    .subscription-management-grid > div:nth-child(3n + 2),
    .subscription-management-grid > div:nth-child(3n + 3) {
        padding-left: 0;
        padding-right: 18px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .subscription-page {
        padding: 24px 0 55px;
    }


    /* HEADER */

    .subscription-page .account-header {
        flex-direction: column;
        align-items: flex-start;

        margin-bottom: 25px;
    }

    .subscription-page .account-header h1 {
        font-size: clamp(
            50px,
            16vw,
            76px
        );
    }

    .subscription-page
    .account-header__actions {
        width: 100%;
    }

    .subscription-page
    .account-header__actions
    .button {
        width: 100%;
        justify-content: center;
    }


    /* PLAN */

    .subscription-management-card {
        border-radius: 24px;
    }

    .subscription-management-card__header {
        flex-direction: column;
        align-items: flex-start;

        padding: 25px 22px;
    }

    .subscription-management-card__header h2 {
        font-size: 40px;
    }


    /* INFORMATION */

    .subscription-management-grid {
        grid-template-columns: 1fr;

        padding: 6px 22px 22px;
    }

    .subscription-management-grid > div,
    .subscription-management-grid > div:nth-child(3n + 2),
    .subscription-management-grid > div:nth-child(3n + 3) {
        padding: 17px 0;
    }


    /* ACTION */

    .subscription-management-actions {
        flex-direction: column;
        align-items: stretch;

        margin: 0 20px 20px;
        padding: 21px;
    }

    .subscription-management-actions form {
        width: 100%;
    }

    .subscription-management-actions .button {
        width: 100%;
        justify-content: center;
    }


    /* STRIPE */

    .subscription-security-card {
        align-items: flex-start;

        padding: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .subscription-security-card {
        flex-direction: column;
    }

}

/* =========================================================
   FAIRPILOT
   PHASE 11.6 — LEGAL PAGES
   ========================================================= */

.legal-page {
    padding: 38px 0 90px;
}

.legal-container {
    max-width: 1220px;
}


/* HERO */

.legal-hero {
    padding: 28px 0 45px;

    border-bottom: 2px solid var(--text);
}

.legal-hero h1 {
    max-width: 1000px;

    margin: 10px 0 15px;

    font-size: clamp(58px, 8vw, 94px);
    line-height: .88;

    font-weight: 950;
    letter-spacing: -.065em;
}

.legal-hero p {
    max-width: 680px;

    margin: 0 0 18px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.legal-updated {
    display: inline-flex;

    padding: 8px 13px;

    background: var(--lime);

    border: var(--border);
    border-radius: var(--radius-pill);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .06em;
    text-transform: uppercase;
}


/* CONTENT */

.legal-content--single {
    max-width: 920px;

    margin: 0 auto;
    padding-top: 28px;
}

.legal-content section {
    position: relative;

    margin-bottom: 18px;
    padding: 30px 32px;

    background: var(--surface);

    border: var(--border);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.legal-content section:nth-child(3n + 1) {
    border-top: 7px solid var(--lime);
}

.legal-content section:nth-child(3n + 2) {
    border-top: 7px solid var(--cyan);
}

.legal-content section:nth-child(3n + 3) {
    border-top: 7px solid var(--coral);
}

.legal-number {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    background: var(--text);
    color: #fff;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 950;
}

.legal-content h2 {
    margin: 0 0 16px;

    font-size: clamp(24px, 3vw, 34px);
    line-height: 1;

    font-weight: 950;
    letter-spacing: -.04em;
}

.legal-content p {
    max-width: 790px;

    margin: 0 0 15px;

    font-size: 13px;
    line-height: 1.75;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content a {
    color: var(--text);

    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}


/* PRICE */

.legal-price-card {
    display: inline-flex;
    flex-direction: column;

    min-width: 250px;

    margin: 2px 0 22px;
    padding: 22px 25px;

    background: var(--text);
    color: #fff;

    border-radius: var(--radius-lg);
}

.legal-price-card span {
    margin-bottom: 10px;

    color: var(--lime);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .1em;
}

.legal-price-card strong {
    font-size: 46px;
    line-height: 1;

    font-weight: 950;
    letter-spacing: -.05em;
}

.legal-price-card small {
    margin-top: 5px;

    color: rgba(255,255,255,.7);

    font-size: 10px;
    font-weight: 750;
}


/* MOBILE */

@media (max-width: 760px) {

    .legal-page {
        padding: 24px 0 60px;
    }

    .legal-hero {
        padding: 18px 0 30px;
    }

    .legal-hero h1 {
        font-size: clamp(
            48px,
            15vw,
            72px
        );
    }

    .legal-content--single {
        padding-top: 20px;
    }

    .legal-content section {
        padding: 23px 21px;

        border-radius: 22px;
    }

    .legal-content h2 {
        font-size: 25px;
    }

    .legal-content p {
        font-size: 12px;
    }

    .legal-price-card {
        width: 100%;
        min-width: 0;
    }

}