/* Self-hosted (no Google Fonts CDN in production). Shared with the app via
   /fonts/*, so the public site and the app render the exact same families:
   Space Grotesk for headings and brand moments, Inter for everything else. */
@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/Inter-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --public-font-heading: 'Space Grotesk Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #32232b;
  background: #fffafb;
  --public-accent: #b53f67;
  --public-accent-hover: #953153;
  --public-surface: #ffffff;
  --public-surface-soft: #f9edf1;
  --public-text: #32232b;
  --public-muted: #705b64;
  --public-border: rgba(181, 63, 103, 0.18);
  --public-border-hover: rgba(181, 63, 103, 0.5);
  --public-shadow: rgba(103, 52, 72, 0.14);
  --public-shadow-hover: rgba(103, 52, 72, 0.25);
  --public-shadow-lg: rgba(103, 52, 72, 0.28);
  --public-glow: rgba(181, 63, 103, 0.32);
  --public-content-width: 1180px;
  --public-content-width-wide: 1320px;
  --public-section-gap: clamp(4rem, 8vw, 7rem);
  --public-block-gap: clamp(2rem, 4vw, 3rem);
  --public-radius-sm: 0.75rem;
  --public-radius-md: 1rem;
  --public-radius-lg: 1.5rem;
  /* Dark showcase ground (used by the "explore the result" section, light + dark). */
  --public-ink: #171114;
  --public-ink-soft: #241a1f;
  --public-ink-text: #f5e9ee;
  --public-ink-muted: #cbb2bc;
  --public-ink-border: rgba(245, 233, 238, 0.16);
  --public-ink-accent: #ec8dac;
  /* Conversion band gradient (contrast-checked: white text ≥ 4.5:1 at the warm end). */
  --public-cta-from: #b53f67;
  --public-cta-to: #bd4f2f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: #fffafb;
  color: var(--public-text);
  line-height: 1.6;
}

a {
  color: var(--public-accent);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--public-accent-hover);
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(181, 63, 103, 0.35);
  outline-offset: 4px;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--public-font-heading);
  line-height: 1.15;
}

h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: 2rem;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
}

.public-container {
  width: min(100% - 2rem, var(--public-content-width));
  margin-inline: auto;
}

.public-container--text {
  width: min(100% - 2rem, 780px);
}

.public-header {
  border-bottom: 1px solid var(--public-border);
  background: rgba(255, 250, 251, 0.96);
}

.public-header__inner {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.public-brand {
  font-family: var(--public-font-heading);
  color: var(--public-accent);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.public-header ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-header nav a,
.public-languages a {
  font-size: 0.9rem;
  font-weight: 700;
}

/* Current page in the primary nav: a subtle accent + underline, no layout shift. */
.public-header nav a[aria-current="page"] {
  color: var(--public-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.public-languages {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.public-languages [aria-current="page"] {
  color: var(--public-text);
  text-decoration: none;
}

.public-hero {
  padding: clamp(5rem, 10vw, 8rem) 0;
  text-align: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(244, 199, 183, 0.75), transparent 24rem),
    radial-gradient(circle at 85% 70%, rgba(209, 115, 136, 0.2), transparent 26rem),
    #fffafb;
}

.public-hero p {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--public-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.public-eyebrow {
  margin-bottom: 1rem;
  color: var(--public-accent) !important;
  font-size: 0.8rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-hero__media {
  margin-top: 2.5rem;
}

.public-section {
  padding: var(--public-section-gap) 0;
}

.public-section--tinted {
  background: var(--public-surface-soft);
}

.public-grid,
.public-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.public-card,
.public-related article,
.public-usecases__item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface);
  box-shadow: 0 18px 45px var(--public-shadow);
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* A thin accent line that wipes across the top edge on hover */
.public-card::after,
.public-related article::after,
.public-usecases__item::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--public-accent), var(--public-accent-hover));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-card:hover,
.public-related article:hover,
.public-usecases__item:hover,
.public-card:focus-within,
.public-related article:focus-within,
.public-usecases__item:focus-within {
  transform: translateY(-6px);
  border-color: var(--public-border-hover);
  box-shadow:
    0 30px 65px var(--public-shadow-hover),
    0 0 34px -10px var(--public-glow);
}

.public-card:hover::after,
.public-related article:hover::after,
.public-usecases__item:hover::after,
.public-card:focus-within::after,
.public-related article:focus-within::after,
.public-usecases__item:focus-within::after {
  transform: scaleX(1);
}

/* Media cards: gently push in on the image while the card lifts */
.public-card--media .public-media img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-card--media:hover .public-media img {
  transform: scale(1.06);
}

/* Per-tool corner glyph. Faint at rest, lights up and turns on hover.
   Scoped per page so each landing carries its own functional icon. */
.public-body--remove-background .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E");
}

.public-body--image-upscaler .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
}

.public-body--remove-object-from-photo .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l1.7 4.6L18.3 8.3l-4.6 1.7L12 14.6l-1.7-4.6L5.7 8.3l4.6-1.7z'/%3E%3Cpath d='M18.5 13l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9z'/%3E%3C/svg%3E");
}

.public-body--restyle-photo .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='8.5' cy='9' r='4.2'/%3E%3Ccircle cx='15.5' cy='9' r='4.2' opacity='.62'/%3E%3Ccircle cx='12' cy='15' r='4.2' opacity='.82'/%3E%3C/svg%3E");
}

.public-body--translate-text-in-image .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.public-body--photo-to-3d-model .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}

.public-body--3d-print-from-photo .public-card {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}

.public-body--remove-background .public-card::before,
.public-body--image-upscaler .public-card::before,
.public-body--remove-object-from-photo .public-card::before,
.public-body--restyle-photo .public-card::before,
.public-body--translate-text-in-image .public-card::before,
.public-body--photo-to-3d-model .public-card::before,
.public-body--3d-print-from-photo .public-card::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 18px;
  height: 18px;
  background-color: var(--public-accent);
  -webkit-mask: var(--card-icon) center / contain no-repeat;
  mask: var(--card-icon) center / contain no-repeat;
  opacity: 0.28;
  transform: rotate(-4deg);
  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 3;
}

.public-body--remove-background .public-card:hover::before,
.public-body--remove-background .public-card:focus-within::before,
.public-body--image-upscaler .public-card:hover::before,
.public-body--image-upscaler .public-card:focus-within::before,
.public-body--remove-object-from-photo .public-card:hover::before,
.public-body--remove-object-from-photo .public-card:focus-within::before,
.public-body--restyle-photo .public-card:hover::before,
.public-body--restyle-photo .public-card:focus-within::before,
.public-body--translate-text-in-image .public-card:hover::before,
.public-body--translate-text-in-image .public-card:focus-within::before,
.public-body--photo-to-3d-model .public-card:hover::before,
.public-body--photo-to-3d-model .public-card:focus-within::before,
.public-body--3d-print-from-photo .public-card:hover::before,
.public-body--3d-print-from-photo .public-card:focus-within::before {
  opacity: 1;
  filter: drop-shadow(0 0 7px var(--public-glow));
  transform: rotate(-16deg) scale(1.14);
}

.public-faq details {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.public-faq details:hover {
  border-color: var(--public-border-hover);
  box-shadow: 0 12px 30px var(--public-shadow);
}

.public-faq summary {
  transition: color 0.2s ease;
}

.public-faq details[open] summary,
.public-faq summary:hover {
  color: var(--public-accent);
}

.public-card__content,
.public-related article {
  padding: 1.5rem;
}

.public-card p,
.public-related p,
.public-steps p,
.public-faq p {
  margin-bottom: 0;
  color: var(--public-muted);
}

.public-card__link {
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 800;
}

.public-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding-left: 1.4rem;
}

.public-steps li {
  padding-left: 0.5rem;
}

.public-steps li::marker {
  color: var(--public-accent);
  font-weight: 800;
}

.public-faq {
  display: grid;
  gap: 0.75rem;
}

.public-faq details {
  padding: 1.2rem;
  border: 1px solid var(--public-border);
  border-radius: 0.75rem;
  background: var(--public-surface);
}

.public-faq summary {
  cursor: pointer;
  font-weight: 800;
}

.public-faq p {
  margin-top: 1rem;
}

.public-related a,
.public-cta a {
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 800;
}

/* Conversion band: a distinct pink -> warm-orange gradient, white copy.
   Contrast checked — #fff on the warm end (#bd4f2f) ≈ 4.8:1. */
.public-cta {
  position: relative;
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  text-align: center;
  color: #fff;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0 1.4px, transparent 1.9px),
    linear-gradient(120deg, var(--public-cta-from) 0%, var(--public-cta-to) 100%);
  background-size: 30px 30px, 30px 30px, auto;
  background-position: 0 0, 15px 15px, 0 0;
  background-attachment: fixed, fixed, scroll;
  background-repeat: repeat, repeat, no-repeat;
}

/* Same discreet dot-lattice + parallax drift on every other full-bleed
   colour block (tinted sections, the dark result showcase). The hero keeps
   its own radial wash and is not touched here. */
.public-section--tinted,
.public-examples-group--tinted,
.public-body--home .public-examples-group {
  position: relative;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(181, 63, 103, 0.12) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, rgba(181, 63, 103, 0.07) 0 1.3px, transparent 1.8px);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, 15px 15px;
  background-attachment: fixed, fixed;
  background-repeat: repeat, repeat;
}

.public-result-showcase {
  /* only the image layer: the base ink colour (light mode and the
     prefers-color-scheme: dark override alike) stays whatever is set
     on this selector elsewhere in the sheet */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(245, 233, 238, 0.14) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, rgba(245, 233, 238, 0.08) 0 1.2px, transparent 1.7px);
  background-size: 34px 34px, 34px 34px;
  background-position: 0 0, 17px 17px;
  background-attachment: fixed, fixed;
  background-repeat: repeat, repeat;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .public-cta {
    background-attachment: scroll, scroll, scroll;
  }

  .public-section--tinted,
  .public-examples-group--tinted,
  .public-body--home .public-examples-group,
  .public-result-showcase {
    background-attachment: scroll, scroll;
  }
}

.public-cta h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
}

.public-cta p {
  max-width: 52ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.08rem;
  line-height: 1.6;
}

.public-cta a {
  padding: 0.95rem 2rem;
  border-radius: 999px;
  background: #fff;
  color: var(--public-cta-to);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.public-cta a:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--public-cta-to);
}

.public-cta a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}

.public-cta__note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.public-hero__cta {
  margin-top: 2rem;
  margin-bottom: 0;
}

.public-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--public-accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.public-button:hover {
  background: var(--public-accent-hover);
  color: #fff;
}

.public-button:active {
  transform: translateY(1px);
}

.public-button--secondary {
  border: 1px solid var(--public-border-hover);
  background: transparent;
  color: var(--public-accent);
}

