/* Sinsonte — landing REDESIGN PREVIEW 2 ("nueva2"). Vanilla CSS, no deps, no
 * CDN. Scoped to /nueva2/ only — /nueva/ and the live site are untouched.
 *
 * Brief (founder, Aug 2026): rebuild in the spirit of twenty.com — similar
 * section proportions/interactivity, LESS vertical scroll than usual in the
 * tail (their long testimonial/footer runs compressed into tight sections),
 * top nav tabs that anchor-scroll, and an interactive desktop-app mockup as
 * the centerpiece so a visitor can click through Inicio/Reuniones/Proyectos
 * (the app's real three sidebar destinations) and trigger the Grabar
 * recording transition before ever downloading.
 *
 * Round 2 (founder review of the live round-1 page): slimmer sticky bar,
 * mockup's own intro copy removed (hero text is now the only copy before
 * it, prominence bumped, spacing fused), Dictado demoted from a sidebar
 * tab to the real app's actual "Grabar" action with an explicit stop-back
 * control, and pricing moved off this page entirely onto its own
 * landing/nueva2/precios/ page with a monthly/annual toggle.
 *
 * Base layer (reset, type roles, bar, lang menu, buttons, pill, reveal,
 * dark band, plans/pricing, dual-device primitives) is carried over from
 * /nueva/css/site.css almost verbatim — same design language, same brand
 * tokens — as its own self-contained copy (this file references nothing
 * under /nueva/). Section paddings are tightened throughout versus /nueva/,
 * and the mockups/steps/trust sections it had are replaced by ONE
 * interactive surface (`.appmock`, new in this file) plus a shorter set of
 * proof sections — the concrete "less scroll in the tail" move.
 *
 * Reuses landing/css/tokens.css (brand colours/type/space) from the shared
 * root only — no other shared landing asset is referenced.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

:root { --bar-h: 3.25rem; }
section[id] { scroll-margin-top: calc(var(--bar-h) + var(--space-sm)); }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip {
  position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: 40;
  background: var(--color-ink); color: var(--color-bg);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-500%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

.preview-flag {
  background: var(--color-ambar-wash);
  border-bottom: var(--rule-hair) solid var(--color-ambar);
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-2xs) var(--space-sm);
}
.preview-flag a { color: var(--color-accent-ink); text-decoration: underline; }

/* ── Type roles ────────────────────────────────────────────────────── */
.h-display, .h2, .h-band {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.06;
  text-wrap: balance;
}
.h-display { font-size: clamp(1.8rem, 2.2vw + 0.85rem, 2.5rem); line-height: 1.1; max-width: 24ch; }
.h2 { font-size: var(--text-2xl); line-height: 1.1; }
.h-band { font-size: var(--text-3xl); line-height: 1.06; max-width: 18ch; }

.lede { font-size: var(--text-base); line-height: 1.45; max-width: 58ch; color: var(--color-muted-strong); margin-top: var(--space-2xs); }
.body { max-width: 54ch; margin-top: var(--space-sm); color: var(--color-muted-strong); }
.microline { font-size: var(--text-sm); color: var(--color-muted-strong); line-height: 1.5; margin-top: var(--space-sm); }
.label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--color-muted-strong); }

.lnk { color: var(--color-accent-ink); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule-strong); padding-bottom: 2px; }
.lnk:hover { border-bottom-color: var(--color-accent-ink); }

/* ── Bar — sticky top nav, Twenty-style: mark left, tabs center, utils
 * right. Twenty keeps its bar visible on scroll with no shrink/hide
 * behaviour and no dropdowns on the primary items — matched here.
 * Founder round 2: "too high" — tightened from a ~4rem/space-xs bar to a
 * slim ~3.25rem one (closer to twenty.com's own bar height), min-height
 * kept at 44px on the interactive children only (mark/lang/download) so
 * touch targets stay accessible even though the bar itself is shorter. ── */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0.5rem var(--space-gutter);
  background: var(--color-bg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.bar__mark { margin-right: auto; display: inline-flex; align-items: center; min-height: 36px; }
.lockup { width: 106px; height: auto; }
.lockup__mark, .lockup__idot { fill: var(--color-mark); color: var(--color-mark); }
.lockup__word { fill: var(--color-ink); }
.bar__nav { display: none; align-items: center; gap: var(--space-md); }
.bar__nav a { font-size: var(--text-sm); text-decoration: none; color: var(--color-muted-strong); white-space: nowrap; }
.bar__nav a:hover { color: var(--color-ink); }
.bar__nav a[aria-current] { color: var(--color-ink); font-weight: 600; }
@media (min-width: 62rem) { .bar__nav { display: flex; } }
.bar__utils { display: flex; align-items: center; gap: var(--space-2xs); }
.btn--sm { min-height: 40px; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }

/* ── Theme toggle — sun/moon, same pill-button language as .lang__btn.
 * Icon visibility is pure CSS (mirrors the [data-theme]/prefers-color-scheme
 * pattern tokens.css already uses for colour) — only the click handler and
 * the localStorage write live in JS. Defaults to the OS preference via the
 * media query; an explicit click always wins after that. ────────────────── */
.theme__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: none; color: var(--color-muted-strong);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theme__btn:hover { color: var(--color-ink); border-color: var(--color-ink); }
.theme__btn:active { background: var(--color-panel); }
.theme__icon { flex: none; }
.theme__icon--moon { display: none; }
:root[data-theme="dark"] .theme__icon--sun { display: none; }
:root[data-theme="dark"] .theme__icon--moon { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__icon--sun { display: none; }
  :root:not([data-theme="light"]) .theme__icon--moon { display: inline-flex; }
}
@media (max-width: 26.9rem) { .theme__btn { width: 44px; height: 44px; } }

/* ── Language menu — identical component/keyboard contract to /nueva/. ── */
.lang { position: relative; }
.lang__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: none;
  padding: var(--space-2xs) 0.6rem var(--space-2xs) 0.55rem;
  min-height: 36px;
  font-size: var(--text-xs); letter-spacing: var(--track-caps);
  color: var(--color-muted-strong);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lang__btn:hover { color: var(--color-ink); border-color: var(--color-ink); }
.lang__btn:active { background: var(--color-panel); }
.lang__btn[aria-expanded="true"] { color: var(--color-ink); border-color: var(--color-ink); }
.lang__globe { flex: none; }
.lang__cur { line-height: 1; }
.lang__caret { flex: none; opacity: 0.7; transition: transform var(--dur-fast) var(--ease-out); }
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }

