@font-face { font-family: Inter; src: url(assets/fonts/Inter-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/Inter-Medium.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/Inter-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/Inter-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --bg: #F7F5EF;
  --green: #245C4A;
  --amber: #D6A24A;
  --text: #252923;
  --muted: #777B74;
  --card: #FFFFFF;
  --divider: #E5E2D9;
  --sage: #E5EEE8;
  --night: #171B19;
  --night-2: #232925;
  --green-n: #6FA58B;
  --amber-n: #E4B968;
  --text-n: #F3F0E8;
  --muted-n: #AEB8B0;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-intro { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; flex: none; }
em { font-style: italic; color: var(--green); }

/* ---------- shared ---------- */
.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green); font-weight: 600; margin-bottom: 1.2rem;
}
.eyebrow.light { color: var(--amber-n); }
.big-title {
  font-family: var(--serif); font-weight: 400; line-height: 1.02;
  font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -.02em; color: var(--text-n);
}
.big-title.dark { color: var(--text); }
.big-title em { color: var(--amber-n); }
.big-title.dark em { color: var(--green); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--muted-n); max-width: 36rem; margin: 1.5rem auto 0; }
.lead.dark { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--green); color: #fff; font-weight: 600;
  padding: 1rem 1.6rem; border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(36, 92, 74, .6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(36, 92, 74, .7); }
.btn-ghost { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.btn-ghost:hover { background: var(--sage); box-shadow: inset 0 0 0 1.5px var(--green); }
.btn-small { padding: .65rem 1.15rem; font-size: .9rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.reveal { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--night);
  display: grid; place-items: center; overflow: hidden;
  transition: clip-path 1.3s var(--ease), opacity .6s 1s;
  clip-path: circle(150% at 50% 50%);
}
.intro.done { clip-path: circle(0% at 50% 50%); opacity: 0; pointer-events: none; }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-core { position: relative; display: grid; justify-items: center; text-align: center; }
.intro-ring {
  position: absolute; top: 50%; left: 50%; width: 20rem; height: 20rem; margin: -13rem 0 0 -10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 185, 104, .35), rgba(111, 165, 139, .12) 45%, transparent 70%);
  animation: glow 3s var(--ease) both;
}
.intro-logo {
  width: clamp(7rem, 18vw, 10rem);
  animation: logoIn 2s var(--ease) both;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5));
}
.intro-word { display: flex; gap: .04em; margin-top: 1.6rem; font-family: var(--serif); font-size: clamp(2.5rem, 7vw, 4.2rem); color: var(--text-n); }
.intro-word span { display: inline-block; animation: letter 1.1s var(--ease) both; }
.intro-word span:nth-child(1) { animation-delay: 1.0s; }
.intro-word span:nth-child(2) { animation-delay: 1.08s; }
.intro-word span:nth-child(3) { animation-delay: 1.16s; }
.intro-word span:nth-child(4) { animation-delay: 1.24s; }
.intro-word span:nth-child(5) { animation-delay: 1.32s; }
.intro-word span:nth-child(6) { animation-delay: 1.40s; }
.intro-tag { color: var(--muted-n); margin-top: .8rem; letter-spacing: .08em; animation: fadeUp 1.2s 1.9s var(--ease) both; }
.intro-skip {
  position: absolute; bottom: 2rem; right: 2rem; background: none; border: 1px solid rgba(243, 240, 232, .25);
  color: var(--muted-n); padding: .55rem 1rem; border-radius: 999px; font: inherit; font-size: .8rem; cursor: pointer;
}
.intro-skip:hover { color: var(--text-n); border-color: var(--text-n); }