.public-button--secondary:hover {
  background: var(--public-surface-soft);
  color: var(--public-accent-hover);
}

/* Pricing uses the public card, badge, button and section vocabulary. */
.public-body--pricing .public-hero {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.public-pricing {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.public-pricing__heading {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.public-pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.public-price-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.4rem;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-surface);
  box-shadow: 0 18px 45px var(--public-shadow);
}

.public-price-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(240px, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  background: linear-gradient(120deg, var(--public-surface-soft), var(--public-surface));
}

.public-price-card--highlighted {
  position: relative;
  z-index: 1;
  border: 2px solid var(--public-accent);
  box-shadow: 0 24px 58px var(--public-shadow-hover);
  transform: translateY(-0.6rem);
}

.public-price-card__header {
  display: flex;
  min-height: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.public-price-card__header h3 {
  margin-bottom: 0;
}

.public-badge {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--public-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Hierarchy: price is the dominant line, credits reads as the secondary
   "what you get" line under it. */
.public-price-card__price {
  margin: 1.7rem 0 0.15rem;
  font-family: var(--public-font-heading);
  color: var(--public-accent);
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.public-price-card__credits {
  margin-bottom: 1rem;
  color: var(--public-muted);
  font-size: 1.05rem;
  font-weight: 750;
}

.public-price-card__description,
.public-pricing__note {
  color: var(--public-muted);
}

.public-price-card ul {
  flex: 1;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.public-price-card li {
  position: relative;
  margin-top: 0.65rem;
  padding-left: 1.35rem;
  color: var(--public-muted);
  font-size: 0.92rem;
}

.public-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--public-accent);
  font-weight: 900;
}

.public-price-card .public-button {
  width: 100%;
  padding-inline: 0.9rem;
  text-align: center;
  /* keep the longest localized label ("Abrir Editasteic para comprar") on
     one line inside the 4-up grid column */
  font-size: 0.85rem;
}

.public-price-card:first-child .public-price-card__credits {
  margin-top: 0.6rem;
}

.public-price-card:first-child .public-price-card__description,
.public-price-card:first-child ul {
  margin-bottom: 0;
}

.public-price-card:first-child .public-button {
  width: auto;
  min-width: 13rem;
}

.public-pricing__note {
  max-width: 76ch;
  margin: 1.75rem auto 0;
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 980px) {
  .public-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-price-card--highlighted {
    transform: none;
  }
}

@media (max-width: 680px) {
  .public-pricing__grid,
  .public-price-card:first-child {
    grid-template-columns: 1fr;
  }

  .public-price-card:first-child {
    gap: 0.5rem;
  }

  .public-price-card:first-child .public-button {
    width: 100%;
  }
}

/* Pricing cards: a discreet lift on hover / keyboard focus. Restrained on the
   wide welcome banner, a touch more lift on the recommended card. */
.public-price-card {
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.public-price-card:hover,
.public-price-card:focus-within {
  transform: translateY(-5px);
  border-color: var(--public-border-hover);
  box-shadow:
    0 30px 66px var(--public-shadow-hover),
    0 0 34px -12px var(--public-glow);
}

.public-price-card:first-child:hover,
.public-price-card:first-child:focus-within {
  transform: translateY(-2px);
}

.public-price-card--highlighted:hover,
.public-price-card--highlighted:focus-within {
  transform: translateY(-1rem);
  box-shadow:
    0 36px 74px var(--public-shadow-hover),
    0 0 42px -8px var(--public-glow);
}

@media (prefers-reduced-motion: reduce) {
  .public-button,
  .public-card,
  .public-related article,
  .public-usecases__item,
  .public-card::after,
  .public-related article::after,
  .public-usecases__item::after,
  .public-card--media .public-media img,
  .public-faq details,
  .public-price-card,
  .public-body--remove-background .public-card::before,
  .public-body--image-upscaler .public-card::before,
  .public-body--remove-object-from-photo .public-card::before,
  .public-body--restyle-photo .public-card::before,
  .public-body--translate-text-in-image .public-card::before,
  .public-body--photo-to-3d-model .public-card::before,
  .public-body--3d-print-from-photo .public-card::before {
    transition: opacity 0.2s ease;
  }

  .public-price-card:hover,
  .public-price-card:focus-within,
  .public-price-card:first-child:hover,
  .public-price-card:first-child:focus-within {
    transform: none;
  }

  .public-price-card--highlighted:hover,
  .public-price-card--highlighted:focus-within {
    transform: translateY(-0.6rem);
  }

  .public-button:active,
  .public-card:hover,
  .public-related article:hover,
  .public-usecases__item:hover,
  .public-card:focus-within,
  .public-related article:focus-within,
  .public-usecases__item:focus-within,
  .public-card--media:hover .public-media img,
  .public-body--remove-background .public-card::before,
  .public-body--remove-background .public-card:hover::before,
  .public-body--remove-background .public-card:focus-within::before,
  .public-body--image-upscaler .public-card::before,
  .public-body--image-upscaler .public-card:hover::before,
  .public-body--image-upscaler .public-card:focus-within::before,
  .public-body--remove-object-from-photo .public-card::before,
  .public-body--remove-object-from-photo .public-card:hover::before,
  .public-body--remove-object-from-photo .public-card:focus-within::before,
  .public-body--restyle-photo .public-card::before,
  .public-body--restyle-photo .public-card:hover::before,
  .public-body--restyle-photo .public-card:focus-within::before,
  .public-body--translate-text-in-image .public-card::before,
  .public-body--translate-text-in-image .public-card:hover::before,
  .public-body--translate-text-in-image .public-card:focus-within::before,
  .public-body--photo-to-3d-model .public-card::before,
  .public-body--photo-to-3d-model .public-card:hover::before,
  .public-body--photo-to-3d-model .public-card:focus-within::before,
  .public-body--3d-print-from-photo .public-card::before,
  .public-body--3d-print-from-photo .public-card:hover::before,
  .public-body--3d-print-from-photo .public-card:focus-within::before {
    transform: none;
  }

  .public-card:hover::after,
  .public-related article:hover::after,
  .public-usecases__item:hover::after,
  .public-card:focus-within::after,
  .public-related article:focus-within::after,
  .public-usecases__item:focus-within::after {
    transform: scaleX(1);
  }
}

.public-footer {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem;
  border-top: 1px solid var(--public-border);
  background: var(--public-surface);
}

.public-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: start;
}

.public-footer__brand .public-brand {
  font-size: 1.1rem;
}

.public-footer__brand p {
  margin: 0.6rem 0 0;
  max-width: 36ch;
  color: var(--public-muted);
  font-size: 0.88rem;
}

.public-footer__nav ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-footer__nav a {
  color: var(--public-text);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.public-footer__nav a:hover,
.public-footer__nav a[aria-current="page"] {
  color: var(--public-accent);
}

.public-footer__languages {
  display: flex;
  gap: 0.75rem;
}

.public-footer__languages a {
  font-size: 0.9rem;
  font-weight: 700;
}

.public-footer__languages [aria-current="page"] {
  color: var(--public-text);
  text-decoration: none;
}

.public-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--public-border);
  font-size: 0.85rem;
}

.public-footer__legal p {
  margin: 0 auto 0 0;
  color: var(--public-muted);
}

.public-footer__legal a {
  font-weight: 650;
  text-decoration: none;
}

.public-footer__legal a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .public-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .public-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .public-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .public-header__inner {
    flex-wrap: wrap;
    padding-block: 0.8rem;
  }

  /* The primary nav drops to its own full-width row below brand + languages.
     Items stay on one line and never break their label (e.g. "Cómo funciona"
     split in two at 360 px); the strip scrolls horizontally only if the four
     labels still don't fit. */
  .public-header__inner > nav:first-of-type {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .public-header__inner > nav:first-of-type::-webkit-scrollbar {
    display: none;
  }

  .public-header__inner > nav:first-of-type ul {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.6rem;
  }

  .public-header nav a {
    white-space: nowrap;
  }

  .public-header__inner > nav:first-of-type a {
    font-size: 0.82rem;
  }

  .public-grid,
  .public-related,
  .public-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --public-accent: #ec8dac;
    --public-accent-hover: #f3acc2;
    --public-surface: #2d2228;
    --public-surface-soft: #39272f;
    --public-text: #fff6f8;
    --public-muted: #dbc4cc;
    --public-border: rgba(236, 141, 172, 0.24);
    --public-border-hover: rgba(236, 141, 172, 0.6);
    --public-shadow: rgba(10, 4, 7, 0.34);
    --public-shadow-hover: rgba(10, 4, 7, 0.52);
    --public-shadow-lg: rgba(10, 4, 7, 0.62);
    --public-glow: rgba(236, 141, 172, 0.45);
    background: #21191d;
  }

  body,
  .public-hero {
    background-color: #21191d;
  }

  .public-header {
    background: rgba(33, 25, 29, 0.96);
  }

  .public-hero {
    background:
      radial-gradient(circle at 15% 20%, rgba(192, 73, 113, 0.2), transparent 24rem),
      #21191d;
  }
}

/* ------------------------------------------------------------------ *
 * Tool landing: visual blocks (hero split, before/after, media cards)
 * ------------------------------------------------------------------ */

.public-section__lead {
  max-width: 62ch;
  margin: -1rem 0 2.5rem;
  color: var(--public-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

/* Reusable copy + visual split (hero, showcase) */
.public-split {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 440px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.public-split--reverse {
  grid-template-columns: minmax(300px, 440px) 1fr;
}

.public-split--reverse .public-split__media {
  order: -1;
}

.public-split__text,
.public-split__media {
  min-width: 0;
}

.public-hero--split {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  text-align: left;
}

.public-hero--split h1 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
}

.public-hero--split .public-hero__lead {
  max-width: 48ch;
  margin-inline: 0;
}

.public-hero__cta {
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Before / after comparison */
.public-ba {
  --pos: 50%;
}

.public-ba__viewport {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

/* Baseline (no JavaScript): the two images sit side by side, original first. */
.public-ba:not(.is-interactive) .public-ba__viewport {
  aspect-ratio: auto !important;
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
}

.public-ba:not(.is-interactive) .public-ba__pane {
  flex: 1 1 0;
  min-width: 0;
}

.public-ba:not(.is-interactive) .public-ba__pane--before {
  order: -1;
}

.public-ba__pane {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 0.9rem;
  background: var(--public-surface);
}

.public-ba__pane img {
  display: block;
  width: 100%;
  height: auto;
}

.public-ba__pane--checker {
  background-color: #ffffff;
  background-image:
    conic-gradient(#dfd4da 25%, transparent 0 50%, #dfd4da 0 75%, transparent 0);
  background-size: 20px 20px;
  background-position: 0 0;
}

.public-ba__tag {
  position: absolute;
  top: 0.6rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(50, 35, 43, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

.public-ba__tag--before {
  left: 0.6rem;
}

.public-ba__tag--after {
  right: 0.6rem;
  background: var(--public-accent);
}

.public-ba__divider {
  display: none;
}

.public-ba__caption {
  max-width: 46ch;
  margin: 1.1rem auto 0;
  color: var(--public-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* Progressive enhancement: draggable slider */
.public-ba.is-interactive .public-ba__viewport {
  display: block;
  max-width: 420px;
  max-height: 78vh;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--public-border);
  background: var(--public-surface);
  cursor: ew-resize;
}

.public-ba--wide.is-interactive .public-ba__viewport {
  max-width: 460px;
}

.public-ba.is-interactive .public-ba__pane {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.public-ba.is-interactive .public-ba__pane img {
  height: 100%;
  object-fit: contain;
}

.public-ba.is-interactive .public-ba__pane--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.public-ba.is-interactive .public-ba__divider {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(50, 35, 43, 0.25);
  pointer-events: none;
}

.public-ba.is-interactive .public-ba__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(50, 35, 43, 0.35);
}

.public-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}

.public-ba__range:focus-visible + .public-ba__pane--before,
.public-ba__range:focus-visible ~ .public-ba__divider {
  outline: 3px solid rgba(181, 63, 103, 0.55);
  outline-offset: 2px;
}

/* Media inside content cards */
.public-card--media .public-media {
  height: 260px;
  overflow: hidden;
  background-color: var(--public-surface-soft);
}

.public-card--media .public-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.public-media--checker {
  background-color: #ffffff !important;
  background-image:
    conic-gradient(#dfd4da 25%, transparent 0 50%, #dfd4da 0 75%, transparent 0) !important;
  background-size: 22px 22px !important;
}

/* Creative branded backdrop for a recomposed cutout: a very light rose wash
   kept close to transparent, dressed with a diamond dot lattice, a faint
   diagonal hatch and two soft corner blooms for movement. */
.public-media--tint {
  background-color: var(--public-surface-soft) !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(181, 63, 103, 0.13) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, rgba(181, 63, 103, 0.08) 0 1.4px, transparent 1.9px),
    repeating-linear-gradient(135deg, rgba(181, 63, 103, 0.045) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 85% 14%, rgba(244, 199, 183, 0.3), transparent 45%),
    radial-gradient(circle at 10% 88%, rgba(204, 92, 129, 0.16), transparent 42%),
    linear-gradient(150deg, rgba(204, 92, 129, 0.1), rgba(168, 58, 93, 0.03) 78%) !important;
  background-size:
    26px 26px,
    26px 26px,
    auto,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-position:
    0 0,
    13px 13px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.public-grid--count-2 {
  max-width: 900px;
  margin-inline: auto;
}

/* Demo video block */
.public-demo__media {
  margin-top: 0.5rem;
}

.public-demo__media video {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--public-border);
  box-shadow: 0 22px 55px var(--public-shadow);
  background: #000;
}

/* Static input -> output -> destination journey */
.public-journey {
  margin: 0;
}

.public-journey__stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.public-journey__stage {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface);
  box-shadow: 0 14px 38px var(--public-shadow);
}

.public-journey__stage:last-child {
  grid-column: 1 / -1;
}

.public-journey__media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
  background: #171216;
}

.public-journey__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-journey__copy {
  padding: 0.9rem 1rem 1rem;
}

.public-journey__copy > span,
.public-handoff article > span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--public-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-journey__copy strong {
  display: block;
  line-height: 1.25;
}

.public-journey__copy p {
  margin: 0.35rem 0 0;
  color: var(--public-muted);
  font-size: 0.82rem;
}

.public-journey__arrow {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--public-accent);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 5px 16px var(--public-shadow-hover);
}

.public-journey__stage:first-child .public-journey__arrow {
  top: 38%;
  right: -1.35rem;
}

.public-journey__stage:nth-child(2) .public-journey__arrow {
  left: 50%;
  bottom: -1.35rem;
  transform: translateX(-50%) rotate(90deg);
}

.public-journey figcaption {
  max-width: 46ch;
  margin: 1rem auto 0;
  color: var(--public-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* Product responsibility -> downstream service responsibility */
.public-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.public-handoff article {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface);
}

.public-handoff article p {
  margin-bottom: 0;
  color: var(--public-muted);
}

.public-handoff__arrow {
  display: grid;
  place-items: center;
  color: var(--public-accent);
  font-size: 2rem;
  font-weight: 900;
}

@media (max-width: 900px) {
  .public-split,
  .public-split--reverse {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    justify-items: center;
  }

  .public-split--reverse .public-split__media {
    order: 0;
  }

  /* Give the media a definite width so the before/after viewport can't
     collapse when the grid track stops constraining it. */
  .public-split__media {
    width: min(100%, 420px);
  }

  .public-split__text {
    text-align: center;
  }

  .public-hero--split .public-hero__lead {
    max-width: 60ch;
    margin-inline: auto;
  }

  .public-hero__cta {
    text-align: center;
  }

  .public-ba:not(.is-interactive) .public-ba__viewport {
    max-width: 420px;
  }

  .public-ba.is-interactive .public-ba__viewport,
  .public-ba--wide.is-interactive .public-ba__viewport {
    max-width: 320px;
  }
}

@media (max-width: 620px) {
  .public-journey__stages,
  .public-handoff {
    grid-template-columns: 1fr;
  }

  .public-journey__stage:last-child {
    grid-column: auto;
  }

  .public-journey__arrow,
  .public-journey__stage:first-child .public-journey__arrow,
  .public-journey__stage:nth-child(2) .public-journey__arrow {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -1.35rem;
    transform: translateX(-50%) rotate(90deg);
  }

  .public-handoff__arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .public-ba:not(.is-interactive) .public-ba__viewport {
    flex-direction: column;
    max-width: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-ba.is-interactive .public-ba__pane--before {
    transition: none;
  }
}

@media (prefers-color-scheme: dark) {
  .public-ba__pane--checker,
  .public-media--checker {
    background-color: #211a1e !important;
    background-image:
      conic-gradient(#332a30 25%, transparent 0 50%, #332a30 0 75%, transparent 0) !important;
  }

  .public-ba.is-interactive .public-ba__divider,
  .public-ba.is-interactive .public-ba__divider::after {
    background: #fff6f8;
  }
}

/* ---- 3D Print from Photo: scoped composition ----------------- */

.public-body--3d-print-from-photo .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--3d-print-from-photo .public-hero--split::before {
  content: "";
  position: absolute;
  top: -12rem;
  right: -12rem;
  width: 40rem;
  height: 40rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.2), transparent 64%);
  filter: blur(28px);
  pointer-events: none;
}

.public-body--3d-print-from-photo .public-hero--split .public-split {
  position: relative;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
}

.public-body--3d-print-from-photo .public-journey__stage:nth-child(2) .public-journey__media {
  background: #0c0a0b;
}

@media (max-width: 900px) {
  .public-body--3d-print-from-photo .public-hero--split .public-split {
    grid-template-columns: 1fr;
  }

  .public-body--3d-print-from-photo .public-split__media {
    width: min(100%, 520px);
  }
}

@media (prefers-color-scheme: dark) {
  .public-body--3d-print-from-photo .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.18), transparent 64%);
  }
}

/* ================================================================== *
 * Tool landing: bento benefits, background swatches, use-case strip,
 * visual process, framed demo, and remove-background decorative motifs
 * ================================================================== */

/* --- Bento benefits ------------------------------------------------ */
.public-grid--bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.public-card--feature .public-card__content h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
}

.public-card--feature .public-card__content p {
  font-size: 1.05rem;
}

@media (min-width: 721px) {
  .public-grid--bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-grid--bento > :nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .public-grid--bento > :nth-child(2) {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .public-grid--bento > :nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .public-grid--bento > :nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  .public-card--feature {
    display: flex;
    align-items: center;
  }
}

/* --- Background swatches (the "pick your background" demo) --------- */
.public-swatches {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

@media (min-width: 721px) {
  .public-card--swatches .public-swatches {
    flex-direction: column;
  }

  .public-card--swatches .public-swatch {
    flex: 0 0 auto;
    aspect-ratio: auto;
    height: 6.5rem;
  }

  .public-card--swatches .public-swatch img {
    height: 100%;
    width: auto;
  }
}

.public-swatch {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0.4rem;
  border: 1px solid var(--public-border);
  border-radius: 0.7rem;
  overflow: hidden;
}

.public-swatch img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.public-swatch--white {
  background: #ffffff;
}

.public-swatch--chroma {
  background: #00c853;
}

/* --- Use-case strip --------------------------------------------------- */
.public-usecases__index {
  margin: -1.25rem 0 2rem;
  color: var(--public-accent);
  font-weight: 800;
  font-size: 0.95rem;
}

.public-usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.public-usecases__item {
  padding: 1.35rem;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface);
  box-shadow: 0 14px 34px var(--public-shadow);
}

.public-usecases__item h3 {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.public-usecases__item p {
  margin: 0;
  color: var(--public-muted);
  font-size: 0.9rem;
}

/* Highlighted stat chip (e.g. credit cost): its own block above the
   title, not just another line of body text. */
.public-usecases__stat {
  display: inline-flex !important;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.85rem !important;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--public-border-hover);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(181, 63, 103, 0.14), rgba(189, 79, 47, 0.1));
}

.public-usecases__stat-value {
  font-family: var(--public-font-heading);
  color: var(--public-accent);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.public-usecases__stat-unit {
  color: var(--public-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .public-usecases {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .public-usecases {
    grid-template-columns: 1fr;
  }
}

/* --- Visual "how it works": connected thumbnails ------------------ */
.public-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.public-process__item {
  position: relative;
  text-align: center;
}

.public-process__thumb {
  position: relative;
  margin-bottom: 1rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface-soft);
  box-shadow: 0 16px 38px var(--public-shadow);
}

.public-process__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-process__item h3 {
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.public-process__item h3::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: var(--public-accent);
  color: #fff;
  font-size: 0.85rem;
  vertical-align: 0.05em;
}

.public-process__item p {
  margin: 0;
  color: var(--public-muted);
  font-size: 0.92rem;
}

.public-process__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28%;
  right: clamp(-1.9rem, -2.4vw, -0.7rem);
  width: 1.35rem;
  height: 1.35rem;
  background: var(--public-accent);
  opacity: 0.65;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.public-process--count-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.5rem);
}

.public-process--count-5 .public-process__item:not(:last-child)::after {
  display: none;
}

.public-process--count-5 .public-process__thumb {
  aspect-ratio: 4 / 3;
}

.public-process--count-5 .public-process__item {
  text-align: left;
}

.public-process--count-5 .public-process__thumb img {
  object-fit: cover;
}

.public-process--count-5 .public-process__item:nth-child(3) .public-process__thumb img {
  object-fit: contain;
  background: #21191d;
}

@media (max-width: 980px) and (min-width: 721px) {
  .public-process--count-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-process--count-5 .public-process__item:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.75rem);
  }
}

