/* ============================
Landing System (Global)
============================ */

/* Container principal */
.landing-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ============================
Header
============================ */
.landing-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.landing-header :is(h1, h2) {
  font-size: 1.8rem;
  line-height: 1.3;
}

.landing-header p {
  color: var(--muted);
  font-size: 1rem;
}

.planilha-freelancer-page .landing-header {
  align-items: center;
}

.planilha-freelancer-page,
.planilha-freelancer-page * {
  box-sizing: border-box;
}

.planilha-freelancer-page {
  --freelancer-hero-bg:
    radial-gradient(circle at 50% 5rem, color-mix(in srgb, #2563eb 14%, transparent), transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 70%, var(--card)), color-mix(in srgb, var(--bg-color) 92%, #dbeafe) 36rem, var(--bg-color));
  --freelancer-shot-shell:
    linear-gradient(135deg, rgb(255 255 255 / 0.94), color-mix(in srgb, var(--card) 82%, #dbeafe)),
    linear-gradient(135deg, color-mix(in srgb, #2563eb 14%, transparent), color-mix(in srgb, #14b8a6 10%, transparent));
  --freelancer-shot-overlay:
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(15 23 42 / 0.07)),
    radial-gradient(circle at 50% 10%, rgb(255 255 255 / 0.16), transparent 58%);
  --freelancer-shot-filter: brightness(0.96) contrast(1.045) saturate(0.92);
  --freelancer-shot-border: color-mix(in srgb, var(--border) 82%, #94a3b8);
  --freelancer-shot-shadow:
    0 28px 74px rgb(15 23 42 / 0.18),
    0 10px 28px rgb(37 99 235 / 0.12);
  overflow-x: clip;
  background: var(--freelancer-hero-bg);
}

.planilha-freelancer-page .landing-container {
  width: 100%;
  max-width: 1120px;
  padding-inline: 0;
  gap: clamp(2rem, 4vw, 3.35rem);
}

.planilha-freelancer-page .landing-header {
  width: 100%;
  max-width: none;
  padding-top: clamp(0.55rem, 1.8vw, 1.8rem);
  gap: clamp(0.72rem, 1.45vw, 1.15rem);
}

.planilha-freelancer-page .landing-header > :not(.planilha-hero-visual) {
  width: calc(100vw - 2.25rem);
  max-width: 700px;
}

.planilha-freelancer-page .landing-header :is(h1, h2) {
  max-width: 680px;
  margin-inline: auto;
  font-size: clamp(2.15rem, 5vw, 3.95rem);
  line-height: 1;
  letter-spacing: 0;
}

.planilha-freelancer-page .landing-header p {
  max-width: 540px;
  margin-inline: auto;
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
}

.planilha-freelancer-page .cta-group {
  position: relative;
  z-index: 2;
}

.planilha-freelancer-page .btn-landing {
  min-width: min(100%, 210px);
  padding: 0.68rem 1rem;
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.13);
}

.planilha-freelancer-page .btn-landing-primary {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-color: color-mix(in srgb, #1d4ed8 82%, #ffffff);
  color: #ffffff;
  text-shadow: 0 1px 1px rgb(15 23 42 / 0.22);
  box-shadow:
    0 18px 42px rgb(37 99 235 / 0.32),
    0 8px 18px rgb(15 23 42 / 0.14);
}

.planilha-freelancer-page .btn-landing-primary:hover {
  background: linear-gradient(180deg, #2563eb, #1e40af);
  color: #ffffff;
  opacity: 1;
  box-shadow:
    0 20px 48px rgb(37 99 235 / 0.38),
    0 9px 20px rgb(15 23 42 / 0.16);
}

.planilha-freelancer-page .btn-landing-secondary {
  background: color-mix(in srgb, var(--card) 92%, #ffffff);
  border-color: color-mix(in srgb, var(--border) 76%, var(--primary));
  color: color-mix(in srgb, var(--text-color) 92%, #0f172a);
}

.planilha-freelancer-page .btn-landing-secondary:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  color: var(--text-color);
}

.planilha-freelancer-page .cta-note {
  color: color-mix(in srgb, var(--muted) 88%, var(--text-color));
  font-size: 0.9rem;
}

.planilha-hero-visual {
  position: relative;
  isolation: isolate;
  width: calc(100vw - 2.25rem);
  max-width: clamp(700px, 63vw, 880px);
  margin: clamp(1rem, 2.2vw, 2rem) auto 0;
  padding: clamp(0.55rem, 1vw, 0.85rem);
  border-radius: clamp(20px, 1.9vw, 28px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 48%),
    var(--freelancer-shot-shell);
  border: 1px solid color-mix(in srgb, var(--freelancer-shot-border) 84%, transparent);
  box-shadow:
    var(--freelancer-shot-shadow),
    0 0 0 1px rgb(255 255 255 / 0.05) inset;
}

.planilha-hero-visual::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    linear-gradient(180deg, transparent 48%, rgb(15 23 42 / 0.05));
}

.planilha-hero-visual::after {
  position: absolute;
  inset: clamp(0.55rem, 1vw, 0.85rem);
  z-index: 2;
  pointer-events: none;
  content: "";
  border-radius: clamp(14px, 1.5vw, 20px);
  background: var(--freelancer-shot-overlay);
}

.planilha-hero-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  border-radius: clamp(14px, 1.5vw, 20px);
  border: 1px solid color-mix(in srgb, var(--freelancer-shot-border) 78%, transparent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.34),
    0 20px 54px rgb(15 23 42 / 0.16),
    0 8px 18px rgb(15 23 42 / 0.08);
  filter: var(--freelancer-shot-filter);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.planilha-hero-visual:hover img {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.34),
    0 28px 72px rgb(15 23 42 / 0.2),
    0 10px 24px rgb(15 23 42 / 0.1);
}

/* ============================
CTA
============================ */
.cta-group {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-landing {
  display: inline-block;
  min-width: min(100%, 240px);
  padding: 0.75rem 1.2rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all var(--transition-default);
}

.btn-landing-primary {
  background: var(--primary);
  color: var(--ml-on-primary);
}

.btn-landing-primary:hover {
  opacity: 0.9;
}

.btn-landing-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-color);
}

.btn-landing-secondary:hover {
  background: var(--card);
}

/* ============================
Feature note
============================ */
.feature-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ============================
Sections
============================ */
.landing-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================
Benefits Grid
============================ */
.planilha-freelancer-page .benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.15rem);
  align-items: start;
}

.planilha-freelancer-page .benefit-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: auto;
  appearance: none;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 68%, var(--card)), var(--card)),
    radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 46%);
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  padding: clamp(0.65rem, 1.1vw, 0.85rem);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.planilha-freelancer-page .benefit-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow:
    0 14px 34px color-mix(in srgb, #0f172a 10%, transparent),
    0 0 18px color-mix(in srgb, var(--primary) 7%, transparent);
}

