/* Inter, self-hosted (latin subset, variable weight 300–700) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("assets/fonts/inter-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*
  Design system mirrored from mono-space.org
  - Palette: off-white #eeeeea, black #000, white #fff, grey #a3a3a3
  - Type: Instrument Sans throughout (Google Fonts).
  - Grid: 12 columns, 24px gutters / 24px page margins
*/

:root {
  --off-white: #eeeeea;
  --black: #000;
  --soft-black: #171715;
  --white: #fff;
  --grey: #a3a3a3;
  --success: #008e6d;
  --error: #d1473c;

  --font-sans: "Inter", Helvetica, Arial, sans-serif;
  --font-serif: "Inter", Helvetica, Arial, sans-serif; /* headings: Inter Regular */

  --gap: 24px;
  --gap-half: 12px;
  --gap-double: 48px;
  --ease: cubic-bezier(.57, 0, .13, 1);
  --strip-size: 36px;
  --strip-h: 36px;
  --nav-extra: 0px;
}
@media (min-width: 860px) { :root { --strip-size: 40px; --strip-h: 40px; } }
html.strip-closed, html.no-strip { --strip-h: 0px; }
/* Registered so the strip, the nav and the page slide together when it opens/closes */
@property --strip-h { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --nav-extra { syntax: "<length>"; inherits: true; initial-value: 0px; }
html { transition: --strip-h .45s var(--ease), --nav-extra .45s var(--ease); }
/* Homepage: the strip sits after "O mundo mudou" and sticks to the top once it
   gets there; only then do the fixed logo and CTA step down to make room. */
html.strip-inline { --strip-h: 0px; scroll-padding-top: var(--strip-size); }
html.strip-inline.strip-stuck:not(.strip-closed) { --nav-extra: var(--strip-size); }
/* While the strip has slid away (over the contact section and footer), the nav
   moves up into its place instead of leaving a gap */
html.strip-away, html.strip-inline.strip-stuck.strip-away:not(.strip-closed) { --nav-extra: calc(-1 * var(--strip-h)); }

@media (min-width: 1200px) {
  :root { --gap-half: 16px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
figure, blockquote { margin: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(67, 67, 67, .1);
  scroll-behavior: smooth;
  scroll-padding-top: var(--strip-h);
  color: var(--black);
  background: var(--off-white);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: clip; /* clip, not hidden: body never turns into a scroll container, so sticky elements keep working */
  width: 100%;
  padding-top: var(--strip-h);
  background: var(--off-white);
}

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

/* ---------- Type scale (exact Mono Space values) ---------- */
.p, .wysiwyg li, .wysiwyg p {
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.25;
  font-family: var(--font-sans);
  text-wrap: pretty;
}
.h1 { font-size: clamp(28px, 2.9vw, 64px); line-height: 1.25; letter-spacing: 0; font-family: var(--font-serif); font-weight: 400; }
.h2 { font-size: clamp(20px, 1.8vw, 40px); line-height: 1.25; font-family: var(--font-serif); font-weight: 400; }
.h3 { font-size: clamp(16px, 1.1vw, 32px); line-height: 1.25; font-family: var(--font-serif); font-weight: 400; }
.h4 { font-size: clamp(14px, 1vw, 18px); line-height: 1.25; font-family: var(--font-sans); font-weight: 500; }
.h5 { font-size: clamp(14px, 1vw, 18px); line-height: 1.25; font-family: var(--font-serif); font-weight: 400; }
.h6 { font-size: 12px; line-height: 1.25; font-family: var(--font-sans); font-weight: 500; }

.-uppercase { text-transform: uppercase; }
.-italic { font-style: italic; }
.-text-center { text-align: center; }
.-grey { color: var(--grey); }
.-underline { text-decoration: underline; }
.-margin-left-auto { margin-left: auto; }

.text-block p + p { margin-top: 1.25em; }

.stack { display: flex; flex-direction: column; align-items: flex-start; }
.-text-center .stack, .stack.-center { align-items: center; }
.stack-gap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); }
.stack-gap-half { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-half); }

@media (hover: hover) {
  .link { transition: opacity .3s ease; }
  .link:hover { opacity: .5; }
  .-underline:hover { text-decoration: none; }
}

/* ---------- Colour themes ---------- */
.-bg-black { background-color: var(--soft-black); }
.-bg-off-white { background-color: var(--off-white); }
.-fg-off-white { color: var(--off-white); }
.-fg-off-white a { color: var(--off-white); }

.-border-top { border-top: 1px solid var(--grey); }
.-border-bottom { border-bottom: 1px solid var(--grey); }

/* ---------- Spacing utilities ---------- */
.grid-col { padding: var(--gap); }
.grid-col-t { padding-top: var(--gap); }
.grid-col-b { padding-bottom: var(--gap); }
.grid-col-l { padding-left: var(--gap); }
.grid-col-r { padding-right: var(--gap); }
.grid-col-t-med { padding-top: 64px; }
@media (min-width: 860px) { .grid-col-t-med { padding-top: 96px; } }

.-min-full-vh { min-height: 100vh; min-height: 100svh; }

/* ---------- 12-column grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
  align-items: start;
}
.grid > * { grid-column: span 12; }

@media (min-width: 560px) {
  .grid > .col-6-s, .grid > .col-3, .grid > .col-4 { grid-column: span 6; }
}
@media (max-width: 559px) {
  .grid > .col-6-xs { grid-column: span 6; }
}
@media (min-width: 860px) {
  .grid > .col-2 { grid-column: span 3; }
  .grid > .col-3 { grid-column: span 3; }
  .grid > .col-4 { grid-column: span 4; }
  .grid > .col-6 { grid-column: span 6; }
  .grid > .col-8 { grid-column: span 10; }
  .grid > .push-2 { grid-column: 7 / span 6; }
}
@media (min-width: 1200px) {
  .grid > .col-2 { grid-column: span 2; }
  .grid > .col-8 { grid-column: span 8; }
  .grid > .push-2 { grid-column: 9 / span 4; }
}

/* ---------- Header ---------- */
/* Only "Marcar chamada" stays on screen: it's fixed, and an invisible copy
   holds its place in the nav. main.js flips each part to off-white while it
   sits over a [data-nav="dark"] area. */
/* Fixed but click-through: only the links themselves catch the pointer */
.header {
  position: fixed;
  /* Follows the strip once it sticks to the top, like the fixed logo and CTA */
  top: calc(var(--strip-h) + var(--nav-extra, 0px)); left: 0; right: 0;
  z-index: 20;
  color: var(--black);
  pointer-events: none;
}
.header a, .header button, .header .lang-switch { pointer-events: auto; }
.header .logo-container, .header .nav-right, .header .nav-cta-fixed { transition: color .3s ease, opacity .3s ease; }
.header .nav-on-dark { color: var(--off-white); }
/* The contact section and footer carry their own CTAs: the fixed nav steps aside */
.header .nav-hidden { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s, color .3s ease; }
.header .lang-switch, .header .nav-link-plain { transition: color .3s ease, opacity .25s ease, visibility 0s; }
/* The language switch fades out as soon as the page scrolls; Blog stays */
html.is-scrolled:not(.has-curtain) .header .lang-switch { opacity: 0; visibility: hidden; transition: color .3s ease, opacity .25s ease, visibility 0s .25s; }
.nav-cta-spacer { visibility: hidden; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  transition: color .3s ease;
}
.lang-sep { opacity: .3; }
.lang-link { opacity: .45; transition: opacity .3s ease; }
@media (hover: hover) { .lang-link:hover { opacity: 1; } }
.nav-cta-fixed {
  position: fixed;
  top: calc(var(--strip-h) + var(--nav-extra) + var(--gap));
  right: var(--gap);
  z-index: 21;
  height: 14px;
}
@media (min-width: 860px) { .nav-cta-fixed { height: 17px; } }
.header .logo-container {
  position: fixed;
  top: calc(var(--strip-h) + var(--nav-extra) + var(--gap));
  left: var(--gap);
  z-index: 21;
  align-items: center;
  height: 14px;
}
@media (min-width: 860px) { .header .logo-container { height: 17px; } }
.header .nav-right { position: relative; z-index: 1; margin-left: auto; }
.header .navigation { min-height: calc(14px + var(--gap) * 2); }
@media (min-width: 860px) { .header .navigation { min-height: calc(17px + var(--gap) * 2); } }
@media (min-width: 1200px) {
  .header .navigation { padding-left: calc(var(--gap) * 2); padding-right: calc(var(--gap) * 2); }
  .nav-cta-fixed { right: calc(var(--gap) * 2); }
  .header .logo-container { left: calc(var(--gap) * 2); }
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.logo-container { display: inline-flex; }
.logo {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (min-width: 860px) {
  .logo { font-size: 19px; }
}

.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-link-plain {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .3s ease;
}
@media (hover: hover) { .nav-link-plain:hover { opacity: .5; } }

/* Main nav call to action: plain bold text link */
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .3s ease;
}

/* ---------- Full-screen panels (hero / CTA) ---------- */
.panel {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
}
.plane-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 72px;
  padding-bottom: 72px;
}
.plane-container.-center { justify-content: center; }
.plane-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-half);
  max-width: 100%;
}
@media (min-width: 860px)  { .plane-content { max-width: 50%; } }
@media (min-width: 1200px) { .plane-content { max-width: 75%; gap: var(--gap); } }
.plane-content.-text-center { align-items: center; }
@media (min-width: 1200px) { .plane-content.-text-center { max-width: 50%; } }

/* ---------- Hero: message first (same above-the-fold as the blog), then
   the animated website → inbox band, inset like the blog's featured image ---------- */
.hero { position: relative; }
/* Curtain: the hero message stays pinned while the animation (and the rest
   of the page after it) slides up over it. The curtain carries the page
   background, so the text disappears behind a clean edge. */
.hero-pin {
  position: sticky;
  top: 0;
  z-index: 0;
  padding-top: 72px;
}
.hero-curtain {
  position: relative;
  z-index: 1;
  margin-top: 56px;
  background: var(--off-white);
}
/* The panel starts inset and widens to the full page width as it rises
   (main.js sets --cp from 0 to 1); clipped, so nothing inside reflows */
.hero-curtain { --vm: var(--gap); }
.hero-curtain .hero-visual {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  clip-path: inset(0 calc(var(--vm) * (1 - var(--cp, 0))));
}
@media (min-width: 1200px) { .hero-curtain { --vm: calc(var(--gap) * 2); } }
@media (min-width: 860px) {
  .hero-pin { padding-top: 96px; }
  .hero-curtain { margin-top: 80px; }
  .hero-curtain .hero-visual { margin-top: 0; }
}
.hero-kicker {
  padding-top: 48px;
  padding-left: var(--gap);
  margin-bottom: 16px;
}
@media (min-width: 860px) { .hero-kicker { padding-top: 64px; margin-bottom: 20px; } }
.hero-kicker span + span::before { content: "·"; margin: 0 .45em; }

@media (min-width: 1200px) {
  .hero-kicker { position: absolute; top: 171px; left: var(--gap); padding-top: 0; margin-bottom: 0; }
  .hero .hero-head { padding-top: 64px; }
}
/* The one-line kicker only fits the side margin from 1280px; below that it sits above the title */
@media (min-width: 1200px) and (max-width: 1279px) {
  .hero-kicker { position: static; padding-top: 64px; padding-left: 20%; margin-bottom: 20px; }
  .hero .hero-head { padding-top: 0; }
}
.hero-title {
  max-width: 10.5em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(42px, 6.2vw, 108px);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-statement {
  max-width: 32em;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .62);
  text-wrap: pretty;
}
@media (min-width: 860px) { .hero-statement { margin-top: 32px; font-size: clamp(17px, 1.3vw, 20px); } }
/* One button language, hierarchy through fill: primary solid, secondary outline */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}
.hero-actions .hero-button {
  padding: 14px 28px;
  background: var(--black);
  color: var(--off-white);
  border-color: var(--black);
  transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
.hero-actions .hero-button.-secondary { background: transparent; color: var(--black); }
@media (hover: hover) {

  .hero-actions .hero-button.-secondary:hover { opacity: 1; background: var(--black); color: var(--off-white); }
}

/* "MORE ⟶" style link: spaced capitals + long hairline arrow */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 18px); /* same treatment as "Sobre mim" */
  font-weight: 600;
  line-height: 1.25;
  color: var(--black);
}
.more-link svg {
  position: relative;
  top: 2px;
  width: 56px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  overflow: visible;
  transition: transform .5s var(--ease);
}
@media (hover: hover) { .more-link:hover svg { transform: translateX(10px); } }

.hero-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-half);
  width: 100%;
  max-width: 560px;
}
.hero-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-half);
}
.hero-scroll { align-self: flex-start; }

@media (min-width: 560px) {
  .hero-field { flex-direction: row; }
  .hero-field .input { flex: 1 1 auto; min-width: 0; }
}

