/* =====================================================================
   Alive: dock, living headline, grass, butterfly, phone story, petals.
   Only the home page loads this file; site.css stays the shared base.
   ===================================================================== */

/* ---------- dock: a small pill that drops in once you scroll, with the page's progress as a lawn line ---------- */
.dock {
  position: fixed; top: 12px; left: 50%; z-index: 30; display: flex; align-items: center; gap: 2px;
  padding: 6px 8px 8px 14px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--stone) 90%, transparent); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-float);
  translate: -50% -160%; opacity: 0; pointer-events: none;
  transition: translate 460ms var(--ease-out), opacity 260ms var(--ease-out);
}
body.scrolled .dock { translate: -50% 0; opacity: 1; pointer-events: auto; }
.dock a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
.dock a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.dock .dock-brand { display: inline-flex; align-items: center; gap: 8px; padding-left: 0; color: var(--ink); font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
.dock .dock-cta { white-space: nowrap; min-height: 40px; padding: 8px 16px; margin-left: 6px; color: var(--stone); }
.dock .dock-cta:hover { background: var(--ink); color: var(--stone); }
.dock-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lawn-deep); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 640px) { .dock a:not(.dock-brand):not(.dock-cta) { display: none; } .dock { gap: 8px; } }

/* ---------- the headline draws a red line under "Finito." ---------- */
.fin { position: relative; display: inline-block; white-space: nowrap; }
.fin-line { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.2em; overflow: visible; pointer-events: none; }
.fin-line path { fill: none; stroke: var(--finito); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
@keyframes draw { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .fin-line path { animation: draw 900ms var(--ease-out) 700ms backwards; }
}

/* ---------- a butterfly wanders across the sky now and then ---------- */
.butterfly { position: absolute; left: 0; top: 0; width: 34px; height: 26px; z-index: 1; pointer-events: none; opacity: 0; }
.butterfly .wing path { fill: var(--marigold); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.butterfly .wing-r path { fill: color-mix(in srgb, var(--marigold) 70%, var(--finito)); }
.butterfly .body { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.butterfly .wing { transform-box: fill-box; }
.butterfly .wing-l { transform-origin: right center; }
.butterfly .wing-r { transform-origin: left center; }
@keyframes flutter { 0% { offset-distance: 0%; opacity: 1; } 42% { offset-distance: 100%; opacity: 1; } 42.1%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flap { to { transform: scaleX(0.3); } }
@media (prefers-reduced-motion: no-preference) {
  .butterfly { offset-path: path('M -40 230 C 180 60, 360 330, 640 170 S 1060 20, 1560 210'); offset-rotate: 0deg; animation: flutter 46s linear 4s infinite; }
  .butterfly .wing { animation: flap 260ms ease-in-out infinite alternate; }
}

/* ---------- grass grows along the lawn edge and sways ---------- */
.strip-wrap { overflow-x: clip; }
.strip { padding-bottom: 20px; }
.grass { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; pointer-events: none; z-index: 3; }
.blade { position: absolute; bottom: -1px; left: var(--x); width: var(--w); height: var(--h); background: var(--lawn); clip-path: polygon(0 100%, 55% 0, 100% 100%); transform-origin: 50% 100%; transform: rotate(var(--lean)); }
.blade:nth-child(3n) { background: var(--lawn-deep); }
@keyframes sway { from { transform: rotate(calc(var(--lean) - 5deg)); } to { transform: rotate(calc(var(--lean) + 5deg)); } }
@keyframes grow { from { transform: scaleY(0) rotate(var(--lean)); } }
@media (prefers-reduced-motion: no-preference) {
  .blade { animation: grow 700ms var(--ease-out) var(--gd) backwards, sway var(--sd) ease-in-out calc(var(--gd) + 700ms) infinite alternate; }
}

/* ---------- section heads settle in too ---------- */
.section-head.reveal { transform: translateY(14px); }
.section-head.reveal.in { transform: none; }

/* ---------- numbers give a little bump when they change ---------- */
@keyframes bump { 40% { transform: scale(1.07); } }
@media (prefers-reduced-motion: no-preference) {
  .money.bump { animation: bump 380ms var(--ease-out); display: inline-block; transform-origin: right center; }
  .money--hero.bump { transform-origin: left center; }
}

/* ---------- Finito sprays petals ---------- */
.petal { position: fixed; z-index: 40; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50% 50% 50% 8%; box-shadow: 0 1px 3px rgba(18, 32, 58, 0.35); pointer-events: none; will-change: transform, opacity; }
.demo-again { margin-top: 14px; }
.demo-again[hidden] { display: none; }
@keyframes pop-in { from { transform: scale(0.8); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .demo-again:not([hidden]) { animation: pop-in 360ms var(--ease-out) both; } }

/* ---------- the phone story: one phone, five moments ---------- */
.story-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.story-phone { position: sticky; top: 84px; display: grid; justify-items: center; padding: 8px 0 24px; }
.story-phone .phone-frame { max-width: 320px; transform: perspective(1000px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 240ms var(--ease-out); }
.phone-stack { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: var(--r); background: var(--sky); }
.phone-stack .shot { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top; border-radius: 0; opacity: 0; transform: scale(1.05); transition: opacity 520ms var(--ease-out), transform 760ms var(--ease-out); }
.phone-stack .shot.is-on { opacity: 1; transform: none; }
.story-steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 56vh; display: grid; align-content: center; gap: 10px; opacity: 0.32; transition: opacity 420ms var(--ease-out); }
.step.is-on { opacity: 1; }
.step h3 { font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.03em; line-height: 1; margin: 0; color: var(--lawn-ink); }
.step p { margin: 0; max-width: 40ch; font-size: 19px; color: var(--lawn-ink); text-wrap: pretty; }
.step-shot { display: none; }
@media (max-width: 899.98px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-phone { display: none; }
  /* on a phone the five moments are a swipeable row of cards, one thumb-width each */
  .story-steps { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -24px; padding: 6px 24px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .story-steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 80%; min-height: 0; opacity: 1; scroll-snap-align: center; display: grid; align-content: start; gap: 8px; padding: 14px 14px 20px; background: var(--stone); border-radius: var(--r-stone); box-shadow: var(--shadow-stone); }
  .step h3 { font-size: 30px; color: var(--ink); margin-top: 6px; }
  .step p { font-size: 16px; color: var(--ink-2); }
  .step-shot { display: block; order: -1; width: 100%; height: 300px; aspect-ratio: auto; object-fit: cover; object-position: top; border: 0; border-radius: var(--r) var(--r) 6px 6px; box-shadow: none; background: var(--sky); }
  .story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
  .story-dots i { width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--lawn-ink) 28%, transparent); transition: width 260ms var(--ease-out), background 260ms var(--ease-out); }
  .story-dots i.is-on { width: 24px; background: var(--lawn-ink); }
}
@media (min-width: 900px) { .story-dots { display: none; } }

/* ---------- phones: tighter, thumb-first ---------- */
@media (max-width: 520px) {
  .section { padding-top: 44px; }
  .cta .btn { width: 100%; }
  .receipt .chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -22px; padding: 2px 22px 6px; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%); }
  .receipt .chips::-webkit-scrollbar { display: none; }
  .receipt .chip { scroll-snap-align: start; }
}

/* ---------- Pro perks: a plain list on the lawn, not six identical cards ---------- */
.perk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.perk-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.perk-list svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--stone); color: var(--lawn-deep); box-shadow: var(--shadow-stone); transition: transform 260ms var(--ease-out); }
.perk-list li:hover svg { transform: rotate(-8deg) scale(1.08); }
.perk-list h3 { margin: 2px 0 4px; color: var(--lawn-ink); font-size: 20px; }
.perk-list p { margin: 0; color: var(--lawn-ink-2); text-wrap: pretty; }
.compare { margin-top: 36px; }
@media (max-width: 760px) { .perk-list { grid-template-columns: 1fr; } }

