/* ============================================================
   Projefy — landing design system
   2026-08-13 makeover · rev.2 imagery distribution · rev.3 composition
   Dark-first, instrument-grade. Terrain motifs (contour lines +
   TIN mesh) drawn with SVG/gradients — no glass, no heavy effects.
   Typography matches the app: Inter (UI) + Kanit italic (wordmark).

   rev.3 adds the VERTICAL axis: .duo alternating two-column blocks
   carrying portrait imagery in a .frame (glossy gallery bezel), a
   bullets + slope-profile block, and restrained motion (scroll
   reveal + slow background drift), all off under reduced-motion.

   NOTE: nginx serves this file as `immutable` for 30 days. Any edit
   here REQUIRES bumping the ?v= token on the <link> in index.html.
   ============================================================ */

/* ---------- TOKENS: dark (default) ---------- */
:root {
  --bg: #0B131F;
  --bg-alt: #0E1826;
  --surface: #14202F;
  --surface-hi: #1A2839;
  --line: #223247;
  --line-soft: #1B2839;
  --ink: #E9EFF6;
  --ink-muted: #9BB0C7;

  --accent: #33BFC0;
  --accent-bright: #5FDCD6;
  --accent-deep: #1E8F92;
  --on-accent: #04222A;
  --amber: #E8A544;
  --amber-bright: #F2BC6A;

  /* Constant dark bands (hero / filmstrip / cta / footer) */
  --band: #0A121D;
  --band-line: #1F2E42;
  --on-band: #E9EFF6;
  --on-band-muted: #9BB0C7;

  /* Terrain motifs */
  --mesh-line: rgba(58, 199, 190, .075);
  --topo-opacity: .16;

  /* Blurred photographic section backgrounds.
     --photo-op is tuned per section against measured text contrast, not by
     eye: see the contrast sampling in the 2026-08-13 revision worklog. */
  --photo-op: .52;
  --photo-blur: 10px;

  /* Slope-profile diagram — decorative only, never a legal threshold */
  --slope-a: #4FBF7A;
  --slope-b: #E8A544;
  --slope-c: #E2604B;

  --radius-chip: 6px;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -22px rgba(0, 0, 0, .8);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 22px 46px -24px rgba(0, 0, 0, .9);

  --maxw: 1180px;
  --maxw-wide: 1480px;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand: 'Kanit', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ---------- TOKENS: light ---------- */
:root[data-theme="light"] {
  --bg: #F5F7FA;
  --bg-alt: #EBEFF5;
  --surface: #FFFFFF;
  --surface-hi: #F7F9FC;
  --line: #DCE3EC;
  --line-soft: #E6EBF2;
  --ink: #0E1A28;
  --ink-muted: #4E6076;

  --accent: #0E7A80;
  --accent-bright: #0B6067;
  --accent-deep: #0B6067;
  --on-accent: #FFFFFF;
  --amber: #9A6210;
  --amber-bright: #B87718;

  --mesh-line: rgba(14, 122, 128, .07);
  --topo-opacity: .1;
  --photo-op: .17;

  --slope-a: #2E7D53;
  --slope-b: #9A6210;
  --slope-c: #B23A2A;

  --shadow-card: 0 1px 3px rgba(15, 26, 42, .06), 0 10px 26px -18px rgba(15, 26, 42, .18);
  --shadow-lift: 0 2px 6px rgba(15, 26, 42, .09), 0 18px 40px -20px rgba(15, 26, 42, .26);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is required, not cosmetic: every <img> carries width/height
   attributes (to reserve layout space and avoid CLS), and without this the
   attribute height is used literally and the image renders stretched. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  margin: 0; color: var(--ink); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.16; text-wrap: balance;
}
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-wide { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 800px; }
.center { text-align: center; }

/* ---------- TYPE HELPERS ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--accent); margin: 0 0 14px;
}
.lead { font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--ink-muted); max-width: 68ch; }
.lead.center { margin-left: auto; margin-right: auto; }
.lead + .lead { margin-top: 16px; }
.micro { font-size: .82rem; color: var(--ink-muted); margin-top: 18px; }
.fineprint { font-size: .84em; color: var(--ink-muted); font-weight: 400; }
.section-note { font-size: .9rem; color: var(--ink-muted); margin-top: 26px; max-width: 72ch; }
.section-note.center { margin-left: auto; margin-right: auto; }
.section-sub { font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--ink-muted); margin-top: 12px; max-width: 62ch; }
.mono { font-family: var(--font-mono); }

/* ---------- TERRAIN MOTIFS ---------- */
/* TIN mesh: three gradient families at 0/60/-60 deg = triangulated surface */
.mesh-bg { position: relative; isolation: isolate; }
.mesh-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,  var(--mesh-line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-60deg, var(--mesh-line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,   var(--mesh-line) 0 1px, transparent 1px 38px);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* Contour lines: single decorative SVG, no seams */
.topo-bg { position: relative; isolation: isolate; overflow: hidden; }
.topo-bg::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  background: url("assets/topo-contours.svg") no-repeat center / cover;
  opacity: var(--topo-opacity);
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 76%);
}