/* Visual panel: the frame of the hero reel (assets/hero-reel.css styles what is inside) */
.hero-visual {
  position: relative;
  margin: 56px var(--gap) 0;
  height: 620px;
  overflow: hidden;
  background: #2a2a29;
  isolation: isolate;
  color: var(--off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
}

@media (min-width: 860px) {
  .hero-visual { margin-top: 80px; height: clamp(720px, 58vw, 860px); padding: 48px; }
}
@media (min-width: 1200px) {
  .hero-visual { margin-left: calc(var(--gap) * 2); margin-right: calc(var(--gap) * 2); }
}

/* Contacto: a lilac panel inside an off-white frame, everything centred */
.cta-section { position: relative; padding: var(--gap); background: var(--off-white); color: var(--black); }
@media (min-width: 1200px) { .cta-section { padding: calc(var(--gap) * 2); } }
.cta-panel { padding: 64px var(--gap) 72px; background: #d6cbec; }
@media (min-width: 860px) { .cta-panel { padding: 96px 48px 104px; } }
/* From 1200px the content lines up with the 60% column of the other sections */
@media (min-width: 1200px) {
  .cta-panel { padding-left: 0; padding-right: 0; }
  .cta-inner { width: calc(60% + var(--gap) * 2.4); margin-left: calc(20% - var(--gap) * 1.2); }
}
.cta-title {
  max-width: 16em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: 20px;
}
.cta-sub {
  max-width: 30em;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(0, 0, 0, .62);
  text-wrap: pretty;
}
.cta-main { margin-top: 36px; }
/* The call is the main action: solid, larger */
.cta-section .cta-main .cta-button {
  padding: 18px 40px;
  font-size: clamp(17px, 1.3vw, 21px);
  background: var(--black);
  color: var(--off-white);
  border-color: var(--black);
}
@media (hover: hover) { .cta-section .cta-main .cta-button:hover { opacity: 1; background: var(--black); color: var(--off-white); } }

/* "Prefere escrever?": a quieter alternative below a hairline */
.cta-write { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(0, 0, 0, .12); }
.cta-field span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}
/* "Se preferir, envie uma mensagem →": opens the form in place */
.cta-write-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
/* Narrow phones: keep "send a message" on one line */
@media (max-width: 359px) { .cta-write-toggle { font-size: 14px; } }
.cta-write-arrow { display: inline-block; transition: transform .3s var(--ease); }
.cta-write-toggle[aria-expanded="true"] .cta-write-arrow { transform: rotate(90deg); }
.cta-form { margin-top: 32px; animation: cta-form-in .4s var(--ease); }
.cta-form[hidden] { display: none; }
@keyframes cta-form-in { from { opacity: 0; transform: translateY(-6px); } }
.cta-form { display: grid; grid-template-columns: 1fr; gap: 28px 32px; max-width: 640px; }
.cta-field { display: block; }
.cta-field input, .cta-field textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cta-field textarea { min-height: 88px; resize: vertical; }
.cta-field input:focus, .cta-field textarea:focus { border-bottom-color: var(--black); box-shadow: 0 1px 0 var(--black); }
.cta-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta-form-foot .message { font-size: 14px; }
.cta-form .button {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
  transition: background-color .3s ease, color .3s ease;
}
@media (hover: hover) { .cta-form .button:hover { opacity: 1; background: var(--black); color: var(--off-white); } }
@media (min-width: 560px) {
  .cta-form { grid-template-columns: 1fr 1fr; }
  .cta-field.-full, .cta-form-foot { grid-column: 1 / -1; }
}
@media (min-width: 860px) {
  .cta-sub { font-size: clamp(17px, 1.3vw, 20px); }
  .cta-title { margin-bottom: 26px; }
  .cta-main { margin-top: 44px; }
  .cta-write { margin-top: 64px; padding-top: 40px; }
}

/* ---------- Sections ---------- */
.section { position: relative; }
.section > .grid + .grid { margin-top: 96px; }
#impact { display: flex; flex-direction: column; justify-content: space-between; }
.text-row { padding-bottom: var(--gap); }
.section-intro { padding-top: 0; padding-bottom: 96px; }

/* A narrower, centred container — genuinely 60% of the viewport, for sections that should feel more intimate than the full-bleed grid */
.narrow-container { padding: 0 var(--gap); }
@media (min-width: 1200px) {
  .narrow-container { width: 60%; margin: 0 auto; padding: 0; }
}

/* Dores: a big opening statement (same treatment as .impact-title) followed
   by the concrete, numbered list of symptoms it names — same numbered-row
   language as the pricing tiers and "isto é para si" section. No kicker:
   the statement itself is the section's opening line. */
.pains { position: relative; border-bottom: 1px solid var(--grey); }
.pains-kicker { padding-top: 64px; padding-left: var(--gap); margin-bottom: 16px; }
@media (min-width: 860px) { .pains-kicker { padding-top: 96px; margin-bottom: 20px; } }
@media (min-width: 1200px) {
  .pains-kicker { position: absolute; top: 107px; left: var(--gap); padding-top: 0; margin-bottom: 0; }
}
.pains-statement {
  max-width: 16em;
  padding-top: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
/* Same type and the same gap after the big statement as .impact-sub, so the
   two "statement + supporting line" openings read as one system. */
.pains-sub {
  max-width: 36em;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(0, 0, 0, .62);
  text-wrap: pretty;
}
/* "Reconhece-se?" and each pain share their type with the Serviços cards
   below: .card-title for the lead-in, .card-desc for each pain's text. */
.pains-lead {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 56px;
  margin-bottom: 8px;
}
.pains-list { padding-bottom: 64px; counter-reset: pain; }
.pains-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--grey);
  counter-increment: pain;
}
.pains-row::before {
  content: counter(pain, decimal-leading-zero);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--grey);
}
.pains-list li:last-child { border-bottom: 1px solid var(--grey); }
/* A step below the lead paragraph: black against its grey, so colour, not size, sets the list apart */
.pains-text { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; letter-spacing: -.01em; color: var(--black); text-wrap: pretty; }
@media (min-width: 860px) {
  .pains-sub { margin-top: 26px; font-size: clamp(17px, 1.3vw, 20px); }
  .pains-lead { margin-top: 72px; margin-bottom: 12px; }
  .pains-list { padding-bottom: 128px; }
  .pains-row { grid-template-columns: 64px 1fr; padding: 18px 0; }
}
@media (min-width: 1200px) { .pains-statement { padding-top: 96px; } }

/* Impacto: the problem, said big — sits inside .narrow-container (60% width, centred, from 1200px) */
.impact {
  position: relative;
}
.impact-block {
  padding-top: 0;
  padding-bottom: 56px;
}
/* Shared small-caps label used as a "kicker" above section headings.
   Colour is inherited (currentColor), so it works on both light and
   dark sections without an override. */
.kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* Below 1200px, .narrow-container is full-width, so there's no room beside
   it: the kicker stacks in normal flow, left-aligned with the title, and
   carries the section's usual top padding itself. From 1200px,
   .narrow-container insets to 60% and the kicker breaks out into that side
   margin, absolutely positioned and top-aligned with the title (which then
   gets its top padding back, since the kicker is out of flow). */
.impact-kicker {
  padding-top: 64px;
  padding-left: var(--gap);
  margin-bottom: 16px;
}
@media (min-width: 860px) {
  .impact-kicker { padding-top: 96px; margin-bottom: 20px; }
}
@media (min-width: 1200px) {
  .impact-block { padding-top: 96px; }
  .impact-kicker {
    position: absolute;
    top: 107px;
    left: var(--gap);
    padding-top: 0;
    margin-bottom: 0;
  }
}
.impact-title {
  max-width: 16em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.impact-sub {
  max-width: 34em;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(0, 0, 0, .62);
  text-wrap: pretty;
}
@media (min-width: 860px) {
  .impact-block { padding-bottom: 72px; }
  .impact-sub { margin-top: 26px; font-size: clamp(17px, 1.3vw, 20px); }
}

/* Impacto: six cards laid out on the 12-column grid — 1 col mobile, 2 col
   small tablet, 3 col from 860px up (via the existing .col-4 breakpoints).
   No boxes and no crossing grid: each card has its own short rule on top,
   with the column gaps left open — the same horizontal-rule language as
   "O problema" above. */
.cards { padding-top: 0; padding-bottom: 64px; row-gap: 40px; }
@media (min-width: 860px) { .cards { column-gap: 48px; row-gap: 56px; padding-bottom: 96px; } }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--grey); }
.card-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.25; letter-spacing: -.01em; }
.card-desc { font-size: clamp(14px, 1vw, 16px); line-height: 1.55; color: rgba(0, 0, 0, .62); }

/* Sobre mim: dark surface, but the same kicker + narrow-container rhythm
   as Serviços/Soluções — kicker breaks into the side margin from 1200px,
   big title, then a contained portrait beside the text (not a full-height
   panel), so the section reads as part of the same family. */
.about {
  position: relative;
  background-color: var(--soft-black);
  color: var(--off-white);
}
.about-kicker {
  padding-top: 64px;
  padding-left: var(--gap);
  margin-bottom: 16px;
}
@media (min-width: 860px) {
  .about-kicker { padding-top: 96px; margin-bottom: 20px; }
}
@media (min-width: 1200px) {
  .about-title { padding-top: 96px; }
  .about-kicker {
    position: absolute;
    top: 107px;
    left: var(--gap);
    padding-top: 0;
    margin-bottom: 0;
  }
}
.about-title {
  max-width: 16em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: 96px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 64px;
}
.about-copy { display: flex; flex-direction: column; gap: 1.1em; font-size: 18px; line-height: 1.5; }
.about-link { display: inline-block; align-self: flex-start; width: fit-content; margin-top: -2px; }
@media (hover: hover) { .about-link:hover { text-decoration: none; } }
.about-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  max-width: 260px;
}
.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}
@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 240px 1fr;
    column-gap: 56px;
    align-items: start;
    padding-bottom: 96px;
  }
  .about-photo { max-width: none; }
}

.-cover { object-fit: cover; }

/* ---------- Pricing tiers (Mono Space "Founding Membership" layout) ---------- */
.tiers-section { position: relative; padding-bottom: 64px; }
@media (min-width: 860px) { .tiers-section { padding-bottom: 96px; } }
.tiers-kicker {
  padding-top: 64px;
  padding-left: var(--gap);
  margin-bottom: 16px;
}
@media (min-width: 860px) {
  .tiers-kicker { padding-top: 96px; margin-bottom: 20px; }
}
@media (min-width: 1200px) {
  .tiers-intro { padding-top: 96px; }
  .tiers-kicker {
    position: absolute;
    top: 107px;
    left: var(--gap);
    padding-top: 0;
    margin-bottom: 0;
  }
}
.tiers-intro {
  max-width: 16em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: 20px;
}
@media (min-width: 860px) { .tiers-intro { margin-bottom: 26px; } }
.tiers-sub {
  max-width: 34em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(0, 0, 0, .62);
  text-wrap: pretty;
}
@media (min-width: 860px) { .tiers-sub { font-size: clamp(17px, 1.3vw, 20px); } }

/* Two paid plans in the same centred column as the title. No boxes and no
   vertical rules: each plan has its own grey top rule, like the Soluções
   cards. From 860px they share rows (subgrid): price, note, button and list
   each get their own row, so prices, notes and buttons line up across both. */
.tiers-head { padding-bottom: 56px; }
@media (min-width: 860px) { .tiers-head { padding-bottom: 72px; } }
.tiers { display: grid; grid-template-columns: 1fr; row-gap: 48px; }
.tier { display: flex; flex-direction: column; padding-top: 24px; border-top: 1px solid var(--grey); }
/* Links straight to a plan (from the diagnosis result) land just below the nav */
.tier, .tier-free { scroll-margin-top: 72px; }
@media (min-width: 860px) {
  .tiers { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); column-gap: 48px; }
  .tier { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  /* Price and note become rows of their own; the price sits at the bottom of its
     row, so both numbers share a baseline */
  .tier-pricing { display: contents; }
  .tier-price { grid-row: 3; align-self: end; margin-top: 32px; }
  .tier-note { grid-row: 4; }
  .tier-cta { grid-row: 5; }
  .tier-inc { grid-row: 6; }
}
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.tier-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: #d6cbec;
  color: var(--black);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-name { font-family: var(--font-sans); font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.tiers .tier-desc { margin-top: 8px; font-size: var(--fs-body); line-height: 1.45; }
.tier-pricing { margin-top: 32px; }
.tier-price { font-family: var(--font-sans); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; letter-spacing: -.03em; }
.tier-note { max-width: 26em; margin-top: 8px; font-size: 13px; line-height: 1.4; }
.tier-cta { margin-top: 24px; }
.tier-inc { margin-top: 32px; }
.tier-label { margin-bottom: 14px; }
.tier-list { display: flex; flex-direction: column; gap: 9px; line-height: 1.4; }
.tier-list li { position: relative; padding-left: 1.3em; }
.tier-list li::before { content: "—"; position: absolute; left: 0; color: rgba(0, 0, 0, .35); }
/* Optional extras: lighter text and a "+" marker, so they read as add-ons to the base price */
.tier-extras-label { margin-top: 28px; }
.tier-list.-extras li { color: var(--text-2); }
.tier-list.-extras li::before { content: "+"; }

/* Free redesign: an invitation under the plans, not a third plan */
.tier-free {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 64px;
  padding: 28px;
  border-radius: 4px;
  background: #e4e4df;
}
@media (min-width: 860px) {
  .tier-free { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; margin-top: 80px; padding: 32px 36px; }
}
.tier-free-kicker { margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
/* Plan name and price kept as tier-name / tier-price (read by blog/_knowledge.py), but at label size here */
.tier-free-kicker :is(.tier-name, .tier-price) { font: inherit; letter-spacing: inherit; }
.tier-free-title { font-family: var(--font-sans); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.015em; }
.tier-free .tier-desc { max-width: 36em; margin-top: 6px; line-height: 1.5; }
.tier-free .button { flex-shrink: 0; }

/* ---------- Program rows (Mono Space "events" list) ---------- */
.programs { display: flex; flex-direction: column; padding-bottom: 64px; }
@media (min-width: 860px) { .programs { padding-bottom: 96px; } }
.program p { color: var(--black); }
.program .-grey { color: var(--grey); }
@media (hover: hover) {
  .program p { color: var(--grey); transition: color .2s ease; }
  .program:hover p { color: var(--black); }
}

.features { display: flex; flex-direction: column; gap: 4px; }
.features li { padding-left: 1.5em; position: relative; }
.features li::before { content: "—"; position: absolute; left: 0; }
@media (min-width: 1200px) { .features { max-width: 83%; } }

.program-cta { display: flex; justify-content: flex-start; }
@media (min-width: 1200px) { .program-cta { justify-content: flex-end; } }

/* ---------- Buttons & inputs ---------- */
.button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 18px);
  line-height: normal;
  color: var(--off-white);
  background: var(--black);
  padding: 11px 20px;
  border-radius: 44px;
  border: 1px solid transparent;
  text-align: center;
  cursor: pointer;
  transition: opacity .3s ease, color .3s ease;
  white-space: nowrap;
}
.-fg-off-white .button { background: var(--off-white); color: var(--black); }