@keyframes logoIn {
  0% { opacity: 0; transform: scale(.4) rotate(-12deg); filter: blur(20px) brightness(2); }
  60% { opacity: 1; filter: blur(0) brightness(1.15); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }
}
@keyframes glow { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.4); opacity: .7; } }
@keyframes letter { from { opacity: 0; transform: translateY(.6em) rotateX(-90deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 1rem; left: 50%; z-index: 50;
  transform: translate(-50%, -150%);
  display: flex; align-items: center; gap: 2rem;
  padding: .55rem .6rem .55rem 1.1rem; border-radius: 999px;
  background: rgba(247, 245, 239, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 40px -15px rgba(23, 27, 25, .3), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: transform 1s .2s var(--ease), background .4s;
  width: max-content; max-width: calc(100% - 32px);
}
body.ready .nav { transform: translate(-50%, 0); }
.nav.on-dark { background: rgba(35, 41, 37, .7); color: var(--text-n); box-shadow: 0 10px 40px -15px #000, inset 0 0 0 1px rgba(255, 255, 255, .08); }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.25rem; }
.brand img { width: 1.9rem; }
.nav-links { display: flex; gap: 1.5rem; font-size: .9rem; }
.nav-links a { opacity: .75; transition: opacity .3s; }
.nav-links a:hover { opacity: 1; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2rem;
  padding: 7rem clamp(16px, 6vw, 6rem) 4rem; overflow: hidden;
  --mx: 0; --my: 0;
}
.hero-glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at calc(70% + var(--mx) * 6%) calc(45% + var(--my) * 6%), rgba(214, 162, 74, .22), transparent 70%),
    radial-gradient(45% 45% at 20% 80%, rgba(36, 92, 74, .14), transparent 70%);
  pointer-events: none;
}
.leaves { position: absolute; inset: 0; pointer-events: none; }
.leaf {
  position: absolute; top: -10%; width: 26px; height: 40px;
  background: linear-gradient(135deg, #8DBA6E, var(--green));
  border-radius: 0 100% 0 100%; opacity: .5;
  animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0); }
  100% { transform: translate3d(var(--drift), 120vh, 0) rotate(var(--spin)); }
}
.hero-copy { position: relative; z-index: 2; }
.hero-title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .98; letter-spacing: -.03em; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.hero-title .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 90ms + .2s); }
body.ready .hero-title .w > span { transform: none; }
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--muted); max-width: 32rem; margin: 1.8rem 0 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-stage { position: relative; height: min(82vh, 760px); display: grid; place-items: center; perspective: 1400px; }
.phone {
  --pw: 300px;
  width: var(--pw); aspect-ratio: 9 / 19.2; font-size: calc(var(--pw) / 32);
  border-radius: 4.6em; padding: .9em; position: relative; text-align: left;
  background: linear-gradient(145deg, #2e3430, #121513);
  box-shadow: 0 0 0 .2em #3a413c, 0 4em 8em -2em rgba(23, 27, 25, .55), 0 1.5em 3em -1em rgba(23, 27, 25, .35);
}
.phone-hero {
  --pw: clamp(240px, 24vw, 330px);
  transform: rotateY(calc(var(--mx) * -14deg - 8deg)) rotateX(calc(var(--my) * 10deg + 4deg)) translateY(calc(var(--hs, 0) * -80px)) scale(calc(1 - var(--hs, 0) * .12));
  transition: transform .6s var(--ease);
  animation: phoneIn 1.6s .4s var(--ease) both paused;
}
body.ready .phone-hero { animation-play-state: running; }
@keyframes phoneIn { from { opacity: 0; translate: 0 18%; rotate: x 30deg; } to { opacity: 1; translate: 0 0; rotate: x 0deg; } }

/* floating fragments */
.frag {
  position: absolute; top: calc(50% + var(--y)); left: calc(50% + var(--x)); z-index: 3;
  transform: translate(-50%, -50%)
    translate(calc(var(--mx) * var(--d) * 26px), calc(var(--my) * var(--d) * 26px + var(--hs, 0) * var(--d) * -120px))
    rotate(var(--r));
  transition: transform .8s var(--ease);
}
.frag > * { animation: bob 6s ease-in-out infinite, fragIn 1.4s var(--ease) both paused; animation-delay: calc(var(--d) * -1.5s), calc(.9s + var(--d) * .25s); }
body.ready .frag > * { animation-play-state: running; }
@keyframes bob { 50% { translate: 0 -12px; } }
@keyframes fragIn { from { opacity: 0; scale: .6; filter: blur(10px); } to { opacity: 1; scale: 1; filter: none; } }
.polaroid { background: #fff; padding: 9px 9px 12px; border-radius: 6px; box-shadow: 0 20px 40px -18px rgba(23, 27, 25, .45); font-size: .78rem; color: var(--muted); }
.polaroid .ph { width: 130px; height: 110px; border-radius: 3px; margin-bottom: 8px; }
.chip-card {
  display: flex; align-items: center; gap: .6rem; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px);
  padding: .7rem .95rem; border-radius: 1.1rem; font-size: .86rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 18px 40px -18px rgba(23, 27, 25, .45);
}
.chip-card.small { font-size: .78rem; padding: .55rem .8rem; }
.chip-card > svg { font-size: 1.15rem; color: var(--amber); }
.chip-card .ok { color: var(--green); }
.chip-card .wave { font-size: 6px; }
.chip-card .play { width: 28px; height: 28px; }
.chip-card .play svg { font-size: 14px; }
.chip-card b { color: var(--muted); font-weight: 500; }
.sticky {
  width: 160px; padding: 1rem; background: #f8e7b5; color: #5a4a22; font-family: var(--serif); font-style: italic; font-size: .92rem; line-height: 1.35;
  border-radius: 2px 2px 16px 2px; box-shadow: 0 20px 30px -18px rgba(90, 74, 34, .55);
}
.scroll-cue { position: absolute; bottom: 1.8rem; left: 50%; translate: -50% 0; width: 26px; height: 42px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--muted); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--green); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- manifesto ---------- */
.manifesto { height: 260vh; position: relative; }
.manifesto-pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 clamp(16px, 8vw, 10rem); }
.manifesto-text { font-family: var(--serif); font-size: clamp(1.8rem, 4.4vw, 3.8rem); line-height: 1.2; letter-spacing: -.015em; max-width: 64rem; }
.manifesto-text .mw { opacity: .13; transition: opacity .5s, color .5s; }
.manifesto-text .mw.lit { opacity: 1; }
.manifesto-text .mw.key.lit { color: var(--green); font-style: italic; }

/* ---------- story ---------- */
.story { height: 600vh; position: relative; background: linear-gradient(var(--bg), #EFEBE0 30%, #EFEBE0 70%, var(--bg)); }
.story-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-items: center;
  padding: 6.5rem clamp(16px, 6vw, 6rem) 2rem; column-gap: 3rem;
}
.story-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 2rem; }
.story-head .eyebrow { margin: 0; white-space: nowrap; }
.story-bar { flex: 1; height: 2px; background: var(--divider); border-radius: 2px; overflow: hidden; }
.story-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.story-steps { list-style: none; position: relative; height: 22rem; }
.story-steps li { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .6s; }
.story-steps .num { font-family: var(--serif); font-size: clamp(5rem, 11vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--amber); opacity: .8; }
.story-steps h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -.02em; margin: .2rem 0 1rem; }
.story-steps p { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--muted); max-width: 30rem; }
.story-steps li > * { transform: translateY(40px); filter: blur(8px); opacity: 0; transition: all .9s var(--ease); }
.story-steps li > :nth-child(2) { transition-delay: .07s; }
.story-steps li > :nth-child(3) { transition-delay: .14s; }
.story[data-step="0"] li:nth-child(1), .story[data-step="1"] li:nth-child(2), .story[data-step="2"] li:nth-child(3),
.story[data-step="3"] li:nth-child(4), .story[data-step="4"] li:nth-child(5) { opacity: 1; pointer-events: auto; }
.story[data-step="0"] li:nth-child(1) > *, .story[data-step="1"] li:nth-child(2) > *, .story[data-step="2"] li:nth-child(3) > *,
.story[data-step="3"] li:nth-child(4) > *, .story[data-step="4"] li:nth-child(5) > * { transform: none; filter: none; opacity: 1; }