.lang__list {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 5;
  min-width: 11.5rem;
  margin: 0; padding: 0.3rem; list-style: none;
  background: var(--color-bg);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px -12px rgba(25, 21, 25, 0.35);
}
:root[data-theme="dark"] .lang__list { box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang__list { box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65); }
}
/* Works as both a <button> (single-URL pages, swaps text in place) and an
 * <a> (prerendered locale pages, where each option is a real link to /,
 * /es/ or /pt/ — see scripts/build_landing_i18n.py). Hence the explicit
 * text-decoration and font reset: an anchor inherits neither from the
 * button reset above. */
.lang__opt {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-muted-strong);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lang__opt:hover { background: var(--color-panel); color: var(--color-ink); }
.lang__opt:focus-visible { outline-offset: -3px; }
.lang__code { flex: none; min-width: 2.1rem; font-size: var(--text-xs); letter-spacing: var(--track-caps); color: var(--color-muted); }
.lang__name { flex: 1 1 auto; }
.lang__opt[aria-checked="true"] { color: var(--color-ink); }
.lang__opt[aria-checked="true"] .lang__code { color: var(--color-accent-ink); }
.lang__opt[aria-checked="true"]::after {
  content: ""; flex: none; width: 0.72rem; height: 0.42rem;
  border-left: 2px solid var(--color-accent-ink);
  border-bottom: 2px solid var(--color-accent-ink);
  transform: translateY(-0.12rem) rotate(-45deg);
}
@media (max-width: 26.9rem) {
  .lang__btn { min-height: 44px; }
  .lang__opt { min-height: 44px; }
}

/* ── Buttons / pill ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base); font-weight: 500;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-grana); color: var(--color-on-grana); }
.btn--primary:hover { background: var(--color-grana-pressed); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: none; border-color: var(--color-rule-strong); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-2xs); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted-strong);
  margin-bottom: var(--space-md);
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-grana); flex: none; }

/* ── Reveal-on-scroll (website-review-2026-09.md §3, P1) ─────────────────
 * Never re-hide painted content. Previously `.reveal` was hidden by deferred
 * JS *after* first paint (HTML+CSS painted it visible, then site2.js landed
 * hundreds of ms later and yanked opacity to 0) — on a slow connection that
 * reads as content flashing, then washing out to a ghost, then fading back
 * in seconds later. It also broke LCP: the hero H1 went opacity:0 after its
 * own first paint.
 * Fix: gate the hiding on `html.js` — a class the inline <head> script sets
 * BEFORE first paint (see index.html/pricing "arm reveal before paint"
 * comment), so an element only ever starts hidden when JS is guaranteed to
 * be running to reveal it again. If JS never runs (disabled, blocked,
 * failed), `.reveal` alone (no `html.js` ancestor) stays fully opaque —
 * content is visible by default, always.
 * The hero (and the app-mockup section right below it, which the section's
 * own comment calls "the hero visual") are exempted from `.reveal` entirely
 * in the HTML — solid at first paint, no animation, ever. Reveal is for
 * below-the-fold sections only. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal.js-armed { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
  html.js .reveal.js-armed.is-visible { opacity: 1; transform: none; }
  /* Failsafe: if the IntersectionObserver never fires for any reason, force
   * the element visible 2s after paint. Nothing can stay ghosted. */
  html.js .reveal.js-armed { animation: reveal-auto 0.5s 2s forwards; }
}
@keyframes reveal-auto {
  to { opacity: 1; transform: none; }
}

/* ── 1 · Hero — the ONLY page copy before the interactive mockup (founder
 * round 2: "hero text to the top... the mockup effectively becomes the
 * hero visual"). Bigger display size than round 1, and a shallower
 * bottom padding than a standalone hero would use, so it reads as fused
 * with `.producto` right below rather than as two separate blocks. ──── */
.hero {
  max-width: 50rem; margin-inline: auto;
  padding: var(--space-xs) var(--space-gutter) var(--space-3xs);
  text-align: left;
}
/* Sep 30 2026: from 62rem the hero is two columns, copy left and the ad
   video right, so the video does not push the page down (founder). The copy
   column keeps its 50rem reading measure via max-width; the grid widens to
   the page. Below 62rem the video stacks under the CTA row as before. */
@media (min-width: 62rem) {
  .hero {
    max-width: var(--page-max);
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
  }
  .hero__copy { max-width: 50rem; min-width: 0; }
  .hero .heroad { margin: 0; min-width: 0; }
}
.hero .pill { margin-bottom: var(--space-3xs); }
/* The bird line, demoted from H1 to kicker (review §9): small serif, so it
 * still reads as the brand's own voice sitting above the headline rather
 * than as a caption. Not `.label` — that role is uppercase sans and belongs
 * to section eyebrows. The review asked for italic; we only self-host
 * Fraunces 600 *roman* (tokens.css), so italic here would be a browser-
 * synthesised oblique — a fake slant on an editorial serif is worse than no
 * slant, and a second 10 KB font file for one line is a bad trade against
 * this page's ~140 KB budget. Roman serif + muted colour carries the same
 * "different voice" signal against the sans body text. */
.hero__kicker {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--color-muted-strong);
  margin-bottom: var(--space-3xs);
}
.hero__micro { font-size: var(--text-sm); color: var(--color-muted-strong); align-self: center; }

