@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,400;10..48,500;10..48,600;10..48,700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&display=swap');

/* Approved 14 September brand direction: one restrained product system,
   seven authored niche identities, real work visible in the first viewport. */
html { scroll-behavior: smooth; }
body[data-niche] {
  --direction-accent: #52283b;
  --direction-surface: #f3e5e2;
  --direction-soft: #e7b9c0;
  --direction-paper: #fffdfa;
  --direction-ink: #2a1b22;
  --direction-muted: #6b6063;
  --direction-serif: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --direction-body: 'Hanken Grotesk', system-ui, sans-serif;
  --direction-mono: 'DM Mono', ui-monospace, monospace;
  background: var(--direction-paper) !important;
  color: var(--direction-ink) !important;
  font-family: var(--direction-body) !important;
  line-height: 1.55;
  /* Every page defines its own "muted" text colour under its own variable name
     (--muted, --text-muted). Route both to the direction's own token so muted
     body copy resolves to a colour this overlay has verified against paper. */
  --muted: var(--direction-muted) !important;
  --text-muted: var(--direction-muted) !important;
}
/* Muted tokens below are set dark enough to clear AA against this niche's own
   --direction-surface at full strength, the darkest background muted text is
   realistically composited over (badges/table cells use the surface tone
   directly, not just the 92%-paper card tint). */
