/* ============================================================================
 * nyo-brand.css — THE marketing design system for the Nyo One suite.
 * ----------------------------------------------------------------------------
 * One file. Served from the shared embed (/shared/css/nyo-brand.css) to every
 * public surface: web_nyo (suite site) and web_lp (whitelist). It REPLACES the
 * five diverged copies of marketing.css that used to live in web_vault,
 * web_nyo, web_lp, web_finance and web_people.
 *
 * Standalone by design: it does NOT load common.css. common.css is the *app*
 * reset (14px root, navy focus ring, product tokens) and dragging it onto a
 * marketing page fights this system instead of helping it.
 *
 * IDENTITY — "The Quiet Vault" (see PRODUCT.md / DESIGN.md)
 *   Steel navy #3d4765 is the Nyo wordmark and the spine of the whole system.
 *   Brass is the vault's fittings: the one accent, used scarcely and
 *   structurally. Signal green is NOT decoration — it means state, and only
 *   ever "free / included / live".
 *   Rhythm: deep-steel hero → paper content → deep-steel close.
 *
 * BANS this file enforces by having no mechanism for them: gradient text,
 * side-stripe borders, uppercase tracked eyebrows above every section,
 * identical icon+heading+text card grids, purple gradients, arbitrary z-index.
 * ========================================================================== */

/* ---------------------------------------------------------------- Fonts ---
 * Archivo (Omnibus-Type, Buenos Aires) — a variable grotesque with real
 * institutional weight. One family carries display, body, labels and data;
 * hierarchy comes from weight and size, never from a second face.
 * Self-hosted: no CDN, no preconnect, no CSP hole, no render-blocking
 * third-party request. 45 KB for the whole system.
 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonts/Archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonts/Archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens --- */
:root {
  /* ── Steel. The wordmark navy is the spine. ───────────────────────────── */
  --b-steel-950: #0b0f1a;
  --b-steel-900: #141a2b;  /* deep ground: hero, close band, footer          */
  --b-steel-800: #1e2740;  /* raised surface on dark                         */
  --b-steel-700: #2f3854;
  --b-steel-600: #3d4765;  /* THE wordmark navy                              */
  --b-steel-500: #4f5b80;
  --b-steel-400: #8c9eea;  /* links + accents ON DARK only                   */
  --b-steel-200: #c9d1e8;
  --b-steel-100: #e6eaf4;
  --b-steel-50:  #f4f6fb;

  /* ── Brass. The vault's fittings. The one accent. Scarce. ─────────────── */
  --b-brass:      #c08a4a;  /* fills, rules, marks. 3.01:1 — NOT body text   */
  --b-brass-lift: #dcae74;  /* text ON DARK. 8.54:1 on steel-900             */
  --b-brass-deep: #8a5f2c;  /* text ON LIGHT. 5.59:1 on paper                */
  --b-on-brass:   #221602;  /* text ON a brass fill. 8.1:1                   */
  --b-brass-tint: rgba(192, 138, 74, 0.12);
  --b-brass-line: rgba(192, 138, 74, 0.32);
  --b-brass-wash: rgba(192, 138, 74, 0.14);

  /* ── Signal. STATE ONLY: free / included / live. Never decoration. ────── */
  --b-signal:      #16a24a;
  --b-signal-lift: #3ecf7f;  /* on dark                                      */
  --b-signal-deep: #0f7a37;  /* text on light. 5.45:1                        */
  --b-signal-tint: rgba(22, 162, 74, 0.10);
  --b-signal-tint-dark: rgba(62, 207, 127, 0.14);

  /* ── Danger. Form validation only. ────────────────────────────────────── */
  --b-danger:      #b81c1c;
  --b-danger-ink:  #991b1b;   /* 7.4:1 on the tint below */
  --b-danger-tint: #fef2f2;
  --b-danger-line: #fecaca;

  /* ── Paper. Cool, tinted toward steel. Never cream. ───────────────────── */
  --b-paper:   #ffffff;
  --b-paper-2: #f4f6fb;
  --b-ink:     #0d0c1f;  /* 18.9:1 on paper                                  */
  --b-ink-2:   #343258;  /* 10.4:1                                           */
  --b-ink-3:   #5b5980;  /* 6.59:1 — the LIGHTEST text permitted on paper    */
  --b-line:    #e0e3ee;
  --b-line-2:  #eef0f6;

  /* ── On dark ──────────────────────────────────────────────────────────── */
  --b-on-dark:   #e8ecf7;  /* 15.4:1 on steel-900                            */
  --b-on-dark-2: #a8b2cc;  /* 8.17:1 — the lightest text permitted on dark   */
  --b-line-dark:   rgba(168, 178, 204, 0.16);
  --b-line-dark-2: rgba(168, 178, 204, 0.08);
  /* Tonal layers on dark. Alpha-on-steel, so they survive any dark ground. */
  --b-hover-dark:   rgba(232, 236, 247, 0.06);
  --b-surface-dark: rgba(232, 236, 247, 0.07);
  --b-raised-dark:  rgba(232, 236, 247, 0.08);
  --b-mute-dark:    rgba(168, 178, 204, 0.10);
  --b-vig-dark:     rgba(232, 236, 247, 0.04);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --b-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-display: clamp(2.5rem, 1.55rem + 4.2vw, 4.75rem);   /* 40 → 76px       */
  --t-h1:      clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);   /* 34 → 56px       */
  --t-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);   /* 28 → 40px       */
  --t-h3:      clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem); /* 19 → 24px       */
  --t-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --t-amount:    2rem;      /* plan price — the page-level number         */
  --t-amount-sm: 1.75rem;   /* in-vignette balance — the drawn number      */
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;

  /* ── Space. Varied, not a metronome. ──────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --b-max: 1140px;
  --b-nav-h: 68px;

  /* ── Radius. Restrained; this is machined, not pillowy. ───────────────── */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-full: 999px;

  /* ── Elevation. Flat at rest. Shadow means it left the plane. ─────────── */
  --sh-1: 0 1px 2px rgba(13, 12, 31, 0.06);
  --sh-2: 0 6px 20px rgba(13, 12, 31, 0.08), 0 2px 6px rgba(13, 12, 31, 0.04);
  --sh-3: 0 18px 44px rgba(13, 12, 31, 0.12), 0 6px 14px rgba(13, 12, 31, 0.06);
  --sh-4: 0 32px 80px rgba(11, 15, 26, 0.40);

  /* ── Motion. Ease out, exponential. No bounce, no elastic. ────────────── */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-1: 160ms;
  --d-2: 280ms;
  --d-3: 520ms;

  /* ── Z. A semantic ladder. Never an arbitrary integer. ────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ----------------------------------------------------------------- Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

.n-body {
  font-family: var(--b-font);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--b-ink);
  background: var(--b-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The single most important line in this file: nothing may ever push the
     document wider than the viewport. The old LP shipped 154px of horizontal
     overflow because a grid track floored at min-content. */
  overflow-x: hidden;
}