@media (max-width: 720px) {
  .public-process {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto;
  }

  .public-process__item:not(:last-child)::after {
    display: none;
  }

  .public-process--count-5 {
    grid-template-columns: 1fr;
  }

  .public-process--count-5 .public-process__item {
    text-align: left;
  }
}

.public-body--how-it-works .public-section--process {
  background: var(--public-surface-soft);
}

.public-body--how-it-works .public-grid--count-7 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-body--how-it-works .public-grid--count-7 > :first-child,
.public-body--how-it-works .public-grid--count-7 > :last-child {
  grid-column: 1 / -1;
}

.public-body--how-it-works .public-section--examples .public-grid {
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
}

@media (max-width: 720px) {
  .public-body--how-it-works .public-grid--count-7,
  .public-body--how-it-works .public-section--examples .public-grid {
    grid-template-columns: 1fr;
  }

  .public-body--how-it-works .public-grid--count-7 > :first-child,
  .public-body--how-it-works .public-grid--count-7 > :last-child {
    grid-column: auto;
  }
}

/* Step 2 reads as "processing": a translucent checker wash over the photo */
.public-body--remove-background .public-process__item:nth-child(2) .public-process__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    conic-gradient(
      rgba(181, 63, 103, 0.2) 25%,
      transparent 0 50%,
      rgba(181, 63, 103, 0.2) 0 75%,
      transparent 0
    );
  background-size: 20px 20px;
  mix-blend-mode: multiply;
}

