/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: Cobalt · enrichment: real product UI · nav: N9 · footer: Ft5 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49, 50–57)
 * audience: gestores de negócios de serviços em Portugal · use: iniciar teste gratuito · tone: profissional, simples, próximo
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 */

html,
body {
  overflow-x: clip;
}

.seo-page {
  width: 100%;
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
}

.seo-page *,
.seo-page *::before,
.seo-page *::after {
  box-sizing: border-box;
}

.seo-page a {
  color: inherit;
}

.seo-skip {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent-ink);
  background: var(--color-ink);
  text-decoration: none;
  transform: translateY(-180%);
}

.seo-skip:focus {
  transform: none;
}

.seo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height-small);
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  gap: var(--space-sm);
}

.seo-brand,
.seo-nav-cta,
.seo-button,
.seo-text-link,
.seo-related a,
.seo-footer a,
.seo-breadcrumb a {
  white-space: nowrap;
}

.seo-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  min-width: 0;
}

.seo-brand img {
  display: block;
  width: min(var(--brand-width), 32vw);
  max-width: 100%;
  height: auto;
}

.seo-nav-cta {
  flex: 0 0 auto;
}

.seo-nav-cta,
.seo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-thin) solid var(--color-ink);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.seo-page .seo-nav-cta,
.seo-page .seo-button-primary {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.seo-button-secondary {
  color: var(--color-ink);
  background: transparent;
}

.seo-nav-cta:hover,
.seo-button:hover {
  transform: translateY(-1px);
}

.seo-nav-cta:active,
.seo-button:active {
  transform: translateY(1px);
}

.seo-page a:focus-visible,
.seo-page summary:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}

.seo-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-md) var(--page-gutter) 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seo-breadcrumb a {
  text-underline-offset: var(--space-3xs);
}

.seo-hero,
.seo-split,
.seo-feature-list,
.seo-faq,
.seo-related,
.seo-close {
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.seo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-2xl) var(--space-3xl);
}

.seo-hero-copy {
  min-width: 0;
}

.seo-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
}

.seo-kicker::before {
  width: var(--space-lg);
  height: var(--rule-medium);
  background: var(--color-accent);
  content: "";
}

.seo-hero h1,
.seo-split h2,
.seo-feature-list h2,
.seo-faq h2,
.seo-related h2,
.seo-close h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
}

.seo-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.65rem, 7vw, 5rem);
  line-height: 1.02;
}

.seo-hero-lead {
  max-width: 60ch;
  margin: var(--space-md) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.seo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.seo-actions .seo-button {
  width: 100%;
}

.seo-reassurance {
  margin: var(--space-sm) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seo-visual {
  min-width: 0;
  margin: 0;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-stage);
  background: var(--color-stage);
}

.seo-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.seo-industry-photo {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.seo-hero .seo-visual img[src$="phone.png"] {
  max-height: var(--tour-height);
  object-fit: contain;
}

.seo-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  max-width: var(--page-max);
  width: 100%;
  margin: calc(var(--space-xl) * -1) auto var(--space-xl);
  padding-inline: var(--page-gutter);
}

.seo-context span {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.seo-visual figcaption {
  margin-block-start: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-3xl);
}

.seo-split h2,
.seo-feature-list h2,
.seo-faq h2,
.seo-related h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
}

.seo-split-copy > p {
  max-width: 62ch;
  margin: var(--space-md) 0 0;
  color: var(--color-ink-2);
}

.seo-checks {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.seo-checks li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.seo-checks li::before {
  position: absolute;
  inset-block-start: .55em;
  inset-inline-start: 0;
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  content: "";
}

.seo-proof {
  width: 100%;
  min-width: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-stage);
  background: var(--color-graphite);
  color: var(--color-accent-ink);
}

.seo-proof strong {
  display: block;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
}

.seo-proof p {
  max-width: 48ch;
  margin: var(--space-md) 0 0;
  color: var(--color-dark-muted);
}

.seo-proof-list {
  display: grid;
  gap: 0;
  margin: var(--space-lg) 0 0;
}

.seo-proof-list div {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-start: var(--rule-thin) solid var(--color-dark-rule);
}

.seo-proof-list dt {
  color: var(--color-dark-muted);
}

.seo-proof-list dd {
  margin: 0;
  font-weight: 700;
}

.seo-feature-list {
  padding-block: var(--space-3xl);
}

.seo-feature-table {
  display: grid;
  margin-block-start: var(--space-xl);
}

