/* =========================================================
   Mock-Up Machine — Landing
   ========================================================= */

/* The brand fonts, served from MM itself (the same Google Fonts files and ranges, SIL OFL: vichsi/fonts/*-OFL.txt):
   no stop at two other servers before the first words show. Archivo and JetBrains Mono are variable,
   one file per range for every weight. The studio and admin still load them from Google, as live. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/vichsi/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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/vichsi/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: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/vichsi/fonts/plex-arabic-400-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/vichsi/fonts/plex-arabic-600-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/static/vichsi/fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/static/vichsi/fonts/jetbrains-mono-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; }

:root {
  /* Mapped onto the VICH tokens in /static/vichsi/vichsi.css (dark default, light by device or choice) */
  --bg: var(--v-bg);
  --bg-2: var(--v-bg);
  --panel: var(--v-bg);
  --panel-2: var(--v-raised);
  --panel-3: var(--v-raised-2);
  --line: var(--v-line);
  --line-soft: var(--v-line);
  --ink: var(--v-text);
  --ink-soft: var(--v-text-soft);
  --muted: var(--v-muted);
  --muted-2: var(--v-muted-2);

  --accent: var(--v-accent);
  --accent-2: var(--v-accent);
  --accent-3: var(--v-accent);
  --accent-ink: var(--v-on-accent);
  --accent-glow: transparent;
  --accent-glow-strong: transparent;

  --radius: var(--v-radius);
  --radius-sm: var(--v-radius);
  --radius-lg: var(--v-radius);

  --shadow-2: 0 24px 60px -24px rgba(0, 0, 0, 0.45);

  --container: 1280px;
  /* First section sizes: the shared first-section rulebook v1.0 (shared with every VichSI product page) */
  --gutter: 24px;
  --hdr-logo-h: 54px;
  --hdr-pad: 18px;
  --hdr-pad-scrolled: 10px;
  --hdr-h: calc(var(--hdr-logo-h) + 2 * var(--hdr-pad));

  --font: var(--v-font-sans);

  --t: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (max-width: 599px) {
  :root { --gutter: 20px; --hdr-logo-h: 48px; --hdr-pad: 12px; --hdr-pad-scrolled: 8px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

body::before {
  /* base radial wash so particles read on top */
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, #060a0c 0%, #07090c 50%, #050709 100%);
  z-index: -2;
  pointer-events: none;
}


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

::selection { background: var(--accent); color: var(--accent-ink); }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header (transparent) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  padding: var(--hdr-pad) 0;
  transition: padding var(--t), background var(--t), border-color var(--t), backdrop-filter var(--t);
}
.site-header[data-elevated="true"] {
  padding: var(--hdr-pad-scrolled) 0;
  background: rgba(7, 9, 12, 0.55);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line-soft);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 0 14px var(--accent-glow-strong));
  transition: filter var(--t), transform var(--t);
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand:hover .brand-mark { filter: drop-shadow(0 0 18px var(--accent)); transform: translateY(-1px); }
.brand-icon-link {
  display: inline-flex;
  border-radius: var(--radius-sm);
}
.brand-icon-link:focus-visible,
.brand-top-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.brand-icon-link:hover .brand-mark { filter: drop-shadow(0 0 18px var(--accent)); transform: translateY(-1px); }
.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.brand-wordmark {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.brand-top-link { color: var(--ink); border-radius: var(--radius-sm); }
.brand-top-link:hover { color: var(--accent); }
.brand-byline {
  display: none;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow-strong);
  font-weight: 500;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.built-by {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  transition: color var(--t);
}
.built-by strong {
  color: var(--ink);
  font-weight: 600;
}
.built-by:hover { color: var(--accent); }
.built-by:hover strong { color: var(--accent); }

.profile-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.profile-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.22), transparent 36%),
    linear-gradient(145deg, var(--accent-3), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 14px 30px -18px var(--accent-glow-strong);
  cursor: pointer;
}
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(10, 13, 17, 0.96);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
  z-index: 70;
}
.profile-email {
  display: block;
  padding: 8px 10px 10px;
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.profile-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.profile-signout { color: #ffb8b8; }

.admin-bubble {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--accent-ink);
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.35), transparent 34%),
    linear-gradient(145deg, #fff4a8, var(--accent));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px -18px var(--accent-glow-strong), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: transform var(--t), filter var(--t);
}
.admin-bubble:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t), filter var(--t);
  white-space: nowrap;
}
.button-lg { height: 46px; padding: 0 20px; font-size: 15px; }
.button-primary {
  background: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 60%, var(--accent-2) 100%);
  color: var(--accent-ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 12px 30px -10px var(--accent-glow-strong);
}
.button-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.button-primary:active { transform: translateY(0); filter: brightness(0.98); }
.button-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.button-ghost {
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  border-color: var(--line);
}
.button-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon-button {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.icon-button:hover { background: rgba(255,255,255,0.04); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, rgba(20,23,27,0.5));
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-glow), 0 0 12px var(--accent);
}
.eyebrow-static {
  text-transform: uppercase;
  font-size: 11px;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
  letter-spacing: 0.12em;
  backdrop-filter: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 160px 0 96px;
  text-align: center;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ---------- Sections ---------- */
.section {
  padding: 96px 0;
  position: relative;
}
.section-tinted {
  background: rgba(10, 13, 17, 0.5);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(2px);
}
.section-spotlight { padding: 80px 0; }
.spotlight-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  align-items: center;
  gap: 56px;
  padding: 56px;
  border-radius: 24px;
  background:
    radial-gradient(640px 320px at -10% 50%, rgba(35, 213, 213, 0.18), transparent 70%),
    radial-gradient(540px 320px at 110% 110%, rgba(90, 169, 255, 0.14), transparent 65%),
    rgba(13, 17, 23, 0.72);
  border: 1px solid var(--line-soft);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.spotlight-card h2 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
}
.spotlight-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted, rgba(220, 230, 240, 0.78));
  margin: 0 0 24px;
  max-width: 560px;
}
.spotlight-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.spotlight-meta {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, rgba(220, 230, 240, 0.65));
}
.spotlight-visual {
  display: flex;
  justify-content: center;
}
.phone-frame {
  position: relative;
  width: 200px;
  height: 400px;
  border-radius: 36px;
  background: linear-gradient(160deg, rgba(28, 34, 44, 0.95), rgba(12, 15, 21, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.02);
  padding: 18px;
  display: flex;
  align-items: stretch;
}
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.85);
}
.phone-screen {
  position: relative;
  flex: 1;
  border-radius: 24px;
  background:
    radial-gradient(160px 120px at 30% 20%, rgba(35, 213, 213, 0.35), transparent 70%),
    radial-gradient(180px 140px at 70% 80%, rgba(90, 169, 255, 0.32), transparent 70%),
    rgba(8, 11, 15, 0.96);
  overflow: hidden;
}
.phone-wave {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 55%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, #23d5d5), transparent);
  opacity: 0.8;
}
.phone-wave-2 {
  top: 62%;
  opacity: 0.5;
  filter: blur(0.5px);
}
.phone-caption {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 18%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(220, 230, 240, 0.92);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
}
@media (max-width: 860px) {
  .spotlight-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 28px;
    text-align: center;
  }
  .spotlight-card h2 { font-size: 32px; }
  .spotlight-lede { margin-left: auto; margin-right: auto; }
  .spotlight-actions { justify-content: center; }
  .phone-frame { width: 180px; height: 360px; }
}
.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 14px 0 14px;
}
.section-head .section-sub {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Features grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature {
  position: relative;
  background: linear-gradient(180deg, rgba(20,23,27,0.85) 0%, rgba(15,18,22,0.85) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
.feature:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px var(--accent-glow);
}
.feature:hover::before { opacity: 1; }
.feature-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, rgba(20,23,27,0.6));
  color: var(--accent);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.feature h3 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Modes ---------- */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.mode-card {
  background: linear-gradient(180deg, rgba(20,23,27,0.85) 0%, rgba(15,18,22,0.85) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(6px);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.mode-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px var(--accent-glow);
}
.mode-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mode-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mode-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mode-caption { background: color-mix(in srgb, var(--accent) 15%, rgba(20,23,27,0.5)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.mode-tov     { background: color-mix(in srgb, #c79bff 15%, rgba(20,23,27,0.5)); color: #c79bff; border: 1px solid color-mix(in srgb, #c79bff 30%, transparent); }

.mode-card > p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.steps.steps-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step {
  position: relative;
  padding: 24px;
  background: linear-gradient(180deg, rgba(20,23,27,0.85) 0%, rgba(15,18,22,0.85) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(6px);
  transition: border-color var(--t), transform var(--t);
}
.step:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.step-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.step h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.step p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.step strong { color: var(--ink); font-weight: 600; }

/* ---------- Auth modal ---------- */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: overlay-in 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.auth-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(22,26,32,0.98) 0%, rgba(14,17,21,0.98) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 30px 80px -30px var(--accent-glow);
  animation: modal-in 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.auth-close:hover { color: var(--ink); background: rgba(255,255,255,0.05); border-color: var(--line); }

.auth-title {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-sub {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.auth-tab {
  height: 34px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-3), var(--accent) 60%, var(--accent-2));
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 18px -8px var(--accent-glow-strong);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-field-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.auth-help {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.auth-help:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: 0 0 0 3px var(--accent-glow); }
.auth-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-field .auth-help-tip {
  display: block;
  margin: 2px 0 4px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 10%, rgba(7,9,12,0.7));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius);
  letter-spacing: 0;
  text-transform: none;
}
.auth-field .auth-help-tip a { color: var(--accent); text-decoration: underline; }
.auth-field input {
  height: 40px;
  padding: 0 14px;
  background: rgba(7, 9, 12, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.auth-field input::placeholder { color: var(--muted-2); }
.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(7, 9, 12, 0.85);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}
.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.auth-hint {
  font-size: 11.5px;
  color: var(--muted-2);
}
.auth-legal { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); text-align: center; }
.auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.auth-error {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: #ffb4b4;
  background: rgba(255, 80, 80, 0.08);
  border: 1px solid rgba(255, 80, 80, 0.25);
  border-radius: var(--radius);
}
.auth-submit {
  margin-top: 4px;
  width: 100%;
  height: 44px;
  font-size: 14.5px;
}

body.modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .section-head h2 { font-size: 36px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid .feature:last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {

  /* mobile brand: show glowing byline under wordmark */
  .brand { gap: 9px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-wordmark { font-size: 14px; }
  .brand-byline {
    display: inline-block;
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }

  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: 28px; }
  .section-head .section-sub { font-size: 14.5px; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid .feature:last-child { grid-column: auto; }
  .mode-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps.steps-3 { grid-template-columns: 1fr; }

  .auth-modal { padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}


/* =========================================================
   VichSI layer — flat black / white, no glows or gradients.
   Signal cyan only as a spark (focus, desktop hover in dark).
   ========================================================= */
body::before { background: none; }

/* Header + brand */
/* Header (rule book §4): transparent at the top, page colour + hairline once scrolled */
/* The scrolled hairline is a shadow, not a border, so the header stays exactly logo + 2 × padding tall */
.site-header { border-bottom: 0; }
.site-header[data-elevated="true"] { background: var(--v-bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 var(--v-line); }
.brand { color: var(--v-text); transition: color var(--t); }
.brand .vichsi-logo { width: auto; height: var(--hdr-logo-h); }
.header-actions { gap: 16px; }
.built-by { font-size: 13px; }
.built-by strong { color: var(--v-text); }
.button:focus-visible, .brand:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; }
.site-header :focus-visible, .hero :focus-visible { outline: 2px solid var(--v-focus); outline-offset: 3px; }
.site-header .theme-toggle-btn { width: 40px; height: 40px; }
/* Header Access button: outlined while the hero buttons are on screen, filled once they scroll away (landing.js) */
.header-cta { height: 40px; padding: 0 18px; font-size: 14px; font-weight: 500; background: transparent; color: var(--v-text); border-color: var(--v-line-strong); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.header-cta.is-filled { background: var(--v-accent); color: var(--v-on-accent); border-color: var(--v-accent); }

/* Buttons: white on black (dark), black on white (light) */
.button-primary { background: var(--v-accent); color: var(--v-on-accent); box-shadow: none; }
.button-primary:hover { filter: none; background: var(--v-text-soft); }
.button-ghost { background: transparent; color: var(--v-text); border-color: var(--v-line-strong); }
.button-ghost:hover { background: transparent; border-color: var(--v-text); }
.icon-button:hover { background: transparent; border-color: var(--v-line-strong); }

/* Account bubbles */
.profile-button { width: 40px; height: 40px; background: var(--v-raised); color: var(--v-text); border: 1px solid var(--v-line-strong); border-radius: var(--v-radius); box-shadow: none; }
.profile-menu { background: var(--v-bg); border-color: var(--v-line-strong); backdrop-filter: none; }
.profile-menu-item:hover { background: var(--v-raised); }
.profile-signout { color: var(--v-danger); }
.admin-bubble { width: 40px; height: 40px; background: transparent; color: var(--v-text); border: 1px solid var(--v-line-strong); border-radius: var(--v-radius); box-shadow: none; }

/* Hero (rule book §5–§9): one h1 (name, line, two-tone message), description, two buttons.
   Desktop/tablet: optical centre. Phones and short screens: top-anchored (media query below). */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr-h) + 24px) 0 calc(var(--hdr-h) + 4vh); }
.hero h1 { margin: 0; font-weight: 600; }
.hero-name { display: block; font-size: clamp(2.7rem, 5.04vw, 4.2rem); line-height: 1; letter-spacing: 0.14em; padding-left: 0.14em; text-transform: uppercase; color: var(--v-text); }
.hero-line { display: block; margin-top: 16px; font: 400 13px/1.2 var(--v-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-muted); }
.hero-message { display: block; max-width: 1040px; margin: 40px auto 0; font-size: clamp(30px, 2.4vw + 20px, 52px); line-height: 1.08; letter-spacing: -0.02em; color: var(--v-muted); text-wrap: balance; }
.hero-message > span { display: block; }
.hero-message .payoff { color: var(--v-text); }
.hero-message .setup { color: #D9A9C4; }   /* owner, 2026-11-02: dusty mauve, which sits with MM pink (#FF7EB3) without competing; the phone section's heading too */
.hero-desc { max-width: 36em; margin: 24px auto 0; font: 400 18px/1.6 var(--v-font-sans); color: var(--v-muted); text-wrap: pretty; }
.hero-desc .brand-name { color: var(--v-text); font-weight: 600; }
.hero-cta { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.hero-cta .button { height: 52px; min-width: 200px; padding: 0 28px; border-radius: var(--v-radius); font: 500 16px/1 var(--v-font-sans); gap: 8px; }
.hero-cta .button-primary svg { transition: transform 200ms ease; }
/* Touch screens get no sticky hover on the hero buttons; the mouse hover is in the block below */
.hero-cta .button:hover, .hero-cta .button:active { transform: none; filter: none; }
.hero-cta .button-primary:hover { background: var(--v-accent); color: var(--v-on-accent); }
.hero-cta .button-ghost:hover { border-color: var(--v-line-strong); }
.nowrap { white-space: nowrap; }

/* Entrance: the name is there at once; line, message, description and buttons rise in reading order */
@keyframes vichsi-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-line, .hero-message, .hero-desc, .hero-cta { animation: vichsi-rise 560ms var(--mm-ease-expo) both; }
.hero-message { animation-delay: var(--reveal-step); }
.hero-desc { animation-delay: calc(2 * var(--reveal-step)); }
.hero-cta { animation-delay: calc(3 * var(--reveal-step)); }

/* Section heads */
.eyebrow-static { font-family: var(--v-font-mono); color: var(--v-muted); letter-spacing: 0.14em; }
.section-head h2 { font-weight: 600; letter-spacing: -0.02em; }
.section-head .section-sub { color: var(--v-muted); }
.section-tinted { background: var(--v-bg); border-color: var(--v-line); backdrop-filter: none; }

/* Cards: black with a thin line */
.feature, .mode-card, .step { background: var(--v-bg); border-color: var(--v-line); backdrop-filter: none; box-shadow: none; }
.feature::before { display: none; }
.feature:hover, .mode-card:hover, .step:hover { box-shadow: none; border-color: var(--v-line-strong); }
.feature-icon { background: transparent; color: var(--v-text); border: 1px solid var(--v-line-strong); }
.feature p, .mode-card > p, .step p, .check-list li { color: var(--v-muted); }
.mode-head h3 { font-weight: 600; }
.mode-caption, .mode-tov { background: transparent; color: var(--v-text); border: 1px solid var(--v-line-strong); border-radius: var(--v-radius); font-family: var(--v-font-mono); font-weight: 400; letter-spacing: 0.1em; }
.check-list li::before { background: transparent; border: 1px solid var(--v-line-strong); border-radius: var(--v-radius); }
.check-list li::after { border-color: var(--v-text); }
.step-num { font-family: var(--v-font-mono); color: var(--v-muted-2); font-weight: 400; }

/* Spotlight + phone illustration in monochrome */
.spotlight-card { background: var(--v-bg); border: 1px solid var(--v-line); border-radius: var(--v-radius); box-shadow: none; }
.spotlight-card h2 { font-weight: 600; }
.spotlight-lede, .spotlight-meta { color: var(--v-muted); }
.spotlight-meta { font-family: var(--v-font-mono); font-size: 11.5px; }
.phone-frame { background: var(--v-raised); border-color: var(--v-line-strong); box-shadow: none; }
.phone-notch { background: var(--v-bg); }
.phone-screen { background: var(--v-bg); border: 1px solid var(--v-line); }
.phone-wave { background: linear-gradient(90deg, transparent, var(--v-text), transparent); opacity: 0.55; }
.phone-wave-2 { opacity: 0.3; }
.phone-caption { color: var(--v-text); background: var(--v-raised); border: 1px solid var(--v-line); border-radius: var(--v-radius); font-family: var(--v-font-mono); }

/* Footer: one line */

/* Login window */
.auth-overlay { background: var(--v-overlay); }
.auth-modal { background: var(--v-bg); border-color: var(--v-line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.auth-title { font-weight: 600; }
.auth-tabs { background: transparent; border-color: var(--v-line); }
.auth-tab.is-active { background: var(--v-raised); color: var(--v-text); box-shadow: none; }
.auth-close:hover { background: transparent; }
.auth-field span { font-family: var(--v-font-mono); font-size: 11px; letter-spacing: 0.1em; }
.auth-field input { background: transparent; border-color: var(--v-line-strong); }
.auth-field input:focus { border-color: var(--v-focus); background: transparent; box-shadow: none; }
.auth-help { color: var(--v-text); border-color: var(--v-line-strong); }
.auth-help:hover { background: transparent; box-shadow: none; }
.auth-field .auth-help-tip { background: var(--v-raised); border-color: var(--v-line); color: var(--v-text-soft); }
.auth-field .auth-help-tip a { color: var(--v-text); }
.auth-check input { accent-color: var(--v-text); }
.auth-error { color: var(--v-danger); background: transparent; border-color: var(--v-danger); }

/* Desktop only (real mouse): whatever you point at lights up — Signal in dark, Ink in light */
@media (hover: hover) and (pointer: fine) {
  .brand:hover, .built-by:hover, .built-by:hover strong,
  .auth-tab:hover, .auth-close:hover,
  .profile-menu-item:hover, .auth-field .auth-help-tip a:hover { color: var(--v-hover); }
  .button-primary:hover { background: var(--v-hover-fill); color: var(--v-on-hover-fill); }
  .button-ghost:hover, .admin-bubble:hover, .profile-button:hover, .icon-button:hover, .auth-help:hover { border-color: var(--v-hover-line); color: var(--v-hover); }
  .feature:hover, .mode-card:hover, .step:hover { border-color: var(--v-hover-line); }
  .feature:hover h3, .mode-card:hover h3, .step:hover h3, .step:hover .step-num { color: var(--v-hover); }
  .feature:hover .feature-icon { color: var(--v-hover); border-color: var(--v-hover-line); }
  .mode-card:hover .mode-badge { color: var(--v-hover); border-color: var(--v-hover-line); }
  .auth-field input:hover { border-color: var(--v-text); }
  .hero-cta .button-primary:hover { background: var(--v-hover-fill); color: var(--v-on-hover-fill); }
  .hero-cta .button-primary:hover svg { transform: translateX(3px); }
  .hero-cta .button-ghost:hover, .header-cta:hover { border-color: var(--v-hover-line); color: var(--v-hover); }
  .header-cta.is-filled:hover { background: var(--v-hover-fill); border-color: var(--v-hover-fill); color: var(--v-on-hover-fill); }
}

/* Pricing (plans + footage folders): same cards as the rest of the page; prices come from
   /api/v1/prices in the visitor's currency (pricing/prices.js). */
.section-pricing { border-top: 1px solid var(--v-line); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; min-height: 260px; }
.price-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px;
  background: var(--v-bg); border: 1px solid var(--v-line); border-radius: var(--v-radius); transition: border-color var(--t); }
.price-card.is-featured { border-color: var(--v-line-strong); }
.price-badge { position: absolute; top: -11px; left: 24px; padding: 3px 8px; background: var(--v-bg);
  border: 1px solid var(--v-line-strong); border-radius: var(--v-radius); font-family: var(--v-font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-text); }
.price-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--v-text); }
.price-amount { margin: 4px 0 0; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--v-text); }
.price-cadence { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--v-muted); }
.price-note { margin: 0 0 8px; flex: 1; font-size: 14px; line-height: 1.55; color: var(--v-muted); }
.price-button { width: 100%; height: 44px; }
.price-button:disabled { opacity: 1; cursor: default; color: var(--v-muted); border-color: var(--v-line); background: transparent; }
.pricing-status { margin: 20px auto 0; max-width: 640px; text-align: center; font-size: 15px; color: var(--v-text); }
.price-includes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 32px 0 0; padding: 0;
  list-style: none; font-size: 14px; color: var(--v-muted); }
.price-includes li { display: flex; align-items: baseline; gap: 10px; }
.price-includes li::before { content: ""; flex: none; width: 6px; height: 6px; transform: translateY(-1px);
  border: 1px solid var(--v-text); border-radius: 1px; }
.folders-block { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--v-line); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.folders-head h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--v-text); }
.folders-head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--v-muted); max-width: 34em; }
.folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.folder-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--v-bg);
  border: 1px solid var(--v-line); border-radius: var(--v-radius); transition: border-color var(--t); }
