/* ============================================================
   INTENT POP — MARKETING · marketing.css
   Built on the Foundation. Loads AFTER ../foundations/tokens.css
   + treatment.css. Marketing varies VOLUME, never VALUES — every
   --mkt-* alias resolves to a Foundation semantic token. No raw hex.
   ============================================================ */

/* ============================================================
   M1 · TOKEN BRIDGE  (--mkt-* → foundation semantics)
   ============================================================ */
:root {
  /* surfaces */
  --mkt-page-bg:            var(--surface-page);
  --mkt-section-bg:         var(--surface-page);
  --mkt-section-sunken:     var(--surface-sunken);
  --mkt-section-inverse-bg: var(--surface-inverse);
  --mkt-section-pine-bg:    var(--surface-pine);
  --mkt-hero-bg:            var(--surface-page);
  --mkt-hero-fg:            var(--text-primary);

  /* cards */
  --mkt-card-bg:           var(--surface-raised);
  --mkt-card-border:       var(--border-default);
  --mkt-card-radius:       var(--p-r-lg);     /* marketing rounds softer */
  --mkt-card-shadow:       var(--shadow-1);
  --mkt-card-shadow-hover: var(--shadow-2);
  --mkt-card-pad:          var(--p-space-6);

  /* rhythm — roomier than the app */
  --mkt-section-gap:    clamp(var(--p-space-8), 11vw, var(--p-space-10));
  --mkt-block-gap:      var(--p-space-7);
  --mkt-container:      var(--p-container);    /* 1180 */
  --mkt-prose:         var(--p-prose);        /* 64ch */
  --mkt-gutter:        clamp(var(--p-space-5), 5vw, var(--p-space-8));

  /* conversion */
  --mkt-cta-bg:        var(--accent);
  --mkt-cta-bg-hover:  var(--accent-hover);
  --mkt-cta-fg:        var(--text-on-accent);
  --mkt-cta-shadow:    var(--p-sh-pop);

  /* proof / lines / focus */
  --mkt-proof-bg:      var(--surface-sunken);
  --mkt-stat-accent:   var(--accent);
  --mkt-rule:          var(--border-subtle);
  --mkt-rule-strong:   var(--border-default);
  --mkt-focus-ring:    var(--focus-ring-shadow);

  /* treatment volume knobs */
  --mkt-treatment-opacity: var(--treat-pattern-opacity);
  --mkt-treatment-size:    var(--treat-grid-size);

  /* nav */
  --mkt-nav-h:  72px;
  --mkt-nav-bg: color-mix(in srgb, var(--surface-page) 82%, transparent);
}

/* ground scopes — re-point hero/card roles so children flip cleanly.
   The contrast gate: a light card inside one of these MUST reset its
   own text roles (see .mkt-card-light) so it never inherits cream text. */
