/* Teafinity design system — tokens from the app's AppTheme.kt.
   The page IS the beige; cards float in warm white. Light-only. */
:root {
  --canvas: #E8DDD4;
  --surface: #FEFCFA;
  --surface-alt: #F5F0EA;
  --ink: #2D2416;
  --text: #5D5245;
  --text-muted: #6A6153;
  --accent: #4A5D4A;
  --accent-deep: #3A4A3A;
  --leaf: #7A8B5A;
  /* --leaf is a FILL colour: 2.77:1 on canvas, so it must never carry glyphs.
     --leaf-text is the same hue pushed to 4.55:1 on canvas / 5.94:1 on surface.
     --line is decorative at 1.54:1; --line-strong is the 3:1 floor WCAG 1.4.11
     requires for anything that reads as an interactive boundary. */
  --leaf-text: #5A6743;
  --leaf-tint: #EAEDDF;
  --on-accent: #FEFCFA;
  --line: #D8CCBE;
  --line-strong: #A99883;
  --error-text: #A63838;
  --error-bg: #FFF1F1;
  --timer-night: #2D2416;
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-round: 999px;
  --shadow-s: 0 1px 3px rgba(45,36,22,.08);
  --shadow-m: 0 4px 16px rgba(45,36,22,.10);
  --shadow-l: 0 12px 40px rgba(45,36,22,.14);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-v23-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-v23-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-v23-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-v23-latin-700.woff2") format("woff2"); }

/* CJK: Poppins carries latin/numerals, system fonts carry the script. */
.lang-ja { --font: "Poppins", "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif; }
.lang-ko { --font: "Poppins", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
.lang-zh { --font: "Poppins", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.lang-ja :is(h1,h2,h3), .lang-ko :is(h1,h2,h3), .lang-zh :is(h1,h2,h3) { font-weight: 700; }
.lang-ja p, .lang-ko p, .lang-zh p { line-height: 1.9; }
.lang-ja { line-break: strict; }
.lang-ko { word-break: keep-all; }
.lang-de p, .lang-de :is(h1, h2, h3) { hyphens: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; overflow-wrap: break-word; }
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.625rem); margin-top: 1.6em; }
h3 { font-size: 1.125rem; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
p { margin: 0 0 1em; max-width: 65ch; }
ul { padding-left: 1.2em; }
.num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.overline { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .4em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- layout ---- */
main { max-width: 72rem; margin: 0 auto; padding: 24px 16px 96px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-s); padding: 24px; }
@media (min-width: 700px) { .card { padding: 32px; } main { padding-inline: 24px; } }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 10px 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.125rem; color: var(--ink); text-decoration: none; }
.nav-links { display: none; gap: 20px; margin-inline: auto; }
.nav-links a { text-decoration: none; font-weight: 500; color: var(--text); }
.nav-links a:hover { color: var(--accent-deep); }
.nav-cta { margin-left: auto; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav-cta { margin-left: 0; } }

.btn { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 22px; border-radius: var(--r-round); font-weight: 600; text-decoration: none; transition: transform 150ms var(--ease), background 150ms var(--ease); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); }

/* ---- breadcrumbs ---- */
.breadcrumbs { font-size: .875rem; color: var(--text-muted); margin: 8px 0 20px; }
.breadcrumbs a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }

/* ---- tea page ---- */
.tea-hero { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.tea-hero-img { border-radius: var(--r-l); box-shadow: var(--shadow-m); flex-shrink: 0; width: 160px; height: 160px; object-fit: cover; }
@media (min-width: 700px) { .tea-hero-img { width: 240px; height: 240px; } }
.verdict { font-size: 1.0625rem; color: var(--ink); }

.brew-box h2 { margin-top: 0; }
.brew-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.brew-table th, .brew-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.brew-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.brew-table tbody th { color: var(--ink); font-weight: 600; }
.brew-table tbody tr:last-child :is(th, td) { border-bottom: none; }
@media (max-width: 760px) {
  .brew-table { display: block; overflow-x: auto; }
  .brew-table > tbody, .brew-table > thead { min-width: 30rem; }
  /* Fade lives INSIDE the query — at desktop this table does not scroll and the
     gradient would just paint a stray band over the card. */
  .brew-table {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(254,252,250,0)) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, rgba(254,252,250,0)) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(45,36,22,.15), rgba(45,36,22,0)) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(45,36,22,.15), rgba(45,36,22,0)) right / 12px 100% no-repeat scroll;
  }
}

