/* =====================================================================
   Nevo Money, Build 20 Phase C: the product, shown
   ---------------------------------------------------------------------
   Loads after nevo2.css. Everything is namespaced `nvc-`. Colour comes
   from theme-tokens.css (plus the nvx aliases nevo2.css derives from it).
   Components:
     1. Frames: a phone (reuses .nvx-device) and a flat UI fragment card
     2. The forecast chart (hero): an SVG line that draws in
     3. Story: alternating split, one visual + one short headline
     4. Sticky: the phone screen changes while the copy scrolls
     5. Bento: mixed tile sizes with cropped UI, no icons
     6. Page specifics: FAQ, pricing, about, install, contact
     7. Reduced motion and small screens
     8. Phase D: scroll-driven storytelling (nvd-): --p from a view()
        timeline or the JS fallback, widgets calc()'d from it
   ===================================================================== */

:root {
  --nvc-radius: 28px;
  --nvc-radius-sm: 18px;
  --nvc-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ---------------------------------------------------------------------
   1. Frames
   --------------------------------------------------------------------- */

/* A flat fragment of the app: a solid dark plate with a soft edge, no
   bezel. Used for screens that are not a full phone (the budget views are
   720x1080 crops, the 2.2 stills are partial screens). */
.nvc-frame {
  position: relative;
  border-radius: var(--nvc-radius);
  background: var(--frame-bg);
  box-shadow:
    0 0 0 1px var(--frame-edge),
    0 2px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 70px -30px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.nvc-frame img,
.nvc-frame video {
  display: block;
  width: 100%;
  height: auto;
}
/* A cropped window on a screen. --nvc-ar sets the window shape, --nvc-pos
   the part of the screen it shows. */
.nvc-crop {
  aspect-ratio: var(--nvc-ar, 4 / 3);
}
.nvc-crop img,
.nvc-crop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nvc-pos, 50% 0%);
}

/* A still inside the phone frame fills the screen from the top. */
.nvx-device-screen > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* The glow a frame casts on the page. */
.nvc-glow {
  position: relative;
  isolation: isolate;
}
.nvc-glow::before {
  content: '';
  position: absolute;
  inset: 8% 4%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 30%, var(--glow-primary), transparent 62%),
    radial-gradient(ellipse at 75% 70%, var(--glow-green), transparent 60%);
  filter: blur(54px);
  z-index: -1;
  pointer-events: none;
}
.nvc-glow-accent::before {
  background:
    radial-gradient(ellipse at 30% 30%, var(--glow-primary), transparent 62%),
    radial-gradient(ellipse at 75% 70%, var(--glow-accent), transparent 60%);
}

/* Hover lift, shared by frames and tiles that are links or cards. */
.nvc-lift {
  transition: transform 320ms var(--nvc-ease), box-shadow 320ms var(--nvc-ease);
}
.nvc-lift:hover { transform: translateY(-4px); }

/* The brand N mark, as a large soft watermark behind a section. */
.nvc-mark {
  position: absolute;
  width: min(520px, 60vw);
  aspect-ratio: 687 / 632;
  background: url('../images/nevo-logo-mark.png') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
}
.light-mode .nvc-mark,
.theme-light .nvc-mark { opacity: 0.09; }

/* ---------------------------------------------------------------------
   2. The forecast chart
   --------------------------------------------------------------------- */

.nvc-hero .nvx-hero-inner {
  grid-template-columns: minmax(min(560px, 100%), 0.9fr) minmax(0, 1.1fr);
}
.nvc-hero .nvx-hero-title { font-size: clamp(2.8rem, 1.7rem + 3.6vw, 4.15rem); }
.nvc-hero .nvx-hero-sub { max-width: 42ch; }
.nvc-hero-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  align-items: center;
  padding-right: 48px;
}
.nvc-forecast {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  padding: 28px 150px 20px 28px;
  border-radius: var(--nvc-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--frame-bg);
  box-shadow:
    0 0 0 1px var(--frame-edge),
    0 2px 0 rgba(255, 255, 255, 0.05) inset,
    0 50px 120px -40px rgba(0, 0, 0, 0.8),
    0 0 90px -20px var(--glow-green);
}
.nvc-forecast-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(237, 243, 250, 0.72);
}
.nvc-forecast-head b {
  font-weight: 600;
  color: #edf3fa;
}
.nvc-forecast-head .nvc-fc-green { color: var(--forecast-green); }
.light-mode .nvc-forecast-head .nvc-fc-green,
.theme-light .nvc-forecast-head .nvc-fc-green { color: #69f0ae; }
.nvc-forecast svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.nvc-fc-grid { stroke: rgba(237, 243, 250, 0.08); stroke-width: 1; }
.nvc-fc-axis {
  fill: rgba(237, 243, 250, 0.55);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-family: inherit;
}
.nvc-fc-line {
  fill: none;
  stroke: #69f0ae;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(105, 240, 174, 0.55));
}
.nvc-fc-area { fill: url(#nvc-fc-fill); opacity: 1; }
.nvc-fc-sched {
  fill: none;
  stroke: #69f0ae;
  stroke-width: 2;
  stroke-dasharray: 5 7;
  opacity: 0.55;
}
.nvc-fc-today-line {
  stroke: #edf3fa;
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  opacity: 0.6;
}
.nvc-fc-today-text {
  fill: #edf3fa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-family: inherit;
}
.nvc-fc-dot { fill: #69f0ae; }
.nvc-fc-dot-ring {
  fill: none;
  stroke: #69f0ae;
  stroke-width: 2;
  opacity: 0.5;
}
.nvc-fc-low { fill: rgba(237, 243, 250, 0.78); font-size: 11px; font-family: inherit; letter-spacing: 0.04em; }

/* The draw-in. The resting state is the finished chart, so it shows in
   a static capture, without JS and under reduced motion. When the chart
   is seen (js/site-c.js adds is-nvc-drawn) the animations run FROM hidden
   (fill-mode both), so the line draws in and ends fully visible. */
.nvc-forecast.is-nvc-drawn .nvc-fc-line {
  stroke-dasharray: 2400;
  animation: nvc-draw 1.8s var(--nvc-ease) 0.1s both;
}
.nvc-forecast.is-nvc-drawn .nvc-fc-area { animation: nvc-fade 1.2s var(--nvc-ease) 0.7s both; }
.nvc-forecast.is-nvc-drawn .nvc-fc-today { animation: nvc-fade 0.8s var(--nvc-ease) 0.5s both; }
.nvc-forecast.is-nvc-drawn .nvc-fc-marker { animation: nvc-fade 0.8s var(--nvc-ease) 1.5s both; }
.nvc-forecast.is-nvc-drawn .nvc-fc-sched { animation: nvc-fade 1s var(--nvc-ease) 1.2s both; }
.nvc-forecast.is-nvc-drawn .nvc-fc-dot-ring { animation: nvc-pulse 2.6s ease-out 2s 3; }
@keyframes nvc-draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes nvc-fade { from { opacity: 0; } }
@keyframes nvc-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.nvc-fc-dot-ring { transform-box: fill-box; transform-origin: center; }

/* The phone that sits on the chart. Small, bottom right, overlapping. */
.nvc-hero-phone {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 196px;
  z-index: 2;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}
.nvc-hero-phone .nvx-device {
  width: 100%;
  border-radius: 34px;
  padding: 7px;
}
.nvc-hero-phone .nvx-device-screen { border-radius: 28px; }
.nvc-hero-phone .nvx-device-notch { width: 58px; height: 15px; top: 6px; }

/* The hero's secondary row: the film, as a quiet link under the CTAs. */
.nvc-hero-film {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
}
.nvc-hero-film .nvc-play {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--brand-navy);
  box-shadow: 0 8px 20px -8px var(--glow-primary);
}
.nvc-hero-film .nvc-play svg { width: 14px; height: 14px; }
.nvc-hero-film:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------------
   3. Story: one visual, one headline
   --------------------------------------------------------------------- */

.nvc-story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.nvc-story.is-flip .nvc-story-media { order: 2; }
.nvc-story-copy .nvx-h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }
.nvc-story-copy .nvx-lead { font-size: 1.14rem; max-width: 44ch; }
.nvc-story-copy .nvx-btn-text { margin-top: 22px; display: inline-flex; }
.nvc-story-media { position: relative; }
.nvc-story-media .nvx-device { width: min(360px, 86vw); }
/* Two fragments side by side, the second lower, like a pair of cards on a
   desk. */
.nvc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.nvc-pair > :nth-child(2) { margin-top: 56px; }

/* A chapter stack: stories separated by generous air, not by bands. */
.nvc-chapters { display: grid; gap: clamp(88px, 11vw, 160px); }

/* ---------------------------------------------------------------------
   4. Sticky: the phone screen changes as you scroll
   --------------------------------------------------------------------- */

.nvc-sticky {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.nvc-sticky-steps { display: grid; }
.nvc-step {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  opacity: 0.38;
  transition: opacity 420ms var(--nvc-ease);
}
.nvc-step.is-active { opacity: 1; }
.nvc-step .nvx-h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); }
.nvc-step .nvx-lead { max-width: 40ch; }
.nvc-step-n {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--brand-navy);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nvc-sticky-stage {
  position: sticky;
  top: calc(var(--nav-height) + 40px);
  height: calc(100vh - var(--nav-height) - 80px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.nvc-sticky-stage .nvx-device { width: min(320px, 80vw); margin: 0; }
.nvc-sticky-stage .nvx-device-screen { background: #0b1120; }
.nvc-screens { position: relative; width: 100%; height: 100%; }
.nvc-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition: opacity 520ms var(--nvc-ease), transform 520ms var(--nvc-ease);
}
.nvc-screen img,
.nvc-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.nvc-screen.is-active {
  opacity: 1;
  transform: none;
}
/* A short caption under the stage naming the active screen. */
.nvc-stage-caption {
  margin: 0;
  display: inline-flex;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-container-low);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.nvc-stage-caption span { display: none; }
.nvc-stage-caption span.is-active { display: inline; }

/* ---------------------------------------------------------------------
   5. Bento
   --------------------------------------------------------------------- */

.nvc-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 18px;
}
.nvc-bento > * { grid-column: span 2; }
.nvc-bento .is-wide { grid-column: span 4; }
.nvc-bento .is-tall { grid-row: span 2; }
.nvc-bento .is-half { grid-column: span 3; }
.nvc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  border-radius: var(--nvc-radius);
  background: var(--nvx-card-bg);
  border: 1px solid var(--nvx-card-border);
  box-shadow: var(--nvx-card-shadow);
  overflow: hidden;
  transition: transform 320ms var(--nvc-ease), border-color 320ms var(--nvc-ease);
}
.nvc-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary-color) 40%, var(--nvx-card-border)); }
.nvc-tile-copy {
  padding: 26px 26px 22px;
  display: grid;
  gap: 6px;
}
.nvc-tile .nvx-deck-tag {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 26%, transparent);
}
.nvc-tile h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--text-color);
}
.nvc-tile p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--text-muted);
}
/* The UI fragment inside a tile: pinned to the bottom, bleeding off the
   edge like a screen sliding into view. */
