/*
 * TestDossier Workbench — the client-facing visual identity.
 *
 * This file deliberately loads last. foundation.css owns the durable token
 * names; page styles own layout; this layer gives every public, application,
 * review, and operator surface the same material, control, and type language.
 *
 * Direction: an evidence workbench, not a generic SaaS dashboard.
 * - cool slate neutrals in light and dark mode
 * - ink-forward, low-elevation surfaces
 * - The brand indigo used as a signal, never as decoration
 * - editorial display type on public narratives
 * - compact, squared controls on working surfaces
 */

:root {
  /* A tinted full-bleed band is not its own shade — it is --surface-2, the
     step the system already has. Keeping a separate value put a fourth rung
     0.4% from an existing one in dark mode, which reads as muddy rather than
     layered. Aliases so band-specific rules stay readable. */
  --band-bg: var(--surface-2);
  --band-border: var(--border);
  --bg: #f8fafb;
  --surface: #ffffff;
  --surface-2: #eeeff2;
  --surface-3: #e2e4e9;
  --panel: var(--surface);
  --step-bg: var(--surface-2);
  --input-bg: var(--surface);
  --border: #e2e4e9;
  --border-strong: #ced2d9;
  /* Border for interactive controls (ghost buttons, inputs). Distinct from
     --border-strong, which delimits STRUCTURE and may stay light. A control's
     boundary must clear 3:1 on every surface it lands on (page, card, band)
     per WCAG 1.4.11 — --border-strong measured 1.32:1. */
  --control-border: #7e8794;
  --text: #171c26;
  --text-2: #424955;
  --text-3: #4a515d;
  --text-4: #6f7681;   /* one real step below --text-3, still >=4.5:1 on bg/surface */

  /* Ink-button fill, split from --text so button glare can be tuned without
     touching typography. Hover/active shift VALUE toward the ground, never
     hue — indigo stays reserved for links and state. */
  --btn-ink: var(--text);
  --btn-ink-hover: color-mix(in srgb, var(--text) 85%, var(--bg));
  --btn-ink-active: color-mix(in srgb, var(--text) 76%, var(--bg));
  --label: var(--text-2);
  --muted: var(--text-3);
  --tab-inactive: var(--text-3);

  --accent: #4335de;
  --accent-text: #4335de;
  --accent-hover: #3a1ccf;
  --accent-active: #3201be;
  --accent-soft: #eceffe;
  --accent-ring: #4335de;   /* solid — the 28% wash measured 1.63:1 */
  --accent-glow: transparent;
  --accent-on: #ffffff;
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-soft: var(--accent-soft);
  --primary-glow: var(--accent-glow);

  --success: #247b52;
  --success-hover: #1d6844;
  --success-soft: #e8f7f0;
  --danger: #ce2222;
  --danger-hover: #b91c1c;
  --danger-soft: #fdeded;
  --warning: #a4590e;
  --warning-soft: #fdf1dd;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, ui-monospace, monospace;

  --radius-control: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --radius-sm: 3px;
  --radius: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --r-sm: 3px;
  --r: 5px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;

  --shadow-xs: 0 1px 2px rgba(23, 28, 38, 0.05);
  --shadow-sm: 0 1px 2px rgba(23, 28, 38, 0.05), 0 1px 3px rgba(23, 28, 38, 0.04);
  --shadow: 0 2px 6px rgba(23, 28, 38, 0.07);
  --shadow-md: 0 4px 8px -2px rgba(23, 28, 38, 0.08), 0 2px 4px -2px rgba(23, 28, 38, 0.05);
  --shadow-lg: 0 12px 28px -6px rgba(23, 28, 38, 0.14), 0 6px 12px -6px rgba(23, 28, 38, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151c;
    --surface: #1c1f27;
    --surface-2: #22262f;
    --surface-3: #303540;
    --panel: var(--surface);
    --step-bg: var(--surface-2);
    --input-bg: #20232c;
    --border: #272c34;
    --border-strong: #393f4c;
  --control-border: #767e8c;
    --control-border: #767e8c;
    --text: #f3f4f7;
    --text-2: #c7cad1;
    --text-3: #929aaa;
    --text-4: #68707e;
    --label: var(--text-2);
    --muted: var(--text-3);
    --tab-inactive: var(--text-3);
    --accent: #727ffe;
    --accent-text: #8c9bff;
    --accent-hover: #8493ff;
    --accent-active: #97a6fe;
    --accent-soft: #1a1e46;
    --accent-ring: #727ffe;   /* solid — the 32% wash measured 1.62:1 */
    --accent-glow: transparent;
    --accent-on: #ffffff;
    --success: #40bf84;
    --success-hover: #65cc9b;
    --success-soft: #1b372a;
    --danger: #e96363;
    --danger-hover: #ef8181;
    --danger-soft: #431919;
    --warning: #f4a734;
    --warning-soft: #3d2d14;
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow: 0 3px 8px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.46);
  }
}

