/* ==========================================================================
   MIMIC Curated
   hero stack · feature rows · message river · occasions · compare
   ========================================================================== */

/* ── Hero: a card, a video and a notification, all for one fan ────────── */
.cstack{position:relative;width:min(92%,520px);aspect-ratio:480/560;container-type:inline-size;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.cstack__vmsg{--vw:74cqw;position:absolute;left:0;top:0;rotate:-3deg}
.cstack__gcard{--gw:57cqw;position:absolute;right:0;bottom:0;rotate:4deg;animation:floaty 9s ease-in-out infinite}
.cstack__toast{position:absolute;right:-6%;top:-4%;font-size:clamp(.66rem,3.3cqw,1rem);animation:floaty 6s ease-in-out -2s infinite}
/* sized from its own column, so “Hear from them.” always stays on one line */
.page-curated .phero__copy{container-type:inline-size}
.page-curated .phero .hero-title{font-size:clamp(2.75rem,min(12.3cqw,13.5vh),6.9rem)}
@media (max-width:940px){.page-curated .phero__visual{min-height:0;padding-block:2.5rem 1rem}.cstack{width:min(88%,430px)}}

/* ── Feature rows ─────────────────────────────────────────────────────── */
.products{background:radial-gradient(60% 30% at 50% 0%,rgba(var(--accent-rgb),.1),transparent 70%)}
.products .section-head{margin-bottom:clamp(3.5rem,8vw,7rem)}
.products .namefield{margin-top:.6rem}
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.feat+.feat{margin-top:clamp(5rem,11vw,10rem)}
.feat--flip .feat__viz{order:2}
.feat__viz{position:relative;display:grid;justify-items:center;gap:1.9rem;perspective:1400px}
.feat__halo{position:absolute;left:50%;top:42%;width:min(108%,600px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--accent-rgb),.42),rgba(var(--accent-rgb),.08) 55%,transparent 72%);pointer-events:none}
.feat__copy{display:grid;gap:1.4rem}
.feat__copy .h2{font-size:clamp(2rem,4vw,3.75rem)}
.featlist{margin:.4rem 0 0}
.featlist>div{padding:1.05rem 0;border-top:1px solid var(--line)}
.featlist>div:last-child{border-bottom:1px solid var(--line)}
.featlist dt{font-weight:650;letter-spacing:-.01em}
.featlist dd{margin:.1rem 0 0;color:var(--text-3);font-size:var(--fs-small);line-height:1.5}
.feat__note{color:var(--text-3)}
@media (max-width:900px){.feat{grid-template-columns:1fr}.feat--flip .feat__viz{order:0}}

/* the greeting card, with its envelope */
.feat__gcard{--gw:clamp(264px,29vw,390px);position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-3deg);transform-style:preserve-3d}
.feat__gcard .gcard__hi,.feat__gcard .gcard__msg,.feat__gcard .gcard__top span:last-child{transition:opacity .28s,filter .28s,transform .28s}
.feat__gcard.is-swap .gcard__hi,.feat__gcard.is-swap .gcard__msg,.feat__gcard.is-swap .gcard__top span:last-child{opacity:0;filter:blur(6px);transform:translateY(6px)}
.envelope{position:absolute;left:50%;top:5%;width:clamp(280px,31vw,420px);aspect-ratio:420/290;transform:translateX(-40%) rotate(7deg);border-radius:18px;border:1px solid var(--line-2);background:linear-gradient(160deg,#0f1626,#060810);box-shadow:0 40px 80px -30px #000}
.envelope::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom right,transparent 49.7%,rgba(255,255,255,.12) 50%,transparent 50.3%),linear-gradient(to bottom left,transparent 49.7%,rgba(255,255,255,.12) 50%,transparent 50.3%)}
.occ{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.occ button{padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(8,11,19,.6);font-size:.875rem;font-weight:600;color:var(--text-2);transition:background-color .25s,border-color .25s,color .25s,transform .4s var(--ease-out)}
.occ button:hover{color:#fff;border-color:var(--line-3);transform:translateY(-1px)}
.occ button.is-on{background:#fff;border-color:#fff;color:#05070c}

/* the video message, playing */
.feat__vmsg{--vw:clamp(300px,39vw,540px);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
/* one feed per player; the chosen one is shown */
.feat__feed{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-soft)}
.feat__feed.is-on{opacity:1}
.feat__feed.is-on .player--photo{transform-origin:50% 100%;animation:idle 9s ease-in-out infinite}
@keyframes idle{50%{transform:scale(1.014) translate3d(.25%,0,0)}}
/* pick a player */
.squad{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;width:min(100%,540px)}
.squad__p{display:grid;gap:.5rem;text-align:left;opacity:.55;transition:opacity .3s,transform .4s var(--ease-out)}
.squad__p:hover{opacity:.9;transform:translateY(-2px)}
.squad__p.is-on{opacity:1}
.squad__thumb{display:block;border-radius:12px;box-shadow:none;transition:border-color .3s,box-shadow .3s}
.squad__p.is-on .squad__thumb{border-color:rgba(var(--accent-rgb),.9);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.28)}
.squad__t{display:flex;gap:.4rem;align-items:baseline;font-size:.8125rem;font-weight:600;color:var(--text-2);white-space:nowrap}
.squad__t b{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;color:var(--accent-t)}
@media (max-width:420px){.squad__t{font-size:.6875rem}.squad__t b{display:none}}
.feat__vmsg::after{content:'';position:absolute;inset:52% 0 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));pointer-events:none}
.vmsg__corner{position:absolute;right:.95em;top:.95em;z-index:1;display:flex;align-items:center;gap:.8em;font-family:var(--font-mono);font-size:.6em;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.vmsg__bars{flex:none;color:#fff;font-size:1.5em;height:1.5em}
.vmsg .vmsg__sub{position:absolute;left:7%;right:7%;bottom:9%;z-index:1;margin:0;text-align:center;font-size:1.5em;line-height:1.14;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8);transition:opacity .4s}
.vmsg__sub b{font-weight:400;color:var(--twin)}
.vmsg__sub .caret{display:inline-block;width:.07em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--twin);animation:caret 1s steps(2) infinite}
.feat__vmsg .vmsg__prog{z-index:1}