/* ---------- soil footer: the closing call ---------- */
.foot-cta { padding-bottom: 44px; margin-bottom: 40px; border-bottom: 1px solid color-mix(in srgb, var(--soil-ink) 18%, transparent); }
.foot-cta h2 { font-size: clamp(34px, 5vw, 56px); color: var(--soil-ink); margin: 0 0 8px; }
.foot-cta p { margin: 0; color: var(--soil-ink-2); }
.foot-cta .cta { margin-top: 22px; }

/* ---------- hover: stones lift, buttons press ---------- */
.stone { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
@media (hover: hover) {
  .plan-card:hover, .demo-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
  .btn:hover:not([aria-disabled='true']) { transform: translateY(-2px); }
  .chip:hover { transform: translateY(-1px); }
}
/* browser surfaces carry the design too */
html { scrollbar-color: var(--lawn-deep) var(--sky); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--sky); }
::-webkit-scrollbar-thumb { background: var(--lawn-deep); border-radius: 8px; border: 3px solid var(--sky); }
:root { caret-color: var(--lawn-deep); }
.step, .section[id] { scroll-margin-top: 70px; }

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
  .blade, .butterfly { animation: none; }
  .butterfly { display: none; }
  .phone-stack .shot, .step { transition: none; }
  .story-phone .phone-frame { transform: none; }
}

/* ---------- hero: the app peeks up under the buttons (wide screens) ---------- */
.hero-peek { display: none; }
@media (min-width: 900px) {
  .hero-peek { display: block; width: 236px; height: 236px; margin-top: 30px; overflow: hidden; transform: rotate(-3deg); transform-origin: 50% 100%; }
  .hero-peek .phone-frame { max-width: none; width: 236px; border-radius: var(--r-band) var(--r-band) 0 0; padding-bottom: 0; }
  .hero-peek .phone-frame img { border-radius: var(--r) var(--r) 0 0; }
}
@keyframes peek { from { transform: translateY(70px) rotate(-3deg); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .hero-peek { animation: peek 800ms var(--ease-out) 420ms backwards; } }
.band-soil { padding-top: 88px; }