/* --- Framed demo (Editasteic app window) ------------------------- */
.public-window {
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  box-shadow: 0 30px 70px var(--public-shadow);
  background: var(--public-surface);
}

/* A clean framed-capture bar (brand wordmark only, no fake traffic-light dots). */
.public-window__bar {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--public-border);
  background: var(--public-surface-soft);
}

.public-window__title {
  color: var(--public-accent);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.public-window video {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #0c0a0b;
}

/* --- Examples gallery: show the whole cutout, larger ------------- */
.public-section--examples .public-grid--count-2 {
  max-width: 980px;
}

.public-body--remove-background .public-section--examples .public-card--media .public-media {
  height: clamp(280px, 34vw, 420px);
}

.public-body--remove-background .public-section--examples .public-card--media .public-media img {
  object-fit: contain;
  object-position: center;
  padding: 1.5rem;
}

/* --- remove-background hero: rose glow, checker card, floating tag -- */
.public-body--remove-background .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--remove-background .public-hero--split::before {
  content: "";
  position: absolute;
  top: -13rem;
  right: -15rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.28), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.public-body--remove-background .public-split {
  position: relative;
}

.public-body--remove-background .public-hero--split .public-split__media {
  position: relative;
}

.public-body--remove-background .public-hero--split .public-split__media::before {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 1rem;
  background-color: #ffffff;
  background-image:
    conic-gradient(#e7dbe1 25%, transparent 0 50%, #e7dbe1 0 75%, transparent 0);
  background-size: 20px 20px;
  transform: rotate(-6deg);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.public-body--remove-background .public-hero--split .public-split__media .public-ba {
  position: relative;
  z-index: 1;
}

.public-hero__badge {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--public-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px var(--public-shadow-hover);
  transform: rotate(-3deg);
}

@media (max-width: 900px) {
  .public-hero__badge {
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
  }
}

/* --- Dark theme tweaks for the new blocks ----------------------- */
@media (prefers-color-scheme: dark) {
  .public-swatch--white {
    border-color: rgba(236, 141, 172, 0.35);
  }

  .public-media--tint {
    background-image:
      radial-gradient(circle at 50% 50%, rgba(236, 141, 172, 0.16) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 50% 50%, rgba(236, 141, 172, 0.1) 0 1.4px, transparent 1.9px),
      repeating-linear-gradient(135deg, rgba(236, 141, 172, 0.06) 0 1px, transparent 1px 13px),
      radial-gradient(circle at 85% 14%, rgba(244, 199, 183, 0.16), transparent 45%),
      radial-gradient(circle at 10% 88%, rgba(236, 141, 172, 0.14), transparent 42%),
      linear-gradient(150deg, rgba(236, 141, 172, 0.08), rgba(149, 49, 83, 0.05) 78%) !important;
  }

  .public-body--remove-background .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.22), transparent 62%);
  }

  .public-body--remove-background .public-hero--split .public-split__media::before {
    background-color: #241c20;
    background-image:
      conic-gradient(#3a2f35 25%, transparent 0 50%, #3a2f35 0 75%, transparent 0);
  }

  .public-body--remove-background .public-process__item:nth-child(2) .public-process__thumb::after {
    mix-blend-mode: screen;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-hero__badge,
  .public-body--remove-background .public-hero--split .public-split__media::before {
    transform: none;
  }
}

/* ================================================================== *
 * ZoomComparison: a full image plus a magnified before / after detail
 * ================================================================== */

.public-zoom {
  display: grid;
  gap: 0.85rem;
}

.public-zoom__full {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface);
  box-shadow: 0 22px 55px var(--public-shadow);
}

.public-zoom__full img {
  display: block;
  width: 100%;
  height: auto;
}

/* Marker showing which region the detail panes magnify */
.public-zoom__loupe {
  position: absolute;
  /* default region (centered-ish); pages override per crop */
  left: 34%;
  top: 20%;
  width: 32%;
  height: 32%;
  border: 2px solid #fff;
  border-radius: 0.35rem;
  box-shadow:
    0 0 0 2px var(--public-accent),
    0 0 0 9999px rgba(35, 20, 28, 0.34);
  pointer-events: none;
}

.public-zoom__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.public-zoom__pane {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 0.8rem;
  background: var(--public-surface);
}

.public-zoom__pane img {
  display: block;
  width: 100%;
  height: auto;
}

.public-zoom__pane .public-ba__tag {
  top: 0.4rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.66rem;
}

.public-zoom__pane .public-ba__tag--before {
  left: 0.4rem;
}

.public-zoom__pane .public-ba__tag--after {
  right: 0.4rem;
}

.public-zoom__full .public-ba__tag--after {
  top: 0.6rem;
  right: 0.6rem;
}

/* ---- Image Upscaler: scoped decoration -------------------------- */

/* Loupe aligned to the visor detail crop (x 0.35-0.65, y 0.115-0.415) */
.public-body--image-upscaler .public-zoom__loupe {
  left: 35%;
  top: 11.5%;
  width: 30%;
  height: 30%;
}

.public-body--image-upscaler .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--image-upscaler .public-hero--split::before {
  content: "";
  position: absolute;
  top: -13rem;
  right: -15rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.26), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.public-body--image-upscaler .public-split {
  position: relative;
}

.public-body--image-upscaler .public-hero--split .public-split__media {
  position: relative;
}

/* Step 2 "processing": faint scan lines suggesting rebuilt resolution */
.public-body--image-upscaler .public-process__item:nth-child(2) .public-process__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(181, 63, 103, 0.16) 0 1px,
    transparent 1px 5px
  );
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  .public-body--image-upscaler .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.22), transparent 62%);
  }

  .public-zoom__loupe {
    box-shadow:
      0 0 0 2px var(--public-accent),
      0 0 0 9999px rgba(10, 4, 7, 0.5);
  }

  .public-body--image-upscaler .public-process__item:nth-child(2) .public-process__thumb::after {
    background-image: repeating-linear-gradient(
      0deg,
      rgba(236, 141, 172, 0.16) 0 1px,
      transparent 1px 5px
    );
    mix-blend-mode: screen;
  }
}

@media (max-width: 560px) {
  .public-zoom__details {
    gap: 0.45rem;
  }
}

/* ---- Remove Object: scoped decoration ------------------------- */

/* Loupe aligned to the edited zone on the right of the frame */
.public-body--remove-object-from-photo .public-zoom__loupe {
  left: 57%;
  top: 28%;
  width: 41%;
  height: 46%;
}

.public-body--remove-object-from-photo .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--remove-object-from-photo .public-hero--split::before {
  content: "";
  position: absolute;
  top: -13rem;
  right: -15rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.24), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.public-body--remove-object-from-photo .public-split {
  position: relative;
}

.public-body--remove-object-from-photo .public-hero--split .public-split__media {
  position: relative;
}

/* Step 2 media is a real UI screenshot: keep it fully visible, not cropped */
.public-body--remove-object-from-photo .public-process__item:nth-child(2) .public-process__thumb {
  background: var(--public-surface);
}

.public-body--remove-object-from-photo .public-process__item:nth-child(2) .public-process__thumb img {
  object-fit: contain;
}

@media (prefers-color-scheme: dark) {
  .public-body--remove-object-from-photo .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.2), transparent 62%);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .public-hero__badge {
    transform: translateX(-50%);
  }
}

/* ================================================================== *
 * StyleGallery: one image, several looks
 * ================================================================== */

.public-style-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto 1.25rem;
}

.public-style-gallery--n4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px;
}

.public-style-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 1rem;
  background: var(--public-surface);
  box-shadow: 0 14px 34px var(--public-shadow);
}

.public-style-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.public-style-tile .public-ba__tag {
  top: 0.55rem;
  font-size: 0.68rem;
  padding: 0.22rem 0.55rem;
}

.public-style-tile .public-ba__tag--before {
  left: 0.55rem;
}

.public-style-tile .public-ba__tag--after {
  right: 0.55rem;
}

.public-style-tile--original::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--public-border-hover);
  border-radius: 1rem;
  pointer-events: none;
}

@media (max-width: 900px) {
  .public-style-gallery--n4 {
    grid-template-columns: 1fr 1fr;
    max-width: 640px;
  }
}

@media (max-width: 620px) {
  .public-style-gallery {
    grid-template-columns: 1fr;
    max-width: 340px;
    gap: 0.75rem;
  }
}

/* ---- Restyle Photo: scoped decoration ------------------------- */

.public-body--restyle-photo .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--restyle-photo .public-hero--split::before {
  content: "";
  position: absolute;
  top: -13rem;
  right: -15rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.24), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.public-body--restyle-photo .public-split {
  position: relative;
}

/* Step 2 media is a real UI screenshot: show it whole */
.public-body--restyle-photo .public-process__item:nth-child(2) .public-process__thumb {
  background: var(--public-surface);
}

.public-body--restyle-photo .public-process__item:nth-child(2) .public-process__thumb img {
  object-fit: contain;
}

@media (prefers-color-scheme: dark) {
  .public-body--restyle-photo .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.2), transparent 62%);
  }
}

/* ---- Translate Text in Image: scoped decoration --------------- */

.public-body--translate-text-in-image .public-zoom__loupe {
  left: 5%;
  top: 6%;
  width: 36%;
  height: 25%;
}

