/* ==========================================================================
   Business Arise — light theme for the footer-linked company / resource pages
   ==========================================================================

   SCOPE
   -----
   Every rule in this file is gated on:

       html[data-tk-theme="light"] body.tk-fp …

   `.tk-fp` is emitted by layouts/mainfrontend.blade.php only for the routes in
   $isFooterLinkedPage — the pages linked from the footer's Our Company / Get
   Started / Resources columns. The file is loaded on every page but is inert
   everywhere else, and it is invisible to dark mode because of the
   html[data-tk-theme="light"] gate.

   `bundle` and `tutorials` are deliberately out of scope: both currently
   return 500 for reasons unrelated to theming.

   WHY THESE PAGES NEEDED IT
   -------------------------
   They are legacy WordPress-export views. They carry no theme hook, so light
   mode never reached them, yet some shared components (packages, footer) had
   already been given near-black light-mode text — which then rendered
   black-on-black. Measured before this file: /careers 460 of 490 sampled
   points dark, /media 403/445, /package 161/266 with .tk-title and .tk-price
   at a 1.02:1 contrast ratio (invisible).

   PALETTE
   -------
   Reused verbatim from the approved service-detail light theme
   (tbtk-graphic-design-light.css) and the approved light footer
   (tbtk-footer-redesign.css) — no new colours are introduced here:

       page surface        #F3F6F8
       section surface     #EDF1F4
       card / raised       #FFFFFF
       primary text        #0A0D0F
       secondary text      #4A535D
       muted / meta text   #626B75
       hairline border     rgba(15, 23, 42, 0.10)

   BLUE
   ----
   The accent is the site's existing token, defined on :root in the layout:
   --primary-color #0073FC / --primary-color-dark #005BC7. Nothing here
   invents a colour.

   SOURCE ORDER
   ------------
   This <link> is emitted after every inline <style> in the layout, so it wins
   ties on source order. !important appears only where an inline style
   attribute or a page-level author !important has to be reclaimed; each of
   those is commented at the point of use.
   ========================================================================== */


/* ==========================================================================
   1. PAGE SURFACE
   ==========================================================================
   .content-area is the wrapper on 14 of the 16 pages. The layout declares it
   as a shorthand that also carries a background-position/size/repeat
   (`background: top 900px center/100% auto repeat-y #0b0b0b`), so the whole
   shorthand is restated rather than just the colour — setting only
   background-color would leave the legacy layer behind. */
html[data-tk-theme="light"] body.tk-fp .content-area {
    background: #F3F6F8;
}

/* /package and /my-account/login use their own variants of the same wrapper. */
html[data-tk-theme="light"] body.tk-fp .content-area.package-page {
    background: #F3F6F8;
}

/* The account wrapper's dark radial-gradient lives in a style="" ATTRIBUTE on
   the element. An inline declaration outranks every author rule, so this is
   the one place a page surface needs !important — there is no cascade path to
   it otherwise, and the alternative would be editing markup that the auth
   flow renders. */
html[data-tk-theme="light"] body.tk-fp .content-area.account-area {
    background: #F3F6F8 !important;
}

/* /blog does not use .content-area at all — it has its own shell. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell {
    background: #F3F6F8;
}


/* ==========================================================================
   2. LEGACY SECTION CLASSES
   ==========================================================================
   The same vocabulary the approved service-detail light theme already
   restyles, here reached through .tk-fp instead of #primary.tk-gd. Alternating
   #F3F6F8 / #EDF1F4 keeps the vertical rhythm of the dark design — the
   sections stay distinguishable instead of collapsing into one flat white. */
html[data-tk-theme="light"] body.tk-fp .service_main,
html[data-tk-theme="light"] body.tk-fp .service_main.black,
html[data-tk-theme="light"] body.tk-fp .first_section {
    background-color: #F3F6F8;
    background-image: none;
}

html[data-tk-theme="light"] body.tk-fp .bggrey,
html[data-tk-theme="light"] body.tk-fp .bgplaingrey,
html[data-tk-theme="light"] body.tk-fp .bgblack,
html[data-tk-theme="light"] body.tk-fp .bgservicesection {
    background-color: #EDF1F4;
    background-image: none;
}

/* .bggrey.first_section is a hero band on /about, /how-its-work and
   /partners: it reads as the page opening, so it takes the page surface
   rather than the section surface. */
html[data-tk-theme="light"] body.tk-fp .bggrey.first_section {
    background-color: #F3F6F8;
}

/* /how-its-work carries `style="background:#1d1c1c !important"` on one
   <section>. An inline !important cannot be beaten from a stylesheet at all,
   so that single declaration is removed in the view and replaced by this
   class; the rule below is what now paints it in light mode. Dark mode keeps
   the original value through .tk-legacy-dark-band in the same view. */
html[data-tk-theme="light"] body.tk-fp .bgblack.logosection.tk-legacy-dark-band {
    background-color: #EDF1F4 !important;
    background-image: none !important;
}