.nvc-tile-shot {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  margin: 0 26px -1px;
  border-radius: 18px 18px 0 0;
  background: var(--frame-bg);
  box-shadow: 0 0 0 1px var(--frame-edge), 0 -14px 40px -24px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.nvc-tile-shot img,
.nvc-tile-shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nvc-pos, 50% 0%);
  display: block;
}
.nvc-tile.is-tall .nvc-tile-shot { min-height: 300px; }
.nvc-tile.is-wide .nvc-tile-shot { margin-right: 0; border-top-right-radius: 0; }
/* A tile with the shot on the right instead of below. */
.nvc-tile.is-side { flex-direction: row; align-items: stretch; }
.nvc-tile.is-side .nvc-tile-copy { flex: 0 0 44%; justify-content: center; }
.nvc-tile.is-side .nvc-tile-shot { margin: 26px 0 0 0; border-radius: 18px 0 0 0; }
/* A tile that is only words: a soft brand glow in its corner so it is
   not a blank card. */
.nvc-tile.is-text::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-primary), transparent 65%);
  opacity: 0.8;
  pointer-events: none;
}
/* A tile that is only words, on the brand ramp. One per grid, at most. */
.nvc-tile.is-brand {
  background: var(--brand-gradient);
  border-color: transparent;
}
.nvc-tile.is-brand h3,
.nvc-tile.is-brand p { color: var(--brand-navy); }
.nvc-tile.is-brand .nvc-tile-copy { padding: 30px; justify-content: flex-end; flex: 1; }
.nvc-tile.is-brand .nvc-big {
  font-size: clamp(2.4rem, 2rem + 1.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-navy);
}

/* ---------------------------------------------------------------------
   6. Page specifics
   --------------------------------------------------------------------- */

/* --- FAQ: tabs, a two-column accordion with a sticky side visual --- */
.nvc-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.nvc-faq-side {
  position: sticky;
  top: calc(var(--nav-height) + 32px);
  display: grid;
  gap: 22px;
}
.nvc-faq-side .nvx-device { width: min(300px, 78vw); margin: 0; }
.nvc-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.nvc-faq-tabs a {
  display: inline-flex;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-container-low);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.nvc-faq-tabs a:hover,
.nvc-faq-tabs a.is-active {
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
  background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-container-low));
}
.nvc-faq-group { scroll-margin-top: calc(var(--nav-height) + 24px); }
.nvc-faq-group + .nvc-faq-group { margin-top: 48px; }
.nvc-faq-group > h2 {
  margin: 0 0 14px;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-color);
}
.nvc-faq-list { display: grid; gap: 10px; }
.nvc-faq-list details {
  border-radius: 20px;
  background: var(--nvx-card-bg);
  border: 1px solid var(--nvx-card-border);
  transition: border-color 200ms;
}
.nvc-faq-list details[open] { border-color: color-mix(in srgb, var(--primary-color) 45%, var(--nvx-card-border)); }
.nvc-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--text-color);
}
.nvc-faq-list summary::-webkit-details-marker { display: none; }
.nvc-faq-list summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 240ms var(--nvc-ease);
  margin-right: 4px;
}
.nvc-faq-list details[open] summary::after { transform: rotate(-135deg); }
.nvc-faq-list .nvc-faq-a {
  padding: 0 22px 20px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text-muted);
}
.nvc-faq-list .nvc-faq-a p { margin: 0 0 10px; }
.nvc-faq-list .nvc-faq-a p:last-child { margin-bottom: 0; }
.nvc-faq-list .nvc-faq-a a { color: var(--primary-color); }

/* --- Pricing --- */
.nvc-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.nvc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: var(--nvc-radius);
  background: var(--nvx-card-bg);
  border: 1px solid var(--nvx-card-border);
  box-shadow: var(--nvx-card-shadow);
}
.nvc-plan.is-featured {
  background:
    linear-gradient(var(--nvx-card-bg), var(--nvx-card-bg)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--nvx-card-shadow), 0 30px 80px -40px var(--glow-primary);
}
.nvc-plan-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: var(--brand-navy);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nvc-plan h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
}
.nvc-plan-sub { margin: 0 0 20px; font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); min-height: 2.8em; }
.nvc-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
  font-size: clamp(2.3rem, 2rem + 1vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}
.nvc-plan-price small { font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.nvc-plan-note { margin: 0 0 22px; font-size: 0.84rem; color: var(--text-muted); min-height: 1.4em; }
.nvc-plan ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  flex: 1;
}
.nvc-plan li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.nvc-plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 7px;
  height: 11px;
  border-right: 2px solid var(--forecast-green);
  border-bottom: 2px solid var(--forecast-green);
  transform: rotate(45deg);
}
.nvc-plan .nvx-btn { width: 100%; justify-content: center; }
.nvc-plan-fine { margin: 14px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }

/* --- About: the founder --- */
.nvc-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.nvc-founder-photo {
  position: relative;
  width: min(300px, 70vw);
  margin: 0 auto;
}
.nvc-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.nvc-founder-photo::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0.55;
  filter: blur(28px);
  z-index: -1;
}
.nvc-founder-copy .nvx-lead { max-width: 52ch; }
.nvc-founder-sig {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.nvc-founder-sig b { display: block; color: var(--text-color); }
.nvc-founder-sig span { display: block; font-size: 0.88rem; color: var(--text-muted); }
.nvc-founder-sig a { display: inline-flex; margin-left: auto; }
.nvc-founder-sig a img { width: 28px; height: 28px; border-radius: 6px; }

/* Principles: a short three-up of statements, numbered, no icons. */
.nvc-principles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(32px, 4vw, 56px);
}
/* A connected timeline: one hairline in the brand ramp runs through the
   numbered dots. No boxes. */
