/* Shared type system. Each type size is reduced by 1px; root and spacing stay independent. */
:root {
  --text-caption: calc(.75rem - 1px);
  --text-small: calc(.875rem - 1px);
  --text-ui: calc(.9375rem - 1px);
  --text-body: calc(1rem - 1px);
  --text-product: calc(1.25rem - 1px);
  --text-title: calc(clamp(1.5rem, 1.25rem + .75vw, 1.75rem) - 1px);
  --text-section: calc(clamp(2rem, 1.5rem + 2vw, 3rem) - 1px);
  --text-hero: calc(clamp(2.5rem, 1.75rem + 2.5vw, 4rem) - 1px);
  --leading-body: 1.65;
  --leading-ui: 1.45;
  --leading-heading: 1.15;
  --tracking-heading: -.035em;
  --tracking-label: .08em;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--text-body); line-height: var(--leading-body); }
button, input, select, textarea { font-family: var(--font); line-height: var(--leading-ui); }
p { line-height: var(--leading-body); }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--text-hero); line-height: 1.08; letter-spacing: -.045em; }
h2 { font-size: var(--text-section); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-title); line-height: 1.25; letter-spacing: -.025em; }

/* Body copy has the same size in every section and dialog. */
.hero-copy > p,
.section-heading > p,
.analysis-copy > p,
.analysis-steps p,
.form-panel > p,
.form-success > p,
.catalog-empty p,
.faq-section > div > p,
.faq-list details p,
.modal-description,
.privacy-modal > p,
.repair-current p,
.boleto-copy > p,
.location-copy > p,
.location-details p,
.location-details a,
.review-card blockquote p,
.map-fallback {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: normal;
}
.hero-copy > p { max-width: 36rem; }
.section-heading > p { max-width: 24rem; }
.faq-list summary { font-size: var(--text-body); font-weight: 500; line-height: 1.5; }
.form-panel > h3, .form-success > h3 { font-size: var(--text-title); }
.modal-info h2, .privacy-modal > h2, .analysis-copy h2 { font-size: calc(clamp(1.75rem, 1.5rem + 1vw, 2.25rem) - 1px); }
.product-info h3 { font-size: var(--text-product); line-height: 1.3; letter-spacing: -.025em; }
.location-details h3 { font-size: var(--text-ui); line-height: 1.4; letter-spacing: normal; }

/* Controls retain their reading size on narrow and short screens. */
.button, .text-link, .nav-wrap nav a, .nav-contact, .filter,
.product-details, .modal-specs b, .modal-colors > span,
.payment-option, .footer-top > a:last-child {
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  letter-spacing: normal;
}
.button,
.hero-actions > .button,
.catalog-footer .button,
.repair-services > .button,
.location-copy > .button,
.modal-info > .button,
.modal-info .button,
.final-cta .button,
.analysis-modal .submit-button,
.boleto-copy > .button {
  min-height: 3.25rem;
  gap: 1rem;
  padding: .9375rem 1.25rem;
}
.text-link { min-height: 2.75rem; }
.nav-wrap nav a, .nav-contact { min-height: 2.75rem; }
.field input, .field select, .field textarea, .catalog-search input {
  font-size: var(--text-body);
  line-height: 1.5;
}
.field input, .field select, .field textarea,
.analysis-modal .field input, .analysis-modal .field select, .analysis-modal .field textarea { min-height: 3rem; }
.field select { height: auto; }
.field input::placeholder, .field textarea::placeholder { font-size: inherit; }
.field label { font-size: var(--text-small); font-weight: 500; line-height: 1.5; gap: .5rem; flex-wrap: wrap; }
.consent, .field-error, .form-error { font-size: var(--text-small); line-height: 1.6; }
.consent input { width: 1.125rem; height: 1.125rem; margin-top: .125rem; }
.consent button { font-size: inherit; line-height: inherit; }
.submit-button { white-space: normal; }
.modal-close, .analysis-modal-header > .modal-close { width: 2.75rem; height: 2.75rem; flex: none; }
.gallery-controls button { width: 2.75rem; height: 2.75rem; }