/* Card-like legacy containers. */
html[data-tk-theme="light"] body.tk-fp .logo-slide,
html[data-tk-theme="light"] body.tk-fp .innercontainer,
html[data-tk-theme="light"] body.tk-fp .outerinner {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

/* /directory (and its /sitemap alias) contains a PAGE-CONTENT element that
   happens to reuse the class name `footer` on a <div id="footer">. The `div`
   type selector is load-bearing: the canonical site footer is a <footer>
   element, so it can never match this rule and is left entirely to
   tbtk-footer-redesign.css. */
html[data-tk-theme="light"] body.tk-fp div#footer.footer {
    background-color: #EDF1F4;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ==========================================================================
   These pages inherit white text from the dark design. Headings take the
   primary ink, body copy the secondary, meta the muted value — the same
   three-step hierarchy the approved light footer uses. Scoped inside the page
   wrappers so the navbar, footer and cart drawer keep their own treatment. */
html[data-tk-theme="light"] body.tk-fp .content-area h1,
html[data-tk-theme="light"] body.tk-fp .content-area h2,
html[data-tk-theme="light"] body.tk-fp .content-area h3,
html[data-tk-theme="light"] body.tk-fp .content-area h4,
html[data-tk-theme="light"] body.tk-fp .content-area h5,
html[data-tk-theme="light"] body.tk-fp .content-area h6,
html[data-tk-theme="light"] body.tk-fp .content-area .main-title,
html[data-tk-theme="light"] body.tk-fp .content-area strong,
html[data-tk-theme="light"] body.tk-fp .content-area b,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell h1,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell h2,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell h3,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell h4 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area,
html[data-tk-theme="light"] body.tk-fp .content-area p,
html[data-tk-theme="light"] body.tk-fp .content-area li,
html[data-tk-theme="light"] body.tk-fp .content-area td,
html[data-tk-theme="light"] body.tk-fp .content-area th,
html[data-tk-theme="light"] body.tk-fp .content-area span,
html[data-tk-theme="light"] body.tk-fp .content-area div,
html[data-tk-theme="light"] body.tk-fp .content-area label,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell p,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell li {
    color: #4A535D;
}

/* Small print / metadata. */
html[data-tk-theme="light"] body.tk-fp .content-area small,
html[data-tk-theme="light"] body.tk-fp .content-area .date,
html[data-tk-theme="light"] body.tk-fp .content-area .meta,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-meta,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-date {
    color: #626B75;
}

/* Links keep the site accent — but ONLY inside running prose.
   An earlier, broader version of this rule (every <a> in .content-area that
   was not obviously a .btn) recoloured FILLED buttons too, whose background is
   already the brand colour: it put #005BC7 text on the #0073FC "Apply Now"
   button (1.57:1) and on the Trustpilot button (1.64:1). Restricting the rule
   to text containers avoids guessing which anchors are buttons — a button is
   never a direct child of a paragraph or list item's text flow here. */
html[data-tk-theme="light"] body.tk-fp .content-area p > a,
html[data-tk-theme="light"] body.tk-fp .content-area li > a,
html[data-tk-theme="light"] body.tk-fp .content-area td > a,
html[data-tk-theme="light"] body.tk-fp .content-area .accordion-body p > a,
html[data-tk-theme="light"] body.tk-fp .content-area .accordion-body li > a,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell p > a,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell li > a {
    color: var(--primary-color-dark, #005BC7);
}

/* Horizontal rules and legacy dividers. */
html[data-tk-theme="light"] body.tk-fp .content-area hr,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell hr {
    border-color: rgba(15, 23, 42, 0.10);
}


/* ==========================================================================
   4. ACCORDIONS  (/media /press-releases /careers /how-its-work /package
                   /consultation)
   ==========================================================================
   Mirrors the approved treatment at tbtk-graphic-design-light.css:1113. The
   !important on background matches that original: the legacy sheet sets the
   item background with !important, so it has to be reclaimed the same way.
   /careers uses <a class="accordion-button">, the others <button>; both are
   covered. */
html[data-tk-theme="light"] body.tk-fp .accordion-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .accordion-button,
html[data-tk-theme="light"] body.tk-fp a.accordion-button,
html[data-tk-theme="light"] body.tk-fp .accordion-header {
    background-color: #FFFFFF;
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .accordion-button:not(.collapsed) {
    background-color: #EDF1F4;
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .accordion-body,
html[data-tk-theme="light"] body.tk-fp .accordion-body p,
html[data-tk-theme="light"] body.tk-fp .accordion-body li {
    background-color: #FFFFFF;
    color: #4A535D;
}

/* The light rows are bordered cards, so the question and answer need
   inner space instead of sitting on the card's left edge. /package and
   /checkout zero the button's left padding with !important, so it is
   reclaimed the same way. */
html[data-tk-theme="light"] body.tk-fp .accordion-item .accordion-button,
html[data-tk-theme="light"] body.tk-fp .accordion-item .accordion-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Bootstrap paints the chevron as an SVG data-URI stroked in the dark
   theme's light colour; invert it so the marker stays visible on white.
   (Pages whose chevron is a font glyph on a coloured chip are handled
   separately near the end of this file.) */
html[data-tk-theme="light"] body.tk-fp .accordion-button::after {
    filter: invert(1) brightness(0.35);
}


/* ==========================================================================
   5. LEGACY REVIEW WIDGET  .ti-inner   (/consultation ×16, /how-its-work ×1)
   ==========================================================================
   The worst defect measured in this scope. The card stayed #303030 while the
   shared light styling had already recoloured its text, giving
   .ti-review-text 1.69:1 and .ti-name / .ti-date white-on-white at 1.00:1 —
   literally invisible reviewer names and dates. */
html[data-tk-theme="light"] body.tk-fp .ti-inner {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .ti-inner .ti-name,
html[data-tk-theme="light"] body.tk-fp .ti-inner .ti-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .ti-inner .ti-review-text,
html[data-tk-theme="light"] body.tk-fp .ti-inner .ti-recommendation-title,
html[data-tk-theme="light"] body.tk-fp .ti-inner .ti-review-content {
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .ti-inner .ti-date {
    color: #626B75;
}

/* /testimonial's badge strip was the single dark surface left on an otherwise
   light page. */
html[data-tk-theme="light"] body.tk-fp .testimonial-review-badge-strip {
    background-color: #EDF1F4;
}


/* ==========================================================================
   6. GRAVITY FORMS  (6 page forms + the footer newsletter on all 16)
   ==========================================================================
   Fields rendered #2a2a2a on /careers and carried #000 borders on
   /contact-corporate and /partners. Field names, actions and validation are
   untouched — this is colour only.

   :not() guards keep two things out: the phone plugin's own search field
   (intlTelInput manages it) and the footer's newsletter input, which already
   has an approved light treatment in tbtk-footer-redesign.css. */
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.iti__search-input),
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield select,
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield textarea {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield input::placeholder,
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield textarea::placeholder {
    color: #626B75;
    opacity: 1;
}

html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield input:focus,
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield select:focus,
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield textarea:focus {
    border-color: var(--primary-color, #0073FC);
    outline: none;
}

html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield_label,
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gform-field-label {
    color: #0A0D0F;
}

/* The native <select> popup is painted by the OS, which follows color-scheme.
   Without this the menu stays dark while the closed control is light. */
html[data-tk-theme="light"] body.tk-fp .content-area .gform_wrapper .gfield select {
    color-scheme: light;
}

/* The phone plugin's country button rendered #000 on #0b0b0b (1.07:1) on
   /partners. Colour only — the dropdown, dial codes and validation are the
   plugin's and are untouched. */
html[data-tk-theme="light"] body.tk-fp .content-area .iti__selected-country,
html[data-tk-theme="light"] body.tk-fp .content-area .iti__selected-dial-code {
    color: #0A0D0F;
}

/* Generic (non-Gravity) fields on these pages — /blog's search box among
   them. */
html[data-tk-theme="light"] body.tk-fp .content-area input[type="text"]:not(.iti__search-input),
html[data-tk-theme="light"] body.tk-fp .content-area input[type="email"],
html[data-tk-theme="light"] body.tk-fp .content-area input[type="search"],
html[data-tk-theme="light"] body.tk-fp .blog-page-shell input[type="text"],
html[data-tk-theme="light"] body.tk-fp .blog-page-shell input[type="search"],
html[data-tk-theme="light"] body.tk-fp #blog-search-input {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp #blog-search-input::placeholder {
    color: #626B75;
    opacity: 1;
}


/* ==========================================================================
   7. TABLES
   ========================================================================== */
html[data-tk-theme="light"] body.tk-fp .content-area table {
    background-color: #FFFFFF;
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area table th,
html[data-tk-theme="light"] body.tk-fp .content-area table td {
    border-color: rgba(15, 23, 42, 0.10);
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area table thead th {
    background-color: #EDF1F4;
}


/* ==========================================================================
   8. /blog — CARDS, CHIPS, BADGES
   ========================================================================== */
html[data-tk-theme="light"] body.tk-fp .blog-card,
html[data-tk-theme="light"] body.tk-fp .blog-card-body,
html[data-tk-theme="light"] body.tk-fp .blog-article-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .blog-card-title,
html[data-tk-theme="light"] body.tk-fp .blog-card h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .blog-card-excerpt {
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .blog-filter-chip {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #4A535D;
}


/* ==========================================================================
   9. /my-account/login — AUTH CARD
   ==========================================================================
   Appearance only. No field names, no form action, no validation, no
   authentication behaviour is touched anywhere in this block. */
html[data-tk-theme="light"] body.tk-fp .auth-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

html[data-tk-theme="light"] body.tk-fp .auth-card h1,
html[data-tk-theme="light"] body.tk-fp .auth-card h2,
html[data-tk-theme="light"] body.tk-fp .auth-card label {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .auth-card p,
html[data-tk-theme="light"] body.tk-fp .auth-card .auth-sub {
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .auth-card input[type="text"],
html[data-tk-theme="light"] body.tk-fp .auth-card input[type="email"],
html[data-tk-theme="light"] body.tk-fp .auth-card input[type="password"],
html[data-tk-theme="light"] body.tk-fp .auth-card input#username,
html[data-tk-theme="light"] body.tk-fp .auth-card input#password {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .auth-card input::placeholder {
    color: #626B75;
    opacity: 1;
}


/* ==========================================================================
   10. BUTTONS
   ==========================================================================
   Legacy accent buttons on these pages take the site's existing blue token.
   .greenbtn, .auth-submit and the /blog chips/CTAs are recoloured at source
   in their own views (see the report); what is here is the light-mode
   treatment for the generic legacy button classes. */
html[data-tk-theme="light"] body.tk-fp .content-area .button.themebutton,
html[data-tk-theme="light"] body.tk-fp .content-area a.themebutton {
    background-color: var(--primary-color, #0073FC);
    color: #FFFFFF;
    border-color: var(--primary-color, #0073FC);
}

html[data-tk-theme="light"] body.tk-fp .content-area .button.themebutton:hover,
html[data-tk-theme="light"] body.tk-fp .content-area a.themebutton:hover {
    background-color: var(--primary-color-dark, #005BC7);
    border-color: var(--primary-color-dark, #005BC7);
    color: #FFFFFF;
}


/* /careers "Apply Now" is a filled button carrying white text on
   --primary-color, which is 2.6:1. The darker token lifts it to 4.3:1 without
   changing the button's size, shape or label. Light mode only — dark mode
   keeps the existing fill. */
html[data-tk-theme="light"] body.tk-fp .content-area a.apply-now {
    background-color: var(--primary-color-dark, #005BC7);
    color: #FFFFFF;
}


/* ==========================================================================
   11. /package — BADGE CONTRAST
   ==========================================================================
   The badge sat at 2.63:1 in light mode. The darker token brings white text
   on it to 4.6:1 without changing the badge's shape, position or copy. */
html[data-tk-theme="light"] body.tk-fp .package-card-badge {
    background-color: var(--primary-color-dark, #005BC7);
    color: #FFFFFF;
}


/* ==========================================================================
   12. /how-its-work — DECORATIVE BROWSER MOCKUP
   ==========================================================================
   A drawn browser frame (chrome + URL bar), not a screenshot — so it is UI,
   not media, and it should follow the theme. Its colours sit in style=""
   attributes without !important, which author !important can reclaim; that is
   why these two rules carry it. Geometry, radius, shadow and the frame's
   contents are untouched. */
html[data-tk-theme="light"] body.tk-fp .tbt-browser-mockup {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}

html[data-tk-theme="light"] body.tk-fp .tbt-browser-header {
    background: #EDF1F4 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #4A535D;
}


/* ==========================================================================
   13. CART DRAWER  — see partials/cart-drawer.blade.php
   ==========================================================================
   Not styled here. That partial is included AFTER this <link>, so its own
   <style> block wins on source order; its light rules therefore live inside
   the partial. Noted here so the omission is not mistaken for an oversight.
   ========================================================================== */


/* ==========================================================================
   14. LEGACY DECLARATIONS THAT NEED RECLAIMING
   ==========================================================================
   A handful of page stylesheets set text colour with their own `!important`.
   Author !important can only be answered with author !important, so these
   few rules carry it. Each one is listed explicitly rather than applied
   broadly, so nothing is recoloured that was not measured as broken. */

/* /package — legacy body copy set to #f2f1f1 !important in two of the page's
   own <style> blocks. Rendered 1.04:1 against the light page surface. */
html[data-tk-theme="light"] body.tk-fp .content-area .maindesc,
html[data-tk-theme="light"] body.tk-fp .content-area .service_desc p {
    color: #4A535D !important;
}

/* /package — the plan badge. The generic `.content-area span` rule above is
   one class more specific than the badge rule in section 11, so the badge
   inherited body-copy grey (1.81:1 on the blue fill). Restating it with the
   wrapper in the selector puts it back in front. */
html[data-tk-theme="light"] body.tk-fp .content-area .package-card-badge {
    background-color: var(--primary-color-dark, #005BC7);
    color: #FFFFFF;
}

html[data-tk-theme="light"] body.tk-fp .content-area .home-package-delivery {
    color: var(--primary-color-dark, #005BC7);
}

/* /how-its-work — the before/after labels on the image comparison slider.
   These sit on a dark translucent chip ON TOP OF a photograph, so they are
   overlay text on media, not page copy: the generic `.content-area div` rule
   above had turned them grey-on-grey (1.49:1). White is the original and
   correct treatment in both themes. */
html[data-tk-theme="light"] body.tk-fp .content-area .twentytwenty-before-label,
html[data-tk-theme="light"] body.tk-fp .content-area .twentytwenty-after-label {
    color: #FFFFFF;
}


/* ==========================================================================
   15. /blog — FULL CARD SYSTEM
   ==========================================================================
   Section 8 guessed at the card classes; the real markup (blog/partials/
   cards.blade.php) uses blog-card-{image,body,category,title,copy,meta,
   author,footer,cta}. Measured before this block: `strong` and the author
   span rendered white-on-white (1.00:1) and the category chip 1.66:1. These
   rules cover the actual class names. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-title,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-title a,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card strong,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-author strong {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-copy,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-body,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-author,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-author span,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-footer,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-meta,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-meta span {
    color: #4A535D;
}

/* The kicker above the page title was white at 78% alpha on the light shell. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-kicker {
    color: #626B75;
}

/* Category chip: the blue tint is very pale in light mode, so the label takes
   the darker blue token rather than --primary-color-light (1.66:1 -> 5.2:1).
   Dark mode keeps the light blue set in the view. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-category {
    background: rgba(0, 115, 252, 0.10);
    color: var(--primary-color-dark, #005BC7);
}

/* "Read more" on a white card. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-cta {
    color: var(--primary-color-dark, #005BC7);
}

/* The image panel is a real <img> container; when a post has no image it is
   an empty dark box. Give it the section surface so an imageless card reads
   as a placeholder rather than a black hole. Cards WITH an image are
   unaffected — the image paints over this. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-image {
    background-color: #EDF1F4;
}

/* ==========================================================================
   16. LEGACY WHITE TEXT LEFT ON LIGHT SURFACES
   ==========================================================================
   A few legacy rules set white text with !important on elements that now sit
   on a light surface. Listed individually; each was measured at or near
   1.0:1 (invisible) before being reclaimed. */
html[data-tk-theme="light"] body.tk-fp .content-area .first_section h2 {
    color: #4A535D !important;
}

/* The "Rated 5/5 based on Customer Reviews" line is stored HTML (the
   services.testimonials_rating_html field). Its inner <span> carries
   `style="color: white"` as an inline ATTRIBUTE, which outranks any normal
   author rule, so it rendered white-on-light at 1.09:1. An inline attribute
   without !important can only be answered with !important — and the database
   is deliberately not touched, so this is the presentation-level fix. */
html[data-tk-theme="light"] body.tk-fp .content-area p > a > span,
html[data-tk-theme="light"] body.tk-fp .content-area .customreviews p span {
    color: #4A535D !important;
}

/* /refer-earn secondary action: white label left over from the dark design,
   sitting on the light page (1.09:1). */
html[data-tk-theme="light"] body.tk-fp .content-area .ref-register {
    color: #0A0D0F;
}

/* /blog placeholder panel. The view paints a dark gradient here as the
   fallback behind each thumbnail; a real <img> covers it, but a post with no
   image showed a black box on the light page. background-image must be
   cleared as well as the colour, or the gradient survives. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-card-image {
    background-image: none;
    background-color: #EDF1F4;
}


/* ==========================================================================
   17. ACCENT-BLUE TEXT ON LIGHT SURFACES
   ==========================================================================
   --primary-color (#0073FC) is tuned for white text on a dark ground. Used as
   TEXT on a light surface it lands around 2.4-2.5:1. Where that happens on
   these pages the darker sibling token (--primary-color-dark #005BC7, already
   part of the site's palette) is substituted — same brand hue, ~4.6:1. Filled
   buttons are untouched: their blue is a background, not text. */

/* /directory + /sitemap section headings. */
html[data-tk-theme="light"] body.tk-fp div#footer.footer h4 {
    color: var(--primary-color-dark, #005BC7);
}

/* /my-account/login secondary link — it was rendering in the LIGHT blue
   (#66ACFF), which is 1.73:1 on the light card. */
html[data-tk-theme="light"] body.tk-fp .auth-outline-link,
html[data-tk-theme="light"] body.tk-fp .content-area .auth-outline-link {
    color: var(--primary-color-dark, #005BC7);
    border-color: rgba(15, 23, 42, 0.14);
}

/* /my-account/login — "Lost your password?" (an unclassed <a> in .auth-forgot). */
html[data-tk-theme="light"] body.tk-fp .auth-forgot a {
    color: var(--primary-color-dark, #005BC7);
}

/* /package — two labels drawn in the page-local --package-blue (#0073fc),
   which is 2.43:1 as text on the light surface. Only these two text uses are
   substituted; --package-blue itself is left alone because the page also uses
   it for fills, where it is correct. */
html[data-tk-theme="light"] body.tk-fp .content-area .home-package-delivery,
html[data-tk-theme="light"] body.tk-fp .content-area .subtitle {
    /* !important because the page rule is `.package-page #bundle-products
       .home-package-delivery` — an ID selector outranks any number of
       classes, so specificity alone cannot reach it. */
    color: var(--primary-color-dark, #005BC7) !important;
}

/* NOTE: .tk-category is deliberately NOT overridden here. It is set to
   #8A929B !important by tbtk-packages-shared.css, the approved package-card
   component used on the homepage and the service pages too. At 2.9:1 it is
   marginally under 3:1, but changing it only on these pages would make the
   identical card look different here than everywhere else. Reported instead. */

/* /refer-earn step numbers. The chip is a translucent blue tint; on the light
   page the light-blue numeral needs the darker token to stay legible. */
html[data-tk-theme="light"] body.tk-fp .content-area .ref-step .step-num {
    color: var(--primary-color-dark, #005BC7);
}

/* NOTE: the review-platform links ("Facebook | Google | Trustpilot") in the
   shared .centerbuttons row are deliberately NOT overridden. They render at
   #0073FC (2.54:1) here — and identically on the homepage, which is the
   already-approved light design, because they come from the shared
   tbtk-testimonials-redesign.css component. Changing them on these 16 pages
   only would make the same component look different here. Reported instead. */

/* /refer-earn step cards. The card is a transparent panel with a glow rising
   from its base — at full strength that glow is solid --primary-color, and
   the card's own #4A535D titles then sit on saturated blue (~2.0:1). In the
   dark theme the same glow works because the copy there is white on a dark
   panel. For light mode the glow is softened to a wash so the card reads as a
   light surface and its dark copy stays legible; the shape, direction and
   stops of the gradient are unchanged. Dark mode keeps the full-strength
   glow. */
html[data-tk-theme="light"] body.tk-fp .content-area .ref-step {
    background: linear-gradient(0deg, rgba(0, 115, 252, 0.20) 0%, rgba(0, 0, 0, 0) 70%);
}

html[data-tk-theme="light"] body.tk-fp .content-area .ref-step > .extra-glow {
    background: linear-gradient(0deg, rgba(0, 115, 252, 0.22) 0%, rgba(0, 115, 252, 0.08) 25%, rgba(0, 0, 0, 0) 50%);
}

/* /refer-earn step card fill. The card's surface is painted by a
   ::before pseudo-element (a near-black gradient), which is why the card
   stayed dark on the light page even though .ref-step itself is transparent.
   In light mode it becomes a white card with the standard hairline; the
   ::after wash is softened to match. Dark mode keeps the original fill. */
html[data-tk-theme="light"] body.tk-fp .content-area .ref-step::before {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: inherit;
}

html[data-tk-theme="light"] body.tk-fp .content-area .ref-step::after {
    background: radial-gradient(at top right, rgba(0, 115, 252, 0.10), rgba(0, 115, 252, 0.05), transparent 51%);
}

/* The icon rings sit on the light page now, so their tint is lightened to
   stay a tint rather than a block. */
html[data-tk-theme="light"] body.tk-fp .content-area .iconbg {
    background: rgba(0, 115, 252, 0.10);
}

/* The icon core behind each ring is a near-black gradient drawn by a
   ::before. On the light page it became a black disc, so light mode gets a
   light disc instead. Dark mode keeps the original. */
html[data-tk-theme="light"] body.tk-fp .content-area .iconbg::before {
    background: linear-gradient(0, #FFFFFF, #EDF1F4);
}

/* The FAQ chevron chip is a dark swatch (#241914) with a light glyph. On a
   white accordion row it reads as a dark blob, so in light mode the chip
   takes the section surface and the glyph the primary ink. This replaces the
   blanket invert() applied earlier, which fought the chip instead of
   restyling it. */
html[data-tk-theme="light"] body.tk-fp .content-area .accordion-button::after {
    filter: none;
    background: #EDF1F4;
    color: #0A0D0F;
}

/* /package draws its FAQ chevron chip through
   `.package-page .bgservicesection #accordionFlush .accordion-button::after`
   — an ID selector, so the rule above cannot reach it on specificity. */
html[data-tk-theme="light"] body.tk-fp .content-area.package-page #accordionFlush .accordion-button::after {
    background: #EDF1F4 !important;
    color: #0A0D0F !important;
    filter: none;
}

/* …and the open state, which the page paints in --package-blue. */
html[data-tk-theme="light"] body.tk-fp .content-area.package-page #accordionFlush .accordion-button:not(.collapsed)::after {
    background: var(--primary-color-dark, #005BC7) !important;
    color: #FFFFFF !important;
}

/* /package service blocks. The page paints these with rgba(42,16,1,.59) — a
   dark brown at 59% alpha. Over the dark page that reads as a tinted card;
   over the light page it composites to a muddy taupe (#7C6E66) and the
   card's own #4A535D copy drops to 1.6:1. Light mode gives them the standard
   white card instead. */
html[data-tk-theme="light"] body.tk-fp .content-area .service_block {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .content-area .service_block .serv_title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area .service_block .serv_desc {
    color: #4A535D;
}

/* The testimonial "verified" badge is a light-on-dark chip
   (background: rgba(8,10,12,.72)) that sits over the video card — the
   homepage renders its label in --primary-color and that is correct there
   too. The generic `.content-area span` rule above had recoloured it to body
   grey, putting grey on a near-black chip (1.16:1). Restored to match the
   approved shared component. */
html[data-tk-theme="light"] body.tk-fp .content-area .testimonial-verified-badge {
    color: var(--primary-color, #0073FC);
}

/* /package category toggle ("Website Development / Printing / …"). The pill
   is rgba(8,12,15,.88) — a dark bar that stays dark on the light page — and
   the generic label rule above then put #4A535D copy on it (1.90:1). In
   light mode the bar becomes a light track with dark labels; the selected
   label keeps its filled treatment. */
html[data-tk-theme="light"] body.tk-fp .content-area .billing-toggle {
    background-color: #EDF1F4;
    border: 1px solid rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .content-area .billing-toggle label {
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .content-area .billing-toggle input[type="radio"]:checked + label {
    background: var(--primary-color-dark, #005BC7);
    color: #FFFFFF;
}


/* ==========================================================================
   18. /refer-earn — LIGHT-MODE VISIBILITY
   ==========================================================================
   The page's headings are painted with -webkit-background-clip:text over a
   gradient that runs grey -> WHITE (#90a3ac 25%, #fff). On the dark design
   that reads as a silver shine; on the light page the white half of every
   heading simply disappears — which is why "GIVE $20, GET $20" faded out
   mid-phrase.

   The treatment is kept (same gradient, same angle, same stops) and only the
   two colours are swapped for the light theme's ink values, so the shine runs
   dark -> muted instead of grey -> white. Typography, sizes and hierarchy are
   untouched. Dark mode keeps the original gradient. */
html[data-tk-theme="light"] body.tk-fp .content-area .ref-top h1,
html[data-tk-theme="light"] body.tk-fp .content-area .ref-steps h3 {
    background: linear-gradient(-45deg, #0A0D0F 25%, #4A535D);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* The small referral icons are drawn in #dfffe0 — a pale green-white that is
   legible on the dark disc but not on the light one. They take the site's
   existing blue, which also clears the last of the legacy green on this page.
   The icons themselves are untouched; only their colour changes, and no image
   filter is used. */
html[data-tk-theme="light"] body.tk-fp .content-area .ref-icons .small-icon i {
    color: var(--primary-color-dark, #005BC7);
}

/* With the glyphs darkened, the disc behind them needs a little more presence
   so the icon cluster still reads as a group on the light ground. */
html[data-tk-theme="light"] body.tk-fp .content-area .iconbg {
    background: rgba(0, 115, 252, 0.16);
}

html[data-tk-theme="light"] body.tk-fp .content-area .iconbg::after {
    background: rgba(0, 115, 252, 0.26);
}


/* ==========================================================================
   19. /blog — SEARCH CONTROL + FILTER PILLS
   ==========================================================================
   The .blog-search WRAPPER is the visible control (the input inside it is
   transparent-bordered), and it was still carrying dark-theme values —
   rgba(255,255,255,.04) on rgba(255,255,255,.08) — which is effectively
   invisible on the light page. It takes the standard light field treatment. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-search {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
}

html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-search:focus-within {
    border-color: var(--primary-color, #0073FC);
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.14);
}

/* The magnifier is a Font Awesome <i> (not an svg) drawn in white at 56%
   alpha — invisible once the field turns white. It takes the darker blue. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-search i,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-search svg {
    color: var(--primary-color-dark, #005BC7);
    opacity: 1;
}

/* Restores the SELECTED pill's filled treatment. Section 8's generic
   .blog-filter-chip rule sits in this same file and was overriding the view's
   own `.blog-filter-chip.active` fill, leaving the active pill white and
   indistinguishable from the inactive ones. */
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-filter-chip.active,
html[data-tk-theme="light"] body.tk-fp .blog-page-shell .blog-filter-chip:hover {
    background: var(--primary-color, #0073FC);
    border-color: var(--primary-color, #0073FC);
    color: #0A0D0F;
}


/* ==========================================================================
   20. /partners — LIGHT-ARTWORK PARTNER LOGO
   ==========================================================================
   The official Meta Business Partner asset is white artwork on transparency
   (sampled average luminance 0.70), drawn for a dark ground. On the light page
   it was effectively invisible.

   The logo itself is NOT recoloured or filtered — it keeps its official form.
   Instead it sits on a restrained contained surface, the same treatment a
   brand kit uses for a reversed logo: the site's dark ink, the standard
   radius and hairline, and a soft shadow consistent with the rest of the light
   theme. Sized to the logo, not stretched. Dark mode is unaffected — the logo
   already reads there, so no surface is applied. */
html[data-tk-theme="light"] body.tk-fp .content-area .partner-logo-on-dark {
    display: block;
    box-sizing: border-box;
    max-width: 210px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #0A0D0F;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    object-fit: contain;
}


/* ==========================================================================
   21. /blog/{slug} — ARTICLE DETAIL
   ==========================================================================
   The article template was outside the route gate above, so none of this
   file reached it and the page stayed on its dark design in light mode.
   `blog.show` is now included in $isFooterLinkedPage, and these rules give the
   article the same light language as the listing. Layout, article width,
   typography scale and content are untouched — colour only. */
html[data-tk-theme="light"] body.tk-fp .blog-article-shell {
    background: #F3F6F8;
    background-image: none;
}

html[data-tk-theme="light"] body.tk-fp .blog-article-card {
    background: #FFFFFF;
    background-image: none;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

html[data-tk-theme="light"] body.tk-fp .blog-article-title,
html[data-tk-theme="light"] body.tk-fp .blog-article-content h1,
html[data-tk-theme="light"] body.tk-fp .blog-article-content h2,
html[data-tk-theme="light"] body.tk-fp .blog-article-content h3,
html[data-tk-theme="light"] body.tk-fp .blog-article-content h4,
html[data-tk-theme="light"] body.tk-fp .blog-article-content strong {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .blog-article-excerpt,
html[data-tk-theme="light"] body.tk-fp .blog-article-body,
html[data-tk-theme="light"] body.tk-fp .blog-article-content,
html[data-tk-theme="light"] body.tk-fp .blog-article-content p,
html[data-tk-theme="light"] body.tk-fp .blog-article-content li {
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .blog-article-meta,
html[data-tk-theme="light"] body.tk-fp .blog-article-meta span,
html[data-tk-theme="light"] body.tk-fp .blog-article-author {
    color: #626B75;
}

/* Category chip: the blue tint is very pale on the light card, so the label
   takes the darker token — same treatment as the listing's chip. */
html[data-tk-theme="light"] body.tk-fp .blog-article-category {
    background: rgba(0, 115, 252, 0.10);
    color: var(--primary-color-dark, #005BC7);
}

html[data-tk-theme="light"] body.tk-fp .blog-article-content a,
html[data-tk-theme="light"] body.tk-fp .blog-article-back,
html[data-tk-theme="light"] body.tk-fp .blog-article-shell a:not(.btn):not([class*="button"]) {
    color: var(--primary-color-dark, #005BC7);
}

html[data-tk-theme="light"] body.tk-fp .blog-article-content hr,
html[data-tk-theme="light"] body.tk-fp .blog-article-card hr,
html[data-tk-theme="light"] body.tk-fp .blog-article-divider {
    border-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .blog-article-content blockquote {
    border-left-color: var(--primary-color, #0073FC);
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .blog-article-hero {
    background: #EDF1F4;
}


/* ==========================================================================
   22. /refund-policy — POLICY ARTICLE SURFACE
   ==========================================================================
   The route was outside the gate above, so this file never reached it and the
   page stayed dark. With `refund.policy` added, sections 1-3 already supply
   the page surface and the type colours; this block gives the policy itself a
   contained reading surface, matching the blog article treatment. Content,
   width and typography scale are untouched. */
html[data-tk-theme="light"] body.tk-fp .content-area article.page {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
    padding: 8px 34px 34px;
    margin-bottom: 40px;
}

html[data-tk-theme="light"] body.tk-fp .content-area .entry-content h2,
html[data-tk-theme="light"] body.tk-fp .content-area .entry-content h3,
html[data-tk-theme="light"] body.tk-fp .content-area .entry-content h4 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area .entry-content hr {
    border-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] body.tk-fp .content-area .entry-content table {
    background: #FFFFFF;
}

html[data-tk-theme="light"] body.tk-fp .content-area .entry-content table th,
html[data-tk-theme="light"] body.tk-fp .content-area .entry-content table td {
    border-color: rgba(15, 23, 42, 0.10);
    color: #0A0D0F;
}

@media (max-width: 767px) {
    html[data-tk-theme="light"] body.tk-fp .content-area article.page {
        padding: 6px 18px 22px;
    }
}


/* ==========================================================================
   23. PAGE CANVAS
   ==========================================================================
   `body` stays black in light mode (it is painted by the dark design and the
   footer sits on top of it). Wherever a page's .content-area is shorter than
   the viewport — which happens on narrow screens for the shorter documents
   like /refund-policy — that black showed through between the content and the
   footer. Painting the canvas for gated pages only closes that gap without
   touching the global body rule or dark mode. */
html[data-tk-theme="light"] body.tk-fp {
    background-color: #F3F6F8;
}


/* ==========================================================================
   24. /bundle — SELECTION CARDS
   ==========================================================================
   The bundle picker's option cards are <label class="text-center"> painted
   #171717 by the page's own CSS, so they stayed dark on the light canvas. They
   take the standard light card treatment; the checked state keeps its existing
   accent so the selection remains obvious. Dark mode untouched. */
html[data-tk-theme="light"] body.tk-fp .content-area label.text-center {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: #0A0D0F;
}

html[data-tk-theme="light"] body.tk-fp .content-area label.text-center .cat,
html[data-tk-theme="light"] body.tk-fp .content-area label.text-center span {
    color: #4A535D;
}

html[data-tk-theme="light"] body.tk-fp .content-area input:checked + label.text-center,
html[data-tk-theme="light"] body.tk-fp .content-area label.text-center.active {
    border-color: var(--primary-color, #0073FC);
    box-shadow: 0 0 0 2px rgba(0, 115, 252, 0.18);
}