/* ── 2 · Producto — the interactive chrome-window mockup. No heading/kicker
 * of its own (round 2: removed entirely — the hero above is the only
 * intro copy, and the mockup is discoverable on its own via the minimal
 * one-shot tab pulse, `pm-hint-pulse` below). Tight top padding continues
 * the "fused with the hero" read; local animation tokens mirror /nueva/'s
 * "Meetily steals" values (docs/research/landing-ux-teardown-2026-08.md)
 * since the level-meter/rec-dot primitives below are the same idiom, just
 * living inside a clickable shell instead of a static looping card. ──── */
.producto { max-width: var(--page-max); margin-inline: auto; padding: var(--space-3xs) var(--space-gutter) var(--space-xl);
  --mm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.appmock {
  margin-top: var(--space-xs);
  max-width: 62rem; margin-inline: auto;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 1px 2px rgba(25, 21, 25, 0.05), 0 20px 44px -20px rgba(25, 21, 25, 0.28);
}
/* No entrance animation on .appmock: `.producto` (its section, "the mockup
 * effectively becomes the hero visual") is exempted from `.reveal` in the
 * HTML per website-review-2026-09.md §3 — it is above the fold and must be
 * solid at first paint like the hero, never washed-out-ghost then faded in. */
.appmock__chrome {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: 0.6rem var(--space-sm);
  background: var(--color-panel);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.appmock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-rule-strong); }
.appmock__dot--r { background: #E8746A; }
.appmock__dot--y { background: var(--color-ambar); }
.appmock__dot--g { background: var(--color-quetzal-ink); }
.appmock__title { margin-inline: auto; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted-strong); transform: translateX(-15px); }

.appmock__body { display: flex; min-height: 26rem; }
.appmock__rail {
  width: 12.5rem; flex: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-sm) var(--space-2xs);
  background: var(--color-panel);
  border-right: var(--rule-hair) solid var(--color-rule);
}
.appmock__ws {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-2xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-bottom: var(--space-2xs);
}
.appmock__avatar {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: var(--color-quetzal-ink); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.appmock__wsname { font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appmock__tab {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: 0.5rem var(--space-2xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-muted-strong);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.appmock__tab .ic { width: 17px; height: 17px; flex: none; }
.appmock__tab:hover { background: var(--color-rule); color: var(--color-ink); }
.appmock__tab[aria-selected="true"] { background: var(--color-accent-wash); color: var(--color-accent-ink); font-weight: 600; }
/* Round 2, item 4: while the Grabar transition is showing the Dictado
 * panel, the three nav tabs are not valid destinations (Dictado is
 * reached only from Grabar, never listed as a tab) — native `disabled`
 * both blocks the click and removes them from tab order, and this rule
 * gives the honest visual match. The one obvious way back is the
 * `pm-dict__btn--stop` control inside the panel itself. */
.appmock__tab:disabled { opacity: 0.4; cursor: not-allowed; }
/* Round 2, item 2: the ONLY discovery hint left after removing the
 * section's intro copy — a soft ring pulses twice on the first tab, once,
 * when the mockup scrolls into view. Reduced-motion visitors get nothing
 * extra, same as everywhere else on this page: the tab is still a plain,
 * legible, clickable button without it. */
@media (prefers-reduced-motion: no-preference) {
  .producto.is-visible .appmock__tab[aria-selected="true"]:not(:disabled) {
    animation: pm-hint-pulse 1.4s ease-out 1s 2;
  }
}
@keyframes pm-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 20, 65, 0); }
  35% { box-shadow: 0 0 0 5px rgba(192, 20, 65, 0.16); }
}
.appmock__spacer { flex: 1; }
.appmock__record {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: var(--space-2xs);
  margin: var(--space-2xs) var(--space-2xs) 0;
  padding: 0.55rem var(--space-2xs);
  border-radius: var(--radius-sm);
  background: var(--color-grana); color: var(--color-on-grana);
  font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.appmock__record:hover { background: var(--color-grana-pressed); }
.appmock__record[aria-pressed="true"] { background: var(--color-grana-pressed); }
.appmock__record .ic { width: 15px; height: 15px; flex: none; }

.appmock__main { flex: 1; min-width: 0; padding: var(--space-md); position: relative; }
.appmock__panel { animation: pm-swap var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .appmock__panel { animation: none; } }
@keyframes pm-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Inicio panel ──────────────────────────────────────────────────── */
.pm-home { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); }
.pm-home__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); }
.pm-home__greet { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-base); }
.pm-home__usage { font-size: var(--text-xs); color: var(--color-muted-strong); background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); padding: 3px var(--space-2xs); }
.pm-home__ask { font-size: var(--text-xs); color: var(--color-muted); padding: 0.5rem var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-pill); background: var(--color-panel); }
.pm-home__pend {
  appearance: none; border: var(--rule-hair) solid var(--color-rule); background: var(--color-panel); cursor: pointer;
  text-align: left; border-radius: var(--radius-sm); padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-ink); font-weight: 600;
}
.pm-home__pend span { color: var(--color-muted-strong); font-weight: 400; }
.pm-home__h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--color-muted); font-weight: 700; margin-top: var(--space-2xs); }
.pm-home__list { display: flex; flex-direction: column; gap: 6px; }
.pm-home__row { background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); padding: 6px var(--space-sm); display: flex; flex-direction: column; }
.pm-home__row-title { font-size: var(--text-xs); font-weight: 700; }
.pm-home__row-sub { font-size: 0.7rem; color: var(--color-muted-strong); display: flex; align-items: center; gap: 5px; }
.pm-home__status { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ambar); flex: none; }
.pm-home__folders { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-home__folder { display: flex; align-items: center; gap: 6px; background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); padding: 6px var(--space-sm); font-size: var(--text-xs); }
.pm-home__folder .ic { width: 13px; height: 13px; color: var(--color-grana); flex: none; }
.pm-home__folder span { font-weight: 700; }
.pm-home__folder em { font-style: normal; color: var(--color-muted-strong); font-size: 0.68rem; }

