/* ===========================================================================
   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: 16.5px;
    line-height: 1.62;
    -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: 92px 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: 600 12.5px/1 var(--t-mono);
    letter-spacing: .12em;
    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;
    /* 64px overflowed the hero column and broke a two-line headline into
       three. This is still a step up from the old 56px, and the intended
       shape holds. */
    font-size: clamp(34px, 4.3vw, 56px);
    line-height: 1.05;
    letter-spacing: -.035em;
    margin: 0 0 18px;
    text-wrap: balance;
}
.t-h2 {
    font-family: var(--t-display);
    font-weight: 800;
    font-size: clamp(30px, 3.3vw, 44px);
    line-height: 1.1;
    letter-spacing: -.028em;
    margin: 0 0 14px;
    text-wrap: balance;
}
.t-h3 {
    font-family: var(--t-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.28;
    letter-spacing: -.018em;
    margin: 0 0 8px;
}
.t-h4 {
    font-family: var(--t-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.32;
    letter-spacing: -.012em;
    margin: 0 0 6px;
}

.t-lead   { font-size: 19px; line-height: 1.62; color: var(--t-text-body); margin: 0; max-width: 62ch; }
.t-body   { font-size: 16.5px; line-height: 1.65; color: var(--t-text-muted); margin: 0; }
.t-small  { font-size: 14px; line-height: 1.6; 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); }

/* The utility bar is ink, not paper: it separates the page from the chrome
   above it and gives the white nav below a clean edge to sit on. */
.t-topbar { background: var(--t-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.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 13px var(--t-body);
    color: rgba(255, 255, 255, .82);
}
.t-topbar-links a:hover { color: #fff; }
/* On ink, the link colour that passes on white is too dark to read, so the
   icons take the on-dark accent instead. */
.t-topbar-links i { color: var(--t-accent-on-dark); font-size: 11.5px; }
.t-topbar-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 11.5px var(--t-mono);
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.t-topbar-badge i { color: var(--t-accent-on-dark); }

.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; }
/* Direct children of the solo hero are grid items and would stretch full-width. */
.t-hero-inner--solo > .t-chip { justify-self: center; }
.t-hero-inner--solo > .fp-breadcrumbs { justify-self: 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; }

/* -- Customer app wall: scrolling icons + names ---------------------------- */
.t-appwall {
    margin-top: 38px;
    overflow: hidden;
    /* Fade the ends so icons enter and leave rather than being clipped. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.t-appwall-track {
    display: flex;
    width: max-content;
    gap: 34px;
    padding: 6px 17px;
    animation: t-appwall-scroll 46s linear infinite;
}
.t-appwall:hover .t-appwall-track,
.t-appwall:focus-within .t-appwall-track { animation-play-state: paused; }

@keyframes t-appwall-scroll {
    from { transform: translate3d(0, 0, 0); }
    /* Half the track is one full copy of the list, so -50% loops seamlessly. */
    to   { transform: translate3d(-50%, 0, 0); }
}

.t-appwall-item {
    flex: 0 0 auto;
    width: 148px;
    margin: 0;
    text-align: center;
}
.t-appwall-item img {
    width: 148px;
    height: 148px;
    display: block;
    border-radius: 30px;
    background: #000;
    box-shadow: 0 14px 30px -14px rgba(11, 15, 20, .55), 0 0 0 1px rgba(11, 15, 20, .08);
}
.t-appwall-item figcaption { display: block; margin-top: 13px; }
.t-appwall-name {
    display: block;
    font: 700 14px/1.3 var(--t-display);
    letter-spacing: -.01em;
    color: var(--t-text);
}
.t-appwall-tag {
    display: block;
    margin-top: 3px;
    font: 500 11.5px/1.4 var(--t-body);
    color: var(--t-text-soft);
}

@media (max-width: 640px) {
    .t-appwall-track { gap: 24px; padding: 6px 12px; }
    .t-appwall-item, .t-appwall-item img { width: 118px; }
    .t-appwall-item img { height: 118px; border-radius: 24px; }
}

/* Motion is decorative here; without it the wall becomes a normal scroller. */
@media (prefers-reduced-motion: reduce) {
    .t-appwall { overflow-x: auto; }
    .t-appwall-track { animation: none; }
    .t-appwall-item:nth-child(n + 7) { display: none; }
}

/* -- "In Free plan" badge on /features modules ----------------------------- */
.free-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 4px 11px;
    border-radius: var(--t-r-pill);
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    border: 1px solid rgba(252, 120, 0, .28);
    font: 700 11.5px var(--t-body);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
}
.free-badge:hover { background: var(--t-accent); color: var(--t-brand-ink); border-color: var(--t-accent); }
.free-badge--part { background: transparent; }
.t-section--dark .free-badge,
.section-dark .free-badge { background: rgba(255,255,255,.1); color: #fff; border-color: var(--t-line-on-dark); }

/* -- "Free forever" band under the plan grid (homepage + /pricing) --------- */
.t-freeband {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 30px auto 0;
    padding: 22px 26px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    background: var(--t-surface-alt);
}
.t-freeband-main { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 420px; min-width: 0; }
.t-freeband-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    font-size: 17px;
}
.t-freeband-cta { flex: 0 0 auto; }
@media (max-width: 640px) {
    .t-freeband { padding: 20px; }
    .t-freeband-cta { width: 100%; text-align: center; }
}

/* "Free" nav item earns a pill so it reads as an offer, not another section. */
.t-navlink--free {
    color: var(--t-accent-deep);
    font-weight: 700;
}
.t-navlink--free::after { display: none; }
.t-navlink--free:hover { color: var(--t-accent-deep); }

/* -- /free-gym-software feature cards -------------------------------------- */
.free-feature { display: grid; gap: 20px; }
.free-feature-body { display: flex; gap: 16px; align-items: flex-start; }
.free-feature-body > .t-icon { flex: 0 0 auto; }
.free-feature-body > div { min-width: 0; }
.free-feature-shot {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    background: var(--t-surface-alt);
}
@media (min-width: 861px) {
    .free-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; }
    .free-feature:not(:has(.free-feature-shot)) { grid-template-columns: minmax(0, 1fr); }
}

