/* ============================================================
   SEYMON MARKOV — v3 theme  "Quiet Luxury / Gallery Minimal"
   Loads AFTER design-tokens.css + styles.css, scoped to body.v3.
   - Near-monochrome ivory canvas, no color blocks, no cards
   - Thin large Mona Sans display, whitespace + hairlines as structure
   - Letterspaced micro-labels, restrained ink CTA
   ============================================================ */

body.v3 {
  --v3-bg:          #f7f4f0;   /* official cream canvas */
  --v3-bg-2:        #efece3;   /* faintly deeper band */
  --v3-surface:     #FFFFFF;
  --v3-ink:         #0c4242;   /* official petrol for display */
  --v3-ink-soft:    #4b5b57;   /* body */
  --v3-ink-faint:   #66706a;   /* captions — AA (4.68:1 on cream) */
  --v3-label:       #6E6450;   /* taupe, AA as text */
  --v3-line:        #E4E2D6;   /* hairline */
  --v3-line-2:      #D6D4C6;   /* stronger hairline */
  --v3-cta:         #0c4242;
  --v3-cta-hover:   #083433;

  background: var(--v3-bg);
  color: var(--v3-ink-soft);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.v3 ::selection { background: #D9DEC6; color: #14302B; }
body.v3 a { color: var(--v3-ink); }
body.v3 .container { max-width: 1120px; }
.v3-narrow { max-width: 64rem; margin-inline: auto; }

/* ---------- thin display type ---------- */
.v3-display {
  font-weight: 300;
  color: var(--v3-ink);
  letter-spacing: -0.016em;
  line-height: 1.06;
}
.v3-display .v3-em { font-style: italic; font-weight: 300; color: var(--v3-label); }

/* ---------- letterspaced micro-label ---------- */
.v3-label {
  display: inline-block;
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: var(--w-semibold);
  color: var(--v3-label);
}

/* ---------- hairline ---------- */
.v3-hr { height: 1px; width: 100%; border: 0; background: var(--v3-line); }

/* ---------- buttons (restrained ink) ---------- */
body.v3 .btn-primary {
  background: var(--v3-cta);
  color: #FAFAF5;
  border: 1px solid var(--v3-cta);
  border-radius: 3px;
  box-shadow: none;
  font-weight: var(--w-medium);
  letter-spacing: .005em;
}
body.v3 .btn-primary:hover {
  background: var(--v3-cta-hover);
  border-color: var(--v3-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -16px rgba(20,48,43,.5);
}
body.v3 .btn-ghost {
  background: transparent;
  color: var(--v3-ink);
  border: 1px solid var(--v3-line-2);
  border-radius: 3px;
}
body.v3 .btn-ghost:hover { border-color: var(--v3-ink); }
body.v3 :focus-visible { outline: 2px solid var(--v3-ink); outline-offset: 3px; }

/* ============================================================
   NAV — minimal
   ============================================================ */
body.v3 .site-header {
  background: rgba(250,250,245,.72);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid transparent;
}
body.v3 .site-header.is-scrolled { border-bottom: 1px solid var(--v3-line); background: rgba(250,250,245,.92); }
body.v3 .brand .wordmark {
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: .92rem;
  color: var(--v3-ink);
}
body.v3 .nav-links a { color: var(--v3-ink-soft); font-weight: var(--w-regular); }
body.v3 .nav-links a:hover { color: var(--v3-ink); }

/* ============================================================
   HERO — stark, left, huge whitespace
   ============================================================ */
.v3-hero { padding: clamp(4.5rem, 3rem + 9vw, 9rem) 0 clamp(3rem, 2rem + 5vw, 6rem); }
.v3-hero-inner { max-width: 60rem; }
.v3-hero-h1 {
  font-size: clamp(3rem, 1.9rem + 5.2vw, 5rem);   /* ~48 → 80px, light */
  font-weight: var(--w-display);
  margin: var(--sp-6) 0 var(--sp-5);
  max-width: 16ch;
  /* Two short sentences. Without this the line breaks mid-sentence and leaves
     an orphan word alone on line two. Balance splits it on the period. */
  text-wrap: balance;
}
.v3-hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--v3-ink-soft);
  max-width: 42rem;
  font-weight: var(--w-regular);
}
.v3-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-8); }
.v3-hero-note { font-size: var(--fs-body-sm); color: var(--v3-ink-faint); }

