/* The Nexus Pivot — one system stylesheet.
 * Consolidates styles-20260727d + store-badges + polish + editorial +
 * compare-offline + newsletter + the touch-fixes overlay, with the overlay's
 * corrections integrated into the rules they patched. rem converted to the
 * base px ladder; dead rules deleted; two heading scales; one table system.
 * /assets/* is immutable for a year: never edit this file in place — ship a
 * new filename and repoint the pages.
 */

:root {
  color-scheme: light;
  --ink: #111111;
  --muted: #666666;
  --line: #e6e6e6;
  --soft: #f7f7f7;
  --paper: #ffffff;
  --brand: #111111;
  --accent: #b84d14;
  --accent-soft: #fff0e7;
  --accent-line: #fed7aa;
  --accent-ink: #7c2d12;
  --blue: #3077d6;
  --gold: #e0b51b;
  --deep: #101828;
  --shadow: 0 22px 70px rgba(17, 17, 17, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ffffff;
  --muted: #c7c7c7;
  --line: #454545;
  --soft: #1b1b1b;
  --paper: #0b0b0b;
  --brand: #ffffff;
  --accent: #ff8a3d;
  --accent-soft: #2a1408;
  --accent-line: #9a3412;
  --accent-ink: #ffb37a;
  --blue: #5b9bff;
  --gold: #ffd34d;
  --deep: #f4f7fb;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

:root[data-theme="dark"] body {
  background: var(--paper);
}

a {
  color: var(--brand);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 20;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(230, 230, 230, 0.86);
  background: rgba(255, 247, 241, 0.9);
  backdrop-filter: blur(16px);
}

:root[data-theme="dark"] .site-header {
  border-bottom-color: rgba(47, 47, 47, 0.86);
  background: rgba(12, 12, 12, 0.9);
}

.nav {
  display: flex;
  max-width: 1120px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 18px 24px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 850;
  letter-spacing: 0;
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

:root[data-theme="dark"] .brand-mark {
  color: #111111;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  padding: 0 2px;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--brand);
}

.theme-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 14px;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.utility-toggle {
  display: flex;
  justify-content: flex-end;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px 0;
}

.hero,
.support-hero,
.section,
.legal-page,
.contact-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px;
}

.hero {
  position: relative;
  display: flex;
  min-height: 610px;
  align-items: center;
  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(50%, 560px);
}

.hero h1,
.hero .lead {
  max-width: 560px;
}

.hero-media,
.product-screen-stage {
  position: absolute;
  top: 50%;
  right: 0;
  width: 44%;
  height: 520px;
  transform: translateY(-50%);
}

.hero-media {
  overflow: hidden;
}

.app-preview {
  position: absolute;
  width: 43%;
  margin: 0;
}

.app-preview > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.app-preview figcaption {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.app-preview figcaption img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.app-preview-pdf {
  top: 14px;
  left: 4%;
  z-index: 2;
}

.app-preview-video {
  right: 2%;
  bottom: -150px;
  z-index: 1;
}

.product-screen-stage {
  overflow: visible;
}

.product-screen {
  position: absolute;
  display: block;
  width: 58%;
  max-height: 500px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.product-screen-main {
  top: 0;
  right: 0;
  z-index: 2;
}

.product-screen-secondary {
  left: 0;
  bottom: 0;
  z-index: 1;
}

.single-screen-stage .product-screen-main {
  right: 8%;
  width: 62%;
}

.support-hero {
  padding-bottom: 42px;
  text-align: center;
}

.support-hero.compact {
  padding-bottom: 28px;
}

.pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 0 18px;
  text-transform: uppercase;
}

:root[data-theme="dark"] .pill {
  background: rgba(17, 17, 17, 0.82);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}

h1 {
  font-size: clamp(44px, 7vw, 72px);
  letter-spacing: 0;
}

h2 {
  font-size: clamp(26px, 4vw, 38px);
}

h3 {
  font-size: 21px;
}

/* One vertical rhythm for running content, whichever page family renders it.
   Before this, the gap above an h2 was 0, 32 or 38px depending on which
   stylesheets a page happened to load. */
main h2 {
  margin-top: 32px;
}

main h3 {
  margin-top: 22px;
}

.hero h2,
.hero h3,
main h2:first-child,
.section-inner > h2:first-child {
  margin-top: 0;
}

.lead {
  max-width: 660px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 20px;
}

.hero .lead {
  margin-left: 0;
  margin-right: 0;
}

.hero .actions .button {
  flex: 0 1 190px;
}

.section.alt {
  max-width: none;
  background: var(--soft);
}

.section-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 24px;
}

:root[data-theme="dark"] .card {
  background: rgba(17, 17, 17, 0.92);
}

.card p {
  margin: 12px 0 0;
  color: var(--muted);
}

:root[data-theme="dark"] .contact-panel {
  background: rgba(17, 17, 17, 0.92);
}

:root[data-theme="dark"] .button:not(.primary) {
  background: #1b1b1b;
}

.button-row,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  min-width: 0;
  flex: 1 1 160px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f3f3f3;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding: 11px 22px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

:root[data-theme="dark"] .button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #111111;
}

a:focus-visible,
.button:focus-visible,
.theme-toggle:focus-visible,
.store-badge-link:focus-visible,
.check-field input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 34px;
}