.n-body img,
.n-body svg { max-width: 100%; display: block; }

/* Every glyph in the system. Stroke-only and currentColor, so an icon inherits
   whatever surface it lands on — steel on paper, brass on steel, on-dark in the
   nav. Brand marks (social) are filled: a stroked logo reads as a wireframe. */
.n-icon {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.n-icon--solid { fill: currentColor; stroke: none; }

/* Zero-specificity default so any component class wins its own color without
   an !important arms race. */
:where(.n-body) a { color: var(--b-brass-deep); text-decoration: none; }
:where(.n-body) a:hover { text-decoration: underline; text-underline-offset: 3px; }

.n-body button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.n-body input, .n-body textarea, .n-body select { font: inherit; }

/* One focus ring, everywhere, in the brand's own color. */
.n-body :focus-visible {
  outline: 2px solid var(--b-brass-deep);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.n-dark :focus-visible { outline-color: var(--b-brass-lift); }

::selection { background: var(--b-brass-tint); color: var(--b-ink); }

/* --------------------------------------------------------------- Layout --- */
.n-container { width: 100%; max-width: var(--b-max); margin: 0 auto; padding: 0 var(--s-5); }
.n-container-narrow { max-width: 760px; }

/* Section rhythm is varied on purpose — a metronome reads as a template. */
.n-section    { padding: var(--s-9) 0; scroll-margin-top: calc(var(--b-nav-h) + var(--s-4)); }
.n-section-sm { padding: var(--s-8) 0; }
.n-section-lg { padding: var(--s-10) 0; }

.n-paper-2 { background: var(--b-paper-2); }

/* Dark bands. The hero and the close; the page's two anchors. */
.n-dark {
  background: var(--b-steel-900);
  color: var(--b-on-dark);
}
.n-dark h1, .n-dark h2, .n-dark h3, .n-dark strong { color: var(--b-on-dark); }
.n-dark p { color: var(--b-on-dark-2); }
:where(.n-dark) a { color: var(--b-brass-lift); }

/* A PAPER surface inside a dark section has to take its ink back. Without this,
   `.n-dark h2` (0,1,1) beats `.n-card h2` and paints the heading of a white card
   in near-white — 1.1:1, invisible. The whitelist's capture card sits inside the
   dark hero, so this is not a corner case: it is the most important element on
   the highest-traffic page. */
.n-dark .n-card,
.n-dark .n-card h1, .n-dark .n-card h2, .n-dark .n-card h3, .n-dark .n-card strong { color: var(--b-ink); }
.n-dark .n-card p { color: var(--b-ink-2); }
.n-dark .n-card .n-muted,
.n-dark .n-card .n-form-note,
.n-dark .n-card .n-plan-note { color: var(--b-ink-3); }
.n-dark .n-card .n-consent { color: var(--b-ink-2); }
.n-dark .n-card .n-field > span { color: var(--b-ink); }
:where(.n-dark .n-card) a { color: var(--b-brass-deep); }
/* Pills too: the on-dark variant is a light green built for a dark ground, and
   on a white card it lands at 1.8:1. Take the paper variant back. */
.n-dark .n-card .n-pill-live { background: var(--b-signal-tint); color: var(--b-signal-deep); }
.n-dark .n-card .n-pill-live::before { background: var(--b-signal); }
.n-dark .n-card .n-pill-soon { background: var(--b-paper-2); color: var(--b-ink-3); }
.n-dark .n-card .n-pill-soon::before { background: var(--b-steel-200); }

/* ----------------------------------------------------------- Typography --- */
.n-display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;   /* floor is -0.04em; never tighter */
  text-wrap: balance;
}
.n-h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
.n-h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: -0.022em; text-wrap: balance; }
.n-h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3;  letter-spacing: -0.014em; text-wrap: balance; }