/* ── Reuniones panel ───────────────────────────────────────────────── */
.pm-room { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-sm); height: 100%; }
.pm-room__list { display: flex; flex-direction: column; gap: 4px; }
.pm-room__item { display: flex; flex-direction: column; padding: 6px var(--space-2xs); border-radius: var(--radius-sm); }
.pm-room__item.is-active { background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule); }
.pm-room__item-t { font-size: 0.72rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-room__item-s { font-size: 0.65rem; color: var(--color-muted); margin-top: 1px; }
.pm-room__detail { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.pm-room__tabs { display: flex; gap: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: 6px; margin-bottom: 2px; }
.pm-room__tab { font-size: var(--text-xs); color: var(--color-muted); }
.pm-room__tab.is-active { color: var(--color-ink); font-weight: 700; }
.pm-room__sum { font-size: var(--text-xs); line-height: 1.5; }
.pm-room__cite { display: inline-block; font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-ambar-deep); background: var(--color-ambar-wash); border: var(--rule-hair) solid var(--color-ambar); border-radius: var(--radius-pill); padding: 1px 6px; margin-left: 3px; }
.pm-room__pend-row { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); padding-top: 6px; border-top: var(--rule-hair) dashed var(--color-rule); }
.pm-room__check { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--color-rule-strong); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: var(--color-bg); }
.pm-room__pend-row.is-done .pm-room__check { background: var(--color-quetzal-ink); border-color: var(--color-quetzal-ink); }
.pm-room__pend-row.is-done { color: var(--color-muted); text-decoration: line-through; }

/* ── Proyectos panel ───────────────────────────────────────────────── */
.pm-proj { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
@media (max-width: 44rem) { .pm-proj { grid-template-columns: 1fr; } }
.pm-proj__card { background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.pm-proj__head { display: flex; align-items: center; gap: 6px; }
.pm-proj__head .ic { width: 14px; height: 14px; color: var(--color-grana); flex: none; }
.pm-proj__head span { font-size: var(--text-xs); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-proj__conflict { font-style: normal; font-size: 0.62rem; font-weight: 700; color: var(--color-ambar-deep); background: var(--color-ambar-wash); border: var(--rule-hair) solid var(--color-ambar); border-radius: var(--radius-pill); padding: 1px 6px; flex: none; }
.pm-proj__stats { display: flex; gap: var(--space-sm); }
.pm-proj__stats div { font-size: 0.65rem; color: var(--color-muted-strong); }
.pm-proj__stats b { display: block; font-size: var(--text-base); color: var(--color-ink); }
.pm-proj__spark { display: flex; gap: 3px; }
.pm-proj__spark i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-rule-strong); font-style: normal; }
.pm-proj__spark i.on { background: var(--color-quetzal-ink); }
.pm-proj__last { font-size: 0.65rem; color: var(--color-muted); }
.pm-proj__actions { display: flex; gap: 4px; }
.pm-proj__actions span { flex: 1; text-align: center; font-size: 0.62rem; font-weight: 600; padding: 4px 3px; border-radius: 6px; background: var(--color-bg); border: var(--rule-hair) solid var(--color-rule-strong); color: var(--color-muted-strong); }

/* ── Dictado panel ─────────────────────────────────────────────────── */
.pm-dict { display: grid; grid-template-columns: 1fr 12rem; gap: var(--space-md); height: 100%; }
@media (max-width: 40rem) { .pm-dict { grid-template-columns: 1fr; } }
.pm-dict__notes { display: flex; flex-direction: column; gap: var(--space-2xs); }
.pm-dict__tabs { display: flex; gap: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: 6px; margin-bottom: 4px; }
.pm-dict__tab { font-size: var(--text-xs); color: var(--color-muted); }
.pm-dict__tab.is-active { color: var(--color-ink); font-weight: 700; }
.pm-dict__line { font-size: var(--text-xs); line-height: 1.6; }
.pm-dict__line--muted { color: var(--color-muted); }
.pm-dict__monitor { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-md); }
.pm-dict__thumb {
  border-radius: var(--radius-sm); background: linear-gradient(160deg, var(--color-panel), var(--color-rule));
  min-height: 5.5rem; display: flex; align-items: center; justify-content: center;
}
.pm-dict__controls { display: flex; flex-direction: column; gap: 6px; }
.pm-dict__btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: var(--rule-hair) solid var(--color-rule-strong); background: var(--color-panel); color: var(--color-ink);
  border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; padding: 6px var(--space-sm);
}
.pm-dict__btn .ic { width: 13px; height: 13px; }
.pm-dict__btn--accent { background: var(--color-grana); color: var(--color-on-grana); border-color: var(--color-grana); }
/* Round 2, item 4: the explicit "obvious way back" the founder asked for —
 * visually distinct (outlined in Grana, not filled) so it reads as the
 * one control that EXITS this view, next to two that stay in it. */
.pm-dict__btn--stop { border-color: var(--color-grana); color: var(--color-grana); font-weight: 700; background: var(--color-bg); }
.pm-dict__btn--stop:hover { background: var(--color-accent-wash); }
.pm-dict__stopicon { width: 9px; height: 9px; border-radius: 2px; background: currentColor; flex: none; }

