/* ThatsKrispy LIGHT reskin (2026-10-02, Andy: "we need a lighter site, with our blue and
   black tones and accents"). ONE token layer, loaded LAST on every public page.

   The dark theme is driven by tokens on body.tk-dark (tkheader.css) and body.tk.home-dark
   (home-dark.css), and every page stylesheet reads those tokens. This file redefines the
   same token names with light values, then fixes the places the dark theme hardcoded a
   colour (white-alpha surfaces, #fff hovers, navy panels). Markup, layout, copy and
   photos are untouched, and the body class names stay (renaming 70 pages buys nothing).

   Light palette
     --bg        #f7f9fd page           --bg-2   #edf2fb alternate band
     --panel     #ffffff card           --text   #0b0f1a ink (18.7:1 on --bg)
     --hd-soft   #364154 body (9.6:1)   --mute   #536078 secondary (6.1:1 on --bg)
     --hd-sky    #1d4ed8 accent text (6.2:1 on --bg, 6.7:1 on #fff)
     --hd-blue   #2563eb CTA fill, white text 5.2:1
   Black accent bands (3 per page max): .band-dark = BTS, closing CTA, footer. Inside a
   band the tokens flip back to the light-on-dark set below, so every child rule that
   reads var(--text) etc. re-themes without a per-class override.

   Z-index: nothing here sets one above 2. Header (9999), sheet (9998) and the hosted
   krispy-widget stay on top, untouched. */

