/* Mimi marketing site.
   One hand-written stylesheet, no build step — same convention as apps/desktop/ui.
   Source of truth for the design is the "The AI for adopting AI" artboard. */

:root {
  --bone: #F4F2EC;
  --paper: #FFFDF8;
  --ink: #17191A;
  --muted: #5C6260;
  --link: #3B4340;
  --rule: #DDD8CC;
  --rule-soft: #EDE9DF;
  --accent: #2F5D50;
  --on-accent-muted: #BBCEC5;
  --signal: #C4622D;
  --signal-text: #A9501F;
  --dot-grey: #A8A294;
  --dot-blue: #2F5F8A;
  --fill: #E6E2D6;        /* selected / occupied bone */
  --rule-faint: #F1ECE1;
  --white: #FFFFFF;
  --ring: color-mix(in srgb, var(--accent) 20%, transparent);
  --radius: 8px;
  --display: Fraunces, Georgia, serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 64px;
  --section: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* footer sits at the bottom even on short pages */
  font-family: var(--body);
  font-size: 16px;
  background: var(--bone);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }

h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}
h3 { margin: 0; font-weight: 600; }

p { margin: 0; }

a { color: var(--link); }
a:where(:hover) { color: var(--ink); }   /* zero specificity: any class colour wins */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Pine on near-black is almost invisible, so the dark band gets a bone ring. */
.band-dark :focus-visible { outline-color: var(--bone); }

/* Every link in the chrome is a comfortable tap target. */
.site-header a, .site-footer a, .skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--signal);
}

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

/* Screen-reader-only text that still describes the hero animation. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 16px; }

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--paper);
}
.btn:hover { filter: brightness(1.12); }

.btn-lg { font-size: 17px; padding: 16px 28px; }

.btn-light { background: var(--bone); color: var(--ink); }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid #C9C3B4;
}
.btn-quiet:hover { background: rgba(23, 25, 26, 0.04); }

/* ---- Header ----------------------------------------------------------- */

.site-header {
  height: 72px;
  display: flex;
  align-items: center;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 36px;
}

.wordmark {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 15px;
  text-decoration: none;
}

/* ---- Sections --------------------------------------------------------- */

.band { padding: var(--section) 0; }
.band-paper {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band-accent { background: var(--accent); }
.band-dark { background: var(--ink); }

h2 { font-size: 46px; line-height: 1.08; }

.lede { font-size: 18px; line-height: 1.5; color: var(--muted); }

/* Body copy under a heading, everywhere it appears. */
.worry p, .tl-step p, .point p, .faq-item p { line-height: 1.55; color: var(--muted); }

/* ---- Hero ------------------------------------------------------------- */

.hero { padding: 80px 0 var(--section); }
.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}
.hero h1 {
  font-size: 88px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  /* The display cut of Fraunces gets too hairline at this size, so the optical
     size is pinned to the sturdier text cut. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 40;
}
.hero-sub {
  font-size: 22px;
  line-height: 1.5;
  color: var(--link);
  max-width: 760px;
}
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.micro { font-size: 15px; color: var(--muted); }

/* ---- Worries ---------------------------------------------------------- */

.worries-head { max-width: 860px; }
.worries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 48px;
}
.worry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.worry h3 {
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.25;
}

/* ---- Timeline --------------------------------------------------------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px;
}
.tl-step { display: flex; flex-direction: column; }
.tl-when {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
/* The line carries its own markers: a dot at the start of each step (::before)
   and, on the last step, an arrowhead at the end (::after). Both are anchored
   to the line, so the vertical variant below only has to turn the line. */
.tl-line {
  position: relative;
  border-top: 2px solid var(--ink);
  height: 0;
}
.tl-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bone);
}
.tl-step:last-child .tl-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.tl-step h3 { font-size: 21px; margin-top: 30px; }
.tl-step p { margin-top: 8px; }
.tl-step h3, .tl-step p { padding-right: 48px; }

