/* ThatsKrispy blue remix, shared layer (2026-10-02). Loaded sitewide after the page CSS.
   PART A: section grammar for every dark page (body.tk-dark): square-marker eyebrows, italic
   sky-blue accent word, stacked heads, framed photos, outline chips, browser frames, framed hero.
   PART B: homepage-only sections (body.home-dark). One --gutter token (tkheader.css), blue tokens only. */

/* ===================== PART A: sitewide ===================== */
body.tk-dark .hd-eyebrow, body.tk-dark .tkl-eyebrow, body.tk-dark .eyebrow, body.tk-dark .svc-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hd-soft); }
body.tk-dark .hd-eyebrow::before, body.tk-dark .tkl-eyebrow::before, body.tk-dark .eyebrow::before, body.tk-dark .svc-eyebrow::before {
  content: ""; flex: none; width: 9px; height: 9px; background: var(--hd-blue); }
body.tk-dark .hd-h2 span, body.tk-dark .hd-h2 em, body.tk-dark main h1 span, body.tk-dark main h1 em, body.tk-dark .tkl-h1 em {
  font-style: italic; font-weight: 500; padding-right: 0.04em; color: var(--hd-sky); }
body.tk-dark .tkl-h1 em { font-weight: 500; }

body.tk-dark .hd-tag { display: inline-flex; align-items: center; gap: 0.6rem; }
body.tk-dark .hd-tag::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--hd-blue); }

/* heads: headline, then the lede under it, left aligned */
body.tk-dark .sd-head, body.tk-dark .ab-gal-head, body.tk-dark .cf-gal-head, body.tk-dark .wk-head, body.tk-dark .wd-head--split, body.tk-dark .hd-content-head { display: block; }
body.tk-dark .sd-head > div, body.tk-dark .ab-gal-head > div, body.tk-dark .wk-head > div { grid-column: auto; }
body.tk-dark .sd-head .hd-lede, body.tk-dark .ab-gal-head .hd-lede, body.tk-dark .cf-gal-head .hd-lede, body.tk-dark .wk-head .hd-lede, body.tk-dark .wd-head--split .hd-lede { grid-column: auto; max-width: 56ch; margin: 1.5rem 0 0; }
body.tk-dark .sd-head--center, body.tk-dark .gr-head--center, body.tk-dark .ab-head--center { text-align: left; margin-inline: 0; max-width: 56rem; }
body.tk-dark .sd-head--center .hd-lede, body.tk-dark .gr-head--center .hd-lede, body.tk-dark .ab-head--center .hd-lede { margin-left: 0; margin-right: 0; }
body.tk-dark .sd-head .hd-h2 { max-width: none; }

/* framed photos (photo-only bezels outside cards); cards keep the photo flush on top */
body.tk-dark .hd-bezel:has(> .hd-core > img:only-child) { padding: 6px; border-radius: 18px; background: #eef2f8; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.75); }
body.tk-dark .hd-bezel:has(> .hd-core > img:only-child) > .hd-core { border-radius: 12px; box-shadow: none; }
body.tk-dark .sd-card .hd-bezel, body.tk-dark .gr-panel .hd-bezel, body.tk-dark .wk-tile .hd-bezel, body.tk-dark .hd-craft .hd-bezel, body.tk-dark .hd-plan .hd-bezel,
body.tk-dark .sd-card .hd-bezel:has(> .hd-core > img:only-child), body.tk-dark .gr-panel .hd-bezel:has(> .hd-core > img:only-child), body.tk-dark .wk-tile .hd-bezel:has(> .hd-core > img:only-child) { padding: 0; background: none; border-radius: 0; box-shadow: none; }
body.tk-dark .sd-card .hd-core, body.tk-dark .gr-panel .hd-core, body.tk-dark .wk-tile .hd-core { border-radius: 0; }

/* chips: outline only */
body.tk-dark .hd-chips li { background: none; }

/* ghost buttons keep the outline look; links stay sky */
body.tk-dark .hd-btn--ghost { background: none; }

/* browser-frame captures: first dot blue, name tracked */
body.tk-dark .wd-win-bar i:first-child, body.tk-dark .hs-win-bar i:first-child { background: var(--hd-blue); }
body.tk-dark .wd-win-bar span, body.tk-dark .hs-win-bar span { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

/* service hero: copy left, one framed tilted photo right */
body.tk-dark .sd-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 0; overflow: hidden; gap: clamp(2rem, 4vw, 3.5rem); padding: clamp(2.5rem, 6vw, 5rem) 0; }
body.tk-dark .sd-hero::before { display: none; }
body.tk-dark .sd-hero .sd-hero-copy { order: 1; padding: 0 var(--gutter); max-width: var(--wrap); width: 100%; margin: 0 auto; }
body.tk-dark .sd-hero .sd-hero-img { order: 2; position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; z-index: auto; width: min(100% - 2 * var(--gutter), 460px); aspect-ratio: 5 / 4; margin: 0 auto; border: 7px solid #eef2f8; border-radius: 16px; overflow: hidden; transform: rotate(2deg); box-shadow: 0 34px 70px -22px rgba(0, 0, 0, 0.75); background: #eef2f8; }
body.tk-dark .sd-hero .sd-hero-img img { object-position: var(--hpm, var(--hp, 50% 50%)); }
body.tk-dark .sd-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); max-width: 14ch; }
body.tk-dark .sd-hero .hd-eyebrow { display: inline-flex; }
body.tk-dark .sd-hero--tight .sd-hero-img { aspect-ratio: 5 / 4; }
body.tk-dark .sd-hero--tight .sd-hero-copy, body.tk-dark .sd-hero--split .sd-hero-copy { margin-top: 0; padding-top: 0; padding-bottom: 0; }
@media (min-width: 1024px) {
  body.tk-dark .sd-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
  body.tk-dark .sd-hero .sd-hero-copy { padding: 0; max-width: none; margin: 0; }
  body.tk-dark .sd-hero .sd-hero-img { width: 100%; aspect-ratio: 4 / 3.4; justify-self: end; max-width: 620px; }
  body.tk-dark .sd-hero--tight .sd-hero-img { aspect-ratio: 4 / 3.4; }
  body.tk-dark .sd-hero--split .sd-hero-img { left: auto; width: 100%; }
  body.tk-dark .sd-hero h1 { max-width: 13ch; }
}
html[data-a11y-motion="reduced"] .sd-hero .sd-hero-img { transform: none; }