body[data-niche="cleanercontracts"] { --direction-accent:#153f45; --direction-surface:#e4f0ec; --direction-soft:#b9d8cf; --direction-paper:#f6fbf9; --direction-ink:#102d31; --direction-muted:#576a6b; }
body[data-niche="coachingagreements"] { --direction-accent:#2657b8; --direction-surface:#e9f0ff; --direction-soft:#c7d7ff; --direction-paper:#fbfcff; --direction-ink:#18233d; --direction-muted:#596780; --steel: var(--direction-muted) !important; }
body[data-niche="drivinglessondocs"] { --direction-accent:#b54c2d; --direction-surface:#fff0e6; --direction-soft:#f0c2a7; --direction-paper:#fffbf8; --direction-ink:#2e1b16; --direction-muted:#76645d; }
body[data-niche="holidayletcontracts"] { --direction-accent:#8b5a36; --direction-surface:#f4ebdd; --direction-soft:#e4cbaf; --direction-paper:#fcfaf5; --direction-ink:#34261d; --direction-muted:#6c6359; }
body[data-niche="ptdocuments"] { --direction-accent:#b73520; --direction-control:#b73520; --direction-surface:#e6e0d8; --direction-soft:#d7ccc0; --direction-paper:#f3f0e9; --direction-ink:#202121; --direction-muted:#615e57; --direction-serif:'Newsreader', Georgia, serif; --direction-body:'DM Sans', 'Hanken Grotesk', sans-serif; }
body[data-niche="tutorcontracts"] { --direction-accent:#5e4aa3; --direction-surface:#f0edff; --direction-soft:#d4cdf5; --direction-paper:#fcfbff; --direction-ink:#24203b; --direction-muted:#68647d; }

body[data-niche] h1,
body[data-niche] h2,
body[data-niche] h3,
body[data-niche] h4,
body[data-niche] .hero h1,
body[data-niche] .section-heading,
body[data-niche] .price-name,
body[data-niche] .nav-logo,
body[data-niche] .wordmark {
  font-family: var(--direction-serif) !important;
  color: var(--direction-ink) !important;
  text-wrap: balance;
}
body[data-niche] h1,
body[data-niche] h2,
body[data-niche] h3 { font-weight: 600; letter-spacing: -.035em; }
body[data-niche] a { color: var(--direction-accent) !important; }
body[data-niche] a:hover { color: var(--direction-ink) !important; }
body[data-niche="ptdocuments"] a { color: var(--direction-control) !important; }
body[data-niche] p { max-width: 68ch; color: var(--direction-muted); }
/* Accessibility skip-link paints itself with the page's own accent background;
   the global accent-coloured link rule above repaints its text the same accent,
   erasing it. Give it back the paper text its own background needs. */
body[data-niche] .skip-link { color: var(--direction-paper) !important; }
/* A Netlify-form disclaimer line ("No spam...") is always hand-set to a fixed
   hex in the page markup, independent of the niche palette. Route it through
   the direction's own muted token instead of chasing each hardcoded hex. */
body[data-niche] form[data-netlify] + p { color: var(--direction-muted) !important; }

/* Every public sample carries a clear, branded provenance cue before the
   runtime watermark loads. This is a deterrent and licence boundary, not a
   promise that public content cannot be copied. */
body[data-niche] .ns-static-sample-legal {
  margin: 0;
  padding: 10px 18px;
  background: var(--direction-ink);
  color: var(--direction-paper);
  font-family: var(--direction-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}
body[data-niche] .ns-static-sample-legal strong { color: var(--direction-soft); font-weight: 600; }

/* The same authored identity appears at every masthead size. */
body[data-niche] .brand-mark,
body[data-niche] .nav-logo-mark,
body[data-niche] .folio-mark,
body[data-niche] .client-page-mark {
  display: inline-block !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url('/brand-mark.svg') center / contain no-repeat !important;
  transform: none !important;
  color: transparent !important;
  font-size: 0 !important;
}
body[data-niche] .folio-mark i,
body[data-niche] .folio-mark b,
body[data-niche] .nav-logo-mark svg { display: none !important; }
body[data-niche] .brand,
body[data-niche] .site-header .brand,
body[data-niche] .nav-logo { gap: 12px; }

/* Editorial masthead: paper, thin rules, short labels, no floating SaaS chrome. */
body[data-niche] .site-header,
body[data-niche] .nav,
body[data-niche] .masthead,
body[data-niche] .product-header,
body[data-niche] .topbar {
  background: color-mix(in srgb, var(--direction-paper) 94%, transparent) !important;
  color: var(--direction-ink) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--direction-ink) 22%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}
body[data-niche] .site-header .wordmark,
body[data-niche] .nav-logo,
body[data-niche] .masthead .wordmark,
body[data-niche] .brand strong { color: var(--direction-ink) !important; }
body[data-niche] .site-header .wordmark em,
body[data-niche] .nav-logo span,
body[data-niche] .brand small,
body[data-niche] .eyebrow,
body[data-niche] .folio-label,
body[data-niche] .section-label { color: var(--direction-accent) !important; }

/* The product must be seen: use each site's real hero image as the visual signal. */
body[data-niche] .hero {
  position: relative;
  isolation: isolate;
  background-color: var(--direction-ink) !important;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--direction-ink) 88%, transparent), color-mix(in srgb, var(--direction-ink) 18%, transparent)), url('/images/hero-v2.webp') !important;
  background-position: center;
  background-size: cover;
  color: var(--direction-paper) !important;
}
/* Only the actual hero copy is light. Document specimens remain paper-on-ink. */
body[data-niche] .hero > h1,
body[data-niche] .hero > p,
body[data-niche] .hero > .section-label,
body[data-niche] .hero > .hero-line,
body[data-niche] .hero > .hero-rule,
body[data-niche] .hero-content > h1,
body[data-niche] .hero-content > p,
body[data-niche] .hero-content > .hero-sub,
body[data-niche] .hero-copy > h1,
body[data-niche] .hero-copy > p,
body[data-niche] .hero-copy > .hero-intro,
body[data-niche] .hero > div:first-child > h1,
body[data-niche] .hero > div:first-child > p,
body[data-niche] .hero > div:first-child > .hero-sub { color: var(--direction-paper) !important; }
body[data-niche] .hero-card,
body[data-niche] .hero-preview,
body[data-niche] .hero-triangle,
body[data-niche] .hero-paper,
body[data-niche] .demo-panel {
  background-color: var(--direction-paper) !important;
  background-image: none !important;
  color: var(--direction-ink) !important;
}
/* Links in the hero's CTA row aren't direct children of .hero, so the
   child-combinator paper-text rules above miss them; they keep the global
   accent-link colour and vanish into the ink hero. */
body[data-niche] .hero-actions a { color: var(--direction-paper) !important; }
/* The hero-card kicker label sits on the hero-card's own paper surface (set
   above) but keeps a page accent colour too light for AA at its small size. */
body[data-niche] .hero-card-label { color: var(--direction-ink) !important; }
body[data-niche] .hero-card h1,
body[data-niche] .hero-card h2,
body[data-niche] .hero-card h3,
body[data-niche] .hero-card p,
body[data-niche] .hero-preview h1,
body[data-niche] .hero-preview h2,
body[data-niche] .hero-preview h3,
body[data-niche] .hero-preview p,
body[data-niche] .hero-triangle h1,
body[data-niche] .hero-triangle h2,
body[data-niche] .hero-triangle h3,
body[data-niche] .hero-triangle p,
body[data-niche] .hero-paper h1,
body[data-niche] .hero-paper h2,
body[data-niche] .hero-paper h3,
body[data-niche] .hero-paper p { color: var(--direction-ink) !important; }
body[data-niche] .hero h1 { letter-spacing: -.06em; line-height: .94; }
/* Accent spans inherit the niche's soft material colour on photography.
   The darker ink token is reserved for paper surfaces and controls. */
body[data-niche] .hero h1 .accent,
body[data-niche] .hero h1 .italic,
body[data-niche] .hero h1 em { color: var(--direction-soft) !important; }
body[data-niche] .hero > p,
body[data-niche] .hero-content > p,
body[data-niche] .hero-content > .hero-sub,
body[data-niche] .hero-copy > p,
body[data-niche] .hero-copy > .hero-intro,
body[data-niche] .hero > div:first-child > p,
body[data-niche] .hero > div:first-child > .hero-sub { color: var(--direction-paper) !important; }
body[data-niche] .hero::before { opacity: .18; }
body[data-niche] .hero-line,
body[data-niche] .hero .hero-line,
body[data-niche] .hero .hero-kicker { background-color: var(--direction-accent) !important; color: var(--direction-paper) !important; }

/* Cleaner and holiday retain a legacy visual layer above the hero itself.
   Put the real niche image into that layer too, behind the document specimen. */
body[data-niche] .hero-visual-bg {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--direction-ink) 72%, transparent), color-mix(in srgb, var(--direction-accent) 30%, transparent)), url('/images/hero-v2.webp') !important;
  background-position: center;
  background-size: cover;
}