.ladder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-content: flex-start; margin-top: 16px; }
.ladder-title { font-weight: 600; color: var(--ink); font-size: .875rem; line-height: 26px; }
/* Every pill must be dimensionally IDENTICAL, or wrapped flex lines get
   different heights and the badge rows visibly drift out of alignment. The
   rinse variant differs only in colour, so its border is reserved on the base
   class (transparent) rather than added on top of it. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; box-sizing: border-box;
  padding: 0 12px; border: 1.5px solid transparent; border-radius: var(--r-round);
  background: var(--leaf-tint); color: var(--ink);
  font-weight: 600; font-size: .8125rem; line-height: 1; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill-rinse { background: transparent; border-color: var(--leaf); border-style: dashed; }

.brew-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-block; background: var(--surface-alt); border: 1px solid var(--line); color: var(--text); font-size: .8125rem; padding: 4px 12px; border-radius: var(--r-round); }
.chip-row { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-free { background: var(--leaf-tint); border-color: var(--leaf); color: var(--ink); }
.chip-premium { border-color: var(--accent); color: var(--accent-deep); }
.brew-source { text-align: right; font-size: .75rem; color: var(--text-muted); margin: 12px 0 0; }

.tea-card-row { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tea-card { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-s); padding: 16px; text-decoration: none; transition: box-shadow 150ms var(--ease), transform 150ms var(--ease); }
.tea-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.tea-card img { grid-row: span 2; border-radius: var(--r-s); }
.tea-card-name { font-weight: 600; color: var(--ink); }
.tea-card-meta { font-size: .8125rem; color: var(--text-muted); font-weight: 500; }

.app-cta { text-align: center; margin-top: 48px; background: var(--surface); }
.app-cta h2 { margin-top: 0; }
.app-cta p { margin-inline: auto; }
.badges { display: flex; gap: 16px; justify-content: center; align-items: center; margin: 20px 0 8px; }
.rating-line { font-size: .8125rem; color: var(--text-muted); }

/* ---- footer ---- */
.site-footer { background: var(--surface-alt); border-top: 1px solid var(--line); margin-top: 64px; padding: 48px 16px 32px; }
.footer-grid { max-width: 72rem; margin: 0 auto; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-h { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .8em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5em; }
.site-footer a { text-decoration: none; color: var(--text); }
.site-footer a:hover { color: var(--accent-deep); text-decoration: underline; }
.footer-legal { max-width: 72rem; margin: 32px auto 0; border-top: 1px solid var(--line); padding-top: 20px; font-size: .8125rem; color: var(--text-muted); }
.trademark { font-size: .6875rem; }

@media print {
  .site-header, .site-footer, .app-cta, .nav-cta { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- design refresh (Claude Design comps, 2026-08-14) ---- */
.nav-side { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-cta { margin-left: 0; }
.nav-links .is-active { color: var(--ink); border-bottom: 2px solid var(--leaf); padding-bottom: 2px; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--text); padding: 12px; margin: -12px; min-width: 44px; min-height: 44px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu[open] summary { color: var(--ink); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 8px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-m); min-width: 160px; z-index: 60; }
.lang-list a { display: block; padding: 11px 12px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: .875rem; }
.lang-list a:hover { background: var(--surface-alt); color: var(--ink); }
.lang-list a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .lang-menu summary .lang-name { display: none; } }

.link-arrow { font-weight: 600; font-size: .9375rem; text-decoration: none; border-bottom: 2px solid var(--leaf); padding-bottom: 2px; }
.band { background: var(--surface-alt); border-block: 1px solid transparent; }
.band-bordered { border-bottom: 1px solid var(--line); }

/* Dark device bezel around app screenshots (comp: #111009, r38, p8) */
.bezel { background: #111009; border-radius: 38px; padding: 8px; box-shadow: var(--shadow-l); display: inline-block; }
.bezel img { display: block; border-radius: 31px; width: 236px; height: auto; }

/* Table-in-card (master parameter card) */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-s); overflow: hidden; }
.table-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 6px; flex-wrap: wrap; }
.table-card-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.table-card .brew-table th:first-child, .table-card .brew-table td:first-child { padding-left: 24px; }
.table-card .brew-table th:last-child, .table-card .brew-table td:last-child { padding-right: 24px; }
.table-card .brew-table thead th { font-size: .8125rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.table-card .brew-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.table-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 14px; flex-wrap: wrap; }
.wordmark { font-size: .75rem; color: var(--text-muted); }
.btn-copy { font-family: var(--font); font-weight: 600; font-size: .8125rem; color: var(--accent); background: var(--leaf-tint); border: none; border-radius: var(--r-round); padding: 8px 16px; cursor: pointer; }
.btn-copy:hover { background: #DDE3CC; }

/* Outline pill button (secondary) */
.btn-outline { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--leaf-tint); color: var(--accent-deep); }