/* Supporting text remains readable without competing with headings. */
.product-tagline, .card-payment p, .catalog-footer > span,
.privacy-note p, .footer-top p, .footer-bottom,
.modal-specs small, .modal-payment > p, .review-author > div > span,
.location-map-caption > a, .service-chips > span {
  font-size: var(--text-small);
  line-height: 1.6;
  letter-spacing: normal;
}
.card-payment strong { font-size: var(--text-body); line-height: 1.5; }
.card-color-row > span:last-child,
.eyebrow, .brand-strip .wrap > span, .filter > span,
.product-top, .product-top .product-badge,
.availability-note, .form-overline, .form-overline > span:last-child,
.field label > span, .form-footnote, .gallery-tag, .gallery-controls,
.modal-payment > span, .modal-note, .boleto-copy > small,
.repair-story > .eyebrow, .scroll-hint,
.repair-label, .repair-model-caption, .repair-model-caption > span,
.location-map-caption, .review-source {
  font-size: var(--text-caption);
  line-height: 1.5;
}
.eyebrow, .brand-strip .wrap > span, .product-top, .gallery-tag,
.modal-payment > span, .form-overline, .form-overline > span:last-child,
.repair-story > .eyebrow, .scroll-hint, .location-map-caption {
  letter-spacing: var(--tracking-label);
}
.product-top .product-badge, .filter > span { letter-spacing: normal; }
.review-author cite { font-size: var(--text-ui); line-height: 1.5; }
.review-avatar { font-size: var(--text-product); line-height: 1; }
.repair-step-buttons button { font-size: var(--text-caption); line-height: 1.4; letter-spacing: .025em; }
.repair-step-buttons button > span { font-size: var(--text-caption); line-height: 1.4; }
.repair-current > span { font-size: calc(clamp(3rem, 2rem + 2vw, 4rem) - 1px); line-height: 1; letter-spacing: -.05em; }
.repair-current > span > span { font-size: var(--text-small); line-height: 1.4; letter-spacing: normal; }
.analysis-steps > div > span { font-size: var(--text-small); line-height: 1; flex: none; }
.map-fallback strong { font-size: var(--text-product); line-height: 1.3; }
.store-map { font-size: var(--text-small); line-height: 1.5; }
.store-map .store-map-label { font-size: var(--text-small); line-height: 1.4; letter-spacing: normal; }
.store-map .leaflet-control-attribution { font-size: var(--text-caption); line-height: 1.5; }
.store-map .leaflet-popup-content { font-size: var(--text-small); line-height: 1.6; }
.store-map .leaflet-popup-content strong { font-size: var(--text-body); }
.store-map .leaflet-control-zoom a { font-size: calc(1.375rem - 1px); line-height: 40px; }
.store-map a.leaflet-popup-close-button { font-size: calc(1.375rem - 1px); line-height: 32px; }

/* Brand marks and the 18x artwork have their own display proportions. */
.apple-brand, .samsung-brand, .motorola-brand, .xiaomi-brand, .realme-brand, .infinix-brand, .hotwav-brand {
  font-size: calc(1.5rem - 1px); line-height: 1.2; letter-spacing: -.035em;
}
.boleto-offer > small { font-size: calc(clamp(1.25rem, 1rem + 1cqi, 1.75rem) - 1px); line-height: 1; }
.boleto-offer > strong { font-size: calc(var(--boleto-number) - 1px); line-height: .88; letter-spacing: -.075em; }
.boleto-offer > strong > span { font-size: calc(var(--boleto-number) * .55 - 1px); letter-spacing: -.055em; }
.boleto-art > b { font-size: var(--text-section); line-height: 1.1; letter-spacing: var(--tracking-heading); }