.planilha-freelancer-page .benefit-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent);
  outline-offset: 4px;
}

.planilha-freelancer-page .benefit-card > img {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: clamp(0.7rem, 1.1vw, 0.9rem);
  object-fit: contain;
  object-position: 50% 0%;
  background: color-mix(in srgb, var(--card) 88%, #dbeafe);
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--freelancer-shot-border) 76%, transparent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.28),
    0 12px 28px rgb(15 23 42 / 0.13);
  filter: var(--freelancer-shot-filter);
}

.planilha-freelancer-page .benefit-card-cash > img {
  object-position: 50% 2%;
}

.planilha-freelancer-page .benefit-card-projects > img {
  object-position: 50% 44%;
}

.planilha-freelancer-page .benefit-card-decisions > img {
  object-position: 50% 82%;
}

.planilha-freelancer-page .benefit-card h3 {
  width: 100%;
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  line-height: 1.22;
  margin-bottom: 0.35rem;
}

.planilha-freelancer-page .benefit-card p {
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ============================
Image lightbox
============================ */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgb(2 6 23 / 0.9);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(10px);
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.image-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 1180px);
  max-height: 84vh;
}

.lightbox-content img {
  width: auto;
  max-width: 100%;
  max-height: 84vh;
  border-radius: clamp(12px, 1.7vw, 18px);
  border: 1px solid rgb(148 163 184 / 0.28);
  box-shadow:
    0 34px 90px rgb(0 0 0 / 0.72),
    0 0 44px rgb(37 99 235 / 0.18);
}