/* ── Mobile audit fix (Aug 2026): the appmock is a chrome-window facsimile
 * with a fixed 12.5rem sidebar rail — on a ~390px phone that rail alone
 * eats over half the mock's width, and `.pm-room`'s 11rem-fixed grid column
 * (unlike `.pm-proj`/`.pm-dict` just above, which already fold to 1fr) had
 * no responsive fallback at all, so it silently clipped inside the mock's
 * own `overflow: hidden`. Same threshold `.pm-dict` already uses, so
 * nothing sits in a cramped in-between state. Rail becomes a wrapping
 * horizontal tab strip (the file's own responsive idiom — see
 * `.hero__cta`/`.foot__links`/`.tiers` — not a new pattern); the workspace
 * switcher is decorative sample data and is dropped to give the tabs room;
 * tap targets bumped to 44px per the touch-target rule already applied to
 * `.lang__btn`/`.lang__opt` below. Desktop (`min-width: 40.01rem` and up)
 * is untouched. ─────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  .appmock__body { flex-direction: column; }
  .appmock__rail {
    width: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .appmock__ws { display: none; }
  .appmock__tab { min-height: 44px; }
  .appmock__spacer { display: none; }
  .appmock__record { width: auto; min-height: 44px; margin: 0 0 0 auto; }
  .appmock__main { padding: var(--space-sm); }
  .pm-room { grid-template-columns: 1fr; gap: var(--space-md); }
  .pm-room__detail { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
}

/* ── Shared mockup primitives (recording pill, level meter, notepad chips,
 * live captions) — carried from /nueva/'s own idiom as a self-contained
 * copy, used by both the appmock (Dictado panel) and the dual-device
 * section below. Meetily-confirmed values (docs/research/landing-ux-
 * teardown-2026-08.md): pill dot 1.2s ease-in-out pulse, bars scaleY
 * [.29,1,.29] 0.75s linear infinite, 90ms stagger per bar. ─────────── */
.recpill {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  width: fit-content;
  background: var(--color-bg);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.recpill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-grana); flex: none; animation: pm-dot 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .recpill__dot { animation: none; } }
@keyframes pm-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.recpill__t { text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--color-grana); font-weight: 600; }
.recpill__clock { color: var(--color-muted-strong); }

.levels { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.levels__b { width: 4px; height: 100%; border-radius: 2px; background: var(--color-grana); transform: scaleY(0.55); transform-origin: bottom; opacity: 0.85; animation: pm-bar 0.75s linear infinite; }
@media (prefers-reduced-motion: reduce) { .levels__b { animation: none; } }
.levels__b:nth-child(1) { animation-delay: 0ms; }
.levels__b:nth-child(2) { animation-delay: 90ms; }
.levels__b:nth-child(3) { animation-delay: 180ms; }
.levels__b:nth-child(4) { animation-delay: 270ms; }
.levels__b:nth-child(5) { animation-delay: 360ms; }
@keyframes pm-bar { 0%, 100% { transform: scaleY(0.29); } 50% { transform: scaleY(1); } }

.notepad { display: grid; gap: 6px; }
.notepad__ln { font-size: 0.68rem; line-height: 1.4; color: var(--color-ink); }
.chip { display: inline-flex; align-items: center; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); border-radius: var(--radius-pill); padding: 1px 6px; margin-right: 5px; }
.chip--dec { background: var(--color-accent-wash); color: var(--color-accent-ink); }
.chip--tarea { background: var(--color-ambar-wash); color: var(--color-ambar-deep); }

.caption { display: flex; flex-wrap: wrap; gap: 0.35em; font-size: var(--text-base); line-height: 1.5; }
.caption .w { animation: pm-word 5s var(--mm-ease, cubic-bezier(0.16,1,0.3,1)) infinite; animation-delay: calc(var(--i) * 120ms); }
@media (prefers-reduced-motion: reduce) { .caption .w { animation: none; } }
.caption .w.alt { background: var(--color-accent-wash); box-shadow: 0 2px 0 0 var(--color-accent-ink); padding: 0 0.2em; }
@keyframes pm-word { 0% { opacity: 0; transform: translateY(6px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.caption--dual { font-size: 0.74rem; }

/* (The homepage demo-video section that briefly lived here — `.demovid`, its
 * frame, poster and caption — was removed by founder order on 2026-09-05,
 * along with /media/demo-current.{mp4,webp} and their _headers rule. Nothing
 * references those class names any more; if a demo returns it gets designed
 * from scratch rather than resurrected from a stale block.) */

/* ── 3 · Cómo funciona — four-mode row + dual-device, one section ───── */
.como2 { max-width: var(--page-max); margin-inline: auto; padding: var(--space-lg) var(--space-gutter) var(--space-xl); }
.como2__head { max-width: 54ch; }

.modes { list-style: none; padding: 0; margin-top: var(--space-lg); display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, 1fr); border-top: var(--rule-hair) solid var(--color-rule-strong); padding-top: var(--space-lg); }
@media (min-width: 48rem) { .modes { grid-template-columns: repeat(4, 1fr); } }
.modes__i { border-left: 2px solid var(--color-grana); padding-left: var(--space-sm); }
.modes__n { display: block; font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); }
.modes__o { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--color-muted-strong); line-height: 1.4; }

.dual__stage { margin-top: var(--space-xl); display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dual__stage { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.dual__device { text-align: center; }
.dual__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--color-muted-strong); font-weight: 600; }
.dual__c { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted-strong); line-height: 1.5; max-width: 32ch; margin-inline: auto; }

.phoneframe {
  margin-top: var(--space-sm); width: 156px; margin-inline: auto;
  border: var(--rule-thick) solid var(--color-ink);
  border-radius: 22px;
  padding: 10px 10px 14px;
  background: var(--color-bg);
  position: relative;
}
.phoneframe__notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34px; height: 4px; border-radius: 2px; background: var(--color-rule-strong); }
.phoneframe__screen { margin-top: 14px; background: var(--color-panel); border-radius: 12px; padding: var(--space-2xs) var(--space-2xs) var(--space-sm); min-height: 9.5rem; display: flex; flex-direction: column; gap: var(--space-2xs); text-align: left; }
.phoneframe__screen .levels { height: 18px; margin-top: auto; }

.deskframe {
  margin-top: var(--space-sm); max-width: 250px; margin-inline: auto;
  border: var(--rule-thick) solid var(--color-ink);
  border-radius: 10px 10px 3px 3px;
  background: var(--color-bg);
  overflow: hidden;
}
.deskframe__bar { display: flex; gap: 5px; padding: 6px 8px; background: var(--color-panel); border-bottom: var(--rule-hair) solid var(--color-rule); }
.deskframe__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-rule-strong); }
.deskframe__screen { padding: var(--space-sm); min-height: 8.7rem; display: flex; flex-direction: column; gap: var(--space-sm); text-align: left; }