/* Containers grow and wrap before any text is reduced. */
.nav-wrap { gap: 1.5rem; }
.nav-wrap nav { gap: clamp(1rem, 2vw, 2rem); }
.brand-strip > .wrap { gap: 3rem; }
.brand-strip .wrap > span { white-space: normal; flex: none; }
.brand-names { gap: 1.5rem; flex-wrap: wrap; }
.catalog-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 1rem 1.5rem; }
.brand-filters { flex-wrap: wrap; gap: .375rem; }
.brand-select { display: none; }
.filter { min-height: 2.75rem; padding: .625rem .875rem; }
.filter > span { padding: .125rem .375rem; }
.catalog-search { min-height: 2.75rem; }
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.product-card { min-width: 0; }
.product-hit { display: flex; flex-direction: column; height: 100%; }
.product-top { width: 100%; gap: .5rem; flex-wrap: wrap; padding: 1.25rem 1.25rem 0; }
.product-info { width: 100%; flex: 1; display: flex; flex-direction: column; padding: .75rem 1.25rem 1rem; }
.product-info h3 { min-height: 2.6em; margin-bottom: .5rem; }
.product-tagline { min-height: 3.2em; margin-bottom: 1rem; }
.card-color-row { gap: .75rem; flex-wrap: wrap; margin-top: auto; }
.card-colors { flex-wrap: wrap; }
.color-dot { width: .75rem; height: .75rem; }
.card-payment { min-height: 5.5rem; }
.product-details { min-height: 3rem; padding: .875rem 1.25rem; }
.catalog-footer { flex-wrap: wrap; gap: 1rem; }
.availability-note { max-width: 65ch; }
.hero-panel { height: auto; min-height: clamp(634px, calc(100svh - var(--header-height) - 56px), 844px); }
.hero-copy { padding-top: 0; }
.hero h1 { margin-bottom: 1.25rem; }
.hero-copy > p { margin-bottom: 1.5rem; }
.hero-actions { flex-wrap: wrap; }
.hero-actions > .button { min-height: 3.25rem; padding: .9375rem 1.25rem; }
.hero-scene { flex: 1 0 320px; min-height: 320px; }
@media (min-width: 641px) {
  .hero h1 { font-size: calc(var(--text-hero) - 1px); margin-bottom: 1rem; }
  .hero-copy > p { font-size: calc(var(--text-body) - 1px); margin-bottom: 1.25rem; }
  .hero-scene { margin-top: 1rem; }
  .hero-actions > .button { font-size: calc(var(--text-ui) - 1px); min-height: calc(3.25rem - 4px); padding: calc(.9375rem - 2px) calc(1.25rem - 1px); }
}
.boleto-art > .eyebrow { white-space: normal; }
.boleto-copy > .button { width: 100%; padding: 1rem 1.25rem; gap: .75rem; }
.repair-services { flex-wrap: wrap; }
.service-chips { flex-wrap: wrap; gap: 1rem 1.25rem; }
.service-chips > span { width: auto; }
.repair-services > .button { white-space: normal; margin-left: 0; }
.location-map-caption { flex-wrap: wrap; gap: .5rem 1rem; }
.location-map-caption > span { flex-wrap: wrap; }
.location-map-caption > a { min-height: 2.75rem; }
.location-layout > *, .analysis-modal-layout > *, .form-grid > *, .modal-layout > * { min-width: 0; }
.analysis-modal { display: none; flex-direction: column; }
.analysis-modal[open] { display: flex; }
.analysis-modal-header { flex: none; }
.analysis-modal-scroll { min-height: 0; max-height: none; }
.form-overline { flex-wrap: wrap; gap: .75rem; }
.form-overline > span:last-child { flex-wrap: wrap; }
.analysis-steps > div { align-items: flex-start; }
.form-footnote { align-items: flex-start; text-align: center; }
.modal-colors > span { flex-wrap: wrap; gap: .5rem; }
.modal-info > .text-link { text-align: center; }
.modal-specs > div { min-width: 0; overflow-wrap: anywhere; }
.gallery-thumbnails button { width: 2.75rem; height: 2.75rem; }
.color-option { width: 2.75rem; height: 2.75rem; }
.color-option > span { width: 1.5rem; height: 1.5rem; }
.modal-colors > div { flex-wrap: wrap; }
.footer-top, .footer-bottom { flex-wrap: wrap; }
.footer-bottom { align-items: flex-start; padding-right: 4.5rem; }
.review-card { min-height: 12.5rem; }
.review-card blockquote p { letter-spacing: normal; }

