/* ==========================================================================
   Gesuntech website — page layouts.
   Load order: fonts.css → tokens.css → components.css → site.css
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; }
main { display: block; }
::selection { background: var(--gt-soft-green); color: var(--gt-deep-teal); }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--gt-deep-teal); color: var(--gt-warm-white); border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-4); color: var(--gt-warm-white); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 249, 245, 0.92); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); transition: box-shadow var(--dur-base) ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gt-deep-teal); }
.brand:hover { color: var(--gt-deep-teal); }
.brand img { width: 31px; height: 32px; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav__list { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav__link, .nav__trigger { color: var(--gt-charcoal); text-decoration: none; font-size: 0.9375rem; font-weight: 500; background: none; border: 0; padding: var(--space-2) 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.nav__link:hover, .nav__trigger:hover { color: var(--gt-deep-teal); text-decoration: underline; text-underline-offset: 6px; }
.nav__link[aria-current="page"] { color: var(--gt-deep-teal); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav__trigger svg { transition: transform var(--dur-fast) ease; }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item--menu { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 8px); left: -20px; width: 330px; padding: var(--space-2); margin: 0; list-style: none; background: var(--gt-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.nav__menu[hidden] { display: none; }
.nav__menu a { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--gt-charcoal); }
.nav__menu a:hover { background: var(--gt-warm-white); }
.nav__menu strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--gt-deep-teal); }
.nav__menu small { display: block; font-size: var(--text-small); color: var(--gt-muted); line-height: 1.45; margin-top: 2px; }

.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: transparent; color: var(--gt-deep-teal); cursor: pointer; }
.mobile-nav { display: none; }

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; border-top: 1px solid var(--color-border); background: var(--gt-warm-white); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav ul { list-style: none; margin: 0; padding: var(--space-3) 0 var(--space-5); }
  .mobile-nav a { display: block; padding: var(--space-3) 0; color: var(--gt-charcoal); text-decoration: none; font-size: 1.0625rem; font-weight: 500; border-bottom: 1px solid var(--color-border); }
  .mobile-nav a[aria-current="page"] { color: var(--gt-deep-teal); }
  .mobile-nav .mobile-nav__sub a { padding-left: var(--space-4); font-weight: 400; color: var(--gt-muted); }
  .mobile-nav .gt-btn { margin-top: var(--space-5); width: 100%; border: 0; color: var(--gt-warm-white); }
}

/* ---------- Shared bits ---------- */
.eyebrow-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.text-link { font-weight: 500; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link svg { transition: transform var(--dur-fast) ease; }
.arrow-link:hover svg { transform: translateX(3px); }
.muted { color: var(--color-text-muted); }
.section-head { max-width: 46rem; margin-bottom: var(--space-9); }
.section-head p { margin-top: var(--space-4); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); align-items: start; }
.split > .split__a { grid-column: 1 / span 5; }
.split > .split__b { grid-column: 7 / span 6; }
@media (max-width: 900px) { .split > .split__a, .split > .split__b { grid-column: 1 / -1; } }
.note { font-size: var(--text-small); color: var(--gt-subtle); }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tick-list li { position: relative; padding-left: 28px; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 8px; border-left: 2px solid var(--gt-teal-mist-ink); border-bottom: 2px solid var(--gt-teal-mist-ink); transform: rotate(-45deg) translateY(-2px); }