/* ---- Tasks (pine band) ------------------------------------------------ */

.band-accent h2 { color: var(--bone); }
.band-accent .lede { color: var(--on-accent-muted); }
.tasks-head { display: flex; flex-direction: column; gap: 14px; }
.tasks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.task-card {
  background: var(--paper);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.task-card h3 {
  font-size: 17px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.task-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.task-card li { font-size: 15px; color: var(--link); }

/* ---- Control + approval card ------------------------------------------ */

.control .wrap { display: flex; gap: 72px; align-items: center; }
.control-copy {
  width: 540px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.points { display: flex; flex-direction: column; gap: 22px; }
.point { display: flex; flex-direction: column; gap: 4px; }
.point h3 { font-size: 18px; }

.approval {
  flex-grow: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 22px 50px rgba(23, 25, 26, 0.09);
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: none;   /* a mock: the buttons must not look live */
}
.approval-head { display: flex; align-items: center; gap: 10px; }
.approval-head span:last-child { font-size: 14px; font-weight: 600; color: var(--signal-text); }
.approval-ask {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.3;
}
.approval-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
}
.approval-rows div { display: flex; padding: 13px 16px; font-size: 15px; }
.approval-rows div + div { border-top: 1px solid var(--rule-faint); }
.approval-rows span:first-child { width: 110px; color: var(--muted); }
.approval-rows span:last-child { font-weight: 500; }
.approval-actions { display: flex; gap: 10px; }

/* ---- Pricing ---------------------------------------------------------- */

.pricing { padding: 80px 0; }
.pricing .wrap { display: flex; gap: 64px; align-items: center; }
.pricing-copy { flex-grow: 1; display: flex; flex-direction: column; gap: 14px; }
.pricing-copy h2 { max-width: 640px; }
.pricing-copy .lede { max-width: 600px; }
.price {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--rule);
  padding-left: 48px;
}
.price-when { font-size: 15px; color: var(--muted); }
.price-figure {
  font-family: var(--display);
  font-size: 68px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.price-unit { font-size: 16px; color: var(--link); }

/* ---- FAQ -------------------------------------------------------------- */

.faq .wrap { display: flex; gap: 72px; }
.faq h2 { width: 320px; flex-shrink: 0; }
.faq-list { flex-grow: 1; display: flex; flex-direction: column; }
.faq-item { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item + .faq-item { border-top: 1px solid var(--rule); }
.faq-item h3 { font-size: 19px; }

/* ---- Closing + footer ------------------------------------------------- */

.closing .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.closing h2 { font-size: 60px; line-height: 1.04; color: var(--bone); max-width: 860px; }
.closing .micro { color: #A8ADA9; }

.site-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 14px 0;
}
.site-footer .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-footer .wordmark { font-size: 20px; }
.site-footer a { font-size: 14px; text-decoration: none; }

/* ---- Simple page (privacy) -------------------------------------------- */

.page { padding: 64px 0 var(--section); }
.page .wrap { max-width: 760px; }
.page h1 { font-size: 52px; line-height: 1.05; }
.page p { font-size: 17px; line-height: 1.6; color: var(--link); margin-top: 20px; }

/* ======================================================================= */
/* Hero animation.                                                          */
/* One 20s loop: Jess does three routine tasks in three different apps and   */
/* Mimi's list fills up. The mock has fixed pixel geometry (the cursor lands */
/* on absolute coordinates inside a 640px window), so it is designed at      */
/* --demo-w pixels and zoomed to fit rather than reflowed; the inline script */
/* in index.html sets the zoom. Base styles are the END of the loop, which   */
/* is what reduced-motion users see.                                         */
/* ======================================================================= */

/* The hero column centres its children, so the mock needs to be told to take the
   full width — otherwise it sizes to its own content and overflows. */
.hero-demo { width: 100%; overflow: hidden; }   /* bounds the mock if zoom is never applied */
.demo {
  --demo-w: 1152;
  width: calc(var(--demo-w) * 1px);
  margin: 0 auto;            /* centred when narrower than the column */
  display: grid;
  grid-template-columns: 640px 48px minmax(0, 1fr);
  column-gap: 8px;
}

/* Captions live outside the zoomed box so they stay readable on small screens. */
.demo-captions {
  display: grid;
  /* Same proportions as .demo's 640px 48px (rest) columns and 8px gaps, so the
     captions sit under their windows at every zoom. */
  grid-template-columns: calc(100% * 640 / 1152) calc(100% * 48 / 1152) auto;
  column-gap: calc(100% * 8 / 1152);
  margin-top: 16px;
}
.demo-captions p { font-size: 15px; color: var(--muted); text-align: center; }
.demo-captions p:last-child { grid-column: 3; }

.d-win {
  position: relative;
  height: 330px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.d-bar {
  height: 40px;
  flex-shrink: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
}
/* Mac traffic lights: one element, the other two drawn as shadows. */
.d-lights {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #FF5F57;
  box-shadow: 18px 0 0 #FEBC2E, 36px 0 0 #28C840;
  margin-right: 36px;
}
.d-titles {
  display: grid;
  font-size: 13px;
  font-weight: 500;
  color: var(--link);
  margin-left: 8px;
  flex-grow: 1;
}
.d-titles > span { grid-area: 1 / 1; }
.d-watch { font-size: 13px; font-weight: 600; color: var(--signal-text); }

.d-screens { flex-grow: 1; display: grid; }
.d-screens > div { grid-area: 1 / 1; }
/* Base = the loop's last frame, so reduced motion shows the third app, not all three. */
.demo-s1, .demo-s2 { opacity: 0; }

/* Screen 1 — accounting */
.d-ledger { display: flex; }
.d-side {
  width: 150px;
  flex-shrink: 0;
  background: var(--bone);
  border-right: 1px solid var(--rule);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.d-side span {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--muted);
}
.d-side .is-on { background: var(--fill); color: var(--ink); font-weight: 600; }
.d-form { flex-grow: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.d-form-title { font-size: 15px; font-weight: 600; }
.d-field { display: flex; flex-direction: column; gap: 6px; }
.d-label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.d-input {
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 15px;
}
.d-input-static { color: var(--muted); }
.d-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* Typed text is revealed with clip-path (paint only) rather than by growing the box. */
.d-typed { display: inline-block; white-space: nowrap; }
.d-actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.d-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: var(--ink);
}
.d-btn svg { width: 14px; height: 14px; }
.d-btn-blue { background: var(--dot-blue); padding: 0 22px; gap: 8px; }
.d-btn-accent { background: var(--accent); margin-top: 12px; }
.d-toast {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--link);
}
.d-toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.d-mail-actions .d-toast { margin-left: 6px; }

/* Screen 2 — mail */
.d-mail { display: flex; flex-direction: column; }
.d-mail-row {
  height: 44px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.d-mail-row span:first-child { width: 60px; color: var(--muted); font-size: 13px; }
.d-mail-body {
  flex-grow: 1;
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
}
.d-mail-actions {
  height: 60px;
  flex-shrink: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.d-icon { width: 18px; height: 18px; color: var(--dot-grey); }

/* Screen 3 — calendar */
.d-cal { position: relative; }
.d-grid {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 380px;
  height: 242px;
  display: grid;
  grid-template-columns: 36px repeat(5, minmax(0, 1fr));
  grid-template-rows: 22px repeat(5, 44px);
  border-bottom: 1px solid var(--rule-soft);
}
.d-day {
  border-left: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.d-day.is-on { color: var(--ink); }
.d-hour {
  font-size: 11px;
  color: var(--dot-grey);
  padding: 4px 6px 0 0;
  text-align: right;
  border-top: 1px solid var(--rule-soft);
}
.d-cell { border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); }
.d-event {
  position: absolute;
  width: 64px;
  height: 40px;
  border-radius: 5px;
  background: var(--fill);
  color: var(--muted);
  font-size: 11px;
  padding: 5px 6px;
  line-height: 1.25;
  overflow: hidden;
}
.d-event-new {
  background: color-mix(in srgb, var(--accent) 16%, var(--white));
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  transform-origin: top left;
}
.d-pop {
  position: absolute;
  left: 400px;
  top: 16px;
  width: 200px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(23, 25, 26, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.d-pop-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.d-pop .d-input + .d-label { margin-top: 6px; }
.d-pop .d-label + span { font-size: 15px; }
.d-pop .d-toast { margin-top: 6px; justify-content: center; }

/* Cursor */
.demo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
.demo-cursor svg { width: 20px; height: 20px; display: block; }
.demo-cursor path { fill: var(--ink); stroke: var(--paper); }
.d-cursor-name {
  position: absolute;
  left: 15px;
  top: 17px;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: var(--signal-text);
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Arrow between the windows */
.d-arrow-col { display: flex; align-items: center; justify-content: center; }
.d-arrow-inner { position: relative; }
.demo-arrow { width: 48px; height: 24px; color: var(--dot-grey); display: block; }
.demo-pkt {
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}

/* Mimi window */
.d-mimi-bar { height: 44px; }
.d-mimi-mark {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-left: 8px;
}
.d-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 6px;
}
.d-list { position: relative; flex-grow: 1; display: flex; flex-direction: column; }
.demo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--dot-grey);
  opacity: 0;
}
.d-rowwrap { flex-shrink: 0; }
.d-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.d-row-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-row-title { font-size: 16px; font-weight: 600; }
.d-row-sub { display: grid; font-size: 14px; color: var(--muted); }
/* The two labels stack in one cell and cross-fade; the second one is the end state. */
.d-row-sub > span { grid-area: 1 / 1; opacity: 0; }
.d-row-sub > span:last-child { opacity: 1; }
.d-pill {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 14px;
}

/* ---- Animation timing ------------------------------------------------- */

.demo-s1 { animation: demo-s1 20s infinite; }
@keyframes demo-s1 { 0%,26% { opacity: 1 } 30%,96% { opacity: 0 } 100% { opacity: 1 } }
.demo-s2 { animation: demo-s2 20s infinite; }
@keyframes demo-s2 { 0%,26% { opacity: 0 } 30%,56% { opacity: 1 } 60%,100% { opacity: 0 } }
.demo-s3 { animation: demo-s3 20s infinite; }
@keyframes demo-s3 { 0%,56% { opacity: 0 } 60%,96% { opacity: 1 } 100% { opacity: 0 } }

.demo-cursor { animation: demo-cursor 20s infinite ease-in-out; }
@keyframes demo-cursor {
  0% { transform: translate(300px,290px); opacity: 0 }
  2% { transform: translate(300px,290px); opacity: 1 }
  3%,9.5% { transform: translate(270px,132px) }
  10.5%,15.5% { transform: translate(240px,208px) }
  17%,19% { transform: translate(215px,266px) }
  21% { transform: translate(300px,290px) }
  32% { transform: translate(300px,290px) }
  33%,37% { transform: translate(120px,62px) }
  38%,41% { transform: translate(120px,106px) }
  42%,46.5% { transform: translate(110px,150px) }
  47.5%,49% { transform: translate(60px,302px) }
  51% { transform: translate(300px,290px) }
  62% { transform: translate(300px,290px) }
  63%,64.5% { transform: translate(155px,164px) }
  66%,72.5% { transform: translate(520px,146px) }
  74%,79% { transform: translate(470px,238px) }
  81% { transform: translate(300px,290px) }
  96% { transform: translate(300px,290px); opacity: 1 }
  99%,100% { transform: translate(300px,290px); opacity: 0 }
}

/* Typing: the text is clipped from the right and revealed one character-step at a time. */
.demo-v11 { animation: demo-v11 20s infinite; }
@keyframes demo-v11 { 0%,3.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12,end) } 9%,30% { clip-path: inset(0) } 31%,100% { clip-path: inset(0 100% 0 0) } }
.demo-v12 { animation: demo-v12 20s infinite; }
@keyframes demo-v12 { 0%,11% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(7,end) } 15%,30% { clip-path: inset(0) } 31%,100% { clip-path: inset(0 100% 0 0) } }
.demo-v21 { animation: demo-v21 20s infinite; }
@keyframes demo-v21 { 0%,33.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(16,end) } 36.5%,60% { clip-path: inset(0) } 61%,100% { clip-path: inset(0 100% 0 0) } }
.demo-v22 { animation: demo-v22 20s infinite; }
@keyframes demo-v22 { 0%,38.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(27,end) } 41%,60% { clip-path: inset(0) } 61%,100% { clip-path: inset(0 100% 0 0) } }
.demo-v23 { animation: demo-v23 20s infinite; }
@keyframes demo-v23 { 0%,42.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(72,end) } 46.5%,60% { clip-path: inset(0) } 61%,100% { clip-path: inset(0 100% 0 0) } }
.demo-v31 { animation: demo-v31 20s infinite; }
@keyframes demo-v31 { 0%,66.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9,end) } 72%,99.8% { clip-path: inset(0) } 99.9%,100% { clip-path: inset(0 100% 0 0) } }