.nvc-principles::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
  opacity: 0.45;
}
.nvc-principle { position: relative; padding: 0; }
.nvc-principle .nvc-step-n {
  position: relative;
  margin-bottom: 22px;
  box-shadow: 0 0 0 6px var(--background-color), 0 0 24px var(--glow-green);
}
.nvc-principle h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 650; letter-spacing: -0.01em; color: var(--text-color); }
.nvc-principle p { margin: 0; max-width: 34ch; font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 760px) {
  .nvc-principles { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .nvc-principles::before { top: 18px; bottom: 18px; left: 17px; right: auto; width: 2px; height: auto; }
  .nvc-principle { display: grid; grid-template-columns: 36px 1fr; column-gap: 18px; }
  .nvc-principle .nvc-step-n { grid-row: span 2; margin: 0; }
}

/* --- Install --- */
.nvc-install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.nvc-install-devices {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
}
.nvc-install-devices .nvx-device { width: min(300px, 78vw); margin: 0; z-index: 2; }
.nvc-install-devices .nvc-device-back {
  position: absolute;
  width: min(260px, 66vw);
  transform: translate(-150px, 30px) rotate(-8deg);
  opacity: 0.9;
  z-index: 1;
}
.nvc-install-devices .nvc-device-back .nvx-device { width: 100%; }
.nvc-install-devices .nvc-device-back .nvx-device-screen { background: #0b1120; }
.nvc-qr {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 18px;
  border-radius: 22px;
  background: var(--nvx-card-bg);
  border: 1px solid var(--nvx-card-border);
  max-width: 440px;
}
.nvc-qr img {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
}
.nvc-qr b { display: block; margin-bottom: 4px; color: var(--text-color); }
.nvc-qr span { display: block; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.nvc-install .store-badges { justify-content: flex-start; margin-top: 26px; }
.nvc-install-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* --- Contact: the in-app help flow --- */
.nvc-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
/* A faithful list of the Help & Feedback screen, drawn in HTML so it reads
   in every language and theme. Rows follow help_feedback_screen.dart. */
.nvc-help-screen {
  width: min(380px, 100%);
  margin: 0 auto;
  padding: 22px 18px 18px;
  border-radius: var(--nvc-radius);
  background: var(--frame-bg);
  box-shadow: 0 0 0 1px var(--frame-edge), 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  color: #edf3fa;
}
.nvc-help-screen header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 1.02rem;
}
.nvc-help-screen header::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.nvc-help-screen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.nvc-help-screen li {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #1c2230;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.nvc-help-screen li.is-active {
  background: linear-gradient(135deg, rgba(100, 175, 255, 0.22), rgba(199, 163, 255, 0.16));
  box-shadow: inset 0 0 0 1px rgba(100, 175, 255, 0.45);
}
.nvc-help-screen li i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(100, 175, 255, 0.14);
  color: #64afff;
  font-style: normal;
}
.nvc-help-screen li i svg { width: 18px; height: 18px; }
.nvc-help-screen li b { display: block; font-size: 0.94rem; font-weight: 600; }
.nvc-help-screen li span { display: block; font-size: 0.78rem; color: #c7d1da; line-height: 1.35; }
.nvc-help-screen li::after {
  content: '\203A';
  color: #8e96a6;
  font-size: 1.3rem;
}
.nvc-help-screen li.is-active::after { color: #edf3fa; }
.nvc-help-flow {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}
.nvc-help-flow > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.nvc-help-flow .nvc-step-n { margin: 0; }
.nvc-help-flow b { display: block; color: var(--text-color); font-weight: 650; }
.nvc-help-flow span { display: block; font-size: 0.94rem; line-height: 1.5; color: var(--text-muted); }
.nvc-contact-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.nvc-way {
  padding: 28px;
  border-radius: var(--nvc-radius);
  background: var(--nvx-card-bg);
  border: 1px solid var(--nvx-card-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nvc-way h3 { margin: 0; font-size: 1.14rem; font-weight: 650; color: var(--text-color); }
.nvc-way p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--text-muted); }
.nvc-way .nvx-btn { align-self: flex-start; margin-top: auto; }
.nvc-way .nvc-way-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.nvc-way .nvc-way-links a { color: var(--primary-color); font-weight: 600; text-decoration: none; font-size: 0.94rem; }
.nvc-way .nvc-way-links a:hover { text-decoration: underline; }

/* Big quiet statement band, no card. */
.nvc-statement {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.nvc-statement .nvx-h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.nvc-statement .nvx-lead { margin-inline: auto; }

/* Page heads on inner pages: a little tighter than the home hero, and
   the lead sits on one or two lines. */
.nvc-head { text-align: center; max-width: 820px; margin: 0 auto; }
.nvc-head .nvx-hero-sub { margin-inline: auto; }

/* ---------------------------------------------------------------------
   7. Reduced motion and small screens
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nvc-forecast.is-nvc-drawn .nvc-fc-line,
  .nvc-forecast.is-nvc-drawn .nvc-fc-sched,
  .nvc-forecast.is-nvc-drawn .nvc-fc-area,
  .nvc-forecast.is-nvc-drawn .nvc-fc-today,
  .nvc-forecast.is-nvc-drawn .nvc-fc-marker,
  .nvc-forecast.is-nvc-drawn .nvc-fc-dot-ring { animation: none; }
  .nvc-forecast.is-nvc-drawn .nvc-fc-line { stroke-dasharray: none; }
  .nvc-lift, .nvc-tile, .nvc-screen, .nvc-step { transition: none; }
  .nvc-lift:hover, .nvc-tile:hover { transform: none; }
  /* The sticky section becomes a plain list: every step at full opacity,
     with its own screen beside it. */
  .nvc-sticky { display: block; }
  .nvc-sticky-stage { display: none; }
  .nvc-step { opacity: 1; min-height: 0; }
  .nvc-step .nvc-step-shot { display: block; }
}
/* The per-step screen, shown only in the reduced-motion and narrow lists. */
.nvc-step-shot { display: none; margin-top: 22px; }
.nvc-step-shot .nvc-frame { max-width: 360px; aspect-ratio: 4 / 4.2; }
.nvc-step-shot .nvc-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

@media (max-width: 1040px) {
  .nvc-hero .nvx-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .nvc-hero-visual { min-height: 0; margin-top: 12px; padding-right: 0; }
  .nvc-forecast { margin-inline: auto; }
  .nvc-hero-phone { width: 170px; right: 0; bottom: 16px; }
  .nvc-bento > *,
  .nvc-bento .is-wide,
  .nvc-bento .is-half { grid-column: span 3; }
  .nvc-tile.is-side { flex-direction: column; }
  .nvc-tile.is-side .nvc-tile-copy { flex: 0 0 auto; }
  .nvc-tile.is-side .nvc-tile-shot { margin: 0 26px -1px; border-radius: 18px 18px 0 0; }
  .nvc-plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .nvc-principles,
  .nvc-install-steps { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .nvc-story,
  .nvc-story.is-flip,
  .nvc-faq,
  .nvc-founder,
  .nvc-install,
  .nvc-help { grid-template-columns: 1fr; }
  .nvc-story.is-flip .nvc-story-media { order: 0; }
  .nvc-story-copy { text-align: left; }
  .nvc-faq-side { position: static; }
  .nvc-faq-side .nvx-device { display: none; }
  .nvc-sticky { display: block; }
  .nvc-sticky-stage { display: none; }
  .nvc-step { opacity: 1; min-height: 0; padding: 36px 0; }
  .nvc-step-shot { display: block; }
  .nvc-contact-ways { grid-template-columns: 1fr; }
  .nvc-install-devices { min-height: 0; padding: 20px 0 40px; }
  .nvc-install-devices .nvc-device-back { display: none; }
}
@media (max-width: 640px) {
  .nvc-bento > *,
  .nvc-bento .is-wide,
  .nvc-bento .is-half { grid-column: span 6; }
  .nvc-bento .is-tall { grid-row: auto; }
  .nvc-bento { grid-auto-rows: auto; }
  .nvc-tile { min-height: 0; }
  .nvc-tile-shot { min-height: 170px; }
  .nvc-tile.is-tall .nvc-tile-shot { min-height: 220px; }
  .nvc-pair { gap: 12px; }
  .nvc-pair > :nth-child(2) { margin-top: 28px; }
  .nvc-forecast { padding: 18px 96px 12px 16px; }
  .nvc-forecast-head { font-size: 0.72rem; }
  .nvc-forecast-head > span { display: none; }
  .nvc-hero-visual { padding-top: 64px; margin-bottom: 40px; }
  .nvc-hero-phone { width: 124px; bottom: -24px; right: 0; }
  .nvc-hero-phone .nvx-device { border-radius: 22px; padding: 5px; }
  .nvc-hero-phone .nvx-device-screen { border-radius: 18px; }
  .nvc-hero-phone .nvx-device-notch { width: 38px; height: 10px; top: 4px; }
  .nvc-qr { grid-template-columns: 96px 1fr; max-width: none; }
  .nvc-qr img { width: 96px; height: 96px; }
  .nvc-mark { display: none; }
}

/* ---------------------------------------------------------------------
   9. Trust band (rendered by js/site-content.js into [data-trust-strip]).
   One tonal panel: a headline left, five facts as a hairline list right.
   Replaces the old row of five icon cards on every page.
   --------------------------------------------------------------------- */
.trust-strip-shell { padding: clamp(40px, 6vw, 72px) 0; }
.trust-strip.nvc-trust {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  justify-content: initial;
  width: min(var(--nvx-wide), 100% - 2 * var(--nvx-gutter));
  padding: clamp(24px, 4vw, 52px);
  border-radius: var(--nvc-radius);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--glow-primary), transparent 55%),
    var(--surface-container-low);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 60%, transparent);
}
.trust-strip.nvc-trust > * { max-width: none; flex: none; }
.nvc-trust-title {
  margin: 8px 0 0;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-color);
}
.nvc-trust-list { list-style: none; margin: 0; padding: 0; display: grid; }
.nvc-trust-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
.nvc-trust-item:first-child { border-top: 0; padding-top: 0; }
.nvc-trust-item:last-child { padding-bottom: 0; }
.nvc-trust-ic { color: var(--forecast-green); display: inline-flex; padding-top: 2px; }
.nvc-trust-ic svg { width: 22px; height: 22px; }
.nvc-trust-copy { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.nvc-trust-copy b { color: var(--text-color); font-weight: 600; font-size: 1rem; }
.nvc-trust-copy span { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 880px) {
  .trust-strip.nvc-trust { grid-template-columns: 1fr; }
  .nvc-trust-copy { display: grid; }
}

/* ---------------------------------------------------------------------
   10. Page hero fan, facts strip, facts grid (features and others)
   --------------------------------------------------------------------- */
.nvc-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: clamp(36px, 5vw, 64px) auto 0;
  max-width: 900px;
}
.nvc-fan .nvx-device { margin: 0; flex: none; }
.nvc-fan-main { width: min(300px, 64vw); z-index: 2; }
.nvc-fan-side {
  width: min(250px, 50vw);
  opacity: 0.92;
  z-index: 1;
}
.nvc-fan-side:first-child { transform: translate(40px, -24px) rotate(-6deg); }
.nvc-fan-side:last-child { transform: translate(-40px, -24px) rotate(6deg); }
@media (max-width: 640px) {
  .nvc-fan-side { width: 40vw; }
  .nvc-fan-side:first-child { transform: translate(18vw, -14px) rotate(-6deg); }
  .nvc-fan-side:last-child { transform: translate(-18vw, -14px) rotate(6deg); }
  .nvc-fan-main { width: 52vw; }
}
.nvc-phone-sm { width: min(320px, 78vw); }

/* The feature moats as a quiet strip of facts under the hero, no boxes. */
.feature-moats.nvc-facts-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
}
.nvc-facts-strip .feature-moat-card {
  all: unset;
  display: block;
  padding: 4px 20px;
  border-left: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  text-align: left;
}
.nvc-facts-strip .feature-moat-card:first-child { border-left: 0; padding-left: 0; }
.nvc-facts-strip .feature-moat-card::before,
.nvc-facts-strip .feature-moat-card::after { display: none; }
.nvc-facts-strip .feature-moat-metric {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forecast-green); margin: 0 0 8px;
}
.nvc-facts-strip h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 650; color: var(--text-color); }
.nvc-facts-strip p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 980px) {
  .feature-moats.nvc-facts-strip { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .nvc-facts-strip .feature-moat-card { border-left: 0; padding: 0; }
}
@media (max-width: 520px) { .feature-moats.nvc-facts-strip { grid-template-columns: 1fr; } }

/* Facts grid: short title + line, a hairline above, no icons, no boxes. */
.nvc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px);
  margin-top: clamp(24px, 3vw, 40px);
}
.nvc-fact { padding-top: 18px; border-top: 2px solid transparent; border-image: var(--brand-gradient) 1; border-image-width: 2px 0 0 0; }
.nvc-fact h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 650; color: var(--text-color); }
.nvc-fact p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 860px) { .nvc-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nvc-facts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   11. Split band (visual + copy) and the pricing horizon bars
   --------------------------------------------------------------------- */
.nvc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.nvc-split.is-reverse .nvc-split-media { order: 2; }
.nvc-split-media { display: grid; place-items: center; }
.nvc-split-copy .nvx-h2 { margin-top: 10px; }
@media (max-width: 880px) {
  .nvc-split { grid-template-columns: 1fr; }
  .nvc-split.is-reverse .nvc-split-media { order: 0; }
}
.nvc-horizon { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.nvc-horizon li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas: "name bar" ". v";
  gap: 6px 16px;
  align-items: center;
}
.nvc-horizon-name { grid-area: name; font-weight: 650; color: var(--text-color); }
.nvc-horizon-v { grid-area: v; font-size: 0.92rem; color: var(--text-muted); }
.nvc-horizon-bar {
  grid-area: bar;
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--border-color) 45%, transparent);
  overflow: hidden;
}
.nvc-horizon-bar i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--nvc-w);
  border-radius: 6px;
  background: var(--forecast-green);
  box-shadow: 0 0 16px var(--glow-green);
}
/* Premium: the daily part solid, then weekly and monthly out to a year. */
.nvc-horizon-bar.is-year::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: var(--nvc-w); right: 0;
  background: repeating-linear-gradient(90deg, var(--forecast-green) 0 10px, transparent 10px 16px);
  opacity: 0.45;
}
.nvc-horizon-scale {
  display: flex; justify-content: space-between;
  margin: 10px 0 0 100px;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}