/* ICP callout — message match with the ad's self-qualifying hook */
.v3-hero-icp {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--v3-line);
  font-size: var(--fs-body-sm);
  color: var(--v3-ink-faint);
  max-width: 46ch;
}
.v3-hero-icp strong { font-weight: 500; color: var(--v3-ink); }

/* proof strip — thin numbers on hairlines */
.v3-proofstrip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-top: 1px solid var(--v3-line);
}
/* two-stat variant (ROAS removed pending verification) */
.v3-proofstrip-2 { grid-template-columns: repeat(2, 1fr); max-width: 46rem; }
.v3-proofstrip > div { padding: var(--sp-6) var(--sp-5) 0 0; }
.v3-proofstrip > div + div { border-left: 1px solid var(--v3-line); padding-left: var(--sp-6); }
.v3-proof-n {
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 300; color: var(--smkv-emerald); letter-spacing: -0.01em; line-height: 1;
}
.v3-proof-l { margin-top: var(--sp-3); font-size: var(--fs-body-sm); color: var(--v3-ink-faint); max-width: 22ch; }

/* ============================================================
   SECTION rhythm — hairline dividers + big whitespace
   ============================================================ */
.v3-section { padding: clamp(4rem, 2.5rem + 6vw, 8rem) 0; border-top: 1px solid var(--v3-line); }
.v3-section.is-plain { border-top: 0; }
.v3-head { max-width: 60rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.v3-head .v3-label { margin-bottom: var(--sp-4); }
.v3-h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.75rem);   /* ~29 → 44px, thin */
  max-width: 20ch;
}
.v3-h2 + .v3-sub { margin-top: var(--sp-4); }
.v3-sub { font-size: var(--fs-lead); color: var(--v3-ink-soft); line-height: 1.5; max-width: 52ch; font-weight: var(--w-regular); }
.v3-body { font-size: var(--fs-body); color: var(--v3-ink-soft); line-height: var(--lh-body); max-width: 60ch; }
.v3-body + .v3-body { margin-top: var(--sp-5); }

/* hairline bullet list */
.v3-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-width: 62ch; }
.v3-list li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--v3-line);
  color: var(--v3-ink-soft); font-size: var(--fs-body); line-height: 1.5;
}
.v3-list li::before { content: ""; margin-top: .62em; width: 12px; height: 1px; background: var(--v3-label); }
.v3-list li:last-child { border-bottom: 1px solid var(--v3-line); }

/* ============================================================
   METHOD — numbered minimal ledger (no cards)
   ============================================================ */
.v3-ledger { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); border-top: 1px solid var(--v3-line-2); }
.v3-pillar {
  display: grid; grid-template-columns: 5rem minmax(11rem, 15rem) 1fr;
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  padding: clamp(1.6rem, 1rem + 1.6vw, 2.6rem) 0;
  border-bottom: 1px solid var(--v3-line);
  align-items: baseline;
}
.v3-pillar-n { font-size: 1.9rem; font-weight: var(--w-display); color: var(--smkv-emerald); letter-spacing: 0; line-height: 1; }
.v3-pillar-name { font-size: var(--fs-h4); font-weight: 300; color: var(--v3-ink); letter-spacing: -0.01em; line-height: 1.15; }
.v3-pillar-desc { font-size: var(--fs-body); color: var(--v3-ink-soft); line-height: 1.55; }

/* ============================================================
   PROOF — restrained, faint band
   ============================================================ */
/* ============================================================
   DEEP-TEAL BANDS — full-bleed, numbers pop on dark (proof + final CTA)
   ============================================================ */