/* Focus rings. The calendar's ring is the invoice ring shifted 63% along the loop. */
.demo-f11 { animation: demo-f11 20s infinite; }
@keyframes demo-f11 { 0%,2.9%,10%,100% { border-color: var(--rule); box-shadow: 0 0 0 0 transparent } 3.5%,9.5% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring) } }
.demo-f12 { animation: demo-f12 20s infinite; }
@keyframes demo-f12 { 0%,10.4%,16%,100% { border-color: var(--rule); box-shadow: 0 0 0 0 transparent } 11%,15.5% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring) } }
.demo-f31 { animation: demo-f11 20s infinite -7.4s; }

.demo-l21 { animation: demo-l21 20s infinite; }
@keyframes demo-l21 { 0%,32.9%,37.5%,100% { border-color: var(--rule) } 33.5%,37% { border-color: var(--accent) } }
.demo-l22 { animation: demo-l22 20s infinite; }
@keyframes demo-l22 { 0%,37.9%,41.5%,100% { border-color: var(--rule) } 38.5%,41% { border-color: var(--accent) } }
.demo-l23 { animation: demo-l23 20s infinite; }
@keyframes demo-l23 { 0%,41.9%,47%,100% { border-color: var(--rule) } 42.5%,46.5% { border-color: var(--accent) } }

