/* Only the iPhone app comparison article; shared site styles stay unchanged. */
.roundup { padding-block: 36px 72px; }
.roundup-breadcrumb { font-size: 0.82rem; color: var(--brand-muted); margin-bottom: 24px; }
.roundup-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.roundup-breadcrumb li + li::before { content: " / "; margin-right: 8px; }
.roundup-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; }
.roundup-content { min-width: 0; overflow-wrap: anywhere; }
.roundup-content h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -0.035em; margin: 8px 0 24px; }
.roundup-content h2 { font-size: 1.65rem; line-height: 1.25; margin: 56px 0 20px; }
.roundup-content h3 { font-size: 1.25rem; line-height: 1.4; margin: 32px 0 16px; }
.roundup-content h4 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 12px; }
.roundup-content :is(h2, h3, h4) { scroll-margin-top: 96px; }
.roundup-content p { margin: 0 0 18px; }
.roundup-content a { text-decoration: underline; text-underline-offset: 3px; }
.roundup-content li { margin-bottom: 10px; }
.roundup-content .kicker { font-size: 0.8rem; color: var(--brand-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.roundup-toc { position: sticky; top: 96px; max-height: calc(100dvh - 120px); overflow-y: auto; font-size: 0.8rem; line-height: 1.45; }
.roundup-toc p { margin: 0 0 14px; font-weight: 700; }
.roundup-toc ol, .roundup-mobile-toc ol { list-style: none; padding: 0; margin: 0; }
.roundup-toc li { margin: 0 0 12px; }
.roundup-toc a { color: var(--brand-muted); display: block; }
.roundup-toc a:hover { color: var(--brand-red); }
.roundup-mobile-toc { display: none; }
.roundup-content .app-card { padding-block: 28px; border-top: 1px solid var(--brand-line); }
.app-card .app-store-link { font-size: 0.85rem; }
.app-card .app-fact { margin-bottom: 8px; }
.app-card .app-fact strong:first-child { display: inline-block; min-width: 5.25em; }
.app-card .app-caution { padding: 14px 16px; background: var(--brand-soft); border-radius: var(--radius-sm); }
.roundup-table-scroll { overflow-x: auto; margin: 20px 0; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); }
.roundup-table-scroll:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.roundup-table-scroll table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.88rem; line-height: 1.5; }
.roundup-table-scroll th, .roundup-table-scroll td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--brand-line); }
.roundup-table-scroll thead th { background: var(--brand-soft); }
.roundup-table-scroll tbody th { font-weight: 600; }
.roundup-table-scroll tr:last-child td { border-bottom: 0; }
.roundup-content .faq-item { margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--brand-line); background: none; }
.roundup-content .faq-item h3 { margin-top: 0; }
.roundup-content .store-badges { margin-top: 32px; }
@media (max-width: 1000px) {
  .roundup-layout { display: block; }
  .roundup-toc { display: none; }
  .roundup-mobile-toc { display: block; padding: 14px 16px; margin: 0 0 24px; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); }
  .roundup-mobile-toc summary { cursor: pointer; font-weight: 600; }
  .roundup-mobile-toc ol { padding-top: 16px; }
  .roundup-mobile-toc li { margin: 0 0 12px; }
}
@media (max-width: 767px) {
  .roundup-table-scroll { overflow-x: visible; border: 0; border-radius: 0; }
  .roundup-table-scroll table { min-width: 0; }
  .roundup-table-scroll thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .roundup-table-scroll tbody tr {
    display: block; margin-bottom: 12px;
    border: 1px solid var(--brand-line); border-radius: var(--radius-sm);
  }
  .roundup-table-scroll tbody th {
    display: block; border-bottom: 1px solid var(--brand-line);
  }
  .roundup-table-scroll tbody td {
    display: flex; gap: 10px; border-bottom: 1px solid var(--brand-line);
  }
  .roundup-table-scroll tbody tr td:last-child { border-bottom: 0; }
  .roundup-table-scroll tbody td::before {
    content: attr(data-label); flex: 0 0 34%;
    color: var(--brand-muted); font-size: 0.72rem; letter-spacing: 0.04em;
    text-transform: uppercase; font-weight: 600;
  }
  .roundup-cell-value { min-width: 0; flex: 1; }
}
@media (max-width: 600px) {
  .roundup { padding-inline: 20px; padding-top: 24px; }
  .roundup-content h2 { font-size: 1.5rem; margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.roundup) { scroll-behavior: auto; }
}