/* Outline buttons: border only at rest, filled on hover */
.tier-cta .button, .tier-free .button { padding: 11px 22px; }
.tier-cta .button, .tier-free .button, .cta-main .button {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
  transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
.tier.-featured .tier-cta .button { background: var(--black); color: var(--off-white); border-color: var(--black); }
@media (hover: hover) {
  .tier-cta .button:hover, .tier-free .button:hover { opacity: 1; background: var(--black); color: var(--off-white); border-color: var(--black); }
  .cta-main .button:hover { opacity: 1; background: var(--black); color: var(--off-white); border-color: var(--black); }
}

.input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.25;
  color: var(--black);
  background: transparent;
  border: 1px solid var(--black);
  border-radius: 44px;
  padding: 11px 20px;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: #00000080; }
.input:focus { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }

.form-free {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-half);
  width: 100%;
  margin-top: var(--gap-half);
}
@media (min-width: 1200px) { .form-free { max-width: 66%; } }
.program .message { color: var(--black); }
.message:empty { display: none; }
.message.is-success { color: var(--success) !important; }
.message.is-error { color: var(--error) !important; }

/* ---------- Testimonial ---------- */
/* Dark, like "Sobre": gives the second half of the page the same rhythm
   and sets the lilac contact section between two dark bands */
.testimonial-section {
  position: relative;
  overflow: hidden;
  background-color: var(--soft-black);
  color: var(--off-white);
  padding-bottom: 64px;
}
@media (min-width: 860px) {
  .testimonial-section { padding-bottom: 96px; }
}
.testimonial-kicker {
  padding-top: 64px;
  padding-left: var(--gap);
  margin-bottom: 16px;
}
@media (min-width: 860px) {
  .testimonial-kicker { padding-top: 96px; margin-bottom: 20px; }
}
@media (min-width: 1200px) {
  .testimonial-section > .narrow-container { padding-top: 96px; }
  .testimonial-kicker {
    position: absolute;
    top: 98px;
    left: var(--gap);
    padding-top: 0;
    margin-bottom: 0;
  }
}
.testimonial-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.testimonial-slides { position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
/* Slides share one grid cell (sized to the longest); the author sits at the
   bottom of each so it lines up with the shared counter + arrows. */
.testimonial-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
/* The new one fades up once the old one has faded out */
.testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .8s ease .3s, transform .9s cubic-bezier(.22, 1, .36, 1) .3s, visibility 0s;
}
/* Mobile: the block takes each testimonial's own height, easing between them */
@media (max-width: 859px) {
  .testimonial-slides { display: block; transition: height .6s cubic-bezier(.22, 1, .36, 1); }
  .testimonial-slide { position: absolute; top: 0; left: 0; right: 0; }
  .testimonial-slide.is-active { position: relative; }
  .testimonial-slides { touch-action: pan-y; }
}
/* Client logos, doubling as tabs: the one on screen at full strength, the rest dimmed */
.testimonial-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-bottom: 56px; }
.testimonial-logo {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: .28;
  transition: opacity .3s ease;
}
@media (hover: hover) { .testimonial-logo:hover { opacity: .6; } }
.testimonial-logo.is-active { opacity: 1; }
.testimonial-logo-img { display: block; width: auto; height: 20px; filter: brightness(0) invert(1); }
/* Heights tuned by eye so the three read at the same weight */
.testimonial-logo-img--oporto { height: 30px; }
.testimonial-logo-img--softingal { height: 23px; }
.testimonial-logo-img--alviere { height: 16px; }
@media (min-width: 860px) { .testimonial-logos { margin-bottom: 72px; } }
/* Phones: no logos, the arrows alone move between testimonials */
@media (max-width: 559px) { .testimonial-logos { display: none; } }

/* The whole testimonial, read at once, fairly large; the opening quote mark
   hangs in the margin so the text stays aligned on its first letter */
.testimonial-quote {
  max-width: 34em;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.testimonial-quote p { margin: 0; }
.testimonial-quote p + p { margin-top: .8em; }
.testimonial-quote p:first-child::before { content: "\201C"; position: absolute; transform: translateX(-100%); }
.testimonial-quote p:last-child::after { content: "\201D"; }

/* Author line: name + role, arrows at the far end */
.testimonial-author { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 40px; }
.testimonial-who { display: flex; flex-direction: column; }
.testimonial-name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; }
.testimonial-role { font-size: 14px; color: rgba(238, 238, 234, .6); margin-top: 2px; }

/* Round outline buttons at the end of the author's line, like the site's
   other outline buttons: filled on hover */
.testimonial-nav-buttons { display: flex; gap: 12px; margin-left: auto; }
.testimonial-nav-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(238, 238, 234, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--off-white);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
}
.testimonial-nav-btn svg {
  width: 16px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  overflow: visible;
  transition: transform .4s var(--ease);
}
.testimonial-nav-btn:active { transform: scale(.94); }
@media (hover: hover) {
  .testimonial-nav-btn:hover { background: var(--off-white); border-color: var(--off-white); color: var(--black); }
  .js-testimonial-prev:hover svg { transform: translateX(-2px); }
  .js-testimonial-next:hover svg { transform: translateX(2px); }
}
@media (max-width: 559px) {
  .testimonial-author { flex-wrap: wrap; }
  .testimonial-nav-buttons { flex-basis: 100%; margin: 16px 0 0; }
}


/* ---------- Footer ---------- */
/* Same 48px desktop inset as the section kickers, so the footer hangs off
   the same vertical line as the rest of the page. */
.footer { padding: 0 var(--gap); }
@media (min-width: 1200px) { .footer { padding: 0 calc(var(--gap) * 2); } }
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 56px 0;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo { font-size: 17px; line-height: 1; }
.footer-email {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(238, 238, 234, .6) !important;
  transition: color .3s ease;
}
@media (hover: hover) { .footer-email:hover { color: var(--off-white) !important; } }
/* The free guide under the email, set like a footer newsletter sign-up:
   a small label, then the title in lilac */
.footer-guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.footer-guide-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(238, 238, 234, .5);
}
.footer-guide-title { font-size: 14px; line-height: 1.4; color: var(--off-white); }
.footer-guide .ul { display: inline; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .5s cubic-bezier(.65, 0, .35, 1); }
/* Inline (not inline-block) so the arrow never wraps onto a line of its own */
.footer-guide .arrow { position: relative; left: 0; transition: left .35s var(--ease); }
@media (hover: hover) {
  .footer-guide:hover .ul { background-size: 100% 1px; }
  .footer-guide:hover .arrow { left: 4px; }
}
/* Desktop: centred in the top row, between the brand and the links */
@media (min-width: 1100px) {
  .footer-top { position: relative; }
  .footer-guide { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); }
}
/* Tablet widths: not enough room for three columns, so it drops below the row */
@media (min-width: 860px) and (max-width: 1099px) {
  .footer-top { flex-wrap: wrap; }
  .footer-guide { order: 3; flex-basis: 100%; margin-top: 8px; }
}

/* Same items, order and styles as the top nav */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-height: 17px; }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid rgba(238, 238, 234, .2);
  font-size: 12px;
  color: rgba(238, 238, 234, .5);
}
.footer-bottom a { color: inherit; }
.footer-legal-links > div { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* Legal links: inline on desktop, a dropdown with a turning chevron on phones */
.footer-legal-toggle { display: none; }
.footer-legal-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
/* Mobile: identity, then language, Blog and call on one line, then the guide on its own
   under a hairline; legal links above the copyright at the very bottom */
@media (max-width: 859px) {
  .footer-top { gap: 0; padding: 48px 0 28px; }
  .footer-links { flex-wrap: nowrap; width: 100%; gap: 24px; margin-top: 36px; }
  .footer-links .lang-switch { margin-right: auto; }
  .footer-links .nav-cta, .footer-links .nav-link-plain { font-size: 15px; }
  .footer-links .lang-switch { font-size: 13px; }
  .footer-guide { order: 3; width: 100%; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(238, 238, 234, .14); }
  /* Bottom room so the chat button doesn't cover the legal links */
  /* Same space below the copyright as above the logo at the top of the footer */
  .footer-bottom { flex-direction: column-reverse; gap: 14px; padding: 24px 0 48px; }
  .footer-legal { width: 100%; }
  .footer-legal-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: inherit; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
  .footer-legal-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .footer-legal-links { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
  /* nowrap: while the height animates, a wrapping column would spill the links to the right */
  .footer-legal-links > div { min-height: 0; overflow: hidden; flex-direction: column; flex-wrap: nowrap; gap: 12px; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .45s var(--ease), visibility 0s .45s; }
  .footer-legal-links > div > a { font-size: 13px; }
  .footer-legal-links > div > a:first-child { margin-top: 10px; }
  .footer-legal-links > div > a:last-child { margin-bottom: 4px; }
  .footer-legal.is-open .footer-legal-links { grid-template-rows: 1fr; }
  .footer-legal.is-open .footer-legal-links > div { opacity: 1; transform: none; transition: opacity .35s ease .08s, transform .45s var(--ease), visibility 0s; }
  /* Closed links can't be reached by keyboard */
  .footer-legal:not(.is-open) .footer-legal-links > div { visibility: hidden; }
}
@media (min-width: 860px) {
  .footer-top { flex-direction: row; justify-content: space-between; align-items: flex-start; padding: 80px 0; }
  .footer-logo { font-size: 20px; line-height: 1; }
  .footer-links { min-height: 20px; }
  /* Right room so the chat button doesn't cover the last legal link */
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; padding-right: 76px; }
}

/* ---------- Image fade (Mono Space fade-on-load) ---------- */
img.fade-on-load { opacity: 0; transition: opacity .6s var(--ease); }
img.fade-on-load.loaded { opacity: 1; }

/* ---------- Scroll reveal ---------- */
.js-animate { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-animate.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-animate, img.fade-on-load, .overlay-links a { opacity: 1; transform: none; transition: none; }
  .testimonial-slide { transition: none !important; }
}

/* ---------- Free-redesign popup ----------
   Square panel, hairline-separated like the pricing cards: head / pitch +
   "what you get" rows / form on a slightly deeper tint. */
.modal {
  width: min(600px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--off-white);
  color: var(--black);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .35);
  overflow: auto;
}
.modal::backdrop {
  background: rgba(23, 23, 21, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal[open] { animation: modal-in .45s var(--ease); }
.modal[open]::backdrop { animation: modal-fade .35s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes modal-fade { from { opacity: 0; } }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.modal-close {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: background .2s ease;
}
.modal-close:hover { background: rgba(0, 0, 0, .06); }
.modal-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.modal-body { padding: 32px 28px; }
.modal-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.modal-sub { margin-top: 14px; font-size: 16px; line-height: 1.5; color: rgba(0, 0, 0, .62); text-wrap: pretty; }
.modal-inc { margin-top: 28px; }
.modal-inc-label { margin-bottom: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, .58); }
.modal-list { list-style: none; counter-reset: inc; }
.modal-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
  font-size: 15px;
  line-height: 1.4;
  counter-increment: inc;
}
.modal-list li::before {
  content: counter(inc, decimal-leading-zero);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--grey);
}

.modal-form {
  max-width: none;
  margin-top: 0;
  padding: 28px;
  gap: 8px;
  align-items: stretch;
  border-top: 1px solid rgba(0, 0, 0, .14);
  background: rgba(0, 0, 0, .035);
}
@media (min-width: 1200px) { .modal-form { max-width: none; } }
.modal-form .input {
  padding: 13px 18px;
  font-size: 15px;
  border-color: rgba(0, 0, 0, .12);
  background: var(--off-white);
  transition: border-color .2s ease;
}
.modal-form .input::placeholder { color: rgba(0, 0, 0, .4); }
.modal-form .input:focus { border-color: rgba(0, 0, 0, .45); box-shadow: none; }
.modal-form .button { margin-top: 8px; padding: 14px 28px; }
@media (hover: hover) { .modal-form .button:hover { opacity: .75; } }
.modal-form .message { font-size: 14px; }
.modal-note { margin-top: 6px; font-size: 12px; line-height: 1.5; color: rgba(0, 0, 0, .6); }
.modal-note a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 560px) {
  .modal-head { padding-left: 40px; padding-right: 20px; }
  .modal-body { padding: 40px 40px 36px; }
  .modal-form { padding: 32px 40px 36px; }
}
/* Page scroll is locked on the root element (locking body breaks the sticky strip) */
html:has(> body.has-modal), html:has(> body.has-calendly) { overflow: hidden; }

/* ---------- Lead-magnet strip (fixed above the nav) ---------- */
.promo-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: var(--strip-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  background: #d6cbec;
  color: var(--black);
}
.promo-strip { overflow: hidden; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); transition: transform .45s var(--ease), background-color .35s ease, color .35s ease; }
/* Slides up (no layout change) over the contact section and footer */
.promo-strip.is-away { transform: translateY(-100%); }
html.strip-closed .promo-strip { visibility: hidden; transition: visibility 0s .45s; }
html.strip-inline .promo-strip { position: sticky; height: var(--strip-size); }
/* Once it reaches the top it becomes fixed, like the nav: iPhone Safari sometimes stops
   updating a sticky element after the page has been scrolled by script (the hero reel's
   hold), leaving the strip behind on the way down. The next section keeps its place. */