.dual__avatars { display: flex; align-items: center; }
.dual__av { width: 16px; height: 16px; border-radius: 50%; flex: none; border: var(--rule-hair) solid var(--color-bg); }
.dual__av--1 { background: var(--color-hablante-1); position: relative; z-index: 1; }
.dual__av--2 { background: var(--color-hablante-2); margin-left: -6px; }
.sysaudio { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; color: var(--color-muted-strong); text-transform: uppercase; letter-spacing: var(--track-caps); }
.sysaudio__ico { color: var(--color-muted-strong); flex: none; }
.sysaudio .ico__accent { color: var(--color-grana); stroke: var(--color-grana); }

.dual__project { margin-top: var(--space-lg); text-align: center; }
.projcard { margin-top: var(--space-sm); max-width: 20rem; margin-inline: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-panel); padding: var(--space-sm) var(--space-md); text-align: left; }
.projcard__t { font-family: var(--font-display, var(--font-serif)); font-weight: 500; font-size: var(--text-base); }
.projcard__row { list-style: none; padding: 0; margin-top: var(--space-2xs); display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted-strong); }
.projcard__row li { display: flex; align-items: center; gap: 6px; }
.projcard__row strong { color: var(--color-ink); font-weight: 700; }
.projcard__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.projcard__dot--dec { background: var(--color-quetzal-ink); }
.projcard__dot--act { background: var(--color-ambar); }

/* ── 4 · Dark band (languages) ────────────────────────────────────── */
.dark { background: var(--dark-bg); color: var(--dark-ink); padding: var(--space-lg) var(--space-gutter); border-block: var(--rule-hair) solid var(--dark-rule-strong); }
:root[data-theme="dark"] .dark { background-color: var(--dark-panel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dark { background-color: var(--dark-panel); } }
.dark__inner { max-width: var(--page-max); margin-inline: auto; }
.dark__lede { margin-top: var(--space-md); max-width: 56ch; color: var(--dark-muted-strong); font-size: var(--text-lg); line-height: 1.5; }
.tiers { list-style: none; padding: 0; margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.tier { display: flex; align-items: baseline; gap: var(--space-2xs); border: var(--rule-hair) solid var(--color-ambar); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-sm); background: rgb(232 161 61 / 0.08); }
.tier__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ambar); }
.tier__n { font-size: var(--text-base); color: var(--dark-ink); }
.tier--more { border-color: var(--dark-rule-strong); background: none; }
.tier--more .tier__code { color: var(--dark-muted-strong); }
.beta { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-caps); border: var(--rule-hair) solid var(--dark-rule-strong); border-radius: var(--radius-xs); padding: 0 var(--space-3xs); color: var(--dark-muted); }
.mixes { margin-top: var(--space-md); max-width: 62ch; font-size: var(--text-base); line-height: 1.6; color: var(--dark-muted-strong); }
.mixes__k { color: var(--dark-ink); font-weight: 600; }

/* ── 5 · Escritorio — one tight card ──────────────────────────────── */
.desk { max-width: 42rem; margin-inline: auto; padding: var(--space-lg) var(--space-gutter); }

/* ── 6 · Benchmarks — a single banner row, not a page ─────────────── */
.benchband { max-width: var(--page-max); margin-inline: auto; padding: var(--space-lg) var(--space-gutter); }
.benchband__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-panel); padding: var(--space-md) var(--space-lg);
}
.benchband .body { margin-top: var(--space-3xs); }

/* ── 7 · Pricing — now its own page (landing/nueva2/precios/index.html),
 * Twenty-style, not an in-page anchor. `.precios`/`.plans`/`.plan` below
 * are shared with that page's markup verbatim; `.pxhero`/`.pxtoggle` are
 * new for the page's own header + the monthly/annual toggle. ──────── */
.pxhero { max-width: var(--page-max); margin-inline: auto; padding: var(--space-xl) var(--space-gutter) var(--space-lg); text-align: center; }
.pxhero .body { margin-inline: auto; }
.pxtoggle {
  margin-top: var(--space-lg); display: inline-flex; gap: 2px;
  padding: 3px; border-radius: var(--radius-pill);
  background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule-strong);
}
.pxtoggle__btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 40px; padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: none; color: var(--color-muted-strong);
  font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pxtoggle__btn.is-active { background: var(--color-grana); color: var(--color-on-grana); }
.pxtoggle__save {
  font-size: var(--text-xs); font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--color-quetzal-ink); color: var(--color-on-grana);
}
.pxtoggle__btn.is-active .pxtoggle__save { background: rgba(255, 255, 255, 0.25); color: var(--color-on-grana); }
.pxtoggle__btn:not(.is-active) .pxtoggle__save { background: var(--color-ambar-wash); color: var(--color-ambar-deep); }
/* Mobile audit fix: bump the toggle to the same 44px thumb target already
 * used for `.lang__btn`/`.lang__opt` below 26.9rem — its 40px base height
 * is a mouse-era value, not wrong on desktop, just short of the touch
 * minimum on a phone. */
@media (max-width: 26.9rem) { .pxtoggle__btn { min-height: 44px; } }

/* ── 7b · Pricing cards (shared) ──────────────────────────────────── */
.precios { max-width: var(--page-max); margin-inline: auto; padding: var(--space-lg) var(--space-gutter) var(--space-xl); text-align: center; }
.precios .body { margin-inline: auto; }
.plans { list-style: none; padding: 0; margin-top: var(--space-lg); display: grid; gap: var(--space-sm); grid-template-columns: 1fr; text-align: left; }
@media (min-width: 30rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { display: flex; flex-direction: column; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md); background: var(--color-panel); }
.plan--turp { border-color: var(--color-ambar); }
.plan__n { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-lg); }
.plan__badge { font-size: var(--text-xs); border: var(--rule-hair) solid var(--color-ambar); color: var(--color-ambar-deep); border-radius: var(--radius-pill); padding: 0 var(--space-2xs); margin-left: var(--space-2xs); }
.plan__hook {
  display: inline-block; align-self: flex-start; margin-top: var(--space-2xs);
  font-size: var(--text-xs); font-weight: 700;
  color: var(--color-quetzal-ink); border: var(--rule-hair) solid var(--color-quetzal-ink);
  border-radius: var(--radius-pill); padding: 1px var(--space-xs);
}
.plan__cap { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink); text-wrap: balance; }
.plan__hrs { margin-top: 2px; font-size: var(--text-xs); color: var(--color-muted-strong); }
/* Ladder line: every paid card states what it inherits instead of repeating
 * a lower tier's bullets — ported from the root landing ladder verbatim. */