/* ---------------------------------------------------------------- tokens */
html:has(body.tk-dark), html:has(body.home-dark) { background: #f7f9fd; color-scheme: light; }

body.tk-dark,
body.tk.home-dark {
  --bg: #f7f9fd;
  --bg-2: #edf2fb;
  --panel: #ffffff;
  --text: #0b0f1a;
  --hd-soft: #364154;
  --mute: #536078;
  --hd-line: rgba(11, 15, 26, 0.09);
  --hd-line-2: rgba(11, 15, 26, 0.16);
  --hd-blue: #2563eb;
  --hd-blue-press: #1d4ed8;
  --hd-sky: #1d4ed8;
  --hd-glow: rgba(37, 99, 235, 0.14);
  --hd-hover: #0b0f1a;                 /* link hover ink on light, flips to white in bands */
  --hd-link-rule: rgba(29, 78, 216, 0.38);
  --hd-surface: rgba(11, 15, 26, 0.04);   /* ghost fills, chips */
  --hd-surface-2: rgba(11, 15, 26, 0.07);
  --hd-shadow: 0 1px 2px rgba(11, 15, 26, 0.04), 0 12px 32px -12px rgba(11, 15, 26, 0.14), 0 36px 72px -36px rgba(37, 99, 235, 0.16);
  --hd-shadow-up: 0 2px 4px rgba(11, 15, 26, 0.05), 0 22px 48px -14px rgba(11, 15, 26, 0.18), 0 48px 90px -40px rgba(37, 99, 235, 0.26);

  --paper: #edf2fb;
  --cream: #ffffff;
  --ink: #0b0f1a;
  --body: #364154;
  --gray: #536078;
  --sub: #536078;
  --line: rgba(11, 15, 26, 0.14);
  --dark: #0b0f1a;
  --dline: rgba(255, 255, 255, 0.12);
  --dmute: #a9b4c8;

  --blue: #2563eb;
  --blue-press: #1d4ed8;
  --blue-text: #1d4ed8;
  --blue-lt: #1d4ed8;
  --blue-tint: #e6eefe;
  --blue-deep: #1d4ed8;
  --sky: #1d4ed8;
  --grad: linear-gradient(100deg, #1d4ed8 0%, #3b82f6 100%);
  --grad-dark: linear-gradient(100deg, #8fb8ff 0%, #b8d0ff 100%);

  --red: #2563eb;
  --red-press: #1d4ed8;
  --red-text: #1d4ed8;
  --red-on-dark: #8fb8ff;
  --lagoon: #1d4ed8;
  --lagoon-lt: #1d4ed8;
  --lagoon-tint: #e6eefe;
  --sun: #2563eb;
  --sun-text: #1d4ed8;
  --sun-tint: #e6eefe;
  --flamingo: #1d4ed8;
  --flamingo-text: #1d4ed8;
  --flamingo-tint: #e6eefe;

  --lift: 0 30px 60px -30px rgba(11, 15, 26, 0.28);
  --soft: 0 24px 60px -20px rgba(11, 15, 26, 0.18);

  background: var(--bg);
  color: var(--body);
}
body.tk.home-dark { color: var(--text); }

/* black accent bands: tokens flip back to light-on-dark inside */
body.tk-dark .band-dark, body.tk-dark .on-dark, body.tk-dark .tile--dark,
body.home-dark .hd-bts, body.home-dark .hd-contact, body.home-dark footer.ft,
body.tk-dark footer.ft, body.tk-dark .si-hero, body.tk-dark .si-contact, body.tk-dark .sd-close,
body.tk-dark .ab-cta, body.tk-dark .cf-close, body.tk-dark .wk-cta, body.tk-dark .gr-cta, body.tk-dark .wd-cta {
  --bg: #0b0f1a;
  --bg-2: #0e1424;
  --panel: #141b2d;
  --text: #f4f7fc;
  --hd-soft: #c9d2e0;
  --mute: #a1adc2;
  --hd-line: rgba(255, 255, 255, 0.1);
  --hd-line-2: rgba(255, 255, 255, 0.18);
  --hd-sky: #8fb8ff;
  --hd-glow: rgba(56, 120, 255, 0.22);
  --hd-hover: #ffffff;
  --hd-link-rule: rgba(143, 184, 255, 0.45);
  --hd-surface: rgba(255, 255, 255, 0.05);
  --hd-surface-2: rgba(255, 255, 255, 0.1);
  --ink: #f4f7fc;
  --body: #c9d2e0;
  --gray: #a1adc2;
  --sub: #a1adc2;
  --line: rgba(255, 255, 255, 0.16);
  --cream: #141b2d;
  --paper: #0e1424;
  --blue-text: #8fb8ff;
  --blue-lt: #8fb8ff;
  --sky: #8fb8ff;
  --red-text: #8fb8ff;
  --blue-tint: #131d33;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
body.home-dark ::selection, body.tk-dark ::selection { background: rgba(37, 99, 235, 0.22); color: var(--text); }
body.home-dark :focus-visible, body.tk-dark :focus-visible { outline-color: var(--hd-sky); }
body.home-dark main a:not([class]):hover { color: var(--hd-hover); }
:where(body.tk-dark main a:not([class]):hover) { color: var(--hd-hover); }
body.home-dark h1, body.home-dark h2, body.home-dark h3 { color: var(--text); }

/* ---------------------------------------------------------------- header */
body.tk-dark .tkh, body.home-dark .tkh {
  background: rgba(247, 249, 253, 0.74);
  border-bottom: 1px solid var(--hd-line);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}
body.tk-dark .tkh.scrolled, body.home-dark .tkh.scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--hd-line);
  box-shadow: 0 8px 28px -18px rgba(11, 15, 26, 0.25);
}
body.tk-dark .tkh-logo, body.home-dark .tkh-logo { filter: none; }
body.tk-dark footer.ft .ft-mark img, body.home-dark footer.ft .ft-mark img { filter: invert(1); }
body.tk-dark .tkh-nav > a:hover, body.tk-dark .tkh-drop > summary:hover, body.tk-dark .tkh-drop[open] > summary,
body.home-dark .tkh-nav > a:hover, body.home-dark .tkh-drop > summary:hover, body.home-dark .tkh-drop[open] > summary,
body.tk-dark .tkh-phone:hover, body.home-dark .tkh-phone:hover { color: var(--hd-sky) !important; }
body.tk-dark .tkh-nav > a.active, body.tk-dark .tkh-drop > summary.active,
body.home-dark .tkh-nav > a.active { color: var(--text) !important; }
body.tk-dark .tkh-drop-menu, body.home-dark .tkh-drop-menu {
  background: #ffffff;
  border-color: var(--hd-line);
  box-shadow: 0 2px 6px rgba(11, 15, 26, 0.05), 0 28px 60px -22px rgba(11, 15, 26, 0.28);
}
body.tk-dark .tkh-drop-menu a:hover, body.home-dark .tkh-drop-menu a:hover { background: rgba(37, 99, 235, 0.07); color: var(--hd-sky) !important; }
body.tk-dark .tkh-btn, body.home-dark .tkh-btn { box-shadow: 0 6px 18px -8px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
body.tk-dark .langsw button[aria-pressed="true"], body.home-dark .langsw button[aria-pressed="true"] { background: var(--text); color: #fff; }

/* mobile sheet */
body.tk-dark .tkh-sheet, body.home-dark .tkh-sheet { background: #f7f9fd; }
body.tk-dark .tkh-sheet-cta, body.home-dark .tkh-sheet-cta { background: #f7f9fd; }
body.tk-dark .tkh-sheet-group--grid a, body.home-dark .tkh-sheet-group--grid a { background: #fff; border-color: var(--hd-line); color: var(--hd-soft) !important; }

/* quiet scroll progress hairline under the header (progressive enhancement) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.tk-dark .tkh::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, #1d4ed8, #60a5fa); transform-origin: 0 50%;
      transform: scaleX(0); animation: lt-progress linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
    html[data-a11y-motion="reduced"] body.tk-dark .tkh::after { display: none; }
  }
}
@keyframes lt-progress { to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- buttons, links, chips */
body.tk-dark .btn-ghost, body.tk-dark .on-dark .btn-ghost, body.tk-dark .hd-btn--ghost, body.home-dark .hd-btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hd-line-2) !important;
}
body.tk-dark .btn-ghost:hover, body.tk-dark .on-dark .btn-ghost:hover, body.tk-dark .hd-btn--ghost:hover, body.home-dark .hd-btn--ghost:hover {
  background: #fff; color: var(--hd-sky);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.45), 0 8px 24px -12px rgba(37, 99, 235, 0.35) !important;
}
body.tk-dark .btn-solid { background: var(--text); color: #fff; }
body.tk-dark .btn-solid:hover { background: #1b2336; color: #fff; }
body.tk-dark .hd-btn--primary, body.home-dark .hd-btn--primary, body.tk-dark .btn-red, body.tk-dark .btn-primary {
  box-shadow: 0 12px 30px -12px rgba(37, 99, 235, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
body.tk-dark .hd-btn--primary:hover, body.home-dark .hd-btn--primary:hover { box-shadow: 0 16px 38px -12px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
/* inside a black band the ghost button is glass-on-black again */
body.tk-dark .band-dark .hd-btn--ghost, body.home-dark .hd-bts .hd-btn--ghost, body.home-dark .hd-contact .hd-btn--ghost,
body.tk-dark .on-dark .hd-btn--ghost {
  background: rgba(255, 255, 255, 0.06); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
body.tk-dark .band-dark .hd-btn--ghost:hover, body.home-dark .hd-bts .hd-btn--ghost:hover, body.home-dark .hd-contact .hd-btn--ghost:hover,
body.tk-dark .on-dark .hd-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important; }

body.tk-dark .hd-link, body.home-dark .hd-link, body.tk-dark .tk-link { border-bottom-color: var(--hd-link-rule); }
body.tk-dark .hd-link:hover, body.home-dark .hd-link:hover, body.tk-dark .tk-link:hover { color: var(--hd-hover); border-color: var(--hd-hover); }
body.home-dark .hd-btn .tk-wa-ic { color: var(--hd-sky); }
body.home-dark .hd-hero-note a:hover, body.home-dark .hd-tel:hover { color: var(--hd-sky) !important; }

body.tk-dark .hd-eyebrow, body.home-dark .hd-eyebrow {
  color: var(--hd-sky);
  background: rgba(37, 99, 235, 0.07);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22);
}
body.home-dark .hd-bts .hd-eyebrow, body.home-dark .hd-contact .hd-eyebrow {
  background: rgba(143, 184, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(143, 184, 255, 0.3);
}
body.tk-dark .hd-chips li, body.home-dark .hd-chips li { background: #fff; box-shadow: inset 0 0 0 1px var(--hd-line-2), 0 1px 2px rgba(11, 15, 26, 0.04); }

/* ---------------------------------------------------------------- depth: bezels, frames, cards */
body.tk-dark .hd-bezel, body.home-dark .hd-bezel {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--hd-line), var(--hd-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.6s var(--hd-ease), transform 0.6s var(--hd-ease);
}
body.tk-dark .hd-core, body.home-dark .hd-core { box-shadow: inset 0 0 0 1px rgba(11, 15, 26, 0.05); }
body.home-dark .hd-craft:hover .hd-bezel { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25), var(--hd-shadow-up); transform: translateY(-4px); }
body.home-dark .hd-bts .hd-bezel, body.home-dark .hd-contact .hd-bezel { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--hd-line); -webkit-backdrop-filter: none; backdrop-filter: none; }

body.home-dark .hd-stack figure { background: #fff; box-shadow: 0 2px 4px rgba(11, 15, 26, 0.06), 0 30px 60px -22px rgba(11, 15, 26, 0.38), 0 0 0 5px rgba(255, 255, 255, 0.9); }
body.home-dark .hd-stack figcaption { background: rgba(11, 15, 26, 0.66); }

body.home-dark .hd-browser { background: #fff; box-shadow: inset 0 0 0 1px var(--hd-line-2), 0 1px 2px rgba(11, 15, 26, 0.05), 0 16px 36px -18px rgba(11, 15, 26, 0.3); }
body.home-dark .hd-browser-bar { background: #eef2f9; border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-browser-bar span { background: rgba(11, 15, 26, 0.2); }
body.home-dark .hd-wall-card { transition: transform 0.6s var(--hd-ease); }
body.home-dark .hd-wall-card:hover { transform: translateY(-4px); }
body.home-dark .hd-wall-card:hover .hd-browser { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 28px 50px -22px rgba(37, 99, 235, 0.4); }

body.home-dark .hd-feed-grid figure, body.home-dark .hd-bts-collage figure { background: #e3e9f5; }
body.home-dark .hd-feed-grid figure { box-shadow: inset 0 0 0 1px var(--hd-line), 0 10px 24px -14px rgba(11, 15, 26, 0.3); }
body.home-dark .hd-bts-collage figure { box-shadow: inset 0 0 0 1px var(--hd-line-2); background: #141b2d; }

/* phone: the device stays black glass (real hardware), shadow goes light */
body.home-dark .hd-phone {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 4px #06080e,
    0 50px 100px -44px rgba(37, 99, 235, 0.5),
    0 30px 60px -26px rgba(11, 15, 26, 0.5);
}

/* ---------------------------------------------------------------- sections */
/* hero: layered blue wash, one slow drifting glow */
body.home-dark .hd-hero {
  background:
    radial-gradient(52% 60% at 88% 4%, rgba(37, 99, 235, 0.16), transparent 70%),
    radial-gradient(40% 46% at 6% 38%, rgba(143, 184, 255, 0.22), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}
body.home-dark .hd-hero::before {
  content: ""; position: absolute; z-index: 0; right: -12%; top: -30%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0) 64%);
  filter: blur(6px);
}
body.home-dark .hd-hero > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  body.home-dark .hd-hero::before { animation: lt-drift 18s ease-in-out infinite alternate; }
  html[data-a11y-motion="reduced"] body.home-dark .hd-hero::before { animation: none; }
}
@keyframes lt-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
/* soft parallax on the floating stack as it scrolls out (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.home-dark .hd-stack .s1 { animation: lt-par-a linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    body.home-dark .hd-stack .s3 { animation: lt-par-b linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    html[data-a11y-motion="reduced"] body.home-dark .hd-stack .s1, html[data-a11y-motion="reduced"] body.home-dark .hd-stack .s3 { animation: none; }
  }
}
@keyframes lt-par-a { to { translate: 0 -34px; } }
@keyframes lt-par-b { to { translate: 0 42px; } }

body.home-dark .hd-roll { background: #fff; border-color: var(--hd-line); }

/* BTS: black band with a quiet blue bloom */
body.home-dark .hd-bts {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 0% 0%, rgba(37, 99, 235, 0.22), transparent 62%), #0b0f1a;
  border-color: #0b0f1a;
  color: var(--hd-soft);
}
body.home-dark .hd-bts > .wrap { position: relative; }
body.home-dark .hd-bts-list li, body.home-dark .hd-bts .hd-lede { color: var(--mute); }

body.home-dark .hd-wall { background: linear-gradient(180deg, #ffffff, #f2f6fd); border-color: var(--hd-line); }
body.home-dark .hd-content { background: var(--bg-2); border-color: var(--hd-line); }
body.home-dark .hd-craft-sec { background: var(--bg); }

/* work smarter: pale blue panel, caustic texture retired (it was a screen blend for dark) */
body.home-dark .hd-half--biz {
  background: radial-gradient(70% 90% at 100% 0%, rgba(37, 99, 235, 0.13), transparent 62%), linear-gradient(180deg, #eef3fc, #f7f9fd);
  border-color: var(--hd-line);
}
body.home-dark .hd-half--biz::before { background: radial-gradient(circle, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0) 62%); }
body.home-dark .hd-half--biz::after { display: none; }
body.home-dark .hd-inflow li::before { background: var(--hd-sky); }

body.home-dark .hd-step-num { box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.65); }
body.home-dark .hd-step { transition: background-color 0.4s var(--hd-ease); }

/* FAQ */
body.tk-dark .hd-faq summary:hover i, body.home-dark .hd-faq summary:hover i { background: rgba(37, 99, 235, 0.08); }
body.home-dark .hd-faq details[open] { background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent); }

/* contact: closing black band, white card holds the form */
body.home-dark .hd-contact {
  background: radial-gradient(55% 70% at 100% 100%, rgba(37, 99, 235, 0.24), transparent 64%), #0b0f1a;
  border-color: #0b0f1a;
}
body.home-dark .hd-contact-copy > p, body.home-dark .hd-contact-copy .hd-tel-label, body.home-dark .hd-contact-where { color: var(--hd-soft); }
body.home-dark .hd-contact-copy .hd-tel-label, body.home-dark .hd-contact-copy .hd-contact-where { color: var(--mute); }
body.home-dark .hd-tel { color: #fff; }
body.home-dark .hd-tel:hover { color: #8fb8ff; }
body.home-dark .hd-formwrap {
  --text: #0b0f1a; --hd-soft: #364154; --mute: #536078; --hd-sky: #1d4ed8; --hd-line: rgba(11, 15, 26, 0.09); --hd-line-2: rgba(11, 15, 26, 0.18);
  --hd-hover: #0b0f1a; --hd-surface: rgba(11, 15, 26, 0.04);
  color-scheme: light;
  background: #ffffff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
body.home-dark .hd-contact .hd-formwrap .hd-core { background: #fff; box-shadow: none; }

/* ---------------------------------------------------------------- form fields */
body.tk-dark .tkf-input, body.tk-dark .on-dark .tkf-input, body.home-dark .tkf-input {
  background: #f7f9fd; border-color: var(--hd-line-2); color: var(--text);
}
body.tk-dark .tkf-input:hover, body.tk-dark .on-dark .tkf-input:hover, body.home-dark .tkf-input:hover { border-color: rgba(11, 15, 26, 0.34); background: #fff; }
body.tk-dark .tkf-input:focus-visible, body.tk-dark .on-dark .tkf-input:focus-visible, body.home-dark .tkf-input:focus-visible {
  background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
body.tk-dark .tkf-input[aria-invalid="true"], body.tk-dark .on-dark .tkf-input[aria-invalid="true"], body.home-dark .tkf-input[aria-invalid="true"] { border-color: #d92d20; }
body.tk-dark select.tkf-input, body.home-dark select.tkf-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23364154' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
body.tk-dark select.tkf-input option, body.home-dark select.tkf-input option { background: #fff; color: #0b0f1a; }
body.tk-dark .tkf-error, body.tk-dark .on-dark .tkf-error, body.home-dark .tkf-error { color: #b42318; }
body.tk-dark .tkf-status, body.tk-dark .on-dark .tkf-status, body.home-dark .tkf-status { color: #1d4ed8; }

/* ---------------------------------------------------------------- footer: black band */
body.tk-dark footer.ft, body.home-dark footer.ft {
  background: #070a12; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--hd-soft);
}
body.home-dark footer.ft .ft-phone, body.tk-dark footer.ft .ft-phone { color: #fff !important; }
body.home-dark footer.ft a:hover, body.home-dark footer.ft .ft-col a:hover, body.home-dark footer.ft .ft-legal a:hover,
body.tk-dark footer.ft a:hover, body.tk-dark footer.ft .ft-col a:hover { color: #8fb8ff !important; }

/* ---------------------------------------------------------------- widget corner check (hosted, inherits the page) */
@media (max-width: 559px) {
  body.home-dark .hd-hero-note { margin-bottom: 0.25rem; }
}

/* ---------------------------------------------------------------- inner pages: components the dark theme hardcoded */
/* navy gradient cards become pale-blue-to-white cards */
body.tk-dark .tkl-summary p, body.tk-dark .sd-card--text .hd-core, body.tk-dark .sd-prep--have .hd-core,
body.tk-dark .si-outcome .hd-core, body.tk-dark .si-own .hd-core, body.tk-dark .ab-pil--smart .hd-core,
body.tk-dark .hd-plan--feature .hd-core, body.tk-dark .hd-own .hd-core {
  background: linear-gradient(160deg, #e8f0ff, #ffffff 62%);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}
body.tk-dark .hd-plan--feature { background: linear-gradient(160deg, rgba(37, 99, 235, 0.5), rgba(37, 99, 235, 0.14) 45%, rgba(37, 99, 235, 0.05)); }
body.tk-dark .hd-core img.hd-own-art, body.home-dark .hd-core img.hd-own-art, body.home-dark .hd-own-strip img.hd-own-key { mix-blend-mode: multiply; }
body.tk-dark .hd-own-strip { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--hd-line); }

/* closing contact band on the software page: black, white form card (same as the homepage) */
body.tk-dark .si-contact { background: radial-gradient(55% 70% at 100% 100%, rgba(37, 99, 235, 0.24), transparent 64%), #0b0f1a; border-color: #0b0f1a; }
body.tk-dark .si-formwrap {
  --text: #0b0f1a; --hd-soft: #364154; --mute: #536078; --hd-sky: #1d4ed8; --hd-line: rgba(11, 15, 26, 0.09); --hd-line-2: rgba(11, 15, 26, 0.18);
  --hd-hover: #0b0f1a; color-scheme: light;
}
body.tk-dark .si-contact .si-formwrap .hd-core { background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); }
body.tk-dark .si-hero { background-color: #05070d; }
body.tk-dark .si-hero .hd-btn--ghost, body.tk-dark .sd-close .hd-btn--ghost, body.tk-dark .ab-cta .hd-btn--ghost,
body.tk-dark .cf-close .hd-btn--ghost, body.tk-dark .wk-cta .hd-btn--ghost, body.tk-dark .gr-cta .hd-btn--ghost, body.tk-dark .wd-cta .hd-btn--ghost,
body.tk-dark .si-contact .hd-btn--ghost {
  background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
body.tk-dark .sd-close h2, body.tk-dark .ab-cta h2, body.tk-dark .cf-close h2, body.tk-dark .wk-cta h2, body.tk-dark .gr-cta h2 { color: #f4f7fc; }
body.tk-dark .sd-close h2 em, body.tk-dark .ab-cta h2 em, body.tk-dark .cf-close h2 em, body.tk-dark .wk-cta h2 em, body.tk-dark .gr-cta h2 em { color: #8fb8ff; }
body.tk-dark .on-dark, body.tk-dark .svc-hero.on-dark, body.tk-dark .svc-sec.on-dark, body.tk-dark .tile--dark { background: #0b0f1a; color: #c9d2e0; }
body.tk-dark .on-dark .btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important; }

/* ---------------------------------------------------------------- gate fixes (2026-10-02 contrast + dark-leftover pass) */
/* photo closing band: the dark theme left the section transparent over the dark page, so on light it
   rendered pale text on a pale page (1.02:1). Give it the black band base the overlay was written for. */
body.tk-dark .sd-close { background: #070a12; }
/* FAQ inline links were hardcoded #fff (invisible on light) */
body.home-dark .hd-faq-foot a, body.home-dark .hd-faq details p a { color: var(--hd-sky); }
body.home-dark .hd-faq-foot a:hover, body.home-dark .hd-faq details p a:hover { color: var(--hd-hover); }
/* browser-mock title bars are a dark window (real hardware look): label stays light on it */
body.tk-dark .wd-win-bar span, body.tk-dark .hs-win-bar span { color: #a1adc2; }
/* web design: closing band had no base colour (pale text on pale page), launching chip sits on the dark mock window */
body.tk-dark .wd-cta { background: #070a12; }
body.tk-dark .wd-win-bar .wd-soon { color: #8fb8ff; }
/* growth/service closing band (gr-cta) had the same transparent base as sd-close */
body.tk-dark .gr-cta { background: #070a12; }
/* /behind-the-scenes/ (Pixieset legacy theme) declared its own dark palette on body.tk-dark in tk.css:
   its hero title and footer rendered dark-on-dark once the shared tokens went light. Light values for it. */
body.tk-dark.theme-theme7 {
  --primary-background: #f7f9fd;
  --accent-background: #edf2fb;
  --primary-paragraphs: #364154;
  --accent-paragraphs: #364154;
  --primary-headings: #0b0f1a;
  --accent-headings: #0b0f1a;
  --primary-details: rgba(11, 15, 26, 0.12);
  --accent-details: rgba(11, 15, 26, 0.12);
}
/* web design "Grow" offer: the page keeps it as the one featured black card, so it takes the on-dark tokens */
body.tk-dark article.wd-offer--grow .hd-core {
  --text: #f4f7fc; --hd-soft: #c9d2e0; --mute: #a1adc2; --hd-sky: #8fb8ff; --hd-hover: #ffffff;
  --hd-line: rgba(255, 255, 255, 0.1); --hd-line-2: rgba(255, 255, 255, 0.18);
  --ink: #f4f7fc; --body: #c9d2e0; --gray: #a1adc2; --sub: #a1adc2;
  color: var(--hd-soft);
}

/* gate fixes 2: outlined card numerals and the partner Forward plan card kept dark-theme surfaces */
body.tk-dark .sd-card-n { -webkit-text-stroke: 1px rgba(37, 99, 235, 0.65); }
body.tk-dark .pp-plan--feature .hd-core { background: linear-gradient(160deg, #e8f0ff, #ffffff 62%); }

/* ---------------------------------------------------------------- steps: horizontal 45 degree ribbon
   (Andy 2026-10-02: no numbered circles, one horizontal graphic cut by 45 degree slashes).
   --cut equals the band height so the slash is exactly 45 degrees. */
body.home-dark .hd-timeline { padding-block: clamp(3rem, 5vw, 4.5rem); }
body.home-dark .hd-timeline-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
body.home-dark .hd-timeline-aside .hd-lede { margin: 0; }
body.home-dark .hd-timeline-aside .hd-btn { margin-top: 1.1rem; }
body.home-dark .hd-flow { --cut: 3.25rem; --gap: 6px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.home-dark .hd-flow-seg { display: flex; flex-direction: column; min-width: 0; }
body.home-dark .hd-flow-band { height: var(--cut); display: flex; align-items: center; color: #fff; background: #2563eb; width: calc(100% + var(--cut) - var(--gap)); padding-left: calc(var(--cut) + 0.5rem); padding-right: var(--cut); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
body.home-dark .hd-flow-seg:nth-child(even) .hd-flow-band { background: #0b0f1a; }
body.home-dark .hd-flow-seg:first-child .hd-flow-band { padding-left: 1rem; clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
body.home-dark .hd-flow-seg:last-child .hd-flow-band { width: 100%; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); }
body.home-dark .hd-flow-band h3 { margin: 0; color: #fff; font-size: 1.15rem; letter-spacing: -0.02em; }
body.home-dark .hd-flow-tile { margin: 1.1rem 0 0; padding-right: 1.1rem; }
body.home-dark .hd-flow-tile img, body.home-dark .hd-flow-tile--listen { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--hd-line-2); background: #0b0f1a; box-shadow: var(--hd-shadow); }
body.home-dark .hd-flow-tile--listen { padding: 0; margin: 1.1rem 1.1rem 0 0; width: auto; }
body.home-dark .hd-flow-tile--listen svg { display: block; width: 100%; height: 100%; }
body.home-dark .hd-flow-tile figcaption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--hd-soft); }
body.home-dark .hd-flow-seg > p { margin: 0.9rem 0 0; padding-right: 1.1rem; color: var(--hd-soft); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 899px) {
  body.home-dark .hd-timeline-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  body.home-dark .hd-flow { --cut: 0.9rem; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  body.home-dark .hd-flow-band, body.home-dark .hd-flow-seg:first-child .hd-flow-band, body.home-dark .hd-flow-seg:last-child .hd-flow-band { width: 100%; height: 3.25rem; padding: 0 1rem 0.5rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
  body.home-dark .hd-flow-tile, body.home-dark .hd-flow-tile--listen { padding-right: 0; margin-right: 0; max-width: 26rem; }
  body.home-dark .hd-flow-seg > p { padding-right: 0; }
}