/* ===========================================================================
   FITPLEX DESIGN SYSTEM
   Ported from the "Fitplex Gym Management Website" design canvas.
   Layout, type scale, colour and components only - all site copy is unchanged.

   Fonts : Archivo (display) / Manrope (UI + body) / JetBrains Mono (eyebrow)
   Grid  : 1240px container, 32px gutters, 72-80px section rhythm
   =========================================================================== */

:root {
    /* ---- surfaces ---- */
    --t-ink:          #0B0F14;   /* near-black, dark sections */
    --t-ink-deep:     #1C0E04;   /* text on the orange button  7.03:1 */
    --t-white:        #FFFFFF;
    --t-surface:      #FFFFFF;
    --t-surface-alt:  #F5F7F5;   /* tinted band */
    --t-surface-alt2: #F3F6F4;
    --t-surface-soft: #FCFCFC;

    /* ---- text ---- */
    --t-text:         #0B0F14;
    --t-text-strong:  #2C343C;
    --t-text-body:    #3A424B;
    --t-text-mid:     #5A636C;
    --t-text-muted:   #5C666F;
    --t-text-soft:    #616B73;
    --t-text-light:   #8D959E;
    --t-text-faint:   #A6B0B9;

    /* ---- lines ---- */
    --t-line:         #E7EAEC;
    --t-line-soft:    #EDEFF1;
    --t-line-a:       rgba(11, 15, 20, .09);
    --t-line-b:       rgba(11, 15, 20, .07);
    --t-line-on-dark: rgba(255, 255, 255, .12);

    /* ---- accent (brand orange, sampled from the logo: #FC7800) ----
       Each step is contrast-checked, because the flat brand orange fails
       AA on white for text. Bright orange is for FILLS; the darker steps
       are for TEXT. Do not use --t-accent as a text colour on white. */
    --t-accent:       #FC7800;   /* fills: buttons, dots, bars           */
    --t-accent-link:  #B04E00;   /* links/text on white   5.34:1  AA     */
    --t-accent-hover: #8A3E00;   /* link hover            7.58:1  AAA    */
    --t-accent-pale:  #FFEDDC;   /* chip / icon background               */
    --t-accent-deep:  #8A3E00;   /* text on the pale chip 6.64:1  AAA    */
    --t-accent-on-dark: #FF8C1A; /* accent text on ink    8.25:1  AAA    */

    /* ---- type ---- */
    --t-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --t-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --t-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ---- shape ---- */
    --t-r-card:  10px;
    --t-r-lg:    14px;
    --t-r-xl:    18px;
    --t-r-pill:  999px;
    --t-r-chip:  5px;

    --t-container: 1240px;
    --t-gutter:    32px;
}

/* ---------------------------------------------------------------- base ---- */

.t-scope,
body.t-theme {
    background: var(--t-white);
    color: var(--t-text);
    font-family: var(--t-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.t-theme a { color: var(--t-accent-link); text-decoration: none; }
body.t-theme a:hover { color: var(--t-accent-hover); }

/* -------------------------------------------------------------- layout ---- */

.t-container {
    max-width: var(--t-container);
    margin: 0 auto;
    padding-left: var(--t-gutter);
    padding-right: var(--t-gutter);
}

.t-section        { padding: 80px 0; background: var(--t-white); }
.t-section--tight { padding: 64px 0; }
.t-section--alt   { background: var(--t-surface-alt); border-top: 1px solid var(--t-line-b); border-bottom: 1px solid var(--t-line-b); }
.t-section--dark  { background: var(--t-ink); color: var(--t-white); }
.t-section--rule  { border-bottom: 1px solid var(--t-line-b); }

/* ---------------------------------------------------------------- type ---- */

.t-eyebrow {
    font: 500 12px/1 var(--t-mono);
    letter-spacing: .04em;
    color: var(--t-text-soft);
    text-transform: uppercase;
    margin: 0 0 14px;
}
.t-section--dark .t-eyebrow { color: var(--t-accent-on-dark); }

.t-h1 {
    font-family: var(--t-display);
    font-weight: 800;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.04;
    letter-spacing: -.035em;
    margin: 0 0 18px;
    text-wrap: balance;
}
.t-h2 {
    font-family: var(--t-display);
    font-weight: 800;
    font-size: clamp(26px, 2.7vw, 36px);
    line-height: 1.12;
    letter-spacing: -.028em;
    margin: 0 0 14px;
    text-wrap: balance;
}
.t-h3 {
    font-family: var(--t-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.018em;
    margin: 0 0 8px;
}
.t-h4 {
    font-family: var(--t-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -.012em;
    margin: 0 0 6px;
}

.t-lead   { font-size: 17px; line-height: 1.6; color: var(--t-text-body); margin: 0; max-width: 62ch; }
.t-body   { font-size: 15px; line-height: 1.6; color: var(--t-text-muted); margin: 0; }
.t-small  { font-size: 13px; line-height: 1.55; color: var(--t-text-soft); margin: 0; }
.t-accent { color: var(--t-accent-link); }

.t-section--dark .t-h1,
.t-section--dark .t-h2,
.t-section--dark .t-h3,
.t-section--dark .t-h4 { color: var(--t-white); }
.t-section--dark .t-lead,
.t-section--dark .t-body { color: rgba(255,255,255,.72); }
.t-section--dark .t-small { color: rgba(255,255,255,.55); }
.t-section--dark .t-accent { color: var(--t-accent-on-dark); }

.t-head { max-width: 720px; margin: 0 0 40px; }
.t-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ------------------------------------------------------------- buttons ---- */

.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--t-r-pill);
    border: 1px solid transparent;
    font: 700 14px var(--t-body);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.t-btn:hover { transform: translateY(-1px); }

.t-btn--primary { background: var(--t-accent); color: var(--t-ink-deep); }
.t-btn--primary:hover { background: var(--t-accent); color: var(--t-ink-deep); filter: brightness(1.06); }

.t-btn--dark { background: var(--t-ink); color: #fff; }
.t-btn--dark:hover { background: #16202a; color: #fff; }

.t-btn--ghost { background: transparent; color: var(--t-text); border-color: rgba(11,15,20,.16); }
.t-btn--ghost:hover { background: rgba(11,15,20,.04); color: var(--t-text); }

.t-section--dark .t-btn--ghost { color: #fff; border-color: var(--t-line-on-dark); }
.t-section--dark .t-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

.t-hero .t-btn--ghost,
.t-cta .t-btn--ghost { color: #fff; border-color: var(--t-line-on-dark); }
.t-hero .t-btn--ghost:hover,
.t-cta .t-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

.t-btn--wa { background: #25D366; color: #05230F; }
.t-btn--wa:hover { background: #25D366; color: #05230F; filter: brightness(1.06); }

.t-btn--lg { padding: 14px 26px; font-size: 15px; }
.t-btn--sm { padding: 9px 16px; font-size: 13px; }
.t-btn--block { width: 100%; }

/* --------------------------------------------------------------- chips ---- */

.t-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--t-r-pill);
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    font: 600 12px var(--t-body);
    letter-spacing: .01em;
}
.t-section--dark .t-chip { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--t-line-on-dark); }
.t-chip .t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); flex: none; }

.t-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: var(--t-r-chip);
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    font: 600 10px var(--t-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- cards ---- */

.t-card {
    background: var(--t-surface);
    border: 1px solid var(--t-line-a);
    border-radius: var(--t-r-card);
    padding: 24px;
}
.t-card--soft { background: var(--t-surface-soft); }
.t-card--pad  { padding: 30px; }

.t-section--dark .t-card {
    background: rgba(255,255,255,.03);
    border-color: var(--t-line-on-dark);
}

.t-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--t-r-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    font-size: 16px;
    margin-bottom: 14px;
    flex: none;
}
.t-section--dark .t-icon { background: rgba(252,120,0,.16); color: var(--t-accent-on-dark); }

.t-num {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--t-ink); color: var(--t-accent-on-dark);
    font: 600 11px var(--t-mono);
    margin-bottom: 14px;
}

/* --------------------------------------------------------------- grids ---- */

.t-grid { display: grid; gap: 20px; }
.t-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-split   { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

@media (max-width: 1024px) {
    .t-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t-split   { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .t-grid--2, .t-grid--3, .t-grid--4 { grid-template-columns: 1fr; }
    .t-section { padding: 56px 0; }
    :root { --t-gutter: 20px; }
}

/* -------------------------------------------------------------- rounds ---- */

.t-rule { height: 1px; background: var(--t-line-b); border: 0; margin: 0; }
.t-stack > * + * { margin-top: 14px; }
.t-center { text-align: center; }

/* ===========================================================================
   HEADER / NAV
   =========================================================================== */

/* Sticky, not fixed: the bar occupies layout space, so no page needs a
   hand-tuned top offset and nothing slides underneath it. */
.t-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--t-white);
    border-bottom: 1px solid var(--t-line);
}
.t-nav.scrolled { box-shadow: 0 6px 24px rgba(11, 15, 20, .07); }

.t-topbar { background: var(--t-surface-alt); border-bottom: 1px solid var(--t-line-b); }
.t-topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding-top: 7px; padding-bottom: 7px;
}
.t-topbar-links { display: flex; gap: 20px; align-items: center; }
.t-topbar-links a {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 12.5px var(--t-body);
    color: var(--t-text-muted);
}
.t-topbar-links a:hover { color: var(--t-text); }
.t-topbar-links i { color: var(--t-accent-link); font-size: 11px; }
.t-topbar-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 11px var(--t-mono);
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--t-text-soft);
}

