/* Appshift design system for appshift.xyz and its app pages: white canvas, bright violet,
   pastel tones, soft glass, Google Sans with a Caveat hand for the human notes.
   Each app adds its own stylesheet on top (e.g. /mivu/styles.css). */
:root {
  --background: #ffffff;
  --foreground: #15122a;
  --muted: #6e6a86;
  --faint: #a09cb5;
  --surface: #ffffff;
  --elevated: #f7f6fb;
  --border: rgba(21, 18, 42, 0.08);
  --border-strong: rgba(21, 18, 42, 0.14);
  --accent: #6a2bff;
  --accent-deep: #5518e6;
  --accent-soft: #f1ebff;
  --accent-glow: rgba(106, 43, 255, 0.35);
  --success: #1c8f5e;
  --violet-bg: #efe6ff; --violet-fg: #6a2bff;
  --peach-bg: #ffe9dc;  --peach-fg: #e2601c;
  --mint-bg: #dcf7ea;   --mint-fg: #159463;
  --sky-bg: #dcefff;    --sky-fg: #1b79e0;
  --lemon-bg: #fff4c7;  --lemon-fg: #b07a00;
  --rose-bg: #ffe2ef;   --rose-fg: #e0257a;
  --ink: #15122a;
  --shadow-soft: 0 1px 2px rgba(21, 18, 42, 0.04), 0 12px 40px -12px rgba(21, 18, 42, 0.12);
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(21, 18, 42, 0.05),
    0 24px 60px -20px rgba(21, 18, 42, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.85);
  --font: 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath opacity='.5' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z'/%3E%3Cpath d='M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z'/%3E%3C/svg%3E");
  --ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath opacity='.5' d='M11.2929 8H5.5703C5.04189 8 4.79869 8.79094 5.1999 9.20467L7.60648 11.6864L11.2929 8Z'/%3E%3Cpath d='M8.30273 12.4044L11.6296 15.8351C11.8428 16.0549 12.1573 16.0549 12.3704 15.8351L18.8001 9.20467C19.2013 8.79094 18.9581 8 18.4297 8H12.7071L8.30273 12.4044Z'/%3E%3C/svg%3E");
  --site: 1120px;
  --content: 760px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background: #0d0b19; --foreground: #f1eefb; --muted: #a7a2c3; --faint: #6f6a8c;
    --surface: #16132a; --elevated: #1e1a35;
    --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15);
    --accent: #8f5cff; --accent-deep: #7a45f5; --accent-soft: rgba(143, 92, 255, 0.16);
    --accent-glow: rgba(143, 92, 255, 0.45); --success: #3ccf8e;
    --violet-bg: rgba(143, 92, 255, 0.2); --violet-fg: #bb9fff;
    --peach-bg: rgba(226, 96, 28, 0.2); --peach-fg: #ff9d6a;
    --mint-bg: rgba(21, 148, 99, 0.2); --mint-fg: #52d9a4;
    --sky-bg: rgba(27, 121, 224, 0.22); --sky-fg: #74b5ff;
    --lemon-bg: rgba(176, 122, 0, 0.22); --lemon-fg: #f2c452;
    --rose-bg: rgba(224, 37, 122, 0.2); --rose-fg: #ff7fb6;
    --ink: #1c1834;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 40px -12px rgba(0, 0, 0, 0.55);
    --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.3),
      0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --glass-bg: rgba(18, 15, 33, 0.62); --glass-border: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
  }
}
/* Dark chosen in the footer, whatever the system says */
:root[data-theme='dark'] {
  --background: #0d0b19; --foreground: #f1eefb; --muted: #a7a2c3; --faint: #6f6a8c;
  --surface: #16132a; --elevated: #1e1a35;
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15);
  --accent: #8f5cff; --accent-deep: #7a45f5; --accent-soft: rgba(143, 92, 255, 0.16);
  --accent-glow: rgba(143, 92, 255, 0.45); --success: #3ccf8e;
  --violet-bg: rgba(143, 92, 255, 0.2); --violet-fg: #bb9fff;
  --peach-bg: rgba(226, 96, 28, 0.2); --peach-fg: #ff9d6a;
  --mint-bg: rgba(21, 148, 99, 0.2); --mint-fg: #52d9a4;
  --sky-bg: rgba(27, 121, 224, 0.22); --sky-fg: #74b5ff;
  --lemon-bg: rgba(176, 122, 0, 0.22); --lemon-fg: #f2c452;
  --rose-bg: rgba(224, 37, 122, 0.2); --rose-fg: #ff7fb6;
  --ink: #1c1834;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 40px -12px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.3),
    0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --glass-bg: rgba(18, 15, 33, 0.62); --glass-border: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  padding-inline: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.08; margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--site); margin: 0 auto; }