.v3-band { background: var(--smkv-petrol); border-top: 0; color: var(--text-on-dark); }
.v3-band .v3-display, .v3-band .v3-h2, .v3-band .v3-final-h,
.v3-band .v3-stat-n, .v3-band .v3-proof-n { color: #F4F6F2; }
.v3-band .v3-label { color: var(--smkv-taupe); }
.v3-band .v3-sub, .v3-band .v3-stat-l, .v3-band .v3-proof-foot,
.v3-band .v3-final-note, .v3-band p { color: var(--text-on-dark-muted); }
.v3-band .v3-stat { border-top-color: var(--border-on-dark); }
.v3-band .btn-primary { background: var(--smkv-ivory); color: var(--smkv-petrol); border-color: var(--smkv-ivory); }
.v3-band .btn-primary:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }
.v3-band ::selection { background: rgba(193,188,158,.4); color: #F4F6F2; }
.v3-band :focus-visible { outline-color: #F4F6F2; }
.v3-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
/* two-stat variant (ROAS removed pending verification) */
.v3-stats-2 { grid-template-columns: repeat(2, 1fr); max-width: 52rem; }

/* ============================================================
   LEGAL / long-form prose (privacy, terms)
   ============================================================ */
.legal { padding: clamp(3rem, 2rem + 5vw, 6rem) 0; }
.legal .v3-updated { font-size: var(--fs-body-sm); color: var(--v3-ink-faint); margin-bottom: var(--sp-6); }
.legal h2 { font-size: var(--fs-h4); font-weight: 400; color: var(--v3-ink); margin: var(--sp-8) 0 var(--sp-3); letter-spacing: -0.01em; }
.legal h3 { font-size: var(--fs-body); font-weight: 500; color: var(--v3-ink); margin: var(--sp-5) 0 var(--sp-2); }
.legal p, .legal li { font-size: var(--fs-body); color: var(--v3-ink-soft); line-height: 1.6; }
.legal p { margin-bottom: var(--sp-4); }
.legal ul { margin: 0 0 var(--sp-4) 1.1rem; display: grid; gap: var(--sp-2); }
.legal a { color: var(--v3-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal .legal-note { border-left: 2px solid var(--v3-line-2); padding-left: var(--sp-4); color: var(--v3-ink-faint); font-size: var(--fs-body-sm); }
.v3-stat { border-top: 1px solid var(--v3-line-2); padding-top: var(--sp-5); }
.v3-stat-n { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); font-weight: 300; color: var(--v3-ink); letter-spacing: -0.015em; line-height: 1; }
.v3-stat-l { margin-top: var(--sp-4); font-size: var(--fs-body-sm); color: var(--v3-ink-faint); max-width: 26ch; line-height: 1.45; }
.v3-proof-foot { margin-top: clamp(2rem, 1rem + 2vw, 3rem); font-size: var(--fs-body-sm); color: var(--v3-ink-faint); }

/* ============================================================
   STUDIO — company block (replaces the old AUTHORITY/founder block)
   ============================================================ */
.v3-auth-grid { display: grid; grid-template-columns: minmax(24rem, 32rem) 1fr; gap: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); align-items: start; }

/* ============================================================
   FAQ — minimal accordion (reuses .acc-trigger)
   ============================================================ */
.v3-faq { border-top: 1px solid var(--v3-line-2); margin-top: var(--sp-2); }
body.v3 .acc-q { margin: 0; }
body.v3 .acc-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
  background: transparent; border: 0; border-bottom: 1px solid var(--v3-line);
  text-align: left; cursor: pointer; padding: var(--sp-5) 0;
  font-size: var(--fs-h4); font-weight: var(--w-display); color: var(--v3-ink); letter-spacing: -0.015em; line-height: 1.3;
}
body.v3 .acc-trigger:hover { color: var(--v3-label); }
.v3-acc-icon { flex: none; font-size: 1.3rem; line-height: 1; color: var(--v3-ink-faint); transition: transform var(--dur) var(--ease); }
body.v3 .acc-trigger[aria-expanded="true"] .v3-acc-icon { transform: rotate(45deg); }
.v3-acc-panel { padding: var(--sp-2) 0 var(--sp-6); max-width: 64ch; color: var(--v3-ink-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.v3-acc-panel[hidden] { display: none; }

/* ============================================================
   FINAL CTA — centered, airy
   ============================================================ */
.v3-final { text-align: center; padding: clamp(5rem, 3rem + 8vw, 9rem) 0; }
.v3-final-h { font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.4rem); max-width: 16ch; margin: 0 auto var(--sp-8); }
.v3-final-note { margin-top: var(--sp-5); color: var(--v3-ink-faint); font-size: var(--fs-body-sm); max-width: 48ch; margin-inline: auto; line-height: 1.5; }

/* ============================================================
   FOOTER — minimal
   ============================================================ */
body.v3 .site-footer { background: var(--v3-bg); border-top: 1px solid var(--v3-line); color: var(--v3-ink-faint); }
body.v3 .footer-inner { grid-template-columns: 1fr; gap: var(--sp-5); border-bottom: 0; padding-bottom: 0; text-align: center; justify-items: center; }
body.v3 .footer-line { font-size: var(--fs-body-sm); color: var(--v3-ink-faint); max-width: 48ch; }
body.v3 .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-5); }
body.v3 .footer-links a { padding-block: var(--sp-2); }
body.v3 .footer-legal { justify-content: center; flex-wrap: wrap; }
body.v3 .site-footer a { color: var(--v3-ink-faint); }
body.v3 .site-footer a:hover { color: var(--v3-ink); }

