/* Home of the Federación Andaluza de Tenis de Mesa (Stitch design "Andalusian Table Tennis Federation Modern Institutional
   System"). Template: application/third_party/fatm/views/landing/home-portal.php. Everything is scoped by the "fatm-" prefix.
   The public header and footer (layouts/menu-not-logged.php and layouts/footer-custom.php) are ".fatm-chrome": they also show
   on every page seen without logging in, whose own styles must not reach them. */

.fatm-page,
.fatm-chrome {
    --fatm-primary: #005123;
    --fatm-green: #1b6b36;
    --fatm-green-light: #23783b;
    --fatm-green-dark: #14532d;
    --fatm-mint: #9ae9a7;
    --fatm-mint-bright: #89d897;
    --fatm-surface: #f8f9ff;
    --fatm-surface-low: #eff4ff;
    --fatm-surface-container: #e5eeff;
    --fatm-surface-high: #dce9ff;
    --fatm-canvas: #f8fafc;
    --fatm-subtle: #f1f5f9;
    --fatm-card: #ffffff;
    --fatm-border: #e2e8f0;
    --fatm-border-strong: #cbd5e1;
    --fatm-text: #0b1c30;
    --fatm-text-soft: #404940;
    --fatm-outline: #707a6f;
    --fatm-slate: #0f172a;
    --fatm-inverse: #213145;
    --fatm-blue: #003da6;
    --fatm-blue-bg: #dbe1ff;
    --fatm-live: #dc2626;
    --fatm-live-bg: #fee2e2;
    --fatm-live-border: #fecaca;
    --fatm-open: #16a34a;
    --fatm-open-bg: #dcfce7;
    --fatm-open-border: #bbf7d0;
    --fatm-upcoming: #b45309;
    --fatm-upcoming-bg: #fef3c7;
    --fatm-upcoming-border: #fde68a;
    --fatm-finished: #475569;
    --fatm-radius: .5rem;
    --fatm-radius-card: 1rem;
    --fatm-shadow: 0 1px 3px 0 rgba(15, 23, 42, .04), 0 1px 2px -1px rgba(15, 23, 42, .04);
    --fatm-shadow-hover: 0 10px 15px -3px rgba(27, 107, 54, .06), 0 4px 6px -4px rgba(15, 23, 42, .04);
    --fatm-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    scroll-behavior: smooth;
}

.fatm-page *, .fatm-page *::before, .fatm-page *::after,
.fatm-chrome, .fatm-chrome *, .fatm-chrome *::before, .fatm-chrome *::after { box-sizing: border-box; }
.fatm-page body {
    margin: 0;
    background: var(--fatm-surface);
    color: var(--fatm-text);
    font: 400 .9375rem/1.6 var(--fatm-font);
    -webkit-font-smoothing: antialiased;
}
.fatm-chrome {
    color: var(--fatm-text);
    font: 400 .9375rem/1.6 var(--fatm-font);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
:where(.fatm-page, .fatm-chrome) a { color: inherit; text-decoration: none; }
:where(.fatm-page, .fatm-chrome) img { max-width: 100%; display: block; }
:where(.fatm-page, .fatm-chrome) ul { margin: 0; padding: 0; list-style: none; }
:where(.fatm-page, .fatm-chrome) :is(h1, h2, h3, h4, p, dl, dd) { margin: 0; }
.fatm-chrome :where(h1, h2, h3, h4, p, ul, li) { margin: 0; padding: 0; }
.fatm-chrome :where(h1, h2, h3, h4, p, li) { color: inherit; }
.fatm-chrome :where(ul, li) { list-style: none; }
.fatm-chrome :where(img) { border: 0; }
:is(.fatm-page, .fatm-chrome) [hidden] { display: none !important; }
:is(.fatm-page, .fatm-chrome) :focus-visible { outline: 3px solid rgba(27, 107, 54, .4); outline-offset: 2px; }

:is(.fatm-page, .fatm-chrome) .material-symbols-outlined {
    font-size: 1.125rem;
    line-height: 1;
    vertical-align: middle;
    flex: none;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.fatm-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--fatm-primary); color: #fff; padding: .5rem 1rem; }
.fatm-skip:focus { left: 0; }
.fatm-container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .fatm-container { padding: 0 2rem; } }