html.strip-inline.strip-stuck .promo-strip { position: fixed; top: 0; left: 0; right: 0; }
html.strip-inline.strip-stuck .promo-strip + * { margin-top: var(--strip-size); }
html.strip-inline.strip-closed .promo-strip { transform: translateY(-100%); transition: transform .45s var(--ease), visibility 0s .45s; }
.promo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
.promo-kicker { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.promo-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-go { flex: 0 0 auto; font-weight: 600; }
@media (hover: hover) { .promo-link:hover .promo-go { text-decoration: none; } }
.promo-close {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color .35s ease;
}
.promo-close:hover { background: rgba(0, 0, 0, .08); }
.promo-close svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Phones: one line, with the short link text so the whole question can be read */
@media (max-width: 559px) {
  .promo-strip { padding: 0 16px; }
  .promo-kicker { display: none; }
  .promo-link { font-size: 12.5px; gap: 8px; }
  .promo-more { display: none; }
}
@media (min-width: 1200px) { .promo-close { right: calc(var(--gap) * 2 - 8px); } }

/* Guide popup: success state swaps the form for the download */
.modal-success { padding: 32px 28px 36px; border-top: 1px solid rgba(0, 0, 0, .14); background: rgba(0, 0, 0, .035); }
.modal-success[hidden] { display: none; }
.modal-success-title { font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.modal-success p + p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .62); }
.modal-success .button { display: block; margin-top: 20px; padding: 14px 28px; }
@media (hover: hover) { .modal-success .button:hover { opacity: .75; } }
@media (min-width: 560px) { .modal-success { padding: 36px 40px 40px; } }
.modal-form[hidden] { display: none; }