/* Highest-contrast CTA on the orange hero: white on brand. Used for the
   "Start For Free" primary action so it outranks the ink-filled demo button. */
.t-btn--onbrand {
    background: #fff;
    border-color: #fff;
    color: var(--t-brand-ink);
    box-shadow: 0 10px 26px -12px rgba(28, 14, 4, .55);
}
.t-btn--onbrand:hover { background: #fff; color: var(--t-brand-ink); transform: translateY(-1px); }
.t-btn--onbrand i { color: var(--t-brand-ink); }

/* -- 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.
   `clip`, NOT `hidden` — hidden turns the document into a scroll container and
   every position:sticky inside it stops sticking, which is exactly what had
   happened to the nav. clip does the clipping without the scroll container.
   Older browsers fall back to hidden below, and only lose the sticky nav. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
    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; }
}


/* ===========================================================================
   FAQ + SEO page blocks
   Moved out of pricing.css so city and state pages get them too.
   =========================================================================== */

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

.faq-container { max-width: 840px; margin: 0 auto; }

.faq-item {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 180ms ease;
}

.faq-item:hover { border-color: rgba(11, 15, 20, .2); }
.faq-item.active { border-color: var(--t-accent); }

.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px 22px;
    cursor: pointer;
}

.faq-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    background: var(--t-accent-pale);
    color: var(--t-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.faq-item.active .faq-icon { background: var(--t-accent); color: var(--t-ink-deep); }

.faq-question h4 {
    flex: 1;
    margin: 0;
    font: 700 16.5px/1.4 var(--t-display);
    letter-spacing: -.015em;
    color: var(--t-text);
}

.faq-toggle {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--t-surface-alt);
    color: var(--t-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform 220ms ease, background 180ms ease;
}

.faq-item.active .faq-toggle {
    background: var(--t-accent);
    color: var(--t-ink-deep);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.faq-item.active .faq-answer { max-height: 460px; }

.faq-answer p {
    margin: 0;
    padding: 0 22px 22px 75px;
    font: 400 15px/1.65 var(--t-body);
    color: var(--t-text-muted);
}

@media (max-width: 576px) {
    .faq-answer p { padding-left: 22px; }
}

/* -- breadcrumbs ----------------------------------------------------------- */

.fp-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font: 500 13px var(--t-body);
}
.fp-breadcrumbs li { display: inline-flex; align-items: center; }
.fp-breadcrumbs li + li::before { content: "\203A"; margin-right: 8px; opacity: .55; }
.fp-breadcrumbs a { color: inherit; text-decoration: none; opacity: .85; }
.fp-breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.fp-breadcrumbs [aria-current="page"] { opacity: .7; }
/* On the orange hero the trail uses the dark-on-orange ramp. */
.hero .fp-breadcrumbs { color: var(--t-brand-body); }
.hero .fp-breadcrumbs a { color: var(--t-brand-ink); }

/* -- hand-written city content -------------------------------------------- */

/* Long-form city copy reads left-aligned; the old rule centred everything,
   which is fine for four short paragraphs and wrong for 1,000 words. */
.local-content-seo {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.local-content-seo h2 {
    font: 800 clamp(24px, 2.4vw, 32px)/1.2 var(--t-display);
    letter-spacing: -.028em;
    color: var(--t-text);
    margin: 44px 0 16px;
}
.local-content-seo h2:first-child { margin-top: 0; }
.local-content-seo h3 {
    font: 700 20px/1.3 var(--t-display);
    letter-spacing: -.02em;
    color: var(--t-text);
    margin: 30px 0 10px;
}
.local-content-seo p { font: 400 16.5px/1.75 var(--t-body); color: var(--t-text-body); margin: 0 0 18px; }
.local-content-seo a { color: var(--t-accent-link); text-decoration: underline; text-underline-offset: 2px; }
.local-content-seo a:hover { color: var(--t-accent-hover); }

.fp-hubs, .fp-scenario { margin: 0 0 24px; padding-left: 22px; }
.fp-hubs li, .fp-scenario li {
    font: 400 16px/1.7 var(--t-body);
    color: var(--t-text-body);
    margin-bottom: 12px;
}
.fp-hubs strong, .fp-scenario strong { color: var(--t-text); }
.fp-hubs { list-style: none; padding-left: 0; }
.fp-hubs li { padding-left: 20px; position: relative; }
.fp-hubs li::before {
    content: "";
    position: absolute;
    left: 0; top: 11px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--t-accent);
}

.section#faq .faq-question h3 {
    flex: 1;
    margin: 0;
    font: 700 16.5px/1.4 var(--t-display);
    letter-spacing: -.015em;
    color: var(--t-text);
}