/* ── The message river ────────────────────────────────────────────────── */
.river-sec{overflow:hidden}
.river-sec .section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.river{display:grid;gap:1rem;padding-block:.5rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.river__row{display:flex;width:max-content;animation:river 70s linear infinite}
.river__row--rev{animation-direction:reverse}
.river:hover .river__row{animation-play-state:paused}
@keyframes river{to{transform:translate3d(-50%,0,0)}}
.mini{flex:none;width:290px;margin-right:1rem;display:grid;gap:.9rem;padding:1.1rem 1.25rem;border-radius:20px;border:1px solid var(--line);background:radial-gradient(90% 60% at 100% 0%,rgba(57,205,253,.14),transparent 65%),linear-gradient(160deg,#0e1524,#06080f)}
.mini__top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4)}
.mini__t{min-height:2.3em;font-size:1.5rem;line-height:1.12;letter-spacing:-.01em}
.mini__sig{display:flex;justify-content:space-between;align-items:center;padding-top:.7rem;border-top:1px solid var(--line);font-family:var(--font-serif);font-style:italic;font-size:1rem;color:var(--text-2)}
.mini__sig .bars{color:var(--twin);font-size:.8rem;height:1.3em}

/* ── Occasions ────────────────────────────────────────────────────────── */
.occgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.4vw,1.25rem)}
.occcard{display:grid;gap:.7rem;align-content:start;justify-items:start;padding:clamp(1.4rem,2.4vw,2rem);transition:border-color .5s,transform .8s var(--ease-out)}
.occcard:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-4px)}
/* each card opens with a line the fan might actually receive */
.occcard__line{width:100%;min-height:3.4em;margin-bottom:.5rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.occcard .occcard__line{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.14;color:#fff}
.occcard__tag{margin-top:.5rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-t)}
.occcard__line b{font-weight:400;color:var(--twin)}
.occcard p{color:var(--text-3);font-size:var(--fs-small);line-height:1.55}
@media (max-width:940px){.occgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.occgrid{grid-template-columns:1fr}}

/* step visuals that only this page uses */
.step__viz--make{gap:.4rem;padding:1rem 1.4rem}
.mk{padding:.3rem .75rem;border-radius:999px;border:1px solid rgba(57,205,253,.4);background:rgba(57,205,253,.1);font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;color:#fff;animation:mk 4.2s ease-in-out infinite}
.mk:nth-child(2){animation-delay:-.7s}
.mk:nth-child(3){animation-delay:-1.4s}
.mk:nth-child(4){animation-delay:-2.1s}
.mk:nth-child(5){animation-delay:-2.8s}
.mk:nth-child(6){animation-delay:-3.5s}
@keyframes mk{0%,100%{opacity:.3;transform:scale(.95)}40%,60%{opacity:1;transform:none}}
.step__viz--send .toast{animation:floaty 5s ease-in-out infinite}

/* ── Compare ──────────────────────────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.4vw,1.25rem)}
.cmp__col{display:grid;gap:1.1rem;align-content:start;justify-items:start;padding:clamp(1.75rem,3.5vw,3rem);border-radius:var(--r-xl);background:radial-gradient(80% 46% at 50% 0%,rgba(var(--accent-rgb),.18),transparent 72%),rgba(255,255,255,.02);transition:border-color .5s}
.cmp__col:hover{border-color:rgba(var(--accent-rgb),.5)}
.cmp__col .eyebrow{display:flex;align-items:center}
.cmp__col .h2{font-size:clamp(1.8rem,3.2vw,3rem);min-height:2.05em}
.cmp__col .rlist{width:100%;margin:.5rem 0 1.1rem}
@media (max-width:900px){.cmp{grid-template-columns:1fr}}
@media (max-width:480px){.cmp__col .checks{grid-template-columns:1fr}}