.folder-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--v-text); }
.folder-count { margin: 0; font-family: var(--v-font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--v-muted); }
.folder-price { margin: 8px 0 6px; font-size: 22px; font-weight: 600; color: var(--v-text); }
.folder-button { height: 40px; margin-top: auto; }
.folder-button:disabled { opacity: 1; cursor: default; color: var(--v-muted); border-color: var(--v-line); }
@media (hover: hover) and (pointer: fine) {
  .price-card:hover, .folder-card:hover { border-color: var(--v-hover-line); }
  .price-card:hover .price-name, .folder-card:hover .folder-name { color: var(--v-hover); }
}
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; min-height: 0; }
  .folders-block { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .folder-grid { grid-template-columns: 1fr; }
  .price-includes { flex-direction: column; align-items: flex-start; max-width: 440px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 1023px) {
  .hero-line { font-size: 12px; }
  .hero-desc { font-size: 17px; }
}
@media (max-width: 599px) {
  .header-actions { gap: 10px; }
  .header-actions .built-by { display: none; }
  .header-cta { padding: 0 14px; }
  /* Signed in on a phone: the account menu carries Access MM and Sign out; the shield opens the admin console */
  body[data-signed-in] .header-cta { display: none; }
  .hero-line { margin-top: 12px; }
  .hero-message { margin-top: 28px; line-height: 1.12; }
  .hero-desc { margin-top: 20px; font-size: 16px; line-height: 1.55; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; margin: 32px auto 0; }
  .hero-cta .button { width: 100%; min-width: 0; }
}
@media (max-width: 639px) {
  /* Signed in on a narrow tablet the shield + account button need the credit's room */
  body[data-signed-in] .header-actions .built-by { display: none; }
}
@media (max-width: 599px), (max-height: 699px) {
  .hero { min-height: 0; justify-content: flex-start; padding-top: calc(var(--hdr-h) + 48px); padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero * { animation: none !important; }
}

/* =========================================================
   vichsi.com look on the landing and sign-in (the shared product-touch spec v1.1, 2026-10-25).
   The night field #0A0C11 with one dot grid and one grain for the whole page (dark only), the
   lifted room, raised cards, square corners; MM's pink on the buttons (ink text), lit frame
   edges, small square markers and link underlines. Each soft light fades to nothing inside its
   own box. This page is dark only (spec v1.2: no theme switch before sign-in). Backgrounds (v1.3):
   no dot grid; the hero has the particle network, two sections carry MM's own drawings (the
   voiceover waveform, the one-minute timeline), the rest are plain in two calm tones, and the page
   ends with the white SaaS footer (spec v1.6). The phone keeps its own look. Copy, order and the rule book are unchanged.
   ========================================================= */
:root {
  --v-bg: #0A0C11; --v-room: #0F121A; --v-raised: #151925; --v-raised-2: #1B2030;
  --v-card: #151925; --v-card-2: #1B2030;
  --v-line: #252B3A; --v-line-strong: #363D50;
  --v-text-soft: #CFD3D2; --v-muted: #AEB4B3; --v-muted-2: #7D8496;
  --v-accent: #FF7EB3; --v-on-accent: #0E0E0E;
  --v-overlay: rgba(10, 12, 17, 0.82); --v-nav: rgba(10, 12, 17, 0.82);
  --v-grid: #1B2131; --v-grain: 0.045;
  /* One grade down the page: every soft pink light peaks at the same strength (as on RECC), every lit edge is the same */
  --light-peak: 0.15; --light-mid: 0.045;
  --v-lit-edge: rgba(255, 126, 179, 0.55);
  --v-lit-shadow: 0 0 0 1px rgba(255, 126, 179, 0.1), 0 30px 90px -34px rgba(255, 126, 179, 0.38);
  --v-radius: 0px;
  /* MM's hue, for this page only (spec v1.4: nothing new reaches an inside screen; vichsi.css stays as live) */
  --v-ink: #0E0E0E; --v-hue: #FF7EB3; --v-hue-rgb: 255, 126, 179;
  --v-focus: #FF7EB3; --v-hover: #FF7EB3; --v-hover-line: #FF7EB3; --v-hover-fill: #FF8BC5; --v-on-hover-fill: #0E0E0E;
  --v-selection-bg: #FF7EB3; --v-selection-text: #0E0E0E;
}
/* What only a signed-in user sees here (the account menu, the admin shield) keeps the live colours */
.profile-menu-wrap, .admin-bubble {
  --v-bg: #000000; --v-raised: #121212; --v-raised-2: #1C1C1C; --v-line: #262626; --v-line-strong: #3A3A3A;
  --v-text: #FFFFFF; --v-text-soft: #C8C8C8; --v-muted: #9A9A9A; --v-muted-2: #6B6B6B;
  --v-accent: #FFFFFF; --v-on-accent: #000000; --v-signal: #23D5D5; --v-focus: #23D5D5;
  --v-hover: #23D5D5; --v-hover-line: #23D5D5; --v-hover-fill: #23D5D5; --v-on-hover-fill: #000000;
  --v-selection-bg: #23D5D5; --v-selection-text: #000000; --v-danger: #FF5C5C; --v-radius: 2px;
}

/* The ground: the field, and one fine grain over the whole page (invisible as a pattern). No dot grid. */
body { background: var(--v-bg); }
body::before { content: none; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: url(/static/vichsi/grain.webp) 0 0 / 128px 128px; opacity: var(--v-grain); }

/* Plain sections alternate the two calm tones, so section edges read by tone, not by a rule:
   hero and product field, how it works room, capabilities field, modes room, phone field, pricing room,
   questions field, the close room, footer field */
.section-how, .section-tinted, .section-pricing, .section-close { background: var(--v-room); }
.section-tinted, .section-pricing { border-top: 0; border-bottom: 0; }
.spotlight-card { background: var(--v-room); border-color: var(--v-line); }

/* Cards on the ground: raised, a quiet edge; the pointer lights the edge in pink */
.feature, .mode-card, .step, .price-card, .folder-card { background: var(--v-card); }
@media (hover: hover) and (pointer: fine) {
  .feature:hover, .mode-card:hover, .step:hover, .price-card:hover, .folder-card:hover { background: var(--v-card-2); }
}

/* Buttons: pink with ink text; touch screens get no sticky hover */
.button-primary:hover { background: var(--v-accent); color: var(--v-on-accent); }

/* Square frames with a lit edge, and a soft light behind them that fades inside its own box */
.spotlight-visual, .price-grid { position: relative; isolation: isolate; }
.price-card.is-featured, .auth-modal { border-color: var(--v-lit-edge); box-shadow: var(--v-lit-shadow); }
.spotlight-visual::before, .price-card.is-featured::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(var(--v-hue-rgb), var(--light-peak)), rgba(var(--v-hue-rgb), var(--light-mid)) 55%, transparent);
}
main { overflow-x: clip; }   /* the lights spill past their frames, never past the page (as on vichsi.com) */
.auth-modal { background: var(--v-room); }
.auth-field input { background: var(--v-bg); }