[data-theme="dark"] {
  --bg: #12151c;
  --surface: #1c1f27;
  --surface-2: #22262f;
  --surface-3: #303540;
  --panel: var(--surface);
  --step-bg: var(--surface-2);
  --input-bg: #20232c;
  --border: #272c34;
  --border-strong: #393f4c;
  --control-border: #767e8c;
  --text: #f3f4f7;
  --text-2: #c7cad1;
  --text-3: #929aaa;
  --text-4: #68707e;
  --label: var(--text-2);
  --muted: var(--text-3);
  --tab-inactive: var(--text-3);
  --accent: #727ffe;
  --accent-text: #8c9bff;
  --accent-hover: #8493ff;
  --accent-active: #97a6fe;
  --accent-soft: #1a1e46;
  --accent-ring: #727ffe;
  --accent-glow: transparent;
  --accent-on: #ffffff;
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-soft: var(--accent-soft);
  --primary-glow: var(--accent-glow);
  --success: #40bf84;
  --success-hover: #65cc9b;
  --success-soft: #1b372a;
  --danger: #e96363;
  --danger-hover: #ef8181;
  --danger-soft: #431919;
  --warning: #f4a734;
  --warning-soft: #3d2d14;
}

/* Shared material and controls ------------------------------------------------ */

body {
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent-text, var(--accent)); }
a:hover { color: var(--accent-hover); }

.btn,
.theme-toggle,
input,
select,
textarea {
  border-radius: var(--radius-control);
}

.btn,
.btn--accent,
.btn-primary,
.btn--secondary,
.btn-secondary {
  box-shadow: none;
}

/* Primary actions are INK on every surface — the same rule marketing.css and
   primitives.css follow, so a CTA in the app, on the site, and in a share page
   are one object. Hover shifts value within the ink, never hue — indigo is
   reserved for links and state. The Get Pro pill (.user-pill--cta) is NOT in
   this group: the sidebar's New test is the app chrome's single ink button,
   so an always-on upsell must not compete with it. */
.btn--accent,
.btn-primary,
.site-nav__links .is-cta {
  background: var(--btn-ink, var(--text));
  border-color: var(--btn-ink, var(--text));
  color: var(--bg);
  box-shadow: none;
}

.btn--accent:hover,
.btn-primary:hover,
.site-nav__links .is-cta:hover {
  background: var(--btn-ink-hover, var(--text));
  border-color: var(--btn-ink-hover, var(--text));
  color: var(--bg);
}

/* Quiet upsell — outlined, taking ink only on hover. */
.user-pill--cta {
  background: var(--surface);
  border-color: var(--control-border);
  color: var(--text);
  box-shadow: none;
}
.user-pill--cta:hover {
  background: var(--btn-ink, var(--text));
  border-color: var(--btn-ink, var(--text));
  color: var(--bg);
}

.btn--secondary,
.btn-secondary {
  background: var(--surface);
  border-color: var(--control-border);
  color: var(--text);
}

.btn--secondary:hover,
.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.eyebrow,
.kicker,
.canvas-surface__range-label,
.modal-section-label,
.td-kpi__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
}

/* Public navigation and narrative surfaces ---------------------------------- */

.site-header {
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border-bottom-color: var(--border);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-nav { height: 64px; }

.site-logo {
  gap: 4px;
  color: var(--text);
}

.site-logo > img,
.invite-shell__brand a > img,
.app-bar h1 > img {
  display: block;
  width: 25px;
  height: 25px;
  flex: none;
}

.invite-shell__brand a > img,
.app-bar h1 > img {
  width: 22px;
  height: 22px;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.045em;
}

.brand-wordmark b,
.app-bar .brand-wordmark,
.app-bar .brand-wordmark b {
  font-weight: 700 !important;
}

.brand-wordmark b { font-weight: 700; }

.site-nav__links > a:not(.is-cta) {
  color: var(--text-2);
  font-weight: 550;
}

.site-nav__links > a:not(.is-cta):hover { color: var(--text); }

body:has(.site-header) main h1,
body:has(.site-header) main h2,
body:has(.site-header) .legal-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.045em;
}

body:has(.site-header) main h3,
body:has(.site-header) main h4 {
  letter-spacing: -.015em;
}

.site-footer {
  border-top: 1px solid var(--border);
  /* Page ground + hairline, not a band — see the closing-cta one-band rule. */
  background: var(--bg);
}

/* Homepage — restrained product narrative with product evidence ------------- */

.marketing-home main {
  --home-section-gap: clamp(64px, 6vw, 84px);
  --home-section-edge: calc(var(--home-section-gap) / 2);
  background: var(--bg);
}