.story-stage { position: relative; height: 100%; display: grid; place-items: center; }
.story-orb {
  position: absolute; width: 36rem; height: 36rem; max-width: 120%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from calc(var(--p, 0) * 360deg), rgba(36, 92, 74, .25), rgba(214, 162, 74, .3), rgba(229, 238, 232, .6), rgba(36, 92, 74, .25));
  filter: blur(60px); animation: spin 18s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.phone-story { --pw: clamp(230px, min(24vw, 38vh), 330px); transform: rotateY(-10deg) rotateX(4deg); }
.story-stage { perspective: 1400px; }

/* ---------- privacy ---------- */
.privacy { position: relative; background: var(--night); color: var(--text-n); padding: clamp(6rem, 14vw, 11rem) clamp(16px, 6vw, 6rem); overflow: hidden; text-align: center; }
.privacy-inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.vault-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-top: 4.5rem; text-align: left; }
.vault-list li {
  padding: 1.6rem; border-radius: 1.4rem; background: rgba(35, 41, 37, .7); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(243, 240, 232, .08); display: grid; gap: .5rem; align-content: start;
}
.vault-list li:nth-child(2) { transition-delay: .08s; } .vault-list li:nth-child(3) { transition-delay: .16s; }
.vault-list li:nth-child(4) { transition-delay: .24s; } .vault-list li:nth-child(5) { transition-delay: .32s; }
.vault-list svg { font-size: 1.6rem; color: var(--amber-n); margin-bottom: .5rem; }
.vault-list b { font-size: 1.05rem; }
.vault-list span { color: var(--muted-n); font-size: .92rem; line-height: 1.55; }

/* ---------- features ---------- */
.features { padding: clamp(6rem, 12vw, 10rem) clamp(16px, 6vw, 6rem); max-width: 84rem; margin: 0 auto; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 4rem; perspective: 1200px; }
.tile {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative; padding: 1.8rem; border-radius: 1.6rem; background: var(--card); overflow: hidden; min-height: 13rem;
  box-shadow: 0 1px 0 var(--divider), 0 20px 50px -30px rgba(23, 27, 25, .35);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity 1.1s var(--ease), filter 1.1s var(--ease), transform .5s var(--ease), box-shadow .4s;
}
.tile.reveal:not(.in) { transform: translateY(40px); }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(18rem circle at var(--gx) var(--gy), rgba(214, 162, 74, .16), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tile:hover::before { opacity: 1; }
.tile:hover { box-shadow: 0 1px 0 var(--divider), 0 40px 70px -35px rgba(36, 92, 74, .45); }
.t-wide { grid-column: span 2; }
.tile > svg { font-size: 2rem; color: var(--green); padding: .55rem; width: 2.9rem; height: 2.9rem; background: var(--sage); border-radius: .9rem; }
.tile h3 { font-size: 1.15rem; font-weight: 600; margin: 1.2rem 0 .5rem; }
.tile p { color: var(--muted); line-height: 1.55; font-size: .95rem; max-width: 24rem; }
.tile-art { position: absolute; right: 1.6rem; bottom: 1.6rem; }
.art-check { display: grid; gap: .45rem; }
.art-check span { width: 7rem; height: .7rem; border-radius: 1rem; background: var(--sage); position: relative; padding-left: 1.2rem; }
.art-check span::before { content: ""; position: absolute; left: -1.2rem; top: -.15rem; width: 1rem; height: 1rem; border-radius: .3rem; background: var(--green); }
.art-check span:last-child::before { background: none; box-shadow: inset 0 0 0 2px var(--divider); }
.art-wave { font-size: 9px; position: static; margin-top: 1.2rem; }
.art-wave.tile-art { display: flex; align-items: center; gap: 4px; height: 2.4rem; }
.art-wave i { width: 4px; height: 30%; border-radius: 4px; background: var(--amber); animation: wave 1.3s ease-in-out infinite; }
.art-wave i:nth-child(odd) { animation-delay: -.6s; } .art-wave i:nth-child(3n) { animation-delay: -.3s; }
.art-search span { display: inline-block; padding: .6rem 1rem .6rem 2.2rem; border-radius: 2rem; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--green); font-size: .9rem; position: relative; }
.art-search span::before { content: ""; position: absolute; left: .9rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.4rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--green); }
.art-search span::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--green); margin-left: 2px; vertical-align: -2px; animation: caretB 1s step-end infinite; }
@keyframes caretB { 50% { opacity: 0; } }