.muted { color: var(--muted); }
.hand { font-family: var(--hand); font-weight: 600; color: var(--accent); }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.accent { color: var(--accent); }

/* Glass + pill */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-float);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--foreground);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; font: 600 15px/1 var(--font);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:active { transform: scale(0.99); }
.button.primary {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #7d47ff 0%, var(--accent) 55%, var(--accent-deep) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 10px 30px -8px var(--accent-glow);
}
.button.primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.button.primary:hover { transform: translateY(-1px); }
.button.primary:hover::after { transform: translateX(120%); }
.button.secondary {
  color: var(--foreground); background: var(--surface); border-color: var(--border-strong);
}
.button.small { padding: 10px 16px; font-size: 14px; }

/* Nav: a compact pill that hugs its content; once the hero CTA scrolls away it firms up
   and the CTA slides in from the right (same behaviour as the Appshift site). */
.nav-wrap { position: sticky; top: 14px; z-index: 50; display: flex; justify-content: center; }
.nav {
  display: flex; align-items: center; gap: 18px; width: min(760px, 100%);
  padding: 8px 8px 8px 18px; border-radius: 999px;
  transition: box-shadow 0.4s ease, background 0.4s ease;
}
.nav.is-expanded {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 10px rgba(21, 18, 42, 0.05),
    0 30px 70px -24px rgba(21, 18, 42, 0.28);
}
@media (prefers-color-scheme: dark) {
  /* No white top highlight on dark: it read as a stray line when the CTA slid in. */
  :root:not([data-theme='light']) .nav.is-expanded {
    background: rgba(22, 19, 42, 0.85);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 10px rgba(0, 0, 0, 0.3),
      0 30px 70px -24px rgba(0, 0, 0, 0.7);
  }
}
/* Dark chosen in the footer, whatever the system says */
/* No white top highlight on dark: it read as a stray line when the CTA slid in. */
:root[data-theme='dark'] .nav.is-expanded {
  background: rgba(22, 19, 42, 0.85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 10px rgba(0, 0, 0, 0.3),
    0 30px 70px -24px rgba(0, 0, 0, 0.7);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.nav-links a:hover { color: var(--foreground); background: rgba(21, 18, 42, 0.05); }
.nav-cta-slot { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 0.55s cubic-bezier(0.32, 0.72, 0.1, 1); }
.nav-cta-slot > div { min-width: 0; clip-path: inset(-40px 0 -40px -40px); transition: clip-path 0s linear 0s; }
.is-expanded .nav-cta-slot { grid-template-columns: 1fr; }
.is-expanded .nav-cta-slot > div { clip-path: inset(-40px -40px -40px -40px); transition-delay: 0.55s; }
.nav-cta { margin-left: 4px; white-space: nowrap; opacity: 0; transform: translateX(14px) scale(0.92); transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.32, 0.72, 0.1, 1); }
.is-expanded .nav-cta { opacity: 1; transform: none; transition-delay: 0.08s; }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 640px) { .nav-wrap { top: 10px; } .nav { padding: 6px 6px 6px 14px; gap: 8px; } }