.demo-btn { animation: demo-btn 20s infinite; }
@keyframes demo-btn { 0%,17%,19%,47%,49%,77%,79%,100% { transform: scale(1) } 18%,48%,78% { transform: scale(.94) } }

/* "Sent" is "Invoice saved" shifted 30% along the loop. */
.demo-toast1 { animation: demo-toast1 20s infinite; }
@keyframes demo-toast1 { 0%,18.5% { opacity: 0; transform: translateX(-6px) } 20%,26% { opacity: 1; transform: none } 28%,100% { opacity: 0; transform: none } }
.demo-toast2 { animation: demo-toast1 20s infinite -14s; }
.demo-toast3 { animation: demo-toast3 20s infinite; }
@keyframes demo-toast3 { 0%,78.5% { opacity: 0; transform: translateY(4px) } 80%,96% { opacity: 1; transform: none } 100% { opacity: 0; transform: none } }

.demo-blk { animation: demo-blk 20s infinite ease-out; }
@keyframes demo-blk { 0%,63.4% { opacity: 0; transform: scale(.6) } 64.5%,99.9% { opacity: 1; transform: none } 100% { opacity: 0; transform: scale(.6) } }
.demo-blkt { animation: demo-blkt 20s infinite; }
@keyframes demo-blkt { 0%,72% { opacity: 0 } 73%,99.9% { opacity: 1 } 100% { opacity: 0 } }
.demo-pop { animation: demo-pop 20s infinite ease-out; }
@keyframes demo-pop { 0%,64% { opacity: 0; transform: translateY(8px) } 65.5%,99.9% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(8px) } }