/* -- Free Forever plan ------------------------------------------------------ */

/* Four plans: Free Forever, Starter, Growth, Pro. */
/* The branded app is what Pro is bought for, so the line says so: a gradient
   that travels across the words, and a wand that lifts once in a while. Both
   stop for anyone who has asked for less motion — this is decoration, and a
   pricing page should not move under someone who cannot bear it. */
.t-branded {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
  background: linear-gradient(100deg, #FC7800 0%, #ff4d8d 28%, #8b5cf6 55%, #0ea5e9 78%, #FC7800 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: t-branded-sweep 7s linear infinite;
}
.t-branded strong { font-weight: 900; letter-spacing: .3px; }
.t-branded sup { font-weight: 600; }
.t-branded i {
  /* The icon cannot use the clipped gradient, so it takes one colour from it. */
  color: #8b5cf6; -webkit-text-fill-color: #8b5cf6; font-size: .92em;
  animation: t-branded-wand 3.6s ease-in-out infinite;
}
@keyframes t-branded-sweep { to { background-position: -260% 0; } }
@keyframes t-branded-wand {
  0%, 62%, 100% { transform: none; opacity: .85; }
  70%           { transform: translateY(-2px) rotate(-12deg); opacity: 1; }
  80%           { transform: translateY(-1px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .t-branded, .t-branded i { animation: none; }
  .t-branded { background-position: 0 0; }
}
/* Pro is the featured card, and its background is solid orange. A rainbow on
   orange is mud, so the sweep becomes white through pale gold — same movement,
   legible on the colour it actually sits on. */
.t-plan--featured .t-branded {
  background: linear-gradient(100deg, #ffffff 0%, #fff3c4 22%, #ffffff 44%, #ffe08a 66%, #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: t-branded-sweep 5s linear infinite;
  text-shadow: none;
}
.t-plan--featured .t-branded i { color: #fff8dc; -webkit-text-fill-color: #fff8dc; }
@media (prefers-reduced-motion: reduce) {
  .t-plan--featured .t-branded { animation: none; background-position: 0 0; }
}

/* Three plans, not four: equal columns, and narrow enough that a card is a
   card rather than a banner. */
.t-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; margin-inline: auto; }
.t-plans--3 .t-plan { padding: 30px 24px; min-width: 0; }
@media (max-width: 1023px) { .t-plans--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 767px)  { .t-plans--3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; } }

.t-plans--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
}
.t-plans--4 .t-plan { padding: 28px 20px; min-width: 0; }
.t-plans--4 .t-plan-price { font-size: 34px; }
.t-plans--4 .t-plan-features li { font-size: 13.5px; }

@media (max-width: 1199px) { .t-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; gap: 20px; } }
@media (max-width: 767px)  { .t-plans--4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; } }