/* ---------- BLURRED PHOTOGRAPHIC SECTION BACKGROUNDS ----------
   A tiny (640px) pre-blurred webp sits behind the section at low
   opacity; a scrim of the section's own ground colour is painted on
   top of it so body text keeps its full contrast ratio. The scrim is
   the contrast guarantee — the image never touches the text layer. */
.has-photo { position: relative; isolation: isolate; overflow: hidden; --scrim: var(--bg); }
.section.alt.has-photo { --scrim: var(--bg-alt); }
/* Per-section strength is a MULTIPLIER, never an absolute opacity: the safe
   absolute value differs per theme (a dark photo darkens a light ground and a
   bright photo lightens a dark one), and an absolute override here silently
   ignored the light palette — measured at 3.60:1 on the reports section. */
.cta-final.has-photo { --scrim: var(--band); --photo-k: 1.23; }
.photo-dark { --photo-k: 1.38; }   /* dark source image — safe to show more */
.photo-faint { --photo-k: .58; }   /* bright source image — kept low for contrast */

/* Light palette: a dark photo eats a light ground far faster than a bright
   photo eats a dark one, so the "dark source" bonus is dropped. The final CTA
   sits on --band, which is theme-constant, so it keeps the dark-theme value. */
:root[data-theme="light"] .photo-dark { --photo-k: 1; }
:root[data-theme="light"] .cta-final.has-photo { --photo-op: .52; }

/* THEME-CONSTANT BANDS KEEP THE DARK-THEME ACCENT.
   The hero, filmstrip and final-CTA bands all sit on --band, which does not
   change with the theme — but --accent-bright does, and in the light palette it
   is a dark teal. An eyebrow on those bands therefore inherited dark-on-dark:
   2.32:1 in light theme, below AA. Pinning the dark-theme accent restores the
   band's own contrast instead of the page's.
   The filmstrip band was NOT in the original prescription; it carries the same
   --band + --accent-bright pair, so it had the identical failure. */
:root[data-theme="light"] .hero .eyebrow,
:root[data-theme="light"] .filmstrip-band .eyebrow,
:root[data-theme="light"] .cta-final .eyebrow { color: #5FDCD6; }

.photo-bg {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; z-index: -2; pointer-events: none;
  filter: blur(var(--photo-blur)) saturate(.85);
  opacity: calc(var(--photo-op) * var(--photo-k, 1));
}
.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--scrim) 0%,
    color-mix(in srgb, var(--scrim) 58%, transparent) 34%,
    color-mix(in srgb, var(--scrim) 58%, transparent) 66%,
    var(--scrim) 100%);
}

/* Side bleeds: the image occupies one flank and dissolves into the ground */
.bleed-right .photo-bg {
  inset: -6% -6% -6% auto; width: 60%;
  mask-image: linear-gradient(to left, #000 34%, transparent 94%);
  -webkit-mask-image: linear-gradient(to left, #000 34%, transparent 94%);
}
.bleed-left .photo-bg {
  inset: -6% auto -6% -6%; width: 60%;
  mask-image: linear-gradient(to right, #000 34%, transparent 94%);
  -webkit-mask-image: linear-gradient(to right, #000 34%, transparent 94%);
}
.bleed-right::after {
  background: linear-gradient(to right, var(--scrim) 26%, color-mix(in srgb, var(--scrim) 52%, transparent) 100%);
}
.bleed-left::after {
  background: linear-gradient(to left, var(--scrim) 26%, color-mix(in srgb, var(--scrim) 52%, transparent) 100%);
}

/* ---------- MOTION ----------
   Two restrained effects, both opt-in and both dead under
   prefers-reduced-motion (the global rule at the end of this file).

   1. Scroll reveal. The hidden state is scoped to :root.js, which an
      inline script in <head> sets before first paint — so a JS failure
      or a blocked script leaves the content VISIBLE rather than blank.
   2. A very slow drift on the blurred section backgrounds. It never
      touches the text layer: .photo-bg sits at z-index:-2 behind the
      scrim, and the section clips it (overflow:hidden). */
:root.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1), transform .72s cubic-bezier(.22, .61, .36, 1);
}
:root.js [data-reveal].in { opacity: 1; transform: none; }
:root.js [data-reveal="2"] { transition-delay: .13s; }
:root.js [data-reveal="3"] { transition-delay: .26s; }

@keyframes drift {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.6%, -1.4%, 0); }
}
.photo-bg { animation: drift 52s ease-in-out infinite alternate; }
.hero-bg  { animation: drift 68s ease-in-out infinite alternate; }