.principle {
  border-top: 3px solid var(--accent);
  padding: 20px 0 0;
}

.principle:nth-child(2) {
  border-top-color: var(--blue);
}

.principle:nth-child(3) {
  border-top-color: var(--gold);
}

.principle p {
  margin: 12px 0 0;
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

.catalog-grid {
  margin-top: 42px;
}

.catalog-page {
  max-width: 1120px;
}

.catalog-intro {
  max-width: 760px;
}

.catalog-page h1 {
  max-width: 760px;
}

@media (min-width: 1000px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.product-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 500;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--line);
}

.product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.product-card-body > p {
  margin: 0;
}

.product-card .button {
  width: fit-content;
  max-width: 100%;
  flex: none;
}

.product-card-body > .button,
.product-card-body > .product-card-actions {
  margin-top: auto;
}

.product-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Card CTAs must start on one line across a row of cards. The trailing element differs by
   card — some end with a store-badge row, the Mac card with a second button — so the block
   BELOW the primary button has to be the same height everywhere: one button-height, one
   standard gap. Without this the Mac card's primary button sat 12px lower than its
   neighbours' (measured 1891 vs 1879 on the homepage). */
.product-card-body > .store-badges {
  margin-top: 0;
  min-height: 48px;
}

.product-card-body > .product-card-actions {
  gap: 18px;
}

/* Cards sit side by side, so a heading that wraps to two lines used to push that card's body
   text below its neighbours' (measured 1305 vs 1328 on /games/, 2488 vs 2511 on the Mac page).
   Reserving two lines lines the body copy up across a row. `lh` keeps this tied to the actual
   line height rather than a pixel guess, and card height is unchanged because the cards already
   stretch to a common height. */
.grid > .card h3 {
  min-height: 2lh;
}

.product-heading {
  display: flex;
  min-width: 0;
  /* Centred again. Top-aligning fixed the cross-card problem but broke the card itself: a
     58px icon pinned to the top of a 95px text block left the kicker hanging past its bottom
     edge, so the label read as sitting BELOW the icon rather than beside it. The kicker now
     reserves two lines, so every heading block is the same height and centring keeps the icons
     level across a row while sitting properly against their own text. */
  align-items: center;
  gap: 14px;
}

/* Reserve two lines for the kicker so every card's description starts on the same baseline.
   "Video downloader & status saver" wraps where the others do not, which pushed that card's
   description 23px below its neighbours. */
.product-kicker {
  min-height: 3.2em;
}

.app-icon-image {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 8px;
  object-fit: cover;
}