/* Growth: the AI tier gets a tinted edge so it reads as distinct from Starter. */
.t-plan--ai { border-color: rgba(252, 120, 0, .45); }
.t-plan--ai .t-plan-tag { background: var(--t-accent-pale); color: var(--t-accent-deep); }

/* "On request" stands where an amount used to be: same slot, calmer weight. */
.t-plan-price--ask {
    font-size: 26px;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.t-plan-cta .fa-whatsapp { margin-right: 7px; }

/* Struck-through standard price above the current price. */
.t-plan-was {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
    font: 500 15px/1.2 var(--t-body);
    color: var(--t-text-soft);
    flex-wrap: wrap;
}
.t-plan-was s { text-decoration-thickness: 1.5px; }
.t-plan-off {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--t-brand);
    color: var(--t-brand-ink);
    font: 700 11.5px/1.5 var(--t-body);
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* Google Play + App Store chips inside a plan card's app feature row. */
.t-plan-feature--app > span { display: block; }
.t-plan-stores {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}
.t-plan-store {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--t-line);
    border-radius: 7px;
    background: var(--t-surface);
    color: var(--t-text-body);
    font: 600 11.5px/1.35 var(--t-body);
    white-space: nowrap;
    text-decoration: none;
}
.t-plan-store i { font-size: 13px; color: var(--t-text); }
a.t-plan-store:hover { border-color: var(--t-ink); color: var(--t-text); }

