/* QRNest visual identity: indigo (#4F46E5) × Geist + Inter × analytics-card-hero × Phosphor.
   Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px) maps to rem in the 16-px root:
   .25rem .5rem .75rem 1rem 1.5rem 2rem 3rem 4rem 6rem. clamp() heros pick from the same scale.
   Tap targets: every interactive control declares min-height: 44px. */

:root {
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --primary-soft: #EEF2FF;
  --accent: #1F2A44;
  --accent-2: #FFB45A;
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F1EC;
  --ink: #14182A;
  --ink-soft: #4B5168;
  --ink-muted: #8388A0;
  --line: #E5E3DC;
  --success: #16A34A;
  --warn: #D97706;
  --danger: #DC2626;
  --shadow-sm: 0 2px 6px rgba(20,24,42,.06);
  --shadow-md: 0 12px 32px rgba(20,24,42,.10);
  --shadow-lg: 0 24px 60px rgba(20,24,42,.16);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --font-heading: 'Geist', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --duration: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body {
  /* Defensive: any single overhang (rotated card decoration, hreflang
     anchors, etc.) must never widen the layout beyond the viewport. */
  overflow-x: hidden;
  max-width: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: var(--ink);
  /* Long unbreakable words (e.g. "Yandex Metrica" path strings,
     URLs in body copy, German compound nouns) must wrap rather than
     escape the column. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
h1 { font-size: clamp(1.7rem, 4vw + .8rem, 3.6rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 2vw + .55rem, 2.4rem); line-height: 1.18; }
h3 { font-size: 1.2rem; line-height: 1.25; }
p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  word-break: normal;
}
strong { color: var(--ink); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; top: -40px; left: 12px; background: var(--ink); color: #fff;
  padding: .6rem 1rem; border-radius: 8px; z-index: 999;
}
.skip-link:focus { top: 12px; }

.container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0; z-index: 30;
  backdrop-filter: saturate(140%) blur(8px);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem;
  color: var(--ink);
}
.brand__mark {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--primary); color: #fff;
  border-radius: 10px;
}
.brand__name { letter-spacing: -0.02em; }
.primary-nav__list {
  display: flex; flex-wrap: wrap; gap: .25rem 1.4rem;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav__list a {
  display: inline-block; padding: .55rem .25rem;
  color: var(--ink-soft); font-weight: 500;
}
.primary-nav__list a:hover, .primary-nav__list a:focus { color: var(--primary-dark); }
.primary-nav__toggle {
  display: none; background: transparent; border: 1px solid var(--line);
  border-radius: 10px; padding: .35rem .65rem; font-size: 1.4rem; line-height: 1;
}
.header-cta {
  display: inline-flex; align-items: center; gap: .55rem;
}
.lang-switcher select {
  appearance: none; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: .45rem 1.6rem .45rem .9rem;
  color: var(--ink); font-weight: 500;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314182A' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right .55rem center;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  padding: .75rem 1.2rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: .95rem;
  text-decoration: none;
  min-height: 44px; min-width: 44px;
  max-width: 100%;
  transition: transform var(--duration, 200ms), box-shadow var(--duration, 200ms), background-color var(--duration, 200ms), color var(--duration, 200ms);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  line-height: 1.2;
  /* Bullet-proof contrast: each variant below sets explicit colors so the
     button is always visible even if a CSS custom property fails to resolve
     (browser bug, missing :root, page extension stripping vars, etc.). */
}
.btn--primary {
  background-color: #4F46E5;             /* fallback */
  background: var(--primary, #4F46E5);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(20,24,42,.06));
}
.btn--primary:hover {
  background-color: #4338CA;
  background: var(--primary-dark, #4338CA);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(20,24,42,.10));
}
.btn--ghost {
  background: transparent;
  color: #14182A;
  color: var(--ink, #14182A);
  border-color: #E5E3DC;
  border-color: var(--line, #E5E3DC);
}
.btn--ghost:hover {
  background-color: #FFFFFF;
  background: var(--surface, #FFFFFF);
  color: #14182A;
  color: var(--ink, #14182A);
  border-color: #14182A;
  border-color: var(--ink, #14182A);
}
.btn--block { width: 100%; }
.btn--lg { padding: .95rem 1.6rem; font-size: 1rem; }
.btn--accent {
  background-color: #1F2A44;
  background: var(--accent, #1F2A44);
  color: #FFFFFF;
}
.btn--accent:hover {
  background-color: #0F1530;
  background: #0F1530;
  color: #FFFFFF;
}

/* ---------- Hero (analytics-card-hero) ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 92px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(60% 60% at 12% 10%, rgba(79,70,229,.18), transparent 70%),
    radial-gradient(40% 40% at 92% 100%, rgba(31,42,68,.12), transparent 70%),
    linear-gradient(180deg, #FFFCFA 0%, var(--bg) 100%);
}
.hero--analytics-card .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero__copy { min-width: 0; }
.hero__visual { min-width: 0; }
.hero__sub { overflow-wrap: anywhere; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--primary-soft); color: var(--primary-dark);
  padding: .35rem .75rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: .85rem;
  border: 1px solid rgba(67,56,202,.18);
}
.hero h1 { margin-top: 1rem; }
.hero__sub {
  font-size: clamp(1.05rem, 1vw + .6rem, 1.25rem);
  color: var(--ink-soft);
  max-width: 36ch;
  margin-block: 1.1rem 1.6rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero__bullets { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .55rem; }
.hero__bullets li {
  display: flex; align-items: flex-start; gap: .55rem; color: var(--ink); font-weight: 500;
}
.hero__bullets svg { flex-shrink: 0; margin-top: 3px; }

.dashboard-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  display: grid; gap: 1rem;
  isolation: isolate;
  max-width: 100%;
}
.hero__photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin-inline: auto;
}
.hero__metric-card {
  margin-top: 1.5rem;
  max-width: 460px;
  margin-inline: auto;
}
.dashboard-card__title {
  display: flex; justify-content: space-between; align-items: center;
}
.dashboard-card__title strong { font-family: var(--font-heading); font-size: 1.05rem; }
.dashboard-card__title small { color: var(--ink-muted); font-size: .8rem; }
.dashboard-card__metric {
  font-family: var(--font-heading);
  font-size: 2.6rem; line-height: 1; font-weight: 700;
  color: var(--ink);
}
.dashboard-card__metric span { color: var(--success); font-size: 1rem; margin-left: .35rem; }
.dashboard-card__chart {
  display: flex; align-items: flex-end; gap: 6px; height: 120px;
}
.dashboard-card__chart span {
  flex: 1; background: linear-gradient(180deg, var(--primary) 0%, var(--primary-soft) 100%);
  border-radius: 6px 6px 0 0;
  min-height: 12px;
}
.dashboard-card__platforms {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem;
}
.dashboard-card__platforms span {
  background: var(--surface-2); border-radius: 12px;
  padding: .55rem .6rem; font-size: .8rem; color: var(--ink-soft);
  text-align: center; font-weight: 500;
}
.dashboard-card__platforms span strong { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: 2px; }

/* ---------- Common section + cards ---------- */
.section { padding: clamp(48px, 6vw, 88px) 0; }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--accent { background: var(--accent); color: #FAFAF7; }
.section--accent h1, .section--accent h2, .section--accent h3, .section--accent strong { color: #fff; }
.section--accent p { color: rgba(250,250,247,.78); }
.section__head { max-width: 64ch; margin: 0 auto 2.4rem; text-align: center; }
.section__eyebrow {
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--primary-dark); font-weight: 600; font-size: .8rem;
  margin: 0 0 .9rem;
}
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem;
  display: grid; gap: .9rem;
  transition: transform var(--duration), box-shadow var(--duration), border-color var(--duration);
  height: 100%;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.32); }
.card h3 { margin: 0; }
.card__icon {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: 14px;
}

/* ---------- Logos / platforms strip ---------- */
.logos {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem;
  align-items: center; opacity: .85;
}
.logos img { width: 100%; max-height: 38px; object-fit: contain; }

/* ---------- Social-proof logo row ---------- */
.section--logos {
  padding: clamp(28px, 4vw, 56px) 0;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.logos-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 1.4rem;
}
.logos-row {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.6rem; align-items: center; justify-items: center;
}
.logos-row img {
  width: 100%; max-width: 130px; height: 36px;
  object-fit: contain;
  filter: grayscale(1) opacity(.62);
  transition: filter var(--duration);
}
.logos-row li:hover img { filter: grayscale(0) opacity(1); }
@media (max-width: 880px) {
  .logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1.6rem; }
}
@media (max-width: 480px) {
  .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Region brand chips (country-grouped integrations) ---------- */
.brand-chips {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: center; align-items: stretch;
}
.brand-chip {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .7rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration);
}
.brand-chip:hover { transform: translateY(-2px); border-color: rgba(79,70,229,.32); box-shadow: var(--shadow-md); }
.brand-chip img { width: auto; height: 22px; max-width: 96px; object-fit: contain; }
.brand-chip span { white-space: nowrap; }
.brand-chips__caption {
  text-align: center;
  font-size: .92rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- Pricing toggle ---------- */
.pricing-toggle {
  display: inline-flex; padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  margin-top: 1.4rem;
  gap: 4px;
}
.pricing-toggle__btn {
  background: transparent; border: 0;
  padding: .55rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: .92rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
.pricing-toggle__btn.is-active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.pricing-toggle__save {
  font-size: .72rem;
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: .15rem .5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: .04em;
}
.pricing-card__yearly-note {
  font-size: .82rem;
  color: var(--ink-muted);
  margin: -.5rem 0 0;
  min-height: 1.2em;
}
.pricing-card__amount { font-family: var(--font-heading); }
.pricing-card__per { font-size: 1rem; color: var(--ink-muted); margin-left: .35rem; }

/* ---------- Cookie consent banner ---------- */
/* Compact bottom pill (≤ 60 px tall on desktop, ≤ 110 px on mobile) so it
   doesn't occlude submit buttons / pricing CTAs that sit near the bottom of
   the page (was the round-3 user complaint — verbose 200-px-tall banner
   covered the lower viewport). The verbose paragraph + the manage form are
   still rendered; the paragraph is hidden via CSS until the visitor clicks
   "Manage preferences" (which expands the manage view), and the form is
   already `hidden` until the visitor opts in. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(100% - 24px, 920px);
  background: #FFFFFF;
  background: var(--surface, #FFFFFF);
  border: 1px solid #E5E3DC;
  border: 1px solid var(--line, #E5E3DC);
  border-radius: 999px;
  box-shadow: var(--shadow-md, 0 12px 32px rgba(20,24,42,.10));
  padding: .5rem .85rem .5rem 1.1rem;
  z-index: 60;
  font-size: .88rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .9rem;
}
.cookie-banner__copy { flex: 1 1 240px; min-width: 0; }
.cookie-banner__title {
  font-family: var(--font-heading, 'Geist', system-ui, sans-serif);
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--ink, #14182A);
}
.cookie-banner__title::before {
  content: '🍪';
  font-size: 1rem;
}
.cookie-banner__copy p {
  display: none;          /* expanded form lives in the manage view + /privacy/ */
  margin: 0;
  color: var(--ink-soft, #4B5168);
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
}
.cookie-banner__actions .btn { padding: .4rem .85rem; min-height: 36px; min-width: 36px; font-size: .85rem; border-radius: 999px; }
.cookie-banner__form {
  /* The expandable manage view; rendered when the visitor clicks "Manage". */
  flex-basis: 100%;
  border-radius: var(--radius-lg, 22px);
  background: var(--surface-2, #F2F1EC);
  padding: .9rem 1.1rem;
  margin-top: .25rem;
}
.cookie-banner__form fieldset { border: 0; padding: 0; margin: 0 0 .55rem; display: grid; gap: .45rem; }
.cookie-banner__row {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start;
  font-size: .82rem; color: var(--ink-soft, #4B5168);
}
.cookie-banner__row strong { color: var(--ink, #14182A); }

.btn--sm { padding: .5rem 1rem; font-size: .88rem; min-height: 38px; }

@media (max-width: 719px) {
  .cookie-banner {
    bottom: 8px;
    padding: .55rem .8rem;
    border-radius: 18px;
  }
  .cookie-banner__copy p { font-size: .8rem; }
  .cookie-banner__actions { justify-content: stretch; flex: 1 1 100%; }
  .cookie-banner__actions .btn { flex: 1 1 auto; padding: .5rem .8rem; }
}
/* When the consent banner is visible the page-level sticky CTA hides so
   the two don't overlap on mobile. */
body.has-consent-banner .sticky-cta { display: none; }
/* And the banner itself is fixed bottom-of-viewport — it would otherwise
   occlude the lower ~200 px of every page, including primary submit
   buttons (signup `Create my account`, pricing tier CTAs `Start 14-day
   trial`, etc). Push body content above the banner until the visitor
   dismisses it. */
body.has-consent-banner {
  padding-bottom: 130px;
  scroll-padding-bottom: 130px;
}
@media (min-width: 720px) {
  body.has-consent-banner { padding-bottom: 90px; scroll-padding-bottom: 90px; }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  padding: .85rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  z-index: 40;
  text-decoration: none;
  min-height: 44px;
  align-items: center;
}
.sticky-cta:hover { background: var(--primary-dark); color: #fff; }
@media (max-width: 720px) {
  .sticky-cta { display: inline-flex; }
}

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pricing-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem 1.6rem;
  display: grid; align-content: start; gap: 1rem;
  position: relative;
  height: 100%;
}
.pricing-card--highlight {
  border-color: var(--primary); box-shadow: var(--shadow-md);
}
.pricing-card--highlight::before {
  content: 'Most popular'; position: absolute; right: 16px; top: -14px;
  background: var(--primary); color: #fff;
  padding: .35rem .75rem; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600;
}
.pricing-card__name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; }
.pricing-card__price {
  font-family: var(--font-heading); font-size: 2.4rem; line-height: 1; font-weight: 700;
}
.pricing-card__price span { font-size: 1rem; color: var(--ink-muted); margin-left: .35rem; }
.pricing-card__price em { display: block; font-style: normal; font-size: .9rem; color: var(--ink-muted); margin-top: .35rem; }
.pricing-card ul { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .55rem; }
.pricing-card li::before {
  content: '✓'; color: var(--primary); margin-right: .55rem; font-weight: 700;
}
.pricing-card .btn { margin-top: auto; }

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem;
  display: grid; gap: .9rem;
  height: 100%;
}
.testimonial blockquote { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.5; }
.testimonial__author { display: flex; gap: .8rem; align-items: center; margin-top: auto; }
.testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); }
.testimonial__rating { color: var(--accent-2); letter-spacing: 1px; }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.faq summary {
  list-style: none; cursor: pointer; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 1.4rem; color: var(--primary);
  transition: transform var(--duration);
  flex-shrink: 0;
}
/* Open-state +→× toggle on the FAQ summary glyph (intentional animation). */
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] { border-color: rgba(79,70,229,.32); }

/* ---------- Generator UI ---------- */
.generator-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 2rem; align-items: start;
}
.generator-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem;
  display: grid; gap: 1rem;
}
.generator-tabs {
  display: flex; flex-wrap: wrap; gap: .35rem;
  background: var(--surface-2); border-radius: var(--radius-pill); padding: 4px;
}
.generator-tabs button {
  background: transparent; border: 0; padding: .55rem .9rem;
  border-radius: var(--radius-pill); color: var(--ink-soft); font-weight: 500;
}
.generator-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 500; color: var(--ink); font-size: .9rem; }
.field input, .field textarea, .field select {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem .85rem;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  min-height: 44px;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.color-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.color-row label { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 120px; }
.color-row input[type=color] { padding: 0; border: 1px solid var(--line); width: 100%; height: 44px; border-radius: 10px; background: transparent; }
.preview {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem; display: grid; gap: 1rem; position: sticky; top: 88px;
}
.preview img, .preview svg { width: 100%; max-width: 320px; margin-inline: auto; background: #fff; border-radius: 12px; }
.preview-actions { display: flex; gap: .55rem; flex-wrap: wrap; }

/* ---------- Continue-with-Google CTA (allauth.socialaccount) ---------- */
.google-cta {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: -0.005em;
  gap: .65rem;
}
.google-cta:hover {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.google-cta__mark { flex-shrink: 0; width: 20px; height: 20px; }
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .8rem;
  color: var(--ink-muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 1.1rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  height: 1px;
  background: var(--line);
}

/* ---------- Style picker (paid-gated tile grid) ---------- */
.style-picker { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.style-picker legend { font-weight: 600; color: var(--ink); padding: 0; font-size: .92rem; }
.style-picker__hint { font-size: .82rem; color: var(--ink-muted); margin: 0; }
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
  margin-top: .25rem;
}
.style-tile {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .55rem .55rem;
  display: grid; gap: .35rem; justify-items: center; text-align: center;
  cursor: pointer; min-height: 160px;
  transition: border-color var(--duration), box-shadow var(--duration), transform var(--duration);
  font-family: var(--font-body); color: var(--ink);
}
.style-tile:hover { border-color: rgba(79,70,229,.4); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.style-tile.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(79,70,229,.18); }
.style-tile__swatch {
  width: 96px; height: 96px;
  background: var(--sw-bg, #fff); color: var(--sw-fg, var(--primary));
  border-radius: 12px;
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
/* Default classic look — rendered with a 5x5 dot pattern via radial-gradient. */
.style-tile__swatch::after {
  content: '';
  position: absolute; inset: 12px;
  background:
    radial-gradient(circle, var(--sw-fg, currentColor) 28%, transparent 30%) 0 0 / 14px 14px;
  background-color: var(--sw-bg, #fff);
}
.style-tile__swatch--modules::after {
  background:
    radial-gradient(circle, var(--sw-fg, currentColor) 32%, transparent 34%) 0 0 / 12px 12px,
    var(--sw-bg, #fff);
}
.style-tile__swatch--eyes::after {
  background:
    radial-gradient(circle at 10px 10px, var(--sw-fg) 6px, transparent 7px),
    radial-gradient(circle at 60px 10px, var(--sw-fg) 6px, transparent 7px),
    radial-gradient(circle at 10px 60px, var(--sw-fg) 6px, transparent 7px),
    radial-gradient(circle, var(--sw-fg) 28%, transparent 30%) 28px 28px / 10px 10px,
    var(--sw-bg, #fff);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
.style-tile__swatch--gradient::after {
  background:
    repeating-linear-gradient(-12deg, transparent 0 6px, var(--sw-bg, #fff) 6px 8px),
    linear-gradient(135deg, var(--sw-from, var(--primary)), var(--sw-to, var(--accent-2)));
}
.style-tile__swatch--logo::after {
  background:
    radial-gradient(circle at 36px 36px, var(--sw-bg, #fff) 14px, transparent 15px),
    radial-gradient(circle, var(--sw-fg, currentColor) 30%, transparent 32%) 0 0 / 10px 10px,
    var(--sw-bg, #fff);
}
.style-tile__swatch--frame::after {
  background:
    linear-gradient(var(--sw-fg, currentColor), var(--sw-fg, currentColor)) 0 0 / 100% 6px no-repeat,
    linear-gradient(var(--sw-fg, currentColor), var(--sw-fg, currentColor)) 0 100% / 100% 6px no-repeat,
    radial-gradient(circle, var(--sw-fg, currentColor) 30%, transparent 32%) 0 0 / 12px 12px;
  background-color: var(--sw-bg, #fff);
}
.style-tile__name { font-size: .82rem; font-weight: 500; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.style-tile__tag {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.style-tile__tag--pro {
  color: #fff; background: var(--primary);
  padding: .15rem .5rem; border-radius: 999px;
  position: absolute; top: 8px; right: 8px;
}
.style-tile--locked { color: var(--ink-muted); }
.style-tile--locked .style-tile__swatch { opacity: .55; filter: grayscale(.4); }
.style-tile__lock {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(20,24,42,.36);
  color: #fff;
  border-radius: var(--radius);
  pointer-events: none;
}

/* ---------- Custom-colour panel (6th free style) ---------- */
.style-tile__swatch--custom {
  /* Conic-gradient rainbow swatch so the tile reads as "any colour you want"
     before the visitor opens the picker. Goes lighter on hover via the tile. */
  background: conic-gradient(from 90deg, #4F46E5, #DC2626, #FFB45A, #16A34A, #0EA5E9, #4F46E5);
}
.style-tile__swatch--custom::after {
  background: radial-gradient(circle at center, var(--surface, #fff) 22%, transparent 23%) no-repeat,
              conic-gradient(from 90deg, #4F46E5, #DC2626, #FFB45A, #16A34A, #0EA5E9, #4F46E5);
}
.custom-color-panel {
  margin-top: .8rem;
  padding: .9rem 1rem;
  background: var(--surface-2, #F2F1EC);
  border: 1px solid var(--line, #E5E3DC);
  border-radius: var(--radius, 14px);
  display: grid; gap: .65rem;
}
.custom-color-panel[hidden] { display: none; }
.custom-color-panel__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.custom-color-panel__field {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .55rem;
  font-weight: 500;
  color: var(--ink, #14182A);
  transition: opacity 200ms;
}
.custom-color-panel__field.is-disabled {
  opacity: .45;
  pointer-events: none;          /* blocks the value display + label click */
}
.custom-color-panel__field input[type="color"] {
  width: 56px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line, #E5E3DC);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.custom-color-panel__field input[type="color"]:disabled {
  cursor: not-allowed;
}
.custom-color-panel__label-text {
  font-size: .88rem;
  color: var(--ink-soft, #4B5168);
}
.custom-color-panel__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--ink-soft, #4B5168);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #E5E3DC);
  border-radius: 999px;
  padding: .2rem .55rem;
  text-align: center;
  min-width: 84px;
  justify-self: end;
}
.custom-color-panel__transparent {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  color: var(--ink, #14182A);
  cursor: pointer;
}
.custom-color-panel__transparent input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--primary, #4F46E5);
  cursor: pointer;
}
.custom-color-panel__hint {
  font-size: .8rem; color: var(--ink-muted, #8388A0); margin: 0;
}
@media (max-width: 540px) {
  .custom-color-panel__row { grid-template-columns: 1fr; }
}

/* Checker indicator on the preview pane when transparency is on. The QR
   PNG itself has a transparent background; the .preview wrapper renders a
   light/dark grid behind it so the user can see the alpha. */
.preview--transparent {
  background-image:
    linear-gradient(45deg, var(--line, #E5E3DC) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line, #E5E3DC) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line, #E5E3DC) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line, #E5E3DC) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.preview-img--checker {
  background-color: transparent;
}

/* ---------- Modal (paid-style upgrade prompt) ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1rem;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,24,42,.5);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 2rem; max-width: 520px; width: 100%;
  display: grid; gap: .8rem;
}
.modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: transparent; border: 0; border-radius: 999px;
  font-size: 1.4rem; cursor: pointer; color: var(--ink-soft);
}
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; color: var(--ink-soft); }
.modal__bullets li::before { content: '✓ '; color: var(--primary); font-weight: 700; }
.modal__cta { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .6rem; }
body.has-modal { overflow: hidden; }

/* ---------- Empty / loading / error states ---------- */
.empty-state, .loading-state, .error-state {
  text-align: center; padding: 2.4rem 1.4rem;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--surface); display: grid; gap: .7rem; justify-items: center;
}
.empty-state__icon, .loading-state__icon, .error-state__icon {
  width: 56px; height: 56px; display: inline-grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: 16px;
}
.error-state__icon { background: rgba(220,38,38,.12); color: var(--danger); }
.loading-state__spinner {
  width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--primary);
  border-radius: 50%; animation: spin 700ms linear infinite;
}
/* Loading-state spinner (intentional animation). */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tables (account dashboard) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: .85rem; }
.table tr:last-child td { border-bottom: 0; }
.badge {
  display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-dark);
}
.badge--ok { background: rgba(22,163,74,.15); color: var(--success); }
.badge--warn { background: rgba(217,119,6,.18); color: var(--warn); }
.badge--err { background: rgba(220,38,38,.15); color: var(--danger); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--accent); color: #FAFAF7;
  padding-block: 56px 28px; margin-top: 80px;
}
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 1rem; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.site-footer a { color: rgba(250,250,247,.85); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col--brand .brand { color: #fff; }
.footer-col--brand .brand__mark { background: #fff; color: var(--accent); }
.footer-tagline { color: rgba(250,250,247,.82); margin: 1rem 0; max-width: 36ch; }
.footer-contact { color: rgba(250,250,247,.82); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(250,250,247,.18);
  color: rgba(250,250,247,.7); font-size: .85rem;
}

/* ---------- Programmatic SEO + legal ---------- */
.legal-prose, .seo-prose {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2vw, 2.4rem);
  margin-block: 2rem;
}
.legal-prose h2, .seo-prose h2 { margin-top: 1.6rem; }
.legal-prose ul, .seo-prose ul { padding-left: 1.4rem; }
.legal-prose dl, .seo-prose dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.4rem; margin-block: 1rem; }
.legal-prose dt, .seo-prose dt { font-weight: 600; color: var(--ink); }

/* ---------- Forms ---------- */
.auth-card {
  max-width: 460px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem; display: grid; gap: 1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .hero--analytics-card .hero__inner { gap: clamp(24px, 4vw, 48px); }
}
@media (max-width: 980px) {
  .hero--analytics-card .hero__inner { grid-template-columns: 1fr; }
  .hero__sub { max-width: none; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .generator-wrap { grid-template-columns: 1fr; }
  .preview { position: static; }
  .hero__visual .dashboard-card {
    margin-top: 1.5rem !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}
@media (max-width: 720px) {
  .primary-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav__list {
    position: absolute; right: var(--gutter); top: 64px;
    flex-direction: column; gap: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .5rem; min-width: 240px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .primary-nav__list a { padding: .8rem 1rem; border-radius: 10px; min-height: 44px; display: flex; align-items: center; }
  .primary-nav__list a:hover { background: var(--primary-soft); }
  .primary-nav.is-open .primary-nav__list { display: flex; }
  .header-cta .btn--ghost { display: none; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .hero__cta .btn { width: 100%; }
  .btn { font-size: .9rem; padding: .65rem 1rem; }
  .btn--lg { font-size: .95rem; padding: .8rem 1.1rem; }
  .header-cta .btn { padding: .55rem .9rem; }
  .brand__name { font-size: 1rem; }
  .lang-switcher select { padding: .4rem 1.4rem .4rem .7rem; font-size: .85rem; }
  .site-header__inner { gap: .5rem; }
  .container { padding-inline: 14px; }
  .pricing-card__price { font-size: 2rem; }
  .pricing-card { padding: 1.6rem 1.2rem; }
  .dashboard-card { padding: 1.1rem; }
  .dashboard-card__metric { font-size: 2.1rem; }
  .dashboard-card__chart { height: 96px; }
}
@media (max-width: 360px) {
  /* Smallest target — everything must still fit + wrap. */
  h1 { font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.01em; }
  .hero__eyebrow { font-size: .78rem; padding: .3rem .6rem; }
  .container { padding-inline: 12px; }
  .header-cta { gap: .35rem; }
}

/* Download social-proof counter (homepage + generator) */
.download-counter {
  margin: .9rem 0 0;
  font-size: .98rem;
  color: var(--ink-soft);
}
.download-counter strong {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ad-slot {
  margin: 2rem auto;
  max-width: 970px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot__label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
   Design polish v2 — builder hero, elevated forms, live counter,
   refined tiles, sharper focus, tablet/mobile tuning.
   Appended last so these override the base rules above.
   ============================================================ */

/* Nicer line breaks for headings + balanced section intros */
h1, h2 { text-wrap: balance; }
.hero__sub, .section__head p { text-wrap: pretty; }

/* Crisp keyboard focus ring everywhere; none for mouse users */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
[role="tab"]:focus:not(:focus-visible), [role="radio"]:focus:not(:focus-visible) { outline: none; }

/* ---- Homepage builder hero: give the generator a real hero stage ---- */
.section--builder-hero {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0 clamp(44px, 5vw, 72px);
  background:
    radial-gradient(58% 58% at 12% -10%, rgba(79,70,229,.16), transparent 70%),
    radial-gradient(46% 46% at 96% 2%, rgba(255,180,90,.13), transparent 72%),
    linear-gradient(180deg, #FFFCFA 0%, var(--bg) 62%);
}
.section--builder-hero .section__head { margin-bottom: 1.7rem; }
.section--builder-hero h1 { margin-bottom: .5rem; }

/* ---- Elevated generator card + preview ---- */
.generator-form {
  box-shadow: var(--shadow-md);
  border-color: rgba(20,24,42,.08);
}
.generator-tabs button { min-height: 40px; transition: background var(--duration), color var(--duration); }
.generator-tabs button:hover { color: var(--ink); }
.generator-tabs button.is-active { font-weight: 600; }
.generator-form .btn--primary[type="submit"] { justify-self: start; }
.preview { box-shadow: var(--shadow-md); border-color: rgba(20,24,42,.08); }
.preview > strong { font-family: var(--font-heading); font-size: 1rem; }
.preview img, .preview svg { box-shadow: var(--shadow-sm); border: 1px solid var(--line); }

/* ---- Style tiles: tighter, more refined, fully responsive ---- */
.style-tile { min-height: 138px; padding: .55rem .5rem .5rem; }
.style-tile__swatch { width: 82px; height: 82px; }
.style-tile.is-selected { box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm); }
@media (max-width: 520px) {
  .style-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: .5rem; }
  .style-tile { min-height: 118px; }
  .style-tile__swatch { width: 66px; height: 66px; }
  .style-tile__name { font-size: .76rem; }
}

/* ---- Live download counter: pill + pulsing "live" dot ---- */
.download-counter {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 1.1rem auto 0;
  padding: .45rem .95rem .45rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: .9rem; color: var(--ink-soft);
}
.download-counter::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); flex-shrink: 0;
  animation: counter-pulse 2.2s ease-out infinite;
}
.download-counter strong { color: var(--primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes counter-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ---- Cards + section heads: a little more polish ---- */
.card:hover { border-color: rgba(79,70,229,.4); box-shadow: var(--shadow-md); }
.card__icon { box-shadow: inset 0 0 0 1px rgba(79,70,229,.12); }
.section__eyebrow { font-size: .78rem; }

/* ---- Header / nav refinements ---- */
.primary-nav__list a { border-radius: 8px; padding-inline: .6rem; transition: color var(--duration), background var(--duration); }
.primary-nav__list a:hover { background: var(--primary-soft); color: var(--primary-dark); }
.brand__mark { box-shadow: var(--shadow-sm); }

/* ---- Ad slot: quiet, centered, labeled ---- */
.ad-slot { width: 100%; flex-direction: column; gap: .35rem; }

/* ---- Footer rhythm ---- */
.site-footer { margin-top: 96px; }

/* ---- Tablet tuning (portrait tablets / large phones) ---- */
@media (min-width: 721px) and (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
  .generator-wrap { max-width: 600px; margin-inline: auto; }
  .brand-chip { padding: .6rem .9rem; }
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
   Builder redesign v3 — bold gradient hero + unified "app card".
   The homepage generator is the product's front door; make it look
   like a premium app floating on a saturated brand-gradient stage.
   ================================================================== */

.section--builder-hero {
  position: relative;
  padding: clamp(40px, 6vw, 76px) 0 clamp(56px, 7vw, 104px);
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(70% 110% at 100% 0%, rgba(255,180,90,.22), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(14,165,233,.26), transparent 55%),
    linear-gradient(135deg, #5B4BE8 0%, #6D28D9 52%, #4338CA 100%);
}
.section--builder-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  opacity: .6;
}
.section--builder-hero > .container { position: relative; z-index: 1; }

.builder-hero__head { text-align: center; max-width: 44ch; margin: 0 auto 2.2rem; }
.builder-hero__head .hero__eyebrow {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.builder-hero__head h1 {
  color: #fff;
  font-size: clamp(2rem, 3.2vw + 1.05rem, 3.5rem);
  line-height: 1.05; letter-spacing: -.028em;
  margin: 1.1rem 0 .65rem;
  text-shadow: 0 1px 30px rgba(20,10,60,.25);
}
.builder-hero__head .hero__sub {
  color: rgba(255,255,255,.88); max-width: 48ch; margin: 0 auto;
  font-size: clamp(1.02rem, .6vw + .9rem, 1.18rem);
}
.builder-hero__head .download-counter {
  margin-top: 1.3rem;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: none;
}
.builder-hero__head .download-counter strong { color: #fff; }

/* ---- The unified app card (form | preview studio) ---- */
.generator-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr);
  gap: 0; align-items: stretch;
  max-width: 1060px; margin-inline: auto;
  background: var(--surface);
  border: 1px solid rgba(20,24,42,.06);
  border-radius: 26px;
  box-shadow: 0 40px 80px -28px rgba(40,18,100,.55), 0 10px 28px rgba(20,24,42,.10);
  overflow: hidden;
}

/* Left: controls — sits transparent inside the card */
.generator-form {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  gap: 1.15rem;
}

/* Segmented type switcher — active pill goes brand-primary */
.generator-tabs { background: var(--surface-2); padding: 5px; gap: .3rem; }
.generator-tabs button { padding: .5rem .85rem; font-size: .9rem; border-radius: var(--radius-pill); }
.generator-tabs button.is-active {
  background: var(--primary); color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(79,70,229,.35);
}
.generator-tabs button:not(.is-active):hover { color: var(--ink); background: rgba(255,255,255,.6); }

/* Inputs */
.generator-form .field input,
.generator-form .field textarea,
.generator-form .field select { border-radius: 12px; background: var(--surface); }

/* The submit becomes a quiet "update" affordance — preview is live anyway */
.generator-form button[type="submit"],
.generator-form__submit {
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line); box-shadow: none;
  justify-self: start; font-weight: 600;
}
.generator-form button[type="submit"]:hover,
.generator-form__submit:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-muted); transform: none; }

/* Right: preview studio — tinted column, framed QR */
.preview {
  background: linear-gradient(180deg, #F6F7FC 0%, #ECEEFA 100%);
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  box-shadow: none; position: static;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  display: grid; gap: 1rem; align-content: center;
}
@media (max-width: 860px) { .preview { align-content: start; } }
.preview__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.preview__head strong { font-family: var(--font-heading); font-size: 1rem; color: var(--ink); }
.preview__badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--primary-dark); background: var(--primary-soft);
  padding: .2rem .55rem; border-radius: var(--radius-pill);
}
.preview__stage {
  display: grid; place-items: center;
  padding: 1rem; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79,70,229,.10), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.preview__stage img, .preview__stage svg, .preview img, .preview svg {
  width: 100%; max-width: 260px; margin-inline: auto;
  background: #fff; border-radius: 16px; padding: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(40,18,100,.16);
}
.preview-actions { display: grid; gap: .55rem; }
.preview-actions .btn { width: 100%; }
.preview__note { font-size: .82rem; color: var(--ink-muted); margin: 0; text-align: center; }

/* ---- Responsive: stack the card under ~860px ---- */
@media (max-width: 860px) {
  .generator-wrap { grid-template-columns: 1fr; max-width: 540px; }
  .preview { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .generator-wrap { border-radius: 20px; }
  .builder-hero__head h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
}

/* ============================================================
   Homepage hero "above-the-fold" fit — 2026-06-15
   Goal: the full builder hero (eyebrow, headline, subcopy, the
   generator card and its primary CTAs) fits within one viewport
   on first load at desktop, laptop (768px tall) and mobile.
   Approach: svh/dvh-aware sizing (mobile-toolbar safe), tighter
   vertical rhythm, and an internally-scrolling style grid so the
   19-tile picker can't push the CTA below the fold.
   Appended last so it overrides the polish-v2 block above.
   ============================================================ */

/* Trim the big section padding; reserve at most one small-viewport
   height (minus the sticky header) so the section itself never demands
   more than the visible area, but never clip (min-height, not height).
   --header-h ~= brand mark 36px + 14px*2 padding + 1px border. */
.section--builder-hero {
  --header-h: 65px;
  padding: clamp(24px, 3.4vw, 48px) 0 clamp(28px, 3.4vw, 52px);
  min-height: calc(100svh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
}
.section--builder-hero > .container { width: 100%; }

/* Tighter head: smaller gaps + a headline that scales down on
   short/laptop screens so two lines don't eat the fold. */
.builder-hero__head { margin: 0 auto 1.2rem; }
.builder-hero__head h1 {
  font-size: clamp(1.7rem, 1.4vw + 1.2rem, 2.7rem);
  margin: .55rem 0 .45rem;
}
.builder-hero__head .download-counter { margin-top: .85rem; }

/* The card must stay compact. Let the form column manage its own
   height and hand the overflow to the style grid only. */
.generator-form { padding: clamp(1rem, 1.8vw, 1.5rem); gap: .85rem; }

/* KEY LEVER: cap the style picker and scroll it internally so the
   full grid is reachable without growing the hero past the fold.
   Tuned in svh so mobile browser chrome is accounted for. */
.style-grid {
  max-height: clamp(190px, 30svh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px; /* room for the scrollbar, no content clip */
  scrollbar-width: thin;
}
.style-tile { min-height: 116px; }
.style-tile__swatch { width: 72px; height: 72px; }

/* Slightly tighter preview column so the Download CTAs sit higher. */
.preview { padding: clamp(1rem, 1.8vw, 1.5rem); gap: .8rem; }
.preview__stage img, .preview__stage svg,
.preview img, .preview svg { max-width: 200px; }

/* Short viewports (e.g. 1366x768 laptop, the tightest common desktop):
   squeeze padding, head and the style-grid cap so the whole side-by-side
   card (form column is the tall side) clears the fold. */
@media (min-width: 861px) and (max-height: 820px) {
  .section--builder-hero { padding-block: clamp(14px, 2vw, 26px); }
  .builder-hero__head { margin-bottom: .55rem; max-width: 52ch; }
  .builder-hero__head h1 { font-size: clamp(1.5rem, .9vw + 1.1rem, 2rem); margin: .35rem 0 .35rem; }
  .builder-hero__head .hero__sub { font-size: 1rem; }
  .builder-hero__head .download-counter { margin-top: .5rem; }
  .generator-form { gap: .65rem; padding: clamp(.9rem, 1.5vw, 1.2rem); }
  .style-grid { max-height: clamp(128px, 17svh, 180px); }
  .preview { gap: .65rem; padding: clamp(.9rem, 1.5vw, 1.2rem); }
  .preview__stage img, .preview__stage svg,
  .preview img, .preview svg { max-width: 150px; }
}

/* Even shorter desktops (e.g. 700px tall windows): hand more of the
   form to the scrollable grid so head + CTA stay visible. */
@media (min-width: 861px) and (max-height: 700px) {
  .section--builder-hero { padding-block: 12px; }
  .builder-hero__head { margin-bottom: .55rem; }
  .style-grid { max-height: 150px; }
}

/* Mobile: the card stacks (form, then live preview) — keeping the
   build-then-result order. Cap the hero to one toolbar-safe screen and
   tighten the head + form rhythm so first load shows: eyebrow, headline,
   subcopy, the type tabs, the pre-filled URL field (which auto-renders a
   live preview), and a peek of the style picker. The 19-tile grid scrolls
   inside its own box, so it never pushes the page on first paint. The
   download counter is hidden on phones to reclaim a line. */
@media (max-width: 860px) {
  .section--builder-hero {
    align-items: flex-start;
    min-height: calc(100svh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    padding: clamp(14px, 4vw, 26px) 0 clamp(18px, 5vw, 32px);
  }
  .builder-hero__head { margin-bottom: .7rem; }
  .builder-hero__head h1 { font-size: clamp(1.5rem, 5.2vw, 1.95rem); margin: .35rem 0 .35rem; }
  .builder-hero__head .hero__sub { font-size: clamp(.95rem, 3.4vw, 1.05rem); }
  .builder-hero__head .download-counter { display: none; }
  .generator-form { gap: .7rem; padding: 1rem; }
  .style-grid { max-height: clamp(140px, 22svh, 200px); }
  .preview { gap: .7rem; padding: 1rem; }
  .preview__stage img, .preview__stage svg,
  .preview img, .preview svg { max-width: 160px; }
}

/* Very short viewports (landscape phones, tiny laptops): trim the
   internal style-grid cap further so the card top + CTA stay visible. */
@media (max-height: 560px) {
  .section--builder-hero { min-height: 0; padding-block: 14px; }
  .builder-hero__head { margin-bottom: .6rem; }
  .style-grid { max-height: 150px; }
}