/* AKTER WEB DESIGN STANDARD v1.1
   Shared type roles; layout, content, navigation and the existing palette stay in
   their page stylesheets. Desktop and mobile values are intentionally separate. */
:root {
  --akter-title: var(--ink);
  --akter-secondary: var(--muted);
  --akter-accent: var(--blue-dark);
}

@media (min-width: 901px) {
  :root {
    --muted: #4b6372; /* Preserves the established desktop contrast. */
    --type-eyebrow: 15px;
    --type-page-h1: 72px;
    --type-article-h1: 66px;
    --type-h2: 38px;
    --type-h3: 25px;
    --type-lead: 23px;
    --type-body: 19px;
    --type-card-title: 25px;
    --type-card-body: 18px;
    --type-card-cta: 17px;
    --type-button: 17px;
  }

  body { font-size: var(--type-body); font-weight: 400; line-height: 1.65; }
  .site-header, .rules-header { padding-top: 14px; padding-bottom: 14px; }
  main .eyebrow, .rules-page .eyebrow {
    font-size: var(--type-eyebrow);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .hero h1 { font-size: var(--type-page-h1); line-height: 1.07; font-weight: 700; }
  .blog-hero h1 { max-width: 1050px; font-size: var(--type-page-h1); line-height: 1.07; font-weight: 700; }
  .training-hero h1, .promo-hero h1, .rules-hero h1 {
    font-size: var(--type-page-h1); line-height: 1.07; font-weight: 700;
  }
  .article-hero h1 {
    max-width: 1000px; font-size: var(--type-article-h1);
    line-height: 1.1; font-weight: 700;
  }
  .lead, .promo-lead, .rules-hero > p:last-child {
    font-size: var(--type-lead); font-weight: 400; line-height: 1.57;
  }
  .hero .lead, .article-hero .lead, .blog-hero .lead,
  .training-hero .lead { margin-top: 30px; }
  .promo-lead { font-weight: 400; }

  .section-heading h2, .life-copy h2, .partner-box h2,
  .why-now h2, .final-cta h2, .rules-content h2,
  .article-body h2, .training-content h2 {
    font-size: var(--type-h2); font-weight: 700; line-height: 1.18;
  }
  .article-body h2, .training-content h2 { margin-bottom: 24px; }
  .article-body h3, .training-content h3, .role-pair h3,
  .partner-cards h3, .benefit-grid h3, .promo-steps h3,
  .practice-card h3, .choice-grid h3 {
    font-size: var(--type-h3); font-weight: 700; line-height: 1.25;
  }
  .phase-list h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
  .section-heading > p:last-child, .split > p, .life-copy > p,
  .partner-box > div > p, .contact-copy > p:not(.eyebrow),
  .promo-intro, .practice-card p, .choice-grid p,
  .article-body p, .article-body li,
  .training-content > section > p, .training-topics li,
  .rules-content p, .rules-content dd {
    font-size: var(--type-body); font-weight: 400; line-height: 1.66;
  }
  .article-body { max-width: 820px; }
  .article-hero { padding-bottom: 48px; }
  .article-body p { margin-top: 0; margin-bottom: 21px; }
  .article-body li { margin: 10px 0; }
  /* One step more readable in long-form copy; the shared body scale stays put. */
  .article-body p, .article-body li,
  .training-content > section > p, .training-topics li,
  .rules-content p, .rules-content dd { font-size: 20px; }
  .training-content h2, .rules-content h2 { margin-top: 52px; margin-bottom: 26px; }
  .article-body p strong, .article-body li strong,
  .training-content p strong, .training-content li strong,
  .rules-content p strong, .rules-content li strong {
    font-weight: 600;
  }

  .blog-grid { gap: 26px; }
  .cards, .benefit-grid { gap: 24px; }
  .blog-grid small, .posts small, .partner-cards small,
  .role-badge, .promo-steps b, .choice-label, .card-number {
    font-size: 14px; font-weight: 700; line-height: 1.2;
    letter-spacing: .13em;
  }
  .blog-grid h2, .cards h3, .benefit-grid h3,
  .posts h3, .news-card h2, .guide-card h3 {
    font-size: var(--type-card-title); font-weight: 700; line-height: 1.26;
  }
  .blog-grid p, .cards p, .benefit-grid p, .posts p,
  .role-pair article > p:last-child, .partner-cards p,
  .promo-steps p, .guide-card p, .news-card p:last-child,
  .feature-details-cta p:last-child {
    font-size: var(--type-card-body); font-weight: 400; line-height: 1.6;
  }
  .blog-grid p { color: #5d7281; }
  .blog-grid a, .posts a, .card-link, .news-card a {
    font-size: var(--type-card-cta); font-weight: 700;
  }
  .phase-list p, .process-register p { font-size: 16px; font-weight: 400; line-height: 1.55; }
  .group-label { color: #526d7c; font-size: 14px; }
  .phase-list article > span, .process-register > span { font-size: 14px; }
  .process-register p { color: #d9e9ef; }

  .button { min-height: 54px; font-size: var(--type-button); font-weight: 700; }
  .contact label { font-size: 16px; font-weight: 600; }
  .contact input, .contact select, .contact textarea {
    font-size: 17px; font-weight: 400;
  }
  .contact input::placeholder, .contact textarea::placeholder {
    color: #8799a2; font-weight: 400;
  }
  .form-note { font-size: 14px; }
  .current-card { padding-top: 37px; padding-bottom: 37px; }
  .rules-top-nav { display: flex; align-items: center; gap: 27px; font-size: .88rem; font-weight: 600; }
  .rules-top-nav .nav-cta { border: 1px solid var(--ink); border-radius: 8px; padding: 10px 18px; }
  .rules-header .rules-back { display: none; }

  /* The noindex instruction pages share the same roles without changing their UI. */
  .home-page .home-intro h1, .intro h1 { font-size: var(--type-article-h1); font-weight: 700; line-height: 1.1; }
  .home-page .home-intro > p:last-child, .intro .lead { font-size: var(--type-lead); font-weight: 400; line-height: 1.57; }
  .guide p, .guide li, .home-page .guide-card p { font-size: var(--type-body); font-weight: 400; line-height: 1.66; }
  .guide p strong, .guide li strong { font-weight: 600; }
  .guide h2, .home-page .section-heading h2 { font-size: var(--type-h2); line-height: 1.18; }
  .guide h3, .home-page .start-here h2 { font-size: var(--type-h3); line-height: 1.25; }
  .home-page .guide-card h3 { font-size: var(--type-card-title); }
  .home-page .guide-card { margin: 0; }
  .home-page .card-link { font-size: var(--type-card-cta); }
  .home-page .eyebrow, .intro .eyebrow, .guide .num { font-size: var(--type-eyebrow); font-weight: 700; letter-spacing: .14em; line-height: 1.2; }
}

@media (max-width: 900px) {
  :root {
    --type-eyebrow: 13px;
    --type-page-h1: 42px;
    --type-article-h1: 40px;
    --type-h2: 30px;
    --type-h3: 23px;
    --type-lead: 20px;
    --type-body: 18px;
    --type-card-title: 23px;
    --type-card-body: 17px;
    --type-card-cta: 17px;
    --type-button: 18px;
  }

  body { font-size: var(--type-body); font-weight: 400; line-height: 1.7; }
  main .eyebrow, .rules-page .eyebrow {
    font-size: var(--type-eyebrow); font-weight: 700;
    line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  }
  .hero h1, .blog-hero h1, .training-hero h1,
  .promo-hero h1, .rules-hero h1 {
    font-size: var(--type-page-h1); line-height: 1.08; font-weight: 700;
  }
  .article-hero h1 { font-size: var(--type-article-h1); line-height: 1.1; font-weight: 700; }
  .lead, .promo-lead, .rules-hero > p:last-child {
    font-size: var(--type-lead); font-weight: 400; line-height: 1.6;
  }
  .hero .lead, .article-hero .lead, .blog-hero .lead,
  .training-hero .lead { margin-top: 26px; }
  .promo-lead { font-weight: 400; }

  .section-heading h2, .life-copy h2, .partner-box h2,
  .contact h2, .why-now h2, .final-cta h2, .rules-content h2,
  .article-body h2, .training-content h2 {
    font-size: var(--type-h2); font-weight: 700; line-height: 1.18;
  }
  .article-body h2, .training-content h2 { margin-bottom: 20px; }
  .article-body h3, .training-content h3, .role-pair h3,
  .partner-cards h3, .benefit-grid h3, .promo-steps h3,
  .practice-card h3, .choice-grid h3 {
    font-size: var(--type-h3); font-weight: 700; line-height: 1.25;
  }
  .phase-list h3 { font-size: 20px; line-height: 1.3; }
  .section-heading > p:last-child, .split > p, .life-copy > p,
  .partner-box > div > p, .contact-copy > p:not(.eyebrow),
  .promo-intro, .practice-card p, .choice-grid p,
  .article-body p, .article-body li,
  .training-content > section > p, .training-topics li,
  .rules-content p, .rules-content dd {
    font-size: var(--type-body); font-weight: 400; line-height: 1.7;
  }
  .article-body p { margin-top: 0; margin-bottom: 18px; }
  .article-body li { margin: 9px 0; }
  .article-body h2, .training-content h2, .rules-content h2 {
    margin-top: 44px; margin-bottom: 20px;
  }
  .article-body p strong, .article-body li strong,
  .training-content p strong, .training-content li strong,
  .rules-content p strong, .rules-content li strong {
    font-weight: 600;
  }

  .blog-grid, .cards, .benefit-grid { gap: 22px; }
  .blog-grid small, .posts small, .partner-cards small,
  .role-badge, .promo-steps b, .choice-label, .card-number {
    font-size: 13px; font-weight: 700; line-height: 1.2;
    letter-spacing: .13em;
  }
  .blog-grid h2, .cards h3, .benefit-grid h3,
  .posts h3, .news-card h2, .guide-card h3 {
    font-size: var(--type-card-title); font-weight: 700; line-height: 1.28;
  }
  .blog-grid p, .cards p, .benefit-grid p, .posts p,
  .role-pair article > p:last-child, .partner-cards p,
  .promo-steps p, .guide-card p, .news-card p:last-child,
  .feature-details-cta p:last-child {
    font-size: var(--type-card-body); font-weight: 400; line-height: 1.6;
  }
  .blog-grid a, .posts a, .card-link, .news-card a {
    font-size: var(--type-card-cta); font-weight: 700;
  }
  .phase-list p, .process-register p { font-size: 16px; font-weight: 400; line-height: 1.55; }

  .button { min-height: 56px; font-size: var(--type-button); font-weight: 700; }
  .contact label { font-size: 16px; font-weight: 600; }
  .contact input, .contact select, .contact textarea { font-size: 17px; font-weight: 400; }
  .contact input::placeholder, .contact textarea::placeholder { color: #8799a2; font-weight: 400; }
  .form-note { font-size: 14px; }
  .rules-top-nav { display: none; }

  .home-page .home-intro h1, .intro h1 { font-size: var(--type-article-h1); font-weight: 700; line-height: 1.1; }
  .home-page .home-intro > p:last-child, .intro .lead { font-size: var(--type-lead); font-weight: 400; line-height: 1.6; }
  .guide p, .guide li, .home-page .guide-card p { font-size: var(--type-body); font-weight: 400; line-height: 1.7; }
  .guide p strong, .guide li strong { font-weight: 600; }
  .guide h2, .home-page .section-heading h2 { font-size: var(--type-h2); line-height: 1.18; }
  .guide h3, .home-page .start-here h2 { font-size: var(--type-h3); line-height: 1.25; }
  .home-page .guide-card h3 { font-size: var(--type-card-title); }
  .home-page .eyebrow, .intro .eyebrow, .guide .num { font-size: var(--type-eyebrow); font-weight: 700; letter-spacing: .14em; line-height: 1.2; }
}