/* FAQ, final: a narrower side column with a smaller phone so the whole
   panel fits under the nav while it sticks. */
@media (min-width: 881px) { .nvc-faq { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); } }
.nvc-faq-side .nvx-h2 { margin: 6px 0 0; }
.nvc-faq-side .nvx-lead { margin: 0; }
.nvc-faq-side .nvx-device { width: min(232px, 60vw); border-radius: 40px; padding: 8px; }
.nvc-faq-main { min-width: 0; }
.nvc-faq-a { padding: 0 22px 20px; color: var(--text-muted); line-height: 1.6; }

/* About, final */
.nvc-founder-photo { width: min(220px, 56vw); }
.nvc-facts.is-stack { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
.nvc-founder-sig { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); }
@media (max-width: 880px) { .nvc-founder { grid-template-columns: 1fr; text-align: left; } }
.nvc-install .store-badges { flex-wrap: wrap; gap: 12px; }
.nvc-install .store-badge { flex: none; white-space: nowrap; }
.install-hero { padding-bottom: clamp(48px, 7vw, 96px); }

/* Contact, final: the real Your Conversations still sits behind the drawn
   Help & Feedback screen. */
.nvc-help-visual { position: relative; display: grid; place-items: center; padding: 24px 0 24px 0; }
.nvc-help-visual .nvc-help-screen { position: relative; z-index: 2; margin: 0 0 0 auto; width: min(360px, 88%); }
.nvc-help-conv {
  position: absolute; left: 0; top: 0;
  width: min(300px, 62%);
  transform: rotate(-5deg);
  opacity: 0.95;
  z-index: 1;
}
.nvc-help-conv img { width: 100%; height: auto; }
.nvc-help-copy .nvx-h2 { margin-top: 10px; }
.nvc-ways-title {
  margin: clamp(64px, 8vw, 112px) 0 22px;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -0.015em;
  color: var(--text-color);
}
.nvc-way .nvx-btn { align-self: flex-start; }
.nvc-way-links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 880px) {
  .nvc-help { grid-template-columns: 1fr; }
  .nvc-contact-ways { grid-template-columns: 1fr; }
  .nvc-help-visual .nvc-help-screen { margin: 0 auto; width: min(340px, 86%); }
  .nvc-help-conv { width: 54%; left: -2%; }
}
.nvc-help-flow > div { align-items: center; }
.nvc-help-flow span.nvc-step-n { display: inline-grid; font-size: 0.9rem; line-height: 1; color: var(--brand-navy); }

/* ---------------------------------------------------------------------
   8. Phase D: scroll-driven storytelling (`nvd-`)
   ---------------------------------------------------------------------
   One idea: every effect reads a single number, --p (0 to 1), and the
   only question is who sets it.
     - Browsers with CSS scroll-driven animations: a keyframe animation on
       the element runs --p from 0 to 1 on a view() timeline, so it scrubs
       with the scroll and reverses when you scroll back.
     - Others (Safari before 26, Firefox): js/site-c.js section 4 maps the
       same scroll geometry to --p inline, on requestAnimationFrame.
     - prefers-reduced-motion: --p is 1 (the finished state), no scrubbing.
   Everything downstream is transform, opacity or stroke-dashoffset, all
   calc()'d from --p, so there is one implementation of each widget.
   [data-nvd="view"]  short element, done 40% of the way up (headlines)
   [data-nvd="view-long"]  a widget card: starts once a fifth of it is in
   view, done halfway up (so it finishes fully on screen)
   [data-nvd="pin"]  the pinned story: --p runs over the section's height
   (a headline inside the pinned stage reads the pin's --p, assembling
   over its first slice: a view() timeline on a sticky subject stretches
   across the whole pin, so it cannot have its own)
   --------------------------------------------------------------------- */

@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes nvd-p { from { --p: 0; } to { --p: 1; } }
@supports (animation-timeline: view()) {
  [data-nvd='view'],
  [data-nvd='view-long'],
  [data-nvd='pin'] {
    animation: nvd-p linear both;
    animation-timeline: view();
  }
  [data-nvd='view'] { animation-range: entry 0% cover 40%; }
  [data-nvd='view-long'] { animation-range: entry 20% cover 50%; }
  [data-nvd='pin'] { animation-range: contain 0% contain 100%; }
}

/* --- Words that assemble. js/site-c.js splits the text into .nvd-w
   spans with --i; each word brightens and settles over its own slice of
   --p. Without JS, the text is plain and fully visible. --- */
.nvd-w {
  display: inline-block;
  --nvd-wp: clamp(0, (var(--p) - var(--i) * var(--nvd-wo, 0.045)) * var(--nvd-wk, 2.6), 1);
  opacity: calc(0.14 + 0.86 * var(--nvd-wp));
  transform: translate3d(0, calc((1 - var(--nvd-wp)) * 0.35em), 0) scale(calc(0.94 + 0.06 * var(--nvd-wp)));
  transform-origin: 0 100%;
}

/* --- Sample widgets. Drawn in HTML/CSS/SVG, on sample data (labelled).
   They live on the phone's dark screen, so the plate colours come from
   the frame tokens; the type and accents from the theme. --- */
.nvd-plate {
  --nvd-ink: var(--plate-ink);
  --nvd-ink-2: var(--plate-ink-muted);
  --nvd-line: var(--plate-line);
  --nvd-card: var(--plate-card);
  --nvd-green: var(--plate-green);
  --nvd-blue: var(--plate-primary);
  --nvd-accent: var(--plate-accent);
  --nvd-warn: var(--plate-warn);
  position: relative;
  color: var(--nvd-ink);
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
/* base.css colours every p with --text-muted (dark in light mode); on the
   dark plate a p takes the plate ink unless a later class says otherwise. */
.nvd-plate :where(p) { color: inherit; }
.nvd-card {
  position: relative;
  padding: 12px 13px;
  border-radius: 16px;
  background: var(--nvd-card);
  box-shadow: 0 0 0 1px var(--nvd-line);
}
.nvd-label {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nvd-ink-2);
}
.nvd-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.nvd-title { margin: 0; font-size: 13px; font-weight: 700; }
.nvd-sample {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--plate-card-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nvd-ink-2);
}

/* A rolling strip: one line visible, the rest stacked below, translated
   by --nvd-i rows. Rows are 1.08em tall so the maths is in em. */
.nvd-strip {
  display: inline-block;
  height: 1.08em;
  line-height: 1.08em;
  overflow: hidden;
  vertical-align: bottom;
}
.nvd-strip > span {
  display: block;
  height: 1.08em;
  transform: translate3d(0, calc(var(--nvd-i, 0) * -1.08em), 0);
}
.nvd-strip > span > span { display: block; height: 1.08em; white-space: nowrap; }