/* ---------- Hero (direction A: split with leaf forms) ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(4rem, 3rem + 5vw, 7rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero__copy .gt-eyebrow { display: block; margin-bottom: var(--space-6); }
.hero__copy .gt-lead { margin-top: var(--space-6); max-width: 33rem; }
.hero__copy .actions { margin-top: var(--space-7); }
.hero__products { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-small); }
.hero__products span:first-child { color: var(--gt-teal-mist-ink); font-weight: 500; }
.hero__products a { color: var(--gt-muted); text-decoration: none; }
.hero__products a:hover { color: var(--gt-deep-teal); text-decoration: underline; }
.leaves { position: relative; width: 100%; max-width: 420px; aspect-ratio: 420 / 480; margin-inline: auto; }
.leaves i { position: absolute; display: block; }
.leaves .l1 { left: 16.7%; top: 0;     width: 71.4%; height: 39.6%; background: var(--gt-deep-teal); border-radius: 999px 12px 999px 12px; }
.leaves .l2 { left: 0;     top: 31.3%; width: 45.2%; height: 47.9%; background: var(--gt-deep-teal); border-radius: 999px 12px 12px 999px; }
.leaves .l3 { left: 45.2%; top: 43.8%; width: 54.8%; height: 37.5%; background: var(--gt-logo-leaf); border-radius: 999px 12px 999px 12px; opacity: 0.92; animation: drift 11s var(--ease-in-out) infinite alternate; }
.leaves .l4 { left: 26.2%; top: 68.8%; width: 59.5%; height: 31.2%; background: var(--gt-deep-teal); border-radius: 999px 12px 999px 12px; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-6px, -8px); } }
@media (prefers-reduced-motion: reduce) { .leaves .l3 { animation: none; } }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .leaves { max-width: 150px; margin: 0; }
  .hero__products { margin-top: var(--space-8); }
}

/* Page hero (inner pages) */
.page-hero { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-hero .gt-eyebrow { display: block; margin-bottom: var(--space-5); }
.page-hero h1 { max-width: 52rem; }
.page-hero .gt-lead { margin-top: var(--space-5); max-width: 40rem; }
.page-hero .actions { margin-top: var(--space-7); }

/* ---------- Products (home) ---------- */
.product-rows { border-top: 1px solid var(--color-border); }
.product-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--space-5) var(--space-8); align-items: start; padding-block: var(--space-8); border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.product-row:hover { color: inherit; }
.product-row:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.product-row__name .gt-badge { margin-top: var(--space-3); }
.product-row__body p { color: var(--gt-muted); max-width: 34rem; }
.product-row__body .tags { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-small); color: var(--gt-subtle); }
.product-row__go { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border-strong); color: var(--gt-deep-teal); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.product-row:hover .product-row__go { background: var(--gt-deep-teal); color: var(--gt-warm-white); border-color: var(--gt-deep-teal); }
@media (max-width: 760px) { .product-row { grid-template-columns: 1fr; } .product-row__go { display: none; } }

/* ---------- Principles / features grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.point { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.gt-section--inverse .point { border-top-color: rgba(213, 231, 210, 0.25); }
.point__num { font-family: var(--font-display); font-size: var(--text-small); font-weight: 600; color: var(--gt-teal-mist-ink); letter-spacing: 0.04em; }
.gt-section--inverse .point__num { color: var(--gt-logo-leaf); }
.point h3 { font-size: 1.25rem; margin-top: var(--space-3); }
.point p { margin-top: var(--space-2); color: var(--gt-muted); }
.gt-section--inverse .point p { color: var(--gt-soft-green); }
.point svg { color: var(--gt-teal-mist-ink); }

/* ---------- CTA band ---------- */
.cta-band { border-radius: var(--radius-xl); background: var(--gt-deep-teal); color: var(--gt-warm-white); padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-7); align-items: end; position: relative; overflow: hidden; }
.cta-band h2 { color: var(--gt-warm-white); max-width: 30rem; }
.cta-band p { margin-top: var(--space-4); color: var(--gt-soft-green); max-width: 32rem; }
.cta-band .actions { position: relative; z-index: 1; }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 170px; border-radius: 999px 12px 999px 12px; border: 1.5px solid rgba(169, 203, 148, 0.45); pointer-events: none; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }
.btn-whatsapp svg, .btn-mail svg { width: 18px; height: 18px; }

/* ---------- Tabs (GymManX audiences) ---------- */
.tabs__list { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--gt-surface); border: 1px solid var(--color-border); margin-bottom: var(--space-8); max-width: 100%; overflow-x: auto; }
.tabs__tab { min-height: 44px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--gt-muted); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.tabs__tab:hover { color: var(--gt-deep-teal); }
.tabs__tab[aria-selected="true"] { background: var(--gt-deep-teal); color: var(--gt-warm-white); }
.tabs__panel[hidden] { display: none; }
.no-js .tabs__list { display: none; }
.no-js .tabs__panel[hidden] { display: block; }
.no-js .tabs__panel + .tabs__panel { margin-top: var(--space-10); }
.panel-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-grid h3 { font-size: var(--text-h3); }
.panel-grid .who { margin-top: var(--space-4); color: var(--gt-muted); }
.panel-grid .tick-list { margin-top: var(--space-6); }

