/*
 * Homepage layout inspired by the MindFlow reference. Betterself's own
 * screenshots, product claims, support routes and beta flows remain in place.
 * This file is scoped to index.html; the other marketing pages keep their
 * established layouts.
 */
.mindflow-home {
  --mf-ground: #0b1a2e;
  --mf-ground-raised: #10223a;
  --mf-card: #13233b;
  --mf-ink: #f4fafa;
  --mf-muted: #c1d0dd;
  --mf-subtle: #a0b3cc;
  --mf-accent: #00bfa5;
  --mf-accent-strong: #00bfa5;
  --mf-accent-rgb: 0, 191, 165;
  --mf-line: rgba(151, 214, 207, .14);
  /* Radius scale (MindFlow keeps one; values match what this file already
     used ad hoc — tokenised, not changed). */
  --mf-radius-btn: 10px;
  --mf-radius-chip: 20px;
  --mf-radius-tile: 22px;
  --mf-radius-panel: 24px;
  --mf-radius-card: 28px;
  --mf-radius-phone: 40px;
  --mf-radius-pill: 999px;
  background: var(--mf-ground);
  color: var(--mf-ink);
}

.mindflow-home #main-content > section {
  background: var(--mf-ground) !important;
}
.mindflow-home #main-content > section:nth-of-type(even) {
  background: var(--mf-ground-raised) !important;
}
.mindflow-home #main-content > section > div {
  max-width: 1296px;
}
.mindflow-home #main-content h2 {
  color: var(--mf-ink);
  font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
  line-height: 1.13 !important;
}
.mindflow-home #main-content h3 {
  color: var(--mf-ink);
  letter-spacing: -.025em !important;
}
.mindflow-home #main-content p[style*="color:#A0B3CC"],
.mindflow-home #main-content p[style*="color:#8B9BB4"] {
  color: var(--mf-muted) !important;
}
.mindflow-home #main-content [style*="color:#00BFA5"] {
  color: var(--mf-accent) !important;
}
.mindflow-home #main-content svg[stroke="#00BFA5"] {
  stroke: var(--mf-accent);
}
.mindflow-home #main-content a:focus-visible,
.mindflow-home #main-content button:focus-visible,
.mindflow-home #main-content summary:focus-visible,
.mindflow-home #main-content input:focus-visible {
  outline: 3px solid var(--mf-accent);
  outline-offset: 3px;
}

.mindflow-home #main-nav,
.mindflow-home #main-nav.scrolled {
  background: rgba(11, 26, 46, .94) !important;
  border-color: var(--mf-line);
  box-shadow: none;
}
.mindflow-home #main-nav > div {
  max-width: 1296px;
}
.mindflow-home #main-nav > div > div.hidden { color: var(--mf-muted) !important; }
.mindflow-home #main-nav img[src$="betterself-logo.png"],
.mindflow-home footer img[src$="betterself-logo.png"],
.mindflow-home #sticky-cta img[src$="betterself-logo.png"] {
  filter: brightness(3);
  mix-blend-mode: normal !important;
}
.mindflow-home #menu-toggle {
  border-color: rgba(var(--mf-accent-rgb), .45);
  background: var(--mf-accent-strong);
  border-radius: 50%;
  color: #0b1a2e;
  width: 44px;
  height: 44px;
}
.mindflow-home #mobile-menu {
  background: #13233b;
  border-color: var(--mf-line);
}