/* Screen 1: balance + forecast. --p1 runs the month, --nvd-d is the day. */
/* Odometer: rest on each day, roll over a third of a day. */
.nvd-balance { --nvd-d: calc(var(--p1) * 29); --nvd-i: calc(clamp(0, (var(--nvd-d) - 0) * 3, 1) + clamp(0, (var(--nvd-d) - 1) * 3, 1) + clamp(0, (var(--nvd-d) - 2) * 3, 1) + clamp(0, (var(--nvd-d) - 3) * 3, 1) + clamp(0, (var(--nvd-d) - 4) * 3, 1) + clamp(0, (var(--nvd-d) - 5) * 3, 1) + clamp(0, (var(--nvd-d) - 6) * 3, 1) + clamp(0, (var(--nvd-d) - 7) * 3, 1) + clamp(0, (var(--nvd-d) - 8) * 3, 1) + clamp(0, (var(--nvd-d) - 9) * 3, 1) + clamp(0, (var(--nvd-d) - 10) * 3, 1) + clamp(0, (var(--nvd-d) - 11) * 3, 1) + clamp(0, (var(--nvd-d) - 12) * 3, 1) + clamp(0, (var(--nvd-d) - 13) * 3, 1) + clamp(0, (var(--nvd-d) - 14) * 3, 1) + clamp(0, (var(--nvd-d) - 15) * 3, 1) + clamp(0, (var(--nvd-d) - 16) * 3, 1) + clamp(0, (var(--nvd-d) - 17) * 3, 1) + clamp(0, (var(--nvd-d) - 18) * 3, 1) + clamp(0, (var(--nvd-d) - 19) * 3, 1) + clamp(0, (var(--nvd-d) - 20) * 3, 1) + clamp(0, (var(--nvd-d) - 21) * 3, 1) + clamp(0, (var(--nvd-d) - 22) * 3, 1) + clamp(0, (var(--nvd-d) - 23) * 3, 1) + clamp(0, (var(--nvd-d) - 24) * 3, 1) + clamp(0, (var(--nvd-d) - 25) * 3, 1) + clamp(0, (var(--nvd-d) - 26) * 3, 1) + clamp(0, (var(--nvd-d) - 27) * 3, 1) + clamp(0, (var(--nvd-d) - 28) * 3, 1)); }
.nvd-balance .nvd-figure {
  margin: 4px 0 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.nvd-balance .nvd-day {
  display: inline-flex;
  gap: 2px;
  font-weight: 600;
  color: var(--nvd-ink);
  text-transform: none;
  letter-spacing: 0;
}
.nvd-balance .nvd-day .nvd-strip { min-width: 2ch; text-align: right; }
.nvd-chart { --nvd-d: calc(var(--p1) * 29); }
.nvd-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.nvd-fc-ghost { fill: none; stroke: var(--nvd-ink); stroke-width: 1.4; stroke-dasharray: 2 4; opacity: 0.22; }
.nvd-fc-line {
  fill: none;
  stroke: var(--nvd-green);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 436;
  stroke-dashoffset: calc(435.0 - (9.9 * clamp(0, var(--nvd-d) - 0, 1) + 72.3 * clamp(0, var(--nvd-d) - 1, 1) + 9.9 * clamp(0, var(--nvd-d) - 2, 1) + 9.8 * clamp(0, var(--nvd-d) - 3, 1) + 9.9 * clamp(0, var(--nvd-d) - 4, 1) + 9.8 * clamp(0, var(--nvd-d) - 5, 1) + 11.1 * clamp(0, var(--nvd-d) - 6, 1) + 9.8 * clamp(0, var(--nvd-d) - 7, 1) + 9.8 * clamp(0, var(--nvd-d) - 8, 1) + 9.9 * clamp(0, var(--nvd-d) - 9, 1) + 9.8 * clamp(0, var(--nvd-d) - 10, 1) + 9.9 * clamp(0, var(--nvd-d) - 11, 1) + 9.8 * clamp(0, var(--nvd-d) - 12, 1) + 92.3 * clamp(0, var(--nvd-d) - 13, 1) + 9.8 * clamp(0, var(--nvd-d) - 14, 1) + 9.9 * clamp(0, var(--nvd-d) - 15, 1) + 9.8 * clamp(0, var(--nvd-d) - 16, 1) + 9.8 * clamp(0, var(--nvd-d) - 17, 1) + 12.2 * clamp(0, var(--nvd-d) - 18, 1) + 9.8 * clamp(0, var(--nvd-d) - 19, 1) + 9.9 * clamp(0, var(--nvd-d) - 20, 1) + 9.7 * clamp(0, var(--nvd-d) - 21, 1) + 10.8 * clamp(0, var(--nvd-d) - 22, 1) + 9.8 * clamp(0, var(--nvd-d) - 23, 1) + 9.9 * clamp(0, var(--nvd-d) - 24, 1) + 9.8 * clamp(0, var(--nvd-d) - 25, 1) + 9.9 * clamp(0, var(--nvd-d) - 26, 1) + 9.9 * clamp(0, var(--nvd-d) - 27, 1) + 9.8 * clamp(0, var(--nvd-d) - 28, 1)));
}
.nvd-fc-area { fill: var(--nvd-green); opacity: calc(0.04 + 0.1 * var(--p1)); }
.nvd-fc-today {
  transform: translate3d(calc(var(--p1) * 284px), 0, 0);
}
.nvd-fc-today line { stroke: var(--nvd-ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.nvd-fc-dot { transform: translate3d(0, calc(16.5 + 1.1 * clamp(0, var(--nvd-d) - 0, 1) + 71.6 * clamp(0, var(--nvd-d) - 1, 1) + 1.6 * clamp(0, var(--nvd-d) - 2, 1) + 0.6 * clamp(0, var(--nvd-d) - 3, 1) + 1.3 * clamp(0, var(--nvd-d) - 4, 1) + 0.9 * clamp(0, var(--nvd-d) - 5, 1) + 5.3 * clamp(0, var(--nvd-d) - 6, 1) + 1.2 * clamp(0, var(--nvd-d) - 7, 1) + 0.8 * clamp(0, var(--nvd-d) - 8, 1) + 1.0 * clamp(0, var(--nvd-d) - 9, 1) + 0.8 * clamp(0, var(--nvd-d) - 10, 1) + 1.3 * clamp(0, var(--nvd-d) - 11, 1) + 0.7 * clamp(0, var(--nvd-d) - 12, 1) + -91.8 * clamp(0, var(--nvd-d) - 13, 1) + 0.8 * clamp(0, var(--nvd-d) - 14, 1) + 1.2 * clamp(0, var(--nvd-d) - 15, 1) + 0.9 * clamp(0, var(--nvd-d) - 16, 1) + 0.7 * clamp(0, var(--nvd-d) - 17, 1) + 7.3 * clamp(0, var(--nvd-d) - 18, 1) + 0.9 * clamp(0, var(--nvd-d) - 19, 1) + 1.3 * clamp(0, var(--nvd-d) - 20, 1) + 0.7 * clamp(0, var(--nvd-d) - 21, 1) + 4.5 * clamp(0, var(--nvd-d) - 22, 1) + 0.8 * clamp(0, var(--nvd-d) - 23, 1) + 1.1 * clamp(0, var(--nvd-d) - 24, 1) + 0.6 * clamp(0, var(--nvd-d) - 25, 1) + 1.0 * clamp(0, var(--nvd-d) - 26, 1) + 1.1 * clamp(0, var(--nvd-d) - 27, 1) + 0.8 * clamp(0, var(--nvd-d) - 28, 1)), 0); }
.nvd-fc-dot circle:first-child { fill: var(--nvd-green); }
.nvd-fc-dot circle + circle { fill: none; stroke: var(--nvd-green); stroke-width: 1.5; opacity: 0.5; }
.nvd-fc-text { fill: var(--nvd-ink); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; font-family: inherit; }
.nvd-fc-low {
  fill: var(--nvd-ink-2);
  font-size: 9px;
  font-family: inherit;
  letter-spacing: 0.04em;
  opacity: clamp(0, (var(--p1) - 0.44) * 8, 1);
}
.nvd-fc-low-dot { fill: var(--nvd-warn); opacity: clamp(0, (var(--p1) - 0.44) * 8, 1); }
.nvd-fc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.nvd-fc-head b { font-size: 12px; font-weight: 700; }
.nvd-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--nvd-ink-2); }
.nvd-legend i { width: 14px; height: 2px; border-radius: 2px; background: var(--nvd-green); }

/* Safe to spend: the tightest day still ahead. Once today passes day 14
   the figure swaps to the later low. */
.nvd-safe { --nvd-m: clamp(0, (var(--p1) - 0.47) * 14, 1); }
.nvd-safe .nvd-figure { margin: 2px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.nvd-safe .nvd-swap > span { text-align: left; }
.nvd-safe .nvd-swap .is-before { opacity: clamp(0, 1 - 2 * var(--nvd-m), 1); }
.nvd-safe .nvd-swap .is-after { opacity: clamp(0, 2 * var(--nvd-m) - 1, 1); }
.nvd-safe .nvd-sub { margin: 2px 0 0; font-size: 10.5px; color: var(--nvd-ink-2); }

/* Screen 2: Upcoming Flow. Five rows slide in on --p2, each in its own
   slice; the bars below are the cash after each one (dip, then recover). */
.nvd-upcoming .nvd-list { list-style: none; margin: 0; padding: 0; }
.nvd-upcoming li {
  --nvd-r: clamp(0, (var(--p2) - var(--i) * 0.16) * 7, 1);
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--nvd-line);
  opacity: var(--nvd-r);
  transform: translate3d(calc((1 - var(--nvd-r)) * 36px), 0, 0);
}
.nvd-upcoming li:first-child { border-top: 0; }
.nvd-upcoming .nvd-when {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--plate-card-2);
  font-size: 12px;
  font-weight: 700;
}
.nvd-upcoming .nvd-who { display: grid; gap: 1px; }
.nvd-upcoming .nvd-who b { font-size: 12.5px; font-weight: 600; }
.nvd-upcoming .nvd-who span { font-size: 10.5px; color: var(--nvd-ink-2); }
.nvd-upcoming .nvd-amt { font-size: 12.5px; font-weight: 700; text-align: right; }
.nvd-upcoming .nvd-amt.is-in { color: var(--nvd-green); }
.nvd-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: end;
  height: 54px;
  margin-top: 6px;
}
.nvd-bars i {
  --nvd-r: clamp(0, (var(--p2) - var(--i) * 0.16) * 7, 1);
  display: block;
  height: 100%;
  border-radius: 4px 4px 2px 2px;
  background: var(--nvd-green);
  opacity: calc(0.35 + 0.65 * var(--nvd-r));
  transform: scaleY(calc(var(--nvd-h) * var(--nvd-r)));
  transform-origin: 50% 100%;
}
.nvd-bars i.is-low { background: var(--nvd-warn); }

/* Screen 3: budgets. --p3 fills the ring, lights Needs attention, then
   moves money. */
.nvd-ring-card { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.nvd-ring { --nvd-q: clamp(0, var(--p3) * 2.8, 1); }
.nvd-ring svg { display: block; width: 92px; height: 92px; }
.nvd-ring circle { fill: none; stroke-width: 9; transform: rotate(-90deg); transform-origin: 50% 50%; }
.nvd-ring .nvd-ring-track { stroke: var(--plate-line); }
.nvd-ring .nvd-ring-sched { stroke: var(--nvd-blue); opacity: 0.45; stroke-dasharray: 251.3; stroke-dashoffset: calc(251.3 - 251.3 * 0.86 * var(--nvd-q)); }
.nvd-ring .nvd-ring-spent { stroke: var(--nvd-blue); stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: calc(251.3 - 251.3 * 0.7 * var(--nvd-q)); }
.nvd-ring-mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.nvd-ring-mid b { display: block; font-size: 15px; font-weight: 700; }
.nvd-ring-mid span { display: block; max-width: 64px; margin: 0 auto; font-size: 9px; letter-spacing: -0.01em; color: var(--nvd-ink-2); }
.nvd-ring-mid span:lang(es) { font-size: 8px; }
.nvd-ring { position: relative; }
.nvd-keys { display: grid; gap: 6px; }
.nvd-key { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.nvd-key span { display: inline-flex; align-items: center; gap: 6px; color: var(--nvd-ink-2); }
.nvd-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--nvd-blue); }
.nvd-key i.is-sched { opacity: 0.45; }
.nvd-key i.is-plan { background: var(--plate-card-2); }
.nvd-key b { font-weight: 700; }

.nvd-attention {
  --nvd-a: clamp(0, (var(--p3) - 0.36) * 5, 1);
  --nvd-m: clamp(0, (var(--p3) - 0.64) * 3.2, 1);
  overflow: hidden;
  transform: scale(calc(0.97 + 0.03 * var(--nvd-a)));
}
.nvd-attention::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 0% 0%, var(--plate-warn-soft), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--plate-warn);
  opacity: calc(var(--nvd-a) * (1 - var(--nvd-m)));
  pointer-events: none;
}
.nvd-attention::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 0% 0%, var(--plate-green-soft), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--plate-green);
  opacity: clamp(0, 2 * var(--nvd-m) - 1, 1);
  pointer-events: none;
}
.nvd-attention .nvd-row-head { position: relative; }
.nvd-attn-row { position: relative; display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding-top: 8px; }
.nvd-attn-row i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--nvd-warn); opacity: calc(0.3 + 0.7 * var(--nvd-a)); transform: scale(calc(0.6 + 0.4 * var(--nvd-a))); }
.nvd-attn-row i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--nvd-green); opacity: clamp(0, 2 * var(--nvd-m) - 1, 1); }
.nvd-attn-row b { font-size: 12.5px; font-weight: 600; }
.nvd-swap { display: grid; }
.nvd-swap > span { grid-area: 1 / 1; }
.nvd-attn-row .nvd-swap { font-size: 10.5px; line-height: 1.2; color: var(--nvd-ink-2); }
/* Swaps hand off rather than overlap: the old value fades out over the
   first half of --nvd-m, the new one in over the second. */