.t-nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
    padding-top: 12px; padding-bottom: 12px;
}
.t-brand { display: inline-flex; align-items: center; flex: none; }
.t-brand-logo { height: 34px; width: auto; display: block; }

.t-menu {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
    flex: 1 1 auto; justify-content: flex-end;
}
.t-menu > li { display: flex; }
.t-navlink {
    display: inline-flex; align-items: center;
    padding: 9px 13px; border-radius: 8px;
    font: 600 14px var(--t-body);
    color: var(--t-text-body);
    white-space: nowrap;
}
.t-navlink:hover { color: var(--t-text); background: rgba(11,15,20,.045); }
.t-navlink.is-active { color: var(--t-accent-link); }
.t-menu-cta { margin-left: 6px; }

.t-nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.t-support {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    border: 1px solid rgba(11,15,20,.06);
    font-size: 15px;
}
.t-support:hover { background: var(--t-accent); color: var(--t-ink-deep); }

.t-burger { display: none; }

@media (max-width: 1100px) {
    .t-navlink { padding: 9px 10px; font-size: 13.5px; }
    .t-menu { gap: 2px; }
}

@media (max-width: 991px) {
    .t-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 38px; height: 38px; padding: 9px; cursor: pointer;
        border: 1px solid var(--t-line); border-radius: 9px; background: #fff;
    }
    .t-burger span { display: block; height: 2px; background: var(--t-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
    .t-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .t-burger.active span:nth-child(2) { opacity: 0; }
    .t-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .t-menu {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(320px, 86vw);
        background: #fff;
        border-left: 1px solid var(--t-line);
        box-shadow: -20px 0 50px rgba(11,15,20,.14);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 84px 18px 28px;
        transform: translateX(100%);
        transition: transform .26s ease, visibility .26s;
        overflow-y: auto;
        /* Keep the closed drawer out of the document's scrollable overflow,
           otherwise it widens the page by its own width on narrow screens. */
        visibility: hidden;
    }
    .t-menu.active { transform: translateX(0); visibility: visible; }
    .t-navlink { padding: 12px 14px; font-size: 15px; }
    .t-menu-cta { margin: 8px 0 0; }
    .t-menu-cta .t-btn { width: 100%; }
}

@media (max-width: 640px) {
    .t-topbar-links { gap: 14px; }
    .t-topbar-links a { font-size: 11.5px; }
    .t-brand-logo { height: 30px; }
}

/* ===========================================================================
   FOOTER
   =========================================================================== */

.t-footer {
    background: var(--t-ink);
    color: rgba(255, 255, 255, .72);
    font-family: var(--t-body);
    padding-top: 72px;
    margin-top: 0;
}

.t-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
    gap: 48px;
    padding-bottom: 56px;
}

.t-footer-brand p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .58);
    margin: 18px 0 20px;
    max-width: 34ch;
}
.t-footer-logo img { height: 36px; width: auto; display: block; }

.t-footer-social { display: flex; gap: 10px; }
.t-footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--t-line-on-dark);
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}
.t-footer-social a:hover { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-ink-deep); }