.marketing-home .hero {
  /* Top pad sized for a copy column that is now two lines shorter: the old
     124px opened a visible dead band under the header before any ink. */
  padding: clamp(44px, 5vw, 72px) 0 var(--home-section-gap);
  overflow: visible;
}

.marketing-home .hero__bg,
.marketing-home .unified__bg { display: none; }

.marketing-home .hero__grid {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(48px, 5vw, 72px);
  align-items: center;
}

.marketing-home .hero__text { max-width: 620px; }

.marketing-home .hero h1 {
  max-width: 650px;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
}

.marketing-home .hero h1 .grad {
  /* "approved" — an annotation, not a colour swap.

     A single word filled with the accent at 60px is the most recognisable
     template headline pattern there is, and it spends the whole accent budget
     in one place. An underline says the same thing more quietly and is the
     right metaphor for an evidence product: the word is marked up, the way a
     reviewer marks a document. skip-ink is off so the rule runs unbroken
     under the descenders instead of dotting around them. */
  /* "approved" is marked by hand, not underlined by a ruler.

     Two overlapping pen passes with round caps and a slight wobble — the shape
     a person makes when they underline a word, which is exactly what this
     product is about. Painted as a masked pseudo-element rather than a
     background image so the stroke follows --accent through the theme toggle;
     an SVG in background-image cannot see the page's tokens. */
  color: var(--text);
  text-decoration: none;
  position: relative;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-style: normal;
  font-weight: 700;
}

.marketing-home .hero__text > p {
  max-width: 560px;
  margin-bottom: 28px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.62;
}

.marketing-home .kicker--flow {
  display: flex;
  width: fit-content;
  padding: 0 0 12px;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 0;
}

.marketing-home .kicker--flow svg { display: none; }
.marketing-home .kicker__step { gap: 0; }
.marketing-home .kicker__sep { color: var(--text-4); }

.marketing-home .hero__ctas {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}

/* The hero's secondary CTA is the SAME object as the one in the closing band
   and on the pricing cards. It had been stripped to a bare underlined text
   link — no padding, transparent border — so the identical action looked like
   two different controls on one page. */
.marketing-home .hero__ctas .btn--secondary:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: var(--text);
}
.marketing-home .hero__micro { color: var(--text-3); font-family: var(--font-sans); font-size: 11px; }

/* Content should be legible without theatrical scroll staging. */
html.has-marketing-motion body.marketing-home .reveal,
body.marketing-home .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.marketing-home .hero__visual,
.marketing-home .share-mock--hero {
  transform: none;
  filter: none;
}