/* On the brand-orange featured card the chips need their own contrast. */
.t-plan--featured .t-plan-store {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(28, 14, 4, .18);
    color: var(--t-brand-ink);
}
.t-plan--featured .t-plan-store i { color: var(--t-brand-ink); }
a.t-plan--featured .t-plan-store:hover,
.t-plan--featured a.t-plan-store:hover { background: #fff; border-color: var(--t-brand-ink); }

/* The featured card is already brand-orange, so the pill flips to ink. */
.t-plan--featured .t-plan-was { color: rgba(28, 14, 4, .72); }
.t-plan--featured .t-plan-off { background: var(--t-ink); color: #fff; }

/* The free card reads as an on-ramp, not a discounted paid plan. */
.t-plan--free { border-color: rgba(11, 15, 20, .22); background: var(--t-surface-alt); }
.t-plan--free .t-plan-tag { background: var(--t-ink); color: #fff; }

.t-plan-note {
    text-align: center;
    font: 500 12.5px var(--t-body);
    color: var(--t-text-soft);
    margin: 10px 0 0;
}

.t-plans-upgrade {
    margin: 30px auto 0;
    max-width: 720px;
    font: 500 15px/1.6 var(--t-body);
    color: var(--t-text-body);
}

/* ============================================================================
   REFRESH — bigger type is above; this is the chrome around it.
   Same palette throughout: the orange stays the accent, the ink stays the
   text. What changes is depth (soft shadows instead of flat fills), shape
   (squircles instead of small rounded squares) and a little life on hover.
   ========================================================================= */

/* --- icons -----------------------------------------------------------------
   The old chip was a 40px pale square with a solid-orange glyph, repeated
   forty times down a page — which is what read as dull. Now: larger, a soft
   gradient wash, a hairline ring, and a shadow tinted with the accent so it
   sits on the page rather than on top of it. */
.t-icon,
.feature-icon {
    width: 54px; height: 54px;
    border-radius: 17px;                       /* squircle, not a rounded box */
    font-size: 21px;
    background: linear-gradient(145deg, #FFF3E8 0%, #FFE2C8 100%);
    color: var(--t-accent-deep);
    border: 1px solid rgba(252, 120, 0, .18);
    box-shadow: 0 6px 16px rgba(252, 120, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease;
}
.t-icon--lg { width: 66px; height: 66px; font-size: 26px; border-radius: 21px; }

/* A grid of identical orange chips is monotonous. Every fourth card borrows a
   neighbouring hue — still the brand family, just not forty of the same. */
.t-grid > *:nth-child(4n+2) .t-icon,
.t-cards > *:nth-child(4n+2) .t-icon,
.feature-card:nth-child(4n+2) .feature-icon {
    background: linear-gradient(145deg, #FFF0F4 0%, #FFD9E4 100%);
    border-color: rgba(236, 72, 153, .18); color: #9D174D;
    box-shadow: 0 6px 16px rgba(236, 72, 153, .13), inset 0 1px 0 rgba(255,255,255,.7);
}
.t-grid > *:nth-child(4n+3) .t-icon,
.t-cards > *:nth-child(4n+3) .t-icon,
.feature-card:nth-child(4n+3) .feature-icon {
    background: linear-gradient(145deg, #EEF2FF 0%, #DDE3FF 100%);
    border-color: rgba(99, 102, 241, .18); color: #3730A3;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .13), inset 0 1px 0 rgba(255,255,255,.7);
}
.t-grid > *:nth-child(4n+4) .t-icon,
.t-cards > *:nth-child(4n+4) .t-icon,
.feature-card:nth-child(4n+4) .feature-icon {
    background: linear-gradient(145deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: rgba(16, 185, 129, .18); color: #065F46;
    box-shadow: 0 6px 16px rgba(16, 185, 129, .13), inset 0 1px 0 rgba(255,255,255,.7);
}

/* The card lifts, and its icon lifts a little further — depth, not a jump. */
.t-card:hover .t-icon,
.feature-card:hover .feature-icon { transform: translateY(-3px) scale(1.04); }

.t-section--dark .t-icon,
.t-section--dark .feature-icon {
    background: linear-gradient(145deg, rgba(252,120,0,.22), rgba(252,120,0,.10));
    border-color: rgba(252,120,0,.30); color: var(--t-accent-on-dark);
    box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- cards ------------------------------------------------------------------
   Flat 1px boxes read as a spreadsheet. A soft shadow and a slightly larger
   radius is most of the difference between "form" and "product". */
.t-card, .feature-card {
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
    transition: transform .24s cubic-bezier(.2, .8, .3, 1), box-shadow .24s ease, border-color .24s ease;
}
.t-card:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .10);
    border-color: rgba(252, 120, 0, .28);
}

/* --- eyebrow ----------------------------------------------------------------
   It was grey mono text. A dot in the accent turns it into a label. */
.t-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
/* Only where the label has no icon of its own — several already carry one,
   and a dot beside a tick reads as two bullets. */
.t-eyebrow:not(:has(i)):not(:has(svg))::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--t-accent); flex: none;
}

/* --- buttons ---------------------------------------------------------------- */
.t-btn { border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.t-btn--primary { box-shadow: 0 6px 18px rgba(252, 120, 0, .28); }
.t-btn:hover { transform: translateY(-2px); }
.t-btn--primary:hover { box-shadow: 0 10px 26px rgba(252, 120, 0, .36); }

@media (prefers-reduced-motion: reduce) {
    .t-card, .feature-card, .t-icon, .feature-icon, .t-btn { transition: none; }
    .t-card:hover, .feature-card:hover, .t-btn:hover,
    .t-card:hover .t-icon, .feature-card:hover .feature-icon { transform: none; }
}

/* ============================================================================
   ENTRANCE ANIMATION
   Everything here hangs off html.t-anim, which JS adds before first paint and
   only when the visitor has not asked for reduced motion. No class, no hidden
   state — so with scripting off the page renders exactly as it always did,
   rather than staying blank. That is the whole reason it is done this way.
   ========================================================================= */

/* --- the hero, on load ------------------------------------------------------
   Staggered by hand rather than by script: four elements, in the order a
   person reads them. */
.t-anim .t-hero-inner > * > .t-eyebrow,
.t-anim .t-hero-inner > * > .t-h1,
.t-anim .t-hero-inner > * > .t-lead,
.t-anim .t-hero-actions,
.t-anim .t-hero-note,
.t-anim .t-hero-inner > .t-browser,
.t-anim .t-hero-inner > *:last-child > .t-browser {
    animation: t-rise .72s cubic-bezier(.2, .75, .25, 1) both;
}
.t-anim .t-hero-inner > * > .t-eyebrow { animation-delay: .04s; }
.t-anim .t-hero-inner > * > .t-h1      { animation-delay: .12s; }
.t-anim .t-hero-inner > * > .t-lead    { animation-delay: .22s; }
.t-anim .t-hero-actions                { animation-delay: .32s; }
.t-anim .t-hero-note                   { animation-delay: .40s; }
.t-anim .t-hero-inner > .t-browser,
.t-anim .t-hero-inner > *:last-child > .t-browser { animation-delay: .26s; animation-duration: .9s; }

@keyframes t-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* --- everything below the fold, on scroll -----------------------------------
   The observer adds .is-in. Until it does, the element waits — but only ever
   on a page where the script is running. */
.t-anim .t-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .62s cubic-bezier(.2, .75, .25, 1),
                transform .62s cubic-bezier(.2, .75, .25, 1);
    /* The transform is the animation; tell the browser once rather than
       leaving it to guess mid-scroll. */
    will-change: opacity, transform;
}
.t-anim .t-reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Cards in a row arrive one after another. Six steps is enough: beyond that
   the last card is waiting long enough to feel broken rather than deliberate. */
.t-anim .t-reveal[data-step="1"] { transition-delay: .06s; }
.t-anim .t-reveal[data-step="2"] { transition-delay: .12s; }
.t-anim .t-reveal[data-step="3"] { transition-delay: .18s; }
.t-anim .t-reveal[data-step="4"] { transition-delay: .24s; }
.t-anim .t-reveal[data-step="5"] { transition-delay: .30s; }

/* --- counters ---------------------------------------------------------------
   Numbers that count up read as alive; they must not reflow the line while
   they do it. */
.t-anim .t-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .t-anim .t-reveal { opacity: 1; transform: none; transition: none; }
    .t-anim .t-hero-inner *, .t-anim .t-hero-actions { animation: none !important; }
}

/* ============================================================================
   WHATSAPP REMINDERS — four windows, side by side
   Each stage of the renewal chase is its own small chat window, so the four
   can be compared at a glance instead of scrolled through as one thread. The
   colour is the escalation: calm green, an invoice in blue, a payment prompt
   in violet, and red at the point access stops.
   ========================================================================= */
.wa-row {
    margin-top: 40px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
    /* stretch, not start: four windows of different message lengths should
       still end on the same line. */
    align-items: stretch;
}
.wa-box {
    margin: 0; height: 100%; border-radius: 18px; overflow: hidden;
    background: #fff; border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 2px 5px rgba(15,23,42,.05), 0 16px 36px rgba(15,23,42,.09);
    display: flex; flex-direction: column;
}
.wa-stage {
    padding: 13px 15px 11px;
    font: 700 12px/1.25 var(--t-mono);
    letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: #0B6B5E;
    display: flex; flex-direction: column; gap: 3px;
}
.wa-stage { min-height: 62px; justify-content: center; }
.wa-stage span {
    font-family: var(--t-body); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.78);
}
.wa-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; background: #075E54; color: #fff;
    font-size: 13.5px; font-weight: 600;
    border-top: 1px solid rgba(255,255,255,.10);
}
.wa-dot {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    background: #25D366; color: #fff; display: grid; place-items: center; font-size: 13px;
}
.wa-paper {
    flex: 1; padding: 16px 13px 18px;
    background: #ECE5DD;
    display: flex; flex-direction: column; justify-content: flex-start;
}

/* The message itself: an outgoing bubble, tail on the first corner. */
.wa-bubble {
    align-self: flex-end; max-width: 100%;
    padding: 11px 12px 7px;
    border-radius: 14px 4px 14px 14px;
    background: #DCF8C6; color: #0f2417;
    box-shadow: 0 1px 1px rgba(15,23,42,.12);
    font-size: 14.5px; line-height: 1.5;
}
.wa-bubble p { margin: 0 0 5px; }
.wa-bubble b { font-weight: 700; }
.wa-meta { display: block; text-align: right; font-size: 10.5px; color: rgba(15,36,23,.52); }
.wa-meta i { color: #34B7F1; margin-left: 3px; }

/* One palette for all four: WhatsApp's own. They are the same product doing
   the same thing four times, so the stage label carries the escalation and
   the chat stays the colour people recognise. */

.wa-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 0 6px; padding: 8px 13px; border-radius: 9px;
    background: #1D4ED8; color: #fff; font-weight: 600; font-size: 13px;
}
.wa-qr {
    display: grid; place-items: center;
    width: 76px; height: 76px; margin: 6px 0;
    border-radius: 10px; background: #fff; color: #241a3d; font-size: 40px;
    box-shadow: inset 0 0 0 1px rgba(36,26,61,.12);
}

/* Four is too many across a tablet, and far too many on a phone. */
@media (max-width: 1100px) { .wa-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; } }
@media (max-width: 560px)  { .wa-row { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 16px; } }

/* ============================================================================
   ROTATING HEADLINE
   Three H1 lines that rotate. Both live in the markup — SEO and no-JS
   visitors get the pair as one heading — and the script only decides which is
   visible. The box is sized by the TALLER of the two so the hero never jumps
   when they swap, which is the failure mode that makes rotators feel cheap.
   ========================================================================= */
/* The three headlines do not all wrap the same way at every width, and
   chasing that with copy is a losing game. The box is the height of the
   tallest and each line is centred in it, so a shorter headline sits balanced
   instead of leaving a gap hanging beneath it. */
.t-rotator { position: relative; display: grid; align-items: center; }
.t-rotator .t-rot {
    grid-area: 1 / 1;                 /* stacked, so the height is the tallest */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.75,.25,1);
    pointer-events: none;
}
.t-rotator .t-rot.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* Without the script, the stacked pair would overlap into a smudge. This shows
   the first and drops the second out of the layout entirely. */
