/* StartHDS v1 marketing bundle - dependency-free marketing, growth, and conversion primitives.
   Load /v1/css/starthds-core.css first. This file intentionally does not define
   root-level tokens, resets, core layout primitives, app surfaces, or knowledge/discovery families. */

/* Marketing and conversion sections: dependency-free, token-backed public classes. */
.hds-landing-hero {
  display: grid;
  gap: var(--hds-space-8, 2rem);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--hds-color-border, #d7dde8);
  border-radius: calc(var(--hds-radius-card, 1rem) + .5rem);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--hds-color-accent, #0ea5e9) 18%, transparent), transparent 28rem),
    linear-gradient(135deg, color-mix(in srgb, var(--hds-color-primary, #2457d6) 11%, var(--hds-color-surface, #fff)), var(--hds-color-surface, #fff));
  box-shadow: var(--hds-shadow-large, 0 1.5rem 4rem rgb(15 23 42 / .16));
  padding: clamp(1.5rem, 6vw, 4rem);
}
.hds-landing-hero--split { grid-template-columns: minmax(0, 1.15fr) minmax(min(24rem, 100%), .85fr); }
.hds-landing-hero--centered { justify-items: center; text-align: center; }
.hds-landing-hero :where(h1) { max-width: 13ch; margin: 0; color: var(--hds-color-heading, #0f172a); font-size: var(--hds-font-size-hero, clamp(2.25rem, 6vw, 4.5rem)); line-height: var(--hds-line-height-tight, 1.1); letter-spacing: var(--hds-letter-spacing-tight, -0.035em); }
.hds-landing-hero--centered :where(h1, p) { max-width: min(100%, 48rem); }
.hds-landing-hero :where(p) { max-width: var(--hds-readable-max-width, 42rem); }

.hds-proof-strip,
.hds-logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hds-space-3, .75rem) var(--hds-space-6, 1.5rem);
}
.hds-proof-strip {
  border-block: 1px solid var(--hds-color-border, #d7dde8);
  padding-block: var(--hds-space-4, 1rem);
  color: var(--hds-color-text-muted, #64748b);
  font-size: var(--hds-font-size-sm, .875rem);
  font-weight: 800;
}
.hds-logo-strip { color: var(--hds-color-text-muted, #64748b); }
.hds-logo-strip > * { max-width: 12rem; opacity: .78; }

.hds-benefit-grid,
.hds-feature-grid,
.hds-testimonial-grid,
.hds-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--hds-grid-gap, 1.5rem);
}
.hds-benefit-card,
.hds-feature-card,
.hds-testimonial-card,
.hds-pricing-card,
.hds-cta-panel {
  display: grid;
  gap: var(--hds-space-3, .75rem);
  align-content: start;
  border: 1px solid var(--hds-color-border, #d7dde8);
  border-radius: var(--hds-radius-card, 1rem);
  background: var(--hds-color-surface, #fff);
  box-shadow: var(--hds-shadow-panel, 0 .5rem 1.5rem rgb(15 23 42 / .08));
  padding: clamp(1.1rem, 3vw, 1.75rem);
}
.hds-benefit-card { border-left: .35rem solid var(--hds-color-primary, #2457d6); }
.hds-feature-card { min-height: 100%; }
.hds-feature-card :where(svg, img) { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--hds-radius-medium, .75rem); }

.hds-problem-solution,
.hds-before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hds-space-4, 1rem);
  align-items: stretch;
}
.hds-problem-solution > *,
.hds-before-after > * {
  border: 1px solid var(--hds-color-border, #d7dde8);
  border-radius: var(--hds-radius-card, 1rem);
  background: var(--hds-color-surface, #fff);
  padding: var(--hds-space-5, 1.25rem);
}
.hds-before-after > :first-child { background: var(--hds-color-surface-muted, #f1f5f9); }
.hds-before-after > :last-child { background: color-mix(in srgb, var(--hds-color-success-soft, #dcfce7) 72%, var(--hds-color-surface, #fff)); }

.hds-testimonial { margin: 0; }
.hds-testimonial-card { gap: var(--hds-space-4, 1rem); }
.hds-testimonial-card :where(blockquote) { margin: 0; color: var(--hds-color-heading, #0f172a); font-size: var(--hds-font-size-lg, 1.125rem); font-weight: 750; }
.hds-testimonial-card :where(figcaption, cite) { color: var(--hds-color-text-muted, #64748b); font-size: var(--hds-font-size-sm, .875rem); font-style: normal; font-weight: 800; }

.hds-pricing-card { position: relative; }
.hds-pricing-card[data-featured="true"],
.hds-pricing-card.is-featured { border-color: color-mix(in srgb, var(--hds-color-primary, #2457d6) 42%, var(--hds-color-border, #d7dde8)); box-shadow: var(--hds-shadow-card, 0 1rem 2rem rgb(15 23 42 / .10)); }
.hds-pricing-feature-list { display: grid; gap: var(--hds-space-2, .5rem); margin: 0; padding: 0; list-style: none; }
.hds-pricing-feature-list li { display: flex; gap: var(--hds-space-2, .5rem); align-items: flex-start; }
.hds-pricing-feature-list li::before { content: "✓"; flex: 0 0 auto; color: var(--hds-color-success, #15803d); font-weight: 900; }
.hds-pricing-badge { display: inline-flex; width: max-content; align-items: center; border-radius: var(--hds-radius-pill, 999rem); background: var(--hds-color-primary, #2457d6); color: var(--hds-color-primary-contrast, #fff); padding: .25rem .65rem; font-size: var(--hds-font-size-xs, .75rem); font-weight: 900; letter-spacing: var(--hds-letter-spacing-wide, .08em); text-transform: uppercase; }

.hds-faq { display: grid; gap: var(--hds-space-3, .75rem); }
.hds-faq-item { border: 1px solid var(--hds-color-border, #d7dde8); border-radius: var(--hds-radius-card, 1rem); background: var(--hds-color-surface, #fff); padding: var(--hds-space-4, 1rem); }
.hds-faq-item > summary { cursor: pointer; color: var(--hds-color-heading, #0f172a); font-weight: 850; }
.hds-faq-item > * + * { margin-top: var(--hds-space-3, .75rem); }

.hds-cta-band {
  border-radius: calc(var(--hds-radius-card, 1rem) + .5rem);
  background: linear-gradient(135deg, var(--hds-color-heading, #0f172a), color-mix(in srgb, var(--hds-color-primary, #2457d6) 68%, var(--hds-color-heading, #0f172a)));
  color: var(--hds-color-primary-contrast, #fff);
  padding: clamp(1.5rem, 5vw, 3rem);
}
.hds-cta-band :where(h1, h2, h3, p) { color: inherit; }
.hds-cta-panel { background: color-mix(in srgb, var(--hds-color-surface, #fff) 92%, transparent); color: var(--hds-color-text, #162033); }
.hds-cta-panel :where(h1, h2, h3) { color: var(--hds-color-heading, #0f172a); }

/* Social, community, sharing, conversion, and funnel patterns: dependency-free and token-backed. */
.hds-social-proof, .hds-comment-thread, .hds-social-links { display: grid; gap: var(--hds-grid-gap, 1.5rem); }
.hds-social-proof { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.hds-comment-thread { position: relative; }
.hds-comment-thread::before { content: ""; position: absolute; inset-block: .5rem; left: 1.25rem; width: 1px; background: var(--hds-color-border, #d7dde8); }
.hds-social-proof-card, .hds-review-card, .hds-comment-card, .hds-reply-card, .hds-community-card, .hds-member-card, .hds-profile-card, .hds-lead-magnet-card, .hds-webinar-card, .hds-event-card, .hds-comparison-card, .hds-guarantee-card, .hds-risk-reversal { min-width: 0; display: grid; gap: var(--hds-space-3, .75rem); align-content: start; border: 1px solid var(--hds-color-border, #d7dde8); border-radius: var(--hds-radius-card, 1rem); background: var(--hds-color-surface, #fff); box-shadow: var(--hds-shadow-panel, 0 .5rem 1.5rem rgb(15 23 42 / .08)); padding: clamp(1rem, 3vw, 1.5rem); }
.hds-social-proof-card, .hds-comparison-card { border-top: .3rem solid var(--hds-color-primary, #2457d6); }
.hds-review-card :where(blockquote) { margin: 0; color: var(--hds-color-heading, #0f172a); font-size: var(--hds-font-size-lg, 1.125rem); font-weight: 750; }
.hds-review-stars { display: inline-flex; width: max-content; align-items: center; gap: .1rem; color: var(--hds-color-warning, #b45309); font-weight: 900; letter-spacing: .08em; }
.hds-review-author, .hds-author-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hds-space-3, .75rem); color: var(--hds-color-text-muted, #64748b); font-size: var(--hds-font-size-sm, .875rem); font-weight: 800; }
.hds-comment-card, .hds-reply-card { position: relative; margin-left: calc(var(--hds-space-8, 2rem) + .5rem); }
.hds-comment-card { margin-left: 0; }
.hds-reply-card { background: var(--hds-color-surface-muted, #f1f5f9); }
.hds-avatar { width: var(--hds-avatar-size, 2.75rem); height: var(--hds-avatar-size, 2.75rem); flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden; border: 2px solid var(--hds-color-surface, #fff); border-radius: var(--hds-radius-pill, 999rem); background: linear-gradient(135deg, var(--hds-color-primary, #2457d6), var(--hds-color-accent, #0ea5e9)); color: var(--hds-color-primary-contrast, #fff); font-size: var(--hds-font-size-sm, .875rem); font-weight: 900; text-transform: uppercase; box-shadow: var(--hds-shadow-small, 0 .25rem .75rem rgb(15 23 42 / .07)); }
.hds-avatar :where(img, picture, svg) { width: 100%; height: 100%; object-fit: cover; }
.hds-avatar-group { display: flex; align-items: center; padding-left: .45rem; }
.hds-avatar-group .hds-avatar { margin-left: -.45rem; }
.hds-community-card, .hds-member-card, .hds-profile-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.hds-community-card > :not(.hds-avatar), .hds-member-card > :not(.hds-avatar), .hds-profile-card > :not(.hds-avatar) { min-width: 0; }
.hds-profile-card { align-items: center; }
.hds-profile-card .hds-avatar { --hds-avatar-size: 4rem; }
.hds-share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hds-space-2, .5rem); border: 1px solid var(--hds-color-border, #d7dde8); border-radius: var(--hds-radius-card, 1rem); background: var(--hds-color-surface, #fff); padding: var(--hds-space-3, .75rem); }
.hds-share-button, .hds-social-link { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--hds-space-2, .5rem); border: 1px solid var(--hds-color-border, #d7dde8); border-radius: var(--hds-radius-pill, 999rem); background: var(--hds-color-surface, #fff); color: var(--hds-color-text, #162033); padding: .45rem .8rem; font-size: var(--hds-font-size-sm, .875rem); font-weight: 850; text-decoration: none; }
.hds-share-button:hover, .hds-share-button:focus-visible, .hds-social-link:hover, .hds-social-link:focus-visible { border-color: var(--hds-color-primary, #2457d6); color: var(--hds-color-primary, #2457d6); text-decoration: none; }
.hds-social-links { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.hds-lead-magnet-card { grid-template-columns: minmax(0, 1fr) minmax(min(20rem, 100%), .8fr); align-items: center; }
.hds-optin-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hds-space-3, .75rem); align-items: end; }
.hds-optin-form :where(.hds-form-field) { margin: 0; }
.hds-webinar-card, .hds-event-card { border-left: .35rem solid var(--hds-color-accent, #0ea5e9); }
.hds-countdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr)); gap: var(--hds-space-2, .5rem); }
.hds-countdown > * { display: grid; place-items: center; gap: .15rem; min-height: 4.5rem; border: 1px solid var(--hds-color-border, #d7dde8); border-radius: var(--hds-radius-medium, .75rem); background: var(--hds-color-surface-muted, #f1f5f9); color: var(--hds-color-heading, #0f172a); font-weight: 900; }
.hds-countdown small { color: var(--hds-color-text-muted, #64748b); font-size: var(--hds-font-size-xs, .75rem); font-weight: 800; text-transform: uppercase; letter-spacing: var(--hds-letter-spacing-wide, .08em); }
.hds-urgency-note { display: flex; align-items: flex-start; gap: var(--hds-space-2, .5rem); border: 1px solid color-mix(in srgb, var(--hds-color-warning, #b45309) 32%, var(--hds-color-border, #d7dde8)); border-radius: var(--hds-radius-medium, .75rem); background: var(--hds-color-warning-soft, #fef3c7); color: var(--hds-color-heading, #0f172a); padding: var(--hds-space-3, .75rem) var(--hds-space-4, 1rem); font-weight: 800; }
.hds-step-list, .hds-process-timeline { display: grid; gap: var(--hds-space-4, 1rem); margin: 0; padding: 0; list-style: none; counter-reset: hds-step; }
.hds-step-list > li, .hds-process-timeline > li {
  counter-increment: hds-step;
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "marker title"
    "marker body";
  column-gap: var(--hds-space-4, 1rem);
  row-gap: var(--hds-space-3, .75rem);
  align-items: start;
  border: 1px solid var(--hds-color-border, #d7dde8);
  border-radius: var(--hds-radius-card, 1rem);
  background: var(--hds-color-surface, #fff);
  padding: clamp(1.25rem, 4vw, 1.75rem);
}
.hds-step-list > li::before, .hds-process-timeline > li::before {
  content: counter(hds-step);
  grid-area: marker;
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--hds-radius-pill, 999rem);
  background: var(--hds-color-primary, #2457d6);
  color: var(--hds-color-primary-contrast, #fff);
  box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--hds-color-primary, #2457d6) 24%, transparent);
  font-weight: 900;
  line-height: 1;
}
.hds-step-list > li > :first-child, .hds-process-timeline > li > :first-child { grid-area: title; margin-block: 0; align-self: center; }
.hds-step-list > li > :not(:first-child), .hds-process-timeline > li > :not(:first-child) { grid-column: 2; margin-block: 0; }
.hds-process-timeline > li:not(:last-child)::after { content: ""; position: absolute; left: calc(clamp(1.25rem, 4vw, 1.75rem) + 1.375rem); top: calc(clamp(1.25rem, 4vw, 1.75rem) + 2.75rem); bottom: calc(-1 * var(--hds-space-4, 1rem)); width: 2px; background: var(--hds-color-border, #d7dde8); }
.hds-comparison-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--hds-radius-card, 1rem); background: var(--hds-color-surface, #fff); box-shadow: var(--hds-shadow-small, 0 .25rem .75rem rgb(15 23 42 / .07)); }
.hds-comparison-table :where(th, td) { text-align: left; border-bottom: 1px solid var(--hds-color-border, #d7dde8); padding: .85rem 1rem; vertical-align: top; }
.hds-comparison-table :where(th) { background: var(--hds-color-surface-muted, #f1f5f9); color: var(--hds-color-heading, #0f172a); font-weight: 900; }
.hds-comparison-table :where(tbody tr:last-child td) { border-bottom: 0; }
.hds-guarantee-card { border-color: color-mix(in srgb, var(--hds-color-success, #15803d) 38%, var(--hds-color-border, #d7dde8)); background: color-mix(in srgb, var(--hds-color-success-soft, #dcfce7) 38%, var(--hds-color-surface, #fff)); }
.hds-risk-reversal { border-style: dashed; background: color-mix(in srgb, var(--hds-color-primary-soft, #e8efff) 42%, var(--hds-color-surface, #fff)); }

/* Marketing bundle responsive rules. Core handles global navigation, core layout, and utilities. */
@media (max-width: 760px) {
  .hds-landing-hero--split,
  .hds-problem-solution,
  .hds-before-after,
  .hds-lead-magnet-card,
  .hds-optin-form,
  .hds-community-card,
  .hds-member-card,
  .hds-profile-card { grid-template-columns: 1fr; }

  .hds-comment-thread::before { display: none; }
  .hds-comment-card,
  .hds-reply-card { margin-left: 0; }
}

@media (max-width: 420px) {
  .hds-step-list > li, .hds-process-timeline > li {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marker"
      "title"
      "body";
    row-gap: var(--hds-space-3, .75rem);
  }
  .hds-step-list > li::before, .hds-process-timeline > li::before { width: 2.5rem; height: 2.5rem; }
  .hds-step-list > li > :not(:first-child), .hds-process-timeline > li > :not(:first-child) { grid-column: 1; }
  .hds-process-timeline > li:not(:last-child)::after { left: calc(clamp(1.25rem, 4vw, 1.75rem) + 1.25rem); top: calc(clamp(1.25rem, 4vw, 1.75rem) + 2.5rem); }
}

/* Phase 2 marketing icon composition additions. */
.hds-benefit-card > .hds-icon:first-child,
.hds-feature-card > .hds-icon:first-child,
.hds-pricing-card > .hds-icon:first-child { color: var(--hds-color-primary, #2457d6); }
.hds-pricing-feature-list li:has(.hds-icon)::before { content: none; }
.hds-pricing-feature-list .hds-icon { color: var(--hds-color-success, #15803d); margin-top: .1rem; }
.hds-cta-panel .hds-button:has(.hds-icon) { display: inline-flex; align-items: center; gap: var(--hds-space-2, .5rem); }