/* Readability layer. Load after the existing campaign and catalog styles. */
:root {
  --green: #087b39;
  --green-dark: #06662f;
  --ux-muted: #605850;
  --ux-dark-muted: #d8d1ca;
}

body { line-height: 1.5; }

/* Keep the accepted price sizes and thin weights; raise supporting copy only. */
.compact-dates,
.featured-badge,
.featured-price small,
.featured-price .featured-free,
.buyback-kicker,
.buyback-discount span,
.buyback-discount-row > span,
.phone-black-friday-badge,
.buyback-hero-badge,
.price-label,
.subscription-box > .price-label,
.subscription-box > label,
.discount-badge,
.service-dialog-kicker,
.bf-hub-kicker,
.bf-card-kicker,
.bf-card-label,
.gadget-badge,
.contact-kicker,
.offer-kicker,
.home-oppo-kicker,
.free-subscription > span,
.phone-hero-buyback .price-label,
.bf-corner-badge {
  font-size: 12px;
  line-height: 1.5;
}

.compact-dates { color: var(--ux-muted); letter-spacing: .8px; }
.featured-badge,
.gadget-badge,
.bf-corner-badge { white-space: normal; overflow-wrap: break-word; }
.featured-price small,
.featured-price .featured-free { white-space: normal; }

.compact-audience,
.featured-meta,
.compact-bundle-components,
.buyback-prices dt,
.offer p,
.offer-dialog-trigger .offer-description,
.audience-card p,
.contact p,
.home-oppo-plan,
.document-explainer,
.document-offer small,
.document-bundle p,
.cost-caption,
.payment-detail,
.plan-meta,
.buyback-personalized,
.benefits li,
.fiber-benefits li,
.service-benefits small,
.service-dialog-subtitle,
.experience-copy > p,
.gadget-section-head p,
.gadget-empty,
.selection-summary,
.info-panel,
.offer-summary,
.bonus-list,
.billing-list,
.info-highlight p,
.eligibility-list {
  font-size: 15px;
  line-height: 1.65;
}

.featured-meta strong,
.bf-card-detail strong,
.home-oppo-plan strong { white-space: normal; }
.featured-note,
.featured-meta { min-height: 0; }

.featured-note,
.compact-bundle-copy small,
.compact-terms,
.buyback-prices small,
.buyback-discount del,
.buyback-total small,
.buyback-followup,
.buyback-followup small,
.buyback-cost-term,
.buyback-discount-row s,
.buyback-total-term,
.buyback-price-breakdown strong small,
.tax-note,
.phone-hero-buyback .tax-note,
.product-visual figcaption,
.price-breakdown small,
.plan-heading p,
.benefits small,
.fiber-benefits small,
.cta-note,
.agent-contact small,
.page-footer,
.subscription-note,
.gadget-image-note,
.gadget-payment-note,
.gadget-card .payment-note,
.gadget-price small,
.gadget-count,
.experience-label small,
.service-contact-note,
.service-price-meta,
.service-terms p,
.info-highlight small,
.info-panel .small-note,
.bf-card-note,
.bf-hub-terms,
.file-meta,
.pdf-resource-bar .file-meta,
.audience-card .audience-card-note,
.home-oppo-terms,
.document-bundle small,
.bundle-cta small,
.contact-info .email,
.email-contact small,
.email-cta small,
.model-tab small,
.offer-count,
.quick-select-label,
.brand-copy small,
.shell > footer {
  font-size: 13px;
  line-height: 1.65;
}

.featured-note,
.bf-card-note { color: var(--ux-dark-muted); }
.compact-bundle-components,
.compact-bundle-copy small,
.compact-terms,
.buyback-followup,
.tax-note,
.product-visual figcaption,
.plan-heading p,
.cta-note,
.page-footer,
.subscription-note,
.gadget-image-note,
.gadget-payment-note,
.gadget-card .payment-note,
.gadget-price small,
.gadget-count,
.service-contact-note,
.service-price-meta,
.service-terms p,
.info-highlight small,
.info-panel .small-note,
.bf-hub-terms,
.bf-hub-header p,
.file-meta,
.pdf-resource-bar .file-meta,
.audience-card .audience-card-note,
.offer-count,
.model-tab small,
.shell > footer { color: var(--ux-muted); }

