/* Loaded last so small-screen typography remains readable without crowding the viewport. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #173242; outline-offset: 4px;
  box-shadow: 0 0 0 7px #fffaf3;
}
.footer a:focus-visible, .demo-section a:focus-visible { outline-color: #fffaf3; box-shadow: 0 0 0 7px #173242; }
.menu-label { font-size: 1rem; font-weight: 700; }
.menu-button { width: auto; min-width: 48px; min-height: 48px; flex-shrink: 0; }
.menu-button .icon { margin-right: 6px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #5d6b72; opacity: 1; }

@media (max-width: 1000px) {
  .menu-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid #87959b; border-radius: 8px; }
  .mobile-nav { max-height: calc(100dvh - 90px); overflow-y: auto; }
  .mobile-nav a, .mobile-trades > summary { min-height: 48px; font-size: 1.125rem; padding: 12px 8px; line-height: 1.5; }
}

@media (max-width: 768px) {
  html { font-size: 106.25%; }
  body { font-size: 1rem; line-height: 1.6; }
  .wrap { width: calc(100% - 40px); }
  .header { height: auto; min-height: 80px; }
  .nav { min-height: 80px; gap: 16px; flex-wrap: wrap; padding-block: 12px; }
  .header .brand img.brand-logo { width: min(200px, 50vw); max-width: 100%; height: auto; }
  .header .brand { min-height: 48px; align-items: center; }
  .nav-cta { display: none; }
  .menu-button { margin-left: auto; }
  .footer .brand { min-height: 48px; }
  main p:not(.summary-price), .footer p { font-size: 1.0625rem !important; line-height: 1.6 !important; }
  /* Supporting text remains readable at normal phone scale. */
  small, label, main li, main dt, main dd, .eyebrow, .pill,
  .plan-label, .billing-description, .price-note, .small-note,
  .form-notice, .form-footnote, .contact-detail, .contact-detail small,
  .hero-footnote, .benefit-strip .wrap > div, .trade-list,
  .footer-links, .footer-links a, .footer-bottom, .footer-bottom a,
  .flow-card small, .flow-delivery, .spec-tags span,
  .delivery-record-title, .delivery-record dt, .delivery-record dd,
  .delivery-record dd small, .sample-data-label, .delivery-preview figcaption div > span,
  .crm-workflow figcaption small, .crm-gold-label, .crm-specification span,
  .crm-match-results span, .crm-destination-bar, .crm-new-record span,
  .estimate-label-row label, .estimate-wins span, .estimate-reset,
  .fulfilment-price small, .fulfilment-price > span, .calculator label,
  .calculator small, .calculation > span, .animation-footnote, .animation-footnote button {
    font-size: 1rem; line-height: 1.5; letter-spacing: normal;
  }
  .eyebrow, .plan-label { letter-spacing: .04em; }
  .hero .pill { font-size: 1rem; line-height: 1.5; white-space: normal; }
  .price [data-period], .addon-price [data-period] { font-size: 1rem; line-height: 1.5; }
  .contact-form label { font-size: 1rem; line-height: 1.5; margin-bottom: 8px; }
  .contact-form input, .contact-form select, .contact-form textarea {
    font-size: 1rem; min-height: 52px; padding: 14px 12px; max-width: 100%;
  }
  .contact-form textarea { min-height: 160px; }
  .contact-form { padding: 24px 20px; }
  .form-row { grid-template-columns: minmax(0,1fr); }
  .enquiry-preview, #enquiry-preview { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
  button, summary, .button, .text-link, .footer-links a, .footer-bottom a,
  .contact-detail a, .trade-list a, .policy-contents a {
    min-height: 48px; min-width: 48px; touch-action: manipulation;
  }
  .button, .hero-actions .button, .page-hero .button, .plan .button,
  .contact-form .button, .cta-inner .button, .estimate-result .button {
    font-size: 1rem; padding: 14px 18px; gap: 14px; line-height: 1.5;
    height: auto; white-space: normal; text-align: center; max-width: 100%;
  }
  .text-link, .hero-actions .text-link, .faq-section .text-link, .contact-detail a {
    font-size: 1rem; line-height: 1.5; padding-block: 10px; overflow-wrap: anywhere;
  }
  .contact-detail a { display: flex; align-items: center; }
  .animation-footnote button { min-height: 48px; }
  .footer-links a, .footer-bottom a, .trade-list a, .policy-contents a {
    display: flex; align-items: center; padding-block: 10px; line-height: 1.5;
  }
  .hero-actions, .how-hero .hero-actions, .trade-hero .hero-actions {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .hero-actions .text-link { justify-content: center; }
  .hero h1, .trade-hero h1, .how-hero h1, .about-hero h1 {
    font-size: clamp(2.35rem, 9.5vw, 3.2rem); line-height: 1.1; max-width: 100%;
  }
  .word-spark { display: none; }
  .hero-grid, .trade-hero-grid, .how-hero-grid, .about-hero, .contact-grid,
  .calculator-grid, .demo-grid, .fulfilment { grid-template-columns: minmax(0,1fr); }
  .hero-copy, .hero-visual, .calculator, .contact-form, .estimate-grid > *, .plan,
  .coverage-addon, .single-plan-layout > *, .delivery-preview, .crm-workflow { min-width: 0; }
  .single-plan-layout { grid-template-columns: minmax(0,1fr); }
  .plan, .coverage-addon { padding: 24px 20px; }
  .plan li { font-size: 1.125rem; line-height: 1.5; }
  .plan-label { white-space: normal; }
  .billing-toggle { display: flex; width: 100%; gap: 8px; padding: 6px; }
  .billing-toggle button { flex: 1; font-size: 1rem; padding: 12px 8px; line-height: 1.5; }
  .billing-toggle button span { display: block; font-size: 1rem; margin: 4px 0 0; }
  .faq-list summary { display: flex; align-items: center; gap: 16px; font-size: 1.125rem; line-height: 1.5; padding-block: 20px; }
  .faq-list summary > span { flex-shrink: 0; margin-left: auto; }
  .faq-list details p { padding-right: 0; }
  .footer-links { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .footer-links > div { font-size: 1rem; }
  .footer-links > div > span { font-size: 1.125rem; font-weight: 700; }
  .footer-bottom, .footer-bottom > div { flex-wrap: wrap; gap: 16px; }
  .footer-bottom > span:nth-child(2) { display: inline; }
  .footer .brand img.brand-logo { max-width: 100%; }
  .policy-contents a { display: flex; margin: 0; }
  .policy-layout { grid-template-columns: minmax(0,1fr); }
  .policy-contents { position: static; }
  .trade-list { gap: 8px 20px; }
  .trade-list b { display: none; }
  .delivery-record dl { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .delivery-preview > figcaption, .delivery-record-title { flex-wrap: wrap; }
  .sample-data-label { max-width: none; margin-left: 0; }
  .flow-card { padding: 22px 16px; min-width: 0; }
  .flow-card small, .flow-delivery, .spec-tags span { font-size: 1rem; }
  .flow-delivery, .spec-tags { flex-wrap: wrap; }
  .estimate-label-row { align-items: stretch; flex-direction: column; gap: 10px; }
  .estimate-label-row label { max-width: none; }
  .estimate-number { width: 100%; min-height: 52px; }
  .estimate-control input[type="range"] { height: 48px; margin-block: 8px; }
  .estimate-reset { padding: 10px; }
  .estimate-result output { font-size: clamp(2.5rem, 12vw, 4.5rem); overflow-wrap: anywhere; }
  .estimate-wins, .calculation { flex-wrap: wrap; gap: 16px; }
  .number-control button { width: 52px; height: 52px; flex-shrink: 0; }
  .number-control input { min-width: 0; width: 100%; min-height: 52px; font-size: 1.125rem; }
  .project-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 8px; }
  .project-stages button { font-size: 1rem; padding: 10px 4px; min-width: 0; line-height: 1.5; }
  .project-stages button > span { font-size: 1rem; }
  .project-stages button { color: #53666f; }
  .project-stages button[aria-pressed="true"] { color: #a13715; }
  .animation-controls button { width: 48px; height: 48px; }
  .animation-toolbar { gap: 12px; }
  .animation-footnote { gap: 12px; }
  .sample-application-dialog { max-width: calc(100% - 24px); padding: 24px 18px; max-height: 90dvh; overflow-y: auto; }
  .sample-application-dialog dl > div { grid-template-columns: minmax(0,1fr); }
  .sample-dialog-close { min-width: 48px; min-height: 48px; }
  .crm-workflow > figcaption, .crm-new-record, .crm-destination-bar { flex-wrap: wrap; gap: 12px; }
  .crm-workflow-stages > li { min-height: 0; }
  .crm-match-results, .crm-specification > div { flex-wrap: wrap; }
  .crm-specification > div > span { font-size: 1rem; }
}

/* A comfortable, vertical reading experience on phones. */
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  main p:not(.summary-price), .footer p { font-size: 1.0625rem !important; line-height: 1.6 !important; }
  main p { margin-bottom: 24px; }
  .hero h1, .trade-hero h1, .how-hero h1, .about-hero h1,
  .page-intro h1, body[data-page="pricing"] .page-intro h1 {
    font-size: clamp(2.35rem, 10.5vw, 2.8rem); line-height: 1.12; margin-bottom: 26px;
  }
  .section { padding-block: 64px; }
  .hero-grid, .how-hero-grid { padding-block: 42px 62px; gap: 30px; }
  .hero-actions, .trade-hero .hero-actions, .how-hero .hero-actions { width: 100%; gap: 14px; }
  .button, .text-link { width: 100%; }
  .button, .hero-actions .button, .page-hero .button, .plan .button,
  .contact-form .button, .cta-inner .button, .estimate-result .button {
    min-height: 52px; padding: 14px 16px; font-size: 1rem; gap: 12px;
  }
  .text-link { min-height: 48px; }
  .hero-footnote { margin-top: 24px; }
  .steps, .how-step-grid { gap: 32px; }
  .steps article { padding-block: 24px 16px; }
  .trade-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
  .trade-list a { justify-content: flex-start; padding: 14px 4px; border-bottom: 1px solid #dddeda; }
  .single-plan-layout, .home-plan-summary { gap: 30px; }
  .plan, .coverage-addon, .single-subscription-summary article, .single-subscription-summary aside { padding: 26px 20px; }
  .plan li { padding-block: 8px; }
  .plan .price > [data-period], .addon-price > [data-period] { font-size: 1rem; }
  .billing-toggle { flex-direction: column; gap: 10px; max-width: none; }
  .billing-toggle button { width: 100%; min-height: 52px; font-size: 1rem; padding: 12px; }
  .billing-toggle button span { margin-top: 6px; }
  .faq-list summary { font-size: 1.0625rem; padding-block: 22px; }
  .project-stages { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .project-stages button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; min-height: 52px; }
  .contact-form { padding: 26px 20px; }
  .contact-form input, .contact-form select, .contact-form textarea { min-height: 52px; font-size: 1rem; padding-block: 14px; }
  .contact-form label { font-size: 1rem; margin-bottom: 10px; }
  .contact-form .form-field { margin-bottom: 22px; }
  .contact-detail { margin-top: 26px; }
  .contact-detail strong { font-size: 1rem; }
  .footer-links { gap: 32px; }
  .footer-links a { font-size: 1rem; min-height: 48px; padding-block: 12px; }
}