.lightbox-close {
  position: absolute;
  top: clamp(0.85rem, 2.2vw, 1.5rem);
  right: clamp(0.85rem, 2.2vw, 1.5rem);
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(15 23 42 / 0.9);
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.36);
}

.lightbox-close:hover {
  background: rgb(30 41 59 / 0.96);
  border-color: rgb(96 165 250 / 0.42);
}

[data-theme="dark"] .planilha-freelancer-page,
html.dark .planilha-freelancer-page {
  --freelancer-hero-bg:
    radial-gradient(circle at 50% 5rem, rgb(37 99 235 / 0.2), transparent 31rem),
    linear-gradient(180deg, rgb(13 26 44), rgb(7 17 31) 38rem, var(--bg-color));
  --freelancer-shot-shell:
    linear-gradient(135deg, rgb(15 23 42 / 0.98), rgb(20 35 58 / 0.94)),
    linear-gradient(135deg, rgb(96 165 250 / 0.2), rgb(20 184 166 / 0.12));
  --freelancer-shot-overlay:
    linear-gradient(180deg, rgb(8 15 28 / 0.08), rgb(8 15 28 / 0.22)),
    radial-gradient(circle at 50% 0%, rgb(96 165 250 / 0.1), transparent 60%);
  --freelancer-shot-filter: brightness(0.84) contrast(1.08) saturate(0.88);
  --freelancer-shot-border: rgb(148 163 184 / 0.34);
  --freelancer-shot-shadow:
    0 34px 88px rgb(0 0 0 / 0.5),
    0 12px 34px rgb(37 99 235 / 0.18);
}

[data-theme="dark"] .planilha-freelancer-page .btn-landing-primary,
html.dark .planilha-freelancer-page .btn-landing-primary {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-color: rgb(147 197 253 / 0.58);
  color: #ffffff;
  text-shadow: 0 1px 1px rgb(15 23 42 / 0.26);
  box-shadow:
    0 18px 44px rgb(37 99 235 / 0.34),
    0 8px 20px rgb(0 0 0 / 0.32);
}