.plan__cascade {
  margin-top: var(--space-sm); padding-top: var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--color-muted-strong);
}
.plan__cascade + .plan__in { border-top: 0; margin-top: var(--space-xs); padding-top: 0; }
.plan__pr { margin-top: var(--space-sm); font-size: var(--text-2xl); font-family: var(--font-serif); }
.plan__per { font-size: var(--text-sm); color: var(--color-muted-strong); }
.plan__trial { margin-top: var(--space-2xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-quetzal-ink); }
.plan__annualnote { margin-top: 2px; font-size: var(--text-xs); color: var(--color-muted-strong); }
.plan__in { list-style: none; padding: 0; margin-top: var(--space-sm); display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted-strong); }
.plan__in li { padding-left: 1.1em; position: relative; }
.plan__in li::before { content: "—"; position: absolute; left: 0; color: var(--color-rule-strong); }
/* Per-card CTAs — pinned to the bottom of the card (`.plan` is a flex
 * column above) so buttons line up across cards of uneven bullet-list
 * length. Free has one button (nothing to buy); paid tiers get a second,
 * disabled "coming soon" button — see .btn:disabled above — because no
 * real checkout URL exists pre-launch (billing isn't wired up yet, see
 * the hero copy). Never point this at a guessed checkout link. */
.plan__cta { margin-top: auto; padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); }
.plan__cta .btn { width: 100%; }

/* ── 7c · Pricing FAQ / reassurance strip ─────────────────────────── */
.pxfaq { margin-top: var(--space-xl); text-align: center; }
.pxfaq__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--color-muted-strong); }
.pxfaq__list {
  list-style: none; padding: 0; margin-top: var(--space-sm);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm); color: var(--color-ink);
}
.pxfaq__list li { padding-left: 1.2em; position: relative; }
.pxfaq__list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-quetzal-ink); font-weight: 700; }
.pxfaq__foot { margin-top: var(--space-md); }
.pxfaq__foot .dlnk { font-size: var(--text-sm); color: var(--color-accent-ink); text-decoration: underline; }

/* ── 8 · Closing — downloads + footer merged into one compact band ──── */
.closing { border-top: var(--rule-hair) solid var(--color-rule); }
.closing__top { max-width: 46rem; margin-inline: auto; padding: var(--space-xl) var(--space-gutter) var(--space-lg); text-align: center; }
.closing__top .h2 { margin-inline: auto; }
.get { margin-top: var(--space-lg); display: grid; gap: var(--space-2xs); grid-template-columns: 1fr; text-align: left; }
@media (min-width: 30rem) { .get { grid-template-columns: repeat(2, 1fr); } }
.get__i {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.get__i--go { background: var(--color-grana); border-color: var(--color-grana); color: var(--color-on-grana); }
.get__i--go:hover { background: var(--color-grana-pressed); }
/* Waitlist cards (iOS/Mac, Aug 2026) — neutral panel instead of the Grana
 * "download now" treatment above, same visual family as the pricing page's
 * disabled "coming soon" buttons: this is a signup, not an install. */
.get__i--wait { background: var(--color-panel); border: var(--rule-hair) solid var(--color-rule-strong); color: var(--color-ink); }
.get__os { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-caps); opacity: 0.75; }
.get__ico { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.get__do { font-size: var(--text-base); font-weight: 500; }
.get__meta { font-size: var(--text-xs); opacity: 0.7; }
.get__form { display: flex; gap: var(--space-2xs); margin-top: var(--space-xs); }
.get__input {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  padding: 0 var(--space-xs); border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule-strong);
  background: var(--color-bg); color: var(--color-ink);
  font-size: var(--text-sm); font-family: inherit;
}
.get__input::placeholder { color: var(--color-muted); }
.get__input:focus-visible { outline: 2px solid var(--color-grana); outline-offset: 1px; }
.get__input.is-invalid { border-color: var(--color-grana); }
.get__submit {
  appearance: none; border: 0; cursor: pointer; white-space: nowrap;
  min-height: 40px; padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-grana); color: var(--color-on-grana);
  font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.get__submit:hover { background: var(--color-grana-pressed); }
.get__submit:disabled { opacity: 0.6; cursor: default; }
.get__success {
  margin-top: var(--space-xs); display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-quetzal-ink);
}
.get__check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-quetzal-ink); color: var(--color-on-grana); font-size: 10px;
}
.get__error { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-grana); }

/* Apple / waitlist card spans the full row under Windows + Android on the
 * two-column layout (founder, Sep 30 2026), and lays itself out as a wide
 * card rather than a stretched phone card: OS label + copy on the left, the
 * email form on the right, wrapping to stacked when the row gets narrow. On
 * one column (phones) nothing changes: the base `.get__i` column applies. */
.get__txt { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 30rem) {
  .get__i--wide {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--space-xs) var(--space-md);
  }
  .get__i--wide .get__txt { flex: 1 1 15rem; }
  .get__i--wide .get__form,
  .get__i--wide .get__success { flex: 1 1 17rem; margin-top: 0; }
  .get__i--wide .get__error { flex: 1 0 100%; margin-top: 0; }
}
.closing__top .microline { text-align: center; }