.public-body--translate-text-in-image .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--translate-text-in-image .public-hero--split::before {
  content: "";
  position: absolute;
  top: -13rem;
  right: -15rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.24), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.public-body--translate-text-in-image .public-split {
  position: relative;
}

.public-body--translate-text-in-image .public-hero--split .public-split__media {
  position: relative;
}

/* Step 2 media is a real UI screenshot of the language picker: show it whole */
.public-body--translate-text-in-image .public-process__item:nth-child(2) .public-process__thumb {
  background: var(--public-surface);
}

.public-body--translate-text-in-image .public-process__item:nth-child(2) .public-process__thumb img {
  object-fit: contain;
}

@media (prefers-color-scheme: dark) {
  .public-body--translate-text-in-image .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.2), transparent 62%);
  }
}

/* ---- Photo to 3D Model: scoped decoration -------------------- */

.public-body--photo-to-3d-model .public-hero--split {
  position: relative;
  overflow: hidden;
}

.public-body--photo-to-3d-model .public-hero--split::before {
  content: "";
  position: absolute;
  top: -13rem;
  right: -15rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.24), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.public-body--photo-to-3d-model .public-split {
  position: relative;
}

/* The model views are grey meshes on black; give their tiles a dark ground
   so the crops read as one 3D-viewer set. The photo tile keeps the light ground. */
.public-body--photo-to-3d-model .public-style-tile:not(.public-style-tile--original) {
  background: #0c0a0b;
  border-color: rgba(181, 63, 103, 0.3);
}

/* Step 2 media is a real UI screenshot: show it whole */
.public-body--photo-to-3d-model .public-process__item:nth-child(2) .public-process__thumb {
  background: var(--public-surface);
}

.public-body--photo-to-3d-model .public-process__item:nth-child(2) .public-process__thumb img {
  object-fit: contain;
}

@media (prefers-color-scheme: dark) {
  .public-body--photo-to-3d-model .public-hero--split::before {
    background: radial-gradient(circle, rgba(236, 141, 172, 0.2), transparent 62%);
  }
}


/* ================================================================== *
 * Examples page. Additive: no other page uses these classes.
 * Depth, materiality and layout variety on top of the shared design
 * system. Colours are --public-* tokens (light + dark handled by
 * :root). No JavaScript; reveal motion is progressive and gated.
 * ================================================================== */

/* ---- Page ground: a real brand wash, not a flat gradient ---------- */

.public-body--examples .public-hero--split,
.public-body--home .public-hero--split {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(244, 199, 183, 0.55), transparent 22rem),
    radial-gradient(circle at 88% 84%, rgba(181, 63, 103, 0.16), transparent 24rem),
    #fffafb;
}

.public-body--examples .public-hero--split::before,
.public-body--home .public-hero--split::before {
  content: "";
  position: absolute;
  top: -16rem;
  right: -14rem;
  width: 46rem;
  height: 46rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 63, 103, 0.26), transparent 62%);
  filter: blur(34px);
  pointer-events: none;
}

.public-body--examples .public-split,
.public-body--home .public-hero--split .public-split {
  position: relative;
  z-index: 1;
}

.public-body--examples .public-split {
  grid-template-columns: 1fr minmax(320px, 560px);
}

/* Collapse the Examples hero to one column at the same breakpoint the generic
   `.public-split` uses. The rule above outranks the generic `max-width: 900px`
   collapse by specificity, so it has to be restated here. Desktop layout above
   900px is unchanged. */
@media (max-width: 900px) {
  .public-body--examples .public-split {
    grid-template-columns: 1fr;
  }
}

/* ---- Hero gallery: asymmetric bento with real elevation ---------- */

.public-hero-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.9rem;
}

/* faint rotated backing tile, echoing the tool-landing hero treatment */
.public-hero-gallery::after {
  content: "";
  position: absolute;
  right: -1.4rem;
  bottom: -1.4rem;
  width: 46%;
  aspect-ratio: 1;
  border-radius: var(--public-radius-lg);
  background: linear-gradient(135deg, var(--public-accent), transparent 70%);
  opacity: 0.16;
  transform: rotate(-6deg);
  z-index: 0;
  pointer-events: none;
}

.public-hero-gallery__item {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 22px 55px var(--public-shadow);
}

.public-hero-gallery__item:first-child {
  grid-row: span 2;
  aspect-ratio: 4 / 5;
}

.public-hero-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-hero-gallery__item figcaption {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: rgba(50, 35, 43, 0.82);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

@media (max-width: 860px) {
  .public-hero-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .public-hero-gallery__item:first-child {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 520px) {
  .public-hero-gallery {
    grid-template-columns: 1fr;
  }
  .public-hero-gallery__item,
  .public-hero-gallery__item:first-child {
    grid-column: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Load-in for the two secondary tiles only. The first tile is the LCP
   candidate and is never hidden. */
@media (prefers-reduced-motion: no-preference) {
  .public-hero-gallery__item:nth-child(2),
  .public-hero-gallery__item:nth-child(3) {
    animation: public-rise-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .public-hero-gallery__item:nth-child(3) {
    animation-delay: 0.09s;
  }
}

@keyframes public-rise-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Jump nav: a segmented pill bar ----------------------------- */

.public-examples-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.75rem 0;
  background: rgba(255, 250, 251, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--public-border);
}

.public-examples-nav ul {
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 0.3rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 999px;
  box-shadow: 0 10px 26px -14px var(--public-shadow);
}

.public-examples-nav a {
  display: block;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--public-muted);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.public-examples-nav a:hover,
.public-examples-nav a:focus-visible {
  background: var(--public-surface-soft);
  color: var(--public-accent);
}

@media (prefers-reduced-motion: reduce) {
  .public-examples-nav {
    position: static;
  }
}

/* ---- Capability groups ---------------------------------------- */

.public-examples-group {
  position: relative;
  scroll-margin-top: 4.5rem;
}

.public-examples-group--tinted {
  background: var(--public-surface-soft);
}

.public-examples-group > .public-container > h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: -0.01em;
}

.public-examples-group > .public-container > h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--public-accent), var(--public-accent-hover));
}

.public-examples {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* ---- Example cards: one elevated card per result, copy then media -- */

.public-example {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 22px 50px var(--public-shadow);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* accent line that wipes across the top edge on hover, matching .public-card */
.public-example::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--public-accent), var(--public-accent-hover));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.public-example:hover,
.public-example:focus-within {
  transform: translateY(-4px);
  border-color: var(--public-border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 34px 70px var(--public-shadow-hover),
    0 0 34px -12px var(--public-glow);
}

.public-example:hover::after,
.public-example:focus-within::after {
  transform: scaleX(1);
}

.public-example__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.5rem, 3.4vw, 2.5rem) 0;
}

.public-example__body h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--public-text);
}

.public-example__body p {
  margin: 0;
  max-width: 68ch;
  color: var(--public-muted);
}

.public-example__link {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--public-accent);
}

.public-example__link::after {
  content: "\2192";
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-example__link:hover::after,
.public-example__link:focus-visible::after {
  transform: translateX(4px);
}

/* The result itself: a centred stage under the copy. Tight to the copy it
   illustrates so the result — not the caption — carries the card. */
.public-example__media {
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.6rem, 3.6vw, 2.5rem);
}

.public-example__media > .public-ba,
.public-example__media > .public-io {
  max-width: 520px;
  margin-inline: auto;
}

.public-example__media > .public-zoom {
  max-width: 620px;
  margin-inline: auto;
}

.public-example__media > .public-style-gallery {
  max-width: 720px;
  margin-inline: auto;
}

.public-example__media > .public-model-views {
  max-width: 760px;
  margin-inline: auto;
}

.public-example__media .public-ba__caption {
  margin: 1rem auto 0;
  max-width: 60ch;
}

/* the zoom loupe is calibrated per crop on the tool pages; not here */
.public-example__media .public-zoom__loupe {
  display: none;
}

/* Progressive scroll reveal: no JavaScript, only where the browser
   supports scroll-driven animations, and never under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .public-example {
      animation: public-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 20%;
    }
  }
}

/* ---- Group aside: an intentional callout ---------------------- */

.public-examples-group__aside {
  position: relative;
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: 1.35rem 1.6rem 1.35rem 4.2rem;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-surface-soft);
  box-shadow: 0 16px 38px var(--public-shadow);
  color: var(--public-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* A small info glyph in its own circle, not a bare left rule, so the
   callout reads as a designed block that fills the row instead of a
   narrow aside stranded on the left. */
.public-examples-group__aside::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.4rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(181, 63, 103, 0.16), rgba(189, 79, 47, 0.12));
}

.public-examples-group__aside::after {
  content: "";
  position: absolute;
  left: 2.13rem;
  top: 1.63rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--public-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='8' r='.6' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='8' r='.6' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 560px) {
  .public-examples-group__aside {
    padding-left: 1.5rem;
    padding-top: 3.2rem;
  }

  .public-examples-group__aside::before,
  .public-examples-group__aside::after {
    left: 1.5rem;
    top: 1.35rem;
  }

  .public-examples-group__aside::after {
    left: 1.73rem;
    top: 1.58rem;
  }
}

