/* =========================================================
   PixWiz marketing site — design system
   Dark theme, bold rounded display type, sky-blue + coral accents
   (matches the App Store / Play Store screenshot art direction)
   ========================================================= */

:root {
  --bg: #0b0b0d;
  --bg-raised: #131317;
  --bg-card: #17171c;
  --bg-card-hover: #1d1d23;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --blue: #2fa0ff;
  --blue-bright: #5cc2ff;
  --blue-deep: #1c6fd6;
  --blue-dim: rgba(47, 160, 255, 0.12);

  --coral: #ff6f58;
  --coral-dim: rgba(255, 111, 88, 0.14);
  --on-coral: #17100e;

  --text: #f6f6f8;
  --text-dim: #b7b7c2;
  --text-faint: #80808c;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);

  --container: 1180px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* stop iOS/Android from inflating text after an orientation change */
  -webkit-text-size-adjust: 100%;
  /* The root element is what actually owns the viewport's overflow. Declaring
     this only on <body> propagates the value to the viewport but leaves the
     initial containing block free to grow, which lets mobile browsers widen the
     layout viewport to fit any overflowing box (that was the bug: a 480px .glow
     stretched the 390px layout viewport to 435px and shifted the whole page).
     `clip` is preferred because, unlike `hidden`, it never creates a scroll
     container and so can never break position: sticky on the nav. */
  overflow-x: hidden;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  /* long URLs / permission identifiers in the legal pages must not create
     an unbreakable min-content floor wider than the screen */
  overflow-wrap: break-word;
}

a, button, summary, [role="button"] {
  -webkit-tap-highlight-color: rgba(47, 160, 255, 0.2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-bright);
}

.pill {
  display: inline-block;
  padding: 0.08em 0.5em;
  border-radius: 8px;
  background: var(--coral);
  color: var(--on-coral);
  font-weight: 800;
}

.text-blue { color: var(--blue); }

/* background decoration: thin arcing lines like the screenshot art */
.bg-arc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-arc svg {
  position: absolute;
  opacity: 0.5;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
  color: #06131f;
  box-shadow: 0 10px 24px rgba(47, 160, 255, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.07);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* store badges */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* badges are injected by main.js; reserve their height so the hero doesn't
     shift on slower phones (CLS) */
  min-height: 54px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 12px;
  background: #fff;
  color: #0b0b0d;
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
}

.store-badge:hover {
  filter: brightness(0.96);
}

.store-badge svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.store-badge .badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.store-badge .badge-text small {
  font-size: 12px;
  font-weight: 600;
  color: #55555f;
}

.store-badge .badge-text strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}

/* ---------- nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 13, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-weight: 700;
  font-size: 15px;
}

.nav-links a {
  color: var(--text-dim);
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  /* 44x44 = Apple HIG / WCAG 2.5.5 minimum target */
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 24px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.mobile-panel.open {
  display: flex;
}

.mobile-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 4px;
  font-weight: 700;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.mobile-panel .store-badges {
  margin-top: 14px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 88px 0 60px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  margin-bottom: 22px;
}

.hero-copy h1 span.line {
  display: block;
}

.hero-copy .lede {
  font-size: 19px;
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-copy .lede strong {
  color: var(--text);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
}

.trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trust-line svg {
  width: 16px;
  height: 16px;
  color: var(--blue-bright);
  flex-shrink: 0;
}

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
}

.phone-frame {
  position: relative;
  width: 260px;
  max-width: 100%;
  border-radius: 34px;
  overflow: hidden;
  border: 6px solid #1a1a1f;
  box-shadow: var(--shadow-soft);
  background: #000;
  z-index: 2;
}

.phone-frame img {
  width: 100%;
  display: block;
}

.hero-art .float-card {
  position: absolute;
  /* scales with the art column instead of staying 150px on a 320px screen */
  width: clamp(96px, 34%, 150px);
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid #1a1a1f;
  box-shadow: var(--shadow-card);
  z-index: 3;
}

/* These are rotated, so their painted bounding box is ~25px wider per side
   than their layout box. A small positive inset (rather than the old negative
   -2% / -4%) keeps that rotated box inside the viewport at every width. */
.hero-art .float-1 {
  top: 6%;
  left: 2%;
  transform: rotate(-9deg);
}

.hero-art .float-2 {
  bottom: 4%;
  right: 2%;
  transform: rotate(8deg);
}