/* MindFlow's first screen uses left-aligned copy and a dominant phone. */
.mindflow-home #hero {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(72px, 8vw, 118px) 24px 56px !important;
  text-align: left !important;
  background:
    radial-gradient(ellipse 44% 55% at 88% 34%, rgba(var(--mf-accent-rgb), .35), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 83px, rgba(255,255,255,.025) 84px 85px),
    repeating-linear-gradient(0deg, transparent 0 83px, rgba(255,255,255,.025) 84px 85px),
    var(--mf-ground) !important;
}
.mindflow-home #hero > .relative {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 0 clamp(28px, 5vw, 80px);
  align-content: center;
  min-height: 680px;
  max-width: 1296px !important;
}
.mindflow-home #hero > .relative > :not(.mf-hero-visual) {
  grid-column: 1;
  justify-self: start;
}
.mindflow-home .mf-hero-eyebrow {
  align-self: end;
  background: rgba(var(--mf-accent-rgb), .12) !important;
  border-color: rgba(var(--mf-accent-rgb), .3) !important;
  margin-bottom: 24px !important;
  padding: 8px 14px !important;
}
.mindflow-home .mf-hero-eyebrow span {
  color: #b8fff1 !important;
  font-size: 12px !important;
}
.mindflow-home .mf-hero-title {
  font-size: clamp(3.2rem, 5.1vw, 5.25rem) !important;
  line-height: 1.06 !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
  margin-bottom: 22px !important;
  max-width: 700px;
}
.mindflow-home .mf-title-accent { color: var(--mf-accent); }
.mindflow-home .mf-hero-lede {
  max-width: 570px !important;
  margin: 0 0 22px !important;
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  line-height: 1.55 !important;
  color: var(--mf-muted) !important;
}
.mindflow-home .mf-hero-assurance {
  justify-content: flex-start !important;
  margin: 0 0 24px !important;
  max-width: 570px !important;
  color: var(--mf-subtle) !important;
}
.mindflow-home .mf-hero-actions {
  justify-content: flex-start !important;
  margin-bottom: 14px !important;
}
.mindflow-home .btn-primary,
.mindflow-home .btn-sm {
  color: #0b1a2e;
  border: 1px solid rgba(93, 231, 208, .75);
  background: var(--mf-accent-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  font-weight: 700;
}
.mindflow-home .btn-primary:hover,
.mindflow-home .btn-sm:hover {
  background: #07b3a2;
}
.mindflow-home .btn-primary { min-height: 50px; }
.mindflow-home .btn-ghost {
  border-color: rgba(var(--mf-accent-rgb), .36);
  color: var(--mf-ink);
  background: rgba(var(--mf-accent-rgb), .1);
}
.mindflow-home .btn-ghost:hover {
  border-color: var(--mf-accent);
  color: white;
}
.mindflow-home .form-input,
.mindflow-home .sticky-input {
  background: rgba(255,255,255,.055);
  border-color: var(--mf-line);
  color: white;
}
.mindflow-home .form-input:focus,
.mindflow-home .sticky-input:focus {
  border-color: var(--mf-accent);
  box-shadow: 0 0 0 3px rgba(var(--mf-accent-rgb), .18);
}
.mindflow-home .mf-hero-proof {
  justify-content: flex-start !important;
  margin: 0 !important;
  max-width: 560px !important;
}
.mindflow-home .mf-hero-visual {
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: stretch;
  position: relative;
  align-items: center;
  margin-top: 0 !important;
  min-height: 640px;
}
.mindflow-home .hero-phone-grid {
  display: block;
  position: relative;
  width: min(100%, 570px);
  height: 590px;
  margin: 0 auto;
  /* Fade the bottom so the app's floating action bar and nav never show. */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.mindflow-home .hero-phone-shell {
  position: absolute;
  width: 44%;
  --mf-tilt: 0deg;
  transform: rotate(var(--mf-tilt));
}
/* Opaque fan: side phones are solid (no see-through text), tilt less and
   are dimmed with an overlay, so the centre screen reads crisply. */
.mindflow-home .hero-phone-shell:nth-child(1) {
  width: 52%;
  left: 24%;
  top: 0;
  z-index: 3;
}
.mindflow-home .hero-phone-shell:nth-child(2) {
  width: 40%;
  left: 58%;
  top: 80px;
  z-index: 1;
  --mf-tilt: 6deg;
}
.mindflow-home .hero-phone-shell:nth-child(3) {
  width: 40%;
  left: 2%;
  top: 80px;
  z-index: 1;
  --mf-tilt: -6deg;
}
.mindflow-home .hero-phone-shell:nth-child(n+2) .hero-phone-glow { display: none; }
.mindflow-home .hero-phone-shell:nth-child(n+2) .hero-phone-frame {
  border-color: rgba(114, 233, 208, .22);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.mindflow-home .hero-phone-shell:nth-child(n+2) .hero-phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 26, .5);
  pointer-events: none;
}
.mindflow-home .hero-phone-frame {
  border-color: rgba(114, 233, 208, .45);
  box-shadow: 0 40px 90px rgba(0,0,0,.75);
}
.mindflow-home .hero-phone-glow {
  background: radial-gradient(ellipse, rgba(var(--mf-accent-rgb), .26), transparent 72%);
}
html.motion-ready .mindflow-home .hero-phone-shell[data-motion-active="true"] {
  transform: translate3d(var(--motion-shift-x), var(--motion-shift-y), 0)
    rotate(var(--mf-tilt)) rotateX(var(--motion-rotate-x)) rotateY(var(--motion-rotate-y));
}

/* A truthful trust ribbon takes the place of MindFlow's partner logos. */
.mindflow-home .mf-trust-strip {
  overflow: hidden;
  background: #0e2038 !important;
  border-color: var(--mf-line) !important;
  padding: 24px !important;
}
.mindflow-home .mf-trust-strip > div { max-width: 1296px; }
.mindflow-home .mf-trust-strip p {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--mf-subtle) !important;
}
.mindflow-home .mf-trust-strip span { color: var(--mf-accent) !important; }

/* Scroll-led product tour: real Betterself screens replace template imagery. */
.mindflow-home #app-tour {
  padding: 110px 24px 80px;
  background:
    radial-gradient(ellipse 38% 20% at 53% 26%, rgba(var(--mf-accent-rgb), .13), transparent 80%),
    var(--mf-ground) !important;
}
.mindflow-home .mf-tour-heading {
  max-width: 760px !important;
  margin: 0 auto 46px;
  text-align: center;
}
.mindflow-home .mf-tour-heading > p {
  color: var(--mf-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.mindflow-home .mf-tour-grid {
  max-width: 1296px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1.05fr) 155px;
  column-gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.mindflow-home .mf-tour-stories { grid-column: 1; }
.mindflow-home .mf-tour-story {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 65px 0;
}
.mindflow-home .mf-tour-number {
  color: var(--mf-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 22px;
}
.mindflow-home .mf-tour-story h3 {
  font-size: clamp(2rem, 3.1vw, 3rem);
  font-weight: 600;
  line-height: 1.14;
  margin-bottom: 18px;
}
.mindflow-home .mf-tour-story p {
  max-width: 420px;
  color: var(--mf-muted);
  font-size: 17px;
  line-height: 1.65;
}
.mindflow-home .mf-tour-story > img { display: none; }
.mindflow-home .mf-tour-stage {
  grid-column: 2;
  position: sticky;
  top: 76px;
  height: calc(100vh - 96px);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--mf-accent-rgb), .22), transparent 69%);
}
.mindflow-home .mf-tour-phone {
  position: relative;
  width: clamp(235px, 21vw, 305px);
  aspect-ratio: 240 / 519;
  border: 9px solid #081324;
  outline: 1px solid rgba(114, 233, 208, .4);
  border-radius: var(--mf-radius-phone);
  overflow: hidden;
  background: #13233b;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.mindflow-home .mf-tour-phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity .42s ease;
}
.mindflow-home .mf-tour-phone img[data-active="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mindflow-home .mf-tour-phone img { transition: none; }
}
.mindflow-home .mf-tour-nav {
  grid-column: 3;
  position: sticky;
  top: calc(50vh - 106px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
}
.mindflow-home .mf-tour-nav a {
  display: block;
  min-height: 46px;
  padding: 11px 16px;
  border-radius: var(--mf-radius-btn);
  color: var(--mf-subtle);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.mindflow-home .mf-tour-nav a:hover,
.mindflow-home .mf-tour-nav a[aria-current="step"] {
  color: white;
  background: rgba(var(--mf-accent-rgb), .16);
}

/* Shared card material across the home page. */
.mindflow-home .panel,
.mindflow-home .glass,
.mindflow-home #faq details,
.mindflow-home #learn .learn-card {
  background: var(--mf-card) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius-tile) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.mindflow-home .panel:hover,
.mindflow-home #learn .learn-card:hover {
  border-color: rgba(var(--mf-accent-rgb), .48) !important;
}
.mindflow-home #why-this-matters > div,
.mindflow-home #how-it-works > div,
.mindflow-home #why-betterself > div,
.mindflow-home #features > div,
.mindflow-home #learn > div {
  max-width: 1296px;
}
.mindflow-home #why-this-matters > div > .grid > div {
  background: rgba(255,255,255,.035) !important;
  border-color: var(--mf-line) !important;
  border-radius: var(--mf-radius-chip) !important;
  min-height: 190px;
  text-align: left !important;
}
.mindflow-home #why-this-matters > div > .grid > div > div {
  font-weight: 600 !important;
}
.mindflow-home #how-it-works {
  padding: 112px 24px !important;
}
.mindflow-home .mf-steps-grid {
  gap: 24px !important;
}
.mindflow-home .mf-step-card {
  position: relative;
  overflow: hidden;
  min-height: 555px;
  text-align: left !important;
  background:
    linear-gradient(135deg, rgba(var(--mf-accent-rgb),.12), transparent 48%),
    var(--mf-card);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-panel);
  padding: 30px 28px 0;
}
.mindflow-home .mf-step-card > div:first-child {
  color: var(--mf-accent) !important;
  font-size: 15px !important;
  letter-spacing: .16em !important;
  margin-bottom: 20px !important;
}
.mindflow-home .mf-step-card h3 {
  font-size: 30px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}