/* Small square markers in pink, before names and section labels */
.eyebrow-static::before, .price-name::before, .folder-name::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 1px; background: var(--v-hue);
}
.price-includes li::before { border: 0; border-radius: 0; background: var(--v-hue); }
.check-list li::before { border-color: var(--v-lit-edge); }
.check-list li::after { border-color: var(--v-hue); }
.mode-caption, .mode-tov { border-color: var(--v-lit-edge); }
.price-badge { background: var(--v-hue); border-color: var(--v-hue); color: var(--v-ink); }

/* Link underlines in pink at 60% */
.built-by strong, .auth-field .auth-help-tip a {
  text-decoration: underline; text-decoration-color: rgba(var(--v-hue-rgb), 0.6);
  text-underline-offset: 0.24em; text-decoration-thickness: 0.07em;
}
@media (hover: hover) and (pointer: fine) {
  .built-by:hover strong, .auth-field .auth-help-tip a:hover { text-decoration-color: var(--v-hue); }
}

/* Square corners everywhere, the phone and the sign-in controls included */
.eyebrow-static, .auth-tab, .auth-help { border-radius: 0; }

/* The phone is a drawing of a real device: it keeps its look from before (rounded body, notch, rounded
   screen, waves, caption) and its colours, with the soft pink light behind it and thin side buttons. */