.hero-art .glow {
  position: absolute;
  /* fixed 480px here was the single biggest source of horizontal overflow on
     phones — it is wider than the whole viewport below 480px */
  width: min(480px, 100%);
  height: min(480px, 100%);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(47, 160, 255, 0.28), transparent 70%);
  filter: blur(10px);
  z-index: 0;
}

/* ---------- section scaffolding ---------- */

section {
  position: relative;
  padding: 96px 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 16px;
}

.section-head p {
  color: var(--text-dim);
  font-size: 17px;
}

/* ---------- feature showcase ---------- */

.showcase-item {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}

.showcase-item:last-child {
  border-bottom: none;
}

.showcase-item.reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

.showcase-item.reverse .showcase-art {
  order: 2;
}

.showcase-item.reverse .showcase-copy {
  order: 1;
}

.showcase-copy .index {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--blue-bright);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.showcase-copy h3 {
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 16px;
}

.showcase-copy p {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 44ch;
}

.showcase-copy ul {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.showcase-copy li {
  display: flex;
  gap: 10px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 15px;
}

.showcase-copy li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--coral);
}

.showcase-art {
  display: flex;
  justify-content: center;
}

.showcase-art .phone-frame {
  width: 280px;
  max-width: 100%;
}

/* ---------- tool grid ---------- */

.tool-grid-wrap {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 14.5px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.tool-chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.tool-chip .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blue-dim);
  color: var(--blue-bright);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.tool-note {
  margin-top: 22px;
  color: var(--text-dim);
  font-size: 15px;
}

.tool-note strong {
  color: var(--text);
}

/* ---------- canvas / collage chip rows ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dim);
}

.split-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split-section .split-copy h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  /* h2 had no bottom margin, so the heading collided with the paragraph */
  margin-bottom: 14px;
}

.split-section .split-copy p {
  color: var(--text-dim);
  margin-bottom: 20px;
  max-width: 48ch;
}

.split-section .split-copy .chip-row {
  margin-top: 24px;
}

.split-art {
  position: relative;
  display: flex;
  justify-content: center;
}

.split-art .stack {
  position: relative;
  /* 86% leaves room for the .back card's right: -8% offset to stay on-screen */
  width: min(300px, 86%);
}

.split-art .stack img {
  border-radius: 22px;
  border: 5px solid #1a1a1f;
  box-shadow: var(--shadow-soft);
}

.split-art .stack .back {
  position: absolute;
  width: 86%;
  right: -8%;
  top: 8%;
  opacity: 0.55;
  z-index: 0;
  filter: brightness(0.7);
}

.split-art .stack .front {
  position: relative;
  z-index: 1;
}

/* ---------- premium ---------- */

.premium {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.premium-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.premium-copy .eyebrow {
  color: var(--coral);
}

.premium-copy .eyebrow::before {
  background: var(--coral);
}

.premium-copy h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-bottom: 16px;
}

.premium-copy p {
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: 26px;
}

.perk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.perk-card {
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.perk-card .icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--coral-dim);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.perk-card .icon svg {
  width: 20px;
  height: 20px;
}

.perk-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.perk-card p {
  font-size: 14px;
  color: var(--text-dim);
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  text-align: left;
}

.faq-question .chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--blue-bright);
  transition: transform 0.2s ease;
}

.faq-item.open .faq-question .chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer-inner {
  padding: 0 22px 20px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.65;
}

.faq-answer-inner a {
  color: var(--blue-bright);
  font-weight: 700;
}

/* ---------- final CTA ---------- */

.final-cta {
  text-align: center;
}

.final-cta-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #0f2740, #0b0b0d 60%);
  border: 1px solid var(--border-strong);
  padding: 72px 32px;
  overflow: hidden;
}

.final-cta-card h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  margin-bottom: 16px;
}

.final-cta-card p {
  color: var(--text-dim);
  font-size: 17px;
  margin-bottom: 32px;
}

.final-cta-card .store-badges {
  justify-content: center;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand .brand {
  margin-bottom: 14px;
}

.footer-brand p {
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 32ch;
}

/* footer column headings are h3 for a valid heading outline;
   margin-top preserves the spacing the previous h5 got from UA defaults */
.footer-col h3 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.67em 0 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 600;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 14px;
}

/* ---------- legal pages ---------- */

.legal-page {
  padding: 56px 0 100px;
}

.legal-header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.legal-header h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  margin-bottom: 12px;
}

.legal-header .meta {
  color: var(--text-faint);
  font-size: 14px;
}

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
}