.n-lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--b-ink-2);
  max-width: 62ch;
}
.n-dark .n-lead { color: var(--b-on-dark-2); }

.n-prose { max-width: 68ch; text-wrap: pretty; }
.n-prose p + p { margin-top: var(--s-4); }
.n-muted { color: var(--b-ink-3); }
.n-dark .n-muted { color: var(--b-on-dark-2); }
.n-small { font-size: var(--t-sm); }
.n-xs { font-size: var(--t-xs); }

/* The section head. NO eyebrow. The heading carries itself; a tiny tracked
   label above every h2 is the AI scaffold this brand refuses. */
.n-head { max-width: 680px; margin-bottom: var(--s-7); }
.n-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.n-head p { margin-top: var(--s-3); }

/* A brass rule. Structural punctuation — the one repeating brand mark. */
.n-rule {
  width: 44px; height: 3px;
  background: var(--b-brass);
  border-radius: var(--r-full);
  margin-bottom: var(--s-4);
}
.n-head--center .n-rule { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------- Buttons --- */
.n-body .n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px;                /* 48 ≥ the 44px touch-target floor */
  padding: 0 var(--s-5);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background var(--d-1) var(--e-out),
              border-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out),
              transform var(--d-1) var(--e-out);
}
.n-body .n-btn:hover { text-decoration: none; }
.n-body .n-btn:active { transform: translateY(1px); }
.n-body .n-btn-lg { min-height: 56px; padding: 0 var(--s-6); font-size: var(--t-body); }
.n-body .n-btn-block { width: 100%; }

/* Primary: solid steel. Flat. The lift on hover is 1px — a nudge, not a jump. */
.n-body .n-btn-primary {
  background: var(--b-steel-600);
  border-color: var(--b-steel-600);
  color: #fff;
}
.n-body .n-btn-primary:hover {
  background: var(--b-steel-700);
  border-color: var(--b-steel-700);
  color: #fff;
  transform: translateY(-1px);
}

/* Brass: the "do the thing" button. Reserved for the one true CTA per view. */
.n-body .n-btn-brass {
  background: var(--b-brass);
  border-color: var(--b-brass);
  color: var(--b-on-brass);               /* dark-on-brass: 8.1:1 */
}
.n-body .n-btn-brass:hover {
  background: var(--b-brass-lift);
  border-color: var(--b-brass-lift);
  color: var(--b-on-brass);
  transform: translateY(-1px);
}

.n-body .n-btn-ghost {
  background: transparent;
  border-color: var(--b-line);
  color: var(--b-ink-2);
}
.n-body .n-btn-ghost:hover { background: var(--b-paper-2); border-color: var(--b-steel-200); color: var(--b-ink); }

.n-dark .n-btn-ghost { border-color: var(--b-line-dark); color: var(--b-on-dark); background: transparent; }
.n-dark .n-btn-ghost:hover { background: var(--b-hover-dark); border-color: var(--b-on-dark-2); color: var(--b-on-dark); }