.public-examples-group__aside a {
  font-weight: 700;
  color: var(--public-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---- input -> output primitive ------------------------------------ */

.public-io {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.public-io__pane {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-md);
  background: var(--public-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 18px 40px var(--public-shadow);
}

.public-io__pane img {
  display: block;
  width: 100%;
  height: auto;
}

.public-io__pane .public-ba__tag {
  top: 0.5rem;
  font-size: 0.68rem;
  padding: 0.22rem 0.55rem;
}

.public-io__arrow {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--public-accent);
}

.public-io .public-ba__caption {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .public-io {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .public-io__arrow {
    transform: rotate(90deg);
  }
}

/* ---- model-views primitive ---------------------------------------- */

.public-model-views {
  display: grid;
  gap: 1.1rem;
}

.public-model-views__input {
  margin: 0;
  max-width: 260px;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-md);
  background: var(--public-surface);
  box-shadow: 0 14px 34px var(--public-shadow);
}

.public-model-views__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.public-model-views__view {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-md);
  /* grey meshes render on near-black in the viewer; match that ground */
  background: #0c0a0b;
  box-shadow: 0 14px 34px var(--public-shadow);
}

.public-model-views__input img,
.public-model-views__view img {
  display: block;
  width: 100%;
  height: auto;
}

.public-model-views__view .public-ba__tag {
  top: 0.4rem;
  right: 0.4rem;
  font-size: 0.64rem;
  padding: 0.18rem 0.5rem;
}

@media (max-width: 560px) {
  .public-model-views__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Dark mode parity ------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .public-body--examples .public-hero--split,
  .public-body--home .public-hero--split {
    background:
      radial-gradient(circle at 12% 12%, rgba(236, 141, 172, 0.16), transparent 22rem),
      radial-gradient(circle at 88% 84%, rgba(236, 141, 172, 0.1), transparent 24rem),
      #21191d;
  }
  .public-examples-nav {
    background: rgba(33, 25, 29, 0.9);
  }
  .public-hero-gallery__item,
  .public-example {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 22px 55px var(--public-shadow);
  }
  .public-example:hover,
  .public-example:focus-within {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 34px 70px var(--public-shadow-hover),
      0 0 34px -12px var(--public-glow);
  }
}

/* ================================================================== *
 * Before/after comparator used as a card preview.
 * Used by the Home "Tools" section and the tool landings' "Related
 * tools" blocks. The frame rules are unscoped (keyed on .public-ba--card
 * / .public-card--compare); the Home bento grid stays Home-scoped.
 * ================================================================== */

@media (min-width: 721px) {
  .public-body--home .public-section--examples .public-grid--count-7 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .public-body--home .public-section--examples .public-card--feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    align-items: stretch;
  }

  .public-body--home .public-section--examples .public-card--feature .public-media {
    height: 100%;
    min-height: 320px;
  }

  .public-body--home .public-section--examples .public-card--feature .public-card__content {
    align-self: center;
    padding: clamp(1.6rem, 3vw, 2.75rem);
  }

  /* "Related tools" cards: a tidy three-up row with previews. */
  .public-related--preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The comparator, sized to a fixed card frame regardless of source ratio. */
.public-card--compare .public-media {
  height: 208px;
  padding: 0;
  background-color: var(--public-surface-soft);
}

.public-ba--card {
  width: 100%;
  height: 100%;
}

.public-ba--card .public-ba__viewport {
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.public-ba--card .public-ba__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* JS-off: the two frames sit side by side, still filling the card frame. */
.public-ba--card:not(.is-interactive) .public-ba__viewport {
  display: flex;
  gap: 2px;
}

.public-ba--card:not(.is-interactive) .public-ba__pane {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
}

.public-ba--card .public-ba__tag {
  top: 0.5rem;
  font-size: 0.66rem;
  padding: 0.2rem 0.5rem;
}

/* Related-tools cards reuse the media-card content padding. */
.public-related--preview .public-card--compare .public-card__content {
  padding: 1.5rem;
}

/* ================================================================== *
 * Home personality pass (PR2 · Task 5, Part B).
 * Rosa/blanca depth, immersive video hero, section rhythm and pricing
 * presence. Home-scoped (`.public-body--home`) wherever a selector could
 * reach another public page. Colours resolve from `--public-*` tokens
 * (light + dark parity) except the hero wash gradient and on-accent `#fff`.
 * ================================================================== */

/* ---- A4: handoff CTA wrapper (kept; given real paragraph spacing) - */
.public-body--home .public-section__cta {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

/* ---- A3: folded showcase leads into "Capacidades" ---------------- */
.public-body--home .public-section--showcase {
  padding-bottom: 0;
}

.public-body--home .public-section--showcase .public-section__lead {
  margin-inline: auto;
  text-align: center;
}

.public-body--home .public-section--showcase .public-split__media {
  max-width: 760px;
  margin-inline: auto;
}

/* Commanding on desktop (stronger frame, clearly bigger than pre-b9667d3) but
   held below one fold on a short laptop. Below the hero in hierarchy: no logo,
   no immersive wash. */
.public-body--home .public-section--showcase .public-ba--wide.is-interactive .public-ba__viewport {
  max-width: 680px;
  max-height: 70vh;
  border-radius: var(--public-radius-lg);
  box-shadow: 0 34px 80px var(--public-shadow-lg);
}

.public-body--home .public-section--examples {
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

/* ---- Step 2: immersive video hero (contained, no full-bleed) ---- */
.public-hero--immersive {
  position: relative;
  overflow: hidden;
  padding: clamp(3.25rem, 7vw, 5.5rem) 0;
  text-align: left;
  background:
    radial-gradient(circle at 10% 16%, rgba(244, 199, 183, 0.62), transparent 24rem),
    radial-gradient(circle at 94% 88%, rgba(181, 63, 103, 0.18), transparent 26rem),
    var(--public-surface-soft);
}

/* A touch wider than the site container for presence, still fully contained. */
.public-hero--immersive > .public-container {
  width: min(100% - 2rem, 1280px);
}

.public-hero--immersive .public-split {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.public-hero--immersive .public-split__text {
  max-width: 34rem;
}

.public-hero--immersive h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

.public-hero--immersive .public-hero__lead {
  max-width: 46ch;
  margin-inline: 0;
  color: var(--public-muted);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.public-hero--immersive .public-hero__cta {
  margin-inline: 0;
  text-align: left;
}

/* The visual: a contained 16:9 box that fills its (larger) grid column. Its
   aspect-ratio is reserved from first paint (also set inline), so the
   base-image -> video -> logo layering never shifts layout. */
.public-hero__video {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1280 / 720;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-surface-soft);
  box-shadow: 0 34px 80px var(--public-shadow-lg);
}

/* z1 base + z2 clip: identical 16:9 cover layers. */
.public-hero__video-final,
.public-hero__video-clip,
.public-hero__video-clip > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-hero__video-final {
  z-index: 1;
}

.public-hero__video-clip {
  z-index: 2;
  opacity: 1;
  transition: opacity 0.55s ease;
}

/* When the passive sequence finalizes (`.is-final`) or under the reduced-motion
   static state, the clip fades out so the identical z1 base frame shows
   through. Opacity only: no layout shift. */
.public-hero__video.is-final .public-hero__video-clip,
.public-hero__video.is-static .public-hero__video-clip {
  opacity: 0;
}

.public-hero__video.is-static .public-hero__video-clip {
  transition: none;
}

/* z3: decorative brand wordmark, centred, box reserved from first paint. It
   fades in during the clip's settle (`.is-marking`, from ~3.3s) and stays over
   the final frame. */
.public-hero__video-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(220px, 42%, 460px);
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.public-hero__video.is-marking .public-hero__video-logo,
.public-hero__video.is-final .public-hero__video-logo,
.public-hero__video.is-static .public-hero__video-logo {
  opacity: 1;
}

.public-hero__video.is-static .public-hero__video-logo {
  transition: none;
}

@media (max-width: 920px) {
  .public-hero--immersive {
    text-align: center;
  }

  .public-hero--immersive .public-split {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .public-hero--immersive .public-split__text {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
  }

  .public-hero--immersive .public-hero__lead {
    margin-inline: auto;
  }

  .public-hero--immersive .public-hero__cta {
    text-align: center;
  }

  /* Stacked: the visual takes the full column, keeps its 16:9 box, no bleed. */
  .public-hero--immersive .public-split__media {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .public-hero__video-logo {
    width: clamp(200px, 62%, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-hero__video-clip,
  .public-hero__video-logo {
    transition: none;
  }
}

/* ---- Step 3: "Capacidades" — denser grid, cards with more presence -- */
@media (min-width: 721px) {
  .public-body--home .public-section--examples .public-grid--count-7 {
    gap: 1.25rem;
  }
}

.public-body--home .public-section--examples .public-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--public-radius-md);
}

/* Pin the divider + link to the card's bottom edge instead of right after
   the description, so it lands at the same height across a row regardless
   of how long each card's description text runs. */
.public-body--home .public-section--examples .public-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.public-body--home .public-section--examples .public-card__link {
  width: 100%;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--public-border);
}

.public-body--home .public-section--examples .public-card__link::after {
  content: "\00a0\2192";
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-body--home .public-section--examples .public-card:hover .public-card__link::after,
.public-body--home .public-section--examples .public-card:focus-within .public-card__link::after {
  transform: translateX(3px);
}

/* ---- Step 3: "Resultados" — editorial rows, not a second gallery -- */
.public-body--home .public-examples-group .public-examples {
  max-width: 960px;
  margin-inline: auto;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.public-body--home .public-examples-group .public-example {
  border-radius: var(--public-radius-lg);
}

.public-body--home .public-examples-group .public-example__body h3 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
}

/* ---- Step 4: tinted rhythm (no two tinted sections in a row) ----- *
 * hero · showcase(plain) · Capacidades(plain) · Resultados(TINT) ·
 * Foto->3D(plain) · Impresion(TINT, forced) · Pricing(plain) ·
 * Como funciona(plain) · Casos de uso(TINT, forced) · FAQ(plain) ·
 * relacionadas(plain) · CTA
 */
.public-body--home .public-examples-group {
  background: var(--public-surface-soft);
}

/* Plain (untinted) + a tighter lead-in: the tall portrait Resultados rows plus
   a full section gap stacked into a dead band before "De una foto a 3D" at
   >=1280. Trim the top without collapsing it. */
.public-body--home .public-section[aria-labelledby="demo"] {
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  background: transparent;
}

/* ---- Step 5: pricing depth (hover affordance kept + deepened) --- */
.public-body--home .public-price-card {
  box-shadow: 0 22px 52px var(--public-shadow);
}

.public-body--home .public-price-card:hover,
.public-body--home .public-price-card:focus-within {
  box-shadow:
    0 34px 72px var(--public-shadow-hover),
    0 0 34px -12px var(--public-glow);
}

.public-body--home .public-price-card--highlighted,
.public-body--home .public-price-card--highlighted:hover,
.public-body--home .public-price-card--highlighted:focus-within {
  box-shadow:
    0 32px 70px var(--public-shadow-lg),
    0 0 40px -10px var(--public-glow);
}

.public-body--home .public-badge {
  letter-spacing: 0.03em;
  box-shadow: 0 6px 16px -6px var(--public-glow);
}

@media (max-width: 720px) {
  .public-body--home .public-pricing__grid,
  .public-body--home .public-price-card:first-child {
    grid-template-columns: 1fr;
  }
}

/* ---- Step 6: Welcome Pack — full-width and grid-aligned with the paid
 * row below it (like /precios), marked as welcome/free with an accent
 * border + soft fill instead of the neutral gradient. A narrower,
 * left-hung card here used to leave a large dangling empty gap to its
 * right, out of alignment with the 4-up grid underneath it. No number,
 * badge or claim is touched. */
.public-body--home .public-price-card:first-child {
  border: 2px solid var(--public-accent);
  background: var(--public-surface-soft);
}

/* ---- Step 7: "Cómo funciona" — a connected numbered-step rail ----- *
 * Separates Pricing (plain) from a graphic, structurally distinct steps
 * block, so the two consecutive plain sections no longer read alike. No
 * second tint: Casos de uso below stays the tinted one.
 */
.public-body--home .public-section[aria-labelledby="how-it-works"] {
  border-top: 1px solid var(--public-border);
}

/* ---- Dark-mode parity for the home pass ------------------------- */
@media (prefers-color-scheme: dark) {
  /* Keep the "explore the result" stage reading as a distinct dark panel even
     when the whole page is already dark: push it below the page surface and
     make its edge visible. */
  .public-result-showcase {
    background: #0d090b;
    border-color: rgba(236, 141, 172, 0.32);
  }

  .public-hero--immersive {
    background:
      radial-gradient(circle at 10% 16%, rgba(236, 141, 172, 0.16), transparent 24rem),
      radial-gradient(circle at 94% 88%, rgba(236, 141, 172, 0.1), transparent 26rem),
      var(--public-surface-soft);
  }
}

/* ==== `/` — selector internacional estático (x-default) ============ *
 * Superficie neutral: marca + elección de idioma + acceso secundario a
 * la app. Sin contenido comercial, sin glassmorphism, sin animaciones.
 * Reutiliza el sistema de tokens `--public-*` (paridad claro/oscuro).
 */
.public-body--root {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--public-surface-soft);
  padding: 2rem 1.25rem;
}

.public-root-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 26rem;
  width: 100%;
  text-align: center;
}

.public-body--root .public-brand {
  font-size: 1.5rem;
}

.public-root-selector__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--public-text);
}

.public-root-selector__title span {
  color: var(--public-muted);
}

.public-root-selector__langs {
  display: flex;
  gap: 0.9rem;
  width: 100%;
}

.public-root-selector__langs a {
  flex: 1;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-md);
  color: var(--public-text);
  font-weight: 650;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.public-root-selector__langs a:hover,
.public-root-selector__langs a:focus-visible {
  border-color: var(--public-accent);
  color: var(--public-accent);
}

.public-root-selector__langs a:focus-visible {
  outline: 3px solid var(--public-border-hover);
  outline-offset: 3px;
}

.public-root-selector__app {
  margin: 0;
  font-size: 0.9rem;
}

.public-root-selector__app a {
  color: var(--public-muted);
}

/* Autodetección en cliente: por defecto solo se ve "Redirecting…". El selector
 * reaparece sin flash como fallback no-JS (<noscript>) o si la detección falla
 * (html.no-auto lo pone el catch del script inline). */
.public-root-redirect {
  margin: 0;
  font-size: 0.9rem;
  color: var(--public-muted);
}

html.no-auto .public-root-selector__langs {
  display: flex !important;
}

html.no-auto .public-root-selector__app,
html.no-auto .public-root-selector__title {
  display: block !important;
}

html.no-auto .public-root-redirect {
  display: none;
}

@media (max-width: 480px) {
  .public-root-selector__langs {
    flex-direction: column;
  }
}

/* ================================================================== *
 * Pre-release visual refresh — shared foundations
 * (added for the Image -> 3D pilot; see docs/PUBLIC_VISUAL_REFRESH_AUDIT.md)
 * ================================================================== */

/* Wider container for the dark result showcase and the stacked hero. */
.public-container--wide {
  width: min(100% - 2rem, var(--public-content-width-wide));
}

/* ---- Header actions (Sign in / Start free) ----------------------- */
.public-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.public-header__signin {
  color: var(--public-text);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.public-header__signin:hover {
  color: var(--public-accent);
}

.public-button--sm {
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Below 900px the header row gets crowded once the primary nav is still
   inline; keep only the "Start free" button and drop the text sign-in link. */
@media (max-width: 900px) {
  .public-header__signin {
    display: none;
  }
}

@media (max-width: 720px) {
  .public-header__actions {
    gap: 0.5rem;
  }
}

/* ---- Hero benefit row (below the primary CTA) ------------------- */
.public-hero__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.public-hero__benefits li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--public-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.public-hero__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--public-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 900px) {
  .public-hero--split .public-hero__benefits {
    justify-content: center;
  }
}

/* ---- Layered / tilted hero gallery (layout: 'stack') ----------- */
/* Give the stacked visual more of the split so the panels can overlap. */
.public-hero--gallery-stack .public-split {
  grid-template-columns: 1fr minmax(320px, 520px);
}

.public-hero-gallery--stack {
  display: block;
  position: relative;
  /* reserved box -> the absolutely-positioned panels cannot shift layout;
     small horizontal inset so the tilted corners never reach the edge */
  aspect-ratio: 1 / 1;
  overflow: visible;
  padding-inline: 3%;
}

.public-hero-gallery--stack::after {
  content: none;
}

.public-hero-gallery--stack .public-hero-gallery__item {
  position: absolute;
  width: 64%;
  aspect-ratio: 1 / 1;
  /* the shared row-gallery rise-in animates `transform` and would cancel the
     tilt below; the stack keeps a static composition instead */
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 28px 60px var(--public-shadow-hover);
}

.public-hero-gallery--stack .public-hero-gallery__item--1 {
  top: 0;
  left: 3%;
  z-index: 1;
  transform: rotate(-3deg);
}

.public-hero-gallery--stack .public-hero-gallery__item--2 {
  right: 3%;
  top: 28%;
  z-index: 2;
  transform: rotate(3deg);
}

.public-hero-gallery--stack .public-hero-gallery__item--3 {
  left: 18%;
  top: 52%;
  z-index: 3;
  transform: rotate(-2deg);
}

.public-hero-gallery__chips {
  position: absolute;
  right: 2%;
  bottom: 1%;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.public-hero-gallery__chip {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--public-border-hover);
  background: var(--public-surface);
  color: var(--public-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px var(--public-shadow);
}

/* Flattened / reflowed composition — a plain grid, no tilt, no overlap. */
@media (max-width: 900px) {
  .public-hero--gallery-stack .public-split {
    grid-template-columns: 1fr;
  }

  .public-hero--gallery-stack .public-split__media {
    width: min(100%, 480px);
  }

  .public-hero-gallery--stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    aspect-ratio: auto;
    padding-inline: 0;
    overflow: visible;
  }

  .public-hero-gallery--stack .public-hero-gallery__item,
  .public-hero-gallery--stack .public-hero-gallery__item:first-child,
  .public-hero-gallery--stack .public-hero-gallery__item--1,
  .public-hero-gallery--stack .public-hero-gallery__item--2,
  .public-hero-gallery--stack .public-hero-gallery__item--3 {
    position: static;
    width: auto;
    transform: none;
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .public-hero-gallery__chips {
    position: static;
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 0.1rem;
  }
}

@media (max-width: 520px) {
  .public-hero-gallery--stack {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-hero-gallery--stack .public-hero-gallery__item--1,
  .public-hero-gallery--stack .public-hero-gallery__item--2,
  .public-hero-gallery--stack .public-hero-gallery__item--3 {
    transform: none;
  }
}

/* ---- Editorial "how it works" (processVariant: 'editorial') ----- */
.public-process--editorial {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
}

/* the shared numbered-circle and connector arrow belong to the compact
   variant only */
.public-process--editorial .public-process__item h3::before,
.public-process--editorial .public-process__item::after {
  content: none;
}

.public-process--editorial::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 0;
  border-left: 2px dashed var(--public-border-hover);
  transform: translateX(-50%);
  z-index: 0;
}

.public-process--editorial .public-process__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}

.public-process--editorial .public-process__item:nth-child(even) .public-process__copy {
  order: 2;
}

.public-process--editorial .public-process__copy {
  min-width: 0;
}

.public-process--editorial .public-process__num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--public-font-heading);
  color: var(--public-accent);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.9;
}

.public-process--editorial .public-process__item h3 {
  font-size: 1.25rem;
}

.public-process--editorial .public-process__item p {
  margin: 0;
  color: var(--public-muted);
  font-size: 0.95rem;
}

/* The frame hugs the real image (no fixed box) so portrait UI screenshots
   are not letterboxed inside a wide 4/3 card. Height-capped so a tall panel
   still sits within the alternating row. */
.public-process--editorial .public-process__media {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-surface-soft);
  box-shadow: 0 22px 55px var(--public-shadow);
}

.public-process--editorial .public-process__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 24rem;
}