/* 5-star row */
.stars path { fill: var(--leaf); }

/* Quote mark on testimonial cards */
.quote-mark path { fill: var(--leaf); opacity: .7; }

/* Check list (pricing) */
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: .9375rem; line-height: 1.5; }
.check-list li { display: flex; gap: 10px; }
.check-list li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* Caffeine context bars */
.caff-bars { display: flex; flex-direction: column; gap: 14px; font-variant-numeric: tabular-nums; }
.caff-row { display: grid; grid-template-columns: minmax(90px, 130px) 1fr 58px; align-items: center; gap: 12px; font-size: .9375rem; }
.caff-row .caff-name-hero { font-weight: 600; color: var(--ink); }
.caff-track { height: 14px; border-radius: var(--r-round); background: var(--surface-alt); overflow: hidden; }
.caff-fill { display: block; height: 100%; border-radius: var(--r-round); background: var(--line); }
.caff-fill-hero { background: var(--leaf); }
.caff-val { text-align: right; color: var(--text-muted); }
.caff-row .caff-val-hero { color: var(--ink); font-weight: 600; }

/* Non-link chips (pairs-with) */
.chip-outline { background: var(--surface-alt); border: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: .875rem; padding: 7px 14px; border-radius: var(--r-round); }
a.chip-link { text-decoration: none; background: var(--leaf-tint); border: none; color: var(--ink); font-weight: 500; font-size: .875rem; padding: 7px 14px; border-radius: var(--r-round); display: inline-block; }
a.chip-link:hover { background: #DDE3CC; }

/* Toggle switch */
.switch { width: 34px; height: 20px; border-radius: var(--r-round); background: var(--line-strong); position: relative; display: inline-block; transition: background 150ms var(--ease); flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-round); background: var(--surface); transition: left 150ms var(--ease); box-shadow: 0 1px 3px rgba(45,36,22,.2); }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { left: 16px; }

/* FAQ cards with leaf marker */
.faq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 24px; }
.faq-card summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 17px 0; font-weight: 600; color: var(--ink); font-size: .9375rem; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary svg { flex: none; }
/* Nothing signalled that these rows open: the marker is suppressed and the
   only icon is a decorative leaf on the left. */
.faq-card summary::after { content: "›"; margin-left: auto; font-size: 1.25rem; line-height: 1; color: var(--text-muted); transform: rotate(90deg); transition: transform 150ms var(--ease); }
.faq-card[open] summary::after { transform: rotate(-90deg); }
.faq-card p { margin: 0 0 18px; padding-left: 29px; font-size: .9375rem; line-height: 1.65; }

/* Footer brand column */
.footer-brand-row { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.footer-made { color: var(--text-muted); font-size: .875rem; margin: 0 0 6px; }
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.footer-badges a { flex: 0 0 auto; }
/* An explicit height is load-bearing: the App Store badge is an SVG (intrinsic
   120x40) and Google Play a PNG (524x156). With only `width:auto` the two flex
   items resolved to wildly different boxes and shrank unevenly. */
.footer-badges img { height: 36px; width: auto; max-width: 100%; border-radius: 8px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.footer-legal-links a { white-space: nowrap; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* CTA band (badge strip) */
.cta-band { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(24px, 4vw, 36px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; margin-top: clamp(36px, 5vw, 56px); }
.cta-band-title { font-weight: 600; color: var(--ink); font-size: 1.125rem; margin: 0 0 6px; }
.cta-band > div:first-child { flex: 1 1 320px; }
.cta-band p { margin: 0; font-size: .9375rem; line-height: 1.6; }
.cta-band-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-band-badges img { height: 44px; width: auto; border-radius: 9px; }

/* Brand mark is a raster (the real painted ensō) — keep it crisp and inline-safe. */
.brand .enso { display: block; width: 30px; height: 30px; object-fit: contain; }
.footer-brand-row img { display: block; object-fit: contain; }
.table-card-title img { display: block; flex: none; object-fit: contain; }

/* ---- Mobile navigation (no-JS <details> menu) ----
   The desktop link row is display:none below 900px, so this panel IS the
   navigation on a phone. Hidden at ≥900px so links are never duplicated
   on screen. */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-m); color: var(--ink);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { background: var(--surface-alt); }
.nav-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 8px; list-style: none; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); box-shadow: var(--shadow-m);
}
.nav-menu-list a {
  display: block; padding: 11px 14px; border-radius: 8px;
  text-decoration: none; color: var(--text); font-weight: 500;
}
.nav-menu-list a:hover { background: var(--surface-alt); color: var(--ink); }
.nav-menu-list a[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--leaf-tint); }
@media (min-width: 900px) { .nav-menu { display: none; } }

/* ---- skip link ----
   <main id="main"> was already wired for this; the link itself was missing, so
   every keyboard user traversed 8 header stops on all 1,487 pages. */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus {
  position: fixed; width: auto; height: auto; overflow: visible; clip: auto;
  left: 12px; top: 12px; z-index: 100;
  padding: 12px 20px; border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow-m); outline: 2px solid var(--accent); outline-offset: 2px;
}
main:focus { outline: none; }

/* ---- horizontal-scroll affordance ----
   iOS uses overlay scrollbars, so a table clipped at the container edge reads
   as a table that simply ends. Painted on the scroll CONTAINERS themselves —
   a pseudo-element would be clipped by the same overflow. `local` pins the
   fade to the content edge and `scroll` pins the shadow to the box, so both
   retract once you reach that end. */
.table-wrap, .brew-table, .lp-bridge-table, .vs-matrix-wrap { scrollbar-width: thin; }
/* Only where a scroll can actually happen. Painting this at desktop put a
   white band down the right edge of chart tables that already fit, and the fade
   colour has to match the surface the table sits on (canvas on chart pages,
   card white inside .card) or the band is visible either way. */
@media (max-width: 760px) {
  .table-wrap, .vs-matrix-wrap {
    --fade-bg: var(--canvas);
    background:
      linear-gradient(to right, var(--fade-bg) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--fade-bg) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(45,36,22,.15), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(45,36,22,.15), transparent) right / 12px 100% no-repeat scroll;
  }
  .card .table-wrap, .table-card .table-wrap, .card .vs-matrix-wrap { --fade-bg: var(--surface); }
}
.scroll-note { font-size: .8125rem; color: var(--text-muted); margin: 6px 0 0; }
@media (min-width: 760px) { .scroll-note { display: none; } }

/* ---- coarse-pointer target sizes ----
   Scoped to touch so desktop information density is untouched. */
@media (pointer: coarse) {
  .site-footer a,
  .breadcrumbs a,
  .link-arrow,
  .lp-mech-link,
  .lang-list a,
  .row-load,
  .switch-label,
  .sort-chip,
  .btn-copy {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-footer li { margin-bottom: 0; }
  .faq-card summary { padding-block: 22px; }
}

/* Both plan cards quote USD; this says so rather than leaving the reader to
   discover a different number at checkout. */
.plan-currency-note { font-size: .8125rem; color: var(--text-muted); margin: 14px 0 0; text-align: center; max-width: none; }

/* Store badges pair by HEIGHT, never width: the App Store artwork has a
   different intrinsic aspect ratio in each locale (en 119.66×40, fr 126.51×40,
   ja/zh 108.85×40, ko 129.70×40), so a fixed width rendered ja/zh 9.6% taller
   and ko 8% shorter than Google Play beside it. */
.badges img, .lp-badges img { height: 52px; width: auto; }