body[data-niche] button,
body[data-niche] .button,
body[data-niche] .nav-cta,
body[data-niche] .header-cta,
body[data-niche] .primary,
body[data-niche] .btn-full {
  border-radius: 0 !important;
  border: 1px solid var(--direction-accent) !important;
  background: var(--direction-accent) !important;
  color: var(--direction-paper) !important;
  box-shadow: none !important;
  transition: transform .22s ease, background-color .22s ease, color .22s ease;
}
body[data-niche] button:hover,
body[data-niche] .button:hover,
body[data-niche] .nav-cta:hover,
body[data-niche] .header-cta:hover,
body[data-niche] .primary:hover,
body[data-niche] .btn-full:hover { transform: translateY(-2px); background: var(--direction-ink) !important; }
body[data-niche] button:active,
body[data-niche] .button:active { transform: translateY(1px); }
body[data-niche="ptdocuments"] button,
body[data-niche="ptdocuments"] .button,
body[data-niche="ptdocuments"] .nav-cta,
body[data-niche="ptdocuments"] .header-cta,
body[data-niche="ptdocuments"] .primary,
body[data-niche="ptdocuments"] .btn-full { border-color: var(--direction-control) !important; background: var(--direction-control) !important; }
body[data-niche="ptdocuments"] .btn-outline { border-color: var(--direction-control) !important; color: var(--direction-control) !important; }
body[data-niche] :focus-visible { outline: 3px solid var(--direction-accent) !important; outline-offset: 3px; }
/* ptdocuments' own "--green" attention colour (an orange-red, not the direction
   accent) is used directly for this in-page emphasis copy and is too light for
   AA at its small size, regardless of surface. */
body[data-niche="ptdocuments"] .need-line,
body[data-niche="ptdocuments"] span.price { color: var(--direction-ink) !important; }
/* holidayletcontracts' own "--sage" need-line colour is hardcoded independent
   of the niche palette and is too light for AA on the card surface. */
body[data-niche="holidayletcontracts"] .need-line { color: var(--direction-ink) !important; }
/* holidayletcontracts repaints #freebie to its own "--sand-deep" tone via
   !important; the label and the greys hardcoded for its copy assumed a
   different, page-native background. The submit button's own background
   (--clay) is the same mid-tone terracotta the hero CTA fix above needed a
   near-black for. */
body[data-niche="holidayletcontracts"] #freebie p { color: var(--direction-ink) !important; }
body[data-niche="holidayletcontracts"] #freebie button { color: #1a1005 !important; }
/* Comparison-table pass/fail marks: two sites hardcode a fixed hex here
   (independent of the niche palette) that fails AA on paper; the other sites
   already theme this through a niche variable that passes and is left alone. */