.mkt-ground-ink {
  --mkt-section-bg: var(--surface-inverse);
  --mkt-hero-fg: var(--p-cream);
  --mkt-card-bg: var(--p-ink-700);
  --mkt-card-border: color-mix(in srgb, var(--p-cream) 14%, transparent);
  --mkt-rule: color-mix(in srgb, var(--p-cream) 12%, transparent);
  --mkt-rule-strong: color-mix(in srgb, var(--p-cream) 22%, transparent);
  background: var(--surface-inverse); color: var(--p-cream);
}
.mkt-ground-pine {
  --mkt-section-bg: var(--surface-pine);
  --mkt-hero-fg: var(--p-cream);
  --mkt-card-bg: color-mix(in srgb, #fff 8%, var(--surface-pine));
  --mkt-card-border: color-mix(in srgb, var(--p-cream) 16%, transparent);
  --mkt-rule: color-mix(in srgb, var(--p-cream) 14%, transparent);
  --mkt-rule-strong: color-mix(in srgb, var(--p-cream) 24%, transparent);
  background: var(--surface-pine); color: var(--p-cream);
}
/* a deliberately light card on a dark ground keeps its OWN dark text */
.mkt-card-light { background: var(--p-cream-200); color: var(--p-ink); }
.mkt-card-light .mkt-muted { color: var(--p-ink-400); }
.mkt-card-light .mkt-secondary { color: var(--p-ink-600); }

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.mkt { margin: 0; background: var(--mkt-page-bg); color: var(--text-primary);
  font-family: var(--p-font-body); font-size: var(--p-size-md); line-height: var(--p-lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.mkt ::selection { background: var(--text-primary); color: var(--surface-page); }
.mkt img { max-width: 100%; display: block; }
.mkt a { color: inherit; }
.mkt-skip { position: absolute; left: -9999px; top: 8px; z-index: var(--p-z-command);
  background: var(--surface-inverse); color: var(--text-inverse); padding: 10px 16px; border-radius: var(--p-r-pill); font-family: var(--p-font-mono); font-size: var(--p-size-sm); }
.mkt-skip:focus { left: 16px; }

.mkt-container { width: 100%; max-width: var(--mkt-container); margin-inline: auto; padding-inline: var(--mkt-gutter); }
.mkt-section { padding-block: var(--mkt-section-gap); background: var(--mkt-section-bg); }
.mkt-section.tight { padding-block: var(--p-space-8); }
.mkt-measure { max-width: var(--mkt-prose); }

/* type helpers */
.mkt-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--p-font-mono); font-size: var(--p-size-xs); letter-spacing: var(--p-track-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--p-w-medium); margin: 0 0 var(--p-space-4); }
.mkt-eyebrow .treat-burst { width: 13px; height: 13px; }
.mkt-h1 { font-family: var(--p-font-display); font-weight: var(--p-w-extra); font-size: clamp(2.6rem,6.5vw,var(--p-size-5xl)); line-height: var(--p-lh-solid); letter-spacing: var(--p-track-display); margin: 0; }
.mkt-h2 { font-family: var(--p-font-display); font-weight: var(--p-w-bold); font-size: clamp(2rem,4.4vw,var(--p-size-3xl)); line-height: var(--p-lh-tight); letter-spacing: var(--p-track-tight); margin: 0; }
.mkt-h3 { font-family: var(--p-font-display); font-weight: var(--p-w-bold); font-size: var(--p-size-2xl); line-height: var(--p-lh-tight); letter-spacing: var(--p-track-snug); margin: 0; }
.mkt-h4 { font-family: var(--p-font-display); font-weight: var(--p-w-bold); font-size: var(--p-size-xl); line-height: 1.1; letter-spacing: var(--p-track-snug); margin: 0; }
.mkt-lede { font-size: clamp(var(--p-size-md),2.1vw,var(--p-size-lg)); line-height: var(--p-lh-normal); color: var(--text-secondary); margin: var(--p-space-5) 0 0; max-width: 46ch; }
.mkt-serif { font-family: var(--p-font-serif); font-style: italic; }
.mkt-accent { color: var(--text-accent); }
.mkt-muted { color: var(--text-muted); }
.mkt-secondary { color: var(--text-secondary); }
.mkt-section-head { max-width: 60ch; margin-bottom: var(--mkt-block-gap); }
.mkt-section-head.center { margin-inline: auto; text-align: center; }
.mkt-section-head p { margin: var(--p-space-4) 0 0; color: var(--text-secondary); font-size: var(--p-size-md); }

/* ============================================================
   BUTTONS (resolve to foundation tokens)
   ============================================================ */
.mkt-btn { font-family: var(--p-font-body); font-weight: var(--p-w-semibold); font-size: var(--p-size-base); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--p-h-lg); padding: 0 24px;
  border-radius: var(--p-r-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--p-dur-micro) var(--p-ease-standard), background var(--p-dur-quick) var(--p-ease-standard), box-shadow var(--p-dur-quick) var(--p-ease-standard), border-color var(--p-dur-quick) var(--p-ease-standard); }