.nvd-swap .is-before { opacity: clamp(0, 1 - 2 * var(--nvd-m), 1); }
.nvd-swap .is-after { opacity: clamp(0, 2 * var(--nvd-m) - 1, 1); color: var(--nvd-green); }
.nvd-attn-row .nvd-amt { font-size: 12.5px; font-weight: 700; color: var(--nvd-warn); opacity: calc(0.4 + 0.6 * var(--nvd-a)); }
.nvd-attn-row .nvd-amt .is-before { opacity: clamp(0, 1 - 2 * var(--nvd-m), 1); }
.nvd-attn-row .nvd-amt .is-after { opacity: clamp(0, 2 * var(--nvd-m) - 1, 1); color: var(--nvd-green); }
.nvd-attn-row .nvd-amt { display: grid; min-width: 4ch; text-align: right; }
.nvd-attn-row .nvd-amt > span { grid-area: 1 / 1; }

.nvd-move { --nvd-m: clamp(0, (var(--p3) - 0.64) * 3.2, 1); }
.nvd-move .nvd-budget { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding-top: 8px; }
.nvd-move .nvd-budget b { font-size: 12px; font-weight: 600; }
.nvd-move .nvd-budget .nvd-swap { text-align: right; font-size: 12px; font-weight: 700; color: var(--nvd-ink); }
.nvd-move .nvd-budget .nvd-swap .is-after { color: var(--nvd-ink); }
.nvd-bar { grid-column: 1 / -1; position: relative; height: 7px; border-radius: 4px; background: var(--plate-line); overflow: hidden; }
.nvd-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--nvd-blue); transform-origin: 0 50%; }
.nvd-bar.is-from i { transform: scaleX(calc(var(--nvd-from-a) + (var(--nvd-from-b) - var(--nvd-from-a)) * var(--nvd-m))); }
.nvd-bar.is-to i { transform: scaleX(calc(var(--nvd-to-a) + (var(--nvd-to-b) - var(--nvd-to-a)) * var(--nvd-m))); background: var(--nvd-accent); }
.nvd-chip {
  position: absolute;
  /* Rides down the middle of the card, clear of the amounts. */
  right: 72px;
  top: 34px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--nvd-green);
  color: var(--brand-navy);
  font-size: 11px;
  font-weight: 700;
  opacity: calc(clamp(0, var(--nvd-m) * 4, 1) - clamp(0, (var(--nvd-m) - 0.9) * 10, 1));
  transform: translate3d(calc(var(--nvd-m) * -14px), calc(var(--nvd-m) * 50px), 0) scale(calc(0.8 + 0.2 * clamp(0, var(--nvd-m) * 4, 1)));
}

/* --- The pinned story (home). The section is tall; the stage sticks and
   everything inside reads --p. Three steps of copy and three screens
   cross-fade in slices of --p; the widgets run on local --p1/--p2/--p3. --- */
.nvd-pin {
  --nvd-h: 330vh;
  position: relative;
  height: var(--nvd-h);
  padding: 0;
  /* Local progress for each screen. */
  --p1: clamp(0, (var(--p) - 0.05) / 0.25, 1);
  --p2: clamp(0, (var(--p) - 0.37) / 0.26, 1);
  --p3: clamp(0, (var(--p) - 0.7) / 0.28, 1);
  /* Cross-fades: a short slice between screens. */
  --nvd-f12: clamp(0, (var(--p) - 0.32) / 0.04, 1);
  --nvd-f23: clamp(0, (var(--p) - 0.65) / 0.04, 1);
}
.nvd-stage {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  height: calc(100svh - var(--nav-height));
  display: flex;
  align-items: center;
  /* clip, not hidden: hidden would make the stage a scroll container and
     the view() timelines inside it would never run. */
  overflow: clip;
}
.nvd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  width: 100%;
  height: 100%;
}
.nvd-copy { position: relative; }
.nvd-copy .nvx-h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); margin-bottom: 28px; --nvd-wo: 0.014; --nvd-wk: 11; }
.nvd-steps { display: grid; }
.nvd-step {
  grid-area: 1 / 1;
  align-self: start;
  pointer-events: none;
}
.nvd-step .nvx-lead { max-width: 40ch; margin: 0; font-size: 1.08rem; }
.nvd-step h3 { margin: 0 0 10px; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
.nvd-step .nvx-btn-text { display: inline-flex; margin-top: 16px; pointer-events: auto; }
.nvd-step:nth-child(1) { --nvd-s: calc(1 - var(--nvd-f12)); }
.nvd-step:nth-child(2) { --nvd-s: calc(var(--nvd-f12) - var(--nvd-f23)); }
.nvd-step:nth-child(3) { --nvd-s: var(--nvd-f23); }
.nvd-step {
  opacity: var(--nvd-s);
  transform: translate3d(0, calc((1 - var(--nvd-s)) * 14px), 0);
}
.nvd-step:nth-child(1) { transform: translate3d(0, calc((1 - var(--nvd-s)) * -14px), 0); }
/* A thin rail that fills as the story plays. */
.nvd-rail { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.nvd-rail li { position: relative; width: 44px; height: 3px; border-radius: 2px; background: var(--border-color); overflow: hidden; }
.nvd-rail li::after { content: ''; position: absolute; inset: 0; background: var(--brand-gradient); transform-origin: 0 50%; transform: scaleX(var(--nvd-rs)); }
.nvd-rail li:nth-child(1) { --nvd-rs: clamp(0, var(--p) / 0.33, 1); }
.nvd-rail li:nth-child(2) { --nvd-rs: clamp(0, (var(--p) - 0.33) / 0.33, 1); }
.nvd-rail li:nth-child(3) { --nvd-rs: clamp(0, (var(--p) - 0.66) / 0.34, 1); }
.nvd-note { margin: 18px 0 0; font-size: 0.82rem; color: var(--text-muted); }

.nvd-phone-wrap {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 0;
  container-type: size;
}
.nvd-phone-wrap .nvx-device {
  width: min(300px, calc((100vh - var(--nav-height) - 100px) * 0.48));
  width: min(300px, 46cqh);
  margin: 0;
  border-radius: 46px;
  padding: 9px;
}
.nvd-phone-wrap .nvx-device-screen { border-radius: 38px; background: var(--frame-bg); }
.nvd-phone-wrap .nvx-device-notch { width: 84px; height: 22px; top: 8px; }
.nvd-screens { position: absolute; inset: 0; }
.nvd-screen {
  position: absolute;
  inset: 0;
  padding: 62px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  opacity: var(--nvd-s);
  transform: translate3d(0, calc((1 - var(--nvd-s)) * 22px), 0);
}
.nvd-screen:nth-child(1) { --nvd-s: calc(1 - var(--nvd-f12)); transform: translate3d(0, calc((1 - var(--nvd-s)) * -22px), 0); }
.nvd-screen:nth-child(2) { --nvd-s: calc(var(--nvd-f12) - var(--nvd-f23)); }
.nvd-screen:nth-child(3) { --nvd-s: var(--nvd-f23); }
.nvd-screen-top { position: absolute; top: 38px; left: 0; right: 0; display: flex; justify-content: center; }
/* The phone's glow warms with the story. */
.nvd-phone-wrap::before {
  content: '';
  position: absolute;
  inset: 10% 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, var(--glow-primary), transparent 66%);
  opacity: calc(0.5 + 0.5 * var(--p));
  pointer-events: none;
}

/* A widget card on its own (features, what's new): a flat plate. */
.nvd-plate.nvd-standalone {
  padding: 16px;
  border-radius: var(--nvc-radius-sm);
  background: var(--frame-bg);
  box-shadow: 0 0 0 1px var(--frame-edge), 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  --p1: var(--p);
  --p2: var(--p);
  --p3: var(--p);
}
.nvd-standalone .nvd-sample-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.nvd-standalone-wrap { max-width: 380px; margin: 0 auto; }

/* A standalone plate: the same screen markup on a flat plate. Its local
   progress runs over the whole --p, so the ring, the light-up and the
   move happen in turn as the card climbs the viewport. */
.nvd-standalone { display: grid; gap: 10px; }
.nvd-standalone .nvd-sample-row { margin-bottom: 0; }
.nvd-standalone-wrap { max-width: 400px; margin: 0 auto 56px; }
.nvd-standalone-note { text-align: center; margin: 14px 0 0; }
.nvd-moment {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin: 64px 0 72px;
}
.nvd-moment-copy h3 { margin: 0 0 12px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; }
.nvd-moment-copy p { margin: 0 0 12px; color: var(--text-muted); max-width: 46ch; }
.nvd-moment-copy .nvx-fine { margin-top: 18px; }

/* --- Reduced motion: the finished state, nothing scrubs. The pinned
   story unpins and shows its three screens side by side. --- */
@media (prefers-reduced-motion: reduce) {
  [data-nvd] { animation: none !important; --p: 1 !important; }
  .nvd-w { opacity: 1; transform: none; }
  .nvd-pin { height: auto; --p1: 1; --p2: 1; --p3: 1; }
  .nvd-pin { padding: var(--nvx-band-pad) 0; }
  .nvd-stage { position: static; height: auto; display: block; overflow: visible; }
  .nvd-grid { display: block; }
  .nvd-steps { gap: 28px; }
  .nvd-step { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; }
  .nvd-rail { display: none; }
  .nvd-pin .nvd-copy .nvx-h2 { margin-bottom: 28px; }
  .nvd-phone-wrap { margin-top: 40px; container-type: normal; }
  /* Flatten the phone (its screen holds the widgets) rather than hide it. */
  .nvd-phone-wrap .nvx-device,
  .nvd-phone-wrap .nvx-device-screen { display: contents; }
  .nvd-phone-wrap .nvx-device-notch { display: none; }
  .nvd-phone-wrap::before { display: none; }
  .nvd-screens.nvd-plate { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; width: 100%; }
  .nvd-screen { position: static; opacity: 1; transform: none; padding: 16px; border-radius: var(--nvc-radius-sm); background: var(--frame-bg); box-shadow: 0 0 0 1px var(--frame-edge); }
  .nvd-screen-top { position: static; margin-bottom: 10px; }
}

@media (max-width: 880px) {
  .nvd-stage { align-items: stretch; padding: 16px 0 12px; }
  .nvd-grid { display: flex; flex-direction: column; gap: 10px; }
  .nvd-copy { flex: 0 0 auto; }
  /* The phone sits under the copy and may bleed off the bottom of the
     stage; its screens keep their content at the top so nothing is lost. */
  .nvd-phone-wrap { flex: 1 1 auto; align-items: start; overflow: clip; container-type: size; }
  .nvd-screen { justify-content: flex-start; }
  .nvd-copy .nvx-h2 { margin-bottom: 12px; font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.1rem); }
  .nvd-rail { margin-bottom: 12px; }
  .nvd-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
  .nvd-step .nvx-lead { font-size: 0.9rem; line-height: 1.45; }
  .nvd-step .nvx-btn-text { margin-top: 8px; font-size: 0.9rem; }
  .nvd-note { margin-top: 10px; font-size: 0.76rem; }
  /* As wide as the room under the copy allows, so the whole screen shows
     (a real capture cut at the bottom read as a crop). */
  .nvd-phone-wrap .nvx-device {
    width: min(244px, 44cqh);
    border-radius: 36px;
    padding: 7px;
  }
  .nvd-phone-wrap .nvx-device-screen { border-radius: 30px; }
  .nvd-phone-wrap .nvx-device-notch { width: 64px; height: 17px; top: 6px; }
  .nvd-screen { padding: 48px 10px 12px; gap: 8px; }
  .nvd-screen-top { top: 28px; }
  .nvd-plate { font-size: 11px; }
  .nvd-balance .nvd-figure { font-size: 25px; }
  .nvd-moment { grid-template-columns: 1fr; margin: 44px 0 52px; }
  .nvd-moment .nvd-plate { max-width: 400px; }
  .nvd-ring-card { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .nvd-key { font-size: 11px; }
  .nvd-key span { min-width: 0; }
  .nvd-ring svg { width: 80px; height: 80px; }
  .nvd-bars { height: 44px; }
}

/* ---------------------------------------------------------------------
   12. Build 22 homepage (Guy's Oct 22 points): whole dark screens in the
   cards, cards that link, the Your Money Today deck, the sticky setup
   story, and the Your Conversations pair.
   --------------------------------------------------------------------- */

/* --- A card that holds a whole phone: the copy beside a small device
   frame showing the entire screen, never a crop. --- */
.nvc-bento-phones { grid-auto-rows: auto; }
.nvc-bento-phones > * { grid-column: span 2; }
.nvc-tile-phone { flex-direction: row; align-items: stretch; min-height: 0; }
.nvc-tile-phone .nvc-tile-copy { flex: 1 1 auto; min-width: 0; padding: 24px 16px 22px 24px; align-content: start; }
.nvc-tile-phone .nvc-tile-copy p { font-size: 0.92rem; }
.nvc-tile-device {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  padding: 24px 20px 20px 0;
}
.nvc-tile-device .nvx-device-clip {
  width: 150px;
  margin: 0;
  padding: 6px;
  border-radius: 24px;
}
.nvc-tile-device .nvx-device-clip .nvx-device-screen { border-radius: 18px; }
.nvc-tile-device img,
.nvc-tile-device video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The small frame keeps its controls on its corner, at a smaller size. */
.nvc-tile-device .nvx-clip-toggle { width: 36px; height: 36px; bottom: -4px; inset-inline-end: -4px; }
.nvc-tile-device .nvx-clip-toggle::before { inset: 4px; }
.nvc-tile-device .nvx-clip-toggle svg { width: 13px; height: 13px; }
.nvc-tile-device .nvx-clip-restart { inset-inline-end: 26px; }
.nvc-tile-device .nvx-clip-toggle.is-idle { width: 64px; height: 64px; bottom: auto; inset-inline-end: auto; }
.nvc-tile-device .nvx-clip-toggle.is-idle::before { inset: 0; }
.nvc-tile-device .nvx-clip-toggle.is-idle svg { width: 24px; height: 24px; }

/* --- A card that is a link: hover lifts and lights the border (as
   before) and slides the chevron; a press settles it. --- */
.nvc-tile-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
}
.nvc-tile-more .nvx-chev { display: inline-block; transition: transform 240ms var(--nvc-ease); }
a.nvc-tile { color: inherit; text-decoration: none; cursor: pointer; }
a.nvc-tile:hover { box-shadow: var(--nvx-card-shadow), 0 22px 44px -26px color-mix(in srgb, var(--primary-color) 60%, transparent); }
a.nvc-tile:hover .nvc-tile-more .nvx-chev { transform: translateX(4px); }
a.nvc-tile:active { transform: translateY(-1px) scale(0.99); transition-duration: 90ms; }
a.nvc-tile:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
a.nvc-tile.is-text .nvc-tile-copy { justify-content: center; }