body[data-niche="drivinglessondocs"] .comparison-table .check { color: #047857 !important; }
body[data-niche="tutorcontracts"] .compare-table .yes { color: #047857 !important; }
body[data-niche="tutorcontracts"] .compare-table .no { color: #4B5563 !important; }

/* Replace generic white card stacks with quiet document/work surfaces. */
body[data-niche] .template-card,
body[data-niche] .price-card,
body[data-niche] .card,
body[data-niche] .faq-item,
body[data-niche] .affiliate-card,
body[data-niche] .panel,
body[data-niche] .client-page-card,
body[data-niche] .task-card {
  border: 1px solid color-mix(in srgb, var(--direction-ink) 22%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--direction-paper) 92%, var(--direction-surface)) !important;
  box-shadow: none !important;
}
body[data-niche] .template-card:hover,
body[data-niche] .price-card:hover,
body[data-niche] .card:hover,
body[data-niche] .faq-item:hover { border-color: var(--direction-accent) !important; box-shadow: 5px 5px 0 var(--direction-soft) !important; }
body[data-niche] .section,
body[data-niche] .section-wide,
body[data-niche] .comparison,
body[data-niche] .faq,
body[data-niche] .affiliate,
body[data-niche] .backlinks { background: var(--direction-paper) !important; }
body[data-niche] .answer-block,
body[data-niche] .benefits,
body[data-niche] .dark,
body[data-niche] .footer,
body[data-niche] footer,
body[data-niche] footer.footer { background: var(--direction-ink) !important; color: var(--direction-paper) !important; }
body[data-niche] .answer-block p,
body[data-niche] .benefits p,
body[data-niche] .dark p,
body[data-niche] .footer p,
body[data-niche] footer p,
body[data-niche] footer.footer p,
body[data-niche] .site-footer p { color: color-mix(in srgb, var(--direction-paper) 82%, transparent) !important; }
/* Anything painted with a heading/accent/link colour must resolve to paper
   when it lands on one of the overlay's own ink surfaces — otherwise text the
   page (or an earlier rule in this file) coloured ink/accent disappears into
   the ink background it's now sitting on: footer column headings, the nav
   wordmark reused as the footer brand mark, footer link lists, and kicker
   labels inside ink-toned panels. */
body[data-niche] :is(.answer-block, .benefits, .dark, .footer, footer, footer.footer, .site-footer)
  :is(h1, h2, h3, h4, .section-heading, .price-name, .nav-logo, .wordmark, a,
      .eyebrow, .folio-label, .section-label, .answer-block-label) {
  color: var(--direction-paper) !important;
}
/* NICHE-BLOGCONTRAST-0918: the homepage footer carries a `.footer` class,
   which the rules above already reach; the blog/guide/document article
   template (~212 pages sharing this overlay) renders the same shared site
   footer as a bare, class-less `<footer>`. theme.css force-paints that bare
   element dark with `!important` regardless of class, so the gap was the
   untargeted selector, not a bad colour value — adding bare `footer` above
   closes it for every page that uses this template, in one place. */
/* The same article template's promotional banner (`.cta-box`) is
   page-inline-styled against the page's own --primary/--accent custom
   properties, which theme.css force-overrides site-wide with `!important` —
   independently of this overlay — collapsing the banner to the homepage's
   slate on six sites and to a WHITE background on ptdocuments (its theme
   sets --primary to white for its dark identity). Treat it as another ink
   surface, like the footer above, so its look never depends on those
   theme-owned tokens at all. */
body[data-niche] .cta-box { background: var(--direction-ink) !important; }
body[data-niche] .cta-box h3 { color: var(--direction-paper) !important; }
body[data-niche] .cta-box p { color: color-mix(in srgb, var(--direction-paper) 82%, transparent) !important; }
body[data-niche] .cta-box a { background: var(--direction-accent) !important; color: var(--direction-paper) !important; }
/* The cookie-consent bar is injected by consent.js with a fixed dark
   background independent of the niche palette; its text has no class the
   rule above can reach and otherwise inherits whatever muted/accent colour
   this file or the page last set for bare p/strong elements. */
body[data-niche] #ck p,
body[data-niche] #ck strong { color: var(--direction-paper) !important; }
/* The featured price card keeps its own paper background (below) but the
   page's own CSS still paints its number/name/list white for the dark card
   it used to be — repoint that text to the surface it now actually sits on. */
body[data-niche] .price-card.feat,
body[data-niche] .price-card.featured,
body[data-niche] .template-card.featured { border-color: var(--direction-accent) !important; color: var(--direction-ink) !important; }
body[data-niche] .price-card.feat .price-num,
body[data-niche] .price-card.feat .price-name,
body[data-niche] .price-card.feat .price-period,
body[data-niche] .price-card.featured .price-num,
body[data-niche] .price-card.featured .price-name,
body[data-niche] .price-card.featured .price-period,
body[data-niche] .template-card.featured .price-num,
body[data-niche] .template-card.featured .price-name,
body[data-niche] .template-card.featured .price-period { color: var(--direction-ink) !important; }
body[data-niche] .price-card.feat .price-desc,
body[data-niche] .price-card.feat li,
body[data-niche] .price-card.featured .price-desc,
body[data-niche] .price-card.featured li,
body[data-niche] .template-card.featured .price-desc,
body[data-niche] .template-card.featured li { color: var(--direction-muted) !important; }
/* Chip-style link buttons paint their own background directly (not via a
   surface class this file recognises) and keep the global accent-link colour
   for their now-mismatched text. */
body[data-niche] :is(.btn-inline, .btn-outline-inline, .btn-dark, .btn-ghost,
    .hero-card-cta) { color: var(--direction-paper) !important; }
/* The footer's cross-link ("also from us") row keeps its own light/paper
   background per page — it never sits on an ink surface like the chips
   above — so give it ink text instead of the paper text those assume.
   ptdocuments alone paints this row on a hardcoded dark background and
   still needs the paper text. */
body[data-niche] .backlinks-grid a { color: var(--direction-ink) !important; }
body[data-niche="ptdocuments"] .backlinks-grid a { color: var(--direction-paper) !important; }
body[data-niche="tutorcontracts"] .btn-gold { color: var(--direction-ink) !important; }
/* This CTA's own background (--clay, a mid-tone terracotta) doesn't clear AA
   against either the direction's ink or paper token — only a near-black does.
   (Selector carries an extra element qualifier so it reliably outranks the
   :is() rule above, whose specificity is set by its own most-specific
   argument, not by whichever argument actually matches.) */
body[data-niche="holidayletcontracts"] a.hero-card-cta { color: #1a1005 !important; }
/* The hero's outline "View pricing" CTA borrows the page's own accent colour
   for its border+text (transparent background), which vanishes against the
   ink hero it sits in. */
body[data-niche] .hero .btn-outline { color: var(--direction-paper) !important; }
body[data-niche="coachingagreements"] .hero-badge { color: var(--direction-paper) !important; }
body[data-niche="holidayletcontracts"] .hero-badge { color: var(--direction-ink) !important; }
/* Footer brand-mark spans are inline-styled by the page (colour picked to
   read on the page's original background), which beats this file's
   .nav-logo rule since it targets the wrapping element, not this span. */
body[data-niche] :is(.footer, footer.footer, .dark, .answer-block, .benefits) .nav-logo span,
body[data-niche] :is(.footer, footer.footer, .dark, .answer-block, .benefits) .nav-logo em {
  color: var(--direction-paper) !important;
}
/* ptdocuments is the one site whose card/table/FAQ components were originally
   dark (text set to the page's own --white), so the overlay's blanket
   paper-card background (above) leaves them white-on-paper. Its blog index
   post-card titles (`.pc-title`) hit the same page-inline `color:var(--primary)`
   pattern — ptdocuments' theme.css sets --primary to white for its dark
   identity, so the title vanished into the post-card's own white background. */
body[data-niche="ptdocuments"] .price-num,
body[data-niche="ptdocuments"] .faq-q,
body[data-niche="ptdocuments"] .inside-heading,
body[data-niche="ptdocuments"] .pc-title,
body[data-niche="ptdocuments"] .toc-h,
body[data-niche="ptdocuments"] .callout strong,
body[data-niche="ptdocuments"] .comparison-table td:first-child { color: var(--direction-ink) !important; }
/* The long-form article template's "at a glance" table and checklist box are
   the same white-on-primary / dark-on-bg pair as above, one step further:
   `table.glance th` hardcodes white TEXT (not a token) on a `var(--primary)`
   background, so on ptdocuments both resolve to white; `.checklist-box` and
   the table's zebra stripe use `var(--bg)` as a light default, which
   ptdocuments' theme.css inverts to near-black, leaving the overlay's own
   (correctly dark) ink text sitting on a now-dark box. Route both
   backgrounds through this file's own surface/ink tokens instead of the
   page's theme-inverted ones. */
body[data-niche="ptdocuments"] table.glance th { background: var(--direction-ink) !important; color: var(--direction-paper) !important; }
body[data-niche="ptdocuments"] table.glance tbody tr:nth-child(even),
body[data-niche="ptdocuments"] .checklist-box { background: var(--direction-surface) !important; }
/* ...and it ships two hand-built dark preview boxes as inline styles outside
   this system entirely (testimonials, an in-page contract-clause mockup);
   the overlay's global heading/muted rules repaint their text for a light
   surface and it disappears into their own dark background. */
body[data-niche="ptdocuments"] #testimonials div[style*="background:var(--dark)"] p,
body[data-niche="ptdocuments"] #template-preview > div p,
body[data-niche="ptdocuments"] #template-preview > div h4 {
  color: color-mix(in srgb, var(--direction-paper) 82%, transparent) !important;
}
body[data-niche="ptdocuments"] #template-preview span[style*="background:#166534"] {
  color: var(--direction-paper) !important;
}
/* The mock document's signature-line labels are bare spans (no p/h4 wrapper)
   so the muted-text fix above never reaches them; they sit on the same dark
   box background. */
body[data-niche="ptdocuments"] #template-preview > div [style*="display:grid"] span {
  color: color-mix(in srgb, var(--direction-paper) 82%, transparent) !important;
}
/* coachingagreements repaints #freebie and the #template-preview mock-document
   header to its own warm --bone-alt tone via !important; the greys it
   hardcoded for text assumed a different, page-native background and fail AA
   against the tone this file didn't touch. */