/* ---------- Roadmap ---------- */
.roadmap { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.roadmap li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.roadmap time { font-family: var(--font-display); font-weight: 600; color: var(--gt-deep-teal); }
.roadmap span:last-child { justify-self: end; }
@media (max-width: 560px) { .roadmap li { grid-template-columns: 1fr; gap: var(--space-2); } .roadmap span:last-child { justify-self: start; } }

/* ---------- Feature cards (APlus) ---------- */
.feature { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--gt-surface); border: 1px solid var(--color-border); }
.feature h3 { font-size: 1.125rem; }
.feature p { margin-top: var(--space-2); color: var(--gt-muted); font-size: 0.9375rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Facts table ---------- */
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.facts th { width: 38%; padding-right: var(--space-5); font-weight: 500; color: var(--gt-deep-teal); font-family: var(--font-display); }
.facts td { color: var(--gt-muted); }

/* ---------- Steps (process) ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.steps li { counter-increment: step; padding-top: var(--space-5); border-top: 2px solid var(--gt-deep-teal); }
.steps li::before { content: "0" counter(step); font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); color: var(--gt-teal-mist-ink); }
.steps h3 { font-size: 1.25rem; margin-top: var(--space-3); }
.steps p { margin-top: var(--space-2); color: var(--gt-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chips li { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); font-size: var(--text-small); color: var(--gt-charcoal); background: var(--gt-surface); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--gt-surface); border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) ease; }
a.contact-card:hover { border-color: var(--gt-teal-mist); color: inherit; }
.contact-card svg { color: var(--gt-deep-teal); }
.contact-card h2 { font-size: 1.25rem; }
.contact-card p { color: var(--gt-muted); }
.contact-card .value { font-family: var(--font-display); font-weight: 600; color: var(--gt-deep-teal); font-size: 1.0625rem; word-break: break-word; }

/* ---------- Coming soon ---------- */
.soon { min-height: 62vh; display: flex; align-items: center; }
.soon__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; }
@media (max-width: 860px) { .soon__grid { grid-template-columns: 1fr; } .soon__grid .leaves { max-width: 140px; margin: 0; order: -1; } }

