/* Approved direction A: Inter, white, navy, and the existing PAI blue.
   Editorial styling stays separate from the timed product illustration. */
:root {
  --ink: #182039;
  --muted: #536178;
  --blue: #225cf1;
  --navy: #151d35;
  --paper: #f4f7fc;
  --line: #dce3ef;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
}

@media screen {
  body { background: #fff; }
  button, input, select, textarea { font-family: inherit; }
  h1, h2, h3, h4 { letter-spacing: -.03em; }
  .eyebrow { font-weight: 650; letter-spacing: .085em; }
  .nav nav { font-size: 15px; font-weight: 550; gap: 24px; }
  .nav nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .button { border-radius: 10px; font-size: 16px; font-weight: 600; }
  .button.small { font-size: 14px; min-height: 46px; }
  .quiet-link { font-size: 16px; min-height: 44px; line-height: 1.5; }

  .hero { padding-block: 72px 40px; }
  .hero h1 {
    font-size: clamp(40px, 5.2vw, 70px);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  .hero h1 span { color: var(--blue); }
  .hero .eyebrow { font-size: 13px; }
  .hero .lead { max-width: 730px; font-size: 20px; line-height: 1.65; margin-top: 26px; }
  .hero-actions { gap: 16px 28px; margin-top: 30px; }
  .hero-actions .button { font-size: 16px; min-height: 56px; padding-inline: 25px; }
  .hero-actions .quiet-link { font-size: 16px; }
  .hero-evidence { font-size: 15px; gap: 14px; margin-top: 26px; }
  .hero-evidence .evidence-number { font-size: 30px; letter-spacing: -.035em; }

  .section-intro { gap: 56px; margin-bottom: 44px; }
  .section-intro h2, .service-intro h2, .faq-section h2 {
    font-size: clamp(32px, 3.3vw, 44px);
    line-height: 1.17;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .section-intro > p, .customer-section .section-intro > p {
    max-width: 440px;
    font-size: 18px;
    line-height: 1.7;
  }
  .audience-section { padding-block: 60px 88px; }
  .audience-section > h2 { letter-spacing: -.035em; line-height: 1.2; }
  .audience-group h3 { font-weight: 650; letter-spacing: -.025em; }
  .audience-benefits li { padding-block: 24px; gap: 16px; }
  .audience-benefits h4 { font-size: 19px; line-height: 1.45; }
  .audience-benefits p { font-size: 17px; line-height: 1.7; margin-top: 9px; }

  .customer-section { background: var(--paper); padding-block: 88px; }
  .customer-grid { gap: 22px; }
  .customer-case { border-color: var(--line); border-radius: 16px; padding: 30px 26px 24px; }
  .customer-section .label { color: var(--muted); font-size: 12px; letter-spacing: .07em; }
  .customer-case > h3 { line-height: 1.22; letter-spacing: -.03em; }
  .customer-case h3.case-big-number { letter-spacing: -.04em; }
  .customer-case .case-explanation { font-size: 16px; line-height: 1.7; }
  .customer-metrics { gap: 16px; }
  .customer-metrics strong { letter-spacing: -.025em; }
  .customer-metrics span { font-size: 14px; line-height: 1.5; color: var(--muted); }
  .case-extra { font-size: 15px; line-height: 1.5; color: var(--blue); }
  .customer-case blockquote { font-size: 20px; line-height: 1.55; letter-spacing: -.015em; }
  .customer-case .case-link { font-size: 14px; line-height: 1.5; min-height: 44px; color: var(--blue); }
  .case-source { font-size: 14px; color: var(--muted); margin-top: 24px; }

  .service-section { padding-block: 96px; }
  .service-intro { gap: 64px; }
  .service-intro .lead { font-size: 18px; line-height: 1.75; max-width: 550px; }
  .service-section .service-promise p { font-size: 16px; line-height: 1.7; }
  .people figcaption { font-size: 15px; margin-top: 12px; }
  .people > p { font-size: 15px; line-height: 1.65; max-width: none; }
  .setup-path { gap: 36px; }
  .setup-path h3 { font-size: 20px; line-height: 1.35; }
  .setup-path li > span { font-size: 14px; }
  .service-section .setup-path p { font-size: 16px; line-height: 1.75; }

  .channels-compact { background: var(--paper); padding-block: 88px; }
  .channel-benefits h3 { font-size: 20px; line-height: 1.4; letter-spacing: -.025em; }
  .channel-benefits p { font-size: 16px; line-height: 1.7; }
  .channel-benefits p br { display: none; }
  .channel-platforms { font-size: 14px; color: var(--muted); margin-top: 8px; }
  .channel-scope { gap: 12px 24px; margin-block: 28px 36px; }
  .channel-scope p { font-size: 15px; }
  .channel-scope a { font-size: 15px; }

  .workday-heading h2 { font-size: 23px; line-height: 1.35; letter-spacing: -.025em; }
  .workday-heading .eyebrow { font-size: 12px; }
  .workday-controls button { font-size: 14px; min-height: 44px; }
  .workday-caption > p { font-size: 17px; line-height: 1.5; }
  .hero-understage p, .hero-understage a { font-size: 14px; line-height: 1.6; }
  .hero-understage a { min-height: 44px; display: inline-flex; align-items: center; }
  .try-demo > summary small { font-size: 14px; color: var(--muted); }
  .try-demo > summary strong { font-size: 21px; line-height: 1.4; }
  .try-demo-action { font-size: 14px; }
  .lab-incoming > p, .lab-incoming fieldset label { font-size: 16px; }
  .lab-incoming legend { font-size: 15px; }
  .reply-details > summary { font-size: 15px; min-height: 44px; }
  .reply-recipient { font-size: 14px; color: var(--muted); }
  #replyText { font-size: 16px; line-height: 1.75; min-height: 245px; }
  .task-bundle strong { font-size: 15px; }
  .task-bundle small { font-size: 13px; color: var(--muted); }
  .lab-action .button { font-size: 15px; min-height: 50px; }
  .text-button { font-size: 15px; min-height: 44px; }
  .demo-status, .lab-bottom { font-size: 14px; color: var(--muted); }

  .start-guarantee { border-radius: 18px; }
  .offer-label, .start-guarantee .eyebrow { font-size: 12px; }
  .start-guarantee h2 { font-size: clamp(32px, 3.2vw, 42px); line-height: 1.2; }
  .guarantee-copy > p { font-size: 17px; line-height: 1.75; max-width: 450px; color: #d1dcf0; }
  .guarantee-copy .button { font-size: 15px; min-height: 52px; }
  .guarantee-result li { font-size: 16px; line-height: 1.65; color: #d1dcf0; }
  .guarantee-result li strong { font-size: 16px; }
  .guarantee-result .guarantee-note, .guarantee-result details p { font-size: 15px; line-height: 1.75; color: #bccce5; }
  .guarantee-result summary { font-size: 16px; min-height: 44px; }
  .budget { background: var(--paper); border-color: var(--line); border-radius: 16px; }
  .budget .eyebrow { font-size: 12px; }
  .budget h3 { font-size: 32px; line-height: 1.25; }
  .budget p, .budget dd, .price-orientation p { font-size: 16px; line-height: 1.75; }
  .budget dt { font-size: 17px; }
  .budget dd { color: var(--muted); }
  .budget .quiet-link, .budget summary { font-size: 16px; min-height: 44px; }
  .faq-list summary { font-size: 18px; line-height: 1.5; min-height: 44px; }
  .faq-list p { font-size: 17px; line-height: 1.75; }

  .inquiry-section { background: #edf3ff; padding-block: 88px; }
  .inquiry-heading h2 { line-height: 1.17; letter-spacing: -.035em; }
  .inquiry-heading > p { font-size: 18px; line-height: 1.7; }
  .inquiry-choice-title { letter-spacing: -.025em; }
  .inquiry-choice-copy { font-size: 17px; }
  .inquiry-choice small, .inquiry-hint, .inquiry-field label span, .inquiry-progress,
  .inquiry-note, .inquiry-privacy { font-size: 15px; line-height: 1.65; }
  .inquiry-process, .inquiry-person p, .inquiry-field > label,
  .inquiry-section .inquiry-option { font-size: 16px; }
  .inquiry-person p { line-height: 1.7; }
  .inquiry-draft-text { font-size: 16px; }
  .footer p, .footer nav { font-size: 14px; color: var(--muted); }
  .footer nav a { min-height: 44px; }

  .legal-back { font-size: 15px; }
  .legal-date, .legal-toc > p { font-size: 14px; }
  .legal-toc a, .legal-facts dt { font-size: 16px; }
  .legal-document { font-size: 17px; line-height: 1.8; }

  @media (max-width: 1080px) {
    .nav nav { font-size: 14px; gap: 17px; }
    .section-intro, .service-intro { gap: 40px; }
    .customer-case { padding-inline: 24px; }
  }
  @media (max-width: 900px) {
    .service-intro { grid-template-columns: 1fr; }
    .service-intro .people { max-width: 600px; }
    .service-intro .lead, .service-section .service-promise { max-width: 680px; }
    .setup-path { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
    .setup-path li { gap: 18px; }
    .setup-path p { max-width: 680px; }
    .section-intro { grid-template-columns: 1fr; gap: 22px; }
    .section-intro > p, .customer-section .section-intro > p { max-width: 650px; }
  }
  @media (max-width: 680px) {
    .hero { padding-block: 48px 32px; }
    .hero h1 { font-size: clamp(36px, 8.3vw, 52px); line-height: 1.14; letter-spacing: -.035em; }
    .hero .eyebrow { font-size: 12px; }
    .hero .lead { font-size: 18px; line-height: 1.7; }
    .hero-actions { gap: 10px 20px; }
    .hero-actions .button { font-size: 16px; }
    .hero-evidence { font-size: 14px; gap: 12px; }
    .hero-evidence .evidence-number { font-size: 28px; }
    .button.small { font-size: 13px; gap: 8px; padding-inline: 12px; }
    .section-intro h2, .service-intro h2, .faq-section h2, .audience-section > h2 { font-size: 32px; }
    .section-intro { margin-bottom: 32px; }
    .section-intro > p, .customer-section .section-intro > p { font-size: 17px; }
    .audience-section, .customer-section, .service-section, .channels-compact, .inquiry-section { padding-block: 60px; }
    .audience-benefits h4 { font-size: 18px; }
    .audience-benefits li { gap: 12px; padding-block: 21px; }
    .customer-case { padding: 27px 24px; }
    .channel-benefits { gap: 26px 22px; }
    .channel-benefits h3 { font-size: 18px; }
    .channel-platforms { font-size: 13px; }
    .workday-heading h2 { font-size: 19px; }
    .workday-heading { gap: 14px; }
    .workday-controls button { min-width: 84px; font-size: 13px; }
    .workday-caption > p { font-size: 16px; }
    .try-demo > summary { padding: 23px 20px; }
    .try-demo > summary strong { font-size: 19px; }
    .try-demo-action { font-size: 0; }
    .budget { padding: 27px 24px; }
    .budget h3 { font-size: 29px; }
    .faq-list summary { font-size: 17px; }
    .inquiry-panel, .inquiry-choice { padding: 25px 22px; }
    .inquiry-choice-copy, .inquiry-heading > p { font-size: 17px; }
    .legal-back { font-size: 14px; }
    .legal-hero > p { font-size: 17px; }
  }
  @media (max-width: 380px) {
    .channel-benefits { grid-template-columns: 1fr; }
    .hero-actions .button { width: 100%; }
    .nav .brand { gap: 6px; }
    .nav .button.small { gap: 5px; }
    .workday-heading { align-items: flex-start; flex-wrap: wrap; }
    .workday-controls { margin-left: auto; }
    .inquiry-person { flex-direction: column; }
  }
}

/* Hero proof: a readable result, with its customer context, without a jump link. */
@media screen {
  .hero .hero-evidence-static {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin: 28px auto 0;
    text-align: center;
  }
  .hero-evidence-static .evidence-result {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    line-height: 1.15;
  }
  .hero .hero-evidence-static .evidence-number {
    color: var(--blue);
    font-size: clamp(36px, 4.2vw, 48px);
    font-weight: 700;
    letter-spacing: -.045em;
    white-space: nowrap;
  }
  .hero-evidence-static .evidence-benefit {
    font-size: clamp(22px, 2.7vw, 30px);
    font-weight: 600;
    letter-spacing: -.025em;
  }
  .hero-evidence-static .evidence-context {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
  }
  @media (max-width: 680px) {
    .hero .hero-evidence-static { align-items: flex-start; margin: 25px 0 0; text-align: left; }
    .hero-evidence-static .evidence-result { justify-content: flex-start; gap: 4px 10px; }
    .hero-evidence-static .evidence-context { font-size: 14px; }
  }
}