.product-kicker {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

/* The catalog cards use a much larger h2, where "PDFPivot for Mac" wraps to two lines and the
   homepage's does not. Reserve the second line only here. */
.catalog-page .product-heading h2 {
  min-height: 2.2em;
}

.catalog-page .product-card-actions {
  align-items: stretch;
  flex-direction: column;
}

.catalog-page .product-card .button {
  width: 100%;
  text-align: center;
}

.product-image-band {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.product-image-band img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.screenshot-section {
  padding-top: 18px;
}

.screenshot-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.screenshot-gallery figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.screenshot-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
}

.screenshot-gallery figcaption {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  padding: 12px 14px;
}

.mac-product-screen {
  width: 92%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.single-screen-stage .mac-product-screen {
  right: 0;
  width: 100%;
}

.mac-screenshot-gallery img {
  height: auto;
  aspect-ratio: 1180 / 760;
  object-fit: cover;
}

.muted {
  color: var(--muted);
}

.legal-page {
  max-width: 880px;
}

.legal-page h1 {
  font-size: clamp(36px, 5vw, 58px);
}

.legal-page h2 {
  margin-top: 32px;
  font-size: 27px;
}

.legal-page h3 {
  margin-top: 22px;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
}

.legal-page ul {
  padding-left: 22px;
}

.notice {
  margin-top: 26px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: 16px 18px;
}

.contact-panel {
  max-width: 860px;
  margin: 0 auto 72px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  padding: 30px;
}

.form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 7px;
  align-content: start;
}

.field label,
.check-field {
  color: var(--ink);
  font-weight: 850;
  line-height: 1.2;
}

.field small,
.form-status {
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 12px 14px;
}

.field input,
.field select {
  height: 52px;
  line-height: 1.2;
  padding-bottom: 0;
  padding-top: 0;
}

:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea {
  background: #111111;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(184, 77, 20, 0.18);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.check-field {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-weight: 750;
  line-height: 1.45;
}

.check-field input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.hidden-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile-field {
  min-height: 65px;
}

.form-status {
  min-height: 26px;
  font-weight: 800;
}

.form-status.success {
  color: var(--accent-ink);
}

.form-status.error {
  color: #9a3412;
}

:root[data-theme="dark"] .form-status.error {
  color: var(--accent-ink);
}

.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
}

:root[data-theme="dark"] .site-footer {
  background: rgba(11, 11, 11, 0.86);
}

.footer-inner {
  display: grid;
  max-width: 1120px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  margin: 0 auto;
  padding: 30px 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  font-weight: 800;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  padding: 0 2px;
  text-decoration: none;
}

@media (max-width: 760px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 20px;
  }

  .nav-links {
    width: 100%;
    gap: 16px;
    overflow: visible;
    padding-bottom: 2px;
  }

  .theme-toggle {
    min-width: 78px;
  }

  .hero,
  .support-hero,
  .section,
  .legal-page,
  .contact-page {
    padding: 52px 18px;
  }

  .hero {
    min-height: auto;
    display: block;
    overflow: visible;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-media,
  .product-screen-stage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 430px;
    margin-top: 38px;
    transform: none;
  }

  .app-preview {
    width: 48%;
  }

  .app-preview-pdf {
    left: 0;
  }

  .app-preview-video {
    right: 0;
    bottom: -80px;
  }

  .product-screen {
    max-height: 410px;
  }

  .single-screen-stage .product-screen-main {
    right: 18%;
    width: 64%;
  }

  .grid,
  .form-grid,
  .principle-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .principle-grid {
    gap: 26px;
  }

  .button-row,
  .actions {
    flex-direction: column;
  }

  .button {
    flex-basis: auto;
    width: 100%;
  }

  .hero .actions .button {
    flex: 0 0 auto;
    width: 100%;
  }

  .contact-panel {
    padding: 22px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .nav-links {
    gap: 12px 16px;
  }

  .nav-links a,
  .theme-toggle {
    font-size: 13px;
  }

  .hero,
  .support-hero,
  .section,
  .legal-page,
  .contact-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  h1 {
    font-size: 42px;
  }

  .hero-media {
    height: 380px;
  }

  .app-preview figcaption {
    font-size: 13px;
  }

  .product-screen-stage {
    height: 390px;
  }

  .product-card-body {
    padding: 20px;
  }

  .product-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-card-actions .button {
    width: 100%;
  }

  .screenshot-gallery {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }

  .screenshot-gallery figure {
    width: min(74vw, 270px);
    flex: 0 0 min(74vw, 270px);
    scroll-snap-align: start;
  }
}

/* ===========================================================================
   STORE BADGES — one badge size everywhere (44px, the touch-target floor).
   =========================================================================== */