.mindflow-home .mf-step-card p {
  min-height: 90px;
  color: var(--mf-muted) !important;
}
.mindflow-home .mf-step-card img {
  display: block;
  width: min(78%, 230px);
  height: auto;
  margin: 22px auto 0;
  border: 6px solid #081324;
  border-radius: var(--mf-radius-card) var(--mf-radius-card) 0 0;
  box-shadow: 0 20px 45px rgba(0,0,0,.44);
}
.mindflow-home #why-betterself .feat-row {
  gap: clamp(30px, 5vw, 80px);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-card);
  padding: clamp(28px, 5vw, 64px);
  margin-bottom: 24px;
  background: var(--mf-card);
  overflow: hidden;
}
.mindflow-home #why-betterself .feat-row h3 {
  font-weight: 600 !important;
  font-size: clamp(1.7rem, 2.4vw, 2.5rem) !important;
}
.mindflow-home #why-betterself .feat-row li {
  color: var(--mf-muted) !important;
}
.mindflow-home #features .panel {
  min-height: 225px;
  padding: 32px !important;
}
.mindflow-home #features .panel h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
}
.mindflow-home #learn .learn-card {
  min-height: 245px;
  padding: 30px !important;
}
.mindflow-home #learn .learn-card h3 {
  font-size: 23px !important;
  font-weight: 600 !important;
}
.mindflow-home #faq details {
  padding: 22px 28px !important;
}
.mindflow-home #faq summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mindflow-home #waitlist {
  padding: 90px 24px 100px !important;
}
.mindflow-home #waitlist > div {
  max-width: 1296px !important;
  border: 1px solid rgba(var(--mf-accent-rgb), .32);
  border-radius: var(--mf-radius-card);
  background:
    radial-gradient(ellipse 55% 70% at 10% 4%, rgba(var(--mf-accent-rgb), .3), transparent 72%),
    radial-gradient(ellipse 50% 80% at 90% 0%, rgba(var(--mf-accent-rgb), .23), transparent 75%),
    var(--mf-card);
  padding: clamp(42px, 6vw, 88px) 24px;
}
.mindflow-home footer {
  background: #081324 !important;
  border-color: var(--mf-line) !important;
  margin-top: 0 !important;
}
.mindflow-home #sticky-cta {
  background: rgba(8, 19, 36, .96);
  border-color: var(--mf-line);
}

