/* MindForm Labs. System fonts, no images but a handful of small WebP files, no libraries.
   Colour pairs rotate down the page: royal blue / light cream, wine / sand, orange / milk,
   cherry / alabaster. */
:root {
  --ink: #1d1d1f;
  --ink2: #3f3f44;
  --blue: #1f3fc4;   --cream: #fbf5e6;
  --wine: #6c1330;   --sand: #f0e5d2;
  --orange: #c9460c; --milk: #fffdf8;
  --cherry: #c4112f; --alabaster: #f6f4ee;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav: 48px;
  --pad: clamp(20px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--alabaster); }
body { margin: 0; font: 400 1.0625rem/1.5 var(--font); color: var(--ink); background: var(--alabaster); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 50%; top: 0; z-index: 100; transform: translate(-50%, -200%); background: #fff; color: #000; padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { transform: translate(-50%, 12px); }
section[id] { scroll-margin-top: var(--nav); }

/* ---------- navigation ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--nav); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); background: #1d1d1f; color: #f5f5f7; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.nav nav { display: flex; gap: clamp(16px, 3vw, 34px); }
.nav nav a { text-decoration: none; font-size: .875rem; color: #d2d2d7; padding: 14px 2px; transition: color .2s; }
.nav nav a:hover { color: #fff; }

/* ---------- buttons and links ---------- */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 600 1.0625rem/1 var(--font); text-decoration: none; transition: transform .25s, opacity .25s; }
.btn:hover { transform: scale(1.03); }
.btn:active { opacity: .85; }
.tlink { font-weight: 600; text-decoration: none; }
.tlink::after { content: "\203A"; display: inline-block; margin-left: .35em; transition: transform .25s; }
.tlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.tlink:hover::after { transform: translateX(3px); }