/* ------------------------------------------------------------------ Nav --- */
.n-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--b-steel-900);
  border-bottom: 1px solid var(--b-line-dark);
}
.n-nav-inner {
  max-width: var(--b-max); margin: 0 auto; padding: 0 var(--s-5);
  height: var(--b-nav-h);
  display: flex; align-items: center; gap: var(--s-2);
}
.n-brand { display: inline-flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.n-brand:hover { text-decoration: none; }
.n-brand-word {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--b-on-dark);
}
.n-brand-word em { font-style: normal; color: var(--b-brass-lift); }

.n-nav-links { display: flex; align-items: center; gap: 2px; margin-left: var(--s-6); }
.n-nav-link {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 40px; padding: 0 var(--s-3);
  border-radius: var(--r-1);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--b-on-dark-2);
  transition: color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
}
.n-nav-link:hover { color: var(--b-on-dark); background: var(--b-hover-dark); text-decoration: none; }
.n-nav-link[aria-current="page"] { color: var(--b-on-dark); }
.n-nav-link[aria-current="page"]::after {
  content: ''; position: absolute; margin-top: 30px;
  width: 16px; height: 2px; background: var(--b-brass); border-radius: var(--r-full);
}
.n-nav-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

/* Modules dropdown. Rendered with position:absolute inside a positioned
   ancestor that does NOT clip — the nav has no overflow rule for this reason. */
.n-nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.n-menu {
  position: absolute; top: calc(100% - 6px); left: 0;
  z-index: var(--z-dropdown);
  min-width: 340px;
  padding: var(--s-3);
  background: var(--b-steel-800);
  border: 1px solid var(--b-line-dark);
  border-radius: var(--r-3);
  box-shadow: var(--sh-4);
}
.n-menu[hidden] { display: none; }
.n-menu-item {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  border-radius: var(--r-2);
  transition: background var(--d-1) var(--e-out);
}
.n-menu-item:hover { background: var(--b-hover-dark); text-decoration: none; }
.n-menu-mark {
  width: 34px; height: 34px; border-radius: var(--r-1);
  display: grid; place-items: center;
  background: var(--b-surface-dark);
  color: var(--b-on-dark);
}
.n-menu-mark svg { width: 18px; height: 18px; }
.n-menu-title { font-size: var(--t-sm); font-weight: 600; color: var(--b-on-dark); display: flex; align-items: center; gap: var(--s-2); }
.n-menu-desc { font-size: var(--t-xs); color: var(--b-on-dark-2); line-height: 1.45; margin-top: 2px; }

/* Burger — hidden above the mobile breakpoint. */
.n-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-1);
  align-items: center; justify-content: center;
  color: var(--b-on-dark);
}
.n-burger:hover { background: var(--b-hover-dark); }
.n-mobile { display: none; }

/* ---------------------------------------------------------------- State --- */
/* The only place green is allowed: it means "free / included / live". */
.n-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600;
  white-space: nowrap;
}
.n-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.n-pill-live { background: var(--b-signal-tint); color: var(--b-signal-deep); }
.n-pill-live::before { background: var(--b-signal); }
.n-pill-soon { background: var(--b-paper-2); color: var(--b-ink-3); }
.n-pill-soon::before { background: var(--b-steel-200); }
.n-dark .n-pill-live { background: var(--b-signal-tint-dark); color: var(--b-signal-lift); }
.n-dark .n-pill-live::before { background: var(--b-signal-lift); }
.n-dark .n-pill-soon { background: var(--b-mute-dark); color: var(--b-on-dark-2); }
.n-dark .n-pill-soon::before { background: var(--b-on-dark-2); }

/* --------------------------------------------------------------- Checks --- */
.n-checks { list-style: none; display: grid; gap: var(--s-3); }
.n-checks li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
  color: var(--b-ink-2);
}
.n-dark .n-checks li { color: var(--b-on-dark-2); }
/* The tick is a real drawn path (inline SVG data-URI), not a checkmark faked
   from two rotated gradients — that reads as a smudge at any size. Two variants
   because the stroke has to change color on dark, and a data-URI can't inherit
   currentColor. */
.n-checks li::before {
  content: '';
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%;
  background-color: var(--b-brass-tint);
  border: 1px solid var(--b-brass-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.6' fill='none' stroke='%238a5f2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.n-dark .n-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.6' fill='none' stroke='%23dcae74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Module --- */
/* Modules are NOT a grid of identical cards. Each is a full-width row with its
   own vignette, alternating side. The rows differ; the modules differ. */
.n-module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-8) 0;
  border-top: 1px solid var(--b-line);
}
.n-module:first-child { border-top: none; }
.n-module--flip .n-module-media { order: -1; }
.n-module-eyecatch { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.n-module-mark {
  width: 40px; height: 40px; border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--b-steel-600);
  color: #fff;
  flex: none;
}
.n-module-mark svg { width: 20px; height: 20px; }
.n-module-name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.n-module h3 { margin-bottom: var(--s-3); }
.n-module .n-lead { margin-bottom: var(--s-5); }
.n-module .n-checks { margin-bottom: var(--s-6); }

