/* homepage */
body { overflow-x: hidden; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 12px; transition: background .3s, box-shadow .3s; }
.top.solid { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 22px; text-decoration: none; color: #2b211c;
  min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: rgba(255,250,244,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top.solid .brand { background: none; padding-left: 0; }
.brand img { border-radius: 8px; }
.top.solid .brand { color: var(--ink); }
.top nav { display: flex; align-items: center; gap: 6px; }
.top-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; text-decoration: none; color: #2b211c; font-size: 15px;
  border-radius: 999px; background: rgba(255,250,244,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top.solid .top-link { background: none; }
.top.solid .top-link { color: var(--ink); }

.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #e9dccd; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity 1.4s ease; }
.hero-art.off { opacity: 0; pointer-events: none; }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 140px clamp(20px, 6vw, 80px) max(84px, calc(env(safe-area-inset-bottom) + 70px));
  background: linear-gradient(to top, rgba(251,246,239,.97) 42%, rgba(251,246,239,.75) 70%, rgba(251,246,239,0)); color: #2b211c; pointer-events: none; }
.hero-text > * { pointer-events: auto; max-width: 760px; }
.hero h1 { font-size: clamp(40px, min(5.6vw, 8.4vh), 84px); line-height: .98; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: #b8492c; }
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: #5b4a40; margin: 0 0 26px; max-width: 560px; }
.pill.big { min-height: 54px; padding: 0 26px; font-size: 16.5px; }
.hero .pill.dark { background: #2b211c; color: #fbf6ef; }
.touch { color: #7d6c62; font-size: 14px; }
.caption { position: absolute; right: clamp(16px, 4vw, 40px); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; color: #5b4a40; font-size: 13.5px; }
.cap-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.3; }
.cap-text b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: #2b211c; }
.dots { display: flex; gap: 2px; }
.dots button { width: 28px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.dots button::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2b211c; opacity: .25; transition: opacity .3s, transform .3s; }
.dots button[aria-current="true"]::after { opacity: .85; transform: scale(1.25); }
@media (max-width: 640px) {
  .caption { left: 20px; right: auto; flex-direction: row-reverse; }
  .cap-text { align-items: flex-start; text-align: left; }
  .touch { display: none; }
  .hero-text { padding-bottom: max(110px, calc(env(safe-area-inset-bottom) + 96px)); }
}

.band { padding: clamp(72px, 12vw, 140px) clamp(20px, 6vw, 80px); }
.band h2, .closing h2 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.02; margin: 10px 0 18px; letter-spacing: -0.015em; }
.band p { font-size: 18px; line-height: 1.6; color: var(--soft); margin: 0 0 14px; }
.band p.small, .closing .small { font-size: 15px; color: var(--faint); }
.split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.center { max-width: 720px; margin: 0 auto; text-align: center; }

/* the journal, drawn as it looks */
.phone { justify-self: center; width: min(100%, 380px); padding: 22px 20px 16px; border-radius: 40px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(60, 35, 20, .16), 0 2px 6px rgba(60, 35, 20, .06); }
.ph-bar { display: flex; flex-direction: column; margin-bottom: 18px; line-height: 1.3; }
.ph-bar span:first-child { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.ph-bar span:last-child { font-size: 13px; color: var(--soft); }
.ph-words li.me p { font-size: 20px; }
.ph-words li.them p { font-size: 14px; }
.ph-dock { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.ph-input { flex: 1; height: 50px; border-radius: 25px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; padding: 0 16px; color: var(--faint); font-size: 15px; }
.ph-orb { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; animation: breathe 2.4s ease-in-out infinite; }

/* night: the reel of painted days */
.night { background: #1a1310; color: #f3e9df; }
.night .kicker { color: #c9a98f; }
.night p { color: #c7b4a6; }
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); justify-content: safe center; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 48px max(20px, calc(50vw - 560px)) 12px;
  margin: 0 calc(-1 * clamp(20px, 6vw, 80px)); scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.piece { scroll-snap-align: center; display: flex; flex-direction: column; gap: 14px; }
.piece .frame { position: relative; aspect-ratio: 3 / 4.4; border-radius: 24px; overflow: hidden; background: #2b211c; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.piece iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.piece .meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #a8907f; }
.piece b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; color: #f8efe6; display: block; }
.piece i { font-family: var(--serif); font-size: 18px; color: #d9c3b3; }
.piece ol { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid rgba(255,230,210,.12); }
.piece li { font-family: var(--serif); font-size: 17px; line-height: 1.3; padding: 9px 0; border-bottom: 1px solid rgba(255,230,210,.12); color: #e9dbcf; }

.features { list-style: none; margin: 56px auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; }
.features li { padding: 26px 24px; border-top: 1px solid var(--line); }
.features b { display: block; font-size: 26px; margin-bottom: 6px; }
.features span { color: var(--soft); font-size: 16px; line-height: 1.55; }

.closing { text-align: center; padding: clamp(80px, 12vw, 150px) 20px; background: radial-gradient(70% 80% at 50% 100%, #f7d9c2, var(--bg)); }
.closing h2 { margin-bottom: 30px; }
.closing .small { margin-top: 16px; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 26px clamp(20px, 6vw, 80px) max(26px, env(safe-area-inset-bottom)); color: var(--soft); font-size: 14px; border-top: 1px solid var(--line); }
.foot nav { display: flex; gap: 18px; }
.foot a { color: inherit; }

.top .hide-sm { margin-right: 2px; }
@media (max-width: 520px) { .top .hide-sm { display: none; } }

/* the live call, drawn as it looks */
.call-mock { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; min-height: 560px; padding: 24px 24px 22px; color: #f3e9df; background: #12101f; border-color: rgba(255,255,255,.06); }
.cm-sky { position: absolute; inset: 0; background: radial-gradient(70% 45% at 72% 12%, rgba(255,214,160,.28), transparent 70%), linear-gradient(to bottom, #151a33, #2a2142 60%, #4a2f3d); }
.call-mock > *:not(.cm-sky) { position: relative; }
.cm-top { width: 100%; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #c9b8ab; }
.cm-orb { width: 150px; height: 150px; margin: 56px 0 34px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #ffc8a6 0, #f08a5d 45%, #8f3f24 100%); box-shadow: 0 30px 80px rgba(240,138,93,.45); animation: cmBreathe 3.4s ease-in-out infinite; }
.cm-orb span { position: absolute; inset: -12%; border-radius: 50%; border: 2px solid rgba(240,138,93,.4); animation: cmRing 3.4s ease-out infinite; }
@keyframes cmBreathe { 50% { transform: scale(1.07); } }
@keyframes cmRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.band .call-mock .cm-cap { font-size: 24px; line-height: 1.25; text-align: center; margin: 0 0 12px; color: #f8efe6; }
.band .call-mock .cm-me { font-size: 14.5px; line-height: 1.45; color: #c7b6a9; text-align: center; margin: 0; }
.cm-actions { margin-top: auto; display: flex; gap: 14px; align-items: center; padding-top: 30px; }
.cm-actions i { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.cm-actions b { height: 48px; padding: 0 28px; border-radius: 999px; background: #d64533; color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 15px; }

/* pricing */
.pricing { background: radial-gradient(60% 70% at 50% 0%, #f7e3d0, var(--bg)); }
.plan { max-width: 520px; margin: 44px auto 0; padding: 34px 32px 32px; border-radius: 32px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(60, 35, 20, .12); }
.plan-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.plan-name { font-size: 26px; }
.plan-price { color: var(--soft); font-size: 17px; }
.plan-price b { font-size: 64px; line-height: 1; color: var(--ink); font-weight: 400; margin-right: 6px; letter-spacing: -0.02em; }
.plan-sub { color: var(--soft); font-size: 14.5px; }
.plan ul { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan li { padding-left: 30px; position: relative; font-size: 16.5px; line-height: 1.45; }
.plan li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan .pill { width: 100%; }