.t-footer-col h4 {
    font: 600 11px var(--t-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 18px;
}
.t-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.t-footer-col a { font-size: 14px; color: rgba(255, 255, 255, .72); }
.t-footer-col a:hover { color: #fff; }

.t-footer-contact li { display: flex; align-items: center; gap: 10px; }
.t-footer-contact i { color: var(--t-accent-on-dark); font-size: 13px; width: 16px; text-align: center; flex: none; }

.t-footer-bottom { border-top: 1px solid var(--t-line-on-dark); }
.t-footer-bottom-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding-top: 18px; padding-bottom: 18px;
}
.t-footer-bottom p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .5);
}
.t-footer-bottom strong { color: rgba(255, 255, 255, .78); font-weight: 600; }
.t-footer-bottom a { color: rgba(255, 255, 255, .68); }
.t-footer-bottom a:hover { color: #fff; }
.t-sep { color: rgba(255, 255, 255, .22); margin: 0 6px; }
.t-footer-img { height: 46px; width: auto; border-radius: 8px; flex: none; }

@media (max-width: 1024px) {
    .t-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
    .t-footer { padding-top: 52px; }
    .t-footer-grid { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
    .t-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .t-footer-img { display: none; }
}

/* ===========================================================================
   PAGE BLOCKS
   Components used by page bodies. Same token set as above; nothing here
   assumes a dark page background except where scoped to .t-section--dark.
   =========================================================================== */

/* ----------------------------------------------------------------- hero ---- */

.t-hero {
    position: relative;
    background: var(--t-ink);
    color: #fff;
    overflow: hidden;
}
.t-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 520px at 82% 4%, rgba(252,120,0,.16), transparent 68%);
    pointer-events: none;
}
.t-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 54px;
    align-items: center;
    padding: 76px 0 88px;
}
.t-hero-inner--solo { grid-template-columns: 1fr; max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.t-hero .t-h1 { color: #fff; }
.t-hero .t-lead { color: rgba(255,255,255,.72); max-width: 540px; }
.t-hero-inner--solo .t-lead { margin-left: auto; margin-right: auto; }
.t-hero .t-chip { background: rgba(255,255,255,.07); color: #fff; border: 1px solid var(--t-line-on-dark); }
.t-hero .t-chip i { color: var(--t-accent-on-dark); }
.t-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.t-hero-inner--solo .t-hero-actions { justify-content: center; }
.t-hero-note {
    font: 500 13.5px/1.6 var(--t-body);
    color: rgba(255,255,255,.55);
    margin: 0;
}
.t-hero-note i { color: var(--t-accent-on-dark); }

/* -------------------------------------------------------------- browser ---- */

.t-browser {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 40px 80px -34px rgba(0,0,0,.65);
    overflow: hidden;
    color: var(--t-ink);
}
.t-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid #EDEFF1;
    background: #F8F9F9;
}
.t-browser-bar span.dot { width: 9px; height: 9px; border-radius: 50%; background: #DCE0E4; flex: none; }
.t-browser-url {
    margin-left: 10px;
    font: 500 11.5px var(--t-mono);
    color: #98A1AA;
}
.t-browser-body { position: relative; line-height: 0; }
.t-browser-body img { width: 100%; display: block; }

/* ------------------------------------------------------------ media box ---- */

.t-media { border-radius: 14px; overflow: hidden; border: 1px solid var(--t-line); background: #fff; }
.t-media img { width: 100%; display: block; }
.t-section--dark .t-media { border-color: var(--t-line-on-dark); background: rgba(255,255,255,.03); }
.t-media--plain { border: 0; background: none; }

/* ----------------------------------------------------------- icon rows ---- */

.t-featurerow { display: flex; gap: 16px; align-items: flex-start; }
.t-featurerow + .t-featurerow { margin-top: 22px; }
.t-featurerow .t-icon { flex: none; }
.t-featurerow h4 {
    font: 700 16px/1.3 var(--t-display);
    letter-spacing: -.01em;
    margin: 2px 0 5px;
    color: var(--t-text);
}
.t-featurerow p { font: 400 14.5px/1.6 var(--t-body); color: var(--t-text-muted); margin: 0; }
.t-section--dark .t-featurerow h4 { color: #fff; }
.t-section--dark .t-featurerow p { color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------- steps ---- */

.t-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.t-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    padding: 26px 20px 20px;
}
.t-step-tag {
    position: absolute;
    top: -11px;
    left: 20px;
    background: var(--t-accent);
    color: var(--t-ink-deep);
    font: 700 11px/1 var(--t-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: var(--t-r-pill);
}
.t-step-tag--stop { background: var(--t-ink); color: #fff; }
.t-step h4 { font: 700 15.5px/1.3 var(--t-display); letter-spacing: -.01em; margin: 6px 0 6px; color: var(--t-text); }
.t-step p { font: 400 13.5px/1.55 var(--t-body); color: var(--t-text-muted); margin: 0; }
.t-section--dark .t-step { background: rgba(255,255,255,.03); border-color: var(--t-line-on-dark); }
.t-section--dark .t-step h4 { color: #fff; }
.t-section--dark .t-step p { color: rgba(255,255,255,.68); }

/* ------------------------------------------------------------- compare ---- */

.t-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.t-compare-col {
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    padding: 28px;
    background: #fff;
}
.t-compare-col--bad { background: var(--t-surface-alt); }
.t-compare-col--good { border-color: rgba(252,120,0,.4); box-shadow: 0 18px 40px -28px rgba(252,120,0,.5); }
.t-compare-col h3 {
    font: 700 15px/1.2 var(--t-body);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.t-compare-col--bad h3 { color: var(--t-text-soft); }
.t-compare-col--good h3 { color: var(--t-accent-deep); }
.t-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.t-compare-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font: 400 14.5px/1.55 var(--t-body);
    color: var(--t-text-body);
}
.t-compare-list i { flex: none; margin-top: 3px; font-size: 13px; }
.t-compare-col--bad i { color: #B04E00; opacity: .5; }
.t-compare-col--good i { color: var(--t-accent-link); }

/* ----------------------------------------------------------------- faq ---- */

.t-faq { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--t-line-b); }
.t-faq-item { border-bottom: 1px solid var(--t-line-b); }
.t-faq-q {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 22px 40px 22px 0;
    position: relative;
    cursor: pointer;
    font: 700 16.5px/1.4 var(--t-display);
    letter-spacing: -.01em;
    color: var(--t-text);
    font-family: var(--t-display);
}
.t-faq-q::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 4px;
    top: 24px;
    font-size: 12px;
    color: var(--t-accent-link);
    transition: transform .22s ease;
}
.t-faq-item.is-open .t-faq-q::after { transform: rotate(180deg); }
.t-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.t-faq-a > div { padding: 0 40px 22px 0; font: 400 15px/1.65 var(--t-body); color: var(--t-text-muted); }
.t-faq-a p { margin: 0 0 10px; }
.t-faq-a p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- cta ---- */

.t-cta { background: var(--t-ink); color: #fff; padding: 80px 0; position: relative; overflow: hidden; }
.t-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 420px at 50% 0%, rgba(252,120,0,.16), transparent 70%);
    pointer-events: none;
}
.t-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; }
.t-cta .t-h2 { color: #fff; }
.t-cta .t-lead { color: rgba(255,255,255,.72); margin: 0 auto; }
.t-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0 20px; }

/* ------------------------------------------------------------ stat row ---- */

.t-stats { display: flex; flex-wrap: wrap; gap: 40px; }
.t-stat-v { font: 700 26px/1 var(--t-display); letter-spacing: -.02em; }
.t-stat-l { font: 500 13px var(--t-body); color: var(--t-text-soft); margin-top: 5px; }
.t-section--dark .t-stat-l, .t-hero .t-stat-l { color: rgba(255,255,255,.55); }

/* ---------------------------------------------------------- check line ---- */

.t-checks { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--t-line-b); }
.t-checks li { font: 600 14px var(--t-body); color: var(--t-text); display: flex; align-items: center; gap: 8px; }
.t-checks i { color: var(--t-accent-link); font-size: 13px; }
.t-section--dark .t-checks { border-top-color: var(--t-line-on-dark); }
.t-section--dark .t-checks li { color: #fff; }
.t-section--dark .t-checks i { color: var(--t-accent-on-dark); }

/* ------------------------------------------------------------ SEO tabs ---- */

.t-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.t-tab {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-pill);
    padding: 9px 18px;
    font: 600 13.5px var(--t-body);
    color: var(--t-text-muted);
    cursor: pointer;
}
.t-tab:hover { border-color: rgba(11,15,20,.24); color: var(--t-text); }
.t-tab.active { background: var(--t-ink); border-color: var(--t-ink); color: #fff; }
.t-tabpanel { display: none; }
.t-tabpanel.active { display: block; }
.t-linkgrid { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.t-linkgrid a {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-pill);
    padding: 8px 15px;
    font: 500 13.5px var(--t-body);
    color: var(--t-text-body);
}
.t-linkgrid a:hover { border-color: var(--t-accent); color: var(--t-accent-hover); background: var(--t-accent-pale); }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1024px) {
    .t-hero-inner { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 64px; }
    .t-hero .t-lead { max-width: none; }
    .t-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .t-steps, .t-compare { grid-template-columns: 1fr; }
    .t-stats { gap: 26px; }
    .t-hero-actions .t-btn, .t-cta-actions .t-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------- plans ---- */

.t-plans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; }

.t-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    padding: 30px 26px;
    scroll-margin-top: 110px;
}
.t-plan--featured {
    background: var(--t-ink);
    border-color: var(--t-ink);
    color: #fff;
    box-shadow: 0 30px 60px -30px rgba(11,15,20,.5);
}
.t-plan-badge,
.t-plan-tag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--t-accent);
    color: var(--t-ink-deep);
    font: 700 11.5px/1 var(--t-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: var(--t-r-pill);
    white-space: nowrap;
}
.t-plan-tag { background: var(--t-accent-pale); color: var(--t-accent-deep); }

.t-plan-head { border-bottom: 1px solid var(--t-line-b); padding-bottom: 22px; text-align: center; }
.t-plan--featured .t-plan-head { border-bottom-color: var(--t-line-on-dark); }

.t-plan-name {
    font: 700 13px var(--t-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-text-soft);
    margin: 0 0 14px;
}
.t-plan--featured .t-plan-name { color: rgba(255,255,255,.66); }

.t-plan-price { font: 800 36px/1 var(--t-display); letter-spacing: -.03em; color: var(--t-text); }
.t-plan-usage { font: 800 23px/1.2 var(--t-display); letter-spacing: -.025em; color: var(--t-text); }
.t-plan--featured .t-plan-price,
.t-plan--featured .t-plan-usage { color: #fff; }

.t-plan-per { font: 500 13.5px var(--t-body); color: var(--t-text-soft); margin-top: 7px; }
.t-plan--featured .t-plan-per { color: rgba(255,255,255,.6); }

.t-plan-billing { font: 400 12.5px/1.5 var(--t-body); color: var(--t-text-muted); margin: 10px 0 0; }
.t-plan--featured .t-plan-billing { color: rgba(255,255,255,.68); }

.t-plan-limit {
    display: inline-block;
    margin: 16px 0 0;
    background: var(--t-surface-alt);
    border-radius: var(--t-r-pill);
    padding: 6px 14px;
    font: 600 12.5px var(--t-body);
    color: var(--t-text-body);
}
.t-plan--featured .t-plan-limit { background: rgba(255,255,255,.1); color: #fff; }

.t-plan-includes { font: 700 13.5px var(--t-body); color: var(--t-text); margin: 20px 0 0; }
.t-plan--featured .t-plan-includes { color: rgba(255,255,255,.9); }

.t-plan-features { list-style: none; margin: 18px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.t-plan-features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: 400 13.8px/1.5 var(--t-body);
    color: var(--t-text-body);
}
.t-plan-features i { flex: none; margin-top: 4px; font-size: 11px; color: var(--t-accent-link); }
.t-plan-features li.is-off { color: var(--t-text-soft); }
.t-plan-features li.is-off i { color: var(--t-text-soft); opacity: .7; }
.t-plan--featured .t-plan-features li { color: rgba(255,255,255,.82); }
.t-plan--featured .t-plan-features i { color: var(--t-accent-on-dark); }

.t-plan-cta { margin-top: auto; }
.t-plan--featured .t-btn--dark { background: #fff; color: var(--t-ink); }

@media (max-width: 1199px) {
    .t-plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .t-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* ------------------------------------------------- app store + tiles ---- */

.app-store-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.app-store-badges.center { justify-content: center; }
.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--t-r-card);
    background: var(--t-ink);
    color: #fff;
    border: 1px solid var(--t-ink);
    transition: transform .18s ease;
}
.app-store-badge:hover { transform: translateY(-2px); color: #fff; }
.app-store-badge i { font-size: 22px; }
.app-store-badge .badge-kicker { display: block; font: 500 10.5px var(--t-body); opacity: .72; }
.app-store-badge .badge-name { display: block; font: 700 14.5px var(--t-display); letter-spacing: -.01em; }
.t-section--dark .app-store-badge { background: rgba(255,255,255,.06); border-color: var(--t-line-on-dark); }
.t-section--dark .app-store-badge:hover { background: rgba(255,255,255,.11); }

.app-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.app-feature-tile {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--t-line-on-dark);
    border-radius: var(--t-r-card);
    padding: 22px 20px;
}
.app-feature-tile .tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(252,120,0,.16);
    color: var(--t-accent-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
}
.app-feature-tile h4 { font: 700 16px/1.3 var(--t-display); letter-spacing: -.01em; margin: 0 0 6px; color: #fff; }
.app-feature-tile p  { font: 400 13.5px/1.55 var(--t-body); margin: 0; color: rgba(255,255,255,.7); }
.app-feature-note { text-align: center; font: 400 14px var(--t-body); margin-top: 26px; color: rgba(255,255,255,.6); }

/* Light-background variant, for /features */
.app-feature-grid.on-light .app-feature-tile { background: #fff; border-color: var(--t-line); }
.app-feature-grid.on-light .app-feature-tile .tile-icon { background: var(--t-accent-pale); color: var(--t-accent-deep); }
.app-feature-grid.on-light .app-feature-tile h4 { color: var(--t-text); }
.app-feature-grid.on-light .app-feature-tile p  { color: var(--t-text-muted); }
.app-feature-grid.on-light + .app-feature-note,
.on-light-note { color: var(--t-text-muted); }

@media (max-width: 1024px) { .app-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .app-feature-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ breadcrumb + callout ---- */

.t-crumb { display: flex; gap: 9px; align-items: center; justify-content: center; font: 500 13px var(--t-body); color: var(--t-text-soft); margin-bottom: 20px; }
.t-crumb a { color: var(--t-text-soft); }
.t-crumb a:hover { color: var(--t-text); }
.t-hero .t-crumb { color: rgba(255,255,255,.5); }
.t-hero .t-crumb a { color: rgba(255,255,255,.62); }
.t-hero .t-crumb a:hover { color: #fff; }

.t-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    padding: 24px 28px;
    background: var(--t-surface-alt);
}
.t-callout-main { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 460px; }
.t-callout-main p { margin: 0; }

.t-icon--lg { width: 52px; height: 52px; font-size: 21px; border-radius: 12px; }

.t-inline-card { display: flex; align-items: center; gap: 15px; padding: 18px 20px; }
.t-inline-card strong { display: block; font: 700 15px var(--t-display); letter-spacing: -.01em; color: var(--t-text); }
.t-inline-card span { display: block; font: 400 13px var(--t-body); color: var(--t-text-muted); margin-top: 3px; }

@media (max-width: 640px) {
    .t-callout { padding: 22px; }
    .t-callout .t-btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   LEGACY COMPATIBILITY LAYER
   The pages below still use the original component class names. This layer
   re-skins those names with the theme tokens so every page picks up the new
   design without its markup being rewritten. theme.css loads after style.css,
   so these win at equal specificity.
   =========================================================================== */

/* -- shell ---------------------------------------------------------------- */

.container { max-width: var(--t-container); padding-left: var(--t-gutter); padding-right: var(--t-gutter); margin: 0 auto; }

.section { padding: 80px 0; background: var(--t-white); }
.section-gray,
.section.bg-light { background: var(--t-surface-alt); }

.page-header {
    background: var(--t-ink) !important;
    color: #fff;
    padding: 74px 0 84px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 80% 4%, rgba(252,120,0,.16), transparent 68%);
    pointer-events: none;
}
.page-header > .container { position: relative; z-index: 1; }
.page-header h1 {
    font: 800 clamp(34px, 4.2vw, 54px)/1.06 var(--t-display);
    letter-spacing: -.035em;
    color: #fff;
    margin: 0 0 16px;
    text-wrap: balance;
}
.page-header p,
.page-header .subtitle {
    font: 400 17px/1.6 var(--t-body);
    color: rgba(255,255,255,.72);
    max-width: 62ch;
    margin: 0 auto;
}
.header-glow-orb { display: none; }

.breadcrumb {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    font: 500 13px var(--t-body);
    color: rgba(255,255,255,.5);
    margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,.62); }
.breadcrumb a:hover { color: #fff; }

/* -- section headers ------------------------------------------------------ */

.section-header { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-header h2 {
    font: 800 clamp(28px, 3vw, 42px)/1.12 var(--t-display);
    letter-spacing: -.03em;
    color: var(--t-text);
    margin: 0 0 12px;
    text-wrap: balance;
}
.section-header p { font: 400 17px/1.6 var(--t-body); color: var(--t-text-body); margin: 0; }

.text-gradient,
.fitplex-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 12px;
    font: 700 12px var(--t-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-text-soft);
}
.badge i { color: var(--t-accent-link); font-size: 12px; }

/* -- buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: var(--t-r-pill) !important;
    font: 700 14px var(--t-body);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, color .16s ease;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

.btn-primary { background: var(--t-accent); color: var(--t-ink-deep); border-color: var(--t-accent); }
.btn-primary:hover { background: var(--t-accent); color: var(--t-ink-deep); filter: brightness(1.06); }

.btn-secondary,
.btn-dark { background: var(--t-ink); color: #fff; border-color: var(--t-ink); }
.btn-secondary:hover,
.btn-dark:hover { background: #16202a; color: #fff; }

.btn-outline,
.btn-white {
    background: transparent;
    color: var(--t-text);
    border-color: rgba(11,15,20,.16);
}
.btn-outline:hover,
.btn-white:hover { background: rgba(11,15,20,.04); color: var(--t-text); }

.btn-whatsapp { background: #25D366; color: #05230F; border-color: #25D366; }
.btn-whatsapp:hover { background: #25D366; color: #05230F; filter: brightness(1.06); }

.page-header .btn-outline,
.cta-section .btn-outline,
.ai-features-section .btn-outline,
.white-label-section .btn-outline { color: #fff; border-color: var(--t-line-on-dark); }
.page-header .btn-outline:hover,
.cta-section .btn-outline:hover,
.ai-features-section .btn-outline:hover,
.white-label-section .btn-outline:hover { background: rgba(255,255,255,.08); color: #fff; }

/* -- feature cards -------------------------------------------------------- */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    padding: 26px 24px;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease;
}
.feature-card:hover { border-color: rgba(11,15,20,.2); transform: translateY(-2px); }
.feature-card h4 {
    font: 700 17px/1.3 var(--t-display);
    letter-spacing: -.015em;
    color: var(--t-text);
    margin: 16px 0 7px;
}
.feature-card p { font: 400 14.5px/1.6 var(--t-body); color: var(--t-text-muted); margin: 0; }

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin: 0;
}
.feature-icon i { color: inherit; }

.section-gray .feature-card,
.section[style*="bg-light"] .feature-card { background: #fff; }

/* -- dark feature sections ------------------------------------------------ */

.ai-features-section,
.white-label-section {
    background: var(--t-ink) !important;
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.ai-features-section::before,
.white-label-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 460px at 78% 6%, rgba(252,120,0,.14), transparent 70%);
    pointer-events: none;
}
.ai-features-section > .container,
.white-label-section > .container { position: relative; z-index: 1; }
.ai-features-section .section-header h2,
.white-label-section h2,
.ai-features-section h2,
.ai-features-section h3,
.ai-features-section h4,
.white-label-section h3,
.white-label-section h4 { color: #fff; }
.ai-features-section .section-header p,
.ai-features-section p,
.white-label-section p { color: rgba(255,255,255,.72); }
.ai-features-section .badge,
.white-label-section .badge { color: rgba(255,255,255,.6); }
.ai-features-section .badge i,
.white-label-section .badge i { color: var(--t-accent-on-dark); }

.ai-feature-card,
.ai-features-section .feature-card,
.white-label-section .feature-card {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--t-line-on-dark);
    border-radius: var(--t-r-card);
    padding: 26px 24px;
}
.ai-feature-card:hover,
.ai-features-section .feature-card:hover,
.white-label-section .feature-card:hover { border-color: rgba(255,255,255,.22); }
.ai-feature-card h4,
.ai-features-section .feature-card h4,
.white-label-section .feature-card h4 { color: #fff; }
.ai-feature-card p,
.ai-features-section .feature-card p,
.white-label-section .feature-card p { color: rgba(255,255,255,.7); }
.ai-features-section .feature-icon,
.white-label-section .feature-icon,
.ai-feature-card .feature-icon { background: rgba(252,120,0,.16); color: var(--t-accent-on-dark); }
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(252,120,0,.16);
    color: var(--t-accent-on-dark);
    border: 1px solid rgba(252,120,0,.3);
    border-radius: var(--t-r-pill);
    padding: 5px 12px;
    font: 700 11.5px var(--t-body);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* -- CTA band ------------------------------------------------------------- */

.cta-section {
    background: var(--t-ink) !important;
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 420px at 50% 0%, rgba(252,120,0,.16), transparent 70%);
    pointer-events: none;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-content { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-content h2 {
    font: 800 clamp(28px, 3.2vw, 44px)/1.1 var(--t-display);
    letter-spacing: -.035em;
    color: #fff;
    margin: 0 0 14px;
    text-wrap: balance;
}
.cta-content p { font: 400 17px/1.6 var(--t-body); color: rgba(255,255,255,.72); margin: 0 auto 30px; max-width: 60ch; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* -- misc ----------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.value-card,
.contact-info-card,
.support-card-premium {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    box-shadow: none;
}

@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .section, .ai-features-section, .white-label-section, .cta-section { padding: 56px 0; }
    .page-header { padding: 52px 0 60px; }
    .cta-buttons .btn { width: 100%; }
}

/* -- feature card alignment + ai card internals ---------------------------- */

.feature-card { text-align: left; }
.feature-card .feature-icon { margin-left: 0; margin-right: 0; }

.ai-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }

.ai-feature-card { position: relative; text-align: left; }
.ai-feature-card .icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: rgba(252,120,0,.16) !important;
    color: var(--t-accent-on-dark) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 0 16px;
    box-shadow: none;
}
.ai-feature-card .icon i { color: inherit; }
.ai-feature-card h3 {
    font: 700 20px/1.25 var(--t-display);
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 10px;
}
.ai-feature-card p { font: 400 14.5px/1.6 var(--t-body); color: rgba(255,255,255,.7); margin: 0 0 16px; }
.ai-feature-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ai-feature-card ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: 400 14px/1.5 var(--t-body);
    color: rgba(255,255,255,.8);
}
.ai-feature-card ul li i { color: var(--t-accent-on-dark) !important; flex: none; margin-top: 3px; font-size: 12px; }
.ai-feature-card .ai-badge { position: absolute; top: 26px; right: 24px; }
.ai-feature-card .card-visual {
    margin-top: 20px;
    border-radius: var(--t-r-card);
    overflow: hidden;
    border: 1px solid var(--t-line-on-dark);
}
.ai-feature-card .card-visual img { width: 100%; display: block; }

/* the dark sections' own badges use inline colours; normalise them */
.ai-features-section .badge[style],
.white-label-section .badge[style] { background: none !important; color: rgba(255,255,255,.6) !important; }

/* ===========================================================================
   LEGACY VARIABLE REMAP
   Hundreds of inline styles across the site reference the original palette
   variables (var(--primary), var(--text-muted), …). Rather than editing every
   one, point those names at the theme palette. Loaded after style.css, so this
   :root block wins.
   =========================================================================== */

:root {
    /* Indigo -> brand orange */
    --primary:         #FC7800;
    --primary-dark:    #8A3E00;
    --primary-light:   #B04E00;
    --primary-lighter: #FF8C1A;

    /* Emerald accent -> orange ramp (WhatsApp green is set literally, not via a var) */
    --secondary:        #B04E00;
    --secondary-dark:   #8A3E00;
    --secondary-light:  #FF8C1A;
    --accent-cyber:     #B04E00;
    --accent-cyber-dark:#8A3E00;
    --accent-cyber-light:#FF8C1A;

    --accent-cyan:        #B04E00;
    --accent-green:       #B04E00;
    --accent-green-dark:  #8A3E00;
    --accent-green-light: #FF8C1A;

    /* Surfaces */
    --bg-light:            #F5F7F5;
    --bg-gray:             #F5F7F5;
    --bg-dark:             #0B0F14;
    --bg-dark-secondary:   #131A21;
    --bg-tint:             #FFEDDC;

    /* Text */
    --text-dark:      #0B0F14;
    --text-primary:   #0B0F14;
    --text-secondary: #3D4750;
    --text-muted:     #5C666F;
    --text-light:     #8B949C;

    --border-light:  #E7EAEC;
    --border-medium: rgba(11, 15, 20, .14);

    /* Gradients flattened to solid theme colours */
    --gradient-primary:      linear-gradient(135deg, #FC7800 0%, #E06A00 100%);
    --gradient-primary-full: linear-gradient(135deg, #FC7800 0%, #B04E00 100%);
    --gradient-text:         linear-gradient(135deg, #B04E00 0%, #FC7800 100%);
    --gradient-hero:         linear-gradient(135deg, #0B0F14 0%, #131A21 50%, #0B0F14 100%);
    --gradient-dark:         linear-gradient(135deg, #0B0F14 0%, #131A21 100%);

    /* Softer, theme-consistent elevation */
    --shadow-sm:      0 1px 2px rgba(11, 15, 20, .04);
    --shadow:         0 4px 14px rgba(11, 15, 20, .05);
    --shadow-md:      0 10px 28px rgba(11, 15, 20, .07);
    --shadow-lg:      0 18px 40px rgba(11, 15, 20, .09);
    --shadow-xl:      0 26px 56px rgba(11, 15, 20, .12);
    --shadow-2xl:     0 34px 72px rgba(11, 15, 20, .16);
    --shadow-primary: 0 10px 30px -12px rgba(252, 120, 0, .55);
    --shadow-cyber:   0 10px 30px -12px rgba(252, 120, 0, .45);

    --radius-sm: 8px;
    --radius:    10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Badges and pills that hardcode the old gradient */
.ai-feature-card .ai-badge,
.ai-features-section .ai-badge,
.white-label-section .ai-badge {
    background: rgba(252,120,0,.18);
    background-image: none;
    color: var(--t-accent-on-dark);
    border: 1px solid rgba(252,120,0,.32);
    box-shadow: none;
}

/* ----------------------------------------------------------------- blog ---- */

.blog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}
.blog-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.blog-search-wrapper { position: relative; max-width: 320px; width: 100%; }
.blog-search-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--t-text-soft);
    font-size: 14px;
}
.blog-search-wrapper input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-pill);
    color: var(--t-text);
    font: 400 14px var(--t-body);
    outline: none;
    box-sizing: border-box;
    transition: all 180ms ease;
}
.blog-search-wrapper input::placeholder { color: var(--t-text-soft); }
.blog-search-wrapper input:focus { border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(252,120,0,.18); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 26px; }

.blog-card {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
    border-color: rgba(11,15,20,.22);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -26px rgba(11,15,20,.35);
}

.blog-card-image { height: 190px; position: relative; overflow: hidden; background: var(--t-surface-alt); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }

.blog-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--t-accent);
    color: var(--t-ink-deep);
    font: 700 11px var(--t-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--t-r-pill);
}

.blog-card-content { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; }

.blog-card-meta {
    font: 500 12.5px var(--t-body);
    color: var(--t-text-soft);
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.blog-card-meta i { margin-right: 4px; }

.blog-card-title {
    font: 700 19px/1.35 var(--t-display);
    letter-spacing: -.02em;
    margin: 0 0 10px;
}
.blog-card-title a { color: var(--t-text); }
.blog-card:hover .blog-card-title a { color: var(--t-accent-hover); }

.blog-card-summary {
    font: 400 14.5px/1.6 var(--t-body);
    color: var(--t-text-muted);
    margin: 0 0 20px;
    flex-grow: 1;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--t-line-b);
    padding-top: 15px;
    margin-top: auto;
}
.blog-card-author { display: flex; align-items: center; gap: 9px; font: 500 13px var(--t-body); color: var(--t-text-muted); }
.blog-card-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    display: grid;
    place-items: center;
    font: 700 12px var(--t-body);
}
.blog-read-more {
    color: var(--t-accent-link);
    font: 700 13px var(--t-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.blog-read-more:hover { color: var(--t-accent-hover); }
.blog-read-more i { font-size: 11px; }

.blog-empty { display: none; text-align: center; padding: 64px 20px; }
.blog-empty i { font-size: 40px; color: var(--t-line); display: block; margin-bottom: 16px; }
.blog-empty h4 { font: 700 19px var(--t-display); letter-spacing: -.02em; color: var(--t-text); margin: 0 0 8px; }
.blog-empty p { font: 400 15px var(--t-body); color: var(--t-text-muted); margin: 0; }

@media (max-width: 640px) {
    .blog-toolbar { flex-direction: column; align-items: stretch; }
    .blog-search-wrapper { max-width: none; }
}

/* -- programmatic page hero (city / topic / guide templates) --------------- */

.hero {
    background: var(--t-ink) !important;
    padding: 76px 0 84px;
}
.hero::before {
    background-image: none !important;
    background: radial-gradient(900px 520px at 80% 4%, rgba(252,120,0,.16), transparent 68%) !important;
    animation: none !important;
}
.hero .hero-glow { display: none; }

.hero-text .badge,
.hero .badge {
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 20px;
    color: var(--t-accent-on-dark);
}
.hero-text .badge i,
.hero .badge i { color: var(--t-accent-on-dark); }
.hero-text h1 { color: #fff; font-family: var(--t-display); letter-spacing: -.035em; }
.hero .gym-bg-elements { display: none; }

/* ===========================================================================
   ORANGE SURFACES
   No dark page sections anywhere on the site: every band that used to be ink
   is now brand orange. Text on orange is the deep-brown ramp below —
   #1C0E04 on #FC7800 is 7.03:1 and #3D2107 is 5.51:1, both above AA.
   This layer is last in the file, so it wins over the ink rules above.
   =========================================================================== */

:root {
    --t-brand:       #FC7800;
    --t-brand-ink:   #1C0E04;   /* headings / strong text on orange */
    --t-brand-body:  #3D2107;   /* body copy on orange */
    --t-brand-line:  rgba(28, 14, 4, .20);
    --t-brand-soft:  rgba(28, 14, 4, .07);
    --t-brand-soft2: rgba(28, 14, 4, .12);
}

/* -- the bands ------------------------------------------------------------ */

.t-hero,
.t-cta,
.t-section--dark,
.t-footer,
.page-header,
.hero,
.ai-features-section,
.white-label-section,
.cta-section,
.fitplex-hero {
    background: var(--t-brand) !important;
    background-image: none !important;
    color: var(--t-brand-ink);
}

.t-hero::before,
.t-cta::before,
.page-header::before,
.hero::before,
.ai-features-section::before,
.white-label-section::before,
.cta-section::before,
.fitplex-hero::before {
    background: radial-gradient(900px 520px at 82% 2%, rgba(255, 255, 255, .22), transparent 66%) !important;
}

/* -- type on orange ------------------------------------------------------- */

.t-hero .t-h1, .t-hero .t-h2, .t-hero .t-h3, .t-hero .t-h4,
.t-cta .t-h2,
.t-section--dark .t-h1, .t-section--dark .t-h2, .t-section--dark .t-h3, .t-section--dark .t-h4,
.page-header h1, .page-header h2,
.hero-text h1, .hero h1, .hero h2,
.ai-features-section h2, .ai-features-section h3, .ai-features-section h4,
.white-label-section h2, .white-label-section h3, .white-label-section h4,
.ai-features-section .section-header h2,
.cta-content h2, .cta-section h2,
.fitplex-hero h1,
.ai-feature-card h3, .ai-feature-card h4,
.t-section--dark .t-featurerow h4,
.t-section--dark .t-step h4,
.app-feature-tile h4 { color: var(--t-brand-ink) !important; }

.t-hero .t-lead, .t-hero .t-body, .t-hero .t-small, .t-hero-note,
.t-cta .t-lead,
.t-section--dark .t-lead, .t-section--dark .t-body, .t-section--dark .t-small,
.page-header p, .page-header .subtitle,
.hero-text p, .hero p,
.ai-features-section p, .ai-features-section .section-header p,
.white-label-section p,
.cta-content p, .cta-section p,
.fitplex-hero p,
.ai-feature-card p, .ai-feature-card ul li,
.t-section--dark .t-featurerow p,
.t-section--dark .t-step p,
.app-feature-tile p,
.app-feature-note { color: var(--t-brand-body) !important; }

.t-hero .t-crumb, .breadcrumb { color: var(--t-brand-body); }
.t-hero .t-crumb a, .breadcrumb a { color: var(--t-brand-ink); }
.t-hero .t-crumb a:hover, .breadcrumb a:hover { color: var(--t-brand-ink); text-decoration: underline; }

.t-section--dark .t-eyebrow,
.ai-features-section .badge,
.white-label-section .badge,
.ai-features-section .badge[style],
.white-label-section .badge[style] { color: var(--t-brand-ink) !important; }
.t-section--dark .t-eyebrow i,
.ai-features-section .badge i,
.white-label-section .badge i,
.hero-text .badge, .hero .badge,
.hero-text .badge i, .hero .badge i { color: var(--t-brand-ink) !important; }

.t-section--dark .t-accent,
.t-hero .t-accent { color: var(--t-brand-ink); }

/* -- surfaces sitting on orange ------------------------------------------- */

.t-section--dark .t-card,
.t-section--dark .t-step,
.ai-feature-card,
.ai-features-section .feature-card,
.white-label-section .feature-card,
.app-feature-tile {
    background: rgba(255, 255, 255, .82);
    border-color: var(--t-brand-line);
    color: var(--t-brand-ink);
}
.ai-feature-card:hover,
.ai-features-section .feature-card:hover,
.white-label-section .feature-card:hover { border-color: rgba(28, 14, 4, .34); }

.t-section--dark .t-icon,
.ai-features-section .feature-icon,
.white-label-section .feature-icon,
.ai-feature-card .icon,
.app-feature-tile .tile-icon {
    background: var(--t-brand) !important;
    color: var(--t-brand-ink) !important;
}

.ai-feature-card ul li i { color: var(--t-brand-ink) !important; }

.ai-badge,
.ai-feature-card .ai-badge,
.ai-features-section .ai-badge,
.white-label-section .ai-badge {
    background: var(--t-brand-ink);
    color: #fff;
    border-color: var(--t-brand-ink);
}

.t-hero .t-chip,
.t-section--dark .t-chip {
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--t-brand-line);
    color: var(--t-brand-ink);
}
.t-hero .t-chip i,
.t-section--dark .t-chip i { color: var(--t-brand-ink); }

.t-section--dark .t-checks,
.t-hero .t-checks { border-top-color: var(--t-brand-line); }
.t-section--dark .t-checks li,
.t-hero .t-checks li { color: var(--t-brand-ink); }
.t-section--dark .t-checks i,
.t-hero .t-checks i { color: var(--t-brand-ink); }

.t-section--dark .t-media { border-color: var(--t-brand-line); background: rgba(255,255,255,.5); }
.t-hero .t-stat-l, .t-section--dark .t-stat-l { color: var(--t-brand-body); }
.stat-item h3 { color: var(--t-brand-ink); }
.trust-badge { color: var(--t-brand-body); }
.trust-badge i { color: var(--t-brand-ink); }

.ai-feature-card .card-visual { border-color: var(--t-brand-line); }

/* -- buttons on orange ---------------------------------------------------- */

.t-hero .t-btn--primary,
.t-cta .t-btn--primary,
.t-section--dark .t-btn--primary,
.page-header .btn-primary,
.hero .btn-primary,
.ai-features-section .btn-primary,
.white-label-section .btn-primary,
.cta-section .btn-primary,
.fitplex-hero .fitplex-btn,
.cta-section .fitplex-btn {
    background: var(--t-brand-ink) !important;
    border-color: var(--t-brand-ink) !important;
    color: #fff !important;
}
.t-hero .t-btn--primary:hover,
.t-cta .t-btn--primary:hover,
.t-section--dark .t-btn--primary:hover,
.page-header .btn-primary:hover,
.hero .btn-primary:hover,
.ai-features-section .btn-primary:hover,
.white-label-section .btn-primary:hover,
.cta-section .btn-primary:hover,
.fitplex-hero .fitplex-btn:hover,
.cta-section .fitplex-btn:hover { filter: brightness(1.5); }

.t-hero .t-btn--ghost,
.t-cta .t-btn--ghost,
.t-section--dark .t-btn--ghost,
.page-header .btn-outline,
.cta-section .btn-outline,
.ai-features-section .btn-outline,
.white-label-section .btn-outline,
.page-header .btn-white,
.cta-section .btn-white {
    background: transparent !important;
    color: var(--t-brand-ink) !important;
    border-color: rgba(28, 14, 4, .34) !important;
}
.t-hero .t-btn--ghost:hover,
.t-cta .t-btn--ghost:hover,
.t-section--dark .t-btn--ghost:hover,
.page-header .btn-outline:hover,
.cta-section .btn-outline:hover,
.ai-features-section .btn-outline:hover,
.white-label-section .btn-outline:hover { background: rgba(255, 255, 255, .35) !important; color: var(--t-brand-ink) !important; }

.t-hero .t-btn--dark,
.t-cta .t-btn--dark,
.t-section--dark .t-btn--dark { background: var(--t-brand-ink); border-color: var(--t-brand-ink); color: #fff; }

.t-section--dark .app-store-badge,
.app-store-badge { background: var(--t-brand-ink); border-color: var(--t-brand-ink); color: #fff; }

/* -- browser chrome inside the orange hero -------------------------------- */

.t-hero .t-browser { box-shadow: 0 40px 80px -34px rgba(28, 14, 4, .5); }

/* -- featured plan card + comparison header ------------------------------- */

.t-plan--featured {
    background: var(--t-brand);
    border-color: var(--t-brand);
    color: var(--t-brand-ink);
    box-shadow: 0 30px 60px -30px rgba(252, 120, 0, .55);
}
.t-plan--featured .t-plan-head { border-bottom-color: var(--t-brand-line); }
.t-plan--featured .t-plan-name { color: var(--t-brand-body); }
.t-plan--featured .t-plan-price,
.t-plan--featured .t-plan-usage { color: var(--t-brand-ink); }
.t-plan--featured .t-plan-per { color: var(--t-brand-body); }
.t-plan--featured .t-plan-billing { color: var(--t-brand-body); }
.t-plan--featured .t-plan-limit { background: rgba(255, 255, 255, .5); color: var(--t-brand-ink); }
.t-plan--featured .t-plan-includes { color: var(--t-brand-ink); }
.t-plan--featured .t-plan-features li { color: var(--t-brand-body); }
.t-plan--featured .t-plan-features i { color: var(--t-brand-ink); }
.t-plan--featured .t-plan-badge { background: var(--t-brand-ink); color: #fff; }
.t-plan--featured .t-btn--primary,
.t-plan--featured .t-btn--dark { background: var(--t-brand-ink); border-color: var(--t-brand-ink); color: #fff; }

.comparison-table th.featured-col { background: var(--t-brand); color: var(--t-brand-ink); }
.comparison-table th.featured-col small { color: var(--t-brand-body); }

/* -- footer --------------------------------------------------------------- */

.t-footer { color: var(--t-brand-ink); }
.t-footer-brand p { color: var(--t-brand-body); }
.t-footer-col h4 { color: var(--t-brand-body); }
.t-footer-col a { color: var(--t-brand-ink); }
.t-footer-col a:hover { color: var(--t-brand-ink); text-decoration: underline; }
.t-footer-contact i { color: var(--t-brand-ink); }
.t-footer-social a { background: rgba(255, 255, 255, .45); border-color: var(--t-brand-line); color: var(--t-brand-ink); }
.t-footer-social a:hover { background: var(--t-brand-ink); border-color: var(--t-brand-ink); color: #fff; }
.t-footer .t-btn--primary { background: var(--t-brand-ink); color: #fff; }
.t-footer .t-btn--primary:hover { background: var(--t-brand-ink); color: #fff; filter: brightness(1.5); }
.t-footer-bottom { border-top-color: var(--t-brand-line); }
.t-footer-bottom p { color: var(--t-brand-body); }
.t-footer-bottom strong { color: var(--t-brand-ink); }
.t-footer-bottom a { color: var(--t-brand-ink); }
.t-footer-bottom a:hover { color: var(--t-brand-ink); text-decoration: underline; }
.t-sep { color: var(--t-brand-line); }

/* -- topic-template article bands ----------------------------------------- */

.stats-bar { background: var(--t-surface-alt); }

/* -- white-label section internals on orange ------------------------------ */

.white-label-section > div[style*="radial-gradient"] { display: none; }

.white-label-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--t-brand-ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--t-r-pill);
    padding: 7px 15px;
    font: 700 11.5px var(--t-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: none;
}
.white-label-badge i { color: #fff !important; }

.white-label-benefit-item > i { color: var(--t-brand-ink) !important; }
.white-label-benefit-item h4 { color: var(--t-brand-ink) !important; }
.white-label-benefit-item p  { color: var(--t-brand-body) !important; }

.white-label-app-box {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid var(--t-brand-line) !important;
    color: var(--t-brand-ink) !important;
    box-shadow: none;
}
.white-label-app-box i { color: var(--t-brand-ink) !important; }
.white-label-app-box span { color: var(--t-brand-ink) !important; }

/* ===========================================================================
   BLOG ARTICLE
   =========================================================================== */

.article-header { padding-bottom: 46px; }
.article-header h1 {
    font: 800 clamp(28px, 3.4vw, 44px)/1.14 var(--t-display);
    letter-spacing: -.032em;
    color: var(--t-brand-ink);
    margin: 22px 0 26px;
    text-wrap: balance;
}
.article-header .breadcrumb { justify-content: flex-start; }

.article-meta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid var(--t-brand-line);
    padding-top: 22px;
}
.author-block { display: flex; align-items: center; gap: 12px; }
.article-avatar {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--t-brand-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 16px var(--t-body);
}
.article-author-name { display: block; font: 600 15px var(--t-body); color: var(--t-brand-ink); }
.article-author-role { display: block; font: 400 13px var(--t-body); color: var(--t-brand-body); margin-top: 2px; }
.article-dates { display: flex; gap: 14px; align-items: center; font: 500 13.5px var(--t-body); color: var(--t-brand-body); }
.article-dates i { margin-right: 5px; }

.article-image-wrapper {
    border-radius: var(--t-r-card);
    overflow: hidden;
    margin-bottom: 44px;
    border: 1px solid var(--t-line);
    height: 420px;
    background: var(--t-surface-alt);
}
.article-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-body-content { font: 400 17px/1.8 var(--t-body); color: var(--t-text-body); }
.article-body-content p { margin: 0 0 26px; color: var(--t-text-body); }
.article-body-content p.lead { font-size: 20px; line-height: 1.7; color: var(--t-text); font-weight: 500; margin-bottom: 32px; }
.article-body-content h2 {
    font: 800 clamp(24px, 2.4vw, 32px)/1.2 var(--t-display);
    letter-spacing: -.028em;
    color: var(--t-text);
    margin: 48px 0 18px;
}
.article-body-content h3 {
    font: 700 23px/1.25 var(--t-display);
    letter-spacing: -.022em;
    color: var(--t-text);
    margin: 44px 0 16px;
}
.article-body-content h4 { font: 700 19px/1.3 var(--t-display); letter-spacing: -.018em; color: var(--t-text); margin: 32px 0 12px; }
.article-body-content strong { color: var(--t-text); font-weight: 700; }
.article-body-content em { color: var(--t-text); }
.article-body-content a { color: var(--t-accent-link); text-decoration: underline; text-underline-offset: 2px; }
.article-body-content a:hover { color: var(--t-accent-hover); }
.article-body-content ul,
.article-body-content ol { margin: 0 0 28px; padding-left: 22px; }
.article-body-content li { margin-bottom: 11px; color: var(--t-text-body); }
.article-body-content img { max-width: 100%; height: auto; border-radius: var(--t-r-card); display: block; margin: 32px 0; }
.article-body-content table { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15px; }
.article-body-content th,
.article-body-content td { border: 1px solid var(--t-line); padding: 11px 14px; text-align: left; }
.article-body-content th { background: var(--t-surface-alt); font-weight: 700; color: var(--t-text); }
.article-body-content blockquote {
    border-left: 3px solid var(--t-accent);
    background: var(--t-surface-alt);
    border-radius: 0 var(--t-r-card) var(--t-r-card) 0;
    padding: 20px 24px;
    margin: 34px 0;
    font-style: normal;
    color: var(--t-text-body);
    font-size: 17px;
    line-height: 1.7;
}
.article-body-content blockquote p:last-child { margin-bottom: 0; }

.article-tags {
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--t-line-b);
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    align-items: center;
}
.article-tags-label {
    font: 700 12px var(--t-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-text-soft);
    margin-right: 5px;
}
.article-tag-pill {
    background: var(--t-accent-pale);
    border: 1px solid rgba(252, 120, 0, .28);
    color: var(--t-accent-deep);
    padding: 6px 14px;
    border-radius: var(--t-r-pill);
    font: 600 13px var(--t-body);
}
.article-tag-pill:hover { background: var(--t-accent); color: var(--t-ink-deep); border-color: var(--t-accent); }

.article-share-actions {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--t-line-b);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.article-back { font: 700 15px var(--t-body); color: var(--t-accent-link); display: inline-flex; align-items: center; gap: 8px; }
.article-back:hover { color: var(--t-accent-hover); }
.article-share { display: flex; align-items: center; gap: 10px; }
.article-share-label { font: 700 12px var(--t-body); letter-spacing: .1em; text-transform: uppercase; color: var(--t-text-soft); margin-right: 6px; }
.article-share a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--t-line);
    color: var(--t-text-muted);
    display: grid;
    place-items: center;
    transition: all .18s ease;
}
.article-share a:hover { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-ink-deep); }

@media (max-width: 640px) {
    .article-image-wrapper { height: 220px; }
    .article-body-content { font-size: 16px; }
}

.breadcrumb span,
.t-hero .t-crumb span { color: var(--t-brand-body); }

/* -- contact map card ------------------------------------------------------ */

.map-card-wrapper {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    padding: 18px;
    box-shadow: 0 30px 60px -34px rgba(28, 14, 4, .45);
}
.map-header { border-bottom: 0; padding-bottom: 12px; }
.map-title { color: var(--t-text-muted); font: 500 13px var(--t-body); }
.map-title i { color: var(--t-accent-link); }
.map-iframe-container { border-radius: var(--t-r-card); overflow: hidden; border: 1px solid var(--t-line); }
.map-address-info { border-top-color: var(--t-line-b) !important; }

/* eyebrow badges sitting on an orange band */
.page-header .badge,
.t-hero .badge,
.fitplex-hero .badge,
.cta-section .badge,
.t-cta .badge,
.t-section--dark .badge { color: var(--t-brand-body) !important; }
.page-header .badge i,
.t-hero .badge i,
.fitplex-hero .badge i,
.cta-section .badge i,
.t-cta .badge i,
.t-section--dark .badge i { color: var(--t-brand-ink) !important; }

/* the eyebrow inside an orange card (e.g. the careers application card) */
#apply-partner-form .badge { color: var(--t-brand-body) !important; }
#apply-partner-form .badge i { color: var(--t-brand-ink) !important; }

/* -- /about hero ---------------------------------------------------------- */

.about-hero {
    background: var(--t-brand) !important;
    background-image: none !important;
    color: var(--t-brand-ink);
    padding: 76px 0 84px;
    position: relative;
    overflow: hidden;
}
.about-hero h1 {
    font: 800 clamp(34px, 4.2vw, 54px)/1.06 var(--t-display);
    letter-spacing: -.035em;
    color: var(--t-brand-ink);
    margin: 0 0 20px;
}
.about-hero p { font: 400 17px/1.7 var(--t-body); color: var(--t-brand-body); }
.about-hero p strong { color: var(--t-brand-ink); }
.about-hero .breadcrumb { justify-content: flex-start; }
.about-hero .dashboard-preview {
    background: #fff;
    border: 1px solid var(--t-brand-line);
    border-radius: var(--t-r-card);
    box-shadow: 0 40px 80px -34px rgba(28, 14, 4, .5);
    color: var(--t-text);
}
.about-hero .dashboard-preview-header { background: var(--t-surface-alt); border-bottom: 1px solid var(--t-line); }
.about-hero .dashboard-preview-content { background: #fff; }
.about-hero .preview-card-inner,
.about-hero .dashboard-preview-content * { color: var(--t-text); }
.about-hero .dashboard-preview-content .text-gradient { color: var(--t-accent-link); }

/* -- /tools orange bands --------------------------------------------------- */

.tools-hero .btn-primary,
.grow-section .btn-primary {
    background: var(--t-brand-ink) !important;
    border-color: var(--t-brand-ink) !important;
    color: #fff !important;
}
.tools-hero .btn-primary:hover,
.grow-section .btn-primary:hover { filter: brightness(1.5); }

/* Belt and braces: nothing on the page may scroll the document sideways. */
html, body { overflow-x: hidden; }

/* .section-dark is another band that used to be ink */
.section-dark {
    background: var(--t-brand) !important;
    color: var(--t-brand-ink);
}
.section-dark .section-header h2,
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--t-brand-ink); }
.section-dark .section-header p, .section-dark p { color: var(--t-brand-body); }
.section-dark .badge { color: var(--t-brand-body) !important; }
.section-dark .badge i { color: var(--t-brand-ink) !important; }
.section-dark .feature-card {
    background: rgba(255, 255, 255, .82);
    border-color: var(--t-brand-line);
}
.section-dark .feature-card h4 { color: var(--t-brand-ink); }
.section-dark .feature-card p  { color: var(--t-brand-body); }
.section-dark .feature-icon { background: var(--t-brand) !important; color: var(--t-brand-ink) !important; }

.about-hero .breadcrumb { color: var(--t-brand-body); }
.about-hero .breadcrumb a,
.about-hero .breadcrumb span { color: var(--t-brand-ink); }

/* The mock browser chrome in the hero is decorative, but keep its URL legible. */
.t-browser-url { color: var(--t-text-soft); }

/* -- /about + /contact info cards (were built for a dark ground) ----------- */

.contact-info-card {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
}
.contact-info-card:hover {
    background: #fff;
    border-color: rgba(11, 15, 20, .2);
    box-shadow: none;
}
.contact-info-card .icon-wrapper { background: var(--t-accent-pale); color: var(--t-accent-deep); }
.contact-info-card .icon-wrapper i { color: inherit; }
.contact-info-card .info-content h4 {
    font: 700 17px/1.3 var(--t-display);
    letter-spacing: -.015em;
    color: var(--t-text);
}
.contact-info-card .info-content p,
.contact-info-card .info-content a { font: 400 15px/1.6 var(--t-body); color: var(--t-text-muted); }
.contact-info-card .info-content a:hover { color: var(--t-accent-hover); }

/* The premium submit button is a solid orange fill: use the dark-on-orange ink. */
.submit-btn-premium {
    background: var(--t-accent) !important;
    background-image: none !important;
    color: var(--t-brand-ink) !important;
    border-radius: var(--t-r-pill);
}
.submit-btn-premium:hover { filter: brightness(1.06); }

.card-action-link { color: var(--t-accent-hover); }
.card-action-link:hover { color: var(--t-accent-hover); }

/* -- overlays that sit on photography, not on the orange band -------------- */
/* These float above images, so they keep the white-on-scrim treatment rather
   than the dark-on-orange ramp the hero rules above apply. */

.hero-float-card {
    background: rgba(11, 15, 20, .72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--t-r-card);
    color: #fff;
}
.hero-float-card h5,
.hero-float-card h4,
.hero-float-card strong { color: #fff; }
.hero-float-card span,
.hero-float-card p { color: rgba(255, 255, 255, .78); }
.hero-float-card i { color: var(--t-accent-on-dark); }
.hero-float-card > div:first-child,
.hero-float-card .icon { background: var(--t-accent); color: var(--t-ink-deep); }

.slide-overlay-content {
    background: rgba(11, 15, 20, .8);
    border-color: rgba(255, 255, 255, .16);
}
.slide-overlay-content h3,
.slide-overlay-content h4 { color: var(--t-accent-on-dark) !important; }
.slide-overlay-content p { color: rgba(255, 255, 255, .82) !important; }

/* -- programmatic hero: text that used the bright orange as an accent ------ */
/* On the orange band those highlights vanish, so they take the ink instead. */

.hero-text h1 span,
.hero-text h1 span:first-child,
.hero-text h1 .text-gradient { color: var(--t-brand-ink) !important; }
.hero-text p strong { color: var(--t-brand-ink); }
.hero-stat h3 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--t-brand-ink);
    color: var(--t-brand-ink) !important;
}
.hero-stat p  { color: var(--t-brand-body) !important; }
.hero-stats { border-top-color: var(--t-brand-line); }

.hero-float-card .card-content h4 { color: #fff !important; }
.hero-float-card .card-content p  { color: rgba(255, 255, 255, .78) !important; }
.hero-float-card > i {
    background: var(--t-accent);
    color: var(--t-ink-deep);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: none;
}
.slider-btn { background: rgba(11, 15, 20, .7); border-color: rgba(255,255,255,.2); color: #fff; }
.slider-btn:hover { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-ink-deep); }


/* -- dedicated free-data-migration section -------------------------------- */

/* The three "Move all ... to Fitplex" cards and the sources -> database flow
   are two separate ideas; they need clear air between them, not a card gap. */
.t-migrate-grid { margin-bottom: 0; }

.t-migrate-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: center;
    max-width: 940px;
    margin: 88px auto 0;
    padding-top: 72px;
    border-top: 1px solid var(--t-brand-line);
    position: relative;
}
.t-migrate-flow::before {
    content: "Where your data comes from";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--t-brand);
    padding: 0 16px;
    font: 700 11.5px var(--t-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-brand-body);
    white-space: nowrap;
}
.t-migrate-sources { display: flex; flex-direction: column; gap: 12px; }
.t-migrate-source { padding: 16px; display: flex; align-items: center; gap: 14px; }

.t-migrate-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--t-brand-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex: none;
}

.t-migrate-target { padding: 30px 22px; border-style: dashed; border-color: rgba(28, 14, 4, .35); }

.t-migrate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 44px;
}

@media (max-width: 860px) {
    .t-migrate-flow { grid-template-columns: 1fr; gap: 18px; margin-top: 64px; padding-top: 56px; }
    .t-migrate-arrow { transform: rotate(90deg); margin: 0 auto; }
    .t-migrate-flow::before { font-size: 10.5px; }
}
@media (max-width: 640px) {
    .t-migrate-actions .t-btn { width: 100%; justify-content: center; }
}

/* -- grid blowout guards --------------------------------------------------- */
/* A `1fr` track's automatic minimum is its content's min-content width, so a
   nested grid (or a long unbroken string) can push a column wider than the
   viewport. `minmax(0, …)` lets the track shrink. Without this the WhatsApp
   module on /features ran ~94px past the right edge on a phone. */

.whatsapp-split-section { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }

@media (max-width: 991px) {
    .whatsapp-split-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .whatsapp-split-section > .features-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Same guard for the other legacy two-column splits. */
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.features-grid,
.ai-features-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Media and code can't be allowed to set the page's minimum width either. */
img, video, canvas, svg, iframe, table, pre { max-width: 100%; }

/* -- narrow-phone gutter --------------------------------------------------- */
/* At 320px a 32px gutter each side leaves only 256px of content, which is what
   pushed several card grids past the edge. Tighten it on the smallest screens. */

@media (max-width: 400px) {
    .t-container,
    .container { padding-left: 18px; padding-right: 18px; }
}

/* -- last narrow-phone fixes ---------------------------------------------- */

/* Two columns of padded cards don't fit a 320px screen; go single-column. */
@media (max-width: 400px) {
    .modules-grid-seo { grid-template-columns: minmax(0, 1fr); }
    .module-item-seo  { padding: 1.1rem 1rem; }
}

/* The /apps cards and their inner two-up grids need the same shrink guard. */
.app-card, .tool-card { min-width: 0; }
@media (max-width: 480px) {
    .apps-grid,
    .tools-grid { grid-template-columns: minmax(0, 1fr); }
    .app-card [style*="grid-template-columns: 1fr 1fr"],
    .app-card [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Calculator panels: let them shrink, and ease the padding on small phones. */
.calculator-layout, .input-panel, .dashboard-panel { min-width: 0; }
@media (max-width: 400px) {
    .input-panel, .dashboard-panel { padding: 1.25rem !important; }
}