/*
 | Site-wide visual theme, sampled from dtone.com on 2026-09-03.
 |
 | SCOPED UNDER body.theme-dtone, applied from layouts/app.blade.php. Remove that one
 | line and the entire site reverts. CONTENT IS UNCHANGED — colour, type treatment,
 | radius and shadow only.
 |
 | Widened from homepage-only to site-wide on 2026-09-04. The chrome the homepage pass
 | deliberately avoided turned out to be simpler than assumed: the footer and nav
 | dropdowns are LIGHT (#f5f7ff), not dark, which is exactly why an earlier attempt to
 | repaint the footer forest green broke 30+ links at once.
 |
 | Sampled from dtone.com (computed styles, not guesswork):
 |   page ground   rgb(244,241,238)  #F4F1EE   warm bone, not white
 |   ink           rgb(0,45,36)      #002D24   deep forest green
 |   accent fill   rgb(70,230,150)   #46E696   bright mint
 |   h1            48px / weight 500 / letter-spacing -1.92px (-0.04em) / lh 1.04
 |   radii         20px cards, 80px pills
 |
 | Font: dtone.com uses "ABC Favorit", a licensed commercial face we cannot embed.
 | Remitz already loads Inter — same genre (neo-grotesque). The character comes from
 | the TREATMENT: weight 500 headings with tight negative tracking. Most of what
 | reads as "lively" on dtone.com is the colour, not the letterforms.
 |
 | DELIBERATELY CONSERVATIVE. An earlier attempt remapped the site's whole token set
 | (--text-body, --text-muted, --accent, section backgrounds, footer). That introduced
 | 39 WCAG AA failures: components here assume the original palette's relationships,
 | so repainting the footer forest left its light-tuned links at 2.51:1, and every
 | correction created two more. This version changes the page ground, the heading
 | treatment and the accent FILLS, and leaves the site's text tokens, section
 | backgrounds, footer and nav dropdowns untouched.
 */

body.theme-dtone {
    --dt-bone:      #F4F1EE;
    --dt-bone-deep: #EBE6E1;
    --dt-forest:    #002D24;
    --dt-mint:      #46E696;
    --dt-mint-deep: #1DE08F;
    --dt-white:     #FFFFFF;

    background: var(--dt-bone);

    /* Rounder shapes — a large part of the "lively" read on dtone.com */
    --radius-sm: 12px;
    --radius:    18px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* The one text token the bone ground forces. #6b7280 was tuned for the original
       #f5f7ff and drops to 4.30:1 on bone — just under AA. A slight darkening fixes
       every instance at once, and passes on all three grounds this page uses:
       bone 5.02, bone-deep 4.56, white 5.65. Kept green-tinted to suit the palette. */
    --text-muted: #5A6B63;
    --text-light: #5A6B63;

    /* Shadows tinted with the green ink, never neutral grey */
    --shadow-sm: 0 1px 2px rgba(0,45,36,0.05);
    --shadow:    0 4px 10px -2px rgba(0,45,36,0.07);
    --shadow-md: 0 12px 28px -6px rgba(0,45,36,0.10);
    --shadow-lg: 0 22px 50px -14px rgba(0,45,36,0.14);
}

/* The bone ground, applied only to sections that were plain white or the old
   blue-tinted light. Cards stay white on top of it — that contrast is what makes
   dtone.com feel airy. Dark sections, the footer and nav dropdowns keep their own
   backgrounds and are not touched. */