body[data-niche="coachingagreements"] #freebie p[style] { color: var(--direction-ink) !important; }
body[data-niche="coachingagreements"] #template-preview > div[style*="max-width:720px"] > div:first-child span {
  color: var(--direction-ink) !important;
}
/* tutorcontracts' pull-quote uses its own low-contrast gold accent directly
   on the paper surface. */
body[data-niche="tutorcontracts"] .pull-quote { color: var(--direction-ink) !important; }
body[data-niche] .tag,
body[data-niche] .pack-tag,
body[data-niche] .ribbon { border-radius: 0 !important; background: var(--direction-accent) !important; color: var(--direction-paper) !important; }

/* Workspace surfaces follow the same editorial system, with enough density for daily work. */
body[data-niche] .dashboard,
body[data-niche] .product-main,
body[data-niche] .product-shell { background: var(--direction-paper) !important; color: var(--direction-ink) !important; }
body[data-niche] .dashboard-heading,
body[data-niche] .metric-row,
body[data-niche] .task,
body[data-niche] .activity,
body[data-niche] .workflow-strip,
body[data-niche] .panel-head { border-color: color-mix(in srgb, var(--direction-ink) 22%, transparent) !important; }
body[data-niche] .workflow-strip,
body[data-niche] .metric,
body[data-niche] .task-mark,
body[data-niche] .activity-mark,
body[data-niche] .control-panel,
body[data-niche] .studio-note { background: var(--direction-surface) !important; }
body[data-niche] .product-nav { background: var(--direction-ink) !important; }
body[data-niche] .product-nav a.active { color: var(--direction-accent) !important; border-color: var(--direction-accent) !important; }
body[data-niche] .preview-wrap,
body[data-niche] .dash-window,
body[data-niche] .client-card { background: var(--direction-ink) !important; }
body[data-niche] .form-preview { background: var(--direction-paper) !important; color: var(--direction-ink) !important; }
body[data-niche] .client-card h2 { color: var(--direction-paper) !important; }