/* ============================================================
   MODAL / FORM — light minimal touches (markup reused from v1)
   ============================================================ */
body.v3 .modal-dialog { border: 1px solid var(--v3-line-2); border-radius: 6px; box-shadow: 0 40px 90px -40px rgba(20,48,43,.35); }
body.v3 .modal-title { font-weight: 300; color: var(--v3-ink); letter-spacing: -0.01em; }
body.v3 .overline { color: var(--v3-label); }
body.v3 .form-legend { font-weight: 400; color: var(--v3-ink); }
body.v3 .field input, body.v3 .field select, body.v3 .field textarea { border-radius: 3px; }
body.v3 .progress-step.is-active .progress-dot { background: var(--v3-ink); color: #FAFAF5; border-color: var(--v3-ink); }
body.v3 .progress-step.is-complete .progress-dot { background: var(--v3-label); color: #FAFAF5; border-color: var(--v3-label); }
body.v3 .success-mark { background: #D9DEC6; }

/* Helper line under the fields people hesitate on. Sits below the input and
   above the error, so an error never displaces it. */
body.v3 .field-note {
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--v3-ink-faint);
  margin: 0;
}

/* ============================================================
   BRAND LOGO (official mark)
   ============================================================ */
body.v3 .brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 34px; width: auto; }
.brand-symbol { display: none; height: 34px; width: auto; }
body.v3 .site-footer .brand-logo { height: 32px; }

/* ============================================================
   METHOD, MADE TANGIBLE — deliverable strip
   ============================================================ */
.v3-tangible {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--v3-line-2);
  column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.v3-tangible-item { padding: var(--sp-6) 0; border-bottom: 1px solid var(--v3-line); }
.v3-tangible-item:last-child { grid-column: 1 / -1; }
.v3-tangible-n { font-size: .8rem; letter-spacing: .16em; color: var(--v3-label); }
.v3-tangible-name { font-size: var(--fs-h4); font-weight: var(--w-display); color: var(--v3-ink); letter-spacing: -0.01em; line-height: 1.15; margin: var(--sp-3) 0 var(--sp-2); }
.v3-tangible-desc { font-size: var(--fs-body-sm); color: var(--v3-ink-soft); line-height: 1.55; max-width: 32ch; }

/* ============================================================
   FIT — who this is / isn't for
   ============================================================ */
.v3-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); }
.v3-fit-col { border-top: 2px solid var(--v3-line-2); padding-top: var(--sp-5); }
.v3-fit-yes { border-top-color: var(--smkv-emerald); }
.v3-fit-h { font-size: var(--fs-h4); font-weight: var(--w-display); color: var(--v3-ink); letter-spacing: -0.01em; margin-bottom: var(--sp-3); }
.v3-fit-list { list-style: none; margin: 0; padding: 0; }
.v3-fit-list li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sp-3);
  padding: var(--sp-4) 0; border-top: 1px solid var(--v3-line);
  font-size: var(--fs-body); color: var(--v3-ink-soft); line-height: 1.5;
}
.v3-fit-list li::before { content: ""; margin-top: .62em; width: 12px; height: 1px; }
.v3-fit-yes .v3-fit-list li::before { background: var(--smkv-emerald); }
.v3-fit-no .v3-fit-list li::before { background: var(--v3-ink-faint); }

/* ============================================================
   STUDIO — office/team photo slot (real photo is client-supplied)
   ============================================================ */
.v3-office { margin: 0; }
.v3-office-img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--v3-line-2); }
.v3-office-frame {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--smkv-petrol);
  background: linear-gradient(150deg, #0e504e, var(--smkv-petrol));
  display: grid; place-items: center; border-radius: 4px;
}
.v3-office-mark { width: clamp(110px, 30%, 168px); height: auto; opacity: .92; }
.v3-office-cap { margin-top: var(--sp-3); font-size: var(--fs-body-sm); color: var(--v3-ink-faint); }

/* ============================================================
   CASES  (account screenshots, gallery treatment)
   Hairlines and whitespace only. No cards, no colour blocks.
   ============================================================ */