.demo-pulse { animation: demo-pulse 1.6s infinite ease-in-out; }
@keyframes demo-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.demo-arrow { animation: demo-arrow 20s infinite; }
@keyframes demo-arrow { 0%,19%,26%,49%,56%,79%,86%,100% { color: var(--dot-grey) } 20.5%,24%,50.5%,54%,80.5%,84% { color: var(--accent) } }
.demo-pkt { animation: demo-pkt 20s infinite ease-in-out; }
@keyframes demo-pkt {
  0%,19% { transform: translateX(0); opacity: 0 }
  19.5% { transform: translateX(4px); opacity: 1 }
  22% { transform: translateX(36px); opacity: 1 }
  22.4% { transform: translateX(40px); opacity: 0 }
  22.5%,49% { transform: translateX(0); opacity: 0 }
  49.5% { transform: translateX(4px); opacity: 1 }
  52% { transform: translateX(36px); opacity: 1 }
  52.4% { transform: translateX(40px); opacity: 0 }
  52.5%,79% { transform: translateX(0); opacity: 0 }
  79.5% { transform: translateX(4px); opacity: 1 }
  82% { transform: translateX(36px); opacity: 1 }
  82.4% { transform: translateX(40px); opacity: 0 }
  82.5%,100% { transform: translateX(0); opacity: 0 }
}