.store-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.store-badge-link {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.store-badge-link img {
  display: block;
  width: auto;
  height: 44px;
}

.store-badges-large {
  margin-top: 4px;
}

/* ===========================================================================
   PRODUCT-PAGE DETAILS (formerly polish css) — px on the system ladder.
   =========================================================================== */

.store-trademark-note {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.65;
}

.store-trademark-note--centered {
  margin: 0;
  padding: 0 16px 24px;
  text-align: center;
}

.notice-detail {
  margin-top: 6px;
}

.purchase-button {
  padding: 12px 22px;
  font-size: 16px;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.download-button {
  display: inline-block;
  padding: 12px 22px;
  font-size: 16px;
  text-decoration: none;
}

.chip-hint {
  font-size: 15px;
}

.licence-key {
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.licence-note {
  margin-top: 8px;
}

.comparison-price-note {
  padding-top: 8px;
  caption-side: bottom;
}

.localized-product-visual {
  overflow: hidden;
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.localized-product-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================================================================
   EDITORIAL PROSE AND DATA TABLES — the two wrapper systems (.fact-wrap from
   the press/how-to family, .cmp-wrap from the comparisons) had drifted on
   every numeric value except the border colour. One rhythm, one hairline
   token, one type step; only the genuinely different header treatments stay.
   =========================================================================== */

.prose-list {
  margin: 16px 0 24px;
  padding-left: 22px;
  line-height: 1.7;
}

.prose-list li {
  margin: 8px 0;
  list-style: disc;
}

ol.prose-list li {
  list-style: decimal;
}

.cmp-wrap,
.fact-wrap {
  overflow-x: auto;
  margin: 22px 0;
}

.cmp-wrap table,
.fact-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.cmp-wrap table {
  min-width: 720px;
}

.fact-wrap table {
  min-width: 620px;
}

.cmp-wrap th,
.cmp-wrap td,
.fact-wrap th,
.fact-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.fact-wrap th {
  width: 34%;
  font-weight: 600;
}

.cmp-wrap th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.75;
  text-transform: uppercase;
}

.cmp-wrap tbody tr:last-child td,
.fact-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.cmp-note {
  font-size: 14px;
  opacity: 0.75;
}

.cmp-byline {
  margin: 3px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.cmp-tldr {
  margin: 22px 0;
  padding: 3px 0 3px 16px;
  border-left: 3px solid currentColor;
  opacity: 0.95;
}

.cmp-tldr ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.cmp-tldr li {
  margin: 5px 0;
}

/* Wide tables scroll inside these wrappers with no visual cue on a phone —
   the content simply looks cut off. A right-edge fade shows there is more,
   and below 760px a caption says so in words. */
.cmp-wrap,
.fact-wrap {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

@media (min-width: 900px) {
  .cmp-wrap,
  .fact-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 760px) {
  .cmp-wrap::after,
  .fact-wrap::after {
    content: "Scroll sideways to see the full table →";
    display: block;
    font-size: 13px;
    opacity: 0.7;
    padding-top: 6px;
  }
}

/* ===========================================================================
   NEWSLETTER
   =========================================================================== */

.newsletter-panel {
  max-width: 760px;
  margin: 0 auto;
}

.newsletter-form {
  display: grid;
  gap: 18px;
}

.newsletter-inline {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.newsletter-inline .button {
  min-height: 48px;
}

.newsletter-note {
  font-size: 14px;
  color: var(--muted);
}

.newsletter-action {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 760px) {
  .newsletter-inline {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   LOCALE — heading leading was tuned against Inter, which has no Devanagari
   coverage; matras need taller lines, and the fallback face is named so the
   choice stops varying by operating system.
   =========================================================================== */

:lang(hi) {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", Inter, ui-sans-serif, system-ui, sans-serif;
}

:lang(hi) h1,
:lang(hi) h2,
:lang(hi) h3 {
  line-height: 1.4;
}

/* ===========================================================================
   PLATFORM NOTICE — injected on the Mac funnel when opened from a phone.
   =========================================================================== */

.platform-notice {
  margin: 16px 0;
}

.platform-notice-body {
  margin-top: 6px;
}

/* ===========================================================================
   MID VIEWPORTS — 768px (iPad portrait) fell between the two base
   breakpoints and got the full desktop layout, absolutely positioned hero
   and all. A sane stacked tier for 761–1000px.
   =========================================================================== */

@media (max-width: 1000px) and (min-width: 761px) {
  .hero {
    display: block;
    min-height: 0;
  }

  .hero-media,
  .product-screen-stage {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

  .grid,
  .principle-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The Mac gallery holds four wide 1180x760 shots — a 2x2 grid, not the phone
   gallery's three narrow columns. */
.mac-screenshot-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .mac-screenshot-gallery {
    grid-template-columns: 1fr;
  }
}