.phone-frame { border-radius: 36px; background: #121212; border-color: #3A3A3A; box-shadow: none; }
.phone-notch { border-radius: 10px; background: #000000; }
.phone-screen { border-radius: 24px; background: #000000; border: 1px solid #262626; }
.phone-wave { border-radius: 3px; background: linear-gradient(90deg, transparent, #FFFFFF, transparent); }
.phone-caption { color: #FFFFFF; background: #121212; border: 1px solid #262626; border-radius: 2px; }
.phone-frame::before, .phone-frame::after { content: ""; position: absolute; width: 3px; pointer-events: none; }
.phone-frame::before { left: -4px; top: 92px; height: 70px; border-radius: 2px 0 0 2px;   /* volume up and down */
  background: linear-gradient(#3A3A3A 0 42%, transparent 42% 58%, #3A3A3A 58%); }
.phone-frame::after { right: -4px; top: 112px; height: 52px; border-radius: 0 2px 2px 0; background: #3A3A3A; }

/* ---------- MM's own drawings (spec v1.3): voice in, video out ---------- */
:root { --mm-ease: cubic-bezier(0.22, 1, 0.36, 1); }   /* vichsi.com's ease-out */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Capabilities: a spoken voiceover as a full-width strip, a soft light playing across it like playback.
   The light loops only while the strip is on screen (landing.js); reduced motion gets it still. */
.wave { --win: 240px; position: relative; height: 96px; margin: -8px calc(50% - 50vw) 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: var(--v-hue); }
.wave__base { position: absolute; inset: 0; opacity: 0.24; }
.wave__win { position: absolute; top: 0; bottom: 0; left: 0; width: var(--win); overflow: hidden;
  transform: translateX(calc(var(--w, 1200px) * 0.55));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); }
.wave__lit { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 1200px); transform: translateX(calc(var(--w, 1200px) * -0.55)); }
@media (prefers-reduced-motion: no-preference) {
  .wave__win { animation: mm-wave-win var(--dur, 8s) linear infinite paused; }
  .wave__lit { animation: mm-wave-lit var(--dur, 8s) linear infinite paused; }
  .wave--quiet .wave__win, .wave--quiet .wave__lit { animation-iteration-count: 1; }   /* one pass each time sign-in opens, then still */
  .wave.is-playing .wave__win, .wave.is-playing .wave__lit { animation-play-state: running; }
}
@keyframes mm-wave-win { from { transform: translateX(calc(var(--win) * -1)); } to { transform: translateX(var(--w, 1200px)); } }
@keyframes mm-wave-lit { from { transform: translateX(var(--win)); } to { transform: translateX(calc(var(--w, 1200px) * -1)); } }
@media (max-width: 720px) { .wave { --win: 120px; } }

/* The sign-in window: the same voice, quieter, along the card's bottom edge (placed by landing.js) */
.wave--quiet { position: absolute; left: 0; right: 0; top: calc(50% + 150px); height: 72px; margin: 0; opacity: 0.62; pointer-events: none; }
@media (max-width: 560px) { .wave--quiet { height: 56px; } }
.auth-modal { z-index: 1; }

/* The three steps: a small square marker each */
.step-num::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 1px; background: var(--v-hue); }

/* The white SaaS footer (spec v1.6 §0000), the same as RECC's (the reference for all four): white ground, ink type,
   MM's ink logo and an ink button (no sentence, spec §0000b); three link columns (the current site in bold); a bottom bar with the
   copyright, the address and the VichSI mark. Pink only as the 2px rule on top, never as text on white. It sits above the
   page's grain; ink focus rings, an underline on hover. Inside the page's container, so its edges are the page's. */
.site-footer { position: relative; z-index: 2; padding: 0; background: #FFFFFF; color: #0E0E0E; border-top: 2px solid var(--v-hue); }
.site-footer ::selection { background: #0E0E0E; color: #FFFFFF; }
.foot__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 72px 0 56px; }
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }   /* the logo alone, then the button (spec §0000b; 72px / 40px, as on all four) */
.foot__logo { display: inline-flex; line-height: 0; }
.foot__logo img { display: block; width: auto; height: 72px; }
.foot__cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 0; border-radius: 0;
  background: #0E0E0E; color: #FFFFFF; font: 600 15px/1 var(--v-font-sans); cursor: pointer; transition: background-color 0.2s ease, transform 140ms var(--mm-ease); }
.foot__cta:active { transform: scale(0.97); }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__h { margin: 0 0 12px; font: 600 14px/1.3 var(--v-font-sans); letter-spacing: 0; color: #0E0E0E; }
.foot__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.foot__col a { display: inline-flex; align-items: center; min-height: 34px; font: 400 15px/1.3 var(--v-font-sans); color: #5A5F60; text-decoration: none; transition: color 0.18s ease; }
.foot__here { display: inline-flex; align-items: center; min-height: 34px; font: 600 15px/1.3 var(--v-font-sans); color: #0E0E0E; }
.foot__col .foot__mail { font-family: var(--v-font-mono); font-size: 14px; }
.foot__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 28px; border-top: 1px solid #DCDFDB; }
.foot__bar p { margin: 0; font-size: 14px; color: #5A5F60; }
.foot__bar .foot__addr { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1 var(--v-font-mono); letter-spacing: 0.14em; text-transform: none; color: #0E0E0E; }
.foot__addr svg { width: 10px; height: auto; color: #0E0E0E; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 2px solid #0E0E0E; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .foot__col a:hover { color: #0E0E0E; text-decoration: underline; text-underline-offset: 3px; }
  .foot__cta:hover { background: #262929; }
}
@media (prefers-reduced-motion: reduce) { .foot__cta:active { transform: none; } }
@media (max-width: 860px) {   /* phones and tablets: stacked, the link columns two-up, 44px tap targets */
  .foot__top { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 56px 0 40px; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot__col a, .foot__here { min-height: 44px; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 599px) {   /* phones: the logo and its gap scaled down with the page */
  .foot__brand { gap: 32px; }
  .foot__logo img { height: 60px; }
}

/* ---------- The showpiece, from vichsi.com: Mock-Up Machine's screen in its lit frame, and the ad it makes ----------
   Right after the hero, as on vichsi.com. It is an example (the "Example" tag, "Example:" labels). The interface and
   the ad are vichsi.com's own markup and rules (ui.css, hues.css), scoped under .showpiece; the frame takes MM's pink.
   Inside the interface the live thing is the word being spoken (cyan, as on vichsi.com); in the ad it is pink. */
:root { --mm-example-client: "Emaar Properties"; --mm-example-initial: "E"; }   /* the example client: swap it here */
.section-showpiece { padding: 24px 0 clamp(104px, 9vw, 136px); }
.showpiece { position: relative; isolation: isolate; max-width: 1000px; margin: 0 auto; }
.showpiece figure, .showpiece p { margin: 0; }   /* vichsi.com resets these; the landing keeps the browser's figure margin */

/* a product's own site: the frame, its lit edge and the soft light behind it */
.showpiece .browser { position: relative; display: flex; flex-direction: column; background: #0B0C0C; border: 1px solid #2B2E2E; }
.showpiece .browser::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(var(--v-hue-rgb), var(--light-peak)), rgba(var(--v-hue-rgb), var(--light-mid)) 55%, transparent); }
.showpiece .browser::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border: 1px solid var(--v-lit-edge); box-shadow: var(--v-lit-shadow); }
.showpiece .browser__bar { display: flex; align-items: center; gap: 14px; flex: none; height: 44px; padding: 0 16px; border-bottom: 1px solid #1F2222; }
.showpiece .browser__dots { display: flex; gap: 6px; flex: none; }
.showpiece .browser__dots i { width: 9px; height: 9px; background: #2B2E2E; }
.showpiece .browser__url { flex: 1; max-width: 340px; margin: 0 auto; height: 28px; line-height: 28px; padding: 0 10px; overflow: hidden;
  text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/28px var(--v-font-mono); color: #AEB4B3; background: #151717; }
.showpiece .browser__tag { flex: none; padding: 3px 8px; border: 1px solid #363D50; font: 400 11px/1.3 var(--v-font-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: #AEB4B3; }
.showpiece .browser__body { flex: 1; min-height: 0; display: flex; }
.showpiece .browser__body > [data-ui].screen { flex: 1; height: auto; border: 0; }

.browser__body > .showpiece [data-ui].screen { flex: 1; height: auto; border: 0; }
.showpiece [data-ui].screen {
  container-type: inline-size; position: relative; width: 100%;
  display: flex; flex-direction: column;
  background: #0E0E0E; color: #E6E9E8; border: 1px solid #262A2A;
  font-family: "Archivo", Arial, sans-serif; line-height: 1.4; overflow: hidden;
}
.showpiece [data-ui].screen > :last-child { flex: 1; min-height: 0; }
.showpiece [data-ui].scr { font-size: clamp(11px, 1.9cqi, 14px); }
.showpiece [data-ui] .scr__bar {
  display: flex; align-items: center; gap: .9em; flex: none; height: 3.3em; padding: 0 1.15em;
  border-bottom: 1px solid #262A2A; background: #0B0C0C; white-space: nowrap;
}
.showpiece [data-ui] .scr__brand { display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: 1.02em; letter-spacing: -.01em; }
.showpiece [data-ui] .scr__brand .mark { width: .7em; height: auto; color: #FFFFFF; }
.showpiece [data-ui] .scr__path { font-family: "JetBrains Mono", Menlo, monospace; font-size: .82em; color: #9AA1A0; overflow: hidden; text-overflow: ellipsis; }
.showpiece [data-ui] .scr__path b { color: #C9CECD; font-weight: 400; }
.showpiece [data-ui] .scr__right { margin-left: auto; display: flex; align-items: center; gap: .6em; }
.showpiece [data-ui] .scr__btn {
  display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .95em;
  border: 1px solid #343838; font-size: .86em; font-weight: 600; color: #E6E9E8; background: transparent; white-space: nowrap;
}
.showpiece [data-ui] .scr__btn--go { background: #23D5D5; border-color: #23D5D5; color: #0E0E0E; }
.showpiece [data-ui] .scr__btn .ico { width: 1.2em; height: 1.2em; }
.showpiece [data-ui] .seg { display: inline-flex; border: 1px solid #2E3232; }
.showpiece [data-ui] .seg > span { padding: .45em .85em; font-size: .84em; color: #8C9392; border-left: 1px solid #2E3232; }
.showpiece [data-ui] .seg > span:first-child { border-left: 0; }
.showpiece [data-ui] .seg > .on { color: #0E0E0E; background: #E6E9E8; font-weight: 600; }
.showpiece [data-ui] .tag {
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .6em; border: 1px solid #343838;
  font-family: "JetBrains Mono", Menlo, monospace; font-size: .74em; color: #B4BAB9; white-space: nowrap;
}
.showpiece [data-ui] .mm { display: grid; grid-template-columns: minmax(0, 1fr) 15.5em; }
.showpiece [data-ui] .mm__edit { padding: 1.4em; display: grid; align-content: start; gap: 1.2em; border-right: 1px solid #262A2A; }
.showpiece [data-ui] .mm__label { font-size: .78em; color: #8C9392; margin-bottom: .55em; }
.showpiece [data-ui] .mm__script { font-size: 1.12em; line-height: 1.6; color: #9AA1A0; letter-spacing: -.005em; }
.showpiece [data-ui] .mm__script span { padding: .05em .12em; margin: 0 -.12em; }
.showpiece [data-ui] .mm__folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.showpiece [data-ui] .folder { border: 1px solid #262A2A; background: #151717; }
.showpiece [data-ui] .folder i { display: block; aspect-ratio: 4 / 3; background: #2A2F2E; }
.showpiece [data-ui] .folder:nth-child(2) i { background-color: #3A4140; }   /* the colour only: the shorthand reset its picture's size */
.showpiece [data-ui] .folder:nth-child(3) i { background-color: #22302F; }
/* Owner, 2026-10-28: City Apartments, Beach Chalet, then the studio's own dashed "Create a folder" tile. */
.showpiece [data-ui] .folder--new { border-style: dashed; border-color: #3A3F3F; background: transparent; }
.showpiece [data-ui] .folder.folder--new i { position: relative; background: transparent; }
.showpiece [data-ui] .folder--new i::before, .showpiece [data-ui] .folder--new i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.4em; height: 1px; background: #8A9190; transform: translate(-50%, -50%); }
.showpiece [data-ui] .folder--new i::after { transform: translate(-50%, -50%) rotate(90deg); }
.showpiece [data-ui] .folder span { display: block; padding: .45em .55em; font-size: .72em; color: #B4BAB9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showpiece [data-ui] .mm__wave { display: flex; align-items: center; gap: .16em; height: 2.6em; position: relative; overflow: hidden; }
.showpiece [data-ui] .mm__wave i { flex: 1; background: #3A3F3F; }
.showpiece [data-ui] .mm__wave .ph { position: absolute; inset: 0; background: none; }
.showpiece [data-ui] .mm__wave .ph::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #23D5D5; }
.showpiece [data-ui] .mm__out { display: grid; place-items: center; align-content: center; padding: 1.4em; background: #0B0C0C; }
.showpiece [data-ui] .phone { position: relative; width: 100%; max-width: 12.5em; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid #2E3232; background: #1C2020; }
.showpiece [data-ui] .phone::before { content: ""; position: absolute; left: 12%; right: 46%; bottom: 34%; height: 38%; background: #3A4140; }
.showpiece [data-ui] .phone::after { content: ""; position: absolute; left: 50%; right: 14%; bottom: 34%; height: 52%; background: #4C5453; }
.showpiece [data-ui] .cap {
  position: absolute; z-index: 1; left: .7em; right: .7em; bottom: 17%; text-align: center;
  font-weight: 600; font-size: 1.12em; line-height: 1.25; letter-spacing: -.01em; color: #FFFFFF;
}
.showpiece [data-ui] .cap span { display: inline-block; padding: 0 .12em; }
.showpiece [data-ui] .phone__tag { position: absolute; z-index: 1; top: .7em; left: .7em; }
.showpiece [data-ui] .mm__export { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 12.5em; margin-top: .9em; font-size: .8em; color: #8C9392; }
.showpiece [data-ui] .mm__export .scr__btn--go { background: #E6E9E8; border-color: #E6E9E8; }
@container (max-width: 560px) {
  .showpiece [data-ui] .mm { grid-template-columns: 1fr; }
  .showpiece [data-ui] .mm__edit { border-right: 0; border-bottom: 1px solid #262A2A; }
  .showpiece [data-ui] .mm__footage { display: none; }   /* the folders go, and their "Footage" label with them */
  .showpiece [data-ui] .phone { max-width: 11em; }
  .showpiece [data-ui] .mm .seg { display: none; }
}
.showpiece [data-ui] .mm [data-w] { transition: none; }
.showpiece [data-ui].screen.is-live .mm__wave .ph { animation: mm-play 6.4s linear infinite; }
.showpiece [data-ui].screen.is-live [data-w] { animation: mm-word 6.4s steps(1, end) infinite; animation-delay: calc(var(--i) * .58s); }
.showpiece [data-ui].screen.is-live .mm__script [data-w] { animation-name: mm-wordtext; }
.showpiece [data-ui].screen.is-paused .mm__wave .ph, .showpiece [data-ui].screen.is-paused [data-w] { animation-play-state: paused; }
.showpiece [data-ui].screen:not(.is-live) .mm__script [data-w] { color: #E6E9E8; }
.showpiece [data-ui] .switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #FFFFFF; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease-out; }

@keyframes mm-play { from { transform: translateX(0); } 91% { transform: translateX(100%); } to { transform: translateX(100%); } }
@keyframes mm-word { 0% { background: #23D5D5; color: #0E0E0E; } 9% { background: transparent; color: inherit; } }
@keyframes mm-wordtext { 0% { background: rgba(35, 213, 213, 0.16); color: #FFFFFF; } 9% { background: transparent; color: #E6E9E8; } }
@media (prefers-reduced-motion: reduce) { .showpiece [data-ui] * { animation: none !important; } }

/* the ad it makes, overlapping the frame */
.showpiece .out { position: absolute; z-index: 3; margin: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 60px -22px rgba(0, 0, 0, 0.75), 0 30px 90px -34px rgba(var(--v-hue-rgb), 0.38); }
.showpiece .out--mm { left: -56px; bottom: -48px; width: 176px; }
.showpiece .out__cap { padding: 8px 11px 9px; background: #151925; font-size: 13px; line-height: 1.35; color: #CFD3D2; }
.showpiece .out__cap::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; background: var(--v-hue); }
.showpiece .reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; }
.showpiece .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showpiece .reel__bars { position: absolute; z-index: 1; left: 8px; right: 8px; top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.showpiece .reel__bars i { position: relative; height: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.showpiece .reel__bars i:first-child::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0.6); }
.showpiece .reel__by { position: absolute; z-index: 1; left: 9px; top: 18px; display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; line-height: 1.25; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.showpiece .reel__by > span { display: grid; }
.showpiece .reel__by b { font-size: 11.5px; color: #fff; }
.showpiece .reel__client::before { content: var(--mm-example-client); }
.showpiece .reel__avatar { display: grid; place-items: center; width: 22px; height: 22px; flex: none; background: #fff; color: #0E0E0E;
  font-style: normal; font-weight: 700; font-size: 11px; text-shadow: none; }
.showpiece .reel__avatar::before { content: var(--mm-example-initial); }
.showpiece .reel__cap { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 54px; text-align: center; font-weight: 700; font-size: 15px;
  line-height: 1.22; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.showpiece .reel__cap span { display: inline-block; padding: 0 2px; }
.showpiece .reel__cta { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 12px; display: grid; place-items: center; height: 30px;
  background: #fff; color: #0E0E0E; font-size: 12px; font-weight: 600; }

/* motion: the captions land on the voice only while the frame is on screen (landing.js); the ad arrives once */
@media (prefers-reduced-motion: no-preference) {
  .showpiece.is-live .reel__cap span { animation: mm-reel-word 5.4s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.6s); }
  .showpiece.is-live .reel__bars i:first-child::after { animation: mm-reel-bar 5.4s linear infinite; }
  .showpiece.is-armed .out { opacity: 0; transform: translateY(var(--reveal-rise)); }
  .showpiece.is-armed.is-in .out { opacity: 1; transform: none;
    transition: opacity var(--reveal-fade) var(--mm-ease) 420ms, transform var(--reveal-move) var(--mm-ease) 420ms; }
}
@keyframes mm-reel-word { 0% { background: var(--v-hue); color: #0E0E0E; text-shadow: none; } 11% { background: transparent; color: #fff; } }
@keyframes mm-reel-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1200px) { .showpiece .out--mm { left: -20px; width: 150px; } }
@media (max-width: 1100px) { .showpiece .out--mm { left: -8px; } }   /* keeps the ad off the screen edge */
/* Owner, 2026-10-28: the ad hangs over the frame's left edge, so the folders start where it ends and
   "City Apartments" stays readable (ad right edge, plus a 16px gap, less the editor's own inset). */
@media (min-width: 1001px) { .showpiece [data-ui] .mm__folders { margin-left: 137px; } }
@media (min-width: 1101px) { .showpiece [data-ui] .mm__folders { margin-left: 125px; } }
@media (min-width: 1201px) { .showpiece [data-ui] .mm__folders { margin-left: 55px; } }
/* Owner, 2026-11-01: in one column the ad sat under the frame and showed the same video a second time,
   so there the frame's own phone is the only result shown. */
@media (max-width: 1000px) { .showpiece .out { display: none; } }

/* =========================================================
   Round 5 (spec v1.5): a calm hero, a navigation bar, How it works as a diagram,
   and a marketer's order that ends on questions and a call to action, not on pricing.
   ========================================================= */

/* The hero: a calm field (no particles) with one soft pink light behind the words, as on vichsi.com */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1200px, 130vw); height: 80%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--v-hue-rgb), var(--light-peak)), rgba(var(--v-hue-rgb), var(--light-mid)) 55%, transparent); }

/* The navigation bar, after the vichsi.com header: compact and sticky, a solid field bar that keeps its size */
:root { --hdr-logo-h: 40px; --hdr-pad: 16px; --hdr-pad-scrolled: 16px; }
@media (max-width: 599px) { :root { --hdr-logo-h: 34px; --hdr-pad: 13px; --hdr-pad-scrolled: 13px; } }
.site-header { background: var(--v-bg); transition: box-shadow 200ms ease; }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: 44px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--v-muted); transition: color 180ms ease; }
.site-nav a:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--v-text); } }
.nav-toggle { display: none; align-items: center; height: 40px; padding: 0 14px; background: transparent; color: var(--v-text);
  border: 1px solid var(--v-line-strong); font: 500 14px/1 var(--v-font-sans); cursor: pointer; }
.nav-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .nav-toggle:hover { border-color: var(--v-hover-line); color: var(--v-hover); } }
@media (max-width: 1100px) { .header-actions .built-by { display: none; } }   /* "Built by" on desktop only */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 4px var(--gutter) 12px; background: var(--v-bg); box-shadow: 0 1px 0 var(--v-line);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 180ms; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none;
    transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
  .site-nav a { min-height: 52px; font-size: 17px; color: var(--v-text); border-bottom: 1px solid var(--v-line); }
  .site-nav a:last-child { border-bottom: 0; }
}
/* Anchors and keyboard focus both stop below the sticky bar (the bar is a little taller than the logo on phones) */
html { scroll-padding-top: calc(var(--hdr-h) + 8px); }

/* Questions: plain tiles on the field, a drawn plus that turns as an answer opens */
.section-faq .section-head { margin-bottom: 40px; }
.faq-list { display: grid; gap: 6px; max-width: 860px; margin: 0 auto; }
.faq-item { background: var(--v-raised); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px;
  font-weight: 600; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--v-text); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--v-hue);
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--v-focus); outline-offset: -2px; }
/* The controls that still showed the browser's own ring get the page's pink one */
.skip-link:focus-visible, .faq-item a:focus-visible, .auth-tab:focus-visible, .auth-close:focus-visible,
.auth-check input:focus-visible, .auth-field .auth-help-tip a:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; }
.faq-item p { max-width: 64ch; margin: 0; padding: 0 22px 22px; color: var(--v-muted); font-size: 15.5px; line-height: 1.6; }
.faq-item a { color: var(--v-text); text-decoration: underline; text-decoration-color: rgba(var(--v-hue-rgb), 0.6); text-underline-offset: 0.2em; }

/* The close: the line from the hero again, and the same two buttons, under a soft pink light */
.section-close { position: relative; isolation: isolate; padding: clamp(104px, 10vw, 152px) 0; text-align: center; overflow: hidden; }
.section-close::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--v-hue-rgb), var(--light-peak)), rgba(var(--v-hue-rgb), var(--light-mid)) 55%, transparent); }
.close h2 { max-width: 16em; margin: 0 auto; font-size: clamp(30px, 2.4vw + 20px, 52px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--v-text); text-wrap: balance; }
.close-cta { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
.close-cta .button { height: 52px; min-width: 200px; padding: 0 28px; gap: 8px; font: 500 16px/1 var(--v-font-sans); }
@media (max-width: 599px) { .close-cta { flex-direction: column; align-items: stretch; max-width: 420px; margin: 32px auto 0; } .close-cta .button { width: 100%; min-width: 0; } }
@media (hover: hover) and (pointer: fine) { .close-cta .button-ghost:hover { border-color: var(--v-hover-line); color: var(--v-hover); } }

/* Round 5 polish (critique): the three steps read as a caption row under the diagram, not a second row of
   boxes; headings balance their lines; the phone menu shows when it is open; reduced motion jumps. */
.section-how .step { background: transparent; border: 0; border-top: 1px solid var(--v-line); padding: 18px 0 0; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .section-how .step:hover { background: transparent; border-color: var(--v-line); } .section-how .step:hover h3, .section-how .step:hover .step-num { color: inherit; } }
.section-head h2 { text-wrap: balance; }
.nav-toggle[aria-expanded="true"] { border-color: var(--v-hue); color: var(--v-hue); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The first screen shows the top of the lit product frame, a peek that invites the scroll */
@media (min-width: 600px) and (min-height: 700px) { .hero { min-height: calc(100svh - 144px); } }

/* Bullets: the chevron of the VichSI mark, minimized, in MM's pink, instead of square points (owner,
   2026-10-26): before the section labels, plan and folder names, in the "everything included" row and
   before the ad's caption and the step numbers. Checkboxes, the numbers, the playhead and the timeline blocks are unchanged. */
.eyebrow-static::before, .price-name::before, .folder-name::before, .price-includes li::before, .showpiece .out__cap::before, .step-num::before {
  width: 9px; height: 7px; border: 0; border-radius: 0; background: var(--v-hue);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%);
}
.eyebrow-static::before, .price-name::before, .folder-name::before, .showpiece .out__cap::before, .step-num::before { vertical-align: 1px; }

/* =========================================================
   Finishing pass (owner, 2026-10-26): one grade, one grid, one edge, one type scale, one motion.
   Every section, drawing, line of copy and the order stay as they are.
   ========================================================= */
:root {
  --blend: 160px;                                   /* Field and Room melt into each other over this (as on RECC) */
  --mm-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);    /* vichsi.com's title curve; --mm-ease is its ease-out */
  --reveal-rise: 20px; --reveal-fade: 640ms; --reveal-move: 800ms; --reveal-step: 80ms;   /* vichsi.com's reveal */
  --t: 180ms var(--mm-ease);                        /* hover and press feedback, on the page's own curve */
}
@media (max-width: 720px) { :root { --blend: 120px; } }

/* No hard seams: each Room band fades in from the Field and back out, so the page reads as one piece */
.section-how, .section-tinted, .section-pricing, .section-close {
  background: linear-gradient(rgb(15 18 26 / 0), var(--v-room) var(--blend), var(--v-room) calc(100% - var(--blend)), rgb(15 18 26 / 0));
}

/* The one long stretch without a light (capabilities, then the modes) gets one, at the same strength, behind the two
   modes, as the plan that matters most has one: never two sections in a row unlit, never one stronger than another */
.mode-grid { position: relative; isolation: isolate; }
.mode-grid::before { content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--v-hue-rgb), var(--light-peak)), rgba(var(--v-hue-rgb), var(--light-mid)) 55%, transparent); }

/* The ad photo sits in the palette: a little more contrast, a little less colour and a faint pink tone, not a filter look */
.showpiece .reel img { filter: contrast(1.06) saturate(0.88); }
.showpiece .reel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(var(--v-hue-rgb), 0.14); mix-blend-mode: soft-light; }

/* One grid: MM's three and two columns (20px gaps) sit on a 12-column grid, as on RECC.
   The product frame takes the grid's width; on wide screens it starts where the timeline's tracks start and ends on
   the grid's right edge, and the ad hangs from the grid's left edge, where the track names stand below.
   The footage folders take the second and third pricing columns; the questions take eight columns, centred. */
.showpiece { max-width: none; margin: 0; }
@media (min-width: 1201px) {
  .showpiece { margin-left: 116px; }   /* the timeline's 96px name column and its 20px gap */
  .showpiece .out--mm { left: -116px; width: 176px; }
}
.folders-block { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.folder-grid { grid-column: 2 / -1; gap: 20px; }
@media (max-width: 900px) {   /* the plans' one column */
  .folders-block { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .folder-grid { grid-column: auto; grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .faq-list { max-width: calc((100% - 11 * 20px) / 12 * 8 + 7 * 20px); } }

/* One edge: every card and tile has the same quiet 1px line and lights it in pink under a pointer; nothing lifts */
.faq-item { border: 1px solid var(--v-line); transition: border-color var(--t); }
@media (hover: hover) and (pointer: fine) { .faq-item:hover { border-color: var(--v-hover-line); } }
.feature:hover, .mode-card:hover, .step:hover { transform: none; }

/* One type scale: section titles at one size (the phone section's too), three title sizes in cards, one body size,
   one lead size, one label style (mono, 11px, tracked), one figure style */
.spotlight-card h2 { font-size: 44px; line-height: 1.1; }
@media (max-width: 1024px) { .spotlight-card h2 { font-size: 36px; } }
@media (max-width: 720px) { .spotlight-card h2 { font-size: 28px; } }
.close h2 { letter-spacing: -0.02em; }
.feature h3, .step h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.mode-head h3, .folders-head h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.price-name, .folder-name { font-size: 16px; letter-spacing: -0.005em; }
.feature p, .step p, .mode-card > p, .price-note, .folders-head p, .faq-item p, .price-includes { font-size: 15px; line-height: 1.6; }
.check-list li { font-size: 15px; line-height: 1.5; }
.mode-card > p { max-width: 64ch; }
.section-head .section-sub { font-size: 17px; line-height: 1.55; }
@media (max-width: 720px) { .section-head .section-sub { font-size: 16px; } }
.eyebrow-static, .mode-badge, .price-badge, .spotlight-meta { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; }
.step-num, .folder-count { font-size: 12px; letter-spacing: 0.06em; }

/* One marker: the chevron, 9 by 7, 10px before its words, everywhere */
.showpiece .out__cap::before { margin-right: 10px; }

/* One rhythm: the phone section keeps the same space as its neighbours */
.section-spotlight { padding: 96px 0; }
@media (max-width: 720px) { .section-spotlight { padding: 64px 0; } }

/* One motion: every section's parts rise 20px and fade in, 80ms apart, once, as they come into view (vichsi.com's reveal;
   landing.js arms only what is below the first screen). Reduced motion and no script: everything is in place. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(var(--reveal-rise)); }
  .reveal.is-in { opacity: 1; transform: none;
    transition: opacity var(--reveal-fade) var(--mm-ease) var(--rd, 0ms), transform var(--reveal-move) var(--mm-ease) var(--rd, 0ms); }
}

/* The privacy page (/privacy): the landing's ground, header and white footer, one reading column, the page's type scale */
.legal-page { padding: calc(var(--hdr-h) + clamp(56px, 7vw, 96px)) 0 clamp(72px, 8vw, 120px); }
.legal { max-width: calc(640px + 2 * var(--gutter)); }   /* about 70 characters a line */
.legal h1 { margin: 0; font-size: clamp(36px, 2.4vw + 20px, 52px); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; color: var(--v-text); text-wrap: balance; }
.legal .legal__updated { margin: 20px 0 0; font: 500 11px/1.4 var(--v-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-muted); }
.legal .legal__lead { margin: 32px 0 0; font-size: 18px; line-height: 1.6; color: var(--v-text-soft); }
.legal h2 { margin: 52px 0 14px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--v-text); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--v-muted); }
.legal p { margin: 0 0 14px; }
.legal ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.legal li { position: relative; padding-left: 21px; }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 7px; background: var(--v-hue);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%); }   /* the page's chevron bullet */
.legal strong { font-weight: 600; color: var(--v-text); }
.legal code { font-family: var(--v-font-mono); font-size: 0.9em; color: var(--v-text); }
.legal a { color: var(--v-text); text-decoration: underline; text-decoration-color: rgba(var(--v-hue-rgb), 0.6); text-underline-offset: 0.2em; }
.legal a:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .legal a:hover { text-decoration-color: var(--v-hue); } }

/* =========================================================
   Voice in, ad out (owner, 2026-10-27: "i only like those 2 visual elements", the story ad and the voice and caption
   tracks). Every visual below is made of them: the voice (MM's waveform), the words (caption clips timed to the voice)
   and the vertical ad it makes, with real property photos (CC0, see the handoff), never MM's own footage. Each one
   says what it shows. The small films loop only while on screen ([data-loop], landing.js); without script or with
   reduced motion each rests on one clear frame.
   ========================================================= */

/* The story ad: the one the owner likes, as a component that scales with its width (sizes in cqi) */
.story { position: relative; container-type: inline-size; aspect-ratio: 9 / 16; overflow: hidden; background: #111111; }
.story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(0.88); }
.story::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(var(--v-hue-rgb), 0.14); mix-blend-mode: soft-light; }
.story__bars { position: absolute; z-index: 1; left: 4.5cqi; right: 4.5cqi; top: 4.5cqi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7cqi; }
.story__bars i { position: relative; height: max(2px, 1.1cqi); overflow: hidden; background: rgba(255, 255, 255, 0.35); }
.story__bars i:first-child::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform-origin: left; transform: scaleX(0.6); }
.story__by { position: absolute; z-index: 1; left: 5cqi; top: 10cqi; display: flex; align-items: center; gap: 4cqi;
  font-size: 6cqi; line-height: 1.25; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.story__by > span { display: grid; }
.story__by b { font-size: 6.6cqi; color: #FFFFFF; }
.story__client::before { content: var(--mm-example-client); }
.story__avatar { display: grid; place-items: center; flex: none; width: 12.5cqi; height: 12.5cqi; background: #FFFFFF; color: #0E0E0E;
  font-style: normal; font-weight: 700; font-size: 6.3cqi; text-shadow: none; }
.story__avatar::before { content: var(--mm-example-initial); }
.story__cap { position: absolute; z-index: 1; left: 4.5cqi; right: 4.5cqi; bottom: 30cqi; margin: 0; text-align: center; text-wrap: balance;
  font-weight: 700; font-size: 8.6cqi; line-height: 1.22; letter-spacing: -0.01em; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.story__cap span { display: inline-block; padding: 0 1.2cqi; }
.story__cta { position: absolute; z-index: 1; left: 4.5cqi; right: 4.5cqi; bottom: 7cqi; display: grid; place-items: center; height: 17cqi;
  background: #FFFFFF; color: #0E0E0E; font-size: 6.8cqi; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {   /* the owner's favourite move: each word lights in pink as it is spoken */
  .is-live .md__cap span, .is-live .ph__cap span { animation: mm-reel-word 5.4s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.6s); }
  .is-live .story__bars i:first-child::after { animation: mm-reel-bar 5.4s linear infinite; }
}

/* The two modes on small ads. Caption: the words light as they are spoken. TOV: your one line stays. */
.md__ad { width: 132px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.md__line { position: absolute; z-index: 1; left: 5cqi; right: 5cqi; bottom: 30cqi; margin: 0; padding: 3cqi 4cqi; background: rgba(14, 14, 14, 0.72);
  text-align: center; text-wrap: balance; font-weight: 700; font-size: 8cqi; line-height: 1.2; color: #FFFFFF; }
.md__voice { position: absolute; z-index: 1; left: 5cqi; right: 5cqi; top: 35cqi; display: flex; align-items: center; gap: 3cqi; padding: 2.5cqi 3cqi; background: rgba(14, 14, 14, 0.55); }
.md__play { flex: none; width: 0; height: 0; border-left: 5cqi solid var(--v-hue); border-top: 3cqi solid transparent; border-bottom: 3cqi solid transparent; }
.md__wv { flex: 1; height: 8cqi; }
.md__wv svg { display: block; width: 100%; height: 100%; fill: var(--v-hue); }

/* The product frame: real photos in its folders, and its preview plays the ad instead of grey boxes */
.showpiece [data-ui] .folder i { background-size: cover; background-position: center; }
.showpiece [data-ui] .phone { background: #000000 url(/static/vichsi/ads/ad-night-towers.webp) center / cover; }
.showpiece [data-ui] .phone::before, .showpiece [data-ui] .phone::after { content: none; }
.showpiece [data-ui] .phone .cap { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.showpiece [data-ui] .mm__wave i { background: rgba(var(--v-hue-rgb), 0.55); }
.showpiece [data-ui] .mm__wave .ph::before { background: var(--v-hue); }

/* Order (owner, 2026-10-27): hero, how it works, the phone, the product frame, capabilities and modes in one, pricing,
   questions. The product frame no longer follows the hero, so it takes a normal section's space above it. */
.section-showpiece { padding-top: 80px; }

/* Capabilities and modes in one: three short lines, and the two modes on small ads. No filler. */
.kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.kit__k { margin: 0 0 14px; font-family: var(--v-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-hue); }
.kit__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.kit__list li { padding: 22px 0; border-top: 1px solid var(--v-line); }
.kit__list li:last-child { border-bottom: 1px solid var(--v-line); }
.kit__list h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--v-text); }
.kit__list p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--v-muted); }
/* The modes' one-line sample: Caption mode lights the words on the voice, TOV mode holds the line. Type only. */
.kit__list .kit__eg { display: inline-block; margin-top: 14px; padding: 8px 12px; background: #0E0E0E; border: 1px solid var(--v-line);
  font-size: 15px; font-weight: 600; line-height: 1.4; color: #FFFFFF; }
.kit__eg span { display: inline-block; padding: 0 3px; }
@media (max-width: 900px) { .kit { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ===== Owner, 2026-10-27: RECC's homepage as the reference (RECC-HOMEPAGE-STUDY.md) ===== */

/* Closer sections: RECC's rhythm, about 80px a section (72px on phones), and a top-anchored hero so the diagram peeks in */
.section { padding: 80px 0; }
.section-head { margin-bottom: 44px; }
.hero { min-height: 0; justify-content: flex-start; padding: calc(var(--hdr-h) + clamp(72px, 14vh, 160px)) 0 clamp(56px, 7vh, 88px); }
@media (min-width: 600px) and (min-height: 700px) { .hero { min-height: 0; } }
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .hero { padding: calc(var(--hdr-h) + 48px) 0 56px; }
}

/* How it works: MM's own moments (owner, 2026-10-28). Each step card opens with its moment in the studio, and one clock
   in landing.js hands the work along: 01 transcribes the voice, 02 fixes a word and picks the look, 03 renders and plays
   the ad in that look. The markup is each card's finished state; the clock arms them (.is-armed) only with motion on. */
.section-how .steps-3 { gap: 32px; }
.sv { position: relative; display: flex; flex-direction: column; gap: 12px; height: 276px; margin-bottom: 14px; padding: 16px;
  overflow: hidden; background: #0C0D11; border: 1px solid var(--v-line); font: 400 11px/1.4 var(--v-font-mono); color: var(--v-muted);
  transition: border-color .5s var(--mm-ease), box-shadow .5s var(--mm-ease); }
.steps-live .step.is-now .sv { border-color: var(--v-lit-edge); box-shadow: var(--v-lit-shadow); }
.steps-live .step-num { transition: color .4s var(--mm-ease); }
.steps-live .step.is-now .step-num { color: var(--v-hue); }
.sv__k { font: 400 10px/1 var(--v-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted-2); }
/* The hand-off: a chevron crosses the gap into the next card as its turn starts (three across only). */
.steps-live > .step + .step::before { content: ""; position: absolute; left: -24px; top: 152px; width: 9px; height: 9px;
  border-top: 1.5px solid rgba(var(--v-hue-rgb), .45); border-right: 1.5px solid rgba(var(--v-hue-rgb), .45); transform: rotate(45deg); }
.steps-live > .step.is-pass::before { animation: sv-pass .6s var(--mm-ease) both; }
@keyframes sv-pass { 0% { border-color: rgba(var(--v-hue-rgb), .45); transform: translateX(-10px) rotate(45deg); }
  50% { border-color: var(--v-hue); transform: translateX(2px) rotate(45deg); } 100% { border-color: rgba(var(--v-hue-rgb), .45); transform: rotate(45deg); } }

/* 01: the file lands, the playhead runs the voice, the words write themselves at their times. */
.sv__file { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #13151B; border: 1px solid var(--v-line);
  color: var(--v-text); transition: opacity .45s var(--mm-ease), transform .45s var(--mm-ease); }
.sv__icon { flex: none; width: 10px; height: 12px; background: var(--v-hue); clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%); }
.sv__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv__meta { margin-left: auto; color: var(--v-muted-2); }
.is-armed .sv__file:not(.is-in) { opacity: 0; transform: translateY(-12px); }
.sv__wave { position: relative; height: 34px; flex: none; }
.sv__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #343944; }
.sv__lit { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0); }
.sv__lit svg { fill: var(--v-hue); }
.sv__ph { position: absolute; top: -4px; bottom: -4px; left: calc(var(--p, 1) * 100%); width: 1px; background: #FFFFFF; }
.sv__lines { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.sv__lines li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
.sv__lines time, .sv__edit time { color: var(--v-muted-2); }
.sv__lines span { font: 400 13px/1.45 var(--font); color: var(--v-text); }
.sv b { font-weight: inherit; transition: opacity .25s linear, color .25s linear; }
.is-armed .sv__lines b:not(.is-on) { opacity: .14; }
.sv__lines b.is-cur { color: var(--v-hue); }

/* 02: a misheard word is fixed, then each choice moves from the default to the one this ad uses. */
.sv__edit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 12px;
  background: #13151B; border: 1px solid var(--v-line); }
.sv__edit > span { font: 400 14px/1.4 var(--font); color: var(--v-text); }
.sv__word { position: relative; }
.sv__word s { display: none; text-decoration: underline wavy rgba(var(--v-hue-rgb), .9); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sv__word ins { text-decoration: none; }
.is-armed .sv--set:not(.is-fixed) .sv__word s { display: inline; }
.is-armed .sv--set:not(.is-fixed) .sv__word ins { display: none; }
.sv--set.is-fixed .sv__word ins { animation: sv-fix .9s var(--mm-ease); }
@keyframes sv-fix { 0% { background: var(--v-hue); color: #0E0E0E; } 100% { background: transparent; } }
.sv__caret { display: none; position: absolute; right: -3px; top: 2px; bottom: 1px; width: 1px; background: var(--v-hue); }
.sv--set.is-typing .sv__caret { display: block; animation: sv-caret .5s steps(1) infinite; }
@keyframes sv-caret { 50% { opacity: 0; } }
.sv__opts { display: grid; gap: 9px; margin-top: 4px; }
.sv__row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; }
.sv__seg { display: flex; flex-wrap: wrap; gap: 4px; }
.sv__seg i { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; font-style: normal; color: var(--v-muted);
  border: 1px solid var(--v-line); transition: background .3s var(--mm-ease), color .3s var(--mm-ease), border-color .3s var(--mm-ease); }
.sv__seg--sw i::before { content: ""; width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.sv__seg i[data-s], .sv__seg.is-pre i[data-d] { background: var(--v-hue); border-color: var(--v-hue); color: #0E0E0E; }
.sv__seg.is-pre i[data-s] { background: transparent; border-color: var(--v-line); color: var(--v-muted); }

/* 03: the job renders, then the ad plays over the mockup video, the word on the voice lit in the pink picked in 02,
   at the bottom. */
.sv--gen { flex-direction: row; gap: 16px; }
.sv__ad { position: relative; flex: none; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #111111; }
.sv__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv__ad::after { content: ""; position: absolute; inset: 0; background: #0C0D11; opacity: 0; transition: opacity .4s linear; }
.sv--gen.is-rendering .sv__ad::after { opacity: .82; }
.sv__bars { position: absolute; z-index: 1; left: 6px; right: 6px; top: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.sv__bars i { height: 2px; background: rgba(255, 255, 255, .35); }
.sv__bars i { background-image: linear-gradient(#FFFFFF, #FFFFFF); background-repeat: no-repeat; background-size: calc(var(--f, 0) * 100%) 100%; }
.sv .sv__cap { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 44px; margin: 0; opacity: 0; text-align: center; text-wrap: balance;
  font: 600 12px/1.3 var(--font); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 1px 10px rgba(0, 0, 0, .6); }
.sv__cap:first-of-type, .is-armed .sv__cap.is-on { opacity: 1; }
.is-armed .sv__cap:first-of-type:not(.is-on) { opacity: 0; }
.sv__cap b:first-child { color: var(--v-hue); }
.is-armed .sv__cap b:first-child { color: inherit; }
.sv .sv__cap b.is-cur { color: var(--v-hue); }
.sv__cta { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 10px; display: grid; place-items: center; height: 24px;
  background: #FFFFFF; font: 600 10px/1 var(--font); color: #0E0E0E; }
.sv__job { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding-top: 2px; }
.sv__spec { color: var(--v-text); }
.sv__bar { display: block; height: 3px; background: var(--v-line); }
.sv__bar i { display: block; height: 100%; background: var(--v-hue); transform-origin: left; transform: scaleX(var(--r, 1)); }
.sv__pct { font-size: 18px; font-weight: 500; color: var(--v-text); }
.sv__kv { display: grid; gap: 4px; color: var(--v-text); }
.sv__done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; margin-top: auto;
  overflow-wrap: anywhere; color: var(--v-text); transition: opacity .35s var(--mm-ease); }
.sv__dot { width: 6px; height: 6px; background: var(--v-hue); }
.is-armed .sv--gen:not(.is-ready) .sv__done { opacity: 0; }

@media (max-width: 1100px) { .sv { padding: 14px; } .sv--gen { gap: 12px; } .sv__row { grid-template-columns: 62px minmax(0, 1fr); gap: 6px; } .sv__seg i { padding: 5px 6px; gap: 5px; } }
@media (max-width: 1040px) { .sv__row { grid-template-columns: 58px minmax(0, 1fr); } .sv__seg { gap: 3px; } .sv__seg i { padding: 5px 4px; letter-spacing: -.02em; } }   /* "City Apartments" stays on one line */
@media (max-width: 1000px) {
  .section-how .steps.steps-3 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sv { max-width: 520px; height: auto; }
  .sv--gen { height: 300px; }
  .steps-live > .step + .step::before { content: none; }
}

/* The phone section, exactly as the shared phone-section spec v1.0 (built on RECC): a lit card; a thin modern iPhone whose
   screen is MM's real studio (a screenshot with demo data, dark). The card holds while the page's scroll moves the
   screen from Mode down to Approve & generate video, then lets go (landing.js). Phone classes are .iph-* here. */
.section-spotlight { position: relative; z-index: 1; padding: 80px 0; }
.spotlight-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr); align-items: center; gap: 56px; padding: 56px;
  background: var(--v-room); border: 1px solid var(--v-lit-edge); border-radius: 0; box-shadow: var(--v-lit-shadow);
  overflow: hidden; overflow: clip; }   /* clip, not hidden alone: hidden makes a scroll box and kills the hold */
.spotlight-card h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0 16px; text-wrap: balance; }
.spotlight-card h2 .spotlight-setup { display: block; color: #D9A9C4; }
.spotlight-card h2 .spotlight-payoff { display: block; transition: color 0.25s ease; }
.spotlight-lede { font-size: 1.1rem; line-height: 1.6; margin: 0 0 24px; max-width: 560px; }
@media (hover: hover) and (pointer: fine) {
  .spotlight-card { transition: border-color 0.25s ease; }
  .spotlight-card:hover { border-color: var(--v-hue); }
  .spotlight-card:hover h2 .spotlight-payoff { color: var(--v-hue); }
}
.spotlight-visual { position: relative; isolation: isolate; display: flex; justify-content: center; }
.spotlight-visual::before { content: none; }
.phone-stage { position: relative; isolation: isolate; display: flex; justify-content: center; }
.phone-glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: 600px; height: 600px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(var(--v-hue-rgb), var(--light-peak)), rgba(var(--v-hue-rgb), var(--light-mid)) 55%, transparent); }
.iph-frame { position: relative; width: 240px; padding: 6px; border-radius: 44px; background: #050608; border: 1px solid #2E3445;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 80px -30px rgba(var(--v-hue-rgb), 0.35); }
.iph-frame::before, .iph-frame::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2E3445; }
.iph-frame::before { left: -4px; top: 104px; height: 40px; box-shadow: 0 52px 0 #2E3445; }   /* volume up and down */
.iph-frame::after { right: -4px; top: 132px; height: 64px; }                                 /* side button */
.iph-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 393 / 852; border-radius: 38px; overflow: hidden; background: #000000; }
.iph-status { flex: none; aspect-ratio: 393 / 54; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 13%;
  color: #FFFFFF; font: 600 10px/1 var(--v-font-sans); }
.iph-sys { width: 28px; height: auto; }
.iph-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.iph-view picture, .iph-app { display: block; width: 100%; height: auto; }
.iph-url { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; padding-top: 14px; text-align: center; font: 500 8px/1 var(--v-font-sans);
  color: rgba(255, 255, 255, 0.82); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.92) 45%); }
.iph-screen::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 34%; height: 3px; border-radius: 2px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.85); }
.iph-island { position: absolute; top: 12px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%); border-radius: 12px; background: #000000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pin-run { display: none; }
.section-spotlight.is-pinned .container > .pin-run, .section-spotlight.is-pinned-phone .spotlight-visual > .pin-run { display: block; height: var(--pin-run); }
.section-spotlight.is-pinned .spotlight-card { position: sticky; top: var(--pin-top); }
.section-spotlight.is-pinned-phone .spotlight-visual { flex-direction: column; align-items: center; }
.section-spotlight.is-pinned-phone .phone-stage { position: sticky; top: var(--pin-top); }
/* Touch screens only (owner, 2026-11-01: the hold kept pace on a laptop but lagged a little on a phone; SAM's fix, its
   rounds 39-41). A mouse keeps the script's path above exactly as it was.
   - Nothing above the pinned element clips: iOS Safari shakes a sticky element under any ancestor that clips. The page's
     clip moves onto each other section, and the phone's light has its box cut to the card's width instead (the same
     600px light, centred, so it looks as it did; as on RECC 747b111).
   - Where the browser can tie an animation to the scroll, it moves the screenshot itself, off the main thread. The
     timeline is the track that holds the pinned element (never the sticky element: WebKit bug 283582). Its range starts
     when the pinned element stops at --pin-top and ends when its foot reaches --pin-end (measured from the top, so the
     toolbar sliding away cannot move it). The script's still 80px (EDGE) stays at each end.
     Longhands, not the `linear both` shorthand (a minifier turned it into `none` on SAM). */
@media (hover: none) and (pointer: coarse) {
  @supports (overflow: clip) {
    body, main { overflow-x: visible; }
    main > :not(#mobile) { overflow-x: clip; }
    .section-spotlight.is-pinned-phone .spotlight-card { overflow: visible; }
    .section-spotlight.is-pinned-phone .phone-glow { width: min(600px, 100vw - 2 * var(--gutter));
      background-size: 600px 600px; background-position: center; background-repeat: no-repeat; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .section-spotlight.is-pinned .container, .section-spotlight.is-pinned-phone .spotlight-visual {
        view-timeline: --mm-hold block;
        view-timeline-inset: var(--pin-top) calc(100% - var(--pin-end));
      }
      .section-spotlight.is-pinned .iph-app, .section-spotlight.is-pinned-phone .iph-app {
        animation-name: mm-hold;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --mm-hold;
        animation-range: contain 80px contain calc(100% - 80px);
      }
    }
  }
}
@keyframes mm-hold {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-1 * var(--pin-travel)), 0); }
}
@media (max-width: 860px) {
  .spotlight-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; text-align: center; }
  .spotlight-lede { margin-left: auto; margin-right: auto; }
  .spotlight-actions { justify-content: center; }
  .iph-frame { width: 220px; border-radius: 40px; }
  .iph-screen { border-radius: 34px; }
}
@media (max-width: 768px) {
  .section-spotlight { padding: 72px 0; }
  .spotlight-card h2 { font-size: 1.75rem; }
}