/* Ritual typography: stronger editorial copy without changing scroll timing. */
.story .step{gap:24px}
.story .step>div{min-width:0}
.story .step h3{font-size:clamp(36px,3.55vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.055em;margin-bottom:22px;max-width:430px;text-wrap:balance}
.story .step p{font-size:19px;font-weight:500;line-height:1.75;color:#61454f;max-width:395px}
.story .step-num{width:44px;height:44px;font-size:14px;font-weight:800;background:var(--surface)}
.story-scroll .step.on .step-num{box-shadow:0 5px 20px #ef396620}
.story-static .step{grid-template-columns:44px minmax(0,1fr)}
.story-static .step h3{color:var(--text)}
@media(max-width:1050px) and (min-width:781px){.story{gap:44px}.story .step{gap:16px}.story .step h3{font-size:37px}.story .step p{font-size:18px}}
@media(max-width:780px){.story .step{column-gap:16px}.story .step h3{font-size:clamp(30px,7.9vw,42px);margin-bottom:17px}.story .step p{font-size:17px;line-height:1.75;max-width:none}.story .step-num{margin-top:2px}}

/* Each card has a small, bespoke scene. Hover moves its layers, not just its box. */
.bento-v2{gap:22px}
.bento-v2 .feature-card{min-height:515px;padding:36px 36px 0;border:1px solid #e7dde199;isolation:isolate;box-shadow:0 3px 10px #3d1a2803;scroll-margin-top:110px;transition:translate .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.bento-v2 .feature-card:hover{transform:none}
.motion .bento-v2 .feature-card{transition:opacity .7s ease calc(var(--i,0)*70ms),transform .7s ease calc(var(--i,0)*70ms),translate .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.bento-v2 .card-copy{position:relative;z-index:2}
.bento-v2 .eyebrow{margin:0 0 16px;font-size:10px}
.bento-v2 h3{font-size:34px;line-height:1.1;max-width:none}
.bento-v2 .card-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;max-width:400px;margin-top:18px}
.feature-link::after{content:'';position:absolute;inset:-36px -36px auto;height:515px;z-index:4;border-radius:var(--radius)}
.feature-link:focus-visible{outline:none}
.bento-v2 .feature-card:focus-within{outline:3px solid var(--accent-ink);outline-offset:5px}
.card-arrow{position:absolute;right:0;top:0;width:30px;height:30px;border:1px solid #3d1a2818;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:500;color:var(--muted);transition:background .3s,color .3s,rotate .4s}
.bento-v2 .chat h3{padding-right:24px}
.bento-v2 .dark{background:var(--plum);border-color:#ffffff12}
.bento-v2 .dark .card-arrow{border-color:#ffffff25;color:#f7cada}
.bento-v2 .games{background:radial-gradient(ellipse at 60% 110%,#7b1a42,transparent 72%),var(--plum)}
.bento-v2 .memories{background:#f7ecdf}
.bento-v2 .widgets{background:var(--pink)}
.bento-v2 .widgets h3,.bento-v2 .widgets p{max-width:none}
.bento-v2 .save{background:linear-gradient(125deg,#6b2540,var(--plum))}
.bento-v2 .prompts{background:#fbefe5}
.scene{position:relative;height:250px;margin-top:30px;pointer-events:none;user-select:none;z-index:1}
.scene *{box-sizing:border-box}
.scene svg{width:48px;height:48px}
.scene img{width:100%;height:100%;object-fit:cover}
.scene small{display:block}
.scene-bar{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;border-bottom:1px solid #e7dde1;padding-bottom:12px;line-height:1.5}
.scene-bar small{font-size:8px;font-weight:500;color:var(--muted)}
.pair-avatar{height:31px;width:31px;border-radius:50%;display:grid;place-items:center;background:var(--blush);color:var(--accent-ink);font-size:20px;font-weight:500}
.tiny-heart{margin-left:auto;color:var(--accent);font-size:16px}
.chat-scene{margin-top:35px;height:252px}
.chat-orbit{position:absolute;left:9%;top:-4%;width:75%;height:100%;border:1px solid #ef396622;border-radius:50%;transform:rotate(-15deg)}
.chat-board{position:relative;width:82%;max-width:440px;height:256px;margin:auto;background:var(--cream);border:1px solid #e7dde1;border-radius:20px 20px 0 0;padding:16px 20px;box-shadow:0 15px 35px #3d1a2814;transform:translateY(16px) rotate(-4deg);transition:transform .65s cubic-bezier(.16,1,.3,1)}
.chat-moment{position:relative;width:67%;height:140px;margin:16px 0 0 10%;border:5px solid var(--surface);border-radius:12px;overflow:hidden;transform:rotate(3deg)}
.chat-moment img{object-position:50% 30%}
.chat-moment>span{position:absolute;bottom:0;left:0;right:0;background:#3d1a2899;color:#fff;font-size:8px;padding:6px 9px}
.chat-bubble{position:absolute;font-size:11px;line-height:1.5;padding:11px 15px;border-radius:13px;box-shadow:0 7px 24px #3d1a2812;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.chat-bubble.incoming{top:83px;left:-26px;background:var(--surface);color:var(--plum);transform:rotate(3deg)}
.chat-bubble.incoming span{margin-left:8px;color:var(--accent);font-size:16px}
.chat-bubble.outgoing{right:-30px;bottom:27px;background:var(--accent);color:var(--surface);transform:rotate(4deg)}
.chat-reaction{position:absolute;right:23%;top:164px;background:var(--blush);border:3px solid var(--surface);color:var(--accent);border-radius:50%;height:33px;width:33px;display:grid;place-items:center;font-size:15px;transition:transform .5s}

.play-scene{height:270px;margin-top:24px}
.play-orbit{position:absolute;left:50%;top:12px;height:260px;width:260px;border:1px solid #ffffff15;border-radius:50%;transform:translateX(-50%)}
.play-orbit::after{content:'';position:absolute;inset:27px;border:1px dashed #ffffff18;border-radius:50%}
.play-card{position:absolute;left:50%;top:42px;width:122px;height:166px;border:1px solid #ffffff60;border-radius:20px;box-shadow:0 12px 25px #140b1429;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:17px 10px;background:#f7e9dd;color:var(--plum);transition:transform .65s cubic-bezier(.16,1,.3,1)}
.play-card small{font-size:8px;font-weight:800;letter-spacing:.14em}
.play-card>span{font-size:12px;font-weight:600;letter-spacing:-.02em}
.play-card svg{width:48px;height:48px}
.play-you{transform:translateX(-132%) rotate(-17deg)}
.play-them{transform:translateX(33%) rotate(17deg);background:#f9dfe7}
.play-together{transform:translateX(-50%) translateY(-14px) rotate(-3deg);background:var(--accent);color:var(--surface);z-index:1;box-shadow:0 15px 35px #200b2b44}
.play-together::before{content:'';position:absolute;inset:7px;border:1px solid #ffffff40;border-radius:14px;pointer-events:none}
.play-spark{position:absolute;color:#ffb9ce;font-size:26px;transition:transform .65s}
.spark-one{top:13px;left:9%;transform:rotate(-15deg)}
.spark-two{right:8%;bottom:31px;font-size:18px}

.memories-scene{height:265px;margin-top:33px}
.memory-line{position:absolute;width:100%;height:170px;border:1px dashed #ba8d7960;border-radius:50%;left:0;top:22px;transform:rotate(-16deg)}
.memory-print{position:absolute;top:16px;width:47%;height:203px;max-width:185px;padding:8px 8px 29px;background:var(--cream);box-shadow:0 10px 25px #72503726;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.memory-print img{object-position:center}
.memory-print>span:last-child{display:block;text-align:center;font-size:10px;padding-top:7px;letter-spacing:-.01em;color:var(--plum)}
.print-one{left:0;transform:rotate(-10deg)}
.print-two{left:45%;transform:translateY(25px) rotate(9deg)}
.paper-tape{position:absolute;left:32%;top:-9px;width:38%;height:23px;background:#d8b9ab99;transform:rotate(-3deg);z-index:1}
.memory-note{position:absolute;right:4px;top:10px;transform:rotate(12deg);font-size:10px;line-height:1.6;letter-spacing:.01em;color:var(--accent-ink)}
.memory-note svg{width:36px;height:36px;margin:5px auto}
.memory-sticker{position:absolute;left:12%;bottom:15px;z-index:1;padding:8px 13px;background:var(--surface);border:1px solid #d8b9ab;border-radius:99px;font-size:9px;transform:rotate(-6deg);transition:transform .6s}

.widget-scene{height:274px;margin-top:24px}
.widget-phone{position:absolute;top:0;left:50%;width:200px;height:345px;padding:25px 13px 13px;border:6px solid var(--plum);outline:1px solid #a78996;background:linear-gradient(150deg,#ffdbe5,#a48c9f);border-radius:31px;transform:translateX(-37%) rotate(8deg);box-shadow:9px 19px 35px #3d1a2826;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.phone-island{position:absolute;width:62px;height:12px;top:8px;left:50%;transform:translateX(-50%);background:var(--plum);border-radius:99px}
.phone-greeting{text-align:center;font-size:16px;font-weight:600;color:var(--plum);padding:14px 0 16px;letter-spacing:-.035em}
.home-widget{height:153px;position:relative;border:4px solid var(--surface);border-radius:19px;overflow:hidden;background:var(--surface);box-shadow:0 3px 10px #3d1a2815}
.home-widget>span{position:absolute;left:0;right:0;bottom:0;padding:7px 8px;background:var(--surface);font-size:8px;color:var(--plum)}
.home-widget b{color:var(--accent);font-size:11px;margin-right:3px}
.home-apps{display:flex;gap:10px;margin-top:16px;justify-content:center}
.home-apps span{width:31px;height:31px;border-radius:9px;background:#fefcfd88;display:grid;place-items:center;font-size:20px;color:var(--plum)}
.phone-dock{display:flex;gap:15px;border-radius:15px;background:#fefcfd55;margin-top:18px;padding:9px;justify-content:center}
.phone-dock i{width:25px;height:25px;border-radius:7px;background:#3d1a2850}
.widget-streak{position:absolute;top:84px;left:8%;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid #e7dde1;border-radius:16px;padding:12px 17px;transform:rotate(-7deg);box-shadow:0 12px 25px #3d1a281c;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.widget-streak svg{width:25px;height:31px;color:var(--accent)}
.widget-streak>span{font-size:12px;font-weight:700;line-height:1.7;color:var(--plum)}
.widget-streak small{font-size:9px;color:var(--muted);font-weight:500}
.widget-star{position:absolute;right:9%;top:0;color:var(--accent);font-size:32px;transition:transform .6s}

.bento-v2 .mini-feature{min-height:360px}
.bento-v2 .mini-feature h3{font-size:30px}
.bento-v2 .mini-feature .feature-link::after{height:360px}
.save-scene{height:155px;margin-top:20px}
.streak-path{position:absolute;top:66px;left:13%;right:13%;height:1px;background:linear-gradient(90deg,#ffaac230,#ffaac2,#ffaac230)}
.streak-day{position:absolute;top:38px;width:70px;height:70px;background:#ffffff0b;border:1px solid #ffffff25;border-radius:20px;display:grid;place-content:center;text-align:center;transition:transform .6s}
.streak-day>span{font-size:22px;color:#f6c4d2;line-height:1.5}
.streak-day small{font-size:6px;letter-spacing:.12em;color:#f6c4d2}
.day-before{left:13%;transform:rotate(-8deg)}
.day-after{right:13%;transform:rotate(8deg)}
.streak-restore{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:100px;display:flex;align-items:center;flex-direction:column;gap:7px;color:#ff7e9f;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.streak-restore svg{width:49px;height:58px;filter:drop-shadow(0 5px 18px #ef396644)}
.streak-restore span{color:var(--surface);font-size:9px;background:#ffffff12;border:1px solid #ffffff25;padding:4px 11px;border-radius:99px}
.save-spark{position:absolute;left:59%;top:0;color:#ffb9ce;font-size:19px;transition:transform .6s}
.prompt-scene{height:159px;margin-top:22px}
.prompt-back{position:absolute;left:12%;right:11%;top:14px;bottom:8px;background:#efc4b1;border-radius:17px;transform:rotate(5deg);transition:transform .6s}
.prompt-note{position:absolute;left:10%;right:10%;top:8px;padding:15px 21px;background:var(--cream);border:1px solid #e7cfbf;border-radius:17px;transform:rotate(-3deg);box-shadow:0 7px 22px #9a69451a;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.prompt-eyebrow{display:block;font-size:7px;font-weight:700;letter-spacing:.13em;color:#80616a}
.prompt-example{display:block;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.04em;margin:8px 0;color:var(--plum)}
.prompt-footer{display:flex;justify-content:space-between;font-size:7px;color:var(--muted);border-top:1px solid var(--border);padding-top:7px}
.prompt-footer b{font-size:12px;color:var(--accent)}
.prompt-camera{position:absolute;right:5%;top:-7px;width:48px;height:48px;border-radius:15px;box-shadow:0 6px 17px #3d1a2815;background:var(--surface);color:var(--accent-ink);display:grid;place-items:center;transform:rotate(10deg);transition:transform .6s}
.prompt-camera svg{width:30px;height:30px}
.prompt-spark{position:absolute;left:3%;bottom:20px;font-size:24px;color:var(--accent);transition:transform .6s}

/* Transforms are finite and deliberate. No wandering animations or touch-only hover. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bento-v2 .feature-card:hover{translate:0 -7px;border-color:#d8a6b6;box-shadow:0 15px 35px #3d1a2812}
  .bento-v2 .dark:hover{border-color:#ff9fbc70;box-shadow:0 15px 35px #3d1a2826}
  .feature-card:hover .card-arrow{background:var(--accent-ink);color:var(--surface);rotate:6deg}
  .feature-card:hover .chat-board{transform:translateY(5px) rotate(-1deg)}
  .feature-card:hover .incoming{transform:translate(-7px,-5px) rotate(-2deg)}
  .feature-card:hover .outgoing{transform:translate(7px,-4px) rotate(0deg)}
  .feature-card:hover .chat-reaction{transform:translateY(-5px) scale(1.16)}
  .feature-card:hover .play-you{transform:translateX(-146%) translateY(-6px) rotate(-24deg)}
  .feature-card:hover .play-them{transform:translateX(46%) translateY(-6px) rotate(24deg)}
  .feature-card:hover .play-together{transform:translateX(-50%) translateY(-23px) rotate(1deg)}
  .feature-card:hover .spark-one{transform:translate(-3px,-6px) rotate(16deg)}
  .feature-card:hover .spark-two{transform:translate(5px,3px) rotate(30deg)}
  .feature-card:hover .print-one{transform:translate(-5px,-8px) rotate(-14deg)}
  .feature-card:hover .print-two{transform:translate(5px,12px) rotate(13deg)}
  .feature-card:hover .memory-sticker{transform:translateY(-4px) rotate(-2deg)}
  .feature-card:hover .widget-phone{transform:translateX(-37%) translateY(-9px) rotate(4deg)}
  .feature-card:hover .widget-streak{transform:translate(-6px,-5px) rotate(-3deg)}
  .feature-card:hover .widget-star{transform:rotate(25deg) scale(1.12)}
  .feature-card:hover .day-before{transform:translateX(8px) rotate(-3deg)}
  .feature-card:hover .day-after{transform:translateX(-8px) rotate(3deg)}
  .feature-card:hover .streak-restore{transform:translateX(-50%) translateY(-7px)}
  .feature-card:hover .save-spark{transform:translate(4px,-5px) rotate(35deg)}
  .feature-card:hover .prompt-note{transform:translateY(-7px) rotate(0deg)}
  .feature-card:hover .prompt-back{transform:rotate(8deg)}
  .feature-card:hover .prompt-camera{transform:translate(4px,-5px) rotate(0deg)}
  .feature-card:hover .prompt-spark{transform:translate(-3px,-5px) rotate(30deg)}
}
.bento-v2 .feature-card:focus-within .card-arrow{background:var(--accent-ink);color:var(--surface)}
@media(max-width:1050px) and (min-width:781px){
  .bento-v2 .feature-card{padding:30px 28px 0;min-height:530px}
  .bento-v2 h3{font-size:30px}.bento-v2 .mini-feature h3{font-size:28px}
  .feature-link::after{inset:-30px -28px auto;height:530px}
  .bento-v2 .mini-feature{min-height:375px}.bento-v2 .mini-feature .feature-link::after{height:375px}
  .play-card{width:103px;height:159px}.play-you{transform:translateX(-126%) rotate(-17deg)}.play-them{transform:translateX(26%) rotate(17deg)}
  .memory-print{height:185px}.memory-sticker{bottom:20px}
  .chat-board{width:85%}.chat-bubble{font-size:9px;padding:10px 12px}
  .widget-streak{left:0}.widget-phone{transform:translateX(-33%) rotate(8deg)}
}
@media(max-width:780px){
  .bento-v2{gap:18px}.bento-v2 .feature-card{grid-column:span 12;min-height:480px;padding:29px 26px 0;border-radius:27px}
  .bento-v2 h3{font-size:31px;line-height:1.12}.bento-v2 .card-copy>p:not(.eyebrow){font-size:14px;line-height:1.75;max-width:440px}
  .feature-link::after{inset:-29px -26px auto;height:480px;border-radius:27px}
  .card-arrow{width:27px;height:27px;font-size:17px;right:-3px}
  .bento-v2 .games{min-height:490px}.bento-v2 .games .feature-link::after{height:490px}
  .bento-v2 .widgets{min-height:480px!important}.bento-v2 .widgets h3,.bento-v2 .widgets p{max-width:none}
  .scene{max-width:440px;margin-left:auto;margin-right:auto}.chat-board{width:83%;max-width:390px}
  .chat-bubble{font-size:10px}.chat-bubble.incoming{left:-22px}.chat-bubble.outgoing{right:-20px}
  .play-scene{height:245px;margin-top:18px}.play-card{width:115px;height:158px}
  .memories-scene{height:255px;max-width:370px}.memory-print{max-width:175px}
  .widget-scene{height:254px}.widget-phone{left:56%;width:185px}.widget-streak{left:3%;top:95px;padding:11px 14px}
  .bento-v2 .mini-feature{min-height:348px}.bento-v2 .mini-feature h3{font-size:29px}.bento-v2 .mini-feature .feature-link::after{height:348px}
  .save-scene{height:155px;max-width:400px}.streak-day{width:61px;height:65px}.day-before{left:9%}.day-after{right:9%}
  .prompt-note{left:5%;right:5%;padding:15px 18px}.prompt-back{left:7%;right:6%}.prompt-camera{right:0}.prompt-spark{left:0;font-size:20px}.prompt-example{font-size:21px}
}
@media(max-width:380px){
  .bento-v2 .feature-card{padding-left:23px;padding-right:23px}.bento-v2 h3{font-size:28px}.bento-v2 .mini-feature h3{font-size:27px}
  .feature-link::after{left:-23px;right:-23px}.card-arrow{right:-5px;width:25px;height:25px}
  .play-card{width:101px;height:151px}.play-you{transform:translateX(-126%) rotate(-17deg)}.play-them{transform:translateX(26%) rotate(17deg)}
  .chat-bubble{font-size:9px;padding:10px 11px}.chat-board{width:84%;padding:15px}
  .chat-moment{width:75%;margin-left:5%}.widget-streak{left:-3%;padding:10px 11px}.widget-streak>span{font-size:11px}
  .memory-print{height:180px}.print-two{left:47%}.memory-note{font-size:8px}.memory-sticker{bottom:27px}
}
@media(prefers-reduced-motion:reduce){.bento-v2 .feature-card{translate:none}.bento-v2 *, .bento-v2 *::before,.bento-v2 *::after{transition:none!important;animation:none!important}}