/* ─────────────────────────────────────────────────────────────────────────────
   Mobile type + spacing, every layouts.app page (Gavin 8 Nov 2026). Trialled on
   the homepage and /renault-radio-codes, rolled out site-wide the same day
   ("lets roll out the sitewide font change on mobile"). Checkout and the order
   page use layouts.checkout and do not load it.
   Loaded last from layouts/app.blade.php, phones and small tablets only. The
   !important lines beat inline styles in product.blade.php, the two serial box
   components, the homepage CTA and the contact form section; fold them into
   those files when they are next edited.
   Scale: H1 36 (product 32) · H2 30 · card titles 19 · lead 18 · body 17 ·
   secondary 15-16 · meta 12.5-13.5. Motorway reads at 18 body / 33 H2.
   Rhythm: 48 between sections is the biggest gap; inside a section, eyebrow 10,
   heading about 22, intro, then 36 to the content; cards 20-24 in, title to
   text 10-12.
   Left alone on purpose: the hero trust row, delivery badge and pills beside the
   serial box (nowrap rows widened the pay step on 5 Nov), header and menu.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Headings */
  .hero-h1-text { font-size: 36px; line-height: 1.08; }
  .product-hero h1 { font-size: 32px; line-height: 1.12; }
  .sec-h2, .team-strip-title { font-size: 30px; line-height: 1.15; }
  .sec-title { font-size: 30px !important; line-height: 1.15; }
  .cta-h2 { font-size: 32px; }
  .hero-card-title, .hiw-title, .why-item-title, .serial-guide-title, .why-strip-title { font-size: 19px; line-height: 1.3; }
  .product-cta-banner h3 { font-size: 23px; line-height: 1.25; }
  .tp-title { font-size: 17px; line-height: 1.35; }
  /* Long compound words (fi, de, hu, nl) must not push a bigger heading past a small phone */
  .hero-h1-text, .product-hero h1, .sec-h2, .sec-title, .team-strip-title, .cta-h2 { overflow-wrap: anywhere; }

  /* Lead copy */
  .hero-desc-text, .sec-sub, .cta-sub { font-size: 18px; line-height: 1.6; }
  .product-hero h1 + p { font-size: 18px !important; line-height: 1.6 !important; }

  /* Reading copy */
  .hiw-desc, .why-item-desc, .serial-guide-desc, .why-strip-desc, .team-strip-sub { font-size: 17px; line-height: 1.6; }
  .faq-answer .faq-a { font-size: 17px; line-height: 1.6; padding: 0.9rem 1.25rem 1.4rem; }
  .product-faq-answer { font-size: 17px; line-height: 1.6; padding: 1rem 1.25rem 1.4rem; }
  .faq-q, .product-faq-question { font-size: 18px; line-height: 1.4; }
  .faq-toggle { padding: 1.15rem 1.25rem; }
  .product-faq-question { padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .faq-item.open .faq-answer { max-height: 1400px; }
  .tp-body { font-size: 16px; line-height: 1.55; -webkit-line-clamp: 5; }

  /* Secondary copy */
  .hero-card-sub, .team-strip-note, .product-guide-cta, .guide-video-link--clip { font-size: 15px; }
  .tp-readmore { font-size: 15px; white-space: normal; flex-shrink: 1; }
  .brands-see-all { max-width: 100%; white-space: normal; text-align: center; }
  .brand-card-name, .brands-see-all, .product-cta-banner p, .team-strip-cta, .product-variant-name { font-size: 16px; }
  .product-cta-banner .btn { font-size: 16px !important; }
  .hero-serial-help, .why-tp-meta, .why-float-text, .tp-author-name, .team-face-name, .radio-labels-trigger { font-size: 14px; }

  /* Meta: eyebrows, dates, labels */
  .sec-eyebrow { font-size: 12.5px; }
  .tp-date, .tp-author-brand, .hiw-code-status, .team-strip-eyebrow, .product-disclaimer-inner, .brand-card-sub { font-size: 13px; }
  .breadcrumb, .cta-note { font-size: 13.5px; }
  .hero-stat-lbl, .why-stat-box-lbl, .why-float-sub { font-size: 12.5px; }
  .tp-author-country, .hiw-code-label, .trusted-lbl, .serial-guide-step { font-size: 12px; }

  /* Sticky bars */
  .mobile-cta-bar a.mobile-cta-link, .product-mobile-cta-btn { font-size: 16px; }

  /* Room between sections */
  .section { padding-top: 3rem; padding-bottom: 3rem; }
  .cta-section { padding-top: 4rem; padding-bottom: 4rem; }
  .team-strip { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .product-tp-strip { padding-top: 2rem; padding-bottom: 2rem; }

  /* Section heads: heading about 22 to the intro, intro 36 to the content (were 14 and 48; round 3, Gavin:
     "still a little tight on headers to body text") */
  .sec-h2 { margin-bottom: 1.1rem; }
  .sec-sub { margin-bottom: 2rem; }
  .sec-title + .sec-sub, .sec-title + .guide-header-row { margin-top: 1.25rem; }
  .hero-label { margin-bottom: 1rem; }
  .hero-stats { margin-top: 1.5rem; }
  .team-strip-title { margin-bottom: 1rem; }
  .team-strip-sub { margin-bottom: 1.4rem; }
  .team-strip-note { margin-top: 0.75rem; }

  /* Why us: icon and title on one line, the text full width under them, a hairline between
     items (the text was a 5-6 line block squeezed beside the icon) */
  .why-list { gap: 0; }
  .why-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 24px 0; border-top: 1px solid var(--border-light); }
  .why-item:first-child { padding-top: 0; border-top: 0; }
  .why-item:last-child { padding-bottom: 0; }
  .why-item > div:not(.why-item-icon) { display: contents; }
  .why-item-icon { margin-top: 0; }
  .why-item-title { margin-bottom: 0; }
  .why-item-desc { grid-column: 1 / -1; margin-top: 10px; }
  .why-strip-card { row-gap: 8px; }

  /* Why-us photo: taller on phones so the guarantee card and the four stat cards each have room (they
     touched); the Trustpilot bar on two rows, score, stars and wordmark over the review count */
  .why-visual-img { aspect-ratio: 4 / 5; }
  .why-stats-grid { left: 1rem; right: 1rem; bottom: 1rem; gap: 10px; }
  .why-tp-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem 0.85rem; padding: 1.1rem 1.25rem; }
  .why-tp-bar > div { display: contents; }
  .why-tp-bar > div > img { grid-column: 2; grid-row: 1; }
  .why-tp-bar > img { grid-column: 3; grid-row: 1; }
  .why-tp-meta { grid-column: 1 / -1; grid-row: 2; }

  /* Serial box, homepage (hero card and the CTA at the bottom share the component) */
  .hero-card { padding: 1.6rem 1.35rem; }
  .hero-live-bar { margin-bottom: 1.1rem; }
  .hero-card-title { margin-bottom: 6px; }
  .hero-card-sub { margin-bottom: 1.1rem; }
  /* the site's 16px !important on phone inputs (stops iOS zoom) needs the extra class to beat */
  .serial-input-wrap .hero-serial-input { font-size: 18px !important; padding: 16px 64px 16px 16px; }
  .serial-fake-placeholder { font-size: 17px; }
  .serial-arrow-btn { width: 44px; height: 44px; right: 7px; }
  .serial-btn-text { font-size: 15px; }
  .serial-input-wrap + [aria-live] span[style], .serial-input-wrap + [aria-live] p[style], .serial-input-wrap + [aria-live] a[style] { font-size: 14.5px !important; line-height: 1.45 !important; }
  .serial-choose__label { font-size: 17px; }
  .serial-choose__sub { font-size: 14px; }
  .serial-brand-chip { font-size: 15px; padding: 0.55rem 0.95rem; }
  .hero-trust-row { margin-top: 1rem; font-size: 13px; }
  .hero-serial-help { margin-top: 0.6rem; }
  .hero-card-divider { margin: 1.1rem 0; }

  /* Serial box, product page (component styles are inline, so !important) */
  .product-form-card { padding: 1.5rem 1.35rem; }
  .product-form-header { margin-bottom: 1.1rem; padding-bottom: 1rem; }
  .product-form-title { font-size: 19px; margin-bottom: 4px; }
  .product-form-sub { font-size: 15px; }
  .product-serial-wrap .form-group { margin-bottom: 0 !important; }
  .product-serial-wrap label[for] { font-size: 15px !important; margin-bottom: 8px !important; }
  .product-serial-wrap label[for] span[style] { font-size: 13px !important; }
  .product-serial-wrap .product-serial-input { font-size: 18px !important; padding: 15px 16px; }
  .product-serial-placeholder { font-size: 18px; padding: 0 16px; }
  .product-serial-wrap [aria-live] > span, .product-serial-wrap [aria-live] > div[style] { font-size: 14px !important; line-height: 1.45 !important; margin-top: 8px !important; }
  .product-serial-wrap label:not([for]) > span[style] { font-size: 14px !important; }
  .pf-choose p.pf-choose__label { font-size: 17px; }
  .pf-choose p.pf-choose__sub { font-size: 14px; }
  .pf-choose .pf-brand-chip { font-size: 15px; padding: 0.55rem 0.95rem; }
  .serial-note { font-size: 14px; }
  .product-serial-wrap .btn-large { font-size: 17px; padding: 16px; margin-top: 1.1rem !important; }
  .product-trust-row { margin-top: 1.1rem; padding-top: 1rem; gap: 0.5rem 0.9rem; }
  .product-trust-item { font-size: 12.5px; }

  /* CTA blocks: tighter between the intro, the box and the small print (were 51 and 39) */
  .cta-sub { margin-bottom: 1.5rem; }
  .cta-inner > div[style] { margin-bottom: 0.75rem !important; }
  .cta-inner > a[style] { font-size: 14px !important; margin-top: 0 !important; }
  .cta-inner .cta-note { margin-top: 0.6rem !important; }
  .product-cta-banner { padding: 1.75rem 1.35rem; }
  .product-cta-banner p { margin-bottom: 1.25rem; }
  .product-cta-banner .btn { display: flex; padding-left: 1rem !important; padding-right: 1rem !important; white-space: normal; text-align: center; }

  /* Three phone overflows the rollout sweep found, all live before it (8 Nov): the contact form section ran
     up to 29px past a 360px phone in ro/ru/fi (a 1fr column that cannot shrink, inside an inline 32px
     gutter, now the 20px of the contact top), the help centre tiles 8px in French, and the guides
     "Unlock your radio" button ran off the screen in el/fr/ru */
  section:has(> .contact-body) { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .contact-body { grid-template-columns: minmax(0, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-title { overflow-wrap: anywhere; }
  .gd-bar-btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
  .contact-form-note { overflow-wrap: anywhere; }
  .help-contact { grid-template-columns: minmax(0, 1fr); }
  .help-contact-btn { max-width: 100%; white-space: normal; text-align: center; }
}

/* How it works on phones (its 2-column card starts at 640): icon and title on one line, the
   text full width under them (it was 7 lines in a 223px column), the step number a watermark
   in the corner */
@media (max-width: 640px) {
  .hiw-card { position: relative; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 1.25rem 1.15rem 1.35rem; }
  .hiw-icon-wrap { grid-column: 1; grid-row: 1; display: flex; }
  .hiw-title { grid-column: 2; grid-row: 1; margin-bottom: 0; padding-right: 1.6rem; }
  .hiw-num { position: absolute; top: 0.85rem; right: 1rem; margin: 0; font-size: 22px; }
  .hiw-desc { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
}