[data-theme="dark"] .planilha-freelancer-page .btn-landing-primary:hover,
html.dark .planilha-freelancer-page .btn-landing-primary:hover {
  background: linear-gradient(180deg, #2563eb, #1e40af);
  color: #ffffff;
}

[data-theme="dark"] .planilha-freelancer-page .btn-landing-secondary,
html.dark .planilha-freelancer-page .btn-landing-secondary {
  background: rgb(15 23 42 / 0.82);
  border-color: rgb(148 163 184 / 0.42);
  color: #eef6ff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 12px 30px rgb(0 0 0 / 0.28);
}

[data-theme="dark"] .planilha-freelancer-page .btn-landing-secondary:hover,
html.dark .planilha-freelancer-page .btn-landing-secondary:hover {
  background: rgb(30 41 59 / 0.92);
  border-color: rgb(96 165 250 / 0.45);
  color: #ffffff;
}

[data-theme="dark"] .planilha-freelancer-page .benefit-card,
html.dark .planilha-freelancer-page .benefit-card {
  background:
    linear-gradient(180deg, rgb(31 45 68 / 0.9), rgb(14 27 47 / 0.98)),
    radial-gradient(circle at 22% 0%, rgb(96 165 250 / 0.13), transparent 48%);
  border-color: rgb(148 163 184 / 0.22);
}

[data-theme="dark"] .planilha-freelancer-page .ml-flow-box,
html.dark .planilha-freelancer-page .ml-flow-box,
[data-theme="dark"] .planilha-freelancer-page .price-section,
html.dark .planilha-freelancer-page .price-section,
[data-theme="dark"] .planilha-freelancer-page .technical-validation-card,
html.dark .planilha-freelancer-page .technical-validation-card {
  background:
    linear-gradient(180deg, rgb(20 35 58 / 0.96), rgb(12 24 41 / 0.98)),
    radial-gradient(circle at 50% 0%, rgb(96 165 250 / 0.14), transparent 54%);
  border-color: rgb(148 163 184 / 0.24);
  box-shadow:
    0 28px 72px rgb(0 0 0 / 0.36),
    0 10px 28px rgb(37 99 235 / 0.12);
}

[data-theme="dark"] .planilha-freelancer-page .ml-flow-box :is(h2, h3),
html.dark .planilha-freelancer-page .ml-flow-box :is(h2, h3),
[data-theme="dark"] .planilha-freelancer-page .price-copy strong,
html.dark .planilha-freelancer-page .price-copy strong,
[data-theme="dark"] .planilha-freelancer-page .technical-validation-card :is(h2, h3),
html.dark .planilha-freelancer-page .technical-validation-card :is(h2, h3) {
  color: #f4f8ff;
}

[data-theme="dark"] .planilha-freelancer-page .ml-flow-box p:not(.cta-note),
html.dark .planilha-freelancer-page .ml-flow-box p:not(.cta-note),
[data-theme="dark"] .planilha-freelancer-page .price-copy,
html.dark .planilha-freelancer-page .price-copy,
[data-theme="dark"] .planilha-freelancer-page .price-subtitle,
html.dark .planilha-freelancer-page .price-subtitle,
[data-theme="dark"] .planilha-freelancer-page .technical-validation-list,
html.dark .planilha-freelancer-page .technical-validation-list {
  color: rgb(203 215 232);
}

[data-theme="dark"] .planilha-freelancer-page .price-meta,
html.dark .planilha-freelancer-page .price-meta,
[data-theme="dark"] .planilha-freelancer-page .ml-flow-box .cta-note,
html.dark .planilha-freelancer-page .ml-flow-box .cta-note {
  color: rgb(178 194 216);
}

[data-theme="dark"] .planilha-freelancer-page .price-value,
html.dark .planilha-freelancer-page .price-value {
  color: #93c5fd;
}

/* ============================
CTA center
============================ */
.cta-center {
  display: flex;
  justify-content: center;
  text-align: center;
}

.cta-center .btn-landing,
.price-section .btn-landing {
  margin-inline: auto;
}

.planilha-freelancer-page .landing-section {
  gap: clamp(0.8rem, 1.45vw, 1.1rem);
  width: calc(100vw - 2.25rem);
  max-width: 980px;
  margin-inline: auto;
}

.planilha-freelancer-page .landing-section:has(.ml-flow-box) {
  padding-block: clamp(0.25rem, 1.6vw, 1rem);
}

.planilha-freelancer-page .ml-flow-box {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 860px);
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(1.15rem, 2.2vw, 1.65rem);
  text-align: left;
  background:
    linear-gradient(135deg, color-mix(in srgb, #ffffff 78%, var(--card)), var(--card)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 48%);
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--primary));
  border-radius: 16px;
  box-shadow:
    0 24px 66px rgb(15 23 42 / 0.13),
    0 10px 28px rgb(37 99 235 / 0.1);
  gap: clamp(0.75rem, 1.8vw, 1.2rem);
}