.demo-win2 { animation: demo-win2 20s infinite; }
@keyframes demo-win2 { 0%,20%,27%,50%,57%,80%,87%,100% { box-shadow: 0 0 0 0 transparent } 22%,25%,52%,55%,82%,85% { box-shadow: 0 0 0 4px var(--ring) } }

.demo-empty { animation: demo-empty 20s infinite; }
@keyframes demo-empty { 0%,19% { opacity: 1 } 22%,97% { opacity: 0 } 100% { opacity: 1 } }

/* Rows reveal top-down by clipping; nothing sits below an appearing row, so no
   layout needs to move. */
.demo-r1 { animation: demo-r1 20s infinite ease-out; }
@keyframes demo-r1 { 0%,20% { clip-path: inset(0 0 100% 0); opacity: 0 } 23%,96% { clip-path: inset(0); opacity: 1 } 99.5%,100% { clip-path: inset(0 0 100% 0); opacity: 0 } }
.demo-sa1 { animation: demo-sa1 20s infinite; }
@keyframes demo-sa1 { 0%,24% { opacity: 1 } 26%,100% { opacity: 0 } }
.demo-sb1 { animation: demo-sb1 20s infinite; }
@keyframes demo-sb1 { 0%,24% { opacity: 0 } 26%,100% { opacity: 1 } }
.demo-p1 { animation: demo-p1 20s infinite; }
@keyframes demo-p1 { 0%,26% { opacity: 0; transform: scale(.9) } 28%,100% { opacity: 1; transform: none } }