.v3-cases {
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem);
}
.v3-case { margin: 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.v3-case-img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--v3-line-2); border-radius: 3px;
}
.v3-case-cap { border-top: 1px solid var(--v3-line); padding-top: var(--sp-4); }
.v3-case-line {
  margin-top: var(--sp-3);
  font-size: clamp(1.25rem, .95rem + 1.15vw, 1.85rem);
  font-weight: 300; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.v3-case-line strong { font-weight: 400; color: var(--smkv-emerald); }
.v3-case-meta { margin-top: var(--sp-3); font-size: var(--fs-body-sm); color: var(--v3-ink-faint); }
/* Alternate the image side so the column does not read as a list of cards.
   The track widths have to flip too, otherwise `order` alone drops the image
   into the narrow column and it renders smaller than its siblings. */
.v3-case:nth-child(even) { grid-template-columns: 1fr 1.55fr; }
.v3-case:nth-child(even) .v3-case-img { order: 2; }
.v3-case:nth-child(even) .v3-case-cap { order: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .v3-proofstrip, .v3-proofstrip-2 { grid-template-columns: 1fr; }
  .v3-proofstrip > div + div { border-left: 0; border-top: 1px solid var(--v3-line); padding-left: 0; padding-top: var(--sp-5); }
  .v3-stats, .v3-stats-2 { grid-template-columns: 1fr; gap: var(--sp-6); }
  .v3-auth-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .v3-office { max-width: 30rem; margin-inline: auto; }
  .v3-pillar { grid-template-columns: 3rem 1fr; }
  .v3-pillar-desc { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .v3-fit { grid-template-columns: 1fr; gap: var(--sp-8); }
  /* `:nth-child(even)` outweighs a bare `.v3-case`, and a media query adds no
     specificity, so the stacked rule has to match that weight or the alternating
     two-column layout survives on phones and squashes the image. */
  .v3-case, .v3-case:nth-child(even) { grid-template-columns: 1fr; gap: var(--sp-5); }
  .v3-case:nth-child(even) .v3-case-img { order: 0; }
  .v3-case:nth-child(even) .v3-case-cap { order: 0; }
}
@media (max-width: 620px) {
  .v3-tangible { grid-template-columns: 1fr; }
  .v3-tangible-item:last-child { grid-column: auto; }
}
@media (max-width: 520px) {
  .v3-pillar { grid-template-columns: 2.4rem 1fr; gap: var(--sp-4); }
  .site-header .brand-logo { display: none; }
  .site-header .brand-symbol { display: block; }
}

/* ============================================================
   FORMULÁRIO INLINE NA DOBRA (v4)
   Substitui o modal. O botão sozinho ficava a 48px da lead, o dobro
   do respiro usado no resto do hero, e dividia a linha com a nota no
   desktop por causa do flex-wrap. O formulário passa a ser a âncora
   visual da dobra, que é o que os escalados US fazem.
   ============================================================ */
.v3-hero-form {
  margin-top: var(--sp-6);
  max-width: 34rem;
}
.v3-form-lead {
  font-size: var(--fs-body-sm);
  color: var(--v3-ink);
  font-weight: 400;
  margin-bottom: var(--sp-4);
}
.v3-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
body.v3 .lead-form-inline fieldset.form-step {
  border: 0;
  padding: 0;
  margin: 0;
}
body.v3 .lead-form-inline .field label {
  font-size: var(--fs-body-sm);
  color: var(--v3-ink-soft);
}
body.v3 .lead-form-inline .field input {
  background: #FFFDFA;
  border-radius: 3px;
}
.v3-form-foot {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}
/* O botao ocupa a largura do formulario: vira o elemento mais pesado da dobra. */
.v3-form-foot .btn { width: 100%; }
.v3-form-foot .v3-hero-note { margin: 0; }

/* Rotulo acessivel que nao aparece na tela. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .v3-hero-form { max-width: none; }
  /* Nome e Telefone dividem a linha, Email e Website ocupam a largura toda.
     Tira uma fileira de 83px e traz o botão para dentro da dobra do celular. */
  .v3-form-grid .field:nth-child(3),
  .v3-form-grid .field:nth-child(4) { grid-column: 1 / -1; }
}

/* No celular os 4 campos empilham e empurram o botão para fora da dobra.
   Medido: botão em 927px contra dobra de 844px. Aperta o respiro do topo,
   que é o mais barato de cortar, em vez de espremer os campos. */
@media (max-width: 560px) {
  .v3-hero { padding-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
  .v3-hero-h1 { margin: var(--sp-4) 0 var(--sp-4); }
  .v3-hero-form { margin-top: var(--sp-5); }
  .v3-form-grid { gap: var(--sp-3); }
  .v3-form-foot { margin-top: var(--sp-4); }
}