.planilha-freelancer-page .ml-flow-box :is(h2, h3) {
  max-width: 34rem;
  margin: 0;
  color: var(--text-color);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.planilha-freelancer-page .ml-flow-box p:not(.cta-note) {
  max-width: 34rem;
  margin: 0;
  color: color-mix(in srgb, var(--muted) 86%, var(--text-color));
  font-size: 0.92rem;
  line-height: 1.5;
}

.planilha-freelancer-page .ml-flow-box .cta-center {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
}

.planilha-freelancer-page .ml-flow-box .cta-note,
.planilha-freelancer-page .price-section .cta-note {
  color: color-mix(in srgb, var(--muted) 82%, var(--text-color));
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.92;
}

.planilha-freelancer-page .ml-flow-box .cta-note {
  grid-column: 1 / -1;
}

.planilha-freelancer-page .price-section {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(100%, 760px);
  max-width: 760px;
  gap: clamp(0.55rem, 1.1vw, 0.78rem);
  justify-items: center;
  margin-inline: auto;
  padding: clamp(1.3rem, 2.8vw, 2rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 80%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary));
  border-radius: 18px;
  box-shadow:
    0 26px 68px rgb(15 23 42 / 0.14),
    0 10px 28px rgb(37 99 235 / 0.11);
}

.planilha-freelancer-page .price-section::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 72%, #60a5fa), transparent);
}

.planilha-freelancer-page .price-copy {
  display: grid;
  gap: 0.34rem;
  max-width: 36rem;
  margin: 0;
  color: color-mix(in srgb, var(--muted) 86%, var(--text-color));
  font-size: clamp(0.94rem, 1.1vw, 1rem);
  line-height: 1.45;
}

.planilha-freelancer-page .price-copy strong {
  color: var(--text-color);
  font-size: clamp(1.12rem, 1.7vw, 1.38rem);
  line-height: 1.2;
}

.planilha-freelancer-page .price-copy span {
  display: block;
}

.planilha-freelancer-page .price-value {
  display: block;
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--primary) 92%, var(--text-color));
  font-size: clamp(1.8rem, 3.2vw, 2.45rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}

.planilha-freelancer-page .price-subtitle,
.planilha-freelancer-page .price-meta {
  max-width: 31rem;
  margin: 0;
  color: color-mix(in srgb, var(--muted) 82%, var(--text-color));
  font-size: 0.92rem;
  line-height: 1.45;
}

.planilha-freelancer-page .price-meta {
  color: color-mix(in srgb, var(--muted) 72%, var(--text-color));
  font-size: 0.84rem;
}

.planilha-freelancer-page .ml-flow-box .cta-center,
.planilha-freelancer-page .price-section .cta-group {
  margin-top: 0.25rem;
}

.planilha-freelancer-page .ml-flow-box .btn-landing,
.planilha-freelancer-page .price-section .btn-landing {
  min-width: min(100%, 225px);
  padding-block: 0.76rem;
  box-shadow:
    0 18px 42px rgb(37 99 235 / 0.28),
    0 8px 18px rgb(15 23 42 / 0.13);
}

.planilha-freelancer-page .technical-validation-section {
  padding-block: clamp(0.1rem, 1vw, 0.45rem);
}

.planilha-freelancer-page .technical-validation-card {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 82%, var(--card)), var(--card)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 54%);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--primary));
  border-radius: 16px;
  box-shadow:
    0 18px 48px rgb(15 23 42 / 0.1),
    0 8px 20px rgb(37 99 235 / 0.08);
  gap: 0.8rem;
}

.planilha-freelancer-page .technical-validation-card :is(h2, h3) {
  margin: 0;
  color: var(--text-color);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
}

.planilha-freelancer-page .technical-validation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem 1rem;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--muted) 84%, var(--text-color));
  font-size: 0.9rem;
  line-height: 1.42;
  list-style: none;
}

/* ============================
Price section
============================ */
.price-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.price-section strong {
  font-weight: 700;
}