@media (max-width: 991px) {
  .mindflow-home .mf-tour-grid {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 1fr);
  }
  .mindflow-home .mf-tour-nav { display: none; }
  .mindflow-home #hero > .relative {
    grid-template-columns: 1fr;
    min-height: 0;
    text-align: center;
  }
  .mindflow-home #hero > .relative > :not(.mf-hero-visual) {
    justify-self: center;
  }
  .mindflow-home .mf-hero-title { max-width: 720px; }
  .mindflow-home .mf-hero-lede,
  .mindflow-home .mf-hero-assurance,
  .mindflow-home .mf-hero-proof {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mindflow-home .mf-hero-assurance,
  .mindflow-home .mf-hero-actions,
  .mindflow-home .mf-hero-proof {
    justify-content: center !important;
  }
  .mindflow-home .mf-hero-visual {
    grid-column: 1;
    grid-row: auto;
    min-height: 550px;
    width: 100%;
    margin-top: 34px !important;
  }
  .mindflow-home .hero-phone-grid { height: 520px; width: min(100%, 550px); }
}
@media (max-width: 767px) {
  .mindflow-home #app-tour { padding: 80px 16px; }
  .mindflow-home .mf-tour-grid { display: block; }
  .mindflow-home .mf-tour-heading { margin-bottom: 30px; }
  .mindflow-home .mf-tour-stage { display: none; }
  .mindflow-home .mf-tour-story {
    min-height: 0;
    margin-bottom: 18px;
    padding: 28px 24px 0;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-tile);
    background: var(--mf-card);
    overflow: hidden;
  }
  .mindflow-home .mf-tour-story h3 { font-size: 28px; }
  .mindflow-home .mf-tour-story p { font-size: 15px; }
  .mindflow-home .mf-tour-story > img {
    display: block;
    width: min(70%, 230px);
    height: auto;
    margin: 28px auto -32%;
    border: 6px solid #081324;
    border-radius: var(--mf-radius-card);
  }
  .mindflow-home #hero { padding-top: 80px !important; }
  .mindflow-home .mf-hero-title {
    font-size: clamp(2.25rem, 7.5vw, 3.35rem) !important;
    line-height: 1.1 !important;
  }
  .mindflow-home .mf-hero-assurance { text-align: center; }
  .mindflow-home .mf-steps-grid { grid-template-columns: 1fr !important; }
  .mindflow-home .mf-step-card { min-height: 490px; }
  .mindflow-home #why-betterself .feat-row { padding: 28px; }
}
@media (max-width: 520px) {
  /* 80px clears the 65px fixed nav, as the tablet rule above does. */
  .mindflow-home #hero { padding: 80px 16px 40px !important; }
  .mindflow-home .mf-hero-title { font-size: clamp(2rem, 8.2vw, 2.5rem) !important; }
  .mindflow-home .mf-hero-lede { font-size: 15px !important; }
  .mindflow-home .mf-hero-visual {
    grid-row: 6;
    min-height: 475px;
    margin-top: 16px !important;
  }
  .mindflow-home .mf-hero-proof { grid-row: 7; }
  .mindflow-home .hero-phone-grid {
    width: 250px;
    height: 470px;
  }
  .mindflow-home .hero-phone-shell { width: 100%; }
  .mindflow-home .hero-phone-shell:nth-child(1) { width: 100%; left: 0; top: 0; }
  .mindflow-home .hero-phone-shell:nth-child(n+2) { display: none; }
  .mindflow-home .mf-hero-proof { font-size: 12px; }
  .mindflow-home #how-it-works,
  .mindflow-home #why-betterself,
  .mindflow-home #features,
  .mindflow-home #learn { padding-left: 16px !important; padding-right: 16px !important; }
  .mindflow-home #main-content h2 { font-size: 32px !important; }
  .mindflow-home .mf-step-card { min-height: 450px; }
}
@media (prefers-reduced-motion: reduce) {
  .mindflow-home .mf-tour-phone img { transition: none; }
  .mindflow-home .hero-phone-shell,
  .mindflow-home .learn-card,
  .mindflow-home .btn-primary,
  .mindflow-home .btn-sm {
    animation: none !important;
    transition: none !important;
  }
}


/* ── Hero proof row (three pills above the title) ───────────────────── */
.mindflow-home .mf-hero-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--mf-radius-pill);
  padding: 6px 16px;
  color: var(--mf-subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.mindflow-home .mf-hero-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
@media (max-width: 479px) {
  /* One pill of proof is enough on a phone; the other two claims repeat
     just below in the assurance strip. */
  .mindflow-home .mf-hero-pill:nth-child(n+2) { display: none; }
}

/* ── Features: seven cards, each with a piece of the app ────────────── */
/* Oct 2026 — the section was seven copies of one template (a teal icon
   tile, a title, grey text), five of them with nothing of the product
   in them, and Safety rules stretched beside the tall urge card into a
   block of empty navy. Now:
   - every card carries a small piece of the real app, drawn in HTML so
     it stays sharp, with the app's own words and layout;
   - the grid is laid out so no card stretches past its content: Safety
     rules and Cooling-off stack beside the urge card;
   - icon chips wear the app's role colours (IconChip.jsx): mint for
     you and help, blue for boundaries and structure, coral for spend,
     gold for the check-in;
   - a band of light crosses each card's top edge once as it arrives,
     the website's version of the app's Sheen.
   Chips, the piece-of-the-app screen, the edge light and play-once live
   in app-pieces.css, shared with the rest of the site. Motion plays once
   per card, when landing.js marks it [data-play], then rests. The resting state IS the finished state: without the
   script, or with reduced motion, nothing is armed and every card
   shows its end frame. The same lines as the app hold here: money sent
   to operators never animates (the operator bars and every figure are
   still), and nothing in the urge card celebrates. */
.mindflow-home .mf-feat-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "upload" "dash" "urge" "rules" "cool" "checkin" "progress";
}
.mindflow-home .mf-feat--upload { grid-area: upload; }
.mindflow-home .mf-feat--dash { grid-area: dash; }
.mindflow-home .mf-feat--urge { grid-area: urge; }
.mindflow-home .mf-feat--rules { grid-area: rules; }
.mindflow-home .mf-feat--cool { grid-area: cool; }
.mindflow-home .mf-feat--checkin { grid-area: checkin; }
.mindflow-home .mf-feat--progress { grid-area: progress; }
@media (min-width: 768px) {
  .mindflow-home .mf-feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "upload upload"
      "dash rules"
      "urge urge"
      "cool checkin"
      "progress progress";
  }
}
@media (min-width: 1100px) {
  .mindflow-home .mf-feat-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "upload upload upload upload upload upload upload dash dash dash dash dash"
      "urge urge urge urge urge urge urge urge rules rules rules rules"
      "urge urge urge urge urge urge urge urge cool cool cool cool"
      "checkin checkin checkin checkin checkin checkin progress progress progress progress progress progress";
  }
}

/* The card. min-height goes: a card is as tall as what it holds. */
.mindflow-home #features .mf-feat {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mindflow-home #features .mf-feat h3 {
  margin: 20px 0 8px;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25;
}
.mindflow-home .mf-feat p {
  margin: 0;
  color: var(--mf-muted);
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 479px) {
  .mindflow-home #features .mf-feat { padding: 24px !important; }
}

/* Statement upload: the words beside the review where the card is wide
   enough for a transaction name to fit on one line: full width on a
   tablet, or the 7-of-12 column from 1280px. Between, it stacks. */
.mindflow-home #features .mf-feat--upload { display: grid; gap: 24px; }
@media (min-width: 640px) and (max-width: 1099px), (min-width: 1280px) {
  .mindflow-home #features .mf-feat--upload {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
  }
  .mindflow-home .mf-feat--upload .mf-vig { margin-top: 0; }
}
.mindflow-home .mf-banks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.mindflow-home .mf-banks li {
  padding: 4px 12px;
  border-radius: var(--mf-radius-pill);
  border: 1px solid rgba(var(--mf-accent-rgb), .3);
  background: rgba(var(--mf-accent-rgb), .1);
  color: var(--mf-mint-ink);
  font-size: 12px;
  font-weight: 600;
}
.mindflow-home .mf-banks li.is-more {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: var(--mf-vig-muted);
}

