/* =============================================================================
   Cobranzo Landing v2 — page styles
   ─────────────────────────────────────────────────────────────────────────────
   Direct port of the design package "Cobranzo Home v3 Imagens.html" inline
   <style> block, unchanged so the implementation stays 1:1 with the canvas.

   Brand tokens, fonts, status colors, base typography, buttons, chips and
   cards all live in `design-system.css` (`--cob-*` namespace). Load that file
   BEFORE this one. The aliases below let the design's source CSS keep its
   un-prefixed names while the source of truth stays in design-system.css.
   ============================================================================= */

:root {
  --page-gutter: var(--cob-s-5);
  /* Brand palette aliases → design-system.css */
  --navy:          var(--cob-navy);
  --navy-dark:     var(--cob-navy-dark);
  --navy-mid:      var(--cob-navy-mid);
  --terra:         var(--cob-terra);
  --terra-h:       var(--cob-terra-h);
  --terra-soft:    var(--cob-terra-soft);
  --terra-on-dark: var(--cob-terra-on-dark);
  --terra-bright:  var(--cob-terra-bright);
  --terra-deep:    var(--cob-terra-h);
  --cream:         var(--cob-cream);
  --cream-dark:    var(--cob-cream-dark);
  --ink:           var(--cob-ink);
  --ink-2:         var(--cob-ink-2);
  --muted:         var(--cob-muted);
  --border:        var(--cob-border);
  --border-2:      var(--cob-border-2);

  /* Semantic status aliases */
  --success:       var(--cob-success);
  --success-bg:    var(--cob-success-bg);
  --warning:       var(--cob-warning);
  --warning-ink:   var(--cob-warning-ink);
  --warning-bg:    var(--cob-warning-bg);
  --danger:        var(--cob-danger);
  --danger-bg:     var(--cob-danger-bg);
  --info:          var(--cob-info);
  --info-bg:       var(--cob-info-bg);

  /* Channel aliases */
  --wa:            var(--cob-wa);
  --wa-h:          var(--cob-wa-h);

  /* Foreground / background aliases */
  --fg-1:          var(--cob-fg-1);
  --fg-2:          var(--cob-fg-2);
  --fg-3:          var(--cob-fg-3);
  --fg-on-dark:    var(--cob-fg-on-dark);
  --fg-on-dark-2:  var(--cob-fg-on-dark-2);
  --bg-1:          var(--cob-bg-1);
  --bg-2:          var(--cob-bg-2);
  --bg-3:          var(--cob-bg-3);
  --bg-dark:       var(--cob-bg-dark);
  --bg-dark-2:     var(--cob-bg-dark-2);

  /* Type aliases */
  --font-display:  var(--cob-font-display);
  --font-body:     var(--cob-font-body);
  --font-mono:     var(--cob-font-mono);

  --fs-display:    var(--cob-fs-display);
  --fs-h1:         var(--cob-fs-h1);
  --fs-h2:         var(--cob-fs-h2);
  --fs-h3:         var(--cob-fs-h3);
  --fs-h4:         var(--cob-fs-h4);
  --fs-body:       var(--cob-fs-body);
  --fs-small:      var(--cob-fs-small);
  --fs-caption:    var(--cob-fs-caption);

  --lh-tight:      var(--cob-lh-tight);
  --lh-snug:       var(--cob-lh-snug);
  --lh-body:       var(--cob-lh-body);
  --lh-loose:      var(--cob-lh-loose);

  --tr-tight:      var(--cob-tr-tight);
  --tr-snug:       var(--cob-tr-snug);
  --tr-body:       var(--cob-tr-body);
  --tr-caps:       var(--cob-tr-caps);

  /* Spacing aliases */
  --s-1: var(--cob-s-1);  --s-2: var(--cob-s-2);  --s-3: var(--cob-s-3);
  --s-4: var(--cob-s-4);  --s-5: var(--cob-s-5);  --s-6: var(--cob-s-6);
  --s-7: var(--cob-s-7);  --s-8: var(--cob-s-8);  --s-9: var(--cob-s-9);
  --s-10: var(--cob-s-10);

  /* Radii aliases */
  --r-xs:   var(--cob-r-xs);
  --r-sm:   var(--cob-r-sm);
  --r-md:   var(--cob-r-md);
  --r-lg:   var(--cob-r-lg);
  --r-xl:   var(--cob-r-xl);
  --r-pill: var(--cob-r-pill);

  /* Shadow aliases */
  --shadow-1:           var(--cob-shadow-1);
  --shadow-2:           var(--cob-shadow-2);
  --shadow-3:           var(--cob-shadow-3);
  --shadow-4:           var(--cob-shadow-4);
  --shadow-inset:       var(--cob-shadow-inset);
  --focus-ring:         var(--cob-focus-ring);
  --focus-ring-on-dark: var(--cob-focus-ring-on-dark);

  /* Motion aliases */
  --ease-out:    var(--cob-ease-out);
  --ease-in-out: var(--cob-ease-in-out);
  --dur-fast:    var(--cob-dur-fast);
  --dur-base:    var(--cob-dur-base);
  --dur-slow:    var(--cob-dur-slow);
}

/* ───────── Base type (page-scoped — design-system stays utility-only) ───────── */
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--cob-s-7) + var(--cob-s-5));  /* ~72px to clear the sticky nav */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0 0 var(--s-4); }
h2, .h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-snug);  letter-spacing: var(--tr-snug);  color: var(--fg-1); margin: 0 0 var(--s-4); }
h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug);  letter-spacing: var(--tr-snug);  color: var(--fg-1); margin: 0 0 var(--s-3); }
h4, .h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.35; color: var(--fg-1); margin: 0 0 var(--s-2); }
p { margin: 0 0 var(--s-4); color: var(--fg-2); }
a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-h); }
::selection { background: var(--terra); color: var(--cream); }