/* ---------- Mobile menu (below 860px) ---------- */
.nav-burger, .mobile-menu { display: none; }
@media (max-width: 859px) {
  .header .nav-right > .lang-switch,
  .header .nav-right > .nav-link-plain,
  .header .nav-cta-spacer,
  .header .nav-cta-fixed { display: none; }
  .nav-burger {
    position: fixed;
    top: calc(var(--strip-h) + var(--nav-extra) + var(--gap) - 7px);
    right: calc(var(--gap) - 6px);
    z-index: 21;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px; height: 28px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: color .3s ease, opacity .3s ease;
  }
  .nav-burger span { display: block; height: 1.5px; background: currentColor; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: var(--gap);
    background: var(--off-white);
    color: var(--black);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .4s var(--ease);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-open { opacity: 1; transform: none; }
  /* The logo (with its tagline) and the close button sit where the header's logo and burger are */
  .mobile-menu-top { display: flex; align-items: flex-start; justify-content: space-between; margin-top: calc(var(--strip-h) + var(--nav-extra)); }
  .mobile-menu-top .logo-container { flex-direction: column; align-items: flex-start; }
  .mobile-menu-close { display: grid; place-items: center; width: 34px; height: 34px; margin: -10px -8px -10px 0; border: 0; background: none; color: inherit; cursor: pointer; }
  .mobile-menu-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .mobile-menu-links { display: flex; flex-direction: column; margin-top: 48px; border-top: 1px solid var(--grey); }
  .mobile-menu-links a {
    padding: 16px 0;
    border-bottom: 1px solid var(--grey);
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  /* The call stands apart from the links: a full-width solid button */
  /* The call: underlined, with an up-right arrow (it opens the booking page) */
  .mobile-menu-cta { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; margin-top: 32px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
  .mobile-menu-cta .ul { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
  .mobile-menu-cta .arrow { font-weight: 400; }
  .mobile-menu-foot { margin-top: 48px; }
  .mobile-menu-foot .lang-switch { font-size: 14px; }
}

/* ---------- FAQ (homepage) ----------
   Same kicker breakout and hairline rows as the rest of the page; answers
   stay in the HTML (visible to search engines and AI) and open with "+". */
.faq-section { position: relative; border-top: 1px solid var(--grey); padding-bottom: 64px; }
.faq-kicker { padding-top: 64px; padding-left: var(--gap); margin-bottom: 16px; }
@media (min-width: 860px) {
  .faq-kicker { padding-top: 96px; margin-bottom: 20px; }
  .faq-section { padding-bottom: 104px; }
}
@media (min-width: 1200px) {
  .faq-kicker { position: absolute; top: 105px; left: var(--gap); padding-top: 0; margin-bottom: 0; }
  .faq-section .narrow-container { padding-top: 96px; }
}
.faq-title {
  max-width: 16em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.faq-list { margin-top: 28px; border-top: 1px solid var(--grey); }
@media (min-width: 860px) { .faq-list { margin-top: 36px; } }
.faq-item { border-bottom: 1px solid var(--grey); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.4;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1;
  color: rgba(0, 0, 0, .55);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item.is-closing summary::after { transform: none; }
@media (hover: hover) { .faq-item summary:hover { opacity: .65; } }
.faq-answer { max-width: 40em; padding: 0 0 20px; font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: rgba(0, 0, 0, .72); text-wrap: pretty; }
.faq-answer p + ol { margin-top: 10px; }
.faq-answer ol { list-style: none; counter-reset: faqstep; display: flex; flex-direction: column; gap: 8px; }
.faq-answer ol li { position: relative; padding-left: 32px; counter-increment: faqstep; }
.faq-answer ol li::before { content: counter(faqstep, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-size: .8em; font-variant-numeric: tabular-nums; color: var(--grey); }
.faq-answer strong { font-weight: 500; color: inherit; }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; color: var(--black); }
@media (hover: hover) { .faq-answer a:hover { text-decoration: none; } }

/* ---------- Nav backdrop on scroll ----------
   Frosted glass: whatever is underneath shows through, blurred, and the
   band fades out gradually at the bottom so there is no hard edge. */
.header::before {
  content: "";
  position: fixed;
  top: calc(var(--strip-h) + var(--nav-extra));
  left: 0; right: 0;
  z-index: 0;
  height: calc(14px + var(--gap) * 2 + 28px);
  background: transparent;
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, rgba(0, 0, 0, .5) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 50%, rgba(0, 0, 0, .5) 75%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
@media (min-width: 860px) { .header::before { height: calc(17px + var(--gap) * 2 + 32px); } }
html.is-scrolled .header::before { opacity: 1; }
html.nav-away .header::before { opacity: 0; }

/* ---------- Type system: shared roles ----------
   Three text colours, three running-text sizes, two label styles and one
   numbering style, applied across sections. */
:root {
  --text-2: rgba(0, 0, 0, .62);
  --text-3: rgba(0, 0, 0, .58);
  --text-2-inv: rgba(238, 238, 234, .62);
  --text-3-inv: rgba(238, 238, 234, .5);
  --fs-lead: clamp(17px, 1.3vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
}

/* Running text: lead / body / small */
.hero-statement, .pains-sub, .impact-sub, .tiers-sub, .cta-sub, .about-copy { font-size: var(--fs-lead); }
.faq-answer, .modal-sub, .modal-list li { font-size: var(--fs-body); }
.card-desc, .tier-desc, .tier-list { font-size: var(--fs-small); }
.faq-item summary { font-size: 17px; }

/* Text colours: primary / secondary / tertiary */
.card-desc, .tier-desc, .faq-answer, .modal-sub { color: var(--text-2); }
.tier-list { color: var(--black); }
.tier-note, .modal-note { color: var(--text-3); }
.footer-bottom { color: var(--text-3-inv); }
.footer-email { color: var(--text-2-inv) !important; }
.testimonial-role { color: var(--text-2-inv); }

/* Component labels: 11px caps, one tracking; section kickers stay 12px */
.promo-kicker, .tier-label, .tier-tag, .cta-field span, .modal-inc-label, .pains-lead {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tier-label, .cta-field span, .modal-inc-label { color: var(--text-3); }

/* Numbering: 01, 02, 03… */
.card .h5, .pains-row::before, .faq-answer ol li::before, .modal-list li::before {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* One weight for small titles */
.card-title { font-weight: 400; }

/* ---------- Section entrances ----------
   main.js adds .reveal (so nothing is hidden without JS) with a delay per
   item: the kicker, title and subtitle first, then the section's content. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Title entrance: words rise out of a mask, one after another. The mask is
   padded so accents and descenders (ó, ç, g) are never clipped. */
.title-reveal .tw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .1em 0 .16em;
  margin: -.1em 0 -.16em;
}
.title-reveal .tw-in {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--w, 0) * 55ms);
}
.title-reveal.is-in .tw-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .title-reveal .tw-in { transform: none; transition: none; } }

/* Until main.js runs, keep the hero content hidden so nothing shows before the title */
:where(.js-reveal) .hero :is(.kicker, .hero-title, .hero-statement, .hero-actions, .hero-visual):not(.reveal):not(.title-reveal) { opacity: 0; }

/* Solutions: each card's top rule draws in from the left as the card arrives */
.js-reveal .card::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.65, 0, .25, 1) var(--reveal-delay, 0ms);
}
.js-reveal .card.is-in::before { transform: none; }

/* While the hero is still pinned under the nav, no backdrop band */
html.hero-pinned .header::before { opacity: 0; }

/* Modal label as a lilac pill, like "Mais popular" */
.modal-head .modal-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: #d6cbec;
  color: var(--black);
  line-height: 1.2;
}

/* Fast scrolling: same movement, no waiting and a shorter run */
.reveal.reveal-fast { transition-duration: .45s, .5s; transition-delay: 0ms; }
.title-reveal.reveal-fast .tw-in { transition-duration: .6s; transition-delay: calc(var(--w, 0) * 25ms); }
.card.reveal-fast::before { transition-duration: .6s; transition-delay: 0ms; }

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Page transitions ----------
   Internal links: the page content fades up and out, the next page fades
   up and in (main.js + a flag in sessionStorage). The fixed nav stays. */
html.pt-out :is(main, footer, .promo-strip) {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1);
}
/* Fill backwards only: once it ends, nothing is left on these elements. A transform kept on
   main or the strip (fill: both) made the sticky strip skip on iPhone Safari */
html.pt-enter :is(main, footer, .promo-strip) { animation: pt-in 1s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes pt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Micro-interactions ---------- */
/* Text links: the underline slides out to the right and draws back in from the left */
.nav-cta, .promo-go .ul, .cta-write-text, .about-link { text-decoration: none; }
.nav-cta:not(.nav-cta-fixed), .promo-go .ul, .cta-write-text, .about-link { position: relative; }
.promo-go .ul, .cta-write-text { display: inline-block; }
.nav-cta::after, .promo-go .ul::after, .cta-write-text::after, .about-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  pointer-events: none;
}
.nav-cta::after { bottom: -4px; }
.nav-cta-spacer::after { display: none; }
@media (hover: hover) {
  .nav-cta:hover::after, .promo-link:hover .ul::after, .cta-write-toggle:hover .cta-write-text::after, .about-link:hover::after {
    animation: ul-redraw .7s cubic-bezier(.65, 0, .35, 1);
  }
}
@keyframes ul-redraw {
  0%     { transform: scaleX(1); transform-origin: right; }
  45%    { transform: scaleX(0); transform-origin: right; }
  45.01% { transform: scaleX(0); transform-origin: left; }
  100%   { transform: scaleX(1); transform-origin: left; }
}
/* Arrows nudge forward */
.promo-go .arrow { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) {
  .promo-link:hover .arrow { transform: translateX(4px); }
  .cta-write-toggle[aria-expanded="false"]:hover .cta-write-arrow { transform: translateX(4px); }
}
/* Buttons: the label rolls up and a copy rolls in from below */
.btn-roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.btn-roll > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.btn-roll > span + span { transform: translateY(105%); }
@media (hover: hover) {
  .button:hover .btn-roll > span:first-child { transform: translateY(-105%); }
  .button:hover .btn-roll > span + span { transform: none; }
}
.button { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease; }
.button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .btn-roll > span { transition: none; }
  .nav-cta:hover::after, .promo-link:hover .ul::after, .cta-write-toggle:hover .cta-write-text::after, .about-link:hover::after { animation: none; }
}

/* Same on the blog: nothing in the first view shows before its entrance */
:where(.js-reveal) :is(main > .blog-head, main .blog-filters, main .post-list) :is(.kicker, .blog-title, .blog-intro, .filters-title, .filters-search, .filters-chips, .post-card):not(.reveal):not(.title-reveal) { opacity: 0; }

/* Calendly popup: page behind doesn't scroll; the overlay matches the site */
.calendly-overlay .calendly-close-overlay { background: rgba(23, 23, 21, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- Keyboard access ---------- */
/* A clear ring on whatever has keyboard focus (mouse clicks don't show it) */
:focus-visible { outline: 2px solid var(--focus-ring, #171715); outline-offset: 3px; }
[data-nav="dark"], .footer { --focus-ring: var(--off-white); }
/* Text fields already show focus with their own border */
.input:focus-visible, .cta-field input:focus-visible, .cta-field textarea:focus-visible, .filters-search input:focus-visible { outline: none; }
.modal-form .input:focus { border-color: var(--black); }
/* Skip link: hidden until tabbed to, then shown above everything */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 44px;
  background: var(--black);
  color: var(--off-white);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }
.message a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Contact form sent: the form fades out and a short note takes its place */
.swap-out { opacity: 0 !important; transform: translateY(-4px); transition: opacity .5s ease, transform .5s ease; }
.swap-in { opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
.swap-in.is-in { opacity: 1; transform: none; }
.cta-thanks { outline: none; }
.cta-thanks-title { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -.015em; color: #0b7a4e; }
.cta-thanks-sub { margin-top: 6px; font-size: var(--fs-body); color: #0b7a4e; }

/* Honeypot field for bots: kept out of sight and out of the tab order */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* "Send another message" under the contact confirmation */
.cta-thanks-again { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 18px; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--black); cursor: pointer; }
.cta-thanks-again .ul { position: relative; }
.cta-thanks-again .ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; }
.cta-thanks-again .arrow { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) { .cta-thanks-again:hover .arrow { transform: translateX(4px); } }

/* Guide popup: "Do you have a website?" as two small radio options above the
   link field; choosing "not yet" hides the field */
.site-choice { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 6px 4px; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1; color: var(--text-2); cursor: pointer; user-select: none; }
.radio input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 50%;
  background: var(--off-white);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.radio input:checked { border-color: var(--black); box-shadow: inset 0 0 0 3px var(--off-white), inset 0 0 0 7px var(--black); }
.radio input:checked + span { color: var(--black); }
.radio input:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
@media (hover: hover) { .radio:hover { color: var(--black); } .radio:hover input { border-color: var(--black); } }
.modal-form .input[hidden] { display: none; }

/* Guide ready: one green line, and its end is the download link */
.js-guide-success { display: flex; flex-direction: column; justify-content: center; }
.js-guide-success[hidden] { display: none; }
.js-guide-success .modal-success-title { color: var(--black); }
.guide-dl { color: inherit; white-space: nowrap; }
.guide-dl .ul { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.guide-dl .arrow { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) { .guide-dl:hover .arrow { transform: translateY(3px); } }

/* Guide popup: the link field folds away smoothly when there's no website */
.url-slot {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .7s cubic-bezier(.45, 0, .15, 1), margin-top .7s cubic-bezier(.45, 0, .15, 1), opacity .45s ease .15s;
}
.url-slot > div { min-height: 0; overflow: hidden; }
.url-slot.is-collapsed { grid-template-rows: 0fr; margin-top: -8px; opacity: 0; transition: grid-template-rows .7s cubic-bezier(.45, 0, .15, 1), margin-top .7s cubic-bezier(.45, 0, .15, 1), opacity .3s ease; }
.url-slot.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .url-slot { transition: none; } }

/* Free redesign popup: the thank-you note in black (green stays for the contact form) */
.modal-form .cta-thanks-title, .modal-form .cta-thanks-sub { color: var(--black); }

/* Menu call link: a drawn arrow (the ↗ character turns into an emoji on iOS) */
.mobile-menu-cta .arrow svg { display: inline-block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
/* The guide strip can't be closed: no room kept for a close button */
.promo-strip { padding-left: 24px; padding-right: 24px; }
@media (max-width: 559px) { .promo-strip { padding: 0 var(--gap); } }

/* ---------- Chat launcher (opens the chat assistant) ---------- */
.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, opacity .4s ease, transform .4s var(--ease);
}
.chat-launcher-icon { display: grid; place-items: center; width: 22px; height: 22px; }
.chat-launcher-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
@media (hover: hover) { .chat-launcher:hover { background: #d6cbec; color: var(--black); } }
.chat-launcher:active { transform: scale(.96); }
/* Loading: the icon becomes a small spinner until the chat opens */
.chat-launcher.is-loading .chat-launcher-icon svg { display: none; }
.chat-launcher.is-loading .chat-launcher-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: chat-spin .8s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }
.chat-launcher.is-gone { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
/* Mobile: just the round icon */
@media (max-width: 559px) { .chat-launcher { right: 16px; bottom: 16px; } }
body.has-modal .chat-launcher { opacity: 0; pointer-events: none; }
.chat-launcher.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* Over a black section the button gets a light outline */
.chat-launcher { box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 0 0 1px transparent; }
.chat-launcher.on-dark { box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(238, 238, 234, .35); }

/* ---------- Chat assistant panel ---------- */
.chat-launcher.is-active { background: #d6cbec; color: var(--black); }
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: 380px;
  height: min(600px, calc(100vh - 140px));
  height: min(600px, calc(100dvh - 140px));
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 20px;
  background: var(--off-white);
  color: var(--black);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .3s ease, transform .4s var(--ease);
}
.chat-panel[hidden] { display: none; }
.chat-panel.is-open { opacity: 1; transform: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 14px 20px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.chat-title { font-size: 15px; font-weight: 600; }
.chat-status { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--text-3); }
/* "Online" dot: a soft sage green that gently pulses */
.chat-status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #5f9e7f; }
.chat-status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #5f9e7f; animation: chat-pulse 2s ease-out infinite; }
@keyframes chat-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chat-status i::after { animation: none; } }
.chat-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chat-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) { .chat-close:hover { background: rgba(0, 0, 0, .06); } }
.chat-log { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.-bot { align-self: flex-start; background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-bottom-left-radius: 6px; }
.chat-msg.-user { align-self: flex-end; background: var(--black); color: var(--off-white); border-bottom-right-radius: 6px; }
.chat-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.is-note { background: transparent; border: 1px dashed rgba(0, 0, 0, .18); color: var(--text-2); }
.chat-msg.is-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.chat-msg.is-typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .4); animation: chat-dot 1s ease-in-out infinite; }
.chat-msg.is-typing i:nth-child(2) { animation-delay: .15s; }
.chat-msg.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.chat-chips[hidden] { display: none; }
.chat-chip { padding: 7px 12px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 999px; background: transparent; font-family: var(--font-sans); font-size: 13px; color: var(--black); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
@media (hover: hover) { .chat-chip:hover { border-color: var(--black); background: rgba(0, 0, 0, .03); } }
/* Composer: sits on a soft tinted field, no hard outline; focus only deepens the tint */
.chat-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 16px; border: 0; border-radius: 22px; background: rgba(0, 0, 0, .05); transition: background-color .25s ease, box-shadow .25s ease; }
.chat-form[hidden] { display: none; }
.chat-form:focus-within { background: rgba(0, 0, 0, .07); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.chat-input { flex: 1 1 auto; max-height: 120px; padding: 8px 0; border: 0; outline: none; resize: none; background: transparent; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: var(--black); }
.chat-input:focus-visible { outline: none; }
.chat-send { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--black); color: var(--off-white); cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.chat-send:active { transform: scale(.94); }
.chat-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .chat-send:hover { opacity: .8; } }
.chat-mail { margin: 0 12px; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .05); }
.chat-mail[hidden] { display: none; }
.chat-mail-ask { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.chat-mail-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-mail-input { flex: 1 1 auto; min-width: 0; padding: 9px 14px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 999px; background: var(--off-white); font-family: var(--font-sans); font-size: 14px; color: var(--black); outline: none; }
.chat-mail-input:focus { border-color: rgba(0, 0, 0, .4); }
.chat-mail-send { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--black); color: var(--off-white); font-family: var(--font-sans); font-size: 14px; cursor: pointer; }
.chat-mail-cancel { margin-top: 8px; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Links under the composer, lined up with its left and right edges */
.chat-actions { display: flex; justify-content: space-between; gap: 18px; padding: 16px 24px 20px; }
.chat-action { padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--black); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .chat-action:hover { text-decoration: none; } }
@media (max-width: 559px) {
  .chat-panel { right: 12px; left: 12px; bottom: 80px; width: auto; height: min(560px, calc(100dvh - 110px)); }
}
@media (prefers-reduced-motion: reduce) { .chat-panel { transition: none; } }
.chat-input::placeholder { color: rgba(0, 0, 0, .45); }
/* Optional email card inside the conversation */
.chat-lead { align-self: stretch; margin-top: 4px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .05); }
.chat-lead p { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* ---------- Diagnosis quiz ---------- */
a.promo-link, a.footer-guide { text-decoration: none; color: inherit; }
/* "Não tem a certeza? Faça o diagnóstico": closes the list, the section's
   bottom space moves below it */
.pains-list:has(+ .pains-quiz) { padding-bottom: 0; }
.pains-quiz { display: inline-flex; align-items: baseline; gap: 8px; margin: 32px 0 64px; font-size: var(--fs-lead); font-weight: 600; color: var(--black); text-decoration: none; }
.pains-quiz .ul { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pains-quiz .arrow { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) { .pains-quiz:hover .arrow { transform: translateX(4px); } }
@media (min-width: 860px) { .pains-quiz { margin: 40px 0 128px; } }

.quiz-section { min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); padding-bottom: 96px; }
.quiz-stage { position: relative; max-width: 720px; }
.quiz-screen { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.quiz-screen.is-active { opacity: 1; transform: none; }
.quiz-screen.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
.quiz-kicker { margin-bottom: 20px; }
.quiz-title { max-width: 12em; }
.quiz-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; }
.quiz-start { padding: 16px 32px; font-size: clamp(16px, 1.2vw, 18px); }
.quiz-note { font-size: var(--fs-small); color: var(--text-3); }

/* Question */
.quiz-progress { height: 3px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.quiz-progress span { display: block; height: 100%; background: var(--black); border-radius: 3px; transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.quiz-count { margin-top: 18px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-3); }
.quiz-question { margin-top: 14px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; outline: none; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.quiz-option {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 18px 20px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 16px;
  background: transparent; color: var(--black); text-align: left;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.35;
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.quiz-option-key {
  flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-2);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) { .quiz-option:hover { border-color: rgba(0, 0, 0, .45); background: rgba(0, 0, 0, .025); } }
.quiz-option:active { transform: scale(.99); }
.quiz-option.is-selected { border-color: var(--black); background: #d6cbec; }
.quiz-option.is-selected .quiz-option-key { background: var(--black); border-color: var(--black); color: var(--off-white); }
/* Optional website step */
.quiz-url-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.quiz-url-form .input { flex: 1 1 240px; padding: 16px 20px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 44px; background: transparent; font-size: 16px; }
.quiz-url-form .input:focus { border-color: rgba(0, 0, 0, .45); box-shadow: none; outline: none; }
.quiz-url-form .button { padding: 15px 26px; font-size: 15px; }
.quiz-url-msg { margin-top: 8px; font-size: 14px; color: #b0412e; }
.quiz-url-msg:empty { display: none; }
.quiz-url-skip { display: block; margin-top: 16px; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .quiz-url-skip:hover { color: var(--black); } }
.quiz-back { margin-top: 28px; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 14px; color: var(--text-3); cursor: pointer; }
@media (hover: hover) { .quiz-back:hover { color: var(--black); } }

/* Result */
.quiz-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; }
.quiz-score { position: relative; flex: 0 0 auto; width: 120px; height: 120px; }
.quiz-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-ring-bg { fill: none; stroke: rgba(0, 0, 0, .08); stroke-width: 8; }
.quiz-ring { fill: none; stroke: var(--black); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.22, 1, .36, 1); }
.quiz-score-num { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 40px; font-size: 32px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.quiz-score-num small { margin-left: 2px; font-size: 12px; color: var(--text-3); letter-spacing: 0; }
.quiz-band-wrap { flex: 1 1 280px; }
.quiz-score-label, .quiz-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.quiz-band { margin-top: 8px; font-size: clamp(24px, 2.1vw, 30px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; outline: none; }
.quiz-band-text { margin-top: 8px; max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.quiz-weak { margin-top: 48px; }
.quiz-weak-list { margin-top: 14px; border-top: 1px solid var(--grey); }
.quiz-weak-list li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--grey); }
.quiz-weak-list strong { font-size: 16px; font-weight: 500; }
.quiz-weak-list span { font-size: 15px; line-height: 1.5; color: var(--text-2); }
@media (min-width: 640px) { .quiz-weak-list li { grid-template-columns: 140px 1fr; gap: 24px; } }
.quiz-weak-none { margin-top: 12px; color: var(--text-2); }
.quiz-plan { margin-top: 40px; padding: 28px; border-radius: 20px; background: #d6cbec; }
.quiz-plan-name { margin-top: 8px; font-size: clamp(21px, 1.7vw, 25px); font-weight: 400; letter-spacing: -.02em; }
.quiz-plan-line { margin-top: 8px; max-width: 36em; font-size: 16px; line-height: 1.5; }
.quiz-plan-note { margin-top: 8px; max-width: 40em; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.quiz-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.quiz-plan-actions .button { padding: 12px 24px; font-size: 15px; }
.quiz-plan-link { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .quiz-plan-link:hover { text-decoration: none; } }
@media (min-width: 860px) { .quiz-plan { padding: 36px 40px; } }
.quiz-mail { margin-top: 24px; padding: 28px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 20px; }
.quiz-mail-title { font-size: 17px; line-height: 1.3; }
.quiz-mail-text { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.quiz-mail-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.quiz-mail-row .input { flex: 1 1 220px; padding: 13px 18px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 44px; background: var(--off-white); font-size: 15px; }
.quiz-mail-row .input:focus { border-color: rgba(0, 0, 0, .45); box-shadow: none; }
.quiz-mail-row .button { padding: 12px 22px; font-size: 15px; }
/* Outlined, so the plan's "book a call" stays the one solid button */
.quiz-mail-row .button { background: transparent; color: var(--black); border-color: var(--black); }
@media (hover: hover) { .quiz-mail-row .button:hover { opacity: 1; background: var(--black); color: var(--off-white); } }
.quiz-mail-msg { margin-top: 10px; font-size: 15px; }
.quiz-mail-msg:empty { display: none; }
.quiz-mail-msg.is-ok { color: #0b7a4e; }
.quiz-mail-msg.is-error { color: var(--error); }
.quiz-mail-note { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.quiz-mail-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 860px) { .quiz-mail { padding: 32px 40px; } }
.quiz-restart { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .quiz-screen, .quiz-ring, .quiz-progress span { transition: none; } }
/* Guide name in the report box: a deeper shade of the site lilac, readable on off-white */
.quiz-mail-guide { font-weight: 600; color: #6b52c8; }

/* Fonts for the Genesis layer below, self-hosted like Inter (latin subset) */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Genesis look & feel — an override layer on top of styles.css + hero-reel.css.
   Same HTML, same copy, same JS and animations: only the visual language changes.
   - White page; each section is an inset, rounded panel (#f5f5f3, graphite, baby blue)
   - Graphite ink (#1b1c1e) instead of black, cool grey secondary text
   - Tight grotesk (Inter Tight) + mono labels (JetBrains Mono)
   - Hairline tick marks at the corners of each panel
   - Small 6px-radius buttons
   ========================================================================== */

:root {
  --ink: #1b1c1e;
  --dark: #1b1c1e;
  --night: #111214;
  --panel: #f5f5f3;
  --accent: #dee8eb;
  --steel: #cad4d9;
  --chip: #ebebeb;
  --line: rgba(27, 28, 30, .12);
  --line-inv: rgba(255, 255, 255, .14);

  /* Remap the original palette */
  --off-white: #ffffff;
  --black: #1b1c1e;
  --soft-black: #1b1c1e;
  --grey: rgba(27, 28, 30, .14);
  --text-2: #7c828f;
  --text-3: #8a8a8a;
  --text-2-inv: rgba(255, 255, 255, .6);
  --text-3-inv: rgba(255, 255, 255, .45);

  --font-sans: "Inter Tight", "Inter", Helvetica, Arial, sans-serif;
  --font-serif: "Inter Tight", "Inter", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Panel frame: the white margin around every section */
  --frame: 10px;
  --frame-y: 6px;
  --radius: 16px;
  --inner: 20px; /* tick inset / content inset inside a panel */
}
@media (min-width: 560px) { :root { --frame: 16px; --frame-y: 8px; } }
@media (min-width: 860px) { :root { --frame: 24px; --frame-y: 12px; --inner: 22px; } }
@media (min-width: 1200px) { :root { --frame: 34px; --frame-y: 20px; } }

html, body { background: #fff; color: var(--ink); }
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -.005em; }
::selection { background: var(--steel); color: var(--ink); }

/* ---------- Panels ---------- */
.pains, .impact, .about, .tiers-section, .faq-section, .testimonial-section, .footer {
  position: relative;
  isolation: isolate;
  background: #fff !important;
  border: 0 !important;
}
:is(.pains, .impact, .about, .tiers-section, .faq-section, .testimonial-section, .footer)::before {
  content: "";
  position: absolute;
  inset: var(--frame-y) var(--frame);
  z-index: -2;
  border-radius: var(--radius);
  background: var(--panel);
  pointer-events: none;
}
/* Corner tick marks, like a technical drawing (and 1/3, 2/3 on desktop) */
:is(.pains, .impact, .about, .tiers-section, .faq-section, .testimonial-section, .footer, .cta-panel)::after {
  --t: var(--ink);
  content: "";
  position: absolute;
  inset: calc(var(--frame-y) + var(--inner)) calc(var(--frame) + var(--inner));
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--t), var(--t)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 100% / 14px 1px no-repeat;
  opacity: .9;
}
@media (min-width: 860px) {
  :is(.pains, .impact, .about, .tiers-section, .faq-section, .testimonial-section, .footer, .cta-panel)::after {
    background:
      linear-gradient(var(--t), var(--t)) 0 0 / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 33.333% 0 / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 66.666% 0 / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 100% 0 / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 0 100% / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 33.333% 100% / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 66.666% 100% / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 100% 100% / 14px 1px no-repeat;
  }
}

/* Panel colours */
.impact::before { background: var(--panel); }
.about::before { background: var(--dark); }
.testimonial-section::before { background: var(--night); }
.footer::before { background: var(--dark); }
:is(.about, .testimonial-section, .footer)::after { --t: rgba(222, 232, 235, .7); }

/* Pains and impact read as two panels with a white gap between them */
.pains { padding-bottom: var(--frame-y); }
.impact { padding-top: var(--frame-y); }
.impact .cards { padding-bottom: calc(64px + var(--frame-y)); }
@media (min-width: 860px) { .impact .cards { padding-bottom: calc(96px + var(--frame-y)); } }
.pains-list { padding-bottom: calc(64px + var(--frame-y)); }
@media (min-width: 860px) { .pains-list { padding-bottom: calc(128px + var(--frame-y)); } }

/* Content insets follow the frame (below 1200px, where text runs full width) */
@media (max-width: 1199px) {
  .narrow-container { padding-left: calc(var(--frame) + var(--inner)); padding-right: calc(var(--frame) + var(--inner)); }
  :is(.pains-kicker, .impact-kicker, .about-kicker, .tiers-kicker, .faq-kicker, .testimonial-kicker) { padding-left: calc(var(--frame) + var(--inner)); }
}
@media (min-width: 1200px) {
  :is(.pains-kicker, .impact-kicker, .about-kicker, .tiers-kicker, .faq-kicker, .testimonial-kicker) { left: calc(var(--frame) + var(--inner)); }
}
.hero-kicker { padding-left: calc(var(--frame) + var(--inner)); }
@media (min-width: 1200px) { .hero-kicker { left: calc(var(--frame) + var(--inner)); padding-left: 0; } }
@media (min-width: 1200px) and (max-width: 1279px) { .hero-kicker { padding-left: 20%; } }

/* Extra breathing room at the bottom of the panels */
.about-grid, .testimonial-section, .faq-section, .tiers-section { padding-bottom: calc(64px + var(--frame-y)); }
@media (min-width: 860px) {
  .about-grid { padding-bottom: calc(96px + var(--frame-y)); }
  .testimonial-section, .faq-section, .tiers-section { padding-bottom: calc(104px + var(--frame-y)); }
}

/* ---------- Typography ---------- */
:is(.hero-title, .pains-statement, .impact-title, .about-title, .tiers-intro, .cta-title, .modal-title) {
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.02;
  color: inherit;
}
.hero-title { letter-spacing: -.05em; line-height: .98; }
.faq-title, .tier-name, .tier-free-title, .card-title { letter-spacing: -.03em; font-weight: 400; }
.tier-price { letter-spacing: -.045em; }

/* Supporting text: Genesis grey */
:is(.hero-statement, .pains-sub, .impact-sub, .tiers-sub, .cta-sub, .modal-sub, .card-desc, .tier-desc, .faq-answer) { color: var(--text-2); }
.about-copy { color: rgba(255, 255, 255, .78); }
.about-copy p:first-child { color: #fff; }

/* Mono labels: kickers lose the caps, gain a tick above */
.kicker, .pains-lead, .tier-label, .tier-tag, .tier-free-kicker, .cta-field span, .modal-inc-label,
.footer-guide-label, .lang-switch, .promo-link, .promo-kicker, .testimonial-role, .footer-bottom {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.kicker { position: relative; font-size: 12px; }
.kicker:not(.modal-pill)::before {
  content: "";
  position: absolute;
  top: -12px;
  width: 14px;
  height: 1px;
  background: currentColor;
}
.hero-kicker::before, .pains-kicker::before, .impact-kicker::before, .about-kicker::before,
.tiers-kicker::before, .faq-kicker::before, .testimonial-kicker::before { margin-top: 0; }
/* Kickers sitting in normal flow (mobile) carry their padding on top: put the tick just above the text */
@media (max-width: 1199px) {
  .kicker:is(.pains-kicker, .impact-kicker, .about-kicker, .tiers-kicker, .faq-kicker, .testimonial-kicker):not(.modal-pill)::before { top: auto; transform: translateY(-12px); }
}
.hero-kicker span + span::before { content: "/"; opacity: .35; margin: 0 .6em; }
.pains-lead, .tier-label, .cta-field span, .modal-inc-label, .footer-guide-label { font-size: 11.5px; color: var(--text-3); }
.tier-free-kicker { font-size: 11.5px; }

/* Numbering in mono */
.card .h5, .pains-row::before, .faq-answer ol li::before, .modal-list li::before {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

/* Hairlines */
.pains-row, .pains-list li:last-child, .faq-list, .faq-item, .modal-list li, .modal-head { border-color: var(--line) !important; }
.card::before { border-top-color: var(--line); }
.cta-write { border-top-color: rgba(27, 28, 30, .14); }

/* ---------- Header ---------- */
/* The name in lowercase (the HTML keeps it in capitals for search and screen readers) */
.logo { font-weight: 500; letter-spacing: -.02em; text-transform: lowercase; }
.nav-link-plain { font-weight: 400; }
.header .nav-right { gap: 32px; }
.nav-cta { font-weight: 500; }
.lang-switch { font-size: 11.5px; }

/* ---------- Hero ---------- */
.hero-curtain { background: #fff; }
.hero-curtain .hero-visual {
  border-radius: var(--radius);
  clip-path: inset(0 calc(var(--frame) + (var(--vm) - var(--frame)) * (1 - var(--cp, 0))) round var(--radius));
}
@media (max-width: 1199px) { .hero-curtain { --vm: calc(var(--frame) + 16px); } }
@media (min-width: 1200px) { .hero-curtain { --vm: calc(var(--gap) * 3); } }
.hero-statement { color: var(--text-2); }

/* Reel: graphite night instead of black; inside the beats, production as is, with baby blue for its lilacs */
.hero .hero-visual.hero-reel { --bg: #111214; --fg: #ffffff; }
/* The reel keeps production's type: Inter, no stylistic sets, no page-level tracking */
.hero .hero-visual.hero-reel { --font-sans: "Inter", Helvetica, Arial, sans-serif; --font-serif: "Inter", Helvetica, Arial, sans-serif; font-feature-settings: normal; letter-spacing: normal; }
/* Inside each beat everything is as in production. Beat 1 (the search page)
   keeps production's lilacs too; in the other beats the strong accent
   (#8f7cc9: chart marks, bars, new-mail dots, the automation avatar) is a
   deep shade of this version's baby blue, #6f93a2.
   Colours are literal: inside the reel, --accent is the reel's own near-black. */
.hero .hero-reel .db-bar i:nth-child(2), .hero .hero-reel .db-legend span:nth-child(2) i,
.hero .hero-reel .ib-row.-new .ib-r1 b::before { background: #6f93a2; }
.hero .hero-reel .ib-auto-h i { background: linear-gradient(140deg, #b7ccd4, #6f93a2); }
.hero .hero-reel .db-chart-h small i { border-top-color: #6f93a2; }
.hero .hero-reel .db-chart .db-mark { stroke: #6f93a2; }

/* ---------- Buttons ---------- */
.button {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--ink);
  color: #fff;
}
.hero-actions .hero-button { padding: 13px 20px; border-radius: 6px; background: var(--ink); color: #fff; border-color: var(--ink); }
.hero-actions .hero-button.-secondary { background: var(--chip); color: var(--ink); border-color: var(--chip); }
@media (hover: hover) {
  .hero-actions .hero-button:hover { background: #34363a; }
  .hero-actions .hero-button.-secondary:hover { background: var(--steel); border-color: var(--steel); color: var(--ink); }
}

/* Former outline buttons become soft grey chips */
.tier-cta .button, .tier-free .button, .cta-form .button { padding: 11px 18px; background: var(--chip); color: var(--ink); border-color: var(--chip); }
.tier.-featured .tier-cta .button { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier-free .button { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (hover: hover) {
  .tier-cta .button:hover, .cta-form .button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
  .tier.-featured .tier-cta .button:hover, .tier-free .button:hover { background: #34363a; border-color: #34363a; }
}
.cta-section .cta-main .cta-button { padding: 16px 26px; font-size: 14px; border-radius: 6px; background: var(--ink); color: #fff; border-color: var(--ink); }
@media (hover: hover) { .cta-section .cta-main .cta-button:hover { background: #34363a; color: #fff; } }

.input { border-radius: 6px; border: 1px solid rgba(27, 28, 30, .18); background: #fff; color: var(--ink); }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.input::placeholder { color: #8a8a8a; }
.skip-link { border-radius: 6px; }

/* ---------- Impact cards ---------- */
.card { gap: 12px; }
.card-title { font-size: clamp(18px, 1.4vw, 22px); }

/* ---------- About ---------- */
.about { color: #fff; }
.about-photo { border-radius: 10px; }
.about-link { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Pricing ---------- */
.tiers { row-gap: 16px; }
@media (min-width: 860px) { .tiers { column-gap: 16px; } }
.tier {
  padding: 28px 24px 32px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}
@media (min-width: 860px) { .tier { padding: 32px 32px 36px; } }
.tier.-featured { box-shadow: inset 0 0 0 1px var(--steel); }
.tier-tag { padding: 5px 9px; border-radius: 6px; background: var(--accent); color: var(--ink); font-size: 11.5px; }
.tier-list li::before { color: var(--text-3); }
.tier-list.-extras li { color: var(--text-2); }
.tier-free { margin-top: 16px; border-radius: 12px; background: var(--accent); }
@media (min-width: 860px) { .tier-free { margin-top: 16px; padding: 32px; } }
.tier-free-kicker { color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq-item summary { letter-spacing: -.015em; }
.faq-item summary::after { font-family: var(--font-mono); font-weight: 400; color: var(--text-3); }
.faq-answer a { color: var(--ink); }

/* ---------- Testimonials ---------- */
.testimonial-quote { letter-spacing: -.02em; }
.testimonial-name { font-weight: 500; }
.testimonial-role { font-size: 12px; }
.testimonial-nav-btn {
  border-radius: 6px;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
@media (hover: hover) { .testimonial-nav-btn:hover { background: #fff; border-color: #fff; color: var(--ink); } }

/* ---------- Contact ---------- */
.cta-section { background: #fff; padding: var(--frame-y) var(--frame); }
.cta-panel { position: relative; isolation: isolate; border-radius: var(--radius); background: var(--accent); }
.cta-panel::after { inset: var(--inner); }
.cta-field input, .cta-field textarea { border-bottom-color: rgba(27, 28, 30, .25); color: var(--ink); }
.cta-field input:focus, .cta-field textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.cta-write-toggle { font-weight: 500; }

/* ---------- Footer ---------- */
.footer { padding-left: calc(var(--frame) + var(--inner)); padding-right: calc(var(--frame) + var(--inner)); padding-bottom: calc(var(--frame-y) + var(--inner) + 8px); color: #fff; margin-top: 0; }
.footer-top { padding-top: calc(var(--frame-y) + var(--inner) + 32px); }
.footer-logo { font-weight: 500; }
.footer-bottom { font-size: 11.5px; }
.footer-guide-label { color: rgba(255, 255, 255, .5); }
.footer-email { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Promo strip ---------- */
.promo-strip { background: var(--accent); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(27, 28, 30, .08); }
.promo-link { font-size: 12px; }
.promo-go { font-weight: 500; }
@media (max-width: 559px) { .promo-link { font-size: 11px; } }

/* ---------- Modal & menu ---------- */
.modal { border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: 0 40px 120px rgba(17, 18, 20, .3); }
.modal::backdrop { background: rgba(17, 18, 20, .5); }
.modal-head .modal-pill { padding: 5px 9px; border-radius: 6px; background: var(--accent); color: var(--ink); }
.modal-close { border-radius: 6px; }
.modal-success { background: var(--panel); border-top-color: var(--line); }
.calendly-overlay .calendly-close-overlay { background: rgba(17, 18, 20, .6); }
.mobile-menu { background: #fff; color: var(--ink); }

/* ---------- Chat launcher ---------- */
.chat-launcher { border-radius: 14px; background: var(--ink); color: #fff; }

/* Hero kicker in normal flow (below 1280px): tick just above the text, not above its padding */
@media (max-width: 1279px) { .kicker.hero-kicker:not(.modal-pill)::before { top: auto; transform: translateY(-12px); } }

/* ---------- Genesis scale: smaller, quieter headings ---------- */
.hero-title { font-size: clamp(36px, 4vw, 60px); letter-spacing: -.04em; line-height: 1; max-width: 12em; }
:is(.pains-statement, .impact-title, .about-title, .tiers-intro, .cta-title) {
  font-size: clamp(28px, 2.5vw, 40px);
  letter-spacing: -.035em;
  line-height: 1.06;
  max-width: 18em;
}
.about-title { margin-bottom: 64px; }
.modal-title { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.03em; line-height: 1.08; }
.faq-title { font-size: clamp(22px, 1.8vw, 28px); }
.tier-name { font-size: clamp(20px, 1.6vw, 24px); }
.tier-price { font-size: clamp(26px, 2vw, 32px); }
.card-title { font-size: clamp(17px, 1.2vw, 19px); }
.tier-free-title { font-size: clamp(18px, 1.4vw, 21px); }
.testimonial-quote { font-size: clamp(17px, 1.35vw, 21px); }
/* Supporting text follows the smaller headings */
:is(.hero-statement, .pains-sub, .impact-sub, .tiers-sub, .cta-sub, .about-copy) { font-size: clamp(15px, 1.1vw, 17px); }

/* ---------- Genesis layout refinements ---------- */
/* Title masks: room for the last letter's overhang, which the tight tracking
   pushes past the word's box (it was clipped on the right) */
.title-reveal .tw { padding-left: .08em; padding-right: .08em; margin-left: -.08em; margin-right: -.08em; }

/* Soluções: white cards inside the grey panel, like the plans. Tick top left,
   index top right; the title sits at a fixed height below them (room for two
   lines) so titles and descriptions line up across each row */
.cards { column-gap: 16px; row-gap: 16px; align-items: stretch; }
@media (min-width: 860px) { .cards { column-gap: 16px; row-gap: 16px; } }
.card {
  justify-content: flex-start;
  gap: 10px;
  padding: 64px 22px 26px;
  border-radius: 12px;
  background: #fff;
}
.card::before {
  top: 22px; left: 22px; right: auto;
  width: 14px;
  border-top: 1px solid var(--ink);
}
.card .h5 { position: absolute; top: 16px; right: 22px; }
@media (min-width: 860px) {
  .card { padding-top: 88px; }
  .card-title { min-height: 2.3em; min-height: 2lh; }
}

/* Dúvidas: title on the left, questions on the right */
@media (min-width: 860px) {
  .faq-section .narrow-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 32px;
    align-items: start;
  }
  .faq-title { position: sticky; top: 120px; max-width: 8em; }
  .faq-list { margin-top: 0; }
}

/* Sobre: the photo as an image card, in black & white, text beside it */
.about-photo { max-width: 240px; border-radius: 12px; }
.about-photo img { filter: grayscale(1) contrast(1.06) brightness(1.02); }
@media (min-width: 860px) {
  .about-grid { grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; }
  .about-photo { max-width: none; position: sticky; top: 120px; }
}

/* Hero: the opening message a step larger than the section headings */
.hero-title { font-size: var(--hero-fs); max-width: 11em; }
:root { --hero-fs: clamp(46px, 6.4vw, 100px); }
.hero-statement { max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; }

/* Calls to action as pills; tags and labels keep their 6px corners */
.button, .hero-actions .hero-button, .cta-section .cta-main .cta-button,
.input, .quiz-url-form .input, .quiz-mail-row .input, .modal-form .input,
.chip, .filters-search input, .chat-mail-input, .chat-mail-send, .chat-chip, .skip-link { border-radius: 999px; }
.button, .hero-actions .hero-button { padding-left: 22px; padding-right: 22px; }
.cta-section .cta-main .cta-button { padding-left: 30px; padding-right: 30px; }
.testimonial-nav-btn, .chat-launcher, .modal-close, .chat-send { border-radius: 50%; }

/* O problema: the four pains as a 2×2 grid of index cells (one column on
   phones): hairline on top, mono index, then the line itself */
@media (min-width: 860px) {
  .pains-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .pains-row { display: flex; flex-direction: column; gap: 28px; min-height: 136px; padding: 18px 0 28px; }
  .pains-list li:last-child { border-bottom: 0; }
}
/* Same type as the Soluções card titles below */
.pains-text { max-width: 22em; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.25; letter-spacing: -.03em; }

/* Kickers: back in the side margin from 1200px (the Genesis layer had made
   them position: relative, so they took up space and drifted). Each one's
   cap height lines up with its title's: --t is the title's top inside the
   section, --fs its font size; .1665 / .137 place a cap top in a line box of
   1.06 / 1 for Inter Tight, 3.5px does the same for the 12px mono label */
@media (min-width: 1200px) {
  .kicker:is(.pains-kicker, .impact-kicker, .about-kicker, .tiers-kicker, .faq-kicker, .testimonial-kicker):not(.modal-pill) {
    position: absolute;
    top: calc(var(--t) + var(--fs) * .1665 - 3.5px);
    line-height: 16px;
  }
}
@media (min-width: 1280px) {
  .kicker.hero-kicker:not(.modal-pill) {
    position: absolute;
    top: calc(var(--t) + var(--hero-fs) * .137 - 3.5px);
    line-height: 16px;
    padding-top: 0;
  }
}
.pains-kicker, .about-kicker, .tiers-kicker { --t: 96px; --fs: clamp(28px, 2.5vw, 40px); }
.impact-kicker { --t: calc(96px + var(--frame-y)); --fs: clamp(28px, 2.5vw, 40px); }
.faq-kicker { --t: 96px; --fs: clamp(22px, 1.8vw, 28px); }
.testimonial-kicker { --t: 100px; --fs: 0px; }
.hero-kicker { --t: 160px; }

/* "Não tem a certeza? Faça o diagnóstico": same size and weight as
   "Se preferir, envie uma mensagem" in the contact section */
.pains-quiz { font-size: clamp(15px, 1.1vw, 17px); font-weight: 500; }
@media (max-width: 359px) { .pains-quiz { font-size: 14px; } }

/* Navigation: the name stays in the grotesk; links read as interface, in mono */
.nav-link-plain, .nav-cta { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 859px) { .footer-links .nav-cta, .footer-links .nav-link-plain { font-size: 13px; } }

/* Diagnosis report: the guide name in ink, not the old lilac */
.quiz-mail-guide { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lighter page: dark only at the hero reel, Testemunhos and the
   footer; Sobre moves onto a light panel ---------- */
.about { color: var(--ink); }
.about::before { background: var(--panel); }
.about::after { --t: var(--ink); }
.about-copy { color: var(--text-2); }
.about-copy p:first-child { color: var(--ink); }

/* ---------- Diagnosis strip: no full-bleed band; the page's own white bar
   with the message as a small baby-blue pill, like the site's tags and CTAs.
   Same height and the same sticky/fixed behaviour as before. ---------- */
.promo-strip { background: #fff; box-shadow: none; }
.promo-link {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  transition: background-color .3s ease;
}
@media (hover: hover) { .promo-link:hover { background: var(--steel); } }
@media (max-width: 559px) { .promo-link { padding: 5px 12px; } }

/* Sobre on the baby-blue accent panel; body copy a shade darker than the
   usual grey so it keeps its contrast on blue */
.about::before { background: var(--accent); }
.about-copy { color: rgba(27, 28, 30, .72); }

/* Diagnosis pill in graphite, like the primary CTA: the blue stays for
   surfaces (Sobre, Contacto, tags) */
a.promo-link, .promo-link { background: var(--ink); color: #fff; }
@media (hover: hover) { .promo-link:hover { background: #34363a; } }

/* Sobre: all the copy in one colour */
.about-copy, .about-copy p:first-child { color: var(--ink); }

/* Tags as pills too, like every other small control on the page */
.tier-tag, .modal-head .modal-pill { border-radius: 999px; padding: 5px 11px; }

/* Free redesign: a tone darker than the panel, not the blue accent */
.tier-free { background: #e9e9e5; }

/* ---------- Buttons back in the grotesk: mono stays for labels and numbers,
   actions read as plain words ---------- */
.button, .hero-actions .hero-button, .cta-section .cta-main .cta-button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.01em;
}
.cta-section .cta-main .cta-button { font-size: 16px; }

/* ---------- Legibility: darker greys, running text a step larger ---------- */
:root {
  --text-2: #5d616c;
  --text-3: #6c707b;
}
:is(.hero-statement, .pains-sub, .impact-sub, .tiers-sub, .cta-sub) { font-size: clamp(16px, 1.25vw, 19px); }
.hero-statement { font-size: clamp(17px, 1.4vw, 21px); }
.about-copy { font-size: clamp(16px, 1.2vw, 18px); }
.card-desc, .tier-desc, .tier-list { font-size: 15px; }
.tier-note { font-size: 14px; }
.faq-answer { font-size: 16px; }
.testimonial-role, .pains-lead, .tier-label { color: var(--text-3); }

/* Testemunhos: a larger quote */
.testimonial-quote { font-size: clamp(20px, 1.75vw, 27px); line-height: 1.34; }

/* Hero reel: same side margins as the section panels, at every width */
.hero-curtain { --vm: var(--frame); }

/* Free redesign: the same distance from the plans as on the live site */
.tier-free { margin-top: 64px; }
@media (min-width: 860px) { .tier-free { margin-top: 80px; } }

/* ---------- Type and hero from the RAR version ----------
   Inter Tight ExtraLight for a huge hero headline running the full width,
   the lede and actions in a right-hand column; section titles a step
   larger in Light (300), which keeps its contrast on the grey panels */
:root { --hero-fs: clamp(42px, 10.4vw, 190px); }
.hero .narrow-container { width: auto; margin: 0; padding: 0 calc(var(--frame) + var(--inner)); }
.kicker.hero-kicker:not(.modal-pill) { position: static; top: auto; padding: 48px calc(var(--frame) + var(--inner)) 0; margin-bottom: 20px; }
@media (min-width: 860px) { .kicker.hero-kicker:not(.modal-pill) { padding-top: 64px; } }
.kicker.hero-kicker:not(.modal-pill)::before { top: auto; transform: translateY(-12px); }
.hero .hero-head { padding-top: 0; }
.hero-head { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-title { max-width: none; font-weight: 200; font-size: var(--hero-fs); line-height: .92; letter-spacing: -.055em; }
/* Second half of the headline in a soft grey, like RAR's "uma visão." */
html[lang^="pt"] .hero-title .tw:nth-child(n+4), html[lang="en"] .hero-title .tw:nth-child(n+3) { color: #8e9099; }
.hero-statement { max-width: 30ch; margin-top: 28px; font-size: 19px; font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.hero-actions { margin-top: 28px; }
@media (min-width: 900px) {
  .hero-head { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 48px; }
  .hero-title { grid-column: 1 / -1; }
  .hero-statement, .hero-actions { grid-column: 2; }
  .hero-statement { margin-top: clamp(24px, 4vh, 48px); }
}

:is(.pains-statement, .impact-title, .about-title, .tiers-intro, .cta-title) {
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.faq-title { font-weight: 300; letter-spacing: -.035em; }
/* Kickers follow the larger titles: cap top in a 1.02 line box sits at .1465em */
.pains-kicker, .about-kicker, .tiers-kicker, .impact-kicker { --fs: clamp(32px, 3.4vw, 52px); }
@media (min-width: 1200px) {
  .kicker:is(.pains-kicker, .impact-kicker, .about-kicker, .tiers-kicker, .faq-kicker, .testimonial-kicker):not(.modal-pill) {
    top: calc(var(--t) + var(--fs) * .1465 - 3.5px);
  }
}

/* ---------- Kickers: no tick above, text flush with the panel's corner marks ---------- */
.kicker:not(.modal-pill)::before { content: none; }
@media (min-width: 1200px) {
  .kicker:is(.pains-kicker, .impact-kicker, .about-kicker, .tiers-kicker, .faq-kicker, .testimonial-kicker):not(.modal-pill) { padding-left: 0; }
}

/* ---------- Hero: tighter, so the reel starts above the fold ----------
   Lede on the left and actions on the right share one row under the
   headline (instead of stacking in a narrow column), and the gaps above
   the kicker and before the reel are smaller */
@media (min-width: 860px) {
  .hero-pin { padding-top: 80px; }
  .kicker.hero-kicker:not(.modal-pill) { padding-top: 16px; margin-bottom: 16px; }
  .hero-curtain { margin-top: clamp(32px, 4.5vh, 48px); }
}
@media (min-width: 900px) {
  .hero-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
  .hero-statement { grid-column: 1; grid-row: 2; max-width: 46ch; margin-top: clamp(24px, 3.5vh, 36px); }
  .hero-actions { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* Hero kicker: the items separated by an em dash, like the rest of the site's lists */
.hero-kicker span + span::before { content: "—"; margin: 0 .6em; opacity: .45; }

/* O problema: compact cells — index right above the line of text, no fixed height */
@media (min-width: 860px) {
  .pains-row { gap: 10px; min-height: 0; padding: 16px 0 24px; }
  .pains-lead { margin-top: 56px; }
}

/* Hero: more air between the copy and the reel */
@media (min-width: 860px) { .hero-curtain { margin-top: clamp(56px, 8vh, 96px); } }

/* Panels: corner ticks only (the 1/3 and 2/3 ticks matched no column) */
@media (min-width: 860px) {
  :is(.pains, .impact, .about, .tiers-section, .faq-section, .testimonial-section, .footer, .cta-panel)::after {
    background:
      linear-gradient(var(--t), var(--t)) 0 0 / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 100% 0 / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 0 100% / 14px 1px no-repeat,
      linear-gradient(var(--t), var(--t)) 100% 100% / 14px 1px no-repeat;
  }
}

/* Hero: the headline a little lower, and more room before the reel */
@media (min-width: 860px) {
  .hero-pin { padding-top: 104px; }
  .kicker.hero-kicker:not(.modal-pill) { margin-bottom: 24px; }
  .hero-curtain { margin-top: clamp(80px, 11vh, 128px); }
}

/* ---------- Logo descriptor: "Web — Automação — IA" under the name,
   left-aligned with natural spacing, like the site's other labels. The
   name, links and button keep their places ---------- */
.header .logo-container { flex-direction: column; align-items: flex-start; height: auto; }
.logo-tagline {
  display: flex;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.logo-tagline span + span::before { content: "—"; margin: 0 .5em; opacity: .6; }
@media (max-width: 859px) { .logo-tagline { margin-top: 5px; font-size: 9px; } }
/* A caption to the name, not a second name: the name's colour at half
   strength (so it also works over dark sections), dashes lighter still */
.logo-tagline { color: color-mix(in srgb, currentColor 55%, transparent); transition: opacity .25s ease, visibility 0s; }
/* Once the page scrolls and the nav sits over the sections: the name alone
   (the nav's backdrop keeps its original height) */
/* Homepage: it stays while the hero is pinned under the nav (also after a
   refresh mid-hero) and goes with the rest of the nav when the reel rises;
   other pages: as soon as they scroll */
html.is-scrolled:not(.has-curtain) .header .logo-tagline,
html.has-curtain:not(.hero-pinned) .header .logo-tagline { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }

/* Without the kicker above it, the headline keeps its place below the nav */
@media (min-width: 860px) { .hero-pin { padding-top: 160px; } }

/* Logo descriptor sized per language so its natural width matches the name's
   (measured with the lowercase name: PT line 0.665, EN line 0.632 of the name's size).
   Set as a share of the name's size, so it holds on phones too. */
:root { --logo-fs: 17.5px; }
@media (min-width: 860px) { :root { --logo-fs: 19px; } }
html[lang^="pt"] .logo-tagline { font-size: calc(var(--logo-fs) * .665); }
html[lang="en"] .logo-tagline { font-size: calc(var(--logo-fs) * .632); }

/* ---------- Diagnosis and chat in the Genesis palette ----------
   The lilac left over from the old brand becomes the baby-blue accent;
   labels follow the site's mono labels; boxes use the site's radii */
.quiz-option { border-color: var(--line); border-radius: 12px; }
.quiz-option-key { border-radius: 6px; font-family: var(--font-mono); font-weight: 400; }
.quiz-option.is-selected { border-color: var(--ink); background: var(--accent); }
.quiz-option.is-selected .quiz-option-key { background: var(--ink); border-color: var(--ink); color: #fff; }
.quiz-plan { border-radius: 16px; background: var(--accent); }
.quiz-plan-name, .quiz-band { font-weight: 300; letter-spacing: -.035em; }
.quiz-question { font-weight: 300; letter-spacing: -.035em; }
.quiz-title { font-weight: 300; letter-spacing: -.04em; }
.quiz-mail { border-radius: 16px; border-color: var(--line); }
.quiz-mail-guide { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.quiz-score-label, .quiz-label, .quiz-count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.quiz-weak-list, .quiz-weak-list li { border-color: var(--line); }
.quiz-progress { height: 2px; background: var(--line); }
@media (hover: hover) { .chat-launcher:hover { background: var(--accent); color: var(--ink); } }
.chat-launcher.is-active { background: var(--accent); color: var(--ink); }

/* Contact form: the send button as an outlined pill */
.cta-form .button { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
@media (hover: hover) { .cta-form .button:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }

/* Diagnosis strip: no background of its own. The nav's frosted backdrop
   (.header::before) starts at the very top of the screen instead, behind the
   strip, so strip and nav read as one continuous surface while staying two
   separate elements. Over a dark section (main.js adds .is-on-dark) the pill
   turns baby blue so it stays visible */
.promo-strip { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header::before { top: 0; height: calc(var(--strip-h) + var(--nav-extra) + 14px + var(--gap) * 2 + 28px); }
@media (min-width: 860px) { .header::before { height: calc(var(--strip-h) + var(--nav-extra) + 17px + var(--gap) * 2 + 32px); } }
.promo-strip.is-on-dark a.promo-link { background: var(--accent); color: var(--ink); }
.promo-strip a.promo-link { transition: background-color .3s ease, color .3s ease; }

/* Footer: the legal links flush with the right edge (the chat button sits
   below their line, so no room has to be kept for it) */
@media (min-width: 860px) { .footer-bottom { padding-right: 0; } }

/* ---------- From 1200px the diagnosis pill lives in the nav ----------
   No bar above the nav: once the strip reaches the top it sits in the nav's
   own row, centred between the name and the links, and slides away where it
   always did. The strip is the height of the nav row everywhere (also in its
   place in the page), so the pill doesn't jump when it sticks. Below 1200px
   there isn't room beside the name and links: it stays a bar above the nav. */
@media (min-width: 1200px) {
  :root { --strip-row: calc(var(--gap) * 2 + 17px); --strip-h: 0px; }
  html.strip-inline { scroll-padding-top: var(--strip-row); }
  html.strip-inline.strip-stuck:not(.strip-closed),
  html.strip-away, html.strip-inline.strip-stuck.strip-away:not(.strip-closed) { --nav-extra: 0px; }
  .promo-strip { height: var(--strip-row); padding: 0; pointer-events: none; }
  .promo-strip a.promo-link { pointer-events: auto; }
  html.strip-inline .promo-strip { height: var(--strip-row); }
  html.strip-inline.strip-stuck .promo-strip + * { margin-top: var(--strip-row); }
}

/* Mobile: the strip runs edge to edge as a full-width bar, so the whole
   question fits on one line */
@media (max-width: 859px) {
  .promo-strip { padding: 0; }
  .promo-strip a.promo-link { width: 100%; height: 100%; justify-content: center; padding: 0 12px; border-radius: 0; }
}

/* Mobile: more room between the nav (name + descriptor) and the headline */
@media (max-width: 859px) { .hero-pin { padding-top: 112px; } }

/* ---------- Testemunhos in the Genesis type and controls ----------
   The quote stands in for the section's title, so it takes the titles'
   Light weight; the arrows drop the outline (no outlined circles anywhere
   else) and become filled round buttons, like the chat button; the logos
   are sized so each carries the same amount of ink (measured: Oporto's
   thin serif at 30px; Softingal and Alviere matched to its area) */
.testimonial-quote { font-weight: 300; font-size: clamp(22px, 2vw, 30px); line-height: 1.28; letter-spacing: -.03em; }
.testimonial-nav-btn { border: 0; background: rgba(255, 255, 255, .1); color: #fff; }
@media (hover: hover) { .testimonial-nav-btn:hover { background: #fff; color: var(--ink); } }
.testimonial-logo-img--softingal { height: 19.5px; }
.testimonial-logo-img--alviere { height: 18px; }

/* Reel: the interior photo slightly toned down, so its warmth doesn't fight
   the graphite panel and the blue highlights */
.hero .hero-reel .n-img div, .hero .hero-reel .sp-thumb { filter: saturate(.78) contrast(.97); }

/* Sobre: a reading measure of about 60 characters */
.about-copy p { max-width: 60ch; }

/* Testemunhos: the quote a step smaller (still Light) */
.testimonial-quote { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.38; letter-spacing: -.02em; }

/* Reel: the beat label stays within the space left of the mockup and wraps
   onto two lines when it doesn't fit (it ran under the mockup on tablets) */
@media (min-width: 860px) {
  .hero .hero-reel .hr-section { max-width: calc(var(--col) * 4 - 16px); align-items: flex-start; }
  .hero .hero-reel .hr-section i { flex: none; margin-top: .65em; }
  .hero .hero-reel .hr-section .mask { white-space: normal; line-height: 1.3; }
}

/* =====================================================================
   Light monochrome palette (experiment, branch mono-palette)
   Same structure and Genesis character, more light and more contrast:
   white page, neutral light-grey panels (no blue cast), true black for
   type, buttons and ticks, a grey second line in the hero. Dark only for
   the reel and the testimonials; the footer is a light card. Baby blue is
   kept as the one discreet accent, on small details only
   ===================================================================== */
:root {
  --ink: #0a0a0a;
  --dark: #0a0a0a;
  --night: #0a0a0a;
  --panel: #f4f4f4;
  --steel: #d9d9d9;
  --chip: #ebebeb;
  --line: rgba(10, 10, 10, .12);
  --black: #0a0a0a;
  --soft-black: #0a0a0a;
  --grey: rgba(10, 10, 10, .14);
  --text-2: #555555;
  --text-3: #6b6b6b;
}

/* Hero: black first line, grey second line */
html[lang^="pt"] .hero-title .tw:nth-child(n+4), html[lang="en"] .hero-title .tw:nth-child(n+3) { color: #9a9a9a; }

/* Surfaces: every section on the same neutral grey; no blue panels */
.about::before { background: var(--panel); }
.cta-panel { background: var(--panel); }
.testimonial-section::before { background: var(--ink); }
.tier-free { background: #fff; }

/* Buttons: hover a step lighter, not graphite */
@media (hover: hover) {
  .hero-actions .hero-button:not(.-secondary):hover, .cta-section .cta-main .cta-button:hover,
  .tier.-featured .tier-cta .button:hover, .tier-free .button:hover { background: #333; border-color: #333; }
}

/* Footer: a light card with black type */
.footer::before { background: var(--panel); }
.footer::after { --t: var(--ink); }
.footer, .footer.-fg-off-white, .footer.-fg-off-white a, .footer .logo, .footer .nav-link-plain, .footer .nav-cta, .footer-guide-title { color: var(--ink); }
.footer .footer-email, .footer-email { color: var(--text-2) !important; }
.footer-guide-label { color: var(--text-3); }
.footer-bottom { color: var(--text-3); border-top-color: var(--line); }
@media (max-width: 859px) { .footer-guide { border-top-color: var(--line); } }

/* Reel: neutral black, soft white light; marks inside the beats in black
   (beat 1 keeps its lilac) */
.hero .hero-visual.hero-reel { --bg: #0a0a0a; background: #0a0a0a; }
.hero .hero-reel .db-bar i:nth-child(2), .hero .hero-reel .db-legend span:nth-child(2) i,
.hero .hero-reel .ib-row.-new .ib-r1 b::before { background: #0a0a0a; }
.hero .hero-reel .ib-auto-h i { background: linear-gradient(140deg, #6b6b6b, #0a0a0a); }
.hero .hero-reel .db-chart-h small i { border-top-color: #0a0a0a; }
.hero .hero-reel .db-chart .db-mark { stroke: #0a0a0a; }

/* Variant: baby blue back on one surface, the contact panel, so the page
   ends on a moment of colour */
.cta-panel { background: var(--accent); }

/* The diagnosis pill in baby blue with black type: colour stays present at
   the top of every page, and black is left to the main action (book a
   call). Baby blue reads on dark sections too, so it no longer switches */
.promo-strip a.promo-link, a.promo-link, .promo-strip.is-on-dark a.promo-link { background: var(--accent); color: var(--ink); }
@media (hover: hover) { .promo-link:hover { background: var(--steel); } }

/* Sobre: the photo in colour on baby blue (as the blog's avatar), so it
   brings some warmth instead of grey on grey */
.about-photo img { filter: none; }

/* Diagnosis pill: a slightly deeper baby blue, so it reads over the grey
   panels too */
/* Back to black for more presence; over a dark section (main.js adds
   .is-on-dark) it switches to the original baby blue */
.promo-strip a.promo-link, a.promo-link { background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) { .promo-link:hover { background: #333; } }
.promo-strip.is-on-dark a.promo-link { background: var(--accent); color: var(--ink); }
@media (hover: hover) { .promo-strip.is-on-dark a.promo-link:hover { background: #d3e0e5; } }
@media (max-width: 859px) { .promo-strip a.promo-link { box-shadow: none; } }

/* Sobre: the photo stays in place while the text scrolls past */
.about-photo { position: static; }

/* =====================================================================
   Site improvements (branch site-melhorias)
   ===================================================================== */

/* Hero headline: second line a step darker, for contrast on white */
html[lang^="pt"] .hero-title .tw:nth-child(n+4), html[lang="en"] .hero-title .tw:nth-child(n+3) { color: #929292; }



/* The testimonials in a softer black than the type: easier on the eyes
   next to white, still read as black (text, buttons and the reel stay #0a0a0a) */
:root { --surface-dark: #161616; }
.testimonial-section::before { background: var(--surface-dark); }