/* ============================
Responsive
============================ */
@media (max-width: 768px) {
  .planilha-freelancer-page {
    overflow-x: hidden;
  }

  .planilha-freelancer-page .ml-tool-shell {
    width: 100%;
    padding-inline: var(--mobile-container-padding, var(--space-md));
  }

  .landing-container {
    gap: var(--mobile-section-gap, var(--space-lg));
    padding-inline: var(--mobile-container-padding, var(--space-md));
  }

  .planilha-freelancer-page .landing-container {
    padding-inline: 0;
  }

  .planilha-freelancer-page .landing-header > :not(.planilha-hero-visual),
  .planilha-hero-visual,
  .planilha-freelancer-page .landing-section,
  .benefits-grid,
  .planilha-freelancer-page .ml-flow-box,
  .planilha-freelancer-page .price-section,
  .planilha-freelancer-page .technical-validation-card {
    width: 100%;
    max-width: calc(100vw - 2.25rem);
  }

  .planilha-freelancer-page .landing-header > :not(.planilha-hero-visual) {
    max-width: min(22rem, calc(100vw - 2.25rem));
  }

  .planilha-freelancer-page .landing-header :is(h1, h2) {
    max-width: min(21rem, calc(100vw - 2.25rem));
    font-size: clamp(1.9rem, 8.8vw, 2.35rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
  }

  .planilha-freelancer-page .landing-header p {
    font-size: 1rem;
  }

  .landing-header {
    gap: var(--mobile-stack-gap, var(--space-sm));
    padding-top: var(--mobile-hero-padding-start, 0);
  }

  .planilha-freelancer-page .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--mobile-card-gap, var(--space-sm));
  }

  .landing-header :is(h1, h2) {
    font-size: clamp(1.55rem, 7vw, 1.85rem);
    line-height: 1.12;
  }

  .landing-header p {
    line-height: 1.5;
  }

  .landing-section {
    gap: var(--mobile-stack-gap, var(--space-sm));
  }

  .planilha-freelancer-page .benefit-card {
    padding: clamp(0.72rem, 4vw, 0.95rem);
  }

  .planilha-hero-visual {
    max-width: 100%;
    margin-top: var(--space-sm);
    padding: 0.55rem;
    border-radius: 18px;
  }

  .planilha-hero-visual img {
    border-radius: 14px;
    box-shadow:
      0 18px 48px color-mix(in srgb, #0f172a 16%, transparent),
      0 6px 18px color-mix(in srgb, #0f172a 8%, transparent);
  }

  .planilha-freelancer-page .benefit-card > img {
    height: auto;
    border-radius: 10px;
  }

  .btn-landing {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
  }

  .cta-group {
    width: 100%;
    max-width: min(19.5rem, calc(100vw - 2.25rem));
    margin-inline: auto;
  }

  .cta-center {
    width: 100%;
  }

  .planilha-freelancer-page .ml-flow-box {
    grid-template-columns: 1fr;
    align-items: stretch;
    text-align: center;
    padding: clamp(1rem, 4.5vw, 1.2rem);
    gap: 0.6rem;
  }

  .planilha-freelancer-page .ml-flow-box :is(h2, h3),
  .planilha-freelancer-page .ml-flow-box p:not(.cta-note) {
    margin-inline: auto;
  }

  .planilha-freelancer-page .ml-flow-box .cta-center {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }

  .planilha-freelancer-page .price-section {
    padding: clamp(1.05rem, 4.8vw, 1.3rem);
    gap: 0.58rem;
  }

  .planilha-freelancer-page .technical-validation-card {
    padding: clamp(0.95rem, 4vw, 1.1rem);
  }

  .planilha-freelancer-page .technical-validation-list {
    grid-template-columns: 1fr;
    gap: 0.42rem;
    font-size: 0.88rem;
  }

  .planilha-freelancer-page .price-copy {
    gap: 0.28rem;
    font-size: 0.94rem;
    line-height: 1.38;
  }

  .planilha-freelancer-page .price-value {
    font-size: clamp(1.55rem, 7vw, 1.95rem);
    line-height: 1.04;
  }

  .lightbox-content,
  .lightbox-content img {
    max-height: 82vh;
  }

  .planilha-freelancer-page .price-meta,
  .planilha-freelancer-page .ml-flow-box .cta-note {
    font-size: 0.8rem;
  }
}