html:not(.t-rot-live) .t-rotator .t-rot { opacity: 1; transform: none; }
html:not(.t-rot-live) .t-rotator .t-rot + .t-rot { display: none; }

@media (prefers-reduced-motion: reduce) {
    .t-rotator .t-rot { transition: none; }
}


/* ---------------------------------------------------------------------------
 * CITY PAGE VARIANTS
 *
 * The city pages were one layout repeated with a different name in it, which
 * reads as generated even when the words underneath are written per city.
 * The template picks a variant from the slug, so a city always looks the same
 * to a returning visitor and to a crawler, while two neighbouring cities do
 * not look like the same page twice.
 *
 * Only accent and layout change. Nothing here alters content, heading order or
 * anything a search engine reads as substance.
 * ------------------------------------------------------------------------ */

.fp-local { --fp-a: var(--t-accent); --fp-a-soft: rgba(0,0,0,.04); }
.fp-accent-teal   { --fp-a: #0d9488; --fp-a-soft: rgba(13,148,136,.08); }
.fp-accent-amber  { --fp-a: #b45309; --fp-a-soft: rgba(180,83,9,.08); }
.fp-accent-indigo { --fp-a: #4338ca; --fp-a-soft: rgba(67,56,202,.08); }
.fp-accent-rose   { --fp-a: #be123c; --fp-a-soft: rgba(190,18,60,.08); }

.fp-local .local-content-seo h2 {
    padding-left: 14px;
    border-left: 3px solid var(--fp-a);
}
.fp-local .fp-hubs li::before { background: var(--fp-a); }

/* Variant B: the area list as cards rather than a bulleted list. */
.fp-hubs--cards { display: grid; gap: 12px; }
@media (min-width: 720px) { .fp-hubs--cards { grid-template-columns: 1fr 1fr; } }
.fp-hubs--cards li {
    padding: 14px 16px 14px 18px;
    margin: 0;
    background: var(--fp-a-soft);
    border-left: 3px solid var(--fp-a);
    border-radius: 0 8px 8px 0;
}
.fp-hubs--cards li::before { display: none; }

/* Variant C: the walkthrough as a timeline rather than a numbered list. */
.fp-scenario--rail {
    list-style: none;
    padding-left: 0;
    border-left: 2px solid var(--fp-a-soft);
    margin-left: 6px;
}
.fp-scenario--rail li {
    position: relative;
    padding-left: 26px;
    margin-left: 10px;
}
.fp-scenario--rail li::before {
    content: "";
    position: absolute;
    left: -7px; top: 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--fp-a);
}

/* Alternating section rhythm, so a long page does not read as one slab. */
.fp-v1 .local-content-seo h3, .fp-v3 .local-content-seo h3 { color: var(--fp-a); }
.fp-v2 .local-content-seo > p:first-of-type,
.fp-v3 .local-content-seo > p:first-of-type {
    font-size: 17px;
    line-height: 1.75;
    padding: 16px 18px;
    background: var(--fp-a-soft);
    border-radius: 10px;
}