/* --- The month story's phone shows real captures: each step holds two or
   three, stacked, the later ones fading in at points of the step's own
   progress (--p1, --p2, --p3 from the pin). --- */
.nvd-shots .nvd-screen { padding: 0; display: block; }
.nvd-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.nvd-screen:nth-child(1) .nvd-shot:nth-child(2) { opacity: clamp(0, (var(--p1) - 0.55) * 8, 1); }
.nvd-screen:nth-child(2) .nvd-shot:nth-child(2) { opacity: clamp(0, (var(--p2) - 0.33) * 8, 1); }
.nvd-screen:nth-child(2) .nvd-shot:nth-child(3) { opacity: clamp(0, (var(--p2) - 0.66) * 8, 1); }
.nvd-screen:nth-child(3) .nvd-shot:nth-child(2) { opacity: clamp(0, (var(--p3) - 0.5) * 8, 1); }

/* --- The Your Money Today deck: N pages that slide up over one another
   as --p runs; the page beneath settles back and dims. The section carries
   the count in --nvd-n and every rail segment, step and page its index in
   --k, so the same rules serve 3 to 6 pages. Page k arrives over a short
   slice ending at k/N (--nvd-ak), and the one before it is covered by the
   same number for k+1 (--nvd-ak1); the first page is there from the start
   and the last is never covered. --- */
.nvd-deck {
  --nvd-n: 4;
  --nvd-h: calc(var(--nvd-n) * 90vh + 60vh);
}
.nvd-deck .nvd-deck-lead { margin: 0 0 22px; font-size: 1rem; max-width: 46ch; }
.nvd-deck .nvd-rail li { width: 30px; }
.nvd-deck .nvd-rail li { --nvd-rs: clamp(0, (var(--p) - var(--k) / var(--nvd-n)) * var(--nvd-n), 1); }
.nvd-deck .nvd-step,
.nvd-page {
  --nvd-ak: clamp(0, (var(--p) - var(--k) / var(--nvd-n) + 0.1) / 0.07, 1);
  --nvd-ak1: clamp(0, (var(--p) - (var(--k) + 1) / var(--nvd-n) + 0.1) / 0.07, 1);
}
.nvd-deck .nvd-step { --nvd-s: calc(var(--nvd-ak) - var(--nvd-ak1)); transform: translate3d(0, calc((1 - var(--nvd-s)) * 14px), 0); }
.nvd-deck .nvd-step:last-child { --nvd-s: var(--nvd-ak); }
.nvd-pages { position: absolute; inset: 0; }
.nvd-page {
  --nvd-in: var(--nvd-ak);
  --nvd-cov: var(--nvd-ak1);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.5);
  transform: translate3d(0, calc((1 - var(--nvd-in)) * 104%), 0) scale(calc(1 - 0.06 * var(--nvd-cov)));
  filter: brightness(calc(1 - 0.45 * var(--nvd-cov)));
  will-change: transform;
}
.nvd-page:last-child { --nvd-cov: 0; }

/* --- The setup story (How it works): the month story's pin with three
   numbered steps and one capture per screen. --- */
.nvd-how { --nvd-h: 300vh; }
.nvd-how .nvd-step .nvc-step-n { margin-bottom: 14px; }

/* --- Your Conversations: the copy beside two phones, the list and a
   thread with the founder's reply. --- */
.nvx-assist-founder { align-items: center; }
.nvc-pair-phones { max-width: 540px; margin: 0 auto; }
.nvc-pair-phones .nvx-device-clip { width: 100%; max-width: 250px; margin: 0 auto; }
.nvc-pair-phones img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The signature from About, with the founder's photo leading it. */
.nvc-founder-sig-inline img { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; }

@media (max-width: 1040px) {
  .nvc-bento-phones > * { grid-column: span 3; }
}
@media (max-width: 880px) {
  .nvd-deck-lead { display: none; }
  .nvd-shots .nvd-screen { padding: 0; }
}
@media (max-width: 640px) {
  .nvc-bento-phones > * { grid-column: span 6; }
  .nvc-tile-phone { flex-direction: row; }
  .nvc-tile-phone .nvc-tile-copy { padding: 18px 12px 18px 18px; }
  .nvc-tile-device { padding: 18px 14px 14px 0; }
  .nvc-tile-device .nvx-device-clip { width: 118px; padding: 5px; border-radius: 20px; }
  .nvc-tile-device .nvx-device-clip .nvx-device-screen { border-radius: 15px; }
  .nvc-tile.is-text .nvc-tile-copy { padding: 18px; }
  .nvc-pair-phones { gap: 12px; }
  .nvc-pair-phones > :nth-child(2) { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  a.nvc-tile:hover, a.nvc-tile:active { transform: none; }
  .nvc-tile-more .nvx-chev { transition: none; }
  /* The month story's captures sit in a row, each showing its last capture. */
  .nvd-shots { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .nvd-shots .nvd-screen { position: relative; opacity: 1; transform: none; padding: 0; aspect-ratio: 720 / 1560; border-radius: 14px; overflow: hidden; background: var(--frame-bg); box-shadow: 0 0 0 1px var(--frame-edge); }
  /* The deck's five pages sit in a row, with their captions above. */
  .nvd-deck .nvd-copy { max-width: none; }
  .nvd-deck .nvd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
  .nvd-deck .nvd-step { min-width: 0; }
  /* The scene type (round 4) is sized for one caption at a time; in a row of five it keeps the quieter size. */
  .nvd-deck .nvd-step h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); margin-bottom: 8px; }
  .nvd-deck .nvd-num-v { font-size: clamp(1.5rem, 1.1rem + 1vw, 1.9rem); }
  .nvd-pages { position: static; display: grid; grid-template-columns: repeat(var(--nvd-n), minmax(0, 1fr)); gap: 10px; width: 100%; }
  .nvd-page { position: static; transform: none; filter: none; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--frame-edge); }
}