/* Document and client handoff pages inherit the same paper / rule / accent language. */
body[data-niche] .document-shell,
body[data-niche] .document-page,
body[data-niche] .doc-shell,
body[data-niche] .document-card { background: var(--direction-paper) !important; color: var(--direction-ink) !important; }
body[data-niche] .document-header,
body[data-niche] .document-toolbar,
body[data-niche] .document-footer { border-color: color-mix(in srgb, var(--direction-ink) 22%, transparent) !important; }
body[data-niche] .client-page-shell { background: var(--direction-paper) !important; color: var(--direction-ink) !important; }
body[data-niche] .client-page-nav { border-color: color-mix(in srgb, var(--direction-ink) 22%, transparent) !important; background: var(--direction-paper) !important; }
body[data-niche] .client-page-action { background: var(--direction-accent) !important; color: var(--direction-paper) !important; border-radius: 0 !important; }

/* PT Documents preview: a real paper specimen, not a dark promotional card. */
body[data-niche="ptdocuments"] .ptd-preview { background: var(--direction-paper) !important; color: var(--direction-ink) !important; }
body[data-niche="ptdocuments"] .ptd-preview-intro { max-width: 760px; margin-bottom: 40px; }
body[data-niche="ptdocuments"] .ptd-preview-dek { max-width: 58ch; margin: 0; color: var(--direction-muted) !important; font-size: 1.04rem; line-height: 1.7; }
body[data-niche="ptdocuments"] .ptd-document { max-width: 960px; margin: 0 auto 28px; padding: clamp(22px, 4vw, 48px); background: #fbfaf6 !important; border: 1px solid color-mix(in srgb, var(--direction-ink) 28%, transparent); box-shadow: 10px 10px 0 color-mix(in srgb, var(--direction-soft) 68%, transparent); }
body[data-niche="ptdocuments"] .ptd-document-meta,
body[data-niche="ptdocuments"] .ptd-document-footer { display: flex; justify-content: space-between; gap: 18px; color: var(--direction-muted) !important; font-family: var(--direction-mono) !important; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
body[data-niche="ptdocuments"] .ptd-document-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding: 54px 0 30px; }
body[data-niche="ptdocuments"] .ptd-document-kicker { margin: 0 0 14px; color: var(--direction-accent) !important; font-family: var(--direction-mono) !important; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
body[data-niche="ptdocuments"] .ptd-document-kicker { color: var(--direction-control) !important; }
body[data-niche="ptdocuments"] .ptd-document-head h3 { margin: 0; color: var(--direction-ink) !important; font-family: var(--direction-serif) !important; font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 400; letter-spacing: -.055em; line-height: .92; }
body[data-niche="ptdocuments"] .ptd-document-owner { display: grid; gap: 6px; min-width: 150px; color: var(--direction-muted) !important; font-size: .8rem; line-height: 1.3; text-align: right; }
body[data-niche="ptdocuments"] .ptd-document-owner strong { color: var(--direction-ink) !important; letter-spacing: .12em; }
body[data-niche="ptdocuments"] .ptd-document-rule { height: 3px; background: var(--direction-accent); }
body[data-niche="ptdocuments"] .ptd-document-parties { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--direction-ink) 18%, transparent); color: var(--direction-muted) !important; font-size: .84rem; }
body[data-niche="ptdocuments"] .ptd-document-parties span { color: var(--direction-accent) !important; font-family: var(--direction-mono) !important; font-size: .66rem; letter-spacing: .1em; }
body[data-niche="ptdocuments"] .ptd-document-parties span { color: var(--direction-control) !important; }
body[data-niche="ptdocuments"] .ptd-document-parties strong { color: var(--direction-ink) !important; font-weight: 600; }
body[data-niche="ptdocuments"] .ptd-clause-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
body[data-niche="ptdocuments"] .ptd-clause-grid article { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 24px 0; border-bottom: 1px solid color-mix(in srgb, var(--direction-ink) 16%, transparent); }
body[data-niche="ptdocuments"] .ptd-clause-grid article > span { color: var(--direction-accent) !important; font-family: var(--direction-mono) !important; font-size: .72rem; }
body[data-niche="ptdocuments"] .ptd-clause-grid article > span { color: var(--direction-control) !important; }
body[data-niche="ptdocuments"] .ptd-clause-grid h4 { margin: 0 0 6px; color: var(--direction-ink) !important; font-family: var(--direction-body) !important; font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
body[data-niche="ptdocuments"] .ptd-clause-grid p { margin: 0; color: var(--direction-muted) !important; font-size: .9rem; line-height: 1.55; }
body[data-niche="ptdocuments"] .ptd-clause-grid p strong { color: var(--direction-ink) !important; font-weight: 600; }
body[data-niche="ptdocuments"] .ptd-signatures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 34px 0 28px; }
body[data-niche="ptdocuments"] .ptd-signatures div { display: grid; gap: 8px; }
body[data-niche="ptdocuments"] .ptd-signatures span { display: block; height: 34px; border-bottom: 1px solid var(--direction-ink); }
body[data-niche="ptdocuments"] .ptd-signatures small { color: var(--direction-muted) !important; font-size: .72rem; }
body[data-niche="ptdocuments"] .ptd-document-footer { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--direction-ink) 18%, transparent); }
body[data-niche="ptdocuments"] .ptd-document-footer { background: var(--direction-paper) !important; color: var(--direction-muted) !important; }
body[data-niche="ptdocuments"] .ptd-document-footer span:first-child { color: var(--direction-accent) !important; }
body[data-niche="ptdocuments"] .ptd-document-footer span:first-child { color: var(--direction-control) !important; }
body[data-niche="ptdocuments"] .ptd-preview-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
body[data-niche="ptdocuments"] .ptd-preview-actions a { width: auto; padding: 13px 24px; }