/* The vignette. A real, drawn product surface — never a colored placeholder. */
.n-vignette {
  position: relative;
  background: var(--b-steel-900);
  border: 1px solid var(--b-steel-800);
  border-radius: var(--r-4);
  padding: var(--s-5);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.n-vignette::after {
  /* a soft brass wash from the top-right — the only "glow" in the system */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 100% 0%, var(--b-brass-wash), transparent 62%);
  pointer-events: none;
}
.n-vig-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border-radius: var(--r-2);
  background: var(--b-vig-dark);
  border: 1px solid var(--b-line-dark-2);
}
.n-vig-row + .n-vig-row { margin-top: var(--s-2); }
.n-vig-mark {
  width: 28px; height: 28px; border-radius: var(--r-1);
  display: grid; place-items: center;
  background: var(--b-raised-dark);
  color: var(--b-on-dark);
  font-size: 11px; font-weight: 700;
}
/* The label/sub pair share one grid cell, so they must stack — inline they run
   into each other ("Banco do Brasilvoce@email.com"). */
.n-vig-row > span:nth-child(2) { min-width: 0; }
.n-vig-label {
  display: block;
  font-size: var(--t-xs); font-weight: 600; color: var(--b-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n-vig-sub {
  display: block;
  font-size: 11px; color: var(--b-on-dark-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n-vig-val { font-size: var(--t-xs); font-weight: 700; color: var(--b-on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.n-vig-val--pos { color: var(--b-signal-lift); }
.n-vig-dots { letter-spacing: 0.18em; color: var(--b-on-dark-2); font-size: var(--t-xs); }
.n-vig-cap {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 11px; color: var(--b-on-dark-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--b-line-dark-2);
}
.n-vig-lock { width: 12px; height: 12px; color: var(--b-brass-lift); }

/* ----------------------------------------------------------------- Hero --- */
.n-hero { padding: var(--s-9) 0 var(--s-10); }
.n-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-8);
  align-items: center;
}
.n-hero .n-lead { margin-top: var(--s-5); }
.n-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.n-hero-checks { margin-top: var(--s-6); }

/* The proof object. Plaintext on the left, what the server actually stores on
   the right. This is the only place the product's core claim is shown rather
   than asserted, so it gets the page's most deliberate composition. */
/* Stacked, not side-by-side. Two 200px columns crushed every label into an
   ellipsis ("Banco do …"), and a truncated label in a demo reads as a bug
   rather than as a design. Vertical also states the argument in the right
   order: this is what you see → it goes through this → this is what we hold. */
.n-proof {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--b-steel-800);
  border: 1px solid var(--b-line-dark);
  border-radius: var(--r-4);
  box-shadow: var(--sh-4);
}
.n-proof-side { display: grid; gap: var(--s-2); min-width: 0; }
.n-proof-tag {
  font-size: 11px; font-weight: 700; color: var(--b-on-dark-2);
  margin-bottom: var(--s-1);
}
.n-proof-side--cipher .n-proof-tag { color: var(--b-brass-lift); }
.n-proof-arrow {
  color: var(--b-brass-lift);
  display: grid; place-items: center;
  transform: rotate(90deg);
}
.n-proof-arrow .n-icon { width: 22px; height: 22px; }
.n-cipher {
  display: block;
  overflow: hidden;
  padding: var(--s-3);
  border-radius: var(--r-2);
  background: var(--b-steel-950);
  border: 1px solid var(--b-line-dark-2);
  color: var(--b-on-dark-2);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  word-break: break-all;
  opacity: 0.72;
}
.n-proof .n-vig-cap { grid-column: 1 / -1; margin-top: var(--s-2); }

/* ------------------------------------------------------------------ Why ---
   Deliberately NOT three equal columns. The first claim is the architecture and
   gets the weight; the other two support it. Equal cards would say the three
   things matter equally, and they do not. */
.n-why { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-7); align-items: start; }
.n-why-lead {
  padding: var(--s-6);
  background: var(--b-paper);
  border: 1px solid var(--b-line);
  border-radius: var(--r-3);
}
.n-why-rest { display: grid; gap: var(--s-6); align-content: start; padding-top: var(--s-2); }
.n-why h3 { margin: var(--s-3) 0 var(--s-2); }
.n-why p { color: var(--b-ink-2); font-size: var(--t-sm); max-width: 46ch; }
.n-why-mark {
  width: 40px; height: 40px; border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--b-brass-tint);
  border: 1px solid var(--b-brass-line);
  color: var(--b-brass-deep);
}
.n-why-lead .n-why-mark { background: var(--b-steel-600); border-color: var(--b-steel-600); color: #fff; }

/* ----------------------------------------------------------------- Soon --- */
.n-soon {
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: var(--b-paper-2);
  border: 1px solid var(--b-line);
  border-radius: var(--r-3);
}
.n-soon-list {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin: var(--s-4) 0 var(--s-4);
}
.n-soon-list li {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--b-ink-2);
}
.n-soon-mark { color: var(--b-ink-3); display: grid; place-items: center; }
.n-soon-mark .n-icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- Split --- */
.n-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.n-split-card {
  display: grid; gap: var(--s-3);
  align-content: start;
  padding: var(--s-7) var(--s-6);
  background: var(--b-paper);
  border: 1px solid var(--b-line);
  border-radius: var(--r-3);
  color: var(--b-ink);
  transition: border-color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out);
}
.n-split-card:hover {
  text-decoration: none;
  border-color: var(--b-brass);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.n-split-card p { color: var(--b-ink-2); font-size: var(--t-sm); }
.n-split-go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--b-brass-deep);
}
.n-split-go .n-icon { width: 16px; height: 16px; transition: transform var(--d-1) var(--e-out); }
.n-split-card:hover .n-split-go .n-icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- Close --- */
.n-close { padding: var(--s-9) 0; }
.n-close-inner { display: grid; justify-items: center; text-align: center; gap: var(--s-4); }
.n-close-inner .n-lead { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- Plans --- */
.n-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); }
.n-plan {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background: var(--b-paper);
  border: 1px solid var(--b-line);
  border-radius: var(--r-3);
}
.n-plan--free { border-color: var(--b-brass); box-shadow: 0 0 0 1px var(--b-brass); }
.n-plan-name { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; }
.n-plan-price { display: flex; align-items: baseline; gap: 4px; }
.n-plan-amount { font-size: var(--t-amount); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.n-plan-period { font-size: var(--t-xs); color: var(--b-ink-3); }
.n-plan-note { font-size: var(--t-xs); color: var(--b-ink-3); margin-top: -8px; }
.n-plan-features { list-style: none; display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--b-ink-2); }
.n-plan-features li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s-2); align-items: start; }
.n-plan-features li::before { content: '·'; color: var(--b-brass-deep); font-weight: 800; text-align: center; }
.n-plan-features li.is-soon { color: var(--b-ink-3); }
.n-plan-features li.is-soon::before { content: '○'; color: var(--b-steel-200); font-size: 10px; }
.n-plan .n-btn { margin-top: auto; }

