/* Device layouts share the approved desktop design and preserve natural scrolling. */
.package-browse { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.package-browse p { min-width: 52px; text-align: center; font-size: 12px; color: var(--dark-sage); }
.package-grid:focus-visible { outline: 3px solid #98732f; outline-offset: 3px; }

@media screen and (min-width: 1001px) {
  .package-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (min-width: 1001px) and (max-height: 850px) {
  .sample-intro { display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: center; gap: 32px; max-width: 760px; padding-block: 24px; }
  .sample-intro .page-heading { padding: 0; text-align: left; }
  .sample-preview { width: 100px; margin: 0; }
  .sample-testimonials { padding-block: 26px 30px; }
  .sample-testimonials .section-title { margin-bottom: 22px; }
  .sample-testimonials figure { padding: 24px; }
  .sample-testimonials blockquote { font-size: 20px; line-height: 1.4; }
  .quote-mark { font-size: 48px; margin-bottom: 10px; }
  .sample-testimonials figcaption { padding-top: 16px; }
  .faq-page .page-heading, .contact-page .page-heading { padding-top: 28px; padding-bottom: 20px; }
  .faq-page { padding-bottom: 28px; }
  .faq-page summary { min-height: 54px; padding-block: 14px; font-size: 20px; }
  .faq-page .faq-answer { font-size: 16px; line-height: 1.5; }
}

@media screen and (max-width: 1000px) {
  :root { --page-gutter: 24px; }
  .page-heading { padding-block: 24px 18px; }
  .section-title { font-size: 32px; }
  .about-section .prose-layout { padding-inline: max(var(--page-gutter), var(--safe-left)) max(var(--page-gutter), var(--safe-right)); }
  .included { padding: 14px 18px; margin-bottom: 14px; }
  .included h2 { font-size: 24px; }
  .included ul { margin-top: 12px; gap: 8px 18px; }
  .included li { font-size: 13px; line-height: 1.4; }
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .package-card { padding: 16px; }
  .card-top { margin-bottom: 8px; }
  .package-tier.package-highlight { font-size: 15px; }
  .package-card h2 { font-size: 25px; min-height: 56px; }
  .package-price { font-size: 28px; margin: 10px 0 12px; }
  .package-description, .package-features { font-size: 13px; line-height: 1.4; }
  .package-description { margin-bottom: 12px; }
  .package-features { padding-top: 12px; }
  .package-features li { padding-left: 20px; margin-bottom: 7px; line-height: 1.4; }
  .package-fine { margin-top: 12px; font-size: 11px; line-height: 1.45; }
  .copy-note { font-size: 11px; line-height: 1.4; }
  .package-actions { padding-top: 14px; }
  .package-actions .button { min-height: 44px; font-size: 12.5px; padding: 10px; }
  .package-controls { margin-block: 12px 14px; }
  .packages-section { padding-bottom: 26px; }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px; gap: 22px; }
  .contact-copy h2 { font-size: 28px; }
  .contact-copy > p { font-size: 14px; line-height: 1.5; margin-top: 14px; }
  .contact-card { padding: 18px; }
  .contact-card .contact-options { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact-method .button { font-size: 15px; }
  .contact-page { padding-bottom: 28px; }
  .sample-intro { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 28px; max-width: 760px; padding-block: 24px; }
  .sample-intro .page-heading { padding: 0; text-align: left; }
  .sample-intro .section-title { font-size: 32px; }
  .sample-preview { width: 110px; margin: 0; }
  .sample-testimonials { padding-block: 28px 32px; }
  .sample-testimonials .section-title { font-size: 32px; margin-bottom: 22px; }
  .sample-testimonials .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sample-testimonials figure { padding: 20px; }
  .sample-testimonials blockquote { font-size: 18px; line-height: 1.4; }
  .quote-mark { font-size: 44px; margin-bottom: 10px; }
  .sample-testimonials figcaption { font-size: 12px; padding-top: 14px; }
  .faq-page { padding-bottom: 28px; }
  .faq-page .page-heading { padding-top: 24px; padding-bottom: 18px; }
  .faq-page details { padding-inline: 20px; }
  .faq-page summary { min-height: 52px; padding-block: 13px; font-size: 19px; gap: 16px; }
  .faq-page .faq-answer { font-size: 15px; line-height: 1.5; padding: 0 0 18px; }
  .faq-answer p + p { margin-top: 10px; }
}

@media screen and (max-width: 760px) {
  :root { --page-gutter: 16px; }
  body { font-size: 14px; line-height: 1.45; }
  .header-inner { min-height: 64px; padding-block: max(6px, var(--safe-top)) 6px; }
  .brand img { width: 138px; }
  .nav-toggle { font-size: 12px; }
  .page-heading { padding-block: 20px 16px; }
  .section-title { font-size: 28px; }
  .home-hero .hero { grid-template-columns: minmax(0, 1fr) clamp(72px, 19vw, 120px); gap: 18px; padding-block: 16px; padding-inline: max(var(--page-gutter), var(--safe-left)) max(var(--page-gutter), var(--safe-right)); }
  .home-hero .hero h1 { font-size: clamp(23px, 4.5vw, 30px); line-height: 1.08; letter-spacing: -.6px; }
  .home-hero .hero-image { max-width: 120px; }
  .home-hero .hero-description { font-size: 13.5px; line-height: 1.4; margin: 12px 0 0; }
  .about-section { padding-block: 16px; }
  .about-section .section-title { margin-bottom: 12px; }
  .about-section .prose > p { font-size: 14.5px; line-height: 1.4; }
  .about-section .prose p + p { margin-top: 8px; }
  .included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
  .included li { font-size: 12px; padding-left: 18px; }
  .view-switch button { font-size: 12px; min-height: 44px; padding-block: 8px; }
  .table-scroll { max-height: 68svh; }
  #comparison-table th, #comparison-table td { padding: 11px 9px; }
  #comparison-table td { font-size: 12px; line-height: 1.4; }
  #comparison-table .fine-row th, #comparison-table .fine-row td { font-size: 10.5px; }
  .table-instruction { font-size: 12px; line-height: 1.4; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; }
  .contact-copy h2 { font-size: 26px; }
  .contact-copy em { margin-top: 8px; }
  .contact-copy > p { font-size: 13.5px; margin-top: 12px; }
  .contact-card { padding: 14px; }
  .contact-card .contact-options, .inquiry-body .contact-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .contact-card .contact-method { display: flex; flex-direction: column; }
  .contact-method > span { font-size: 10px; letter-spacing: .8px; }
  .contact-method .button, .inquiry-body .contact-method .button { font-size: 13px; min-height: 44px; padding: 9px 6px; }
  .contact-card .contact-method .button, .inquiry-body .contact-method .button { flex: 1; }
  .inquiry-dialog .dialog-header { padding: 18px 16px 0; }
  .inquiry-label { font-size: 20px; }
  .inquiry-dialog h2 { font-size: 20px; }
  .inquiry-description { font-size: 23px; margin-bottom: 14px; }
  .inquiry-body { padding: 10px 16px 18px; font-size: 14px; }
  .inquiry-body > p:not(.inquiry-description) { line-height: 1.45; }
  .inquiry-body .contact-options { margin-top: 16px; }
  .inquiry-body .contact-method { padding: 12px 8px; }
  .sample-intro { grid-template-columns: minmax(0, 1fr) 95px; gap: 20px; padding-block: 20px; }
  .sample-preview { width: 95px; }
  .sample-intro .section-title, .sample-testimonials .section-title { font-size: 28px; }
  .sample-testimonials { padding-block: 22px 24px; }
  .sample-testimonials .section-title { margin-bottom: 16px; }
  .sample-testimonials .testimonial-grid { gap: 12px; }
  .sample-testimonials figure { padding: 14px; }
  .sample-testimonials blockquote { font-size: 15.5px; line-height: 1.4; }
  .quote-mark { font-size: 36px; margin-bottom: 8px; }
  .sample-testimonials figcaption { padding-top: 12px; }
  .faq-page .page-heading { padding-top: 20px; padding-bottom: 16px; }
  .faq-page .page-heading h1 { font-size: 28px; }
  .faq-page details { padding-inline: 14px; }
  .faq-page summary { font-size: 16.5px; line-height: 1.3; min-height: 46px; padding-block: 11px; gap: 12px; }
  .faq-page .faq-answer { font-size: 14px; line-height: 1.45; padding-bottom: 16px; }
  .site-footer { padding-top: 10px; padding-bottom: max(10px, var(--safe-bottom)); }
  .footer-logo { width: 118px; }
  .site-footer p { margin-top: 4px; font-size: 10px; }
}

@media screen and (max-width: 540px) {
  .home-hero .hero { grid-template-columns: minmax(0, 1fr) clamp(66px, 22vw, 100px); gap: 12px; padding-block: 12px; }
  .home-hero .hero h1 { font-size: clamp(22px, 6vw, 27px); }
  .home-hero .hero-description { font-size: 13px; margin-top: 10px; }
  .about-section { padding-block: 12px; }
  .about-section .prose > p { font-size: 14px; }
  .included { padding: 12px 14px; }
  .included h2 { font-size: 22px; }
  .included ul { margin-top: 10px; gap: 6px 12px; }
  .package-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 20px); grid-auto-rows: 1fr; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 10px; }
  .package-card { padding: 14px; scroll-snap-align: start; }
  .package-card h2 { font-size: 24px; min-height: 0; }
  .package-description, .package-features { font-size: 12.5px; }
  .package-features li { margin-bottom: 6px; }
  .package-price { font-size: 27px; }
  .package-fine .copy-note { margin-top: 6px; }
  .package-bottom { margin-top: 16px; gap: 12px; }
  .pricing-note { font-size: 10.5px; line-height: 1.45; }
  .sample-intro { padding-block: 14px; }
  .sample-testimonials blockquote { font-size: 15px; }
  .faq-page .page-heading h1 { font-size: 26px; }
}

@media screen and (max-width: 360px) {
  .about-section .prose > p { font-size: 13.5px; }
  .sample-intro .section-title, .sample-testimonials .section-title { font-size: 26px; }
  .sample-testimonials figure { padding: 12px; }
  .sample-testimonials blockquote { font-size: 14.5px; }
  .contact-layout { padding: 14px; }
  .contact-card { padding: 10px; }
  .contact-method .button, .inquiry-body .contact-method .button { font-size: 12px; }
}