/* ---------- day ---------- */
.day { height: 420vh; position: relative; background: linear-gradient(var(--bg), var(--sage)); }
.day-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.day-head { padding: 0 clamp(16px, 6vw, 6rem); margin-bottom: 3rem; }
.day-track { display: flex; gap: 2rem; padding: 0 clamp(16px, 6vw, 6rem); width: max-content; transform: translateX(calc(var(--dx, 0) * -1px)); will-change: transform; }
.moment { width: clamp(16rem, 28vw, 22rem); flex: none; }
.moment time { display: block; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--amber); margin-bottom: 1rem; }
.m-card { background: var(--card); padding: 1.8rem; border-radius: 1.6rem; box-shadow: 0 30px 60px -35px rgba(23, 27, 25, .4); transition: transform .8s var(--ease); }
.m-ic { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.3rem; margin-bottom: 1.2rem; }
.m-card h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.m-card p { color: var(--muted); line-height: 1.55; }
.moment:nth-child(even) { margin-top: 4rem; }
.day-line { margin: 3rem clamp(16px, 6vw, 6rem) 0; height: 2px; background: var(--divider); }
.day-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- cta ---------- */
.cta { text-align: center; padding: clamp(6rem, 14vw, 11rem) clamp(16px, 6vw, 6rem); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; left: 50%; top: 28%; width: 50rem; height: 50rem; max-width: 160vw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(214, 162, 74, .2), transparent 60%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { scale: 1.15; opacity: .7; } }
.cta-logo { width: clamp(7rem, 14vw, 10rem); margin: 0 auto 2rem; position: relative; }
.cta-logo img { animation: float 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(36, 92, 74, .25)); }
@keyframes float { 50% { transform: translateY(-14px) rotate(2deg); } }
.cta .hero-cta { justify-content: center; margin-top: 2.5rem; position: relative; }
.cta .lead, .cta .big-title { position: relative; }
.badge-soon { text-decoration: none; display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.4rem; border-radius: 1rem; background: var(--text); color: var(--text-n); text-align: left; line-height: 1.15; font-weight: 600; }
.badge-soon svg { font-size: 1.6rem; color: var(--amber-n); }
.badge-soon small { display: block; font-size: .7rem; font-weight: 400; color: var(--muted-n); }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem clamp(16px, 6vw, 6rem); border-top: 1px solid var(--divider); color: var(--muted); font-size: .9rem; }
.foot .brand { color: var(--text); }