/* The workspace preview is a product boundary, not a low-contrast footnote. */
body[data-niche] #workspace-bridge { background: var(--direction-ink) !important; color: var(--direction-paper) !important; border-color: var(--direction-ink) !important; }
body[data-niche] #workspace-bridge h2 { color: var(--direction-paper) !important; }
body[data-niche] #workspace-bridge > p { color: color-mix(in srgb, var(--direction-paper) 84%, transparent) !important; opacity: 1 !important; }
body[data-niche] #workspace-bridge > p:first-child { color: var(--direction-soft) !important; }
body[data-niche] #workspace-bridge > div > div { background: color-mix(in srgb, var(--direction-paper) 7%, var(--direction-ink)) !important; border-color: var(--direction-soft) !important; color: var(--direction-paper) !important; }
body[data-niche] #workspace-bridge > div > div strong { color: var(--direction-soft) !important; }
body[data-niche] #workspace-bridge > div > div span { color: var(--direction-paper) !important; opacity: 1 !important; }

/* Give the first viewport a clear sequence: label, title, proposition, action,
   then the visual. Legacy inline margins are intentionally normalised here. */
body[data-niche] .hero-actions,
body[data-niche] .hero-content > div[style*="display:flex"],
body[data-niche] .hero > div:first-child > div[style*="display:flex"] {
  margin-top: 28px !important;
  margin-bottom: 0 !important;
  gap: 14px !important;
}
body[data-niche] .hero-content,
body[data-niche] .hero-copy { gap: 0; }

