/* Dollie landing page. Warm white page, graphite app demonstrations, sage Dollie, soft blue gel actions. */
:root {
  color-scheme: light;
  --page: #fbfaf6;
  --page-deep: #f3f1ea;
  --ink: #202326;
  --muted: #676c70;
  --faint: #9b9fa2;
  --line: #e5e2d9;
  --graphite: #1d1f20;
  --card: #202429;
  --card-line: #ffffff21;
  --app-ink: #eceef1;
  --app-muted: #a3a9b1;
  --gel-ink: #2b4863;
  --sage: #9fc7a6;
  --tint-blue: #f0f4fa;
  --tint-sage: #f1f6ef;
  --tint-amber: #faf4e8;
  --blue: #0086fc;
  --green: #00c978;
  --green-text: #07804c;
  --accent: var(--blue);
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-base: 8px;
  --serif: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --sans: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
}

@supports (color: color(display-p3 1 1 1)) {
  :root { --blue: color(display-p3 0.215686 0.517647 0.956863); --green: color(display-p3 0.266667 0.776471 0.498039); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.03em; }
:focus-visible { outline: 3px solid #5e8db5; outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.draft-bar { padding: 7px 16px; text-align: center; font-size: 11px; letter-spacing: .5px; color: var(--muted); background: repeating-linear-gradient(0deg, #ffffff00 0 3px, #ffffff66 3px 6px) var(--page-deep); border-bottom: 1px solid var(--line); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; padding: 14px max(clamp(16px, 4vw, 40px), calc((100% - 1200px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: #fbfaf6f2; border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-smooth-out), padding var(--duration-fast) var(--ease-smooth-out); }
.top.is-stuck { border-bottom-color: var(--line); padding-block: 9px; }
@supports (backdrop-filter: blur(12px)) { .top { background: #fbfaf6d9; backdrop-filter: blur(14px) saturate(1.1); } }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -.4px; }
.brand img { width: 30px; height: 30px; }
.brand span { font-family: 'Outfit', var(--sans, system-ui), sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.035em; line-height: 1; } /* the lockup: avatar + lowercase dollie in Outfit bold */
.brand-line { font-size: 14.5px; font-weight: 500; color: var(--muted); }
.top-cta { justify-self: end; font-size: 14px; font-weight: 500; text-decoration: none; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; min-height: 44px; display: inline-flex; align-items: center; }
.top-cta:hover { border-color: #cfd5da; }

/* Shared */
section { padding: clamp(80px, 11vw, 140px) clamp(16px, 4vw, 40px); }
.section-head { max-width: 780px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; display: grid; gap: 16px; }
.eyebrow, .section-head p.eyebrow { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: -.005em; margin-bottom: -6px; max-width: none; }
.section-head h2, .split-copy h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.032em; }
.section-head p { font-size: 18px; color: var(--muted); max-width: 56ch; margin: 0 auto; }
.section-note, .scene-note { max-width: 1120px; margin: 24px auto 0; font-size: 12px; color: var(--faint); text-align: center; }

.gel {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid #edf5ffcc; color: var(--gel-ink); font: 500 15.5px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #ffffffd9, #ffffff2e 46%, #ffffff00 54%), linear-gradient(#dceafb 0%, #bdd7f1 45%, #9cc2e2 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -5px 7px -2px #ffffffb3, inset 0 -1px 2px #5e8db54d, 0 3px 9px #1d1f2033;
  transition: transform var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out);
}
.gel:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -5px 7px -2px #ffffffc9, inset 0 -1px 2px #5e8db559, 0 5px 14px #1d1f2038; }
.gel:active { transform: translateY(1px); }
.gel.small { min-height: 34px; padding: 0 14px; font-size: 13px; }
.quiet { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 15.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.quiet::after { content: "→"; margin-left: 8px; transition: transform var(--duration-quick) var(--ease-smooth-out); }
.quiet:hover { color: var(--ink); }
.quiet:hover::after { transform: translateX(3px); }

.example-tag { position: absolute; top: 12px; right: 12px; z-index: 6; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--muted); background: #ffffffe0; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.window .example-tag { color: var(--app-muted); background: #2a2e33cc; border-color: #ffffff1f; }
.pill { font-size: 11px; color: var(--app-muted); border: 1px solid var(--card-line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* App window, matching the running app's tokens */
.window { position: relative; background: var(--graphite); color: var(--app-ink); border: 1px solid #5d646c80; border-radius: 18px; box-shadow: 0 30px 70px #1d1f2038, inset 0 1px #ffffff18; overflow: hidden; }
.window-bar { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid #0b0c0d; background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), linear-gradient(#34383d, #25282c); }
.lights { display: flex; gap: 7px; }
/* Early-Aqua gems: top highlight, soft inner shade, hairline rim. */
.lights i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #ffc9c2, #ff8a7e 38%, #f2503f 72%, #d8402f); box-shadow: inset 0 1px 1px #ffffffb8, inset 0 -1px 2px #00000038, 0 0 0 .5px #00000030; }
.lights i:nth-child(2) { background: radial-gradient(circle at 50% 28%, #ffedb8, #ffd767 38%, #eeb42b 72%, #d29a1b); }
.lights i:nth-child(3) { background: radial-gradient(circle at 50% 28%, #d2f3b7, #9ede79 38%, #58b23f 72%, #3f9330); }
.window-title { position: absolute; left: 50%; transform: translateX(-50%); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: .015em; color: #c3c8ce; }
.window-clock { margin-left: auto; font-size: 12px; color: var(--app-muted); font-variant-numeric: tabular-nums; }

.thread { padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.row { display: flex; gap: 10px; align-items: flex-start; }
.row.you { flex-direction: column; align-items: flex-end; }
.stack { display: grid; gap: 7px; min-width: 0; }
.name { font-size: 12.5px; color: var(--app-muted); }
.stamp { font-size: 11px; color: var(--app-muted); margin-top: 4px; }
.face { width: 32px; height: 32px; flex: none; margin-top: 18px; }
.bubble { width: fit-content; max-width: min(34rem, 88%); font-size: 15px; line-height: 1.5; padding: 10px 15px; }
.bubble.out { color: var(--gel-ink); border: 1px solid #edf5ffcc; border-radius: 22px 22px 6px 22px; background: linear-gradient(#e3eefc 0%, #c3daf2 45%, #a3c6e4 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px #5e8db533, 0 3px 9px #0006; }
.bubble.in { background: var(--card); border: 1px solid var(--card-line); border-radius: 22px; box-shadow: inset 0 1px #ffffff0d, 0 2px 8px #00000059; max-width: 100%; }

.doc-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 14px 16px; max-width: 360px; }
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-head b { font-size: 13.5px; font-weight: 500; }
.lines { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.lines td { padding: 7px 0; border-bottom: 1px solid #ffffff12; color: #d6d9de; }
.lines td:last-child { text-align: right; padding-left: 12px; white-space: nowrap; }
.lines small { font-size: 11px; color: var(--app-muted); margin-left: 5px; }
.lines tr.new td { color: #fff; }
.lines tr.new td:first-child { box-shadow: inset 2px 0 var(--blue); padding-left: 9px; }
.lines tfoot td { border: 0; padding-top: 10px; font-size: 16px; color: #fff; font-weight: 600; }
.doc-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.plain { font-size: 13px; color: var(--app-muted); }
.app-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #cfe0f1; background: #2b3441; border: 1px solid #ffffff1a; }

/* 1. Hero */
.hero { padding-top: clamp(28px, 5vw, 64px); }
.hero-copy { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.audience { font-size: 14px; color: var(--muted); letter-spacing: .2px; }
.hero h1 { font-size: clamp(44px, 7vw, 92px); line-height: 1.02; letter-spacing: -.035em; margin-top: 16px; }
.hero-body { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--muted); max-width: 50ch; margin-top: 24px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.get-meta { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.scene { position: relative; max-width: 1060px; margin: clamp(52px, 7vw, 84px) auto 0; padding: 0 clamp(0px, 9vw, 120px) 0 clamp(0px, 11vw, 150px); }
.scene > .example-tag { top: -30px; right: auto; left: 50%; transform: translateX(-50%); }
.mac { max-width: 760px; }
.mac .thread { min-height: 420px; align-content: start; }
@media (min-width: 761px) { .mac .thread { padding-right: clamp(160px, 17vw, 190px); } }
.typing { display: flex; gap: 4px; padding: 12px 14px; width: fit-content; background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-muted); animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }

.phone { position: absolute; right: 0; bottom: -36px; width: clamp(228px, 25vw, 268px); aspect-ratio: 9 / 19; border-radius: 40px; padding: 10px 0 0; overflow: hidden; background: radial-gradient(ellipse at 50% 0, #2a2e33, #1d1f20 55%); border: 1px solid #5d646c90; box-shadow: 0 0 0 7px #2a2d31, 0 0 0 8px #5d646c55, 0 30px 60px #1d1f2045; color: var(--app-ink); display: flex; flex-direction: column; }
.phone-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 22px 0; font-size: 11px; font-weight: 600; }
.phone-island { width: 64px; height: 19px; border-radius: 999px; background: #000; }
.phone-signal { justify-self: end; display: flex; align-items: flex-end; gap: 1.5px; }
.phone-signal i { width: 2.5px; border-radius: 1px; background: #eceef1; height: 4px; }
.phone-signal i:nth-child(2) { height: 6px; }
.phone-signal i:nth-child(3) { height: 8px; }
.phone-signal b { width: 16px; height: 8px; margin-left: 4px; border-radius: 2.5px; border: 1px solid #eceef1aa; box-shadow: inset 10px 0 #eceef1; }
.app-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 12px 10px; border-bottom: 1px solid #ffffff10; background: linear-gradient(#26292d, #1f2123); }
.app-menu { position: absolute; left: 14px; top: 12px; display: grid; gap: 2.5px; }
.app-menu i { width: 11px; height: 1.5px; border-radius: 1px; background: #c9ced4; }
.app-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, #d7e7f6, #9fc0de); box-shadow: inset 0 1px 0 #fff8, 0 2px 6px #0006; }
.app-avatar img { width: 30px; height: 30px; }
.app-name { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #2c3035; border: 1px solid #ffffff1a; box-shadow: inset 0 1px #ffffff0d; }
.app-name em { font-style: normal; color: var(--app-muted); margin-left: 3px; }
.app-tools { position: absolute; right: 14px; top: 9px; display: flex; align-items: center; gap: 12px; }
.phone-thread { flex: 1; padding: 12px 11px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
.phone-thread .bubble { font-size: 11.5px; line-height: 1.4; padding: 7px 11px; }
.phone-thread .bubble.out { align-self: flex-end; max-width: 86%; border-radius: 17px 17px 5px 17px; }
.phone-thread .bubble.in { border-radius: 17px; }
.phone-dollie { display: flex; gap: 6px; align-items: flex-start; }
.phone-dollie > img { width: 22px; height: 22px; margin-top: 16px; flex: none; }
.phone-dollie .stack { gap: 5px; }
.phone-dollie .name { font-size: 10px; }
.phone-draft { background: var(--card); border: 1px solid var(--card-line); border-radius: 13px; padding: 9px 10px; display: grid; gap: 3px; }
.phone-draft-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.phone-draft-head b { font-weight: 500; }
.phone-draft-head span { font-weight: 600; font-variant-numeric: tabular-nums; }
.phone-draft p { font-size: 10.5px; color: #d6d9de; }
.phone-draft .phone-draft-state { color: var(--app-muted); }
.phone-draft .gel.small { min-height: 26px; font-size: 11px; padding: 0 11px; margin-top: 5px; justify-self: start; }
.phone-divider { align-self: center; font-size: 9.5px; color: var(--app-muted); letter-spacing: .3px; margin: 2px 0 -2px; }
.inquiries { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--card-line); border-radius: 13px; overflow: hidden; }
.inquiries li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-bottom: 1px solid #ffffff10; }
.inquiries li:last-child { border: 0; }
.initials { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; letter-spacing: .3px; color: #eef1f4; background: linear-gradient(#6b7480, #4d555f); box-shadow: inset 0 1px #ffffff26; }
.attach { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.attach span { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; color: #cfe0f1; background: #2a3440; border: 1px solid #ffffff14; border-radius: 999px; padding: 1px 6px 1px 5px; }
.inq-note { font-size: 9.5px; color: #f1dfa6; margin-top: 2px; }
.inq { min-width: 0; flex: 1; display: grid; gap: 1px; }
.inq-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }
.inq-top b { font-weight: 600; }
.inq-meta { font-size: 9.5px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { font-size: 8.5px; font-weight: 600; border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.chip.open { background: #264232; color: #b9e2c1; }
.chip.booked { background: #4a4126; color: #f1dfa6; }
.inq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inq-foot > span:first-child { font-size: 9.5px; color: var(--app-muted); }
.inq-foot .app-btn { min-height: 24px; font-size: 10.5px; padding: 0 10px; }
.phone-composer { margin: 0 10px 8px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #16181a; border: 1px solid #ffffff1c; box-shadow: inset 0 1px 2px #0008; font-size: 11px; color: var(--app-muted); }
.phone-composer .plus { font-size: 15px; line-height: 1; color: #c9ced4; }
.phone-composer .placeholder { flex: 1; }
.phone-home { align-self: center; width: 84px; height: 4px; border-radius: 999px; background: #eceef1b3; margin: 2px 0 8px; }

.standing { position: absolute; left: 0; bottom: -18px; margin: 0; width: clamp(110px, 13vw, 160px); z-index: 4; animation: drift 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.standing img { width: 100%; height: auto; }
.ready { position: absolute; top: -8%; right: -2%; font-size: 12px; font-weight: 600; color: var(--gel-ink); background: linear-gradient(#e3eefc, #c3daf2); border: 1px solid #fff; border-radius: 999px 999px 999px 4px; padding: 4px 10px; box-shadow: 0 3px 8px #1d1f2026; }
.scene-note { margin-top: 70px; }

/* Hero sequence: typing, then the draft arrives, then Dollie reacts */
.scene .reveal { opacity: 0; transform: translateY(var(--distance-base)); }
.scene .typing { opacity: 0; max-height: 0; padding-block: 0; border-width: 0; margin-top: -7px; overflow: hidden; }
.scene.is-playing .typing { animation: typing-life 1.5s ease both; }
.scene.is-playing .reveal { animation: arrive var(--duration-slow) var(--ease-smooth-out) both; }
.scene.is-playing .bubble.in.reveal { animation-delay: 1.5s; }
.scene.is-playing .doc-card.reveal { animation-delay: 1.9s; }
.scene.is-playing .phone-dollie.reveal { animation-delay: 2.5s; }
.scene.is-playing .ready.reveal { animation-delay: 2.5s; }
.scene.is-playing .standing img { animation: hop var(--duration-very-slow) var(--ease-bounce) 2.4s both; }
.scene.is-static .reveal { opacity: 1; transform: none; }
.scene.is-static .typing { display: none; }
@keyframes typing-life { 0% { opacity: 0; max-height: 40px; } 15%, 85% { opacity: 1; max-height: 40px; } 100% { opacity: 0; max-height: 0; padding-block: 0; border-width: 0; margin-top: -7px; } }
@keyframes arrive { from { opacity: 0; transform: translateY(var(--distance-base)); } to { opacity: 1; transform: none; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-1.6deg); } }

/* 2. The second shift */
.shift { background: #fff; border-block: 1px solid var(--line); }
.day-scroll { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 14vw, 180px); }
.moments li { display: grid; gap: 14px; justify-items: start; min-height: 40vh; align-content: center; }
.object { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 10px 12px #1d1f2018); }
.when { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 9px; }
.when time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.when::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ask { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.ask.spoken { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wave { display: flex; gap: 2px; align-items: center; height: 30px; flex: none; padding: 0 10px; border-radius: 999px; background: #ffffff; border: 1px solid var(--line); }
.wave i { width: 2px; border-radius: 2px; background: var(--accent); height: 9px; }
.wave i:nth-child(2n) { height: 16px; }
.wave i:nth-child(3n) { height: 22px; }
.wave.small { height: 18px; padding: 0 7px; background: #ffffff33; border-color: transparent; }
.wave.small i { height: 6px; background: var(--gel-ink); }
.wave.small i:nth-child(2n) { height: 10px; }
.wave.small i:nth-child(3n) { height: 13px; }
.moment-note { font-size: 16.5px; line-height: 1.55; color: var(--muted); max-width: 42ch; }

.phone-stage { position: sticky; top: 104px; display: grid; justify-items: center; }
.big-phone { position: relative; width: min(330px, 78vw); aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 12px 0 0; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 0, #2a2e33, #1d1f20 55%); border: 1px solid #5d646c90; box-shadow: 0 0 0 9px #2a2d31, 0 0 0 10px #5d646c55, 0 40px 80px #1d1f2040; color: var(--app-ink); }
.phone-stage > .example-tag { position: static; justify-self: center; margin-bottom: 12px; }
.big-phone .phone-status { padding-inline: 26px; }
.big-phone .app-head { padding: 8px 12px 10px; gap: 4px; }
.big-phone .app-avatar { width: 32px; height: 32px; }
.big-phone .app-avatar img { width: 30px; height: 30px; }
.big-phone .app-name { font-size: 11.5px; padding: 2px 9px; }
.big-phone .app-menu { top: 10px; }
.big-phone .app-tools { top: 8px; }
.screens { position: relative; flex: 1; min-height: 0; }
.screen { position: absolute; inset: 0; padding: 12px 11px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; opacity: 0; transform: translateY(var(--distance-base)); filter: blur(3px); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out); pointer-events: none; overflow: hidden; }
.screen.is-on { opacity: 1; transform: none; filter: blur(0px); }
.screen .bubble { font-size: 12.5px; line-height: 1.45; padding: 8px 12px; }
.screen .bubble.out { align-self: flex-end; max-width: 84%; border-radius: 18px 18px 5px 18px; }
.screen .bubble.out.voice-out { display: inline-flex; align-items: center; gap: 8px; }
.screen .bubble.in { border-radius: 18px; }
.phone-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 10px 11px; display: grid; gap: 6px; }
.phone-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.phone-card-top b { font-weight: 500; }
.screen .brief li { font-size: 11.5px; padding: 6px 0; }
.screen .brief em { font-size: 10px; }
.screen .missing { font-size: 10.5px; padding: 6px 8px; margin-top: 6px; }
.screen .catchup dt { font-size: 10px; }
.screen .catchup dd { font-size: 11.5px; }
.screen .catchup div { padding: 6px 0; }

.brief { list-style: none; margin: 0; padding: 0; }
.brief li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; padding: 10px 0; border-bottom: 1px solid #ffffff12; font-size: 14px; }
.brief span { color: #e3e6ea; }
.brief b { font-weight: 500; text-align: right; }
.brief em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; color: #b3c8db; }
.missing { margin-top: 12px; font-size: 12.5px; color: #e9d9a8; background: #3a3424; border-radius: 10px; padding: 8px 10px; }
.missing b { font-weight: 600; margin-right: 6px; }
.catchup { margin: 0; display: grid; }
.catchup div { padding: 9px 0; border-bottom: 1px solid #ffffff12; display: grid; gap: 2px; }
.catchup div:last-child { border: 0; }
.catchup dt { font-size: 11.5px; letter-spacing: .5px; color: var(--app-muted); }
.catchup dd { margin: 0; font-size: 13.5px; }
.catchup .failed dt { color: #f0a58f; }

/* 2a. What lands while you're out */
.pile-stage { position: relative; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 26px); --spread: 1; }
.pile-group { display: grid; gap: 16px; align-content: end; }
.pile-cards { position: relative; height: 218px; }
.pile-card {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 8px 20px #1d1f200f; display: grid; gap: 5px;
  transform: translate(calc(var(--x) * var(--spread)), calc(var(--y) * var(--spread))) rotate(calc(var(--r) * var(--spread)));
  transition: transform var(--duration-very-slow) var(--ease-smooth-out);
}
.pile-card:nth-child(2) { bottom: 58px; }
.pile-card:nth-child(3) { bottom: 116px; }
.pile-kind { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.pile-line { font-size: 13.5px; line-height: 1.35; color: var(--ink); letter-spacing: -.008em; }
.pile-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; opacity: 0; transform: translateY(var(--distance-base)); transition: opacity var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out); }
.pile-label span { font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.pile-stage.is-sorted .pile-card { transform: rotate(var(--rest, 0deg)); }
.pile-stage.is-sorted .pile-card:nth-child(1) { --rest: -1.5deg; }
.pile-stage.is-sorted .pile-card:nth-child(2) { --rest: 1.5deg; }
.pile-stage.is-sorted .pile-card:nth-child(3) { --rest: -.5deg; }
.pile-stage.is-sorted .pile-label { opacity: 1; transform: none; transition-delay: 320ms; }

/* 3. Connections */
.status { font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.status.beta { background: #e3f8ee; color: var(--green-text); }
.status.testing { background: #e3f0ff; color: #0072db; }
.status.planned { background: var(--page-deep); color: var(--muted); border: 1px solid var(--line); }
.connections { background: var(--tint-blue); border-top: 1px solid var(--line); }
.tools { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tools li { background: #fff; padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
.tool-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-head b { font-size: 16px; font-weight: 600; }
.tools p { font-size: 14.5px; color: var(--muted); }

.planned-tools { max-width: 1000px; margin: 40px auto 0; }
.planned-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.planned-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 22px; }
.planned-tools h3 { margin: 0 0 10px; font: 600 12px/1.4 var(--sans); letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
.planned-tools ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.planned-tools li { display: grid; gap: 1px; }
.planned-tools li b { font-size: 15px; font-weight: 600; }
.planned-tools li span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

.kit { display: flex; justify-content: center; gap: clamp(10px, 2vw, 18px); margin: 0 auto clamp(28px, 4vw, 40px); }
.kit img { width: clamp(64px, 9vw, 96px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px #1d1f201f); }
.kit img:nth-child(odd) { transform: translateY(6px) rotate(-3deg); }
.kit img:nth-child(even) { transform: rotate(3deg); }

/* Voice */
.voice { background: var(--tint-amber); border-top: 1px solid var(--line); }
.mini-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #ffffff12; }
.mini-head b { font-size: 13.5px; font-weight: 500; }
.voice-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.voice-lede { font-size: 18px; color: var(--muted); max-width: 46ch; }
.voice-demo { position: relative; display: grid; gap: 14px; }
.voice-demo > .example-tag { top: -34px; right: 0; }
.memo { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px 18px 14px 14px; box-shadow: 0 14px 34px #1d1f2012; }
.memo-play { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #eef3f8; border: 1px solid #d5e1ec; position: relative; }
.memo-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 12px solid var(--gel-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.memo-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.memo-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.memo-wave i { flex: 1; max-width: 4px; border-radius: 2px; background: #c3d3e2; height: calc(var(--h) * 1%); }
.memo-wave i:nth-child(-n+9) { background: var(--accent); }
.memo-text { font-size: 16px; font-weight: 500; line-height: 1.4; }
.memo-time { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; align-self: flex-start; }
.voice-arrow { display: flex; align-items: center; gap: 10px; padding-left: 22px; font-size: 13px; color: var(--muted); }
.voice-arrow img { width: 30px; height: 30px; }
.voice-arrow::before { content: ""; width: 1px; height: 26px; background: var(--line); margin-right: 4px; }
.voice-draft { padding: 16px 18px 18px; }
.voice-email { display: grid; gap: 10px; padding: 12px 0 14px; font-size: 15px; line-height: 1.6; color: #dfe2e6; }
.voice-email mark { background: none; color: #eaf6ef; box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; padding: 0 1px; }
.voice-email mark::after { content: attr(data-note); position: relative; top: -6px; margin-left: 3px; font-size: 10px; font-weight: 600; color: var(--green); }
.voice-notes { margin: 0; padding: 12px 0 0; border-top: 1px solid #ffffff12; display: grid; gap: 7px; list-style: none; counter-reset: note; }
.voice-notes li { counter-increment: note; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 12.5px; color: #b9c7bc; }
.voice-notes li::before { content: counter(note); color: var(--green); font-weight: 600; font-size: 11px; }
/* In the follow-up demo the numbered steps are queued, not done, so they stay neutral: green is reserved for what has happened. */
.followup .voice-notes li { color: #b9c2cb; }
.followup .voice-notes li::before { color: #b3c8db; }

/* Meet Dollie */
.meet { background: repeating-linear-gradient(0deg, #ffffff00 0 3px, #ffffff66 3px 6px) var(--page-deep); border-top: 1px solid var(--line); overflow: hidden; }
.stage-dollie { position: relative; margin: 0 auto; width: min(760px, 100%); aspect-ratio: 16 / 9; display: grid; place-items: end center; }
.dollie-big { width: min(320px, 46%); height: auto; position: relative; z-index: 2; animation: drift 5.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.prop { position: absolute; width: clamp(62px, 9vw, 104px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 16px #1d1f2020); animation: float 7s ease-in-out infinite; }
.p1 { left: 1%; top: 30%; transform: rotate(-8deg); animation-delay: -.4s; }
.p2 { left: 16%; top: 3%; transform: rotate(6deg); animation-delay: -2.1s; width: clamp(52px, 7vw, 82px); }
.p3 { right: 17%; top: 1%; transform: rotate(-5deg); animation-delay: -3.4s; width: clamp(52px, 7vw, 82px); }
.p4 { right: 0; top: 33%; transform: rotate(9deg); animation-delay: -1.2s; }
.p5 { right: 11%; bottom: 6%; transform: rotate(-4deg); animation-delay: -5s; width: clamp(46px, 6vw, 70px); }
.p6 { left: 10%; bottom: 8%; transform: rotate(7deg); animation-delay: -1.8s; width: clamp(46px, 6vw, 70px); }
.p7 { left: 30%; top: 16%; transform: rotate(-10deg); animation-delay: -4.2s; width: clamp(40px, 5vw, 60px); }
.p8 { right: 29%; top: 20%; transform: rotate(5deg); animation-delay: -2.9s; width: clamp(40px, 5vw, 60px); }
.p9 { left: 2%; bottom: 30%; transform: rotate(-6deg); animation-delay: -6.1s; width: clamp(44px, 5.5vw, 66px); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.meet-points { list-style: none; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.meet-points li { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.meet-points b { font-size: 16px; font-weight: 600; color: var(--accent); }
.meet-points span { font-size: 15.5px; color: var(--muted); line-height: 1.5; }

/* Who it's for */
.roles { background: #fff; border-top: 1px solid var(--line); }
.lead-roles { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
.lead-roles article { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px); background: var(--page); border: 1px solid var(--line); border-radius: 24px; padding: clamp(16px, 2.4vw, 24px); }
.lead-roles img { width: clamp(96px, 12vw, 132px); aspect-ratio: 1; object-fit: contain; flex: none; filter: drop-shadow(0 10px 14px #1d1f2018); }
.lead-roles h3 { margin: 0 0 6px; font: 600 clamp(21px, 2.3vw, 26px)/1.15 var(--serif); letter-spacing: -.025em; }
.lead-roles p { font-size: 16px; color: var(--muted); line-height: 1.5; }
.more-roles { list-style: none; max-width: 1000px; margin: clamp(24px, 3vw, 36px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.more-roles li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.more-roles b { font-size: 15px; font-weight: 600; }
.more-roles span { font-size: 15px; color: var(--muted); line-height: 1.5; }

.routine-block { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.sub-head { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.028em; line-height: 1.1; }

/* 4 and 5. Split sections */
.crew { background: var(--tint-sage); border-top: 1px solid var(--line); }
.split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.split-copy { display: grid; gap: 26px; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { font-size: 16px; line-height: 1.5; padding: 12px 0 12px 32px; position: relative; display: grid; gap: 2px; }
.plain-list li b { font-size: 15.5px; font-weight: 600; color: var(--accent); }
.plain-list li span { color: var(--muted); }
/* Aqua-era check: green per the grammar (it is true / included), with a whisper of gloss. */
.plain-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 17px; height: 17px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237de3a4'/%3E%3Cstop offset='.5' stop-color='%2322bd6e'/%3E%3Cstop offset='1' stop-color='%23079254'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2.6 8.9 6.3 12.4 13.4 3.4' fill='none' stroke='url(%23a)' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.6 8.55 6.3 11.95 13.4 3.05' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 1px 1px #1d1f2021); }
.group .example-tag { top: 56px; right: 14px; }
.members { margin-left: auto; display: flex; }
.members i, .members img { width: 26px; height: 26px; border-radius: 50%; margin-left: -6px; border: 2px solid #2b2e32; font-style: normal; font-size: 11px; display: grid; place-items: center; background: #3c4a5c; color: #dfe7f0; }
.members i:nth-child(2) { background: #5b4a60; }
.members img { padding: 2px; background: #2b2e32; }
/* Group chat animation */
.group-composer { display: flex; align-items: center; gap: 10px; margin: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 24px); padding: 9px 9px 9px 16px; border-radius: 999px; background: #16181a; border: 1px solid #ffffff1c; box-shadow: inset 0 1px 2px #0008; }
.gc-field { position: relative; flex: 1; min-width: 0; font-size: 14.5px; min-height: 22px; white-space: nowrap; overflow: hidden; }
.gc-text { color: var(--app-ink); }
.gc-placeholder { color: #6f757c; }
.group-composer.is-typing .gc-placeholder { display: none; }
.group-composer.is-typing .gc-text::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #9fc0de; animation: caret 1s steps(1) infinite; }
.gc-send { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #2b3441 center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 10V2M2.5 5.5 6 2l3.5 3.5' fill='none' stroke='%23cfe0f1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: background-color .15s ease; }
.group-composer.is-typing .gc-send { background-color: #5e8db5; }
@keyframes caret { 50% { opacity: 0; } }
.group.is-armed [data-step] { opacity: 0; transform: translateY(var(--distance-base)); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
.group.is-armed [data-step].is-shown { opacity: 1; transform: none; }
.group .bubble.is-typing { position: relative; color: transparent; }
.group .bubble.is-typing::after { content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--app-muted); box-shadow: 11px 0 0 var(--app-muted), 22px 0 0 var(--app-muted); animation: dots 1s ease-in-out infinite; }
@keyframes dots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.initial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; background: #5b4a60; color: #f0e6f2; margin-top: 18px; }
.distinction { font-size: 12px; color: #e9d9a8; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice { border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 500; }
.choice.lead { color: var(--gel-ink); border: 1px solid #edf5ffcc; background: linear-gradient(#e3eefc 0%, #c3daf2 45%, #a3c6e4 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px #5e8db533; }
.choice.neutral { color: #cfe0f1; background: #2b3441; border: 1px solid #ffffff1a; }

.routines { background: var(--page-deep); border-top: 1px solid var(--line); }
.routine-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 1px 0 #fff inset, 0 24px 50px #1d1f2014; }
.example-tag.light { top: 16px; right: 16px; }
.routine-top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.routine-top img.routine-object { width: 58px; height: 58px; object-fit: contain; }
.routine-top b { display: block; font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.routine-top span { font-size: 12px; color: var(--faint); }
.routine-facts { margin: 0; display: grid; }
.routine-facts div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
.routine-facts div:last-child { border: 0; padding-bottom: 0; }
.routine-facts dt { font-size: 13px; color: var(--faint); }
.routine-facts dd { margin: 0; font-size: 15px; }

/* 6. Control */
.control { background: #fff; border-top: 1px solid var(--line); }
.approval { max-width: 860px; margin: 0 auto; }
.approval .example-tag { top: 14px; right: 14px; }
.approval-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.email { padding: 28px; display: grid; gap: 12px; font-size: 15px; line-height: 1.6; color: #dfe2e6; }
.email-meta { font-size: 12px; color: var(--app-muted); border-bottom: 1px solid #ffffff12; padding-bottom: 10px; }
.email mark { background: #4a4126; color: #f1dfa6; border-radius: 5px; padding: 0 5px; }
.used { border-left: 1px solid #ffffff12; background: #232629; padding: 28px 22px; display: grid; gap: 10px; align-content: start; }
.used-title { font-size: 12px; letter-spacing: .5px; color: var(--app-muted); }
.src { font-size: 13px; padding: 9px 11px; border-radius: 10px; background: var(--card); border: 1px solid var(--card-line); }
.gap { font-size: 12.5px; color: #e9d9a8; }
.approval-actions { display: flex; align-items: center; gap: 18px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid #0b0c0d; background: linear-gradient(#2a2d31, #222528); }
.approval-actions .state { margin-right: auto; font-size: 12px; color: var(--app-muted); }

.states-said { max-width: 980px; margin: clamp(44px, 6vw, 64px) auto 0; }
.states-title { text-align: center; font-size: 13px; letter-spacing: .4px; color: var(--faint); margin-bottom: 18px; }
.said-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.said-row figure { margin: 0; display: grid; gap: 8px; align-content: start; }
.said-row figcaption { font-size: 12.5px; color: var(--muted); padding-left: 4px; }
.said { display: flex; align-items: flex-start; gap: 10px; background: var(--graphite); color: var(--app-ink); border: 1px solid #5d646c80; border-radius: 20px; padding: 14px 16px; font-size: 15px; line-height: 1.45; box-shadow: 0 14px 30px #1d1f2018; }
.said img { width: 26px; height: 26px; flex: none; margin-top: 1px; }

/* 7. Founder */
.founder { max-width: 1080px; margin: 0 auto; display: grid; justify-items: center; }
.im { width: min(430px, 100%); background: #fff; border: 1px solid #b9bcc0; border-radius: 9px; overflow: hidden; box-shadow: 0 26px 60px #1d1f2026, inset 0 1px #fff; }
.im-bar { display: flex; align-items: center; height: 36px; padding: 0 12px; background: linear-gradient(#e9e8e5, #d6d5d1); border-bottom: 1px solid #b5b4b0; }
.im-bar .lights i { width: 11px; height: 11px; }
.im-tabs { display: flex; gap: 1px; padding: 6px 8px 0; background: linear-gradient(#d9d8d4, #cbcac6); border-bottom: 1px solid #b0afab; }
.im-tab { display: flex; align-items: center; gap: 6px; padding: 6px 13px; font-size: 12px; color: #6d6c68; background: linear-gradient(#c9c8c4, #bcbbb7); border: 1px solid #adaca8; border-bottom: 0; border-radius: 5px 5px 0 0; }
.im-tab.is-on { color: #2b2c2e; background: linear-gradient(#fdfdfd, #efeeec); }
.im-tab img { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; object-position: 50% 22%; }
.im-body { padding: 18px clamp(12px, 2.5vw, 20px) 18px; background: #fff; display: grid; gap: 8px; }
.im-stamp { text-align: center; font-size: 11.5px; font-weight: 600; color: #9a9a9a; margin-bottom: 4px; }
.im-who { font-size: 11.5px; color: #8d8d8d; padding-left: 42px; }
.im-who span { color: #b0b0b0; }
.im-line { display: flex; align-items: flex-end; gap: 8px; }
.im-face { width: 30px; height: 30px; flex: none; border-radius: 4px; object-fit: cover; object-position: 50% 22%; border: 1px solid #ffffff; box-shadow: 0 0 0 1px #0000002e; }
.im-bubble {
  position: relative; width: fit-content; max-width: 100%; padding: 9px 15px; font-size: 14.5px; line-height: 1.42; color: #1f2427;
  border-radius: 18px; border: 1px solid #a9c4e2; background: linear-gradient(#f4f9ff 0%, #dcebfa 55%, #cfe3f7 100%); box-shadow: inset 0 1px #ffffffe6;
}
.im-bubble::before { content: ""; position: absolute; left: -6px; bottom: 0; width: 11px; height: 14px; background: #cfe3f7; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.im-bubble.is-marked { border-color: #ddc97e; background: linear-gradient(#fdf8e0 0%, #f9efbe 55%, #f5e8ab 100%); font-weight: 500; }
.im-bubble.is-marked::before { background: #f5e8ab; }
.im-shot { margin: 0; padding: 5px; background: linear-gradient(#f4f9ff, #cfe3f7); border: 1px solid #a9c4e2; border-radius: 18px; box-shadow: inset 0 1px #ffffffe6; }
.im-shot img { width: 290px; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 13px; }
.im-read { text-align: right; font-size: 11px; font-weight: 600; color: #a2a2a2; margin-top: 2px; }
.im-compose { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: linear-gradient(#efeeeb, #dcdad6); border-top: 1px solid #b7b6b2; }
.im-cam { position: relative; width: 26px; height: 20px; flex: none; border-radius: 4px; background: linear-gradient(#fbfbfb, #d9d9d9); border: 1px solid #a9a8a4; }
.im-cam::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #8d8c88; }
.im-field { flex: 1; height: 28px; background: #fff; border: 1px solid #b4b3af; border-radius: 14px; box-shadow: inset 0 1px 2px #00000012; }
.im-send { flex: none; padding: 6px 13px; font-size: 13px; font-weight: 600; color: #fff; border-radius: 7px; border: 1px solid #1a63c0; background: linear-gradient(#60abf8, #1d70d9); box-shadow: inset 0 1px #ffffff66; text-shadow: 0 -1px #0000002e; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-head { display: grid; gap: 14px; position: sticky; top: 104px; }
.faq-head h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.032em; }
.faq-head p { font-size: 17px; color: var(--muted); max-width: 34ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; min-height: 44px; font-size: clamp(17px, 1.7vw, 20px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23676c70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #000; }
.answer { padding: 0 48px 24px 4px; display: grid; gap: 10px; }
.answer p { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

/* How it starts */
.start { border-top: 1px solid var(--line); }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.steps li { border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--sans); color: var(--gel-ink); background: #eef3f8; border: 1px solid #d5e1ec; }
.steps h3 { margin: 6px 0 0; font: 600 clamp(20px, 2vw, 23px)/1.2 var(--serif); letter-spacing: -.02em; }
.steps p { font-size: 16px; color: var(--muted); line-height: 1.55; }

/* 8. Invite */
.invite { position: relative; overflow: hidden; background: linear-gradient(var(--page), var(--page-deep)); border-top: 1px solid var(--line); }
.invite > .section-head, .invite > .apply { position: relative; z-index: 1; }
.invite-kit img { position: absolute; width: clamp(84px, 9vw, 124px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 18px #1d1f201f); }
.invite-kit .k1 { top: 9%; left: max(4%, calc(50% - 560px)); transform: rotate(-7deg); }
.invite-kit .k2 { top: 7%; right: max(4%, calc(50% - 560px)); transform: rotate(6deg); }
.invite-kit .k3 { top: 38%; left: max(7%, calc(50% - 500px)); transform: rotate(5deg); width: clamp(64px, 7vw, 96px); }
.invite-kit .k4 { top: 36%; right: max(7%, calc(50% - 500px)); transform: rotate(-5deg); width: clamp(64px, 7vw, 96px); }
.apply { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 4vw, 36px); display: grid; gap: 16px; box-shadow: 0 24px 50px #1d1f2010; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.apply label { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.apply input, .apply select, .apply textarea { font: 15px var(--sans); color: var(--ink); min-height: 46px; padding: 10px 12px; border-radius: 11px; border: 1px solid #dcd8ce; background: linear-gradient(#efede6, #fff 24%); box-shadow: inset 0 1px 3px #20232614; width: 100%; }
.apply textarea { resize: vertical; }
.optional { font-size: 12.5px; color: var(--faint); padding-top: 8px; border-top: 1px solid var(--line); }
.submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form-status { font-size: 13.5px; color: var(--muted); min-height: 1.5em; }
.form-status.is-done { color: var(--green-text); font-weight: 500; }
.form-status.is-error { color: #a33b2a; }
.apply .gel:disabled { opacity: .6; cursor: progress; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.foot { border-top: 1px solid var(--line); background: var(--page); padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px) 40px; }
.foot-top { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 80px); }
.foot-brand { display: grid; gap: 8px; justify-items: start; align-content: start; }
.foot-brand img { width: 56px; height: auto; margin-bottom: 10px; }
.foot-line { font-weight: 600; font-size: 21px; letter-spacing: -.02em; }
.foot-sig { font-size: 14.5px; color: var(--muted); }
.foot-cta { margin-top: 14px; }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.foot-links h2 { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-links a { font-size: 15px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-base { max-width: 1120px; margin: clamp(36px, 5vw, 56px) auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }

/* Responsive */
@media (max-width: 1000px) {
  .pile-stage { --spread: .5; }
  .pile-cards { height: 200px; }
  .planned-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.reverse, .voice-grid { grid-template-columns: minmax(0, 1fr); }
  .split.reverse .split-copy { order: -1; }
  .founder { max-width: 640px; }
  .lead-roles, .more-roles, .said-row, .steps, .faq-grid, .foot-top { grid-template-columns: minmax(0, 1fr); }
  .meet-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .day-scroll { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .phone-stage { position: sticky; top: 62px; z-index: 5; order: -1; margin-inline: calc(clamp(16px, 4vw, 40px) * -1); padding: 12px clamp(16px, 4vw, 40px) 18px; background: var(--page); box-shadow: 0 18px 22px -12px var(--page); }
  .shift .phone-stage { background: #fff; box-shadow: 0 18px 22px -12px #fff; }
  .big-phone { width: min(236px, 62vw); }

  .moments { gap: 44px; }
  .moments li { min-height: 0; }
  .object { width: 68px; height: 68px; }
  .faq-head { position: static; }
  .invite-kit { display: none; }
  .im-who { padding-left: 0; }
  .im-face { display: none; }
  .im-bubble::before, .im-bubble::after { display: none; }
  .im-bubble { max-width: 100%; }
}
@media (max-width: 760px) {
  .pile-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; --spread: 0; }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .top { grid-template-columns: 1fr auto; }
  .brand-line { display: none; }
  .scene { padding: 0; }
  .phone { position: relative; right: auto; bottom: auto; margin: 28px auto 0; width: 268px; }
  .standing { left: auto; right: 10px; bottom: auto; top: -62px; width: 92px; }
  .ready { right: auto; left: -46%; }
  .mac .thread { min-height: 0; }
  .scene-note { margin-top: 24px; }
  .approval-body { grid-template-columns: minmax(0, 1fr); }
  .used { border-left: 0; border-top: 1px solid #ffffff12; }
  .group .example-tag { right: 12px; top: 54px; }
}
@media (max-width: 560px) {
  .planned-groups { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routine-facts div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .approval-actions { flex-wrap: wrap; justify-content: flex-start; }
  .hero h1 { letter-spacing: -.03em; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; filter: blur(0px); }
  .prop { animation: none; }
  html { scroll-behavior: auto; }
  .gel, .quiet::after, .faq summary::after, .gc-send, .top { transition: none; }
  .typing i { animation: none; }
  .standing, .scene.is-playing .standing img, .dollie-big { animation: none; }
  .pile-card, .pile-label { transition: none; }
}