.mkt-btn:active { transform: translateY(1px); }
.mkt-btn:focus-visible { outline: none; box-shadow: var(--mkt-focus-ring); }
.mkt-btn .treat-burst { width: 15px; height: 15px; background: currentColor; }
.mkt-btn svg { width: 17px; height: 17px; }
.mkt-btn-primary { background: var(--mkt-cta-bg); color: var(--mkt-cta-fg); }
.mkt-btn-primary:hover { background: var(--mkt-cta-bg-hover); box-shadow: var(--mkt-cta-shadow); }
.mkt-btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.mkt-btn-secondary:hover { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.mkt-ground-ink .mkt-btn-secondary, .mkt-ground-pine .mkt-btn-secondary { color: var(--p-cream); border-color: color-mix(in srgb, var(--p-cream) 55%, transparent); }
.mkt-ground-ink .mkt-btn-secondary:hover, .mkt-ground-pine .mkt-btn-secondary:hover { background: var(--p-cream); color: var(--p-ink); border-color: var(--p-cream); }
.mkt-btn-ghost { background: transparent; color: var(--text-primary); }
.mkt-btn-ghost:hover { color: var(--text-accent); }
.mkt-btn-sm { height: var(--p-h-sm); padding: 0 16px; font-size: var(--p-size-sm); }
.mkt-btn-lg { height: 60px; padding: 0 30px; font-size: var(--p-size-md); }
.mkt-textlink { color: var(--text-accent); font-weight: var(--p-w-semibold); text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px; transition: border-color var(--p-dur-quick), gap var(--p-dur-quick); }
.mkt-textlink:hover { border-color: var(--accent); gap: 11px; }
.mkt-textlink svg { width: 16px; height: 16px; }

/* reveal — transform only, opacity stays 1 (never hide content) */
[data-reveal] { transform: translateY(14px); transition: transform var(--p-dur-base) var(--p-ease-standard); }
[data-reveal].is-in { transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 70ms; }
[data-reveal][data-delay="2"] { transition-delay: 140ms; }
[data-reveal][data-delay="3"] { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { transform: none !important; } }

/* ============================================================
   M2 · HEADER / MASTHEAD + FOOTER (wordmark = canonical partial)
   ============================================================ */
.mkt-header { position: sticky; top: 0; z-index: var(--p-z-sticky); background: var(--mkt-nav-bg);
  backdrop-filter: var(--p-blur-nav); -webkit-backdrop-filter: var(--p-blur-nav); border-bottom: 1px solid transparent;
  transition: border-color var(--p-dur-base) var(--p-ease-standard); }
.mkt-header[data-scrolled] { border-bottom-color: var(--mkt-rule); }
.mkt-header-inner { height: var(--mkt-nav-h); display: flex; align-items: center; gap: var(--p-space-6); }
.mkt-logo { font-size: 20px; }            /* the .wordmark partial sets family/weight/tracking */
.mkt-logo .wm-burst { background: var(--accent); }
.mkt-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.mkt-nav a { font-size: var(--p-size-base); font-weight: var(--p-w-medium); color: var(--text-secondary); text-decoration: none; padding: 9px 14px; border-radius: var(--p-r-pill); transition: color var(--p-dur-quick), background var(--p-dur-quick); }
.mkt-nav a:hover, .mkt-nav a[aria-current="page"] { color: var(--text-primary); background: var(--surface-sunken); }
.mkt-header-cta { display: flex; align-items: center; gap: 12px; }
.mkt-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--mkt-rule-strong); border-radius: var(--p-r-sm); background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--text-primary); }
.mkt-burger svg { width: 22px; height: 22px; }

.mkt-has-mega { position: relative; }
.mkt-mega { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(680px, 90vw); background: var(--surface-raised); border: 1px solid var(--mkt-rule-strong); border-radius: var(--p-r-lg); box-shadow: var(--shadow-3); padding: var(--p-space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--p-dur-quick) var(--p-ease-standard), transform var(--p-dur-quick) var(--p-ease-standard); }
.mkt-has-mega:hover .mkt-mega, .mkt-has-mega:focus-within .mkt-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mkt-mega-item { display: flex; gap: 12px; padding: 12px; border-radius: var(--p-r-sm); text-decoration: none; transition: background var(--p-dur-quick); }
.mkt-mega-item:hover { background: var(--surface-sunken); }
.mkt-mega-item .ic { flex: none; width: 38px; height: 38px; border-radius: var(--p-r-sm); background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.mkt-mega-item .ic svg { width: 20px; height: 20px; }
.mkt-mega-item b { display: block; font-family: var(--p-font-display); font-weight: var(--p-w-bold); font-size: var(--p-size-base); color: var(--text-primary); letter-spacing: var(--p-track-snug); }
.mkt-mega-item span { font-size: var(--p-size-sm); color: var(--text-muted); }

.mkt-announce { background: var(--surface-inverse); color: var(--text-inverse); text-align: center; font-size: var(--p-size-sm); padding: 9px 16px; }
.mkt-announce .treat-burst { width: 12px; height: 12px; vertical-align: -1px; margin-right: 6px; background: var(--accent); }
.mkt-announce b { color: var(--p-poppy-300); font-weight: var(--p-w-semibold); }
.mkt-announce a { color: var(--text-on-accent); }

.mkt-drawer { position: fixed; inset: 0; z-index: var(--p-z-drawer); display: none; }
.mkt-drawer[data-open] { display: block; }
.mkt-drawer-scrim { position: absolute; inset: 0; background: var(--p-scrim); }
.mkt-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw); background: var(--surface-raised); border-left: 1px solid var(--mkt-rule-strong); padding: var(--p-space-5); transform: translateX(100%); transition: transform var(--p-dur-base) var(--p-ease-standard); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.mkt-drawer[data-open] .mkt-drawer-panel { transform: translateX(0); }
.mkt-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--p-space-4); }
.mkt-drawer-panel nav a { font-family: var(--p-font-display); font-weight: var(--p-w-semibold); font-size: var(--p-size-lg); color: var(--text-primary); text-decoration: none; padding: 12px 4px; border-bottom: 1px solid var(--mkt-rule); }
.mkt-drawer-panel .mkt-btn { margin-top: var(--p-space-4); }
.mkt-close { width: 44px; height: 44px; border: 1px solid var(--mkt-rule-strong); border-radius: var(--p-r-sm); background: transparent; cursor: pointer; color: var(--text-primary); display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .mkt-nav, .mkt-header-cta .mkt-btn { display: none; } .mkt-burger { display: flex; margin-left: auto; } }