.n-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--b-paper-2);
  border: 1px solid var(--b-line);
  border-radius: var(--r-full);
}
.n-toggle button {
  min-height: 38px; padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--b-ink-3);
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.n-toggle button:hover { color: var(--b-ink); }
.n-toggle button.is-active { background: var(--b-steel-600); color: #fff; }
.n-toggle-save { font-size: 11px; font-weight: 700; color: var(--b-signal-deep); margin-left: 6px; }
.n-toggle button.is-active .n-toggle-save { color: var(--b-signal-lift); }

/* -------------------------------------------------------------- Deflist ---
   Capabilities as a definition list, not a grid of identical cards. Rows share
   a rhythm but not a box, so six of them read as six things rather than as a
   template that happened to be filled in six times. */
.n-deflist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-6) var(--s-8);
}
.n-deflist > div { padding-top: var(--s-4); border-top: 2px solid var(--b-brass); }
.n-deflist dt { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--s-2); }
.n-deflist dd { font-size: var(--t-sm); color: var(--b-ink-2); max-width: 44ch; }

/* ---------------------------------------------------------------- Steps ---
   The ONE numbered sequence on the site. Numbers are here because the personal
   page tells a day in order — morning to night — and the order carries the
   argument. Numbering sections that are not a sequence is the eyebrow trope one
   tier deeper, and it is banned everywhere else. */
.n-steps { list-style: none; display: grid; gap: var(--s-6); counter-reset: step; }
.n-steps li {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--b-line);
}
.n-steps li:last-child { border-bottom: none; padding-bottom: 0; }
.n-step-n {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--b-brass);
  color: var(--b-brass-deep);
  font-size: var(--t-body); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.n-steps h3 { margin-bottom: var(--s-2); }
.n-steps p { color: var(--b-ink-2); max-width: 60ch; }

/* --------------------------------------------------------- Checks (2col) --- */
.n-checks--2col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4) var(--s-7); }