.demo-r2 { animation: demo-r2 20s infinite ease-out; }
@keyframes demo-r2 { 0%,50% { clip-path: inset(0 0 100% 0); opacity: 0 } 53%,96% { clip-path: inset(0); opacity: 1 } 99.5%,100% { clip-path: inset(0 0 100% 0); opacity: 0 } }
.demo-sa2 { animation: demo-sa2 20s infinite; }
@keyframes demo-sa2 { 0%,54% { opacity: 1 } 56%,100% { opacity: 0 } }
.demo-sb2 { animation: demo-sb2 20s infinite; }
@keyframes demo-sb2 { 0%,54% { opacity: 0 } 56%,100% { opacity: 1 } }
.demo-p2 { animation: demo-p2 20s infinite; }
@keyframes demo-p2 { 0%,56% { opacity: 0; transform: scale(.9) } 58%,100% { opacity: 1; transform: none } }

.demo-r3 { animation: demo-r3 20s infinite ease-out; }
@keyframes demo-r3 { 0%,80% { clip-path: inset(0 0 100% 0); opacity: 0 } 83%,96% { clip-path: inset(0); opacity: 1 } 99.5%,100% { clip-path: inset(0 0 100% 0); opacity: 0 } }
.demo-sa3 { animation: demo-sa3 20s infinite; }
@keyframes demo-sa3 { 0%,84% { opacity: 1 } 86%,100% { opacity: 0 } }
.demo-sb3 { animation: demo-sb3 20s infinite; }
@keyframes demo-sb3 { 0%,84% { opacity: 0 } 86%,100% { opacity: 1 } }
.demo-p3 { animation: demo-p3 20s infinite; }
@keyframes demo-p3 { 0%,86% { opacity: 0; transform: scale(.9) } 88%,100% { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .demo * { animation: none !important; }
  .demo-cursor { display: none; }
}

/* ======================================================================= */
/* Responsive                                                               */
/* ======================================================================= */

@media (max-width: 1080px) {
  :root { --gutter: 40px; --section: 80px; }
  h2 { font-size: clamp(28px, 7vw, 38px); }
  .closing h2 { font-size: clamp(30px, 8vw, 46px); }
  .hero h1 { font-size: 72px; }
  .hero-sub { font-size: 20px; }
  .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worries { gap: 32px; }
  /* Side-by-side sections stack. */
  .control .wrap, .pricing .wrap, .faq .wrap { flex-direction: column; align-items: stretch; }
  .control-copy, .price, .faq h2 { width: auto; }
  .control .wrap { gap: 48px; }
  .pricing .wrap { gap: 36px; }
  .faq .wrap { gap: 40px; }
  .price { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 32px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .worries { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  /* Timeline turns vertical: the line runs down the left of each step, and its
     dot and arrowhead ride with it. */
  .timeline { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .tl-step { position: relative; padding: 0 0 32px 34px; }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-when { margin-bottom: 6px; }
  .tl-line {
    position: absolute;
    left: 6px;
    top: 2px;
    bottom: 0;
    height: auto;
    border-top: 0;
    border-left: 2px solid var(--ink);
  }
  .tl-step:last-child .tl-line { bottom: auto; height: 26px; }
  .tl-line::before { left: -8px; top: 0; }
  .tl-step:last-child .tl-line::after { right: auto; left: -5px; top: 19px; transform: rotate(45deg); }
  .tl-step h3 { margin-top: 0; }
  .tl-step h3, .tl-step p { padding-right: 0; }

  /* Hero mock stacks: app window, arrow pointing down, Mimi window. */
  .demo {
    --demo-w: 640;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .d-arrow-col { height: 48px; }
  .d-arrow-inner { transform: rotate(90deg); }
  .demo-captions { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .demo-captions p:last-child { grid-column: 1; }
}

@media (max-width: 640px) {
  :root { --gutter: 24px; --section: 64px; }
  .hero { padding: 48px 0 var(--section); }
  .hero .wrap { gap: 48px; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .hero-sub { font-size: 18px; }
  .tasks { grid-template-columns: minmax(0, 1fr); }
  .price-figure { font-size: 56px; }
  .approval { padding: 22px; }
  .approval-actions { flex-wrap: wrap; }
  .site-header .wrap { gap: 16px; }
}