/* footer */
.mkt-footer { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--p-space-8) var(--p-space-6); }
.mkt-footer a { color: color-mix(in srgb, var(--text-inverse) 72%, transparent); text-decoration: none; }
.mkt-footer a:hover { color: var(--text-inverse); }
.mkt-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--p-space-7); padding-bottom: var(--p-space-7); border-bottom: 1px solid color-mix(in srgb, var(--p-cream) 14%, transparent); }
.mkt-footer-brand .mkt-logo { color: var(--text-inverse); font-size: 24px; }
.mkt-footer-tag { font-family: var(--p-font-display); font-weight: var(--p-w-bold); font-size: var(--p-size-xl); letter-spacing: var(--p-track-tight); margin: var(--p-space-4) 0; max-width: 16ch; color: var(--text-inverse); }
.mkt-footer-col h4 { font-family: var(--p-font-mono); font-size: var(--p-size-xs); letter-spacing: var(--p-track-eyebrow); text-transform: uppercase; color: color-mix(in srgb, var(--text-inverse) 50%, transparent); margin: 0 0 var(--p-space-4); font-weight: var(--p-w-medium); }
.mkt-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: var(--p-size-base); }
.mkt-footer-bottom { display: flex; flex-wrap: wrap; gap: var(--p-space-4); justify-content: space-between; align-items: center; padding-top: var(--p-space-5); font-family: var(--p-font-mono); font-size: var(--p-size-sm); color: color-mix(in srgb, var(--text-inverse) 55%, transparent); }
.mkt-seal { display: inline-flex; align-items: center; gap: 8px; font-family: var(--p-font-mono); font-size: var(--p-size-2xs); letter-spacing: var(--p-track-wide); text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--mkt-rule-strong); border-radius: var(--p-r-pill); padding: 6px 12px; }
.mkt-seal .treat-burst { width: 13px; height: 13px; background: var(--accent); }
@media (max-width: 760px) { .mkt-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--p-space-6); } .mkt-footer-brand { grid-column: 1 / -1; } }

/* ============================================================
   M3 · HERO SYSTEM
   ============================================================ */
.mkt-hero { position: relative; padding-block: clamp(var(--p-space-8), 9vw, 130px); overflow: hidden; }
.mkt-hero-statement { text-align: center; }
.mkt-hero-statement .mkt-eyebrow { justify-content: center; }
.mkt-hero-statement .mkt-h1 { max-width: 16ch; margin-inline: auto; }
.mkt-hero-statement .mkt-lede { margin-inline: auto; text-align: center; max-width: 52ch; }
.mkt-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--p-space-6); }
.mkt-hero-statement .mkt-hero-actions { justify-content: center; }
.mkt-hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--p-space-6), 5vw, var(--p-space-8)); align-items: center; }
.mkt-hero-split .mkt-h1 { font-size: clamp(2.4rem, 5vw, var(--p-size-4xl)); }
.mkt-hero-visual { position: relative; }
.mkt-hero-rings { border-radius: var(--p-r-xl); min-height: 360px; display: flex; align-items: center; justify-content: center; }
.mkt-hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-5); margin-top: var(--p-space-7); padding-top: var(--p-space-5); border-top: 1px solid var(--mkt-rule); font-family: var(--p-font-mono); font-size: var(--p-size-sm); color: var(--text-muted); }
.mkt-hero-statement .mkt-hero-proof { justify-content: center; }
.mkt-hero-proof b { color: var(--text-primary); font-weight: var(--p-w-semibold); }
@media (max-width: 860px) { .mkt-hero-split { grid-template-columns: 1fr; } }