body.theme-dtone .section:not(.section-dark),
body.theme-dtone .hero,
body.theme-dtone .page-hero         { background: var(--dt-bone); }
body.theme-dtone .section-light     { background: #EBE6E1; }

/* Shared chrome. The footer and nav dropdowns are LIGHT surfaces (#f5f7ff), so they
   take the bone treatment — they must NOT be repainted dark, which is the mistake
   that broke the first attempt. Their existing text colours stay, and they pass:
   --text-body #4a5568 is 6.4:1 on the deeper bone. */
body.theme-dtone footer             { background: #EBE6E1; }
body.theme-dtone .dropdown-menu     { background: var(--dt-white); border-radius: var(--radius); }
body.theme-dtone .logo-strip        { background: var(--dt-white); }

/* Dark sections become forest rather than navy. Their text is already white
   (14.99:1 on forest), so this is a straight swap with headroom to spare. */
body.theme-dtone .section-dark      { background: var(--dt-forest); }

/* Article body, forms and tables inherit the ground rather than sitting on white
   islands the theme never anticipated. */
body.theme-dtone .blog-article,
body.theme-dtone .prose             { color: var(--text-body); }
body.theme-dtone .form-input,
body.theme-dtone .form-select,
body.theme-dtone textarea           { background: var(--dt-white); border-radius: var(--radius-sm); }
body.theme-dtone table              { border-radius: var(--radius-sm); overflow: hidden; }

/* Ink: headings only. Body text keeps the site's own tokens, which already pass
   comfortably on a bone ground (--text-body #4a5568 is 7.4:1 on #F4F1EE). */
/* Forest ink for headings on LIGHT grounds only. The stat block sits in a dark
   section where its numbers are white — :not() keeps this off them, and off any
   heading inside a dark panel. */
body.theme-dtone h1:not(.section-dark *):not(.cta-banner *):not(footer *),
body.theme-dtone h2:not(.section-dark *):not(.cta-banner *):not(footer *),
body.theme-dtone h3:not(.section-dark *):not(.cta-banner *):not(footer *),
body.theme-dtone h4:not(.section-dark *):not(.cta-banner *):not(footer *),
body.theme-dtone legend:not(.section-dark *):not(.cta-banner *),
body.theme-dtone .stat-number:not(.section-dark *):not(.cta-banner *) { color: var(--dt-forest); }

/* Type treatment — the ABC Favorit character delivered through Inter.
   Lighter weight plus tight negative tracking reads as modern editorial rather
   than SaaS bold. This is the single biggest typographic difference. */
body.theme-dtone h1                 { font-weight: 500; letter-spacing: -0.04em;  line-height: 1.06; }
body.theme-dtone h2                 { font-weight: 500; letter-spacing: -0.03em;  line-height: 1.14; }
body.theme-dtone h3,
body.theme-dtone h4,
body.theme-dtone legend             { font-weight: 600; letter-spacing: -0.02em; }
body.theme-dtone .hero h1           { letter-spacing: -0.045em; }
body.theme-dtone .stat-number       { font-weight: 500; letter-spacing: -0.04em; }

/* Accent as a FILL with forest text on it (9.29:1) — dtone.com's actual pattern.
   Mint is never used as text on a light ground: #46E696 on bone is 1.43:1. */
body.theme-dtone .btn.btn-primary,
body.theme-dtone a.btn-primary,
body.theme-dtone button.btn-primary {
    background: var(--dt-mint);
    border-color: var(--dt-mint);
    color: var(--dt-forest);
    border-radius: 999px;
    font-weight: 500;
}
body.theme-dtone .btn.btn-primary:hover,
body.theme-dtone a.btn-primary:hover,
body.theme-dtone button.btn-primary:hover {
    background: var(--dt-mint-deep);
    border-color: var(--dt-mint-deep);
    color: var(--dt-forest);
}
body.theme-dtone .btn                { border-radius: 999px; font-weight: 500; }

body.theme-dtone .section-badge,
body.theme-dtone .page-hero-badge    {
    background: var(--dt-mint);
    color: var(--dt-forest);
    border-radius: 999px;
    font-weight: 500;
}

/* Nav takes the bone ground so the page reads as one surface */
body.theme-dtone .navbar             { background: rgba(244,241,238,0.88); backdrop-filter: saturate(180%) blur(12px); }
body.theme-dtone .navbar.scrolled    { background: rgba(244,241,238,0.96); box-shadow: var(--shadow-sm); }

/* The homepage serves logo-transparent.png (see partials/nav.blade.php) because the
   original has a baked-in white background that shows as a box on the bone ground.
   No blend hack: backdrop-filter on the navbar creates a stacking context, so
   mix-blend-mode could not reach the page behind it. */

/* The hero's highlighted phrase. The original accent (#3ecf8e) is 1.77:1 on the bone
   ground — it failed even the 3:1 large-text floor before this theme existed, on white.
   #0E7A52 is 4.76:1 on bone, so it passes full AA rather than scraping the large-text
   exemption, and stays 2.8:1 against the forest heading beside it, so it still reads as
   a highlight rather than just darker text.
   -webkit-text-fill-color must be set too: the base rule sets it, and it wins over
   `color` in WebKit regardless of specificity order. */
body.theme-dtone .hero h1 .gradient-text {
    color: #0E7A52;
    -webkit-text-fill-color: #0E7A52;
    background: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fixes for the sections reviewed on 2026-09-04
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. THE CTA BANNER is styled as a LIGHT surface further down this file — see the
      "DOTTED BONE CTA" block. It was dark until 2026-09-04. */

/* 2. LIST MARKERS. The base sheet resets `ul, ol { list-style: none }` globally, so
      every content list rendered as an unanchored block of text — the "wall of words"
      in the provider-split cards and the white-label section. Markers are restored
      only for lists inside prose and cards, never for nav or layout lists. */
body.theme-dtone .section li:not(.nav-item):not(.dropdown-item):not([class*="nav"]) {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}
body.theme-dtone .section li:not(.nav-item):not(.dropdown-item):not([class*="nav"])::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dt-mint-deep);
}
/* Lists already carrying their own indent do not need a second one. */
body.theme-dtone .section ul[style*="padding-left"] { padding-left: 0 !important; }
/* The check-list class is used on the homepage but was never defined anywhere —
   it rendered as plain text. Give it the tick its name implies. */
body.theme-dtone .check-list li::before {
    content: "✓";
    background: none;
    width: auto; height: auto;
    left: 0; top: 0;
    color: var(--dt-mint-deep);
    font-weight: 700;
    font-size: 0.95em;
}
body.theme-dtone .check-list li { padding-left: 24px; }

/* 3. FOOTER. Headings were being painted forest by the generic rule (now excluded);
      the column titles read better as the muted label they are. */
body.theme-dtone footer h3,
body.theme-dtone footer h4           { color: var(--text-dark); font-size: 13px; letter-spacing: 0.06em; }
/* The founder credit avatar sat awkwardly inline at 28px against a full-width line. */
body.theme-dtone footer .footer-legal p:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 4. PROVIDER-SPLIT CARDS. Equal height regardless of content length, and the two
      cards distinguished by intent rather than by a barely-visible background tint. */
body.theme-dtone .provider-split-grid { align-items: stretch; }

/* The two provider cards previously differed only by #fff vs #fbfbfc — a 1% tint that
   vanishes entirely on a bone ground, so the section read as one undifferentiated
   block. They describe two different parties, so they should look like two things:
   what Remitz brings sits on white, what the operator brings sits on the mint tint. */
body.theme-dtone .provider-card              { display: flex; flex-direction: column; }
body.theme-dtone .provider-card--ours        { background: var(--dt-white); }
body.theme-dtone .provider-card--yours       { background: rgba(70,230,150,0.09); }
body.theme-dtone .provider-card--yours li:not(.nav-item):not(.dropdown-item):not([class*="nav"])::before { background: var(--dt-forest); }
body.theme-dtone .provider-card h3           { padding-bottom: 12px; border-bottom: 1px solid rgba(0,45,36,0.10); }

/* 5. A section-header sitting directly above a list is one thought, not two. 64px of
      air between them reads as a missing section. Measured, not guessed: the gap was
      exactly the header's 64px bottom margin. Tightened only for this adjacency. */
body.theme-dtone .section-header + ul,
body.theme-dtone .section-header + .check-list { margin-top: -24px; }

/* 6. THE HERO PROOF ROW. Four ticks in an auto-fit grid wrapped into an uneven
      two-column block with items centred independently, so nothing lined up. Give
      them a shared left edge within each column. */
body.theme-dtone .hero-proof,
body.theme-dtone .hero-proof-grid    { justify-items: start; text-align: left; }

/* Specificity corrections found by testing rather than by reading the cascade:
   - .check-list's tick lost to the generic `.section li:not(...)` dot rule above,
     which carries higher specificity. Matched here at the same weight or greater.
   - "Explore the sandbox first" is .btn.btn-ghost, so `a:not(.btn)` never matched it.
     On the CTA's dark gradient the old accent sits at 1.77:1. */
/* The generic dot rule carries three :not() clauses, each adding a class to its
   specificity — (0,5,2) against the (0,3,2) I first wrote here. Matching the chain
   exactly rather than piling on !important. */
body.theme-dtone .section .check-list li:not(.nav-item):not(.dropdown-item):not([class*="nav"])::before,
body.theme-dtone .check-list li::before {
    content: "✓";
    background: none;
    width: auto;
    height: auto;
    left: 0;
    top: 0;
    color: var(--dt-mint-deep);
    font-weight: 700;
}
body.theme-dtone .cta-banner .btn-ghost {
    color: var(--dt-mint);
    border-color: rgba(70,230,150,0.55);
}
body.theme-dtone .cta-banner .btn-ghost:hover {
    color: var(--dt-forest);
    background: var(--dt-mint);
    border-color: var(--dt-mint);
}

/* The CTA badge is .cta-badge, not .section-badge, so the badge rule above never
   reached it — it stayed white-at-80% on a 10% white overlay: legible but washed out,
   and inconsistent with every other badge on the page. Mint on forest is 9.29:1. */
body.theme-dtone .cta-badge {
    background: var(--dt-mint);
    color: var(--dt-forest);
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Accent used as TEXT on light grounds — 2026-09-04
   The site's --accent (#3ecf8e) is 1.77:1 on the bone ground. It failed on the old
   white background too, so this predates the theme; the theme just makes it obvious.
   Same principle already applied to the hero highlight: mint is a FILL, and text
   that needs to read as "accent" on a light ground uses the dark green instead.
   #0E7A52 is 4.76:1 on bone — full AA, not the large-text exemption.
   Dark contexts are excluded: .cta-banner already serves mint at 9.29:1 on forest.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone .btn-ghost:not(.cta-banner *):not(.section-dark *),
body.theme-dtone .btn-sm:not(.cta-banner *):not(.section-dark *) {
    color: #0E7A52;
    border-color: rgba(14,122,82,0.42);
}
body.theme-dtone .btn-ghost:not(.cta-banner *):not(.section-dark *):hover,
body.theme-dtone .btn-sm:not(.cta-banner *):not(.section-dark *):hover {
    color: var(--dt-forest);
    background: var(--dt-mint);
    border-color: var(--dt-mint);
}

/* .module-badge put --accent-dark text on an --accent fill: 1.27:1, the worst pair
   on the page. Mint fill with forest text is 9.29:1 and matches every other badge. */
body.theme-dtone .module-badge {
    background: var(--dt-mint);
    color: var(--dt-forest);
    font-weight: 500;
}

/* Two corrections found by inspecting the live cascade rather than reading selectors:

   1. "Book a demo" is .btn.btn-primary.btn-sm. The .btn-sm rule above set its text to
      the dark green, overriding the forest that belongs on a mint fill — leaving dark
      green on the old accent at 2.68:1. Primary buttons are excluded from the ghost
      treatment and their fill is asserted at higher specificity.
   2. The mobile menu's Pricing button (.nav-cta-mobile) is width-0 on desktop, so it
      slipped past the audit's visibility check while still failing once the menu opens. */

body.theme-dtone .btn.btn-primary,
body.theme-dtone .btn.btn-primary.btn-sm,
body.theme-dtone .nav-actions .btn.btn-primary {
    background: var(--dt-mint);
    border-color: var(--dt-mint);
    color: var(--dt-forest);
}
body.theme-dtone .btn.btn-primary:hover,
body.theme-dtone .btn.btn-primary.btn-sm:hover,
body.theme-dtone .nav-actions .btn.btn-primary:hover {
    background: var(--dt-mint-deep);
    border-color: var(--dt-mint-deep);
    color: var(--dt-forest);
}
body.theme-dtone .nav-cta-mobile .btn,
body.theme-dtone .nav-menu .btn-sm:not(.btn-primary) {
    color: #0E7A52;
    border-color: rgba(14,122,82,0.42);
}

/* The nav Pricing buttons carried inline `color: var(--accent)`, which beat every
   stylesheet rule the theme could write — the reason this one button stayed at
   1.77:1 through three attempts to fix it. The inline styles are gone from
   partials/nav.blade.php and the appearance is defined here instead. */
body.theme-dtone .btn-outline-accent {
    background: transparent;
    border-color: rgba(14,122,82,0.45);
    color: #0E7A52;
}
body.theme-dtone .btn-outline-accent:hover {
    background: var(--dt-mint);
    border-color: var(--dt-mint);
    color: var(--dt-forest);
}

/* PAGE HEROES. Designed as a dark surface — `.page-hero p` is rgba(255,255,255,0.7)
   and `.hero-trust-item` is white-at-85%. The site-wide rollout painted .page-hero
   bone and left that white text on it at 1.13:1: invisible on every interior page.
   Exactly the mistake made with the footer, and caught the same way — by auditing
   pages other than the one being worked on.
   Rather than revert the hero to a navy band, give it text that belongs on bone. */
body.theme-dtone .page-hero p            { color: var(--text-body); }
body.theme-dtone .page-hero .hero-trust-item,
body.theme-dtone .page-hero .hero-meta,
body.theme-dtone .page-hero small        { color: var(--text-muted); }
body.theme-dtone .page-hero h1,
body.theme-dtone .page-hero h2           { color: var(--dt-forest); }

/* The page-hero badge kept --accent-dark text on an --accent fill (1.27:1) — the
   earlier badge rule was out-specified. Asserted here with the hero in the selector. */
body.theme-dtone .page-hero .page-hero-badge,
body.theme-dtone .page-hero .section-badge {
    background: var(--dt-mint);
    color: var(--dt-forest);
    font-weight: 500;
}

/* Struck-through comparison prices used #9ca3af on white: 2.54:1. Muted is the intent,
   illegible is not — --text-muted here is 5.65:1 on white and still reads as secondary. */
body.theme-dtone s,
body.theme-dtone del,
body.theme-dtone .price-was { color: var(--text-muted); }

/* The active nav link used --accent-dark (#2fb87a), which resolves against an accent
   background at 1.27:1. Active state is communicated by weight and the underline,
   so the colour only has to be legible. */
body.theme-dtone .nav-link.active {
    color: var(--dt-forest);
    font-weight: 600;
}
body.theme-dtone .nav-link.active::after { background: var(--dt-mint-deep); }

/* Blog card tags used --accent-dark on an --accent fill: 1.27:1. Same pair as the
   module badges. Found only by auditing /blog, which was outside the 15-page sample
   used until now — the lesson being that a sample is not a sweep. */
body.theme-dtone .blog-card-tag,
body.theme-dtone .blog-tag,
body.theme-dtone .post-tag {
    background: var(--dt-mint);
    color: var(--dt-forest);
    font-weight: 500;
}

/* Two stragglers found by auditing all 59 routes rather than a 15-page sample:

   - The step labels on /see-the-platform use #1e7e55, which is 4.47:1 on the bone
     ground — three hundredths under AA. It passed on the old lighter background.
   - .email-protect renders the obfuscated address with the accent colour, 1.77:1.
     It appears in the footer and on /privacypolicy. */
body.theme-dtone .label-sm,
body.theme-dtone .step-label { color: #0E7A52; }

body.theme-dtone .email-protect,
body.theme-dtone .email-protect-link { color: #0E7A52; }
/* Footer email: was --text-body, correct while the footer was light. The footer is
   now forest, so it takes the same white as every other footer link. */
body.theme-dtone footer .email-protect,
body.theme-dtone footer .email-protect-link { color: rgba(255,255,255,0.86); }
body.theme-dtone footer .email-protect-link:hover { color: var(--dt-mint); }

/* ─────────────────────────────────────────────────────────────────────────────
   HERO RHYTHM — 2026-09-04
   The hero stacks six blocks (badge, headline, subtitle, buttons, licence promise,
   capability ticks, legal meta) with almost no vertical rhythm between them, so they
   read as one undifferentiated column. Two specific faults:

   1. .hero-trust had no top margin at all — the ticks sat directly against the
      licence card.
   2. .hero-trust is `display:flex; flex-wrap:wrap; justify-content:center`. With four
      items of unequal width they wrap onto two rows that each centre INDEPENDENTLY,
      so nothing lines up vertically. That is the ragged look, not a spacing problem.

   Fixed by grouping the hero into four zones separated by hairlines, and by laying
   the ticks out on a two-column grid with a shared left edge.
   ───────────────────────────────────────────────────────────────────────────── */

/* Zone 2 — the licence promise. More air above it than the buttons had. */
body.theme-dtone .hero .hero-buttons { margin-bottom: 8px; }

/* Zone 3 — capability ticks. A hairline makes the boundary explicit rather than
   relying on whitespace alone, which is what "clubbed together" describes. */
/* (Superseded 2026-09-04 by the white proof card further down — the two-column grid
   treatment was replaced when these claims moved into a card of their own.) */
body.theme-dtone .hero .hero-trust-item {
    align-items: flex-start;
    text-align: left;
    line-height: 1.5;
}
/* The tick should sit on the first line of a wrapping label, not float mid-block. */
body.theme-dtone .hero .hero-trust-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--dt-mint-deep);
}

/* Zone 4 — legal meta. Separated in its own right; it is a different kind of
   information from the capability claims above it. */
body.theme-dtone .hero .hero-content > p:last-child {
    max-width: 620px;
    margin: 26px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(0,45,36,0.10);
}

/* Single column on narrow screens — a two-up grid at 390px produces two cramped
   columns of wrapped text. */
@media (max-width: 640px) {
    body.theme-dtone .hero .hero-trust {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 420px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK FOOTER — 2026-09-04, modelled on dtone.com
   Deep forest ground, mint column headings, white links. Every text colour inside
   is declared explicitly, because an earlier attempt painted the footer forest and
   left its light-tuned link colours on it at 2.51:1 — thirty unreadable links at
   once. The logo is already the transparent PNG, so it sits on dark without a box.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone footer.footer {
    background: var(--dt-forest);
    color: rgba(255,255,255,0.80);
    border-top: 4px solid var(--dt-mint);
}

/* Column headings — mint, small, tracked out. dtone.com's exact treatment. */
body.theme-dtone footer.footer .footer-col h3 {
    color: var(--dt-mint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Links: white, mint on hover. 14.99:1 and 9.29:1 on forest respectively. */
body.theme-dtone footer.footer a            { color: rgba(255,255,255,0.86); }
body.theme-dtone footer.footer a:hover      { color: var(--dt-mint); }
body.theme-dtone footer.footer li           { margin-bottom: 10px; }
body.theme-dtone footer.footer li::before   { display: none; }   /* no bullets in nav lists */
body.theme-dtone footer.footer .footer-col li { padding-left: 0; }

/* Body copy and the address blocks */
body.theme-dtone footer.footer p,
body.theme-dtone footer.footer .footer-tagline { color: rgba(255,255,255,0.72); }
body.theme-dtone footer.footer strong          { color: var(--dt-mint); }

/* The logo is a dark-ink PNG — invert it so it reads on forest. */
body.theme-dtone footer.footer .footer-logo-img { filter: brightness(0) invert(1); }

/* Social icons: subtle chips that light up on hover */
body.theme-dtone footer.footer .footer-social a {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border-radius: 10px;
}
body.theme-dtone footer.footer .footer-social a:hover {
    background: var(--dt-mint);
    color: var(--dt-forest);
}

/* Legal strip and bottom bar, separated by a hairline rather than jammed together */
body.theme-dtone footer.footer .footer-legal {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 22px;
    margin-top: 8px;
}
body.theme-dtone footer.footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 18px;
}
body.theme-dtone footer.footer .footer-legal p,
body.theme-dtone footer.footer .footer-bottom p { color: rgba(255,255,255,0.62); }
body.theme-dtone footer.footer .footer-bottom a { color: rgba(255,255,255,0.72); }

/* ─────────────────────────────────────────────────────────────────────────────
   SPLIT + OFFSET PILLS — 2026-09-04, modelled on dtone.com
   Argument on the left, its own claims as staggered mint pills on the right. The
   stagger is the whole point of the pattern: three identical left-aligned chips
   read as a list, three offset ones read as a composition.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone .why-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid rgba(0,45,36,0.12);
}
body.theme-dtone .why-split__eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}
body.theme-dtone .why-split__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* The li rule needs the same :not() chain as the ::before did — the generic rule's
   padding-left:22px was winning and dropping the tick on top of the text. */
body.theme-dtone .section .why-split__pills li:not(.nav-item):not(.dropdown-item):not([class*="nav"]),
body.theme-dtone .why-split__pills li {
    position: relative;
    background: var(--dt-mint);
    color: var(--dt-forest);
    border-radius: 20px;
    padding: 20px 24px 20px 52px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
/* The offset. Middle pill pushed right, outer two held back — dtone.com's rhythm. */
/* These need the chain too: raising the li rule's specificity to beat the generic
   dot rule also made its `margin: 0` beat these offsets, flattening the stagger. */
body.theme-dtone .section .why-split__pills li:not(.nav-item):not(.dropdown-item):not([class*="nav"]):nth-child(1),
body.theme-dtone .why-split__pills li:nth-child(1) { margin: 0 14% 0 0; }
body.theme-dtone .section .why-split__pills li:not(.nav-item):not(.dropdown-item):not([class*="nav"]):nth-child(2),
body.theme-dtone .why-split__pills li:nth-child(2) { margin: 0 0 0 14%; }
body.theme-dtone .section .why-split__pills li:not(.nav-item):not(.dropdown-item):not([class*="nav"]):nth-child(3),
body.theme-dtone .why-split__pills li:nth-child(3) { margin: 0 8% 0 0; }

/* Matching the generic dot rule's :not() chain — it sits at (0,5,2) and was still
   painting its 6px circle over this tick. Third time this has bitten; the chain has
   to be replicated, not out-guessed. */
body.theme-dtone .section .why-split__pills li:not(.nav-item):not(.dropdown-item):not([class*="nav"])::before,
body.theme-dtone .why-split__pills li::before {
    content: "✓";
    position: absolute;
    left: 22px;
    top: 20px;
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    color: var(--dt-forest);
    font-weight: 700;
}

/* Stacked and flush on narrow screens — the offsets waste width below two columns. */
@media (max-width: 860px) {
    body.theme-dtone .why-split { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; padding-top: 34px; }
    body.theme-dtone .section .why-split__pills li:not(.nav-item):not(.dropdown-item):not([class*="nav"]):nth-child(n),
    body.theme-dtone .why-split__pills li:nth-child(n) { margin: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOTTED BONE CTA — 2026-09-04, modelled on dtone.com
   Was a dark navy gradient. Now the bone ground with a fine dot grid and a mint
   wash rising from the bottom edge.

   Every text colour inside is re-declared for a LIGHT surface. Flipping a section's
   darkness without flipping its text is the single mistake that has recurred most in
   this theme — it produced the invisible CTA heading and thirty unreadable footer
   links. The banner is a gradient, so `backgroundColor` stays transparent and the
   automated audit cannot score it: these values were computed by hand against the
   two extremes the section actually paints, bone #F4F1EE at the top and roughly
   #DCF2E4 where the mint wash is strongest.
       forest  #002D24 on #F4F1EE = 12.89:1   on #DCF2E4 = 11.32:1
       body    #4a5568 on #F4F1EE =  7.40:1   on #DCF2E4 =  6.50:1
       dark grn #0E7A52 on #F4F1EE =  4.76:1  on #DCF2E4 =  4.18:1  → large text only,
                so the ghost link is darkened further rather than reused as-is.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone .cta-banner {
    background:
        /* the dot grid, sitting above the wash */
        radial-gradient(circle, rgba(0,45,36,0.14) 1.1px, transparent 1.1px),
        /* mint rising from the bottom edge */
        linear-gradient(to bottom, rgba(70,230,150,0) 46%, rgba(70,230,150,0.30) 100%),
        var(--dt-bone);
    background-size: 22px 22px, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0;
    border-top: 1px solid rgba(0,45,36,0.08);
}

/* The old decoration was a mint glow tuned for a navy ground; on bone it muddies
   the dot grid. */
body.theme-dtone .cta-banner::before { display: none; }

body.theme-dtone .cta-banner h2,
body.theme-dtone .cta-banner h3      { color: var(--dt-forest); }
body.theme-dtone .cta-banner p       { color: var(--text-body); }

/* Badge keeps the mint fill — forest on mint is 9.29:1 either way. */
body.theme-dtone .cta-badge,
body.theme-dtone .cta-banner .section-badge {
    background: var(--dt-mint);
    color: var(--dt-forest);
    font-weight: 500;
}

/* Primary button: mint pill with forest text, as on dtone.com. It was white-on-navy. */
body.theme-dtone .cta-banner .btn-primary,
body.theme-dtone .cta-banner .btn.btn-primary {
    background: var(--dt-mint);
    border-color: var(--dt-mint);
    color: var(--dt-forest);
}
body.theme-dtone .cta-banner .btn-primary:hover,
body.theme-dtone .cta-banner .btn.btn-primary:hover {
    background: var(--dt-mint-deep);
    border-color: var(--dt-mint-deep);
    color: var(--dt-forest);
}

/* Ghost link: was mint for the dark ground, which is 1.43:1 on bone. #0A5C3E gives
   7.14:1 on bone and 6.27:1 over the mint wash, so it holds at both extremes. */
body.theme-dtone .cta-banner .btn-ghost,
body.theme-dtone .cta-banner a:not(.btn) {
    color: #0A5C3E;
    border-color: rgba(10,92,62,0.42);
}
body.theme-dtone .cta-banner .btn-ghost:hover {
    background: var(--dt-mint);
    border-color: var(--dt-mint);
    color: var(--dt-forest);
}

/* The CTA's primary action is .btn-white, not .btn-primary — a white pill, which was
   right on the old navy ground and nearly invisible on bone. Mint pill with forest
   text, 9.29:1, matching dtone.com and every other primary button on the site. */
body.theme-dtone .cta-banner .btn-white,
body.theme-dtone .cta-banner .btn.btn-white {
    background: var(--dt-mint);
    border-color: var(--dt-mint);
    color: var(--dt-forest);
    font-weight: 500;
}
body.theme-dtone .cta-banner .btn-white:hover,
body.theme-dtone .cta-banner .btn.btn-white:hover {
    background: var(--dt-mint-deep);
    border-color: var(--dt-mint-deep);
    color: var(--dt-forest);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ICON CARDS — 2026-09-04, modelled on dtone.com
   The features grid already had the right anatomy: icon, heading, body. dtone.com's
   treatment centres the content, drops the icon's chip background for a plain line
   mark, rounds the card further and floats it on a soft shadow rather than a border.

   Icon colour: dtone.com's icons read as bright mint, but #46E696 is 1.61:1 on a
   white card and #1DE08F is 1.73:1 — below the 3:1 floor for a meaningful graphic.
   #17A071 is 3.33:1 and still reads as mint rather than bottle green.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone .features-grid { gap: 22px; align-items: stretch; }

body.theme-dtone .feature-card {
    background: var(--dt-white);
    border: 1px solid rgba(0,45,36,0.07);
    border-radius: 22px;
    padding: 40px 30px 34px;
    text-align: center;
    box-shadow: 0 10px 26px -14px rgba(0,45,36,0.16);
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
body.theme-dtone .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(0,45,36,0.24);
}
/* The base card paints a decorative ::before sweep tuned for the old palette. */
body.theme-dtone .feature-card::before { display: none; }

/* Icon: no chip, no gradient — a plain line mark, centred, larger. */
body.theme-dtone .feature-icon {
    /* The chip is not just a background — the base rule also draws a 1px mint border
       and a 14px radius, which left a faint box around each icon after the gradient
       was removed. All three have to go for a plain line mark. */
    background: none;
    border: 0;
    border-radius: 0;
    width: auto;
    height: 46px;
    margin: 0 auto 22px;
    color: #17A071;
}
body.theme-dtone .feature-icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.6;
}

body.theme-dtone .feature-card h3 {
    font-size: 1.06rem;
    line-height: 1.35;
    margin: 0 0 12px;
}
body.theme-dtone .feature-card p {
    margin: 0;
    line-height: 1.7;
    font-size: 0.94rem;
}
/* Links inside the body keep their own colour but should not fight the centring. */
body.theme-dtone .feature-card a { text-underline-offset: 2px; }

@media (max-width: 620px) {
    body.theme-dtone .feature-card { padding: 32px 24px 28px; border-radius: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOTTED HERO — 2026-09-04, modelled on dtone.com
   The hero takes the same 22px dot grid as the CTA banner, and the product
   screenshot below it continues that ground instead of sitting on a white band.
   The image was already on the page directly under the hero; it just read as a
   separate section because of the white background behind it.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone .hero,
body.theme-dtone .hero-shot {
    background:
        radial-gradient(circle, rgba(0,45,36,0.13) 1.1px, transparent 1.1px),
        var(--dt-bone);
    background-size: 22px 22px, 100% 100%;
}
/* The grid must line up across the seam between the two sections, so the second
   one continues the pattern rather than restarting it. 22px cells with the hero's
   own padding accounted for. */
body.theme-dtone .hero-shot {
    padding: 8px 0 56px;
    background-position: 0 -14px, 0 0;
}

/* The screenshot itself: large, rounded, floated on a soft green-tinted shadow. */
body.theme-dtone .hero-shot img {
    border-radius: 20px;
    box-shadow: 0 26px 60px -28px rgba(0,45,36,0.34);
    border: 1px solid rgba(0,45,36,0.08);
    display: block;
    width: 100%;
    height: auto;
}
body.theme-dtone .hero-shot p { color: var(--text-muted); }

@media (max-width: 620px) {
    body.theme-dtone .hero-shot     { padding-bottom: 36px; }
    body.theme-dtone .hero-shot img { border-radius: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO PROMISE PANEL + PROOF CARD — 2026-09-04, per dtone.com
   The promise becomes a forest panel (dtone.com's dark stats block), and the four
   proof claims below it become a white card with mint ticks (dtone.com's checklist
   card). Two surfaces of opposite polarity sitting one above the other, so every
   colour in both is stated explicitly rather than inherited.
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-dtone .hero-promise {
    max-width: 620px;
    margin: 30px auto 0;
    padding: 26px 30px;
    border-radius: 20px;
    background: var(--dt-forest);
    text-align: left;
}
body.theme-dtone .hero-promise strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--dt-mint);          /* 9.29:1 on forest */
    letter-spacing: -0.01em;
}
body.theme-dtone .hero-promise span {
    display: block;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.86);  /* 12.3:1 on forest */
}
body.theme-dtone .hero-promise a {
    color: var(--dt-mint);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The four proof claims: white card, mint ticks, left-aligned rows. Replaces the
   two-column grid with a hairline above it — a card reads as one object, which is
   what the promise panel above it now needs to sit against. */
body.theme-dtone .hero .hero-trust {
    display: block;
    max-width: 620px;
    margin: 18px auto 0;
    padding: 26px 30px;
    background: var(--dt-white);
    border: 1px solid rgba(0,45,36,0.08);
    border-radius: 20px;
    box-shadow: 0 10px 26px -16px rgba(0,45,36,0.20);
    border-top: 1px solid rgba(0,45,36,0.08);   /* overrides the earlier hairline */
}
body.theme-dtone .hero .hero-trust-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--dt-forest);
    padding: 11px 0;
    border-bottom: 1px solid rgba(0,45,36,0.07);
}
body.theme-dtone .hero .hero-trust-item:last-child  { border-bottom: 0; padding-bottom: 0; }
body.theme-dtone .hero .hero-trust-item:first-child { padding-top: 0; }
body.theme-dtone .hero .hero-trust-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #17A071;                 /* 3.33:1 on white — a meaningful graphic */
}

@media (max-width: 620px) {
    body.theme-dtone .hero-promise,
    body.theme-dtone .hero .hero-trust { padding: 22px 20px; border-radius: 16px; }
}