/* Handset reading, reach and wide blocks.
   Everything except the anchor offset sits behind the handset breakpoint, so the
   desktop page is untouched. Content and its order never change; what changes is
   how large it is, how easily it can be hit, and how a block too wide for the
   screen is handled. */
@layer natural-renewal {
  /* An in-page anchor must not land underneath the fixed header. */
  body.iyu-mobile-refined { scroll-padding-top: 92px; }

  @media (max-width: 768px) {
    /* ── Reading scale ──
       The desktop sheets are unlayered, so an !important declaration inside this
       layer wins over theirs whatever their specificity. That is the only way to
       lift sizes the older sheets pinned for a 1440px screen.

       The size utilities read from these two variables, so raising them lifts
       every utility-sized label at once. Line heights are ratios and follow. */
    body.iyu-mobile-refined { --text-xs: .8125rem; --text-sm: .9063rem; }

    /* Small labels, captions and meta lines that pin their own size. */
    body.iyu-mobile-refined :is(
      .iyu-photo-note, .e-imgnote, .e-caption, .e-figcaption, figcaption,
      .e-figure figcaption, .iyu-viz figcaption, .iyu-viz-eyebrow, .iyu-viz-option dt,
      .e-metric-basis, .e-metric-badge, .e-stats-basis,
      .case-kicker, .case-breadcrumb, .case-review, .case-summary span,
      .v3-stat-label, .v3-section-label, .v3-badge-new, .v3-roi-badge,
      .v3-compare-table th, .v3-cite-role, .v3-highlight-quote cite,
      .iyu-story-card__eyebrow, .iyu-story-card__result b,
      .iyu-answer-hub-kicker, .iyu-answer-hub-meta,
      .iyu-news-item__kind, .iyu-news-item__meta, .iyu-news-item__links a,
      .iyu-patent-status, .iyu-patent-table thead th, .iyu-factstrip dt,
      .iyu-connect-backbone, .iyu-connect-backbone b, .iyu-connect-tag code,
      .iyu-connect-head span, .iyu-connect-node span, .iyu-connect-node small,
      .iyu-connect-hop span, .iyu-connect-map figcaption,
      .iyu-stack__rail span, .iyu-stack__layers > li em, .iyu-logo-tile span,
      .iyu-arch-how, .iyu-support-link, .iyu-qna-btn, .iyu-uboard-preview-title,
      span.font-mono[class*="tracking-wid"], .iyu-home-cases span.rounded-full,
      .uq-badge, .uq-step, .uq-console-live, .uq-console-brand span,
      .uq-console-row span, .uq-console-row strong, .uq-console-summary small,
      .uq-flow-item span, .uq-lifecycle p,
      .ai-badge, .ai-chip, .ai-num, .ai-diag-head, .ai-diag-axis small,
      .ai-console-live, .ai-console-brand span, .ai-console-row small,
      .ai-console-row strong, .ai-console-foot small, .ai-layer span,
      .ai-step-no, .ai-steps em, .ai-eyebrow, .ai-cap-code, .ai-why-code,
      .uq-eyebrow, .uq-module-code,
      span[class*="uppercase"][class*="tracking-wid"],
      [class*="text-[10px]"], [class*="text-[11px]"], [class*="text-[12px]"],
      a[class*="rounded-full"][class*="font-mono"],
      .iyu-bp :is(.lab,.field,.note,.flow em), .iyu-bp .node span,
      :is(div,span,p)[class*="rounded-full"][class*="px-3"],
      :is(div,span,p)[class*="inline-block"][class*="px-3"][class*="py-1"]
    ) { font-size: 13px !important; }
    /* The drawer and the footer legal line were the quietest text on the page. */
    body.iyu-mobile-refined .iyu-mobile-drawer-inner section h2 { font-size: 14px !important; }
    body.iyu-mobile-refined .iyu-mobile-footer-legal,
    body.iyu-mobile-refined .iyu-mobile-footer-legal :is(a,p,span,small,strong,em) {
      font-size: 13.5px !important;
    }

    body.iyu-mobile-refined :is(th,td) { font-size: 13.5px !important; }
    body.iyu-mobile-refined dt { font-size: 14px !important; }
    /* Emphasis inside a sentence should read at the sentence's size. */
    body.iyu-mobile-refined :is(small,em,b,strong,i,sub,sup,code) { font-size: inherit !important; }
    body.iyu-mobile-refined .iyu-mobile-footer-shell :is(h2,h3) { font-size: 14px !important; }
    /* A call to action should not be quieter than the sentence above it. */
    body.iyu-mobile-refined :is(a,button):is([class*="py-4"],[class*="px-8"],[class*="px-10"],.btn,.v3-btn) {
      font-size: 15px !important;
    }

    /* ── Reach: a thumb needs about 44px ── */
    body.iyu-mobile-refined :is(footer,.iyu-mobile-footer-shell,.iyu-support-nav,.iyu-news-item__links) a {
      display: inline-flex !important; align-items: center; min-height: 44px !important;
    }
    body.iyu-mobile-refined .iyu-locale-toggle { min-height: 44px !important; }
    body.iyu-mobile-refined :is(#iyu-mobile-dock,.dock) a { min-height: 52px !important; }

    /* ── The section tab bar could not be reached at all ──
       As a flex item the list refused to shrink below its own content, so its
       overflow never engaged: the end tabs sat outside the page and were clipped
       away with no way to scroll to them. */
    body.iyu-mobile-refined .iyu-support-nav ul {
      min-width: 0; flex: 1 1 0%;
      scroll-snap-type: x proximity; scroll-padding-inline: 4px;
    }
    body.iyu-mobile-refined .iyu-support-nav li { scroll-snap-align: start; }
    body.iyu-mobile-refined .iyu-support-nav a {
      height: 44px !important; padding: 0 14px !important; font-size: 13.5px !important;
    }
    body.iyu-mobile-refined .iyu-support-nav__inner { overflow: hidden; }

    /* ── Blocks a phone cannot show at once ──
       Pannable, with the continuing side faded so it is clear there is more. */
    body.iyu-mobile-refined .iyu-m-pan {
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      /* Centring an overflowing child puts its left edge out of reach of any
         scroll, so a pannable block always starts at its own beginning. */
      justify-content: flex-start !important;
      align-items: flex-start !important;
      text-align: left !important;
    }
    body.iyu-mobile-refined .iyu-m-pan::-webkit-scrollbar { display: none; }
    body.iyu-mobile-refined [data-m-edge="end"] {
      -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%);
      mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%);
    }
    body.iyu-mobile-refined [data-m-edge="start"] {
      -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 32px,#000 100%);
      mask-image: linear-gradient(90deg,transparent 0,#000 32px,#000 100%);
    }
    body.iyu-mobile-refined [data-m-edge="both"] {
      -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
      mask-image: linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
    }

    /* ── A comparison table cannot hold three columns on a phone ──
       Each row becomes its own block: the criterion, then one labelled line per
       column. The roles carried in the markup keep the table semantics intact,
       so a screen reader still reads it as a table. */
    body.iyu-mobile-refined table.iyu-m-stack {
      display: block; width: 100%; min-width: 0 !important; border-collapse: separate;
    }
    body.iyu-mobile-refined table.iyu-m-stack :is(thead,tbody,tr,th,td) { display: block; }
    body.iyu-mobile-refined table.iyu-m-stack thead {
      position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%);
    }
    body.iyu-mobile-refined table.iyu-m-stack tr {
      border: 1px solid var(--e-line,#dce5e8) !important; border-radius: 10px;
      padding: 14px 16px; margin-bottom: 12px; background: var(--e-paper,#fffefa);
    }
    body.iyu-mobile-refined table.iyu-m-stack td { padding: 0 !important; border: 0 !important; }
    body.iyu-mobile-refined table.iyu-m-stack td:first-child {
      font-size: 15.5px !important; font-weight: 700; line-height: 1.5;
      padding-bottom: 10px !important; margin-bottom: 12px;
      border-bottom: 1px solid var(--e-line,#dce5e8) !important;
    }
    body.iyu-mobile-refined table.iyu-m-stack td + td { margin-top: 12px; }
    body.iyu-mobile-refined table.iyu-m-stack td:not(:first-child)::before {
      content: attr(data-label); display: block;
      font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: var(--e-accent,#326581); margin-bottom: 4px;
    }
    /* The wrapper no longer has anything to scroll once the table stacks. */
    body.iyu-mobile-refined :is([class*="overflow-x-auto"]):has(> table.iyu-m-stack) { overflow-x: visible; }
  }
}