/* ───────── Page styles (inlined from "Cobranzo Home v3 Imagens.html") ───────── */
  :root{ --mk-max:1200px; }
  *{ box-sizing:border-box; }
  body{ margin:0; background:var(--bg-1); }

  /* ======== Buttons ======== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:14px;
    padding:12px 18px; border-radius:12px; border:0; cursor:pointer; line-height:1;
    text-decoration:none; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .btn-primary{ background:var(--terra); color:var(--cream); }
  .btn-primary:hover{ background:var(--terra-h); color:var(--cream); }
  .btn-primary:active{ transform:scale(.985); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); }
  .btn-ghost:hover{ background:var(--cream-dark); }
  .btn-ghost-dark{ background:transparent; color:var(--cream); border:1px solid rgba(250,247,240,.22); }
  .btn-ghost-dark:hover{ background:rgba(250,247,240,.08); }
  .btn-light{ background:var(--cream); color:var(--navy); }
  .btn-light:hover{ background:var(--cream-dark); color:var(--navy); }
  .btn-lg{ padding:16px 24px; font-size:15px; border-radius:14px; }
  .btn-sm{ padding:8px 14px; font-size:13px; border-radius:10px; }
  .btn svg{ width:16px; height:16px; stroke-width:1.75; }
  .btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
  .btn-primary:focus-visible{ box-shadow:var(--focus-ring-on-dark); }

  /* ======== Shared ======== */
  .container{ max-width:var(--mk-max); margin-inline:auto; padding-inline:var(--page-gutter); }
  .eyebrow{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--terra); display:block; }
  .eyebrow-on-dark{ color:var(--terra-on-dark); }
  .chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:var(--r-pill);
    font-family:var(--font-body); font-weight:600; font-size:11px; line-height:1;
  }
  .chip-paid{ background:var(--success-bg); color:var(--success); }
  .chip-due{ background:var(--warning-bg); color:var(--warning-ink); }
  .chip-overdue{ background:var(--danger-bg); color:var(--cob-danger-ink); }
  .chip-neutral{ background:var(--cream-dark); color:var(--ink-2); }
  .chip-live{ background:var(--success-bg); color:var(--success); }
  .chip-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--success); }

  /* ======== Nav ======== */
  .nav{
    background:var(--navy);
    position:sticky; top:0; z-index:20;
    border-bottom:1px solid rgba(250,247,240,.08);
    transition:background-color .25s ease, border-color .25s ease, box-shadow var(--dur-base) var(--ease-out);
  }
  .nav-inner{ display:flex; align-items:center; gap:40px; padding-block:16px; padding-inline:var(--page-gutter); max-width:var(--mk-max); margin-inline:auto; }
  .nav-brand img{ height:32px; display:block; }
  .nav-links{ display:flex; gap:28px; flex:1; align-items:center; }
  .nav-links a:not(.nav-dev){ color:var(--cream); font-family:var(--font-body); font-size:14px; font-weight:700; text-decoration:none; transition:color var(--dur-fast); }
  .nav-links a:not(.nav-dev):hover{ color:var(--terra-on-dark); }
  .nav-dev{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--cream);
    padding:6px 11px; border:1px solid rgba(250,247,240,.5); border-radius:var(--r-sm);
    background:rgba(233,168,153,.12);
    text-decoration:none;
    transition:background var(--dur-fast), border-color var(--dur-fast);
  }
  .nav-dev .nav-dev-prompt{ color:var(--terra-on-dark); }
  .nav-dev:hover{ background:rgba(233,168,153,.22); border-color:rgba(250,247,240,.8); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .nav-enter{ color:var(--cream); font-family:var(--font-body); font-size:14px; font-weight:500; text-decoration:none; }
  .nav-cta-button{ block-size:36px; }

  /* Mobile menu — invisible state machine, hamburger label, sliding drawer.
     The whole thing is pure CSS: a checkbox holds the open/closed state and
     `body:has(.nav-menu-toggle:checked)` reveals the overlay + drawer. */
  /* Visually-hidden checkbox: position: fixed at viewport top-left so the
     browser's "scroll-into-view on focus" doesn't scroll the page when the
     hamburger label is tapped. */
  .nav-menu-toggle {
    position:fixed; inset-block-start:0; inset-inline-start:0;
    inline-size:1px; block-size:1px; padding:0; margin:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .nav-burger,
  .nav-overlay,
  .nav-drawer { display:none; }

  /* ======== Hero ======== */
  .hero{ background:var(--bg-1); padding-block:56px; position:relative; overflow:hidden; transition:background var(--dur-base) var(--ease-out); }
  .hero:has(#hero-persona-dev:checked){ background:var(--navy-dark); }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 45fr) minmax(0, 55fr);
    gap:48px;
    align-items:center;
  }
  .hero-copy,
  .hero-visual{ min-inline-size:0; }

  /* Persona switcher */
  .persona-switch{
    display:inline-flex; align-items:center; gap:0;
    background:var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:4px;
    margin-bottom:24px; font-family:var(--font-body);
    transition:background var(--dur-base), border-color var(--dur-base);
  }
  .hero:has(#hero-persona-dev:checked) .persona-switch{ background:rgba(255,255,255,.05); border-color:rgba(233,168,153,.2); }
  .persona-pill{
    cursor:pointer;
    padding:8px 16px; border-radius:999px;
    font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-2);
    display:inline-flex; align-items:center; gap:7px;
    transition:background var(--dur-fast), color var(--dur-fast);
  }
  .persona-pill input{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    opacity:0;
    pointer-events:none;
  }
  .persona-pill svg{ width:14px; height:14px; }
  .persona-pill:hover{ color:var(--ink); }
  .persona-pill:has(input:checked){ background:var(--ink); color:var(--cream); }
  .hero:has(#hero-persona-dev:checked) .persona-pill{ color:rgba(250,247,240,.65); }
  .hero:has(#hero-persona-dev:checked) .persona-pill:hover{ color:var(--cream); }
  .hero:has(#hero-persona-dev:checked) .persona-pill:has(input:checked){ background:var(--terra-on-dark); color:var(--navy-dark); }

  /* Persona panels swap */
  .persona-panel{ display:none; }
  .persona-panel.is-active,
  .hero:has(#hero-persona-biz:checked) .hero-grid .persona-panel[data-panel="biz"],
  .hero:has(#hero-persona-dev:checked) .hero-grid .persona-panel[data-panel="dev"]{
    display:block; inline-size:100%; animation:persona-in var(--dur-base) var(--ease-out);
  }
  .hero:has(#hero-persona-biz:checked) .hero-grid .persona-panel[data-panel="dev"],
  .hero:has(#hero-persona-dev:checked) .hero-grid .persona-panel[data-panel="biz"]{ display:none; }
  @keyframes persona-in{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* Persona-driven copy palette */
  .hero:has(#hero-persona-biz:checked) .hero-grid .hero-copy{
    --hero-eyebrow-color: var(--terra);
    --hero-title-color: var(--ink);
    --hero-terra-color: var(--terra);
    --hero-lede-color: var(--ink-2);
    --hero-bullets-color: var(--ink-2);
    --hero-bullet-icon-color: var(--terra);
    --hero-ghost-color: var(--ink);
    --hero-ghost-border-color: var(--border);
    --hero-ghost-hover-bg: var(--cream-dark);
  }
  .hero:has(#hero-persona-dev:checked) .hero-grid .hero-copy{
    --hero-eyebrow-color: var(--terra-on-dark);
    --hero-title-color: var(--cream);
    --hero-terra-color: var(--terra-on-dark);
    --hero-lede-color: rgba(250,247,240,.75);
    --hero-bullets-color: rgba(250,247,240,.85);
    --hero-bullet-icon-color: var(--terra-on-dark);
    --hero-ghost-color: var(--cream);
    --hero-ghost-border-color: rgba(233,168,153,.3);
    --hero-ghost-hover-bg: rgba(233,168,153,.08);
  }
  .hero-grid .hero-copy .eyebrow{ color:var(--hero-eyebrow-color, var(--terra)); }
  .hero-grid .hero-copy .hero-title{ color:var(--hero-title-color, var(--ink)); }
  .hero-grid .hero-copy .hero-title .terra{ color:var(--hero-terra-color, var(--terra)); }
  .hero-grid .hero-copy .hero-lede{ color:var(--hero-lede-color, var(--ink-2)); }
  .hero-grid .hero-copy .hero-bullets li{ color:var(--hero-bullets-color, var(--ink-2)); }
  .hero-grid .hero-copy .hero-bullets li svg{ color:var(--hero-bullet-icon-color, var(--terra)); }
  .hero-grid .hero-copy .btn-ghost{
    color:var(--hero-ghost-color, var(--ink));
    border-color:var(--hero-ghost-border-color, var(--border));
  }
  .hero-grid .hero-copy .btn-ghost:hover{ background:var(--hero-ghost-hover-bg, var(--cream-dark)); }
  .hero:has(#hero-persona-dev:checked) .hero-grid .hero-copy .btn-primary{ background:var(--terra-on-dark); color:var(--navy-dark); }
  .hero:has(#hero-persona-dev:checked) .hero-grid .hero-copy .btn-primary:hover{ background:#f3bcb0; color:var(--navy-dark); }

  /* Dev visual — code editor */
  .hv-code{
    background:var(--navy-dark); border:1px solid rgba(233,168,153,.18);
    border-radius:var(--r-lg); box-shadow:0 30px 60px rgba(0,0,0,.35);
    overflow:hidden; position:relative;
  }
  .hv-code .hvc-bar{
    display:flex; align-items:center; gap:8px;
    padding:14px 18px; border-bottom:1px solid rgba(233,168,153,.12);
    background:#0c1020;
  }
  .hv-code .hvc-dot{ width:10px; height:10px; border-radius:50%; background:rgba(250,247,240,.2); }
  .hv-code .hvc-dot.r{ background:#ff5f56; }
  .hv-code .hvc-dot.y{ background:#ffbd2e; }
  .hv-code .hvc-dot.g{ background:#27c93f; }
  .hv-code .hvc-file{
    margin-left:12px; font-family:var(--font-mono); font-size:12px;
    color:rgba(250,247,240,.55); letter-spacing:.02em;
  }
  .hv-code .hvc-body{
    padding:22px 24px; font-family:var(--font-mono); font-size:13.5px; line-height:1.7;
    color:#d9e8dc; overflow-x:auto;
  }
  .hv-code .hvc-body .ln{ color:#4a5578; display:inline-block; width:24px; user-select:none; }
  .hv-code .k{ color:#c792ea; }
  .hv-code .s{ color:#ecc48d; }
  .hv-code .f{ color:#82aaff; }
  .hv-code .c{ color:#6b7e9c; }
  .hv-code .n{ color:#f78c6c; }
  .hv-code .p{ color:#89ddff; }
  .hv-code .hvc-resp{
    border-top:1px solid rgba(233,168,153,.12); padding:18px 24px;
    background:rgba(39,201,63,.04); font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
    color:#a7d9b0;
  }
  .hv-code .hvc-resp .tag{
    display:inline-block; background:rgba(39,201,63,.15); color:#7fd186;
    padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700;
    letter-spacing:.04em; margin-right:10px;
  }
  .hv-code .hvc-resp .ms{ color:rgba(250,247,240,.5); margin-left:8px; }
  .hvc-string-highlight{ color:var(--terra-on-dark); }

  /* Dev floating badges */
  .hv-float-dev{
    position:absolute; background:rgba(26,31,53,.92); backdrop-filter:blur(8px);
    border:1px solid rgba(233,168,153,.22); border-radius:var(--r-md);
    padding:12px 16px; box-shadow:0 12px 32px rgba(0,0,0,.4);
    display:flex; align-items:center; gap:10px; z-index:3;
    font-family:var(--font-mono);
  }
  .hv-float-dev .ic{
    width:32px; height:32px; border-radius:8px; flex-shrink:0;
    background:rgba(233,168,153,.15); display:grid; place-items:center; color:var(--terra-on-dark);
  }
  .hv-float-dev .ic svg{ width:16px; height:16px; }
  .hv-float-dev .v{ font-size:13px; font-weight:700; color:var(--cream); letter-spacing:-.01em; }
  .hv-float-dev .l{ font-size:11px; color:rgba(250,247,240,.55); }
  .hv-float-dev.top-right{ top:10px; right:10px; }
  .hv-float-dev.bot-left{ bottom:10px; left:10px; }
  .persona-panel-dev-visual{ position:relative; }
  .hero-copy .eyebrow{ margin-bottom:18px; }
  .hero-title{
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(44px, 4.6vw, 64px); line-height:1.02; letter-spacing:-0.035em;
    color:var(--ink); margin:0 0 20px;
  }
  #hero .persona-panel[data-panel="biz"] .hero-title{ color:var(--ink); }
  #hero .persona-panel[data-panel="biz"] .hero-title .terra{ color:var(--terra); }
  #hero .persona-panel[data-panel="dev"] .hero-title{ color:var(--cream); }
  #hero .persona-panel[data-panel="dev"] .hero-title .terra{ color:var(--terra-on-dark); }
  .hero-title .terra{ color:var(--terra); }
  .hero-lede{
    font-family:var(--font-body); font-size:18px; line-height:1.55;
    color:var(--ink-2); max-width:560px; margin:0 0 28px;
  }
  .hero-ctas{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:28px; }
  .hero .btn-ghost{ color:var(--ink); border-color:var(--border); }
  .hero .btn-ghost:hover{ background:var(--cream-dark); }
  .hero-bullets{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; max-width:560px; }
  .hero-bullets li{
    list-style:none; display:flex; align-items:center; gap:10px;
    font-family:var(--font-body); font-size:14px; color:var(--ink-2);
  }
  .hero-bullets ul{ padding:0; margin:0; }
  .hero-bullets svg{ width:16px; height:16px; stroke-width:2; color:var(--terra); flex-shrink:0; }

  /* Hero visual — collage */
  .hero-visual{ position:relative; }
  .hv-main{
    position:relative; width:100%; aspect-ratio:4/5;
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-2);
    background:linear-gradient(135deg, #f5e8e1 0%, #e9d9ce 100%);
  }
  .hv-main img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hv-badge{
    position:absolute; bottom:20px; left:20px; right:20px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
    border-radius:var(--r-lg); padding:14px 16px;
    display:flex; align-items:center; gap:12px;
    box-shadow:0 4px 14px rgba(20,24,38,.12);
  }
  .hv-badge .ava{
    width:36px; height:36px; border-radius:50%; background:var(--success-bg);
    display:flex; align-items:center; justify-content:center; color:var(--success);
    flex-shrink:0;
  }
  .hv-badge .ava svg{ width:18px; height:18px; stroke-width:2.5; }
  .hv-badge .bt{ font-family:var(--font-body); font-size:13px; color:var(--ink); font-weight:600; line-height:1.25; }
  .hv-badge .bs{ font-family:var(--font-body); font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:2px; font-variant-numeric:tabular-nums; }
  .hv-float{
    position:absolute; background:#fff; border-radius:var(--r-lg);
    box-shadow:0 10px 28px rgba(20,24,38,.14); padding:12px 14px;
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-body);
  }
  .hv-float .ic{
    width:32px; height:32px; border-radius:8px; background:var(--cream);
    display:flex; align-items:center; justify-content:center; color:var(--terra);
    flex-shrink:0;
  }
  .hv-float .ic svg{ width:16px; height:16px; stroke-width:2; }
  .hv-float .v{ font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
  .hv-float .l{ font-size:11px; color:var(--muted); margin-top:1px; }
  .hv-float.top-right{ top:30px; right:-20px; }
  .hv-float.mid-left{ top:45%; left:-28px; }

  /* ========== Hero Showcase (laptop + mobile) ========== */
  .hv-showcase{
    position:relative; width:100%;
    padding:32px 24px 32px;
    display:block;
  }
  .hv-showcase::before{
    content:""; position:absolute; inset:8% -4% 8% -4%;
    background:
      radial-gradient(ellipse at 30% 50%, rgba(212,123,103,.18) 0%, transparent 60%),
      radial-gradient(ellipse at 70% 50%, rgba(38,64,154,.10) 0%, transparent 60%);
    z-index:0; filter:blur(40px);
  }

  /* Laptop browser frame */
  .hv-laptop{
    position:relative; z-index:1;
    width:100%; max-width:none;
    background:#fff;
    border-radius:14px 14px 6px 6px;
    box-shadow:
      0 1px 0 rgba(0,0,0,.04) inset,
      0 30px 60px -20px rgba(20,24,38,.30),
      0 12px 24px -12px rgba(20,24,38,.18);
    overflow:hidden;
    transform:perspective(1400px) rotateY(-1deg);
    transform-origin:center center;
  }
  .hv-laptop .lp-bar{
    display:flex; align-items:center; gap:8px;
    padding:10px 14px;
    background:linear-gradient(180deg, #f4f1ea 0%, #ebe6dc 100%);
    border-bottom:1px solid rgba(20,24,38,.06);
  }
  .hv-laptop .lp-dots{ display:flex; gap:6px; }
  .hv-laptop .lp-dots span{ width:11px; height:11px; border-radius:50%; }
  .hv-laptop .lp-dots .r{ background:#ed6a5e; }
  .hv-laptop .lp-dots .y{ background:#f5bd4f; }
  .hv-laptop .lp-dots .g{ background:#62c554; }
  .hv-laptop .lp-url{
    flex:1; height:24px; border-radius:6px;
    background:#fff; border:1px solid rgba(20,24,38,.08);
    display:flex; align-items:center; gap:6px;
    padding:0 10px; font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
    margin:0 8px;
  }
  .hv-laptop .lp-url .lock{ width:11px; height:11px; color:var(--success); flex-shrink:0; }
  .hv-laptop .lp-actions{ display:flex; gap:4px; color:rgba(20,24,38,.4); }
  .hv-laptop .lp-actions svg{ width:14px; height:14px; }

  /* Laptop UI */
  .hv-app{
    display:grid; grid-template-columns:140px 1fr;
    background:var(--bg-1);
    min-height:380px;
  }
  .hv-app .lp-side{
    background:#f9f5ec; padding:14px 10px;
    border-right:1px solid rgba(20,24,38,.05);
    display:flex; flex-direction:column; gap:2px;
  }
  .hv-app .lp-brand{
    display:flex; align-items:center; gap:6px;
    font-family:var(--font-display); font-weight:800; font-size:13px;
    color:var(--ink); letter-spacing:-0.01em;
    padding:6px 8px 14px;
  }
  .hv-app .lp-brand .lb-mark{
    width:18px; height:18px; border-radius:5px; background:var(--terra);
    display:grid; place-items:center; color:#fff; font-size:10px; font-weight:900;
  }
  .hv-app .lp-nav{
    display:flex; align-items:center; gap:8px;
    padding:7px 10px; border-radius:6px;
    font-family:var(--font-body); font-size:11.5px; font-weight:500; color:var(--ink-2);
  }
  .hv-app .lp-nav.active{ background:rgba(212,123,103,.12); color:var(--terra); font-weight:600; }
  .hv-app .lp-nav svg{ width:13px; height:13px; }
  .hv-app .lp-divider{ height:1px; background:rgba(20,24,38,.06); margin:8px 4px; }
  .hv-app .lp-section-h{
    font-family:var(--font-body); font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
    padding:6px 10px 4px;
  }

  .hv-app .lp-main{ padding:16px 18px; min-width:0; }
  .hv-app .lp-h{
    display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    margin-bottom:12px;
  }
  .hv-app .lp-h h4{ font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--ink); margin:0; letter-spacing:-0.015em; }
  .hv-app .lp-h .lp-h-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
  .hv-app .lp-h .lp-cta{
    background:var(--terra); color:#fff; font-size:11px; font-weight:600;
    padding:6px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:4px;
    flex-shrink:0;
  }
  .hv-app .lp-h .lp-cta svg{ width:12px; height:12px; }

  .hv-app .lp-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
  .hv-app .lp-kpi{
    background:#fff; border:1px solid rgba(20,24,38,.06); border-radius:8px;
    padding:9px 10px;
  }
  .hv-app .lp-kpi .k-l{ font-size:9.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
  .hv-app .lp-kpi .k-v{ font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; margin-top:2px; }
  .hv-app .lp-kpi .k-d{ font-size:10px; color:var(--success); font-weight:600; margin-top:1px; display:inline-flex; align-items:center; gap:2px; }
  .hv-app .lp-kpi .k-d svg{ width:10px; height:10px; }

  .hv-app .lp-table{ background:#fff; border:1px solid rgba(20,24,38,.06); border-radius:8px; overflow:hidden; }
  .hv-app .lp-table-h{
    display:grid; grid-template-columns:1.4fr 1fr 0.7fr 0.6fr;
    padding:8px 12px;
    font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--muted); background:#fafaf6; border-bottom:1px solid rgba(20,24,38,.05);
  }
  .hv-app .lp-row{
    display:grid; grid-template-columns:1.4fr 1fr 0.7fr 0.6fr;
    align-items:center;
    padding:9px 12px; font-size:11px; border-top:1px solid rgba(20,24,38,.04);
  }
  .hv-app .lp-row:first-child{ border-top:none; }
  .hv-app .lp-row .name{ font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; }
  .hv-app .lp-row .name .av{
    width:18px; height:18px; border-radius:50%; background:var(--cream);
    display:grid; place-items:center; font-size:9px; font-weight:700; color:var(--terra); flex-shrink:0;
  }
  .hv-app .lp-row .plan{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .hv-app .lp-row .val{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
  .hv-app .lp-row .stt{
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 6px; border-radius:99px; font-size:9.5px; font-weight:600;
    width:fit-content;
  }
  .hv-app .lp-row .stt.ok{ background:rgba(34,134,71,.12); color:var(--success); }
  .hv-app .lp-row .stt.wait{ background:rgba(245,189,79,.18); color:#9a6e1f; }
  .hv-app .lp-row .stt::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }

  /* Mobile PWA frame (overlapping the laptop bottom-right) */
  .hv-mobile{
    position:absolute;
    right:8px; bottom:-50px;
    width:160px; aspect-ratio:9/19.5;
    border-radius:26px;
    background:#0f1325;
    padding:6px;
    box-shadow:
      0 0 0 1px rgba(20,24,38,.6),
      0 24px 48px -12px rgba(20,24,38,.45),
      0 6px 14px -6px rgba(20,24,38,.30);
    z-index:2;
    transform:perspective(1200px) rotateY(-4deg);
  }
  .hv-mobile .mob-screen{
    background:var(--bg-1); border-radius:18px; height:100%;
    overflow:hidden; position:relative;
    display:flex; flex-direction:column;
  }
  .hv-mobile .mob-notch{
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:50px; height:14px; background:#0f1325; border-radius:99px; z-index:3;
  }
  .hv-mobile .mob-status{
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 14px 4px; font-size:9px; font-weight:700; color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .hv-mobile .mob-status .si{ display:flex; gap:3px; align-items:center; }
  .hv-mobile .mob-status .si svg{ width:8px; height:8px; }

  .hv-mobile .mob-app-h{ padding:6px 10px 8px; }
  .hv-mobile .mob-app-h .greet{ font-size:8.5px; color:var(--muted); font-weight:500; }
  .hv-mobile .mob-app-h .today{ font-family:var(--font-display); font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.2; }
  .hv-mobile .mob-app-h .delta{ font-size:8px; color:var(--success); font-weight:700; margin-top:1px; }

  .hv-mobile .mob-card{
    margin:4px 8px; padding:7px 8px;
    background:#fff; border:1px solid rgba(20,24,38,.06); border-radius:7px;
  }
  .hv-mobile .mob-card.pay{
    background:linear-gradient(135deg, rgba(34,134,71,.10), rgba(34,134,71,.04));
    border-color:rgba(34,134,71,.20);
    display:flex; align-items:center; gap:6px;
  }
  .hv-mobile .mob-card.pay .ic{
    width:20px; height:20px; border-radius:50%; background:var(--success); color:#fff;
    display:grid; place-items:center; flex-shrink:0;
  }
  .hv-mobile .mob-card.pay .ic svg{ width:11px; height:11px; stroke-width:3; }
  .hv-mobile .mob-card.pay .pt{ font-size:8.5px; font-weight:700; color:var(--ink); line-height:1.2; }
  .hv-mobile .mob-card.pay .ps{ font-size:7.5px; color:var(--muted); font-variant-numeric:tabular-nums; line-height:1.2; }

  .hv-mobile .mob-list-t{
    font-size:8px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;
    padding:6px 10px 2px;
  }
  .hv-mobile .mob-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:5px 10px; font-size:8.5px;
  }
  .hv-mobile .mob-row .who{ display:flex; align-items:center; gap:5px; min-width:0; }
  .hv-mobile .mob-row .av{
    width:14px; height:14px; border-radius:50%; background:var(--cream);
    display:grid; place-items:center; font-size:7px; font-weight:700; color:var(--terra); flex-shrink:0;
  }
  .hv-mobile .mob-row .nm{ font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hv-mobile .mob-row .vl{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; flex-shrink:0; font-size:8px; }

  .hv-mobile .mob-tabs{
    margin-top:auto;
    display:flex; justify-content:space-around;
    padding:6px 4px 4px;
    border-top:1px solid rgba(20,24,38,.06);
    background:#fff;
  }
  .hv-mobile .mob-tabs .tb{
    display:flex; flex-direction:column; align-items:center; gap:1px;
    font-size:7px; color:var(--muted); font-weight:600;
  }
  .hv-mobile .mob-tabs .tb.on{ color:var(--terra); }
  .hv-mobile .mob-tabs .tb svg{ width:11px; height:11px; }

  /* Real screenshot inside laptop */
  .hv-app-shot{
    width:100%;
    overflow:hidden;
    background:#fff;
  }
  .hv-app-shot img{
    width:100%; height:auto; display:block;
  }

  /* Hero photo */
  .hv-photo{
    position:relative; z-index:1;
    width:100%; max-width:560px; margin:0 auto;
    aspect-ratio: 4/5;
    border-radius:24px; overflow:hidden;
    box-shadow:
      0 30px 60px -20px rgba(20,24,38,.32),
      0 12px 24px -10px rgba(20,24,38,.18);
    background:#1a1d2b;
  }
  .hv-photo img{
    display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  }

  /* Empty mock states (placeholder while content TBD) */
  .hv-app-empty{
    background:linear-gradient(135deg, #faf7f0 0%, #f1ede4 100%);
    aspect-ratio:16/10;
    position:relative;
  }
  .hv-app-empty::after{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(20,24,38,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,24,38,.04) 1px, transparent 1px);
    background-size:32px 32px;
    background-position:-1px -1px;
    opacity:.7;
  }
  .mob-empty{
    background:linear-gradient(160deg, #faf7f0 0%, #f1ede4 100%);
    position:relative;
  }
  .mob-empty::after{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(20,24,38,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,24,38,.04) 1px, transparent 1px);
    background-size:16px 16px;
    border-radius:18px;
    opacity:.6;
  }

  /* Floating cards over the showcase */
  .hv-fcard{
    position:absolute; z-index:3;
    background:#fff; border-radius:10px;
    box-shadow:0 14px 32px -8px rgba(20,24,38,.22), 0 4px 10px -4px rgba(20,24,38,.10);
    padding:9px 12px;
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-body);
    border:1px solid rgba(20,24,38,.04);
  }
  .hv-fcard.tl{ top:6%; left:10px; }
  .hv-fcard.ml{ top:46%; left:10px; transform:translateY(-50%); }
  .hv-fcard.br{
    right:clamp(10px, 2.2vw, 24px);
    bottom:clamp(10px, 3.2vw, 24px);
    max-inline-size:calc(100% - 20px);
  }
  .hv-fcard .ic{
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    display:grid; place-items:center;
  }
  .hv-fcard.tl .ic{ background:rgba(34,134,71,.12); color:var(--success); }
  .hv-fcard.ml .ic{ background:rgba(20,24,38,.06); color:var(--navy); }
  .hv-fcard.br .ic{ background:var(--cream); color:var(--terra); }
  .hv-fcard .ic svg{ width:15px; height:15px; stroke-width:2.4; }
  .hv-fcard .v{ font-family:var(--font-display); font-size:13px; font-weight:800; color:var(--ink); letter-spacing:-0.015em; line-height:1.15; font-variant-numeric:tabular-nums; }
  .hv-fcard .l{ font-size:10.5px; color:var(--muted); margin-top:1px; line-height:1.2; }
  .hv-fcard .pulse{
    width:7px; height:7px; border-radius:50%; background:var(--success);
    box-shadow:0 0 0 0 rgba(34,134,71,.5);
    animation:hvPulse 1.8s ease-out infinite;
    flex-shrink:0;
  }
  @keyframes hvPulse{
    0%   { box-shadow:0 0 0 0 rgba(34,134,71,.55); }
    70%  { box-shadow:0 0 0 8px rgba(34,134,71,0); }
    100% { box-shadow:0 0 0 0 rgba(34,134,71,0); }
  }

  .hero-logos{
    margin-top:56px; padding-top:32px; border-top:1px solid var(--border);
    display:flex; align-items:center; gap:36px; flex-wrap:wrap; justify-content:center;
  }
  .hero-logos .hl-label{
    font-family:var(--font-body); font-size:12px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  }
  .hero-logos .hl-row{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
  .hero-logos .hl-logo{
    font-family:var(--font-display); font-weight:800; font-size:18px;
    letter-spacing:-0.02em; color:var(--ink-2); opacity:.55;
  }

  .hero-split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .split-card{
    position:relative; border-radius:var(--r-xl); padding:36px;
    display:flex; flex-direction:column; min-height:380px;
    transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .split-biz{ background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-1); }
  .split-biz:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
  .split-dev{ background:var(--navy); color:var(--cream); }
  .split-dev:hover{ background:var(--navy-dark); transform:translateY(-2px); }
  .split-card .kicker{
    font-family:var(--font-body); font-weight:600; font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
  }
  .split-biz .kicker{ color:var(--terra); }
  .split-dev .kicker{ color:var(--terra-on-dark); }
  .split-card h3{
    font-family:var(--font-display); font-weight:800;
    font-size:30px; line-height:1.1; letter-spacing:-0.02em; margin:0 0 12px;
  }
  .split-biz h3{ color:var(--ink); }
  .split-dev h3{ color:var(--cream); }
  .split-card p{
    font-family:var(--font-body); font-size:15px; line-height:1.55;
    margin:0 0 20px;
  }
  .split-biz p{ color:var(--ink-2); }
  .split-dev p{ color:rgba(250,247,240,.75); }
  .split-card ul{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px; }
  .split-card li{ display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:14px; line-height:1.4; }
  .split-biz li{ color:var(--ink-2); }
  .split-dev li{ color:rgba(250,247,240,.85); }
  .split-card li svg{ width:16px; height:16px; stroke-width:2; flex-shrink:0; margin-top:2px; }
  .split-biz li svg{ color:var(--terra); }
  .split-dev li svg{ color:var(--terra-on-dark); }
  .split-dev .code-peek{
    background:var(--navy-dark); border:1px solid rgba(233,168,153,.22);
    border-radius:var(--r-sm); padding:12px 14px; margin-bottom:20px;
    font-family:var(--font-mono); font-size:12.5px; color:#d9e8dc; line-height:1.55;
  }
  .split-dev .code-peek .c{ color:#6b7e9c; }
  .split-dev .code-peek .k{ color:#c792ea; }
  .split-dev .code-peek .s{ color:#ecc48d; }
  .split-dev .code-peek .f{ color:#82aaff; }
  .split-card .foot{ margin-top:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .split-card .foot .minor{ font-family:var(--font-body); font-size:12px; color:var(--muted); }
  .split-dev .foot .minor{ color:rgba(250,247,240,.5); }
  .split-dev .btn-primary{ background:var(--terra-on-dark); color:var(--navy-dark); }
  .split-dev .btn-primary:hover{ background:#f3bcb0; color:var(--navy-dark); }

  .hero-trust{
    margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
    font-family:var(--font-body); font-size:13px; color:var(--muted);
  }
  .hero-trust .item{ display:inline-flex; align-items:center; gap:8px; }
  .hero-trust .item svg{ width:14px; height:14px; stroke-width:1.75; color:var(--ink-2); }
  .hero-trust .dot{ color:var(--border-2); }

  /* ======== Section base ======== */
  section.bg-cream-dark{ background:var(--bg-2); }
  section.bg-navy{ background:var(--navy); color:var(--cream); }
  .sec{ padding:96px 0; }
  .sec--segments{ padding-block:72px 48px; }
  .sec--feature-strip{ padding-block:80px; }
  .sec-head{ max-width:720px; margin:0 0 48px; }
  .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .sec-head--segments{ margin-bottom:32px; }
  .sec-head .eyebrow{ margin-bottom:14px; }
  .sec-h2{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(32px, 3.6vw, 48px); line-height:1.1; letter-spacing:-0.025em;
    color:var(--ink); margin:0 0 16px;
  }
  section.bg-navy .sec-h2{ color:var(--cream); }
  .sec-lede{ font-family:var(--font-body); font-size:17px; line-height:1.55; color:var(--ink-2); margin:0; }
  .sec-h2--segments{ font-size:clamp(28px, 3vw, 40px); }
  section.bg-navy .sec-lede{ color:rgba(250,247,240,.72); }

  /* ======== Mechanics strip (section 03) ======== */
  .mech{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
    position:relative;
  }
  .mech .step{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
    padding:24px; position:relative;
  }
  .mech .step .n{
    font-family:var(--font-mono); font-size:11px; color:var(--muted);
    margin-bottom:12px; display:block;
  }
  .mech .step .ic{
    width:44px; height:44px; border-radius:var(--r-md);
    background:var(--cream); display:flex; align-items:center; justify-content:center;
    margin-bottom:14px; color:var(--terra);
  }
  .mech .step .ic svg{ width:22px; height:22px; stroke-width:1.75; }
  .mech .step h4{
    font-family:var(--font-display); font-weight:700; font-size:17px;
    line-height:1.3; color:var(--ink); margin:0 0 6px;
  }
  .mech .step p{
    font-family:var(--font-body); font-size:14px; line-height:1.5;
    color:var(--ink-2); margin:0;
  }

  /* ======== Three uses (section 04) ======== */
  .pillars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .pillar{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
    padding:28px; display:flex; flex-direction:column;
    transition:box-shadow var(--dur-base), transform var(--dur-base);
  }
  .pillar:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
  .pillar .label{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11px; color:var(--muted);
    margin-bottom:14px;
  }
  .pillar h3{
    font-family:var(--font-display); font-weight:700; font-size:22px;
    line-height:1.25; color:var(--ink); letter-spacing:-0.015em; margin:0 0 10px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .pillar h3 .chip{ position:relative; top:-2px; }
  .pillar p{
    font-family:var(--font-body); font-size:14.5px; line-height:1.55;
    color:var(--ink-2); margin:0 0 18px;
  }
  /* Mini-preview tables (reais — espelham UI da plataforma) */
  .mini{
    margin-top:auto; background:#fff; border:1px solid var(--border);
    border-radius:var(--r-md); padding:0; overflow:hidden;
  }
  .mini-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px 8px; border-bottom:1px solid var(--border);
    background:#fbfafa;
  }
  .mini-top .mt-title{
    font-family:var(--font-body); font-weight:600; font-size:12px;
    color:var(--ink); letter-spacing:-0.005em;
  }
  .mini-top .mt-new{
    display:inline-flex; align-items:center; gap:4px;
    background:#4c3ad6; color:#fff; border-radius:6px;
    font-family:var(--font-body); font-weight:600; font-size:10.5px;
    padding:3px 7px; line-height:1;
  }
  .mini-top .mt-new svg{ width:10px; height:10px; stroke-width:2.5; }
  .mini-head-row{
    display:grid; grid-template-columns:1fr 0.85fr auto;
    padding:8px 12px; gap:8px;
    font-family:var(--font-body); font-size:10px; font-weight:500;
    text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
    border-bottom:1px solid var(--border);
  }
  .mini-row2{
    display:grid; grid-template-columns:1fr 0.85fr auto;
    padding:9px 12px; gap:8px; align-items:center;
    border-bottom:1px solid var(--border);
    font-family:var(--font-body); font-size:11.5px;
    min-width:0;
  }
  .mini-row2:last-child{ border-bottom:0; }
  .mini-row2.sub{
    padding:6px 12px 6px 28px; background:#fbfafa;
    font-size:10.5px;
  }
  .mini-row2.sub .cell-val .v1{ font-size:10.5px; font-weight:500; color:var(--ink-2); }
  .mini-row2.sub .cell-val .v2{ font-size:9.5px; }
  .mini-row2.sub .cell-client svg{ width:9px; height:9px; }
  .mini-row2.sub::before{
    content:"\21B3"; position:absolute; left:14px;
    color:var(--muted); font-size:11px;
  }
  .mini-row2.sub{ position:relative; }
  .mini-row2 .cell-val{
    display:flex; flex-direction:column; gap:1px; min-width:0;
  }
  .mini-row2 .cell-val .v1{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mini-row2 .cell-val .v2{ font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mini-row2 .cell-client{
    display:flex; align-items:center; gap:5px; color:var(--ink); font-weight:500;
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mini-row2 .cell-client svg{ width:10px; height:10px; stroke-width:2; color:var(--muted); flex-shrink:0; }
  .mini-row2 .cell-status{ display:flex; justify-content:flex-end; }

  /* Status pills — match platform */
  .mini .st{
    display:inline-flex; align-items:center;
    font-family:var(--font-body); font-weight:500; font-size:9.5px;
    padding:2px 7px; border-radius:10px; line-height:1.4; white-space:nowrap;
  }
  .mini .st-active{ background:#e6f6ec; color:#1f7a3e; }
  .mini .st-cancel{ background:#fde9e7; color:#b0443a; }
  .mini .st-wait  { background:#e1ebff; color:#3b5db0; }
  .mini .st-done  { background:#ececf0; color:#4b5563; }

  /* ======== Mini phone mocks (Três usos) ======== */
  .pmini{
    margin-top:auto;
    width:100%; max-width:240px;
    margin-left:auto; margin-right:auto;
    align-self:center;
    background:#1a1f35;
    border-radius:32px;
    padding:8px;
    box-shadow: 0 20px 50px -20px rgba(26,31,53,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
    position:relative;
  }
  .pmini::before{
    content:""; position:absolute;
    top:14px; left:50%; transform:translateX(-50%);
    width:80px; height:22px;
    background:#0e1226; border-radius:14px;
    z-index:2;
  }
  .pmini-screen{
    background:#fff; border-radius:26px;
    overflow:hidden; aspect-ratio:9/19.5;
    display:flex; flex-direction:column;
    position:relative;
  }
  .pmini-statusbar{
    height:36px; padding:10px 18px 0;
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--font-body); font-size:10px; font-weight:600; color:var(--ink);
    flex-shrink:0;
  }
  .pmini-statusbar .pmini-icons{ display:flex; gap:4px; }
  .pmini-statusbar .pmini-icons span{ width:12px; height:8px; background:var(--ink); border-radius:1px; opacity:.85; }
  .pmini-statusbar .pmini-icons span:nth-child(2){ width:10px; border-radius:50%; height:8px; }
  .pmini-statusbar .pmini-icons span:nth-child(3){ width:14px; border-radius:2px; }

  /* Topbar (hamburger + title + settings + plus) */
  .pmini-topbar{
    padding:8px 12px 12px;
    display:grid; grid-template-columns:auto 1fr auto auto; gap:8px;
    align-items:center; border-bottom:1px solid var(--border);
  }
  .pmini-topbar .pm-burger{
    width:18px; display:flex; flex-direction:column; gap:3px;
  }
  .pmini-topbar .pm-burger span{
    height:2px; background:var(--ink); border-radius:1px;
  }
  .pmini-topbar h4{
    font-family:var(--font-display); font-weight:700;
    font-size:14px; letter-spacing:-0.01em; color:var(--ink); margin:0;
  }
  .pmini-topbar .pm-icon{
    width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
    color:var(--ink-2);
  }
  .pmini-topbar .pm-icon svg{ width:14px; height:14px; }
  .pmini-topbar .pm-add{
    width:24px; height:24px; border-radius:50%;
    background:#5b4ae8; color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .pmini-topbar .pm-add svg{ width:14px; height:14px; stroke-width:2.5; }

  /* Search */
  .pmini-search{
    margin:10px 12px 0;
    background:#f6f7fb; border-radius:99px;
    padding:7px 12px;
    display:flex; align-items:center; gap:6px;
    flex-shrink:0;
  }
  .pmini-search svg{ width:11px; height:11px; color:var(--muted); }
  .pmini-search span{
    font-family:var(--font-body); font-size:9.5px; color:var(--muted);
  }

  /* Table */
  .pmini-table{
    flex:1;
    display:flex; flex-direction:column;
    overflow:hidden;
    margin-top:8px;
  }
  .pmini-thead{
    display:grid; grid-template-columns:1fr 1.4fr auto; gap:8px;
    padding:8px 12px; border-bottom:1px solid var(--border);
    font-family:var(--font-body); font-weight:600; font-size:9.5px;
    color:var(--ink-2);
  }
  .pmini-trow{
    display:grid; grid-template-columns:1fr 1.4fr auto; gap:8px;
    padding:9px 12px; border-bottom:1px solid var(--border);
    align-items:center;
  }
  .pmini-trow .pm-plan{
    display:flex; flex-direction:column; gap:1px; min-width:0;
  }
  .pmini-trow .pm-plan .pm-price{
    font-family:var(--font-display); font-weight:700; font-size:11px;
    color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
  }
  .pmini-trow .pm-plan .pm-pname{
    font-family:var(--font-body); font-size:9px; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pmini-trow .pm-cli{
    display:flex; align-items:center; gap:6px; min-width:0;
    font-family:var(--font-body); font-size:9.5px; color:var(--ink);
  }
  .pmini-trow .pm-cli .pm-av{
    width:18px; height:18px; border-radius:50%; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-body); font-weight:700; font-size:8px;
    color:var(--terra-deep); background:var(--cream-dark);
    letter-spacing:0;
  }
  .pmini-trow .pm-cli span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pmini-trow .pm-badge{
    font-family:var(--font-body); font-weight:600; font-size:8px;
    padding:2px 6px; border-radius:99px; line-height:1;
    background:#e6f6ec; color:#1f7a3e; white-space:nowrap;
  }

  /* Pagination */
  .pmini-pag{
    padding:8px 12px;
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--border);
    font-family:var(--font-body); font-size:8.5px; color:var(--muted);
    flex-shrink:0;
  }
  .pmini-pag .pm-pages{ display:flex; gap:3px; }
  .pmini-pag .pm-pg{
    min-width:14px; height:14px; padding:0 4px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:3px;
    font-size:8px; color:var(--ink-2); background:#fff;
  }
  .pmini-pag .pm-pg.is-on{ background:#5b4ae8; color:#fff; border-color:#5b4ae8; }

  .pmini-homebar{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:6px; width:64px; height:3px; border-radius:2px;
    background:var(--ink); opacity:.4;
  }

  /* ======== Pillars of value (section 05) ======== */
  .pvalue{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .pcard{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
    padding:36px; position:relative; display:flex; flex-direction:column; gap:16px;
  }
  .pvalue .pcard:not(.dark){ gap:24px; }
  .pcard.dark{ background:var(--navy); color:var(--cream); border-color:transparent; }
  .pcard .big-num{
    font-family:var(--font-display); font-weight:800;
    font-size:96px; line-height:0.95; letter-spacing:-0.04em;
    color:var(--terra); margin:0;
    font-variant-numeric:tabular-nums;
  }
  .pcard.dark .big-num{ color:var(--terra-on-dark); }
  .pcard h3{
    font-family:var(--font-display); font-weight:800;
    font-size:28px; line-height:1.15; letter-spacing:-0.02em; margin:0;
  }
  .pcard.dark h3{ color:var(--cream); }
  .pcard p{
    font-family:var(--font-body); font-size:15px; line-height:1.55;
    color:var(--ink-2); margin:0;
  }
  .pcard.dark p{ color:rgba(250,247,240,.75); }
  .pcard ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .pcard li{ display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:14px; color:var(--ink-2); line-height:1.45; }
  .pcard.dark li{ color:rgba(250,247,240,.85); }
  .pcard li svg{ width:16px; height:16px; stroke-width:2; color:var(--terra); flex-shrink:0; margin-top:2px; }
  .pcard.dark li svg{ color:var(--terra-on-dark); }
  .pcard .fine{ font-family:var(--font-body); font-size:12px; color:var(--muted); margin-top:4px; }
  .pcard .fine.fine-sm{ font-size:11px; }
  .pcard.dark .fine{ color:rgba(250,247,240,.5); }
  .wa-screenshot{
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(250,247,240,.12);
    box-shadow:0 6px 22px rgba(0,0,0,.25);
    background:#0b141a;
  }
  .wa-screenshot img{
    display:block;
    inline-size:100%;
    block-size:auto;
  }
  .pvalue .pcard.dark .wa-screenshot{
    max-inline-size:340px;
    margin-inline:auto;
  }

  /* WhatsApp mock (realistic) */
  .wa-mock{
    background:#0b141a;
    border-radius:14px;
    padding:0; overflow:hidden;
    box-shadow:0 6px 22px rgba(0,0,0,.25);
    font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }
  .wa-head{
    display:flex; align-items:center; gap:12px;
    background:#202c33; padding:10px 14px; color:#e9edef;
  }
  .wa-head .ava{
    width:36px; height:36px; border-radius:50%;
    background:#d47b67; color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; letter-spacing:-.02em;
    font-family:var(--font-display);
  }
  .wa-head .who{
    flex:1; display:flex; flex-direction:column; gap:1px;
  }
  .wa-head .who .n{ font-size:14px; font-weight:600; color:#e9edef; line-height:1.2; }
  .wa-head .who .s{ font-size:11px; color:#8696a0; line-height:1.2; }
  .wa-head .ic{ color:#aebac1; display:flex; gap:16px; }
  .wa-head .ic svg{ width:18px; height:18px; stroke-width:2; }
  .wa-body{
    background:#0b141a;
    background-image:
      radial-gradient(circle at 10% 10%, rgba(255,255,255,.012) 1px, transparent 1px),
      radial-gradient(circle at 80% 40%, rgba(255,255,255,.012) 1px, transparent 1px),
      radial-gradient(circle at 30% 70%, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size:180px 180px, 220px 220px, 200px 200px;
    padding:14px 12px; display:flex; flex-direction:column; gap:6px;
  }
  .wa-body .day{
    align-self:center; background:rgba(27,42,51,.9); color:#8696a0;
    font-size:11px; padding:4px 10px; border-radius:8px; margin-bottom:4px;
  }
  .wa-bubble{
    max-width:82%; padding:6px 8px 5px 10px; border-radius:8px;
    font-size:13.5px; line-height:1.4; color:#e9edef;
    position:relative; box-shadow:0 1px 0.5px rgba(0,0,0,.13);
  }
  .wa-bubble.in{
    align-self:flex-start; background:#202c33;
    border-top-left-radius:2px;
  }
  .wa-bubble.out{
    align-self:flex-end; background:#005c4b;
    border-top-right-radius:2px;
  }
  .wa-bubble .msg-text{ color:#e9edef; }
  .wa-bubble .msg-text a{ color:#53bdeb; text-decoration:underline; word-break:break-all; }
  .wa-bubble .msg-text b{ color:#e9edef; font-weight:600; }
  .wa-bubble .meta{
    display:inline-flex; align-items:center; gap:3px;
    float:right; margin:6px 0 -2px 8px;
    font-size:10.5px; color:#8696a0;
  }
  .wa-bubble.out .meta{ color:rgba(255,255,255,.6); }
  .wa-bubble .meta svg{ width:14px; height:14px; stroke-width:2; color:#53bdeb; }
  .wa-bubble .link-card{
    background:rgba(0,0,0,.18); border-left:3px solid #25d366;
    padding:8px 10px; border-radius:4px; margin:4px 0 6px;
    display:flex; flex-direction:column; gap:2px;
  }
  .wa-bubble.in .link-card{ background:rgba(255,255,255,.04); border-left-color:#53bdeb; }
  .wa-bubble .link-card .lt{ font-size:12px; font-weight:600; color:#e9edef; }
  .wa-bubble .link-card .lu{ font-size:11px; color:#53bdeb; }
  .wa-bubble .doc{
    display:flex; align-items:center; gap:10px;
    background:rgba(0,0,0,.18); padding:8px 10px; border-radius:6px;
    margin:4px 0 6px;
  }
  .wa-bubble.in .doc{ background:rgba(255,255,255,.04); }
  .wa-bubble .doc .dic{
    width:32px; height:32px; border-radius:4px; background:rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center; color:#aebac1; flex-shrink:0;
  }
  .wa-bubble .doc .dic svg{ width:18px; height:18px; stroke-width:1.75; }
  .wa-bubble .doc .dn{ font-size:12px; font-weight:600; color:#e9edef; }
  .wa-bubble .doc .dm{ font-size:10.5px; color:#8696a0; }
  .wa-foot{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; background:#0b141a;
    border-top:1px solid rgba(134,150,160,.08);
  }
  .wa-foot .inp{
    flex:1; background:#2a3942; border-radius:20px; padding:8px 12px;
    font-size:12.5px; color:#8696a0;
  }
  .wa-foot .snd{
    width:34px; height:34px; border-radius:50%; background:#00a884;
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .wa-foot .snd svg{ width:17px; height:17px; stroke-width:2; }

  /* ======== Case (section 06) ======== */
  .case-wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:32px; align-items:stretch; }
  .case-photo{
    background:var(--navy); border-radius:var(--r-xl); min-height:360px;
    display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
    position:relative; overflow:hidden;
  }
  .case-photo::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 20% 15%, rgba(233,168,153,.18), transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(38,64,154,.4), transparent 50%);
  }
  .case-photo .badge{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:var(--r-pill);
    background:rgba(250,247,240,.12); color:var(--cream);
    font-family:var(--font-body); font-size:12px; font-weight:600;
    align-self:flex-start; margin-bottom:auto;
  }
  .case-photo .badge svg{ width:13px; height:13px; stroke-width:2; color:var(--terra-on-dark); }
  .case-photo .brand{
    position:relative; font-family:var(--font-display); font-weight:800;
    font-size:42px; letter-spacing:-0.02em; color:var(--cream); line-height:1;
  }
  .case-photo .brand .dot{ color:var(--terra-on-dark); }
  .case-photo .meta{
    position:relative; font-family:var(--font-body); font-size:13px;
    color:rgba(250,247,240,.65); margin-top:8px;
  }
  .case-body{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
    padding:36px; display:flex; flex-direction:column; gap:20px;
  }
  .case-quote{
    font-family:var(--font-display); font-weight:700;
    font-size:24px; line-height:1.35; letter-spacing:-0.015em;
    color:var(--ink); margin:0; position:relative; padding-left:16px;
    border-left:3px solid var(--terra);
  }
  .case-who{
    font-family:var(--font-body); font-size:14px; color:var(--ink-2);
    padding-top:12px; border-top:1px solid var(--border);
  }
  .case-who .name{ font-weight:600; color:var(--ink); }
  .case-who .meta{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:4px; }
  .case-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  .case-stat{
    background:var(--cream); border:1px solid var(--border); border-radius:var(--r-md);
    padding:14px; text-align:left;
  }
  .case-stat .n{
    font-family:var(--font-display); font-weight:800; font-size:30px;
    letter-spacing:-0.02em; color:var(--terra); line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .case-stat .l{
    font-family:var(--font-body); font-size:12px; color:var(--ink-2);
    line-height:1.3; margin-top:6px;
  }

  /* ======== Pricing (06) ======== */
  .plans{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; align-items:stretch; }
  .plan{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
    padding:28px 24px; display:flex; flex-direction:column; gap:14px;
    position:relative; transition:box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
  }
  .plan:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
  .plan[data-recommended="true"]{ border-color:var(--terra); box-shadow:0 0 0 3px rgba(212,123,103,.12), var(--shadow-1); }
  .plan[data-match="true"]{ border-color:var(--terra); box-shadow:0 0 0 3px rgba(212,123,103,.18), var(--shadow-2); transform:translateY(-2px); }
  .plan .rec-tag{
    position:absolute; top:-10px; left:24px;
    background:var(--terra); color:var(--cream);
    font-family:var(--font-body); font-weight:700; font-size:10px;
    letter-spacing:.1em; text-transform:uppercase;
    padding:4px 10px; border-radius:var(--r-pill); line-height:1;
    display:none;
  }
  .plan[data-recommended="true"] .rec-tag{ display:inline-flex; }
  .plan h5{
    font-family:var(--font-display); font-weight:800; font-size:22px;
    line-height:1.2; letter-spacing:-0.015em; color:var(--ink); margin:0;
  }
  .plan .desc{
    font-family:var(--font-body); font-size:13px; color:var(--ink-2);
    line-height:1.5; min-height:56px;
  }
  .plan .price{
    font-family:var(--font-display); font-weight:800; font-size:34px;
    line-height:1; letter-spacing:-0.02em; color:var(--ink);
    display:flex; align-items:baseline; gap:6px;
    font-variant-numeric:tabular-nums;
    padding-bottom:14px; border-bottom:1px solid var(--border);
  }
  .plan .price .per{
    font-family:var(--font-body); font-weight:500; font-size:13px;
    color:var(--muted); letter-spacing:0;
  }
  .plan ul{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:8px; flex:1;
  }
  .plan li{
    display:flex; align-items:flex-start; gap:8px;
    font-family:var(--font-body); font-size:13.5px; color:var(--ink-2); line-height:1.45;
  }
  .plan li svg{ width:15px; height:15px; stroke-width:2; color:var(--terra); flex-shrink:0; margin-top:2px; }
  .plan .btn{ width:100%; }
  .plans-note{
    margin-top:20px; text-align:center;
    font-family:var(--font-body); font-size:13px; color:var(--muted);
  }
  @media (max-width: 900px){ .plans{ grid-template-columns:1fr; } }

  /* ======== Calculator ======== */
  .calc{
    background:var(--navy); color:var(--cream); border-radius:var(--r-xl);
    padding:32px; margin-bottom:32px;
  }
  .calc-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:24px; flex-wrap:wrap;
  }
  .calc-label{
    font-family:var(--font-body); font-weight:600; font-size:11px;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--terra-on-dark); margin-bottom:8px;
  }
  .calc-q{
    font-family:var(--font-display); font-weight:700;
    font-size:22px; line-height:1.25; letter-spacing:-0.015em;
    color:var(--cream); margin:0;
  }
  .calc-inputs{
    display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px;
  }
  .calc-field{ display:flex; flex-direction:column; gap:10px; }
  .calc-field .flabel{
    font-family:var(--font-body); font-size:14px; font-weight:500; color:rgba(250,247,240,1);
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .calc-field .fval{
    font-family:var(--font-mono); font-weight:700; font-size:17px;
    color:var(--cream); font-variant-numeric:tabular-nums;
  }
  .calc-field input[type="range"]{
    -webkit-appearance:none; appearance:none;
    height:4px; border-radius:2px; background:rgba(250,247,240,.18);
    outline:none; cursor:pointer; width:100%;
  }
  .calc-field input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--terra-on-dark); border:3px solid var(--navy);
    cursor:pointer; transition:transform var(--dur-fast);
  }
  .calc-field input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
  .calc-field input[type="range"]::-moz-range-thumb{
    width:14px; height:14px; border-radius:50%;
    background:var(--terra-on-dark); border:3px solid var(--navy); cursor:pointer;
  }
  .calc-scale{
    display:flex; justify-content:space-between;
    font-family:var(--font-mono); font-size:12px; font-weight:500;
    color:rgba(250,247,240,.75);
    margin-top:4px;
  }

  /* Comparison grid */
  .calc-cmp{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  }
  .cmp-col{
    background:var(--navy-dark); border:1px solid rgba(250,247,240,.1);
    border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:4px;
    position:relative;
  }
  .cmp-col.win{
    background:#1d6b45; border-color:rgba(255,255,255,.1);
  }
  .cmp-col .ctitle{
    font-family:var(--font-body); font-weight:600; font-size:12px;
    letter-spacing:.06em; text-transform:uppercase;
    color:rgba(250,247,240,.78); margin-bottom:10px;
  }
  .cmp-col.win .ctitle{ color:var(--cream); }
  .cmp-col .ccost{
    font-family:var(--font-display); font-weight:800; font-size:32px;
    line-height:1; letter-spacing:-0.02em; color:var(--cream);
    font-variant-numeric:tabular-nums;
  }
  .cmp-col .cper{
    font-family:var(--font-body); font-size:12px; color:rgba(250,247,240,.72);
    margin-top:2px;
  }
  .cmp-col.win .cper{ color:rgba(250,247,240,.75); }
  .cmp-col .cbreak{
    margin-top:14px; padding-top:12px; border-top:1px solid rgba(250,247,240,.08);
    display:flex; flex-direction:column; gap:4px;
    font-family:var(--font-body); font-size:12px;
  }
  .cmp-col .cbreak .row{ display:flex; justify-content:space-between; color:rgba(250,247,240,.8); }
  .cmp-col .cbreak .row .v{ font-family:var(--font-mono); color:var(--cream); }
  .cmp-col.win .cbreak{ border-top-color:rgba(255,255,255,.15); }
  .cmp-col.win .cbreak .row{ color:rgba(250,247,240,.8); }
  .cmp-col.win .cbreak .row .v{ color:var(--cream); }
  .cmp-col .cbadge{
    position:absolute; top:-10px; right:16px;
    background:var(--terra-on-dark); color:var(--navy-dark);
    font-family:var(--font-body); font-weight:700; font-size:10px;
    letter-spacing:.08em; text-transform:uppercase;
    padding:4px 10px; border-radius:var(--r-pill); line-height:1;
  }

  .calc-save{
    margin-top:20px; padding:18px 24px;
    background:rgba(233,168,153,.1); border:1px solid rgba(233,168,153,.25);
    border-radius:var(--r-lg);
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    flex-wrap:wrap;
  }
  .calc-save .sl{
    font-family:var(--font-body); font-size:14px; color:var(--cream);
  }
  .calc-save .sv{
    font-family:var(--font-display); font-weight:800; font-size:28px;
    letter-spacing:-0.02em; color:var(--terra-on-dark);
    font-variant-numeric:tabular-nums;
  }
  .calc-save .sv .per{
    font-family:var(--font-body); font-weight:500; font-size:13px;
    color:rgba(250,247,240,.82); margin-left:4px;
  }
  .calc-fine{
    margin-top:12px;
    font-family:var(--font-body); font-size:11px; color:rgba(250,247,240,.7);
    line-height:1.5;
  }
  .calc-fine-link{ color:var(--terra-on-dark); text-decoration:underline; }

  @media (width <= 640px){
    .calc-inputs, .calc-cmp{ grid-template-columns:1fr; }
  }

  /* ======== Final CTA (section 07) ======== */
  .cta-band{ background:var(--navy); color:var(--cream); padding:88px 0; }
  .cta-inner{ display:grid; grid-template-columns:1.2fr auto; gap:40px; align-items:center; }
  .cta-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(36px, 4.2vw, 56px); line-height:1.05; letter-spacing:-0.03em;
    color:var(--cream); margin:0 0 14px;
  }
  .cta-sub{ font-family:var(--font-body); font-size:16px; color:rgba(250,247,240,.72); max-width:520px; margin:0; }
  .cta-right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
  .cta-meta{ font-family:var(--font-body); font-size:12px; color:rgba(250,247,240,.55); }
  .cta-contact{
    margin-top:8px;
    padding-top:12px;
    border-top:1px solid rgba(250,247,240,.16);
    max-inline-size:360px;
    text-align:left;
  }
  .cta-contact-title{
    font-family:var(--font-body);
    font-weight:700;
    font-size:14px;
    color:var(--cream);
    margin-bottom:4px;
  }
  .cta-contact-intro{
    font-family:var(--font-body);
    font-size:13px;
    line-height:1.5;
    color:rgba(250,247,240,.72);
    margin:0 0 8px;
  }
  .cta-contact-links{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-style:normal;
  }
  .cta-contact-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-size:14px;
    color:rgba(250,247,240,.88);
    text-decoration:none;
  }
  .cta-contact-link:hover{ color:var(--cream); }
  .cta-contact-link svg{ width:16px; height:16px; flex-shrink:0; }

  /* ======== Footer ======== */
  .footer{ background:var(--navy-dark); color:var(--cream); padding:64px 0 24px; }
  .footer-inner{ display:grid; grid-template-columns:1.2fr 2fr; gap:56px; }
  .footer-brand img{ height:22px; margin-bottom:16px; }
  .footer-brand p{ font-family:var(--font-body); font-size:13px; color:rgba(250,247,240,.6); max-width:320px; line-height:1.55; margin:0; }
  .footer-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
  .footer-h{ font-family:var(--font-body); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--cream); margin-bottom:14px; }
  .footer-cols a{ display:block; font-family:var(--font-body); font-size:14px; color:rgba(250,247,240,.7); text-decoration:none; padding:4px 0; transition:color var(--dur-fast); }
  .footer-cols a:hover{ color:var(--cream); }
  .footer-bottom{
    margin-top:48px; padding-top:20px;
    border-top:1px solid rgba(250,247,240,.1);
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px 24px;
    flex-wrap:wrap;
    font-family:var(--font-body); font-size:12px; color:rgba(250,247,240,.5);
  }
  .footer-meta{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .footer-meta a{ color:rgba(250,247,240,.5); text-decoration:none; }
  .footer-meta a:hover{ color:var(--cream); }

  /* ======== Segmentos (quem usa) ======== */
  .segments{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  .segments-dots{ display:none; }
  .mech-dots{ display:none; }
  .pillars-dots{ display:none; }
  .pvalue-dots{ display:none; }
  .plans-dots{ display:none; }
  .seg{
    position:relative; border-radius:var(--r-lg); overflow:hidden;
    aspect-ratio:3/4; display:block; text-decoration:none;
    box-shadow:var(--shadow-1);
    transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .seg:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
  .seg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .seg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, transparent 30%, rgba(20,24,38,.85) 100%);
  }
  .seg .tag{
    position:absolute; top:14px; left:14px; z-index:2;
    background:rgba(250,247,240,.92); color:var(--ink);
    font-family:var(--font-body); font-size:11px; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase;
    padding:4px 10px; border-radius:var(--r-pill);
  }
  .seg .tags{
    position:absolute; top:14px; left:14px; z-index:2;
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .seg .tags .tag{
    position:static; top:auto; left:auto;
  }
  .seg .meta{
    position:absolute; bottom:16px; left:16px; right:16px; z-index:2;
    color:var(--cream);
  }
  .seg .meta h4{
    font-family:var(--font-display); font-weight:700; font-size:20px;
    line-height:1.2; letter-spacing:-0.015em; margin:0 0 4px; color:var(--cream);
  }
  .seg .meta p{
    font-family:var(--font-body); font-size:13px;
    color:rgba(250,247,240,.82); margin:0; line-height:1.4;
  }
  @media (max-width: 900px){ .segments{ grid-template-columns:1fr 1fr; } }

  /* ======== Testimonials ======== */
  .tgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  .tcard{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
    padding:28px; display:flex; flex-direction:column; gap:18px;
    transition:box-shadow var(--dur-base), transform var(--dur-base);
  }
  .tcard:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
  .tcard .stars{ display:flex; gap:2px; color:#f0a93a; }
  .tcard .stars svg{ width:16px; height:16px; fill:#f0a93a; stroke:#f0a93a; }
  .tcard blockquote{
    font-family:var(--font-display); font-weight:600; font-size:18px;
    line-height:1.4; color:var(--ink); margin:0; letter-spacing:-0.01em;
    flex:1;
  }
  .tcard .who{
    display:flex; align-items:center; gap:12px;
    padding-top:16px; border-top:1px solid var(--border);
  }
  .tcard .who .portrait{
    width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background:var(--cream-dark);
  }
  .tcard .who .portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tcard .who .info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .tcard .who .n{ font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink); }
  .tcard .who .r{ font-family:var(--font-body); font-size:12px; color:var(--muted); }
  .tcard .stat{
    display:inline-flex; align-items:baseline; gap:6px;
    padding:8px 12px; background:var(--bg-2); border-radius:var(--r-sm);
    align-self:flex-start;
  }
  .tcard .stat .sv{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--terra); font-variant-numeric:tabular-nums; letter-spacing:-0.015em; }
  .tcard .stat .sl{ font-family:var(--font-body); font-size:12px; color:var(--ink-2); }
  @media (max-width: 900px){ .tgrid{ grid-template-columns:1fr; } }

  /* ======== Case with image ======== */
  .case-photo-real{
    border-radius:var(--r-xl); overflow:hidden; min-height:360px;
    position:relative; background:var(--cream-dark);
  }
  .case-photo-real img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
  .case-photo-real .overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,24,38,0) 40%, rgba(20,24,38,.9) 100%);
  }
  .case-photo-real .badge{
    position:absolute; top:20px; left:20px;
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px; border-radius:var(--r-pill);
    background:rgba(250,247,240,.96); color:var(--ink);
    font-family:var(--font-body); font-size:12px; font-weight:600;
  }
  .case-photo-real .badge svg{ width:13px; height:13px; stroke-width:2; color:var(--terra); }
  .case-photo-real .bottom{
    position:absolute; bottom:20px; left:20px; right:20px; z-index:2;
    color:var(--cream);
  }
  .case-photo-real .brand{
    font-family:var(--font-display); font-weight:800;
    font-size:32px; letter-spacing:-0.02em; color:var(--cream); line-height:1;
  }
  .case-photo-real .brand .dot{ color:var(--terra-on-dark); }
  .case-photo-real .meta{
    font-family:var(--font-body); font-size:13px;
    color:rgba(250,247,240,.75); margin-top:8px;
  }

  /* ======== Pilar photo ======== */
  .pcard .photo-hero{
    margin:-36px -36px 0; height:220px; overflow:hidden; position:relative;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
  .pcard .photo-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pcard .photo-hero .ph-tag{
    position:absolute; bottom:14px; left:14px;
    background:rgba(255,255,255,.96); padding:6px 12px; border-radius:var(--r-pill);
    font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--ink);
    display:inline-flex; align-items:center; gap:6px;
  }
  .pcard .photo-hero .ph-tag svg{ width:13px; height:13px; stroke-width:2; color:var(--success); }

  /* ======== Feature image strip ======== */
  .feat-strip{
    display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:center;
    margin-bottom:56px;
  }
  .feat-strip.rev{ grid-template-columns:3fr 2fr; direction:rtl; }
  .feat-strip.rev > *{ direction:ltr; }
  .feat-image{
    aspect-ratio:5/4; border-radius:var(--r-xl); overflow:hidden;
    position:relative; box-shadow:var(--shadow-1);
    background:#faf7f0;
  }
  .feat-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .feat-image.has-shot{ aspect-ratio:auto; }
  .feat-image.has-shot img{ height:auto; object-fit:contain; }

  /* Janela artistic minimal */
  .feat-chrome{
    position:relative;
    border-radius:16px; overflow:hidden;
    background:#faf7f0;
    box-shadow:
      0 30px 60px -20px rgba(20,24,38,.32),
      0 12px 24px -10px rgba(20,24,38,.18),
      0 0 0 1px rgba(20,24,38,.06);
    display:flex; flex-direction:column;
    aspect-ratio: 16/13;
    width:100%;
    max-width:none;
    margin-left:0;
  }
  .fc-bar{
    flex-shrink:0;
    display:flex; align-items:center; gap:12px;
    padding:6px 14px;
    background:linear-gradient(to bottom, #efeae0, #e6e1d6);
    border-bottom:1px solid rgba(20,24,38,.08);
  }
  .fc-dots{ display:flex; gap:7px; }
  .fc-dots span{ width:11px; height:11px; border-radius:50%; }
  .fc-dots .r{ background:#ed6a5e; }
  .fc-dots .y{ background:#f5bd4f; }
  .fc-dots .g{ background:#62c554; }
  .fc-title{
    flex:1; text-align:center;
    font-family:var(--font-body); font-size:11px; font-weight:600;
    color:rgba(20,24,38,.55);
    letter-spacing:.01em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .fc-title svg.lucide-lock{
    width:12px !important;
    height:12px !important;
    display:inline-block;
    vertical-align:-1px;
    margin-right:4px;
    stroke-width:1.5;
    color:rgba(20,24,38,.4);
  }
  .fc-bar-spacer{ inline-size:48px; }
  .fc-viewport{
    flex:1; min-height:0;
    overflow:hidden;
    background:#faf7f0;
    position:relative;
  }
  .fc-viewport img{
    width:100%; height:auto;
    display:block;
    animation: dashboardScroll 14s cubic-bezier(.65,.05,.35,.95) infinite;
  }
  .feat-chrome:hover .fc-viewport img{ animation-play-state:paused; }
  .fc-hint{
    position:absolute; bottom:12px; right:12px; z-index:2;
    background:rgba(20,24,38,.78); color:#fff;
    font-family:var(--font-body); font-size:11px; font-weight:600;
    padding:6px 10px; border-radius:999px;
    display:flex; align-items:center; gap:6px;
    backdrop-filter:blur(8px);
  }
  .fc-hint svg{ width:13px; height:13px; }

  /* Scrolling dashboard animation */
  @keyframes dashboardScroll{
    0%, 8%    { transform: translateY(0%); }
    48%, 64%  { transform: translateY(-31%); }
    92%, 100% { transform: translateY(0%); }
  }
  .feat-image .float{
    position:absolute; background:#fff; border-radius:var(--r-lg);
    box-shadow:0 10px 28px rgba(20,24,38,.16); padding:12px 14px;
  }
  .feat-image .float.br{ bottom:20px; right:20px; }
  .feat-image .float.tl{ top:20px; left:20px; }
  .feat-copy h3{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(28px, 3vw, 38px); line-height:1.1; letter-spacing:-0.02em;
    color:var(--ink); margin:0 0 14px;
  }
  .feat-copy p{
    font-family:var(--font-body); font-size:16px; line-height:1.55;
    color:var(--ink-2); margin:0 0 20px;
  }
  .feat-copy ul{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:12px; }
  .feat-copy li{ display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:14.5px; color:var(--ink-2); line-height:1.5; }
  .feat-copy li svg{ width:18px; height:18px; stroke-width:2; color:var(--terra); flex-shrink:0; margin-top:2px; }

  /* ======== CTA with photo ======== */
  .cta-band{ position:relative; overflow:hidden; }
  .cta-band .bg-img{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    opacity:.18;
  }
  .cta-band .bg-img::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--navy) 0%, rgba(20,24,38,.7) 100%);
  }
  .cta-band .container{ position:relative; z-index:1; }

  @media (width <= 900px){
    .hero-grid, .tgrid, .feat-strip{ grid-template-columns:1fr !important; }
    .hero-bullets{ grid-template-columns:1fr; }
    .hv-float{ display:none; }
    .hero-split, .mech, .pillars, .pvalue, .case-wrap, .cta-inner, .footer-inner, .footer-cols{ grid-template-columns:1fr; }
    .nav-links{ display:none; }

    /* Mobile nav: cream-translucent default; the `.scrolled` class (toggled by
       landing_page_nav_controller) flips it to navy-translucent. Children pick
       up the matching color via descendant selectors below. */
    .nav{
      background:rgba(250,247,240,.92);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-bottom-color:rgba(24,39,82,.06);
    }
    .nav-brand img{ transition:filter .25s ease; filter:brightness(0); }

    .nav.scrolled{
      background:rgba(24,39,82,.94);
      border-bottom-color:rgba(233,168,153,.18);
      box-shadow:0 6px 18px rgba(0,0,0,.22);
    }
    .nav.scrolled .nav-brand img{ filter:none; }
    .nav.scrolled .nav-enter{ color:rgba(250,247,240,.85); }
    .nav.scrolled .nav-burger{ color:var(--cream); }
    .nav.scrolled .nav-burger:hover{ background:rgba(250,247,240,.08); }
    .nav.scrolled .nav-burger:focus-within{ box-shadow:var(--focus-ring-on-dark); }

    /* Right cluster: keep "Entrar" + hamburger; hide the small "Começar grátis" button */
    .nav-cta{ display:inline-flex; align-items:center; gap:10px; margin-inline-start:auto; }
    .nav-cta-button{ display:none; }
    .nav-enter{
      display:inline; padding:0;
      font-family:var(--font-body); font-size:14px; font-weight:600;
      color:var(--ink-2); text-decoration:none;
    }

    /* Hamburger 40×40, no border, lines 18×2 */
    .nav-burger{
      display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
      inline-size:40px; block-size:40px; padding:0;
      margin-inline-start:10px;
      cursor:pointer;
      border:0;
      border-radius:9px;
      color:var(--ink);
      background:transparent;
      transition:background var(--dur-fast) var(--ease-out), color .25s ease;
    }
    .nav-burger:hover{ background:rgba(24,39,82,.04); }
    .nav-burger:focus-within{ outline:none; box-shadow:var(--focus-ring); }
    .nav-burger-line{
      display:block; inline-size:18px; block-size:2px;
      background:currentColor; border-radius:2px;
      transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
      transform-origin:center;
    }

    /* Overlay (clickable backdrop that closes the drawer) */
    .nav-overlay{
      display:block;
      position:fixed; inset:0; z-index:19;
      background:rgba(15,25,53,.55);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
      opacity:0; pointer-events:none;
      transition:opacity var(--dur-base) var(--ease-out);
    }

    /* Drawer (slides from the right) — cream panel with navy text per v3 */
    .nav-drawer{
      display:flex; flex-direction:column; gap:0;
      position:fixed; inset-block:0; inset-inline-end:0; z-index:21;
      inline-size:78vw;
      padding:60px 22px 22px;
      background:var(--cream);
      color:var(--ink);
      box-shadow:-12px 0 36px rgba(0,0,0,.18);
      transform:translateX(100%);
      transition:transform .3s cubic-bezier(.32,.72,0,1);
      overflow-y:auto;
    }
    /* Close X — pure CSS pseudo-elements, ink color for contrast on cream panel */
    .nav-drawer-close{
      position:absolute;
      inset-block-start:14px; inset-inline-end:14px;
      inline-size:34px; block-size:34px;
      cursor:pointer;
      color:var(--ink);
      border-radius:9px;
      transition:background var(--dur-fast) var(--ease-out);
    }
    .nav-drawer-close:hover{ background:rgba(24,39,82,.06); }
    .nav-drawer-close::before,
    .nav-drawer-close::after{
      content:"";
      position:absolute;
      inset-block-start:50%; inset-inline-start:50%;
      inline-size:18px; block-size:2px;
      background:currentColor;
      border-radius:2px;
      transform-origin:center;
    }
    .nav-drawer-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
    .nav-drawer-close::after{ transform:translate(-50%,-50%) rotate(-45deg); }

    /* Drawer links — plain <a>; landing_page_drawer_controller closes on click. */
    .nav-drawer a{
      display:flex; align-items:center; justify-content:space-between;
      color:var(--ink);
      font-family:var(--font-display); font-size:20px; font-weight:700;
      letter-spacing:-0.01em;
      text-decoration:none;
      padding-block:16px;
      border-block-end:1px solid rgba(24,39,82,.08);
    }
    .nav-drawer a:hover{ color:var(--terra); }
    .nav-drawer a svg{ inline-size:14px; block-size:14px; color:var(--muted); }
    .nav-drawer a.nav-drawer-dev{ font-family:var(--font-mono); font-size:16px; color:var(--terra); }
    .nav-drawer a.nav-drawer-dev:hover{ color:var(--terra-h); }

    /* Login footer — pinned to bottom, separated by hairline */
    .nav-drawer-login{
      display:flex; flex-direction:column; gap:8px;
      margin-block-start:auto;
      padding-block-start:20px;
      border-block-start:1px solid rgba(24,39,82,.10);
    }
    .nav-drawer-login a{
      display:flex; align-items:center; justify-content:center;
      border-block-end:0;
      border-radius:12px;
      font-family:var(--font-body); font-size:14px; font-weight:600;
      padding:14px 18px;
    }
    .nav-drawer-login .nav-drawer-enter{
      background:#fff;
      color:var(--ink);
      border:1px solid var(--border-2);
      transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .nav-drawer-login .nav-drawer-enter:hover{
      background:var(--cream-dark);
      border-color:rgba(24,39,82,.18);
    }
    .nav-drawer-login .nav-drawer-cta{
      background:var(--terra);
      color:var(--cream);
    }
    .nav-drawer-login .nav-drawer-cta:hover{ background:var(--terra-h); color:var(--cream); }

    /* Open state — driven by :has(checkbox:checked) */
    body:has(.nav-menu-toggle:checked) .nav-overlay{
      opacity:1; pointer-events:auto;
    }
    body:has(.nav-menu-toggle:checked) .nav-drawer{
      transform:translateX(0);
    }
    body:has(.nav-menu-toggle:checked) .nav-burger-line:nth-child(1){
      transform:translateY(5.5px) rotate(45deg);
    }
    body:has(.nav-menu-toggle:checked) .nav-burger-line:nth-child(2){
      opacity:0;
    }
    body:has(.nav-menu-toggle:checked) .nav-burger-line:nth-child(3){
      transform:translateY(-5.5px) rotate(-45deg);
    }

    /* Anchored sections account for the sticky nav so the anchor lands below it,
       not hidden behind. Also: no body scroll-lock — locking interferes with the
       hash navigation that fires in the same tick the drawer closes. */
    section[id]{ scroll-margin-block-start:64px; }
  }

  /* ======== Mobile (≤640px) ======== */
  @media (width <= 640px){
    :root{ --page-gutter: 18px; }
    :root{ --mobile-carousel-card-width: 86%; }
    .container{ padding-inline:var(--page-gutter); }

    /* Nav — compact, ~52px effective height (right cluster + burger styling come from ≤900px) */
    .nav-inner{ padding-block:9px; padding-inline:18px; gap:0; }
    .nav-brand img{ height:28px !important; }

    /* Hero — vertical stack tuned to v3, tighter padding on mobile */
    .hero{ padding-block:20px 16px; }
    .hero-grid{ gap:16px; }
    .persona-switch{
      inline-size:100%;
      justify-content:center;
      gap:4px;
      padding:4px;
      margin-block-end:14px;
      background:var(--cream-dark);
      border:1px solid var(--border-2);
      border-radius:999px;
    }
    .persona-pill{
      flex:1;
      justify-content:center;
      font-size:11.5px; font-weight:600;
      padding:8px 6px;
      border-radius:999px;
    }
    .hero-title{ font-size:30px !important; line-height:1.04; letter-spacing:-0.035em; margin-block-end:14px; }
    /* Body text unified at mobile: hero lede + section sub-lede share size */
    .hero-lede,
    .sec-lede{ font-size:14px; line-height:1.5; margin-block-end:18px; }
    .hero-ctas{ flex-direction:column; align-items:stretch; gap:9px; margin-block-end:18px; }
    .hero-ctas .btn{ inline-size:100%; justify-content:center; block-size:46px; border-radius:11px; font-size:14px; }
    .hero-bullets{
      display:grid !important;
      grid-template-columns:1fr 1fr;
      gap:8px 12px;
      margin:0 0 18px;
      padding:0;
      list-style:none;
    }
    .hero-bullets li{ font-size:13px; gap:6px; align-items:flex-start; }
    .hero-visual{ min-height:auto; margin-top:8px; }
    .hv-main{ aspect-ratio:4/5; }
    .hv-badge{ font-size:12px !important; padding:10px 14px !important; }
    .hv-float-dev{ display:none; }

    /* Hero showcase shrinks for mobile */
    .hv-showcase{ padding:24px 8px 32px; transform:scale(.94); transform-origin:center top; }
    .hv-laptop{ width:100%; transform:none; }
    .hv-app{ grid-template-columns:96px 1fr; min-height:300px; }
    .hv-app .lp-side{ padding:10px 6px; }
    .hv-app .lp-brand{ font-size:11px; padding:4px 4px 10px; }
    .hv-app .lp-nav{ padding:6px 6px; font-size:10.5px; }
    .hv-app .lp-section-h{ padding:5px 6px 3px; }
    .hv-app .lp-main{ padding:12px 12px; }
    .hv-app .lp-h h4{ font-size:13px; }
    .hv-app .lp-kpi .k-v{ font-size:14px; }
    .hv-mobile{ width:120px; right:6px; bottom:-18px; transform:none; }
    .hv-fcard.tl{ top:-8px; left:8px; }
    .hv-fcard.ml{ display:none; }
    .hv-fcard.br{
      right:10px;
      bottom:10px;
      max-inline-size:calc(100% - 20px);
    }
    .hv-fcard{ font-size:11px; padding:7px 10px; }
    .hv-fcard .v{ font-size:12px; }
    .hv-fcard .l{ font-size:9.5px; }
    .hv-fcard .ic{ width:26px; height:26px; }
    .hv-code .hvc-body{ padding:16px 14px; font-size:11.5px; line-height:1.6; }
    .hv-code .hvc-resp{ padding:14px; font-size:11px; }
    .hv-code .hvc-bar{ padding:10px 14px; }

    /* Section headings + spacing — tighter on mobile to avoid dead space */
    section{ padding-block:32px !important; }
    .sec--segments{ padding-block-start:24px !important; }
    h2, .section-title{ font-size:clamp(30px, 7vw, 40px) !important; letter-spacing:-0.025em; line-height:1.05; }
    .eyebrow{ font-size:12px; }

    /* Grid sections fall to 1col */
    .segments{
      display:flex;
      gap:12px;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:0;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      margin-inline:0;
      padding-inline:0;
    }
    .segments::-webkit-scrollbar{ display:none; }
    .segments .seg{
      flex:0 0 80%;
      scroll-snap-align:start;
      scroll-snap-stop:always;
      aspect-ratio:3/4;
    }
    .segments .seg:last-child{ margin-inline-end:0; }
    .segments-dots{
      display:flex;
      justify-content:center;
      gap:6px;
      margin-top:14px;
    }
    .segments-dots span{
      inline-size:7px;
      block-size:7px;
      border-radius:999px;
      background:rgba(24,39,82,.18);
      transition:background var(--dur-fast), inline-size var(--dur-fast);
    }
    .segments-dots span.is-active{
      background:var(--terra);
      inline-size:18px;
      border-radius:4px;
    }
    /* Mecânica: vertical list of cards with breathing space between them */
    .mech{
      display:flex;
      flex-direction:column;
      gap:10px;
      overflow:visible;
      margin-inline:0;
      padding-inline:0;
      margin-block-start:14px;
    }
    .mech .step{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px 16px;
      flex:initial;
      inline-size:auto;
    }
    .mech .step .n{
      font-family:var(--font-display);
      font-size:24px; font-weight:800;
      color:var(--terra);
      min-inline-size:32px;
      font-variant-numeric:tabular-nums;
      flex:0 0 auto;
    }
    .mech .step .ic{
      inline-size:32px; block-size:32px;
      border-radius:9px;
      background:#fff;
      color:var(--terra);
      border:1px solid var(--border-2);
      display:grid; place-items:center;
      flex:0 0 32px;
    }
    .mech .step .body{ flex:1; min-inline-size:0; }
    .mech .step h4{ font-size:15px; font-weight:700; margin:0 0 3px; }
    .mech .step p{ font-size:12.5px; line-height:1.45; color:var(--ink-2); margin:0; }
    .mech-dots{ display:none; }
    .pillars{
      display:flex;
      gap:12px;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:0;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      margin-inline:0;
      padding-inline:0;
    }
    .pillars::-webkit-scrollbar{ display:none; }
    .pillars .pillar{
      flex:0 0 var(--mobile-carousel-card-width);
      scroll-snap-align:start;
      scroll-snap-stop:always;
    }
    .pillars .pillar:last-child{ margin-inline-end:0; }
    .pillars-dots{
      display:flex;
      justify-content:center;
      gap:6px;
      margin-top:14px;
    }
    .pillars-dots span{
      inline-size:7px;
      block-size:7px;
      border-radius:999px;
      background:rgba(24,39,82,.18);
      transition:background var(--dur-fast), inline-size var(--dur-fast);
    }
    .pillars-dots span.is-active{
      background:var(--terra);
      inline-size:18px;
      border-radius:4px;
    }
    /* Pvalue: horizontal scroll carousel matching pillars */
    .pvalue{
      display:flex;
      flex-direction:row;
      gap:12px;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      margin-inline:0;
      padding-inline:0;
      margin-block-start:14px;
    }
    .pvalue::-webkit-scrollbar{ display:none; }
    .pvalue .pcard{
      flex:0 0 86%;
      scroll-snap-align:start;
      scroll-snap-stop:always;
      padding:18px 16px;
      border-radius:18px;
      box-shadow:var(--shadow-1);
    }
    .pvalue .pcard .photo-hero{ aspect-ratio:16/9; border-radius:12px; margin-block-end:14px; }
    .pvalue .pcard .big-num{ font-size:60px; line-height:1; margin-block:4px; letter-spacing:-0.045em; }
    .pvalue .pcard h3{ font-size:19px; margin:8px 0 9px; }
    .pvalue .pcard p{ font-size:12.5px; line-height:1.5; margin-block-end:12px; }
    .pvalue .pcard ul{ display:grid; gap:7px; margin:0 0 8px; }
    .pvalue .pcard li{ font-size:12px; gap:7px; }
    .pvalue .pcard.dark .wa-screenshot{ max-inline-size:100%; margin-block:10px 12px; }
    .pvalue-dots{
      display:flex;
      justify-content:center;
      gap:6px;
      margin-block-start:14px;
    }
    .pvalue-dots span{
      inline-size:7px; block-size:7px;
      border-radius:999px;
      background:rgba(24,39,82,.18);
      transition:background var(--dur-fast), inline-size var(--dur-fast);
    }
    .pvalue-dots span.is-active{
      background:var(--terra);
      inline-size:18px;
      border-radius:4px;
    }
    /* Plans: vertical stack at mobile (carousel rules dropped) */
    .plans{
      display:flex;
      flex-direction:column;
      gap:11px;
      overflow:visible;
      margin-inline:0;
      padding-block-start:12px;
      padding-inline:0;
    }
    .plans .plan{
      flex:initial;
      inline-size:auto;
    }
    .plans .plan .rec-tag{ top:-10px; left:24px; }
    .plans-dots{ display:none; }
    .case-wrap, .cta-inner, .hero-split, .footer-inner, .footer-cols, .calc-inputs, .tgrid, .feat-strip{
      grid-template-columns:1fr !important; gap:20px;
    }

    /* Cards/pricing/calculator */
    .plan{ padding:18px 16px !important; border-radius:14px; }
    .plans .plan[data-recommended="true"]{
      border:2px solid var(--terra);
      box-shadow:0 6px 18px rgba(188,74,51,.10);
    }
    .calc{ padding:16px !important; border-radius:14px; }
    .calc-wrap, .calc-card, .calc-box{ padding:20px !important; }
    .calc-head{ margin-block-end:14px; }
    .calc-q{ font-size:18px !important; line-height:1.2; }
    .tcard{ padding:22px 20px !important; }
    .cta-band{
      padding-block:36px 38px !important;
      padding-inline:18px !important;
    }
    .cta-band::before{
      content:"";
      position:absolute; inset:0; z-index:0;
      background:
        radial-gradient(circle at 20% 30%, rgba(212,123,103,.45), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(38,64,154,.50), transparent 55%);
      pointer-events:none;
    }
    .cta-band > *{ position:relative; z-index:1; }
    .cta-band .bg-img{ display:none; }
    .cta-title{ font-size:26px !important; font-weight:900; line-height:1.05; letter-spacing:-0.03em; margin-block-end:8px; }
    .cta-sub{ font-size:13px; color:rgba(250,247,240,.8); line-height:1.5; margin-block-end:16px; }
    .cta-meta{ font-family:var(--font-mono); font-size:9.5px; color:rgba(250,247,240,.55); margin-block-start:11px; text-align:center; }
    .cta-right{ flex-direction:column; align-items:stretch; gap:9px; }
    .cta-right .btn{ width:100%; justify-content:center; }

    /* Buttons a touch smaller */
    .btn-lg{ height:48px; font-size:15px; padding:0 20px; }

    /* Footer */
    .footer{ padding-block:40px 24px !important; }
    .footer-cols{ gap:28px; }

    /* Kill decorative floats that break on mobile */
    .hv-float, .split-float, .mech-float{ display:none !important; }

    /* Images responsive */
    img{ max-width:100%; height:auto; }

    /* ──── Sticky cost bar inside the calculator ──── */
    .calc-stick{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:4px;
      position:sticky;
      inset-block-start:-1px;
      z-index:5;
      margin:0 -16px 14px;
      padding:9px 10px;
      background:rgba(11,16,32,.92);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border-block-start:1px solid rgba(233,168,153,.12);
      border-block-end:1px solid rgba(233,168,153,.18);
    }
    .calc-stick-cell{
      display:flex;
      flex-direction:column;
      gap:1px;
      padding:3px 4px;
      border-radius:8px;
    }
    .calc-stick-cell .cs-l{
      font-family:var(--font-mono);
      font-size:8px;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:rgba(250,247,240,.5);
    }
    .calc-stick-cell .cs-v{
      font-size:clamp(9.5px, 2.7vw, 11px);
      font-weight:700;
      color:rgba(250,247,240,.85);
      font-variant-numeric:tabular-nums;
    }
    .calc-stick-cell.win .cs-v{ color:var(--terra-on-dark); }
    .calc-stick-cell.save{ background:rgba(233,168,153,.08); }

    /* ──── Mobile sticky CTA + WhatsApp FAB ──── */
    .sticky-cta{
      display:flex;
      gap:10px;
      align-items:center;
      position:fixed;
      inset-block-end:0;
      inset-inline:0;
      z-index:9;
      padding:10px 18px 14px;
      padding-inline-end:74px;
      background:linear-gradient(180deg, transparent 0%, rgba(250,247,240,.96) 30%, rgba(250,247,240,1) 100%);
      transform:translateY(100%);
      transition:transform .3s cubic-bezier(.32,.72,0,1);
      pointer-events:none;
    }
    .sticky-cta.show{ transform:translateY(0); }
    .sticky-cta .btn{
      flex:1;
      justify-content:center;
      pointer-events:auto;
      box-shadow:0 6px 18px rgba(188,74,51,.28);
    }

  }

  /* Extra-narrow phones */
  @media (max-width: 380px){
    .hero-title{ font-size:28px !important; }
    h2, .section-title{ font-size:24px !important; }
    .nav-dev{ display:none; }
  }

  /* Mobile-only chrome (calc-stick / sticky-cta): hide on desktop only,
     so the mobile @media rules above can take effect at ≤640px without
     being overridden by a globally-scoped display:none. */
  @media (width >= 641px){
    .calc-stick{ display:none; }
    .sticky-cta{ display:none; }
  }

  /* WhatsApp FAB: always visible (mobile + desktop) */
  .wa-fab{
    display:grid;
    place-items:center;
    position:fixed;
    inset-block-end:18px;
    inset-inline-end:18px;
    z-index:30;
    inline-size:52px; block-size:52px;
    border-radius:50%;
    background:var(--wa);
    color:#fff;
    box-shadow:0 6px 18px rgba(37,211,102,.42), 0 2px 6px rgba(0,0,0,.1);
    transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .wa-fab:hover{ background:var(--wa-h); }
  .wa-fab:active{ transform:scale(.94); }
  .wa-fab svg{ inline-size:26px; block-size:26px; }
  @media (width <= 640px){
    /* Match the sticky-cta button height (.btn-lg = 48px) so both align horizontally */
    .wa-fab{ inset-block-end:14px; inline-size:48px; block-size:48px; }
    .wa-fab svg{ inline-size:24px; block-size:24px; }
  }

/* ───────── Local additions: placeholders for assets not yet shipped ───────── */
.pcard .photo-hero .ph-svg {
  width: 100%; height: 100%;
  background:
    radial-gradient(60% 60% at 30% 50%, rgba(212,123,103,.55), transparent 60%),
    radial-gradient(50% 50% at 70% 50%, rgba(38,64,154,.35), transparent 60%),
    linear-gradient(135deg, #f5e8e1 0%, #e9d9ce 100%);
  position: relative;
}
.pcard .photo-hero .ph-svg::after {
  content: "";
  position: absolute; inset: 30% 10% 20% 10%;
  background:
    linear-gradient(180deg, transparent calc(100% - 2px), rgba(20,24,38,.4) 100%),
    linear-gradient(120deg, transparent 30%, var(--terra) 30%, var(--terra) 32%, transparent 32%) 0 70%/100% 2px no-repeat,
    linear-gradient(60deg,  transparent 30%, var(--navy) 30%, var(--navy) 32%, transparent 32%) 0 90%/100% 2px no-repeat;
}

.fc-viewport .fc-empty {
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, #faf7f0 0%, #f1ede4 100%);
  position: relative;
}
.fc-viewport .fc-empty::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(20,24,38,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,38,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: .7;
}

/* =============================================================================
   /para-o-seu-negocio — page-specific styles
   Ported 1:1 from the "Cobranzo Negocios Hi-Fi v2" canvas. Tokens flow through
   the aliases at the top of this file, so the source's `--terra`, `--navy`,
   `--cream-dark` etc. resolve to `--cob-*` underneath.
   ============================================================================= */

/* ----- Section base (hero biz overrides padding + bg) ----- */
.hero-biz { padding-block: 88px 80px; background: var(--cream); }
.sec-tight { padding-block-start: 0; }
.sec-h2-sm { font-size: clamp(28px, 3vw, 40px); }

/* ----- B-01 · Hero biz com carousel de profissões ----- */
.b1-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.b1-text .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(196, 90, 57, .1); color: var(--terra);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); margin-block-end: 18px;
}
.b1-text .eyebrow svg { inline-size: 14px; block-size: 14px; }
.b1-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 22px;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.b1-title .terra { color: var(--terra); }
.b1-lede { font-family: var(--font-body); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-inline-size: 540px; margin: 0 0 26px; }
.b1-ctas { display: flex; gap: 12px; margin-block-end: 18px; flex-wrap: wrap; }
.b1-trust { display: flex; gap: 18px; flex-wrap: wrap; }
.b1-trust .item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.b1-trust .item svg { color: var(--success); inline-size: 14px; block-size: 14px; stroke-width: 2.5; }

.b1-mock { position: relative; min-inline-size: 0; }
.b1-slider {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 36px 80px -32px rgba(20, 24, 38, .32), 0 16px 40px -20px rgba(20, 24, 38, .18);
  background: var(--ink);
}
.b1-slides { position: absolute; inset: 0; }
.b1-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease-in-out);
}
.b1-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.b1-slide img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transform: scale(1.06);
  transition: transform 6s linear;
}
.b1-slide.is-active img { transform: scale(1.12); }
.b1-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(20, 24, 38, .88) 100%);
  pointer-events: none;
}
.b1-slide figcaption {
  position: absolute; inset-inline: 24px; inset-block-end: 56px; z-index: 2;
  display: flex; flex-direction: column; gap: 10px; color: var(--cream);
}
.b1-chip {
  align-self: flex-start; background: rgba(250, 247, 240, .94); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.b1-slide figcaption p {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 18px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--cream); max-inline-size: 36ch;
}
.b1-dots {
  position: absolute; inset-inline: 0; inset-block-end: 20px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.b1-dot-btn {
  inline-size: 28px; block-size: 4px; border-radius: var(--r-pill); border: 0; padding: 0;
  background: rgba(250, 247, 240, .4); cursor: pointer;
  transition: background .25s var(--ease-out), inline-size .35s var(--ease-out);
}
.b1-dot-btn:hover { background: rgba(250, 247, 240, .65); }
.b1-dot-btn.is-active { background: var(--cream); inline-size: 40px; }

/* ----- B-02 · Comparativo (Pix Auto vs cartão vs boleto vs planilha) ----- */
.cmp-wrap { overflow-inline: auto; }
.cmp {
  inline-size: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; min-inline-size: 780px;
  box-shadow: 0 20px 50px -25px rgba(20, 24, 38, .16);
}
.cmp thead th {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--ink-2); text-align: center; padding: 18px;
  background: var(--cream); border-block-end: 1px solid var(--border);
  letter-spacing: -0.005em;
}
.cmp thead th:first-child { background: var(--cream); }
.cmp thead th.col-pix {
  background: var(--navy); color: var(--cream);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  border-block-end: 1px solid var(--navy);
}
.cmp thead th .csub {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: var(--ink-2); margin-block-start: 2px; text-transform: none; letter-spacing: 0;
}
.cmp thead th.col-pix .csub { color: rgba(250, 247, 240, .78); font-weight: 500; }
.cmp tbody td {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--ink-2); padding: 18px; text-align: center;
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
}
.cmp tbody tr:last-child td { border-block-end: none; }
.cmp tbody td.row-label {
  font-weight: 600; color: var(--ink); white-space: nowrap;
  background: var(--cream); inline-size: 200px; text-align: start;
}
.cmp tbody td.col-pix { background: rgba(196, 90, 57, .05); color: var(--ink); font-weight: 500; }
.cmp .v-yes { color: var(--success); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cmp .v-no  { color: #a94432; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cmp .v-meh { color: var(--muted); font-style: italic; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ----- B-05 · Para quem é (4 formatos) ----- */
.b5-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.b5-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s;
}
.b5-card:hover {
  transform: translateY(-3px); border-color: rgba(196, 90, 57, .35);
  box-shadow: 0 22px 44px -20px rgba(20, 24, 38, .16);
}
.b5-img { inline-size: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: var(--cream); }
.b5-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.b5-card h4 { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.b5-card p  { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }

/* ----- B-03 · Central de Assinaturas (browser mock) ----- */
.b3-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.b3-window {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 30px 70px -28px rgba(20, 24, 38, .28);
}
.b3-bar { background: var(--cream); border-block-end: 1px solid var(--border); padding: 11px 14px; display: flex; align-items: center; gap: 6px; }
.b3-dot { inline-size: 11px; block-size: 11px; border-radius: 50%; }
.b3-dot.r { background: #ec6a5e; } .b3-dot.y { background: #f4be4f; } .b3-dot.g { background: #62c554; }
.b3-url { margin-inline-start: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.b3-body { padding: 18px 20px 22px; }
.b3-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-block-end: 16px; flex-wrap: wrap; }
.b3-tabs { display: flex; gap: 4px; }
.b3-tab {
  font-family: var(--font-body); font-size: 13px; color: var(--muted);
  padding: 7px 12px; border-radius: 8px; cursor: default;
  display: inline-flex; align-items: center; gap: 6px;
}
.b3-tab.active { background: var(--cream); color: var(--ink); font-weight: 600; }
.b3-num { font-family: var(--font-mono); font-size: 11px; opacity: .7; }
.b3-actions { display: flex; gap: 6px; }
.b3-search, .b3-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; color: var(--ink-2);
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.b3-action-primary { background: var(--terra); color: var(--cream); border-color: var(--terra); }
.b3-search svg, .b3-action svg { inline-size: 13px; block-size: 13px; }
.b3-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-block-end: 14px; }
.b3-kpi { background: var(--cream); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.b3-kpi .kl { font-family: var(--font-body); font-size: 11px; color: var(--muted); }
.b3-kpi .kv { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.b3-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.b3-th, .b3-tr {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.8fr);
  gap: 10px; padding: 10px 14px; align-items: center;
  font-family: var(--font-body); font-size: 13px; color: var(--ink-2);
  border-block-end: 1px solid var(--border);
  min-inline-size: 0;
}
.b3-th > span, .b3-tr > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b3-tr:last-child { border-block-end: none; }
.b3-th { background: var(--cream); font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cell-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.avatar {
  inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--terra); color: var(--cream);
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .02em;
}
.nf { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; }
.nf-ok { background: rgba(46, 125, 87, .12); color: var(--success); }
.nf-pending { background: rgba(212, 165, 87, .18); color: #8a6418; }
.b3-notes { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.b3-notes h4 { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; }
.b3-notes ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.b3-notes li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.b3-notes li svg { color: var(--success); inline-size: 16px; block-size: 16px; flex-shrink: 0; margin-block-start: 3px; stroke-width: 2.5; }
.b3-notes li b { color: var(--ink); }

/* status pills (also used in dashboard) */
.st { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: var(--r-pill); letter-spacing: .04em; text-transform: uppercase; }
.st-active  { background: rgba(46, 125, 87, .12); color: var(--success); }
.st-due     { background: rgba(212, 165, 87, .18); color: #8a6418; }
.st-overdue { background: rgba(169, 68, 50, .12); color: #a94432; }
.mono { font-family: var(--font-mono); font-size: 12px; }

/* ----- B-04 · Calculadora de economia ----- */
.b4-calc {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20, 24, 38, .2);
}
.b4-inputs { padding: 32px 36px; border-inline-end: 1px solid var(--border); }
.b4-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 22px; }
.b4-field { padding-block: 16px; border-block-end: 1px solid var(--border); }
.b4-field:last-child { border-block-end: 0; }
.b4-field label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-body); font-size: 14px; color: var(--ink-2); margin-block-end: 10px; }
.b4-val { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--terra); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.b4-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  inline-size: 100%; block-size: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--terra) var(--p, 50%), var(--cream-dark) var(--p, 50%));
  outline: none; margin: 6px 0 4px;
}
.b4-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: var(--terra); border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(196, 90, 57, .4);
}
.b4-field input[type="range"]::-moz-range-thumb {
  inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--terra);
  border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(196, 90, 57, .4);
}
.b4-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-block-start: 4px; }
.b4-out { padding: 32px 36px; background: var(--navy); color: var(--cream); display: flex; flex-direction: column; }
.b4-mobile-summary { display: none; }
.b4-out-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(250, 247, 240, .7); margin-block-end: 8px; }
.b4-out-big {
  font-family: var(--font-display); font-weight: 800; font-size: 54px; line-height: 1;
  color: var(--cream); letter-spacing: -0.025em; margin-block-end: 6px;
  font-variant-numeric: tabular-nums;
}
.b4-out-big .per { font-size: 18px; opacity: .7; font-weight: 600; }
.b4-out-year { font-family: var(--font-body); font-size: 14px; color: rgba(250, 247, 240, .78); margin-block-end: 22px; }
.b4-out-year b { color: var(--cream); }
.b4-bk { border-block-start: 1px solid rgba(250, 247, 240, .15); padding-block-start: 16px; margin-block-end: 20px; display: flex; flex-direction: column; gap: 8px; }
.b4-bk-row { display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 13px; color: rgba(250, 247, 240, .75); }
.b4-bk-row .mono { color: var(--cream); font-family: var(--font-mono); }
.b4-pay {
  display: flex; align-items: center; gap: 10px;
  background: rgba(196, 90, 57, .18); border: 1px solid rgba(196, 90, 57, .4);
  padding: 11px 14px; border-radius: 10px; margin-block-end: 18px;
  font-family: var(--font-body); font-size: 13px; color: var(--cream);
}
.b4-pay svg { color: var(--terra-on-dark); inline-size: 16px; block-size: 16px; flex-shrink: 0; }
.b4-pay b { color: var(--cream); }
.b4-btn { inline-size: 100%; justify-content: center; }
.b4-fine { font-family: var(--font-body); font-size: 11px; color: rgba(250, 247, 240, .55); margin-block-start: 14px; line-height: 1.5; }

/* ----- B-06 · Planos (4 cards) ----- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
}
.plan:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.plan.rec { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(212, 123, 103, .12), var(--shadow-1); }
.plan .rec-tag {
  position: absolute; inset-block-start: -10px; inset-inline-start: 24px;
  background: var(--terra); color: var(--cream);
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); line-height: 1;
}
.plan h5 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.plan .desc { font-family: var(--font-body); font-size: 13px; color: var(--ink-2); line-height: 1.5; min-block-size: 56px; }
.plan .price {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
  padding-block-end: 14px; border-block-end: 1px solid var(--border);
}
.plan .price .per { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.plan li svg { inline-size: 15px; block-size: 15px; stroke-width: 2; color: var(--terra); flex-shrink: 0; margin-block-start: 2px; }
.plan .btn { inline-size: 100%; }

/* ----- B-07 · Quem usa Cobranzo (segments com imagem full-bleed) ----- */
.segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.seg {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; display: block; text-decoration: none;
  background: var(--ink);
  cursor: default;
}
.seg img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.seg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(20, 24, 38, .85) 100%);
}
.seg .tags {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.seg .tag {
  background: rgba(250, 247, 240, .92); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.seg .meta { position: absolute; inset-block-end: 16px; inset-inline: 16px; z-index: 2; color: var(--cream); }
.seg .meta h4 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 4px; color: var(--cream); }
.seg .meta p  { font-family: var(--font-body); font-size: 13px; color: rgba(250, 247, 240, .82); margin: 0; line-height: 1.4; }

/* ----- B-10 · FAQ ----- */
.faq { max-inline-size: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.faq-item[open] { border-color: rgba(196, 90, 57, .4); box-shadow: 0 14px 30px -18px rgba(20, 24, 38, .12); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.35;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { font-family: var(--font-mono); font-size: 13px; color: var(--terra); margin-inline-end: 14px; flex-shrink: 0; }
.faq-q { flex: 1; }
.faq-item summary::after {
  content: ""; flex-shrink: 0;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c45a39' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: center;
  transition: transform .25s var(--ease-out), background-color .18s;
}
.faq-item[open] summary::after { transform: rotate(180deg); background-color: rgba(196, 90, 57, .15); }
.faq-item .faq-body { padding: 0 24px 24px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.faq-item .faq-body p { margin: 0 0 12px; }
.faq-item .faq-body p:last-child { margin-block-end: 0; }
.faq-item .faq-body a { color: var(--terra); }

/* ----- Responsive (Negocios page) ----- */
@media (width <= 1100px) {
  .b1-grid  { grid-template-columns: 1fr; }
  .b3-grid  { grid-template-columns: 1fr; }
  .b5-grid  { grid-template-columns: repeat(2, 1fr); }
  .segments { grid-template-columns: repeat(2, 1fr); }
  .b3-th, .b3-tr {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  }
  .b3-th > span:nth-child(5), .b3-tr > span:nth-child(5),
  .b3-th > span:nth-child(6), .b3-tr > span:nth-child(6) { display: none; }
}
@media (width <= 900px) {
  .b1-grid, .b4-calc { grid-template-columns: 1fr; }
  .b4-inputs { border-inline-end: none; border-block-end: 1px solid var(--border); }
  .b3-kpis { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }

  /* Savings summary above sliders so the user sees current values without scrolling first. */
  .b4-mobile-summary {
    display: block;
    background: var(--navy);
    color: var(--cream);
    padding: 18px 22px 20px;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
  }
  .b4-mobile-summary .b4-out-lbl {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(250, 247, 240, .7); margin-block-end: 6px;
  }
  .b4-mobile-summary .b4-out-big {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 9vw, 44px); line-height: 1;
    color: var(--cream); letter-spacing: -0.025em; margin-block-end: 4px;
    font-variant-numeric: tabular-nums;
  }
  .b4-mobile-summary .b4-out-big .per { font-size: 16px; opacity: .7; font-weight: 600; }
  .b4-mobile-summary .b4-out-year { font-family: var(--font-body); font-size: 13px; color: rgba(250, 247, 240, .78); }
  .b4-mobile-summary .b4-out-year b { color: var(--cream); }
}
@media (width <= 700px) {
  /* Comparison table → card-per-criterion stack. Each <tr> becomes a card,
     the row-label is the card title, the 4 cells are rows with the
     competitor name injected via ::before (table-driven, no markup change). */
  .cmp-wrap { overflow: visible; }
  .cmp {
    display: block;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .cmp thead { display: none; }
  .cmp tbody { display: flex; flex-direction: column; gap: 12px; }
  .cmp tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px 4px;
    box-shadow: 0 12px 28px -18px rgba(20, 24, 38, .14);
  }
  .cmp tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    inline-size: auto;
    padding: 10px 0;
    border-block-end: 1px solid var(--border);
    text-align: start;
    vertical-align: baseline;
    background: transparent;
    color: var(--ink-2);
    font-size: 14px;
  }
  .cmp tbody td:last-child { border-block-end: 0; }
  .cmp tbody td.row-label {
    inline-size: auto;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--ink);
    border-block-end: 1px solid var(--border);
    padding-block: 4px 12px;
    margin-block-end: 4px;
    background: transparent;
    white-space: normal;
  }
  .cmp tbody td:not(.row-label)::before {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
  }
  .cmp tbody td:nth-child(2)::before { content: "Cobranzo"; color: var(--terra); font-weight: 700; }
  .cmp tbody td:nth-child(3)::before { content: "Cartão"; }
  .cmp tbody td:nth-child(4)::before { content: "Boleto"; }
  .cmp tbody td:nth-child(5)::before { content: "Planilha"; }
  .cmp tbody td.col-pix {
    background: rgba(196, 90, 57, .06);
    margin-inline: -16px;
    padding-inline: 16px;
    border-block-end-color: rgba(196, 90, 57, .14);
  }
  .cmp .v-yes, .cmp .v-no, .cmp .v-meh { justify-content: flex-end; }

  .segments {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 4px;
  }
  .segments::-webkit-scrollbar { display: none; }
  .segments .seg {
    flex: 0 0 80%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
@media (width <= 560px) {
  .b5-grid { grid-template-columns: 1fr; }
  .hero-biz { padding-block: 56px 32px; }
  .b1-text .eyebrow { margin-block-end: 14px; }
  .b1-title { font-size: clamp(28px, 7vw, 36px); }
  .b1-lede { font-size: 16px; }
  .b1-ctas .btn { flex: 1; }
  .b4-out-big { font-size: 42px; }
  .b3-body { padding: 14px; }
  .b3-toolbar .b3-actions { flex-wrap: wrap; }
}