/* Typography */
.fatm-display { font-size: 1.875rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--fatm-text); }
.fatm-highlight { display: block; color: var(--fatm-primary); }
.fatm-lead { font-size: 1.125rem; line-height: 1.55; color: var(--fatm-text-soft); max-width: 42rem; }
.fatm-h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.fatm-h2--small { font-size: 1.375rem; }
.fatm-h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.fatm-h3--dark { color: var(--fatm-text); }
.fatm-h4 { font-size: 1rem; line-height: 1.375; font-weight: 700; }
@media (min-width: 1024px) {
    .fatm-display { font-size: 2.5rem; line-height: 1.2; letter-spacing: -.02em; }
    .fatm-h2 { font-size: 1.75rem; }
}
.fatm-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--fatm-primary); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fatm-eyebrow--open { color: var(--fatm-open); }
.fatm-empty { padding: 2rem; text-align: center; color: var(--fatm-text-soft); background: var(--fatm-card); border: 1px dashed var(--fatm-border-strong); border-radius: var(--fatm-radius-card); }
.fatm-center { display: flex; justify-content: center; padding-top: 1.5rem; }

/* Buttons, pills, tags, links */
.fatm-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--fatm-radius); cursor: pointer;
    font: 600 .875rem/1.4 var(--fatm-font); letter-spacing: .01em; text-align: center;
    transition: background-color .15s ease, color .15s ease;
}
.fatm-button--primary { background: var(--fatm-green); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.fatm-button--primary:hover { background: var(--fatm-green-light); }
.fatm-button--primary:active { background: var(--fatm-green-dark); }
.fatm-button--ghost { background: transparent; color: var(--fatm-text); }
.fatm-button--ghost:hover { background: var(--fatm-surface-high); color: var(--fatm-primary); }
.fatm-button--outline { background: var(--fatm-card); border-color: var(--fatm-border-strong); color: #1e293b; box-shadow: var(--fatm-shadow); }
.fatm-button--outline:hover { background: var(--fatm-subtle); }
.fatm-button--outline .material-symbols-outlined { color: var(--fatm-green); }
.fatm-button--block { width: 100%; }
.fatm-button--lg { padding: .75rem 1.5rem; border-radius: .75rem; font-weight: 700; }

.fatm-pill {
    display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; border: 1px solid transparent; border-radius: 9999px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4;
}
.fatm-pill .material-symbols-outlined { font-size: .875rem; }
.fatm-pill--live { background: var(--fatm-live-bg); border-color: var(--fatm-live-border); color: #b91c1c; }
.fatm-pill--open { background: var(--fatm-open-bg); border-color: var(--fatm-open-border); color: #15803d; }
.fatm-pill--upcoming { background: var(--fatm-upcoming-bg); border-color: var(--fatm-upcoming-border); color: var(--fatm-upcoming); }
.fatm-pill--finished { background: var(--fatm-subtle); border-color: var(--fatm-border); color: var(--fatm-finished); }
.fatm-pill--neutral { background: var(--fatm-surface-high); color: var(--fatm-text); }
.fatm-pill--blue { background: var(--fatm-blue-bg); color: var(--fatm-blue); }
.fatm-dot { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; flex: none; animation: fatm-pulse 1.6s ease-in-out infinite; }
@keyframes fatm-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fatm-dot { animation: none; } .fatm-page { scroll-behavior: auto; } }

.fatm-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .625rem; border-radius: .25rem; background: #dae2fd; color: #5c647a; font-size: .6875rem; font-weight: 700; }
.fatm-tag--green { background: rgba(0, 81, 35, .06); color: var(--fatm-primary); border-radius: var(--fatm-radius); font-size: .75rem; padding: .25rem .5rem; }
.fatm-tag .material-symbols-outlined { font-size: 1rem; }
.fatm-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--fatm-primary); font-size: .875rem; font-weight: 700; transition: color .15s ease, transform .15s ease; }
.fatm-link:hover { color: var(--fatm-green-light); }
.fatm-link--underline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-size: .75rem; }
.fatm-link--small { font-size: .75rem; gap: .125rem; }
.fatm-link .material-symbols-outlined { font-size: 1.125rem; }
.fatm-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; padding: .375rem .75rem; border-radius: 9999px; background: rgba(0, 81, 35, .1); color: var(--fatm-primary); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fatm-chip--light { background: rgba(255, 255, 255, .15); color: #fff; }

.fatm-card { background: var(--fatm-card); border-radius: var(--fatm-radius-card); box-shadow: var(--fatm-shadow); transition: box-shadow .15s ease; }
.fatm-card:hover { box-shadow: var(--fatm-shadow-hover); }

/* Header */
.fatm-header { background: rgba(248, 249, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 1px 8px rgba(0, 0, 0, .04); }
.fatm-page .fatm-header { position: sticky; top: 0; z-index: 50; }
.fatm-topbar { background: var(--fatm-primary); color: #fff; font-size: .75rem; font-weight: 600; }
.fatm-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .25rem; padding-bottom: .25rem; }
.fatm-topbar__group { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.fatm-topbar__portal { display: inline-flex; align-items: center; gap: .25rem; }
.fatm-topbar .material-symbols-outlined { font-size: 1rem; }
.fatm-topbar__support { display: none; color: #9ae9a7; font-weight: 400; }
.fatm-topbar__support::before { content: "|"; margin-right: 1rem; }
.fatm-topbar__season { display: inline-flex; align-items: center; gap: .5rem; color: #9ae9a7; font-size: .6875rem; white-space: nowrap; }
.fatm-topbar__season b { background: var(--fatm-green); color: #fff; border-radius: var(--fatm-radius); padding: .125rem .625rem; }
@media (min-width: 768px) { .fatm-topbar__support { display: inline; } }

.fatm-navbar { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fatm-brand { display: inline-flex; align-items: center; gap: .5rem; }
.fatm-brand img { height: 2.5rem; width: auto; object-fit: contain; }
.fatm-brand__text { display: flex; flex-direction: column; }
.fatm-brand__name { font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--fatm-primary); }
.fatm-brand__tagline { margin-top: .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fatm-text-soft); }
.fatm-brand--light .fatm-brand__name { color: #fff; }
.fatm-brand--light .fatm-brand__tagline { color: var(--fatm-mint-bright); }
.fatm-brand--light img { background: #fff; padding: .25rem; border-radius: .25rem; }
.fatm-navbar__toggle { display: inline-flex; padding: .5rem; border: 0; border-radius: var(--fatm-radius); background: var(--fatm-surface-low); color: var(--fatm-primary); cursor: pointer; }
.fatm-navbar__menu { display: none; width: 100%; flex-direction: column; gap: .75rem; padding-bottom: 1rem; }
.fatm-navbar__menu.fatm-is-open { display: flex; max-height: calc(100vh - 8rem); overflow-y: auto; }
.fatm-nav { display: flex; flex-direction: column; gap: .125rem; }
.fatm-nav__link { display: block; padding: .5rem .25rem; border-bottom: 2px solid transparent; color: var(--fatm-text-soft); font-size: .875rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; transition: color .15s ease; }
.fatm-nav__link:hover { color: var(--fatm-primary); }
.fatm-nav__link.fatm-is-current { color: var(--fatm-primary); border-bottom-color: var(--fatm-primary); }
.fatm-navbar__actions { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
@media (min-width: 1280px) {
    .fatm-navbar { flex-wrap: nowrap; }
    .fatm-navbar__toggle { display: none; }
    .fatm-navbar__menu, .fatm-navbar__menu.fatm-is-open { display: flex; width: auto; flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0; max-height: none; overflow: visible; }
    .fatm-nav { flex-direction: row; align-items: center; gap: 1.25rem; margin: 0 auto; }
    .fatm-nav__link { padding: .5rem 0; max-width: 8.5rem; white-space: normal; text-align: center; }
}

/* Last matchday bar */
.fatm-ticker { background: var(--fatm-surface-high); padding: .625rem 0; font-size: .75rem; font-weight: 600; }
.fatm-ticker__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.fatm-ticker__text { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.fatm-ticker__text strong { color: var(--fatm-primary); font-weight: 700; }
.fatm-ticker__detail { color: var(--fatm-text-soft); font-weight: 500; }
.fatm-ticker .fatm-pill--live { background: var(--fatm-live); border-color: var(--fatm-live); color: #fff; }

/* Hero and finder */
.fatm-hero { background: linear-gradient(to bottom, var(--fatm-surface-low), var(--fatm-surface) 60%); padding: 2rem 0 3rem; }
.fatm-hero__grid { display: grid; gap: 2rem; align-items: center; }
.fatm-hero__text { display: flex; flex-direction: column; gap: 1rem; }
.fatm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding-top: .5rem; }
.fatm-stats__item { display: flex; flex-direction: column-reverse; padding: 1rem; border-radius: .75rem; background: var(--fatm-card); box-shadow: var(--fatm-shadow); }
.fatm-stats dd { color: var(--fatm-primary); font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.fatm-stats dt { color: var(--fatm-text-soft); font-size: .75rem; font-weight: 500; line-height: 1.3; }
@media (min-width: 1024px) {
    .fatm-hero { padding-top: 2rem; }
    .fatm-hero__grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
    .fatm-hero__text { grid-column: span 7; }
    .fatm-finder { grid-column: span 5; }
    .fatm-stats dd { font-size: 1.75rem; }
}
.fatm-finder { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--fatm-card); box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .06); }
.fatm-finder__head { display: flex; align-items: center; gap: .75rem; }
.fatm-finder__head > div { flex: 1; min-width: 0; }
.fatm-finder__head p { color: var(--fatm-text-soft); font-size: .6875rem; font-weight: 700; letter-spacing: .02em; }
.fatm-finder__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--fatm-green); color: #fff; }
.fatm-finder__icon .material-symbols-outlined { font-size: 1.5rem; }
.fatm-finder__form { display: flex; flex-direction: column; gap: 1rem; }
.fatm-field { display: flex; flex-direction: column; gap: .375rem; }
.fatm-field__label { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; }
.fatm-field__label .material-symbols-outlined { color: var(--fatm-primary); font-size: 1rem; }
.fatm-field select {
    width: 100%; padding: .625rem .875rem; border: 1px solid var(--fatm-border-strong); border-radius: var(--fatm-radius); background: var(--fatm-surface-low);
    color: var(--fatm-text); font: 400 .9375rem/1.4 var(--fatm-font); cursor: pointer;
}
.fatm-field select:focus { outline: none; border-color: var(--fatm-green); box-shadow: 0 0 0 3px rgba(27, 107, 54, .15); }
.fatm-finder__actions { display: flex; align-items: center; gap: .75rem; padding-top: .5rem; }
.fatm-icon-button { display: inline-flex; align-items: center; justify-content: center; padding: .75rem; border-radius: var(--fatm-radius); background: var(--fatm-surface-low); color: var(--fatm-text-soft); transition: background-color .15s ease, color .15s ease; }
.fatm-icon-button:hover { background: var(--fatm-surface-container); color: var(--fatm-primary); }
.fatm-icon-button .material-symbols-outlined { font-size: 1.25rem; }

/* Pillars */
.fatm-pillars { display: grid; gap: 1.5rem; margin: -1rem auto 2.5rem; }
@media (min-width: 768px) { .fatm-pillars { grid-template-columns: repeat(3, 1fr); } }
.fatm-pillar { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; }
.fatm-pillar p { flex: 1; color: var(--fatm-text-soft); }
.fatm-pillar__top { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.fatm-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .75rem; background: rgba(0, 81, 35, .1); color: var(--fatm-primary); transition: background-color .15s ease, color .15s ease; }
.fatm-pillar__icon .material-symbols-outlined { font-size: 1.75rem; }
.fatm-pillar__icon--open { background: rgba(22, 163, 74, .15); color: var(--fatm-open); }
.fatm-pillar__icon--blue { background: var(--fatm-blue-bg); color: var(--fatm-blue); }
.fatm-pillar:hover .fatm-pillar__icon { background: var(--fatm-primary); color: #fff; }
.fatm-pillar:hover .fatm-pillar__icon--open { background: var(--fatm-open); }
.fatm-pillar:hover .fatm-pillar__icon--blue { background: var(--fatm-blue); }
.fatm-pillar:hover h2 { color: var(--fatm-primary); }

/* Sections */
.fatm-section { padding: 2.5rem 0; }
.fatm-section--tint { background: rgba(239, 244, 255, .6); }
.fatm-section--canvas { background: var(--fatm-canvas); }
.fatm-section__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.fatm-section__head > div:not(.fatm-filters) { display: flex; flex-direction: column; gap: .25rem; }
.fatm-section__text, .fatm-section__note { color: var(--fatm-text-soft); font-size: .8125rem; }
@media (min-width: 768px) { .fatm-section__head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } }

/* Events in play */
.fatm-filters { display: inline-flex; flex: none; max-width: 100%; flex-wrap: wrap; align-self: flex-start; gap: .5rem; padding: .375rem; border-radius: .75rem; background: var(--fatm-card); box-shadow: var(--fatm-shadow); }
.fatm-filters__chip { padding: .375rem .875rem; border: 0; border-radius: var(--fatm-radius); background: none; cursor: pointer; color: var(--fatm-text-soft); font: 600 .6875rem/1.4 var(--fatm-font); letter-spacing: .05em; transition: background-color .15s ease, color .15s ease; }
.fatm-filters__chip:hover { background: var(--fatm-surface-container); color: var(--fatm-text); }
.fatm-filters__chip[aria-pressed="true"] { background: var(--fatm-primary); color: #fff; font-weight: 700; }
@media (min-width: 768px) { .fatm-section__head > .fatm-filters { align-self: auto; } }
.fatm-events { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .fatm-events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fatm-events { grid-template-columns: repeat(4, 1fr); } }
.fatm-events > *, .fatm-registrations > * { min-width: 0; }
.fatm-event { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.fatm-event__body { display: flex; flex-direction: column; gap: .75rem; }
.fatm-event__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fatm-event__category { display: block; color: var(--fatm-primary); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fatm-event h3 a:hover { color: var(--fatm-primary); }
.fatm-event h3 { overflow-wrap: anywhere; }
.fatm-event__meta { display: flex; flex-direction: column; gap: .375rem; padding-top: .5rem; color: var(--fatm-text-soft); font-size: .8125rem; }
.fatm-event__meta li { display: flex; align-items: center; gap: .375rem; }
.fatm-event__meta .material-symbols-outlined { color: var(--fatm-outline); font-size: 1rem; }

/* Open registrations */
.fatm-registrations { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .fatm-registrations { grid-template-columns: repeat(2, 1fr); } }
.fatm-registration { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; padding: 1.5rem; }
.fatm-registration__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.fatm-registration__dates { color: var(--fatm-text-soft); font-size: .6875rem; font-weight: 600; }
.fatm-registration h3 { font-size: 1.25rem; }
.fatm-registration h3 a:hover { color: var(--fatm-primary); }
.fatm-registration__summary { margin-top: .25rem; color: var(--fatm-text-soft); font-size: .8125rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fatm-registration__meta { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--fatm-text-soft); font-size: .8125rem; }
.fatm-registration__meta li { display: inline-flex; align-items: center; gap: .25rem; }
.fatm-registration__meta .material-symbols-outlined { color: var(--fatm-primary); font-size: 1rem; }
.fatm-quota__text { display: flex; justify-content: space-between; gap: .5rem; font-size: .6875rem; font-weight: 600; }
.fatm-quota__text span { color: var(--fatm-text-soft); }
.fatm-quota__text b { color: var(--fatm-primary); font-weight: 700; }
.fatm-quota__bar { height: .5rem; margin-top: .375rem; border-radius: 9999px; background: var(--fatm-surface-container); overflow: hidden; }
.fatm-quota__bar div { height: 100%; border-radius: 9999px; background: var(--fatm-primary); }

/* Management area */
.fatm-management { display: grid; gap: 2rem; align-items: center; padding: 2rem; border-radius: 1.5rem; background: var(--fatm-card); box-shadow: var(--fatm-shadow); }
.fatm-management__intro { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.fatm-management__intro p { color: var(--fatm-text-soft); font-size: .8125rem; }
.fatm-management__intro > div { display: flex; flex-direction: column; gap: .25rem; }
.fatm-management__logo { display: inline-flex; padding: 1rem; border-radius: 1rem; background: var(--fatm-surface-low); box-shadow: inset 0 2px 4px rgba(15, 23, 42, .05); }
.fatm-management__logo img { height: 4rem; width: auto; object-fit: contain; }
.fatm-services { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fatm-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .fatm-management { grid-template-columns: repeat(12, 1fr); padding: 2.5rem; }
    .fatm-management__intro { grid-column: span 4; align-items: flex-start; text-align: left; }
    .fatm-services { grid-column: span 8; }
}
.fatm-service { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border-radius: .75rem; background: rgba(239, 244, 255, .7); transition: background-color .15s ease; }
.fatm-service:hover { background: var(--fatm-surface-low); }
.fatm-service__head { display: flex; align-items: center; gap: .75rem; }
.fatm-service p { flex: 1; color: var(--fatm-text-soft); font-size: .8125rem; line-height: 1.5; }
.fatm-service__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .5rem; color: #fff; }
.fatm-service__icon .material-symbols-outlined { font-size: 1.25rem; }
.fatm-service__icon--green { background: var(--fatm-primary); }
.fatm-service__icon--slate { background: #565e74; }
.fatm-service__icon--light { background: var(--fatm-green-light); }
.fatm-service__icon--dark { background: var(--fatm-inverse); color: #eaf1ff; }

/* App */
.fatm-app { background: linear-gradient(to right, var(--fatm-primary), var(--fatm-green-light), var(--fatm-primary)); color: #fff; padding: 2.5rem 0; }
.fatm-app__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; }
@media (min-width: 768px) { .fatm-app__inner { flex-direction: row; } }
.fatm-app__pitch { display: flex; flex-direction: column; gap: .75rem; max-width: 42rem; }
.fatm-display--app { color: #fff; }
.fatm-lead--app { color: var(--fatm-mint); }
.fatm-app__stores { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: .75rem; }
.fatm-store { display: inline-flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-radius: .75rem; background: var(--fatm-inverse); color: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2); transition: background-color .15s ease; }
.fatm-store:hover { background: #000; }
.fatm-store .material-symbols-outlined { font-size: 1.75rem; color: var(--fatm-mint-bright); }
.fatm-store span:not(.material-symbols-outlined) { display: flex; flex-direction: column; line-height: 1.25; }
.fatm-store small { color: var(--fatm-surface-container); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; }
.fatm-store b { font-size: 1rem; font-weight: 700; }
.fatm-app__features { display: flex; flex-direction: column; gap: .75rem; width: 100%; max-width: 24rem; padding: 1.5rem; border-radius: 1rem; background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15); }
.fatm-app__features li { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 600; }
.fatm-app__features .material-symbols-outlined { color: var(--fatm-mint-bright); font-size: 1.375rem; }
.fatm-app__features .fatm-app__note { justify-content: center; padding-top: .5rem; color: var(--fatm-mint); font-size: .6875rem; font-weight: 700; }
@media (min-width: 768px) { .fatm-app__features { width: auto; } }

/* Footer */
.fatm-footer { background: var(--fatm-inverse); color: #e5eeff; padding-top: 2.5rem; }
.fatm-footer__grid { display: grid; gap: 1.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(211, 228, 254, .2); }
@media (min-width: 768px) { .fatm-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fatm-footer__grid { grid-template-columns: 4fr 3fr 2fr 3fr; } }
.fatm-footer__col { display: flex; flex-direction: column; gap: .75rem; font-size: .8125rem; line-height: 1.6; min-width: 0; }
.fatm-footer__col ul { display: flex; flex-direction: column; gap: .5rem; }
.fatm-footer__col a:hover { color: var(--fatm-mint-bright); }
.fatm-footer__title { color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fatm-footer__item { display: flex; align-items: flex-start; gap: .5rem; }
.fatm-footer__item .material-symbols-outlined { color: var(--fatm-mint-bright); font-size: 1.125rem; margin-top: .125rem; }
.fatm-footer__social { display: flex; gap: .5rem; }
.fatm-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(211, 228, 254, .2); color: #fff; transition: background-color .15s ease; }
.fatm-footer__social a:hover { background: var(--fatm-primary); color: #fff; }
.fatm-footer__stores { display: flex; flex-direction: column; gap: .5rem; }
.fatm-store--footer { padding: .5rem 1rem; border-radius: var(--fatm-radius); background: rgba(211, 228, 254, .2); box-shadow: none; }
.fatm-store--footer:hover { background: rgba(211, 228, 254, .3); color: #fff; }
.fatm-store--footer .material-symbols-outlined { font-size: 1.5rem; }
.fatm-store--footer b { font-size: .875rem; }
.fatm-footer__bottom { padding: 1.5rem 0; font-size: .8125rem; }
.fatm-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; text-align: center; }
.fatm-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; font-size: .6875rem; font-weight: 700; }
.fatm-footer__legal a:hover { color: var(--fatm-mint-bright); }
.fatm-footer__powered { display: inline-flex; align-items: center; gap: .5rem; }
.fatm-footer__powered img { width: auto; }
@media (min-width: 768px) { .fatm-footer__bottom-inner { flex-direction: row; text-align: left; } }