.legal-body h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 36px 0 14px;
  color: var(--blue-bright);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  color: var(--text-dim);
  margin-bottom: 14px;
  font-size: 15.5px;
}

.legal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: disc;
  color: var(--text-dim);
  font-size: 15.5px;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body a {
  color: var(--blue-bright);
  font-weight: 700;
}

.legal-body strong {
  color: var(--text);
}

.legal-body code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  color: var(--blue-bright);
  /* "com.google.android.gms.permission.AD_ID" is a single unbreakable token
     ~360px wide — without this it sets a min-content floor wider than a phone
     and widened the whole privacy.html layout viewport */
  overflow-wrap: anywhere;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero .container { grid-template-columns: 1fr; }

  /* ----- hero art, single-column treatment -----
     The staggered composition needs empty gutter either side of the main
     phone for the side cards to sit in. `max-width` + `margin-inline: auto`
     did NOT give that: `margin: auto` on a grid item switches it from
     `stretch` to shrink-to-fit, so .hero-art collapsed to its max-content
     width — exactly the phone frame's width — leaving zero gutter and
     pushing both side cards straight across the main screenshot's own
     headline. A *definite* width caps the cluster without shrink-wrapping. */
  .hero-art {
    order: -1;
    min-height: 360px;
    width: min(420px, 100%);
    margin-inline: auto;
  }

  /* shrink the main card so real gutter exists to peek into */
  .hero-art .phone-frame { width: clamp(176px, 60%, 240px); }

  /* and drop the side cards BEHIND it (base z-index is 3, above the frame's 2;
     1 puts them between the glow and the frame) at a recessed size and tone,
     so they read as depth instead of covering the focal copy */
  .hero-art .float-card {
    width: clamp(96px, 30%, 132px);
    z-index: 1;
    opacity: 0.75;
    filter: brightness(0.82);
  }

  .hero-art .float-1 { left: -4%; }
  .hero-art .float-2 { right: -4%; }

  .hero-copy { text-align: center; }
  .hero-copy .lede { margin-left: auto; margin-right: auto; }
  .hero-cta { align-items: center; }
  .trust-line { justify-content: center; }
  .showcase-item, .showcase-item.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .showcase-item .showcase-art, .showcase-item.reverse .showcase-art { order: -1; }
  .showcase-copy p { margin-left: auto; margin-right: auto; }
  .showcase-copy li { justify-content: center; }
  .showcase-copy ul { align-items: center; }
  .split-section .container { grid-template-columns: 1fr; text-align: center; }
  .split-section .split-copy p { margin-left: auto; margin-right: auto; }
  .split-section .chip-row { justify-content: center; }
  .split-art { order: -1; margin-bottom: 8px; }
  .premium-wrap { grid-template-columns: 1fr; text-align: center; }
  .premium-copy p { margin-left: auto; margin-right: auto; }
  .perk-grid { max-width: 520px; margin: 0 auto; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* footer links are inline text ~17px tall on desktop; on touch they need a
     real 44px target without visibly loosening the column too much */
  .footer-col ul { gap: 2px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

@media (max-width: 640px) {
  section { padding: 64px 0; }
  .hero { padding: 48px 0 40px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .perk-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .legal-body { padding: 28px 22px; }
  .final-cta-card { padding: 48px 20px; }
  .store-badge { padding: 9px 14px 9px 12px; }
  /* store badges are side-by-side at 2x ~160px each; below 640 let them
     stretch so neither can be squeezed under its own min-content width */
  .hero-cta .store-badges, .final-cta-card .store-badges { justify-content: center; }
}

/* ---------- small phones (iPhone SE / 320-400px) ---------- */

@media (max-width: 400px) {
  .container { padding: 0 18px; }
  .legal-body { padding: 24px 18px; }
  .final-cta-card { padding: 40px 16px; }
  .hero-copy h1 { font-size: 38px; }
  .site-nav .container { gap: 10px; }
  .btn-sm { padding: 10px 14px; }
  .faq-question { padding: 18px 16px; font-size: 16px; }
  .faq-answer-inner { padding: 0 16px 18px; }
  .tool-chip { padding: 14px 14px; }
}

/* ---------- notched devices (landscape safe areas) ---------- */

@supports (padding: max(0px)) {
  .container,
  .mobile-panel {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }

  @media (max-width: 400px) {
    .container,
    .mobile-panel {
      padding-left: max(18px, env(safe-area-inset-left));
      padding-right: max(18px, env(safe-area-inset-right));
    }
  }
}