/* ===================== PART B: homepage ===================== */

/* eyebrow: square marker + tracked text (not a pill) */
body.home-dark .hd-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; color: var(--hd-soft); }
body.home-dark .hd-eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--hd-blue); }
/* accent word: italic, sky blue (Satoshi has no italic cut, browser oblique) */
body.home-dark .hd-h2 span, body.home-dark .hd-hero h1 span { font-style: italic; font-weight: 500; padding-right: 0.04em; }

/* hero: framed photos, tilted and overlapping */
body.home-dark .hd-stack figure { border: 7px solid #eef2f8; border-radius: 16px; background: #eef2f8; box-shadow: 0 34px 70px -22px rgba(0, 0, 0, 0.75); }
body.home-dark .hd-hero-note { color: var(--hd-soft); }
body.home-dark .hd-hero-note a { color: var(--hd-sky); }

/* stacked section heads: headline, then lede under it */
body.home-dark .hd-content-head { display: block; }
body.home-dark .hd-content-head .hd-lede { max-width: 56ch; margin: 1.5rem 0 0; }

/* behind the scenes band */
body.home-dark .hd-bts { background: #05070d; }
body.home-dark .hd-bts-note { display: flex; align-items: center; gap: 0.6rem; margin: 1.75rem 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hd-soft); }
body.home-dark .hd-bts-note .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
body.home-dark .hd-bts-copy .hd-btn { margin-top: 1.5rem; }
body.home-dark .hd-bts-collage figure { border-radius: 14px; }

/* four crafts: cards, photo flush on top, chips, accent link */
body.home-dark .hd-craft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
body.home-dark .hd-craft { background: var(--panel); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hd-line-2); overflow: hidden; transition: transform 0.5s var(--hd-ease); }
body.home-dark .hd-craft:hover { transform: translateY(-3px); }
body.home-dark .hd-craft .hd-bezel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
body.home-dark .hd-craft .hd-core { border-radius: 0; margin-bottom: 0; aspect-ratio: 3 / 2; box-shadow: none; }
body.home-dark .hd-craft > p, body.home-dark .hd-craft > h3, body.home-dark .hd-craft > ul, body.home-dark .hd-craft > .hd-link { margin-left: 1.5rem; margin-right: 1.5rem; }
body.home-dark .hd-craft-num { margin-top: 1.4rem; margin-bottom: 0.5rem; color: var(--hd-sky); }
body.home-dark .hd-craft h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
body.home-dark .hd-craft ul.hd-chips { margin-top: 1rem; }
body.home-dark .hd-craft ul.hd-chips li { background: none; }
body.home-dark .hd-craft .hd-link { align-self: flex-start; margin-top: 1.1rem; margin-bottom: 1.6rem; }
body.home-dark .hd-craft:not(:has(.hd-link)) ul.hd-chips { margin-bottom: 1.6rem; }
body.home-dark .hd-core--six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; aspect-ratio: 3 / 2; }
body.home-dark .hd-core--six img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
body.home-dark .hd-core--six img:nth-child(3), body.home-dark .hd-core--six img:nth-child(4), body.home-dark .hd-core--six img:nth-child(5) { object-position: 50% 40%; }
@media (max-width: 767px) { body.home-dark .hd-craft-grid { grid-template-columns: 1fr; } }

