/*
 * CraftControl clean marketing layout
 * Global presentation layer shared by the homepage, seeded feature pages,
 * campaign pages, case studies and legal pages.
 */

:root {
  --cc-content: 76rem;
  --cc-copy: 46rem;
  --cc-section-space: clamp(4.5rem, 7vw, 7rem);
  --cc-radius: 0.65rem;
}

body {
  line-height: 1.55;
}

.cc-page h1,
.cc-page h2,
.cc-page h3,
.cc-feature-page h1,
.cc-feature-page h2,
.cc-feature-page h3,
.cc-legal-page h1,
.cc-legal-page h2 {
  letter-spacing: -0.025em;
}

.cc-header {
  min-height: 4.25rem;
  padding-top: 0.72rem;
  padding-bottom: 0.72rem;
}

.cc-brand {
  gap: 0.7rem;
  font-size: 1.14rem;
}

.cc-brand-mark {
  width: 1.7rem;
  height: 1.7rem;
}

.cc-header-action,
.cc-primary,
.cc-secondary,
.cc-feature-button,
.cc-feature-button-secondary,
.cc-contact-button,
.cc-price-card a {
  min-height: 3rem;
  border-radius: 0.5rem;
}

/* Homepage */
.cc-hero {
  min-height: calc(76vh - 4.25rem);
  margin-top: 4.25rem;
}