/* ---------- the phone (pure CSS) ---------- */
.phone { position: relative; height: var(--ph, 560px); aspect-ratio: 9 / 18.6; background: #111113; border-radius: 13% / 6.3%; padding: 2.2%; box-shadow: 0 0 0 1px #3a3a3e inset, 0 40px 80px -24px rgba(0, 0, 0, .45); }
.phone::before { content: ""; position: absolute; right: -1.2%; top: 21%; width: 1.2%; height: 9%; background: #2a2a2e; border-radius: 2px; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 11% / 5.3%; overflow: hidden; background: #fffaf0; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- hero: royal blue on light cream ---------- */
.hero { --btn-bg: var(--blue); --btn-fg: var(--cream); position: relative; height: 100vh; height: 100svh; min-height: 600px; padding-top: calc(var(--nav) + clamp(36px, 9vh, 110px)); background: var(--cream); color: var(--blue); text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 11vw, 9rem); line-height: .95; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; padding: 0 var(--pad); }
.lede { margin: clamp(14px, 2.4vh, 24px) 0 clamp(20px, 3.4vh, 34px); padding: 0 var(--pad); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hero .tlink { color: var(--blue); }
.hero-device { --ph: clamp(460px, 74vh, 760px); margin-top: clamp(30px, 6vh, 70px); transform: translateY(calc(var(--p, 0) * -9%)); will-change: transform; }

/* ---------- apps: a sticky phone, the colour changes chapter by chapter ---------- */
.apps { position: relative; background: var(--wine); }
.stage { position: relative; color: var(--sand); background: var(--wine); }
.bg { display: none; }
.stage-in { position: relative; display: grid; grid-template-columns: 1fr; }
.panels { display: grid; }
.panel { text-align: center; padding: clamp(56px, 12vh, 120px) var(--pad); }
.p0 { --fg: var(--sand); --bg: var(--wine); background: var(--wine); color: var(--sand); }
.p1 { --fg: var(--milk); --bg: var(--orange); background: var(--orange); color: var(--milk); }
.p2 { --fg: var(--alabaster); --bg: var(--cherry); background: var(--cherry); color: var(--alabaster); }
.panel h3 { font-size: clamp(2.75rem, 9vw, 6rem); line-height: .98; font-weight: 700; letter-spacing: -.045em; }
.panel .desc { max-width: 22em; margin: clamp(14px, 2.4vh, 22px) auto 0; font-size: clamp(1.1875rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
.panel .state { margin-top: 14px; font-size: 1.0625rem; opacity: .85; }
.panel .cta { margin-top: clamp(20px, 3.4vh, 32px); --btn-bg: var(--fg); --btn-fg: var(--bg); }
.panel .tlink { color: var(--fg); }
.device { display: none; }
.dots { display: none; }
.steps { display: none; }

/* with script: the stage pins and its parts crossfade (opacity and transform only) */
.js .apps { background: var(--wine); }
.js .stage { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); overflow: hidden; background: transparent; }
.js .stage[data-step="0"] { color: var(--sand); }
.js .stage[data-step="1"] { color: var(--milk); }
.js .stage[data-step="2"] { color: var(--alabaster); }
.js .bg { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.js .b0 { background: var(--wine); opacity: 1; }
.js .b1 { background: var(--orange); }
.js .b2 { background: var(--cherry); }
.js .stage[data-step="1"] .b1, .js .stage[data-step="2"] .b1, .js .stage[data-step="2"] .b2 { opacity: 1; }
.js .stage-in { max-width: 1280px; margin: 0 auto; height: 100%; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 3vw; padding: 0 var(--pad); }
.js .panel { grid-area: 1 / 1; align-self: center; background: transparent; padding: 0; text-align: left; opacity: 0; transform: translateY(26px); pointer-events: none; visibility: hidden; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .1, 1), visibility 0s .5s; }
.js .panel.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: .12s, .12s, 0s; }
.js .panel .desc { margin-left: 0; margin-right: 0; }
.js .panel .cta { justify-content: flex-start; }
.js .device { display: flex; align-items: center; justify-content: center; height: 100%; }
.js .device .phone { --ph: min(72svh, 640px); height: min(calc(100svh - var(--nav) - 80px), 640px); transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.js .stage[data-step="1"] .device .phone { transform: rotate(2.2deg) translateY(-1%); }
.js .stage[data-step="2"] .device .phone { transform: rotate(-2.2deg) translateY(1%); }
.shots { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.shots.on { opacity: 1; }
.shots img:not(:first-child) { opacity: 0; }
.shots.s0.on img:nth-child(1) { animation: shot1 9s infinite; }
.shots.s0.on img:nth-child(2) { animation: shot2 9s infinite; }
.shots.s0.on img:nth-child(3) { animation: shot3 9s infinite; }
@keyframes shot1 { 0%, 28% { opacity: 1; } 36%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes shot2 { 0%, 28% { opacity: 0; } 36%, 61% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes shot3 { 0%, 61% { opacity: 0; } 69%, 92% { opacity: 1; } 100% { opacity: 0; } }
.js .dots { display: flex; gap: 10px; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }
.dots button { color: inherit; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: currentColor; opacity: .4; cursor: pointer; transition: width .35s, opacity .35s; }
.dots button[aria-current="true"] { width: 30px; opacity: 1; }
.js .steps { display: block; margin-top: calc(var(--nav) - 100vh); margin-top: calc(var(--nav) - 100svh); }
.step { height: 100vh; height: 100svh; }

/* ---------- approach: royal blue on light cream again ---------- */
.approach { background: var(--cream); color: var(--ink); }
.wrap { max-width: 1120px; margin: 0 auto; padding: clamp(80px, 15vh, 170px) var(--pad); }
.approach h2 { color: var(--blue); font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1; font-weight: 700; letter-spacing: -.045em; max-width: 12em; text-wrap: balance; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 8vh, 88px); }
.cols h3 { font-size: 1.375rem; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--blue); }
.cols p { margin-top: 10px; font-size: 1.125rem; line-height: 1.45; color: var(--ink2); }

/* ---------- contact: wine on light sand ---------- */
.contact { background: var(--sand); color: var(--ink); }
.contact h2 { color: var(--wine); font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.contact .lead { margin-top: clamp(14px, 2.4vh, 22px); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.mail { display: inline-block; margin-top: clamp(26px, 5vh, 44px); font-size: clamp(1.375rem, 5vw, 3.25rem); line-height: 1.1; font-weight: 700; letter-spacing: -.035em; color: var(--wine); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; word-break: break-word; }
.mail:hover { color: var(--cherry); }
.contact .more { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: clamp(28px, 5vh, 48px); color: var(--wine); }

/* ---------- footer ---------- */
.foot { background: var(--alabaster); color: var(--ink2); padding: 28px var(--pad) calc(28px + env(safe-area-inset-bottom)); font-size: .8125rem; line-height: 1.5; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; }

/* ---------- entrance (cheap: opacity and transform, once) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .1, 1); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.d1 { --d: 80ms; } .d2 { --d: 150ms; } .d3 { --d: 220ms; } .d4 { --d: 290ms; }

/* ---------- phones and small screens ---------- */
@media (max-width: 899px) {
  .js .stage-in { grid-template-columns: 1fr; grid-template-rows: minmax(0, 46%) minmax(0, 54%); gap: 0; padding: 0 var(--pad); align-items: stretch; }
  .js .device { grid-row: 1; align-items: flex-end; padding: 16px 0 8px; }
  .js .device .phone { height: min(100%, 430px); }
  .js .panels { grid-row: 2; align-items: start; padding-top: 14px; }
  .js .panel { text-align: center; align-self: start; }
  .js .panel .desc { margin-left: auto; margin-right: auto; }
  .js .panel .cta { justify-content: center; }
  .panel h3 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .js .panel .desc { font-size: 1.125rem; margin-top: 8px; }
  .js .panel .state { margin-top: 8px; font-size: 1rem; }
  .js .panel .cta { margin-top: 14px; }
  .js .dots { bottom: 14px; }
  .cols { grid-template-columns: 1fr; gap: 30px; }
  .hero-device { --ph: clamp(420px, 60vh, 640px); }
  .hero h1 { font-size: clamp(2.75rem, 15vw, 5.5rem); }
  .logo span { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .js .panel .state { display: none; }
  .js .device .phone { height: min(100%, 300px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero { height: auto; min-height: 0; padding-bottom: 40px; }
  .hero-device { display: none; }
}

@media (max-width: 899px) { .js .panels { padding-bottom: 36px; } }
@media (min-width: 600px) and (max-width: 899px) {
  .js .stage-in { grid-template-rows: auto auto; align-content: center; gap: 28px; }
  .js .device { height: auto; padding: 0; }
  .js .device .phone { height: min(56svh, 580px); }
  .js .panels { padding-bottom: 28px; }
  .panel h3 { font-size: clamp(3rem, 9vw, 4.75rem); }
  .js .panel .desc { font-size: 1.5rem; max-width: 24em; }
  .js .panel .state { font-size: 1.125rem; }
}
@media (max-width: 359px) {
  .btn { padding: 0 22px; }
  .cta { gap: 12px 18px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .js .stage-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; gap: 3vw; align-items: center; }
  .js .device { grid-row: auto; align-items: center; padding: 0; }
  .js .device .phone { height: calc(100svh - var(--nav) - 36px); }
  .js .panels { grid-row: auto; align-items: center; padding: 0; }
  .js .panel { text-align: left; align-self: center; }
  .js .panel .desc { margin-left: 0; margin-right: 0; font-size: 1.0625rem; }
  .js .panel .cta { justify-content: flex-start; margin-top: 10px; }
  .js .panel .state { display: block; font-size: .9375rem; }
  .panel h3 { font-size: clamp(2rem, 7vw, 3rem); }
  .js .dots { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .panel, .js .bg, .shots, .js .device .phone, .btn, .dots button { transition: none; }
  .js .reveal { opacity: 1; transform: none; }
  .shots.s0.on img:nth-child(n) { animation: none; }
  .shots.s0.on img:nth-child(1) { opacity: 1; }
  .hero-device { transform: none !important; will-change: auto; }
}
@media print { .nav, .dots, .steps { display: none; } }