/* Statement review (CsvUploadModal's preview step). */
.mindflow-home .mf-vig-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--mf-vig-faint);
  font-size: 11px;
}
.mindflow-home .mf-vig-meta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.mindflow-home .mf-review-head { font-size: 13px; font-weight: 700; }
.mindflow-home .mf-review-sub { margin: 2px 0 8px; color: var(--mf-vig-muted); font-size: 11px; }
.mindflow-home .mf-review-list { margin: 0 0 14px; padding: 0; list-style: none; }
.mindflow-home .mf-review-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mf-vig-line);
}
.mindflow-home .mf-review-list li:last-child { border-bottom: 0; }
.mindflow-home .mf-tick {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #00BFA5;
  color: #06251F;
}
.mindflow-home .mf-tick svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mindflow-home .mf-row-text { flex: 1; min-width: 0; }
.mindflow-home .mf-row-text b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mindflow-home .mf-row-text small { color: var(--mf-vig-faint); }
.mindflow-home .mf-row-amt { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Activity: the period switch and the split by operator. Still bars. */
.mindflow-home .mf-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
  padding: 3px;
  border-radius: var(--mf-radius-pill);
  border: 1px solid var(--mf-vig-line);
  background: rgba(255, 255, 255, .05);
}
.mindflow-home .mf-seg span {
  position: relative;
  padding: 6px 0;
  color: var(--mf-vig-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.mindflow-home .mf-seg .mf-seg-month { color: #06251F; }
.mindflow-home .mf-seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: var(--mf-radius-pill);
  background: linear-gradient(180deg, #8AF7E3, #00BFA5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transform: translateX(100%);
}
.mindflow-home .mf-dash-k { margin-top: 8px; color: var(--mf-vig-muted); font-size: 12px; }
.mindflow-home .mf-dash-v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.mindflow-home .mf-bets { display: grid; gap: 10px; margin-top: 14px; }
.mindflow-home .mf-bets .mf-vig-label { margin-bottom: -2px; }
.mindflow-home .mf-bet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  font-size: 12px;
}
.mindflow-home .mf-bet span { overflow: hidden; font-weight: 600; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.mindflow-home .mf-bet b { font-variant-numeric: tabular-nums; }
.mindflow-home .mf-bet i {
  grid-column: 1 / -1;
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--mf-radius-pill);
  background: rgba(255, 255, 255, .1);
}
.mindflow-home .mf-bet i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #8AF7E3, #00BFA5);
  transform: scaleX(var(--w));
  transform-origin: left;
}

/* When an urge hits: the breather beside the chip, and the two
   screenshots taking the card's height. */
.mindflow-home .mf-urge-top { display: flex; align-items: flex-start; justify-content: space-between; }
.mindflow-home .mf-breathe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--mf-vig-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mindflow-home .mf-breathe i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #00BFA5;
  background: rgba(var(--mf-accent-rgb), .12);
  transform: scale(.88);
}
.mindflow-home .mf-urge-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 20px 0 8px;
}
.mindflow-home #features .mf-urge-title h3 { margin: 0; }
.mindflow-home .mf-free {
  padding: 3px 8px;
  border-radius: var(--mf-radius-pill);
  border: 1px solid rgba(var(--mf-accent-rgb), .3);
  background: rgba(var(--mf-accent-rgb), .14);
  color: var(--mf-mint-ink);
  font-size: 11px;
  font-weight: 700;
}
.mindflow-home .mf-urge-shots {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 -32px;
}
.mindflow-home .mf-urge-shots figure { margin: 0; display: flex; flex-direction: column; }
.mindflow-home .mf-urge-shots figcaption {
  flex: none;
  margin-bottom: 10px;
  color: var(--mf-mint-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* The crop takes the card's spare height, so beside the stacked rules
   cards more of each screen shows. Where the card is taller than the
   picture, the crop carries on in the colour the capture ends on (the
   foot of the sheet, under the helplines), so it reads as a taller
   phone rather than a gap. */
.mindflow-home .mf-shot-crop {
  flex: 1 0 230px;
  background: #182435;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
.mindflow-home .mf-shot-crop img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .mindflow-home .mf-urge-shots { gap: 12px; }
  .mindflow-home .mf-urge-shots figcaption { font-size: 11px; letter-spacing: .08em; }
  .mindflow-home .mf-shot-crop { flex-basis: 180px; }
}
@media (max-width: 479px) {
  .mindflow-home .mf-urge-shots { margin-bottom: -24px; }
}

/* A rule card (SafetyRules.js): active wears a solid rim and a mint
   icon; paused wears a dashed rim at 60%. */
.mindflow-home .mf-rule {
  position: relative;
  padding: 14px;
  border-radius: 16px;
  background: #13233B;
}
.mindflow-home .mf-rule-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.mindflow-home .mf-rule-rim--off { border: 1px dashed rgba(255, 255, 255, .28); opacity: 0; }
.mindflow-home .mf-rule-rim--on {
  border: 1px solid rgba(151, 214, 207, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mindflow-home .mf-rule-body { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.mindflow-home .mf-rule-ico {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0A1A30;
  color: var(--mf-mint-ink);
}
.mindflow-home .mf-rule-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(var(--mf-accent-rgb), .18);
}
.mindflow-home .mf-rule-ico svg {
  position: relative;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mindflow-home .mf-rule-text b { display: block; margin-bottom: 2px; font-size: 14px; }
.mindflow-home .mf-rule-text small { color: var(--mf-vig-muted); font-size: 12px; line-height: 1.45; }
.mindflow-home .mf-ghost {
  display: inline-flex;
  overflow: hidden;
  padding: 7px 14px;
  border-radius: var(--mf-radius-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  font-size: 12px;
  font-weight: 600;
}
.mindflow-home .mf-ghost-stack { display: inline-grid; }
.mindflow-home .mf-ghost-stack > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mindflow-home .mf-ghost-a { transform: translateY(-140%); }
.mindflow-home .mf-ghost svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A change held by the cooldown (WeakenCooldownModal): the amber lock. */
.mindflow-home .mf-cool { display: flex; align-items: flex-start; gap: 12px; }
.mindflow-home .mf-cool-lock {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 166, 35, .12);
  color: #F5A623;
}
.mindflow-home .mf-cool-lock svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mindflow-home .mf-shackle { transform-box: fill-box; }
.mindflow-home .mf-cool-text b { display: block; margin-bottom: 2px; font-size: 14px; }
.mindflow-home .mf-cool-text small { color: var(--mf-vig-muted); font-size: 12px; line-height: 1.45; }
.mindflow-home .mf-cool-pill {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: var(--mf-radius-pill);
  border: 1px solid rgba(245, 166, 35, .3);
  background: rgba(245, 166, 35, .1);
  color: #F5B54A;
  font-size: 11px;
  font-weight: 700;
}

/* The weekly check-in is the app's one Mist hero, so it is light here
   too, with the hero's own dark inks. */
.mindflow-home .mf-vig--mist {
  border-color: rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, #E9EEF4, #DCE3EB);
  color: #0A1A30;
}
.mindflow-home .mf-vig--mist .mf-vig-label { color: #4A5668; }
.mindflow-home .mf-checkin-q {
  margin: 6px 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.mindflow-home .mf-moods { display: flex; gap: 6px; margin-bottom: 14px; }
.mindflow-home .mf-mood {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 2px 8px;
  border-radius: 14px;
  border: 1px solid rgba(10, 26, 48, .10);
  background: rgba(10, 26, 48, .05);
  color: #4A5668;
}
.mindflow-home .mf-mood::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid #00796B;
  background: linear-gradient(180deg, rgba(138, 247, 227, .22), rgba(0, 191, 165, .10));
  opacity: 0;
}
.mindflow-home .mf-mood.is-on::before { opacity: 1; }
.mindflow-home .mf-mood svg {
  position: relative;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mindflow-home .mf-mood .mf-eye { fill: currentColor; stroke: none; }
.mindflow-home .mf-mood .mf-face,
.mindflow-home .mf-mood .mf-mouth { fill: currentColor; fill-opacity: 0; }
.mindflow-home .mf-mood.is-on svg { color: #00796B; }
.mindflow-home .mf-mood.is-on .mf-face { fill-opacity: .16; }
.mindflow-home .mf-mood small {
  position: relative;
  color: #4A5668;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}
@container (max-width: 300px) {
  .mindflow-home .mf-mood small { display: none; }
}

/* Progress: two months side by side, the difference in words (lib/
   money.js differenceLine), and a savings goal. Only the goal moves. */
.mindflow-home .mf-prog { display: grid; gap: 18px; }
@container (min-width: 440px) {
  .mindflow-home .mf-prog { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
}
.mindflow-home .mf-mom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 16px;
  align-items: baseline;
  font-size: 12px;
}
.mindflow-home .mf-mom > span { color: var(--mf-vig-muted); }
.mindflow-home .mf-mom > b { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.mindflow-home .mf-mom .mf-mom-h {
  color: var(--mf-vig-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}
.mindflow-home .mf-mom .mf-mom-line {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid var(--mf-vig-line);
  color: var(--mf-vig-ink);
  font-size: 12px;
}
.mindflow-home .mf-goal {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--mf-vig-line);
  background: #13233B;
}
.mindflow-home .mf-goal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mindflow-home .mf-goal-text b { display: block; font-size: 13px; }
.mindflow-home .mf-goal-text small { color: var(--mf-vig-muted); }
.mindflow-home .mf-goal-track {
  display: block;
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--mf-radius-pill);
  background: rgba(255, 255, 255, .1);
}
.mindflow-home .mf-goal-track i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #8AF7E3, #00BFA5);
  transform: scaleX(.6);
  transform-origin: left;
}

/* Upload: the rows arrive, each ticked as it lands, then the button. */
.mindflow-home .is-armed .mf-review-list li {
  animation: mf-rise 520ms var(--mf-ease) calc(350ms + var(--i) * 150ms) both;
}
.mindflow-home .is-armed .mf-review-list .mf-tick svg {
  animation: mf-tick 420ms var(--mf-spring) calc(560ms + var(--i) * 150ms) both;
}
.mindflow-home .is-armed .mf-feat--upload .mf-vig-btn::after {
  animation: mf-sheen 900ms var(--mf-ease) 1250ms forwards;
}

/* Activity: Week to Month, then the month settles in. The figures and
   bars arrive whole; nothing counts or grows. */
.mindflow-home .is-armed .mf-seg-thumb {
  animation: mf-seg-thumb 460ms var(--mf-ease) 500ms both;
}
@keyframes mf-seg-thumb { from { transform: translateX(0); } }
.mindflow-home .is-armed .mf-seg-week {
  animation: mf-seg-off 460ms var(--mf-ease) 500ms both;
}
@keyframes mf-seg-off { from { color: #06251F; } }
.mindflow-home .is-armed .mf-seg .mf-seg-month {
  animation: mf-seg-on 460ms var(--mf-ease) 500ms both;
}
@keyframes mf-seg-on { from { color: #B4C2D0; } }
.mindflow-home .is-armed .mf-dash-sum {
  animation: mf-settle 420ms var(--mf-ease) 980ms both;
}

/* Urge: one breath at the app's pace (index.css urge-breathe), then
   still. No celebration of any kind. */
.mindflow-home .is-armed .mf-breathe i {
  animation: mf-breathe 8s ease-in-out 600ms both;
}
@keyframes mf-breathe {
  0% { transform: scale(.72); }
  45%, 55% { transform: scale(1); }
  100% { transform: scale(.88); }
}

/* Rules: paused to active. */
.mindflow-home .is-armed .mf-rule-rim--off { animation: mf-fade-out 520ms var(--mf-ease) 650ms both; }
.mindflow-home .is-armed .mf-rule-rim--on { animation: mf-fade-in 520ms var(--mf-ease) 650ms both; }
.mindflow-home .is-armed .mf-rule-body { animation: mf-rule-body 520ms var(--mf-ease) 650ms both; }
@keyframes mf-rule-body { from { opacity: .6; } }
.mindflow-home .is-armed .mf-rule-ico::before { animation: mf-fade-in 420ms var(--mf-ease) 650ms both; }
.mindflow-home .is-armed .mf-rule-ico svg { animation: mf-select 420ms var(--mf-spring) 650ms both; }
.mindflow-home .is-armed .mf-ghost-a { animation: mf-ghost-out 320ms var(--mf-ease) 700ms both; }
@keyframes mf-ghost-out { from { transform: none; } }
.mindflow-home .is-armed .mf-ghost-b { animation: mf-ghost-in 320ms var(--mf-ease) 700ms both; }
@keyframes mf-ghost-in { from { transform: translateY(140%); } }

/* Cooling-off: the lock closes, then the wait shows. */
.mindflow-home .is-armed .mf-shackle { animation: mf-shackle 480ms var(--mf-spring) 650ms both; }
@keyframes mf-shackle { from { transform: translateY(-3px); } }
.mindflow-home .is-armed .mf-cool-pill { animation: mf-settle 420ms var(--mf-ease) 1050ms both; }

/* Check-in: one answer is chosen, as the app selects a tile. */
.mindflow-home .is-armed .mf-mood.is-on { animation: mf-select 420ms var(--mf-spring) 700ms both; }
.mindflow-home .is-armed .mf-mood.is-on::before { animation: mf-fade-in 220ms var(--mf-ease) 700ms both; }
.mindflow-home .is-armed .mf-mood.is-on svg { animation: mf-mood-ink 220ms var(--mf-ease) 700ms both; }
@keyframes mf-mood-ink { from { color: #4A5668; } }
.mindflow-home .is-armed .mf-mood.is-on .mf-face { animation: mf-mood-fill 220ms var(--mf-ease) 700ms both; }
@keyframes mf-mood-fill { from { fill-opacity: 0; } }
.mindflow-home .is-armed .mf-feat--checkin .mf-vig-btn::after {
  animation: mf-sheen 900ms var(--mf-ease) 1150ms forwards;
}

/* Progress: the savings goal fills. Savings may move; deposits do not. */
.mindflow-home .is-armed .mf-goal-track i { animation: mf-goal 900ms var(--mf-ease) 600ms both; }
@keyframes mf-goal { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  /* The script never arms under reduced motion; this is the backstop. */
  .mindflow-home .mf-feat-grid *,
  .mindflow-home .mf-feat-grid *::before,
  .mindflow-home .mf-feat-grid *::after {
    animation: none !important;
  }
}

/* ── Privacy: what stays on the device and what goes ─────────────────── */
/* Oct 2026. The section said it in words and four small cards; this is
   the same thing as the app does it. The statement is read in the
   browser, the gambling rows are ticked, the rest dim where they are,
   and only the three reviewed rows arrive in the account. Shared parts
   (the screen, chips, play-once) are app-pieces.css. */
.mindflow-home .mf-flow { max-width: 960px; margin: 0 auto 40px; text-align: left; }
.mindflow-home .mf-flow-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
@media (min-width: 820px) {
  .mindflow-home .mf-flow-inner { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); gap: 8px; }
}
.mindflow-home .mf-flow .mf-vig { margin-top: 0; }
.mindflow-home .mf-flow .mf-vig-label { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.mindflow-home .mf-flow .mf-vig-label svg,
.mindflow-home .mf-flow-file svg,
.mindflow-home .mf-flow-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mindflow-home .mf-flow-file {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.mindflow-home .mf-flow-file span { color: var(--mf-vig-faint); font-weight: 500; }
.mindflow-home .mf-flow-rows { margin: 0; padding: 0; list-style: none; }
.mindflow-home .mf-flow-rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mf-vig-line);
  font-size: 12px;
}
.mindflow-home .mf-flow-rows li:last-child { border-bottom: 0; }
.mindflow-home .mf-flow-rows .mf-flow-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mindflow-home .mf-flow-rows b { font-variant-numeric: tabular-nums; }
.mindflow-home .mf-flow-gap { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, .22); }
/* Rows that are not gambling stay behind on the device, dimmed. */
.mindflow-home .mf-flow-rows .is-other { opacity: .5; }
.mindflow-home .mf-flow-note {
  margin-top: 10px;
  color: var(--mf-vig-muted);
  font-size: 11px;
}
.mindflow-home .mf-flow-account { border-color: rgba(var(--mf-accent-rgb), .28); }
.mindflow-home .mf-flow-account .mf-vig-label { color: var(--mf-mint-ink); }
/* The link between them: an arrow across on wide screens, down on narrow. */
.mindflow-home .mf-flow-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--mf-vig-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.mindflow-home .mf-flow-link span { display: inline-flex; align-items: center; gap: 5px; }
.mindflow-home .mf-flow-link i {
  position: relative;
  display: block;
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(0, 191, 165, .25), #00BFA5);
  transform-origin: top;
}
.mindflow-home .mf-flow-link i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #00BFA5;
  border-bottom: 2px solid #00BFA5;
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 820px) {
  .mindflow-home .mf-flow-link i {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 191, 165, .25), #00BFA5);
    transform-origin: left;
  }
  .mindflow-home .mf-flow-link i::after {
    left: auto;
    right: -1px;
    bottom: auto;
    top: 50%;
    border-bottom: 0;
    border-top: 2px solid #00BFA5;
    transform: translateY(-50%) rotate(45deg);
  }
}
.mindflow-home .mf-privacy-chip { margin-bottom: 16px; }

/* Play once: ticks land on the gambling rows, the others dim where they
   are, the link draws, and the three rows arrive in the account. No
   figure counts or grows; rows only arrive. */
.mindflow-home .is-armed .mf-flow-rows .is-gamb .mf-tick svg {
  animation: mf-tick 420ms var(--mf-spring) calc(450ms + var(--i) * 160ms) both;
}
.mindflow-home .is-armed .mf-flow-rows .is-other { animation: mf-flow-dim 520ms var(--mf-ease) 1000ms both; }
@keyframes mf-flow-dim { from { opacity: 1; } }
.mindflow-home .is-armed .mf-flow-link i { animation: mf-flow-draw-y 520ms var(--mf-ease) 1250ms both; }
@keyframes mf-flow-draw-y { from { transform: scaleY(0); } }
@media (min-width: 820px) {
  .mindflow-home .is-armed .mf-flow-link i { animation-name: mf-flow-draw-x; }
}
@keyframes mf-flow-draw-x { from { transform: scaleX(0); } }
.mindflow-home .is-armed .mf-flow-link span { animation: mf-fade-in 420ms var(--mf-ease) 1500ms both; }
.mindflow-home .is-armed .mf-flow-account .mf-flow-rows li {
  animation: mf-rise 480ms var(--mf-ease) calc(1650ms + var(--i) * 150ms) both;
}

/* ── Premium: three phones above the cards ──────────────────────────── */
/* Oct 2026 — three real device frames, the same template as the hero
   phones. They were squat frames over captures cropped by negative
   margins inside a fixed 500px band with a fade, so the side screens
   read as boxes and their text ran off the bottom. Now each screen has
   phone proportions (the hero's 240:519), the capture sits whole at the
   bottom where its tab bar or input belongs, and a status bar fills the
   strip the capture leaves out. Sizes inside the screen are in cqw, so
   the time, island and battery scale with the phone. The captures are
   390 x 797 points, an iPhone screen less its 47-point status bar, so
   the bar is 12cqw and nothing in the capture sits under it. */
.mindflow-home .mf-pm-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto 40px;
}
.mindflow-home .mf-pm-phone {
  position: relative;
  flex: 0 0 auto;
  margin: 64px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mindflow-home .mf-pm-phone figcaption { font-size: 13px; font-weight: 700; color: var(--mf-muted); }
.mindflow-home .mf-pm-phone.is-main { margin-top: 0; }
.mindflow-home .mf-pm-phone.is-main figcaption { color: var(--mf-accent); }
.mindflow-home .mf-pm-phone.is-main::before {
  content: "";
  position: absolute;
  inset: 60px -60px 40px;
  background: radial-gradient(ellipse, rgba(var(--mf-accent-rgb), .22), transparent 70%);
  pointer-events: none;
}
.mindflow-home .mf-pm-frame {
  position: relative;
  width: 230px;
  padding: 9px;
  background: #060E1A;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 46px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.mindflow-home .mf-pm-phone.is-main .mf-pm-frame {
  width: 270px;
  padding: 10px;
  border-color: rgba(114,233,208,.45);
  border-radius: 52px;
  box-shadow: 0 40px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
.mindflow-home .mf-pm-screen {
  position: relative;
  aspect-ratio: 240 / 519;
  overflow: hidden;
  border-radius: 37px;
  background: var(--mf-pm-top, #0A1A30);
  container-type: inline-size;
}
.mindflow-home .mf-pm-phone.is-main .mf-pm-screen { border-radius: 42px; }
.mindflow-home .mf-pm-shot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
}
.mindflow-home .mf-pm-status {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 12cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8cqw 0 9cqw;
  background: linear-gradient(var(--mf-pm-top, #0A1A30) 80%, transparent);
  color: #fff;
  font: 600 4.2cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Plus Jakarta Sans", sans-serif;
  pointer-events: none;
}
.mindflow-home .mf-pm-island {
  position: absolute;
  top: 2.6cqw;
  left: 50%;
  width: 31cqw;
  height: 9cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.mindflow-home .mf-pm-batt {
  position: relative;
  width: 6.4cqw;
  height: 3.1cqw;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: .9cqw;
}
.mindflow-home .mf-pm-batt::before {
  content: "";
  position: absolute;
  inset: 1px;
  right: 25%;
  border-radius: .5cqw;
  background: #fff;
}
.mindflow-home .mf-pm-batt::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -2.6px;
  width: 1.5px;
  height: 40%;
  border-radius: 0 1px 1px 0;
  background: rgba(255,255,255,.55);
}
/* Phones: all three in a row that swipes, the companion first, rather
   than hiding two of the three Premium screens. */
@media (max-width: 760px) {
  .mindflow-home .mf-pm-phones {
    justify-content: flex-start;
    gap: 20px;
    margin-inline: -24px;
    padding: 4px 24px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .mindflow-home .mf-pm-phones::-webkit-scrollbar { display: none; }
  .mindflow-home .mf-pm-phone { margin-top: 0; scroll-snap-align: center; }
  .mindflow-home .mf-pm-phone.is-main { order: -1; }
  .mindflow-home .mf-pm-phone.is-main::before { display: none; }
  .mindflow-home .mf-pm-frame { width: 220px; }
  .mindflow-home .mf-pm-phone.is-main .mf-pm-frame { width: 236px; }
}

/* ── Button label swap (MindFlow micro-interaction, CSS only) ───────── */
.mindflow-home .mf-swap .mf-swap-stack {
  display: inline-grid;
  overflow: hidden;
}
.mindflow-home .mf-swap .mf-swap-stack > span {
  grid-area: 1 / 1;
  transition: transform .3s ease;
}
.mindflow-home .mf-swap .mf-swap-stack > span:last-child { transform: translateY(115%); }
.mindflow-home .mf-swap:hover .mf-swap-stack > span:first-child,
.mindflow-home .mf-swap:focus-visible .mf-swap-stack > span:first-child { transform: translateY(-115%); }
.mindflow-home .mf-swap:hover .mf-swap-stack > span:last-child,
.mindflow-home .mf-swap:focus-visible .mf-swap-stack > span:last-child { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .mindflow-home .mf-swap .mf-swap-stack > span { transition: none; transform: none !important; }
  .mindflow-home .mf-swap .mf-swap-stack > span:last-child { display: none; }
}