/* A shared mobile type scale. Desktop rules remain in each page's stylesheet. */
@media(max-width:700px){
  #main h1{font-size:clamp(2.125rem,calc(1.65rem + 2.1vw),2.5rem);line-height:1.13;letter-spacing:-.03em;text-wrap:balance}
  #main h2{font-size:clamp(1.6875rem,calc(1.2875rem + 2vw),2rem);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
  #main h3{font-size:1.125rem;line-height:1.35;letter-spacing:-.012em;font-weight:500;text-wrap:pretty}
  #main .eyebrow{font-size:.75rem;line-height:1.45;letter-spacing:.045em;margin-bottom:18px}
  #main .hero-summary>p:first-child,#main .section-intro,#main .included .section-top .section-intro,
  #main .contact-grid>div>p:first-child,#main .company-fit .section-intro,#main .brief-layout .section-intro,
  #main .case-section-heading>p:last-child,#main .case-delivered>p:not(.eyebrow),#main .hg-heritage-intro>p:last-child{font-size:1.0625rem;line-height:1.55;letter-spacing:-.005em}
  #main .case-lead{font-size:1.375rem;line-height:1.35;letter-spacing:-.015em;margin-top:20px}
  #main .case-summary{font-size:1rem;line-height:1.65;margin-top:20px}
  #main .case-copy .case-large,#main .case-funnel-copy .case-large,#main .about-copy .large,
  #main .custom-difference-grid .large,#main .company-story>div>.story-lead{font-size:1.1875rem;line-height:1.5;letter-spacing:-.01em}
  #main .case-copy p:not(.case-large),#main .case-funnel-copy>p:not(.eyebrow):not(.case-large),
  #main .custom-difference-grid>div>p,#main .about-copy p:not(.large),#main .case-screen-pair figcaption p,
  #main .hg-next-project p:not(.eyebrow){font-size:1rem;line-height:1.65}
  #main .hero-summary{margin-top:24px}
  #main .hero-summary>p:first-child{margin-bottom:24px}
  #main .contact-grid h2{margin-bottom:24px}
  #main .service-summary h2{font-size:.75rem;line-height:1.45;letter-spacing:.045em}
  #main .maintenance-card h2,#main .company-profile-card h2,#main .contact-options h2{font-size:1.25rem;line-height:1.3;letter-spacing:-.015em}
  #main .company-profile-card figcaption>p{font-size:1rem;line-height:1.6}
  #main .service-summary h3,#main .company-services h3,#main .project-info h3,
  #main .service-work-example h3,#main .case-screen-pair h3,#main .hg-story-pair h3{font-size:1.1875rem;line-height:1.35}
  #main .project-brief h3{font-size:1.25rem;line-height:1.35}
  #main .faq-list summary{font-size:1rem;line-height:1.5}
  #main .case-client-context li{font-size:1.0625rem;line-height:1.45}
  #main .case-deliverables dt{font-size:1rem;line-height:1.4;font-weight:500}
  #main .quote-grid blockquote,#main .custom-proof blockquote,#main .launch-quote blockquote,
  #main .company-proof blockquote,#main .service-feedback blockquote,#main .hg-client-quote blockquote{font-size:1.1875rem;line-height:1.5;letter-spacing:-.01em}
  #main .price,#main .choice-price{font-size:1.75rem;line-height:1.2}
  #main .custom-price,#main .launch-price,#main .plan-price{font-size:2.75rem;line-height:1.1;letter-spacing:-.035em}
  #main .hosting-fee,#main .plan-price span,#main .custom-price>span,#main .launch-price span{font-size:.9375rem;line-height:1.5;letter-spacing:0}
  #main .process-grid .number,#main .launch-process .number{font-size:1.75rem;line-height:1.2}
  #main .number,#main .new-service-badge{font-size:.75rem;line-height:1.5}
  #main .button,#main .text-link,#main .case-service-link,#main .project-case-link{font-size:.9375rem;line-height:1.5}
  #main .button{min-height:48px}
  #main .project-brief input,#main .project-brief select,#main .project-brief textarea{font-size:1rem}
  .mobile-nav a{font-size:1rem;line-height:1.5;min-height:44px}
}

/* Stack short project and homepage facts as aligned rows on phones. */
@media(max-width:700px){
  #main .case-facts{display:block;border-top:1px solid var(--line);padding-top:0;margin-top:28px}
  #main .case-facts>div{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
  #main .case-facts dt{font-size:.75rem;line-height:1.5;letter-spacing:.045em;margin:0;color:var(--muted)}
  #main .case-facts dd{font-size:.9375rem;line-height:1.55;margin:0;text-wrap:pretty}
  #main .hero-trust{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-top:0;padding-bottom:0;border-bottom:0}
  #main .hero-trust>span{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.5}
  #main .hero-trust>span:last-child{border-bottom:1px solid var(--line)}
  #main .hero-trust strong{font-size:.9375rem;font-weight:500;line-height:1.5}
  #main .hero-trust .hero-fact-detail{display:block;font-size:.9375rem;line-height:1.5;color:var(--muted);margin:0;flex:none}
}

/* Secondary notes sit below the main copy in the mobile type hierarchy. */
@media(max-width:700px){
  #main .pricing-note,
  #main .fine,
  #main .plan-note,
  #main .hosting-note,
  #main .case-image-caption,
  #main .hg-guide-note,
  #main #launch-preview .device-note{
    font-size:.75rem;
    line-height:1.6;
    font-weight:400;
    letter-spacing:0;
    text-wrap:pretty;
  }
  #main .brief-note{font-size:.8125rem;line-height:1.6}
}