/* ----------------------------------------------------- Vignette: balance --- */
.n-vig-balance {
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  border-radius: var(--r-2);
  background: var(--b-vig-dark);
  border: 1px solid var(--b-line-dark-2);
}
.n-vig-balance strong {
  display: block;
  margin-top: 2px;
  font-size: var(--t-amount-sm); font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--b-on-dark);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Pricing chrome --- */
.n-plans-controls {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center;
  margin-bottom: var(--s-7);
}

/* Both cycles ship in the DOM; the toggle picks which is visible. That keeps
   the prices in the server-rendered HTML instead of behind a fetch. */
.n-plan-price--annual, .n-plan-note--annual { display: none; }
[data-plans][data-cycle="annual"] .n-plan-price--monthly,
[data-plans][data-cycle="annual"] .n-plan-note--monthly { display: none; }
[data-plans][data-cycle="annual"] .n-plan-price--annual { display: flex; }
[data-plans][data-cycle="annual"] .n-plan-note--annual { display: block; }

[data-plans][data-cat="personal"] .n-plan--cat-business { display: none; }
[data-plans][data-cat="business"] .n-plan--cat-personal { display: none; }

.n-plans-fallback {
  display: grid; justify-items: center; gap: var(--s-5);
  text-align: center;
  padding: var(--s-8) var(--s-5);
  background: var(--b-paper-2);
  border: 1px solid var(--b-line);
  border-radius: var(--r-3);
}

.n-note-band {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--b-brass-tint);
  border: 1px solid var(--b-brass-line);
  border-radius: var(--r-3);
}
.n-note-band p { font-weight: 600; color: var(--b-ink); max-width: 62ch; }

/* ---------------------------------------------------------------- Legal --- */
.n-hero--short { padding: var(--s-8) 0 var(--s-7); }
.n-legal-jump { display: flex; gap: var(--s-4); margin-top: var(--s-5); }
.n-legal-jump a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--b-line-dark);
  border-radius: var(--r-2);
  color: var(--b-on-dark);
  font-size: var(--t-sm); font-weight: 600;
}
.n-legal-jump a:hover { background: var(--b-hover-dark); text-decoration: none; }
.n-legal h3 { margin: var(--s-6) 0 var(--s-3); }
.n-legal p { color: var(--b-ink-2); }
.n-legal p + p { margin-top: var(--s-3); }

/* ------------------------------------------------------------------ FAQ --- */
.n-faq { border-top: 1px solid var(--b-line); }
.n-faq-item { border-bottom: 1px solid var(--b-line); }
.n-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: var(--t-body); font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.n-faq-item summary::-webkit-details-marker { display: none; }
.n-faq-item summary::after {
  content: ''; flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--b-ink-3);
  border-bottom: 2px solid var(--b-ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-1) var(--e-out);
}
.n-faq-item[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.n-faq-item > div { padding-bottom: var(--s-5); color: var(--b-ink-2); max-width: 68ch; text-wrap: pretty; }

/* ----------------------------------------------------------------- Form --- */
.n-card {
  background: var(--b-paper);
  border: 1px solid var(--b-line);
  border-radius: var(--r-4);
  padding: var(--s-6);
  box-shadow: var(--sh-3);
}
.n-form { display: grid; gap: var(--s-4); }
.n-field { display: grid; gap: 6px; }
.n-field > span { font-size: var(--t-sm); font-weight: 600; color: var(--b-ink); }
.n-field input {
  min-height: 50px;
  padding: 0 var(--s-4);
  color: var(--b-ink);
  background: var(--b-paper);
  border: 1.5px solid var(--b-line);
  border-radius: var(--r-2);
  transition: border-color var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out);
}
/* Placeholders hit the same 4.5:1 bar as body text. ink-3 is 6.59:1. */
.n-field input::placeholder { color: var(--b-ink-3); opacity: 1; }
.n-field input:focus-visible {
  outline: none;
  border-color: var(--b-brass);
  box-shadow: 0 0 0 3px var(--b-brass-tint);
}
.n-field input:user-invalid { border-color: var(--b-danger); }
.n-consent {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3);
  align-items: start;
  font-size: var(--t-xs); color: var(--b-ink-2); line-height: 1.45;
  cursor: pointer;
}
.n-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--b-steel-600); }
.n-form-error {
  padding: var(--s-3) var(--s-4);
  background: var(--b-danger-tint);
  border: 1px solid var(--b-danger-line);
  color: var(--b-danger-ink);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
}
.n-form-note { font-size: var(--t-xs); color: var(--b-ink-3); line-height: 1.45; }