/* Hero */
.hero {
  position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px;
  align-items: center; padding: 72px 0 56px;
}
.hero-glow {
  position: absolute; inset: -10% -6% auto; height: 560px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(380px 260px at 70% 30%, rgba(106, 43, 255, 0.22), transparent 70%),
    radial-gradient(340px 240px at 30% 60%, rgba(255, 137, 92, 0.18), transparent 70%),
    radial-gradient(360px 240px at 80% 70%, rgba(93, 172, 255, 0.2), transparent 70%);
  filter: blur(18px); animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3%, 4%, 0) scale(1.06); } }
.hero h1 { font-size: clamp(42px, 6vw, 68px); margin: 18px 0 18px; }
.hero .lead { font-size: 19px; color: var(--muted); max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.hero-note { font-family: var(--hand); font-size: 24px; color: var(--accent); transform: rotate(-3deg); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 28px 0 0; color: var(--muted); font-size: 14px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust li::before, .feature-copy li::before { content: ''; flex: none; width: 18px; height: 18px; background: var(--success); -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 48px; } }

/* Phone: the product loop, animated with CSS only */
.phone-stage { position: relative; display: flex; justify-content: center; }
.phone {
  position: relative; width: min(300px, 78vw); border-radius: 46px;
  background: #0b0a12; padding: 10px; box-shadow: var(--shadow-float);
}
/* Screen matches the recording's proportions (480×978) so the video fills it exactly. */
.screen { position: relative; aspect-ratio: 480 / 978; border-radius: 37px; overflow: hidden; background: #f3f1f8; }
.frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; opacity: 0; animation: 14s infinite; }
/* 14 s loop: locked 3 s → practice 8 s (the real recording) → unlocked 3 s */
.frame:nth-child(1) { animation-name: f1; }
.frame:nth-child(2) { animation-name: f2; }
.frame:nth-child(3) { animation-name: f3; }
@keyframes f1 { 0%, 19% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes f2 { 0%, 19% { opacity: 0; } 22%, 76% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes f3 { 0%, 76% { opacity: 0; } 79%, 97% { opacity: 1; } 100% { opacity: 0; } }
.f-lock, .f-open { padding: 0; }
.f-lock { background: #1d1640; }
.f-move { background: #dcf7ea; }
.ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#159463 var(--p, 0%), rgba(21, 148, 99, 0.15) 0); animation: fill 3s linear infinite; }
.ring::after { content: '5:00'; width: 124px; height: 124px; border-radius: 50%; background: #dcf7ea; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #15122a; }
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes fill { to { --p: 100%; } }
.f-open { background: #ffe9dc; }
.float-tag { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; }
.float-tag .i { font-size: 18px; color: var(--accent); }
.float-tag .i.flame { color: #ff5a1f; --i2: #ffc247; --i2o: 1; }
.float-tag.t1 { left: 0; top: 18%; }
.float-tag.t2 { right: 0; bottom: 20%; }
@media (max-width: 520px) { .float-tag { display: none; } }

/* Sections */
section { padding: 72px 0; }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 48px); margin: 12px 0 14px; }
.section-head p { color: var(--muted); font-size: 18px; }
.center { text-align: center; margin-inline: auto; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.step-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--surface); margin-bottom: 8px; }
.tone-violet .step-ic { color: var(--violet-fg); } .tone-mint .step-ic { color: var(--mint-fg); } .tone-peach .step-ic { color: var(--peach-fg); }
.step .num { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.step h3 { font-size: 24px; }
.step p { color: var(--muted); }
.step .hand { font-size: 22px; margin-top: auto; }
.tone-violet { background: var(--violet-bg); } .tone-violet .num { color: var(--violet-fg); }
.tone-mint { background: var(--mint-bg); } .tone-mint .num { color: var(--mint-fg); }
.tone-peach { background: var(--peach-bg); } .tone-peach .num { color: var(--peach-fg); }
.tone-sky { background: var(--sky-bg); } .tone-sky .num { color: var(--sky-fg); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.research { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fact { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 14px 22px 14px 14px; box-shadow: var(--shadow-soft); }
.fact img { width: 132px; height: 132px; object-fit: cover; border-radius: 20px; }
.fact h3 { font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.fact .src { font-size: 13px; color: var(--faint); }
.fact .src a { color: var(--faint); }
@media (max-width: 860px) { .research { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .fact { grid-template-columns: 1fr; } .fact img { width: 100%; height: 180px; } }

.promise { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--ink); color: #fff; border-radius: 40px; padding: 56px; }
.promise h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); }
.promise ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.promise li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; color: rgba(255, 255, 255, 0.85); }
.promise li i { flex: none; width: 34px; height: 34px; border-radius: 11px; background: rgba(143, 92, 255, 0.2); color: #bb9fff; display: grid; place-items: center; font-size: 20px; }
@media (max-width: 860px) { .promise { grid-template-columns: 1fr; padding: 32px 24px; } }

.faq { max-width: var(--content); margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: ''; flex: none; width: 22px; height: 22px; background: var(--accent); -webkit-mask: var(--ic-chevron) center / contain no-repeat; mask: var(--ic-chevron) center / contain no-repeat; transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq p { color: var(--muted); margin-top: 10px; }

.final { position: relative; text-align: center; padding: 96px 0; }
.final h2 { font-size: clamp(36px, 5vw, 56px); margin: 16px auto 18px; max-width: 760px; }
.final p { color: var(--muted); font-size: 18px; margin-bottom: 28px; }

/* Footer */
footer.site { border-top: 1px solid var(--border); padding: 36px 0 48px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--foreground); }

/* Legal pages */
.legal { max-width: var(--content); margin: 0 auto; padding: 56px 0 24px; }
.legal h1 { font-size: clamp(38px, 5vw, 52px); margin: 14px 0 8px; }
.legal .meta { color: var(--muted); font-size: 15px; margin-bottom: 32px; }
.legal h2 { font-size: 24px; margin: 44px 0 10px; }
.legal p, .legal li { color: var(--foreground); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 8px 0; }
.legal .card { background: var(--accent-soft); border-radius: 24px; padding: 22px 24px; margin: 24px 0; }
.legal .table { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 14px 0; }
.legal th, .legal td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal th { color: var(--muted); font-weight: 600; }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .frame:first-child { opacity: 1; }
}

/* Feature rows with phone mockups */
.features { display: grid; gap: 28px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 36px; border-radius: 40px; }
.feature:nth-child(even) .feature-copy { order: 2; }
.feature-copy { display: grid; gap: 14px; padding-inline: 36px; }
.feature-copy h3 { font-size: clamp(28px, 3.4vw, 38px); }
.feature-copy p { color: var(--muted); font-size: 18px; }
.feature-copy ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.feature-copy li { display: flex; gap: 10px; font-size: 16px; }
.feature-copy li { align-items: center; }
.feature-copy li::before { width: 20px; height: 20px; }
.mock { display: flex; justify-content: center; }
.mock .phone { width: min(250px, 70vw); }
.mock .screen { position: relative; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0a12; }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
  .feature:nth-child(even) .feature-copy { order: 0; }
  .feature-copy { padding-inline: 0; }
}

.practices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.practice { border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.practice img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.practice div { padding: 18px 22px 22px; display: grid; gap: 6px; }
.practice h3 { font-size: 22px; }
.practice p { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .practices { grid-template-columns: 1fr; } }

.problem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { background: var(--elevated); border-radius: 28px; padding: 28px; display: grid; gap: 8px; }
.stat strong { font-size: clamp(38px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.stat p { color: var(--muted); font-size: 15px; }
.stat small { color: var(--faint); font-size: 12px; }
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; } }

/* Mivu brand with a quiet "by Appshift" link to the parent site */
.brand-home { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); text-decoration: none; }
.brand .by { font-weight: 500; font-size: 13px; color: var(--faint); text-decoration: none; }
.brand .by:hover { color: var(--muted); }
.brand-shift { color: var(--accent); }

/* Hero practice frame: the real session recording, shown whole (never zoomed) */
.f-move { padding: 0; background: #0b0a12; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0a12; }

/* Solar Bold Duotone icons (same set as the app), from the inline sprite. Size = font-size.
   The secondary layer follows --i2 / --i2o (colour / opacity), like secondaryColor in the app. */
.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.15em; }

/* Longer legal documents: contents list, numbered sections, sub-headings */
.legal .lede { font-size: 18px; color: var(--muted); margin-bottom: 24px; }
.legal .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.legal .toc a { padding: 7px 12px; border-radius: 999px; background: var(--elevated); color: var(--foreground); font-size: 14px; text-decoration: none; }
.legal .toc a:hover { background: var(--accent-soft); color: var(--accent); }
.legal h2 { scroll-margin-top: 96px; }
.legal h2 .num { display: block; margin-bottom: 6px; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.legal h3 { font-size: 18px; margin: 28px 0 8px; }
.legal hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.legal code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--elevated); }
.legal a { color: var(--accent); }

/* Appshift wordmark, identical to playbook.appshift.xyz */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 10px; color: #fff;
  background: linear-gradient(160deg, #8c5bff, var(--accent) 60%, var(--accent-deep));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 14px -6px var(--accent-glow);
}
.brand:has(.brand-mark) { gap: 9px; font-weight: 600; font-size: 16px; }

/* Shared by every page: tones, glass, icon buttons, centred section heads */
:root {
  --highlight: rgba(255, 255, 255, 0.9);
  --highlight-strong: rgba(255, 255, 255, 0.85);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --shadow-ink: 21, 18, 42;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --highlight: rgba(255, 255, 255, 0.06);
    --highlight-strong: rgba(255, 255, 255, 0.12);
    --glass-strong: rgba(22, 19, 42, 0.85);
    --shadow-ink: 0, 0, 0;
  }
}
/* Dark chosen in the footer, whatever the system says */
:root[data-theme='dark'] {
  --highlight: rgba(255, 255, 255, 0.06);
  --highlight-strong: rgba(255, 255, 255, 0.12);
  --glass-strong: rgba(22, 19, 42, 0.85);
  --shadow-ink: 0, 0, 0;
}

.tone-violet { --tone-bg: var(--violet-bg); --tone-fg: var(--violet-fg); }
.tone-peach { --tone-bg: var(--peach-bg); --tone-fg: var(--peach-fg); }
.tone-mint { --tone-bg: var(--mint-bg); --tone-fg: var(--mint-fg); }
.tone-sky { --tone-bg: var(--sky-bg); --tone-fg: var(--sky-fg); }
.tone-rose { --tone-bg: var(--rose-bg); --tone-fg: var(--rose-fg); }
.button .i { font-size: 18px; }
.button.ghost { background: transparent; color: var(--muted); border-color: transparent; }
.button.ghost:hover { color: var(--foreground); }
.section-head.center { max-width: 1040px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center h2 { text-wrap: balance; }
.section-head.center p { max-width: 760px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.lead, .final p, .step p, .feature-copy p, .stat p, .promise h2 { text-wrap: balance; }
.brand .by { white-space: nowrap; }
@media (max-width: 480px) { .nav.is-expanded .brand .by { display: none; } }

/* Support pages */
.support-card { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 36px 28px; border-radius: 28px; background: var(--accent-soft); margin: 28px 0; }
.support-card h2 { margin: 0 !important; }
.support-card p { color: var(--muted); max-width: 460px; }
.support-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 28px; }
.support-meta div { padding: 16px 18px; border-radius: 20px; background: var(--elevated); }
.support-meta small { display: block; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.support-meta b { font-weight: 600; }
@media (max-width: 560px) { .support-meta { grid-template-columns: 1fr; } }
.legal .faq { margin-top: 12px; }
.legal .faq summary { font-size: 17px; }

/* Language picker: one nav button (flag + code) that opens a small menu. Styled like the
   nav links of the playbook (transparent pill, muted text). */
.lang { position: relative; margin-left: 4px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 8px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: 500 15px/1 var(--font); cursor: pointer; transition: background 0.2s, color 0.2s;
}
.lang-btn:hover, .lang-btn[aria-expanded='true'] { color: var(--foreground); background: rgba(21, 18, 42, 0.05); }
.lang-btn::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-chevron) center / contain no-repeat; mask: var(--ic-chevron) center / contain no-repeat; transition: transform 0.2s; }
.lang-btn[aria-expanded='true']::after { transform: rotate(180deg); }
.lang .flag { font-size: 17px; line-height: 1; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 180px; padding: 6px; border-radius: 18px;
  display: grid; gap: 2px; z-index: 60; box-shadow: var(--shadow-float);
  background: var(--surface); border: 1px solid var(--border); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lang-menu[hidden] { display: none; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--foreground); text-decoration: none; font-size: 15px; font-weight: 500; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(21, 18, 42, 0.05); }
.lang-menu a[aria-current='page'] { font-weight: 600; }
.lang-menu a[aria-current='page']::after { content: ''; margin-left: auto; width: 18px; height: 18px; background: var(--accent); -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
@media (max-width: 860px) { .lang { margin-left: auto; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .lang-btn:hover, :root:not([data-theme='light']) .lang-btn[aria-expanded='true'], :root:not([data-theme='light']) .lang-menu a:hover, :root:not([data-theme='light']) .lang-menu a:focus-visible { background: rgba(255, 255, 255, 0.07); }
}
/* Dark chosen in the footer, whatever the system says */
:root[data-theme='dark'] .lang-btn:hover, :root[data-theme='dark'] .lang-btn[aria-expanded='true'], :root[data-theme='dark'] .lang-menu a:hover, :root[data-theme='dark'] .lang-menu a:focus-visible { background: rgba(255, 255, 255, 0.07); }


/* Footer controls (like the playbook): language picker + appearance toggle, rendered by /site.js */
.footer-end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.footer-end .lang { margin-left: 0; }
.footer-end .lang-btn { font-size: 14px; padding: 7px 9px 7px 11px; }
.footer-end .lang-menu { top: auto; bottom: calc(100% + 10px); }
.theme-toggle { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: rgba(21, 18, 42, 0.05); }
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; overflow: hidden;
  transition: width 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), margin 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.theme-toggle button:not(.is-active) { opacity: 0; pointer-events: none; width: 0; margin: 0; transform: scale(0.6); }
.theme-toggle:hover button:not(.is-active), .theme-toggle:has(:focus-visible) button:not(.is-active) { opacity: 1; pointer-events: auto; width: 28px; margin: 0 1px; transform: none; }
.theme-toggle button:hover { color: var(--foreground); }
.theme-toggle button.is-active { color: var(--accent-deep); background: var(--surface); box-shadow: 0 1px 2px rgba(21, 18, 42, 0.12); }
@media (hover: none) { .theme-toggle button:not(.is-active) { opacity: 1; pointer-events: auto; width: 28px; margin: 0 1px; transform: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle { background: rgba(255, 255, 255, 0.07); }
  :root:not([data-theme='light']) .theme-toggle button.is-active { color: var(--accent); }
}
:root[data-theme='dark'] .theme-toggle { background: rgba(255, 255, 255, 0.07); }
:root[data-theme='dark'] .theme-toggle button.is-active { color: var(--accent); }

/* App icon above the final call to action (Lunami, Mivu) */
.final-icon { position: relative; display: block; width: 96px; height: 96px; margin: 0 auto; border-radius: 22px; }

/* Official "Download on the App Store" badge: Apple artwork, unmodified, at least 40px tall. */
.appstore-badge { display: inline-flex; line-height: 0; border-radius: 9px; transition: transform 0.2s ease, opacity 0.2s ease; }
.appstore-badge img { display: block; }
.appstore-badge:hover { transform: translateY(-1px); }
.appstore-badge:active { opacity: 0.85; }
.appstore-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }