/* Mobile baseline, loaded last on every page of both sites.
   Only touch-target sizes, form zoom, overflow and word breaking; no colours or typography. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
p, li, dd, td, th, h1, h2, h3, h4, blockquote { overflow-wrap: break-word; }
:lang(de) :is(p, li, h1, h2, h3), :lang(fr) :is(p, li, h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; }

/* Inline links that stand alone (e-mail, breadcrumb): larger hit box without moving the layout.
   Vertical padding on an inline box grows the tappable area but not the line box. */
a[href^="mailto:"], a[href^="tel:"], .crumb a { padding-block: 12px; }

/* Checkboxes: 24px is the WCAG 2.2 minimum; the surrounding label stays clickable. */
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: #131B2E; }

/* Components shared by the landing pages (both sites) */
.nav-toggle { width: 44px !important; height: 44px !important; }
.nav-auth .btn { min-height: 44px; }
.currency-toggle button { min-height: 44px; }
.scene-dots { gap: 0 !important; }
.scene-dots button {
  width: 44px !important; height: 44px !important; transform: none !important;
  background: radial-gradient(circle, rgba(19,27,46,.22) 3.6px, transparent 4.2px) !important;
}
.scene-dots button[aria-current="true"] { background: radial-gradient(circle, #8A6A2E 4.8px, transparent 5.4px) !important; }
.scene-foot { flex-wrap: wrap; row-gap: 0 !important; }

/* Type pages, sample report, test header */
.share button, .share a.sh { min-height: 44px; }
.demo-tabs button { min-height: 44px; }
.top-brand { min-height: 44px; min-width: 44px; }

@media (max-width: 760px) {
  /* iOS zooms into any field under 16px and does not zoom back. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea { font-size: max(16px, 1em) !important; }
  /* Wide tables scroll inside themselves instead of pushing the page sideways. */
  .container table, .wrap table, article table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre { max-width: 100%; overflow-x: auto; }
}

/* Test flow on a phone held sideways: drop the decorative compass so "start" fits the first screen. */
@media (orientation: landscape) and (max-height: 500px) {
  #stageWelcome .welcome-art, #stageCalc .calc-art { display: none; }
}
/* CJK drag hint: no letter-spacing, never break inside a word. */
:lang(ja) .drag-hint, :lang(ko) .drag-hint { letter-spacing: .02em; word-break: keep-all; }

/* German legal strip (Impressum, DDG) on pages without the shared footer: full row, tappable links. */
.de-legal { box-sizing: border-box; width: 100%; flex: 0 0 100%; }
.de-legal a { display: inline-block; padding-block: 11px; }
/* Turkish site header mobile panel (assets/pusula-ui.css) */
.mobile-panel nav a { min-height: 48px; display: flex; align-items: center; }
.mobile-panel .mobile-langs a { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-panel .mobile-cta .btn { min-height: 48px; }
/* Account and sign-in pages */
.header-right a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-footer a { display: inline-block; padding-block: 12px; }
/* Link-only list items (e.g. the Impressum document list) */
.container ul > li > a:only-child { display: inline-block; padding-block: 10px; }

/* Sign-in pages: on phones the card starts at the top (no jump when the keyboard opens);
   the German legal strip wraps below the card instead of beside it. */
body:has(> .de-legal) { flex-wrap: wrap; }
@media (max-width: 760px) { body:has(> .auth-container) { align-items: flex-start; } }
@media (max-width: 400px) { .header-right { gap: 10px; } }
/* Couple page brand is a home link */
.nav-brand { min-height: 44px; text-decoration: none; }
/* Small labels that fell under 12px on phones */
.drag-hint, .welcome-tag, .progress-text, #screenEntry .hero-tag, .info-card h3 { font-size: max(12px, .75rem) !important; }

/* Japanese and Korean have no italics; the browser would fake a slant (project rule, see CLAUDE.md). */
:lang(ja) :is(em, i), :lang(ko) :is(em, i) { font-style: normal; }
/* Landing mobile menu: same type scale as the shared header panel. */
.mobile-panel nav a { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; }
/* Long single-word titles (Datenschutzerklärung, Confidentialité) must fit on a phone without breaking mid-word. */
@media (max-width: 480px) { .container > h1 { font-size: min(2rem, 8vw); } }
/* Landing on phones: tighter section rhythm, and the main product leads the price list. */
@media (max-width: 600px) { body:has(.pricing-grid) section:not(.stats-section) { padding-block: 60px; } }
@media (max-width: 880px) { .pricing-grid > .price-card.featured { order: -1; } }
/* Landing footer: two link columns on phones instead of one long list. */
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; } .footer-brand { grid-column: 1 / -1; } }
/* Landing expert card: the bio after its first paragraph sits behind a disclosure. */
.expert-more { margin-top: 4px; }
.expert-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; color: var(--pirinc-ink, #8A6A2E); }
.expert-more summary::-webkit-details-marker { display: none; }
.expert-more summary::after { content: '+'; font-size: 1.15rem; line-height: 1; }
.expert-more[open] summary::after { content: '\2212'; }
/* Full-screen dialogs taller than the viewport (small phones, landscape): the overlay scrolls and the dialog
   starts at the top, instead of being centred past the top edge where its title and close button were unreachable. */
#paymentOverlay, #couplePayOverlay, #coupleInviteOverlay, #_inviteModal, .partner-share-overlay { align-items: flex-start !important; overflow-y: auto; overscroll-behavior: contain; }
#paymentOverlay > *, #couplePayOverlay > *, #coupleInviteOverlay > *, #_inviteModal > *, .partner-share-overlay > * { margin-block: auto; }
#paymentOverlay > * > button:first-child, #couplePayOverlay > * > button:first-child, #coupleInviteOverlay > * > button:first-child { min-width: 44px; min-height: 44px; top: .35rem !important; right: .35rem !important; }
@media (max-width: 480px), (max-height: 520px) {
  #paymentOverlay > *, #couplePayOverlay > *, #coupleInviteOverlay > * { padding: 2.75rem 1.25rem 1.5rem !important; }
}
/* Phone tap targets: footer link columns and the type pages' back link were 21-23px tall. */
@media (max-width: 880px) {
  .footer-grid .footer-col { gap: 0; }
  .footer-grid .footer-col a { display: flex; align-items: center; min-height: 40px; }
  a.back { display: inline-flex; align-items: center; min-height: 44px; }
}