/* Larger text for the areas marked in pig-1, pig-2, and pig-3. */
.ticker span { font-size: 1.125rem; }
.section-nav a, .mobile-header-nav a { font-size: 1rem; min-height: 44px; line-height: 1.35; }
.section-kicker { font-size: 1rem; line-height: 1.5; letter-spacing: .1em; }
.split-intro > p:last-child, .subfeature-copy > p:last-child { font-size: 1.25rem; line-height: 1.65; }
.search-path-grid span { font-size: 1rem; line-height: 1.5; letter-spacing: .08em; }
.search-path-grid h3 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.12; }
.search-path-grid p { font-size: 1.25rem; line-height: 1.6; }
.rating-card { gap: 24px; }
.rating-card span { font-size: 1.125rem; line-height: 1.4; max-width: none; }
@media (max-width: 620px) {
  /* Keep shortcut menus on a single swipeable row. */
  .section-nav { flex-wrap: nowrap; overflow-x: auto; gap: 9px; }
  .section-nav a { padding: 9px 14px; }
  .rating-card { min-height: 155px; }
}

/* Additional text marked in IMG_9570 and IMG_9571. */
.screenshot-card p { font-size: 1.25rem; line-height: 1.6; }
.hero .eyebrow { font-size: 1rem; line-height: 1.5; }
.hero .hero-lede { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.65; }
.hero .hero-lede { color: #fff; font-weight: 700; }
.hero .hero-lede .hero-price-highlight { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.site-header .header-cta { font-size: 1rem; min-height: 44px; }

/* All repeated shortcut menus behave like the mobile header menu. */
.section-nav, .mobile-header-nav {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
}
.section-nav::-webkit-scrollbar, .mobile-header-nav::-webkit-scrollbar { display: none; }
.section-nav a, .mobile-header-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}
@media (max-width: 620px) {
  .site-header .header-cta { font-size: 1rem; padding: 9px 8px; }
  .site-header { min-height: 136px; }
}
@media (max-width: 380px) {
  .site-header .header-cta { padding-inline: 9px; }
}

/* Emphasize affordable prices and available chart history. */
.pny-text-highlight { color: #e00000; font-size: 1.45em; font-weight: 900; line-height: 1.25; }
#discover .pny-text-highlight, #search .pny-text-highlight { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }

/* Annotated search controls inside their matching colored cards. */
.search-path-grid article > div { min-width: 0; }
.search-path-grid .search-location-image { display: block; width: 100%; max-width: 420px; height: auto; margin: 24px auto 0; border: 2px solid var(--ink); border-radius: 16px; }

/* Official PennyGems app logo supplied by the owner. */
.brand .brand-mark { display: block; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border-radius: 10px; background: url("./etfon-logo.png") center / contain no-repeat; }

/* Final download section: phone left, larger download cards right. */
.closing { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
.closing > div { grid-column: 2; grid-row: 1; min-width: 0; }
.closing .closing-phone { grid-column: 1; grid-row: 1; width: min(90%, 420px); }
.closing .store-links { max-width: 584px; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 80px; }
.closing .store-links a::after { min-height: 52px; font-size: 22px; }
@media (min-width: 701px) and (max-width: 1100px) {
  .closing .store-links { grid-template-columns: minmax(0, 240px); gap: 64px; justify-content: end; }
}
@media (max-width: 700px) {
  .closing { grid-template-columns: minmax(0, 1fr) minmax(180px, 1.25fr); gap: 24px 20px; min-height: 0; padding-block: 64px; }
  .closing > div { display: contents; }
  .closing .section-kicker, .closing h2, .closing > div > p { grid-column: 1 / -1; margin-block: 0; }
  .closing .closing-phone { grid-column: 1; grid-row: 4; width: 100%; margin: 0; align-self: center; transform: none; }
  .closing .store-links { grid-column: 2; grid-row: 4; grid-template-columns: minmax(0, 240px); gap: 64px; max-width: 240px; justify-self: end; }
}

/* Readable labels and supporting text on dark surfaces. */
.hero .hero-note span { color: #fff; font-size: 1rem; font-weight: 750; line-height: 1.4; }
.dark-section .wide-intro > p:last-child,
.dark-section .tool-copy > p:not(.section-kicker),
.dark-section .screenshot-card p,
.dark-section .feed-story-grid p { color: #f1f5f3; }
.dark-section .feed-story-grid article > span { color: #fff; }
.closing p:not(.section-kicker) { color: #fff; }
.site-footer > p { color: #edf3ef; font-size: 1rem; line-height: 1.6; }
.site-footer nav { font-size: 1rem; }
.site-footer nav a { color: #fff; }

/* Stronger captions for the four search workflow screenshots. */
#search .screenshot-card h3 { color: #000; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
#search .screenshot-card p { color: #000; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }

/* Larger, bold white captions for the portfolio-to-chart workflow. */
.flow .screenshot-card h3 { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.flow.dark-section .screenshot-card p { color: #fff; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }

/* Larger, bold black captions for the ETF details screenshots. */
#details .screenshot-card h3 { color: #000; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
#details .screenshot-card p { color: #000; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }

/* Larger, bold white captions for the ETF screener workflow. */
.screener .screenshot-card h3 { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.screener.dark-section .screenshot-card p { color: #fff; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }

/* Larger, bold white captions for ETF news. */
.alerts-feeds .screenshot-card h3 { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.alerts-feeds.dark-section .screenshot-card p { color: #fff; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }

/* Larger, bold black captions for Favorites and the market overview. */
.favorites .screenshot-card h3, .market .screenshot-card h3 { color: #000; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.favorites .screenshot-card p, .market .screenshot-card p,
.favorites .favorites-subfeature > p:not(.section-kicker) { color: #000; font-size: 1.375rem; font-weight: 700; line-height: 1.5; }

/* Consistent emphasis for the requested explanatory copy. */
#top section p.etfon-readable-copy,
#top section h3.etfon-readable-copy { color: #000; font-size: 1.5rem; font-weight: 700; line-height: 1.55; }
#top section .etfon-readable-copy .pny-text-highlight { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
main .dark-section .etfon-readable-copy { background: #eaf6ef; padding: 20px 24px; border-radius: 16px; }
@media (max-width: 600px) { main .dark-section .etfon-readable-copy { padding: 16px; } }


/* Complete the larger, bold supporting notes and closing copy. */
#top .honesty-note, #top .honesty-note span,
#top .favorites .distinction, #top .favorites .distinction span { color: #000; font-size: 1.5rem; font-weight: 700; line-height: 1.55; }
#top .closing > div > p:not(.section-kicker),
#top .site-footer > p { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.55; }

/* Repeated navigation before the additional section introductions. */
.added-section-nav { grid-column: 1 / -1; width: 100%; }
.dark-section .added-section-nav a { color: #fff; border-color: #ffffff80; }
.dark-section .added-section-nav a:first-child { background: #fff; color: #0b1712; }

/* Remove the space reserved for the old, removed Favorites phone pair. */
.favorites .paired-phones:empty { display: none; }
.favorites-layout:has(> .paired-phones:empty) { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* Navigation above portfolio search and immediately before the disclaimer. */
.search-path-grid .portfolio-section-nav { grid-column: 1 / -1; margin: 0 0 16px; }
#top .site-footer .footer-section-nav { grid-column: 1 / -1; margin: 0; justify-content: flex-start; }
#top .site-footer .footer-section-nav a { color: #fff; border-color: #ffffff80; }
#top .site-footer .footer-section-nav a:first-child { color: #0b1712; background: #fff; }
#top .site-footer > p { grid-area: auto; grid-column: 1 / -1; }