/* work wall: browser frame, dots + name in the bar, no caption */
body.home-dark .hd-wall-grid { gap: 1.5rem; }
body.home-dark .hd-browser { border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hd-line-2); }
body.home-dark .hd-browser-bar { align-items: center; gap: 7px; padding: 12px 14px; background: transparent; }
body.home-dark .hd-browser-bar .d { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
body.home-dark .hd-browser-bar .d:first-child { background: var(--hd-blue); }
body.home-dark .hd-browser-bar .hd-browser-name { width: auto; height: auto; margin-left: 0.5rem; border-radius: 0; background: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hd-soft); }
body.home-dark .hd-wall-foot .hd-link { display: inline-block; padding: 0.95rem 1.7rem; border: 1px solid var(--hd-line-2); border-radius: 14px; color: var(--text); }
body.home-dark .hd-wall-foot .hd-link:hover { border-color: var(--hd-sky); color: #fff; }

/* feed: grid in a rounded block, tilted phone, chips centered */
body.home-dark .hd-feed-grid { gap: 8px; padding: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8); }
body.home-dark .hd-feed-grid figure { border-radius: 0; box-shadow: none; }
body.home-dark .hd-phone-col { align-self: center; position: static; }
@media (min-width: 1024px) { body.home-dark .hd-phone-col .hd-phone { transform: rotate(3deg); } }
body.home-dark .hd-content-foot { justify-content: center; text-align: center; flex-direction: column; }
body.home-dark .hd-content-foot .hd-chips { justify-content: center; }
body.home-dark .hd-chips li { background: none; }

/* work smarter band */
body.home-dark .hd-smart .hd-btn { margin-top: 2rem; }
body.home-dark .hd-inflow span { font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 500; }
body.home-dark .hd-inflow li { border-top-color: var(--hd-line-2); }
body.home-dark .hd-inflow li:last-child { border-bottom-color: var(--hd-line-2); }

html[data-a11y-motion="reduced"] .hd-phone, html[data-a11y-motion="reduced"] .hd-craft { transform: none !important; }
body.home-dark .hd-half-copy > p.hd-eyebrow { margin: 0 0 1.25rem; max-width: none; font-size: 0.8rem; color: var(--hd-soft); }
body.home-dark .hd-core--six img { min-height: 0; }
body.home-dark .hd-browser-bar .hd-browser-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.home-dark .hd-browser-bar .d { flex: none; }
@media (max-width: 559px) {
  body.home-dark .hd-browser-bar { gap: 4px; padding: 9px 9px; }
  body.home-dark .hd-browser-bar .d { display: none; }
  body.home-dark .hd-browser-bar .hd-browser-name { margin-left: 0; font-size: 0.6rem; letter-spacing: 0.08em; }
}

/* work smarter: copy + rows on top, two real apps in phones below */
body.home-dark .hd-smart .hd-half-grid { row-gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1024px) { body.home-dark .hd-smart .hd-half-grid { align-items: center; } }
body.home-dark .hd-smart .hd-half-copy { grid-column: 1 / 7; grid-row: 1; }
body.home-dark .hd-smart .hd-inflow { grid-column: 8 / 13; grid-row: 1; }
body.home-dark .hd-smart .hd-smart-phones { grid-column: 1 / 13; grid-row: 2; display: flex; justify-content: center; gap: clamp(2rem, 6vw, 6rem); }
body.home-dark .hd-smart-phones .hd-smart-phone { grid-column: auto; }
body.home-dark .hd-smart-phones .hd-phone { width: clamp(220px, 19vw, 270px); }
body.home-dark .hd-smart-phones .hd-phone-screen img { object-position: top; }
@media (max-width: 1023px) {
  body.home-dark .hd-smart .hd-smart-phones { flex-direction: column; align-items: center; gap: 2.5rem; }
  body.home-dark .hd-smart-phones .hd-phone { width: min(260px, 70vw); }
}

/* ===================== steps + FAQ: photo per step, FAQ foot ===================== */
body.home-dark .hd-step-fig { margin: 1.1rem 0 0; max-width: 26rem; }
body.home-dark .hd-step-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--hd-line); background: #0d1424; }
body.home-dark .hd-step-fig figcaption { margin-top: 0.55rem; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--hd-soft); }
body.home-dark .hd-timeline-sticky .hd-btn { margin-top: 1.75rem; }
body.home-dark .hd-faq-foot { margin: 2rem 0 0; text-align: center; color: var(--hd-soft); }
body.home-dark .hd-faq-foot a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
body.home-dark .hd-faq details p a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  body.home-dark .hd-step-body { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; column-gap: 1.75rem; grid-template-rows: auto auto 1fr; align-items: start; }
  body.home-dark .hd-step-body h3, body.home-dark .hd-step-body p { grid-column: 1; }
  body.home-dark .hd-step-fig { grid-column: 2; grid-row: 1 / span 3; margin: 0.2rem 0 0; }
}