.seo-feature-row {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.seo-feature-row h3,
.seo-feature-row p {
  margin: 0;
}

.seo-feature-row h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.seo-feature-row p {
  max-width: 62ch;
  color: var(--color-muted);
}

.capability-hero h1 {
  max-width: 14ch;
}

.capability-jump,
.capability-intro,
.capability-group {
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.capability-jump {
  display: grid;
  border-block: var(--rule-thin) solid var(--color-rule);
}

.capability-jump a {
  display: flex;
  align-items: center;
  min-height: var(--target-large);
  padding-block: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.capability-jump a::after {
  margin-inline-start: auto;
  color: var(--color-accent);
  content: "↓";
}

.capability-intro {
  padding-block: var(--space-4xl) var(--space-2xl);
}

.capability-intro h2,
.capability-group h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.capability-intro > p:last-child {
  max-width: 64ch;
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: var(--text-md);
}

.capability-group {
  padding-block: var(--space-2xl) var(--space-4xl);
  scroll-margin-block-start: var(--space-xl);
}

.capability-group-dark {
  max-width: calc(var(--page-max) + (var(--page-gutter) * 2));
  padding: var(--space-3xl) calc(var(--page-gutter) * 2);
  border-radius: var(--radius-stage);
  background: var(--color-graphite);
  color: var(--color-accent-ink);
}

.capability-group-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding-block-end: var(--space-xl);
}

.capability-group-heading > span,
.capability-title > span {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.capability-group-heading p {
  margin: 0 0 var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.capability-group-heading h2 {
  max-width: 18ch;
}

.capability-ledger {
  border-block-start: var(--rule-thin) solid var(--color-rule-strong);
}

.capability-item {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.capability-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
}

.capability-title h3 {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  font-style: normal;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.capability-detail {
  min-width: 0;
}

.capability-detail > p {
  max-width: 66ch;
  margin: 0;
  color: var(--color-ink-2);
}

.capability-detail > strong {
  display: block;
  margin-block: var(--space-md) var(--space-xs);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.capability-detail ul {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.capability-detail li {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.capability-detail li::before {
  position: absolute;
  inset-block-start: .72em;
  inset-inline-start: 0;
  width: var(--space-xs);
  height: var(--rule-medium);
  background: var(--color-accent);
  content: "";
}

.capability-group-dark h2,
.capability-group-dark h3 {
  color: var(--color-accent-ink);
}

.capability-group-dark .capability-group-heading p,
.capability-group-dark .capability-detail > p,
.capability-group-dark .capability-detail li {
  color: var(--color-dark-muted);
}

.capability-group-dark .capability-ledger {
  border-color: var(--color-dark-rule);
}

.capability-group-dark .capability-item {
  border-color: var(--color-dark-rule);
}

.seo-faq {
  padding-block: var(--space-3xl);
}

.seo-faq-list {
  display: grid;
  margin-block-start: var(--space-xl);
}

.seo-faq details {
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.seo-faq details:last-child {
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.seo-faq summary {
  min-height: var(--target-large);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
}

.seo-faq details p {
  max-width: 65ch;
  margin: 0;
  padding: 0 0 var(--space-lg);
  color: var(--color-ink-2);
}

.seo-related {
  padding-block: var(--space-3xl);
}

.seo-related-list {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.seo-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--target-large);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.seo-related a::after {
  color: var(--color-accent);
  content: "→";
}

.seo-close {
  padding-block: var(--space-4xl);
}

.seo-close-inner {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-radius: var(--radius-stage);
  background: var(--color-graphite);
  color: var(--color-accent-ink);
}

.seo-close h2 {
  max-width: 18ch;
  color: var(--color-accent-ink);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.02;
}

.seo-close p {
  max-width: 54ch;
  margin: 0;
  color: var(--color-dark-muted);
}

.seo-close .seo-button {
  width: fit-content;
  border-color: var(--color-accent-ink);
  color: var(--color-ink);
  background: var(--color-accent-ink);
}

.seo-footer {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
}

.seo-footer-statement {
  max-width: 28ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}

.seo-footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.seo-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (min-width: 40rem) {
  .seo-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .seo-actions .seo-button {
    width: auto;
  }

  .seo-feature-row {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: var(--space-lg);
  }

  .seo-related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }

  .seo-close-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    align-items: end;
    padding: var(--space-2xl);
  }

  .capability-jump {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .capability-jump a:not(:last-child) {
    border-inline-end: var(--rule-thin) solid var(--color-rule);
    padding-inline-end: var(--space-lg);
  }

  .capability-detail ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
}

@media (min-width: 60rem) {
  .seo-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-2xl);
  }

  .seo-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  .seo-split:nth-of-type(even) .seo-split-copy {
    order: 2;
  }

  .seo-split:nth-of-type(even) .seo-proof,
  .seo-split:nth-of-type(even) .seo-visual {
    order: 1;
  }

  .capability-item {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: var(--space-3xl);
  }
}

@media (hover: hover) and (pointer: fine) {
  .seo-related a:hover,
  .seo-text-link:hover {
    color: var(--color-accent);
  }
}

@media (pointer: coarse) {
  .seo-nav-cta,
  .seo-button,
  .seo-related a,
  .seo-footer a,
  .seo-breadcrumb a {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-page *,
  .seo-page *::before,
  .seo-page *::after {
    animation-duration: var(--dur-reduced) !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: var(--dur-reduced) !important;
  }
}