body[data-niche] img { max-width: 100%; }
@media (max-width: 700px) {
  body[data-niche] .hero { min-height: auto !important; background-position: 68% center; }
  body[data-niche] .hero h1 { font-size: clamp(2.35rem, 9.8vw, 3.8rem) !important; line-height: .99; letter-spacing: -.045em; }
  body[data-niche] .hero-content,
  body[data-niche] .hero-copy { padding: 84px 20px 24px !important; }
  body[data-niche] .hero-content .hero-badge,
  body[data-niche] .hero-copy .hero-badge { margin-bottom: 20px !important; }
  body[data-niche] .hero-content .hero-sub,
  body[data-niche] .hero-copy .hero-intro { margin-bottom: 20px !important; }
  body[data-niche] .hero-visual,
  body[data-niche] .hero-shape { min-height: 320px !important; margin: 0 20px 28px !important; }
  body[data-niche] .hero-preview,
  body[data-niche] .hero-triangle,
  body[data-niche] .hero-paper { margin-bottom: 0 !important; }
  body[data-niche] .hero-actions,
  body[data-niche] .hero-content > div[style*="display:flex"],
  body[data-niche] .hero > div:first-child > div[style*="display:flex"] { margin-top: 24px !important; }
  /* Beauty's specimen makes the hero unusually tall. Keep the practitioner
     framed inside the copy panel instead of stretching the image over the
     whole document-and-demo stack. */
  body[data-niche="beautytherapistforms"] .hero {
    background-image: none !important;
    background-color: var(--direction-ink) !important;
  }
  body[data-niche="beautytherapistforms"] .hero-copy {
    background-color: var(--direction-ink) !important;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--direction-ink) 84%, transparent), color-mix(in srgb, var(--direction-ink) 24%, transparent)), url('/images/hero-v2.webp') !important;
    background-position: 68% center;
    background-size: cover;
  }
  body[data-niche="ptdocuments"] .ptd-clause-grid { grid-template-columns: 1fr; gap: 0; }
  body[data-niche="ptdocuments"] .ptd-document-head { grid-template-columns: 1fr; gap: 22px; padding-top: 34px; }
  body[data-niche="ptdocuments"] .ptd-document-owner { min-width: 0; text-align: left; }
  body[data-niche="ptdocuments"] .ptd-document-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  body[data-niche] .site-header,
  body[data-niche] .nav,
  body[data-niche] .masthead,
  body[data-niche] .topbar { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-niche] *, body[data-niche] *::before, body[data-niche] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  body[data-niche] { background: #fff !important; color: #111 !important; }
  body[data-niche] .ns-static-sample-legal { background: #fff !important; color: #111 !important; border-bottom: 1px solid #111; }
  body[data-niche] .site-header, body[data-niche] .nav, body[data-niche] .masthead, body[data-niche] .topbar, body[data-niche] footer { box-shadow: none !important; }
  body[data-niche] .hero { background-image: none !important; color: #111 !important; }
}