/* ---------- FRAME (glossy moldure) ----------
   A gallery bezel, not a glass panel: a gradient-lit border, one soft
   diagonal sheen over the plate, an inner hairline, and a drop shadow
   that lifts the image off the section ground. No backdrop-filter. */
.frame {
  position: relative; margin: 0; padding: 9px; border-radius: 20px;
  background:
    linear-gradient(148deg,
      color-mix(in srgb, var(--ink) 26%, transparent) 0%,
      color-mix(in srgb, var(--ink) 7%, transparent) 22%,
      color-mix(in srgb, var(--ink) 2%, transparent) 52%,
      color-mix(in srgb, #000 30%, transparent) 100%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}
.frame:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 34px 60px -26px rgba(0, 0, 0, .95); }
:root[data-theme="light"] .frame:hover { box-shadow: 0 6px 14px rgba(15, 26, 42, .12), 0 30px 56px -24px rgba(15, 26, 42, .34); }
.frame img { border-radius: 12px; width: 100%; }
/* inner hairline + sheen sweep, both above the plate, neither clickable */
.frame::before, .frame::after {
  content: ""; position: absolute; inset: 9px; border-radius: 12px;
  pointer-events: none;
}
.frame::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); z-index: 2; }
.frame::after {
  z-index: 3; opacity: .5;
  background: linear-gradient(114deg,
    rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 13%,
    rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 69%,
    rgba(255, 255, 255, .06) 90%, rgba(255, 255, 255, .18) 100%);
}
:root[data-theme="light"] .frame::after { opacity: .34; }
/* The caption sits INSIDE the glossy frame, over the plate gradient and its
   sheen — a ground much lighter than the page, where --ink-muted measured
   3.43/3.57:1, below AA in both themes. --ink is the same colour the frame's
   own body copy uses, so it reads against the plate rather than the page.
   (Moving captions outside the bezel is the better design and the bigger
   change; it belongs to a design pass, not a contrast fix.) */
.frame-cap { display: block; font-size: .78rem; color: var(--ink); margin-top: 13px; max-width: 44ch; }

/* ---------- DUO: alternating vertical two-column blocks ----------
   The page used to read as one horizontal wave: every band was a
   full-width row of text followed by a full-width row of images. The
   duo introduces the vertical axis — a portrait plate beside a text
   column, the plate changing flank down the page. Media comes FIRST in
   the DOM so that on one column the image leads and the text answers. */
.duo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.4vw, 62px); align-items: center;
}
.duo-media { min-width: 0; width: 100%; max-width: 430px; justify-self: start; }
.duo-copy { min-width: 0; }
.duo-flip .duo-media { order: 2; justify-self: end; }
.duo-wide .duo-media { max-width: 500px; }
.duo + .duo-tail { margin-top: clamp(34px, 4vw, 54px); }
/* Card grids that live in a duo column stack — one column is the point. */
.duo-copy .steps, .duo-copy .persona-grid, .duo-copy .beta-grid { grid-template-columns: 1fr; gap: 14px; }
.duo-copy .steps { gap: 16px; }
.duo-copy .step { padding: 22px 24px; }
.duo-copy .persona { padding: 22px 24px; }
/* .badge-row is centred for the old centred layout; in a duo column it left-aligns. */
.duo-copy .badge-row { justify-content: flex-start; }
.duo-copy .section-head { margin-bottom: 22px; }
.duo-copy .lead { max-width: 56ch; }

/* ---------- SPEC LIST (capabilities as bullets, not cards) ---------- */
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line-soft); }
.spec-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list li::before {
  content: ""; position: absolute; left: 1px; top: calc(14px + .52em);
  width: 9px; height: 9px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.spec-list li:nth-child(3n+2)::before {
  background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}
.spec-list h3 { font-size: 1.03rem; margin-bottom: 3px; }
.spec-list p { color: var(--ink-muted); font-size: .91rem; }

/* ---------- SLOPE PROFILE (decorative diagram) ----------
   Zero bytes: inline SVG, themed through the same tokens as the page.
   It carries NO numbers — the bands are named, never quantified, so it
   cannot be read as a legal declividade threshold. */
.profile-fig {
  margin: 0; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px) 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.profile-fig svg { display: block; width: 100%; height: auto; }
.profile-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; }
.profile-head h3 { font-size: 1.02rem; }
.profile-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 16px 0 0; padding: 0; font-size: .8rem; color: var(--ink-muted); }
.profile-legend li { display: inline-flex; align-items: center; gap: 7px; }
.profile-legend i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.profile-cap { font-size: .78rem; color: var(--ink-muted); margin-top: 14px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: 12px 22px; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.btn:hover { text-decoration: none; }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-bright); color: var(--on-accent); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Quiet secondary action — deliberately NOT a button: the page has one
   primary CTA (Criar conta) and nothing may compete with it visually. */