.n-success { text-align: center; padding: var(--s-5) 0; }
.n-success-mark {
  width: 56px; height: 56px; margin: 0 auto var(--s-4);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--b-signal-tint);
  border: 1.5px solid var(--b-signal);
  color: var(--b-signal-deep);
}
.n-success-mark svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- Modal --- */
.n-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-5); }
.n-modal[hidden] { display: none; }
.n-modal-backdrop { position: absolute; inset: 0; z-index: var(--z-backdrop); background: rgba(11, 15, 26, 0.66); }
.n-modal-dialog {
  position: relative; z-index: var(--z-modal);
  width: min(720px, 100%);
  max-height: min(82vh, 780px);
  overflow: auto;
  background: var(--b-paper);
  border-radius: var(--r-4);
  padding: var(--s-7);
  box-shadow: var(--sh-4);
}
.n-modal-x {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 44px; height: 44px;                 /* touch-target floor */
  border-radius: var(--r-1);
  display: grid; place-items: center;
  color: var(--b-ink-3);
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.n-modal-x:hover { background: var(--b-paper-2); color: var(--b-ink); }
.n-modal-x svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Footer --- */
.n-footer { background: var(--b-steel-950); color: var(--b-on-dark-2); padding: var(--s-8) 0 var(--s-5); }
.n-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--b-line-dark-2);
}
.n-footer h4 { font-size: var(--t-xs); font-weight: 700; color: var(--b-on-dark); margin-bottom: var(--s-3); }
.n-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.n-footer a { color: var(--b-on-dark-2); font-size: var(--t-sm); }
.n-footer a:hover { color: var(--b-on-dark); text-decoration: none; }
.n-footer-blurb { font-size: var(--t-sm); max-width: 34ch; margin-top: var(--s-3); }
.n-footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-5);
  font-size: var(--t-xs);
}
.n-social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.n-social a {
  width: 44px; height: 44px;                 /* touch-target floor */
  border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--b-hover-dark);
  color: var(--b-on-dark-2);
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.n-social a:hover { background: var(--b-brass); color: var(--b-on-brass); text-decoration: none; }
.n-social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Motion ---
 * One orchestrated hero entrance. Content is VISIBLE by default and the
 * animation only enhances it — a class-gated reveal that never fires (hidden
 * tab, headless renderer, JS off) would ship a blank page. */
@keyframes n-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.n-rise { animation: n-rise var(--d-3) var(--e-out) both; }
.n-rise-1 { animation-delay: 60ms; }
.n-rise-2 { animation-delay: 130ms; }
.n-rise-3 { animation-delay: 200ms; }
.n-rise-4 { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .n-rise { animation: none; }
  .n-body .n-btn:hover,
  .n-body .n-btn:active { transform: none; }
}

/* ----------------------------------------------------------- Responsive --- */
@media (max-width: 960px) {
  /* Hero stacks. This rule sits AFTER every .n-hero-grid declaration on
     purpose: media queries add no specificity, so a later same-specificity rule
     would silently win and the hero would stay two-up on a phone. That is
     exactly the bug that shipped 154px of horizontal overflow on the old LP. */
  .n-hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .n-hero { padding: var(--s-8) 0; }

  /* Modules stack. Media first — the drawn product is the hook on a phone. */
  .n-module { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) 0; }
  .n-module .n-module-media { order: -1; }

  .n-why { grid-template-columns: 1fr; gap: var(--s-6); }
  .n-split { grid-template-columns: 1fr; }
  .n-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

@media (max-width: 860px) {
  .n-nav-links { display: none; }
  .n-burger { display: flex; }
  .n-nav-actions { margin-left: auto; }
  .n-nav-actions .n-btn-ghost { display: none; }

  .n-mobile {
    display: block;
    padding: var(--s-4) var(--s-5) var(--s-6);
    background: var(--b-steel-900);
    border-top: 1px solid var(--b-line-dark);
  }
  .n-mobile[hidden] { display: none; }
  .n-mobile a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px;
    color: var(--b-on-dark);
    font-size: var(--t-body); font-weight: 500;
    border-bottom: 1px solid var(--b-line-dark-2);
  }
  .n-mobile a:hover { text-decoration: none; }
  .n-mobile .n-btn { margin-top: var(--s-5); width: 100%; }
}

@media (max-width: 720px) {
  .n-section    { padding: var(--s-8) 0; }
  .n-section-lg { padding: var(--s-8) 0; }
  .n-container  { padding: 0 var(--s-4); }
  .n-card       { padding: var(--s-5); }
  .n-modal-dialog { padding: var(--s-6) var(--s-5); }
  .n-footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .n-footer-bottom { justify-content: flex-start; }
}