/* Media-less steps: a single-column numbered list on a continuous left rule. */
.public-process--editorial-flat {
  max-width: 44rem;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding-left: clamp(1.5rem, 4vw, 2.25rem);
  border-left: 2px solid var(--public-border-hover);
}

.public-process--editorial-flat::before {
  content: none;
}

.public-process--editorial-flat .public-process__item {
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.public-process--editorial-flat .public-process__item:nth-child(even) .public-process__copy {
  order: 0;
}

.public-process--editorial-flat .public-process__num {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

@media (max-width: 900px) {
  .public-process--editorial::before {
    content: none;
  }

  .public-process--editorial .public-process__item {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    justify-items: start;
  }

  .public-process--editorial .public-process__item:nth-child(even) .public-process__copy {
    order: 0;
  }

  .public-process--editorial .public-process__media {
    max-width: min(100%, 460px);
    margin-inline: 0;
  }

  .public-process--editorial .public-process__media img {
    max-height: 20rem;
  }
}

/* ---- Trust / capability strip --------------------------------- */
.public-trust {
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
}

.public-trust__lead {
  margin: 0 0 1.25rem;
  color: var(--public-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.public-trust__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--public-text);
  font-size: 0.92rem;
  font-weight: 650;
}

.public-trust__icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--public-accent);
}

@media (max-width: 620px) {
  .public-trust__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
  }

  .public-trust__item {
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  .public-trust__items {
    grid-template-columns: 1fr;
  }
}

/* ---- Dark result showcase (static; reserves the STL-preview stage) --- */
.public-result-showcase {
  color: var(--public-ink-text);
  background: var(--public-ink);
  border-block: 1px solid var(--public-ink-border);
}

.public-result-showcase h2 {
  color: var(--public-ink-text);
}

.public-result-showcase .public-section__lead {
  max-width: 60ch;
  color: var(--public-ink-muted);
}

.public-eyebrow--on-dark {
  color: var(--public-ink-accent) !important;
}

.public-result-showcase__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: var(--public-block-gap);
}

/* No feature list -> the stage takes the full width. */
.public-result-showcase__body--wide {
  grid-template-columns: 1fr;
}

.public-result-showcase__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--public-ink-border);
  border-radius: var(--public-radius-lg);
  background: #0c0a0b;
}

.public-result-showcase__stage img,
.public-result-showcase__stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-result-showcase__features {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-result-showcase__features li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--public-ink-text);
  font-weight: 600;
}

.public-result-showcase__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--public-ink-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 900px) {
  .public-result-showcase__body {
    grid-template-columns: 1fr;
  }

  .public-result-showcase__stage {
    aspect-ratio: auto;
    height: clamp(320px, 60vh, 420px);
  }
}

@media (max-width: 480px) {
  .public-result-showcase__stage {
    height: clamp(280px, 56vh, 360px);
  }
}

/* ---- Related pages: lighter treatment for plain (no-preview) lists --- */
.public-related:not(.public-related--preview) article {
  box-shadow: 0 10px 26px var(--public-shadow);
}