.link-quiet { color: var(--on-band-muted); font-weight: 500; font-size: .94rem; border-bottom: 1px solid transparent; }
.link-quiet:hover { color: var(--on-band); text-decoration: none; border-bottom-color: currentColor; }

/* ---------- TRUST CHIPS (beside the CTA) ---------- */
.trust-chips {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  list-style: none; margin: 22px 0 0; padding: 0; font-size: .8rem;
}
.trust-chips li {
  color: var(--on-band-muted); padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(233, 239, 246, .2); background: rgba(233, 239, 246, .04);
}
.trust-chips .chip-mono { font-family: var(--font-mono); letter-spacing: .04em; }
.center-chips { justify-content: center; }

/* ---------- BETA STRIP ---------- */
.beta-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--accent-deep); color: #F2FBFB; text-decoration: none;
  padding: 8px 18px; font-size: .86rem; text-align: center;
}
.beta-strip:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.beta-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px; padding: 2px 10px;
}
.beta-strip-cta { font-weight: 600; white-space: nowrap; }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 30px; width: 30px; }
.brand-name { font-family: var(--font-brand); font-style: italic; font-weight: 500; font-size: 1.42rem; letter-spacing: .01em; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: var(--ink-muted); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-login { color: var(--ink-muted); font-size: .92rem; font-weight: 500; white-space: nowrap; padding: 0 4px; }
.nav-login:hover { color: var(--ink); text-decoration: none; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-btn);
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-ico-sun { display: inline; }
.theme-ico-moon { display: none; }
:root[data-theme="light"] .theme-ico-sun { display: none; }
:root[data-theme="light"] .theme-ico-moon { display: inline; }

/* ---------- SECTION RHYTHM ---------- */
.section { padding: clamp(56px, 6.6vw, 90px) 0; border-bottom: 1px solid var(--line-soft); }
.section.alt { background: var(--bg-alt); }
.section-head { margin-bottom: 42px; }
.section-head h2 { font-size: clamp(1.72rem, 3.2vw, 2.5rem); }
.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }
.section-cta-note { font-size: .88rem; color: var(--ink-muted); max-width: 46ch; }

/* ---------- HERO ----------
   Contract: eyebrow + h1 + subhead + primary CTA + trust chips must all
   fit above the fold at 720 / 800 / 900 px viewport heights. The terrain
   render is background only — it never pushes the promise down. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--band); color: var(--on-band);
  padding: clamp(44px, 5.4vw, 84px) 0 clamp(46px, 5.6vw, 88px);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, var(--band) 4%, rgba(10, 18, 29, .86) 44%, rgba(10, 18, 29, .3) 80%),
    linear-gradient(to bottom, rgba(10, 18, 29, .5), transparent 34%, rgba(10, 18, 29, .74));
}
.hero-copy { max-width: 42rem; }
.hero h1 { font-size: clamp(2.05rem, 4.4vw, 3.3rem); color: var(--on-band); }
.hero h1 .accent { color: var(--accent-bright); }
.hero .eyebrow { color: var(--accent-bright); margin-bottom: 12px; }
.hero .lead { color: var(--on-band-muted); max-width: 54ch; margin-top: 16px; }
.hero .lead strong { color: var(--on-band); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.center-cta { justify-content: center; }

/* ---------- CREDENTIAL STRIP ---------- */
.cred-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.cred-list {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: center;
  padding: 15px 24px; font-size: .86rem; color: var(--ink-muted);
}
.cred-mono { font-family: var(--font-mono); font-size: .8rem; color: var(--ink); }

/* ---------- SHOWCASE (image cards) ---------- */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.showcase {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: border-color .18s, box-shadow .18s;
}
.showcase:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: var(--shadow-lift); }
.showcase-media { position: relative; aspect-ratio: 16 / 10; background: var(--band); overflow: hidden; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; }
.showcase-tag {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em;
  color: var(--on-band); background: rgba(10, 18, 29, .74);
  border: 1px solid var(--band-line); border-radius: var(--radius-chip); padding: 4px 9px;
}
.showcase-body { padding: 22px 24px 26px; }
.showcase-body h3 { font-size: 1.16rem; margin-bottom: 9px; }
.showcase-body p { color: var(--ink-muted); font-size: .94rem; }
.showcase-cap { display: block; margin-top: 12px; font-size: .76rem; color: var(--ink-muted); }

/* ---------- MOSAIC GALLERY ----------
   CSS multi-column: tiles keep their native aspect ratio, so tile heights
   vary naturally (a portrait frame reads tall) with no masonry maths, no
   JS and no empty grid cells. */