/* ---------- Mockup frames (illustrations, not real screenshots) ---------- */
.mock-wrap { position: relative; }
.mock-label { display: inline-block; margin-top: var(--space-3); font-size: 0.8125rem; color: var(--gt-subtle); }
.mock { border-radius: 14px; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--font-body); color: var(--gt-charcoal); font-size: 12px; line-height: 1.4; }
.mock__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F1F3EE; border-bottom: 1px solid var(--color-border); }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DAD3; }
.mock__bar span { margin-left: 10px; font-size: 11px; color: var(--gt-subtle); }
.mock__body { display: flex; min-height: 300px; }
.mock__side { width: 150px; flex: none; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.mock__side b { display: block; font-family: var(--font-display); font-size: 12px; margin: 0 6px 10px; }
.mock__side span { display: block; padding: 6px 8px; border-radius: 6px; font-size: 11px; }
.mock__main { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #F8F9F5; }
.mock__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--gt-deep-teal); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mock__title em { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: 10px; padding: 2px 8px; border-radius: 99px; background: var(--gt-sand); color: var(--gt-charcoal); white-space: nowrap; }
.mock__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mock__kpi { background: #fff; border: 1px solid #E8ECE5; border-radius: 8px; padding: 8px 10px; }
.mock__kpi small { display: block; font-size: 10px; color: var(--gt-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__kpi strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--gt-deep-teal); margin-top: 2px; }
.mock__panel { background: #fff; border: 1px solid #E8ECE5; border-radius: 8px; padding: 10px 12px; }
.mock__panel h4 { font-size: 11px; font-family: var(--font-body); font-weight: 500; color: var(--gt-subtle); margin: 0 0 6px; letter-spacing: 0; }
.mock__chart { width: 100%; height: 96px; display: block; }
.mock__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mock__bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.mock__bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--gt-teal-mist); }
.mock__bars i:nth-child(even) { background: var(--gt-soft-green); }
.mock__list { display: grid; gap: 6px; }
.mock__list div { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.mock__list div span:last-child { color: var(--gt-deep-teal); font-weight: 500; }
.mock__pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mock__pipeline div { background: #fff; border: 1px solid #E8ECE5; border-radius: 8px; padding: 6px; min-height: 110px; }
.mock__pipeline small { display: block; font-size: 9.5px; color: var(--gt-subtle); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__pipeline i { display: block; height: 18px; border-radius: 4px; background: var(--gt-soft-green); margin-bottom: 4px; }
.mock__pipeline i.alt { background: var(--gt-sand); }
.mock-gym .mock__side { background: var(--gt-deep-teal); color: var(--gt-soft-green); }
.mock-gym .mock__side b { color: var(--gt-warm-white); }
.mock-gym .mock__side span.on { background: rgba(213, 231, 210, 0.16); color: var(--gt-warm-white); }
.mock-insight { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--gt-charcoal); }
.mock-insight i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gt-soft-green); }
@media (max-width: 560px) {
  .mock__side { display: none; }
  .mock__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock__row { grid-template-columns: 1fr; }
  .mock__pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mock__pipeline div:nth-child(n+4) { display: none; }
}

/* APlus mockup — in the product's own colours */
.mock-aplus { --ap-green: #0F2A25; --ap-orange: #F26422; }
.mock-aplus .mock__side { background: var(--ap-green); color: #CFE0DA; }
.mock-aplus .mock__side b { color: #fff; }
.mock-aplus .mock__side b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ap-orange); margin-left: 6px; vertical-align: middle; }
.mock-aplus .mock__side span.on { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 2px 0 0 var(--ap-orange); }
.mock-aplus .mock__main { background: #fff; }
.mock-aplus .mock__title { color: var(--ap-green); }
.bill { width: 100%; border-collapse: collapse; font-size: 11px; }
.bill th { text-align: left; font-weight: 500; color: var(--gt-subtle); padding: 6px 6px; border-bottom: 1px solid #E8ECE5; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.bill td { padding: 7px 6px; border-bottom: 1px solid #F0F2EE; }
.bill td.n, .bill th.n { text-align: right; font-variant-numeric: tabular-nums; }
.bill tr.typing td { background: #FFF6F0; }
.bill tr.typing td:first-child { box-shadow: inset 2px 0 0 var(--ap-orange); }
.bill-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 8px; }
.bill-total dl { display: grid; grid-template-columns: auto auto; gap: 2px 16px; margin: 0; font-size: 11px; color: var(--gt-muted); }
.bill-total dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.bill-total strong { font-family: var(--font-display); font-size: 20px; color: var(--ap-green); }
.bill-keys { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10px; color: var(--gt-subtle); }
.bill-keys kbd { font-family: inherit; padding: 1px 6px; border: 1px solid #DDE3DA; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--gt-charcoal); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section-y); background: var(--gt-deep-teal); color: var(--gt-soft-green); padding-block: var(--space-10) var(--space-7); font-size: 0.9375rem; }
.site-footer a { color: var(--gt-soft-green); text-decoration: none; }
.site-footer a:hover { color: var(--gt-warm-white); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { color: var(--gt-warm-white); }
.footer__brand .brand:hover { color: var(--gt-warm-white); text-decoration: none; }
.footer__tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--gt-warm-white); }
.footer__tile img { width: 25px; height: 26px; }
.footer__brand p { margin-top: var(--space-4); max-width: 22rem; }
.footer__tagline { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gt-logo-leaf); }
.site-footer h2 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-logo-leaf); margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer__bottom { margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid rgba(213, 231, 210, 0.2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); color: #B9D3B6; }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: flex; align-items: center; }
.mock__list .mock-insight { justify-content: flex-start; }
.mock-gym .bill td, .mock-gym .bill th { padding: 6px 4px; }
/* Contrast on tinted sections: eyebrows and notes darken to stay above 4.5:1 */
.gt-section--soft .gt-eyebrow, .gt-section--warm .gt-eyebrow { color: var(--gt-deep-teal); }
.gt-section--soft .note, .gt-section--warm .note, .gt-section--soft .point__num, .gt-section--warm .point__num { color: var(--gt-muted); }