/*
 * Homepage typography contract. Shared by every marketing section.
 * This named important layer owns type over the historical, unlayered component
 * styles, including their old !important rules. Layout stays with each component.
 * Client artwork, screenshots, SVG lettering and the fictional editorial pages
 * inside demonstrations retain their own brand typography.
 */
@layer homepageTypography {
  :root {
    --tt-type-family: Milano, Arial, sans-serif;
    --tt-type-display: 72px;
    --tt-type-heading: 56px;
    --tt-type-subheading: 28px;
    --tt-type-section: 22px;
    --tt-type-body: 18px;
    --tt-type-interface: 16px;
    --tt-type-price: 56px;
  }
  @media(max-width:1000px) {
    :root { --tt-type-display:64px; --tt-type-heading:48px; }
  }
  @media(max-width:600px) {
    :root { --tt-type-display:44px; --tt-type-heading:40px; --tt-type-subheading:24px; --tt-type-section:20px; --tt-type-price:48px; }
  }
  @media(max-width:360px) {
    :root { --tt-type-display:40px; --tt-type-heading:36px; }
  }

  .local-original-hero :is(.hero-title,.fin h2) {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-display)!important;
    font-weight:500!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
  }
  .local-original-hero .fin h2 {
    font-size:var(--tt-type-heading)!important;
    line-height:1.1!important;
    letter-spacing:-.04em!important;
  }
  :is(#work-title,#hub-title,#bespoke-title,#plans-title,#request-title,#faq-title,#after-launch-title) {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-heading)!important;
    font-weight:500!important;
    line-height:1.1!important;
    letter-spacing:-.04em!important;
  }
  #main .section-name {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-section)!important;
    font-weight:500!important;
    line-height:1.3!important;
    letter-spacing:0!important;
  }
  :is(.direction-rationale h3,.client-launch-heading h3,.client-work-card h3,.plan-card h3,#service-title,#fit-title,.hub-price strong,.local-confirmation h3,#project-dialog h2,#plan-dialog h2,#hub-dialog h2,.chat-welcome h2,.chat-contact h2) {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-subheading)!important;
    font-weight:500!important;
    line-height:1.25!important;
    letter-spacing:-.025em!important;
  }
  :is(.local-original-hero .side>p,.story-heading p,.direction-rationale p,.client-work-card>p,.hub-copy>p,.hub-includes,.software-story-heading>p,.software-response>.visual-explanation,.plans-shared-copy,.plan-description,.plan-card ul,.plan-card li,.request-intro>p,.request-assurances,.faq-list summary,.faq-list details>p,.form-field input,.form-field textarea,.local-confirmation>p,.post-launch-services .introduction>p,.post-launch-services .metadata dd,.post-launch-services .technical strong,.post-launch-services .process-footer p,.post-launch-services .chart-insight,.post-launch-services .bar-label,.post-launch-services .metric-pair span,.post-launch-services .chart-unit,#hub .fit-fields strong,#hub .role-view strong,#hub .record-type,.chat-welcome>p,.chat-message,.chat-contact-intro,.chat-composer textarea,.chat-contact input:not([type=checkbox]),.chat-receipt dd) {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-body)!important;
    line-height:1.6!important;
    letter-spacing:0!important;
  }
  :is(.site-header nav a,.header-cta,.button,.text-link,.currency-switch button,.local-original-hero .ctas a,.local-original-hero .hero-motion,.local-live-caption,.local-live-caption span,#ted-live-tools,#ted-live-tools button,.range-disclosure,.visual-study-tabs>button>span,.direction-rationale>span,.client-work-card .project-meta,.service-details summary,.service-details p,.hub-explore,.hub-price>span,.fit-caption,.fit-stages li,.fit-fields span,.role-view p,.role-avatar,.business-controls button,.software-story .possibilities button,.software-story-action>p,.plan-price>span,.plan-package,.plan-demo-link,.commercial-details summary,.commercial-details p,.form-field label,.form-field label>span,.field-note,.optional-details summary,.optional-details summary>span,.style-fieldset legend,.style-options span,.form-privacy,.prototype-form-note,.footer-links,.footer-main>a:last-child,.footer-legal,.post-launch-services .post-launch-tabs button,.post-launch-services .toolbar,.post-launch-services .toolbar>span,.post-launch-services .segmented button,.post-launch-services .metadata dt,.post-launch-services .technical span,.post-launch-services .action-button,.post-launch-services .hosting-service,.post-launch-services .weekly-chart small,.post-launch-services .weekly-chart span,.post-launch-services .sample-note,.signal-motion,.hub-dialog-note,.hub-role-tabs button,.local-checkout-note,.checkout-steps small,.chat-heading strong,.chat-heading small,.chat-suggestion strong,.chat-suggestion small,.chat-welcome-foot,.chat-speaker,.chat-reply,.chat-service-card strong,.chat-service-card small,.chat-service-card a,.chat-demo-note,.chat-launcher,.chat-demo-controls button,.chat-contact label,.chat-attach strong,.chat-attach p,.chat-consent,.chat-contact-submit,.chat-form-note,.chat-receipt>small,.chat-receipt dt,.chat-back) {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-interface)!important;
    line-height:1.5!important;
    letter-spacing:0!important;
  }
  :is(.plan-price strong,.selected-plan-price strong) {
    font-family:var(--tt-type-family)!important;
    font-size:var(--tt-type-price)!important;
    font-weight:500!important;
    line-height:1.1!important;
    letter-spacing:-.04em!important;
  }
}

/* The service section now has a main heading and a subordinate selected service. */
#after-launch-title{color:#f4f6fb;max-width:1160px;margin:0 auto 32px;text-wrap:balance}
#hub .record-type{font-weight:500}
#work .client-work-card h3 a{font:inherit;letter-spacing:inherit}
#main .section-name{margin-bottom:20px}
@media(max-width:600px){#after-launch-title{margin-bottom:24px}#main .section-name{margin-bottom:18px}}

.chat-composer textarea{min-height:44px;height:44px}