.closing__foot { max-width: var(--page-max); margin-inline: auto; padding: var(--space-lg) var(--space-gutter) var(--space-xl); text-align: center; border-top: var(--rule-hair) solid var(--color-rule); }
.foot__mark { font-family: var(--font-serif); font-weight: 500; letter-spacing: var(--track-display, 0.012em); font-size: var(--text-lg); }
.foot__links { margin-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.foot__links a { font-size: var(--text-sm); text-decoration: none; color: var(--color-muted-strong); }
.foot__links a:hover { color: var(--color-ink); }
.foot__legal { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.foot__legal a { color: var(--color-accent-ink); text-decoration: underline; }

/* ── Social proof strip (website-review-2026-09.md §2/§10 P1 #13) ────────
 * Two plain links, no card chrome, no rating stars — see the HTML comment
 * on `.proof` for why (nothing invented, nothing rounded up). Sits directly
 * under the hero. ────────────────────────────────────────────────────── */
.proof { max-width: var(--page-max); margin-inline: auto; padding: 0 var(--space-gutter) var(--space-md); }
.proof__inner { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: baseline; }
.proof__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; text-decoration: none; }
.proof__stat { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.proof__cta { font-size: var(--text-xs); color: var(--color-accent-ink); }
.proof__item--store { align-items: center; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted-strong); }
.proof__item--store:hover { color: var(--color-ink); }
.proof__ico { flex: none; opacity: 0.85; }

/* ── Real-pixel sections — #live/#colibri/#report/#share (website-review-
 * 2026-09.md §8, docs/research/competitive-standing-2026-09.md) ─────────
 * Same two-column rhythm repeated four times, image and copy swapping
 * sides via `.shot--flip`. Screenshots keep their own real app chrome
 * (nav rail, title bar) baked into the pixels, so the frame here is just a
 * border/shadow — the same window-shadow language `.appmock` already uses
 * above, not a second fake chrome drawn around a real one. ─────────────── */
.shot { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--space-gutter); }
.shot__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
.shot--flip .shot__media { order: 2; }
.shot--flip .shot__copy { order: 1; }
.shot__media {
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 1px 2px rgba(25, 21, 25, 0.05), 0 20px 44px -20px rgba(25, 21, 25, 0.28);
}
.shot__img { display: block; width: 100%; height: auto; }
/* #report's captures are a narrower portrait crop (470×615, not the
 * 1180×650 landscape the other three use) — cap the frame near its native
 * width so it is not upscaled past its own resolution inside the wide
 * grid column. */
.shot__media--narrow { max-width: 26rem; margin-inline: auto; }
/* Light/dark screenshot pair (#report): same selector shape tokens.css uses
 * for the ground itself, so the swap tracks the same "OS preference until an
 * explicit choice" rule as everything else on the page. */
.shot__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot__img--light { display: none; }
  :root:not([data-theme="light"]) .shot__img--dark { display: block; }
}
:root[data-theme="dark"] .shot__img--light { display: none; }
:root[data-theme="dark"] .shot__img--dark { display: block; }
.shot__copy { max-width: 36ch; }
.shot__copy .h2 { margin-top: var(--space-3xs); font-size: var(--text-xl); line-height: 1.2; }
.shot__copy .body { margin-top: var(--space-2xs); }
@media (max-width: 55rem) {
  .shot__inner { grid-template-columns: 1fr; }
  .shot--flip .shot__media, .shot--flip .shot__copy { order: initial; }
  .shot__media { order: -1; }
}

/* ── #share's CSS mockup (no real capture yet — see the HTML comment) ──── */
.shareshot {
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  box-shadow: 0 1px 2px rgba(25, 21, 25, 0.05), 0 20px 44px -20px rgba(25, 21, 25, 0.28);
  padding: var(--space-sm) var(--space-md);
  max-width: 24rem;
}
.shareshot__t { font-size: var(--text-sm); font-weight: 700; padding-bottom: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.shareshot__row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding: var(--space-xs) 2px; border: none; border-bottom: var(--rule-hair) dashed var(--color-rule);
  background: none; font: inherit; font-size: var(--text-sm); color: var(--color-ink); text-align: left; cursor: default;
}
.shareshot__row:last-child { border-bottom: none; }
.shareshot__row--accent { color: var(--color-accent-ink); font-weight: 600; }
.shareshot__hint { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }

/* ── Downloads: macOS-honesty microline (website-review-2026-09.md §9) ─── */
.get__platforms { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted-strong); text-align: center; }

/* ── Hero ad (Sep 30 2026) — muted autoplay product video under the hero
 * CTA row. Frame is dark in both themes on purpose (the ad is a dark
 * composition, its poster is the first paint), 16:9 reserved up front so the
 * page never shifts when the poster or video arrives. The bar is JS-drawn:
 * without JS the native `controls` stay on and the bar/big button stay
 * `hidden`. ──────────────────────────────────────────────────────────── */
.heroad { margin: var(--space-md) 0 var(--space-md); }
.heroad__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: #191519;
  box-shadow: 0 1px 2px rgba(25, 21, 25, 0.05), 0 20px 44px -20px rgba(25, 21, 25, 0.28);
}
.heroad__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #191519; }
.heroad__bar {
  position: absolute; left: var(--space-xs); bottom: var(--space-xs);
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
}
.heroad__btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background: rgb(25 21 25 / 0.78); color: #FBF8F3;
  font: inherit; font-size: var(--text-xs); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.heroad__btn:hover { background: rgb(25 21 25 / 0.92); }
.heroad__btn svg { flex: none; }
.heroad__btn:focus-visible, .heroad__big:focus-visible { outline: 2px solid #FBF8F3; outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-grana); }
@media (pointer: coarse) { .heroad__btn { min-height: 44px; } }
.heroad__big {
  appearance: none; border: 0; cursor: pointer;
  position: absolute; inset: 0; margin: auto;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-grana); color: var(--color-on-grana);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.heroad__big:hover { background: var(--color-grana-pressed); }
.heroad__big svg { margin-left: 3px; }
.heroad__cap { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted-strong); }