.category-copy small,
.fiber-tab small { font-size: 13px; line-height: 1.5; color: var(--ux-muted); }
.category-copy strong { line-height: 1.35; }
.phone-select { font-size: 16px; line-height: 1.4; min-height: 44px; }
.price-breakdown { font-size: 14px; line-height: 1.65; color: var(--ux-muted); }
.price-breakdown strong { font-size: 15px; }
.phone-hero:not(.phone-hero-black-friday):not(.phone-hero-buyback) .big-price .per-month,
.fiber-price .per-month,
.service-price-period { color: #b94c00; }
.compact-bundle-price > span { color: #a94400; }
.benefits small,
.fiber-benefits small { font-size: 14px; color: var(--ux-muted); }
.benefits li,
.fiber-benefits li { align-items: flex-start; }
.benefits li > span,
.fiber-benefits li > span { min-width: 0; }
.info-panel { color: #514b55; }
.service-benefits strong { font-size: 16px; line-height: 1.5; }
.service-benefits small,
.service-dialog-subtitle { color: var(--ux-muted); }
.service-terms h3 { font-size: 15px; line-height: 1.5; }
.service-terms p { font-size: 14px; }
.service-price-meta { white-space: normal; }
.service-price-row { flex-wrap: wrap; }
.service-price-row > div { min-width: 0; }
.service-dialog-head > div { min-width: 0; }
.service-dialog-head { padding-right: 43px; align-items: flex-start; }
.service-dialog h2 { overflow-wrap: break-word; }
.service-dialog-close,
.bf-hub-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.bf-hub-header { margin-right: 48px; }
.bf-hub-header p { font-size: 15px; line-height: 1.65; }
.bf-card-detail { font-size: 15px; line-height: 1.6; min-height: 0; }
.bf-tab-label { font-size: 12px !important; line-height: 1.5 !important; letter-spacing: .4px; }
.bf-banner-hint { font-size: clamp(12px, 1.5cqw, 14px); line-height: 1.2; }

.gadget-name { font-size: 16px; line-height: 1.5; min-height: 0; }
.gadget-select-label,
.clear-gadget { font-size: 13px; line-height: 1.5; }
.clear-gadget { min-height: 44px; }
.gadget-payment-note,
.gadget-card .payment-note { margin-bottom: 2px; }
.experience-copy .experience-label { font-size: 13px; line-height: 1.5; }
.fiber-main .streaming-details > span { font-size: 15px; line-height: 1.6; }
.experience-label small,
.experience-copy .experience-label,
.experience-copy > p,
.streaming-details { color: var(--ux-dark-muted); }
.gadget-card.black-friday .gadget-payment-note,
.gadget-card.black-friday .payment-note,
.gadget-card.black-friday .gadget-price small,
.phone-hero-black-friday .tax-note,
.phone-hero-buyback .tax-note,
.phone-hero-buyback .product-visual figcaption { color: var(--ux-dark-muted); }

.featured-cta,
.buyback-actions a,
.compact-bundle-whatsapp,
.offer-link-cta,
.catalog-more,
.document-details,
.service-whatsapp,
.whatsapp,
.email-contact,
.pdf-resource-actions a,
.pdf-footer-actions a { font-size: 14px; line-height: 1.5; min-height: 44px; }
.featured-cta { gap: 8px; text-align: center; }
.offer h2,
.offer-dialog-trigger .offer-title { font-size: 18px; line-height: 1.4; min-height: 0; }
.offer .offer-term { font-size: 13px; line-height: 1.6; min-height: 0; }
.offer-top { align-items: flex-start; }
.offer-kicker { color: #625b54; }
.contact p { color: #d0d0d0; }
.conditions summary { font-size: 15px; line-height: 1.5; min-height: 28px; }
.conditions details p,
.conditions ul { font-size: 14px; line-height: 1.75; color: #59534d; }
.email-cta small,
.email-contact small { font-size: 12px; }
.email-cta strong { font-size: 15px; }
.email-contact { overflow-wrap: anywhere; }
.contact-kicker { letter-spacing: 1px; }

/* White CTA text has at least 4.5:1 against every resting and hover green. */
.compact-bundle-whatsapp,
.buyback-actions .buyback-whatsapp,
.bundle-cta,
.service-whatsapp,
.whatsapp,
.offer-cta,
.mobile-offer-bar-cta {
  background: #087b39;
  border-color: #087b39;
  color: #fff;
}
.compact-bundle-whatsapp:hover,
.buyback-actions .buyback-whatsapp:hover,
.bundle-cta:hover,
.service-whatsapp:hover,
.whatsapp:hover,
.offer-cta:hover,
.mobile-offer-bar-cta:hover {
  background: #06662f;
  border-color: #06662f;
  color: #fff;
}
.compact-bundle-whatsapp,
.whatsapp { white-space: normal; text-align: center; }
.bundle-cta small { color: #fff; }
.offer-cta > span,
.fiber-actions .offer-cta > span { font-size: 16px; line-height: 1.5; }

/* Grid and flex children can wrap at narrow widths without widening the page. */
.compact-heading,
.compact-bundle-copy,
.featured-title,
.featured-meta,
.buyback-prices > div,
.category-copy,
.fiber-tab,
.offer-heading,
.fiber-heading,
.gadget-name,
.offer h2,
.offer-dialog-trigger .offer-title,
.bf-card-copy,
.info-panel { min-width: 0; overflow-wrap: break-word; }
.compact-bundle-price,
.buyback-total-amount,
.buyback-price-breakdown strong { flex-wrap: wrap; }
.buyback-price-breakdown strong { white-space: normal; }
.mobile-offer-bar { display: none; }
.mobile-offer-bar[hidden] { display: none !important; }

/* The hint has its own row so readable text never covers the campaign artwork. */
.campaign-art[data-bf-open] { aspect-ratio: auto; }
.campaign-art img { position: static; width: 100%; height: auto; transform: none; }
.campaign-art .bf-banner-hint {
  position: static;
  width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}
.compact-banner { padding: 0; }

@media (max-width: 700px) {
  .brand-copy strong { font-size: 12px; line-height: 1.4; }
  .brand-copy small { font-size: 12px; line-height: 1.4; letter-spacing: 0; }
  .header-right .nav-link[href='#contact'] { font-size: 12px; }
  .featured-title { font-size: 17px; line-height: 1.35; }
  .featured-card { padding: 13px 12px; }
  .featured-cta { padding: 10px 7px; font-size: 13px; }
  .compact-audience { align-items: flex-start; }
  .compact-audience svg { margin-top: 2px; }
  .compact-bundle h2 { font-size: 18px; line-height: 1.4; }
  .compact-bundle-whatsapp { font-size: 15px; }
  .buyback-prices dt { min-height: 0; }
  .buyback-price > span,
  .buyback-total-amount > span { font-size: 13px; line-height: 1.5; }
  .buyback-total-label,
  .buyback-cost-label { font-size: 15px; line-height: 1.5; }
  .buyback-discount { min-height: 0; }
  .buyback-device-price { padding-top: 0; }
  .buyback-prices dd { margin-top: 6px; }
  .buyback-followup { padding: 0; }
  .bf-hub-header { margin-right: 45px; }
  .bf-hub-close,
  .service-dialog-close { top: 10px; right: 10px; }
  .bf-hub-card h3 { overflow-wrap: break-word; }
  .service-dialog-head { gap: 10px; padding-right: 42px; }
  .service-dialog-icon { width: 35px; height: 35px; }
  .service-dialog h2 { font-size: 23px; line-height: 1.3; }
  .service-whatsapp { font-size: 15px; }
  .service-whatsapp > svg:first-child { margin-left: 0; }
  .service-whatsapp .cta-arrow { display: none; }

  .mobile-offer-bar {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-top: 1px solid #ded7cf;
    background: #fff;
    color: #171717;
    box-shadow: 0 -5px 20px #17171712;
  }
  .mobile-offer-bar-copy { min-width: 0; flex: 1; font-size: 12px; line-height: 1.45; }
  .mobile-offer-bar-copy > span,
  .mobile-offer-bar-copy > small { display: block; font-size: 12px; line-height: 1.4; color: #5c5148; }
  .mobile-offer-bar-price { display: block; font-size: 20px; line-height: 1.3; font-weight: 400; }
  .mobile-offer-bar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 1 auto;
    min-height: 44px;
    max-width: 57%;
    padding: 10px 13px;
    border: 1px solid #087b39;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  .mobile-offer-bar-cta svg { width: 19px; height: 19px; flex: none; }
  .mobile-offer-bar-cta:focus-visible { outline: 3px solid #171717; outline-offset: 3px; }
  body.has-mobile-offer-bar { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  html:has(body.has-mobile-offer-bar) { scroll-padding-bottom: calc(105px + env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  /* The two PDF actions stay together and secondary to the catalog content. */
  .shell > header:has(.header-actions) { height: auto; min-height: 100px; padding: 10px 0; gap: 10px; }
  .shell > header:has(.header-actions) .brand { gap: 8px; }
  .shell > header:has(.header-actions) .brand-logo { width: 36px; height: 36px; }
  .shell > header:has(.header-actions) .brand-copy { min-width: 0; }
  .header-actions .pdf-action-group { width: 118px; grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .header-actions .pdf-action-group .header-download { width: 100%; min-height: 38px; padding: 6px 3px; font-size: 12px; line-height: 1.35; white-space: normal; text-align: center; background: transparent; }
  .header-actions .pdf-action-group .header-download svg { display: none; }
  .category-copy strong { font-size: 16px; line-height: 1.35; letter-spacing: -.2px; }
  .category-copy small,
  .fiber-tab small { font-size: 13px; line-height: 1.5; }
  .category-tab { gap: 8px; padding: 14px 11px; }
  .category-tab > svg { width: 20px; height: 20px; }
  .offer-heading,
  .fiber-heading { min-height: 0; }
  .offer-heading h1,
  .fiber-heading h1 { line-height: 1.2; }
  .model-tab { font-size: 14px; }
  .quick-select-label,
  .offer-count,
  .model-tab small { font-size: 12px; }
  .info-tab { font-size: 13px; line-height: 1.5; }
  .info-panel { padding: 22px 19px; min-height: 0; }
  .fiber-main .info-panel { min-height: 0; }
  .offer-cta { font-size: 16px; }
  .gadget-name { font-size: 15px; line-height: 1.5; }
  .gadget-card { padding: 15px 12px; }
  .gadget-price small { font-size: 13px; }
  .gadget-section-head p { font-size: 15px; }
  .gadget-badge { font-size: 12px; }
  .experience-copy > p,
  .fiber-main .streaming-details > span { font-size: 15px; }
}

@media (max-width: 480px) {
  .benefits,
  .fiber-benefits { grid-template-columns: minmax(0, 1fr); }
  .benefits li,
  .benefits li:nth-child(odd),
  .benefits li:nth-child(even),
  .fiber-benefits li,
  .fiber-benefits li:nth-child(odd),
  .fiber-benefits li:nth-child(even) { padding: 12px 0; border-left: 0; gap: 12px; font-size: 15px; }
  .benefits li + li,
  .fiber-benefits li + li { border-top: 1px solid var(--line); }
  .benefits svg,
  .fiber-benefits svg { width: 25px; height: 25px; margin-top: 2px; }
  .benefits small,
  .fiber-benefits small { font-size: 15px; }
  .fiber-main .streaming-details { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .buyback-price-breakdown { grid-template-columns: minmax(0, 1fr); }
  .buyback-price-breakdown > div + div { border-top: 1px solid #4a4240; padding-top: 12px; }
}

@media (max-width: 360px) {
  .category-tabs .category-copy strong { font-size: 14px; overflow-wrap: normal; }
  .featured-card { padding: 12px 10px; }
  .featured-title { font-size: 16px; }
  .featured-cta { font-size: 13px; gap: 5px; padding-left: 4px; padding-right: 4px; }
  .featured-cta svg { width: 14px; height: 14px; }
  .compact-dates { letter-spacing: .4px; }
  .buyback-prices { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .buyback-prices > div + div { padding: 13px 0 0; border-left: 0; border-top: 1px solid #555; }
  .bf-card-main { gap: 10px; }
  .bf-card-visual,
  .bf-card-symbol { width: 62px; }
  .bf-card-tv { width: 75px; }
  .gadget-name { font-size: 15px; }
  .gadget-payment-note,
  .gadget-card .payment-note { font-size: 13px; }
}