/* Low-contrast fine print used to make the smallest text even harder to read. */
.product-top, .product-tagline, .card-color-row > span:last-child, .card-payment p { color: #a4b3c7; }
.availability-note, .catalog-footer > span, .faq-list details p,
.privacy-note, .form-footnote, .footer-top p, .footer-bottom,
.modal-note, .modal-specs small, .modal-payment > p { color: #a5b2c6; }
.catalog-search input::placeholder { color: #9aa8bd; }
.field input::placeholder, .field textarea::placeholder { color: #91a0b8; opacity: 1; }
.footer-top > a:last-child, .modal-info > .text-link { color: #b5c9e5; }

@media (max-width: 1190px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-wrap { gap: 1rem; }
  .nav-wrap nav { gap: 1rem; }
  .nav-contact { gap: .75rem; }
}

@media (min-width: 641px) and (max-width: 1000px) {
  .nav-contact { font-size: 0; gap: 0; width: 2.75rem; justify-content: center; }
  .analysis-modal-layout { grid-template-columns: minmax(0, 1fr); }
  .analysis-modal .analysis-copy { display: none; }
  .analysis-modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-strip > .wrap { gap: 2rem; }
  .brand-names { gap: 1rem 1.5rem; }
  .apple-brand, .samsung-brand, .motorola-brand, .xiaomi-brand, .realme-brand, .infinix-brand, .hotwav-brand { font-size: calc(1.25rem - 1px); }
  .faq-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .nav-wrap nav { position: absolute; top: var(--header-height); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.5rem; background: #101724; border-bottom: 1px solid #293d5a; }
  .nav-wrap nav.open { display: flex; }
  .nav-wrap nav > a { padding: .8125rem 0; width: fit-content; }
  .nav-contact { margin-left: auto; border-bottom: 0; }
}

@media (max-width: 640px) {
  .nav-contact { font-size: 0; width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .nav-wrap { gap: .5rem; }
  .brand-strip .wrap > span { margin-bottom: 1rem; }
  .apple-brand, .samsung-brand, .motorola-brand, .xiaomi-brand, .realme-brand, .infinix-brand, .hotwav-brand { font-size: clamp(.875rem, 4vw, 1.0625rem); white-space: nowrap; }
  .hero-panel { min-height: 0; padding-top: 1.5rem; }
  .hero-actions { flex-direction: column; gap: .75rem; }
  .hero-actions > .button { width: min(100%, 22rem); max-width: none; flex: none; white-space: normal; }
  .hero-scene { flex: 0 0 300px; min-height: 300px; margin-top: 1.25rem; }
  .catalog-section > .section-heading h2 { max-width: 100%; }
  .catalog-toolbar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; gap: .5rem; }
  .brand-filters { display: none; }
  .brand-select { display: flex; flex-direction: column; gap: .5rem; width: 100%; min-width: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
  .brand-select select { width: 100%; min-width: 0; min-height: 3rem; padding: .75rem .5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--white); font-size: 1rem; }
  .brand-select select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .filter { padding: .625rem .75rem; }
  .catalog-search { width: 100%; min-width: 0; min-height: 3rem; gap: .5rem; }
  .catalog-grid { gap: 1rem; }
  .product-top { padding: 1rem 1rem 0; }
  .product-info { padding: .75rem 1rem 1rem; }
  .product-details { padding: .875rem 1rem; }
  .catalog-footer { align-items: flex-start; flex-direction: column; }
  .catalog-footer .button { width: 100%; }
  .boleto-copy > p > br { display: none; }
  .boleto-copy > .button { min-height: 3.25rem; }
  .service-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
  .repair-services > .button { width: 100%; margin-top: 1.25rem; }
  .faq-section { display: block; }
  .faq-title br { display: none; }
  .form-overline { flex-direction: column; align-items: flex-start; }
  .analysis-modal .form-grid { grid-template-columns: minmax(0, 1fr); }
  .analysis-modal-header { padding: .625rem .75rem .625rem 1rem; }
  .analysis-modal-header > .eyebrow { max-width: 20ch; }
  .analysis-modal .form-overline { flex-direction: column; align-items: flex-start; }
  .form-footnote { justify-content: flex-start; text-align: left; }
  .modal-close { width: 2.75rem; height: 2.75rem; }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-bottom { flex-direction: column; gap: .875rem; }
  .review-card { min-height: 12rem; }
}

@media (max-width: 480px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .product-photo-wrap { height: 220px; padding: 1rem 2rem .5rem; }
  .product-info h3 { min-height: 0; }
  .product-tagline { min-height: 0; }
  .product-top, .product-info, .product-details { padding-left: 1.25rem; padding-right: 1.25rem; }
  .card-color-row { flex-wrap: nowrap; }
  .card-payment { min-height: 0; }
  .modal-specs { grid-template-columns: minmax(0, 1fr); }
  .final-cta .eyebrow { max-width: 30ch; }
}


/* Catalog and payment typography follows the shared type scale. */
.catalog-group-heading h3 { font-size: var(--text-title); line-height: 1.25; }
.catalog-group-heading > p, .card-price-label, .modal-price > span { font-size: var(--text-small); line-height: 1.6; }
.card-payment .card-price { font-size: calc(1.5rem - 1px); line-height: 1.35; }
.card-payment-plan { font-size: var(--text-small); line-height: 1.4; letter-spacing: normal; }
.card-payment-plan b { font-size: inherit; line-height: inherit; }
.modal-heading-label .product-badge { font-size: var(--text-caption); }
.modal-price > strong { font-size: calc(1.875rem - 1px); line-height: 1.3; }
.payment-option { font-size: var(--text-small); line-height: 1.4; letter-spacing: normal; }
.payment-details h3 { font-size: var(--text-ui); line-height: 1.5; }
.payment-amount { font-size: calc(1.375rem - 1px); line-height: 1.4; }
.payment-details p, .payment-breakdown { font-size: var(--text-small); line-height: 1.6; }
.payment-details .payment-detail-note { font-size: var(--text-caption); line-height: 1.65; }

.card-capacity { font-size: var(--text-small); line-height: 1.5; }
.product-stock { font-size: var(--text-caption); line-height: 1.4; letter-spacing: normal; }
.brand-names { gap: 1rem 1.5rem; }