/* ---------- app mockup: sizes in Flutter dp (calc(1 * var(--u)) = 1dp of a 360dp-wide screen) ---------- */
.phone { --u: calc(var(--pw) * .002622); }
.screen {
  width: 100%; height: 100%; border-radius: 3.8em; background: var(--bg); overflow: hidden; position: relative;
  color: var(--text); font-size: calc(13.5 * var(--u)); line-height: 1.3; letter-spacing: 0;
}
.status { display: flex; justify-content: space-between; align-items: center; height: calc(40 * var(--u)); padding: calc(8 * var(--u)) calc(26 * var(--u)) 0; font-size: calc(13 * var(--u)); position: relative; z-index: 5; }
.status .cam { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #111; }
.status .sys { display: flex; gap: calc(4 * var(--u)); align-items: flex-end; }
.status .sys i { width: calc(14 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--text); opacity: .85; }
.status .sys i:nth-child(1) { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.status .sys i:nth-child(2) { clip-path: polygon(50% 100%, 0 20%, 100% 20%); }
.status .sys i:nth-child(3) { width: calc(20 * var(--u)); }
.sprig { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: rgba(36, 92, 74, .6); flex: none; }

/* home */
.home { padding: calc(6 * var(--u)) calc(20 * var(--u)) 0; }
.hd { display: flex; align-items: flex-start; gap: calc(4 * var(--u)); }
.hd-txt { flex: 1; min-width: 0; }
.hd-txt p { color: var(--muted); white-space: nowrap; }
.hd-txt h3 { display: flex; align-items: flex-start; gap: calc(4 * var(--u)); margin: calc(2 * var(--u)) 0; font-size: calc(25 * var(--u)); font-weight: 700; letter-spacing: calc(-.6 * var(--u)); line-height: 1.15; white-space: nowrap; }
.avatar { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin-top: calc(4 * var(--u)); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green); border: calc(3 * var(--u)) solid var(--sage); color: var(--amber); font-size: calc(22 * var(--u)); }
.bell { position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-top: calc(3 * var(--u)); flex: none; display: grid; place-items: center; font-size: calc(25 * var(--u)); }
.bell i { position: absolute; top: calc(9 * var(--u)); right: calc(9 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--amber); }
.search { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(48 * var(--u)); margin-top: calc(12 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(16 * var(--u)); border-radius: 999px; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .12); color: var(--muted); }
.search > svg:first-child { font-size: calc(22 * var(--u)); color: var(--text); }
.search span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .g { font-size: calc(21 * var(--u)); color: var(--green); }
.cats { display: flex; gap: calc(8 * var(--u)); height: calc(36 * var(--u)); margin: calc(12 * var(--u)) calc(-20 * var(--u)) calc(4 * var(--u)); padding: 0 calc(16 * var(--u)); overflow: hidden; }
.cats span { flex: none; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u)); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--divider); font-weight: 500; }
.cats span svg { font-size: calc(17 * var(--u)); color: var(--c, var(--text)); }
.cats span b { padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: 999px; background: var(--sage); color: var(--green); font-size: calc(11 * var(--u)); font-weight: 600; }
.cats span.on, .cats .sel-out { background: var(--green); color: #fff; box-shadow: none; font-weight: 600; }
.cats span.on svg, .cats .sel-out svg { color: #fff; }
.cats span.on b, .cats .sel-out b { background: rgba(255, 255, 255, .18); color: #fff; }
.sec { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(30 * var(--u)); margin: calc(8 * var(--u)) 0 calc(2 * var(--u)); color: var(--green); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: calc(1.2 * var(--u)); }
.sec .pin { font-size: calc(15 * var(--u)); color: var(--amber); }
.sec span { margin-left: auto; color: var(--muted); font-size: calc(12.5 * var(--u)); font-weight: 400; letter-spacing: 0; }
.sec span.link { color: var(--green); font-size: calc(13.5 * var(--u)); font-weight: 500; }

/* note card */
.nc { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: calc(12 * var(--u)); margin-bottom: calc(8 * var(--u)); padding: calc(4 * var(--u)) 0 calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; }
.nc > * { position: relative; z-index: 1; }
.nc.task::before, .nc.task::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; background: var(--sage); }
.nc.task::before { right: calc(-40 * var(--u)); bottom: calc(-50 * var(--u)); width: calc(150 * var(--u)); height: calc(110 * var(--u)); opacity: .8; }
.nc.task::after { right: calc(30 * var(--u)); bottom: calc(-60 * var(--u)); width: calc(120 * var(--u)); height: calc(90 * var(--u)); opacity: .5; }
.lead { flex: none; margin-top: calc(6 * var(--u)); }
.thumb { width: calc(52 * var(--u)); height: calc(52 * var(--u)); display: grid; place-items: center; border-radius: calc(12 * var(--u)); font-size: calc(23 * var(--u)); }
.th-room { background: linear-gradient(135deg, #F3E6D3, #D9BC94); color: rgba(140, 106, 69, .85); }
.th-coast { background: linear-gradient(135deg, #7FB7D4, #6E9A5A); color: rgba(255, 255, 255, .85); }
.board-thumb { background: repeating-linear-gradient(0deg, transparent 0 calc(7 * var(--u)), #d9d2c2 calc(7 * var(--u)) calc(8 * var(--u))), #f6f0e2; }
.nc-body { flex: 1; min-width: 0; }
.nc-top { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); padding-right: calc(8 * var(--u)); }
.nc-top b { flex: 1; min-width: 0; font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: calc(-.1 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-top time { font-size: calc(12 * var(--u)); color: var(--muted); white-space: nowrap; }
.nc-top .pin { font-size: calc(18 * var(--u)); color: var(--amber); }
.nc-top .dots { font-size: calc(20 * var(--u)); color: var(--muted); }
.nc-body > p { margin-top: calc(-4 * var(--u)); padding-right: calc(12 * var(--u)); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) 0; margin-top: calc(6 * var(--u)); padding-right: calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.meta > span { display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap; }
.meta > span svg { font-size: calc(14 * var(--u)); color: var(--c, var(--muted)); }
.meta > i { padding: 0 calc(6 * var(--u)); font-style: normal; font-size: calc(12 * var(--u)); }
.meta .tag { margin-left: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(229, 238, 232, .7); }
.meta .date { margin-left: auto; padding-right: calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
.check { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: calc(6 * var(--u)); border-radius: 50%; border: calc(1.8 * var(--u)) solid var(--divider); }
.check.on, .tick .check { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/75% no-repeat; border-color: var(--green); }
.cl { margin-top: calc(-4 * var(--u)); padding-right: calc(12 * var(--u)); }
.cl div { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(3 * var(--u)) 0; color: var(--muted); }
.cl .done { text-decoration: line-through; }
.sq { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: none; border-radius: calc(4 * var(--u)); border: calc(1.6 * var(--u)) solid var(--muted); }
.cl .done .sq { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat; border-color: var(--green); }
.vlead { display: flex; align-items: center; }
.vplay { width: calc(42 * var(--u)); height: calc(42 * var(--u)); margin-right: calc(10 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--green); font-size: calc(26 * var(--u)); }
.vbars { display: flex; align-items: center; height: calc(100 * var(--u)); max-height: calc(32 * var(--u)); }
.vbars i { width: calc(2.5 * var(--u)); height: 30%; margin: 0 calc(1.6 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--green); animation: wave 1.2s ease-in-out infinite; }
.vbars i:nth-child(3n) { animation-delay: -.4s; } .vbars i:nth-child(3n+1) { animation-delay: -.8s; }

/* bottom bar with hump, sprout and add button */
.bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(92 * var(--u)); filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(0, 0, 0, .16)); }
.bar-bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; }
.bar-items { position: absolute; left: 0; right: 0; top: calc(16 * var(--u)); height: calc(60 * var(--u)); display: flex; align-items: center; }
.bar-items span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); color: var(--muted); font-size: calc(12.5 * var(--u)); }
.bar-items span svg { font-size: calc(23 * var(--u)); }
.bar-items span.on { color: var(--text); font-weight: 600; }
.bar-items span.on svg { color: var(--green); }
.bar-items .gap { flex: none; width: calc(76 * var(--u)); }
.bar-sprig { position: absolute; top: calc(-17 * var(--u)); left: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(-11 * var(--u)); }
.fab { position: absolute; top: 0; left: 50%; width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin-left: calc(-27 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: calc(28 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(36, 92, 74, .5); }

/* shared bits used by the hero fragments and feature tiles */
.ph-sea { background: linear-gradient(170deg, #9fd0e6 0 35%, #2f7d99 36% 60%, #b98a52 61% 80%, #6c7e3d); }
.play { width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--green); }
.play svg { font-size: 1.4em; }
.wave { display: flex; align-items: center; gap: .22em; height: 2.6em; }
.wave i { width: .26em; height: 30%; border-radius: 1em; background: var(--green); animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -.3s; } .wave i:nth-child(3n+1) { animation-delay: -.7s; } .wave i:nth-child(4n) { animation-delay: -.5s; }
@keyframes wave { 50% { height: 100%; } }
@keyframes show { to { opacity: 1; } }
@keyframes hide { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(calc(24 * var(--u))); } }

/* ---------- story scenes ---------- */
.scene { position: absolute; inset: calc(40 * var(--u)) 0 0; opacity: 0; transform: scale(.94) translateY(2em); filter: blur(.6em); transition: all .8s var(--ease); }
.story[data-step="0"] [data-scene="0"], .story[data-step="1"] [data-scene="1"], .story[data-step="2"] [data-scene="2"],
.story[data-step="3"] [data-scene="3"], .story[data-step="4"] [data-scene="4"] { opacity: 1; transform: none; filter: none; }

/* 0 capture */
.ghost { height: calc(84 * var(--u)); margin-bottom: calc(8 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; }
.tap-ring { position: absolute; z-index: 4; left: 50%; bottom: calc(38 * var(--u)); width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin-left: calc(-27 * var(--u)); border-radius: 50%; animation: tapRing .9s .2s var(--ease) both; }
@keyframes tapRing { 0% { box-shadow: 0 0 0 0 rgba(214, 162, 74, .8); transform: scale(.85); } 100% { box-shadow: 0 0 0 calc(30 * var(--u)) rgba(214, 162, 74, 0); transform: scale(1); } }
.scrim { position: absolute; inset: calc(-40 * var(--u)) 0 0; z-index: 5; background: rgba(0, 0, 0, .32); animation: fadeIn .4s .6s both; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 0 calc(20 * var(--u)) calc(28 * var(--u)); border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; background: var(--bg); animation: sheetUp .7s .7s var(--ease) both; }
@keyframes sheetUp { from { transform: translateY(100%); } }
.handle { display: block; width: calc(32 * var(--u)); height: calc(4 * var(--u)); margin: calc(22 * var(--u)) auto calc(14 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(119, 123, 116, .4); }
.sheet h4 { margin-bottom: calc(12 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: calc(-.2 * var(--u)); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.opts > span { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; font-weight: 600; animation: rise .6s var(--ease) both, glow 5s ease-in-out infinite; animation-delay: calc(1s + var(--i) * .07s), calc(1.8s + var(--i) * .9s); }
.opts > span.full { grid-column: 1 / -1; }
.opts .ic { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; display: grid; place-items: center; border-radius: calc(12 * var(--u)); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-size: calc(20 * var(--u)); }
.opts small { display: block; color: var(--muted); font-size: calc(12 * var(--u)); font-weight: 400; }
.opts .arr { margin-left: auto; color: var(--muted); font-size: calc(18 * var(--u)); }
@keyframes glow { 0%, 16%, 100% { box-shadow: none; } 8% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--amber); } }

/* 1 editor */
.ed-bar { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(16 * var(--u)); }
.sqb { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; display: grid; place-items: center; border-radius: calc(12 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--divider); font-size: calc(20 * var(--u)); }
.saved { margin: 0 auto 0 calc(4 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(36, 92, 74, .1); color: var(--green); font-size: calc(12 * var(--u)); font-weight: 600; }
.ed { padding: calc(4 * var(--u)) calc(20 * var(--u)) 0; }
.kind-row { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--muted); font-size: calc(12 * var(--u)); }
.kind { display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: var(--sage); color: var(--green); font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: calc(1.2 * var(--u)); }
.kind svg { font-size: calc(13 * var(--u)); }
.ed-title { margin-top: calc(8 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: calc(-.8 * var(--u)); line-height: 1.15; }
.rule { display: block; width: calc(36 * var(--u)); height: calc(3 * var(--u)); margin-top: calc(12 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--amber); }
.strip { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.shot { position: relative; width: calc(96 * var(--u)); height: calc(96 * var(--u)); flex: none; overflow: hidden; display: grid; place-items: center; border-radius: calc(16 * var(--u)); font-size: calc(36 * var(--u)); }
.shot.board { display: block; padding: calc(10 * var(--u)) calc(10 * var(--u)); background: repeating-linear-gradient(0deg, transparent 0 calc(13 * var(--u)), #ded6c4 calc(13 * var(--u)) calc(14 * var(--u))), #f6f0e2; color: #2c3e66; font-family: var(--serif); font-style: italic; font-size: calc(10.5 * var(--u)); line-height: 1.3; }
.shot.board p + p { margin-top: calc(6 * var(--u)); }
.shot.board u { text-decoration-color: var(--amber); }
.scan-line { position: absolute; left: 0; right: 0; top: 0; height: calc(26 * var(--u)); background: linear-gradient(transparent, rgba(214, 162, 74, .5)); border-bottom: calc(2 * var(--u)) solid var(--amber); animation: scanY .9s ease-in-out 2 alternate, hide .2s 1.8s forwards; }
@keyframes scanY { from { transform: translateY(calc(-26 * var(--u))); } to { transform: translateY(calc(96 * var(--u))); } }
.ocr-badge { position: absolute; right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); padding: calc(4 * var(--u)); display: grid; border-radius: calc(8 * var(--u)); background: rgba(0, 0, 0, .55); color: #fff; font-size: calc(14 * var(--u)); opacity: 0; animation: show .3s 1.9s forwards; }
.swap { position: relative; height: calc(56 * var(--u)); margin-top: calc(8 * var(--u)); }
.reading, .ocr-card { position: absolute; inset: 0; display: flex; align-items: center; }
.reading { gap: calc(8 * var(--u)); animation: hide .3s 1.9s forwards; }
.spin { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--sage); border-top-color: var(--green); animation: spin .8s linear infinite; }
.ocr-card { gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--sage); opacity: 0; animation: show .4s 2s forwards; }
.ocr-card .ic { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; display: grid; place-items: center; border-radius: calc(10 * var(--u)); background: rgba(36, 92, 74, .12); color: var(--green); font-size: calc(18 * var(--u)); }
.ocr-card b { flex: 1; font-weight: 600; }
.extract { display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--green); color: #fff; font-size: calc(12.5 * var(--u)); font-weight: 600; animation: press .5s 2.6s both; }
@keyframes press { 50% { transform: scale(.86); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(214, 162, 74, .55); } }
.atile { margin-top: calc(12 * var(--u)); overflow: hidden; border-radius: calc(16 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--divider); }
.a-row { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)); }
.aplay { width: calc(48 * var(--u)); height: calc(48 * var(--u)); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: calc(22 * var(--u)); }
.a-mid { flex: 1; }
.a-mid b { font-size: calc(14 * var(--u)); font-weight: 600; }
.seek { position: relative; height: calc(4 * var(--u)); margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--divider); }
.seek i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: calc(2 * var(--u)); background: var(--green); }
.seek i::after { content: ""; position: absolute; right: calc(-7 * var(--u)); top: calc(-5 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--green); }
.times { display: flex; justify-content: space-between; color: var(--muted); font-size: calc(11 * var(--u)); }
.a-row .del { font-size: calc(20 * var(--u)); color: var(--muted); }
.a-strip { position: relative; height: calc(60 * var(--u)); background: rgba(229, 238, 232, .6); }
.a-prog, .a-tx { position: absolute; inset: calc(10 * var(--u)) calc(12 * var(--u)); }
.a-prog small { color: var(--muted); font-size: calc(12 * var(--u)); }
.pb { height: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); overflow: hidden; border-radius: calc(2 * var(--u)); background: rgba(36, 92, 74, .15); }
.pb i { display: block; width: 0; height: 100%; background: var(--green); animation: grow 1.6s 3.2s ease-in-out forwards; }
@keyframes grow { to { width: 100%; } }
.a-prog { animation: hide .3s 4.9s forwards; }
.a-tx { opacity: 0; animation: show .4s 5s forwards; }
.a-tx-h { display: flex; align-items: center; gap: calc(12 * var(--u)); color: var(--green); font-size: calc(16 * var(--u)); }
.a-tx-h small { flex: 1; font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: calc(1.2 * var(--u)); }
.a-tx p { margin-top: calc(2 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor { margin-top: calc(12 * var(--u)); overflow: hidden; border-radius: calc(20 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--divider); animation: focusRing .4s 2.8s forwards; }
@keyframes focusRing { to { box-shadow: inset 0 0 0 calc(1.4 * var(--u)) var(--green); } }
.tb { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--divider); color: var(--text); font-size: calc(17 * var(--u)); }
.tb b { font-size: calc(14 * var(--u)); font-weight: 700; }
.tb .it { font-style: italic; } .tb .un { text-decoration: underline; }
.ed-body { position: relative; min-height: calc(70 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
.ph-text { position: absolute; color: var(--muted); animation: hide .2s 2.9s forwards; }
.type { width: max-content; max-width: 100%; white-space: nowrap; clip-path: inset(0 100% 0 0); animation: type .7s steps(var(--n)) var(--t) forwards; }
@keyframes type { to { clip-path: inset(0); } }

/* 2 organize */
.cats .sel-out { animation: catScroll .5s .3s var(--ease) forwards, unsel .4s .9s forwards; }
@keyframes catScroll { to { margin-left: calc(-84 * var(--u)); } }
.cats .sel-out svg, .cats .sel-out b { animation: unselIn .4s .9s forwards; }
.cats .sel-in { animation: sel .4s .9s forwards; }
.cats .sel-in svg, .cats .sel-in b { animation: selIn .4s .9s forwards; }
@keyframes unsel { to { background: #fff; color: var(--text); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--divider); font-weight: 500; } }
@keyframes unselIn { to { color: var(--c, var(--text)); } }
@keyframes sel { to { background: var(--green); color: #fff; box-shadow: none; font-weight: 600; } }
@keyframes selIn { to { color: #fff; } }
.cats .sel-out b { animation-name: unselB; } .cats .sel-in b { animation-name: selB; }
@keyframes unselB { to { background: var(--sage); color: var(--green); } }
@keyframes selB { to { background: rgba(255, 255, 255, .18); color: #fff; } }
.drop { animation: drop .9s var(--ease) both; animation-delay: calc(1.1s + var(--i) * .22s); }
@keyframes drop { from { opacity: 0; transform: translateY(calc(-40 * var(--u))) rotate(-3deg) scale(.96); } }

/* 3 find */
.s-bar { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(64 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(4 * var(--u)); }
.s-bar .back { width: calc(48 * var(--u)); flex: none; display: grid; place-items: center; font-size: calc(24 * var(--u)); }
.s-field { flex: 1; display: flex; align-items: center; height: calc(48 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(18 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; font-size: calc(15 * var(--u)); }
.typing { white-space: nowrap; clip-path: inset(0 100% 0 0); animation: type 1s steps(7) .4s forwards; }
.caret { width: calc(1.5 * var(--u)); height: calc(20 * var(--u)); margin-left: calc(1 * var(--u)); background: var(--green); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.s-field .x { margin-left: auto; width: calc(36 * var(--u)); font-size: calc(20 * var(--u)); color: var(--muted); opacity: 0; animation: show .2s 1.4s forwards; }
.results { padding: 0 calc(20 * var(--u)); }
.res { animation: rise .7s var(--ease) both; animation-delay: calc(1.6s + var(--i) * .15s); }
mark { padding: 0 calc(2 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(214, 162, 74, .35); color: var(--text); animation: markIn 1s 2.2s both; }
@keyframes markIn { from { background: transparent; } }
.callout { position: absolute; z-index: 10; right: calc(100% + .4rem); top: 17%; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 1rem; background: var(--amber); color: #fff; font-size: .85rem; font-weight: 600; white-space: nowrap; box-shadow: 0 16px 30px -14px rgba(120, 80, 20, .6); opacity: 0; transform: translateX(-12px); transition: all .6s var(--ease); }
.callout::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: var(--amber); }
.story[data-step="3"] .callout { opacity: 1; transform: none; transition-delay: 2.2s; }

/* 4 remember */
.t-bar { display: flex; align-items: center; justify-content: space-between; height: calc(56 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u)); font-size: calc(24 * var(--u)); }
.t-bar h3 { font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: calc(-.2 * var(--u)); }
.tabs { position: relative; display: flex; height: calc(44 * var(--u)); margin: 0 calc(20 * var(--u)) calc(10 * var(--u)); padding: calc(4 * var(--u)); border-radius: 999px; background: var(--sage); }
.tabs .ind { position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); bottom: calc(4 * var(--u)); width: calc(50% - calc(4 * var(--u))); border-radius: 999px; background: var(--green); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(36, 92, 74, .25); }
.tabs span { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); color: #1d4a3b; font-weight: 600; }
.tabs span svg { font-size: calc(16 * var(--u)); }
.tabs span.on { color: #fff; }
.cnt { height: calc(16 * var(--u)); overflow: hidden; padding: 0 calc(7 * var(--u)); border-radius: 999px; background: rgba(36, 92, 74, .12); font-size: calc(11 * var(--u)); font-weight: 700; line-height: calc(16 * var(--u)); }
.tabs .on .cnt { background: rgba(255, 255, 255, .2); }
.cnt i { display: block; font-style: normal; animation: count .3s 3s forwards; }
@keyframes count { to { transform: translateY(-100%); } }
.tlist { padding: 0 calc(20 * var(--u)); }
.tick .check { background-color: transparent; background-size: 0; border-color: var(--divider); animation: tickOn .35s 2.6s forwards; }
@keyframes tickOn { to { background-color: var(--green); background-size: 75%; border-color: var(--green); } }
.tick .nc-top b { background: linear-gradient(var(--muted), var(--muted)) 0 55% / 0 calc(1.2 * var(--u)) no-repeat; width: fit-content; flex: 0 1 auto; margin-right: auto; animation: strike .4s 2.8s forwards; }
@keyframes strike { to { background-size: 100% calc(1.2 * var(--u)); color: var(--muted); } }
.notif { position: absolute; z-index: 6; top: calc(-32 * var(--u)); left: calc(10 * var(--u)); right: calc(10 * var(--u)); display: flex; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(255, 255, 255, .97); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) calc(-6 * var(--u)) rgba(23, 27, 25, .35); animation: notif 2.4s .3s var(--ease) both; }
@keyframes notif { 0% { transform: translateY(-140%); } 18%, 75% { transform: none; } 100% { transform: translateY(-140%); } }
.n-ic { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--amber); font-size: calc(16 * var(--u)); }
.notif small { color: var(--muted); font-size: calc(11 * var(--u)); }
.notif b { display: block; font-size: calc(14 * var(--u)); }
.notif p { color: var(--muted); font-size: calc(13 * var(--u)); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav { gap: 1rem; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 6.5rem; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-stage { height: 560px; }
  .phone-hero { --pw: 230px; }
  .frag { scale: .75; }
  .callout { right: auto; left: 50%; top: -1.2rem; translate: -50% 0; font-size: .75rem; }
  .callout::after { display: none; }
  .frag-note { display: none; }
  .story-pin { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding-top: 5.5rem; row-gap: .5rem; }
  .story-steps { height: 11.5rem; order: 2; }
  .story-steps .num { font-size: 2.4rem; -webkit-text-stroke-width: 1px; }
  .story-steps h3 { font-size: 1.8rem; margin: 0 0 .4rem; }
  .story-steps p { font-size: .95rem; line-height: 1.5; }
  .story-stage { order: 3; align-self: start; }
  .phone-story { --pw: min(56vw, 30vh, 260px); transform: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .t-wide { grid-column: auto; }
  .tile-art { position: static; margin-top: 1.2rem; }
  .frag-photo { --x: -30% !important; }
  .frag-task { --x: 30% !important; }
  .frag-voice { --x: 22% !important; --y: -36% !important; }
  .frag-bell { display: none; }
  .moment:nth-child(even) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .leaves, .motes { display: none; }
}

/* FAQ */
.faq { max-width: 48rem; margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) clamp(16px, 6vw, 6rem) 0; }
.faq .big-title { margin-bottom: 2rem; }
.faq details { border-bottom: 1px solid var(--divider); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style-position: outside; }
.faq details p { color: var(--muted); line-height: 1.6; margin-top: .6rem; }

/* Legal pages */
.legal { max-width: 46rem; margin: 0 auto; padding: 3rem clamp(16px, 6vw, 3rem) 5rem; line-height: 1.7; }
.legal-top { padding: 1.5rem clamp(16px, 6vw, 6rem); border-bottom: 1px solid var(--divider); }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--green); line-height: 1.15; }
.legal .updated { color: var(--muted); margin: .5rem 0 2rem; }
.legal h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.3rem; margin: .5rem 0; }
.legal li { margin: .35rem 0; }
.legal a { color: var(--green); }
.foot-links { display: flex; gap: 1.2rem; }
.foot-links a { color: inherit; }