.public-related:not(.public-related--preview) article a {
  font-weight: 700;
}

/* ---- Benefits as a divided editorial list (benefitsVariant: 'rows') ---- *
 * Same items as the cards, no card chrome: hairline rules, roomy rows. Keeps
 * a page from being another 3-up card grid. */
.public-benefit-rows {
  border-top: 1px solid var(--public-border);
  counter-reset: benefit-row;
}

.public-benefit-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: 0.4rem clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.25rem, 3vw, 2rem) 3.5rem;
  border-bottom: 1px solid var(--public-border);
}

/* A numbered brand-gradient chip per row: color and rhythm on a section
   that would otherwise be plain hairline-divided text. */
.public-benefit-row::before {
  counter-increment: benefit-row;
  content: counter(benefit-row, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(1.25rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--public-accent), var(--public-cta-to));
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -6px var(--public-shadow-hover);
}

.public-benefit-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.public-benefit-row h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}

.public-benefit-row p {
  margin: 0;
  color: var(--public-muted);
}

.public-benefit-row .public-card__link {
  grid-column: 2;
  margin-top: 0.35rem;
}

@media (max-width: 720px) {
  .public-benefit-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-left: 2.9rem;
  }

  .public-benefit-row::before {
    width: 2rem;
    height: 2rem;
    font-size: 0.72rem;
  }

  .public-benefit-row .public-card__link {
    grid-column: 1;
  }
}

/* ================================================================== *
 * Modernization pass: bento background diversity, pricing ribbon,
 * timeline nodes. Additive only — no structural/copy changes.
 * ================================================================== */

/* --- Bento benefits: at least two cells carry real background variation,
   not four identical white cards (avoids the flat "AI bento" look). --- */
@media (min-width: 721px) {
  .public-grid--bento > .public-card--feature:nth-child(2) {
    background:
      radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.6), transparent 42%),
      linear-gradient(155deg, var(--public-surface-soft), rgba(181, 63, 103, 0.14) 120%);
    border-color: var(--public-border-hover);
  }

  .public-grid--bento > :nth-child(4) {
    background: linear-gradient(155deg, var(--public-surface-soft), var(--public-surface));
  }
}

@media (prefers-color-scheme: dark) {
  .public-grid--bento > .public-card--feature:nth-child(2) {
    background:
      radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 42%),
      linear-gradient(155deg, var(--public-surface-soft), rgba(236, 141, 172, 0.18) 120%);
  }
}

/* --- Pricing: the recommended plan carries a corner ribbon and a resting
   ambient glow, not just a header pill and a hover-only effect. --- */
.public-price-card--highlighted {
  overflow: hidden;
  box-shadow:
    0 24px 58px var(--public-shadow-hover),
    0 0 46px -18px var(--public-glow);
}

.public-price-card--highlighted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% -10%, var(--public-glow), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}

.public-price-card--highlighted .public-price-card__header .public-badge {
  position: relative;
  padding-left: 1.5rem;
}

.public-price-card--highlighted .public-price-card__header .public-badge::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.public-price-card--highlighted:hover,
.public-price-card--highlighted:focus-within {
  box-shadow:
    0 36px 74px var(--public-shadow-hover),
    0 0 56px -10px var(--public-glow);
}

/* --- Timeline: small nodes along the dashed connector, one per step,
   so the line reads as an engineered path rather than a plain rule. --- */
@media (min-width: 901px) {
  .public-process--editorial:not(.public-process--editorial-flat) .public-process__item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.6rem;
    z-index: 2;
    width: 0.6rem;
    height: 0.6rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--public-accent);
    box-shadow: 0 0 0 4px var(--public-surface);
  }
}

/* ================================================================== *
 * Creative-energy pass: the palette existed but was applied too timidly
 * for a creative-AI product (faint washes, flat single-tone buttons,
 * hairline icons). This raises color presence and depth on the most
 * repeated elements — buttons, section headings, icons, card elevation —
 * reusing only the two brand tones already defined (accent + cta-to).
 * No new hues, no structural/copy changes.
 * ================================================================== */

/* --- Primary buttons: brand gradient + real glow, not a flat fill. --- */
.public-button:not(.public-button--secondary) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--public-accent) 0%, var(--public-cta-to) 130%);
  box-shadow:
    0 14px 30px -8px var(--public-shadow-hover),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.public-button:not(.public-button--secondary):hover {
  background: linear-gradient(120deg, var(--public-accent) 0%, var(--public-cta-to) 130%);
  filter: brightness(1.06) saturate(1.1);
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px -10px var(--public-shadow-hover),
    0 0 28px -6px var(--public-glow);
}

/* the conversion band's white button keeps solid white (contrast-checked
   against the warm gradient background), not the new brand-gradient fill */
.public-cta a:not(.public-button--secondary) {
  background: #fff !important;
  color: var(--public-cta-to) !important;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .public-button:not(.public-button--secondary):hover {
    transform: none;
  }
}

/* --- Section headings: a short brand-gradient mark under every h2, so
   color recurs on every scroll stop instead of only in a few sections. --- */
.public-section > .public-container > h2,
.public-section > .public-container > .public-pricing__heading > h2 {
  position: relative;
  padding-bottom: 0.6rem;
}

.public-section > .public-container > h2::after,
.public-section > .public-container > .public-pricing__heading > h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 4px;
  margin-top: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--public-accent), var(--public-cta-to));
}

/* the CTA band centers its copy; center the mark there too. Other
   `.public-container--text` sections (FAQ, demo) keep left-aligned text,
   so their mark stays left too. */
.public-cta h2::after {
  margin-inline: auto;
}

.public-cta h2::after {
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.6));
}

.public-result-showcase h2::after {
  background: linear-gradient(90deg, var(--public-ink-accent), var(--public-cta-to));
}

/* the examples-group heading already carries its own accent rule; don't
   double it up */
.public-examples-group > .public-container > h2::after {
  margin-top: 0.85rem;
}

/* --- Trust strip: filled color chips instead of hairline icons. --- */
.public-trust__item {
  gap: 0.7rem;
}

.public-trust__icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(181, 63, 103, 0.16), rgba(189, 79, 47, 0.12));
  color: var(--public-accent);
  box-shadow: inset 0 0 0 1px var(--public-border);
}

@media (prefers-color-scheme: dark) {
  .public-trust__icon {
    background: linear-gradient(145deg, rgba(236, 141, 172, 0.2), rgba(236, 141, 172, 0.1));
  }
}

/* --- Cards: color at rest, not only on hover, plus a touch more lift. --- */
.public-card,
.public-related article,
.public-usecases__item {
  border-radius: 1.15rem;
  box-shadow:
    0 18px 45px var(--public-shadow),
    0 0 0 1px var(--public-border) inset;
}

.public-card::after,
.public-related article::after,
.public-usecases__item::after {
  transform: scaleX(0.14);
  opacity: 0.55;
}

.public-card:hover::after,
.public-related article:hover::after,
.public-usecases__item:hover::after,
.public-card:focus-within::after,
.public-related article:focus-within::after,
.public-usecases__item:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}

.public-body--remove-background .public-card::before,
.public-body--image-upscaler .public-card::before,
.public-body--remove-object-from-photo .public-card::before,
.public-body--restyle-photo .public-card::before,
.public-body--translate-text-in-image .public-card::before,
.public-body--photo-to-3d-model .public-card::before,
.public-body--3d-print-from-photo .public-card::before {
  opacity: 0.45;
}

/* --- Dark result showcase: a warm glow bleeding from the stage edges,
   echoing the brand gradient instead of a plain flat-black panel. --- */
.public-result-showcase__stage {
  box-shadow:
    0 0 0 1px var(--public-ink-border),
    0 40px 90px -20px rgba(236, 141, 172, 0.35),
    0 0 120px -40px rgba(189, 79, 47, 0.45);
}

.public-result-showcase {
  position: relative;
  overflow: hidden;
}

.public-result-showcase::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(236, 141, 172, 0.16), transparent 70%);
  pointer-events: none;
}

/* --- Hero: a slightly bolder, warmer atmosphere behind every tool page
   (per-page overrides above still layer their own tint on top). --- */
.public-hero--split {
  background:
    radial-gradient(circle at 12% 15%, rgba(244, 199, 183, 0.55), transparent 30rem),
    radial-gradient(circle at 92% 78%, rgba(181, 63, 103, 0.16), transparent 28rem);
}

@media (prefers-color-scheme: dark) {
  .public-hero--split {
    background:
      radial-gradient(circle at 12% 15%, rgba(236, 141, 172, 0.14), transparent 30rem),
      radial-gradient(circle at 92% 78%, rgba(189, 79, 47, 0.14), transparent 28rem);
  }
}

/* --- Pricing: a thin brand-gradient edge on every card, not only the
   highlighted one, so the row reads as one colorful family. --- */
.public-price-card {
  position: relative;
}

.public-price-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--public-radius-lg) var(--public-radius-lg) 0 0;
  background: linear-gradient(90deg, var(--public-accent), var(--public-cta-to));
  opacity: 0.55;
}

.public-price-card--highlighted::after {
  opacity: 1;
}

/* --- "How it works" without per-step media (home, how-it-works page):
   was a plain ghost-numbered list flush against the left edge, with a lot
   of dead space to its right and no visible connector — out of place next
   to the rest of the now-colorful page. Replaced with a compact numbered
   stepper (brand-gradient chips on a connecting line), centered like the
   FAQ/demo text blocks instead of hugging the left edge. --- */
.public-process--editorial-flat {
  margin-inline: auto;
  padding-left: 0;
  border-left: 0;
}

.public-process--editorial-flat .public-process__item {
  position: relative;
}

.public-process--editorial-flat .public-process__copy {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1.15rem;
}

.public-process--editorial-flat .public-process__num {
  grid-column: 1;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--public-accent), var(--public-cta-to));
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  box-shadow: 0 8px 20px -6px var(--public-shadow-hover);
}

.public-process--editorial-flat .public-process__item h3 {
  grid-column: 2;
  grid-row: 1;
}

.public-process--editorial-flat .public-process__item p {
  grid-column: 2;
  grid-row: 2;
}

.public-process--editorial-flat .public-process__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.24rem;
  top: 2.5rem;
  bottom: calc(-1 * clamp(1.75rem, 4vw, 2.75rem));
  width: 0;
  border-left: 2px dashed var(--public-border-hover);
  z-index: 0;
}

/* --- Related tools: pin the link to the card's bottom edge instead of
   right after the description, so it lands at the same height across the
   row regardless of how long each card's description text runs. --- */
.public-related--preview .public-card--compare {
  display: flex;
  flex-direction: column;
}

.public-related--preview .public-card--compare .public-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.public-related--preview .public-card--compare .public-card__link {
  margin-top: auto;
  padding-top: 0.85rem;
}