.marketing-home .share-mock--hero {
  border-color: var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.marketing-home .marquee {
  padding: 0 0 var(--home-section-edge);
}

.marketing-home .marquee__lead {
  max-width: 980px;
  margin: 0 auto 24px;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}

.marketing-home .pain-strip {
  margin-top: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: transparent;
  box-shadow: none;
}

.marketing-home .pain-strip__item { padding: 22px 24px; }

/* Continue the same chapter rule below the pain table, exactly where the
   product-film gradient begins. */
.marketing-home .product-film { border-top: 1px solid var(--band-border); }

.marketing-home .features,
.marketing-home .how-it-works,
.marketing-home .unified,
.marketing-home .home-faq {
  padding: var(--home-section-edge) 0;
}

/* Full-width rules mark narrative chapters, not every component. The opening
   hero + pain strip is one chapter; Trust + Workflow + reviewer proof is the
   next; Evidence history + integrations is the third; FAQ closes the story. */
.marketing-home .features:not(.home-faq),
.marketing-home .unified,
.marketing-home .home-faq {
  border-top: 1px solid var(--border);
}

.marketing-home .section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.marketing-home .section-head .eyebrow { justify-content: center; }

.marketing-home .section-head--centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.marketing-home .section-head--centered .eyebrow { justify-content: center; }
.marketing-home .section-head--centered h2 { margin-right: auto; margin-left: auto; }

.marketing-home .section-head h2,
.marketing-home .stack-fit h2,
.marketing-home .closing-cta h2 {
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.05em;
}

.marketing-home .eyebrow,
.marketing-home .kicker--flow,
.marketing-home .how-step__num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

/* Section eyebrows take --accent-text, matching the Guides label tier. The
   fill indigo only reaches 3.4:1 against the dark canvas at 12px; headlines
   below them keep --accent, which display sizes clear. */
/* Ink, not indigo — an eyebrow is a label, not a state. Painting every
   section eyebrow accent is what makes the accent read as decoration. */
.marketing-home .eyebrow { color: var(--text-3); }

.marketing-home .section-head p {
  max-width: 650px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.65;
}

.marketing-home .section-head--centered p { margin-right: auto; margin-left: auto; }

.marketing-home .feature-grid {
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.marketing-home .feature {
  padding: 28px 30px;
  background: transparent;
  border-color: var(--border-strong);
  border-radius: 0;
  box-shadow: none;
}

.marketing-home .feature__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 32px;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
}

.marketing-home .how-grid { gap: 0; border-top: 1px solid var(--border-strong); }

.marketing-home .how-step {
  padding: 28px 28px 0;
  border-right: 1px solid var(--border-strong);
}

.marketing-home .how-step:first-child { padding-left: 0; }
.marketing-home .how-step:last-child { padding-right: 0; border-right: 0; }

/* The !important flags here existed only to defeat a style="" attribute on
   each step number in index.html. Those attributes are gone, so these are
   ordinary declarations again. */
.marketing-home .how-step__num {
  /* `display` was the ONE property the inline style set that this rule did not
     override, so it must be restated here now the attribute is gone. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-bottom: 24px;
  padding: 0;
  color: var(--text-3);
  background: transparent;
  border-radius: 0;
  font-family: var(--font-sans);
}

.marketing-home .how-step > p { min-height: 9em; }

.marketing-home .hiw-mock,
.marketing-home .td-history-mock {
  border-color: var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.marketing-home .unified .section-head {
  width: 100%;
  max-width: 920px;
  margin: 0 auto 48px;
}

/* Eyebrow, heading and deck share one centre line. */
.marketing-home .unified .section-head > h2,
.marketing-home .unified .section-head > p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.marketing-home .reviewer-band {
  padding: var(--home-section-edge) var(--s-6);
  margin: 0;
  background: var(--bg);
  border-top: 0;
  border-bottom: 0;
}

.marketing-home .reviewer-band + .unified {
  padding-top: var(--home-section-edge);
  border-top: 1px solid var(--border);
}

.marketing-home .reviewer-band__inner {
  max-width: var(--content-w);
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 1px minmax(280px, .92fr);
  gap: 16px clamp(24px, 3.5vw, 48px);
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.marketing-home .reviewer-band__eyebrow { grid-column: 1 / -1; color: var(--text-3); justify-content: flex-start; }
.marketing-home .reviewer-band__title {
  grid-column: 1;
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.marketing-home .reviewer-band__divider {
  grid-column: 2;
  grid-row: 2;
  width: 1px;
  height: calc(100% - 8px);
  min-height: 112px;
  justify-self: center;
  background: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}
.marketing-home .reviewer-band__copy {
  grid-column: 3;
  max-width: 560px;
  margin: 0;
  color: var(--text-2);
}

.marketing-home .stack-fit {
  padding: var(--home-section-edge) var(--s-6);
  border-top: 0;
  border-bottom: 0;
}

.marketing-home .stack-fit__grid {
  max-width: var(--content-w);
  padding: clamp(40px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.08fr) 1px minmax(280px, .92fr);
  gap: 16px clamp(24px, 3.5vw, 48px);
  align-items: start;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.marketing-home .stack-fit__eyebrow { grid-column: 1 / -1; color: var(--text-3); justify-content: flex-start; }
.marketing-home .stack-fit h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.marketing-home .stack-fit__divider {
  grid-column: 2;
  grid-row: 2;
  width: 1px;
  height: calc(100% - 8px);
  min-height: 112px;
  margin: 0;
  align-self: center;
  justify-self: center;
  transform: none;
  background: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}
.marketing-home .stack-fit__copy {
  grid-column: 3;
  grid-row: 2;
  max-width: 560px;
  margin: 0;
  padding: 0;
}
.marketing-home .stack-fit__point {
  padding: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.marketing-home .stack-fit__copy a {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent-text);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.marketing-home .stack-fit__copy a:hover {
  transform: none;
  border-color: currentColor;
  box-shadow: none;
  color: var(--accent-hover);
}

.marketing-home .home-faq .container {
  display: block;
}

.marketing-home .home-faq .section-head { margin: 0 auto 48px; }
.marketing-home .home-faq .faq__list { max-width: 820px; margin: 0 auto; }
.marketing-home .home-faq .faq-item { background: transparent; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
.marketing-home .home-faq .faq-item > summary { padding: 20px 0; }
.marketing-home .home-faq .faq-item__body { padding: 0 36px 22px 0; }

/* The page's one full-bleed band. It was an accent wash — the largest, most
   saturated purple surface on the site, on the block whose whole job is to be
   calm and ask once. Ink instead: it still breaks the rhythm, without shouting.
   Fixed ink in BOTH themes, so the band always contrasts with the page. */
.marketing-home .closing-cta {
  padding: 0;
  background: var(--band-bg);
  border-block: 1px solid var(--band-border);
  color: var(--text);
}

/* Centred stack, on the same 760px measure and eyebrow→title→subhead rhythm as
   every other section head. The two-column split this replaces sat the buttons
   level with the headline and the sentence that explains the choice between
   them BELOW, so the eye met the ask before the reason — and the right column
   was empty under the buttons for the full height of the band. */
.marketing-home .closing-cta__inner {
  padding: clamp(72px, 9vw, 120px) var(--s-6);
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.marketing-home .closing-cta .eyebrow { justify-content: center; margin-bottom: var(--s-2); }
.marketing-home .closing-cta h2 { margin: 0 0 var(--s-3); text-wrap: balance; }
.marketing-home .closing-cta p { max-width: 620px; margin: 0; text-wrap: balance; }
/* Grid, not flex-wrap: the pricing link needs to break onto its own line while
   staying its own width. As a flex item with flex-basis:100% it became a 570px
   box around 72px of text, and the underline spanned the box. */
.marketing-home .closing-cta__actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
/* Its own line under the buttons, but only as wide as its text — justify-self
   keeps the box on the content so the rule underlines the words, not the row. */
.marketing-home .closing-cta__pricing {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: var(--s-2);
}

.marketing-home .closing-cta h2,
.marketing-home .closing-cta p { color: var(--text); }
.marketing-home .closing-cta p { color: var(--text-3); }
.marketing-home .closing-cta .btn--accent {
  color: var(--bg);
  background: var(--btn-ink, var(--text));
  border-color: var(--btn-ink, var(--text));
}
.marketing-home .closing-cta .btn--accent:hover { background: var(--btn-ink-hover, var(--text)); border-color: var(--btn-ink-hover, var(--text)); color: var(--bg); }
.marketing-home .closing-cta .btn--secondary { background: transparent; border-color: var(--control-border); color: var(--text); }
.marketing-home .closing-cta .btn--secondary:hover { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: var(--text-3); }

/* Pricing, checkout, help, auth, legal, and admin ---------------------------- */

.pricing-card,
.team-plan,
.compare-table,
.checkout-card,
.help-content,
.help-nav,
.invite-card,
.pro-card,
.gate__card,
.admin-panel,
.td-kpi {
  border-color: var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.pricing-card--featured,
.td-kpi--priority {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: none;
}

/* Marketing cards and product frames stay flat. Borders communicate grouping;
   decorative shadows, colored halos, and filters are intentionally absent. */
.marketing-home :is(
  .card,
  .mock,
  .share-mock--hero,
  .insights-mock,
  .td-history-mock,
  .hiw-mock,
  .pain-strip,
  .feature,
  .reviewer-band__inner,
  .stack-fit__grid,
  .faq-item,
  .closing-cta__inner
) {
  box-shadow: none;
  filter: none;
}

.marketing-home [class*="card"] {
  box-shadow: none !important;
  filter: none !important;
}

.pricing-hero,
.security-hero,
.legal-hero,
.samples-hero { background: transparent; }

.gate__card::before,
.td-kpi--priority::before { display: none; }

.admin-header {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Public share/review report ------------------------------------------------- */

.share-language-shell,
.share-pdf-btn,
.share-brand-mark { border-radius: var(--radius-control); }

.hero:has(.hero__inner) {
  background: var(--surface);
}

.hero:has(.hero__inner) .hero__kicker {
  font-family: var(--font-mono);
  border-radius: var(--radius-control);
}

.hero:has(.hero__inner) h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.045em;
}

.share-main__inner,
.share-card,
.share-section,
.case-card,
.review-card {
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* Authenticated application ------------------------------------------------- */

body:has(.tj-main) {
  background: var(--bg);
}

.tj-sidebar {
  background: var(--surface-2);
  border-color: var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.tj-sidebar__brand .brand-wordmark,
.app-bar .brand-wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.tj-sidebar__btn,
.tj-sidebar button {
  border-radius: var(--radius-control);
}

.tj-sidebar .tj-sidebar__btn:is(.is-active, [aria-current="page"]) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: transparent;
  box-shadow: none;
  font-weight: 650;
}

.tj-sidebar .tj-sidebar__btn:is(.is-active, [aria-current="page"]):hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

.tj-sidebar .tj-sidebar__btn:is(.is-active, [aria-current="page"]) svg {
  color: var(--text);
}

.tj-sidebar .tj-sidebar__btn:is(.is-active, [aria-current="page"])::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.app-bar {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tab-bar,
.top-actions {
  background: var(--surface);
  box-shadow: none;
}

.tab-bar { border: 1px solid var(--border-strong); border-bottom: 0; }
.top-actions { border: 1px solid var(--border-strong); border-top-color: var(--border); }

.ticket-tab.active {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: inset 0 2px 0 var(--tab-color, var(--accent));
}

.panel,
.canvas-surface__inner,
.project-view__panel,
.modal-content,
.tj-card {
  background: var(--surface);
  border-color: var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.canvas-surface__title {
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.025em;
}

.canvas-surface__search,
.canvas-surface__range,
.canvas-surface__filter-btn,
input:not([type="checkbox"]):not([type="radio"]):not(:focus),
select:not(:focus),
textarea:not(:focus) {
  background-color: var(--surface);
  border-color: var(--border-strong);
  /* :not(:focus) matters — this reset outranked every .input:focus rule on
     SPECIFICITY (0,2,1 vs 0,2,0), so text inputs had no visible focus
     indicator anywhere on the site. WCAG 2.4.7, Level A. */
  box-shadow: none;
}

.canvas-surface__tabs,
.panel-local-toolbar,
.project-view__panel-header { border-color: var(--border-strong); }

.modal {
  background: color-mix(in srgb, var(--text) 48%, transparent);
  backdrop-filter: blur(2px);
}

/* Ink-filled buttons take the page ground as their label colour — correct in
   BOTH themes at rest AND on hover. --accent-on is #ffffff in every theme, but
   the dark accent is a LIGHT colour, so white-on-accent measures 3.4:1 there.
   .tool-btn.active carries a grey fill and owns its own ink label.
   .user-pill--cta is outlined at rest, so it takes ground only on hover. */
.btn-primary,
.btn--accent,
.btn-primary:hover,
.btn--accent:hover,
.user-pill--cta:hover {
  color: var(--bg);
}

.user-pill { border-radius: var(--radius-control); }

/* Admin section switcher --------------------------------------------------- */

/* One outer frame for every admin destination, including its navigation. */
.td-admin-shell {
  --td-admin-header-offset: 80px;
  color-scheme: light;
  width: min(1520px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 var(--s-12);
}
[data-theme="dark"] .td-admin-shell { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .td-admin-shell { color-scheme: dark; }
}

.td-admin-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.td-admin-page-description {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.td-admin-shell :is(.people-filters, .promo-form, .promo-inline, .announcement-form, .guide-field) :is(input, select, textarea) {
  font: 500 var(--text-sm)/1.4 var(--font-sans);
  border-radius: var(--radius-control);
}
.td-admin-shell :is(.admin-panel, .people-card, .promo-panel, .announcement-panel, .guide-admin-panel) {
  border-color: var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.td-admin-shell :is(.admin-panel__head, .promo-panel__head, .announcement-panel__head, .guide-admin-panel__head, .guide-live-preview__head) {
  padding: var(--s-4);
}
.td-admin-shell :is(.admin-panel__head, .promo-panel__head, .announcement-panel__head, .guide-admin-panel__head, .guide-live-preview__head) h2 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -.02em;
}

.td-admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: var(--s-4);
  margin: 0 0 var(--s-5);
  padding: 10px 0;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.td-admin-header__identity,
.td-admin-header__actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.td-admin-header__identity { gap: 10px; }
.td-admin-header__actions { justify-content: flex-end; gap: 6px; }

.td-admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: inherit;
  text-decoration: none;
}
.td-admin-brand img { display: block; flex: none; width: 20px; height: 20px; }
.td-admin-brand__title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.td-admin-brand:hover { color: var(--text-2); }
.td-admin-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r); }

.td-admin-header .td-env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.td-admin-header .td-env::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.td-admin-header .td-env--production { color: var(--success); }
.td-admin-header .td-env--preview { color: var(--warning); }

.td-admin-menu { flex: none; }
.td-admin-prefs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-admin-language {
  width: 82px;
  min-width: 82px;
  height: 36px;
}
.td-admin-language .marketing-language-shell__current {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.td-admin-header .theme-toggle,
.td-admin-icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}
.td-admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.td-admin-icon-btn svg { flex: none; }
.td-admin-signout { padding-inline: 10px; }
.td-admin-nav__prefs { display: none; }
.td-admin-menu__bar {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.td-admin-nav { display: none; position: relative; }
.td-admin-nav > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.td-admin-nav > summary::-webkit-details-marker { display: none; }
.td-admin-nav > summary::marker { content: ""; }
.td-admin-nav[open] > summary { color: var(--text); background: var(--surface-2); }
.td-admin-nav > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.td-admin-nav:not([open]) .td-admin-nav__menu { display: none; }
.td-admin-nav__menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(272px, calc(100vw - 24px));
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--text) 14%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform-origin: top right;
  animation: td-admin-menu-in 140ms var(--ease-out);
}
.td-admin-nav__link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  color: var(--text-2);
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 550;
  text-decoration: none;
}
.td-admin-nav__link:hover { color: var(--text); background: var(--surface-2); }
.td-admin-nav__link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
}
.td-admin-nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Admin confirmations ------------------------------------------------------ */

.td-admin-confirm {
  width: min(460px, calc(100% - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}

.td-admin-confirm::backdrop {
  background: color-mix(in srgb, var(--text) 52%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.td-admin-confirm__panel { margin: 0; }
.td-admin-confirm__content {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-6);
}
.td-admin-confirm__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--warning-soft);
  color: var(--warning);
  font: 800 17px/1 var(--font-display);
}
.td-admin-confirm[data-tone="danger"] .td-admin-confirm__icon {
  background: var(--danger-soft);
  color: var(--danger);
}
.td-admin-confirm__eyebrow {
  display: block;
  margin: 1px 0 5px;
  color: var(--accent-text);
  font: 700 10px/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.td-admin-confirm[data-tone="danger"] .td-admin-confirm__eyebrow { color: var(--danger); }
.td-admin-confirm h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.td-admin-confirm p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.td-admin-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.td-admin-confirm__actions .btn { min-width: 104px; justify-content: center; }

@media (max-width: 460px) {
  .td-admin-confirm__content { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-5); }
  .td-admin-confirm__icon { width: 32px; height: 32px; }
  .td-admin-confirm__actions { display: grid; grid-template-columns: 1fr; padding: var(--s-3) var(--s-5); }
  .td-admin-confirm__actions .btn { width: 100%; min-height: 42px; }
}

@keyframes td-admin-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .td-admin-header {
    min-height: 60px;
    gap: var(--s-2);
    padding: 8px 0;
  }
  .td-admin-brand__title { font-size: 17px; }
  .td-admin-header .td-env { display: none; }
  .td-admin-prefs--desktop { display: none !important; }
  .td-admin-menu__bar { display: none; }
  .td-admin-nav { display: block; }
  .td-admin-nav > summary { width: 44px; height: 44px; }
  .td-admin-nav__link { min-height: 44px; }
  .td-admin-nav__prefs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: var(--s-2);
    margin-top: 4px;
    padding: var(--s-2) 4px 4px;
    border-top: 1px solid var(--border);
  }
  .td-admin-nav__prefs .td-admin-language {
    width: 100%;
    min-width: 0;
    height: 44px;
  }
  .td-admin-nav__prefs .theme-toggle { width: 44px; height: 44px; }
}

@media (max-width: 430px) {
  .td-admin-header__actions { gap: 2px; }
  .td-admin-signout { padding-inline: 7px; }
}

/* The operator navigation keeps primary destinations visible at every width. */
td-admin-menu { display: block; max-width: 100%; }
.td-admin-simple-nav { position: relative; display: flex; align-items: center; gap: 4px; }
.td-admin-nav--persistent { display: block; position: static; }
.td-admin-nav--persistent > summary { width: auto; min-height: 36px; gap: 6px; padding: 0 10px; border-color: transparent; background: transparent; font-size: var(--text-sm); font-weight: 600; }
.td-admin-nav--persistent > summary[aria-current] { color: var(--accent); background: var(--accent-soft); }
.td-admin-settings > summary { width: 36px; padding: 0; }
.td-admin-settings .td-admin-nav__prefs { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2); }
.td-admin-settings .td-admin-signout { width: 100%; justify-content: flex-start; margin-top: var(--s-2); }
.td-admin-runtime { display: flex; align-items: center; gap: var(--s-2); }
.td-admin-header__identity:has(.td-admin-runtime) { flex-direction: column; align-items: flex-start; gap: 5px; }
@media (max-width: 760px) {
  .td-admin-header { flex-wrap: wrap; }
  .td-admin-header > :first-child { min-height: 56px; }
  .td-admin-shell .btn,
  .td-admin-shell :is(.people-filters, .promo-form, .promo-inline, .announcement-form, .guide-field) :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; }
  .td-admin-header .td-env { display: inline-flex; }
  .td-admin-simple-nav { flex-wrap: wrap; }
  .td-admin-nav--persistent > summary { min-height: 44px; }
  .td-admin-settings > summary { width: 44px; }
  .td-admin-header__actions:has(.td-admin-simple-nav) { width: 100%; justify-content: flex-start; }
  .td-admin-settings .td-admin-nav__menu { right: 0; }
  .td-admin-nav--persistent:not(.td-admin-settings) .td-admin-nav__menu { right: auto; left: 0; }
}

/* Responsive rules ---------------------------------------------------------- */

@media (max-width: 960px) {
  .marketing-home .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .marketing-home .hero__text { max-width: 760px; margin: 0; text-align: left; }
  .marketing-home .hero__visual { margin-top: 12px; }
}

@media (max-width: 780px) {
  .marketing-home .marquee__lead {
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .marketing-home .section-head--centered {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .marketing-home .section-head--centered .eyebrow { justify-content: center; }
  .marketing-home .section-head--centered h2,
  .marketing-home .section-head--centered p { margin-right: auto; margin-left: auto; }
  .marketing-home .how-grid { border-top: 0; }
  .marketing-home .how-step,
  .marketing-home .how-step:first-child,
  .marketing-home .how-step:last-child {
    padding: 28px 0 36px;
    border-top: 1px solid var(--border-strong);
    border-right: 0;
  }
  .marketing-home .how-step > p { min-height: 0; }
  .marketing-home .reviewer-band__inner { grid-template-columns: minmax(0, 1fr); }
  .marketing-home .reviewer-band__title,
  .marketing-home .reviewer-band__divider,
  .marketing-home .reviewer-band__copy { grid-column: 1; grid-row: auto; }
  .marketing-home .reviewer-band__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
  }
  .marketing-home .reviewer-band__copy { padding: 0; border: 0; }
  .marketing-home .stack-fit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .marketing-home .stack-fit__title,
  .marketing-home .stack-fit__divider,
  .marketing-home .stack-fit__copy { grid-column: 1; grid-row: auto; }
  .marketing-home .stack-fit__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    margin-top: 0;
    transform: none;
  }
  .marketing-home .stack-fit__copy { padding: 0; }
  /* Stack the CTAs on a phone. The base rule is `grid-template-columns: auto
     auto`, which held two columns at EVERY width — on a phone that squeezed
     "See all four sample reports" into a ~150px column and wrapped it onto
     three lines.
     This has to be fixed here, on the grid: index.html's mobile block sets
     `flex-direction: column`, but `.marketing-home .closing-cta__actions` (0,2,0)
     beats the bare `.closing-cta__actions` (0,1,0) that declares `display: flex`,
     so the element is a GRID and the flex direction was inert. */
  .marketing-home .closing-cta__actions {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .marketing-home .hero { padding-top: 56px; }
  .marketing-home .hero h1 { font-size: clamp(40px, 11vw, 50px); }
  .marketing-home .hero__text > p { font-size: 16px; }
  .marketing-home .hero__ctas { align-items: stretch; }
  .marketing-home .hero__ctas { flex-direction: column; gap: 8px; }
  .marketing-home .hero__ctas .btn { width: 100%; }
  .marketing-home .share-mock--hero { box-shadow: none; }
  .marketing-home .pain-strip { border-radius: 0; border-inline: 0; }
  .marketing-home .feature-grid { border-bottom: 0; }
  .marketing-home .feature { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--border-strong); }
  .marketing-home .reviewer-band,
  .marketing-home .stack-fit,
  .marketing-home .closing-cta { padding-inline: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .td-admin-nav__menu { animation: none; }
}


:root {
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  }
}
[data-theme="dark"] {
}


/* ============================================================
   Print — paper is always light.

   Loaded last, and the selectors carry an attribute so they outrank
   [data-theme="dark"] (0,1,1 vs 0,1,0). Without this a dark-theme visitor
   printed 64-99% of every page below contrast threshold, and every ink-filled
   CTA printed as pale grey because its background was dropped.
   ============================================================ */
@media print {
  html,
  html[data-theme="dark"],
  html[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --text: #000000;
    --text-2: #1f242e;
    --text-3: #333a45;
    --text-4: #333a45;
    --border: #b8bcc4;
    --border-strong: #7c828c;
  }
  body { background: #fff !important; color: #000 !important; }
  .btn, .btn--accent, .btn-primary, .site-nav__links .is-cta, .checkout-submit {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
  .site-header, .site-nav, .theme-toggle, .marketing-language { display: none !important; }
  .marketing-home .closing-cta {
    background: transparent !important;
    border-block: 1px solid #7c828c !important;
  }
  .marketing-home .closing-cta h2,
  .marketing-home .closing-cta p,
  .marketing-home .closing-cta .eyebrow { color: #000 !important; }
  /* The mark is a CSS mask over a background, and backgrounds are dropped. */
  .brand-mark { display: none !important; }
}

.marketing-home .hero h1 .grad::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.04em;
  height: 0.24em;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'><g fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'><path d='M5 10.2 C42 6.4, 79 11.6, 116 8.2 S190 5.4, 235 8.8' stroke-width='4.2'/><path d='M12 12.4 C52 9.6, 92 13.2, 132 10.4 S198 8.6, 228 11.2' stroke-width='2.4' opacity='.55'/></g></svg>") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'><g fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'><path d='M5 10.2 C42 6.4, 79 11.6, 116 8.2 S190 5.4, 235 8.8' stroke-width='4.2'/><path d='M12 12.4 C52 9.6, 92 13.2, 132 10.4 S198 8.6, 228 11.2' stroke-width='2.4' opacity='.55'/></g></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}
/* Masks paint a background, and print drops backgrounds — fall back to a rule. */
@media print {
  .marketing-home .hero h1 .grad::after { display: none; }
  .marketing-home .hero h1 .grad { text-decoration: underline; text-underline-offset: 0.14em; }
}