/* --- Round 2 (Oct 23). The film tile: the published 9:16 cut in a flat
   frame (it carries its own phone and captions, so no bezel); the feature
   grid in two columns with phones wide enough to read; a widget tile that
   shows one whole card instead of a phone. --- */
.nvc-tile-film .nvc-frame { width: 176px; aspect-ratio: 9 / 16; border-radius: 16px; position: relative; }
.nvc-tile-film .nvc-frame video { width: 100%; height: 100%; object-fit: cover; }
.nvc-tile-film .nvx-clip-toggle { bottom: 8px; inset-inline-end: 8px; }
.nvc-tile-film .nvx-clip-restart { inset-inline-end: 46px; }
.nvc-tile-film .nvx-clip-toggle.is-idle { bottom: auto; inset-inline-end: auto; }
.nvc-bento-two > * { grid-column: span 3; }
.nvc-bento-two > .is-wide { grid-column: span 6; }
.nvc-bento-two .nvc-tile-phone .nvc-tile-copy p { font-size: 0.96rem; }
.nvc-bento-two .nvc-tile-device .nvx-device-clip { width: 236px; padding: 8px; border-radius: 34px; }
.nvc-bento-two .nvc-tile-device .nvx-device-clip .nvx-device-screen { border-radius: 26px; }
.nvc-tile-widget { flex-direction: column; }
.nvc-tile-widget .nvc-tile-shot { flex: 0 0 auto; min-height: 0; margin: 0 24px 24px; border-radius: 18px; }
.nvc-tile-widget .nvc-tile-shot img { position: static; width: 100%; height: auto; }
@media (max-width: 640px) {
  .nvc-bento-two > *, .nvc-bento-two > .is-wide { grid-column: span 6; }
  .nvc-bento-two .nvc-tile-device .nvx-device-clip { width: 150px; padding: 6px; border-radius: 24px; }
  .nvc-bento-two .nvc-tile-device .nvx-device-clip .nvx-device-screen { border-radius: 18px; }
  .nvc-tile-film .nvc-frame { width: 132px; }
  .nvc-tile-widget .nvc-tile-shot { margin: 0 18px 18px; }
}

/* --- Round 3: a wide card with two phones side by side (Authenticator
   Security: the setup screen and App Lock). --- */
.nvc-tile-device-pair { gap: 16px; }
@media (max-width: 640px) {
  .nvc-tile-device-pair { gap: 8px; }
  .nvc-tile-device-pair .nvx-device-clip { width: 118px; }
}

/* ---------------------------------------------------------------------
   13. Round 4 (Oct 23 evening): the pinned chapters as scenes. One
   composition (copy and phone close together, the phone the hero), a
   big changing step headline with a kicker, a visible rail, a number
   that counts up when its step arrives, and a spotlight with a callout
   on the part of the real screen the step is about.
   --------------------------------------------------------------------- */
.nvd-grid {
  /* The phone column is a size container, so it needs a track of its own
     width (an auto track would collapse to nothing and clip the phone). */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  max-width: 1120px;
  margin: 0 auto;
  gap: clamp(40px, 5vw, 80px);
  justify-content: center;
}
.nvd-copy { max-width: 520px; }
@media (min-width: 1600px) {
  .nvd-grid { max-width: 1240px; grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); }
  .nvd-pin { --nvd-pw: 420px; --nvd-ph: 46cqh; }
}
.nvd-copy .nvx-h2 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); margin-bottom: 22px; color: var(--nvx-ink-dim); }
.nvd-phone-wrap .nvx-device { width: min(var(--nvd-pw, 360px), var(--nvd-ph, 42cqh)); }
.nvd-pin {
  /* A wider slice between steps, so the change reads as a scene change. */
  --nvd-f12: clamp(0, (var(--p) - 0.31) / 0.08, 1);
  --nvd-f23: clamp(0, (var(--p) - 0.64) / 0.08, 1);
}
.nvd-step { transform: translate3d(0, calc((1 - var(--nvd-s)) * 36px), 0); }
.nvd-step:nth-child(1) { transform: translate3d(0, calc((1 - var(--nvd-s)) * -36px), 0); }
.nvd-step h3 {
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--text-color);
  text-wrap: balance;
}
.nvd-kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}
.nvd-kicker b { font-size: 1.15rem; letter-spacing: 0; }
.nvd-kicker span { color: var(--text-muted); font-weight: 600; }
.nvd-rail { gap: 10px; margin: 0 0 26px; }
.nvd-rail li { width: 60px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--primary-color) 22%, var(--border-color)); }
.nvd-deck .nvd-rail li { width: 44px; }
.nvd-num {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
}
.nvd-num-v {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}
.nvd-num-l { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.nvd-step .nvx-lead { font-size: 1.02rem; }

/* --- The highlight: a soft outline on the part of the real screen the
   step is about, arriving with the step. It holds over the first quarter
   of the step's scroll range, fades out by about a third, and the real
   screen shows clean for the rest; scrolling back replays it. No dimming
   and no chip: the figure is already on the screen and in the copy
   (Guy, Oct 23). Position and size are percentages of the screen in
   --sx, --sy, --sw, --sh; --lp is the step's local progress (0 to 1). --- */
.nvd-spot {
  position: absolute;
  left: calc(var(--sx) * 1%);
  top: calc(var(--sy) * 1%);
  width: calc(var(--sw) * 1%);
  height: calc(var(--sh) * 1%);
  border-radius: 14px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--plate-primary) 85%, #fff),
    0 0 0 7px color-mix(in srgb, var(--plate-primary) 28%, transparent),
    0 0 28px color-mix(in srgb, var(--plate-primary) 45%, transparent);
  pointer-events: none;
  --lp: 1;
  opacity: calc(clamp(0, var(--lp) * 16, 1) * (1 - clamp(0, (var(--lp) - 0.25) * 10, 1)));
}
.nvd-screen:nth-child(1) .nvd-spot { --lp: var(--p1); }
.nvd-screen:nth-child(2) .nvd-spot { --lp: var(--p2); }
.nvd-screen:nth-child(3) .nvd-spot { --lp: var(--p3); }
/* The deck's highlights sit beside the pages; page k's step runs from its
   arrival to the next page's, a 1/N slice of the pin. */
.nvd-pages .nvd-spot { --lp: clamp(0, (var(--p) - var(--k) / var(--nvd-n) + 0.03) * var(--nvd-n), 1); }

@media (max-width: 880px) {
  .nvd-grid { max-width: none; }
  .nvd-copy { max-width: none; }
  .nvd-copy .nvx-h2 { font-size: clamp(1.2rem, 1rem + 1.4vw, 1.6rem); margin-bottom: 10px; }
  .nvd-step h3 { font-size: 1.45rem; margin-bottom: 8px; }
  .nvd-kicker { margin-bottom: 6px; font-size: 0.7rem; }
  .nvd-kicker b { font-size: 1rem; }
  .nvd-rail { margin-bottom: 12px; gap: 6px; }
  .nvd-rail li { width: 40px; height: 4px; }
  .nvd-num { margin-bottom: 8px; }
  .nvd-num-v { font-size: 1.9rem; }
  .nvd-num-l { font-size: 0.68rem; }
  .nvd-step { transform: translate3d(0, calc((1 - var(--nvd-s)) * 18px), 0); }
  .nvd-step:nth-child(1) { transform: translate3d(0, calc((1 - var(--nvd-s)) * -18px), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nvd-step { transform: none; }
  .nvd-spot { display: none; }
}

/* ---------------------------------------------------------------------
   14. Round 6 (Oct 23 night): fuller cards and the four-languages band.
   --------------------------------------------------------------------- */
/* A card says more: a kicker, a bigger headline, two or three short
   points with an icon, then Learn More; sized against its phone so the
   card is full rather than tall and empty. */
.nvc-tile-kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.nvc-tile h3 { font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.12; }
.nvc-tile p { font-size: 1.02rem; line-height: 1.5; }
.nvc-tile-phone .nvc-tile-copy p { font-size: 1.02rem; }
.nvc-tile-points {
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.nvc-tile-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text-color);
}
.nvc-pt-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.nvc-pt-ic svg { width: 14px; height: 14px; }
.nvc-tile-more { margin-top: 14px; font-size: 0.95rem; }
.nvc-bento-two .nvc-tile-device .nvx-device-clip { width: 250px; }
.nvc-bento-two .nvc-tile-phone .nvc-tile-copy { padding: 26px 18px 24px 26px; }
.nvc-tile.is-wide .nvc-tile-copy { max-width: 520px; }

/* The three-languages band: three screens in a row; one column on a phone. */
.nvl-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nvl-row li { display: grid; gap: 10px; min-width: 0; }
.nvl-tag {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-color);
  background: var(--surface-container-low);
  border: 1px solid var(--border-color);
}
.nvl-shot { border-radius: 22px; }
.nvl-shot img { width: 100%; height: auto; display: block; }
.nvl-note { margin: 18px 0 0; text-align: center; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 880px) {
  .nvl-row { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .nvc-tile h3 { font-size: 1.25rem; }
  .nvc-tile-points li { font-size: 0.92rem; }
  .nvc-tile-points { gap: 7px; }
  .nvc-bento-two .nvc-tile-device .nvx-device-clip { width: 132px; }
}
/* A whole 720x1560 capture in the smaller page frames: the screen takes
   the capture's own aspect, so nothing at the bottom is cut. */
.nvc-phone-sm .nvx-device-screen,
.nvc-fan-main .nvx-device-screen,
.nvc-fan-side .nvx-device-screen { aspect-ratio: 720 / 1560; }

/* ---------------------------------------------------------------------
   15. Oct 23 night (Guy): card type one size down, and a chip is never
   wider than its own text, on every page and inside any grid or flex
   parent (width: max-content stops the stretch without moving it).
   --------------------------------------------------------------------- */
.nvc-tile h3 { font-size: 1.2rem; line-height: 1.18; }
.nvc-tile p,
.nvc-tile-phone .nvc-tile-copy p,
.nvc-bento-two .nvc-tile-phone .nvc-tile-copy p { font-size: 0.9rem; line-height: 1.5; }
.nvc-tile-points li { font-size: 0.86rem; line-height: 1.4; }
.nvc-pt-ic { width: 22px; height: 22px; }
.nvx-deck-tag,
.nvl-tag,
.nvx-chip,
.nvd-chip,
.nvc-plan-badge,
.nvx-cap-badge,
.nvc-tile-kicker,
.feature-highlight {
  width: max-content;
  max-width: 100%;
}