.mosaic { column-count: 3; column-gap: 18px; }
.mosaic-b { column-count: 3; }
.tile {
  break-inside: avoid; margin: 0 0 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: border-color .18s, box-shadow .18s;
}
.tile:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: var(--shadow-lift); }
.tile img { width: 100%; height: auto; background: var(--band); }
.tile figcaption { padding: 14px 17px 17px; font-size: .87rem; color: var(--ink-muted); }
.tile figcaption strong { display: block; color: var(--ink); font-weight: 600; font-size: .96rem; margin-bottom: 3px; }

/* ---------- FILMSTRIP (continuous band) ---------- */
.filmstrip-band {
  background: var(--band); color: var(--on-band); overflow: hidden;
  padding: clamp(48px, 5.6vw, 78px) 0; border-bottom: 1px solid var(--line-soft);
}
.filmstrip-band .eyebrow { color: var(--accent-bright); }
.filmstrip-title { color: var(--on-band); text-align: center; font-size: clamp(1.45rem, 2.6vw, 2.05rem); margin-bottom: 30px; }
.filmstrip {
  width: 100%; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.filmstrip-track { display: flex; width: max-content; animation: fs-scroll 78s linear infinite; }
.filmstrip:hover .filmstrip-track, .filmstrip:focus-within .filmstrip-track { animation-play-state: paused; }
.filmstrip-set { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0 7px; }
.filmstrip-set li { flex: none; }
.filmstrip-set img {
  width: 266px; height: 150px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--band-line);
}
@keyframes fs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- STEPS ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card);
}
.step-num { font-family: var(--font-mono); font-size: .86rem; color: var(--accent); font-weight: 500; letter-spacing: .08em; }
.step h3 { font-size: 1.2rem; margin: 12px 0 9px; }
.step p { color: var(--ink-muted); font-size: .94rem; }

.pull {
  margin-top: 30px; padding: 16px 22px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem); font-weight: 600; color: var(--ink); line-height: 1.48;
}

/* ---------- PERSONAS ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.persona { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); }
.persona h3 { font-size: 1.16rem; margin-bottom: 9px; }
.persona p { color: var(--ink-muted); font-size: .95rem; }

/* ---------- REPORTS / BADGES ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 0; }
.tech-badge {
  font-family: var(--font-mono); font-size: .82rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-chip); padding: 8px 13px;
}
.tech-badge em { color: var(--amber); font-style: normal; font-size: .72rem; margin-left: 7px; letter-spacing: .04em; }

/* ---------- BETA SECTION ---------- */
.beta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 8px; }
.beta-point {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px 18px;
}
.beta-point > span { font-size: 1.1rem; line-height: 1.35; flex: none; }
.beta-point p { margin: 0; font-size: .93rem; color: var(--ink-muted); }
.beta-point strong { color: var(--ink); font-weight: 600; }