.cc-hero-content {
  width: min(54rem, 100%);
  padding-top: clamp(7rem, 11vw, 10rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

.cc-hero h1 {
  max-width: 52rem;
  font-size: clamp(3.4rem, 7.2vw, 6.5rem);
  line-height: 0.94;
  font-weight: 820;
}

.cc-hero p {
  max-width: 44rem;
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
  line-height: 1.65;
}

.cc-section,
.cc-positioning,
.cc-outcomes,
.cc-product-story,
.cc-image-strip,
.cc-contracts,
.cc-proof,
.cc-audiences,
.cc-pricing,
.cc-faq,
.cc-contact,
.cc-module-section {
  padding-top: var(--cc-section-space);
  padding-bottom: var(--cc-section-space);
}

.cc-heading h2,
.cc-positioning h2,
.cc-outcomes h2,
.cc-product-story h2,
.cc-contracts h2,
.cc-proof h2,
.cc-audiences h2,
.cc-pricing h2,
.cc-faq h2,
.cc-contact h2,
.cc-module-heading h2 {
  max-width: 52rem;
  font-size: clamp(2.25rem, 4vw, 4.15rem);
  line-height: 1.02;
  font-weight: 780;
}

.cc-mode-card,
.cc-audience-card,
.cc-faq-list article,
.cc-price-card,
.cc-product-shot,
.cc-contract-shot,
.cc-proof-shot,
.cc-image-strip article,
.cc-module-grid,
.cc-module-grid-large {
  border-radius: var(--cc-radius);
  box-shadow: none;
}

.cc-mode-card,
.cc-audience-card,
.cc-price-card,
.cc-faq-list article {
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.cc-module-card,
.cc-module-card:nth-child(even) {
  min-height: 16rem;
}

/* Product story: balance copy and product proof before the full-width flow. */
.cc-product-story {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(32rem, 1.28fr);
  column-gap: clamp(2.5rem, 5vw, 5rem);
  row-gap: 1.5rem;
}

.cc-product-story .cc-heading {
  grid-column: 1;
  grid-row: 1;
}

.cc-product-story .cc-product-visual {
  display: contents;
}

.cc-product-story .cc-product-shot {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.cc-product-story .cc-mini-dashboard {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: 1fr;
  align-self: end;
}

.cc-product-story .cc-mini-dashboard article {
  min-height: 5.25rem;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.cc-product-story .cc-mini-dashboard strong {
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
}

.cc-product-story .cc-flow {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: clamp(1rem, 2vw, 2rem);
}

/* Balance asymmetric two-column sections without adding decorative content. */
.cc-positioning,
.cc-contracts,
.cc-audiences,
.cc-faq,
.cc-contact {
  align-items: center;
}

/* Feature and target-group pages */
.cc-feature-hero,
.cc-simple-hero,
.cc-feature-section,
.cc-card-grid,
.cc-feature-cta,
.cc-deep-hero,
.cc-deep-benefit-section,
.cc-deep-modules,
.cc-deep-positioning,
.cc-deep-process {
  padding-top: var(--cc-section-space);
  padding-bottom: var(--cc-section-space);
}

.cc-deep-process {
  padding-left: clamp(1rem, 5vw, 5rem);
  padding-right: clamp(1rem, 5vw, 5rem);
  background: #202a2f;
  color: #fff;
}

.cc-deep-process-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1.2fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  max-width: var(--cc-content);
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

.cc-deep-process-heading .cc-feature-eyebrow {
  grid-column: 1 / -1;
}

.cc-deep-process-heading h2,
.cc-deep-process-heading p,
.cc-process-steps,
.cc-process-steps p {
  margin-top: 0;
  margin-bottom: 0;
}

.cc-deep-process-heading h2 {
  font-size: clamp(2.2rem, 4vw, 4.15rem);
  line-height: 1.02;
}

.cc-deep-process-heading p,
.cc-process-steps p {
  color: rgba(255, 255, 255, 0.7);
}

.cc-process-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: var(--cc-content);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
}

.cc-process-steps li {
  min-height: 14rem;
  padding: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.cc-process-steps li:last-child {
  border-right: 0;
}

.cc-process-steps span {
  display: block;
  margin-bottom: 2.25rem;
  color: #ff5a1f;
  font-size: 0.75rem;
  font-weight: 800;
}

.cc-process-steps strong {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.cc-process-steps p {
  font-size: 0.92rem;
  line-height: 1.55;
}

.cc-feature-hero h1,
.cc-simple-hero h1,
.cc-deep-hero h1 {
  max-width: 58rem;
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  line-height: 1;
  font-weight: 800;
}

.cc-feature-hero p,
.cc-simple-hero p,
.cc-deep-hero p {
  max-width: var(--cc-copy);
  font-size: clamp(1.03rem, 1.45vw, 1.2rem);
  line-height: 1.65;
}

.cc-feature-section h2,
.cc-feature-cta h2,
.cc-deep-benefit-section h2,
.cc-deep-positioning h2 {
  font-size: clamp(2.15rem, 3.8vw, 4rem);
  line-height: 1.03;
  font-weight: 780;
}

.cc-feature-hero figure,
.cc-deep-figure,
.cc-card-grid article,
.cc-feature-benefits li {
  border-radius: var(--cc-radius);
  box-shadow: none;
}

/* Case study */
.cc-case-hero {
  min-height: 72vh;
  padding-top: clamp(7rem, 10vw, 9rem);
  padding-bottom: var(--cc-section-space);
}

.cc-case-hero h1 {
  max-width: 58rem;
  font-size: clamp(3.2rem, 6vw, 6rem);
  line-height: 0.96;
  font-weight: 810;
}

.cc-case-section,
.cc-case-product,
.cc-case-process,
.cc-case-results,
.cc-case-testimonial,
.cc-case-cta {
  padding-top: var(--cc-section-space);
  padding-bottom: var(--cc-section-space);
}

.cc-case-section-heading h2,
.cc-case-cta h2 {
  font-size: clamp(2.2rem, 4vw, 4.15rem);
  line-height: 1.03;
  font-weight: 780;
}

.cc-case-testimonial blockquote > p {
  max-width: 66rem;
  font-size: clamp(1.8rem, 3.4vw, 3.35rem);
  line-height: 1.12;
}

.cc-case-facts,
.cc-case-challenge-grid article,
.cc-case-results-grid article,
.cc-case-screen {
  border-radius: var(--cc-radius);
  box-shadow: none;
}

/* Legal pages */
.cc-legal-header,
.cc-legal-main {
  padding-left: clamp(1rem, 5vw, 5rem);
  padding-right: clamp(1rem, 5vw, 5rem);
}

.cc-legal-intro h1 {
  font-size: clamp(3rem, 5.5vw, 5.4rem);
  line-height: 0.98;
}

.cc-legal-content {
  max-width: 66rem;
}

/* Consistent footer branding */
.cc-footer {
  padding-top: 2.3rem;
  padding-bottom: 2.3rem;
}

@media (max-width: 900px) {
  .cc-feature-hero,
  .cc-deep-hero,
  .cc-case-split {
    grid-template-columns: 1fr;
  }

  .cc-hero {
    min-height: 72vh;
  }

  .cc-product-story {
    grid-template-columns: 1fr;
  }

  .cc-positioning,
  .cc-contracts,
  .cc-audiences,
  .cc-faq,
  .cc-contact {
    align-items: start;
  }

  .cc-product-story .cc-product-visual {
    display: grid;
  }

  .cc-product-story .cc-heading,
  .cc-product-story .cc-product-shot,
  .cc-product-story .cc-mini-dashboard,
  .cc-product-story .cc-flow {
    grid-column: 1;
    grid-row: auto;
  }

  .cc-product-story .cc-mini-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc-product-story .cc-mini-dashboard article {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cc-deep-process-heading {
    grid-template-columns: 1fr;
  }

  .cc-deep-process-heading .cc-feature-eyebrow {
    grid-column: auto;
  }

  .cc-process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --cc-section-space: 3.75rem;
  }

  .cc-hero {
    min-height: auto;
  }

  .cc-hero h1 {
    font-size: clamp(3rem, 13vw, 4.2rem);
  }

  .cc-feature-hero h1,
  .cc-simple-hero h1,
  .cc-deep-hero h1,
  .cc-case-hero h1,
  .cc-legal-intro h1 {
    font-size: clamp(2.45rem, 10.5vw, 3.45rem);
  }

  .cc-product-story .cc-mini-dashboard {
    grid-template-columns: 1fr;
  }

  .cc-process-steps {
    grid-template-columns: 1fr;
  }

  .cc-process-steps li {
    min-height: auto;
    border-right: 0;
  }
}