.beta-roadmap-title { font-size: 1.14rem; margin: 34px 0 14px; }
.beta-roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.beta-roadmap li {
  display: flex; gap: 16px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius-btn); padding: 12px 16px;
}
.beta-roadmap .rm-when { font-family: var(--font-mono); font-weight: 500; color: var(--accent); min-width: 86px; font-size: .88rem; flex: none; }
.beta-roadmap .rm-what { color: var(--ink-muted); font-size: .93rem; }
.beta-roadmap .rm-now { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.beta-roadmap .rm-launch { border-left-color: var(--amber); }
.beta-roadmap .rm-launch .rm-what { color: var(--ink); font-weight: 600; }

/* ---------- PLANS ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card);
}
.plan-featured { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.plan-top { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.plan-flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--accent); color: var(--on-accent);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--radius-chip);
}
.plan-name { font-size: 1.24rem; margin-bottom: 10px; }
.plan-price { margin: 0 0 6px; display: flex; align-items: baseline; gap: 3px; }
.plan-cur { font-size: .95rem; color: var(--ink-muted); font-weight: 600; }
.plan-amount { font-size: 2.1rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.plan-per { font-size: .88rem; color: var(--ink-muted); }
.plan-tag { font-size: .85rem; color: var(--ink-muted); margin: 0 0 18px; min-height: 42px; }
.plan-feats { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; color: var(--ink); }
.plan-feats li { padding-left: 20px; position: relative; }
.plan-feats li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.plan-top .plan-feats li::before { background: var(--amber); }
.plan .btn { margin-top: auto; }
.plan-contact { display: block; text-align: center; margin-top: 10px; font-size: .81rem; color: var(--ink-muted); }
.plan-contact:hover { color: var(--accent); }
.pricing-note { text-align: center; font-size: .86rem; color: var(--ink-muted); margin-top: 28px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 1.04rem; padding: 19px 34px 19px 0; list-style: none; color: var(--ink); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 17px; color: var(--accent); font-size: 1.3rem; font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { color: var(--ink-muted); padding: 0 0 22px; max-width: 74ch; }

/* ---------- CTA FINAL ---------- */
.cta-final { background: var(--band); color: var(--on-band); border-bottom: none; }
.cta-final h2 { color: var(--on-band); font-size: clamp(1.72rem, 3.3vw, 2.5rem); }
.cta-final .lead { color: var(--on-band-muted); margin-top: 16px; }
.cta-final .eyebrow { color: var(--accent-bright); }
.cta-final .hero-cta { margin-top: 30px; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--band); color: var(--on-band); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; padding: 56px 24px 30px; }
.site-footer .brand, .site-footer .brand-name { color: var(--on-band); }
.footer-loc { color: var(--on-band-muted); font-size: .88rem; margin-top: 12px; }
.footer-principle { color: var(--on-band-muted); font-size: .85rem; margin-top: 12px; max-width: 44ch; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-links a { color: var(--on-band-muted); font-size: .9rem; }
.footer-links a:hover { color: var(--on-band); }
.footer-bottom { border-top: 1px solid var(--band-line); padding: 18px 24px; }
.footer-bottom p { color: var(--on-band-muted); font-size: .82rem; }

/* ---------- RESPONSIVE ---------- */
/* The nav gets its own breakpoint, above the layout one: below it,
   .nav-actions overflows the viewport instead of wrapping, so the links drop
   to their own scrollable row.
   This value is MEASURED, not guessed, and it moves whenever a nav item is
   added or renamed — binary search on document.scrollWidth against the built
   image, 2026-08-19:
     8 items (before "Empreendimentos") → one line needs 1125px  → 1140 held
     9 items (with  "Empreendimentos")  → one line needs 1315px  → 1140 broke
                                           (measured overflow: 1299 vs 1280)
   Set to 1320 with margin. Adding a tenth item means re-measuring. */
@media (max-width: 1320px) {
  .nav { min-height: 58px; flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .nav-links {
    order: 3; width: 100%; gap: 20px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

@media (max-width: 980px) {
  /* One column: DOM order wins, so the image leads and the copy answers.
     The desktop flank swap must be undone or the media jumps below. */
  .duo { grid-template-columns: 1fr; gap: 30px; }
  .duo-media, .duo-flip .duo-media { order: 0; justify-self: center; max-width: 420px; }
  .duo-wide .duo-media { max-width: 460px; }
  .showcase-grid, .steps, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .mosaic, .mosaic-b { column-count: 2; }
  .persona-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero::after { background: linear-gradient(to bottom, rgba(10, 18, 29, .8), rgba(10, 18, 29, .9)); }
  .bleed-right .photo-bg, .bleed-left .photo-bg { inset: -6%; width: 112%; mask-image: none; -webkit-mask-image: none; }
  .bleed-right::after, .bleed-left::after {
    background: linear-gradient(to bottom, var(--scrim) 0%, color-mix(in srgb, var(--scrim) 74%, transparent) 50%, var(--scrim) 100%);
  }
  .filmstrip-set img { width: 224px; height: 126px; }
}

@media (max-width: 720px) {
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 10px 15px; font-size: .9rem; }
  .showcase-grid, .steps, .pricing-grid, .beta-grid { grid-template-columns: 1fr; }
  .mosaic, .mosaic-b { column-count: 1; }
  .beta-roadmap li { flex-direction: column; gap: 4px; }
  .hero h1 { font-size: clamp(1.92rem, 7.4vw, 2.5rem); }
  .btn, .btn-lg { width: 100%; }
  .nav-actions .btn { width: auto; }
  .section-cta { flex-direction: column; align-items: stretch; }
  .filmstrip-set img { width: 196px; height: 110px; }
}

@media (max-width: 430px) {
  .container, .container-wide { padding: 0 16px; }
  .footer-grid, .footer-bottom { padding-left: 16px; padding-right: 16px; }
  .trust-chips { font-size: .74rem; gap: 6px 8px; }
  .trust-chips li { padding: 4px 10px; }
  .brand-name { font-size: 1.3rem; }
  .step, .persona, .plan { padding: 22px; }
  .profile-fig { padding: 16px 14px 16px; }
  .filmstrip-set img { width: 172px; height: 97px; }
}


/* ============================================================
   2026-08-13 ROUND 4 — REPORTS-FIRST REFACTOR
   Reports are the paid, differentiated product, so the flagship
   block moved to position 3 and grew these components. Everything
   below is additive: no existing rule was redefined.
   ============================================================ */

/* ---------- RESERVED SLOTS FOR REAL PRODUCT CAPTURES ----------
   Hidden while <html data-shots="off">. The slot's <img> carries
   loading="lazy" and a display:none ancestor never intersects the
   viewport, so the file is NEVER requested while the flag is off —
   the page ships zero 404s for captures that have not landed yet.
   Dropping the file in landing/assets/ and flipping the attribute
   to "on" is the whole deployment step. */
:root[data-shots="off"] .shot-slot { display: none; }

/* ---------- HERO: the demoted-imagery line ----------
   Imagery is a supporting act now, not the promise. It gets one
   quiet line under the lead, never a claim of its own. */
.hero-also {
  font-size: .9rem; color: var(--on-band-muted);
  margin: 10px 0 0; max-width: 60ch;
}

/* ---------- STATUS PILLS (live vs. under construction) ----------
   The honesty device of the whole section: every report type carries
   one, and which pill it carries is verified in code, not guessed. */
.status-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; border: 1px solid;
  vertical-align: middle;
}
.st-live {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.st-soon {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
}
.status-line { margin: 0 0 14px; }

/* ---------- REPORTS: copy column ---------- */
.rel-h3 { font-size: clamp(1.24rem, 2vw, 1.62rem); margin-bottom: 16px; }
.rel-specs { margin-top: 26px; }
/* .spec-list styles h3; inside #relatorios the items sit one level
   deeper (h2 > h3 > h4), so the same treatment is extended to h4. */
.spec-list h4 { font-size: 1.03rem; margin-bottom: 3px; color: var(--ink); font-weight: 600; }

/* ---------- APROVÔMETRO (illustrative representation) ----------
   Faithful to the real component in frontend/src/components/Reports/
   AprovometroStudio.tsx: same red→amber→green gradient, the same five
   parameters, and the same weakest-link verdict rule. It is NOT a
   screenshot and is labelled as a representation in the markup.
   Semantic colours reuse the already contrast-verified slope tokens
   (green/amber/red, both themes) instead of introducing new ones. */
.aprov {
  margin: 0; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px) 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  --ok: var(--slope-a); --warn: var(--slope-b); --bad: var(--slope-c);
}
.aprov-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 14px; }
.aprov-head h3 { font-size: 1.02rem; }
.aprov-verdict {
  margin: 0 0 12px; font-size: clamp(1.1rem, 2.4vw, 1.42rem);
  font-weight: 700; letter-spacing: .01em; color: var(--warn);
}
.aprov-meter {
  position: relative; height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bad) 0%, var(--warn) 52%, var(--ok) 100%);
}
.aprov-needle {
  position: absolute; left: 70%; top: -5px; width: 4px; height: 24px;
  border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .38);
}
:root[data-theme="light"] .aprov-needle { background: #fff; box-shadow: 0 0 0 2px rgba(15, 26, 42, .55); }
.aprov-scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: .7rem; color: var(--ink-muted);
}
.aprov-params { margin-top: 18px; display: grid; gap: 9px; }
.aprov-p {
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 10px 13px;
}
.aprov-prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .86rem; }
.aprov-prow b { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.aprov-pk { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.aprov-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.aprov-dot.ok { background: var(--ok); }
.aprov-dot.warn { background: var(--warn); }
.aprov-plim { font-size: .72rem; color: var(--ink-muted); margin-top: 2px; }
.aprov-pbar {
  height: 5px; border-radius: 3px; margin-top: 7px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.aprov-pbar i { display: block; height: 100%; border-radius: 3px; }
.aprov-pbar i.ok { background: var(--ok); }
.aprov-pbar i.warn { background: var(--warn); }

/* The meter lives inside the duo. While the capture slot is hidden it takes the
   empty media column (no dead band in the state that ships); once the capture
   lands it drops to a full-width row under the plate. */
#relatorios .aprov { margin: 0; }
:root[data-shots="on"] #relatorios .aprov {
  grid-column: 1 / -1; margin-top: clamp(34px, 4vw, 54px);
}

/* ---------- THE REPORT FAMILY ---------- */
.fam-title { font-size: clamp(1.24rem, 2.2vw, 1.66rem); }
.fam-sub { font-size: .95rem; color: var(--ink-muted); margin: 8px 0 0; max-width: 62ch; }
.fam-sub-title { font-size: .95rem; color: var(--ink-muted); font-weight: 600; margin: 34px 0 0; }
.badge-row-start { justify-content: flex-start; margin-top: 14px; }

/* Cover deck — illustrative covers, one visual identity per report type.
   Fanned only from 700px up: at narrow widths a rotation can push a card
   past the viewport edge, and the page must never scroll horizontally. */
.cover-deck {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 26px); margin-top: 26px; align-items: start;
}
.cover-card { margin: 0; display: flex; flex-direction: column; gap: 12px; }
/* .frame is built around padding:9px with its bezel pseudo-elements pinned at
   inset:9px. These covers are small, so the padding shrinks — and the inset
   and radii have to shrink with it or the hairline and sheen sit off-plate. */
.cover-frame { display: block; padding: 6px; border-radius: 14px; }
.cover-frame::before, .cover-frame::after { inset: 6px; border-radius: 9px; }
.cover-frame img { width: 100%; border-radius: 9px; }
.cover-card figcaption { display: flex; flex-direction: column; gap: 5px; }
.cover-name {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.cover-desc { font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }
.cover-cap { font-size: .78rem; color: var(--ink-muted); margin-top: 16px; }

@media (min-width: 700px) {
  .cover-deck .cover-card:nth-child(1) .cover-frame { transform: rotate(-1.6deg); }
  .cover-deck .cover-card:nth-child(2) .cover-frame { transform: rotate(.9deg) translateY(10px); }
  .cover-deck .cover-card:nth-child(3) .cover-frame { transform: rotate(-.7deg); }
  .cover-deck .cover-card:nth-child(4) .cover-frame { transform: rotate(1.7deg) translateY(10px); }
}
@media (max-width: 700px) {
  .cover-deck { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PLANS: what a tier does NOT include ----------
   Freemium never gets reports. Saying so plainly is both honest and
   the top of the value ladder. */
.feat-no { color: var(--ink-muted); opacity: .85; }

/* Narrow-screen tightening for the components added above. This has to live
   HERE, after their base rules — an identical override in the earlier
   max-width:430px block was dead code, since equal-specificity rules later in
   the sheet win regardless of the media query. Measured, not assumed. */
@media (max-width: 430px) {
  .hero-also { font-size: .82rem; margin-top: 7px; line-height: 1.5; }
  .aprov { padding: 16px 14px; }
  .aprov-p { padding: 9px 11px; }
  .aprov-prow { font-size: .82rem; }
}

/* ============================================================
   2026-08-19 — EMPREENDIMENTOS
   Components for the product page at landing/empreendimentos/ and for
   its entry card on the home page. Additive only: no rule above is
   redefined. Every component is a size/flow correction to an existing
   idiom, not a new visual language.
   ============================================================ */

/* A phone capture inside a duo plate. The generic .duo-media is 430 px
   wide, which for a 390x760 screenshot paints an 838 px plate beside
   ~570 px of copy — the "a lot of blank spaces" defect of 2026-08-13,
   reintroduced. Sized so the plate and the four steps end together. */
.plate-phone { max-width: 330px; }

/* A landscape product capture is the opposite problem: at 430 px inside
   a duo column it is 120 px tall and unreadable. It takes the full
   container instead, and its caption is allowed the wider measure. */
.wide-shot { width: 100%; }
.wide-shot .frame-cap { max-width: 64ch; }

/* A console table is legible at its own scale or not at all: a 1360x378
   capture at a 358 px phone width is a 100 px strip. Below the layout
   breakpoint the plate keeps the capture readable and scrolls sideways
   instead of shrinking it. The caption says so, in words, on the screens
   where it applies — a scrollable region with no affordance is a trap. */
.shot-scroll { border-radius: 12px; overflow: hidden; }
.only-narrow { display: none; }
@media (max-width: 720px) {
  .shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot-scroll > img { min-width: 720px; }
  .only-narrow { display: inline; }
}
.wide-shot + .spec-list, .spec-list + .wide-shot { margin-top: clamp(34px, 4vw, 54px); }

/* Two-column bullets: the same .spec-list rules, laid out in columns so
   a six-item list under a full-width plate does not read as one long
   ribbon. column-count keeps each item's natural height. */
.spec-2col { column-count: 2; column-gap: clamp(30px, 4vw, 56px); }
.spec-2col li { break-inside: avoid; }
/* In columns the visual "last item" is the foot of each column, so the
   base rule that strips the final rule line would unbalance them. */
.spec-2col li:last-child { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }

/* "em construção" inside a feature bullet — the same amber treatment as
   .tech-badge em, because it carries exactly the same meaning. */
.spec-list h3 em, .spec-list p em { color: var(--amber); font-style: normal; font-weight: 600; }

/* One plan card, centred: Empreendimentos is a single per-enterprise SKU
   and .pricing-grid's three columns would leave two empty cells. */
.pricing-solo { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* A centred section head has to centre the columns that carry a measure,
   not only the text inside them. */
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* Home-page entry card for the product. Deliberately NOT a .duo: the duo
   flank alternation is an invariant of the home page, and a duo dropped
   between #para-quem (plate LEFT) and #beta (plate RIGHT) cannot satisfy
   it on either flank. A centred band sidesteps the constraint. */
.emp-teaser .frame { max-width: 940px; margin: 0 auto; }
.emp-teaser .frame-cap { max-width: 64ch; margin-left: auto; margin-right: auto; }
.emp-teaser .section-cta { justify-content: center; margin-top: 30px; }

@media (max-width: 860px) {
  .spec-2col { column-count: 1; }
  .spec-2col li:last-child { padding-bottom: 0; border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* transition:none above would freeze the reveal in its hidden state,
     so the hidden state itself has to be cancelled — not just its animation. */
  :root.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}